/* Stufe 2 der Oberfläche Werkbank (BI Client 4, 10.11.2026): Phasenband und Kennzahlen im Kopf. Nur Variablen aus oberflaeche.css. */
#top .ui-phasen>span{display:inline-flex;align-items:center;gap:var(--ui-s1);padding:4px 12px;font-size:var(--ui-fs1)}
#top .ui-phasen>span:first-child{border-radius:var(--ui-rs) 0 0 var(--ui-rs)}#top .ui-phasen>span:last-child{border-radius:0 var(--ui-rs) var(--ui-rs) 0}
#top .ui-phasen .dot{margin-right:2px;border:1px solid var(--panel)}
#top .ui-phasen>.on .dot{border-color:var(--accText)}
#top .ui-phasen svg.ui-ic{width:16px;height:16px}
#top .ui-phasen>.done::before{content:""}
#top .ui-res{display:inline-flex;align-items:center;gap:var(--ui-s1);padding:2px 10px;border:1px solid var(--line);border-radius:var(--ui-rs);background:var(--panel2);font-size:var(--ui-fs1)}
#top .ui-res svg.ui-ic{width:18px;height:18px;color:var(--acc)}
#top{gap:12px}
@media (max-width:1300px){#top .right{display:none}}
/* Produktionsliste als Zeilen (.ui-zeile aus oberflaeche.css) */
.ui-liste{margin-bottom:var(--ui-s2)}.ui-liste>.ui-lbl{padding:var(--ui-s1) 0}
.ui-liste .ui-zeile{padding:var(--ui-s1) 0;gap:var(--ui-s2);font-size:var(--ui-fs1)}
.ui-liste .ui-zeile.aus>span{color:var(--dim)}
.ui-kosten{display:inline-flex;align-items:center;gap:2px;min-width:3.2em;justify-content:flex-end}
.ui-liste svg.ui-ic{width:14px;height:14px;color:var(--acc);vertical-align:-2px}
/* Info am Rand: Reiter */
#infoleiste .ui-reiter{margin-bottom:var(--ui-s2)}
#infoleiste .ui-reiter>button{flex:1;min-height:0;padding:6px 8px;border-radius:0;box-shadow:none;font-size:var(--ui-fs1);transform:none}
#infoleiste .ui-reiter>button:first-child{border-radius:var(--ui-rs) 0 0 var(--ui-rs)}#infoleiste .ui-reiter>button:last-child{border-radius:0 var(--ui-rs) var(--ui-rs) 0}
#infoleiste .ui-reiter>button[aria-selected=true]{background:var(--acc);color:var(--accText);border-color:var(--ui-accDark)}
/* Gefechts-Pop-up: Werkbank-Rahmen wie Karten (2 px Rand, Unterkante), Akzentstreifen oben */
#battle{border:var(--ui-bw) solid var(--line);border-top:4px solid var(--acc);border-radius:var(--r);box-shadow:0 var(--ui-press) 0 var(--line),0 12px 32px var(--ui-shadow);background:var(--panel)}
#top .ui-res .ui-lbl{color:var(--dim)}
@media (max-width:1200px){#top>b{display:none}#top{gap:8px}}

/* Hauptmenü: Wortmarke und Titelbild (Wechselfeuer) */
#modal .box h2 .wortmarke{display:block;margin:0 auto;height:48px;width:auto;max-width:100%}

#modal{background-size:cover;background-position:center}
.symbole{position:absolute;width:0;height:0}

/* Produktion: Hinweis, Grund der Sperre, gewählte Zeile */
.ui-hinweis{font-size:var(--ui-fs1);padding:var(--ui-s2);margin:var(--ui-s1) 0;border-left:3px solid var(--acc,#ff8a1f);background:rgba(255,138,31,.10)}.ui-hinweis.warn{border-left-color:#ff5a5a;background:rgba(255,90,90,.10)}
.ui-grund{display:block;font-size:10px;color:var(--dim)}
.ui-liste .ui-zeile.gewaehlt{background:rgba(255,138,31,.14)}.ui-gew{font-size:var(--ui-fs1);font-weight:700;color:var(--acc,#ff8a1f);white-space:nowrap}

/* Online-Lobby */
.spielcode{font-size:2em;letter-spacing:.2em;text-align:center}
.spielcode-eingabe{text-transform:uppercase;font-size:1.4em;letter-spacing:.15em}
.phasenname{font-size:1.6em;text-align:center}
/* Einklappbare Felder, Raster */
.klapp.zu>*:not(.klappknopf){display:none!important}
.klappknopf{margin:0;font-size:12px;white-space:nowrap}
#ansicht{display:flex;flex-direction:column;align-items:stretch;gap:4px}
#ansicht .zeile{display:grid;grid-template-columns:58px 110px 44px auto;align-items:center;gap:6px}
#ansicht .zeile.zuruck{display:flex;justify-content:flex-end}
#ansicht .zeile>.dim:first-child{text-align:left}
#ansicht .zeile>.dim:nth-child(3){text-align:right}
#ansicht .zeile input{width:110px}
#ton:not(.zu){flex-wrap:wrap;max-width:300px;row-gap:5px}
#ton button.rs{font-size:12px}
/* Phasen-Pop-up: hellgrau, schwarze Schrift */
#modal .box.phase{background:#d8dce1;color:#000;border-color:#9aa1ab}
#modal .box.phase h2,#modal .box.phase p,#modal .box.phase .dim{color:#000}
/* Fußzeile: schmaler schwarzer Streifen darunter */
#app{grid-template-rows:42px 1fr 48px 14px}
#app::after{content:"";grid-column:1/3;background:#000}
html.gross #app{grid-template-rows:54px 1fr auto 14px}
/* Phasenanzeige: oben mittig, blau, weiße Schrift */
#banner,#banner.p0,#banner.p1{top:10px;left:50%;transform:translateX(-50%);max-width:none;text-align:center;background:#2b6cc4;color:#fff;border:2px solid #cfe0f7;padding:5px 22px;white-space:nowrap}
#banner b{font-size:16px;letter-spacing:.04em;color:#fff}