/* fundament-ui, Gestaltungssystem für alle Anwendungen.
   Aufbau: Schriften, neutrale Werte auf :root (hell und dunkel), Marke des Mandanten
   kommt als kleiner Stilblock aus dem Basistemplate (--p, --s, --k, --k-auf, Titelschrift).
   Alles andere leitet sich davon ab. Keine Build-Kette, nur diese Datei. */

/* Schriften stehen seit 1.1.0 in schriften.css */

:root{
  --seite:#F5F5F3; --flaeche:#FFFFFF; --flaeche-2:#F0F0EC; --linie:#E3E2DD; --linie-stark:#CBC9C2;
  --text:#1D2026; --text-2:#545862; --text-3:#767A83;
  --ok:#1C7348; --ok-hg:#E5F3EA; --hinweis:#1D5CA3; --hinweis-hg:#E6EEF8;
  --warn:#835400; --warn-hg:#FCF0D6; --fehler:#B42318; --fehler-hg:#FCEBE9;
  --fehler-knopf:#B42318; --fehler-auf:#FFFFFF;
  --fokus:#1559D6; --schatten:25 28 35; --schatten-staerke:1;
  --schrift:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --a-1:4px; --a-2:8px; --a-3:12px; --a-4:16px; --a-5:24px; --a-6:32px; --a-7:48px; --a-8:64px;
  --r-klein:8px; --r:12px; --r-gross:18px; --r-rund:999px;
  --g-12:12px; --g-13:13px; --g-14:14px; --g-16:16px; --g-18:18px; --g-22:22px; --g-28:28px; --g-36:36px;
  --lesebreite:880px; --lesegroesse:17px;
  /* Vorgabe-Marke, falls der Mandant nichts setzt */
  --p:#085DA3; --s:#811484; --k:#D4AF37; --k-auf:#1A1A1A;
  --schrift-titel:var(--schrift); --titel-gewicht:650; --titel-sperrung:-.01em;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --seite:#121418; --flaeche:#1B1E23; --flaeche-2:#24282E; --linie:#2F343B; --linie-stark:#454B54;
    --text:#ECEDEF; --text-2:#B3B7BE; --text-3:#8D929A;
    --ok:#62D29C; --ok-hg:#15302A; --hinweis:#8FB9F0; --hinweis-hg:#172A40;
    --warn:#F0C46A; --warn-hg:#372D14; --fehler:#FF8C82; --fehler-hg:#3B1B1A;
    --fehler-knopf:#FF8C82; --fehler-auf:#2A0F0E; --fokus:#80B4FF; --schatten-staerke:2.4;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --seite:#121418; --flaeche:#1B1E23; --flaeche-2:#24282E; --linie:#2F343B; --linie-stark:#454B54;
  --text:#ECEDEF; --text-2:#B3B7BE; --text-3:#8D929A;
  --ok:#62D29C; --ok-hg:#15302A; --hinweis:#8FB9F0; --hinweis-hg:#172A40;
  --warn:#F0C46A; --warn-hg:#372D14; --fehler:#FF8C82; --fehler-hg:#3B1B1A;
  --fehler-knopf:#FF8C82; --fehler-auf:#2A0F0E; --fokus:#80B4FF; --schatten-staerke:2.4;
  color-scheme:dark;
}

