:root{--bg:#08080b;--panel:#0d0d12;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);
--txt:#e9e9ef;--mut:#8b8b98;--dim:#5f5f6b;--teal:#2dd4bf;--amber:#f0b429;--rose:#fb7185;
--violet:#a78bfa;--blue:#60a5fa;--green:#4ade80;--r:12px}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:var(--txt);background:rgba(0,0,0,.3);
border:1px solid var(--line);border-radius:9px;padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(45,212,191,.5)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:9px}
a{color:var(--teal)}

/* ── Anmeldung ─────────────────────────────────────────────────────────── */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.gate::before{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(58% 42% at 12% 4%,rgba(45,212,191,.18),transparent 62%),
 radial-gradient(50% 38% at 92% 10%,rgba(167,139,250,.18),transparent 60%),
 radial-gradient(62% 46% at 76% 100%,rgba(251,113,133,.13),transparent 62%)}
.gate .box{position:relative;width:100%;max-width:400px;background:var(--panel);
border:1px solid var(--line);border-radius:18px;padding:26px 32px 30px}
/* Kopf zentriert: Marke, Zeile, Satz. Die Anmeldemaske ist die einzige
   Seite ohne Navigation — sie darf mittig stehen, alles danach nicht. */
.ghead{display:grid;justify-items:center;text-align:center;margin-top:4px}
.gate .mk{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-weight:700;
font-size:17px;color:#08080b;background:linear-gradient(140deg,var(--teal),var(--violet));margin-bottom:18px}
/* text-wrap:balance — bricht die Zeile mittig statt ein Wort haengen zu
   lassen. Bei einer zweizeiligen Ueberschrift ist das der Unterschied
   zwischen "gesetzt" und "umgebrochen". */
.gate h1{font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.3;text-wrap:balance}
.gate .sub{color:var(--mut);font-size:13px;margin-top:7px}
.gate form{margin-top:20px;display:grid;gap:12px}
.gate .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
display:block;margin-bottom:5px}
.gate .foot{margin-top:16px;font-size:11.5px;color:var(--dim);text-align:center}

/* Der Umschalter auf der Anmeldemaske. EIN Feld fuer beide Wege — zwei
   getrennte Anmeldeseiten waeren zwei Adressen, die man sich merken muss,
   und die falsche davon ist immer die, die im Lesezeichen steht. */
/* Zurueckhaltend: die Karte ist eine Vorwahl, nicht die Hauptsache. Wer
   herkommt, will sich anmelden — nicht zuerst eine Rolle erklaeren. */
