html:root:root{--accent:#0369a1;--on-accent:#ffffff;--accent-soft:color-mix(in oklab, var(--accent) 12%, var(--surface));--accent-hover:color-mix(in oklab, var(--accent) 88%, var(--on-accent));--secondary:#0b1220;--on-secondary:#ffffff;--secondary-soft:color-mix(in oklab, var(--secondary) 12%, var(--surface));--surface:#faf7f2;--muted:#f0ebe2;--ink:#151922;--muted-ink:#5b6474;--line:color-mix(in oklab, #151922 12%, #faf7f2);--color-border:var(--line);--radius:8px;--radius-btn:8px;--font-heading:'Sora', ui-sans-serif, system-ui, sans-serif;--font-body:'Sora', ui-sans-serif, system-ui, sans-serif;--scale:1;--shadow:none;--img-radius:8px;--img-frame:0px;--img-pad:0px;--img-mat:transparent;--rhythm:1;--rhythm-m:0.67;--icon-mix:0%;--icon-tile:1.5rem;--link-deco:underline;--link-hover:0%;--motion:0.6;--motion-on:1;--motion-duration:320ms;--motion-distance:12px;--motion-stagger:60ms;--motion-ease:cubic-bezier(.22,.61,.36,1);--cursor-color:var(--accent);--cursor-dot:8px;--cursor-ring:36px;--accent-base:var(--accent);--fill:var(--accent);--fill-ink:var(--on-accent);--btn-fill-mix:100%;--btn-ink-mix:100%;--btn-border-mix:0%;--btn-hover-mix:88%;--btn2-fill-mix:0%;--btn2-border-mix:45%;--ui-danger:#c9312a;--ui-danger-soft:#fbe5e3;--ui-ok:#178a5c;--ui-ok-soft:#e3f4ec;--ui-warn:#b45f14;--ui-warn-soft:#fbeedd;--font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;color-scheme:light;font-size:calc(16px * var(--scale))}@font-face{font-family:'Sora';font-style:normal;font-weight:300;font-display:swap;src:url(/media/94) format('woff2')}@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(/media/94) format('woff2')}@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(/media/94) format('woff2')}@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/media/94) format('woff2')}@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(/media/94) format('woff2')}@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(/media/94) format('woff2')}@keyframes fort{to{transform:scaleX(1)}}
@keyframes drehen{to{transform:rotate(360deg)}}
@keyframes tippen{0%, 6%{transform:translateX(0)} 30%, 100%{transform:translateX(101%)}}
@keyframes blink{50%{opacity:0}}
@keyframes zeiger{0%, 34%{opacity:0; transform:translate(0, 0)} 38%{opacity:1; transform:translate(0, 0)} 58%{opacity:1; transform:translate(260%, 180%)} 64%, 100%{opacity:0; transform:translate(260%, 180%)}}
@keyframes form{0%, 50%{opacity:0; transform:translateY(10px) scale(0.97)} 58%, 94%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes gezogen{0%, 36%{transform:none} 40%, 56%{transform:translateX(6px) scale(1.04)} 62%, 100%{transform:none}}
@keyframes gespeichert{0%, 66%{opacity:0; transform:translateY(-4px)} 72%, 94%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes zeile{0%, 25%{opacity:0} 35%, 70%{opacity:1} 80%, 100%{opacity:0}}
@keyframes raus{0%, 38%{opacity:1; transform:none} 44%, 96%{opacity:0; transform:translateY(-6px)} 100%{opacity:1; transform:none}}
@keyframes rein{0%, 40%{opacity:0; transform:translateY(6px)} 46%, 94%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes neu{0%, 55%{opacity:0; transform:translateY(-8px)} 62%, 94%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes pruef{0%, 4%{opacity:0.25; transform:translateX(-4px)} 12%, 86%{opacity:1; transform:none} 100%{opacity:0.25}}
@keyframes schlag{50%{transform:scaleY(0.75)}}
@keyframes an{0%, 10%{opacity:0} 18%, 88%{opacity:1} 96%, 100%{opacity:0}}
@keyframes knebel{0%, 10%{transform:none} 18%, 88%{transform:translateX(1.05em)} 96%, 100%{transform:none}}
@keyframes code{0%, 4%{opacity:0; transform:translateY(4px)} 10%, 88%{opacity:1; transform:none} 96%, 100%{opacity:0}}
@keyframes takt{0%, 8%{opacity:1; transform:scaleY(1.3)} 30%, 100%{opacity:0.45; transform:none}}
@keyframes hoch{from{transform:translateY(104%)}}
@keyframes ein{from{opacity:0; transform:translateY(18px)}}
@font-face{font-family:'UD Mono'; src:url('/media/95') format('woff2'); font-weight:400; font-display:optional}
@font-face{font-family:'Sora'; src:url('/media/94') format('woff2'); font-weight:100 800; font-display:swap}
.site{:root &{--papier:#faf9f6; --flaeche:#ffffff; --flaeche-2:#f3f1ec; --tinte:#0b1220; --leise:#535d6c; --linie:#e6e2d9; --linie-stark:#cfc9bd; --akzent:#0369a1; --akzent-text:#ffffff; --himmel:#38bdf8; --feld-himmel:#e4f1f9; --feld-sand:#f3ece0; --feld-salbei:#e4eee6; --feld-tief:#eaf3f9; --ok:#11703a; --fehler:#b91c1c; --schatten:0 1px 2px rgb(11 18 32 / 0.04), 0 12px 32px -12px rgb(11 18 32 / 0.14); --display:var(--font-heading); --text:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono:'UD Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px; --a7:48px; --a8:64px; --abschnitt:clamp(72px, 11vw, 160px); --rand:clamp(16px, 5vw, 64px); --breite:1280px; --ease:cubic-bezier(0.2, 0.7, 0.2, 1); --feder:cubic-bezier(0.3, 1.45, 0.5, 1); --dauer:0.9s; color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-site-thema=hell]) &{--papier:#0c1016; --flaeche:#131a23; --flaeche-2:#0f151d; --tinte:#e8edf3; --leise:#9ba7b5; --linie:#232c38; --linie-stark:#34404f; --akzent:#38bdf8; --akzent-text:#06131d; --feld-himmel:#0f2230; --feld-sand:#161d27; --feld-salbei:#13202a; --feld-tief:#0f1d29; --ok:#4ade80; --fehler:#f87171; --schatten:0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6); color-scheme:dark}
}
:root[data-site-thema=dunkel] &{--papier:#0c1016; --flaeche:#131a23; --flaeche-2:#0f151d; --tinte:#e8edf3; --leise:#9ba7b5; --linie:#232c38; --linie-stark:#34404f; --akzent:#38bdf8; --akzent-text:#06131d; --feld-himmel:#0f2230; --feld-sand:#161d27; --feld-salbei:#13202a; --feld-tief:#0f1d29; --ok:#4ade80; --fehler:#f87171; --schatten:0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6); color-scheme:dark}
[hidden]{display:none !important}
:root &{-webkit-text-size-adjust:100%; scroll-padding-top:88px}
:root &{margin:0; background:var(--papier); color:var(--tinte); font:400 1.0625rem/1.6 var(--text); overflow-x:clip; -webkit-font-smoothing:antialiased}
img, svg{display:block}
a{color:inherit}
h1, h2, h3, p, ol, ul, dl, dd, figure{margin:0}
ol, ul{padding:0; list-style:none}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--akzent); outline-offset:3px; border-radius:4px}
::selection{background:var(--feld-himmel); color:var(--tinte)}
.ic{width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.rahmen{width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.titel{font:640 clamp(2.9rem, 1rem + 6.6vw, 7.4rem)/0.94 var(--display); letter-spacing:-0.052em; margin:20px 0 28px}
.titel.seite{font-size:clamp(2.6rem, 1rem + 5.4vw, 6rem)}
.titel .zeile{display:block; overflow:hidden; padding-bottom:0.1em; margin-bottom:-0.1em}
.titel .zeile > span{display:block}
.titel .akzent, .h2 .akzent{color:var(--akzent)}
.h2{font:620 clamp(2.1rem, 1rem + 3.9vw, 4.4rem)/1.05 var(--display); letter-spacing:-0.042em; max-width:16ch; text-wrap:balance}
h3, .h3{font:600 1.375rem/1.2 var(--display); letter-spacing:-0.025em}
.lead{font-size:clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height:1.55; color:var(--leise); max-width:34em}
.text{color:var(--leise); max-width:34em; font-size:1.125rem}
.klein{font-size:0.875rem; color:var(--leise)}
.klein a{color:inherit; text-underline-offset:3px}
.mono{font-family:var(--mono); font-size:0.75rem; letter-spacing:0.04em; font-synthesis:none}
.ueberzeile{font:600 0.8125rem/1.2 var(--text); letter-spacing:0.08em; text-transform:uppercase; color:var(--leise)}
.quelle{font:0.75rem/1.6 var(--mono); letter-spacing:0.02em; color:var(--leise); padding-left:12px; border-left:2px solid var(--akzent); max-width:44em}
.text-link{color:var(--akzent); font-weight:600; text-underline-offset:3px}
.kennung{display:flex; align-items:center; gap:12px; font:0.8125rem/1 var(--mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--leise)}
.kennung b{font-weight:400; color:var(--akzent)}
.abschnitt-kopf{display:grid; gap:20px; max-width:48rem}
.abschnitt-kopf .h2{margin-top:4px}
.lineal{position:relative; height:16px}
.lineal::before{content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg, var(--linie-stark) 0 1px, transparent 1px 10px) 0 0 / 100% 7px no-repeat, repeating-linear-gradient(90deg, var(--leise) 0 1px, transparent 1px 100px) 0 0 / 100% 14px no-repeat; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); opacity:0.8}
.messband{position:absolute; left:0; right:calc(12% + 36px); top:6px; height:2px; border-radius:1px; background:linear-gradient(90deg, transparent, var(--akzent) 30%); transform-origin:0 50%}
.lineal-lauf{position:absolute; left:0; right:12%; bottom:calc(100% - 6px); height:0; pointer-events:none}
.lineal-lauf .uni-platz{position:absolute; right:0; bottom:0; --uni-b:72px; pointer-events:auto}
:root.js & .lineal-lauf, :root.js & .messband{transition:transform 2.4s cubic-bezier(0.45, 0, 0.15, 1) 0.2s}
:root.js & .lineal:not(.da) .lineal-lauf{transform:translateX(-80%)}
:root.js & .lineal:not(.da) .messband{transform:scaleX(0.12)}
.abschnitt .rahmen > .lineal:first-child{margin-top:48px}
.abstand-lineal, .seitenkopf .lineal{margin-top:clamp(56px, 7vw, 96px)}
.seitenkopf .lineal:has(.lineal-lauf){margin-top:clamp(104px, 11vw, 136px)}
@supports (animation-timeline:scroll()){
}
.knopf{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border:1px solid transparent; border-radius:10px; background:var(--akzent); color:var(--akzent-text); font:600 1rem/1 var(--text); text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform 0.2s var(--ease), box-shadow 0.2s}
.knopf:hover{transform:translateY(-1px); box-shadow:0 8px 20px -8px color-mix(in srgb, var(--akzent) 60%, transparent)}
.knopf:active{transform:none}
.knopf .ic{transition:transform 0.25s var(--ease)}
.knopf:hover .ic{transform:translateX(3px)}
.knopf.klein{min-height:44px; padding:0 16px; font-size:0.9375rem}
.knopf.leise{background:transparent; color:var(--tinte); border-color:var(--linie-stark)}
.knopf.leise:hover{box-shadow:none; background:color-mix(in srgb, var(--tinte) 4%, transparent)}
.aktionen{display:flex; flex-wrap:wrap; gap:12px}
.mehr-zeile{margin-top:28px}
.mehr{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--akzent); text-decoration:none}
.mehr .ic{transition:transform 0.3s var(--ease)}
.mehr:hover .ic{transform:translateX(4px)}
.abschnitt{padding-top:var(--abschnitt)}
.abschnitt .rahmen > :is(.fluss, .spalten:not(.abstand-lineal, .buendig)) > .kopf-spalte:has(*:not(.cb-slot)) + .inhalt-spalte{margin-top:clamp(40px, 5vw, 64px)}
.held{position:relative; padding:clamp(40px, 7vw, 96px) 0 56px; overflow:clip}
.held-raster{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 420px); column-gap:48px; grid-template-rows:auto auto auto 1fr; align-items:start}
.held-text{display:contents}
.held-text > *{grid-column:1}
.held-text > .titel{grid-column:1 / -1}
.held .aktionen{margin-top:36px}
.held-buehne{position:relative; grid-column:2; grid-row:3 / span 2; margin-top:-40px; display:grid; place-items:center; aspect-ratio:1}
.sechseck{position:absolute; inset:11%; width:78%; height:78%; overflow:visible}
.sechseck path{fill:var(--feld-himmel)}
.skala-ring{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.skala-ring .fein{fill:none; stroke:var(--leise); stroke-width:3; stroke-dasharray:0.35 2.65; opacity:0.45}
.skala-ring .grob{fill:none; stroke:var(--leise); stroke-width:7; stroke-dasharray:0.7 29.3; opacity:0.8}
.skala-ring .wert{fill:none; stroke:var(--akzent); stroke-width:2; stroke-dasharray:99 100; stroke-linecap:round}
.skala-ring .dreh{transform-origin:0 0; animation:drehen 160s linear infinite}
.skala-ring text{font:7px var(--mono); letter-spacing:0.1em; fill:var(--leise)}

.held-buehne .uni-platz{--uni-b:min(62%, 17rem); margin-bottom:8%}
.held-buehne .messwert.kompakt{position:absolute; left:-12%; bottom:-2%}
.leiste{display:flex; flex-wrap:wrap; gap:12px 36px; margin-top:clamp(40px, 6vw, 72px); padding-top:24px; border-top:1px solid var(--linie); color:var(--leise); font-size:0.9375rem}
.leiste li{display:flex; align-items:center; gap:10px}
.leiste .ic{color:var(--akzent)}
.seitenkopf{padding:clamp(48px, 8vw, 112px) 0 0}
.seitenkopf .aktionen{margin-top:36px}
.kopf-raster{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 340px); gap:32px 48px; align-items:center}
.kopf-raster > .lineal{grid-column:1 / -1}
.kopf-buehne{position:relative; display:grid; place-items:center; aspect-ratio:1}
.kopf-buehne .uni-platz{--uni-b:min(60%, 13rem); margin-bottom:6%}
.kopf-buehne .blase{left:58%; bottom:86%}
.unternav{display:flex; flex-wrap:wrap; gap:8px; margin-top:40px}
.unternav a{padding:8px 14px; border:1px solid var(--linie); border-radius:99px; text-decoration:none; font-size:0.9375rem; color:var(--leise); transition:color 0.18s, border-color 0.18s}
.unternav a:hover{color:var(--tinte); border-color:var(--tinte)}
.spalten{display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:40px 64px; align-items:start}
.spalten > .kopf-spalte{position:sticky; top:120px}
.tueren{border-top:1px solid var(--linie)}
.tueren li{border-bottom:1px solid var(--linie)}
.tuer{position:relative; isolation:isolate; display:grid; grid-template-columns:48px minmax(0, 1.25fr) minmax(0, 0.85fr) 56px; align-items:center; gap:12px 32px; padding:clamp(28px, 3.4vw, 48px) 8px; text-decoration:none}
.tuer::before{content:''; position:absolute; inset:0 -16px; z-index:-1; border-radius:20px; background:var(--feld-himmel); transform:scaleY(0.4); opacity:0; transition:transform 0.5s var(--ease), opacity 0.35s var(--ease)}
.tuer:hover::before, .tuer:focus-visible::before{transform:none; opacity:1}
.tuer-nr{font:0.8125rem/1 var(--mono); color:var(--akzent)}
.tuer-titel{font:620 clamp(2.2rem, 1rem + 3.6vw, 4.5rem)/0.95 var(--display); letter-spacing:-0.05em; transition:transform 0.5s var(--ease)}
.tuer:hover .tuer-titel{transform:translateX(14px)}
.tuer-text{color:var(--leise); max-width:30em}
.tuer-pfeil{justify-self:end; width:56px; height:56px; padding:16px; border:1px solid var(--linie-stark); border-radius:50%; color:var(--tinte); transition:transform 0.5s var(--ease)}
.tuer:hover .tuer-pfeil{transform:rotate(-45deg)}
.hinweis{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-top:var(--a6); padding:16px 20px; border:1px solid var(--linie); border-left:3px solid var(--akzent); border-radius:12px; background:var(--flaeche); color:var(--leise)}
.hinweis .ic{color:var(--akzent); font-size:20px}
.hinweis p{flex:1 1 20em}
.hinweis a{color:var(--akzent); font-weight:600; text-underline-offset:3px}
.messwerte{display:grid; gap:12px}
.messwert{padding:22px 24px 24px; border:1px solid var(--linie); border-radius:18px; background:var(--flaeche)}
.messwert-name{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 16px; font-weight:600; font-size:0.9375rem}
.messwert-name .mono{font-weight:400; color:var(--leise)}
.messwert-zahl{display:flex; align-items:baseline; gap:14px; margin-top:8px; font:620 clamp(2.8rem, 1.6rem + 3.8vw, 4.6rem)/1 var(--display); letter-spacing:-0.05em; font-variant-numeric:tabular-nums}
.messwert-zahl .einheit{font-size:0.35em; color:var(--leise); letter-spacing:0}
.messwert.kompakt{display:flex; align-items:center; gap:14px; padding:12px 18px 12px 14px; border-radius:14px; box-shadow:var(--schatten); font-size:0.875rem; line-height:1.35}
.messwert.kompakt .messwert-zahl{white-space:nowrap; margin:0; font-size:2rem; letter-spacing:-0.04em; color:var(--ok)}
.messwert.kompakt small{display:block; color:var(--leise); font:0.6875rem/1.4 var(--mono)}
.live{display:flex; align-items:flex-start; gap:24px; padding:24px 28px; border:1px dashed var(--linie-stark); border-radius:18px}
.live-titel{font:600 1.125rem/1.3 var(--display); letter-spacing:-0.02em}
.live-text{flex:1; min-width:0}
.live-werte{display:flex; flex-wrap:wrap; gap:8px 40px; margin:14px 0 10px}
.live-werte dt{font:0.75rem var(--mono); color:var(--leise)}
.live-werte dd{font:620 1.625rem/1.1 var(--display); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; min-width:4ch}
.karten{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:16px}
.karte{grid-column:span 6; padding:12px 12px 28px; border-radius:24px; background:var(--flaeche); border:1px solid var(--linie)}
.karte.breit{grid-column:span 7}
.karte.schmal{grid-column:span 5}
.karte.ganz{grid-column:1 / -1}
.karte h3{margin:24px 16px 8px}
.karte p{margin:0 16px; color:var(--leise); max-width:34em}
.karte.ohne-szene{padding:28px}
.karte.ohne-szene h3, .karte.ohne-szene p{margin-inline:0}
.karte.ohne-szene h3{margin-top:16px}
.karte-ic{width:44px; height:44px; padding:10px; border-radius:12px; background:var(--feld-himmel); color:var(--akzent)}
.szene{position:relative; height:clamp(250px, 24vw, 340px); border-radius:16px; overflow:hidden; background:var(--feld-himmel); padding:7% 7% 0}
.szene.sand{background:var(--feld-sand)}
.szene.salbei{background:var(--feld-salbei)}
.szene.tief{background:var(--feld-tief)}
.szene::after{content:''; position:absolute; left:0; right:0; top:0; height:8px; pointer-events:none; background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--tinte) 18%, transparent) 0 1px, transparent 1px 10px)}
.fenster{position:relative; height:100%; background:var(--papier); border:1px solid var(--linie); border-bottom:0; border-radius:12px 12px 0 0; box-shadow:var(--schatten); font-size:clamp(9.5px, 0.62vw + 5px, 13px); line-height:1.3; overflow:hidden}
.fenster-leiste{display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--linie); background:var(--flaeche)}
.reiter{white-space:nowrap; padding:3px 8px; border-radius:6px; color:var(--leise)}
.reiter.an{background:var(--papier); color:var(--tinte); font-weight:600}
.beispiel, .ort{margin-left:auto; color:var(--leise); font:0.85em var(--mono)}
.status-chip{margin-left:auto; display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:99px; background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); font-weight:600; opacity:0}
.editor{display:grid; grid-template-columns:22% minmax(0, 1fr) 30%; height:100%}
.bloecke{padding:10px; border-right:1px solid var(--linie); display:grid; align-content:start; gap:5px}
.bloecke li{padding:5px 8px; border-radius:6px; border:1px solid var(--linie); background:var(--flaeche); color:var(--leise)}
.bloecke .gezogen{border-color:var(--akzent); color:var(--akzent)}
.leinwand{padding:12px 14px; display:grid; align-content:start; gap:7px}
.l-titel{font:650 1.35em/1.2 var(--display); letter-spacing:-0.03em; display:flex; align-items:center; white-space:nowrap; overflow:hidden}
.tipp{display:inline-block; overflow:hidden; position:relative}
.tipp::after{content:''; position:absolute; inset:0; background:var(--papier)}
.caret{width:2px; height:1em; margin-left:2px; background:var(--akzent)}
.l-text{color:var(--leise)}
.l-bild{width:100%; height:5.2em; border-radius:6px}
.lb-himmel{fill:var(--feld-himmel)}
.lb-sonne{fill:var(--himmel); opacity:0.7}
.lb-berg{fill:color-mix(in srgb, var(--akzent) 30%, var(--feld-himmel))}
.lb-feld{fill:color-mix(in srgb, var(--ok) 28%, var(--flaeche))}
.l-form{display:grid; grid-template-columns:1fr 1fr auto; gap:5px; padding:7px; border:1.5px dashed var(--akzent); border-radius:8px; opacity:0}
.l-form span{padding:0.35em 0.5em; border-radius:4px; border:1px solid var(--linie); background:var(--flaeche); color:var(--leise)}
.l-form b{padding:0.35em 0.7em; border-radius:4px; background:var(--akzent); color:var(--akzent-text); font-weight:600}
.einstellungen{padding:10px 12px; border-left:1px solid var(--linie); background:var(--flaeche); display:grid; align-content:start; gap:4px}
.e-kopf{font-weight:650; padding-bottom:6px; margin-bottom:4px; border-bottom:1px solid var(--linie)}
.e-name{color:var(--leise); font-size:0.9em; margin-top:6px}
.e-chips{display:flex; flex-wrap:wrap; gap:3px}
.e-chips span{padding:1px 6px; border-radius:99px; background:color-mix(in srgb, var(--akzent) 12%, transparent); color:var(--akzent)}
.e-verlauf{display:grid; gap:5px; margin-top:2px}
.e-verlauf li{display:grid; grid-template-columns:auto 1fr; column-gap:6px; align-items:center}
.e-verlauf i{width:6px; height:6px; border-radius:50%; background:var(--linie)}
.e-verlauf .e-neu i{background:var(--ok)}
.e-verlauf small{grid-column:2; color:var(--leise); font-size:0.85em}
.zeiger{position:absolute; left:14%; top:64%; width:16px; height:16px; fill:var(--tinte); stroke:var(--flaeche); stroke-width:1.5; opacity:0}
.seiten li{display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--linie)}
.s-name{display:grid; min-width:0; font-weight:600}
.s-name small{font-weight:400; color:var(--leise); font-size:0.85em}
.ws-fuss{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:8px; padding:8px 12px; border-top:1px solid var(--linie); background:var(--flaeche); color:var(--leise); font-size:0.9em}
.punkt{width:7px; height:7px; border-radius:50%; background:var(--linie-stark); flex:none}
.punkt.gruen{background:var(--ok)}
.chip{margin-left:auto; padding:2px 8px; border-radius:99px; background:color-mix(in srgb, var(--tinte) 6%, transparent); color:var(--leise); font-size:0.9em; white-space:nowrap}
.chip.ok{background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok)}
.chip.wechsel{position:relative; display:grid}
.chip.wechsel > span{grid-area:1 / 1; display:inline-flex; align-items:center; gap:4px; justify-content:center}
.chip.wechsel .nach{color:var(--ok); opacity:0}
.seiten .neu{opacity:0}
.pruefungen{padding:10px 12px 6px; display:grid; gap:7px}
.pruefungen li{display:flex; align-items:center; gap:8px}
.pruefungen .ic{width:1.4em; height:1.4em; padding:0.25em; border-radius:50%; background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok); stroke-width:3}
.herzschlag{position:absolute; left:12px; right:12px; bottom:10px; height:22%; display:flex; align-items:flex-end; gap:3px}
.herzschlag i{flex:1; height:100%; border-radius:2px 2px 0 0; background:color-mix(in srgb, var(--akzent) 40%, transparent); transform-origin:50% 100%; transform:scaleY(0.35)}
.herzschlag i:nth-child(3n){transform:scaleY(0.55)}
.herzschlag i:nth-child(4n+1){transform:scaleY(0.3)}
.herzschlag i:nth-child(5n+2){transform:scaleY(0.45)}
.api{display:grid; grid-template-columns:42% 1fr; height:100%}
.schalter{padding:10px 12px; border-right:1px solid var(--linie); display:grid; align-content:start; gap:9px}
.schalter li{display:flex; align-items:center; justify-content:space-between; gap:8px}
.schalter i{position:relative; width:2.4em; height:1.35em; border-radius:99px; background:var(--linie-stark); flex:none; overflow:hidden}
.schalter i::before{content:''; position:absolute; inset:0; background:var(--akzent); opacity:0}
.schalter i::after{content:''; position:absolute; top:0.18em; left:0.18em; width:1em; height:1em; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgb(0 0 0 / 0.2)}
.code{margin:0; padding:12px 14px; font:0.95em/1.6 var(--mono); color:var(--leise); white-space:pre; overflow:hidden}
.code b{color:var(--akzent); font-weight:400}
.c-zeile{display:block}
:root.js & .szene:not(.spielt) *, :root.js & .szene:not(.spielt) *::before, :root.js & .szene:not(.spielt) *::after, :root.js & [data-lauf]:not(.spielt) .dreh, :root.js & [data-lauf]:not(.spielt) .marke-punkt::after{animation-play-state:paused}
.szene-editor .tipp::after{animation:tippen 7s steps(21) infinite}