/* Abgeleitete Werte, hell */
body{
  --p-knopf:var(--p); --p-auf:#FFFFFF; --p-text:var(--p);
  --p-hover:color-mix(in oklab,var(--p) 84%,black);
  --p-hauch:color-mix(in oklab,var(--p) 6%,var(--flaeche));
  --p-zart:color-mix(in oklab,var(--p) 12%,var(--flaeche));
  --p-rand:color-mix(in oklab,var(--p) 28%,var(--linie));
  --s-text:var(--s); --s-zart:color-mix(in oklab,var(--s) 10%,var(--flaeche));
  --sch-1:0 1px 2px rgb(var(--schatten) / calc(.05*var(--schatten-staerke))),0 1px 3px rgb(var(--schatten) / calc(.05*var(--schatten-staerke)));
  --sch-2:0 8px 24px -8px rgb(var(--schatten) / calc(.18*var(--schatten-staerke))),0 2px 6px rgb(var(--schatten) / calc(.05*var(--schatten-staerke)));
  --sch-3:0 24px 60px -16px rgb(var(--schatten) / calc(.30*var(--schatten-staerke)));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body{
    --p-knopf:color-mix(in oklab,var(--p) 82%,white); --p-text:color-mix(in oklab,var(--p) 42%,white);
    --p-hover:color-mix(in oklab,var(--p) 70%,white);
    --p-hauch:color-mix(in oklab,var(--p) 13%,var(--flaeche)); --p-zart:color-mix(in oklab,var(--p) 24%,var(--flaeche));
    --p-rand:color-mix(in oklab,var(--p) 40%,var(--linie)); --s-text:color-mix(in oklab,var(--s) 40%,white);
    --s-zart:color-mix(in oklab,var(--s) 22%,var(--flaeche));
  }
}
:root[data-theme="dark"] body{
  --p-knopf:color-mix(in oklab,var(--p) 82%,white); --p-text:color-mix(in oklab,var(--p) 42%,white);
  --p-hover:color-mix(in oklab,var(--p) 70%,white);
  --p-hauch:color-mix(in oklab,var(--p) 13%,var(--flaeche)); --p-zart:color-mix(in oklab,var(--p) 24%,var(--flaeche));
  --p-rand:color-mix(in oklab,var(--p) 40%,var(--linie)); --s-text:color-mix(in oklab,var(--s) 40%,white);
  --s-zart:color-mix(in oklab,var(--s) 22%,var(--flaeche));
}

/* Grundlage */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--seite); color:var(--text); font:400 16px/1.55 var(--schrift); font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; line-height:1.2; text-wrap:balance}
p{margin:0}
a{color:var(--p-text)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--fokus); outline-offset:2px}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ic{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.ic-k{width:16px; height:16px}
.ic-g{width:28px; height:28px}
.dreht{animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.zahl{font-variant-numeric:tabular-nums}
.titel{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung)}
.reihe{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.stapel{display:grid; gap:14px}
.unterlabel{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:600}
.leise-text{color:var(--text-2)}
.sprung{position:absolute; left:16px; top:-60px; z-index:60; background:var(--flaeche); padding:10px 14px; border-radius:var(--r); box-shadow:var(--sch-2)}
.sprung:focus{top:12px}

/* Leseregel K9: geführte Seiten mit Fliesstext */
.lesen{max-width:var(--lesebreite); font-size:var(--lesegroesse); line-height:1.65; display:grid; gap:14px}
.lesen h2{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:24px; margin-top:8px}
.lesen h3{font-size:19px; margin-top:4px}
.lesen ul,.lesen ol{margin:0; padding-left:1.3em; display:grid; gap:6px}

/* Knöpfe */
.k{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px; border-radius:var(--r); border:1px solid transparent; font-weight:600; font-size:15px; line-height:1; cursor:pointer; text-decoration:none; transition:background .15s,border-color .15s,color .15s,box-shadow .15s; white-space:nowrap}
.k-primaer{background:var(--p-knopf); color:var(--p-auf); box-shadow:var(--sch-1)}
.k-primaer:hover{background:var(--p-hover)}
.k-sekundaer{background:var(--flaeche); border-color:var(--linie-stark); color:var(--text)}
.k-sekundaer:hover{background:var(--p-hauch); border-color:var(--p-rand)}
.k-leise{background:transparent; color:var(--p-text); padding-inline:12px}
.k-leise:hover{background:var(--p-hauch)}
.k-gefahr{background:var(--fehler-knopf); color:var(--fehler-auf)}
.k-gefahr:hover{filter:brightness(.92)}
.k-akzent{background:var(--k); color:var(--k-auf)}
.k-klein{min-height:34px; padding:0 12px; font-size:14px; border-radius:10px}
.k-icon{width:42px; padding:0}
.k-klein.k-icon{width:34px}
.k:disabled,.k[aria-disabled="true"]{opacity:.5; cursor:not-allowed; box-shadow:none}
.k[aria-busy="true"]{pointer-events:none}
.k .lader{display:none}
.k[aria-busy="true"] .lader,.k.htmx-request .lader{display:block; animation:dreh .8s linear infinite}
.k[aria-busy="true"] .ic:not(.lader),.k.htmx-request .ic:not(.lader){display:none}
.link{border:0; background:none; padding:0; color:var(--p-text); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit}

/* Formularfelder */
.formular{display:grid; gap:18px; max-width:640px}
.feld{display:grid; gap:6px; min-width:0}
.feld > label,.feld > .lbl{font-weight:600; font-size:14px}
.feld .opt{font-weight:400; color:var(--text-3)}
.hilfe{font-size:13px; color:var(--text-2)}
.eingabe,.feld input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),.feld select,.feld textarea{width:100%; min-height:44px; border:1px solid var(--linie-stark); background:var(--flaeche); border-radius:10px; padding:0 14px; font-size:16px; transition:border-color .15s,box-shadow .15s}
textarea.eingabe,.feld textarea{padding:10px 14px; min-height:96px; resize:vertical}
.eingabe:hover,.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--text-3)}
.eingabe:focus,.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none; border-color:var(--p-knopf); box-shadow:0 0 0 3px var(--p-zart)}
.feld.mit-fehler .eingabe,.feld.mit-fehler input,.feld.mit-fehler select,.feld.mit-fehler textarea{border-color:var(--fehler)}
.feldfehler{display:flex; gap:6px; align-items:center; color:var(--fehler); font-size:13px; font-weight:500}
.einheit{display:flex}
.einheit .eingabe{border-radius:10px 0 0 10px}
.einheit span{display:grid; place-items:center; padding:0 12px; border:1px solid var(--linie-stark); border-left:0; border-radius:0 10px 10px 0; background:var(--flaeche-2); font-size:14px; color:var(--text-2)}
.farbfeld{display:flex; gap:8px; align-items:center}
.farbfeld input[type=color]{width:44px; height:44px; border:1px solid var(--linie-stark); border-radius:10px; padding:3px; background:var(--flaeche); cursor:pointer}
.farbfeld input[type=text]{max-width:140px; font-family:var(--mono)}

