/* Sieger 2 – Basis designer-h («Kamerafahrt ins Kristall»), Held-Schrift aus designer-d, Prismen-Faden aus designer-i.
   Tokens aus tokens.css (Kristall final), hier nur Grundwerte und Layout. */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(/fonts/7cHpv4kjgoGqM7E_DMs5.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(/fonts/7cHqv4kjgoGqM7E3_-gs51os.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(/fonts/7cHqv4kjgoGqM7E30-8s51os.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';src:url(/fonts/geist-mono-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --bg:#03020a;--surface:#14141b;--text:#f2f2f0;--muted:#c4c4c0;--dim:#8f8f8a;--line:rgba(242,242,240,.12);
  --font:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:'Geist Mono',ui-monospace,'Cascadia Code',monospace;
  --pad:clamp(20px,5vw,72px);
  /* Tafel: eigene Textebene, deckend genug, dass Kontrast nie vom Bild dahinter abhängt */
  --tafel-bg:rgba(3,4,18,.96);
  --kopf-h:64px;
  /* Display-Schrift aus designer-d: Barlow 600, sehr gross, enge Laufweite */
  --display:clamp(46px,6.9vw,128px);
  --ease-out:cubic-bezier(.23,1,.32,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 var(--font);font-kerning:normal;font-feature-settings:"kern" 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
figure{margin:0}
a{color:var(--zl-k-link);text-decoration:var(--zl-k-link-unterstrich);text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--zl-k-link-unterstrich-farbe)}
a:hover{color:var(--zl-k-link-hover)}
:focus-visible{outline:2px solid var(--zl-k-akzent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-weight:600;letter-spacing:-.024em;line-height:1.08;margin:0;hyphens:none;text-wrap:balance}
p{margin:0}

.skip{position:fixed;left:12px;top:-60px;z-index:50;background:var(--zl-k-knopf-bg);color:var(--zl-k-knopf-text);padding:12px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:20;height:var(--kopf-h);display:flex;align-items:center;gap:28px;padding:0 var(--pad);
  background:rgba(3,2,10,.96)}
.kopf::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--zl-k-kopf-linie);opacity:.6}
.marke{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--text);text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.01em}
.marke img{width:28px;height:28px}
.kopf-nav{display:flex;gap:24px;margin-left:12px}
.kopf-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font-weight:500;font-size:15px}
.kopf-nav a:hover{color:var(--text)}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.sprache{font:500 13px/1 var(--mono);color:var(--muted);background:none;border:1px solid var(--zl-k-knopf2-rand);border-radius:8px;min-width:44px;min-height:44px;cursor:pointer;transition:color var(--zl-k-dauer) ease,border-color var(--zl-k-dauer) ease}
.sprache:hover{color:var(--text);border-color:var(--zl-k-knopf2-hover-rand)}

/* ---------- Knöpfe (Komponenten aus tokens.css, hier nur Grösse) ---------- */
.zl-k-knopf,.zl-k-knopf2{min-height:48px;font-size:15px;text-decoration:none}
.zl-k-knopf:hover{color:var(--zl-k-knopf-text)}
.zl-k-knopf2:hover{color:var(--text);border-color:var(--zl-k-knopf2-hover-rand)}
.knopf2{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--zl-k-knopf2-rand);color:var(--text);
  text-decoration:none;font-weight:500;font-size:14px;transition:border-color var(--zl-k-dauer) ease}