.szene-editor .caret{animation:blink 1s steps(1) infinite}

.szene-editor .zeiger{animation:zeiger 7s var(--ease) infinite}

.szene-editor .l-form{animation:form 7s var(--ease) infinite}

.szene-editor .gezogen{animation:gezogen 7s var(--ease) infinite}

.szene-editor .status-chip, .szene-editor .e-neu{animation:gespeichert 7s var(--ease) infinite}

.szene-workspace .frei{position:relative}
.szene-workspace .frei::before{content:''; position:absolute; inset:0; background:color-mix(in srgb, var(--akzent) 7%, transparent); opacity:0; animation:zeile 6s var(--ease) infinite}

.szene-workspace .vor{animation:raus 6s var(--ease) infinite}
.szene-workspace .nach{animation:rein 6s var(--ease) infinite}


.szene-workspace .neu{animation:neu 6s var(--ease) infinite}

.szene .pruefungen li{animation:pruef 6s var(--ease) infinite; animation-delay:calc(var(--i) * 0.35s)}

.szene-cloud .herzschlag i{animation:schlag 2.4s ease-in-out infinite}
.szene-cloud .herzschlag i:nth-child(2n){animation-delay:-0.6s}
.szene-cloud .herzschlag i:nth-child(3n){animation-delay:-1.3s}
.szene-cloud .herzschlag i:nth-child(5n){animation-delay:-1.9s}

