/* ZARVIS – Live-Präsentation. Scroll-Animationen: .a + --k (Keyframe-Name) laufen auf der Zeitleiste der umgebenden .scene.
   Native per animation-timeline, sonst setzt app.js --p (0…1) und die Animation wird über animation-delay gesteuert. */
:root{
  --bg:#000;--app:#07111F;--card:#0D2032;--card2:#091624;--line:rgba(145,194,216,.14);
  --tx:#EAF4F8;--mu:#8DA3B5;--cy:#5CD8F8;--cy2:#31C9F5;--gr:#5EE9A4;--vi:#A78BFA;--or:#F59E0B;--rd:#FF5E7E;--ye:#FCD34D;
  --grad:linear-gradient(95deg,#5CD8F8 0%,#7FA8FF 45%,#A78BFA 100%);
  --warm:linear-gradient(95deg,#F59E0B,#FF5E7E);
  --fh:'Space Grotesk',system-ui,sans-serif;--fb:'DM Sans',system-ui,sans-serif;
  --pw:min(300px,30vw,calc(80svh / 2.09));
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--tx);font:400 18px/1.45 var(--fb);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{background:var(--bg);overflow-x:clip}
button{font:inherit;color:inherit;cursor:pointer}
svg{display:block}

/* ---------- Typo ---------- */
.lab{font:600 .82rem/1 var(--fh);letter-spacing:.16em;text-transform:uppercase;color:var(--cy);margin-bottom:1.1rem}
.lab.o{color:var(--or)}
.h1{font:700 clamp(4.2rem,15vw,12rem)/.95 var(--fh);letter-spacing:-.045em}
.h2{font:700 clamp(2.3rem,6vw,5.4rem)/1.02 var(--fh);letter-spacing:-.035em}
.h3{font:700 clamp(1.9rem,4.2vw,3.6rem)/1.05 var(--fh);letter-spacing:-.03em}
.lead{font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--mu);max-width:34ch;margin-top:1.1rem}
.c .lead,.lead.c{margin-inline:auto}
.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.w{background:var(--warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.mu{color:var(--mu)}
.bsp{position:absolute;left:clamp(16px,4vw,48px);bottom:18px;font-size:.75rem;color:#8a9aa8;letter-spacing:.04em}

/* ---------- Abschnitte ---------- */
.scene{position:relative;height:var(--len,300vh);view-timeline:--scene block}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1600px}
.sec{position:relative;min-height:100svh;display:grid;place-items:center;padding:18vh max(16px,8vw);text-align:center;overflow:hidden}
.split{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6vw;height:100%;padding:0 8vw;max-width:1400px;margin:auto}
.split.rev{grid-template-columns:auto minmax(0,1fr)}
.split.rev>.tx{order:2}
.tx{max-width:32rem}
.vis{position:relative;display:grid;place-items:center;transform-style:preserve-3d}
.center{display:grid;place-items:center;height:100%;text-align:center;padding:0 max(16px,6vw)}
.abs{position:absolute;inset:0}

/* Aurora */
.aur{position:absolute;inset:-25%;pointer-events:none;background:
  radial-gradient(38% 32% at 28% 32%,#123556 0%,transparent 70%),
  radial-gradient(34% 30% at 72% 62%,#2A1F5C 0%,transparent 70%),
  radial-gradient(28% 24% at 55% 20%,rgba(92,216,248,.16) 0%,transparent 70%);
  animation:aur 22s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.08)}}

/* ---------- Scroll-Animationen ---------- */
.a{animation-name:var(--k);animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both}
/* Grafikspeicher: eigene Ebenen nur in der sichtbaren Szene (app.js setzt .aktiv), Szenen außerhalb des Bildes werden gar nicht gerendert */
.aktiv .a{will-change:transform,opacity}
.scene{content-visibility:auto}
@supports (animation-timeline:view()){
  .a{animation-timeline:--scene;animation-range:contain 0% contain 100%}
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
}
@supports not (animation-timeline:view()){
  .a{animation-play-state:paused;animation-delay:calc(var(--p,0) * -1s)}
  .rv{opacity:0;transform:translateY(48px) scale(.97);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
  .rv.in{opacity:1;transform:none}
}
/* Sanftes Scrubbing: app.js glättet --p je Szene (html.glatt), statt die Zeitleiste hart an den Scrollbalken zu koppeln */
.glatt .a{animation-timeline:auto;animation-range:normal;animation-play-state:paused;animation-delay:calc(var(--p,0) * -1s)}
@keyframes rv{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1;transform:none}}

@keyframes st1{0%,4%{opacity:0;transform:translateY(5vh) scale(.96)}16%,100%{opacity:1;transform:none}}
@keyframes st2{0%,16%{opacity:0;transform:translateY(5vh) scale(.96)}28%,100%{opacity:1;transform:none}}
@keyframes st3{0%,28%{opacity:0;transform:translateY(5vh) scale(.96)}40%,100%{opacity:1;transform:none}}
@keyframes st4{0%,40%{opacity:0;transform:translateY(5vh) scale(.96)}52%,100%{opacity:1;transform:none}}
@keyframes st5{0%,52%{opacity:0;transform:translateY(5vh) scale(.96)}64%,100%{opacity:1;transform:none}}
@keyframes st6{0%,64%{opacity:0;transform:translateY(5vh) scale(.96)}76%,100%{opacity:1;transform:none}}
/* Einschwenken – halten – Rausschwenken (3D) */
@keyframes swing{0%{transform:translateX(16vw) rotateY(-46deg) rotateX(12deg) scale(.82);opacity:0}10%{opacity:1}32%,86%{transform:none;opacity:1}100%{transform:translateX(-12vw) rotateY(38deg) rotateX(-8deg) scale(.8);opacity:0}}
@keyframes swingL{0%{transform:translateX(-16vw) rotateY(46deg) rotateX(12deg) scale(.82);opacity:0}10%{opacity:1}32%,86%{transform:none;opacity:1}100%{transform:translateX(12vw) rotateY(-38deg) rotateX(-8deg) scale(.8);opacity:0}}
@keyframes draw{0%,14%{stroke-dashoffset:1}62%,100%{stroke-dashoffset:0}}
@keyframes ringFill{0%,12%{stroke-dashoffset:1}58%,100%{stroke-dashoffset:var(--off)}}
@keyframes wipeX{0%,8%{clip-path:inset(0 100% 0 0)}88%,100%{clip-path:inset(0 0 0 0)}}
@keyframes wipeY{0%,8%{clip-path:inset(0 0 100% 0)}88%,100%{clip-path:inset(0 0 0 0)}}

/* Hero */
@keyframes heroPhone{
  0%{transform:translate3d(0,64vh,0) rotateX(30deg) rotateY(-160deg) rotateZ(-12deg) scale(.8)}
  36%{transform:translate3d(0,0,0) rotateX(6deg) rotateY(-16deg) rotateZ(0deg) scale(1)}
  52%{transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1)}
  100%{transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(var(--zoom,4))}}
@keyframes heroTitle{0%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-8vh) scale(.9)}}
@keyframes heroSub{0%,34%{opacity:0;transform:translateY(2vh)}44%,58%{opacity:1;transform:none}66%,100%{opacity:0;transform:translateY(-2vh)}}
@keyframes fadeOut{0%{opacity:1}8%,100%{opacity:0}}
@keyframes heroEnd{0%,86%{opacity:0}97%,100%{opacity:1}}

/* Sieben Werkzeuge → Eine App */
@keyframes toolFly{0%,6%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:1;filter:blur(0)}46%,100%{transform:translate(0,0) scale(.2);opacity:0;filter:blur(6px)}}
@keyframes sevenOut{0%,30%{opacity:1;transform:none}46%,100%{opacity:0;transform:scale(.86)}}
@keyframes oneIn{0%,46%{opacity:0;transform:scale(1.7)}66%,100%{opacity:1;transform:none}}

/* CarPlay, Insel, Service, Überall, Privat */
@keyframes cpIn{0%{transform:rotateX(60deg) translateY(30vh) scale(.72);opacity:0}6%{opacity:1}16%,100%{transform:none;opacity:1}}
@keyframes islGrow{0%,8%{transform:scale(.3,.42)}32%,100%{transform:none}}
@keyframes inOut{0%,4%{opacity:0;transform:translateY(-4vh)}16%,48%{opacity:1;transform:none}64%,100%{opacity:0;transform:translateY(10vh) scale(.9)}}
@keyframes paneUp{0%,48%{transform:translateY(102%)}68%,100%{transform:none}}
@keyframes svcWord{0%{transform:scale(.5);opacity:0}24%,44%{transform:none;opacity:1}76%,100%{transform:scale(9);opacity:0}}
@keyframes late{0%,62%{opacity:0;transform:scale(.88) translateY(6vh)}82%,100%{opacity:1;transform:none}}
@keyframes fanL{0%{transform:scale(.92)}46%,100%{transform:translateX(calc(var(--fan) * -1)) rotateY(24deg)}}
@keyframes fanR{0%{transform:translateZ(-300px);opacity:0}20%{opacity:1}46%,100%{transform:translateX(var(--fan)) rotateY(-24deg);opacity:1}}
@keyframes wPop{0%,46%{transform:translateZ(1px)}76%,100%{transform:translateZ(110px) scale(1.06)}}
@keyframes lockIn{0%{transform:scale(2.6);opacity:0}30%,100%{transform:none;opacity:1}}

/* ---------- Telefon: aktuelles iPhone Pro als CSS-Nachbau ----------
   Titanrahmen (--ti) + schmaler schwarzer Displayrand (--bz); Display 1:2,17, Eckenradius 55/430 der Displaybreite. */
.ph{--ti:calc(var(--pw) * .013);--bz:calc(var(--pw) * .024);--r:calc(var(--pw) * .155);--d:16px;
  position:relative;width:var(--pw);aspect-ratio:1/2.086;flex:none}
