/* V3 „Resonanz“ – kinetisch, typografisch, mutig. Design-System für alle 10 Produktseiten.
   Palette je Produkt per :root-Variablen (build/v3_resonanz.py): --ink --ink2 --paper --hue --hue2 --hue-deep --on-hue … */

@font-face{font-family:"Unbounded";src:url(/fonts/unbounded.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Syne";src:url(/fonts/syne.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"SyneSS";src:url(/fonts/unbounded.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+00DF}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

@property --fill{syntax:"<percentage>";inherits:false;initial-value:100%}

:root{
  color-scheme:dark;
  --f-display:"Unbounded","Syne",system-ui,sans-serif;
  --f-head:"SyneSS","Syne","Unbounded",system-ui,sans-serif;
  --f-body:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gut:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --hdr:76px;
  interpolate-size:allow-keywords;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink);scroll-padding-top:4.5rem}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
h1,h2,h3{hyphens:auto;overflow-wrap:break-word}
::selection{background:var(--hue);color:var(--on-hue)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase}
.wrap{max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
html:not(.js) .only-js{display:none!important}
html.js .only-nojs{display:none}

:focus{outline:none}
:focus-visible{outline:3px solid var(--paper);outline-offset:3px;box-shadow:0 0 0 3px var(--ink)}
.skip{position:fixed;left:12px;top:12px;z-index:200;background:var(--paper);color:var(--ink);padding:.85rem 1.3rem;border-radius:999px;font-weight:600;text-decoration:none}
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}

/* ───────── Farbschemata (vollflächige Blöcke) ───────── */
.sch-ink{--bg:var(--ink);--fg:var(--paper);--mut:var(--mut-ink);--ac:var(--hue);--ac2:var(--hue2);--ln:var(--line-ink)}
.sch-ink2{--bg:var(--ink2);--fg:var(--paper);--mut:var(--mut-ink);--ac:var(--hue);--ac2:var(--hue2);--ln:var(--line-ink)}
.sch-paper{--bg:var(--paper);--fg:var(--ink);--mut:var(--mut-paper);--ac:var(--hue-deep);--ac2:var(--hue2-deep);--ln:var(--line-paper)}
.sch-hdark{--bg:var(--hue-dark);--fg:var(--paper);--mut:var(--mut-hdark);--ac:var(--hue);--ac2:var(--hue2);--ln:var(--line-ink)}
.sch-hue{--bg:var(--hue-bg);--fg:var(--on-hue);--mut:var(--mut-hue-bg);--ac:var(--on-hue);--ac2:var(--on-hue);--ln:rgba(var(--ink-rgb),.35)}
.sch-hue2{--bg:var(--hue2);--fg:var(--on-hue2);--mut:var(--mut-hue2);--ac:var(--on-hue2);--ac2:var(--on-hue2);--ln:rgba(var(--ink-rgb),.35)}
.sch-ink,.sch-ink2,.sch-paper,.sch-hue,.sch-hue2,.sch-hdark{background:var(--bg);color:var(--fg)}
.sch-paper :focus-visible{outline-color:var(--ink);box-shadow:0 0 0 3px var(--paper)}
.sch-hue :focus-visible,.sch-hue2 :focus-visible{outline-color:var(--ink);box-shadow:0 0 0 3px var(--paper)}

/* ───────── Label, Buttons, Pills ───────── */
.lab{display:flex;align-items:center;gap:.9rem;font:500 .8rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg)}
.lab__tag{padding:.28rem .6rem;border:1.5px solid currentColor;border-radius:999px;font-size:.68rem;letter-spacing:.14em}
.lab__bar{display:block;width:2.8rem;height:2px;background:currentColor;transform-origin:0 50%}
html.v3m .lab__bar{animation:barIn 1.1s var(--ease) both}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.btn{display:inline-flex;align-items:center;gap:.8rem;min-height:56px;padding:.35rem 1.45rem .35rem 1.75rem;border-radius:999px;border:2px solid transparent;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn .ar{flex:none;width:1.4em;height:1.4em;transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.ar{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--hue{background:var(--hue);color:var(--on-hue)}
.btn--hue:hover{background:var(--paper);color:var(--ink)}
.btn--line{border-color:rgba(var(--paper-rgb),.5);color:var(--paper)}
.btn--line:hover{background:var(--paper);color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--paper);color:var(--ink)}
.sch-hue :focus-visible.btn--ink,.sch-hue2 .btn--ink:focus-visible{box-shadow:0 0 0 3px var(--hue)}

.pill{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 1.1rem;border-radius:999px;font:500 .78rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s}
.pill .ar{width:1.2em;height:1.2em}
.pill__dot{width:.6rem;height:.6rem;border-radius:50%;background:currentColor}
html.v3m .pill__dot{animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.pill--status{border:1px solid var(--hue2);color:var(--hue2);background:rgba(var(--hue2-rgb),.1)}
.pill--status:hover{background:var(--hue2);color:var(--on-hue2)}
.pill--ink{background:var(--ink);color:var(--paper);font:600 1rem/1.2 var(--f-body);letter-spacing:0;text-transform:none;min-height:56px;padding:0 1.5rem}
.pill--ink:hover{background:var(--paper);color:var(--ink)}

/* ───────── Kopfzeile, Fortschritt ───────── */
.top{position:fixed;inset:0 0 auto 0;z-index:50;transition:transform .55s var(--ease);pointer-events:none}
.top.is-hidden{transform:translateY(-140%)}
.top:focus-within{transform:none}
.top__in{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:calc(100% - 2*var(--gut));max-width:1560px;margin:12px auto 0;padding:.5rem .5rem .5rem 1.2rem;border-radius:999px;background:rgba(var(--ink-rgb),.8);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(var(--paper-rgb),.16);color:var(--paper)}
.top__brand{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;text-decoration:none;font:700 .78rem/1 var(--f-display);letter-spacing:-.01em}
.top__dot{position:relative;width:.7rem;height:.7rem;border-radius:50%;background:var(--hue)}
.top__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--hue);opacity:.6}
html.v3m .top__dot::after{animation:ping 2.6s var(--ease) infinite}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.7);opacity:0}}
.top__nav{display:none;gap:.1rem}
.top__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .95rem;border-radius:999px;font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .25s}
.top__nav a:hover,.top__nav a[aria-current="true"]{background:rgba(var(--paper-rgb),.14)}
.top__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 1.3rem;border-radius:999px;background:var(--hue);color:var(--on-hue);font:600 .9rem/1 var(--f-body);text-decoration:none;transition:background .3s,color .3s}
.top__cta:hover{background:var(--paper);color:var(--ink)}
@media(min-width:1040px){.top__nav{display:flex}}
.prog{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none}
.prog i{display:block;height:100%;background:var(--hue);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ───────── Motiv-Container (Canvas + statisches SVG) ───────── */
.mo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mo canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.1s}
.mo.is-live canvas{opacity:1}
.mo__poster{position:absolute;inset:0;width:100%;height:100%;transition:opacity .9s}
.mo.is-live .mo__poster{opacity:0}
.mo__poster *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mo[data-pal=dark]{--mo-a:var(--hue);--mo-b:var(--hue2);--mo-c:var(--paper)}
.mo[data-pal=poster]{--mo-a:var(--ink);--mo-b:var(--paper);--mo-c:var(--ink)}
.mo__poster .a{stroke:var(--mo-a)}.mo__poster .b{stroke:var(--mo-b)}.mo__poster .c{stroke:var(--mo-c)}
.mo__poster .fa{fill:var(--mo-a);stroke:none}.mo__poster .fb{fill:var(--mo-b);stroke:none}.mo__poster .fc{fill:var(--mo-c);stroke:none}

