/* SynergyBytes-Portal · Stylesheet des Grundgerüsts (Plan synergybytes-portal-live, AP1).
   Quelle der Werte: SynergyBytes/design/system/tokens.css (DESIGN.md) und der abgenommene
   Portalentwurf entwuerfe/partnerportal-demo-2026-10-17.html. Kein Wert, der dort nicht steht.
   Erweiterungen gegenüber DESIGN.md sind markiert („Erweiterung“). */

/* ---------- Schriften: selbst gehostet, keine Anfrage an fremde Server ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("fonts/martian-mono-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 800;font-style:normal;font-display:swap}

/* ---------- Tokens ----------
   Dunkel ist die Vorgabe. Hell über html[data-theme="hell"] (Schalter) oder, ohne gemerkte Wahl,
   über prefers-color-scheme. Kopfleiste und Seitenleiste tragen .nacht und bleiben dunkel.
   Jede Farbe steht genau einmal, als light-dark(hell, dunkel); welche Hälfte gilt, entscheidet
   color-scheme des Elements. So gibt es die hellen Werte nur an einer Stelle.
   schwelle: light-dark() braucht Chrome 123, Firefox 120, Safari 17.5 (alle seit Mai 2024);
   ältere Browser fallen auf ihre Standardfarben zurück. Erst ein Partnerkreis mit älteren
   Browsern verlangt den Rückweg zu zwei Tokenblöcken. */