/* Knöpfe statt Auswahllisten */
.wahl{display:flex; flex-wrap:wrap; gap:8px; border:0; padding:0; margin:0; min-width:0}
.wahl legend{font-weight:600; font-size:14px; margin-bottom:6px; padding:0}
.wahl input{position:absolute; opacity:0; pointer-events:none}
.wahl label{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border:1px solid var(--linie-stark); border-radius:var(--r); background:var(--flaeche); cursor:pointer; font-size:15px; font-weight:500; transition:all .15s}
.wahl label:hover{border-color:var(--p-rand); background:var(--p-hauch)}
.wahl label .ic{display:none}
.wahl input:checked + label{background:var(--p-zart); border-color:var(--p-knopf); color:var(--p-text)}
.wahl input:checked + label .ic{display:block}
.wahl input:focus-visible + label{outline:2px solid var(--fokus); outline-offset:2px}
.wahl.gross label{flex:1 1 180px; min-height:auto; padding:14px 16px; flex-direction:column; align-items:flex-start; gap:4px; text-align:left}
.wahl.gross label small{font-weight:400; font-size:13px; color:var(--text-2)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip-w{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:var(--r-rund); border:1px solid var(--linie-stark); background:var(--flaeche); font-size:14px; font-weight:500; cursor:pointer}
.chip-w .ic{display:none; width:16px; height:16px}
.chip-w[aria-pressed="true"],.chips input:checked + .chip-w{background:var(--p-zart); border-color:var(--p-knopf); color:var(--p-text)}
.chip-w[aria-pressed="true"] .ic,.chips input:checked + .chip-w .ic{display:block}
.chips input{position:absolute; opacity:0; pointer-events:none}
.chips input:focus-visible + .chip-w{outline:2px solid var(--fokus); outline-offset:2px}

/* Datei ablegen */
.ablage{position:relative; border:1.5px dashed var(--linie-stark); border-radius:var(--r); padding:22px; text-align:center; display:grid; gap:8px; justify-items:center; background:var(--p-hauch); transition:all .15s; color:var(--text-2); font-size:14px}
.ablage.drueber{border-color:var(--p-knopf); background:var(--p-zart)}
.ablage .ic{color:var(--p-text)}
.ablage input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.dateien{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.dateien li{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--linie); border-radius:10px; font-size:14px; background:var(--flaeche)}
.dateien li span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dateien small{color:var(--text-3)}

/* Regler und Schalter */
.regler{display:flex; align-items:center; gap:14px}
.regler input{flex:1; accent-color:var(--p-knopf); height:28px}
.regler output{min-width:64px; text-align:right; font-weight:600}
.schalter{display:flex; align-items:center; gap:12px; border:0; background:none; padding:0; cursor:pointer; text-align:left; font-size:15px; position:relative}
.schalter .bahn{flex:none; width:44px; height:26px; border-radius:13px; background:var(--linie-stark); position:relative; transition:background .15s}
.schalter .bahn::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgb(0 0 0 / .25); transition:transform .15s}
.schalter[aria-checked="true"] .bahn,.schalter input:checked + .bahn{background:var(--p-knopf)}
.schalter[aria-checked="true"] .bahn::after,.schalter input:checked + .bahn::after{transform:translateX(18px)}
.schalter input{position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; width:44px; height:26px; margin:0; cursor:pointer; z-index:1}
.schalter > span:last-child{display:block}
.schalter input:focus-visible + .bahn{outline:2px solid var(--fokus); outline-offset:2px}
.schalter small{display:block; color:var(--text-2); font-size:13px}