/* ───────── HERO ───────── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hdr) + 2.5rem) var(--gut) clamp(5.5rem,10vw,8.5rem);overflow:clip;isolation:isolate}
.hero .mo{z-index:-2}
html:not(.v3on) .hero .mo{opacity:.38}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(90% 80% at 72% 40%,transparent 35%,rgba(var(--ink-rgb),.55) 100%),linear-gradient(to top,var(--ink) 2%,rgba(var(--ink-rgb),.55) 28%,transparent 55%)}
.hero__in{position:relative;width:100%;max-width:1560px;margin-inline:auto}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.eyebrow{font:500 .82rem/1.35 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hue);text-shadow:0 0 10px var(--ink),0 0 4px var(--ink)}
.hero__name{font-family:var(--f-display);font-weight:800;line-height:.9;letter-spacing:-.045em;font-size:min(var(--fs),16rem);margin:clamp(1.2rem,3vh,2.4rem) 0 clamp(1.4rem,3.4vh,2.6rem);color:var(--paper)}
.hero__vis{display:block}
.ln{display:block;width:max-content;max-width:none;white-space:nowrap}
.ch{display:inline-block;will-change:transform}
.ch.sp{width:.3em}
.hero__sub{display:block;margin-top:.9rem;font:700 clamp(1.15rem,2.7vw,2.7rem)/1.1 var(--f-head);letter-spacing:.005em;color:var(--hue);text-shadow:0 0 16px var(--ink),0 0 6px var(--ink),0 0 26px var(--ink)}
@keyframes chIn{from{opacity:0;transform:translateY(.7em) rotate(7deg)}to{opacity:1;transform:none}}
html.v3m .ch{animation:chIn 1.1s var(--ease) backwards;animation-delay:calc(var(--i)*60ms + 120ms)}
.hero__row{display:grid;gap:1.6rem 5vw;align-items:end}
.hero__side{position:relative}
.hero__side::before{content:"";position:absolute;inset:-1.6rem -1.8rem -1.2rem -2rem;z-index:-1;pointer-events:none;background:rgba(var(--ink-rgb),.9);filter:blur(20px);border-radius:24px}
.hero__meta{position:relative}
.hero .hero__fig{position:absolute;z-index:1;right:8px;bottom:calc(100% + .8rem);width:156px;max-width:none;transform:rotate(2.2deg)}
.hero .hero__fig .fr__cap{display:none}
/* Spitze der Sonde im Foto: kleiner Impulspunkt, von dem die Pulsringe des Motivs ausgehen */
.fr__tip{position:absolute;z-index:2;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--hue);box-shadow:0 0 0 2px var(--ink);pointer-events:none}
.fr__tip::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--hue);opacity:0}
html.v3m .fr__tip::after{animation:tipping 2.6s var(--ease) infinite}
@keyframes tipping{from{transform:scale(.5);opacity:.95}to{transform:scale(3.4);opacity:0}}
/* Zubehör (QUEX PIN): ab Tablet steht das Produktfoto groß im Hero (in der Meta-Zeile, rechts) */
@media(min-width:700px){
  .hero--fig .hero__meta{flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem}
  .hero--fig .eyebrow{flex:1 1 auto;min-width:0}
  .hero .hero__fig{position:relative;right:auto;bottom:auto;flex:none;order:2;margin:0 .6rem .5rem auto;width:clamp(210px,min(23vw,31vh),340px)}
  .hero .hero__fig .fr__cap{display:block}
}
/* niedrige Fenster (Laptop): Foto kleiner, damit die Buttons in der ersten Bildschirmhöhe bleiben */
@media(min-width:700px) and (max-height:820px){.hero .hero__fig{width:clamp(170px,24vh,230px)}}
.hero__tag{font:700 clamp(1.35rem,2.55vw,2.6rem)/1.14 var(--f-head);letter-spacing:-.012em;max-width:22ch;text-wrap:balance;text-shadow:0 0 16px var(--ink),0 0 5px var(--ink)}
.hero__kurz{color:var(--mut);max-width:38rem;text-shadow:0 0 18px var(--ink),0 0 6px var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
@media(min-width:960px){.hero__row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.hero__down{position:absolute;right:var(--gut);bottom:1.4rem;z-index:2;display:inline-flex;align-items:center;gap:.7rem;min-height:44px;font:500 .74rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--paper)}
.hero__down .ar{width:1.6rem;height:1.6rem}
html.v3m .hero__down .ar{animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@media(max-width:700px){.hero__down{display:none}}

/* ───────── Laufbänder (Marquee, gekreuzt) ───────── */
.tapes{position:relative;height:clamp(170px,21vw,320px);overflow:clip;background:linear-gradient(var(--ink) 50%,var(--tape-next) 50%);z-index:3}
.tape{position:absolute;left:-6%;width:112%;overflow:hidden;white-space:nowrap}
.tape--a{top:12%;transform:rotate(-1.9deg);background:var(--paper);color:var(--ink);z-index:2}
.tape--b{top:50%;transform:rotate(1.6deg);z-index:1}
.tape--hue{background:var(--hue-bg);color:var(--on-hue)}
.tape--hue2{background:var(--hue2);color:var(--on-hue2)}
.tapes--calm{height:auto;background:var(--ink)}
.tapes--calm .tape{position:relative;left:0;top:auto;width:100%;transform:none}
.tapes--calm .tp__i{font-size:clamp(1.05rem,1.9vw,1.9rem);padding:.75em 0}
.tp__track{display:flex;width:max-content;animation:tp 52s linear infinite}
.tp--rev{animation-direction:reverse;animation-duration:64s}
.tp__set{display:flex;flex:none}
.tp__i{flex:none;font:800 clamp(1.3rem,3.1vw,3.2rem)/1 var(--f-display);letter-spacing:-.012em;padding:.6em 0;display:flex;align-items:center}
.tp__i::after{content:"";display:inline-block;flex:none;width:.5em;height:.5em;margin:0 1em;background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes tp{to{transform:translateX(-50%)}}

/* ───────── Status (SCIO / EDUCTOR) ───────── */
.status{position:relative;padding:clamp(3.8rem,8vw,7rem) 0 clamp(3.2rem,7vw,6rem);overflow:clip}
.status .lab__bar{background:var(--hue2)}
.status__box{margin:1.8rem 0 2.2rem;padding:.25rem 0 .25rem clamp(1.1rem,3vw,2.4rem);border-left:6px solid var(--hue2)}
.status__t{font:500 clamp(1.2rem,1.9vw,1.6rem)/1.5 var(--f-body);max-width:54ch;text-wrap:pretty}
.status__act{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.status .pill--ink{background:var(--paper);color:var(--ink)}
.status .pill--ink:hover{background:var(--hue2);color:var(--on-hue2)}

/* ───────── Frequenz-Regler (Signatur) ───────── */
.stage{position:relative;min-height:max(100svh,660px);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:clamp(4.5rem,8vw,7rem) var(--gut) clamp(4.8rem,7vw,6rem);overflow:clip;isolation:isolate;touch-action:pan-y}
.stage .mo{pointer-events:auto;touch-action:pan-y;cursor:ew-resize}
.mo--stage{position:relative;inset:auto;min-height:34vh;border:2px solid var(--ink);border-radius:18px}
html:not(.js) .stage .mo{cursor:auto}
.stage__in{position:relative;z-index:1;width:100%;max-width:1560px;margin-inline:auto;flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(32vh,1fr) auto;gap:1.2rem 2rem;pointer-events:none}
.stage__bot{display:block}
@media(min-width:900px){
  .stage__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top top" "read zone" "bot bot"}
  .stage__top{grid-area:top}.stage__read{grid-area:read;align-self:end}.mo--stage{grid-area:zone;min-height:0}.stage__bot{grid-area:bot}
}
.stage__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1.2rem 3rem}
.stage__lede{max-width:30rem;font:600 1.05rem/1.45 var(--f-head);pointer-events:auto;padding:.7rem .9rem;margin:-.7rem -.9rem;border-radius:8px;background:rgba(var(--hue-bg-rgb),.92)}
.stage__h{position:relative;z-index:2;padding:.6rem .9rem;margin:-.6rem -.9rem;border-radius:8px;background:rgba(var(--hue-bg-rgb),.92);font-size:clamp(.95rem,1.5vw,1.2rem);align-self:flex-start}
.stage__hd{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.stage__sub{max-width:32rem;font:500 .98rem/1.5 var(--f-body);pointer-events:auto}
.stage__note{margin-top:1rem;max-width:46rem;font:500 .92rem/1.5 var(--f-body);color:var(--fg)}
.stage__read{display:flex;align-items:baseline;gap:.5rem;line-height:.78;color:var(--fg)}
.stage__lvl{font:800 clamp(6.5rem,20vw,19rem)/.78 var(--f-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums;background:linear-gradient(var(--fg),var(--fg)) 0 100%/100% 0 no-repeat,repeating-linear-gradient(to bottom,var(--fg) 0 3px,transparent 3px 9px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;transition:background-size .5s var(--ease)}
html:not(.js) .stage__read{display:none}
.stage__of{font:500 clamp(.78rem,1.2vw,1rem)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.reg{pointer-events:auto;width:100%}
.reg__lab{display:block;margin-bottom:.9rem;font:500 .78rem/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.reg__box{display:flex;align-items:center;gap:clamp(.6rem,2vw,1.4rem)}
.reg__step{flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease)}
.reg__step svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.reg__step:hover{background:var(--ink);color:var(--hue)}
.reg__step:active{transform:scale(.92)}
.reg__trk{position:relative;flex:1;min-width:0;height:76px;display:flex;align-items:center}
.reg__tk{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding:0 28px}
.reg__tk i{display:block;width:2px;height:20px;background:var(--ink);opacity:.55}
.reg__tk i:nth-child(1),.reg__tk i:nth-child(6),.reg__tk i:nth-child(12){height:38px;opacity:1;width:3px}
.reg__in{-webkit-appearance:none;appearance:none;position:relative;z-index:1;width:100%;height:76px;margin:0;background:transparent;cursor:grab;touch-action:pan-y}
.reg__in:active{cursor:grabbing}
.reg__in::-webkit-slider-runnable-track{height:4px;background:var(--ink);border-radius:2px}
.reg__in::-moz-range-track{height:4px;background:var(--ink);border-radius:2px}
.reg__in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:56px;height:56px;margin-top:-26px;border-radius:50%;border:0;background:radial-gradient(circle,var(--hue) 0 6px,var(--ink) 7px);box-shadow:0 0 0 7px rgba(var(--ink-rgb),.16);transition:box-shadow .25s}
.reg__in::-moz-range-thumb{width:56px;height:56px;border-radius:50%;border:0;background:radial-gradient(circle,var(--hue) 0 6px,var(--ink) 7px);box-shadow:0 0 0 7px rgba(var(--ink-rgb),.16)}
.reg__in:hover::-webkit-slider-thumb,.reg__in:active::-webkit-slider-thumb{box-shadow:0 0 0 12px rgba(var(--ink-rgb),.2)}
.reg__in:focus-visible{outline:none;box-shadow:none}
.reg__in:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--hue),0 0 0 8px var(--ink)}
.reg__in:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--hue),0 0 0 8px var(--ink)}
.reg__nums{display:flex;justify-content:space-between;margin:.3rem calc(56px + clamp(.6rem,2vw,1.4rem)) 0;font-size:.72rem}
@media(max-width:560px){.reg__step{width:48px;height:48px}.reg__tk{padding:0 24px}.reg__in::-webkit-slider-thumb{width:48px;height:48px;margin-top:-22px}.reg__in::-moz-range-thumb{width:48px;height:48px}.reg__nums{margin-inline:calc(48px + 1rem)}}

/* ───────── Kennzahlen ───────── */
.kz{--kz-pt:clamp(5rem,10vw,9rem);--kz-pb:clamp(4rem,9vw,8rem);position:relative;padding:var(--kz-pt) 0 var(--kz-pb);overflow:clip}
/* Geister-Schriftzug nur im oberen und unteren Randband: er kreuzt keine Zahl, kein Label und keine Beschreibung */
.drift{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.drift__row{position:absolute;left:0;display:flex;width:max-content;margin-left:-24vw;white-space:nowrap;font:800 clamp(6rem,17vw,17rem)/1 var(--f-display);letter-spacing:-.05em;color:transparent;-webkit-text-fill-color:transparent;background:repeating-linear-gradient(to bottom,rgba(var(--hue-rgb),.12) 0 2px,transparent 2px 9px);-webkit-background-clip:text;background-clip:text;transform:translate3d(calc(var(--sx,0)*1px),0,0);will-change:transform}
.drift__row:first-child{top:0;height:calc(var(--kz-pt) + 3.4rem);overflow:hidden}
.drift__row:last-child{bottom:0;height:calc(var(--kz-pb) + 1.2rem);align-items:flex-end;overflow:hidden}
.drift__row span{padding-right:.55em}
.kz__in{position:relative;z-index:1}
.kz__list{margin-top:clamp(2rem,5vw,4rem)}
.kz__row{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;row-gap:.5rem;padding:clamp(1.1rem,2.4vw,1.9rem) 0;border-top:1px solid var(--ln);position:relative}
.kz__row:last-child{border-bottom:1px solid var(--ln)}
.kz__idx{position:absolute;left:0;top:clamp(1.1rem,2.4vw,1.9rem);color:var(--mut)}
.kz__main{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .9rem;padding-top:1.6rem;min-width:0;container-type:inline-size}
.kz__fig{--nfs:clamp(3.2rem,min(17vw,calc(78vw / (var(--len,3) * .8 + 1))),13rem);display:inline-flex;align-items:baseline;max-width:100%}
.num{display:inline-block;font:800 var(--nfs)/.92 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ac);background:linear-gradient(var(--ac),var(--ac)) 0 100%/100% var(--fill,100%) no-repeat,repeating-linear-gradient(to bottom,var(--ac) 0 2px,transparent 2px 8px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:--fill 1.4s var(--ease)}
.num--sym{background:none;-webkit-text-fill-color:var(--ac2);color:var(--ac2);transition:none;margin-left:.05em;letter-spacing:0}
html.v3m .num{--fill:0%}
html.v3m .rv.in .num,html.v3m .kz__row:hover .num{--fill:100%}
.kz__unit{color:var(--ac2);font:600 clamp(1.05rem,2vw,1.6rem)/1.2 var(--f-mono);letter-spacing:.02em;text-transform:none}
.kz__label{min-width:min(22ch,100%);max-width:30rem;color:var(--mut);padding-bottom:.9rem}
/* Ab Tablet: feste Label-Spalte rechts. Einheit und Label stehen in jeder Zeile bündig an der Ziffern-Grundlinie, Labels beginnen alle an derselben x-Position */
@media(min-width:900px){
  .kz__row{grid-template-columns:minmax(0,1fr) clamp(15rem,27vw,25rem);column-gap:clamp(2rem,5vw,5rem);align-items:end;align-items:last baseline}
  .kz__main{flex-wrap:nowrap}
  .kz__label{padding-bottom:0}
  @supports not (align-items:last baseline){.kz__label{padding-bottom:.9rem}}
}
/* Ziffernhöhe richtet sich nach der Breite der eigenen Spalte (abzüglich Einheit), damit Zahl und Einheit nie in die Label-Spalte laufen */
@supports (width:1cqw){
  .kz__fig{--nfs:clamp(3.2rem,min(17vw,calc((100cqw - var(--ulen,0) * .62 * clamp(1.05rem,2vw,1.6rem) - 1.2rem) / (var(--len,3) * .74))),13rem)}
}
@media(hover:hover){.kz__row:hover{background:linear-gradient(90deg,rgba(var(--hue-rgb),.07),transparent 70%)}}

/* ───────── Leitgedanke ───────── */
.lg{position:relative;padding:clamp(5rem,11vw,10rem) 0 clamp(5.5rem,11vw,10rem);overflow:clip}
.lg__grid{display:grid;gap:3.4rem 6vw;grid-template-columns:minmax(0,1fr);align-items:center}
.lg__q{margin-top:2rem;font:700 clamp(1.8rem,4.4vw,4.5rem)/1.1 var(--f-head);letter-spacing:-.022em;text-wrap:balance}
.lg--img .lg__q{font-size:clamp(1.7rem,3.5vw,3.5rem)}
.wd{background:linear-gradient(var(--ac),var(--ac)) 0 94%/0 0 no-repeat}
html.v3m .wd{opacity:.68;transition:opacity .4s,background-size .55s var(--ease)}
html.v3m .wd.on{opacity:1;background-size:100% .13em}
.lg__ring{position:absolute;right:clamp(.5rem,2vw,2.5rem);top:clamp(1.4rem,4vw,4rem);width:clamp(104px,14vw,210px);color:var(--ink);transform:rotate(calc(var(--rot,0)*1deg));pointer-events:none}
.ringtxt{width:100%;height:auto;fill:currentColor;font-family:var(--f-mono);font-weight:600;text-transform:uppercase;letter-spacing:.1em;overflow:visible}
.ringdot{fill:var(--hue-deep)}
@media(min-width:960px){.lg--img .lg__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr)}}

/* Bildrahmen */
.fr{position:relative;width:100%;max-width:min(calc(var(--w,800px)*1.35),calc(72vh*var(--ar,1.3)));justify-self:center}
.fr__box{position:relative;display:block;perspective:1000px}
.fr__box::before{content:"";position:absolute;inset:0;z-index:0;transform:translate(clamp(8px,1.2vw,16px),clamp(8px,1.2vw,16px));background:var(--hue);border-radius:6px;transition:transform .5s var(--ease)}
.fr:hover .fr__box::before{transform:translate(clamp(12px,1.8vw,24px),clamp(12px,1.8vw,24px))}
.fr__cap{display:block;margin-top:clamp(1.3rem,2.2vw,1.8rem);color:var(--mut);font-size:.76rem;line-height:1.4;letter-spacing:.09em}
.fr--logo img{filter:contrast(1.22) saturate(1.25)}
.fr__in{position:relative;z-index:1;display:block;aspect-ratio:var(--ar,1.3);border:2px solid var(--fg,var(--ink));border-radius:6px;overflow:hidden;background:var(--hue-soft);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s var(--ease)}
.fr img{width:100%;height:100%;object-fit:cover}
.fr--contain img{object-fit:contain;padding:clamp(6px,1.4vw,18px)}
.fr--cutout .fr__in{background:var(--ink2);border-color:var(--ink)}
.fr--light .fr__in{background:#fff}
.fr--sw .fr__in{background:var(--ink2)}
.lg__fig{transform:rotate(-1.8deg)}
.panel__fig{transform:rotate(1.2deg);max-width:min(calc(var(--w,800px)*1.35),calc(58vh*var(--ar,1.3)))}
.sch-ink .fr__box::before,.sch-ink2 .fr__box::before,.sch-hdark .fr__box::before{background:var(--hue)}
.sch-hue .fr__box::before{background:var(--ink)}
.sch-hue .fr__in{border-color:var(--ink)}
.sch-ink .fr__in,.sch-ink2 .fr__in,.sch-hdark .fr__in{border-color:var(--paper)}
.sch-paper .fr__in{border-color:var(--ink)}
.sch-ink .fr--cutout .fr__in,.sch-ink2 .fr--cutout .fr__in{background:var(--ink2);border-color:var(--hue)}

/* ───────── Merkmale (horizontales Kapitel / Stapel) ───────── */
.ft{position:relative;padding:clamp(4.5rem,9vw,8rem) 0}
.ft__pin{padding-inline:var(--gut);max-width:1560px;margin-inline:auto}
.ft__head{margin-bottom:clamp(1.6rem,4vw,3rem)}
.ft__h{margin-top:1.2rem;font:800 min(clamp(3.2rem,12vw,12rem),calc((100vw - 2*var(--gut)) / 8.8))/.92 var(--f-display);letter-spacing:-.03em;color:var(--fg)}
.ft__ghost{margin-top:.5rem;font:800 min(clamp(2rem,6.5vw,6rem),calc((100vw - 2*var(--gut)) / (var(--lw,6) * .92)))/.9 var(--f-display);letter-spacing:-.03em;color:transparent;-webkit-text-fill-color:transparent;background:repeating-linear-gradient(to bottom,rgba(var(--ink-rgb),.2) 0 2px,transparent 2px 7px);-webkit-background-clip:text;background-clip:text;overflow-wrap:anywhere;user-select:none}
.ft__hint{display:none}
.ft__list{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
.ft__ui{display:none}
@media(min-width:620px){.ft__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ft__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:clamp(1.3rem,2.3vw,2.1rem);min-height:17rem;border-radius:8px;border:2px solid var(--ink);overflow:hidden;transition:transform .5s var(--ease)}
.cd-ink{background:var(--ink);color:var(--paper);--ic:var(--hue);--ic2:var(--hue2)}
.cd-paper{background:var(--paper);color:var(--ink);--ic:var(--ink);--ic2:var(--hue-deep)}
.cd-hue{background:var(--hue-bg);color:var(--on-hue);--ic:var(--on-hue);--ic2:var(--paper)}
.card__n{opacity:.85;font-size:.74rem}
.card__ic{display:block;width:clamp(76px,10.5vw,150px);aspect-ratio:1;margin:.8rem 0 1.4rem;color:var(--ic);transition:transform .6s var(--ease)}
.ic{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic .b{stroke:var(--ic2,currentColor)}
.card__t{margin-top:auto;font:700 clamp(1.2rem,1.75vw,1.75rem)/1.14 var(--f-head);letter-spacing:-.012em;overflow-wrap:anywhere;hyphens:auto}
.card__x{margin-top:.7rem;font-size:1rem;line-height:1.5}
@media(hover:hover){.card:hover{transform:translateY(-8px) rotate(-.5deg)}.card:hover .card__ic{transform:rotate(-8deg) scale(1.08)}}
.ft.hs-on{padding:0}
.ft.hs-on .ft__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0;max-width:none}
.ft.hs-on .ft__track{display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);height:100%;width:max-content;padding-inline:var(--gut);will-change:transform}
.ft.hs-on .ft__head{flex:none;width:min(58vw,880px);margin:0}
.ft.hs-on .ft__h{font-size:min(clamp(5rem,12vw,13rem),calc(min(58vw,880px) / 8.8))}
.ft.hs-on .ft__ghost{font-size:min(clamp(2.4rem,6vw,5.6rem),calc(min(58vw,880px) / (var(--lw,6) * .92)))}
.ft.hs-on .ft__hint{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.8rem;font:600 .8rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.ft.hs-on .ft__hint .ar{width:1.7rem;height:1.7rem}
html.v3m .ft.hs-on .ft__hint .ar{animation:nudge 1.7s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.ft.hs-on .ft__list{display:flex;flex:none;gap:clamp(1.5rem,3vw,3rem)}
.ft.hs-on .card{flex:none;width:clamp(300px,28vw,420px);min-height:min(52vh,470px)}
.ft.hs-on .card__ic{width:clamp(84px,9.5vw,136px);margin:.6rem 0 1.4rem}
html.v3m .ft.hs-on .card__ic{animation:icfloat 7s ease-in-out infinite;animation-delay:calc(var(--c,0)*-1.1s)}
@keyframes icfloat{50%{transform:translateY(-7px) rotate(-4deg)}}
.ft.hs-on .card__t{font-size:clamp(1.3rem,1.9vw,1.9rem)}
.ft.hs-on .card__x{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.5}
.ft.hs-on .card:nth-child(odd){margin-top:-3vh}
.ft.hs-on .card:nth-child(even){margin-top:4vh}
.ft.hs-on .ft__ui{display:flex;position:absolute;inset:auto 0 0 0;align-items:center;justify-content:flex-end;padding:0 var(--gut) 1.6rem;pointer-events:none}
.ft.hs-on .ft__cnt{font-size:.8rem}
.ft.hs-on .ft__cur{font-size:1.5rem;letter-spacing:0}
.ft.hs-on .ft__bar{position:absolute;inset:auto 0 0 0;height:6px;background:rgba(var(--ink-rgb),.2)}
.ft.hs-on .ft__bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ───────── Abschnitte: gestapelte Sticky-Sektionen ───────── */
.panels{position:relative}
.panel{position:relative;min-height:min(80vh,740px);min-height:min(80svh,740px);display:flex;align-items:center;padding:clamp(3.8rem,7vw,6.2rem) 0}
.panel__in{width:100%}
.panel__grid{display:grid;gap:2.4rem 6vw;grid-template-columns:minmax(0,1fr)}
.panel__no{display:block;font:800 clamp(6rem,16vw,16rem)/.8 var(--f-display);letter-spacing:-.07em;color:transparent;-webkit-text-fill-color:transparent;background:repeating-linear-gradient(to bottom,var(--ac) 0 3px,transparent 3px 9px);-webkit-background-clip:text;background-clip:text}
.panel__t{--colw:calc(100vw - 2*var(--gut));margin-top:1.4rem;font:800 min(clamp(1.7rem,2.95vw,3rem),calc(var(--colw) / (var(--lw,8) * .95)))/1.06 var(--f-head);letter-spacing:-.025em}
.panel__x{font-size:clamp(1.1rem,1.45vw,1.4rem);line-height:1.55;max-width:44rem;text-wrap:pretty}
.pts{margin-top:1.8rem;border-top:1px solid var(--ln)}
.pts li{position:relative;padding:1rem 0 1rem 2rem;border-bottom:1px solid var(--ln);transition:padding .35s var(--ease)}
.pts li::before{content:"";position:absolute;left:.1rem;top:1.55rem;width:.62rem;height:.62rem;background:var(--ac);transform:rotate(45deg);transition:transform .4s var(--ease)}
@media(hover:hover){.pts li:hover{padding-left:2.7rem}.pts li:hover::before{transform:rotate(225deg) scale(1.3)}}
@media(min-width:900px){
  .panel__t{--colw:calc((100vw - 2*var(--gut)) * .4)}
  .panel__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"l r" "f r";grid-template-rows:auto 1fr;align-items:start}
  .panel--flip .panel__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"r l" "r f"}
  .panel__l{grid-area:l}.panel__r{grid-area:r}.panel__fig{grid-area:f;align-self:start}
  .panel--flip .panel__no{text-align:right}
  .panel--flip .panel__t{text-align:right;margin-left:auto}
}
.panels.is-stack .panel{position:sticky;top:var(--stick,0px);border-radius:clamp(22px,3.4vw,52px) clamp(22px,3.4vw,52px) 0 0;overflow:clip;box-shadow:0 -24px 70px rgba(0,0,0,.28)}
.panels.is-stack .panel:first-child{border-radius:0;box-shadow:none}
.panels.is-stack .panel__in{transform-origin:50% 0;transform:scale(calc(1 - var(--cover,0)*.05));opacity:calc(1 - var(--cover,0)*.5)}

/* ───────── Spezifikationen ───────── */
.specs{padding:clamp(4.5rem,9vw,8rem) 0}
.specs__in{display:grid;gap:2.4rem 6vw}
.specs__big{margin-top:1.2rem;font:800 clamp(7rem,15vw,15rem)/.8 var(--f-display);letter-spacing:-.07em;color:transparent;-webkit-text-fill-color:transparent;background:repeating-linear-gradient(to bottom,var(--ac) 0 3px,transparent 3px 9px);-webkit-background-clip:text;background-clip:text}
.specs__list{border-top:2px solid var(--fg)}
.sp__row{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:.4rem 2rem;padding:1.2rem .9rem;border-bottom:1px solid var(--ln);transition:background .3s,color .3s,padding .35s var(--ease)}
.sp__row dt{color:var(--mut);padding-top:.35rem;font-size:.74rem}
.sp__row dd{font:600 clamp(1.05rem,1.5vw,1.4rem)/1.38 var(--f-head)}
@media(hover:hover){.sp__row:hover{background:var(--ink);color:var(--paper);padding-left:1.6rem}.sp__row:hover dt{color:var(--hue)}}
@media(max-width:640px){.sp__row{grid-template-columns:minmax(0,1fr)}}
@media(min-width:900px){.specs__in{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}.specs__l{position:sticky;top:6.5rem;align-self:start}}

/* ───────── Ablauf ───────── */
.ab{padding:clamp(4.5rem,9vw,8rem) 0}
.ab__in{display:grid;gap:2.4rem 6vw}
.ab__h{font:800 clamp(2.4rem,5.2vw,5.4rem)/.98 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.ab__cnt{margin-top:1.4rem;color:var(--mut)}
.ab__list{position:relative}
.ab__line{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ln)}
.ab__line i{display:block;width:100%;height:100%;background:var(--ac);transform-origin:50% 0;transform:scaleY(var(--p,1))}
.ab__step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem clamp(1.2rem,3vw,3rem);align-items:start;padding:clamp(1.6rem,3.6vw,3rem) 0 clamp(1.6rem,3.6vw,3rem) clamp(1.4rem,3.2vw,3rem);border-bottom:1px solid var(--ln)}
.ab__nw{display:flex;flex-direction:column;gap:.7rem}
.ab__lbl{color:var(--mut);font-size:.72rem}
.ab__no{width:1.75em;font:800 clamp(3.4rem,8vw,8rem)/.82 var(--f-display);letter-spacing:-.07em;color:transparent;-webkit-text-fill-color:transparent;background:repeating-linear-gradient(to bottom,var(--ac) 0 3px,transparent 3px 8px);-webkit-background-clip:text;background-clip:text;min-width:1.2em}
.ab__t{font:700 clamp(1.35rem,2.3vw,2.3rem)/1.1 var(--f-head);letter-spacing:-.015em;overflow-wrap:anywhere}
.ab__x{margin-top:.7rem;color:var(--mut);max-width:40rem}
@media(min-width:900px){.ab__in{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}.ab__l{position:sticky;top:7rem;align-self:start}}

/* ───────── FAQ ───────── */
.faq{padding:clamp(4.5rem,9vw,8rem) 0}
.faq__h{font:800 clamp(2.6rem,7.6vw,7.6rem)/.94 var(--f-display);letter-spacing:-.025em;margin-bottom:clamp(2rem,5vw,4rem)}
.qa{border-top:2px solid var(--ink);background:linear-gradient(var(--hue),var(--hue)) 0 100%/100% 0 no-repeat;transition:background-size .5s var(--ease),color .3s}
.qa:last-child{border-bottom:2px solid var(--ink)}
.qa[open]{background-color:var(--hue-soft)}
@media(hover:hover){.qa:hover{background-size:100% 100%;color:var(--on-hue)}}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem clamp(1rem,3vw,2.6rem);align-items:center;min-height:5.6rem;padding:1.3rem clamp(.5rem,1.6vw,1.5rem)}
.qa summary::-webkit-details-marker{display:none}
.qa__n{opacity:.8}
.qa__q{font:700 clamp(1.12rem,2vw,1.95rem)/1.22 var(--f-head);letter-spacing:-.012em;overflow-wrap:anywhere}
.qa__i{position:relative;width:46px;height:46px;border:2px solid currentColor;border-radius:50%;flex:none}
.qa__i i{position:absolute;left:50%;top:50%;width:16px;height:2.5px;margin:-1.25px 0 0 -8px;background:currentColor;transition:transform .4s var(--ease)}
.qa__i i+i{transform:rotate(90deg)}
.qa[open] .qa__i i+i{transform:rotate(0)}
.qa__a{padding:0 clamp(.5rem,1.6vw,1.5rem) 2.2rem calc(clamp(.5rem,1.6vw,1.5rem) + 3.2rem + clamp(1rem,3vw,2.6rem));max-width:58rem}
.qa__a p{font-size:1.08rem;line-height:1.65}
@media(max-width:620px){.qa__a{padding-left:clamp(.5rem,1.6vw,1.5rem)}.qa__n{display:none}.qa summary{grid-template-columns:minmax(0,1fr) auto}}
@supports selector(::details-content){
  .qa::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
  .qa[open]::details-content{block-size:auto}
}