.szene-api .schalter i::before{animation:an 6s var(--ease) infinite; animation-delay:calc(var(--i) * 0.4s)}
.szene-api .schalter i::after{animation:knebel 6s var(--ease) infinite; animation-delay:calc(var(--i) * 0.4s)}


.szene-api .c-zeile{animation:code 6s var(--ease) infinite; animation-delay:calc(0.6s + var(--i) * 0.18s)}

.reihen{border-top:1px solid var(--linie)}
.reihen li{display:grid; grid-template-columns:56px minmax(0, 0.9fr) minmax(0, 1.1fr); gap:8px 24px; padding:28px 0; border-bottom:1px solid var(--linie); align-items:baseline}
.reihen .nr{font:0.8125rem/1 var(--mono); color:var(--akzent)}
.reihen p{color:var(--leise)}
.reihen.gestapelt li{grid-template-columns:48px minmax(0, 1fr)}
.reihen.gestapelt p{grid-column:2}
.reihen.gestapelt h3{font-size:clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem)}
.zwischenkopf{font:600 1rem/1.3 var(--text); color:var(--leise); margin-bottom:16px}
.technik{--papier:#05080c; --tinte:#e8edf3; --leise:#9ba7b5; --linie:#1f2833; --linie-stark:#34404f; --flaeche:#0b1118; --akzent:#38bdf8; --akzent-text:#06131d; --ok:#4ade80; color-scheme:dark; margin-top:var(--abschnitt); padding:clamp(72px, 10vw, 144px) 0; color:var(--tinte); border-block:1px solid var(--linie); background:#05080c linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 64px 64px}
.technik .spalten{align-items:center}
.technik .spalten > .kopf-spalte{position:static}
.protokoll{border:1px solid var(--linie); border-radius:20px; background:var(--flaeche); overflow:hidden}
.protokoll-kopf{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; white-space:nowrap; padding:14px 20px; border-bottom:1px solid var(--linie); font-weight:600}
.protokoll-kopf::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent)}
.protokoll-kopf .mono{margin-left:auto; color:var(--leise)}
.protokoll-skala{padding:18px 20px 34px; border-bottom:1px solid var(--linie)}
.protokoll-skala .zwischenkopf{font:0.75rem/1 var(--mono); margin-bottom:14px; display:flex; justify-content:space-between; gap:12px}
.protokoll-skala .lineal{margin-top:44px}
.marke-punkt{position:absolute; top:-22px; left:var(--x); translate:-50% 0; display:grid; justify-items:center; gap:4px; font:0.6875rem/1 var(--mono); color:var(--tinte); white-space:nowrap}
.marke-punkt::after{content:''; width:2px; height:22px; background:var(--akzent)}
.marke-punkt::after{transform-origin:50% 100%; animation:takt 4.5s linear infinite; animation-delay:calc(var(--i) * 1.5s)}

