@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
:root{--tief:#060607;--tief-2:#0B0B0E;--flaeche:#121218;--flaeche-2:#18181F;--linie:#1C1C22;--linie-2:#2A2A34;--weiss:#F5F5F6;--grau:#9A9AA3;--grau-2:#62626B;--uv:#7A5CFF;--uv-hell:#9B86FF;--uv-2:#6446F0;--gruen:#3FCB7E;--shell:min(1340px,100% - 3rem);--eo:cubic-bezier(.23,1,.32,1);--r:18px;--xs:.8125rem;--sm:clamp(.875rem,.85rem + .1vw,.95rem);--base:clamp(1rem,.97rem + .16vw,1.1rem);--lg:clamp(1.15rem,1.05rem + .4vw,1.45rem);--xl:clamp(1.55rem,1.3rem + 1.1vw,2.35rem);--2xl:clamp(2.1rem,1.4rem + 2.6vw,3.9rem);--3xl:clamp(2.7rem,1.3rem + 5vw,6.6rem)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:#2A2A34 var(--tief);accent-color:var(--uv)}
body{background:var(--tief);color:var(--weiss);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:var(--base);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;font-feature-settings:"cv11","ss01"}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-weight:760;letter-spacing:-.045em;line-height:1.03;text-wrap:balance}
em{font-style:normal}
u{text-decoration:none}
p{max-width:62ch;text-wrap:pretty}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--uv-hell);outline-offset:3px;border-radius:6px}
::selection{background:var(--uv);color:#fff}
.shell{width:var(--shell);margin-inline:auto}
.sprung{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--weiss);color:var(--tief);padding:.6rem 1rem;border-radius:8px}
.sprung:focus{top:1rem}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--xs);font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--uv-hell);margin-bottom:1.1rem}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--uv);box-shadow:0 0 12px 2px rgba(122,92,255,.7)}
.titel{font-size:var(--2xl);max-width:17ch}
.titel.gross{font-size:clamp(2.3rem,1.3rem + 3.6vw,5rem);max-width:20ch}
.einleitung{margin-top:1.2rem;color:var(--grau);font-size:var(--base)}
.einleitung+.einleitung{margin-top:.9rem}
.hinweis{margin-top:1.4rem;font-size:var(--xs);color:var(--grau-2)}
.sek{padding-block:clamp(5rem,10vw,8.5rem)}
.sek-kopf{display:grid;grid-template-columns:1.1fr 1fr;gap:1.5rem 4rem;align-items:end;margin-bottom:2.8rem}
.sek-kopf>*{min-width:0}
.sek-kopf .einleitung{margin-top:0}

