/* Exact v6 page and animation rules, extracted from the supplied draft. */

@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/Geist-300-700.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/GeistMono-400-500.woff2') format('woff2')}

:root{
  --buehne:#E7E6E1; --buehne-text:#7A7B74;
  --grund:#1A1B19; --flaeche:#212320; --linie:#2E302B; --linie2:#3B3D37;
  --text:#EDECE7; --text2:#A3A59C; --text3:#6E7069;
  --oliv:#74923A; --oliv-tief:#66822F; --oliv-hell:#7FA042; --oliv-licht:#B8D25A; --oliv-text:#F6F7F1;
  --r:6px;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --status:env(safe-area-inset-top,0px); --kopfzeile:68px; --heim:env(safe-area-inset-bottom,0px);
  --kurve:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--buehne:#2E2F2C;--buehne-text:#8C8D86}}
:root[data-theme="dark"]{--buehne:#2E2F2C;--buehne-text:#8C8D86}

html,body{height:100%}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*,*::before,*::after{box-sizing:border-box}
button{font:inherit;color:inherit}

/* ---------- Seite im Display ---------- */
.seite{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth;container-type:size}
.seite::-webkit-scrollbar{display:none}
.kopf{position:sticky;top:0;z-index:4;padding-top:var(--status);background:color-mix(in srgb,var(--grund) 80%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--linie)}
.kopfzeile{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;height:var(--kopfzeile);padding-inline:10px}
.symbolknopf{width:52px;height:52px;border:0;background:transparent;border-radius:var(--r);display:grid;place-items:center;cursor:pointer;transition:background .2s}
.symbolknopf:hover{background:var(--flaeche)}
.logo{justify-self:center;height:30px;width:auto;display:block}

.inhalt{padding:0 20px calc(var(--heim) + 28px)}
.abschnitt{padding-top:64px}
.etikett{margin:0 0 14px;max-width:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
h2{margin:0 0 12px;font-size:28px;line-height:1.1;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
h3{margin:0;font-size:17px;line-height:1.3;letter-spacing:-.01em;font-weight:500}
p{margin:0;font-size:16px;line-height:1.55;color:var(--text2);max-width:36ch}

/* Held: füllt den ersten Bildschirm, darunter beginnt erst beim Scrollen der Rest */
.held{height:calc(100svh - var(--status) - var(--kopfzeile));display:flex;flex-direction:column;gap:12px;padding:0 0 calc(var(--heim) + 28px)}
.motorbuehne{position:relative;flex:1;min-height:0;margin-inline:-20px;background:transparent;isolation:isolate}
.motor-atmosphaere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 68% 38% at 50% 49%,rgba(127,148,89,.13),rgba(108,125,80,.04) 58%,transparent 85%);-webkit-mask-image:linear-gradient(transparent 2%,#000 22%,#000 78%,transparent 99%);mask-image:linear-gradient(transparent 2%,#000 22%,#000 78%,transparent 99%)}
.motor-atmosphaere::after{content:"";position:absolute;left:10%;right:10%;top:76%;height:12%;background:radial-gradient(ellipse,rgba(153,173,111,.055),transparent 68%)}
.motor-typografie{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-block:14px;overflow:hidden;pointer-events:none;user-select:none}
.motor-schrift{position:relative;display:block;flex:none;width:100%;height:auto;opacity:0}
.motor-schrift path{fill:rgba(190,199,172,.018);stroke:rgba(190,199,172,.29);stroke-width:1.1;paint-order:stroke fill}
.motor-bereit .motor-schrift{animation:motor-schrift-ein 2.8s cubic-bezier(.22,.61,.36,1) .1s both}
.motor-bereit .motor-schrift.unten{animation-delay:.4s}
@keyframes motor-schrift-ein{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.motorbuehne canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none;opacity:0}
.motorbuehne.motor-bereit canvas{opacity:1}
.motor-hinweis{position:absolute;inset:0;display:grid;place-content:center;padding:32px;text-align:center;font:12px var(--mono);color:var(--text3);pointer-events:none}
.motor-bereit .motor-hinweis{display:none}
.knoepfe{flex:none;display:flex;justify-content:center}

/* Buttons */
.knopf{height:56px;width:min(100%,280px);padding-inline:24px 20px;border-radius:var(--r);border:0;font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .25s,transform .2s var(--kurve),box-shadow .25s}
.knopf.primaer{position:relative;background:linear-gradient(180deg,var(--oliv) 0%,var(--oliv-tief) 100%);color:var(--oliv-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.18),0 14px 34px -14px rgba(116,146,58,.8)}
.knopf.primaer:hover{background:linear-gradient(180deg,var(--oliv-hell) 0%,var(--oliv) 100%)}
.knopf.primaer:active{transform:scale(.975)}
.knopf .pfeil-auf{width:22px;height:22px;transition:transform .3s var(--kurve)}
.knopf:hover .pfeil-auf{transform:translate(2px,-2px)}
.knopf.klein{height:54px;width:100%;padding-inline:20px;font-size:17px}
.magnet{position:relative;display:inline-flex;isolation:isolate;width:100%;justify-content:center}
.leuchten{position:absolute;inset:-16px 10%;z-index:-1;border-radius:40px;overflow:hidden;filter:blur(24px);opacity:.55;pointer-events:none}
.leuchten::before{content:"";position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;background:conic-gradient(#1F5A48,#B8D25A,#2F6B57,#E0C85A,#1F5A48);animation:leuchtdrehung 10s linear infinite;will-change:transform}
.leuchten.innen{inset:-5px 12%;border-radius:12px;filter:blur(12px);opacity:.35}
.leuchten.innen::before{background:conic-gradient(#B8D25A,#2F6B57,#E0C85A,#B8D25A);animation-delay:-3.3s}
@keyframes leuchtdrehung{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Zahlen */
.zahlen{display:grid;grid-template-columns:1fr 1fr;margin-top:4px;border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.zahl{padding:22px 18px 20px;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.zahl strong{display:block;font-size:46px;font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zahl span{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}

/* Listen mit Haarlinien */
.liste{list-style:none;margin:0;padding:0}
.zeile{position:relative;padding:18px 0}
.zeile::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linie)}
.liste .zeile:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linie)}
.system{display:grid;grid-template-columns:1fr auto 16px;gap:14px;align-items:center;color:var(--text);text-decoration:none}
.system .anzahl{font-family:var(--mono);font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums}
.system .pfeil{color:var(--text3);transition:transform .25s var(--kurve),color .25s}
.system:hover .pfeil{transform:translateX(3px);color:var(--text)}

/* E-Mail */
.formular{display:grid;gap:10px;margin-top:22px}
.feld{height:54px;width:100%;padding-inline:14px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);color:var(--text);font:400 16px var(--sans);transition:border-color .2s}
.feld::placeholder{color:var(--text3)}
.feld:focus{outline:none;border-color:var(--text2)}
.hinweis{font-size:13px;color:var(--text3);margin-top:12px}
.rueckmeldung{display:none;margin-top:22px;padding:16px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);font-size:15px;color:var(--text)}
.rueckmeldung.sichtbar{display:block}

/* Fuß */
.fuss{margin-top:80px;padding-top:28px;border-top:1px solid var(--linie);display:grid;gap:22px}
.fuss-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fuss .logo{justify-self:start;height:22px}
.sozial{display:flex;gap:8px}
.sozial a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--linie2);border-radius:var(--r);color:var(--text2);text-decoration:none;transition:color .2s,border-color .2s,background .2s}
.sozial a:hover{color:var(--text);border-color:var(--text3);background:var(--flaeche)}
.fuss-text{font-size:15px;color:var(--text2);max-width:30ch}
.fuss-unten{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--linie)}
.fuss nav{display:flex;gap:18px}
.fuss nav a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text2);text-decoration:none}
.fuss nav a:hover{color:var(--text)}
.fuss small{font-family:var(--mono);font-size:11px;color:var(--text3);letter-spacing:.04em}

/* Ebenen: Menü und Suche */
.ebene{position:absolute;inset:0;z-index:8;background:var(--grund);padding-top:var(--status);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .32s var(--kurve),transform .32s var(--kurve),visibility 0s linear .32s}
.ebene.offen{opacity:1;visibility:visible;transform:none;transition:opacity .32s var(--kurve),transform .32s var(--kurve)}
.ebene .kopfzeile{border-bottom:1px solid var(--linie)}
.ebene .rolle{flex:1;overflow-y:auto;scrollbar-width:none;padding:28px 20px calc(var(--heim) + 24px)}
.ebene .rolle::-webkit-scrollbar{display:none}
.ebene .zeile{padding:20px 0;opacity:0;transform:translateY(12px);transition:opacity .45s var(--kurve),transform .45s var(--kurve);transition-delay:calc(var(--i,0) * 55ms + 100ms)}
.ebene.offen .zeile{opacity:1;transform:none}
.ebene .haupt{font-size:26px;font-weight:600;letter-spacing:-.02em}
.suchzeile{display:flex;gap:10px}
.suchzeile .feld{flex:1}
.suchzeile .knopf{height:54px;width:auto;padding-inline:22px;font-size:17px}
.vorschlaege{margin-top:28px}
.vorschlaege .zeile{padding:16px 0}
.vorschlaege .system{font-size:16px}

/* Bauteile-Ansicht */
.ansicht[hidden]{display:none}
.kopfbereich{padding-top:28px}
.titelzeile{display:flex;align-items:center;justify-content:space-between;gap:12px}
.titel{margin:0;font-size:36px;line-height:1.05;letter-spacing:-.025em;font-weight:600}
.filterknopf{flex:none;width:44px;height:44px;border:1px solid var(--linie2);border-radius:var(--r);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.filterknopf:hover{background:var(--flaeche);border-color:var(--text3)}
.filterknopf.aktiv{background:var(--text);color:var(--grund);border-color:var(--text)}
.suchstand{display:inline-flex;align-items:center;gap:8px;margin-top:14px;height:34px;padding-inline:12px 4px;border:1px solid var(--linie2);border-radius:var(--r);font-family:var(--mono);font-size:12px;color:var(--text2)}
.suchstand[hidden]{display:none}
.suchstand button{width:26px;height:26px;border:0;background:transparent;color:var(--text2);display:grid;place-items:center;cursor:pointer;border-radius:var(--r)}
.suchstand button:hover{background:var(--flaeche);color:var(--text)}
.gruppe{padding-top:32px}
.gruppe[hidden]{display:none}
.gruppen-etikett{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.gruppen-etikett span{font-variant-numeric:tabular-nums}
.raster2{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;list-style:none;margin:0;padding:0}
.artikel[hidden]{display:none}
.kachel{min-width:0}
.kachel-link{display:block;color:var(--text);text-decoration:none}
.kachel-bild{position:relative;aspect-ratio:1;max-width:100%;border-radius:var(--r);background:var(--flaeche);border:1px solid var(--linie);overflow:hidden;display:grid;place-items:center;transition:border-color .2s}
.kachel-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kachel-bild .nummer{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text3)}
.kachel-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:14px;line-height:1.3;letter-spacing:-.005em;color:var(--text2);transition:color .2s}
.kachel-link:hover .kachel-name{color:var(--text)}
.kachel-link:hover .kachel-bild{border-color:var(--linie2)}
.kachel{position:relative}
.modell3d img{object-fit:contain;padding:6%;transition:opacity .6s var(--kurve)}
.modell3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.modell3d.bereit img{opacity:0}
.merken{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;border:1px solid var(--linie2);border-radius:var(--r);background:color-mix(in srgb,var(--grund) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text2);display:grid;place-items:center;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.merken svg{fill:none;transition:fill .2s}
.merken:hover{color:var(--text);border-color:var(--text3)}
.merken[aria-pressed="true"]{color:var(--text);background:var(--flaeche);border-color:var(--text3)}
.merken[aria-pressed="true"] svg{fill:currentColor}
.filterwahl{width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font-size:22px}
.filterwahl .haken{color:var(--text);opacity:0;transition:opacity .2s}
.filterwahl[aria-checked="true"] .haken{opacity:1}
.leer{padding:36px 0 8px;color:var(--text2)}
.leer[hidden]{display:none}

/* Artikelseite */
.zurueck{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);text-decoration:none}
.zurueck:hover{color:var(--text)}
.artikel-kopf{padding-top:18px}
.artikel-kopf .titelzeile{align-items:flex-start}
.merken-gross{position:static;width:44px;height:44px;flex:none}
.pfad{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text3)}
.pfad a{color:var(--text2);text-decoration:none}
.pfad a:hover{color:var(--text)}
.pfad [aria-current]{color:var(--text)}
.lead{margin-top:16px;font-size:18px;line-height:1.45;color:var(--text);max-width:none}
.artikel-buehne{margin-top:24px}
.modellkasten{position:relative;aspect-ratio:4/5;max-width:100%;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche);overflow:hidden;display:grid;place-items:center;touch-action:none;cursor:grab}
.modellkasten:active{cursor:grabbing}
.modellkasten img{width:100%;height:100%;object-fit:contain;padding:8%;transition:opacity .6s var(--kurve)}
.modellkasten canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.modellkasten.bereit img{opacity:0}
.modellwerkzeug{display:flex;gap:8px;margin-top:12px}
.modellwerkzeug button{flex:1;height:40px;padding-inline:12px;border:1px solid var(--linie2);border-radius:var(--r);background:transparent;color:var(--text2);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.modellwerkzeug button:hover{border-color:var(--text3);color:var(--text)}
.modellwerkzeug button[aria-pressed="true"]{background:var(--text);color:var(--grund);border-color:var(--text)}
/* Explosionsregler nach dem Slider von ui.unlumen.com: Bahn 6 px (8 px unter dem Zeiger), weißer Griff 14 px (18 px unter dem
   Zeiger oder beim Ziehen), Vorschau-Segment und schwebender Wert beim Überfahren, Wert darunter, per Klick eingebbar */
.schieber{margin-top:14px;display:flex;flex-direction:column;gap:2px;user-select:none;-webkit-user-select:none}
.schieber-bahnfeld{position:relative;height:34px;cursor:pointer;touch-action:none}
.schieber-bahnfeld input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.schieber-bahn{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:999px;background:var(--linie2);transition:height .08s,top .08s}
.schieber.zeiger .schieber-bahn,.schieber.gedrueckt .schieber-bahn{height:8px;top:13px}
.schieber-fuellung{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:var(--text)}
.schieber-vorschau{position:absolute;top:0;height:100%;border-radius:999px;opacity:0;transition:left .16s var(--kurve),width .16s var(--kurve),opacity .15s}
.schieber-vorschau.hell{background:color-mix(in srgb,var(--text) 20%,transparent)}
.schieber-vorschau.dunkel{background:color-mix(in srgb,var(--grund) 25%,transparent);z-index:2}
.schieber-vorschau.da{opacity:1}
.schieber.gedrueckt .schieber-vorschau{opacity:0}
.schieber-griff{position:absolute;left:0;top:8px;width:18px;height:18px;display:grid;place-items:center;pointer-events:none;z-index:3}
.schieber-griff i{display:block;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.06);transition:width .08s,height .08s}
.schieber.zeiger .schieber-griff i,.schieber.gedrueckt .schieber-griff i{width:18px;height:18px}
.schieber-bahnfeld input:focus-visible ~ .schieber-griff i{outline:2px solid var(--text);outline-offset:2px}
.schieber-tip{position:absolute;top:-22px;translate:-50% 0;transform-origin:bottom center;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);background:var(--linie);padding:4px 8px;border-radius:var(--r);pointer-events:none;z-index:4;opacity:0;transform:translateY(6px) scale(.94);transition:opacity .16s,transform .16s var(--kurve),left .16s var(--kurve)}
.schieber-tip.da{opacity:1;transform:none}
.schieber.gedrueckt .schieber-tip{transition:opacity .16s,transform .16s var(--kurve)}   /* beim Ziehen ohne Nachlauf */
.schieber-wert{font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums;font-variation-settings:'wght' 400;transition:font-variation-settings .1s}
.schieber.zeiger .schieber-wert,.schieber.gedrueckt .schieber-wert{font-variation-settings:'wght' 450}
.schieber-zahl{cursor:text}
.schieber-zahl[hidden]{display:none}
.schieber-eingabe{width:5ch;background:transparent;color:var(--text);border:0;border-bottom:1px solid var(--linie2);border-radius:0;text-align:center;font:inherit;outline:0;-moz-appearance:textfield}
.schieber-eingabe::-webkit-outer-spin-button,.schieber-eingabe::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.schieber-eingabe[hidden]{display:none}
/* Ladeanzeige nach Shimmer Skeleton und Shimmering Text von ui.unlumen.com: Lichtlauf 1,6 s über dem Kasten, Text mit
   Glanzlauf 2 s und 0,5 s Pause, die Sätze wechseln alle 3 s. Verschwindet, sobald three.js geladen ist oder scheitert. */