/* Etiketten, Prüfstand (K8), Niveau (K4) */
.et{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:var(--r-rund); background:var(--flaeche-2); color:var(--text-2); white-space:nowrap; line-height:1.4; flex:none}
.et .ic{width:14px; height:14px}
.et-ok{background:var(--ok-hg); color:var(--ok)}
.et-hinweis{background:var(--hinweis-hg); color:var(--hinweis)}
.et-warn{background:var(--warn-hg); color:var(--warn)}
.et-fehler{background:var(--fehler-hg); color:var(--fehler)}
.et-marke{background:var(--p-zart); color:var(--p-text)}
.et-ki{background:var(--s-zart); color:var(--s-text)}
.niveau{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; white-space:nowrap}
.niveau .striche{display:inline-flex; gap:2px}
.niveau .striche i{width:6px; height:12px; border-radius:2px; background:var(--linie-stark)}
.niveau .striche i.an{background:var(--p-knopf)}

/* Hinweise */
.hw{display:flex; gap:12px; padding:14px 16px; border-radius:var(--r); font-size:14.5px; align-items:flex-start}
.hw .ic{margin-top:1px}
.hw b{display:block; margin-bottom:2px}
.hw-info{background:var(--hinweis-hg); color:var(--text)} .hw-info .ic{color:var(--hinweis)}
.hw-ok{background:var(--ok-hg)} .hw-ok .ic{color:var(--ok)}
.hw-warn{background:var(--warn-hg)} .hw-warn .ic{color:var(--warn)}
.hw-fehler{background:var(--fehler-hg)} .hw-fehler .ic{color:var(--fehler)}
.hw-ki{background:var(--s-zart)} .hw-ki .ic{color:var(--s-text)}

