/* DC AGENCY Backend · Obsidian
   Gleiche Bühne wie die Website: tiefes Schwarz, Porzellan-Schrift, Champagner für Fokus und Auswahl.
   Farbe tragen nur Daten (Diagramme: geprüfte Datenfarbe Blau, Vergleich Grau) und Zustände (Punkt + Text). */

@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#070709;
  --s1:#0E0E12;
  --s2:#131318;
  --s3:#1B1B22;
  --s4:#24242C;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.15);
  --tx:#F3F3F1;
  --tx2:#B4B4BD;
  --tx3:#8A8A95;
  --acc:#D6C4A2;
  --acc-dim:rgba(214,196,162,.14);
  --data:#3987e5;
  --data-wash:rgba(57,135,229,.12);
  --data2:#62626C;
  --good:#0ca30c;
  --warn:#fab219;
  --serious:#ec835a;
  --bad:#d03b3b;
  --info:#3987e5;
  --f:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --fm:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --r:16px;
  --r2:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav:244px;
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--tx);font-family:var(--f);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
::selection{background:var(--acc);color:#0B0B0E}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript{padding:40px;text-align:center}
.boot{position:fixed;inset:0;display:grid;place-items:center}
.boot::after{content:"";width:28px;height:28px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--acc);animation:dreh 1s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Typo ---------- */
.mono{font-family:var(--fm);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--tx3)}
.it{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em}
.h1{font-size:clamp(28px,4.2vw,44px);font-weight:300;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.h1 .it{font-size:1.12em}
.h2{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.h3{font-size:15px;font-weight:500;letter-spacing:-.01em}
.muted{color:var(--tx2)}
.dim{color:var(--tx3)}
.num{font-variant-numeric:tabular-nums}
.klein{font-size:13px}
.umbruch{white-space:pre-wrap;overflow-wrap:anywhere}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
svg.inline{width:14px;height:14px;display:inline-block;vertical-align:-2px;flex:none}

/* ---------- Grundgerüst ---------- */
.app{min-height:100vh;min-height:100dvh}
.nav{position:fixed;z-index:40;background:rgba(10,10,13,.92);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx)}
.nav-brand svg{display:block;flex:none;width:auto;height:19px}
.nav-brand span{font-family:var(--fs);font-style:italic;font-size:21px;line-height:1;color:var(--acc);transform:translateY(1px)}
.logo-dot{fill:var(--acc)}
.nav-list{display:flex}
.nav-i{display:flex;align-items:center;gap:12px;border:0;background:none;text-decoration:none;color:var(--tx2);cursor:pointer;font:inherit;transition:color .2s,background-color .2s}
.nav-i svg{width:20px;height:20px;flex:none}
.nav-i:hover{color:var(--tx)}
.nav-i[aria-current="page"]{color:var(--tx)}
.nav-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--acc);color:#0B0B0E;font-size:11px;font-weight:600;display:inline-grid;place-items:center;line-height:1}
.main{min-height:100vh;min-height:100dvh;outline:none}
.seite{width:100%;max-width:1240px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr);padding-block:28px 120px}

@media (min-width:1000px){
  .nav{top:0;bottom:0;left:0;width:var(--nav);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:28px 14px max(20px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
  .nav-brand{padding:0 12px 30px}
  .nav-list{flex-direction:column;gap:2px;flex:1}
  .nav .nav-i{padding:10px 12px;border-radius:12px;width:100%;font-size:14.5px}
  .nav .nav-i:hover{background:rgba(255,255,255,.04)}
  .nav .nav-i[aria-current="page"]{background:var(--acc-dim);color:var(--tx)}
  .nav .nav-i[aria-current="page"] svg{color:var(--acc)}
  .nav .nav-badge{margin-left:auto}
  .nav-mehr,.nav-sheet{display:none!important}
  .nav-fuss{display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--line)}
  .main{margin-left:var(--nav)}
  .seite{padding-top:40px;padding-left:max(36px,env(safe-area-inset-left,0px));padding-right:max(36px,env(safe-area-inset-right,0px))}
}
@media (max-width:999.98px){
  .nav{left:0;right:0;bottom:0;border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-left,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-right,0px))}
  .nav-brand,.nav-fuss,.nav .nav-i.nav-voll{display:none}
  .nav-list{justify-content:space-around}
  .nav .nav-i{flex-direction:column;gap:3px;padding:7px 4px 5px;font-size:10.5px;letter-spacing:.01em;flex:1;border-radius:10px;position:relative;min-width:0}
  .nav .nav-i span.nav-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .nav .nav-i[aria-current="page"] svg{color:var(--acc)}
  .nav .nav-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:17px;height:17px;font-size:10px;padding:0 4px}
  .kopf-mobil{display:flex}
}
.nav-sheet{position:fixed;inset:auto 0 0 0;z-index:45;background:var(--s2);border-top:1px solid var(--line2);border-radius:20px 20px 0 0;padding:10px max(16px,env(safe-area-inset-left,0px)) calc(86px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px));transform:translateY(105%);transition:transform .35s var(--ease);visibility:hidden}
.nav-sheet.offen{transform:none;visibility:visible}
.nav-sheet .nav-i{width:100%;padding:14px 12px;gap:14px;font-size:15px;border-radius:12px}
.nav-sheet .nav-i[aria-current="page"]{background:var(--acc-dim)}
.nav-sheet .nav-i[aria-current="page"] svg{color:var(--acc)}
.nav-sheet-griff{width:40px;height:4px;border-radius:4px;background:var(--line2);margin:0 auto 10px}