/* Tasten */
.taste{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.8rem 1.4rem;border-radius:999px;font-weight:650;font-size:var(--sm);white-space:nowrap;transition:transform 160ms var(--eo),background-color 200ms ease,border-color 200ms ease,box-shadow 300ms ease,opacity 200ms ease}
.taste:active{transform:scale(.97)}
.taste svg{width:18px;height:18px;flex:none;transition:transform 200ms var(--eo)}
.taste-voll{background:var(--uv);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 34px -14px rgba(122,92,255,.9)}
.taste-rand{border:1px solid var(--linie-2);color:var(--weiss)}
.taste-glas{background:rgba(245,245,246,.06);border:1px solid rgba(245,245,246,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.taste-klein{min-height:42px;padding:.55rem 1.1rem}
.taste[disabled]{opacity:.4;pointer-events:none}
@media(hover:hover) and (pointer:fine){.taste-voll:hover{background:var(--uv-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 44px -12px rgba(122,92,255,1)}.taste-voll:hover svg{transform:translateX(3px)}.taste-rand:hover,.taste-glas:hover{border-color:var(--uv-hell);background:rgba(122,92,255,.1)}}
.dreh{transform:rotate(180deg)}

/* Marke und Kopf */
.marke{display:inline-flex;align-items:baseline;gap:.35rem;line-height:1;min-height:44px;align-items:center}
.marke b{font-weight:850;letter-spacing:.02em;font-size:1.02rem}
.marke i{font-style:normal;font-weight:400;color:var(--grau);font-size:1.02rem;letter-spacing:-.01em}
.marke u,.flug h1 u{color:var(--uv);text-shadow:0 0 14px rgba(122,92,255,.9)}
.kopf{position:fixed;inset:0 0 auto;z-index:50;height:72px;display:flex;align-items:center;transition:background-color 300ms ease,box-shadow 300ms ease}
.kopf.fest{background:rgba(6,6,7,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--linie)}
.kopf-in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:1.5rem}
.kopf-nav{display:flex;gap:1.6rem;margin-left:auto;font-size:var(--sm);color:var(--grau)}
.kopf-nav a{display:inline-flex;align-items:center;min-height:44px;transition:color 200ms ease}
.kopf-nav a:hover{color:var(--weiss)}
@media(max-width:1060px){.kopf-nav{display:none}.kopf .taste{margin-left:auto}}
@media(max-width:420px){.kopf-in{gap:.8rem}.kopf .taste{padding-inline:.85rem;font-size:.8rem}.kopf .marke b,.kopf .marke i{font-size:.9rem}}

/* Hero: Flug durch die Arbeiten */
.flug{position:relative;height:300vh;background:var(--tief)}
.flug-buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;perspective:1000px;perspective-origin:50% 45%}
.flug-film{position:absolute;inset:-6% 0 -6%;z-index:0;will-change:transform;opacity:.9}
.flug-film video{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.95)}
.flug-glut{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 50% at 70% 55%,rgba(122,92,255,.22),transparent 70%),radial-gradient(40% 40% at 20% 90%,rgba(122,92,255,.12),transparent 70%)}
.flug-raum{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2;transform-style:preserve-3d;will-change:transform}
.tafel{position:absolute;left:0;top:0;width:min(46vw,640px);margin-left:calc(min(46vw,640px) / -2);margin-top:calc(min(46vw,640px) * -.3125);border-radius:14px;overflow:hidden;background:var(--flaeche);border:1px solid rgba(245,245,246,.12);box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(122,92,255,.12),0 0 60px -10px rgba(122,92,255,.35);transform-style:preserve-3d;backface-visibility:hidden;will-change:opacity;transition:box-shadow 300ms ease}
.tafel img{width:100%;aspect-ratio:1100/688;object-fit:cover}
.tafel span{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1rem;font-size:.8rem;color:var(--grau);background:rgba(18,18,24,.92);border-top:1px solid var(--linie-2)}
.tafel span b{color:var(--weiss);font-weight:650}
@media(hover:hover){.tafel:hover{box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 2px var(--uv),0 0 80px -6px rgba(122,92,255,.6)}}
.flug-schleier{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(6,6,7,.92) 0%,rgba(6,6,7,.62) 34%,rgba(6,6,7,0) 62%),linear-gradient(180deg,rgba(6,6,7,.55) 0%,rgba(6,6,7,0) 22%,rgba(6,6,7,0) 70%,rgba(6,6,7,.9) 100%)}
.flug-text{position:absolute;z-index:4;left:0;right:0;bottom:0;width:var(--shell);margin-inline:auto;padding-bottom:clamp(4.5rem,11vh,7.5rem);will-change:transform,opacity}
.flug h1{font-size:min(var(--3xl),13vh);font-weight:800;letter-spacing:-.06em;line-height:.96;max-width:11ch}
.flug h1 em{position:relative;display:inline-block;color:#fff;background:linear-gradient(100deg,#C9BCFF 0%,#fff 38%,var(--uv-hell) 70%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:schimmern 7s linear infinite}
.flug h1 em::after{content:"";position:absolute;left:0;right:.3em;bottom:-.02em;height:.07em;border-radius:99px;background:linear-gradient(90deg,var(--uv),var(--uv-hell));box-shadow:0 0 18px 2px rgba(122,92,255,.8);transform:scaleX(0);transform-origin:left;animation:strich 1.3s var(--eo) .6s forwards}
.flug h1 u{-webkit-text-fill-color:var(--uv);display:inline-block}
@keyframes schimmern{to{background-position:-220% 0}}
@keyframes strich{to{transform:scaleX(1)}}
.flug-unter{margin-top:1.4rem;font-size:var(--lg);color:#D8D8DE;max-width:38ch;line-height:1.45}
.tasten{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.marker{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.8rem;font-size:var(--sm);color:var(--grau)}
.marker li{display:flex;align-items:center;gap:.4rem}
.marker b{color:var(--weiss);font-weight:650}
.ladezeit i{width:7px;height:7px;border-radius:50%;background:var(--gruen);box-shadow:0 0 10px 1px rgba(63,203,126,.8)}
.ladezeit{color:#CFEFDC}
.flug-text>*{animation:rein 1s var(--eo) both}
.flug-text>h1{animation-delay:.06s}.flug-text>.flug-unter{animation-delay:.14s}.flug-text>.tasten{animation-delay:.22s}.flug-text>.marker{animation-delay:.3s}
@keyframes rein{from{opacity:0;transform:translateY(22px)}}
.flug-ende{position:absolute;z-index:4;left:0;right:0;top:50%;width:var(--shell);margin-inline:auto;transform:translateY(-50%);opacity:0;pointer-events:none;text-align:center;display:flex;flex-direction:column;align-items:center}
.flug-ende-titel{font-size:var(--2xl);font-weight:760;letter-spacing:-.045em;line-height:1.05;max-width:18ch;text-wrap:balance}
.flug-leiste{position:absolute;z-index:5;right:clamp(1rem,3vw,2.5rem);top:50%;width:2px;height:120px;margin-top:-60px;background:var(--linie-2);border-radius:2px;overflow:hidden}
.flug-leiste i{display:block;width:100%;height:100%;background:var(--uv);box-shadow:0 0 10px var(--uv);transform:scaleY(0);transform-origin:top}
.flug-hinweis{position:absolute;z-index:5;left:50%;bottom:1.1rem;transform:translateX(-50%);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-2);white-space:nowrap;transition:opacity 400ms ease}
@media(max-width:760px){
  .flug{height:240vh}
  .flug-schleier{background:linear-gradient(180deg,rgba(6,6,7,.72) 0%,rgba(6,6,7,.25) 24%,rgba(6,6,7,.35) 44%,rgba(6,6,7,.9) 66%,var(--tief) 100%)}
  .tafel{width:64vw;margin-left:-32vw;margin-top:-20vw}
  .tafel span{font-size:.72rem;padding:.55rem .75rem}
  .flug-raum{top:22%}
  .flug-text{padding-bottom:4.5rem}
  .flug h1{font-size:clamp(2.5rem,11.5vw,3.6rem)}
  .flug-unter{font-size:1.05rem}
  .flug-leiste,.flug-hinweis{display:none}
  .marker{gap:.4rem 1rem;font-size:.82rem}
}

/* Laufband */
.band-rahmen{position:relative;z-index:6;overflow:hidden;margin-top:-1.6rem;padding-block:1rem}
.band{overflow:hidden;background:var(--uv);color:#fff;transform:rotate(-1deg);margin-inline:-2vw;box-shadow:0 20px 50px -20px rgba(122,92,255,.7)}
.band-lauf{display:flex;width:max-content;animation:laufen 40s linear infinite}
.band-lauf span{display:flex;align-items:center;gap:1.4rem;padding:.85rem 0 .85rem 1.4rem;font-weight:750;font-size:clamp(.95rem,.85rem + .45vw,1.3rem);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.band-lauf span::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
@keyframes laufen{to{transform:translateX(-50%)}}

/* Aussage */
.aussage{position:relative;overflow:clip;isolation:isolate;padding-block:clamp(7rem,16vw,13rem)}
.aussage-bild{position:absolute;inset:0;z-index:-1}
.aussage-bild img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;object-position:60% 50%;will-change:transform}
.aussage-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--tief) 0%,rgba(6,6,7,.88) 38%,rgba(6,6,7,.35) 75%,rgba(6,6,7,.5) 100%),linear-gradient(180deg,var(--tief) 0%,rgba(6,6,7,0) 22%,rgba(6,6,7,0) 78%,var(--tief) 100%)}
.aussage h2 span{color:var(--uv-hell)}
.aussage .einleitung{font-size:var(--lg);max-width:44ch;color:#C8C8CF}
@media(max-width:760px){.aussage-bild::after{background:linear-gradient(180deg,var(--tief) 0%,rgba(6,6,7,.72) 30%,rgba(6,6,7,.86) 100%)}}

/* Arbeiten */
.pfeile{display:flex;gap:.5rem;justify-self:end}
.pfeil{width:48px;height:48px;border-radius:50%;border:1px solid var(--linie-2);display:grid;place-items:center;transition:border-color 200ms ease,opacity 200ms ease}
.pfeil svg{width:18px;height:18px}
.pfeil:hover{border-color:var(--uv-hell)}
.pfeil:disabled{opacity:.3;cursor:default}
.bahn{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:1rem 0 2rem;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);scroll-padding-inline:calc(50vw - 50%);perspective:1400px}
.bahn::-webkit-scrollbar{display:none}
.arbeit{flex:0 0 min(520px,82vw);scroll-snap-align:start;border-radius:var(--r);overflow:hidden;background:var(--flaeche);border:1px solid var(--linie);transition:transform 500ms var(--eo),border-color 300ms ease,box-shadow 400ms ease;transform-style:preserve-3d}
.arbeit-bild{overflow:hidden;aspect-ratio:1100/688;background:var(--flaeche-2)}
.arbeit-bild img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--eo)}
.arbeit-text{display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 1.25rem 1.3rem}
.arbeit-text b{font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.arbeit-text span{font-size:var(--sm);color:var(--grau)}
.arbeit-text em{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;font-size:var(--xs);font-weight:650;color:var(--uv-hell)}
.arbeit-text em svg{width:15px;height:15px}
@media(hover:hover) and (pointer:fine){.arbeit:hover{border-color:rgba(122,92,255,.6);box-shadow:0 30px 70px -30px rgba(122,92,255,.55)}.arbeit:hover .arbeit-bild img{transform:scale(1.04)}}

/* Filme */
.filme{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.film{min-width:0}
.film-buehne{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--flaeche);border:1px solid var(--linie)}
.film-buehne img,.film-buehne video{width:100%;height:100%;object-fit:cover}
.film-buehne img{filter:brightness(.8);transition:filter 400ms ease,transform 900ms var(--eo)}
.film-start{position:absolute;inset:0;display:grid;place-items:center}
.film-start svg{width:64px;height:64px;padding:20px;border-radius:50%;background:rgba(122,92,255,.92);color:#fff;box-shadow:0 0 0 10px rgba(122,92,255,.2),0 20px 40px -10px rgba(0,0,0,.7);transition:transform 300ms var(--eo)}
.film-buehne:hover .film-start svg{transform:scale(1.08)}
.film-buehne:hover img{filter:brightness(.95);transform:scale(1.03)}
.film-dauer{position:absolute;right:.7rem;bottom:.7rem;font-size:.72rem;font-weight:650;padding:.2rem .5rem;border-radius:6px;background:rgba(6,6,7,.75);font-variant-numeric:tabular-nums}
.film figcaption{padding-top:.9rem;display:flex;flex-direction:column;gap:.15rem}
.film figcaption b{font-weight:680}
.film figcaption span{font-size:var(--sm);color:var(--grau)}
@media(max-width:900px){.filme{grid-template-columns:1fr}}

/* Ablauf */
.ablauf-sek{background:var(--tief-2);border-block:1px solid var(--linie)}
.ablauf{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.4rem;counter-reset:s}
.ablauf::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--linie-2)}
.ablauf::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--uv),var(--uv-hell));box-shadow:0 0 14px rgba(122,92,255,.8);transform:scaleX(var(--fort,0));transform-origin:left}
.schritt{position:relative;padding-top:2.2rem;min-width:0}
.schritt::before{content:"";position:absolute;left:0;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--tief-2);border:2px solid var(--linie-2);transition:border-color 400ms ease,background-color 400ms ease,box-shadow 400ms ease}
.schritt.an::before{border-color:var(--uv);background:var(--uv);box-shadow:0 0 16px 3px rgba(122,92,255,.7)}
.schritt-nr{display:block;font-size:var(--xs);font-weight:700;letter-spacing:.14em;color:var(--uv-hell);margin-bottom:.8rem}
.schritt h3{font-size:var(--xl);margin-bottom:.8rem}
.schritt p{color:var(--grau)}
@media(max-width:820px){.ablauf{grid-template-columns:1fr;gap:2.6rem;padding-left:1.6rem}.ablauf::before,.ablauf::after{left:0;right:auto;top:0;bottom:0;width:2px;height:auto}.ablauf::after{transform:scaleY(var(--fort,0));transform-origin:top}.schritt{padding-top:0}.schritt::before{left:calc(-1.6rem - 6px);top:.2rem}}