/* Blöcke und Karten */
.block{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); padding:22px; min-width:0; display:flex; flex-direction:column; gap:16px}
.block-kopf{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.block-kopf h2{font-size:var(--g-18); font-weight:650; letter-spacing:-.01em}
.block-kopf p{font-size:var(--g-14); color:var(--text-2); margin-top:4px}
.bloecke{display:grid; gap:20px}
@media (min-width:900px){ .bloecke.zwei{grid-template-columns:1fr 1fr} .bloecke.drei{grid-template-columns:repeat(3,1fr)} .breit{grid-column:1 / -1} }
.karte{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); overflow:hidden; box-shadow:var(--sch-1); display:flex; flex-direction:column; min-width:0}
.karte-kopf{background:var(--p-hauch); padding:16px 18px 14px; border-bottom:1px solid var(--linie); display:grid; gap:6px}
.karte-kopf > .et,.karte-kopf > .reihe{justify-self:start}
.karte-kopf h3{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:19px}
.karte-rumpf{padding:16px 18px; display:grid; gap:12px; font-size:15px; color:var(--text-2)}
.karte-fuss{padding:12px 18px 16px; display:flex; gap:8px; justify-content:space-between; align-items:center; margin-top:auto}
.karten{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* Tabelle */
.tab-huelle{overflow-x:auto; border:1px solid var(--linie); border-radius:var(--r-gross); background:var(--flaeche)}
table.tab{width:100%; border-collapse:collapse; font-size:15px; min-width:560px}
.tab th{background:var(--p-hauch); text-align:left; font-size:13px; font-weight:600; color:var(--text-2); padding:0 12px; height:44px; white-space:nowrap; border-bottom:1px solid var(--linie)}
.tab th a,.tab th button{border:0; background:none; font:inherit; color:inherit; display:inline-flex; align-items:center; gap:4px; cursor:pointer; padding:6px 0; text-decoration:none}
.tab th[aria-sort="ascending"],.tab th[aria-sort="descending"]{color:var(--text)}
.tab td{padding:0 12px; height:52px; border-top:1px solid var(--linie); vertical-align:middle}
.tab tbody tr:first-child td{border-top:0}
.tab tr:hover td{background:color-mix(in oklab,var(--p-hauch) 60%,transparent)}
.tab tr[aria-selected="true"] td,.tab tr:has(.ankreuz:checked) td{background:var(--p-hauch)}
.tab .eng{width:1%; white-space:nowrap}
.tab input[type="checkbox"],.ankreuz{width:18px; height:18px; accent-color:var(--p-knopf); cursor:pointer}
.griff{border:0; background:none; color:var(--text-3); cursor:grab; padding:6px 2px; border-radius:6px; display:grid; place-items:center}
.griff[aria-pressed="true"]{color:var(--p-text); background:var(--p-zart)}
.sortable-ghost,.sortable-ghost td{background:var(--p-zart)!important; opacity:.6}
.gegriffen,.gegriffen td{background:var(--p-zart)!important}
.zelle-edit{text-overflow:ellipsis; border:1px solid transparent; background:transparent; border-radius:8px; padding:6px 8px; margin-left:-9px; width:100%; min-width:120px; font-size:15px; cursor:text}
.zelle-edit:hover{border-color:var(--linie-stark)}
.zelle-edit:focus{outline:none; border-color:var(--p-knopf); background:var(--flaeche); box-shadow:0 0 0 3px var(--p-zart)}
.zelle-edit[aria-invalid="true"]{border-color:var(--fehler)}
.zelle-zahl{width:72px; min-width:0; text-align:right}
.leer{display:grid; justify-items:center; text-align:center; gap:10px; padding:40px 20px; color:var(--text-2)}
.leer .kreis{width:56px; height:56px; border-radius:50%; background:var(--p-zart); color:var(--p-text); display:grid; place-items:center}
.leer h3{font-size:17px; color:var(--text)}
.masse{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 12px; background:var(--p-zart); border-radius:var(--r); font-size:14px}
.masse b{margin-right:auto}

/* Sortierliste */
.sortliste{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.sortliste li{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--linie); border-radius:var(--r); background:var(--flaeche); font-size:15px}
.sortliste li span.name{flex:1; min-width:0}
.sortliste li .pos{font:600 12px var(--mono); color:var(--text-3); min-width:22px}

/* Platzhalter beim Laden */
.platz{background:linear-gradient(90deg,var(--flaeche-2) 0%,color-mix(in oklab,var(--flaeche-2) 40%,var(--flaeche)) 50%,var(--flaeche-2) 100%); background-size:200% 100%; animation:glanz 1.3s ease-in-out infinite; border-radius:6px; height:14px}
@keyframes glanz{from{background-position:100% 0}to{background-position:-100% 0}}
.htmx-indicator{display:none}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:block}