/* ---------- Seitenkopf ---------- */
.kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:26px}
.kopf-text{min-width:0;display:grid;gap:10px}
.kopf-akt{display:flex;gap:10px;flex-wrap:wrap}
.zurueck{display:inline-flex;align-items:center;gap:8px;color:var(--tx3);text-decoration:none;font-size:13px;margin-bottom:4px}
.zurueck:hover{color:var(--tx)}
.zurueck svg{width:16px;height:16px}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--tx);font-size:14px;font-weight:500;line-height:1.1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,opacity .2s}
.btn:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.04)}
.btn svg{width:17px;height:17px;flex:none}
.btn-p{background:var(--tx);border-color:var(--tx);color:#0B0B0E}
.btn-p:hover{background:#fff;border-color:#fff}
.btn-acc{background:var(--acc);border-color:var(--acc);color:#0B0B0E}
.btn-acc:hover{background:#E4D6BA;border-color:#E4D6BA}
.btn-k{min-height:34px;padding:0 13px;font-size:13px}
.btn-icon{width:40px;min-height:40px;padding:0;flex:none}
.btn-icon.btn-k{width:34px;min-height:34px}
.btn-weg{color:#ff9d9d;border-color:rgba(208,59,59,.45)}
.btn-weg:hover{background:rgba(208,59,59,.12);border-color:rgba(208,59,59,.7)}
.btn-text{border-color:transparent;padding:0 8px;color:var(--tx2)}
.btn-text:hover{color:var(--tx);background:rgba(255,255,255,.05);border-color:transparent}
.btn[disabled],.btn[aria-busy="true"],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.btn-gruppe{display:flex;gap:8px;flex-wrap:wrap}

/* Kontakt-Knöpfe (Anrufen, WhatsApp, SMS, E-Mail …) */
.kontakt-leiste{display:flex;gap:8px;flex-wrap:wrap}
.kbtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--s2);color:var(--tx);text-decoration:none;font-size:13.5px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s}
.kbtn:hover{background:var(--s3);border-color:rgba(255,255,255,.3)}
.kbtn svg{width:18px;height:18px;color:var(--acc)}
.kbtn[aria-disabled="true"]{opacity:.38;pointer-events:none}

/* ---------- Karten & Raster ---------- */
.karte{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.karte-kopf .h3,.karte-kopf .mono{min-width:0}
.raster{display:grid;gap:16px}
.r2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.r-haupt{grid-template-columns:minmax(0,1fr)}
@media (min-width:1180px){.r-haupt{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}}
.stapel{display:grid;gap:16px;align-content:start;min-width:0}
.trenner{height:1px;background:var(--line);margin:18px 0;border:0}

/* ---------- Kennzahlen ---------- */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,158px),1fr));margin-bottom:16px}
.kpi{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 15px;display:grid;gap:4px;min-width:0;text-decoration:none;position:relative}
a.kpi:hover{border-color:var(--line2)}
.kpi-l{font-size:12.5px;color:var(--tx2);display:flex;align-items:center;gap:8px}
.kpi-w{font-size:30px;font-weight:500;letter-spacing:-.03em;line-height:1.15}
.kpi-w small{font-size:14px;font-weight:400;color:var(--tx2);letter-spacing:0;margin-left:3px}
.kpi-d{font-size:12.5px;color:var(--tx2);display:flex;align-items:center;gap:6px;min-height:19px}
.pfeil{font-size:10px;line-height:1}
.pfeil.gut{color:var(--good)}
.pfeil.schlecht{color:var(--bad)}
.pfeil.gleich{color:var(--tx3)}
.live-punkt{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 rgba(12,163,12,.6);animation:puls 2s infinite}
@keyframes puls{70%{box-shadow:0 0 0 8px rgba(12,163,12,0)}100%{box-shadow:0 0 0 0 rgba(12,163,12,0)}}

