/* STAGED Designer 2.0 (0.30.0) - Optik wie Companion 2.0 (gleiche Farben, 8-px-Raster, Knoepfe, Kopfzeile, Spalten).
   Gilt nur unter /neu (body.ui2); die alte Oberflaeche unter / bleibt unberuehrt. */
body.ui2{--gold:#78f05d;--gold2:#44a32f;--blau:#c94fb0;--rot:#ff5a5a;--gelb:#e0a33b;--bg:#050912;--panel:#0b1220;--panel2:#0e1526;--panel3:#131c31;--line:#1e2a40;--line2:#2a3956;--text:#eef2f7;--dim:#8a95a6;--dim2:#8391a6;--info:#5fb3ff;
  --kopf:56px;--links:272px;--rechts:300px;--sk:64px;--fuss:56px;font:14px/1.5 system-ui,"Segoe UI",sans-serif}
body.ui2 svg.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.ui2 #app{grid-template-rows:var(--kopf) minmax(0,1fr);grid-template-columns:var(--links) minmax(0,1fr) var(--rechts);transition:grid-template-columns .18s}
body.ui2.linksZu #app{grid-template-columns:48px minmax(0,1fr) var(--rechts)}
body.ui2.rechtsZu #app{grid-template-columns:var(--links) minmax(0,1fr) 48px}
body.ui2.linksZu.rechtsZu #app{grid-template-columns:48px minmax(0,1fr) 48px}
@media (max-width:1439px){body.ui2{--links:252px;--rechts:272px}}
body.ui2 #app>header:not(.kopf2){display:none!important}
body.ui2 #coBanner{display:none!important}