/* Kopfzeile und Navigation */
.kopf{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; height:64px; padding:0 20px; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px)); background:var(--p-hauch); border-bottom:1px solid var(--p-rand)}
.kopf .raum{flex:1}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--p-knopf); color:var(--p-auf); display:grid; place-items:center; font-weight:600; font-size:14px; flex:none; text-decoration:none}
.logo{display:inline-flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font-size:18px; font-weight:650; line-height:1; min-width:0}
.logo img{display:block; height:32px; width:auto; max-width:180px; object-fit:contain}
.logo .logo-dunkel{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo.hat-dunkel .logo-hell{display:none} :root:not([data-theme="light"]) .logo.hat-dunkel .logo-dunkel{display:block} }
:root[data-theme="dark"] .logo.hat-dunkel .logo-hell{display:none}
:root[data-theme="dark"] .logo.hat-dunkel .logo-dunkel{display:block}
.logo-zeichen{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--p-knopf); color:var(--p-auf); font-size:14px; font-weight:700}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--linie); overflow-x:auto; scrollbar-width:none}
.tabs a,.tabs button{border:0; background:none; padding:10px 14px 12px; font-size:15px; font-weight:500; color:var(--text-2); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; text-decoration:none}
.tabs [aria-selected="true"],.tabs [aria-current="page"]{color:var(--p-text); border-bottom-color:var(--p-knopf)}
.brot{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13.5px; color:var(--text-2); list-style:none; margin:0; padding:0}
.brot li{display:flex; align-items:center; gap:6px}
.brot a{color:var(--text-2)}
.brot .ic{width:14px; height:14px; color:var(--text-3)}
.brot [aria-current]{color:var(--text); font-weight:500}
.seitenleiste{display:grid; gap:2px; align-content:start; padding:14px 10px}
.seitenleiste a,.seitenleiste button{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:var(--text-2); text-decoration:none; font-size:15px; font-weight:500; border:0; background:none; cursor:pointer; text-align:left; width:100%}
.seitenleiste a:hover,.seitenleiste button:hover{background:var(--p-hauch); color:var(--text)}
.seitenleiste [aria-current="page"]{background:var(--p-zart); color:var(--p-text)}
.seitenleiste .gruppe{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); font-weight:600; padding:14px 12px 6px}
.menue{position:relative}
.menue-liste{position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:220px; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r); box-shadow:var(--sch-2); padding:6px; display:grid; gap:2px}
.menue-liste a,.menue-liste button{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; border:0; background:none; font-size:14.5px; color:var(--text); text-decoration:none; cursor:pointer; text-align:left; width:100%}
.menue-liste a:hover,.menue-liste button:hover{background:var(--p-hauch)}
.menue-liste .kopfinfo{padding:8px 10px 10px; border-bottom:1px solid var(--linie); margin-bottom:4px; font-size:13px; color:var(--text-2)}
.menue-liste .kopfinfo b{display:block; color:var(--text); font-size:14.5px}

/* Fortschritt und Schritte */
.balken{height:8px; border-radius:var(--r-rund); background:var(--flaeche-2); overflow:hidden}
.balken i{display:block; height:100%; background:var(--p-knopf); border-radius:inherit; transition:width .4s}
.schritte{display:flex; list-style:none; margin:0; padding:0; gap:6px}
.schritte li{flex:1; display:grid; gap:8px; font-size:13px; color:var(--text-3); min-width:0}
.schritte li::before{content:""; height:4px; border-radius:2px; background:var(--linie)}
.schritte li.erledigt::before,.schritte li.aktuell::before{background:var(--p-knopf)}
.schritte li.aktuell{color:var(--text); font-weight:600}
.schritte li.erledigt{color:var(--text-2)}
.schritte li a,.schritte li button{border:0; background:none; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none}