.knopf2:hover{color:var(--text);border-color:var(--zl-k-knopf2-hover-rand)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Bühne (3D) ---------- */
.buehne{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(70% 60% at 50% 55%,#07061f 0%,var(--bg) 70%)}
.welt{position:absolute;inset:0;perspective:1000px;perspective-origin:50% 50%}
.eb{position:absolute;left:50%;top:50%;max-width:none;opacity:0;visibility:hidden;backface-visibility:hidden;user-select:none}
/* Tunnel-Ebenen ohne harte Bildkante: aus der Ferne erscheinen sie als weicher Lichtraum, nie als Rechteck */
/* Objekte: Bodenspiegelung läuft weich aus statt an der Bildkante abzubrechen */
.eb[data-eb="container"],.eb[data-eb="alpen"],.eb[data-eb="tresor"],.eb[data-eb="modelle"],.eb[data-eb="waage"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 72%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 72%,transparent);mask-composite:intersect}
/* Perf: Weichzeichner, Randmaske und Saettigung der Buehnenebenen sind ins Bild gebacken (tools/bake-buehne.py), nicht zur Laufzeit */
.boden{position:absolute;left:0;right:0;bottom:0;height:46vh;background:var(--zl-k-boden);opacity:.7;transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.licht{position:absolute;left:-10%;top:-6%;width:80%;max-width:none;opacity:.5;animation:licht-wandert 18s ease-in-out infinite alternate;}
/* Schlanke Fassung (JS setzt html.lite, siehe kristall-s2.js): die Licht-Schleife steht */
.lite .licht{animation:none;transform:translate3d(2%,1.5%,0)}
/* Die eine Schleife: Licht wandert langsam über das Glas (Licht darf sich bewegen, Körper kaum) */
@keyframes licht-wandert{from{transform:translate3d(-4%,-2%,0) rotate(-2deg)}to{transform:translate3d(8%,5%,0) rotate(2deg)}}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(3,2,10,.75) 100%)}

/* ---------- Bildfolge und Prismen ---------- */
.folge{position:fixed;inset:0;z-index:1;width:100%;height:100%;opacity:0;pointer-events:none;background:#000}
.eb.morph{mix-blend-mode:screen}   /* Frames auf reinem Schwarz: screen lässt nur das Glas stehen */
.plabels{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.plabel{position:absolute;left:0;top:0;opacity:0;visibility:hidden;white-space:nowrap;font:600 clamp(12px,1.1vw,14px)/1 var(--font-sans,'Barlow',system-ui,sans-serif);letter-spacing:.04em;color:#f4ecff;background:rgba(3,4,18,.96);border:1px solid rgba(244,236,255,.28);padding:6px 10px;border-radius:999px}
.ruhig .plabels{display:none}
.folge-hinweis{position:fixed;left:8px;bottom:8px;z-index:30;font:500 11px/1.3 var(--mono);color:var(--dim);background:rgba(3,2,10,.85);padding:4px 8px;border-radius:6px;pointer-events:none}

/* ---------- Tiefenmesser (Raumnavigation) ---------- */
.tiefe{position:fixed;right:clamp(12px,2.4vw,36px);top:50%;transform:translateY(-50%);z-index:15;transition:opacity var(--zl-k-dauer-lang) var(--ease-out),visibility 0s}
/* Im Held tritt der Tiefenmesser zurück, damit Tafel 6 frei steht */
.js .tiefe.weg{opacity:0;visibility:hidden;transition:opacity var(--zl-k-dauer-lang) var(--ease-out),visibility 0s var(--zl-k-dauer-lang)}
.tiefe ol{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.tiefe ol::before{content:"";position:absolute;right:21px;top:22px;bottom:22px;width:1px;background:linear-gradient(180deg,var(--zl-k-magenta),var(--zl-k-indigo) 50%,var(--zl-k-cyan));opacity:.45}
.tiefe a{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:44px;min-width:44px;padding-right:14px;color:var(--dim);text-decoration:none;font:500 12px/1 var(--mono);letter-spacing:.02em}
.tiefe a span:not(.tiefe-punkt){opacity:0;transform:translateX(6px);transition:opacity var(--zl-k-dauer) var(--ease-out),transform var(--zl-k-dauer) var(--ease-out);background:rgba(3,2,10,.85);padding:4px 6px;border-radius:4px}
.tiefe:hover a span,.tiefe a:focus-visible span,.tiefe a[aria-current] span{opacity:1;transform:none}
.tiefe a[aria-current]{color:var(--text)}
.tiefe-punkt{order:2;width:15px;height:15px;border-radius:50%;border:1px solid rgba(159,160,255,.5);background:var(--bg);position:relative;transition:transform var(--zl-k-dauer) var(--ease-out)}
.tiefe a[aria-current] .tiefe-punkt{transform:scale(1.15);border-color:var(--zl-k-kantenlicht);box-shadow:var(--zl-k-glow-s);background:radial-gradient(circle,var(--zl-k-kantenlicht) 0 25%,var(--zl-k-indigo) 60%)}

/* ---------- Held ---------- */
main{position:relative;z-index:5}
.held{position:relative;background:var(--bg);padding:calc(var(--kopf-h) + clamp(28px,5vh,64px)) var(--pad) clamp(56px,9vh,110px)}
.held::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,10vh,120px);background:linear-gradient(180deg,rgba(3,2,10,0),var(--bg));transform:translateY(100%);pointer-events:none}
.held-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);max-width:1440px;margin:0 auto;align-items:start}
.vorzeile{grid-column:1/-1;justify-self:start;font:500 13px/1 var(--mono);color:var(--zl-k-cyan-hell);border:1px solid rgba(156,240,255,.32);border-radius:999px;padding:6px 12px;margin-bottom:clamp(20px,3vh,32px)}
.display{grid-column:1/8;grid-row:2;font-size:var(--display);line-height:.95;letter-spacing:-.045em;margin-bottom:clamp(28px,4vh,48px)}
.display span{display:block}
.held-text{grid-column:1/7;grid-row:3;display:grid;gap:28px;align-content:start}
/* Tafel 6 steht oben rechts neben der Schrift; Ausschnitt auf das ZL (es liegt im Bild rechts der Mitte) */
.held-bild{grid-column:8/13;grid-row:2/4;align-self:center;position:relative;border-radius:var(--zl-k-radius-l);overflow:hidden;box-shadow:var(--zl-k-kante);aspect-ratio:1/1;background:#000}
.held-bild::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--zl-k-rahmen-ruhig);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.held-bild picture,.held-bild img{display:block;width:100%;height:100%}
.held-bild img{object-fit:cover;object-position:94% 50%}
.lead{font-size:clamp(19px,1.5vw,23px);line-height:1.45;color:var(--muted);max-width:34ch}
.faktzeile{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 0;color:var(--text);font-size:15px;font-weight:500}
.faktzeile li+li::before{content:"·";margin:0 .6em;color:var(--zl-k-cyan-hell)}

/* ---------- Räume (Inhalt) ---------- */
.raum{position:relative;min-height:190vh;padding:0 var(--pad) 15vh}
.raum-wachstum{min-height:340vh}
.zwischenraum{height:170vh}
.raum-familie{min-height:0;padding-bottom:var(--space-9,96px)}
.tafel{position:sticky;top:calc(var(--kopf-h) + 7vh);width:min(520px,100%);padding:32px 34px 30px;border-radius:var(--zl-k-radius-l);
  background:var(--tafel-bg);box-shadow:var(--zl-k-kante),0 30px 80px rgba(0,0,0,.55)}
.tafel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--zl-k-rahmen-ruhig);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.raum[data-seite="rechts"] .tafel{margin-left:auto;margin-right:clamp(40px,6vw,110px)}
.raum[data-seite="links"] .tafel{margin-left:clamp(0px,2vw,40px)}
.tafel h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;margin-bottom:16px}
.tafel h3{font-size:19px;letter-spacing:-.012em;margin:22px 0 6px}
.tafel p{color:var(--muted);max-width:60ch}
.tafel p+p{margin-top:12px}
.lead-klein{font-size:16px}
.etikett{display:inline-block;font:500 12px/1 var(--mono);color:var(--zl-k-tag-text);background:var(--zl-k-tag-bg);border:1px solid var(--zl-k-tag-rand);border-radius:999px;padding:6px 10px;margin-bottom:12px}
.tafel .etikett+p{margin-top:0}
.links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:14px!important;font-size:15px}
.links a{display:inline-flex;align-items:center;min-height:44px}
.liste{margin:20px 0 0;display:grid;gap:4px}
.liste dt{font-weight:600;color:var(--text);margin-top:12px}
.liste dd{margin:0;color:var(--muted)}
.zahl{font-size:clamp(28px,2.8vw,38px);font-weight:600;letter-spacing:-.025em;color:var(--text)!important;margin-bottom:14px;font-variant-numeric:lining-nums}
.plaene{font-size:15px;font-variant-numeric:tabular-nums lining-nums}
.punkte{margin:14px 0 0;padding:0 0 0 18px;color:var(--muted);font-size:15px;display:grid;gap:4px}
.punkte li::marker{color:var(--zl-k-cyan-hell)}