/* ---------- Zustände ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 9px;border-radius:999px;border:1px solid var(--line2);font-size:12px;font-weight:500;color:var(--tx);white-space:nowrap;background:rgba(255,255,255,.02)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tx3);flex:none}
.chip.z-neu::before,.chip.z-angefragt::before,.chip.z-offen::before{background:var(--info)}
.chip.z-gut::before,.chip.z-gewonnen::before,.chip.z-aktiv::before,.chip.z-gebucht::before,.chip.z-bezahlt::before,.chip.z-abgeschlossen::before,.chip.z-zugesagt::before,.chip.z-geliefert::before,.chip.z-erledigt::before{background:var(--good)}
.chip.z-warn::before,.chip.z-in_bearbeitung::before,.chip.z-angebot::before,.chip.z-in_arbeit::before,.chip.z-pausiert::before{background:var(--warn)}
.chip.z-schlecht::before,.chip.z-spam::before,.chip.z-verloren::before,.chip.z-abgelehnt::before,.chip.z-abgesagt::before{background:var(--bad)}
.chip.z-archiv::before,.chip.z-vorgeschlagen::before{background:var(--tx3)}
.chip.ohne::before{display:none}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;background:var(--s3);color:var(--tx2);font-size:12px;white-space:nowrap}
.tag.acc{background:var(--acc-dim);color:var(--acc)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.sterne{display:inline-flex;gap:1px;color:var(--acc);font-size:13px;letter-spacing:1px}
.sterne .aus{color:var(--s4)}

/* ---------- Listen ---------- */
.liste{display:grid}
.zeile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 4px;border-top:1px solid var(--line);text-decoration:none;color:inherit;min-width:0}
.zeile:first-child{border-top:0}
a.zeile:hover,button.zeile:hover{background:rgba(255,255,255,.025)}
.zeile-haupt{min-width:0;display:grid;gap:3px}
.zeile-titel{font-weight:500;display:flex;align-items:center;gap:8px;min-width:0}
.zeile-titel .ellip{flex:0 1 auto}
.zeile-sub{color:var(--tx2);font-size:13px;min-width:0}
.zeile-rechts{display:grid;justify-items:end;gap:5px;text-align:right}
.zeile.ungelesen .zeile-titel{font-weight:650}
.zeile.ungelesen .punkt-neu{display:inline-block}
.punkt-neu{display:none;width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--s3);color:var(--tx2);display:grid;place-items:center;font-size:14px;font-weight:600;letter-spacing:.02em;overflow:hidden;flex:none;border:1px solid var(--line)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.gross{width:96px;height:96px;font-size:28px}
.avatar.klein{width:32px;height:32px;font-size:11px}
.icon-kreis{width:38px;height:38px;border-radius:50%;background:var(--s3);display:grid;place-items:center;flex:none;color:var(--tx2)}
.icon-kreis svg{width:18px;height:18px}

/* Creator-Karten */
.creator-raster{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.ckarte{position:relative;display:grid;gap:12px;padding:16px;border-radius:var(--r);background:var(--s1);border:1px solid var(--line);text-decoration:none;color:inherit;min-width:0;transition:border-color .2s,background-color .2s}
.ckarte:hover{border-color:var(--line2);background:var(--s2)}
.ckarte.gewaehlt{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.ckarte-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding-right:30px}
.ckarte-name{font-weight:550;line-height:1.25}
.ckarte-meta{display:flex;gap:6px 14px;flex-wrap:wrap;color:var(--tx2);font-size:12.5px}
.ckarte-wahl{position:absolute;top:14px;right:14px;width:22px;height:22px;accent-color:var(--acc);cursor:pointer}
.kanal-mini{display:inline-flex;gap:5px;align-items:center;color:var(--tx2);font-size:12.5px}
.kanal-mini b{color:var(--tx);font-weight:500}

/* ---------- Werkzeugleiste / Filter ---------- */
.leiste{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.leiste .suche{flex:1 1 240px;min-width:0}
.reiter{display:flex;gap:4px;padding:4px;background:var(--s1);border:1px solid var(--line);border-radius:999px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.reiter::-webkit-scrollbar{display:none}
.reiter button{border:0;background:none;color:var(--tx2);padding:7px 14px;border-radius:999px;font-size:13.5px;cursor:pointer;white-space:nowrap;display:inline-flex;gap:7px;align-items:center}
.reiter button:hover{color:var(--tx)}
.reiter button[aria-pressed="true"]{background:var(--s3);color:var(--tx)}
.reiter .zahl{font-size:11.5px;color:var(--tx3)}
.auswahl-leiste{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:10px 12px 10px 18px;border-radius:999px;background:var(--s3);border:1px solid var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.45)}
@media (min-width:1000px){.auswahl-leiste{bottom:20px}}
.auswahl-leiste .zahl{font-weight:600;margin-right:auto}

/* ---------- Formulare ---------- */
.feld{display:grid;gap:7px;min-width:0;align-content:start}
.feld > span,.feld-titel{font-size:12.5px;color:var(--tx2);font-weight:500}
.feld small{font-size:12px;color:var(--tx3);line-height:1.45}
.eingabe,.feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.feld select,.feld textarea,.suche input,select.eingabe{width:100%;min-height:44px;padding:10px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--s2);color:var(--tx);font-size:15px;line-height:1.4;transition:border-color .2s,background-color .2s;-webkit-appearance:none;appearance:none}
.feld textarea{min-height:110px;resize:vertical}
.feld select,select.eingabe{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A6A6B0' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.eingabe:focus,.feld input:focus,.feld select:focus,.feld textarea:focus,.suche input:focus{outline:none;border-color:var(--acc);background:var(--s3)}
.feld.fehler input,.feld.fehler textarea,.feld.fehler select{border-color:var(--bad)}
.suche{position:relative}
.suche svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--tx3);pointer-events:none}
.suche input{padding-left:42px;border-radius:999px}
.formular{display:grid;gap:18px}
.f2{display:grid;gap:14px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.f3{display:grid;gap:14px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.f-abschnitt{display:grid;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.f-abschnitt:first-child{padding-top:0;border-top:0}
.f-fuss{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding-top:6px}
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.45}
.check input{width:19px;height:19px;margin:1px 0 0;accent-color:var(--acc);flex:none}
.wahl-chips{display:flex;flex-wrap:wrap;gap:8px}
.wahl-chips label{position:relative;cursor:pointer}
.wahl-chips input{position:absolute;opacity:0;pointer-events:none}
.wahl-chips span{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line2);font-size:13px;color:var(--tx2);transition:all .2s}
.wahl-chips input:checked + span{background:var(--acc-dim);border-color:var(--acc);color:var(--tx)}
.wahl-chips input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px}
.sterne-wahl{display:inline-flex;gap:2px}
.sterne-wahl button{border:0;background:none;cursor:pointer;font-size:22px;line-height:1;padding:2px;color:var(--s4)}
.sterne-wahl button.an{color:var(--acc)}
.kanal-zeile{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.6fr) auto;gap:8px;align-items:end}
@media (max-width:700px){.kanal-zeile{grid-template-columns:1fr 1fr;padding:12px;border:1px solid var(--line);border-radius:12px}.kanal-zeile .kz-weg{justify-self:end}}
.hinweis-feld{font-size:13px;color:var(--tx2);background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}