:root{color-scheme:dark light}
html[data-theme="hell"]{color-scheme:light}
html[data-theme="dunkel"],.nacht{color-scheme:dark}
:root{
  --schirm:light-dark(#F3F5F9,#090D15);--grund:light-dark(#E9EDF3,#10151F);--feld:light-dark(#FFFFFF,#1A2130);
  --feld-2:light-dark(#E4E8F0,#232B3D);              /* Erweiterung: angehobene Fläche */
  --text:light-dark(#0C1324,#EAF0FB);--lese:light-dark(#2B3448,#C9D2E3);--leise:light-dark(#56627A,#9FAAC0);
  --warm:light-dark(#A35000,#FFB44D);--warm-h:light-dark(#8A4400,#FFC670);--warm-hell:light-dark(#8A4400,#FFE2A8);
  --kalt:light-dark(#0B6F94,#3ED4FF);--kalt-hell:light-dark(#095B7A,#C2F1FF);
  --auf-warm:light-dark(#FFFFFF,#1A1002);--auf-kalt:light-dark(#FFFFFF,#04222E);
  --auge:var(--warm-hell);--link:light-dark(#0B6F94,#C2F1FF);--fokus:light-dark(#0C1324,#FFE2A8);
  --ok:light-dark(#166534,#4ADE80);--fehler:light-dark(#B3261E,#FF8A7A);--hinweis:light-dark(#8A5A00,#FFE2A8);   /* Erweiterung: Status */
  --mod-sf:light-dark(#0B6F94,#3ED4FF);--mod-uk:light-dark(#A35000,#FFE2A8);                 /* Erweiterung: Modulfarben (Eis / Feuer) */
  --linie:light-dark(#E1E6EE,rgba(159,170,192,.16));
  --schatten:0 14px 36px -18px light-dark(rgba(12,19,36,.22),transparent);
  --schein-warm:255,120,30;--schein-kalt:50,170,255;
}
:root{
  --schrift-text:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;
  --schrift-code:"Martian Mono",ui-monospace,monospace;
  --gewicht-titel:650;--gewicht-fett:700;
  --schrift-h2-seite:clamp(24px,2.4vw,32px);--schrift-h2-klein:22px;
  --schrift-wortmarke:21px;
  --schrift-erkl:17px;--schrift-leitsatz:16px;--schrift-knopf:15px;--schrift-marke:13px;--schrift-fuss:12.5px;
  --rand:32px;--rand-telefon:18px;
  --abstand-8:8px;--abstand-10:10px;--abstand-14:14px;--abstand-16:16px;--abstand-18:18px;--abstand-20:20px;
  --abstand-22:22px;--abstand-24:24px;--abstand-28:28px;--abstand-44:44px;--abstand-56:56px;--abstand-88:88px;
  --ziel:44px;--ziel-haupt:52px;
  --radius-marke:6px;--radius-knopf:9px;--radius-haupt:10px;--radius-feld:12px;--radius-karte:14px;
  --fokus-breite:2px;--fokus-abstand:3px;
  --dauer-farbe:.15s;
  --leiste:256px;
}
/* Erweiterung: Produktabzeichen aus dem Schichtfix-Designsystem, in hell und dunkel gleich */
:root,.nacht{
  --sf-ocean:#60C6C9;--sf-deep:#23376E;
  --uk-flaeche:#FFE2A8;--uk-schrift:#1A1002;   /* vorläufig, Logo nicht final */
  --radius-pille:999px;
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--schrift-text);font-size:var(--schrift-leitsatz);line-height:1.5;background:var(--schirm);color:var(--lese);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{color:var(--text);font-weight:var(--gewicht-titel);margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a{color:var(--link);transition:color var(--dauer-farbe)}
[hidden]{display:none!important}
:focus-visible{outline:var(--fokus-breite) solid var(--fokus);outline-offset:var(--fokus-abstand)}
main:focus{outline:none}
.mono{font-family:var(--schrift-code);font-size:var(--schrift-marke)}
.leise{color:var(--leise)}
.klein{font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--warm);color:var(--auf-warm);font-weight:var(--gewicht-fett);padding:10px 16px;border-radius:var(--radius-knopf);text-decoration:none}
.sprung:focus{left:8px}
svg.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Kopfleiste mit Weltenwahl ---------- */
.sb-leiste{position:sticky;top:0;z-index:20;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;min-height:56px;padding:6px var(--rand) 6px 14px;background:var(--schirm);color:var(--lese)}
.sb-marke{display:flex;align-items:center;gap:8px;min-height:var(--ziel);min-width:var(--ziel);padding:0 6px;color:var(--text);text-decoration:none;border-radius:var(--radius-knopf);flex:none}
.sb-zeichen{width:32px;height:32px;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.sb-wort{font-size:var(--schrift-wortmarke);letter-spacing:-.01em;line-height:1.1}
.sb-wort strong{font-weight:var(--gewicht-fett)}
.sb-welten{display:flex;align-items:center;gap:4px}
.sb-welt{display:inline-flex;align-items:center;gap:8px;min-height:var(--ziel);min-width:var(--ziel);padding:0 12px;border-radius:var(--radius-knopf);color:var(--lese);text-decoration:none;font-size:var(--schrift-knopf);white-space:nowrap}
.sb-welt:hover{background:var(--feld);color:var(--text)}
.sb-welt[aria-current="page"]{background:var(--kalt);color:var(--auf-kalt);font-weight:var(--gewicht-fett)}
.sb-rechts{display:flex;align-items:center;gap:6px;margin-left:auto}
.symbol{width:var(--ziel);height:var(--ziel);border-radius:var(--radius-knopf);display:grid;place-items:center;color:var(--lese)}
.symbol:hover{background:var(--feld);color:var(--text)}

/* ---------- Gerüst ---------- */
.app{display:grid;grid-template-columns:minmax(0,1fr);min-height:calc(100vh - 56px)}
.app.mit-leiste{grid-template-columns:var(--leiste) minmax(0,1fr)}
.seitenleiste{position:sticky;top:56px;height:calc(100vh - 56px);background:var(--schirm);color:var(--lese);display:flex;flex-direction:column;padding:var(--abstand-10) 14px var(--abstand-18);overflow-y:auto}
.wer-box{margin:var(--abstand-8) 6px var(--abstand-8);padding:12px 14px;border-radius:var(--radius-feld);background:var(--feld)}
.wer-box b{color:var(--text);font-size:17px;font-weight:var(--gewicht-titel);display:block}
.ich{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--linie);font-size:14px;line-height:1.3}
.ich .wer{color:var(--text);font-weight:var(--gewicht-titel)}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:var(--gewicht-fett);flex:none;background:var(--feld-2);color:var(--text)}
.avatar.klein{width:28px;height:28px;font-size:11px}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.nav a{display:flex;align-items:center;gap:12px;min-height:var(--ziel);padding:6px 12px;border-radius:var(--radius-knopf);color:var(--lese);text-decoration:none;font-size:var(--schrift-knopf);line-height:1.25}
.nav a:hover{background:var(--feld);color:var(--text)}
.nav a[aria-current="page"]{background:var(--feld);color:var(--text);font-weight:var(--gewicht-titel)}
.nav a[aria-current="page"] svg{color:var(--warm)}
.nav-gruppe{display:flex;flex-direction:column;gap:2px;margin-top:var(--abstand-14)}
.nav-titel{font-family:var(--schrift-code);font-size:12px;color:var(--leise);padding:2px 12px 4px}
.inhalt{min-width:0;display:flex;flex-direction:column}
.kopf{position:sticky;top:56px;z-index:10;background:var(--schirm);display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px var(--rand)}
.kopf h1{font-size:var(--schrift-h2-seite);letter-spacing:-.02em;line-height:1.15;min-width:0}
main{padding:6px var(--rand) var(--abstand-88);flex:1;display:grid;gap:var(--abstand-20);align-content:start}

/* ---------- Bausteine ---------- */
.karte{background:var(--feld);border-radius:var(--radius-karte);padding:var(--abstand-22);box-shadow:var(--schatten);min-width:0}
.karte h2{font-size:var(--schrift-h2-klein);letter-spacing:-.01em;line-height:1.25}
.karte.schmal{max-width:720px}
.karte-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--abstand-14)}
.karte-kopf .rechts{margin-left:auto}
.auge{font-family:var(--schrift-code);font-size:var(--schrift-marke);color:var(--auge)}
.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-20)}
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-20)}
.welt-karte{display:grid;gap:var(--abstand-14);align-content:start;justify-items:start}
.rahmen{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.haupt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--ziel-haupt);padding:0 var(--abstand-28);border-radius:var(--radius-haupt);background:var(--warm);color:var(--auf-warm);font-size:var(--schrift-erkl);font-weight:var(--gewicht-fett);text-decoration:none;white-space:nowrap}
.haupt:hover{background:var(--warm-h)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ziel);padding:0 18px;border-radius:var(--radius-knopf);background:var(--kalt);color:var(--auf-kalt);font-size:var(--schrift-knopf);font-weight:var(--gewicht-fett);text-decoration:none;white-space:nowrap}
.knopf:hover{background:var(--kalt-hell)}
.still{display:inline-flex;align-items:center;gap:6px;min-height:var(--ziel);color:var(--link);font-size:var(--schrift-knopf);text-decoration:underline;text-underline-offset:3px;padding:0 2px}
.still:hover{color:var(--text)}
.marke{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-marke);font-size:var(--schrift-marke);white-space:nowrap;background:var(--feld-2);color:var(--lese);line-height:1.4}
.marke.ok{background:color-mix(in srgb,var(--ok) 15%,var(--feld));color:var(--ok)}
.marke.fehler{background:color-mix(in srgb,var(--fehler) 15%,var(--feld));color:var(--fehler)}
.marke.hinweis{background:color-mix(in srgb,var(--hinweis) 15%,var(--feld));color:var(--hinweis)}