/* Wachstum: Tafel unten links, die Bildfolge trägt die Bühne */
.tafel-wachstum{top:auto;bottom:clamp(24px,7vh,72px);margin-top:62vh;margin-left:clamp(0px,2vw,40px);width:min(500px,100%)}

/* Familie */
.tafel-familie{width:min(1040px,100%);margin:0 auto;top:calc(var(--kopf-h) + 4vh)}
.familie{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.familie li{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px 16px;border-radius:var(--zl-k-radius-m);background:var(--zl-k-glas);border:1px solid var(--zl-k-glas-rand);
  transition:border-color var(--zl-k-dauer) ease}
.familie li:hover{border-color:var(--zl-k-glas-rand-stark)}
.familie img{width:72px;height:72px}
.familie h3{font-size:17px;margin:0 0 4px}
.familie p{font-size:15px;line-height:1.4}
.familie a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
/* Kacheln kommen gestaffelt, wenn man ankommt (einmalig, per Klasse) */
.js .familie li{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),border-color var(--zl-k-dauer) ease;transition-delay:calc(var(--i)*60ms),calc(var(--i)*60ms),0s}
.js .familie.da li,.js .familie li:focus-within{opacity:1;transform:none}

/* Schluss: das ZL setzt sich hier wieder zusammen */
.schluss{position:relative;min-height:100vh;scroll-margin-top:var(--kopf-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:80px var(--pad) 40px;text-align:center}
.zl-anker{width:clamp(280px,42vw,620px);aspect-ratio:4/3;position:relative}
.zl-anker picture,.zl-still{display:block;width:100%;height:100%}
/* Maske je Element, nicht am Behälter: sonst isoliert sie die Gruppe und screen mischt gegen Schwarz */
/* main ist ein eigener Stapelkontext, screen greift hier nicht gegen die Bühne: die schwarzen Ränder laufen über eine Ellipse aus */
.zl-still,.zl-schluss{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 58%,transparent 100%)}
.zl-still{object-fit:cover}
.zl-schluss{position:absolute;inset:0;width:100%;height:100%;visibility:hidden}
.zl-anker.an .zl-schluss{visibility:visible}
.zl-anker.an .zl-still{visibility:hidden}
.schluss h2{font-size:clamp(40px,5.4vw,84px);line-height:.95;letter-spacing:-.04em;max-width:14ch;text-shadow:0 2px 24px rgba(3,2,10,.9)}
.schluss h2 span{display:block}
.schluss .knoepfe{justify-content:center}
.strahl{position:relative;background:var(--bg);margin-top:clamp(20px,4vh,48px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 80%,transparent)}
.strahl img{width:100%;height:auto}
.strahl::before{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,var(--bg),rgba(3,2,10,0));z-index:1;pointer-events:none}