/* ───────── Verwandte Systeme ───────── */
.rel{padding:clamp(4.5rem,9vw,8rem) 0 clamp(5rem,10vw,9rem)}
.rel__h{font:800 clamp(2.4rem,6.6vw,6.8rem)/.94 var(--f-display);letter-spacing:-.025em;margin-bottom:clamp(2rem,5vw,4rem)}
.rel__row{border-top:1px solid var(--ln)}
.rel__row:last-child{border-bottom:1px solid var(--ln)}
.rel__a{position:relative;display:grid;grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) auto;gap:1rem clamp(1rem,3vw,3rem);align-items:center;padding:clamp(1.5rem,3.2vw,2.8rem) clamp(.5rem,1.6vw,1.5rem);text-decoration:none;isolation:isolate;transition:color .35s}
.rel__a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rh);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.rel__a:hover::before,.rel__a:focus-visible::before{transform:scaleY(1)}
.rel__a:hover,.rel__a:focus-visible{color:var(--rh-on)}
.rel__a:focus-visible{outline-offset:-6px;box-shadow:none}
.rel__n{font:800 min(clamp(1.5rem,3.9vw,3.9rem),calc((100vw - 2*var(--gut) - 6rem) / (var(--lw,8) * .96)))/1.04 var(--f-display);letter-spacing:-.02em;overflow-wrap:break-word;hyphens:manual;transition:transform .55s var(--ease)}
.rel__a:hover .rel__n,.rel__a:focus-visible .rel__n{transform:translateX(clamp(.4rem,1.4vw,1.4rem))}
.rel__g{color:var(--mut);font-size:1rem;line-height:1.5;transition:color .35s}
.rel__a:hover .rel__g,.rel__a:focus-visible .rel__g,.rel__a:hover .rel__no,.rel__a:focus-visible .rel__no{color:var(--rh-on)}
.rel__ar .ar{width:clamp(1.8rem,3.4vw,3.2rem);height:clamp(1.8rem,3.4vw,3.2rem);transition:transform .45s var(--ease)}
.rel__a:hover .ar{transform:translateX(8px) rotate(-45deg)}
.rel__no{color:var(--mut)}
@media(max-width:820px){.rel__a{grid-template-columns:auto minmax(0,1fr) auto}.rel__g{grid-column:2/3;grid-row:2}.rel__ar{grid-row:1/3;grid-column:3}}