/* Dialoge und Seitenblatt */
dialog{border:0; padding:0; color:var(--text); background:var(--flaeche); border-radius:var(--r-gross); box-shadow:var(--sch-3); max-width:min(520px,calc(100vw - 32px)); width:100%}
dialog::backdrop{background:rgb(15 18 24 / .45)}
.dlg-kopf{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px 22px 0}
.dlg-kopf h2{font-size:19px; font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung)}
.dlg-rumpf{padding:14px 22px; display:grid; gap:14px; align-content:start; color:var(--text-2); font-size:15px}
.dlg-fuss{padding:8px 22px 20px; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
dialog.blatt{margin:0 0 0 auto; height:100%; max-height:100%; max-width:min(440px,100vw); border-radius:var(--r-gross) 0 0 var(--r-gross); display:none; flex-direction:column}
dialog.blatt[open]{display:flex}
dialog.blatt form{display:contents}
dialog.blatt .dlg-rumpf{flex:1; overflow:auto}
dialog.blatt .dlg-fuss{border-top:1px solid var(--linie); padding-top:14px; padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
@media (max-width:600px){ dialog.blatt{margin:auto 0 0; height:auto; max-height:88vh; max-width:100vw; border-radius:var(--r-gross) var(--r-gross) 0 0} }

/* Toasts */
.toasts{position:fixed; z-index:50; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:grid; gap:8px; width:min(380px,calc(100vw - 32px))}
.toast{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 16px; border-radius:var(--r); background:var(--text); color:var(--seite); box-shadow:var(--sch-3); font-size:14.5px; animation:rein .2s ease-out}
.toast span{flex:1}
.toast .k-leise{color:var(--seite); min-height:32px; padding:0 10px; text-decoration:underline; text-underline-offset:3px}
.toast .k-leise:hover{background:rgb(127 127 127 / .2)}
.toast .ic.ok{color:var(--ok)}
.toast .ic.fehler{color:var(--fehler)}
@keyframes rein{from{transform:translateY(8px); opacity:0}}

/* Speicherstand */
.speicher{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text-2); min-height:32px}
.speicher[data-zustand="ok"] .ic{color:var(--ok)}
.speicher[data-zustand="fehler"]{color:var(--fehler)}

/* Fusszeile */
.fuss{border-top:1px solid var(--linie); padding:20px; padding-bottom:max(20px,env(safe-area-inset-bottom,0px)); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:13px; color:var(--text-2); background:var(--flaeche)}
.fuss .links{display:flex; flex-wrap:wrap; gap:16px}
.fuss a{color:var(--text-2)}

/* Seitenaufbau */
.app{display:grid; grid-template-columns:1fr; min-height:calc(100vh - 64px); min-height:calc(100dvh - 64px); position:relative}
.app > .seitenleiste{display:none; background:var(--flaeche); border-right:1px solid var(--linie)}
.app.nav-offen > .seitenleiste{display:grid; position:fixed; z-index:25; top:64px; bottom:0; left:0; width:min(280px,85vw); box-shadow:var(--sch-3); overflow:auto}
@media (min-width:900px){
  .app.mit-leiste{grid-template-columns:248px 1fr; background:linear-gradient(to right,var(--flaeche) 248px,var(--linie) 248px 249px,transparent 249px)}
  .app.mit-leiste > .seitenleiste{display:grid; position:sticky; top:64px; height:calc(100vh - 64px); box-shadow:none; overflow:auto; border-right:0; background:transparent}
  .nur-schmal{display:none!important}
}
@media (max-width:899px){ .nur-breit{display:none!important} }
.app-haupt{min-width:0; display:flex; flex-direction:column}
.inhalt{padding:24px; padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px)); display:grid; gap:18px; align-content:start; flex:1; width:100%; max-width:1280px}
@media (max-width:600px){ .inhalt{padding:16px} .kopf{padding-inline:16px; gap:10px} }
.titelzeile{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px}
.titelzeile h1{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:var(--g-28)}
.titelzeile p{color:var(--text-2); font-size:15px; margin-top:4px}
.werkzeuge{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.suche{position:relative; flex:1 1 240px; max-width:360px}
.suche .ic{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); pointer-events:none}
.suche .eingabe{padding-left:40px}
.taste{display:inline-block; font:600 11.5px/1 var(--mono); padding:3px 6px; border:1px solid var(--linie-stark); border-bottom-width:2px; border-radius:5px; background:var(--flaeche); color:var(--text-2)}
.code{margin:0; background:var(--flaeche-2); border-radius:var(--r-klein); padding:12px; overflow-x:auto; font:12.5px/1.6 var(--mono); color:var(--text)}