.fuss{position:relative;z-index:5;background:var(--bg);border-top:1px solid var(--line);padding:36px var(--pad) 48px;display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;color:var(--dim);font-size:14px}
.fuss-marke{display:flex;align-items:center;gap:10px;color:var(--muted)}
.fuss nav{display:flex;flex-wrap:wrap;gap:0 22px}
.fuss a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}

/* Stille Bilder nur ohne Bewegung (siehe unten) */
.ruhig-bild{display:none}

/* ---------- Schmal ---------- */
@media (max-width:1100px){
  .display{grid-column:1/9}
  .held-bild{grid-column:9/13}
  .held-text{grid-column:1/9}
}
@media (max-width:900px){
  .kopf-nav{display:none}
  .tiefe{display:none}
  .familie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .familie li:first-child{grid-column:1/-1;flex-direction:row;align-items:center}
  .held-raster{display:flex;flex-direction:column;align-items:stretch}
  .vorzeile{align-self:flex-start}
  .held-bild{margin:0 0 28px;aspect-ratio:4/3}
  .held-bild img{object-position:93% 50%}
  .display{margin-bottom:24px}
}
@media (max-width:640px){
  :root{--kopf-h:58px}
  body{font-size:16px}
  .kopf{gap:12px}
  .kopf-rechts{gap:8px}
  .marke span{font-size:17px}
  .raum{min-height:170vh}
  .raum-wachstum{min-height:300vh}
  /* Handy: Objekt steht oben im Bild, die Tafel läuft im Fluss darüber (nie abgeschnitten, nie halb durchsichtig) */
  .tafel,.raum[data-seite] .tafel,.tafel-wachstum{position:relative;top:auto;bottom:auto;margin:0;width:100%;padding:24px 22px}
  /* Symbolband: die Tafel verschwindet weich, bevor sie das Symbol deckt (Pixelwert --ab setzt kamera.js) */
  .raum[data-seite] .tafel{-webkit-mask-image:linear-gradient(180deg,transparent var(--ab,-1px),#000 calc(var(--ab,-1px) + 36px));mask-image:linear-gradient(180deg,transparent var(--ab,-1px),#000 calc(var(--ab,-1px) + 36px))}
  .raum:not(.raum-familie){padding-top:62vh;padding-bottom:28vh}
  .raum-wachstum{padding-top:170vh}
  .display{font-size:clamp(40px,11.4vw,56px);line-height:.95;letter-spacing:-.04em}
  .lead{max-width:none}
  .tafel-familie{position:relative;top:auto}
  .raum-familie{min-height:0;padding-top:30vh;padding-bottom:10vh}
  .familie{gap:10px}
  .familie li{padding:14px 12px}
  .familie img{width:56px;height:56px}
  .faktzeile{display:grid;gap:4px}
  .faktzeile li+li::before{content:none}
  .schluss{min-height:90vh}
  .plabel{padding:4px 8px}
}
@media (max-width:360px){.familie{grid-template-columns:1fr}}

/* ---------- Ohne Bewegung: Standbilder, Räume als ruhige Sektionen ---------- */
.ruhig .buehne .welt,.ruhig .licht,.ruhig .folge{display:none}
.ruhig .raum,.ruhig .raum-wachstum,.ruhig .raum-familie{min-height:0;padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(40px,6vh,80px);display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.ruhig .zwischenraum{display:none}
.ruhig .tafel,.ruhig .raum[data-seite] .tafel,.ruhig .tafel-wachstum,.ruhig .tafel-familie{position:relative;top:auto;bottom:auto;margin:0;opacity:1!important;transform:none!important}
.ruhig .raum[data-seite="rechts"] .tafel{order:2}
.ruhig .raum-familie .tafel{grid-column:1/-1}
.ruhig .ruhig-bild{display:block;width:100%;height:auto;max-width:560px;justify-self:center}
.ruhig .ruhig-folge{max-width:720px;border-radius:var(--zl-k-radius-l)}
.ruhig .ruhig-bild:not(.ruhig-folge){mix-blend-mode:screen}
.ruhig .zl-anker{aspect-ratio:auto}
.ruhig .zl-still{height:auto}
.ruhig .zl-schluss{display:none}
.ruhig .familie li{opacity:1;transform:none;transition:none}
.ruhig .tiefe a span{transition:none}
@media (max-width:800px){
  .ruhig .raum,.ruhig .raum-wachstum,.ruhig .raum-familie{grid-template-columns:1fr}
  .ruhig .raum[data-seite="rechts"] .tafel{order:0}
  .ruhig .ruhig-bild{max-width:380px}
}
@media (prefers-reduced-motion:reduce){
  .licht{animation:none}
  *,*::before,*::after{transition-duration:0s!important}
}

/* Fusszeile der Live-Seite: Sprachwahl und Verzeichniseintraege */
.sprachwahl{display:flex;gap:4px;margin-left:auto}
.sprachwahl button{min-height:44px;min-width:44px;padding:0 12px;background:none;border:1px solid transparent;border-radius:999px;color:var(--muted);font:inherit;cursor:pointer}
.sprachwahl button[aria-pressed="true"]{color:var(--text);border-color:var(--line)}
@media (hover:hover) and (pointer:fine){.sprachwahl button:hover{color:var(--text)}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zahl b{font-weight:inherit}
/* Anmeldung im Hero (18.10.2026): Rahmen an der Stelle der Knoepfe, .login-offen sitzt auf dem Held */
.held.login-offen .knoepfe,.held.login-offen .faktzeile{display:none}
.hero-login{width:min(420px,100%);margin:28px 0 0;text-align:left;outline:none}
.hero-login-panel{position:relative;min-height:248px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 34px 100px rgba(0,0,0,.55);overflow:hidden;display:grid}
.hero-login-panel[data-zustand="bereit"]{min-height:0}
.hero-login-close{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:999px;color:var(--muted);cursor:pointer}
.hero-login-frame{display:block;width:100%;height:440px;border:0;background:transparent;color-scheme:dark}
.hero-login-panel[data-zustand="laden"] .hero-login-frame{position:absolute;inset:0 0 auto;opacity:0;pointer-events:none}
.hero-login-note{align-self:center;justify-self:center;padding:28px;text-align:center;font-size:14px;color:var(--muted)}
.hero-login-error{display:grid;justify-items:center;align-content:center;gap:16px;padding:28px}
.hero-login-error[hidden]{display:none}
.hero-login-error .hero-login-note{padding:0}
.hero-login-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:16px;font-size:14px;color:var(--dim)}
.hero-login:focus-visible{outline:none}
.hero-login:focus-visible .hero-login-panel{outline:2px solid var(--zl-k-akzent);outline-offset:4px}
.hero-login.geht{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .hero-login{animation:zl-login-rein .22s var(--ease-out) both}
  .hero-login.geht{transform:translateY(-6px) scale(.985);transition:opacity .2s ease,transform .2s var(--ease-out)}
  .hero-login-frame{transition:height .24s var(--ease-out),opacity .2s ease}
}
@keyframes zl-login-rein{from{opacity:0;transform:translateY(8px) scale(.985)}}