/* ───────── Kontakt / CTA ───────── */
.cta{position:relative;padding:clamp(8rem,15vw,14rem) 0 clamp(5rem,10vw,9rem);margin-top:calc(clamp(26px,5vw,84px)*-1);clip-path:polygon(0 clamp(26px,5vw,84px),100% 0,100% 100%,0 100%);overflow:hidden}
.cta__ring{position:absolute;right:clamp(-2rem,2vw,5rem);top:clamp(5.5rem,10vw,10rem);width:clamp(120px,16vw,250px);color:var(--ink);transform:rotate(calc(var(--rot,0)*1deg));pointer-events:none}
.cta__big{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(1rem,3vw,3rem);margin:clamp(1.8rem,4vw,3.4rem) 0;text-decoration:none;color:var(--on-hue);transition:transform .35s var(--ease)}
@media(max-width:560px){.cta__big--long{flex-wrap:wrap}}
.cta__t{font:800 clamp(1.8rem,min(9vw,calc(78vw / (var(--lw,10) * .95))),10rem)/.92 var(--f-display);letter-spacing:-.018em;max-width:12ch;position:relative;overflow-wrap:break-word}
.cta__t::after{content:"";position:absolute;left:0;bottom:-.1em;height:.07em;width:100%;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.cta__big:hover .cta__t::after,.cta__big:focus-visible .cta__t::after{transform:scaleX(1)}
.cta__arrow{flex:none;width:clamp(60px,10vw,160px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--hue);display:grid;place-items:center;transition:transform .6s var(--ease),background .3s,color .3s}
.cta__arrow .ar{width:46%;height:46%;stroke-width:1.8}
.cta__big:hover .cta__arrow,.cta__big:focus-visible .cta__arrow{transform:rotate(-45deg) scale(1.08);background:var(--paper);color:var(--ink)}
.cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}
@media(max-width:959px){.cta__ring{top:calc(clamp(26px,5vw,84px) + 1rem);right:1.2rem;width:clamp(84px,13vw,116px);opacity:.4}}
.cta__hrs{flex-basis:100%;margin-top:.8rem;font:500 .8rem/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}