.laden{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:var(--flaeche);overflow:hidden;transition:opacity .5s var(--kurve)}
.laden::before{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--text) 6%,transparent) 50%,transparent 100%);animation:schimmer 1.6s ease-in-out infinite}
@keyframes schimmer{to{transform:translateX(200%)}}
.modell3d.geladen .laden,.modell3d.fehlgeschlagen .laden{opacity:0;pointer-events:none}
.schimmer-text{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(90deg,transparent calc(50% - var(--spread,40px)),var(--text),transparent calc(50% + var(--spread,40px))),linear-gradient(var(--text3),var(--text3));background-size:250% 100%,auto;background-repeat:no-repeat,repeat;animation:glanz 2.5s linear infinite;transition:opacity .3s,transform .3s}
@keyframes glanz{0%{background-position:100% center,0 0}80%,100%{background-position:0% center,0 0}}
.schimmer-text.weg{opacity:0;transform:translateY(-10px)}
.schimmer-text.neu{opacity:0;transform:translateY(10px);transition:none}
/* Text-Skelett für Leitsatz und Kurzdefinition, bis die Schriften bereit sind (eingebettet: nur ein Augenblick) */
html.js #artikel.skelett .lead,html.js #artikel.skelett .intro{position:relative;color:transparent;overflow:hidden}
html.js #artikel.skelett .lead *,html.js #artikel.skelett .intro *{color:transparent;text-decoration:none}
html.js #artikel.skelett .lead > span,html.js #artikel.skelett .intro > span{background:var(--flaeche);border-radius:4px;padding:2px 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.js #artikel.skelett .lead::after,html.js #artikel.skelett .intro::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--text) 6%,transparent) 50%,transparent 100%);animation:schimmer 1.6s ease-in-out infinite}
.intro{margin-top:28px;font-size:17px;line-height:1.55;color:var(--text2);max-width:none}
.begriff{color:var(--text);text-decoration:underline;text-decoration-color:var(--text3);text-underline-offset:3px;text-decoration-thickness:1px}
.begriff:hover{text-decoration-color:var(--text)}
.kapitelnav{margin-top:40px}
.kapitelnav .zeile{padding:14px 0}
.kapitelnav .system{font-size:16px}
.nachschlagen{display:inline-block;margin-top:18px;font-size:15px}
.kapitel{padding-top:56px}
.kapitelnummer{margin-bottom:10px;color:var(--text3)}
.kapitel h2{margin-bottom:18px}
.kapitel > p{max-width:none;margin-bottom:18px}
.wissen .eintrag{padding:18px 0}
.wissen h3{margin-bottom:6px}
.wissen p{max-width:none;font-size:15px}
.wissen p + p{margin-top:8px}
.einbauort{margin:0 0 22px}
.einbauort .auto{position:relative;border-radius:var(--r);border:1px solid var(--linie);background:#131C20;overflow:hidden}
.einbauort img{display:block;width:100%;height:auto}
.punkt{position:absolute;translate:-5px -50%;display:flex;align-items:center;gap:8px}   /* nur der Punkt (10 px) sitzt auf der Marke, das Etikett hängt rechts daran */
.punkt i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--text);animation:puls 2.4s ease-in-out infinite}
.punkt span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text);background:color-mix(in srgb,var(--grund) 80%,transparent);padding:4px 8px;border-radius:var(--r);white-space:nowrap}
@keyframes puls{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 22%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--text) 6%,transparent)}}
.einbauort figcaption{margin-top:10px;font-size:13px;color:var(--text3)}
.teilepanel{margin-top:6px}
.teile-kopf{display:grid;gap:14px;margin-bottom:6px}
.teil{width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;grid-template-columns:44px 1fr 16px;font-size:16px}
.teil[aria-pressed="true"]{color:var(--text)}
.teil[aria-pressed="true"] .pfeil{transform:rotate(90deg);color:var(--text)}
.teil-detail{margin-top:18px;padding:18px;border:1px solid var(--linie2);border-radius:var(--r);background:var(--flaeche)}
.teil-detail[hidden]{display:none}
.teil-detail h3{margin-bottom:6px}
.teil-detail .wo{font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.5;color:var(--text3);max-width:none;margin-bottom:12px}
.teil-detail p{max-width:none;font-size:15px}
.daten{margin:16px 0 0;display:grid;gap:12px}
.daten div{display:grid;gap:3px}
.daten dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.daten dd{margin:0;font-size:14px;line-height:1.45;color:var(--text2)}
.aufklapp{border-top:1px solid var(--linie)}
.aufklapp:last-of-type{border-bottom:1px solid var(--linie)}
.aufklapp summary{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:17px;font-weight:500;letter-spacing:-.01em;cursor:pointer;list-style:none}
.aufklapp summary::-webkit-details-marker{display:none}
.aufklapp summary .pfeil{color:var(--text3);transition:transform .25s var(--kurve)}
.aufklapp[open] summary .pfeil{transform:rotate(90deg)}
.aufklapp > :not(summary){margin-bottom:18px}
.aufklapp p{max-width:none;font-size:15px}
.punkte{margin:0 0 18px;padding-left:18px;color:var(--text2);font-size:15px;line-height:1.55}
.grundsatz{padding:14px 18px;border-left:2px solid var(--text3);color:var(--text);font-size:15px;max-width:none;margin:18px 0}
.kennwerte{display:grid;gap:20px}
.kw-block h3{margin-bottom:8px}
.kw-block .daten{margin-top:0}
.kw-herkunft{font-size:13px;color:var(--text3)}
.verweise{margin-top:28px}
.verweise h3{margin-bottom:8px}
.verweis{display:block;padding:12px 0;border-top:1px solid var(--linie);color:var(--text);text-decoration:none;font-size:16px}
.verweis:last-child{border-bottom:1px solid var(--linie)}
.verweis:hover{color:var(--text2)}