.protokoll-liste > div{display:grid; grid-template-columns:8.5rem minmax(0, 1fr); gap:4px 20px; padding:14px 20px; border-bottom:1px solid var(--linie)}
.protokoll-liste > div:last-child{border-bottom:0}
.protokoll-liste dt{font:0.75rem/1.8 var(--mono); color:var(--akzent); text-transform:uppercase; letter-spacing:0.06em}
.protokoll-liste dd{margin:0; font-size:0.9375rem}
.formular-huelle{padding:clamp(24px, 3vw, 40px); border-radius:24px; background:var(--flaeche); border:1px solid var(--linie); box-shadow:var(--schatten)}
.formular{display:grid; gap:16px}
.feld{display:grid; gap:6px}
.feld label, .feld legend{font-size:0.875rem; font-weight:600}
.feld label span{color:var(--leise)}
input, textarea{width:100%; font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--linie-stark); border-radius:10px; background:var(--papier); color:var(--tinte); transition:border-color 0.18s, box-shadow 0.18s}
input:focus, textarea:focus{outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent)}
[aria-invalid='true']{border-color:var(--fehler)}
.fehler{color:var(--fehler); font-size:0.8125rem}
.fehler:empty{display:none}
.wahl{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.wahl legend{margin-bottom:6px; padding:0}
.wahl label{position:relative}
.wahl input{position:absolute; opacity:0; width:1px; height:1px}
.wahl label span{display:inline-block; padding:10px 14px; border:1px solid var(--linie-stark); border-radius:99px; font-weight:500; cursor:pointer; transition:background-color 0.18s, border-color 0.18s, color 0.18s}
.wahl input:checked + span{background:var(--tinte); color:var(--papier); border-color:var(--tinte)}
.wahl input:focus-visible + span{outline:2px solid var(--akzent); outline-offset:2px}
.formular .knopf{justify-self:start; margin-top:4px; white-space:normal; text-align:left}
.erfolg{display:grid; gap:12px; justify-items:start; padding:24px 0; animation:ein 0.6s var(--ease)}
.erfolg > .ic{color:var(--ok); width:40px; height:40px; padding:8px; border-radius:50%; background:color-mix(in srgb, var(--ok) 14%, transparent)}
.erfolg h3{font-size:1.75rem}
.erfolg p{color:var(--leise); max-width:34em}
.erfolg a{color:var(--akzent); font-weight:600}
.aufruf-uni{margin-top:40px}
.fuss{margin-top:clamp(96px, 12vw, 176px); padding:0 0 24px; overflow:hidden}
.fuss > .lineal{margin-bottom:56px}
.fuss-raster{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:40px}
.fuss-satz{font:620 1.75rem/1.1 var(--display); letter-spacing:-0.035em; margin-bottom:16px}
.fuss-nav{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px}
.fuss-nav p{font:0.75rem/1 var(--mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--leise); margin-bottom:12px}
.fuss-nav a{display:block; padding:5px 0; text-decoration:none; color:var(--tinte); font-size:0.9375rem}
.fuss-nav a:hover{color:var(--akzent)}
.fuss-ende{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 24px; margin-top:64px; padding-top:24px; border-top:1px solid var(--linie)}
.fuss .schalter{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 4px; border:0; background:none; color:inherit; font:inherit; cursor:pointer}
.fuss .schalter i{position:relative; width:36px; height:20px; border:1px solid var(--linie-stark); border-radius:10px; background:var(--flaeche-2); transition:background-color 0.2s}
.fuss .schalter i::after{content:''; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--leise); transition:transform 0.2s var(--ease)}
.fuss .schalter[aria-pressed='true'] i{background:var(--akzent); border-color:var(--akzent)}
.fuss .schalter[aria-pressed='true'] i::after{background:var(--akzent-text); transform:translateX(16px)}
.fuss .schalter:hover span{text-decoration:underline; text-underline-offset:3px}
.uni-platz{position:relative; z-index:1; width:var(--uni-b, 9rem)}
.uni-platz.mittel{--uni-b:9rem}
.uni-platz.klein{--uni-b:6.5rem; flex:none}
.uni{cursor:pointer; outline:none; border-radius:1.5rem; -webkit-tap-highlight-color:transparent; aspect-ratio:220 / 215}
.uni:focus-visible{box-shadow:0 0 0 3px var(--akzent)}
.uni svg{display:block; width:100%; height:100%; overflow:visible}
.blase{position:absolute; left:60%; bottom:92%; width:max-content; max-width:min(15rem, 44vw); padding:10px 14px; border:1px solid var(--linie); border-radius:16px 16px 16px 4px; background:var(--flaeche); color:var(--tinte); box-shadow:var(--schatten); font-weight:600; font-size:0.9375rem; line-height:1.35; transform-origin:0 100%; opacity:0; transform:scale(0.7) translateY(8px); transition:opacity 0.2s, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); pointer-events:none; z-index:2}
.blase.an{opacity:1; transform:none}
.held-buehne .blase{left:62%; bottom:84%; font-size:1.0625rem}
.lineal-lauf .blase{left:auto; right:70%; border-radius:16px 16px 4px 16px; transform-origin:100% 100%}
.begleiter{position:fixed; right:0; bottom:20px; z-index:40; pointer-events:none; transform:translateX(115%); transition:transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s}
.begleiter[data-stand='lugt']{transform:translateX(45%)}
.begleiter[data-stand='da']{transform:translateX(-8px)}
.begleiter[data-zu]{display:none}
:root[data-held-sichtbar] & .begleiter{opacity:0; pointer-events:none}
:root[data-held-sichtbar] & .begleiter *{pointer-events:none !important}
.begleiter .uni-platz{--uni-b:5.5rem; pointer-events:auto}
.begleiter .blase{top:auto; left:auto; right:62%; border-radius:16px 16px 4px 16px; transform-origin:100% 100%}
.zu{position:absolute; top:-6px; left:-6px; z-index:3; width:26px; height:26px; display:grid; place-items:center; padding:0; border:1px solid var(--linie); border-radius:50%; background:var(--flaeche); color:var(--tinte); font-size:14px; cursor:pointer; opacity:0; transition:opacity 0.2s}
.begleiter:not([data-stand='weg']) .uni-platz:hover .zu, .zu:focus-visible{opacity:1}
.titel .zeile > span{animation:hoch 1.1s var(--ease) both; animation-delay:calc(var(--i) * 110ms)}