/* ───────── Footer ───────── */
.foot{padding:clamp(4.5rem,8vw,7rem) 0 0;overflow:clip}
.foot__in{display:grid;gap:2.4rem 5vw}
.foot__brand img{border-radius:16px;border:1px solid var(--ln)}
.wt-footer{display:grid;gap:2rem 4vw;grid-template-columns:minmax(0,1fr)}
.wt-firma{line-height:1.75;font-size:1rem}
.wt-firma a,.wt-links a{text-underline-offset:.22em;text-decoration-thickness:1px}
.wt-firma a{display:inline-flex;align-items:center;min-height:44px;margin:2px 0}
.wt-links{display:flex;flex-wrap:wrap;align-content:start;gap:8px 1.6rem}
.wt-links a{display:inline-flex;align-items:center;min-height:44px}
.wt-disclaimer h2{font:700 1.05rem/1.2 var(--f-head);margin-bottom:.9rem}
.wt-disclaimer p{color:var(--mut);font-size:.92rem;line-height:1.65;max-width:78ch;margin-bottom:.8rem}
@media(min-width:900px){.foot__in{grid-template-columns:auto minmax(0,1fr)}.wt-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.wt-disclaimer{grid-column:1/-1}}
.foot__giant{margin-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(6.5rem,10vw,8rem);text-align:center;white-space:nowrap;font:800 8.9vw/.9 var(--f-display);letter-spacing:-.06em;color:transparent;-webkit-text-fill-color:transparent;background:repeating-linear-gradient(to bottom,rgba(var(--paper-rgb),.22) 0 2px,transparent 2px 8px);-webkit-background-clip:text;background-clip:text;user-select:none}