/* Fokus */
:focus-visible{outline:2px solid var(--text2);outline-offset:2px}

/* ---------- Erscheinen beim Scrollen ---------- */
html.js .erscheinen{opacity:0;transform:translateY(26px);filter:blur(6px)}
html.js .erscheinen.da{opacity:1;transform:none;filter:blur(0);transition:opacity .9s var(--kurve),transform .9s var(--kurve),filter .9s var(--kurve);transition-delay:calc(var(--i,0) * 80ms)}
html.js .zeile.erscheinen::before,html.js .liste .zeile.erscheinen:last-child::after{transform:scaleX(0);transform-origin:0 50%}
html.js .zeile.erscheinen.da::before,html.js .liste .zeile.erscheinen.da:last-child::after{transform:scaleX(1);transition:transform 1.1s var(--kurve);transition-delay:calc(var(--i,0) * 80ms + 120ms)}
html.js .erscheinen.worte{opacity:1;transform:none;filter:none}
html.js .worte .wort{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(6px)}
html.js .worte.da .wort{opacity:1;filter:blur(0);transform:none;transition:opacity .5s var(--kurve),filter .5s var(--kurve),transform .5s var(--kurve);transition-delay:calc(var(--w) * 50ms)}
html.js .zahlen.erscheinen{filter:none;transform:none;opacity:1}
html.js .zahlen.erscheinen .zahl{opacity:0;transform:translateY(18px);filter:blur(6px)}
html.js .zahlen.erscheinen.da .zahl{opacity:1;transform:none;filter:blur(0);transition:opacity .9s var(--kurve),transform .9s var(--kurve),filter .9s var(--kurve);transition-delay:calc(var(--i,0) * 90ms)}
@media (prefers-reduced-motion:reduce){
  html.js .erscheinen,html.js .zahlen.erscheinen .zahl,.ebene .zeile{opacity:1;transform:none;filter:none;transition:none}
  html.js .zeile.erscheinen::before,html.js .liste .zeile.erscheinen:last-child::after{transform:none}
  .leuchten::before{animation:none}
  .motor-bereit .motor-schrift{animation:none;opacity:1;transform:none}
  .kachel-bild img{animation:none}
  html.js .worte .wort{opacity:1;filter:none;transform:none;transition:none}
  .seite{scroll-behavior:auto}
  .ebene,.ebene.offen{transition:none}
}