/* Produktzeichen (Schichtfix Eis, Umsatzkompass Feuer) */
.glyph{width:22px;height:22px;border-radius:50%;flex:none;display:inline-block;background:#fff center/cover no-repeat}
.glyph.sf{background-image:url("schichtfix-zeichen.png")}
.glyph.uk{background-image:url("umsatzkompass-zeichen.png")}
.abzeichen{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:var(--radius-pille);font-size:var(--schrift-fuss);font-weight:var(--gewicht-fett);line-height:1.3;white-space:nowrap;vertical-align:middle}
.abzeichen .glyph{width:18px;height:18px}
.abzeichen.sf{background:var(--sf-ocean);color:var(--sf-deep)}
.abzeichen.uk{background:var(--uk-flaeche);color:var(--uk-schrift)}
.abzeichen.kompakt{padding:3px}

/* Zustand Fehler (Erweiterung, DESIGN.md §12 Punkt 6): Fläche statt Kante (V1, V2) */
.hinweiskasten{border-radius:var(--radius-feld);padding:14px 18px;display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.hinweiskasten.fehler{background:color-mix(in srgb,var(--fehler) 14%,var(--feld))}
.hinweiskasten.fehler > svg{color:var(--fehler)}
.hinweiskasten .hinweis-text{display:grid;gap:4px;flex:1 1 260px;min-width:0}
.hinweiskasten b{color:var(--text)}
.hinweiskasten .aktion{margin-left:auto}

/* Zustand leer */
.leerzustand{text-align:center;padding:var(--abstand-44) var(--abstand-22);display:grid;justify-items:center;gap:12px}
.leerzustand .symbolkreis{width:64px;height:64px;border-radius:50%;background:var(--feld-2);display:grid;place-items:center;color:var(--auge)}
.leerzustand .symbolkreis svg{width:28px;height:28px}
.leerzustand h2{font-size:var(--schrift-h2-klein)}
.leerzustand p{max-width:44ch}

/* Zustand lädt (Erweiterung, DESIGN.md §12 Punkt 6): ruhende Platzhalter, keine Bewegung */
.kachel{display:grid;gap:var(--abstand-14);align-content:start}
.kachel .karte-kopf{margin-bottom:0}
.laedt-text{display:flex;align-items:center;gap:10px}
.laedt-text svg{color:var(--auge)}
.platzhalter{display:grid;gap:10px}
.platzhalter span{display:block;height:44px;border-radius:var(--radius-feld);background:var(--feld-2)}
.platzhalter span:nth-child(2){width:86%}
.platzhalter span:nth-child(3){width:64%}
/* Kachel „<Produkt> gerade nicht erreichbar“: Variante des Fehlerzustands, die ganze Fläche getönt */
.kachel-fehler{background:color-mix(in srgb,var(--fehler) 14%,var(--feld))}
.kachel-fehler .karte-kopf > svg{color:var(--fehler)}
/* Kachel „<Produkt> ist noch nicht verbunden“: ruhig, kein Fehler, keine Tönung */
.kachel-ruhig .karte-kopf > svg{color:var(--auge)}

/* Startseite „Braucht dich“ (AP3): EINE Liste, jede Zeile ist ganz der Link zum Ziel. Die Zeilen sind Flächen
   ohne Linie (V2), keine Karte in der Karte; was blockiert, ist getönt wie die Fehlerkachel. */
.braucht{display:grid;gap:var(--abstand-18);max-width:960px}
.braucht-satz{color:var(--leise)}
.braucht-liste{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.posten{display:flex;align-items:center;gap:14px;min-height:var(--ziel);padding:12px 14px;border-radius:var(--radius-feld);background:var(--feld);color:var(--lese);text-decoration:none}
.posten:hover{background:var(--feld-2);color:var(--text)}
.posten.blockiert{background:color-mix(in srgb,var(--fehler) 14%,var(--feld))}
.posten.blockiert:hover{background:color-mix(in srgb,var(--fehler) 22%,var(--feld))}
.posten-zahl{flex:none;min-width:44px;height:44px;padding:0 8px;border-radius:var(--radius-knopf);display:grid;place-items:center;background:var(--feld-2);color:var(--text);font-size:19px;font-weight:var(--gewicht-fett)}
.posten.blockiert .posten-zahl{color:var(--fehler)}
.posten-zahl svg{width:22px;height:22px}
.posten-text{flex:1;min-width:0;display:grid;gap:4px}
.posten-satz{color:var(--text);font-weight:var(--gewicht-titel);line-height:1.3;overflow-wrap:anywhere}
.posten-meta{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:14px;color:var(--leise)}
.posten > svg{flex:none;color:var(--leise)}

/* Tabellen und Formularfelder für die Fachpakete (Erweiterung, DESIGN.md §12 Punkt 6).
   Tabellenlinien und Feldunterkante sind die erlaubten funktionalen Linien (V2). */
.tabelle{width:100%;border-collapse:collapse;font-size:var(--schrift-knopf)}
.tabelle th{text-align:left;font-weight:500;color:var(--leise);font-size:13px;padding:10px 12px;border-bottom:1px solid var(--linie);white-space:nowrap}
.tabelle td{padding:12px;border-bottom:1px solid var(--linie);vertical-align:middle}
.tabelle tr:last-child td{border-bottom:0}
.tabelle .r{text-align:right;white-space:nowrap}
.tabelle .name{color:var(--text);font-weight:var(--gewicht-titel)}
.feld{display:grid;gap:6px}
.feld label{font-size:14px;color:var(--text);font-weight:var(--gewicht-titel)}
.feld input,.feld textarea{width:100%;min-height:var(--ziel);border:0;border-bottom:1px solid var(--leise);border-radius:var(--radius-knopf) var(--radius-knopf) 0 0;background:var(--feld-2);padding:10px 14px;color:var(--text);font:inherit}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise)}
.feld.fehler input,.feld.fehler textarea{border-bottom:2px solid var(--fehler)}
.feld .feld-meldung{font-size:14px;color:var(--fehler)}
.feld .hilfe{font-size:14px;color:var(--leise)}
.feld input:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* Anmeldung und Registrierung des Betreibers (AP2): ein Feld je Zeile, die Aktionen darunter.
   Der QR-Code steht auf Weiß wie die Produktzeichen, damit ihn jede Kamera auch im dunklen Modus liest. */
.anmeldung{display:grid;gap:var(--abstand-18);justify-items:start}
.anmeldung > h2{font-size:var(--schrift-h2-klein)}
.formular{display:grid;gap:var(--abstand-18);width:100%;max-width:440px}
.aktionen{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.schluessel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--abstand-20);align-items:start;width:100%}
.qr{background:#fff;padding:12px;border-radius:var(--radius-feld);width:196px;max-width:100%}
.qr svg{display:block;width:100%;height:auto}
.geheimnis{font-family:var(--schrift-code);font-size:15px;letter-spacing:.06em;overflow-wrap:anywhere;color:var(--text)}
.codeliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;padding:0;margin:0;list-style:none}
.codeliste code{font-family:var(--schrift-code);font-size:15px;color:var(--text)}