.ein{animation:ein 1s var(--ease) both; animation-delay:calc(120ms + var(--i, 0) * 110ms)}

:root.js & [data-zeig]{transition:opacity var(--dauer) var(--ease), transform var(--dauer) var(--ease); transition-delay:calc(var(--i, 0) * 90ms)}
:root.js & [data-zeig]:not(.da){opacity:0; transform:translateY(28px)}
@media (max-width:1080px){.held-raster{grid-template-columns:minmax(0, 1fr)}
.held-buehne{grid-column:1; grid-row:auto; width:min(100%, 380px); margin:40px auto 0}
.tuer{grid-template-columns:40px minmax(0, 1fr) 56px}
.tuer-text{grid-column:2; grid-row:2}
.tuer-pfeil{grid-column:3; grid-row:1}
.karte, .karte.breit, .karte.schmal{grid-column:span 12}
.spalten{grid-template-columns:minmax(0, 1fr)}
.spalten > .kopf-spalte{position:static}
}
@media (max-width:760px){.held-buehne{width:min(100%, 340px)}
.held-buehne .messwert.kompakt{left:-4px; bottom:-4%}
.reihen li{grid-template-columns:40px minmax(0, 1fr)}
.reihen li p{grid-column:2}
.tuer{grid-template-columns:28px minmax(0, 1fr) 44px; column-gap:12px; padding-inline:0}
.tuer-pfeil{width:44px; height:44px; padding:12px}
.tuer-text{grid-column:2 / -1}
.tuer::before{inset:0 -12px}
.editor{grid-template-columns:28% minmax(0, 1fr)}
.einstellungen, .nur-breit{display:none}
.schalter{display:none}
.api{grid-template-columns:minmax(0, 1fr)}
.protokoll-liste > div{grid-template-columns:minmax(0, 1fr)}
.begleiter{display:none}
.kopf-raster{grid-template-columns:minmax(0, 1fr)}
.kopf-buehne{width:min(260px, 72vw); justify-self:center}
.fuss-raster{grid-template-columns:minmax(0, 1fr)}
.fuss-nav{grid-template-columns:repeat(2, minmax(0, 1fr))}
.live{flex-direction:column; align-items:flex-start; padding:22px; gap:16px}
.live-werte{gap:8px 28px}
.messwert{padding:18px 18px 20px}
.lineal-lauf .uni-platz{--uni-b:60px}
}
@media (prefers-reduced-motion:reduce){:root:not(.js) & *, :root:not(.js) & *::before, :root:not(.js) & *::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important}
}
:root[data-bewegung="aus"] &, :root[data-bewegung="aus"] & *, :root[data-bewegung="aus"] & *::before, :root[data-bewegung="aus"] & *::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
:root[data-bewegung="aus"] & .szene *, :root[data-bewegung="aus"] & .szene *::before, :root[data-bewegung="aus"] & .szene *::after{animation-play-state:running !important}
:root[data-bewegung="aus"] & .dreh, :root[data-bewegung="aus"] & .marke-punkt::after{animation:none !important}
:root.js[data-bewegung="aus"] & [data-zeig]:not(.da){opacity:1; transform:none}
:root.js[data-bewegung="aus"] & .lineal:not(.da) .lineal-lauf, :root.js[data-bewegung="aus"] & .lineal:not(.da) .messband{transform:none}
:root[data-bewegung="aus"] & .szene-editor .e-neu, :root[data-bewegung="aus"] & .szene-editor .l-form, :root[data-bewegung="aus"] & .szene-editor .status-chip, :root[data-bewegung="aus"] & .szene-workspace .neu{animation:none !important; opacity:1}
:root[data-bewegung="aus"] & .szene-editor .tipp::after{animation:none !important; transform:translateX(101%)}
:root[data-bewegung="aus"] & .szene .vor{animation:none !important; opacity:0}
:root[data-bewegung="aus"] & .szene .nach{animation:none !important; opacity:1}
:root[data-bewegung="aus"] & .szene .pruefungen li{animation:none !important}
:root[data-bewegung="aus"] & .fortschritt{display:none}
:root[data-bewegung="aus"] & .mag-inhalt ol::before{display:none}