.ph.d3{transform-style:preserve-3d}
.ph>.fr{position:absolute;inset:0;border-radius:var(--r);border:var(--ti) solid transparent;padding:var(--bz);
  background:linear-gradient(#000 0 0) padding-box,
    linear-gradient(140deg,#8f9297,#e4e5e7 10%,#7a7d82 22%,#55585d 38%,#a9acb0 55%,#64676c 70%,#d0d2d5 86%,#7e8186) border-box;
  box-shadow:inset 0 0 0 1px #121315,0 0 0 .5px #2c2e31,
    0 calc(var(--pw) * .07) calc(var(--pw) * .12) calc(var(--pw) * -.05) rgba(0,0,0,.9),
    0 calc(var(--pw) * .14) calc(var(--pw) * .26) calc(var(--pw) * -.1) rgba(92,216,248,.16)}
/* Glanzkante außen am Titan */
.ph>.fr::before{content:"";position:absolute;inset:calc(var(--ti) * -1);border-radius:inherit;pointer-events:none;
  box-shadow:inset .8px .8px 0 rgba(255,255,255,.55),inset -.8px -.8px 0 rgba(0,0,0,.45)}
.d3>.fr{transform:translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* Seitentasten: links Action-Button + Lautstärke, rechts Seitentaste + Kamerasteuerung */
.kn{position:absolute;width:calc(var(--pw) * .016);border-radius:calc(var(--pw) * .008);background:linear-gradient(90deg,#3d4045,#c4c6c9 45%,#6d7075)}
.kn.l{left:calc(var(--pw) * -.011)}.kn.r{right:calc(var(--pw) * -.011)}
.kn.ab{top:17.5%;height:4.4%}.kn.v1{top:25.5%;height:7.8%}.kn.v2{top:35%;height:7.8%}.kn.st{top:27.5%;height:12%}
.kn.kk{top:55%;height:7%;right:calc(var(--pw) * -.006);background:linear-gradient(90deg,#1e2023,#4e5156 50%,#1e2023);box-shadow:inset 0 0 0 .5px #8a8d92}
.d3>.kn{transform:translateZ(calc(var(--d) * -.5))}
/* schlanke 3D-Kante (2 Ebenen) und schlichte Rückseite mit Kamera-Plateau */
.ph>.ly{position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(120deg,#8a8e94,#43474d 35%,#7b7f86 65%,#2c2f33);transform:translateZ(calc(var(--z) * -1px))}
.ph>.bk{position:absolute;inset:0;border-radius:var(--r);transform:translateZ(calc(var(--d) * -1)) rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(160deg,#3b3f45,#26292d 55%,#1d1f22);box-shadow:inset 0 0 0 var(--ti) #8f9297,inset 0 0 0 calc(var(--ti) + 1px) #222}
.bk .kb{position:absolute;left:5%;top:2.6%;width:46%;aspect-ratio:1;border-radius:22%;background:linear-gradient(150deg,#45494f,#2a2d31);box-shadow:inset 0 0 0 1px #6b6f75,0 4px 10px #0007}
.bk .kb i{position:absolute;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#0c0f18 28%,#25304a 31%,#090b10 52%,#3a3e45 60%,#15171a 72%);box-shadow:0 0 0 2px #50545a}
.bk .kb i:nth-child(1){left:6%;top:6%}.bk .kb i:nth-child(2){left:6%;bottom:6%}.bk .kb i:nth-child(3){right:6%;top:30%}
.bk .lg{position:absolute;left:50%;top:56%;width:16%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#C9F2FF,#3CC8F5 40%,#5B5BEF 75%,#1A0F3A);opacity:.35}
.scr{position:relative;height:100%;border-radius:calc(var(--r) - var(--ti) - var(--bz));overflow:hidden;background:var(--app);container-type:inline-size;isolation:isolate}
.scr::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 40% at 20% 0%,#123556,transparent 70%),radial-gradient(60% 40% at 100% 30%,#2A1F5C88,transparent 70%)}
/* dezente Glasspiegelung */
.scr::after{content:"";position:absolute;inset:0;z-index:60;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 34%,transparent 48%)}
/* Dynamic Island (126×37 pt auf 402 pt Breite) mit Frontkamera */
.isl{position:absolute;top:2.7cqw;left:50%;width:31.3cqw;height:9.2cqw;translate:-50% 0;border-radius:99px;z-index:45;
  background:radial-gradient(circle at calc(100% - 4.6cqw) 50%,#1d2638 0 1.1cqw,#07080c 1.25cqw 1.9cqw,transparent 2cqw),#000}
/* Statusleiste: Uhrzeit links der Insel, rechts Mobilfunk, WLAN, Akku */
.sb{display:grid;grid-template-columns:1fr 31.3cqw 1fr;align-items:center;height:14.6cqw;padding-top:.2cqw;font:600 4.3cqw/1 -apple-system,system-ui,var(--fb);letter-spacing:-.01em}
.sb b{justify-self:center;font-weight:600}
.sb .si{grid-column:3;justify-self:center;display:flex;align-items:center;gap:1.4cqw}
.sb .si svg{height:2.9cqw;width:auto;fill:currentColor}.sb .si .ak{height:3.2cqw}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:24;background:#000}

/* App-Bausteine (cqw = 1 % Bildschirmbreite) */
.ap{padding:1cqw 5cqw 22cqw;font-size:3.9cqw;line-height:1.35}
.dt{font:600 2.9cqw var(--fh);letter-spacing:.14em;color:var(--cy);text-transform:uppercase}
.gt{font:700 8.4cqw/1.06 var(--fh);letter-spacing:-.02em;margin:2cqw 0 1.5cqw}
.gt span{color:var(--cy)}
.cd{position:relative;background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:5cqw;padding:3.8cqw;margin-top:3.2cqw}
.ct{font:600 2.7cqw var(--fh);letter-spacing:.14em;color:var(--cy);text-transform:uppercase;margin-bottom:2.2cqw}
.cd b{font-weight:700}
.sm{font-size:3.1cqw;color:var(--mu)}
.row{display:flex;gap:2.4cqw;align-items:center}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:1.6cqw;border-radius:3.6cqw;padding:3cqw 2cqw;font:700 3.5cqw var(--fb);white-space:nowrap}
.btn.p{background:var(--cy2);color:#04202c}.btn.s{background:#ffffff0d;border:1px solid var(--line)}
.rings{display:flex;justify-content:space-between;text-align:center}
.rings figure{width:26cqw;font-size:2.8cqw;color:var(--mu)}
.rg{width:100%;aspect-ratio:1;position:relative;margin-bottom:1cqw}
.rg svg{width:100%;height:100%;transform:rotate(-90deg)}
.rg circle{fill:none;stroke-width:9;stroke-linecap:round}
.rg b{position:absolute;inset:0;display:grid;place-items:center;font:700 7cqw var(--fh);color:var(--tx)}
.tab{position:absolute;left:3cqw;right:3cqw;bottom:3cqw;height:15cqw;border-radius:8cqw;background:rgba(13,27,43,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;font-size:2.4cqw;color:var(--mu);z-index:10}
.tab span{display:grid;justify-items:center;gap:.6cqw}.tab span::before{content:"";width:5cqw;height:5cqw;border-radius:1.4cqw;border:.6cqw solid currentColor}
.tab .on{color:var(--cy)}
.li{display:flex;align-items:center;gap:3cqw;padding:2.6cqw 0;border-top:1px solid var(--line)}
.li:first-of-type{border-top:0}
.li .t{font:700 3.4cqw var(--fh);color:var(--cy);width:10cqw}
.li .n{flex:1;min-width:0}.li .n b{display:block;font-size:3.6cqw}.li .n small{font-size:2.9cqw;color:var(--mu)}
.dot{width:2.4cqw;height:2.4cqw;border-radius:50%;flex:none}
.bdg{font:700 2.5cqw var(--fh);letter-spacing:.06em;padding:1cqw 2cqw;border-radius:9cqw;white-space:nowrap}
.chip{display:inline-block;font-size:2.9cqw;padding:1.4cqw 2.8cqw;border-radius:9cqw;background:#ffffff0d;border:1px solid var(--line);margin:0 1cqw 1.6cqw 0}
.chip.on{background:rgba(92,216,248,.16);color:var(--cy);border-color:rgba(92,216,248,.4)}
.map{width:100%;height:100%}
.pane{position:absolute;inset:0;background:var(--app);z-index:26}
.pane::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 40% at 80% 0%,#123556,transparent 70%)}

/* Hotspots: 44px Tippfläche, sichtbarer Punkt 30px. Geöffnet wird per app.js (Event-Delegation), nicht per popovertarget. */
.hs{position:absolute;left:var(--x);top:var(--y);z-index:25;width:44px;height:44px;translate:-50% -50%;border:0;border-radius:50%;padding:0;
  background:none;color:#03202b;font:700 20px/44px var(--fh);touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto}
.hs::before{content:"";position:absolute;inset:7px;z-index:-1;border-radius:50%;background:var(--cy);box-shadow:0 0 0 0 rgba(92,216,248,.6);animation:puls 2.2s infinite}
.hs:focus-visible,.nav a:focus-visible,.btn2:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes puls{70%{box-shadow:0 0 0 16px rgba(92,216,248,0)}100%{box-shadow:0 0 0 0 rgba(92,216,248,0)}}
/* nichts Dekoratives darf Hotspots verdecken */
.flys,.fly,.hl,.cm,.isl,.sb,.aur{pointer-events:none}
/* Fallback ohne Popover-API (älteres iOS) */
.nopop .tip{display:none;z-index:100}.nopop .tip.auf{display:block}
[popover].tip{position:fixed;inset:auto 16px max(20px,env(safe-area-inset-bottom)) 16px;margin:0 auto;max-width:440px;width:auto;border:1px solid var(--line);border-radius:24px;
  padding:20px 22px 18px;background:rgba(16,28,44,.86);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);color:var(--tx);
  box-shadow:0 30px 80px #000a;opacity:1;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease),display .45s allow-discrete,overlay .45s allow-discrete}
[popover].tip:not(:popover-open){opacity:0;transform:translateY(30px) scale(.96)}
@starting-style{[popover].tip:popover-open{opacity:0;transform:translateY(30px) scale(.96)}}
.tip::backdrop{background:rgba(0,0,0,.35)}
.tip h4{font:700 1.15rem var(--fh);margin-bottom:6px;color:var(--cy)}
.tip p{color:#c4d2dc;font-size:.98rem}
.hint{margin-top:1.4rem;font-size:.85rem;color:#8a9aa8;display:flex;gap:.5rem;align-items:center}
.hint::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cy);color:#03202b;font:700 14px var(--fh)}

/* ---------- Szenen ---------- */
/* Hero */
#hero .stage{display:grid;place-items:center}
#hero .ph{--pw:min(300px,62vw,calc(68svh / 2.09))}
#hero .title{position:absolute;top:12svh;left:0;right:0;text-align:center}
#hero .sub{position:absolute;top:5svh;left:0;right:0;text-align:center;font:500 clamp(1.1rem,2.4vw,1.9rem) var(--fh);color:var(--tx)}
#hero .scroll{position:absolute;top:62svh;left:0;right:0;text-align:center;font-size:.85rem;color:var(--mu);letter-spacing:.1em}
#hero .scroll::after{content:"";display:block;width:1px;height:36px;margin:10px auto 0;background:linear-gradient(var(--cy),transparent);animation:hint 1.8s infinite}
@keyframes hint{from{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}to{transform:scaleY(0);transform-origin:bottom}}
#hero .end{position:absolute;inset:0;background:linear-gradient(transparent 40%,#000 100%);pointer-events:none}

/* Werkzeuge */
.tool{position:absolute;left:50%;top:50%;translate:-50% -50%;font:600 clamp(1rem,2.2vw,1.7rem) var(--fh);color:#8a9aa8;white-space:nowrap}

/* Zeitleiste */
.tl{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:2vw;width:min(1200px,88vw);margin-top:9vh;text-align:left}
.tl>div{border-top:3px solid #24303b;padding-top:1rem}
.tl b{display:block;font:700 clamp(1.3rem,2.4vw,2.2rem) var(--fh)}
.tl span{color:#8a9aa8;font-size:clamp(.9rem,1.3vw,1.2rem)}
.tl.lit{position:absolute;inset:0;margin:0;--k:wipeX}
.tl.lit>div{border-color:var(--cy)}.tl.lit>div:last-child{border-color:var(--or)}
.tl.lit span{color:var(--tx)}
.tlw{position:relative}

/* Karten neben Telefon */
.fly{position:absolute;width:min(360px,70vw);padding:18px 20px;border-radius:22px;background:rgba(13,32,50,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-left:4px solid var(--c,var(--cy));box-shadow:0 30px 60px -20px #000;text-align:left;font-size:.92rem;color:var(--mu);z-index:5}
.fly b{display:block;color:var(--tx);font:700 1.05rem var(--fh);margin-bottom:2px}

/* Mitteilung (iOS) */
.nt{width:min(420px,86vw);text-align:left;padding:16px 18px;border-radius:26px;background:rgba(44,48,56,.78);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px -20px #000c;font-size:.95rem;color:#c7ccd3}
.nt header{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;letter-spacing:.06em;color:#9aa3ad;margin-bottom:6px}
.nt header span{display:flex;align-items:center;gap:8px}
.nt header span::before{content:"";width:20px;height:20px;border-radius:6px;background:radial-gradient(circle at 40% 35%,#C9F2FF,#3CC8F5 40%,#5B5BEF 80%)}
.nt b{display:block;color:#fff;font-size:1.02rem;margin-bottom:2px}
.nt .row2{display:flex;gap:8px;margin-top:12px}.nt .row2 i{flex:1;text-align:center;font-style:normal;font-weight:600;color:#fff;background:rgba(255,255,255,.12);padding:9px;border-radius:14px}
.stack{display:grid;gap:12px;justify-items:center}

/* CarPlay */
.cp{width:min(1040px,88vw);aspect-ratio:2.3/1;border-radius:clamp(14px,2.4vw,30px);background:#05080d;border:clamp(5px,.9vw,11px) solid #14171c;box-shadow:0 60px 140px -40px rgba(92,216,248,.35),inset 0 0 0 1px #2a2f37;
  display:grid;grid-template-columns:7% 1fr;overflow:hidden;container-type:inline-size;font-size:max(9px,1.5cqw);text-align:left;position:relative}
.pin{position:absolute;left:var(--x);top:var(--y);width:2.4cqw;aspect-ratio:1;translate:-50% -100%;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--c);box-shadow:0 0 0 .35cqw #05080d,0 0 2cqw var(--c)}
.legend{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem;font-size:.9rem;color:var(--mu)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:7px}
.wave{display:flex;gap:4px;align-items:center;height:42px;justify-content:center}
.wave i{width:5px;border-radius:3px;background:var(--cy);height:calc(var(--h) * 1px);animation:wv 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--h) * -37ms)}
@keyframes wv{to{transform:scaleY(.3)}}
.quote{font:500 clamp(1.1rem,2vw,1.6rem)/1.35 var(--fh);max-width:30ch;margin:1rem auto 0}

/* Dynamic Island groß */
.isl-big{width:min(560px,90vw);height:clamp(70px,9vw,104px);border-radius:99px;background:#000;border:1px solid #23262c;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(22px,3vw,40px);
  box-shadow:0 0 90px rgba(92,216,248,.25)}
.isl-big .l{font:700 clamp(.85rem,1.4vw,1.15rem) var(--fh);letter-spacing:.1em;color:var(--cy)}
.isl-big .r{font:700 clamp(1.5rem,3vw,2.4rem) var(--fh);font-variant-numeric:tabular-nums}
.isl-big small{display:block;color:var(--mu);font:500 .8rem var(--fb);letter-spacing:0}

/* Sprach-Angebot */
.words{font:600 clamp(1.4rem,3.4vw,2.8rem)/1.2 var(--fh);max-width:20ch;margin:0 auto}
.words span{display:inline-block}
.offer{margin:5vh auto 0;width:min(460px,88vw);text-align:left;padding:20px 22px;border-radius:24px;background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line)}
.offer .li{font-size:.95rem}.offer .li .n b{font-size:1rem}.offer .li .t{width:auto;font-size:1rem}

/* Chips allgemein */
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pill{padding:9px 16px;border-radius:99px;font-weight:600;font-size:.95rem;background:rgba(92,216,248,.12);color:var(--cy);border:1px solid rgba(92,216,248,.25)}
.pill.o{background:rgba(245,158,11,.12);color:var(--or);border-color:rgba(245,158,11,.3)}
.pill.v{background:rgba(167,139,250,.12);color:var(--vi);border-color:rgba(167,139,250,.3)}

/* Autopilot */
.ap2{width:min(1200px,88vw);text-align:left}
.ap2 h6{font:600 .9rem var(--fh);color:var(--mu);letter-spacing:.06em;margin:4vh 0 1rem}
.ap2 .tl{grid-template-columns:repeat(4,1fr);margin-top:0;width:100%}

/* Ringe groß */
.bigr{width:min(440px,70vw,46svh);aspect-ratio:1}
.bigr svg{width:100%;height:100%;transform:rotate(-90deg)}
.bigr circle{fill:none;stroke-linecap:round;stroke-width:9}

/* Service */
.svc{font:800 clamp(5rem,20vw,16rem)/1 var(--fh);letter-spacing:-.05em}

/* Flip-Karten (Einwände) */
.flips{display:grid;gap:14px;width:min(400px,86vw)}
.flip{position:relative;height:118px;border:0;background:none;perspective:900px;text-align:left}
.flip>span{position:absolute;inset:0;border-radius:22px;padding:16px 18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .8s var(--ease);
  border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:4px}
.flip .f{background:linear-gradient(180deg,#1a2230,#0e141d)}
.flip .b{background:linear-gradient(180deg,#0f2a3c,#0a1a28);transform:rotateY(180deg);border-color:rgba(92,216,248,.35)}
.flip[aria-pressed=true] .f{transform:rotateY(-180deg)}.flip[aria-pressed=true] .b{transform:none}
.flip small{font:600 .72rem var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.flip .b small{color:var(--cy)}
.flip strong{font:600 1.05rem/1.3 var(--fh)}
.flip .b strong{font:500 .95rem/1.4 var(--fb);color:#d6e3ea}

/* Radar */
.radar{position:relative;width:min(560px,86vw,56svh);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--line);box-shadow:0 0 120px rgba(94,233,164,.15)}
.radar .sweep{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(94,233,164,.35),transparent 22%);animation:spin 4s linear infinite;border-radius:50%}
.radar .ring{position:absolute;inset:var(--i);border-radius:50%;border:1px solid rgba(94,233,164,.18)}
@keyframes spin{to{transform:rotate(1turn)}}
.spot{position:absolute;left:var(--x);top:var(--y);width:9%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,rgba(255,255,255,.35) 20%,transparent 70%)}
.radar .cta{position:absolute;left:50%;bottom:9%;translate:-50% 0;padding:10px 20px;border-radius:99px;background:var(--cy2);color:#03202b;font-weight:700;white-space:nowrap}

/* Praxisschild */
.cam{position:relative;width:min(520px,88vw);aspect-ratio:4/3;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#2b2f36,#121418);border:1px solid #2a2f37}
.sign{position:absolute;left:14%;top:20%;width:72%;padding:6% 7%;border-radius:10px;background:linear-gradient(180deg,#e9edf1,#c9d0d7);color:#1d2a36;text-align:left;box-shadow:0 20px 40px #0008}
.sign b{display:block;font:700 clamp(1.1rem,2.6vw,1.8rem)/1.1 var(--fh)}
.sign span{font-size:clamp(.75rem,1.4vw,1rem)}
.scan{position:absolute;left:10%;right:10%;height:2px;background:var(--cy);box-shadow:0 0 18px 4px rgba(92,216,248,.6);animation:scan 2.4s ease-in-out infinite alternate}
@keyframes scan{from{top:18%}to{top:72%}}
.cornr{position:absolute;inset:12% 8%;border:2px solid transparent;border-image:linear-gradient(var(--cy),var(--cy)) 1;clip-path:polygon(0 0,18% 0,18% 3px,3px 3px,3px 18%,0 18%,0 0,82% 0,100% 0,100% 18%,calc(100% - 3px) 18%,calc(100% - 3px) 3px,82% 3px,82% 0,100% 82%,100% 100%,82% 100%,82% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 82%,100% 82%,0 82%,3px 82%,3px calc(100% - 3px),18% calc(100% - 3px),18% 100%,0 100%)}
.res{margin:-40px auto 0;position:relative;width:min(420px,84vw)}

/* Überall */
#ueberall .vis{--fan:15vw;width:100%;height:100%}
#ueberall .ph{position:absolute;--pw:min(270px,26vw,calc(70svh / 2.09))}
.wd{position:absolute;border-radius:7cqw;background:linear-gradient(160deg,rgba(13,32,50,.94),rgba(7,17,31,.94));border:1px solid rgba(92,216,248,.25);padding:4.5cqw;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -10px #000a;font-size:3.2cqw;color:var(--mu);transform-style:preserve-3d}
.home{position:absolute;inset:0;background:radial-gradient(90% 60% at 20% 10%,#1a4a70,transparent 70%),radial-gradient(80% 60% at 90% 80%,#3a2a7a,transparent 70%),#08131f}
.apps{position:absolute;left:7cqw;right:7cqw;top:128cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:5cqw 6cqw}
.apps i{aspect-ratio:1;border-radius:4.4cqw;background:var(--c,#ffffff1c)}
.lock{position:absolute;inset:0;background:radial-gradient(90% 60% at 80% 0%,#2A1F5C,transparent 70%),radial-gradient(80% 60% at 0% 90%,#123556,transparent 70%),#050b14;text-align:center}
.lock .clk{font:600 22cqw/1 var(--fh);margin-top:22cqw;letter-spacing:-.03em}
.la{position:absolute;left:4cqw;right:4cqw;bottom:20cqw;border-radius:7cqw;background:rgba(10,16,24,.82);padding:4.5cqw;text-align:left;border:1px solid var(--line)}

/* Funktionsübersicht */
.fx{width:min(1180px,92vw);text-align:left}
.fx-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:3vh 0 2.4vh}
.fx-bar button{border:1px solid var(--line);background:#ffffff08;padding:9px 16px;border-radius:99px;font-weight:600;font-size:.92rem;color:var(--mu)}
.fx-bar button[aria-pressed=true]{background:var(--cy2);color:#03202b;border-color:transparent}
.fx-bar input{flex:1 1 220px;min-width:0;background:#0b1622;border:1px solid var(--line);color:var(--tx);border-radius:99px;padding:10px 18px;font:inherit;font-size:.95rem}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.fx-grid article{position:relative;padding:18px 18px 16px;border-radius:20px;background:linear-gradient(180deg,#0d2032,#091624);border:1px solid var(--line);animation:fxIn .5s var(--ease) both}
.fx-grid h4{font:700 1.05rem var(--fh);margin-bottom:4px;padding-right:46px}
.fx-grid p{font-size:.9rem;color:var(--mu)}
.fx-grid em{position:absolute;top:14px;right:14px;font:700 .68rem var(--fh);letter-spacing:.08em;font-style:normal;padding:4px 8px;border-radius:99px;background:var(--gr);color:#04261a}
.fx-grid small{display:block;margin-top:8px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8a9aa8}
@keyframes fxIn{from{opacity:0;transform:translateY(12px)}}

/* Privat */
.lockic{width:clamp(80px,12vw,130px);margin:0 auto 4vh}
.pr4{display:grid;grid-template-columns:repeat(4,1fr);gap:3vw;width:min(1180px,90vw);margin-top:7vh;text-align:left}
.pr4 h4{font:700 clamp(1.1rem,1.7vw,1.5rem) var(--fh);margin:.7rem 0 .3rem}
.pr4 p{color:var(--mu);font-size:.95rem}
.pr4 i{display:block;width:34px;height:34px;border-radius:10px;background:rgba(92,216,248,.14);border:1px solid rgba(92,216,248,.35)}

/* Zahlen */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;width:min(1180px,90vw);text-align:left;margin-top:7vh}
.nums .num{font:700 clamp(3rem,6vw,5.2rem)/1 var(--fh);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.nums h4{font:600 1.1rem var(--fh);margin:.8rem 0 .2rem}.nums p{color:var(--mu);font-size:.95rem}
.foot{margin-top:7vh;font-size:.8rem;color:#8a9aa8}

/* Stand / Schritte */
.stand{width:min(1000px,90vw);text-align:left;margin-top:5vh}
.stand div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;border-top:1px solid #1d262f;padding:1.2rem 0;flex-wrap:wrap}
.stand b{font:600 clamp(1.1rem,2vw,1.6rem) var(--fh)}.stand span{font-weight:600;color:var(--c)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;width:min(1180px,90vw);text-align:left;margin-top:7vh}
.steps b{font:800 clamp(3rem,7vw,6rem)/1 var(--fh)}.steps h4{font:700 1.5rem var(--fh);margin:.6rem 0 .3rem}.steps p{color:var(--mu)}

/* Nacht-Stapel */
.deck{position:relative;width:min(400px,86vw);height:200px;margin:6vh auto 0;touch-action:pan-y}
.sw{position:absolute;inset:0;padding:22px 24px;border-radius:26px;background:linear-gradient(180deg,#1b2433,#0f1621);border:1px solid #2a3442;text-align:left;
  box-shadow:0 30px 70px -20px #000;transition:transform .55s var(--ease),opacity .4s;cursor:grab;user-select:none;-webkit-user-select:none}
.sw:nth-last-child(2){transform:translateY(-14px) scale(.95);opacity:.75}
.sw:nth-last-child(3){transform:translateY(-28px) scale(.9);opacity:.45}
.sw:nth-last-child(n+4){opacity:0;transform:translateY(-28px) scale(.9)}
.sw b{display:block;font:700 1.25rem var(--fh);margin-bottom:6px}
.sw p{color:var(--mu)}
.sw small{position:absolute;bottom:18px;left:24px;font-size:.78rem;color:#8a9aa8}
.sw.drag{transition:none;cursor:grabbing}
.dbtn{display:flex;gap:12px;justify-content:center;margin-top:22px}
.btn2{border:1px solid var(--line);background:#ffffff0a;padding:10px 20px;border-radius:99px;font-weight:600}
.btn2.p{background:var(--gr);color:#04261a;border-color:transparent}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw 4vw;width:min(1180px,90vw);text-align:left;margin-top:6vh}
.grid3 div{border-top:1px solid #222b35;padding-top:1.1rem}
.grid3 h4{font:700 1.3rem var(--fh);margin-bottom:.3rem}.grid3 p{color:var(--mu);font-size:.95rem}

/* Orb */
.orb{position:relative;width:min(420px,70vw);aspect-ratio:1;margin:0 auto}
.orb>*{position:absolute;left:50%;top:50%;border-radius:50%;translate:-50% -50%}
.orb .c{width:34%;aspect-ratio:1;background:radial-gradient(circle at 40% 35%,#C9F2FF,#3CC8F5 40%,#5B5BEF 75%,#1A0F3A);box-shadow:0 0 120px 30px rgba(91,91,239,.45);animation:breath 5s ease-in-out infinite}
.orb .o{width:var(--s);aspect-ratio:1;border:1.5px solid var(--bc);animation:spin var(--d) linear infinite var(--dir,normal)}
.orb .o::after{content:"";position:absolute;width:10px;height:10px;top:-5px;left:calc(50% - 5px);border-radius:50%;background:var(--bc);box-shadow:0 0 14px var(--bc)}
@keyframes breath{50%{scale:1.07}}

/* Navigation */
.bar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--sp,0));z-index:50}
@supports (animation-timeline:scroll()){.bar{animation:bar linear both;animation-timeline:scroll(root)}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nav{position:fixed;right:18px;top:50%;translate:0 -50%;display:grid;gap:12px;z-index:50}
.nav a{display:block;width:9px;height:9px;border-radius:50%;background:#ffffff33;transition:transform .3s,background .3s;position:relative}
.nav a.on{background:var(--cy);transform:scale(1.35)}
.nav a span{position:absolute;right:20px;top:50%;translate:0 -50%;white-space:nowrap;font-size:.78rem;color:var(--mu);opacity:0;transition:opacity .25s;pointer-events:none}
.nav a:hover span,.nav a:focus-visible span{opacity:1}
.keys{position:fixed;right:18px;bottom:14px;font-size:.72rem;color:#8a9aa8;z-index:50}
.keys kbd{font:inherit;border:1px solid #2a3440;border-radius:5px;padding:1px 5px}

/* ---------- Handy / Hochformat ---------- */
@media (max-width:820px),(orientation:portrait) and (max-width:1100px){
  :root{--pw:min(340px,56vw,calc(50svh / 2.09))}
  .split,.split.rev{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;justify-items:center;text-align:center;padding:9svh 18px 3svh;gap:3svh}
  .split.rev>.tx{order:0}
  .tx{max-width:34rem}.tx .lead{margin-inline:auto;font-size:1rem}
  .h2{font-size:clamp(2rem,8.4vw,3.4rem)}
  .tl{grid-template-columns:1fr 1fr;row-gap:3vh}
  .tl.lit{--k:wipeY}
  .ap2 .tl{grid-template-columns:1fr 1fr}
  .fly{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:min(340px,86vw);padding:12px 16px;font-size:.85rem}
  .flys{display:grid;gap:8px;position:absolute;left:0;right:0;bottom:3svh;justify-items:center}
  .nav,.keys{display:none}
  .pr4,.nums,.steps,.grid3{grid-template-columns:1fr 1fr;gap:6vw}
  #ueberall .vis{--fan:23vw}
  #ueberall .ph{--pw:min(300px,40vw,calc(46svh / 2.09))}
  .flips .flip{height:104px}
}
@media (max-width:520px){.pr4,.nums,.steps,.grid3{grid-template-columns:1fr}.nums .num{font-size:3.4rem}}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .a,.rv{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .tool{display:none}
  .scene{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;padding:6vh 0}
  .split{height:auto;min-height:88svh}
  .aur,.hs::before,.wave i,.radar .sweep,.scan,.orb .c,.orb .o,#hero .scroll::after{animation:none}
  #hero .end{display:none}
  .sw,.flip>span,[popover].tip{transition:none}
}
/* 3D-Telefone: keine eigenen Ebenen im Bildschirm, sonst scheint die Vorderseite durch die Rückseite */
.d3 .tab{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0d1b2b}
.aktiv .d3.a{will-change:transform} /* will-change:opacity würde den 3D-Kontext flach drücken */
.stage.center{height:100svh}
.cp{width:min(1040px,88vw,calc(50svh * 2.3))}
.offer .li{padding:.7rem 0;gap:1rem}.offer .li .n small{font-size:.85rem}.offer .li .t{width:2.6rem;font-size:1rem}
.offer .dt{font-size:.72rem}
.pane .hs{z-index:27}
.wd{border-radius:calc(var(--pw) * .07);padding:calc(var(--pw) * .045);font-size:calc(var(--pw) * .032)}
.scr{text-align:left;overflow:clip}
@media (max-width:820px),(orientation:portrait) and (max-width:1100px){
  .flys{left:50%;right:auto;width:min(340px,90vw);translate:-50% 0}
  .flys .fly{width:100%}
  .flips{grid-template-columns:1fr 1fr;width:min(420px,92vw);gap:10px}
  .flips .flip{height:92px}
  .flip>span{padding:10px 12px;border-radius:16px}
  .flip strong{font-size:.86rem}.flip .b strong{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  #hero .stage{display:flex;flex-direction:column;align-items:center;gap:3vh}
  #hero .title,#hero .sub{position:static}
  #hero .scroll,#werkzeuge .h2.mu,#service .center.abs{display:none}
  #ueberall .vis{position:relative;inset:auto;display:flex;justify-content:center;gap:6vw;padding-top:4vh}
  #ueberall .ph{position:relative}
  #kunde .lead{margin-top:3vh!important}
}
.wd{translate:0 0 3px}

/* ---------- Build 7–9: Keynote-Ebene (Zoom, Highlight, Ein-/Rausschwenken) ---------- */
@keyframes txIO{0%,4%{opacity:0;transform:translateY(5vh) scale(.96)}16%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6vh) scale(.96)}}
@keyframes zoomTo{0%,34%{transform:none}48%,64%{transform:scale(var(--zs,1.6))}76%,100%{transform:none}}
@keyframes hlOn{0%,42%{opacity:0;transform:scale(1.3)}50%,64%{opacity:1;transform:none}72%,100%{opacity:0;transform:none}}
@keyframes paneLate{0%,64%{transform:translateY(102%)}78%,100%{transform:none}}
@keyframes mtr{0%,18%{transform:scaleX(0)}46%,100%{transform:none}}
@keyframes typ{0%,8%{width:0}26%,100%{width:8.4ch}}
@keyframes xlFly{0%{transform:translate(-26vw,6vh) rotateY(50deg) rotateX(14deg) scale(.9);opacity:0}10%{opacity:1}24%{transform:translate(-21vw,0) rotateY(20deg) rotateX(4deg);opacity:1}40%,100%{transform:translate(0,0) translateZ(-180px) scale(.3);opacity:0}}
@keyframes pvIn{0%,6%{opacity:0;transform:translate(calc(var(--x) * 1.5),var(--y)) rotateY(var(--ry)) scale(.8)}20%,40%{opacity:1;transform:translate(var(--x),var(--y)) rotateY(var(--ry)) translateZ(60px)}56%,100%{opacity:0;transform:translate(0,var(--ty,0)) scale(.35)}}
@keyframes wig{from{rotate:-.7deg}to{rotate:.7deg}}
@keyframes hlP{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.16)}}

.zm{transform-style:preserve-3d;transform-origin:var(--fx,50%) var(--fy,50%)}
/* Highlight-Ring: dunkelt den restlichen Bildschirm ab, Glow + Puls */
.hl{position:absolute;inset:-1.4cqw;border-radius:5.6cqw;z-index:28;pointer-events:none;--k:hlOn;
  box-shadow:0 0 0 .7cqw var(--cy),0 0 7cqw 1.4cqw rgba(92,216,248,.55),0 0 0 200cqw rgba(2,8,16,.6)}
.hl::after{content:"";position:absolute;inset:-1cqw;border-radius:inherit;border:.5cqw solid var(--cy);animation:hlP 1.8s var(--ease) infinite}
.hl.p{border-radius:5cqw}

/* Segment-Schalter, Regler */
.seg{display:inline-flex;margin-top:1.6rem;padding:4px;border-radius:99px;background:#ffffff0d;border:1px solid var(--line)}
.seg button{border:0;background:none;padding:9px 18px;border-radius:99px;font-weight:600;font-size:.95rem;color:var(--mu);transition:background .3s,color .3s}
.seg button[aria-pressed=true]{background:var(--cy2);color:#03202b}
.seg button:focus-visible,.zp input:focus-visible{outline:3px solid #fff;outline-offset:3px}
.va[data-g=phy] .arzt,.va[data-g=arzt] .phy{display:none}
.zp{margin-top:1.6rem;display:grid;gap:.5rem;max-width:22rem;font-size:.95rem;color:var(--mu)}
.zp b{color:var(--tx);font:700 1.4rem var(--fh)}
.zp input{accent-color:var(--cy2);width:100%}
.eq{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.2rem}
.eq span{padding:7px 13px;border-radius:99px;background:#ffffff0a;border:1px solid var(--line);font:600 .9rem var(--fh)}
.eq span:last-child{background:rgba(92,216,248,.14);color:var(--cy);border-color:rgba(92,216,248,.35)}

/* Telefon-Bausteine */
.mtr{height:2.4cqw;border-radius:2cqw;background:#ffffff14;overflow:hidden}
.mtr i{display:block;height:100%;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,var(--or),var(--gr));transform-origin:left}
.typ{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;color:var(--tx)}
.srch{padding:2.6cqw 3.6cqw;margin-top:1cqw;color:var(--mu)}
.srch::after{content:"";display:inline-block;width:.4cqw;height:3.6cqw;background:var(--cy);margin-left:.4cqw;vertical-align:middle;animation:hint 1s steps(2) infinite}
.qty{font:700 3.2cqw var(--fh);padding:.8cqw 2.4cqw;border-radius:3cqw;background:#ffffff12;border:1px solid var(--line)}
.kp{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;margin-top:3cqw}
.kp>div{position:relative;background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:4cqw;padding:3cqw}
.kp b{display:block;font:700 7cqw/1.05 var(--fh);font-variant-numeric:tabular-nums}
.kp small{font-size:2.7cqw;color:var(--mu)}
.bars{display:flex;align-items:end;gap:1.1cqw;height:13cqw;margin:1.6cqw 0}
.bars i{flex:1;height:var(--h);border-radius:1cqw 1cqw 0 0;background:linear-gradient(var(--cy),rgba(49,201,245,.25))}
.df{border-left:1.2cqw solid var(--c);padding-left:2.4cqw}
.df.x b{text-decoration:line-through;color:var(--mu)}
.toast{position:absolute;left:5cqw;right:5cqw;bottom:21cqw;z-index:12;display:flex;justify-content:space-between;align-items:center;padding:3.4cqw 4cqw;border-radius:5cqw;background:#1d2a3a;border:1px solid var(--line);font-size:3.3cqw;box-shadow:0 4cqw 10cqw #000a}
.toast b{color:var(--cy)}
.wg .cd{animation:wig .3s ease-in-out infinite alternate}
.wg .cd:nth-of-type(even){animation-delay:-.15s}
.wg .cd::before{content:"−";position:absolute;left:-1.4cqw;top:-1.4cqw;width:5cqw;height:5cqw;border-radius:50%;background:#5d6b78;color:#fff;display:grid;place-items:center;font:700 4cqw/1 var(--fh)}
.done{position:absolute;right:5cqw;top:15.5cqw;font:700 3.2cqw var(--fb);color:var(--cy)}

/* Excel-Blatt / Bericht fliegen ins Telefon */
.vis>.ph,.vis>.zm,.vis>.xl,.vis>.pv{grid-area:1/1}
.xl{width:min(340px,36vw);padding:14px;border-radius:14px;background:#f2f5f7;color:#1d2a36;font-size:.74rem;box-shadow:0 40px 80px -20px #000;z-index:4;text-align:left}
.xl .xh{font:700 .82rem var(--fh);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.xl .xh::before{content:"";width:16px;height:16px;border-radius:4px;background:var(--c,#1f7a46)}
.xl .gr{display:grid;grid-template-columns:1.5fr 1fr .9fr;border-top:1px solid #cdd5dc;border-left:1px solid #cdd5dc}
.xl .gr span{padding:4px 6px;border-right:1px solid #cdd5dc;border-bottom:1px solid #cdd5dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl .gr span:nth-child(-n+3){background:#dfe7ee;font-weight:700}
.xl i{display:block;height:7px;border-radius:4px;background:#cdd5dc;margin:7px 0;width:var(--w,100%)}

/* Vorschaukarten aus „Mehr“ */
.pv{width:min(230px,24vw);padding:16px 18px;border-radius:22px;background:linear-gradient(160deg,rgba(13,32,50,.96),rgba(7,17,31,.96));border:1px solid rgba(92,216,248,.3);
  box-shadow:0 30px 60px -20px #000,0 0 40px rgba(92,216,248,.12);text-align:left;font-size:.85rem;color:var(--mu);z-index:6}
.pv b{display:block;color:var(--tx);font:700 1.05rem var(--fh);margin:2px 0}
.pv small{font:600 .68rem var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--cy)}

/* Für dich vorbereitet – Stapel */
.deck{perspective:1100px;height:210px}
.sw{border-top:3px solid var(--c,var(--cy))}
.sw .k{position:static;display:block;font:600 .74rem var(--fh);letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--cy));margin-bottom:10px}
.sw::after{position:absolute;top:18px;right:20px;padding:4px 10px;border-radius:8px;font:700 .8rem var(--fh);letter-spacing:.1em;opacity:0;transition:opacity .2s}
.sw.ok::after{content:"ERLEDIGT";opacity:1;color:var(--gr);border:2px solid var(--gr)}
.sw.no::after{content:"ÜBERSPRINGEN";opacity:1;color:var(--or);border:2px solid var(--or)}
.dres{margin-top:14px;font-size:.88rem;color:var(--mu)}

/* Sofortstart + „Neu“-Anleitung */
.sof{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6vw;align-items:center;width:min(1180px,92vw);text-align:left}
.sof .lead{margin-inline:0}
.coach{display:grid;justify-items:center;gap:16px}
.coach .ph{--pw:min(270px,60vw,calc(62svh / 2.09))}
.cm{position:absolute;z-index:28;border-radius:4cqw;pointer-events:none;opacity:0;transition:all .6s var(--ease);
  box-shadow:0 0 0 .7cqw var(--cy),0 0 7cqw 1.4cqw rgba(92,216,248,.55),0 0 0 200cqw rgba(2,8,16,.6)}
.cm.on{opacity:1}
.nb{font:700 2.4cqw var(--fh);letter-spacing:.06em;padding:.8cqw 2cqw;border-radius:9cqw;background:var(--gr);color:#04261a}
.ctip{width:min(300px,86vw);min-height:92px;padding:14px 16px;border-radius:20px;background:rgba(16,28,44,.86);border:1px solid var(--line);font-size:.9rem;color:#c4d2dc;text-align:left}
.ctip b{display:block;color:var(--cy);font:700 1rem var(--fh);margin-bottom:2px}

@media (max-width:820px),(orientation:portrait) and (max-width:1100px){
  .sof{grid-template-columns:1fr;text-align:center}.sof .lead{margin-inline:auto}
  .xl{width:min(260px,62vw);font-size:.66rem}
  .pv{width:min(170px,40vw);padding:10px 12px;font-size:.72rem}.pv b{font-size:.88rem}
  .seg,.zp,.eq{margin-top:.9rem}.zp{margin-inline:auto}.eq{justify-content:center}
  .tx .seg button{padding:7px 14px;font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .wg .cd,.hl::after,.srch::after{animation:none}
  .xl,.pv{display:none}
  .hl{opacity:0!important}
  .cm{transition:none}
}
@media (prefers-reduced-motion:reduce){.pane.late{display:none}}

/* ---------- Build 9: Neues Aussehen, Stapel im iPhone, Nähe, Aktionen, Unterschrift, Jahresziel ---------- */
.scr{color:var(--tx);transition:background-color .6s var(--ease)}
.scr.hell{--app:#EEF2F6;--card:#fff;--card2:#F7F9FB;--tx:#0F1C28;--mu:#5B6F80;--line:rgba(16,32,46,.10);--cy:#046C92}
.scr.hell::before{background:radial-gradient(70% 40% at 20% 0%,#DCE8F3,transparent 70%)}
.scr.hell .tab{background:rgba(255,255,255,.6)}
.tab .on{color:var(--cy)}
.tab.glas{background:rgba(24,44,66,.42);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4cqw 10cqw -2cqw #000a}
.tab .mk{position:absolute;left:1.5%;top:9%;bottom:9%;width:19.4%;border-radius:99px;background:rgba(92,216,248,.16);box-shadow:inset 0 0 0 1px rgba(92,216,248,.4),0 0 4cqw rgba(92,216,248,.25)}
.tab span{position:relative;z-index:1}
.tab .neu::after{content:"";position:absolute;top:-.6cqw;right:-.4cqw;width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--gr);box-shadow:0 0 2cqw var(--gr);animation:breath 1.6s ease-in-out infinite}
@keyframes tabMk{0%,46%{transform:none}54%{transform:translateX(100%)}62%{transform:translateX(200%)}70%{transform:translateX(300%)}78%,100%{transform:translateX(400%)}}
.boot{position:absolute;inset:0;z-index:29;display:grid;place-content:center;justify-items:center;gap:1.6cqw;
  background:linear-gradient(rgba(92,216,248,.07) 1px,transparent 1px) 0 0/8cqw 8cqw,linear-gradient(90deg,rgba(92,216,248,.07) 1px,transparent 1px) 0 0/8cqw 8cqw,#050b14}
.boot svg{width:56cqw;overflow:visible}
.boot svg circle{transform-box:fill-box;transform-origin:center}
.boot b{font:700 9cqw var(--fh);letter-spacing:.16em}
.boot small{font-size:3.4cqw;color:var(--mu)}
@keyframes bootOut{0%,40%{opacity:1;visibility:visible}50%,100%{opacity:0;visibility:hidden}}
@keyframes bootDraw{0%,6%{stroke-dashoffset:1}24%,100%{stroke-dashoffset:0}}
@keyframes bootFill{0%,22%{transform:scale(0);opacity:0}30%,100%{transform:none;opacity:1}}

/* Stapel im iPhone */
.ph .deck{width:auto;height:44cqw;margin:10cqw 0 0;perspective:900px}
.ph .sw{padding:4cqw 4.4cqw;border-radius:5cqw;font-size:3.3cqw;box-shadow:0 4cqw 8cqw -3cqw #000}
.ph .sw b{font-size:4.8cqw;margin-bottom:1cqw}
.ph .sw p{line-height:1.35}
.ph .sw .k{font-size:2.6cqw;margin-bottom:2cqw;letter-spacing:.12em}
.ph .sw::after{top:3.4cqw;right:3.4cqw;font-size:2.6cqw;padding:.6cqw 1.6cqw;border-radius:1.6cqw}
#nacht .coach .ph{--pw:min(300px,64vw,calc(62svh / 2.09))}

/* In der Nähe */
.me{position:absolute;left:50%;top:55%;width:3.6cqw;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 .9cqw #fff,0 0 6cqw #3b82f6}
.rad{position:absolute;left:50%;top:55%;width:74cqw;aspect-ratio:1;margin:-37cqw 0 0 -37cqw;border-radius:50%;background:radial-gradient(rgba(92,216,248,.2),rgba(92,216,248,.04) 70%);border:1px solid rgba(92,216,248,.55)}
@keyframes radIn{0%,8%{transform:scale(0);opacity:0}28%,100%{transform:none;opacity:1}}


/* Verkaufsaktion */
.akt{border-color:rgba(244,114,182,.5);background:linear-gradient(180deg,#2c1426,#170b17)}
@keyframes pop{0%,26%{opacity:0;transform:scale(.6) translateY(8cqw)}33%{opacity:1;transform:scale(1.07)}37%,100%{opacity:1;transform:none}}
#aktionen .fly{right:auto}

/* Angebot + Unterschrift */
.offers{display:flex;gap:2vw;justify-content:center;align-items:stretch;flex-wrap:wrap;margin-top:5vh}
.offers .offer{margin:0}
.offer .dt{font-size:.72rem}
.sig svg{width:100%;height:auto;max-height:76px;margin:.3rem 0}
.sm2{font-size:.85rem;color:var(--mu);line-height:1.45}
@keyframes sign{0%,56%{stroke-dashoffset:1}74%,100%{stroke-dashoffset:0}}

/* Jahresbilanz: Belege fliegen zum Kunden */
.xl{position:relative;overflow:hidden}
.xl .scan{left:4%;right:4%}
.vis>.blg{grid-area:1/1;z-index:7}
.blg{padding:6px 12px;border-radius:99px;background:rgba(10,40,30,.9);border:1px solid rgba(94,233,164,.55);color:var(--gr);font:600 .78rem var(--fh);white-space:nowrap;box-shadow:0 0 24px rgba(94,233,164,.3)}
@keyframes blgFly{0%,24%{opacity:0;transform:translate(-21vw,var(--y)) scale(.8)}28%{opacity:1}44%{opacity:1;transform:translate(0,var(--ty)) scale(.9)}50%,100%{opacity:0;transform:translate(0,var(--ty)) scale(.4)}}
@keyframes blgFly2{0%,28%{opacity:0;transform:translate(-21vw,var(--y)) scale(.8)}32%{opacity:1}48%{opacity:1;transform:translate(0,var(--ty)) scale(.9)}54%,100%{opacity:0;transform:translate(0,var(--ty)) scale(.4)}}
@keyframes blgFly3{0%,32%{opacity:0;transform:translate(-21vw,var(--y)) scale(.8)}36%{opacity:1}52%{opacity:1;transform:translate(0,var(--ty)) scale(.9)}58%,100%{opacity:0;transform:translate(0,var(--ty)) scale(.4)}}
.jz b span{font-size:8cqw}

/* Typenschild */
.plt{position:relative;width:22cqw;flex:none;padding:2cqw;border-radius:2cqw;background:linear-gradient(180deg,#e9edf1,#c9d0d7);overflow:hidden}
.plt b{display:block;font:700 2.6cqw var(--fh);color:#1d2a36;letter-spacing:.1em}
.plt i{display:block;height:1.2cqw;border-radius:1cqw;background:#9aa6b2;margin-top:1.2cqw}

/* Erleichtert-Wand, Funktionswand, Schluss */
.ez{grid-template-columns:repeat(4,1fr);gap:2.4vw 2.6vw}
.ez div{border-top:2px solid var(--c)}
.ez h4{font-size:1.1rem}.ez p{font-size:.88rem}
.fx-grid article{animation-delay:calc(var(--i,0) * 35ms);transition:translate .35s var(--ease),border-color .35s}
.fx-grid article:hover{translate:0 -4px;border-color:rgba(92,216,248,.45)}
.cta2{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4vh}
.cta2 span{padding:10px 18px;border-radius:99px;border:1px solid rgba(92,216,248,.35);background:rgba(92,216,248,.1);font-weight:600;font-size:.95rem}

@media (max-width:820px),(orientation:portrait) and (max-width:1100px){
  .ez{grid-template-columns:1fr 1fr;gap:5vw}
  .offers{gap:10px;margin-top:2.4vh}
  .offer{padding:12px 16px}.offer .li{padding:.4rem 0}
  .sig svg{max-height:46px}
  .words{font-size:clamp(1.3rem,6vw,2rem)}
  #nacht .coach .ph{--pw:min(280px,66vw,calc(60svh / 2.09))}
  #design .tx .pills{display:none}
}
@media (prefers-reduced-motion:reduce){
  .boot,.blg{display:none}
  .tab .neu::after{animation:none}
  .fx-grid article{animation:none}
}
/* Bildschirmfotos: ?szene=… zeigt nur diese Szene */
.shot main>section:not(.ziel){display:none}
.shot .ziel.scene{height:100svh}
.shot .ziel .a{animation-timeline:auto;animation-range:normal;animation-play-state:paused;animation-delay:calc(var(--p,0) * -1s)}
.shot .rv{animation:none;opacity:1;transform:none}
#carplay .cp{width:min(1040px,88vw,calc(42svh * 2.3));margin-top:3vh!important}
#carplay .quote{font-size:clamp(1rem,1.6vw,1.3rem);max-width:44ch}
#carplay .legend{margin-top:1rem}
@media (max-width:820px),(orientation:portrait) and (max-width:1100px){
  .split.rev>.vis{order:1}
  .scene .tx .lead{font-size:.9rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  #nacht .h1{font-size:clamp(2.2rem,10vw,3rem)!important}
  #zahlen .big{font-size:clamp(3.6rem,19vw,6rem)}
}

/* Lichtkante: wandernder Glanz – nur am Telefon der aktiven Szene */
@property --lk{syntax:'<angle>';inherits:false;initial-value:0deg}
.aktiv .ph>.fr::after{content:"";position:absolute;inset:calc(var(--ti) * -1);border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--lk),transparent 0 62%,rgba(92,216,248,.9) 72%,#fff 75%,rgba(167,139,250,.9) 78%,transparent 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:lk 6s linear infinite}
@keyframes lk{to{--lk:360deg}}

/* Partikel hinter allem */
#funken{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55}
main{position:relative;z-index:1}

/* Zahlenwand */
#zahlen .wall{display:grid;grid-template-columns:repeat(4,1fr);gap:3vw;width:min(1240px,92vw);margin-top:6vh;text-align:left}
#zahlen .big{display:block;font:700 clamp(3.4rem,8.4vw,8rem)/.95 var(--fh);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
#zahlen h4{font:600 1.05rem var(--fh);margin-top:.6rem}#zahlen p{color:var(--mu);font-size:.9rem}

/* Weicher Übergang ins helle Kapitel */
#vision{background:linear-gradient(#000 0%,#F5F5F7 28%,#F5F5F7 72%,#000 100%)!important;min-height:160svh}
@media (max-width:820px){#zahlen .wall{grid-template-columns:1fr 1fr;gap:6vw}}
@media (prefers-reduced-motion:reduce){.ph>.fr::after{animation:none}#funken{display:none}}
@media (max-width:820px),(orientation:portrait) and (max-width:1100px){
  .zm{--zs:1.08!important}
  .cp .hs{font-size:15px}.cp .hs::before{inset:11px}
}

/* Endlos-Animationen nur in der sichtbaren Szene */
main>section:not(.aktiv) :is(.aur,.wave i,.radar .sweep,.scan,.orb .c,.orb .o,.wg .cd),
main>section:not(.aktiv) .hs::before,main>section:not(.aktiv) .hl::after,main>section:not(.aktiv) .srch::after,main>section:not(.aktiv) .tab .neu::after{animation-play-state:paused}
/* Handy / Touch: kein backdrop-filter (Grafikspeicher), stattdessen dichtere Flächen */
@media (pointer:coarse),(max-width:820px){
  .tab,.tab.glas,.fly,.nt,.wd,[popover].tip{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .tab{background:rgba(13,27,43,.96)}.tab.glas{background:rgba(24,44,66,.94)}.scr.hell .tab{background:rgba(255,255,255,.94)}
  .fly{background:rgba(13,32,50,.96)}.nt{background:rgba(44,48,56,.96)}[popover].tip{background:rgba(16,28,44,.98)}
  #funken{display:none}
}
/* Handy / Touch: flache 2D-Schwenks statt 3D, keine Ebenen-Vorabreservierung, keine Dauer-Lichtkante (Stabilität vor Effekt) */
@media (pointer:coarse),(max-width:820px){
  .stage{perspective:none}
  .vis,.zm,.ph.d3,.wd{transform-style:flat}
  .ph>.bk,.ph>.ly{display:none}
  .d3>.fr,.d3>.kn,.wd{transform:none;translate:none}
  .aktiv .a,.aktiv .d3.a{will-change:auto}
  .aur{animation:none}
  .aktiv .ph>.fr::after{animation:none}
  @keyframes swing{0%{transform:translateX(14vw) scale(.88);opacity:0}10%{opacity:1}32%,86%{transform:none;opacity:1}100%{transform:translateX(-10vw) scale(.88);opacity:0}}
  @keyframes swingL{0%{transform:translateX(-14vw) scale(.88);opacity:0}10%{opacity:1}32%,86%{transform:none;opacity:1}100%{transform:translateX(10vw) scale(.88);opacity:0}}
  @keyframes heroPhone{0%{transform:translateY(60vh) rotate(-10deg) scale(.8)}36%{transform:translateY(0) rotate(-3deg) scale(1)}52%{transform:none}100%{transform:scale(var(--zoom,4))}}
  @keyframes fanL{0%{transform:scale(.92)}46%,100%{transform:translateX(calc(var(--fan) * -1)) scale(.94)}}
  @keyframes fanR{0%{transform:scale(.7);opacity:0}20%{opacity:1}46%,100%{transform:translateX(var(--fan)) scale(.94);opacity:1}}
  @keyframes wPop{0%,46%{transform:none}76%,100%{transform:scale(1.08)}}
  @keyframes cpIn{0%{transform:translateY(30vh) scale(.72);opacity:0}6%{opacity:1}16%,100%{transform:none;opacity:1}}
  @keyframes xlFly{0%{transform:translate(-26vw,6vh) scale(.9);opacity:0}10%{opacity:1}24%{transform:translate(-21vw,0);opacity:1}40%,100%{transform:scale(.3);opacity:0}}
  @keyframes pvIn{0%,6%{opacity:0;transform:translate(calc(var(--x) * 1.5),var(--y)) scale(.8)}20%,40%{opacity:1;transform:translate(var(--x),var(--y))}56%,100%{opacity:0;transform:translate(0,var(--ty,0)) scale(.35)}}
  @keyframes toolFly{0%,6%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:1}46%,100%{transform:translate(0,0) scale(.2);opacity:0}}
}
/* Handy: Telefon füllt genau den Platz unter dem Text (nichts abgeschnitten), Info-Karten kompakt darunter statt darüber */
@media (max-width:820px),(orientation:portrait) and (max-width:1100px){
  .split>.vis{justify-self:stretch;align-self:stretch;min-height:0;width:100%;container-type:size;--pw:min(340px,64vw,calc(100cqh / 2.09))}
  .split>.vis:has(.flys){padding-bottom:var(--flyh,62px)}
  .split>.vis:has(.fly + .fly){--flyh:118px}
  .flys{bottom:0;gap:6px}
  .fly{padding:7px 12px;font-size:.78rem;line-height:1.3;border-radius:14px;border-left-width:3px;box-shadow:none}
  .fly b{display:inline;font-size:.84rem;margin-right:.35em}
  .bsp{top:max(10px,env(safe-area-inset-top));bottom:auto;font-size:.7rem}
}
@media (max-width:820px),(orientation:portrait) and (max-width:1100px){
  .zm{--zs:1!important}
  .tx .pills{justify-content:center!important;gap:6px;margin-top:.9rem!important}.tx .pill{padding:6px 11px;font-size:.8rem}
}

/* ---------- CarPlay: echter Aufbau mit Apples Vorlagen ----------
   --u = 1 % der Displaybreite (Handy größer, Display dafür höher). Reiterwechsel per Scroll: Übersicht → Tour → Termine → Karte. */
#carplay .cp{--u:1cqw;font:400 calc(var(--u) * 1.5)/1.3 -apple-system,system-ui,var(--fb);background:#000;color:#fff}
.c-sys{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * .9);padding:calc(var(--u) * 1.6) 0 calc(var(--u) * 1.4);background:#141518;border-right:1px solid #24262b}
.c-sys b{font-size:calc(var(--u) * 1.45);font-weight:600}
.c-sig{width:calc(var(--u) * 2);height:calc(var(--u) * 1.4);fill:#fff}
.c-sa{display:grid;gap:calc(var(--u) * 1);margin-top:calc(var(--u) * 1)}
.c-sa i{display:block;width:calc(var(--u) * 4.2);aspect-ratio:1;border-radius:calc(var(--u) * 1.1);background:var(--c)}
.c-sa i.on{box-shadow:0 0 0 calc(var(--u) * .25) #000,0 0 0 calc(var(--u) * .45) #fff8}
.c-ic{width:calc(var(--u) * 2);height:calc(var(--u) * 2);flex:none;fill:var(--c,currentColor)}
.c-hm{margin-top:auto;width:calc(var(--u) * 2.6);height:calc(var(--u) * 2.6);fill:#c9ccd1}
.c-app{display:flex;flex-direction:column;min-width:0;background:#000}
.c-tabs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:calc(var(--u) * 1) calc(var(--u) * 6) 0;padding:calc(var(--u) * .4);border-radius:99px;background:#1c1d21}
.c-tabs>span:not(.c-mk){position:relative;display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * .6);padding:calc(var(--u) * .7) 0;font-size:calc(var(--u) * 1.35);font-weight:600;color:#d5d8dd;white-space:nowrap}
.c-tabs .c-ic{width:calc(var(--u) * 1.6);height:calc(var(--u) * 1.6)}
.c-mk{position:absolute;left:calc(var(--u) * .4);top:calc(var(--u) * .4);bottom:calc(var(--u) * .4);width:calc((100% - var(--u) * .8) / 4);border-radius:99px;background:#3a3c42;box-shadow:inset 0 1px 0 #ffffff1f}
.c-vw{position:relative;flex:1;overflow:hidden}
.c-pn{position:absolute;inset:0;padding:calc(var(--u) * 1.4) calc(var(--u) * 2.4) 0}
.c-zm{transform-origin:0 0}
.c-hd{display:flex;gap:calc(var(--u) * 2);align-items:center;padding-bottom:calc(var(--u) * 1.2)}
.c-im{position:relative;flex:none;width:calc(var(--u) * 21);aspect-ratio:16/9}
.c-mp{position:absolute;inset:0;border-radius:calc(var(--u) * 1.2);overflow:hidden;background:#0a1828}
.c-me{position:absolute;left:50%;top:50%;width:calc(var(--u) * 1.3);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 calc(var(--u) * .3) #fff,0 0 calc(var(--u) * 2) #3b82f6}
.c-rt{position:absolute;inset:0;width:100%;height:100%}
.c-tx{display:grid;gap:calc(var(--u) * .3);min-width:0}
.c-tx b{font-size:calc(var(--u) * 2.1);font-weight:700;line-height:1.15}
.c-tx span{font-size:calc(var(--u) * 1.5);color:#d0d4da}
.c-tx small{font-size:calc(var(--u) * 1.3);color:#9a9fa7}
.c-kb{display:flex;gap:calc(var(--u) * 1);margin-top:calc(var(--u) * .6)}
.c-kb i{display:grid;place-items:center;width:calc(var(--u) * 3.8);aspect-ratio:1;border-radius:50%;background:#2a2c31}
.c-kb .c-ic{width:calc(var(--u) * 2);height:calc(var(--u) * 2);fill:#fff}
.c-row{display:flex;align-items:center;gap:calc(var(--u) * 1.6);padding:calc(var(--u) * .8) 0;border-top:1px solid #2a2c31}
.c-row>.c-ic{width:calc(var(--u) * 2.4);height:calc(var(--u) * 2.4)}
.c-row>span{flex:1;min-width:0;display:grid;white-space:nowrap}
.c-row b{font-size:calc(var(--u) * 1.6);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.c-row small{font-size:calc(var(--u) * 1.3);color:#9a9fa7;overflow:hidden;text-overflow:ellipsis}
.c-ch{width:calc(var(--u) * 1.5);height:calc(var(--u) * 1.5);color:#6b7078;flex:none}
.c-nr{display:grid;place-items:center;flex:none;width:calc(var(--u) * 2.6);aspect-ratio:1;border-radius:50%;background:var(--c);color:#05121c;font:700 calc(var(--u) * 1.3)/1 -apple-system,system-ui,var(--fb);font-style:normal}
.c-nr .c-ic{width:calc(var(--u) * 1.7);height:calc(var(--u) * 1.7);color:#05261a}
.c-sec{font-size:calc(var(--u) * 1.2);font-weight:600;color:#9a9fa7;padding:calc(var(--u) * 1) 0 calc(var(--u) * .3)}
/* Tagesleiste (Kopfbild Termine) */
.c-day{display:flex;flex-direction:column;gap:calc(var(--u) * .5);padding:calc(var(--u) * 1.1);background:linear-gradient(135deg,#0E2236,#07121F)}
.c-day>b{font-size:calc(var(--u) * 1.3);font-weight:700}
.c-bar{position:relative;height:calc(var(--u) * 1.6)}
.c-bar::before{content:"";position:absolute;left:0;right:0;top:35%;height:30%;border-radius:9px;background:#ffffff1f}
.c-bar i{position:absolute;left:var(--x);top:20%;width:calc(var(--u) * .9);height:60%;border-radius:calc(var(--u) * .3);background:var(--c,#31C9F5)}
.c-bar em{position:absolute;left:var(--x);top:0;bottom:0;width:2px;background:#F59E0B}
.c-hrs{display:flex;font-size:calc(var(--u) * .8);color:#ffffff8c}.c-hrs span{flex:1}
.c-day p{font-size:calc(var(--u) * 1);font-weight:600;white-space:nowrap}.c-day p b{color:#31C9F5;margin-right:calc(var(--u) * .5)}
/* Karte: Orte-Vorlage */
.c-poi{padding:0}
.c-poi>.map{position:absolute;inset:0}
.c-pin{position:absolute;left:var(--x);top:var(--y);width:calc(var(--u) * 2.4);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--c);box-shadow:0 0 0 calc(var(--u) * .25) #fff,0 calc(var(--u) * .4) calc(var(--u) * 1.2) #000a}
.c-pin::after{content:"";position:absolute;left:50%;top:50%;width:32%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#fff}
.c-pl{position:absolute;left:calc(var(--u) * 1.4);top:calc(var(--u) * 1.4);bottom:calc(var(--u) * 1.4);width:calc(var(--u) * 27);padding:calc(var(--u) * 1.2) calc(var(--u) * 1.6);border-radius:calc(var(--u) * 1.6);background:#1c1d21f2;overflow:hidden}
.c-pl h6{font-size:calc(var(--u) * 1.9);font-weight:700;margin-bottom:calc(var(--u) * .4)}
.c-pl p{display:grid;padding:calc(var(--u) * .7) 0;border-top:1px solid #2e3036;white-space:nowrap}
.c-pl b{font-size:calc(var(--u) * 1.5);font-weight:600;overflow:hidden;text-overflow:ellipsis}.c-pl small{font-size:calc(var(--u) * 1.3);color:#9a9fa7}
/* Highlight-Ring auf dem Kopfbild, in Display-Maß */
#carplay .hl{inset:calc(var(--u) * -.5);border-radius:calc(var(--u) * 1.6);box-shadow:0 0 0 calc(var(--u) * .3) var(--cy),0 0 calc(var(--u) * 3) calc(var(--u) * .5) rgba(92,216,248,.5),0 0 0 calc(var(--u) * 200) rgba(2,8,16,.55)}
#carplay .hl::after{inset:calc(var(--u) * -.5);border-width:calc(var(--u) * .25)}
.c-lead{font:500 clamp(1rem,1.5vw,1.25rem)/1.4 var(--fh);color:var(--tx);max-width:46ch;margin:2.4vh auto 0}
/* Reiter: Panels blenden über (visibility, damit verdeckte Hotspots nicht tippbar sind) */
@keyframes cpV1{0%,36%{opacity:1;visibility:visible}40%,100%{opacity:0;visibility:hidden}}
@keyframes cpV2{0%,36%{opacity:0;visibility:hidden}40%,56%{opacity:1;visibility:visible}60%,100%{opacity:0;visibility:hidden}}
@keyframes cpV3{0%,56%{opacity:0;visibility:hidden}60%,76%{opacity:1;visibility:visible}80%,100%{opacity:0;visibility:hidden}}
@keyframes cpV4{0%,76%{opacity:0;visibility:hidden}80%,100%{opacity:1;visibility:visible}}
@keyframes cpMk{0%,36%{transform:none}40%,56%{transform:translateX(100%)}60%,76%{transform:translateX(300%)}80%,100%{transform:translateX(200%)}}
@keyframes cpZm{0%,16%{transform:none}22%,30%{transform:scale(var(--cz,1.12))}35%,100%{transform:none}}
@keyframes cpHl1{0%,17%{opacity:0;transform:scale(1.2)}22%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:none}}
@keyframes cpHl2{0%,41%{opacity:0;transform:scale(1.2)}45%,52%{opacity:1;transform:none}55%,100%{opacity:0;transform:none}}
@keyframes cpHl3{0%,61%{opacity:0;transform:scale(1.2)}65%,72%{opacity:1;transform:none}75%,100%{opacity:0;transform:none}}
@keyframes cpPin{0%,78%{opacity:0;transform:scale(.3)}84%,100%{opacity:1;transform:none}}
@keyframes cpLg{0%,28%{opacity:0}34%,100%{opacity:1}}
@media (max-width:820px),(orientation:portrait) and (max-width:1100px){
  #carplay .cp{--u:1.7cqw;width:min(92vw,560px);aspect-ratio:1.22;margin-top:2.4vh!important;border-width:5px}
  #carplay .cp{grid-template-columns:8% 1fr;--cz:1}
  .c-tabs{margin-inline:calc(var(--u) * 1.6)}
  .c-pl{width:calc(var(--u) * 24)}
  .c-lead{font-size:.95rem;margin-top:1.6vh}
  #carplay .legend{margin-top:.6rem;gap:.9rem;font-size:.8rem}
  #carplay .c-qt{margin-top:1.4vh!important}
  #carplay .wave{display:none}
  #carplay .quote{font-size:.9rem;margin-top:0}
}
@media (prefers-reduced-motion:reduce){#carplay .c-pn:not(:first-child){display:none}}