/* Vertriebspartner (AP4): Auswahlfeld wie die Eingabefelder, Tabellen dürfen schmal seitlich rollen statt umzubrechen,
   Stand je Produkt als Zweispalter, ruhiger Hinweis als Fläche ohne Signalfarbe. */
.partner{display:grid;gap:var(--abstand-20)}
.feld select{width:100%;min-height:var(--ziel);border:0;border-bottom:1px solid var(--leise);border-radius:var(--radius-knopf) var(--radius-knopf) 0 0;background:var(--feld-2);padding:10px 14px;color:var(--text);font:inherit}
.feld.fehler select{border-bottom:2px solid var(--fehler)}
.feld select:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.tabelle-rahmen{width:100%;overflow-x:auto}
.tabelle a{color:var(--text)}
.hinweiskasten.ruhig{background:var(--feld-2)}
.hinweiskasten.ruhig > svg{color:var(--link)}
.stand{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:center;margin:0}
.stand dt{color:var(--leise);font-size:14px}
.stand dd{margin:0;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;overflow-wrap:anywhere}
.stand .formular{width:auto}
.abweichungen,.nachweise{display:grid;gap:8px;margin:0;padding-left:18px}

/* Bereiche der Betreiberwelt (AP5): Karten untereinander im Abstand der Partnerseiten, ein Formular in einer Tabellenzelle
   (Entziehen) so schmal wie sein Knopf. */