/* Musterseite: Farbfelder und Masse */
.farben{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px}
.farbe{border:1px solid var(--linie); border-radius:var(--r); overflow:hidden; font-size:12px}
.farbe i{display:block; height:56px}
.farbe div{padding:8px 10px; display:grid; gap:2px}
.farbe code{font:11px var(--mono); color:var(--text-3)}
.typo-zeile{display:grid; grid-template-columns:90px 1fr; gap:12px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--linie)}
.typo-zeile code{font:11px var(--mono); color:var(--text-3)}

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important} }
@media print{ .kopf,.seitenleiste,.toasts,.fuss{display:none!important} body{background:#fff} }

/* Einstellungsseite */
.e-raster{display:grid; gap:20px; align-items:start}
@media (min-width:1100px){ .e-raster{grid-template-columns:minmax(0,1fr) 360px} .e-vorschau{position:sticky; top:88px} }
.e-vorschau{display:grid; gap:14px}
.e-speichern{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross)}
@media (max-width:1099px){ .e-speichern{position:sticky; bottom:12px; box-shadow:var(--sch-2); z-index:5} }
.e-farben{display:grid; gap:16px}
.e-eigen{display:grid; gap:16px; padding-left:14px; border-left:3px solid var(--p-rand)}
.e-eigen[hidden]{display:none}
.v-klein{margin-top:10px; font-size:var(--g-13); color:var(--text-2)}
@media (min-width:720px){ .e-farben{grid-template-columns:repeat(3,1fr)} }
.e-logos{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.e-logo{margin:0; display:grid; gap:6px; font-size:12.5px; color:var(--text-2)}
.e-logo-bild{display:grid; place-items:center; height:84px; border-radius:var(--r); border:1px solid var(--linie); padding:12px}
.e-logo.hell .e-logo-bild{background:#FFFFFF}
.e-logo.dunkel .e-logo-bild{background:#1B1E23}
.e-logo img{max-height:56px; max-width:100%; object-fit:contain}
.e-farben .feld{grid-template-rows:auto 1fr auto}

/* Tabellen auf dem Handy: Zeilen werden Blöcke, kein seitliches Scrollen.
   Hauptzelle .haupt, Zusatzangaben .meta (mit data-label), Umbruch über .umbruch */
.tab td.umbruch{display:none}
@media (max-width:640px){
  .tab-huelle.stapeln{overflow:visible}
  .stapeln table.tab{min-width:0}
  .stapeln .tab thead{display:none}
  .stapeln .tab tbody{display:block}
  .stapeln .tab tbody tr{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; position:relative; min-height:56px; padding:10px 10px 12px 76px; border-top:1px solid var(--linie)}
  .stapeln .tab tbody tr:first-child{border-top:0}
  .stapeln .tab td{display:block; height:auto; padding:0; border:0; width:auto}
  .stapeln .tab td:has(> .ankreuz){position:absolute; left:12px; top:16px}
  .stapeln .tab td:has(> .griff){position:absolute; left:40px; top:10px}
  .stapeln .tab td.haupt{flex:1 1 100%; min-width:0}
  .stapeln .tab td.haupt .zelle-edit{min-width:0; margin-left:-9px}
  .stapeln .tab td.meta{font-size:13.5px; color:var(--text-2)}
  .stapeln .tab td[data-label]::after{content:" " attr(data-label)}
}