:root:has(&){scrollbar-gutter:auto}
:root &{--surface:var(--papier); --ink:var(--tinte); --muted-ink:var(--leise); --line:var(--linie); --muted:var(--flaeche-2); background:var(--papier); color:var(--tinte); font:400 1.0625rem/1.6 var(--text); -webkit-font-smoothing:antialiased; color-scheme:light}
:root[data-site-thema=dunkel] &{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-site-thema=hell]) &{color-scheme:dark} }
.site-header{position:sticky; top:0; z-index:50; padding-inline:0; background:color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color 0.3s; color:var(--tinte)}
.site-header[data-gescrollt]{border-bottom-color:var(--linie)}
.site-header > div{max-width:var(--breite); height:auto; min-height:72px; padding:14px var(--rand); gap:20px}
.site-logo{gap:10px; font:650 1.125rem/1 var(--display); letter-spacing:-0.02em; color:var(--tinte)}
.site-logo img{width:32px; height:32px}
.site-logo::before{content:'Unified' / ''; order:1; white-space:nowrap}
.site-logo::after{content:'Digital' / ''; order:2; margin-left:-5px; white-space:nowrap; font-weight:450; color:var(--leise)}
.site-logo .logo-nacht{display:none}
:root[data-site-thema=dunkel] & .site-logo:not(:has(.logo-nacht)) img{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-site-thema=hell]) & .site-logo:not(:has(.logo-nacht)) img{filter:invert(1) hue-rotate(180deg)} }
.site-header nav{gap:2px}
.site-header .nav-link{font-size:0.9375rem; color:var(--leise); padding:8px 11px; border-radius:8px; transition:color 0.18s, background-color 0.18s; text-decoration:none}
.site-header .nav-link:hover{color:var(--tinte); background:color-mix(in srgb, var(--tinte) 5%, transparent)}
.site-header nav .nav-link[aria-current]{color:var(--tinte); font-weight:400; box-shadow:inset 0 -2px 0 var(--akzent); border-radius:0}
.site-header .nav-link[aria-current]::after{display:none}
.site-header .btn-primary{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid transparent; border-radius:10px; background:var(--akzent); color:var(--akzent-text); font:600 0.9375rem/1 var(--text)}
.knopf-icon{display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--linie); border-radius:10px; background:transparent; color:var(--tinte); cursor:pointer; font-size:18px; transition:background-color 0.18s}
.knopf-icon:hover{background:color-mix(in srgb, var(--tinte) 5%, transparent)}
@media (max-width:1023px){.ud-thema{margin-left:auto} .site-header .ud-thema ~ .lg\:hidden{margin-left:0} }
.site-header nav.ml-auto::after{content:''; flex:none; width:44px; height:0; margin-left:18px}
.site-header:has(.ud-thema) nav.ml-auto::after{display:none}
.site-header .lg\:hidden{margin-right:0; flex:none}
.site-header .lg\:hidden > button{display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--linie); border-radius:10px; background:transparent; color:var(--tinte)}
.site-header .lg\:hidden > button svg{width:18px; height:18px}
#mobile-menu{background:var(--flaeche); color:var(--tinte)}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
main .cb, main .cb-slot, main .unified-html, .site-footer .cb{display:contents}
.cb{overflow-wrap:break-word}
.szene .chip{display:block; min-height:0; gap:0; border:0; font-weight:inherit; transition:none}
.szene .chip.wechsel{display:grid}
.uni-dunkel{display:none}
:root[data-site-thema=dunkel] & .uni-dunkel{display:inline}
:root[data-site-thema=dunkel] & .uni-hell{display:none}
@media (prefers-color-scheme:dark){:root:not([data-site-thema=hell]) & .uni-dunkel{display:inline} :root:not([data-site-thema=hell]) & .uni-hell{display:none} }
:where(main) a:where(:not([class])){text-decoration-line:underline; text-underline-offset:3px}
.messwert > .notiz{margin-top:12px}
.kopf-spalte, .inhalt-spalte{min-width:0}
.fluss > .inhalt-spalte{display:grid; gap:0}
.fluss > .inhalt-spalte > * + *{margin-top:0}
.site-footer{background:var(--papier); color:var(--tinte); padding:0; border-top:0}
.site-footer > div{max-width:none; padding:0; display:block}
main{counter-reset:frage}
.faq{counter-increment:frage; border-bottom:1px solid var(--linie)}
.faq summary{display:grid; grid-template-columns:3rem minmax(0, 1fr) 44px; gap:var(--a3); align-items:center; min-height:44px; padding:20px 0; font:600 clamp(1.125rem, 1rem + 0.4vw, 1.3125rem)/1.3 var(--display); letter-spacing:-0.02em; color:var(--tinte)}
.faq summary::before{content:'F' counter(frage, decimal-leading-zero); font:0.8125rem/1 var(--mono); color:var(--akzent); letter-spacing:0}
.faq summary svg{width:44px; height:44px; padding:10px; border:1px solid var(--linie-stark); border-radius:50%; color:var(--tinte); stroke-width:2px}
.faq-body .prose{padding:0 56px var(--a5) calc(3rem + var(--a3)); color:var(--leise); max-width:none}
.faq-body .prose p{max-width:38em}
.inhalt-spalte > .flex:has(> details.faq){border-top:1px solid var(--linie); gap:0; max-width:none}
@media (max-width:760px){.faq summary{grid-template-columns:2.25rem minmax(0, 1fr) 44px} .faq-body .prose{padding:0 0 var(--a5) calc(2.25rem + var(--a3))} }
.rahmen:not(.kopf-raster) > .kopf-text{display:contents}
main .cb[class*=" mt-"]{display:block}
.h2, .titel, .tuer-titel{overflow-wrap:normal}
main :is(h1, h3, h4, h5){text-wrap:wrap}
.mag-kopf-cms > section{padding:clamp(48px, 8vw, 112px) 0 0}
.mag-kopf-cms > section > div, .mag-beitrag-cms .sec-split{max-width:var(--breite); padding-inline:var(--rand)}
.mag-kopf-cms > section > div{display:block}
.mag-krumen > div, .mag-datum > div{display:inline}
.mag-krumen time, .mag-datum span{display:none}
.mag-krumen span{all:unset; font:600 0.8125rem/1.2 var(--text); letter-spacing:0.08em; text-transform:uppercase; color:var(--leise)}
.mag-krumen span::before{content:'Magazin · '}
.mag-kopf-cms h1{margin:20px 0 28px; max-width:20ch; font:640 clamp(2.6rem, 1rem + 5.4vw, 6rem)/1.02 var(--display); letter-spacing:-0.052em; text-wrap:balance; color:var(--tinte)}
.mag-lead p{max-width:34em; font-size:clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height:1.55; color:var(--leise)}
.mag-kopf-cms .mag-lineal{margin-top:clamp(56px, 7vw, 96px)}
.mag-autor{display:inline-block; margin-top:clamp(40px, 5vw, 64px)}
.mag-autor::after{content:' ·'}
.mag-datum{display:inline; margin-left:0.3em}
.mag-datum time{font-size:0.875rem; color:var(--leise)}
.mag-beitrag-cms > section{padding-inline:0; padding-top:24px}
.mag-kopf-cms > section > div::after{content:''; display:block; margin-top:24px; border-bottom:1px solid var(--linie)}
.mag-beitrag-cms .sec-split{padding-top:40px}
.mag-text .prose{max-width:40em; color:var(--tinte); font-size:1.125rem; line-height:1.7; counter-reset:h}
.mag-text .prose > * + *{margin-top:1.1em}
.mag-text .prose h2{counter-increment:h; margin-top:2.2em; font:620 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1.15 var(--display); letter-spacing:-0.03em; text-wrap:balance; scroll-margin-top:96px}
.mag-text .prose h2::before{content:counter(h, decimal-leading-zero); display:block; margin-bottom:10px; font:0.8125rem/1 var(--mono); letter-spacing:0.06em; color:var(--akzent)}
.mag-text .prose a{color:var(--akzent); text-underline-offset:3px}
.mag-beitrag-cms .sec-aside{font-size:0.875rem; color:var(--leise)}
.mag-frage{margin-top:24px; padding:20px; border:1px solid var(--linie); border-left:3px solid var(--akzent); border-radius:14px; background:var(--flaeche); display:grid; gap:8px}
.mag-aufruf{padding:24px; border:1px solid var(--linie); border-left:3px solid var(--akzent); border-radius:16px; background:var(--flaeche); display:grid; gap:10px; max-width:40em}
.mag-aufruf .aktionen{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.mag-aufmacher-text .klein:empty{display:none}
.kennung{gap:10px; font-variant-numeric:tabular-nums}
.kennung .von{color:color-mix(in srgb, var(--leise) 88%, var(--papier))}
.kennung .haar, .buehne-kennung .haar{flex:none; position:relative; top:-1px; width:24px; height:1px; background:currentColor; opacity:0.55}
.buehne-kennung{position:absolute; top:3%; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; white-space:nowrap; font:1rem/1 var(--mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--leise); font-variant-numeric:tabular-nums}
.buehne-kennung b{font-weight:400; color:var(--akzent)}
.buehne-kennung .von{color:color-mix(in srgb, var(--leise) 88%, var(--papier))}
.begleiter .rahmen{width:5.5rem; max-width:none; margin:0; padding:0}
.platz.begleiter{right:max(24px, env(safe-area-inset-right)); bottom:max(24px, env(safe-area-inset-bottom)); opacity:0; transform:translateX(calc(100% + 48px)); transition:transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s}
.platz.begleiter:is([data-stand=lugt], [data-stand=da]){opacity:1; transform:none}
:root[data-held-sichtbar] & .platz.begleiter{opacity:0; transform:translateX(calc(100% + 48px))}
@media (max-width:1399px){.platz.begleiter{display:none} }
.skala-ring .grob{display:none}
.skala-ring .fein{stroke-dasharray:none; stroke-width:1px; vector-effect:non-scaling-stroke; opacity:0.35}
.skala-ring .dreh{animation:none}
.be-instrument .be-bereich{margin:8px 0 14px; white-space:nowrap; color:var(--tinte); font:600 clamp(1.5rem, 2.2vw, 2rem)/1 var(--display); letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.be-band{position:relative; justify-self:stretch; height:6px; border-radius:3px; background:var(--linie)}
.be-band i{position:absolute; inset:0 45% 0 37.5%; border-radius:3px; background:var(--ok)}
.be-instrument .be-band-skala{justify-self:stretch; width:100%; margin-inline:0; padding:0; display:flex; justify-content:space-between; margin-bottom:6px; font:0.75rem/1 var(--mono); color:var(--leise); font-variant-numeric:tabular-nums}
.site-thema-knopf{display:none}
[data-stil="margin-top:clamp(64px,8vw,112px)"]{margin-top:clamp(64px,8vw,112px)}
[data-stil="--i:5"]{--i:5}
[data-stil^="--w:6"][data-stil$="--i:0"]{--w:6;--i:0}
[data-stil^="--w:30"][data-stil$="--i:1"]{--w:30;--i:1}
[data-stil^="--w:9"][data-stil$="--i:2"]{--w:9;--i:2}
[data-stil="margin-top:16px"]{margin-top:16px}
[data-stil="--i:0"]{--i:0}
[data-stil="--i:1"]{--i:1}
[data-stil="--i:2"]{--i:2}
[data-stil="--i:3"]{--i:3}
[data-stil="--i:4"]{--i:4}
[data-stil="margin-top:24px"]{margin-top:24px}
[data-stil="--i:6"]{--i:6}
[data-stil="--i:7"]{--i:7}
[data-stil="--i:8"]{--i:8}
[data-stil="--i:9"]{--i:9}
[data-stil^="--x:8%"][data-stil$="--i:0"]{--x:8%;--i:0}
[data-stil^="--x:29%"][data-stil$="--i:1"]{--x:29%;--i:1}
[data-stil^="--x:50%"][data-stil$="--i:2"]{--x:50%;--i:2}
[data-stil^="--x:71%"][data-stil$="--i:3"]{--x:71%;--i:3}
[data-stil^="--x:92%"][data-stil$="--i:4"]{--x:92%;--i:4}
[data-stil="margin-top:32px"]{margin-top:32px}}.logo-nacht{display:none}html:root:root body{background:var(--surface)}@media (prefers-color-scheme:dark){html:root:root:not([data-site-thema=hell]){--accent:#0497e7;--on-accent:#151922;--secondary:#7090ce;--on-secondary:#151922;--surface:#17140f;--muted:#231f19;--ink:#eceef2;--muted-ink:#a6aebb;--line:color-mix(in oklab, #eceef2 14%, #17140f);--nacht-tief:#0b0907;--surface-dark:var(--nacht-tief);--on-dark:#ffffff;--shadow:none;--ui-danger:#f0837a;--ui-danger-soft:#3a1d1b;--ui-ok:#4cc492;--ui-ok-soft:#14302a;--ui-warn:#e8a25c;--ui-warn-soft:#352616;color-scheme:dark}html:root:root:not([data-site-thema=hell]) .site .bg-\[var\(--ink\)\]{background-color:var(--nacht-tief);color:var(--on-dark)}html:root:root:not([data-site-thema=hell]) .site-footer:not([data-tone=light],[data-tone=accent]){--f-bg:var(--nacht-tief)}html:root:root:not([data-site-thema=hell]) .sec-on-white,html:root:root:not([data-site-thema=hell]) .site-header[data-transparent]:not(.is-scrolled) .btn-outline{--fill-ink:var(--nacht-tief)}html:root:root:not([data-site-thema=hell]) .sec-on-accent{--muted-ink:color-mix(in oklab, var(--on-accent) 90%, transparent)}html:root:root:not([data-site-thema=hell]) .site-header[data-transparent]:not(.is-scrolled) :is(.nav-avatar,.nav-cart-count),html:root:root:not([data-site-thema=hell]) .site .text-\[var\(--ink\)\].bg-white:not(input,select,textarea){color:var(--nacht-tief)}html:root:root:not([data-site-thema=hell]) .nav-kasten{background:color-mix(in oklab,var(--nacht-tief) 62%,#fff)}html:root:root:not([data-site-thema=hell]) .nav-kasten:hover{background:color-mix(in oklab,var(--nacht-tief) 72%,#fff)}html:root:root:not([data-site-thema=hell]) .site :is(.field,input.bg-white,textarea.bg-white,select.bg-white){background:var(--muted);color:var(--ink)}html:root:root:not([data-site-thema=hell]) .site .text-\[\#151922\]{color:var(--ink)}html:root:root:not([data-site-thema=hell]) :is(.site-header,.site-footer) .logo-tag{display:none}html:root:root:not([data-site-thema=hell]) :is(.site-header,.site-footer) .logo-nacht{display:block}html:root:root:not([data-site-thema=hell]) .site-header.is-scrolled .logo-light{display:none}html:root:root:not([data-site-thema=hell]) .site-header.is-scrolled .logo-dark{display:block}html:root:root:not([data-site-thema=hell]) :is(.site-header[data-accent],.site-footer[data-tone=accent]){--accent-base:#0369a1;--on-accent:#ffffff}}html:root:root[data-site-thema=dunkel]{--accent:#0497e7;--on-accent:#151922;--secondary:#7090ce;--on-secondary:#151922;--surface:#17140f;--muted:#231f19;--ink:#eceef2;--muted-ink:#a6aebb;--line:color-mix(in oklab, #eceef2 14%, #17140f);--nacht-tief:#0b0907;--surface-dark:var(--nacht-tief);--on-dark:#ffffff;--shadow:none;--ui-danger:#f0837a;--ui-danger-soft:#3a1d1b;--ui-ok:#4cc492;--ui-ok-soft:#14302a;--ui-warn:#e8a25c;--ui-warn-soft:#352616;color-scheme:dark}html:root:root[data-site-thema=dunkel] .site .bg-\[var\(--ink\)\]{background-color:var(--nacht-tief);color:var(--on-dark)}html:root:root[data-site-thema=dunkel] .site-footer:not([data-tone=light],[data-tone=accent]){--f-bg:var(--nacht-tief)}html:root:root[data-site-thema=dunkel] .sec-on-white,html:root:root[data-site-thema=dunkel] .site-header[data-transparent]:not(.is-scrolled) .btn-outline{--fill-ink:var(--nacht-tief)}html:root:root[data-site-thema=dunkel] .sec-on-accent{--muted-ink:color-mix(in oklab, var(--on-accent) 90%, transparent)}html:root:root[data-site-thema=dunkel] .site-header[data-transparent]:not(.is-scrolled) :is(.nav-avatar,.nav-cart-count),html:root:root[data-site-thema=dunkel] .site .text-\[var\(--ink\)\].bg-white:not(input,select,textarea){color:var(--nacht-tief)}html:root:root[data-site-thema=dunkel] .nav-kasten{background:color-mix(in oklab,var(--nacht-tief) 62%,#fff)}html:root:root[data-site-thema=dunkel] .nav-kasten:hover{background:color-mix(in oklab,var(--nacht-tief) 72%,#fff)}html:root:root[data-site-thema=dunkel] .site :is(.field,input.bg-white,textarea.bg-white,select.bg-white){background:var(--muted);color:var(--ink)}html:root:root[data-site-thema=dunkel] .site .text-\[\#151922\]{color:var(--ink)}html:root:root[data-site-thema=dunkel] :is(.site-header,.site-footer) .logo-tag{display:none}html:root:root[data-site-thema=dunkel] :is(.site-header,.site-footer) .logo-nacht{display:block}html:root:root[data-site-thema=dunkel] .site-header.is-scrolled .logo-light{display:none}html:root:root[data-site-thema=dunkel] .site-header.is-scrolled .logo-dark{display:block}html:root:root[data-site-thema=dunkel] :is(.site-header[data-accent],.site-footer[data-tone=accent]){--accent-base:#0369a1;--on-accent:#ffffff}.site-thema-knopf{display:inline-grid;place-items:center;align-self:center;width:2rem;height:2rem;border-radius:999px;border:1px solid var(--f-line,var(--line));background:transparent;color:inherit;cursor:pointer}.site-thema-knopf:hover{background:var(--f-hover,var(--muted))}.site-thema-knopf:focus-visible{outline:2px solid currentColor;outline-offset:2px}.site-thema-knopf-frei{position:fixed;right:1rem;bottom:1rem;z-index:30;background:var(--surface);color:var(--ink)}