.segs{display:flex;gap:3px;margin-top:20px;padding:3px;border:1px solid var(--line);
border-radius:10px;background:rgba(255,255,255,.02)}
.segs button{flex:1;padding:7px 10px;border-radius:8px;font-size:12px;font-weight:600;
letter-spacing:.01em;color:var(--dim);transition:.13s}
.segs button:hover{color:var(--txt)}
.segs button.on{background:linear-gradient(96deg,rgba(45,212,191,.22),rgba(167,139,250,.18));color:#fff}
.segs + .sub{margin-top:13px}

/* "Noch kein Konto? — Registrieren". Abgesetzt unter der Anmeldung, damit
   es nicht mit ihr konkurriert: wer schon ein Konto hat, soll den Knopf
   gar nicht erst lesen muessen. */
.regrow{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
display:grid;gap:10px;justify-items:center}
.regrow span{font-size:11.5px;color:var(--dim)}
.regrow .btn{width:100%;text-align:center}
.btn-out{border-color:var(--line2);color:var(--txt);background:transparent;text-decoration:none;
padding:12px 15px;border-radius:11px;font-size:13.5px}
.btn-out:hover{border-color:var(--teal);color:var(--teal)}

/* Der Wechsel zwischen Verwaltung und Arbeitsplatz. Gestrichelt, weil er
   die Ansicht wechselt und nicht die Rechte — er sieht bewusst anders aus
   als die Navigationsknoepfe darueber. */
.surfsw{margin:10px 4px 6px;padding:8px 10px;border:1px dashed var(--line2);border-radius:9px;
color:var(--mut);font-size:11.8px;font-weight:500;transition:.13s;text-align:center}
.surfsw:hover{color:var(--teal);border-color:var(--teal)}

/* ── Rahmen ────────────────────────────────────────────────────────────── */
.app{display:flex;height:100dvh;overflow:hidden}
.sb{width:232px;flex:0 0 232px;background:var(--panel);border-right:1px solid var(--line);
display:flex;flex-direction:column;padding:14px 12px;overflow-y:auto}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 12px}
.brand .mk{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
font-weight:700;font-size:13px;color:#08080b;background:linear-gradient(140deg,var(--teal),var(--violet))}
.brand b{font-size:13.5px;display:block}.brand span{font-size:11px;color:var(--dim);display:block}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:0 8px 10px;width:fit-content}
.lang button{padding:4px 14px;font-size:11px;font-weight:600;color:var(--mut);letter-spacing:.04em}
.lang button.on{background:linear-gradient(96deg,rgba(167,139,250,.3),rgba(251,113,133,.2));color:#fff}
.psel{padding:0 8px 6px}.psel select{padding:6px 9px;font-size:12.5px}
.grp{font-size:9.5px;letter-spacing:.13em;color:var(--dim);font-weight:600;padding:13px 8px 5px;
display:flex;align-items:center;gap:7px}
.grp i{width:5px;height:5px;border-radius:50%;background:currentColor}
.nav{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:9px;
color:var(--mut);font-size:13px;text-align:left;transition:.13s}
.nav:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.nav.on{background:linear-gradient(96deg,rgba(167,139,250,.18),rgba(251,113,133,.1));color:#fff;font-weight:500}
.nav .ic{width:15px;text-align:center;font-size:12.5px;opacity:.85}
.nav .n{margin-left:auto;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.sbfoot{margin-top:auto;padding:11px 9px 2px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);
display:grid;gap:2px}
.sbfoot b{color:var(--txt);font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbfoot > span{display:flex;align-items:baseline;gap:8px}
.sbfoot button{color:var(--mut);font-size:11.5px;margin-left:auto;text-decoration:underline;text-underline-offset:2px}
.sbfoot button:hover{color:var(--rose)}
.stage{flex:1;position:relative;overflow-y:auto}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:
 radial-gradient(58% 40% at 6% 0%,rgba(45,212,191,.15),transparent 62%),
 radial-gradient(50% 34% at 98% 10%,rgba(167,139,250,.15),transparent 60%),
 radial-gradient(62% 44% at 80% 100%,rgba(251,113,133,.11),transparent 62%)}
.wrap{position:relative;z-index:1;max-width:1180px;padding:30px 38px 90px}
h1{font-size:23px;font-weight:600;letter-spacing:-.02em}
.sub{color:var(--mut);font-size:13px;margin-top:5px;max-width:78ch}
.sec{font-size:9.5px;letter-spacing:.13em;font-weight:600;display:flex;align-items:center;gap:7px;margin:22px 0 9px}
.sec i{width:5px;height:5px;border-radius:50%;background:currentColor}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;margin-bottom:12px}
.grid{display:grid;gap:11px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.g2,.g3{grid-template-columns:1fr}}
.fld{display:block}
.lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:5px}
.note{font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.5}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:99px;
font-size:11px;font-weight:500;white-space:nowrap}
.p-teal{background:rgba(45,212,191,.14);color:#5eead4}.p-amber{background:rgba(240,180,41,.15);color:#fcd34d}
.p-rose{background:rgba(251,113,133,.15);color:#fda4af}.p-violet{background:rgba(167,139,250,.16);color:#c4b5fd}
.p-blue{background:rgba(96,165,250,.15);color:#93c5fd}.p-green{background:rgba(74,222,128,.14);color:#86efac}
.p-mut{background:rgba(255,255,255,.06);color:var(--mut)}
.btn{padding:8px 15px;border-radius:9px;font-size:12.8px;font-weight:500;border:1px solid transparent;transition:.13s}
.btn-pri{background:linear-gradient(96deg,var(--teal),#4ade80);color:#08080b;font-weight:600}
.btn-pri:hover{filter:brightness(1.08)}
.btn-pri:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-gh{border-color:var(--line2);color:var(--mut)}.btn-gh:hover{color:var(--txt);border-color:rgba(255,255,255,.28)}
.btn-sm{padding:5px 11px;font-size:11.8px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
font-weight:600;padding:10px 13px;border-bottom:1px solid var(--line)}
td{padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.02)}
.num{font-variant-numeric:tabular-nums;text-align:right}
th.num{text-align:right}
.empty{padding:26px;text-align:center;color:var(--dim);font-size:12.5px}
.warn{background:rgba(251,113,133,.08);border:1px solid rgba(251,113,133,.25);border-radius:10px;
padding:11px 13px;font-size:12.3px;color:#fecdd3;margin:12px 0}
.okbox{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);border-radius:10px;
padding:11px 13px;font-size:12.3px;color:#bbf7d0;margin:12px 0}
.err{color:#fda4af;font-size:12.3px;min-height:18px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
background:rgba(255,255,255,.07);padding:1.5px 5px;border-radius:5px}
.perm{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.perm label{display:inline-flex;align-items:center;gap:5px;padding:3.5px 9px;border-radius:8px;
border:1px solid var(--line);font-size:11.3px;color:var(--dim);cursor:pointer;user-select:none}
.perm label.on{border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.08);color:#5eead4}
.perm label.risky.on{border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.09);color:#fda4af}
.perm input{width:auto;margin:0}
.rc{padding-top:14px;padding-bottom:14px}
.rhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;user-select:none}
.rhead .chev{color:var(--dim);font-size:17px;line-height:1;width:11px;transition:transform .16s ease}
.rc.op .rhead .chev{transform:rotate(90deg);color:var(--teal)}
.rhead .rn{margin-left:auto;color:var(--dim);font-size:11.5px;font-variant-numeric:tabular-nums}
.rsub,.rbody{padding-left:21px}.rsub{margin-top:7px}
.modal{position:fixed;inset:0;background:rgba(4,4,8,.76);display:grid;place-items:center;padding:24px;z-index:50}
.modal .box{background:var(--panel);border:1px solid var(--line2);border-radius:15px;padding:24px;
width:100%;max-width:620px;max-height:88dvh;overflow-y:auto}
.cred{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;background:rgba(0,0,0,.42);
border:1px solid var(--line2);border-radius:10px;padding:15px;margin:15px 0;user-select:all;line-height:1.9}
.toast{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:80}
.toast div{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:10px 15px;
font-size:12.8px;box-shadow:0 10px 34px rgba(0,0,0,.5);animation:tin .18s ease}
@keyframes tin{from{opacity:0;transform:translateY(7px)}}
.prov{display:grid;gap:9px;margin-top:22px}
.provbtn{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
padding:13px 15px;border-radius:11px;border-color:var(--line2);color:var(--txt);
font-weight:500;font-size:13.5px}
.provbtn:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.03)}
/* Geerbte Anbindung: eine Zeile, kein Formular. Sie sagt WAS gilt und WO
   es steht — mehr braucht es nicht, denn ändern tut man es oben. */
.sopbar{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.sopbar .note{margin:0;font-size:11.5px}
.inh{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
border-radius:10px;background:rgba(255,255,255,.02);margin-bottom:8px}
.inh .dotc{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.inh b{font-size:13px;font-weight:600}
.inh .from{font-size:11.5px;color:var(--dim);margin-right:auto}

.sep{display:flex;align-items:center;gap:12px;margin:20px 0 2px;color:var(--dim);font-size:11px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.tl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.tv{font-size:23px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ts{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.45}
.av{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:600;font-size:15px;
background:linear-gradient(140deg,rgba(45,212,191,.22),rgba(167,139,250,.22));border:1px solid rgba(255,255,255,.1)}
.fact{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px}
.fact:last-child{border-bottom:0}
.fact span{color:var(--mut)}.fact b{font-variant-numeric:tabular-nums}
.shopgroup{margin-bottom:22px}
.card.child{margin-left:22px;border-left:2px solid rgba(96,165,250,.3)}
.branch{color:var(--dim);font-size:14px;margin-right:-3px}
.req{font-size:9px;letter-spacing:.05em;padding:1px 5px;border-radius:4px;margin-left:5px;
color:#fda4af;background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.25)}
.testrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}
.tres{font-size:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tdet{color:var(--mut);font-size:11.5px}
.copyable{display:inline-block;margin-top:6px;user-select:all;font-size:11.5px;padding:4px 8px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.2);
border-top-color:var(--teal);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── Rechte-Häkchen, Anbindungen ──────────────────────────────────────── */
/* Dieselbe Optik wie die alten Nur-Anzeige-Pillen, aber anklickbar: wer die
   Rollenseite kennt, muss nichts Neues lernen.                            */
.pchk{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;
border:1px solid var(--line);font-size:11.3px;color:var(--dim);cursor:pointer;user-select:none}
.pchk:hover{border-color:rgba(255,255,255,.22)}
.pchk.on{border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.08);color:#5eead4}
.pchk.risky.on{border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.09);color:#fda4af}
.pchk.off{opacity:.4;cursor:not-allowed}
.pchk input{width:auto;margin:0}
.ints{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ints .pchk{padding:6px 12px;font-size:12.2px}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.g3{grid-template-columns:1fr}.g5{grid-template-columns:repeat(2,1fr)}}

/* ── Gesamtübersicht ──────────────────────────────────────────────────── */
.ovcard{margin-bottom:14px}
.ovline{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ovpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ovcat{margin-top:14px;padding-top:12px;padding-left:18px;border-top:1px solid var(--line)}
.ovcat .ovline b{font-size:13.5px}
.ssomode{padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.ssomode.on{border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.06)}

/* ── Posteingang ──────────────────────────────────────────────────────── */
.mailhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.mtabs{display:flex;gap:6px;margin:16px 0 12px;flex-wrap:wrap}
.mtab{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:9px;
border:1px solid var(--line);background:none;color:var(--dim);font-size:12.3px;cursor:pointer}
.mtab:hover{border-color:rgba(255,255,255,.22);color:var(--txt)}
.mtab.on{border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.09);color:#c4b5fd}
.mtab span{font-size:11px;font-variant-numeric:tabular-nums;opacity:.75}

/* Zwei Spalten, beide mit eigenem Bildlauf: sonst scrollt der Verlauf die
   Liste mit weg, und man verliert die Stelle im Brett. */
.mailsplit{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:14px;
height:calc(100dvh - 210px);min-height:420px}
@media(max-width:1000px){.mailsplit{grid-template-columns:1fr;height:auto}}
.clist{overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.cdetail{overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);
display:flex;flex-direction:column}

.crow{display:block;width:100%;text-align:left;background:none;border:0;
border-bottom:1px solid var(--line);padding:11px 13px;cursor:pointer;color:var(--txt)}
.crow:hover{background:rgba(255,255,255,.025)}
.crow.on{background:rgba(167,139,250,.08);box-shadow:inset 2px 0 0 var(--violet)}
.cr1{display:flex;align-items:center;gap:7px}
.cr1 b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crt{margin-left:auto;font-size:10.5px;color:var(--dim);white-space:nowrap}
.cr2{font-size:12.3px;color:var(--mut);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr3{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr4{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;align-items:center}
.crn{font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:1px 5px}

.chead{padding:14px 16px;border-bottom:1px solid var(--line)}
.crow2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.crow2 select{width:auto;min-width:120px}
.inline{display:flex;align-items:center;gap:7px}
.inline .lbl{margin:0}

.thread{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:11px}
.msg{border:1px solid var(--line);border-radius:11px;padding:11px 13px;max-width:min(680px,92%)}
.msg.inbound{background:rgba(255,255,255,.02)}
.msg.outbound{background:rgba(74,222,128,.05);border-color:rgba(74,222,128,.2);align-self:flex-end}
.mh{display:flex;gap:9px;align-items:baseline;margin-bottom:6px}
.mh b{font-size:12.3px}
.mh span{font-size:10.5px;color:var(--dim);margin-left:auto;white-space:nowrap}
.mb{font-size:12.8px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--mut)}

.composer{border-top:1px solid var(--line);padding:14px 16px;background:rgba(0,0,0,.13)}
.composer textarea{font-size:12.8px;line-height:1.55}

/* ── Schmale Bildschirme ──────────────────────────────────────────────────
   Die Seitenleiste ist fest 232 px breit. Auf einem Telefon bleiben davon
   für die Arbeit gut hundert Pixel — die Vorgangsliste bricht dann Wort
   für Wort um. Unter 860 px wird die Leiste deshalb zu einer Kopfzeile:
   die Punkte stehen als umbrechende Reihe nebeneinander, das Brett bekommt
   die ganze Breite.                                                       */
@media(max-width:860px){
  .app{flex-direction:column;height:auto;min-height:100dvh;overflow:visible}
  .sb{width:auto;flex:none;border-right:none;border-bottom:1px solid var(--line);
      flex-flow:row wrap;align-items:center;gap:5px;padding:10px 12px;
      position:sticky;top:0;z-index:40;overflow:visible}
  .brand{flex:1 1 auto;padding:0}
  .lang{margin:0}
  .psel{flex:1 1 100%;padding:2px 0 0}
  .grp{display:none}                     /* Überschriften kosten hier nur Platz */
  .nav{width:auto;flex:0 0 auto;padding:6px 10px;font-size:12.5px}
  .nav .n{margin-left:5px}
  .sbfoot{flex:1 1 100%;margin:2px 0 0;padding:8px 0 0;
          display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .sbfoot b{display:inline}
  .sbfoot button{margin:0 0 0 auto}
  .stage{overflow:visible}
  .wrap{padding:20px 16px 80px;max-width:none}
  .mailsplit{height:auto}
  .clist{max-height:46dvh}
  .cdetail{min-height:60dvh}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .g5{grid-template-columns:repeat(2,1fr)}
  table{font-size:12px}
  .crow2 select{min-width:0;flex:1 1 130px}
  .mailhead{gap:8px}
}

/* ── Seitenleiste: Projektbaum ────────────────────────────────────────── */
.brand{position:relative;flex-wrap:wrap}
.brand .lang{margin:0 0 0 auto}
.navscroll{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px}
.navgap{height:14px}
.grp{justify-content:flex-start}
.grp span{flex:1}
.nav .lb{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav.pj{padding-left:9px}
.nav.pj.sub{padding-left:20px;font-size:12.3px;color:var(--dim)}
.nav.pj.sub:hover,.nav.pj.sub.on{color:var(--txt)}
.nav .branch{color:var(--line2);font-size:11px;width:12px;flex:none}
.nav.pj .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
.nav.add{color:var(--dim);font-size:12.3px}
.nav.add:hover{color:var(--teal)}
.nav.add .ic{font-size:14px}

/* ── Projektliste ─────────────────────────────────────────────────────── */
.plist{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.prow{display:flex;align-items:center;gap:9px;width:100%;padding:12px 14px;text-align:left;
border:0;border-bottom:1px solid var(--line);background:none;color:var(--txt);cursor:pointer}
.prow:last-child{border-bottom:none}
.prow:hover{background:rgba(255,255,255,.03)}
.prow.sub{padding-left:26px}
.prow.sub .pn{font-size:13px;color:var(--mut)}
.prow.addcat{color:var(--dim);font-size:12.5px}
.prow.addcat:hover{color:var(--teal)}
.prow .branch{color:var(--line2);font-size:12px}
.prow .pn{font-weight:600;font-size:14px;white-space:nowrap}
.prow .pmeta{display:flex;gap:5px;flex-wrap:wrap;margin-left:14px}
.prow .pnums{margin-left:auto;font-size:11.5px;color:var(--dim);white-space:nowrap}
.prow .chev{color:var(--dim);font-size:17px;line-height:1}

/* ── Ein Projekt ──────────────────────────────────────────────────────── */
.phead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ptitle h1{margin:0}
.ptitle .sub{margin-top:2px}
.linkish{color:var(--teal);text-decoration:underline;text-underline-offset:2px;font-size:inherit}
.ptabs{display:flex;gap:6px;margin:18px 0 16px;flex-wrap:wrap;
border-bottom:1px solid var(--line);padding-bottom:0}
.ptab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:0;background:none;
color:var(--dim);font-size:13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ptab:hover{color:var(--txt)}
.ptab.on{color:var(--txt);border-bottom-color:var(--teal);font-weight:500}
.ptab span{font-size:11px;background:rgba(255,255,255,.08);border-radius:99px;padding:1px 6px;
font-variant-numeric:tabular-nums}
.ptab.on span{background:rgba(45,212,191,.18);color:#5eead4}
.pbody{display:grid;gap:14px}
.pbody .card{margin:0}
.savebar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 0 0;
background:linear-gradient(to top,var(--bg) 62%,transparent);margin-top:-4px}
.savebar .note{margin:0}
@media(max-width:860px){
  .prow{flex-wrap:wrap}
  .prow .pmeta{margin-left:0;width:100%}
  .prow .pnums{margin-left:0}
}
.grplink{font-size:10px;letter-spacing:.06em;color:var(--dim);border:0;background:none;
cursor:pointer;padding:2px 5px;border-radius:6px;text-transform:none}
.grplink:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.grplink.on{color:var(--violet)}

/* ── Bestellung im Vorgang ────────────────────────────────────────────── */
.ordbox{margin:0 16px 12px;border:1px solid var(--line);border-radius:11px;
background:rgba(96,165,250,.04);padding:12px 14px}
.ordhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ordhead .ic{color:var(--blue);font-size:13px}
.ordhead b{font-size:13px}
.ordline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.ordbox .sec{margin:14px 0 6px}
.ordbox .fact{background:rgba(0,0,0,.22)}
.ordpills{display:flex;gap:6px;flex-wrap:wrap}
a.pill{text-decoration:none}
.ordtab{width:100%;font-size:12.3px}
.ordtab td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.ordtab tr:last-child td{border-bottom:none}
.ordtab td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:860px){.ordbox{margin:0 0 12px}}

/* ── Auf- und zuklappen im Projektbaum ────────────────────────────────── */
.pjgrp{display:contents}
.twist{width:15px;flex:none;text-align:center;font-size:11px;color:var(--dim);
display:inline-block;transition:transform .16s ease,color .16s ease;cursor:pointer;border-radius:4px}
.twist:hover{color:var(--teal)}
.twist.open{transform:rotate(90deg);color:var(--teal)}
.nav.pj .kidn{font-size:10px;color:var(--dim);border:1px solid var(--line);
border-radius:99px;padding:0 5px;font-variant-numeric:tabular-nums}
.nav.pj.on .kidn{border-color:var(--line2);color:var(--mut)}