/* Knoepfe und Felder (wie Companion) */
.kn2{background:var(--panel3);border:1px solid var(--line2);border-radius:8px;padding:0 16px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--text);white-space:nowrap;text-decoration:none;cursor:pointer;font:inherit}
.kn2:hover{border-color:var(--dim)}
.kn2.prim{background:var(--gold);border-color:var(--gold);color:#06110a;font-weight:600}.kn2.prim:hover{background:#8ff776}
.kn2.leer{background:none;border-color:transparent;color:var(--dim)}.kn2.leer:hover{color:var(--text);border-color:var(--line2)}
.kn2.kl{min-height:32px;padding:0 12px;font-size:13px}
.kn2.ic{padding:0;width:40px}.kn2.kl.ic{width:32px;min-width:32px}
.kn2.voll{display:flex;width:100%;margin-top:8px}
.kn2:disabled,.kn2.aus{opacity:.45;cursor:default}
.feld2{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:8px 12px;min-height:40px;width:100%;color:var(--text);font:inherit}
.feld2:focus{border-color:var(--gold2);outline:none}
body.ui2 kbd{font:11px/1 ui-monospace,monospace;border:1px solid var(--line2);border-radius:4px;padding:2px 5px;color:var(--dim)}
body.ui2 .sym{font-size:13px;line-height:1;width:16px;text-align:center;flex:none}

/* Kopfzeile */
.kopf2{overflow:visible!important;grid-column:1/-1;grid-row:1;height:var(--kopf);display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#08101f,#0a0f1d 60%,#120b1c);min-width:0;position:relative;z-index:30}
.logo2{display:flex;align-items:center;gap:8px;font-weight:700;white-space:nowrap;font-size:15px}
.logo2 i{width:24px;height:24px;border-radius:7px;background:conic-gradient(var(--gold),var(--blau),var(--gold));display:inline-block}
.logo2 small{font-weight:500;color:var(--dim);font-size:11px;border:1px solid var(--line2);border-radius:6px;padding:0 6px}
.kopf2 .projWahl{position:relative}
.kopf2 .projKn{display:flex;align-items:center;gap:8px;max-width:240px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:0 12px;min-height:36px;color:var(--text);cursor:pointer;font:inherit}
.kopf2 .projKn:hover{border-color:var(--gold2)}
.kopf2 .projKn .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.kopf2 .projKn .pf{color:var(--dim);font-size:11px}
.sd2Stand{font-size:11px;color:var(--dim2);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.sd2Stand #stand{font-size:11px}
.projMenue{position:absolute;left:0;top:calc(100% + 6px);width:360px;max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.6);padding:8px;z-index:900;display:flex;flex-direction:column;gap:4px}
.projMenue[hidden]{display:none}
.projMenue .pm{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent;min-height:36px}
.projMenue .pm:hover,.projMenue .pm:focus{background:var(--panel3);outline:none}
.projMenue .pm.an{border-color:var(--line2)}.projMenue .pm.an .n{color:var(--gold)}
.projMenue .pm .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.projMenue .pm small{color:var(--dim);font-size:10.5px;white-space:nowrap}
.projMenue .pm .x{background:none;border:0;color:var(--dim);opacity:.4;cursor:pointer;min-width:28px;min-height:28px}.projMenue .pm:hover .x{opacity:1}
.projMenue .pmNeu,.projMenue .pmAlle{justify-content:flex-start}
.neuForm2{display:flex;flex-direction:column;gap:8px;padding:4px}
.ktit2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:16px 4px 8px;font-weight:600;display:flex;align-items:center;gap:8px}
.ktit2:first-child{margin-top:4px}.ktit2.klick{cursor:pointer}
.mini{font-size:10px;color:var(--dim);letter-spacing:0}
nav.schritte{display:flex;align-items:center;gap:2px;margin:0 auto!important;min-width:0;overflow-x:auto;scrollbar-width:none}
nav.schritte::-webkit-scrollbar{display:none}
nav.schritte button{text-transform:none;letter-spacing:0;font-size:14px;background:none;border:1px solid transparent;border-radius:10px;padding:0 12px;min-height:40px;color:var(--dim);display:flex;align-items:center;gap:8px;white-space:nowrap;position:relative;font:inherit;cursor:pointer}
nav.schritte button:hover{color:var(--text)}
nav.schritte button[aria-current="step"]{color:var(--text);background:var(--panel3);border-color:var(--line2)}
nav.schritte button[aria-current="step"] .sym{color:var(--gold)}
nav.schritte button .hk{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;font-size:10px;color:transparent}
nav.schritte button.fertig .hk{background:var(--gold2);border-color:var(--gold2);color:#06110a}
nav.schritte .tr{color:var(--line2);font-size:12px}
nav.schritte .amp{display:inline-flex;gap:2px;font-size:10px;font-weight:700}
nav.schritte .amp b{border-radius:8px;padding:0 5px;line-height:16px}
nav.schritte .amp .r{background:var(--rot);color:#fff}nav.schritte .amp .g{background:var(--gelb);color:#1a1205}
.kopf2 .rechts{display:flex;gap:8px;align-items:center;flex:none}
.kopf2 .suchKn{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:0 12px;min-height:36px;color:var(--dim);cursor:pointer}
.kopf2 .sprachwahl{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;gap:0;margin:0}
.kopf2 .sprachwahl button{background:none!important;border:0!important;padding:0 8px;min-height:30px!important;min-width:30px!important;color:var(--dim);font-size:12px;border-radius:0}
.kopf2 .sprachwahl button.an{background:var(--panel3)!important;color:var(--gold)}
.kopf2 .sd2Kn{background:var(--panel3);border:1px solid var(--line2);border-radius:8px;min-height:32px;padding:0 10px;font-size:12.5px;color:var(--dim);display:inline-flex;align-items:center;text-decoration:none}
.kopf2 .sd2Kn:hover{color:var(--text);border-color:var(--dim)}
.kopf2 #btnDiktat.an,.kopf2 #btnDiktat[aria-pressed="true"]{color:var(--gold);border-color:var(--gold2)}

/* Spalten */
.eingabe2,.begleiter2{grid-row:2;background:var(--panel);min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;z-index:20}
.eingabe2{grid-column:1;border-right:1px solid var(--line)}
body.ui2 #app>main{grid-column:2;grid-row:2;min-width:0}
.begleiter2{grid-column:3;border-left:1px solid var(--line)}
.leisteKopf{display:flex;align-items:center;gap:8px;padding:8px;min-height:48px;border-bottom:1px solid var(--line)}
.leisteKopf .tit{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leisteInhalt{flex:1;overflow:auto;padding:8px 12px 16px;min-height:0}
body.linksZu .eingabe2 .leisteInhalt,body.linksZu .eingabe2 .tit{display:none}
body.rechtsZu .begleiter2 .leisteInhalt,body.rechtsZu .begleiter2 .tit{display:none}
body.linksZu .eingabe2 .leisteKopf,body.rechtsZu .begleiter2 .leisteKopf{flex-direction:column;padding:8px 4px;border:0}
.lSatz{color:var(--dim);font-size:12.5px;margin:4px 2px 8px;line-height:1.45}
.lSatz.ruhig{border-left:3px solid var(--line2);padding-left:8px}
#sd2LinksDyn[hidden]{display:none}
.sd2Slot[hidden]{display:none!important}
.ufListe{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.ufE{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;cursor:pointer;color:var(--dim);font-size:13px;min-height:34px;border:1px solid transparent}
.ufE:hover{background:var(--panel3);color:var(--text)}
.ufE.an{background:var(--panel3);border-color:var(--line2);color:var(--gold)}
.ufE:focus-visible{outline:2px solid var(--gold)}
.ufE small{margin-left:auto;color:var(--dim2);font-size:11px}
.ufE.st i{width:8px;height:8px;border-radius:50%;background:#2c3048;flex:none}.ufE.st.fertig i{background:#7ee787}.ufE.st.teil i{background:var(--gold2)}
.chipsL{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chipF2{border:1px solid var(--line2);border-radius:999px;padding:0 12px;min-height:30px;font-size:12px;background:none;color:var(--dim);cursor:pointer}
.chipF2.an{border-color:var(--gold2);color:var(--text);background:#12221a}
.schalter2{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin:8px 2px}
.boxArten{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.boxArt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:6px 8px;min-height:34px;border:1px solid var(--line2);border-left:4px solid var(--kf);border-radius:8px;background:var(--panel2);font-size:12.5px;cursor:pointer;color:var(--text)}
.boxArt:hover{border-color:var(--gold2);border-left-color:var(--kf)}.boxArt i{display:none}
.ampelZahl{display:flex;gap:8px;margin:4px 0 8px}.ampelZahl span{flex:1;text-align:center;border-radius:10px;padding:8px 0;font-size:20px;font-weight:700}
.ampelZahl .r{background:rgba(255,90,90,.15);color:#ff8a8a}.ampelZahl .g{background:rgba(224,163,59,.15);color:#f0c070}.ampelZahl .gr{background:rgba(120,240,93,.12);color:var(--gold)}
#prErgebnis.nurRot .pr-b:has(>span[style*="#78f05d"]),#prErgebnis.nurRot .pr-b:has(>span[style*="#e0a33b"]),#prErgebnis.nurRot .pr-b:has(>span[style*="#7d8799"]),#prErgebnis.nurRotGelb .pr-b:has(>span[style*="#78f05d"]),#prErgebnis.nurRotGelb .pr-b:has(>span[style*="#7d8799"]){display:none!important}

/* Umgehaengte Werkzeugleisten: senkrecht in der linken Spalte statt schwebend ueber der Flaeche */
.sd2Slot #flowLeiste,.sd2Slot #wbLeiste,.sd2Slot #grLeiste,.sd2Slot #feLeiste{position:static!important;display:flex!important;flex-direction:column;align-items:stretch;gap:8px;pointer-events:auto;margin:0 0 8px;inset:auto}
.sd2Slot #flowLeiste .gruppe,.sd2Slot #wbLeiste .gruppe,.sd2Slot #grLeiste .gruppe,.sd2Slot #feLeiste .gruppe{display:flex;flex-wrap:wrap;gap:4px;background:var(--panel2)!important;border:1px solid var(--line)!important;border-radius:10px;padding:6px;align-items:center}
.sd2Slot .gruppe .knopf{flex:1 1 auto}
.sd2Slot .gruppe select,.sd2Slot .gruppe input[type=text],.sd2Slot .gruppe input[type=number]{flex:1 1 100%;min-width:0;max-width:100%}
.sd2Slot #flowInfo,.sd2Slot #wbInfo,.sd2Slot #grInfo,.sd2Slot #feInfo{display:block;margin:0 2px!important;font-size:11.5px}
.sd2Slot #flowPfad{flex-wrap:wrap}
.sd2Slot #flowVorrat,.sd2Slot #grVorlagen{position:static!important;display:block!important;width:auto!important;max-height:none!important;margin:0 0 8px;background:var(--panel2);border-color:var(--line)}
.sd2Slot #feListe{border:0!important;background:none!important;padding:0!important;overflow:visible}
.sd2Slot .dokRechts{border:0!important;background:none!important;padding:0!important;overflow:visible}
.sd2Slot .dokRechts h4:first-child{margin-top:0}
.sd2Slot #baum{padding:0}
body.ui2 #tabFeatures.an{grid-template-columns:minmax(0,1fr) 270px}
body.ui2 #tabDokument.an{grid-template-columns:minmax(0,1fr)}
/* Prozess: die Schritte stehen links - die schwebende Prozess-Flaeche entfaellt, das Buchwissen bleibt als Glasflaeche */
body.ui2 #railL,body.ui2 .glasReiter[data-auf="L"]{display:none!important}
body.ui2 #tabProzess .mitteSpalte{padding-left:0!important}
/* Die Hilfezeilen unten links auf den Flaechen stehen schon im Hover - ruhiger ohne */
body.ui2 #flowHilfe,body.ui2 #wbHilfe,body.ui2 #grHilfe{opacity:.75}

/* Mitte: Kopf mit Titel, einem Satz und Ansichten; Fussleiste mit der Hauptaktion */
body.ui2 main .tab{top:var(--sk);bottom:var(--fuss)}
.sd2Kopf{position:absolute;left:0;right:0;top:0;height:var(--sk);display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid var(--line);background:rgba(8,13,24,.96);z-index:12;min-width:0}
.sd2Kopf .skText{min-width:0;flex:0 1 auto}
.sd2Kopf h1{font-size:19px;margin:0;line-height:1.2;letter-spacing:0;white-space:nowrap}
.sd2Kopf p{margin:2px 0 0;color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd2Kopf .r{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.ansichten{display:inline-flex;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:3px;gap:2px;flex:none;margin-left:auto}
.ansichten .ans{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:8px;color:var(--dim);font-size:13px;min-height:30px;white-space:nowrap}
.ansichten .ans:hover{color:var(--text);background:var(--panel3)}
.ansichten .ans.an{background:#12221a;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold2)}
.ansichten .ans:focus-visible{outline:2px solid var(--gold)}
.ansichten+.r{margin-left:8px}
.sd2Fuss{position:absolute;left:0;right:0;bottom:0;height:var(--fuss);border-top:1px solid var(--line);background:rgba(8,13,24,.96);display:flex;align-items:center;gap:8px;padding:0 24px;z-index:12}
.sd2Fuss .platz{flex:1}.sd2Fuss .stand{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sd2WeiterKn{min-width:200px}
body.sd2Ohne .sd2Fuss{display:none}body.sd2Ohne main .tab{bottom:0}

/* Eigene Sichten */
#tabSd2{overflow:auto}
.arbeit2{padding:16px 24px 32px;max-width:1180px}
.raster2{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.karte2{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:16px 20px;min-width:0}
.karte2.breit{grid-column:1/-1}
.karte2 h3{margin:0 0 8px;font-size:16px}
.karte2.pitch{border-color:var(--gold2);background:linear-gradient(135deg,#0f1a12,#120c1c)}
.karte2.pitch h3{font-size:19px}
.karte2 .kk{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 4px}
.rolle2{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);font-weight:600}
.vorm{white-space:pre-wrap;color:#dfe6f2;font-size:13.5px;line-height:1.55;max-height:420px;overflow:auto}
.fakten{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.fakt{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:0}
.fakt small{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.fakt b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfad2{display:flex;flex-wrap:wrap;gap:8px}
.krume2{background:var(--panel);border:1px solid var(--line2);border-top:3px solid var(--gold2);border-radius:8px;padding:4px 12px;display:flex;flex-direction:column}
.krume2 small{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}.krume2 b{font-size:13px;font-weight:600}
.leerZust2{max-width:560px;margin:32px auto;text-align:center;color:var(--dim)}
.leerZust2 h2{color:var(--text);font-size:18px;margin:0 0 8px}.leerZust2 .kn2{margin-top:16px}
table.tab2{width:100%;border-collapse:collapse;font-size:13px}
table.tab2 th{text-align:left;color:var(--dim);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:8px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--bg);z-index:1}
table.tab2 td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
table.tab2 td.z{text-align:right;white-space:nowrap;color:var(--dim)}
table.tab2 tr[tabindex]{cursor:pointer}table.tab2 tr[tabindex]:hover td{background:var(--panel3)}
.leerW{color:var(--dim2)}
.artChip{font-size:10.5px;border-radius:6px;padding:1px 6px;white-space:nowrap;border:1px solid var(--line2);color:var(--dim)}
.artChip.bp{border-color:var(--gold2);color:var(--gold)}.artChip.raum{border-color:#2e5a8a;color:#9cc4ff}.artChip.station{border-color:#7a3b6a;color:#e7a7d9}
.rahmenSicht{position:absolute;inset:0}.rahmenSicht iframe{width:100%;height:100%;border:0;display:block;background:#0a1120}

/* Projektuebersicht = vorhandene Karten der alten App, im neuen Kartenlook */
body.ui2 #tabProjekt{padding:16px 24px 32px}
body.ui2 #tabProjekt .projektWrap{max-width:1180px;margin:0}
body.ui2 #tabProjekt .projektWrap>h1,body.ui2 #tabProjekt .zitat{display:none}
body.ui2 .karten{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:0}
body.ui2 .karte{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:16px;min-height:150px;display:flex;flex-direction:column;gap:8px}
body.ui2 .karte:hover{border-color:var(--gold2)}
body.ui2 .karte h3{font-size:16px;margin:0}
body.ui2 .karte .balken{margin-top:auto}
body.ui2 .karte.neu{border-style:dashed}
body.ui2 .karte.archiviert{display:none}
body.ui2.archivZeigen .karte.archiviert{display:flex;opacity:.55}
body.ui2 #sd2ArchSchalter{margin-top:16px}

/* Rechte Spalte Companion */
.coStatus{display:flex;gap:10px;align-items:flex-start;padding:4px 2px 8px}
.coStatus b{display:block;font-size:13.5px}.coStatus small{display:block;color:var(--dim);font-size:12px;line-height:1.4;margin-top:2px}
.coPunkt2{width:10px;height:10px;border-radius:50%;background:#56607a;margin-top:5px;flex:none}
.coStatus.an .coPunkt2{background:var(--gold);box-shadow:0 0 0 4px rgba(120,240,93,.12)}
.coWartet2{font-size:12px;color:var(--gelb);border:1px solid rgba(224,163,59,.35);border-radius:8px;padding:6px 10px;margin:4px 0}

/* Strg+K */
.ueber2{position:fixed;inset:0;background:rgba(3,6,12,.66);z-index:600;display:none;align-items:flex-start;justify-content:center;padding-top:10vh}
.ueber2.an{display:flex}
.ueber2 .box{width:min(640px,92vw);max-height:76vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden}
.ueber2 .box input{border:0;border-bottom:1px solid var(--line);background:none;padding:16px;font-size:16px;outline:none;color:var(--text);border-radius:0}
.ueber2 .erg{overflow:auto;padding:8px}
.ueber2 .erg .e{padding:8px 12px;border-radius:8px;cursor:pointer;display:flex;gap:12px;align-items:center}
.ueber2 .erg .e.an,.ueber2 .erg .e:hover{background:var(--panel3)}
.ueber2 .erg .e small{color:var(--dim);margin-left:auto;font-size:11px;white-space:nowrap}

/* schmale Fenster: Schritte nur mit Symbol, Spalten als Schublade */
@media (max-width:1180px){nav.schritte .nm{display:none}.sd2Stand{display:none}.logo2 span{display:none}}
@media (max-width:900px){
  body.ui2 #app,body.ui2.linksZu #app,body.ui2.rechtsZu #app,body.ui2.linksZu.rechtsZu #app{grid-template-columns:48px minmax(0,1fr) 48px}
  body.ui2:not(.linksZu) .eingabe2{position:fixed;left:0;top:var(--kopf);bottom:0;width:min(320px,88vw);box-shadow:12px 0 32px rgba(0,0,0,.5)}
  body.ui2:not(.rechtsZu) .begleiter2{position:fixed;right:0;top:var(--kopf);bottom:0;width:min(320px,88vw);box-shadow:-12px 0 32px rgba(0,0,0,.5)}
  .kopf2 .suchKn kbd,.kopf2 a.sd2Kn,.kopf2 #btnDiktat{display:none}
  .sd2Kopf p{display:none}.sd2Kopf{padding:0 12px}.sd2Fuss{padding:0 12px}#sd2WeiterKn{min-width:0}
  .ansichten .ans{padding:4px 8px}
}
/* Leisten in der linken Spalte: nichts darf breiter werden als die Spalte */
.sd2Slot .gruppe>*{max-width:100%;min-width:0;box-sizing:border-box}
.sd2Slot .gruppe input:not([type=checkbox]):not([type=radio]):not([type=color]){flex:1 1 100%;width:auto!important}
.sd2Slot .gruppe label{display:inline-flex;align-items:center;gap:4px}
/* Kopfzeile auf schmaleren Bildschirmen ruhiger */
@media (max-width:1800px){.kopf2 a.sd2Kn[href="/anleitung"]{display:none}nav.schritte button{padding:0 10px}}
@media (max-width:1680px){.logo2 span{display:none}.sd2Stand{max-width:90px}}
@media (max-width:1500px){.sd2Stand{display:none}.kopf2 .suchKn kbd{display:none}}
table.tab2 td:first-child{width:1%;white-space:nowrap}.artChip{display:inline-block}

/* Struktur-Umbau Schritt 3: Phasenleiste. Auf schmalen Fenstern zeigen nur die aktive Phase und das Projekt ihren Namen, sonst wird die Leiste abgeschnitten. */
@media(max-width:1700px){.kopf2 .schritte button:not([aria-current]):not(#sl-projekt) .pn{display:none}}
/* Gestalten: Hauptansichten gross, Bauen und Medien als zweite und dritte Gruppe mit Trenner */
.ansichten{flex-wrap:nowrap}
.ansTrenn{width:1px;align-self:stretch;background:var(--line2);margin:5px 6px;flex:none}
.ansichten .ans.sek{font-size:12px;opacity:.85}.ansichten .ans.sek.an{opacity:1}

/* 20.10.2026 (Paket Tinkertale, APP-UX): Companion rechts ist kein Dauerpanel mehr, sondern ein Drawer auf Abruf; die Arbeitsfläche behält die volle Breite */
body.ui2:not(.rechtsZu) #app{grid-template-columns:var(--links) minmax(0,1fr) 48px}
body.ui2.linksZu:not(.rechtsZu) #app{grid-template-columns:48px minmax(0,1fr) 48px}
body.ui2:not(.rechtsZu) .begleiter2{position:fixed;right:0;top:var(--kopf);bottom:0;width:min(360px,92vw);z-index:60;box-shadow:-14px 0 36px rgba(0,0,0,.55);animation:drawerEin .25s cubic-bezier(.3,1.2,.5,1)}
@keyframes drawerEin{from{transform:translateX(40px);opacity:.4}}
@media (prefers-reduced-motion:reduce){body.ui2:not(.rechtsZu) .begleiter2{animation:none}}
body.ui2.rechtsZu .begleiter2{overflow:hidden}body.ui2.rechtsZu .begleiter2>*:not(.leisteKopf){display:none!important}
/* UX-009 (C145): sichtbarer Fokus fuer alle Knoepfe, die all:unset haben (z. B. .boxArt im Flow), und keine Dauer-Animationen bei reduzierter Bewegung */
.boxArt:focus-visible,button:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible{outline:2px solid #78f05d!important;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* UX-009 (C144): Kontrast der Phasen-Beschriftung >= 4,5:1, Tippziele >= 24 px (Zettel-Kopf im Whiteboard, Box-Fuss im Flow) */
.baum .phase>b{color:color-mix(in srgb,var(--gold2) 55%,#ffffff)}
#wbWelt .zettel .zkopf button,.zkopf>button,.kfuss button{min-width:24px;min-height:24px}
.buendel .bkopf input.btitel{color:#000!important}
body.erl-erststart #tutWill,body.erl-erststart #tutDeck{display:none!important}   /* C193: altes Willkommen beim Erststart verborgen, bis die Einladung entschieden ist */   /* Kontrast auf dem gruenen Block-Kopf >= 4,5:1 */