/* Preis */
.preis-raster{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.preis-raster>*{min-width:0}
.preis-text{position:sticky;top:110px}
.preis-karten{display:flex;flex-direction:column;gap:1rem}
.preis-karte{position:relative;padding:clamp(1.5rem,3vw,2.3rem);border-radius:calc(var(--r) + 6px);background:linear-gradient(160deg,#17142A 0%,var(--flaeche) 45%);border:1px solid rgba(122,92,255,.35);box-shadow:0 50px 100px -60px rgba(122,92,255,.7);overflow:hidden}
.preis-karte::before{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(122,92,255,.35),transparent 70%);pointer-events:none}
.preis-karte.leise{background:var(--flaeche);border-color:var(--linie);box-shadow:none}
.preis-karte.leise::before{display:none}
.preis-zahl{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem}
.preis-zahl i{font-style:normal;color:var(--grau);font-size:var(--lg)}
.preis-zahl b{font-size:clamp(3.4rem,2.4rem + 3.5vw,5.6rem);font-weight:800;letter-spacing:-.06em;line-height:1}
.preis-karte.leise .preis-zahl b{font-size:clamp(2.4rem,2rem + 1.5vw,3.4rem)}
.preis-zahl span{font-size:var(--sm);color:var(--grau)}
.preis-liste{display:flex;flex-direction:column;gap:.55rem;margin-top:1.4rem}
.preis-liste li{position:relative;padding-left:1.6rem;font-size:var(--sm);color:#D8D8DE}
.preis-liste li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;background:rgba(122,92,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%239B86FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.preis-fuss{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--linie-2);font-size:var(--xs);color:var(--grau)}
@media(max-width:900px){.preis-raster{grid-template-columns:1fr}.preis-text{position:static}}

/* Mietrechner */
.rechner{margin-top:clamp(3rem,6vw,5rem);padding:clamp(1.4rem,3.4vw,2.8rem);border-radius:calc(var(--r) + 8px);background:var(--tief-2);border:1px solid var(--linie);display:grid;grid-template-columns:1fr 1.2fr;gap:1.8rem 4rem}
.rechner>*{min-width:0}
.rechner-kopf h3{font-size:var(--xl);margin-bottom:.8rem}
.rechner-kopf p{color:var(--grau);font-size:var(--sm)}
.rechner-kopf .kicker{margin-bottom:.8rem}
.rechner-felder{display:flex;flex-direction:column;gap:1.3rem;justify-content:center}
.regler{display:flex;flex-direction:column;gap:.6rem}
.regler span{display:flex;justify-content:space-between;font-size:var(--sm);color:#D8D8DE}
.regler output{font-weight:750;color:#fff;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--uv) var(--p,20%),var(--linie-2) var(--p,20%))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--uv) var(--p,20%),var(--linie-2) var(--p,20%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;border:5px solid var(--uv);box-shadow:0 0 0 6px rgba(122,92,255,.2)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:5px solid var(--uv);box-shadow:0 0 0 6px rgba(122,92,255,.2)}
.schalter{display:flex;align-items:center;gap:.8rem;font-size:var(--sm);color:#D8D8DE;cursor:pointer;min-height:44px}
.schalter input{position:absolute;opacity:0;width:1px;height:1px}
.schalter span{position:relative;width:46px;height:26px;border-radius:99px;background:var(--linie-2);flex:none;transition:background-color 250ms ease}
.schalter span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 300ms var(--eo)}
.schalter input:checked+span{background:var(--uv)}
.schalter input:checked+span::after{transform:translateX(20px)}
.schalter input:focus-visible+span{outline:2px solid var(--uv-hell);outline-offset:3px}
.rechner-balken{grid-column:1/-1;display:flex;flex-direction:column;gap:.9rem;padding-top:1.6rem;border-top:1px solid var(--linie)}
.r-zeile{display:grid;grid-template-columns:150px 1fr 110px;align-items:center;gap:1rem}
.r-name{font-size:var(--sm);color:var(--grau)}
.r-spur{height:14px;border-radius:99px;background:var(--flaeche-2);overflow:hidden}
.r-spur i{display:block;height:100%;width:var(--w,0%);border-radius:99px;background:#4A4A55;transition:width 600ms var(--eo)}
.r-zeile.neu .r-spur i{background:linear-gradient(90deg,var(--uv),var(--uv-hell));box-shadow:0 0 16px rgba(122,92,255,.7)}
.r-zeile b{text-align:right;font-size:var(--lg);font-weight:760;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.r-zeile.neu b{color:var(--uv-hell)}
.rechner-fazit{grid-column:1/-1;font-size:var(--lg);font-weight:650;letter-spacing:-.02em;max-width:none}
.rechner-fazit em{color:var(--uv-hell)}
.rechner-fuss{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.rechner-fuss .hinweis{margin:0}
@media(max-width:860px){.rechner{grid-template-columns:1fr}.r-zeile{grid-template-columns:1fr auto;grid-template-areas:"n w" "s s";gap:.4rem .8rem}.r-name{grid-area:n}.r-spur{grid-area:s}.r-zeile b{grid-area:w}}

/* Schnellcheck */
.check-sek{position:relative;overflow:clip;isolation:isolate}
.check-bild{position:absolute;inset:0;z-index:-1}
.check-bild img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;will-change:transform;opacity:.55}
.check-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--tief) 0%,rgba(6,6,7,.72) 25%,rgba(6,6,7,.82) 75%,var(--tief) 100%)}
.check-raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.check-raster>*{min-width:0}
.check-text .taste{margin-top:1.8rem;white-space:normal;text-align:left}
.check-karte{padding:clamp(1.2rem,3vw,2rem);border-radius:calc(var(--r) + 6px);background:rgba(18,18,24,.86);border:1px solid var(--linie-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:1.3rem}
.fragen-liste{display:flex;flex-direction:column}
.fragen-liste li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--linie-2)}
.fragen-liste li:first-child{padding-top:0}
.fragen-liste p{font-size:var(--sm);color:#DCDCE2}
.jn{display:flex;gap:.3rem;flex:none}
.jn button{min-width:52px;min-height:40px;padding:.3rem .8rem;border-radius:99px;border:1px solid var(--linie-2);font-size:var(--xs);font-weight:650;color:var(--grau);transition:all 200ms ease}
.jn button[aria-pressed=true][data-a=ja]{background:rgba(63,203,126,.16);border-color:var(--gruen);color:#9FE8C0}
.jn button[aria-pressed=true][data-a=nein]{background:rgba(122,92,255,.18);border-color:var(--uv);color:#D6CCFF}
.check-ergebnis{display:flex;align-items:center;gap:1.1rem}
.ring{position:relative;width:64px;height:64px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--linie-2);stroke-width:4}
.ring .ring-wert{stroke:var(--uv);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset 700ms var(--eo),stroke 300ms ease;filter:drop-shadow(0 0 5px rgba(122,92,255,.8))}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:.9rem;font-weight:750;font-variant-numeric:tabular-nums}
.check-ergebnis p{font-size:var(--sm);color:#DCDCE2}
.check-karte>.taste{align-self:flex-start;white-space:normal;text-align:left}
@media(max-width:900px){.check-raster{grid-template-columns:1fr}}
@media(max-width:480px){.fragen-liste li{flex-direction:column;align-items:flex-start;gap:.5rem}}

/* Leistungen */
.koennen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:calc(var(--r) + 4px);overflow:hidden;margin-top:3rem}
.kann{background:var(--tief);padding:0 0 2rem;transition:background-color .3s var(--eo);min-width:0}
.kann:hover{background:#09090D}
.kann-text{padding:0 1.6rem}
.kann h3{font-size:var(--lg);font-weight:700;letter-spacing:-.02em;margin-bottom:.6rem}
.kann p{font-size:var(--sm);color:var(--grau);line-height:1.65}
.szene{position:relative;height:220px;margin-bottom:1.7rem;overflow:hidden;background:radial-gradient(110% 90% at 50% 10%,#15122A 0%,#08080C 62%,var(--tief) 100%);border-bottom:1px solid var(--linie)}
.frag{position:absolute;background:var(--flaeche);border:1px solid var(--linie-2);border-radius:10px;box-shadow:0 22px 44px rgba(0,0,0,.66),0 2px 0 rgba(255,255,255,.03) inset;padding:.6rem .7rem;opacity:0;transform:translateY(22px) scale(.96);transition:opacity .75s var(--eo),transform .75s var(--eo)}
.kann[data-an="true"] .frag{opacity:1;transform:none}
.kann[data-an="true"] .frag:nth-of-type(2){transition-delay:.14s}
.kann[data-an="true"] .frag:nth-of-type(3){transition-delay:.28s}
.kann[data-an="true"] .frag:nth-of-type(4){transition-delay:.42s}
.kann[data-an="true"] .treib{animation:treiben 7s ease-in-out 1s infinite alternate}
.kann[data-an="true"] .treib-2{animation:treiben-2 8.5s ease-in-out 1.3s infinite alternate}
@keyframes treiben{from{translate:0 0}to{translate:0 -9px}}
@keyframes treiben-2{from{translate:0 0}to{translate:0 7px}}
.f-titel{font-size:.58rem;font-weight:700;letter-spacing:.09em;color:var(--grau-2);text-transform:uppercase}
.f-gross{font-size:1.35rem;font-weight:700;letter-spacing:-.04em;line-height:1.1;margin-top:.15rem}
.f-klein{display:block;font-size:.62rem;color:var(--grau);margin-top:.12rem;line-height:1.35}
.f-uv{color:var(--uv-hell)}
.f-reihe{display:flex;align-items:center;gap:.45rem}
.f-punkt{width:6px;height:6px;border-radius:50%;background:var(--gruen);flex:none}
.f-balken{height:5px;border-radius:3px;background:var(--linie-2)}
.f-leiste{height:26px;border-radius:6px;background:var(--uv);color:#fff;font-size:.6rem;font-weight:700;display:grid;place-items:center}
.f-phone{width:92px;height:172px;border-radius:16px;background:linear-gradient(170deg,#1A1A24,#0B0B10);border:1px solid #2E2E3A;box-shadow:0 26px 52px rgba(0,0,0,.72);padding:.55rem .5rem}
.f-phone .f-titel{font-size:.5rem}
.f-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.6rem;font-weight:600;color:var(--grau);border:1px solid var(--linie-2);border-radius:999px;padding:.25rem .55rem;background:#101018}
.f-swatch{width:20px;height:34px;border-radius:4px}
.f-blase{border-radius:12px 12px 12px 3px;background:#17301F;border-color:#245134;max-width:132px}
.f-blase.aus{border-radius:12px 12px 3px 12px;background:#191426;border-color:#2E2450}
.f-avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,var(--uv),#3B2E8A);flex:none}
.werkzeuge{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.werkzeuge span{border:1px solid var(--linie-2);border-radius:99px;padding:.45rem .9rem;font-size:var(--xs);color:var(--grau)}
@media(max-width:1000px){.koennen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.koennen{grid-template-columns:1fr}}

/* Fragen */
.fragen-sek{background:var(--tief-2);border-block:1px solid var(--linie)}
.fragen-raster{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.fragen-raster>*{min-width:0}
.fragen-raster>div:first-child{position:sticky;top:110px}
.einwaende{border-top:1px solid var(--linie-2)}
.einwand{border-bottom:1px solid var(--linie-2)}
.einwand-kopf{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 0;text-align:left;min-height:56px}
.einwand-kopf h3{font-size:var(--lg);font-weight:650;letter-spacing:-.02em;line-height:1.3}
.einwand-kopf i{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--linie-2);flex:none;transition:border-color 300ms ease,background-color 300ms ease,transform 400ms var(--eo)}
.einwand-kopf i::before,.einwand-kopf i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:currentColor;border-radius:2px;transition:transform 400ms var(--eo)}
.einwand-kopf i::after{transform:rotate(90deg)}
.einwand[data-offen=true] .einwand-kopf i{background:var(--uv);border-color:var(--uv);transform:rotate(180deg)}
.einwand[data-offen=true] .einwand-kopf i::after{transform:rotate(0)}
.einwand-text{display:grid;grid-template-rows:0fr;transition:grid-template-rows 450ms var(--eo)}
.einwand[data-offen=true] .einwand-text{grid-template-rows:1fr}
.einwand-text>div{overflow:hidden}
.einwand-text p{padding-bottom:1.4rem;color:var(--grau)}
@media(max-width:900px){.fragen-raster{grid-template-columns:1fr}.fragen-raster>div:first-child{position:static}}

/* Über */
.ueber{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.ueber>*{min-width:0}
.bild-huelle{position:relative;overflow:hidden;border-radius:calc(var(--r) + 8px);aspect-ratio:1200/1248;background:var(--flaeche);border:1px solid var(--linie)}
.bild-huelle img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.bild-huelle::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(6,6,7,.5));pointer-events:none}
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
.zahl{padding:1.2rem;border-radius:var(--r);background:var(--flaeche);border:1px solid var(--linie);display:flex;flex-direction:column;gap:.4rem;min-width:0}
.zahl b{font-size:clamp(1.9rem,1.5rem + 1.3vw,2.8rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.zahl span{font-size:var(--xs);color:var(--grau);line-height:1.45}
.team{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center;margin-top:3rem;padding:1.4rem;border-radius:calc(var(--r) + 4px);background:var(--tief-2);border:1px solid var(--linie);max-width:760px}
.team-bild{width:96px;height:96px;border-radius:50%;overflow:hidden;border:2px solid rgba(122,92,255,.5);box-shadow:0 0 24px -4px rgba(122,92,255,.5)}
.team-bild img{width:100%;height:100%;object-fit:cover}
.team b{display:block;font-weight:700}
.team>div>span{display:block;font-size:var(--xs);color:var(--uv-hell);margin-bottom:.4rem}
.team p{font-size:var(--sm);color:var(--grau)}
@media(max-width:900px){.ueber{grid-template-columns:1fr}.ueber-bild{max-width:480px}}
@media(max-width:560px){.zahlen{grid-template-columns:1fr}.team{grid-template-columns:1fr}.team-bild{width:80px;height:80px}}

/* Anfrage */
.anfrage-sek{background:radial-gradient(60% 50% at 80% 30%,rgba(122,92,255,.12),transparent 70%)}
.anfrage-raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.anfrage-raster>*{min-width:0}
.anfrage-text{position:sticky;top:110px}
.direkt{display:flex;flex-direction:column;gap:.7rem;margin-top:2.2rem}
.direkt a{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;border-radius:var(--r);border:1px solid var(--linie);transition:border-color 200ms ease,background-color 200ms ease;min-width:0}
.direkt a:hover{border-color:var(--uv);background:rgba(122,92,255,.06)}
.direkt svg{width:22px;height:22px;color:var(--uv-hell);flex:none}
.direkt span{display:flex;flex-direction:column;font-weight:650;min-width:0;overflow-wrap:anywhere}
.direkt small{font-weight:400;font-size:var(--xs);color:var(--grau)}
.anfrage{padding:clamp(1.3rem,3vw,2.2rem);border-radius:calc(var(--r) + 6px);background:var(--flaeche);border:1px solid var(--linie-2);box-shadow:0 50px 100px -60px rgba(122,92,255,.55)}
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.6rem;counter-reset:s}
.schritte li{counter-increment:s;font-size:var(--xs);color:var(--grau-2);padding-top:.7rem;border-top:3px solid var(--linie-2);transition:color 300ms ease,border-color 300ms ease}
.schritte li::before{content:counter(s) ". "}
.schritte li[aria-current],.schritte li[data-fertig=true]{border-color:var(--uv);color:var(--weiss)}
.block-titel{grid-column:1/-1;font-size:1.3rem;font-weight:760;letter-spacing:-.02em;margin-bottom:.4rem}
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.wahl-taste{display:flex;align-items:center;min-height:54px;padding:.7rem 1rem;border-radius:12px;border:1px solid var(--linie-2);font-size:var(--sm);text-align:left;transition:border-color 200ms ease,background-color 200ms ease}
.wahl-taste:hover{border-color:var(--uv);background:rgba(122,92,255,.08)}
.wahl-taste.gewaehlt{border-color:var(--uv);background:rgba(122,92,255,.14)}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feld{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.feld span{font-size:var(--xs);font-weight:600;color:#D8D8DE}
.feld input,.feld textarea{width:100%;min-height:48px;padding:.8rem .95rem;border-radius:12px;background:var(--tief);border:1px solid var(--linie-2);outline:0;font-size:1rem;transition:border-color 200ms ease,box-shadow 200ms ease}
.feld textarea{resize:vertical;min-height:96px}
.feld input:focus,.feld textarea:focus{border-color:var(--uv);box-shadow:0 0 0 4px rgba(122,92,255,.18)}
.feld-weit,.mitnahme,.anfrage-aktionen{grid-column:1/-1}
.mitnahme{display:flex;flex-direction:column;gap:.5rem;padding:.9rem 1rem;border-radius:12px;background:rgba(122,92,255,.08);border:1px dashed rgba(122,92,255,.55);font-size:var(--sm)}
.mitnahme b{font-size:var(--xs);color:var(--uv-hell);letter-spacing:.08em;text-transform:uppercase}
.vorschau-box{border-radius:12px;background:var(--tief);border:1px solid var(--linie);overflow:hidden}
.vorschau-titel{font-size:var(--xs);color:var(--grau);padding:.6rem 1rem;border-bottom:1px solid var(--linie)}
.vorschau{margin:0;padding:1rem;font:inherit;font-size:.85rem;line-height:1.55;color:#D2D2D8;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}
.anfrage-aktionen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.gewaehlt{margin-top:1rem;font-size:var(--xs);color:var(--grau)}
.gewaehlt b{color:var(--uv-hell);font-weight:650}
.zurueck{margin-top:1rem;font-size:var(--sm);color:var(--grau);min-height:44px;padding-inline:.2rem}
.zurueck:hover{color:var(--weiss)}
@media(max-width:900px){.anfrage-raster{grid-template-columns:1fr}.anfrage-text{position:static}}
@media(max-width:560px){.wahl,.felder{grid-template-columns:1fr}.anfrage-aktionen .taste{width:100%;white-space:normal}}

/* Fuß */
.fuss{border-top:1px solid var(--linie);padding:3.4rem 0 6.5rem;background:var(--tief-2)}
.fuss-oben{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.fuss .marke b,.fuss .marke i{font-size:1.5rem}
.fuss-nav{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font-size:var(--sm);color:var(--grau)}
.fuss-nav a{min-height:40px;display:inline-flex;align-items:center;transition:color 200ms ease}
.fuss-nav a:hover{color:var(--weiss)}
.fuss-recht{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--linie);font-size:var(--xs);color:var(--grau-2)}
@media(min-width:861px){.fuss{padding-bottom:3rem}}

/* Rechtstexte */
.recht{padding:8rem 0 5rem;max-width:760px}
.recht h1{font-size:var(--2xl);margin-bottom:2rem}
.recht h2{font-size:var(--lg);margin:2rem 0 .6rem;letter-spacing:-.02em}
.recht p,.recht li{color:var(--grau);font-size:var(--sm)}
.recht a{color:var(--uv-hell)}
.recht ul{list-style:disc;padding-left:1.2rem}

/* Daumenleiste */
.daumen{position:fixed;z-index:60;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));display:none;grid-template-columns:1fr 1.5fr 1fr;gap:.4rem;padding:.4rem;border-radius:999px;background:rgba(18,18,24,.88);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--linie-2);box-shadow:0 20px 40px -12px rgba(0,0,0,.7);transform:translateY(140%);transition:transform 450ms var(--eo)}
.daumen.zeigen{transform:none}
.daumen a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;border-radius:999px;font-size:.86rem;font-weight:650}
.daumen svg{width:17px;height:17px;color:var(--uv-hell)}
.daumen-haupt{background:var(--uv);color:#fff}
@media(max-width:860px){.daumen{display:grid}}

/* Einblenden */
.zeigt{opacity:0;transform:translateY(24px);transition:opacity 800ms var(--eo),transform 800ms var(--eo)}
.zeigt.da{opacity:1;transform:none}

@media(max-width:900px){.sek-kopf{grid-template-columns:1fr}.pfeile{justify-self:start}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .flug{height:auto}
  .flug-buehne{position:relative;min-height:100svh}
  .flug h1 em::after{transform:none}
  .band-lauf{animation:none}
  .zeigt{opacity:1;transform:none}
  .frag{opacity:1!important;transform:none!important}
  .flug-hinweis,.flug-leiste{display:none}
}

/* Kennzeichnung KI-generierter Medien */
.ki-hinweis{position:absolute;z-index:5;right:1rem;bottom:.9rem;margin:0;padding:.28rem .6rem;border-radius:99px;background:rgba(6,6,7,.66);border:1px solid rgba(245,245,246,.12);font-size:.68rem;letter-spacing:.02em;color:#B9B9C2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;max-width:none}
.ki-flug{right:auto;left:clamp(1rem,3vw,2.5rem);bottom:1rem}
.aussage-bild .ki-hinweis,.check-bild .ki-hinweis{bottom:1.4rem;right:clamp(1rem,3vw,2.5rem)}
.fuss-ki{margin-top:1rem;font-size:var(--xs);color:var(--grau-2);max-width:none}
@media(max-width:760px){.ki-flug{left:.75rem;bottom:.6rem;font-size:.62rem}}