/* ---------- Detail ---------- */
.profil-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 22px;align-items:center;margin-bottom:22px}
.avatar-rahmen{position:relative;width:max-content}
.avatar-rahmen .btn{position:absolute;right:-4px;bottom:-4px;background:var(--s3)}
@media (max-width:640px){.profil-kopf{grid-template-columns:1fr}}
.daten{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:10px 18px;font-size:14px}
.daten dt{color:var(--tx3);font-size:13px;padding-top:1px}
.daten dd{min-width:0;overflow-wrap:anywhere}
.daten dd a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.daten dd a:hover{text-decoration-color:var(--acc)}
.nachricht{background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;line-height:1.6}
.verlauf{display:grid;gap:0}
.v-eintrag{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.v-eintrag:first-child{border-top:0;padding-top:4px}
.v-icon{width:34px;height:34px;border-radius:50%;background:var(--s3);display:grid;place-items:center;color:var(--tx2)}
.v-icon svg{width:16px;height:16px}
.v-icon.ein{color:var(--acc)}
.v-kopf{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:baseline;font-size:13.5px}
.v-kopf b{font-weight:550}
.v-text{margin-top:6px;font-size:13.5px;color:var(--tx2);white-space:pre-wrap;overflow-wrap:anywhere;max-height:9.5em;overflow:hidden;position:relative}
.v-text.offen{max-height:none}
.v-mehr{border:0;background:none;color:var(--acc);font-size:12.5px;padding:4px 0 0;cursor:pointer}
.v-akt{opacity:0;transition:opacity .2s}
.v-eintrag:hover .v-akt,.v-akt:focus-within{opacity:1}
@media (hover:none){.v-akt{opacity:1}}

/* Besetzung (Auftrag) */
.besetzung{display:grid;gap:10px}
.bz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 14px;align-items:center;padding:12px 14px;background:var(--s2);border:1px solid var(--line);border-radius:14px}
.bz-mitte{min-width:0;display:grid;gap:3px}
.bz > a{text-decoration:none;color:inherit}
.bz-akt{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.bz-status{min-height:34px!important;padding:4px 32px 4px 12px!important;font-size:13px!important;border-radius:999px!important;width:auto!important;background-position:right 12px center!important}
@media (max-width:760px){.bz{grid-template-columns:auto minmax(0,1fr)}.bz-akt{grid-column:1/-1;justify-content:flex-start}}
.fortschritt{display:flex;gap:4px;margin-top:6px}
.fortschritt i{height:4px;flex:1;border-radius:4px;background:var(--s4)}
.fortschritt i.an{background:var(--good)}

/* ---------- Creator-Bereich (Backend und Portal) ---------- */
.portal-pruefen{border-color:rgba(214,196,162,.45)}
.portal-fortschritt{display:grid;gap:6px;margin-top:4px}
.portal-fortschritt .balken{height:6px;border-radius:6px;background:var(--s3);overflow:hidden}
.portal-fortschritt .balken i{display:block;height:100%;background:var(--acc);border-radius:6px}
.bz-portal{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.bz-akt .btn b.num{font-weight:600;color:inherit}
.lf{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--s2)}
.lf.offen{border-color:rgba(214,196,162,.45)}
.lf-kopf{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.lf-kopf .dim{margin-left:auto}
.lf-dateien{display:grid;gap:6px}
.lf-dateien li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px;min-width:0}
.lf-dateien li > svg{width:16px;height:16px;color:var(--tx3)}
.lf-dateien a,.lf-dateien li > span:nth-child(2){color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.p-chat{display:grid;gap:10px;max-height:420px;overflow-y:auto;overscroll-behavior:contain;margin-bottom:14px;padding-right:2px}
.p-msg{display:grid;gap:4px;max-width:88%;justify-self:start;padding:10px 13px;border-radius:14px 14px 14px 4px;background:var(--s2);border:1px solid var(--line);font-size:14px}
.p-msg.ich{justify-self:end;border-radius:14px 14px 4px 14px;background:var(--acc-dim);border-color:rgba(214,196,162,.3)}
.p-msg .dim{font-size:11.5px}
.zeile-knopf{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.chip.z-eingereicht::before,.chip.z-pruefung::before,.chip.z-geplant::before,.chip.z-versand::before,.chip.z-unbestaetigt::before{background:var(--info)}
.chip.z-freigegeben::before,.chip.z-erhalten::before,.chip.z-gesendet::before{background:var(--good)}
.chip.z-korrektur::before,.chip.z-vertrag::before,.chip.z-profil::before,.chip.z-eingeladen::before{background:var(--warn)}
.chip.z-gesperrt::before,.chip.z-unzustellbar::before,.chip.z-fehler::before{background:var(--bad)}

/* ---------- Newsletter ---------- */
.nl-editor{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1300px){.nl-editor{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.nl-vorschau-spalte .nl-vorschau-karte{position:sticky;top:20px}}
.nl-vorschau-spalte{min-width:0}
.nl-rahmen{display:flex;justify-content:center;background:#F3F3F1;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.nl-rahmen iframe{display:block;width:100%;max-width:100%;height:min(78vh,860px);border:0;background:#F3F3F1;transition:width .3s var(--ease)}
.nl-baustein{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--s2);min-width:0}
.nl-baustein-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.nl-baustein-kopf .btn[disabled]{opacity:.25}
.nl-plus{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.nl-bild{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:640px){.nl-bild{grid-template-columns:1fr}}
.nl-bild img{width:100%;border-radius:10px;border:1px solid var(--line)}
.nl-bild-leer{display:grid;place-items:center;align-content:center;gap:6px;aspect-ratio:4/3;border:1px dashed var(--line2);border-radius:10px;color:var(--tx3)}
.nl-bild-leer svg{width:26px;height:26px}
.nl-aktionen{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:20;padding:10px;border-radius:999px;background:rgba(27,27,34,.94);border:1px solid var(--line2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 16px 36px rgba(0,0,0,.4)}
@media (min-width:1000px){.nl-aktionen{bottom:18px}}
@media (max-width:560px){.nl-aktionen{border-radius:18px}.nl-aktionen .btn{flex:1 1 auto}}
.nl-fortschritt{height:8px;border-radius:8px;background:var(--s3);overflow:hidden}
.nl-fortschritt i{display:block;height:100%;background:var(--acc);border-radius:8px;transition:width .4s var(--ease)}
.nl-kurz{display:block;text-decoration:none;color:inherit;transition:border-color .2s}
.nl-kurz:hover{border-color:var(--line2)}
.nl-kurz-z b{font-size:24px;font-weight:500;letter-spacing:-.02em}
.nl-details summary{cursor:pointer;color:var(--tx2)}
.nl-details summary:hover{color:var(--tx)}

/* ---------- Diagramme ---------- */
.chart{position:relative;width:100%;min-height:200px;touch-action:pan-y}
.chart svg{display:block;width:100%;overflow:visible}
.chart text{font-family:var(--f);font-size:11px;fill:var(--tx3)}
.chart .gitter{stroke:var(--line);stroke-width:1}
.chart .achse{stroke:rgba(255,255,255,.18);stroke-width:1}
.chart .l-jetzt{fill:none;stroke:var(--data);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .l-vorher{fill:none;stroke:var(--data2);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.chart .flaeche{fill:var(--data-wash)}
.chart .punkt{fill:var(--data);stroke:var(--s1);stroke-width:2}
.chart .fadenkreuz{stroke:rgba(255,255,255,.35);stroke-width:1}
.chart .saeule{fill:var(--data)}
.chart .saeule.vorher{fill:var(--data2)}
.chart .saeule.hover{fill:#6aa6ee}
.tip{position:absolute;z-index:5;pointer-events:none;min-width:150px;padding:10px 12px;border-radius:10px;background:var(--s4);border:1px solid var(--line2);box-shadow:0 12px 30px rgba(0,0,0,.45);font-size:12.5px;line-height:1.5;transform:translate(-50%,calc(-100% - 12px));white-space:nowrap}
.tip-kopf{color:var(--tx2);margin-bottom:4px}
.tip-z{display:flex;align-items:center;gap:8px}
.tip-z b{font-weight:600;font-size:14px;margin-left:auto;padding-left:14px}
.tip-z i{width:14px;height:2px;border-radius:2px;background:var(--data);flex:none}
.tip-z i.vorher{background:var(--data2)}
.legende{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--tx2)}
.legende span{display:inline-flex;align-items:center;gap:8px}
.legende i{width:16px;height:2px;border-radius:2px;background:var(--data)}
.legende i.vorher{background:var(--data2)}
.legende i.balken{height:10px;width:10px;border-radius:3px}
.balken-liste{display:grid;gap:10px}
.bl{display:grid;gap:5px}
.bl-z{display:flex;gap:12px;justify-content:space-between;font-size:13.5px;min-width:0}
.bl-z .ellip{color:var(--tx)}
.bl-w{color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-w span{color:var(--tx3);margin-left:6px}
.bl-b{height:6px;border-radius:6px;background:var(--s3);overflow:hidden}
.bl-b i{display:block;height:100%;border-radius:6px;background:var(--data);min-width:2px}
.bl.rest .bl-b i{background:var(--data2)}
.heat{display:grid;grid-template-columns:28px repeat(24,minmax(0,1fr));gap:2px;font-size:10.5px;color:var(--tx3);align-items:center}
.heat .h-zelle{aspect-ratio:1/1;border-radius:3px;background:var(--data);min-width:0}
.heat .h-zelle:hover{outline:1px solid var(--tx);outline-offset:0}
.heat .h-leer{background:var(--s3)}
.heat-legende{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx3);margin-top:12px}
.heat-legende i{width:80px;height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(57,135,229,.12),rgba(57,135,229,1))}
.tabelle-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-top:14px}
table.tab{width:100%;border-collapse:collapse;font-size:13px}
.tab th,.tab td{padding:9px 12px;text-align:left;border-top:1px solid var(--line);white-space:nowrap}
.tab th{border-top:0;color:var(--tx3);font-weight:500;font-size:12px;background:var(--s2)}
.tab td.zahl,.tab th.zahl{text-align:right;font-variant-numeric:tabular-nums}
.spark{display:block;width:100%;height:44px;margin-top:8px}
.spark path.l{fill:none;stroke:var(--data);stroke-width:1.5;stroke-linejoin:round}
.spark path.f{fill:var(--data-wash)}
.lade{opacity:.45;transition:opacity .2s}

/* ---------- Hinweise, Leerzustände ---------- */
.hinweis{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 16px;border-radius:14px;background:var(--s2);border:1px solid var(--line);font-size:14px;margin-bottom:12px}
.hinweis svg{width:18px;height:18px}
.hinweis.warnung{border-color:rgba(250,178,25,.35)}
.hinweis.warnung > svg{color:var(--warn)}
.hinweis.fehler{border-color:rgba(208,59,59,.5)}
.hinweis.fehler > svg{color:var(--bad)}
.hinweis.gut > svg{color:var(--good)}
.leer{display:grid;justify-items:center;text-align:center;gap:10px;padding:46px 20px;color:var(--tx2)}
.leer svg{width:34px;height:34px;color:var(--tx3)}
.leer .h3{color:var(--tx)}
.faellig{display:grid;gap:8px}

/* ---------- Dialog ---------- */
dialog.dlg{width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border-radius:20px;border:1px solid var(--line2);background:var(--s1);color:var(--tx);box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog.dlg.breit{width:min(900px,calc(100vw - 24px))}
dialog.dlg::backdrop{background:rgba(3,3,5,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dlg-innen{display:flex;flex-direction:column;max-height:calc(100dvh - 26px)}
.dlg-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.dlg-körper,.dlg-koerper{padding:18px 20px;overflow-y:auto;overscroll-behavior:contain}
.dlg-fuss{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:14px 20px max(16px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
@media (max-width:640px){dialog.dlg,dialog.dlg.breit{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:94dvh}}

/* ---------- Meldungen ---------- */
.toasts{position:fixed;z-index:100;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;gap:8px;width:min(460px,calc(100vw - 32px));pointer-events:none}
@media (min-width:1000px){.toasts{bottom:24px;left:calc(50% + var(--nav) / 2)}}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:14px;background:var(--s4);border:1px solid var(--line2);box-shadow:0 16px 40px rgba(0,0,0,.5);font-size:14px;animation:rein .35s var(--ease)}
.toast.fehler{border-color:rgba(208,59,59,.6)}
.toast .btn{margin-left:auto}
@keyframes rein{from{opacity:0;transform:translateY(10px)}}

/* ---------- Anmeldung / Einrichtung ---------- */
.tor{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px));background:radial-gradient(1200px 600px at 50% -10%,rgba(214,196,162,.09),transparent 60%),var(--bg)}
.tor-karte{width:min(440px,100%);display:grid;gap:22px}
.tor-karte.breit{width:min(620px,100%)}
.tor-marke{display:grid;gap:14px;justify-items:start}
.tor-logo{display:block;width:auto;height:18px;color:var(--tx)}
.tor-box{background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:26px}
.schritte{display:flex;gap:6px;margin-bottom:18px}
.schritte i{height:3px;flex:1;border-radius:3px;background:var(--s4)}
.schritte i.an{background:var(--acc)}
.check-liste{display:grid;gap:8px;font-size:13.5px}
.check-liste li{display:flex;gap:10px;align-items:center}
.check-liste svg{width:16px;height:16px;flex:none}
.check-liste .ja svg{color:var(--good)}
.check-liste .nein svg{color:var(--bad)}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-family:var(--fm);font-size:15px;letter-spacing:.06em}
.codes span{padding:10px 12px;border-radius:10px;background:var(--s2);border:1px solid var(--line);text-align:center}
.qr{width:200px;height:200px;padding:12px;background:#fff;border-radius:14px}
.qr svg{width:100%;height:100%}
.schluessel{font-family:var(--fm);font-size:13.5px;letter-spacing:.05em;overflow-wrap:anywhere;padding:10px 12px;border-radius:10px;background:var(--s2);border:1px solid var(--line)}

/* ---------- Bericht ---------- */
.bericht-kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}

@media (max-width:999.98px){
  .seite{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
  .karte{padding:16px}
  .kpi{padding:14px 14px 13px}
  .kpi-w{font-size:24px}
  .zeile{grid-template-columns:auto minmax(0,1fr);}
  .zeile-rechts{grid-column:2;justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;gap:8px;align-items:center}
  .daten{grid-template-columns:1fr;gap:2px}
  .daten dd{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ---------- Updates & Sicherungen ---------- */
.upd-version{margin:6px 0 4px;font-size:26px;letter-spacing:-.03em}
.upd-waehlen{cursor:pointer}
.upd-pruef{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.upd-pruef li{display:grid;grid-template-columns:20px minmax(110px,max-content) minmax(0,1fr);gap:10px;align-items:start;padding:9px 2px;border-top:1px solid var(--line);font-size:14px}
.upd-pruef li:first-child{border-top:0}
.upd-pruef li > svg{width:18px;height:18px;margin-top:1px}
.upd-pruef li.ok > svg{color:var(--good)}
.upd-pruef li.nein > svg{color:var(--warn)}
.upd-pruef li > span{min-width:0;overflow-wrap:anywhere;color:var(--tx2)}
.upd-schritte{display:grid;gap:8px;margin:4px 0 0;padding-left:20px;color:var(--tx2);font-size:14px}
.upd-ablauf .karte-kopf .h3 svg{width:18px;height:18px;vertical-align:-3px;color:var(--good)}
.upd-ablauf:empty{display:none}
.upd-knoepfe{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.upd-mehr{margin-top:6px}
.upd-mehr > summary{cursor:pointer;padding:12px 4px;color:var(--tx2);font-size:14px}
@media (max-width:640px){.upd-pruef li{grid-template-columns:20px minmax(0,1fr)}.upd-pruef li > span{grid-column:2}}

@media print{
  .nav,.toasts,.kopf-akt,.btn,.leiste{display:none!important}
  .main{margin:0!important}
  body{background:#fff;color:#000}
  .karte,.kpi{border-color:#ccc;background:#fff}
}

/* DC AGENCY Creator-Bereich · Ergänzungen zum Backend-Stil (beim Bauen hinter backend/app.css gehängt).
   Gleiche Bühne: tiefes Schwarz, Porzellan-Schrift, Champagner für Fokus, Fortschritt und die nächste Handlung. */

/* ---------- Tor (Anmeldung, Registrierung) ---------- */
.portal-tor .tor-marke .h1{font-size:clamp(30px,6vw,40px)}
.tor-neu{display:grid;gap:10px;justify-items:start;background:transparent;border-style:dashed}
.tor-fuss{display:flex;gap:6px 10px;flex-wrap:wrap;justify-content:center}
.tor-fuss a{color:var(--tx3);text-decoration:none}
.tor-fuss a:hover{color:var(--tx)}
.f-gruppe{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.f-gruppe legend{padding:0;margin-bottom:12px}
.falle{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.check a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.check a:hover{text-decoration-color:var(--acc)}

/* ---------- Rahmen ---------- */
.p-schmal{max-width:960px}
.p-mobilkopf{display:none}
.p-marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx)}
.p-marke svg{display:block;width:auto;height:17px}
.p-marke span{font-family:var(--fs);font-style:italic;font-size:19px;line-height:1;color:var(--acc);transform:translateY(1px)}
@media (max-width:999.98px){
  .p-mobilkopf{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:env(safe-area-inset-top,0px);z-index:35;
    padding:8px var(--gr) 8px var(--gl);background:rgba(10,10,13,.92);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--line)}
}

/* ---------- Übersicht ---------- */
.p-schritt{display:grid;gap:16px}
.p-schritt-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 22px;align-items:center}
.p-schritt-kopf > div{display:grid;gap:8px;min-width:0}
@media (max-width:560px){.p-schritt-kopf{grid-template-columns:1fr}}
.p-hervor{border-color:rgba(214,196,162,.38);background:linear-gradient(180deg,rgba(214,196,162,.06),transparent 70%),var(--s1)}
.p-kpis{margin-bottom:0}
.p-ring{position:relative;width:112px;height:112px;flex:none}
.p-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.p-ring-grund{fill:none;stroke:var(--s4);stroke-width:7}
.p-ring-wert{fill:none;stroke:var(--acc);stroke-width:7;stroke-linecap:round;transition:stroke-dasharray .8s var(--ease)}
.p-ring-z{position:absolute;inset:0;display:grid;place-items:center;grid-auto-flow:column;justify-content:center;align-items:baseline;align-content:center;gap:1px}
.p-ring-z b{font-size:30px;font-weight:400;letter-spacing:-.04em;line-height:1}
.p-ring-z small{font-size:13px;color:var(--tx2)}
.p-pflicht{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:9px 18px}
.p-pflicht li.ja span{color:var(--tx2)}
.p-pflicht li.nein svg{color:var(--acc)}
.p-pflicht a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.p-pflicht a:hover{text-decoration-color:var(--acc)}

/* ---------- Aufträge ---------- */
.p-antwort{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:16px}
.p-antwort > div:first-child{display:grid;gap:6px;flex:1 1 320px;min-width:0}
.p-zwischen{margin:18px 0 8px}
.p-kennzeichnung{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--tx2)}
.p-kennzeichnung svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--acc)}
.p-lieferung{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--s2)}
.p-lieferung-kopf{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.p-lieferung-kopf .dim{margin-left:auto}
.p-dateien{display:grid;gap:6px}
.p-dateien li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:13.5px;min-width:0;position:relative}
.p-dateien li > span:nth-child(2),.p-dateien li > a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.p-dateien li > svg{width:16px;height:16px;color:var(--tx3)}
.p-dateien a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.p-dateien a:hover{text-decoration-color:var(--acc)}
.p-dateien li.fehler > svg{color:var(--bad)}
.p-dateien .fehlertext{grid-column:2/-1;color:#ff9d9d;font-size:12.5px;white-space:normal}
.p-balken{grid-column:2/-1;display:block;height:4px;border-radius:4px;background:var(--s4);overflow:hidden}
.p-balken b{display:block;height:100%;width:0;background:var(--acc);transition:width .3s var(--ease)}
.p-feedback{padding:12px 14px;border-radius:12px;background:var(--s1);border:1px solid var(--line);display:grid;gap:6px;font-size:14px}
.p-feedback.warn{border-color:rgba(250,178,25,.4)}
.p-upload{gap:14px;margin-top:14px}
.p-drop{display:flex;gap:14px;align-items:center;padding:18px;border:1px dashed var(--line2);border-radius:14px;cursor:pointer;color:var(--tx2);font-size:14px;line-height:1.5;transition:border-color .2s,background-color .2s}
.p-drop svg{width:26px;height:26px;flex:none;color:var(--acc)}
.p-drop b{color:var(--tx);font-weight:500}
.p-drop:hover,.p-drop.ueber{border-color:var(--acc);background:var(--acc-dim)}
.p-drop:focus-within{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- Profil ---------- */
.p-profilkopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 24px;align-items:center;margin-bottom:16px}
.p-profilkopf-text{display:grid;gap:6px;min-width:0}
.p-profilkopf-ring{display:grid;justify-items:center;gap:6px;text-align:center}
.p-profilkopf .p-ring{width:92px;height:92px}
.p-profilkopf .p-ring-z b{font-size:24px}
@media (max-width:640px){.p-profilkopf{grid-template-columns:auto minmax(0,1fr)}.p-profilkopf-ring{grid-column:1/-1;grid-auto-flow:column;justify-content:start;align-items:center;gap:14px}}
.p-fehlt{display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-left:6px;border-radius:6px;background:var(--acc-dim);color:var(--acc);font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;vertical-align:1px}
.p-fest{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 6px 0 14px;border-radius:12px;border:1px dashed var(--line2);color:var(--tx2);font-size:15px;min-width:0}
.p-plz-ort{display:grid;grid-template-columns:minmax(84px,.4fr) minmax(0,1fr);gap:14px 12px;min-width:0}
.p-zeile-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.p-kanal{grid-template-columns:minmax(0,160px) minmax(0,1.5fr) minmax(0,.8fr) auto}
@media (max-width:700px){.p-kanal{grid-template-columns:1fr 1fr;position:relative}.p-kanal .feld:nth-of-type(2){grid-column:1/-1;order:-1;padding-right:40px}
  .p-kanal .kz-weg{position:absolute;top:6px;right:6px}}
.p-check-mitte{align-self:end;padding-bottom:10px}
.p-speichern{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:20;align-items:center;justify-content:space-between;margin:0 -8px -8px;padding:10px 10px 10px 16px;border-radius:999px;background:rgba(27,27,34,.94);border:1px solid var(--line2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 16px 36px rgba(0,0,0,.4)}
@media (min-width:1000px){.p-speichern{bottom:18px}}
.p-speichern .p-offen{color:var(--acc)}

/* ---------- Konto & Vertrag ---------- */
.p-aufklapp > summary{list-style:none;width:max-content}
.p-aufklapp > summary::-webkit-details-marker{display:none}
.p-aufklapp[open] > summary{display:none}
.p-aufklapp > .formular{margin-top:4px}
.p-gefahr{border-color:rgba(208,59,59,.28)}
.p-vertrag{display:grid;gap:18px;padding:clamp(20px,4vw,40px);font-size:15px;line-height:1.65}
.p-vertrag .h2{font-size:clamp(20px,2.6vw,26px);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
.p-parteien{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p-parteien > div{display:grid;gap:6px;align-content:start}
.p-parteien a{color:var(--acc)}
.p-paragraph{display:grid;gap:8px;max-width:72ch}
.p-paragraph p,.p-absaetze li{color:var(--tx2)}
.p-absaetze{display:grid;gap:8px;counter-reset:abs}
.p-absaetze li{counter-increment:abs;display:grid;grid-template-columns:2.2em minmax(0,1fr)}
.p-absaetze li::before{content:"(" counter(abs) ")";color:var(--tx3);font-variant-numeric:tabular-nums}