.bereich{display:grid;gap:var(--abstand-20)}
.tabelle .formular,.aktionen .formular{width:auto;max-width:none}
.tabelle .mono{white-space:nowrap}
@media (max-width:600px){.tabelle .breit{display:none}.tabelle .marke{white-space:normal}}

/* ---------- Schmal: untere Leiste statt Seitenleiste ---------- */
.unten-nav{display:none}
@media (max-width:1100px){
  .raster-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--rand:var(--rand-telefon)}
  .app.mit-leiste{grid-template-columns:minmax(0,1fr)}
  .seitenleiste{display:none}
  .sb-leiste{min-height:52px;padding:4px 10px;gap:4px 6px}
  .sb-wort{display:none}
  .sb-marke{padding:0;justify-content:center}
  .sb-welten{gap:2px}
  .sb-welt{padding:0 10px;justify-content:center}
  .unten-nav span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kopf{top:52px;padding:10px var(--rand);gap:10px}
  .raster-2,.raster-3,.schluessel{grid-template-columns:minmax(0,1fr)}
  .karte{padding:var(--abstand-18)}
  .leerzustand{padding:var(--abstand-28) var(--abstand-8)}
  body:has(.unten-nav) main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .unten-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--schirm);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -12px 30px -18px rgba(2,5,14,.9)}
  .unten-nav > a,.unten-nav summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:var(--radius-knopf);color:var(--leise);font-size:11.5px;text-decoration:none;text-align:center;line-height:1.2;cursor:pointer;list-style:none}
  .unten-nav summary::-webkit-details-marker{display:none}
  .unten-nav > a[aria-current="page"],.unten-nav .mehr[open] summary{color:var(--text);background:var(--feld);font-weight:var(--gewicht-titel)}
  .unten-nav > a[aria-current="page"] svg{color:var(--warm)}
  .mehr-blatt{display:grid;position:fixed;left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:31;background:var(--feld);border-radius:var(--radius-karte);padding:10px;gap:2px;box-shadow:0 20px 50px -10px rgba(2,5,14,.8);max-height:calc(100vh - 110px);overflow-y:auto}
  .mehr-blatt a{display:flex;align-items:center;gap:12px;min-height:var(--ziel);padding:0 12px;border-radius:var(--radius-knopf);color:var(--lese);text-decoration:none;width:100%}
  .mehr-blatt a:hover{background:var(--feld-2);color:var(--text)}
  .mehr-blatt a[aria-current="page"]{background:var(--feld-2);color:var(--text);font-weight:var(--gewicht-titel)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}