/* ───────── Reveal / Kinetik ───────── */
.w{display:inline-block;max-width:100%;overflow:hidden;vertical-align:top;padding:.14em 0 .12em;margin:-.14em 0 -.12em}
.wi{display:inline-block;max-width:100%;overflow-wrap:anywhere}
html.v3m .rv{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--k,0)*80ms)}
html.v3m .rv.in{opacity:1;transform:none}
html.v3m .sp .wi{transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
html.v3m .sp.in .wi{transform:none}

/* ───────── Cursor (nur Desktop/Feinzeiger) ───────── */
.cur,.cur-dot{position:fixed;left:0;top:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .3s}
.cur.on,.cur-dot.on{opacity:1}
.cur{width:46px;height:46px;margin:-23px 0 0 -23px;border:1.5px solid #fff;border-radius:50%;mix-blend-mode:difference;display:grid;place-items:center;transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;mix-blend-mode:difference}
.cur--link{width:84px;height:84px;margin:-42px 0 0 -42px;background:#fff}
.cur__t{font:600 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s}
.cur--txt .cur__t{opacity:1}

/* ───────── Responsiv, Bewegungsreduktion ───────── */
@media(max-width:899px){
  /* schmale Bildschirme: das Motiv liegt halbtransparent hinter Wortmarke und Claim (volle Breite) statt als kleiner Block darüber */
  .hero .mo{opacity:.55}
  html:not(.v3on) .hero .mo{-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--mz,300px) - 46px),transparent calc(var(--mz,300px) - 8px));mask-image:linear-gradient(to bottom,#000 calc(var(--mz,300px) - 46px),transparent calc(var(--mz,300px) - 8px))}
}
@media(max-width:700px){
  .ln--split .seg{display:block}
  .hero__name{font-size:min(var(--fsm,var(--fs)),16rem)}
  :root{--hdr:68px}
  .hero{padding-bottom:5rem}
  .kz__idx{display:none}
  .kz__main{padding-top:.4rem}
  .kz__label{padding-bottom:0}
  .lg__ring{opacity:.35}
  .top__brand{font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tp__track{animation:none}
  .tp__set+.tp__set{display:none}
  .ch,.lab__bar,.pill__dot,.top__dot::after,.hero__down .ar,.ft__hint .ar,.card__ic{animation:none!important}
  *{transition-duration:.01ms!important}
}
@media(forced-colors:active){
  .num,.panel__no,.ab__no,.specs__big,.stage__lvl,.ft__ghost{-webkit-text-fill-color:currentColor;background:none}
  .drift,.foot__giant{display:none}
}

.lg__vis{position:relative;justify-self:center;width:100%;display:grid}
.lg__vis .lg__ring{right:auto;left:clamp(-4.2rem,-4vw,-1.2rem);top:clamp(-3.6rem,-3vw,-1.2rem);bottom:auto;width:clamp(104px,11vw,170px);z-index:3;background:var(--paper);border-radius:50%;padding:6px}
@media(max-width:959px){.lg__vis .lg__ring{left:auto;right:.2rem;top:auto;bottom:-2.2rem;opacity:1;width:104px}.lg__vis .fr__cap{padding-right:118px}}

@media(max-width:620px){
  .ab__step{grid-template-columns:minmax(0,1fr)}
  .ab__no{width:auto;background:none;-webkit-text-fill-color:var(--ac);color:var(--ac)}
}
.kz__unit{overflow-wrap:anywhere}
.rel__n,.cta__t,.ab__h,.faq__h,.tp__i,.ft__h,.drift__row{word-spacing:.14em}