/* EWAVE-Startseite für Peitho, aus der Regie v3.6 (baukasten-19-kopf) gelöst von werkzeug/peitho/auszug.py.
   Nicht von Hand ändern, solange die Regie die Quelle ist; nach dem Umzug ist Peitho die Quelle. */
/* Farb- und Schrift-Tokens (aus dem Regie-:root, ohne die Tisch- und Rahmenwerte). Auch auf .ew-frame,
   damit gleichnamige Tokens der Host-Seite die EWAVE-Seite nicht verändern. */
:root,.ew-frame{
  --night:#0B2B36;
  --night-2:#0F3644;
  --deep:#071F28;
  --line:rgba(220,240,240,.14);
  --ocean:#007BB4;
  --teal:#1DA287;
  --growth:#3BC861;
  --lagoon:#83EDEE;
  --ink:#E9F2F2;
  --ink-2:rgba(233,242,242,.8);
  --mut:#9DB7BD;
  --f-display:"Archivo","Plus Jakarta Sans",system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-form:cubic-bezier(.65,0,.2,1);
  color-scheme:light;
}
/* Globale Grundregeln der Regie, auf den Rahmen begrenzt; :where() hält die Spezifität wie im Original */
:where(.ew-frame) *{box-sizing:border-box}
:where(.ew-frame) [hidden]{display:none!important}
:where(.ew-frame) ::selection{background:var(--teal);color:#fff}
:where(.ew-frame) :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
/* Rahmen: ersetzt die Klasse frame der Regie und deren Vollbild-Vorschau. Seit P6 (Fensterscroll) scrollt das
   Dokument selbst, kein innerer Scroller mehr: am iPhone fährt so die Adressleiste ein, und es fühlt sich nativ an.
   Darum ist der Rahmen ein normaler Block ohne Container (container-type wäre Bezug für position:fixed und bräche
   Kopf, Menü, Chat und die Ebenen .fx und .glb). Aus den früheren cq-Einheiten wurden: cqw zu vw (die Leiste des
   Dokuments ist versteckt, vw ist also die Layoutbreite), cqh zu var(--vh) (1 % einer festen Bildschirmhöhe, die
   ewave.js setzt und beim Ein- und Ausfahren der iOS-Leiste NICHT nachführt), @container site zu @media.
   overflow-x:clip statt hidden, sonst klebt keine Bühne mehr. */
:root{--vh:1svh}
.ew-frame{position:relative;overflow-x:clip;background:var(--night);-webkit-font-smoothing:antialiased}
/* Durchgriff der Regie-Hülle, 1:1 übernommen: die Regel für die Gerätebeschriftung (Klasse dev, figcaption) traf in der Regie auch die
   figcaption-Elemente der Seite (Cockpit, Team-Wechsler, F1H2O). Gleiche Spezifität (0,1,1) wie dort, Farbe als
   fester Wert von --desk-mut im hellen System. */
.ew-frame figcaption{font:600 12.5px var(--f-body);color:#4B6770}
html:has(.ew-frame),body:has(.ew-frame){margin:0;background:var(--night)}
/* Leiste des Dokuments versteckt wie früher die des Scrollers; scroll-behavior bleibt auto (sanft scrollt nur das Script) */
html:has(.ew-frame){scrollbar-width:none}
html:has(.ew-frame)::-webkit-scrollbar{display:none}
/* Chat oder Menü offen: das Dokument steht (früher war der Scroller inert und lag unter dem Overlay) */
html.ew-sperre{overflow:hidden}

/* ===== Die Seite selbst ===== */
.site{position:relative;color:var(--ink);font:16px/1.6 var(--f-body);color-scheme:dark}
.site ::selection{background:var(--teal);color:#fff}
.site :focus-visible{outline-color:var(--lagoon)}
.site a{color:inherit}
/* Der frühere Scroller liegt jetzt im Fluss ganz oben im Dokument (vor ihm nur fixe Ebenen): offsetTop der Sektionen
   bleibt relativ zu ihm und ist damit zugleich die Lage im Dokument */
.scroller{position:relative;overflow-x:clip}
.wrap{width:100%;max-width:1368px;margin-inline:auto;padding-inline:24px}

/* Kopf: Pille wie investwithsarah.ae */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:center;pointer-events:none}
.bar{pointer-events:auto;position:relative;width:calc(100% - 48px);max-width:940px;min-height:58px;margin-top:16px;border-radius:40px;padding:7px 7px 7px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04)),rgba(11,43,54,.52);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.06),0 24px 50px -28px rgba(2,14,18,.7);
  transition:width .82s var(--ease-form),max-width .82s var(--ease-form),margin-top .64s var(--ease-form),border-radius .64s var(--ease-form),padding .82s var(--ease-form),background-color .5s var(--ease),box-shadow .5s var(--ease)}
.site.docked .bar{width:100%;max-width:100%;margin-top:0;border-radius:0;padding:8px max(24px,calc(50% - 650px));
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(11,43,54,.88);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 20px 50px -30px rgba(2,14,18,.8)}
.logo{display:block;width:102px;flex:none;color:#fff}
.logo svg{display:block;width:100%;height:auto}
.nav{display:flex;gap:24px;font:600 14px var(--f-body)}
.nav a{text-decoration:none;opacity:.86;position:relative;padding:6px 0;transition:opacity .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1.5px;background:linear-gradient(90deg,var(--ocean),var(--growth));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover{opacity:1}.nav a:hover::after{transform:scaleX(1)}
.right{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:2px;font:600 12.5px var(--f-body)}
.lang a{text-decoration:none;color:var(--mut);padding:6px;border-radius:6px;transition:color .2s}
.lang a:hover,.lang a[aria-current]{color:var(--ink)}
.burger{display:none;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.07);color:var(--ink);padding:0;cursor:pointer;place-items:center}
.burger span{display:grid;gap:6px;width:18px}
.burger i{display:block;height:1.8px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)}
.site.open .burger i:first-child{transform:translateY(3.9px) rotate(45deg)}
.site.open .burger i:last-child{transform:translateY(-3.9px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:40;background:var(--night);padding:96px 20px 28px;display:flex;flex-direction:column;overflow-y:auto;animation:menu .35s var(--ease) both}
.menu a.m{font:800 26px/1.1 var(--f-display);font-stretch:118%;text-transform:uppercase;text-decoration:none;padding:18px 0;box-shadow:inset 0 -1px 0 var(--line)}
.menu .m-foot{margin-top:auto;display:grid;gap:18px;padding-top:28px}
.menu .lang{display:flex}
@keyframes menu{from{opacity:0;transform:translateY(-8px)}}

/* Knöpfe aus dem Board, Bewegung D Magnet (Samys Wahl 27.10., ohne Schrift-Rolle):
   Knopf zieht leicht zur Maus, Beschriftung etwas mehr; Pfeil fährt hinaus und kommt zurück; Druck gibt nach und federt.
   Maus setzt .hv (nur pointerType mouse, nie im iPhone-Rahmen), Antippen setzt .tap, .prs und kurz .hv. */
.pb{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;font:700 15px var(--f-body);letter-spacing:.01em;border-radius:999px;padding:13px 26px;cursor:pointer;border:0;isolation:isolate;color:#fff;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .35s var(--ease),background-position .8s var(--ease)}
.pb.hv{transform:translate(var(--dx,0px),var(--dy,0px))}
.pb:is(:active,.prs){transform:translate(var(--dx,0px),var(--dy,0px)) scale(.94);transition-duration:.12s;transition-timing-function:ease-out}
.pb svg{width:18px;height:18px;flex:none}
.pb .t{display:inline-block;transition:translate .6s cubic-bezier(.34,1.56,.64,1)}
.pb.hv .t{translate:calc(var(--dx,0px) * .45) calc(var(--dy,0px) * .45)}
.pb.hv .arr{animation:arr .6s var(--ease)}
.pb.hv .dn{animation:dn .6s var(--ease)}
@keyframes arr{40%{transform:translateX(16px);opacity:0}41%{transform:translateX(-14px);opacity:0}100%{transform:none;opacity:1}}
@keyframes dn{40%{transform:translateY(14px);opacity:0}41%{transform:translateY(-12px);opacity:0}100%{transform:none;opacity:1}}
.pb-dealer{background:linear-gradient(100deg,#00699A,#0F8A78 42%,#1E9A55 68%,#0F8A78 84%,#00699A);background-size:260% 100%;box-shadow:0 10px 30px -12px rgba(29,162,135,.7);text-shadow:0 1px 2px rgba(4,30,38,.35)}
.pb-dealer.hv{background-position:62% 0;box-shadow:0 16px 38px -14px rgba(59,200,97,.75)}
.pb-ghost{background:rgba(11,43,54,.22);box-shadow:inset 0 0 0 1px rgba(233,242,242,.45);overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pb-ghost.hv{box-shadow:inset 0 0 0 1px var(--lagoon)}
.pb-portal{min-height:44px;padding:9px 16px;font-size:13.5px;color:var(--ink)}
.pb-portal::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;background:conic-gradient(#007BB4,#1DA287,#3BC861,#83EDEE,#007BB4);z-index:-2}
.pb-portal::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--night);z-index:-1;transition:background .35s}
.pb-portal.hv::after{background:var(--night-2)}
.pb-portal svg{width:17px;height:17px}
.pb-portal .shackle{transition:transform .35s var(--ease);transform-origin:16px 8px}
.pb-portal:is(.hv,.tap) .shackle{transform:translateY(-2px) rotate(-12deg)}
@media (prefers-reduced-motion:reduce){
  .pb,.pb *{animation:none!important;transition-duration:.01s!important}
  .pb.hv{transform:none}
  .pb.hv .t{translate:none}
}

/* Hero A (gewählt): Vollbild, unten links; PERFORMANCE in Ocean Growth, Verlauf läuft hin und zurück */
.hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:max(560px,calc(var(--vh) * 100));overflow:hidden;background:var(--night);--h1:clamp(28px,1rem + 2.6vw,58px)}
.hero > .media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--deep)}
.zoom{position:absolute;inset:0}
.still{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 50%;animation:kb 26s ease-in-out infinite alternate}
.shade{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(11,43,54,.95) 0%,rgba(11,43,54,.62) 30%,rgba(11,43,54,0) 60%),linear-gradient(90deg,rgba(11,43,54,.6) 0%,rgba(11,43,54,0) 52%),linear-gradient(180deg,rgba(11,43,54,.5) 0%,rgba(11,43,54,0) 20%)}
.slot{position:absolute;z-index:3;right:24px;top:96px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;font:600 12px var(--f-body);letter-spacing:.02em;color:var(--ink);background:rgba(7,31,40,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.slot svg{width:15px;height:15px;color:var(--lagoon)}
.a-copy{display:grid;gap:22px;justify-items:start;padding-block:0 clamp(44px,calc(var(--vh) * 9),96px)}
.h1{margin:0;font:800 var(--h1)/.98 var(--f-display);font-stretch:125%;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.h1 .l1,.h1 .l2{display:block;background:linear-gradient(180deg,#fff 32%,#c6ebe5);-webkit-background-clip:text;background-clip:text;color:transparent}
.og{background:linear-gradient(100deg,#2A9FD6 0%,#1DA287 30%,#3BC861 50%,#1DA287 70%,#2A9FD6 100%);background-size:300% 100%;background-position:0% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:og 7s ease-in-out infinite alternate}
@keyframes og{to{background-position:100% 0}}
.sub{margin:0;font:500 clamp(15.5px,.9rem + .3vw,18px)/1.55 var(--f-body);color:var(--ink-2);max-width:42ch;text-wrap:pretty}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.1) translate3d(-1.2%,-.8%,0)}}
.next{border-top:1px solid var(--line);background:var(--night)}
.next .wrap{padding-block:40px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;color:var(--mut);font:600 13px var(--f-body)}
.next .chips{display:flex;flex-wrap:wrap;gap:8px}
.next .chips span{border:1px solid var(--line);border-radius:999px;padding:5px 13px;color:var(--ink)}
.ph{background:var(--night-2);min-height:calc(var(--vh) * 60);display:grid;place-items:center;color:var(--mut);font:600 13px var(--f-body);text-align:center;padding:24px}
.h2{margin:0;font:800 clamp(26px,.8rem + 2.2vw,44px)/1 var(--f-display);font-stretch:125%;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.lead{margin:0;color:var(--ink-2);font:500 clamp(15px,.9rem + .2vw,17px)/1.6 var(--f-body);max-width:44ch;text-wrap:pretty}

/* ===== Baustein 2 B, Dreiviertel =====
   Bühne klebt, das Boot steht auf dem Wasser; beim Scrollen wechselt der Lack mit einem
   Lichtstreif vom Bug zum Heck (rückwärts vom Heck zum Bug). Die Anfahrt vom Horizont
   (Commit aa6723f6) ist vorerst gestrichen (Samy, 27.10.). */
.qb{position:relative;height:calc(var(--vh) * 250);background:var(--night);overflow:clip;--hz:.42;--vpx:.92;--ex:.5;--ey:.64;--bw:min(980px,64vw)}
.qb-pin{position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0B2B36 0%,#0E3646 calc(var(--hz) * 100%),#0C3242 calc(var(--hz) * 100%),#082531 calc(var(--hz) * 100% + calc(var(--vh) * 18)),#05171E 100%)}
.qb-sea{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.qb-sea line{stroke:var(--lagoon);stroke-linecap:round}
.qb-hz{position:absolute;left:0;right:0;top:calc(var(--hz) * 100%);height:1px;z-index:0;background:linear-gradient(90deg,rgba(0,123,180,0),rgba(0,123,180,.55) 22%,rgba(29,162,135,.6) 55%,rgba(59,200,97,.55) 80%,rgba(59,200,97,0));pointer-events:none}
.qb-hz::after{content:"";position:absolute;left:calc(var(--vpx) * 100% - 160px);width:320px;top:-6px;height:13px;background:radial-gradient(closest-side,rgba(131,237,238,.22),rgba(131,237,238,0))}
.qb-head{position:relative;z-index:2;padding-top:110px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px}
.qb-head .lead{max-width:40ch}
.qb-car{position:absolute;z-index:3;left:calc(var(--ex) * 100%);top:calc(var(--ey) * 100%);width:var(--bw);translate:-50% -50%}
.qb-boats{position:relative;width:100%;aspect-ratio:1680/804}
.qb-boats img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;user-select:none;-webkit-user-drag:none}
.qb-boats img.under{opacity:1;z-index:1}
.qb-boats img.on{opacity:1;z-index:2}
.qb-boats img.wiping{-webkit-mask-image:linear-gradient(var(--ang,100deg),#000 46%,transparent 54%);mask-image:linear-gradient(var(--ang,100deg),#000 46%,transparent 54%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.qb-glint{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(var(--ang,100deg),rgba(214,255,250,0) 45%,rgba(214,255,250,.55) 50%,rgba(214,255,250,0) 55%) no-repeat;background-size:300% 100%;
  -webkit-mask:url(/media/ewave/v1q-maske.webp) 0 0/100% 100% no-repeat;mask:url(/media/ewave/v1q-maske.webp) 0 0/100% 100% no-repeat}  /* Körpermaske ohne Schatten, gleich für alle Farben */
.qb-name{position:absolute;z-index:4;left:0;right:0;bottom:clamp(24px,calc(var(--vh) * 5),48px);display:flex;justify-content:center;align-items:center;gap:10px}
.qb-dots{display:flex}
.qb-dots button{width:32px;height:32px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.qb-dots button i{width:8px;height:8px;border-radius:50%;background:rgba(233,242,242,.28);transition:background .3s,transform .35s var(--ease)}
.qb-dots button:hover i{background:rgba(233,242,242,.6)}
.qb-dots button[aria-pressed="true"] i{background:var(--lagoon);transform:scale(1.35)}
.qb-label{font:800 15px var(--f-display);font-stretch:118%;text-transform:uppercase;letter-spacing:.04em;min-width:7ch}


/* ===== Baustein 3 Kennzahlen, vier Vorlagen =====
   Werte nur aus der Broschüre S. 4. Jede Vorlage hat einen einzigen Bewegungsmoment, der einmal
   läuft, wenn die Sektion ins Bild kommt (Klasse .play); vorher steht alles sichtbar auf null. */
.k3{position:relative;background:linear-gradient(180deg,#05171E 0,var(--night) min(260px,calc(var(--vh) * 32)))}
.k3-in{padding-block:clamp(104px,calc(var(--vh) * 15),136px) clamp(72px,calc(var(--vh) * 11),112px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Indikator-Icons aus dem Board (52 x 40), hier einmalig statt in Schleife */
.ic{display:inline-block;width:52px;height:40px;flex:none;color:var(--ink)}
.ic svg{display:block;width:100%;height:100%;overflow:visible}
.ic .arc{stroke-dasharray:120;stroke-dashoffset:120}
.ic .ndl{transform-box:view-box;transform-origin:26px 30px;transform:rotate(-70deg)}
.ic .cell{opacity:.18}
.ic .x{stroke-dasharray:40;stroke-dashoffset:40}
.play .ic .arc{animation:ic-arc 1.4s var(--ease) var(--d,0s) forwards}
.play .ic-gauge .ndl{animation:ic-ndl 1.4s cubic-bezier(.3,1.3,.5,1) var(--d,0s) forwards}
.play .ic .cell{animation:ic-on .01s linear forwards}
.play .ic .cell:nth-of-type(3){animation-delay:calc(var(--d,0s) + .15s)}
.play .ic .cell:nth-of-type(4){animation-delay:calc(var(--d,0s) + .4s)}
.play .ic .cell:nth-of-type(5){animation-delay:calc(var(--d,0s) + .65s)}
.play .ic .cell:nth-of-type(6){animation-delay:calc(var(--d,0s) + .9s)}
.play .ic .x{animation:ic-arc .8s var(--ease) calc(var(--d,0s) + .25s) forwards}
.play .ic .wv{animation:ic-wv 1.3s ease-in-out var(--d,0s) 2}
.play .ic .wv.w2{animation-delay:calc(var(--d,0s) + .2s)}
.play .ic .wv.w3{animation-delay:calc(var(--d,0s) + .4s)}
@keyframes ic-arc{to{stroke-dashoffset:var(--off,0)}}
@keyframes ic-ndl{to{transform:rotate(var(--to,62deg))}}
@keyframes ic-on{to{opacity:1}}
@keyframes ic-wv{50%{transform:translateX(4px)}}
.lu{width:20px;height:20px;flex:none;color:var(--lagoon)}

.b3-sw{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:rgba(233,242,242,.06);box-shadow:inset 0 0 0 1px var(--line)}
.b3-sw button{min-height:46px;padding:0 22px;border:0;border-radius:999px;background:none;color:var(--mut);font:700 14.5px var(--f-body);cursor:pointer;transition:color .25s,background .35s var(--ease)}
.b3-sw button:hover{color:var(--ink)}
.b3-sw button[aria-pressed="true"]{background:var(--ink);color:var(--night)}
.g{width:100%;max-width:300px;height:auto;overflow:visible}
.g .g-track{fill:none;stroke:rgba(233,242,242,.1);stroke-width:9}
.g .g-val{fill:none;stroke:url(#og);stroke-width:9}
.g-speed .g-val{stroke-dasharray:240 240;stroke-dashoffset:var(--o,240);transition:stroke-dashoffset 1.2s var(--ease)}
.g-time .g-val{stroke:url(#ogd);stroke-dasharray:60 60;stroke-dashoffset:var(--o,60);transition:stroke-dashoffset 1.2s var(--ease)}
.g .g-ticks line{stroke:rgba(233,242,242,.32);stroke-width:1.6;stroke-linecap:round}
.g .g-ticks line.maj{stroke:rgba(233,242,242,.7);stroke-width:2.2}
.g .g-ticks text{fill:var(--mut);font:600 12px var(--f-body)}
.g-ndl{transform-box:view-box;transform-origin:120px 120px;transform:rotate(var(--a,-120deg));transition:transform 1.25s cubic-bezier(.3,1.25,.5,1)}
.g-ndl line{stroke:#fff;stroke-width:3;stroke-linecap:round}
.g-ndl circle{fill:var(--night);stroke:#fff;stroke-width:2.5}
.g .g-num{fill:#fff;font:800 50px var(--f-display);font-stretch:112%;font-variant-numeric:tabular-nums}
.g .g-unit{fill:var(--ink-2);font:600 13px var(--f-body);letter-spacing:.04em}
.g.snap .g-val,.g.snap .g-ndl{transition:none}

/* C Bauplan: Seitenriss mit Maßlinie, vier Punkten und Schriftfeld */
.c3{display:grid;gap:clamp(24px,calc(var(--vh) * 4),40px)}
.c3-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 48px}
.c3-head .lead{max-width:38ch}
.c3-sheet{display:grid;gap:22px;width:100%;max-width:940px;margin-inline:auto}
.c3-draw{position:relative;isolation:isolate;width:100%}
.c3-draw::before{content:"";position:absolute;inset:-6% -4%;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(131,237,238,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(131,237,238,.075) 1px,transparent 1px);background-size:32px 32px;background-position:center;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.c3-svg{display:block;width:100%;height:auto;overflow:visible}
.c3-svg .ext{stroke:rgba(131,237,238,.5);stroke-width:1.5;fill:none}
.c3-svg .dl{stroke:var(--lagoon);stroke-width:1.8;fill:none}
.c3-svg .ar{fill:var(--lagoon)}
.c3-svg .dt{fill:#fff;font:800 24px var(--f-display);font-stretch:112%}
.c3-svg .ld{stroke:rgba(131,237,238,.7);stroke-width:1.5;fill:none}
.c3-svg .lt{fill:#fff;font:700 18px var(--f-body)}
.c3-svg .ls{fill:var(--ink-2);font:500 16px var(--f-body)}
.c3-svg .pt circle{fill:var(--night);stroke:var(--lagoon);stroke-width:2.5;r:14px}
.c3-svg .pt text{fill:#fff;font:800 15px var(--f-display);text-anchor:middle;dominant-baseline:central}
.c3-svg .pt-in{transform-box:fill-box;transform-origin:center}
.c3-svg .dim-m{display:none}
.c3-svg.m .dim-d,.c3-svg.m .lab{display:none}
.c3-svg.m .dim-m{display:inline}
.c3-svg.m .pt circle{r:30px;stroke-width:4}
.c3-svg.m .pt text{font-size:32px}
.c3-svg.m .dt{font-size:48px}
.c3-svg .ext,.c3-svg .dl,.c3-svg .ld{stroke-dasharray:1 1;stroke-dashoffset:1}
.c3-svg .ar,.c3-svg .dt,.c3-svg .lab text,.c3-svg .pt-in{opacity:0}
.play .c3-svg .ext{animation:dr .55s var(--ease) .1s forwards}
.play .c3-svg .dl{animation:dr .8s var(--ease) .45s forwards}
.play .c3-svg .ar,.play .c3-svg .dt{animation:fi .45s var(--ease) 1.05s forwards}
.play .c3-svg .pt-in{animation:pop .5s cubic-bezier(.3,1.5,.5,1) calc(1.25s + var(--i)*.16s) forwards}
.play .c3-svg .ld{animation:dr .55s var(--ease) calc(1.4s + var(--i)*.16s) forwards}
.play .c3-svg .lab text{animation:fi .5s var(--ease) calc(1.7s + var(--i)*.16s) forwards}
@keyframes dr{to{stroke-dashoffset:0}}
@keyframes fi{to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.c3-list{display:none;margin:0;padding:0;list-style:none;counter-reset:pt;gap:1px;background:rgba(131,237,238,.24);box-shadow:0 0 0 1px rgba(131,237,238,.24);border-radius:4px;overflow:hidden}
.c3-list{grid-template-columns:1fr 1fr}
.c3-list li{counter-increment:pt;display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 10px;align-items:start;background:var(--night);padding:10px 12px 11px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.c3-list li::before{content:counter(pt);grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--lagoon);font:800 11px/1 var(--f-display);color:#fff}
.c3-list b{color:#fff;font-weight:700}
.c3-list span{color:var(--ink)}


.c3-tb{margin:0;justify-self:center;width:100%;max-width:640px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(131,237,238,.24);box-shadow:0 0 0 1px rgba(131,237,238,.24);border-radius:4px;overflow:hidden}
.c3-tb > div{background:var(--night);padding:9px 12px 10px;display:grid;gap:2px;align-content:start}
.c3-tb dt{font:600 11.5px var(--f-body);color:var(--mut)}
.c3-tb dd{margin:0;font:800 15.5px/1.25 var(--f-display);font-stretch:108%;color:#fff;font-variant-numeric:tabular-nums}
.c3-tb dd small{display:block;margin-top:2px;font:500 12px/1.35 var(--f-body);color:var(--ink-2)}

/* Cockpit unter dem Bauplan (Samy 27.10.): kompakt, nicht bildschirmfüllend, spielt beim Hinscrollen */
.cp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;align-items:center;width:100%;max-width:940px;margin:clamp(40px,calc(var(--vh) * 7),72px) auto 0;padding-top:clamp(36px,calc(var(--vh) * 6),56px);box-shadow:inset 0 1px 0 var(--line)}
.cp-copy{display:grid;gap:18px;justify-items:start}
.cp-h{margin:0;font:800 clamp(22px,.7rem + 1.2vw,30px)/1.05 var(--f-display);font-stretch:125%;text-transform:uppercase;letter-spacing:-.005em}
.cp-lead{margin:0;color:var(--ink-2);font:500 15.5px/1.6 var(--f-body);max-width:40ch}
.cp-inst{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;align-items:end}
.cp-inst figure{margin:0;display:grid;gap:10px;justify-items:center}
.cp-inst figcaption{font:600 13px var(--f-body);color:var(--mut)}
.cp .g{max-width:224px}
.cp-inst{grid-column:2;grid-row:1 / span 2}
.cp-charge{grid-column:1;grid-row:2;align-self:start;display:flex;align-items:center;gap:14px;margin:0;padding-top:18px;box-shadow:inset 0 1px 0 var(--line);color:var(--ink-2);font-size:14.5px;line-height:1.5;max-width:44ch}
.cp-charge .ic{width:52px;height:40px}
.cp-charge b{color:#fff;font:800 18px var(--f-display);font-stretch:112%;margin-right:4px}
/* Handy (Samy 27.10.): Schriftfeld wandert ins Cockpit, Ladezeile wird erste Zeile derselben Tabelle */
.cp-tb{display:none}
.cp-tb .chg{grid-column:1 / -1;padding-block:11px 12px}
.cp-tb .chg dd{display:flex;align-items:center;gap:12px;font:500 13.5px/1.45 var(--f-body);color:var(--ink-2)}
.cp-tb .chg .ic{flex:none;width:46px;height:36px}
.cp-tb .chg b{color:#fff;font:800 16px var(--f-display);font-stretch:112%;margin-right:3px}

/* ===== Baustein 4 Liste, A Haarlinien (Samys Wahl 27.10.) =====
   Inhalt: Lausers Entwurf „Was wir Händlern bieten“. Linien ziehen sich nacheinander, Zeilen werden hell. */
.ls{position:relative;background:var(--night)}
.ls-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 80px;align-items:start;padding-block:clamp(96px,calc(var(--vh) * 14),128px)}
.ls-copy{display:grid;gap:22px;justify-items:start;position:sticky;top:112px}
.ls-copy .lead{max-width:34ch}
.ls .lu{width:22px;height:22px;color:var(--lagoon)}
.ls .lu svg{display:block;width:100%;height:100%}
.ls em{font:700 14.5px var(--f-body);font-style:normal;color:var(--lagoon);white-space:nowrap;text-align:right}
.la{list-style:none;margin:0;padding:0;box-shadow:inset 0 1px 0 var(--line)}
.la li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;padding:20px 0 21px}
.la li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--teal),rgba(131,237,238,.35) 30%,var(--line) 70%);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) calc(var(--i) * .13s)}
.la li > *{opacity:.28;transition:opacity .8s var(--ease) calc(var(--i) * .13s + .15s)}
.la.play li::after{transform:none}
.la.play li > *{opacity:1}
.la .lu{align-self:start;translate:0 2px}
.la b{display:block;font:700 17px/1.35 var(--f-body);color:#fff}
.la div span{display:block;margin-top:3px;color:var(--mut);font-size:15px;line-height:1.5;max-width:46ch}
@media (prefers-reduced-motion:reduce){.la li::after{transform:none;transition:none}.la li > *{opacity:1;transition:none}}

/* ===== Sektion 5: Warum es sich verkauft, vier Vorlagen =====
   Inhalt: Broschüre S. 5 (Gegenüberstellung) und Live-Seite (Abu Dhabi, Palm Jumeirah, geschlossenes System, Wartung).
   Keine Dezibel- oder Kostenzahlen, die gibt es in keiner Quelle. */
.vs{position:relative;background:var(--deep)}
.vs-in{display:grid;gap:clamp(36px,calc(var(--vh) * 6),56px);padding-block:clamp(96px,calc(var(--vh) * 14),128px)}
.vs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px 48px}
.vs-head .h2{max-width:22ch}
.vs-head .lead{max-width:42ch}
.vs .lu{width:22px;height:22px;flex:none;color:var(--lagoon)}
.vs .lu svg{display:block;width:100%;height:100%}
.vs s{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 58% / 0% 1.5px;transition:background-size .6s var(--ease) var(--sd,0s)}

/* A Gegenüberstellung: zwei Spalten, jede Zeile kippt vom Jetski zu EWAVE */
.va{position:relative;display:grid}
.va::before{content:"";position:absolute;top:0;bottom:0;left:50%;right:0;border-radius:20px;background:linear-gradient(180deg,rgba(0,123,180,.15),rgba(29,162,135,.08));box-shadow:inset 0 0 0 1px rgba(131,237,238,.2)}
.va-row{position:relative;display:grid;grid-template-columns:1fr 1fr}
.va-row + .va-row{box-shadow:inset 0 1px 0 var(--line)}
.va-h{padding:24px 30px 16px;font:700 12.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.va-h + .va-h{color:var(--lagoon)}
.va-old,.va-new{display:flex;gap:14px;align-items:flex-start;padding:20px 30px 21px}
.va-old{color:var(--ink-2);font:500 16px/1.45 var(--f-body);transition:color .6s var(--ease) calc(var(--i) * .1s)}
.va-old .lu{color:rgba(157,183,189,.55);translate:0 1px}
.va-old s{--sd:calc(var(--i) * .1s)}
.va-new{opacity:.22;translate:-10px 0;transition:opacity .7s var(--ease) calc(var(--i) * .1s + .3s),translate .7s var(--ease) calc(var(--i) * .1s + .3s)}
.va-new .lu{translate:0 2px}
.va-new b{display:block;font:700 17px/1.35 var(--f-body);color:#fff}
.va-new div span{display:block;margin-top:3px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.va-row.play .va-old{color:var(--mut)}
.va-row.play s{background-size:100% 1.5px}
.va-row.play .va-new{opacity:1;translate:none}

@media (prefers-reduced-motion:reduce){
  .vs s{transition:none;background-size:100% 1.5px}
  .va-old,.va-new{transition:none!important}
  .va-new{opacity:1;translate:none}
}

/* ===== Sektion 6: Für Hotels, Resorts, Marinas, Mix aus D (Zwei Seiten) und dem Ablauf aus A =====
   Inhalt: Live-Seiten Equipment Provider und Service Provider, Broschüre S. 2 und 6.
   Fotos von der alten Seite (Hotels-1200x800), ohne Hotelnamen; Freigabe bei Andi. */
.rs{position:relative;background:var(--night)}
.rs-in{display:grid;gap:clamp(36px,calc(var(--vh) * 6),56px);padding-block:clamp(96px,calc(var(--vh) * 14),128px)}
.rs-head{display:grid;gap:20px;justify-items:start}
.rs-head .h2{max-width:20ch}
.rs-head .lead{max-width:46ch}
.rs-k{font:700 12.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--lagoon)}
.rs .lu{width:22px;height:22px;flex:none;color:var(--lagoon)}
.rs .lu svg{display:block;width:100%;height:100%}
.rs img{display:block;width:100%;height:100%;object-fit:cover}
.rs-h3{margin:0;font:800 clamp(20px,.6rem + 1vw,26px)/1.1 var(--f-display);font-stretch:118%;text-transform:uppercase;text-wrap:balance}
.rs-esg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 80px;padding-top:clamp(40px,calc(var(--vh) * 7),64px);box-shadow:inset 0 1px 0 var(--line)}
.rs-e{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.rs-e li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 14px;padding:18px 0 20px;box-shadow:inset 0 1px 0 var(--line)}
.rs-e .lu{translate:0 2px}
.rs-e b{display:block;font:700 16.5px/1.35 var(--f-body);color:#fff}
.rs-e div span{display:block;margin-top:3px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.rs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));box-shadow:inset 0 1px 0 var(--line)}
.rs-steps li{display:grid;gap:6px;align-content:start;padding:20px 24px 0 0}
.rs-steps li + li{padding-left:24px;box-shadow:inset 1px 0 0 var(--line)}
.rs-steps i{font:800 13px var(--f-display);font-style:normal;font-stretch:118%;color:var(--lagoon)}
.rs-steps b{font:700 16px/1.35 var(--f-body);color:#fff}
.rs-steps span{color:var(--ink-2);font-size:14px;line-height:1.5}

/* Ablauf 1 bis 4 aus Vorlage A: eine Linie läuft durch die Schritte, jeder Punkt leuchtet auf */
.ra-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.ra-steps::before,.ra-steps::after{content:"";position:absolute;left:18px;right:calc((100% - 96px) / 4 - 18px);top:17px;height:2px;border-radius:2px;background:rgba(233,242,242,.1)}
.ra-steps::after{background:linear-gradient(90deg,var(--ocean),var(--teal),var(--growth));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease-form)}
.ra-steps.play::after{transform:none}
.ra-steps li{position:relative;display:grid;gap:10px;align-content:start}
.ra-steps i{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--night);box-shadow:inset 0 0 0 1.5px rgba(233,242,242,.25);font:800 14px/1 var(--f-display);font-style:normal;color:var(--mut);transition:box-shadow .4s,color .4s,background .4s;transition-delay:calc(var(--i) * .45s + .1s)}
.ra-steps.play i{box-shadow:inset 0 0 0 1.5px var(--lagoon);color:#fff;background:#0E4150}
.ra-steps b{font:700 17px/1.35 var(--f-body);color:#fff;margin-top:6px}
.ra-steps span{color:var(--ink-2);font-size:15px;line-height:1.5}
.ra-steps li > :not(i){opacity:.3;transition:opacity .7s var(--ease) calc(var(--i) * .45s + .2s)}
.ra-steps.play li > :not(i){opacity:1}

/* D Zwei Seiten: „For your guests“ neben „For your hotel“, die Fotos öffnen sich nacheinander; darunter der Ablauf in einer Zeile */
.rd-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rd-col{display:grid;gap:22px;align-content:start;padding:clamp(18px,2.2vw,28px);border-radius:22px;background:rgba(233,242,242,.035);box-shadow:inset 0 0 0 1px var(--line)}
.rd-col + .rd-col{background:linear-gradient(180deg,rgba(0,123,180,.14),rgba(29,162,135,.07));box-shadow:inset 0 0 0 1px rgba(131,237,238,.2)}
.rd-photo{aspect-ratio:16 / 10;border-radius:14px;overflow:hidden;clip-path:inset(0 0 100% 0 round 14px);transition:clip-path 1.1s var(--ease-form)}
.rd-col + .rd-col .rd-photo{transition-delay:.3s}
.rd-photo img{scale:1.08;transition:scale 1.6s var(--ease)}
.rd-cols.play .rd-photo{clip-path:inset(0 0 0 0 round 14px)}
.rd-cols.play .rd-photo img{scale:1}
.rd-col .rs-h3{font-size:clamp(18px,.6rem + .8vw,22px)}
.rd-col .rs-e{grid-template-columns:1fr}
.rd-col .rs-e li:first-child{box-shadow:none;padding-top:0}
.rs-flow{display:grid;gap:clamp(26px,calc(var(--vh) * 4),36px);padding-top:clamp(40px,calc(var(--vh) * 7),64px);box-shadow:inset 0 1px 0 var(--line)}
.rs-end{display:flex}

@media (prefers-reduced-motion:reduce){
  .ra-steps::after{transform:none;transition:none}
  .ra-steps li::after{transform:none!important;transition:none!important}
  .ra-steps i,.ra-steps li > *,.rd-photo,.rd-photo img{transition:none!important}
  .ra-steps li > *{opacity:1}
  .rd-photo{clip-path:none}
  .rd-photo img{scale:1}
}

/* ===== Sektion 7: Service und Portal, Portal-Bildschirm mit Uhr-Abzeichen (Samys Mix aus A und C) =====
   Inhalt: Broschüre S. 7, Lauser-Entwurf (Portal-Funktionen, „Alles an einem Ort, rund um die Uhr“), Live-Seite Service Provider.
   Die sechs Portal-Module stammen aus Lausers Entwurf; was davon heute schon läuft, klärt Andi. */
.sv{position:relative;background:var(--deep)}
.sv-in{display:grid;gap:clamp(36px,calc(var(--vh) * 6),56px);padding-block:clamp(96px,calc(var(--vh) * 14),128px)}
.sv-head{display:grid;gap:20px;justify-items:start}
.sv-head .h2{max-width:18ch}
.sv-head .lead{max-width:46ch}
.sv-k{font:700 12.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--lagoon)}
.sv .lu{width:22px;height:22px;flex:none;color:var(--lagoon)}
.sv .lu svg{display:block;width:100%;height:100%}
.sv-f{list-style:none;margin:0;padding:0;width:100%}
.sv-f li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 14px;padding:16px 0 17px;box-shadow:inset 0 1px 0 var(--line)}
.sv-f .lu{translate:0 2px}
.sv-f b{display:block;font:700 16px/1.35 var(--f-body);color:#fff}
.sv-f div span{display:block;margin-top:2px;color:var(--ink-2);font-size:14.5px;line-height:1.5}

/* A Portal-Ansicht: links Service in drei Zeilen, rechts ein Portal-Bildschirm; ins Suchfeld tippt sich „battery swap“, das Video öffnet sich */
.sva-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 72px;align-items:center;padding-block:clamp(96px,calc(var(--vh) * 14),128px)}
.sva-copy{display:grid;gap:26px;justify-items:start}
.sva-screen{border-radius:18px;overflow:hidden;background:#0A2530;box-shadow:0 0 0 1px rgba(131,237,238,.18),0 40px 80px -40px rgba(0,0,0,.7)}
.sva-top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#08202A;box-shadow:inset 0 -1px 0 var(--line);font:800 13px var(--f-display);font-stretch:118%;text-transform:uppercase;letter-spacing:.04em}
.sva-top i{width:9px;height:9px;border-radius:50%;background:#26414B}
.sva-top i:first-child{margin-left:0}
.sva-top b{margin-left:8px;color:#fff}
.sva-body{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:400px}
.sva-nav{list-style:none;margin:0;padding:14px 10px;display:grid;gap:2px;align-content:start;box-shadow:inset -1px 0 0 var(--line)}
.sva-nav li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--ink-2);font:600 13px/1.3 var(--f-body)}
.sva-nav li .lu{width:17px;height:17px;color:var(--mut)}
.sva-nav li.on{background:rgba(131,237,238,.1);color:#fff}
.sva-nav li.on .lu{color:var(--lagoon)}
.sva-main{display:grid;gap:16px;align-content:start;padding:18px}
.sva-search{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;background:rgba(233,242,242,.05);box-shadow:inset 0 0 0 1px var(--line);font:500 14px var(--f-body);color:#fff}
.sva-search .lu{width:17px;height:17px;color:var(--mut)}
.sva-q{white-space:pre}
.sva-q:empty::before{content:"Search by part or symptom";color:var(--mut)}
.sva-search::after{content:"";width:1.5px;height:18px;margin-left:-8px;background:var(--lagoon);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.sva-res{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:start}
.sva-video{position:relative;aspect-ratio:16 / 10;border-radius:12px;overflow:hidden;opacity:.25;scale:.97;transition:opacity .6s var(--ease),scale .8s var(--ease)}
.sva-video img{display:block;width:100%;height:100%;object-fit:cover}
.sva-video::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,31,40,.7),rgba(7,31,40,0) 55%)}
.sva-play{position:absolute;z-index:1;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#0B2B36}
.sva-play .lu{width:22px;height:22px;color:#0B2B36;translate:2px 0}
.sva-cap{position:absolute;z-index:1;left:14px;bottom:12px;font:700 14px var(--f-body);color:#fff}
.sva-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sva-list li{padding:10px 12px;border-radius:10px;font:600 13px/1.35 var(--f-body);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);transition:background .4s,color .4s,box-shadow .4s}
.sva-list small{display:block;margin-top:2px;font:500 12px var(--f-body);color:var(--mut)}
.sva-screen.found .sva-video{opacity:1;scale:1}
.sva-screen.found .sva-list li.hit{background:rgba(131,237,238,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(131,237,238,.4)}

/* Zeiger im Bildschirm und Video-Fortschritt */
.sva-screen{position:relative}
.sva-cur{position:absolute;z-index:5;left:0;top:0;width:0;height:0;translate:var(--cx,0px) var(--cy,0px);transition:translate .85s cubic-bezier(.65,0,.2,1);pointer-events:none}
.sva-cur svg{position:absolute;left:-4px;top:-3px;width:22px;height:22px;fill:#fff;stroke:#0B2B36;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.sva-cur::after{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;background:rgba(131,237,238,.5);scale:0;opacity:0}
.sva-cur.click::after{animation:clk .6s var(--ease)}
@keyframes clk{0%{scale:.2;opacity:1}100%{scale:1.4;opacity:0}}
.sva-cap{bottom:20px!important}
.sva-bar{position:absolute;z-index:1;left:14px;right:14px;bottom:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.sva-bar::after{content:"";position:absolute;inset:0;background:var(--lagoon);transform:scaleX(0);transform-origin:left}
.sva-play{transition:opacity .35s var(--ease),scale .35s var(--ease)}
.sva-screen.playing .sva-play{opacity:0;scale:.8}
.sva-screen.playing .sva-bar::after{transform:scaleX(.45);transition:transform 7s linear}

/* Uhr als Abzeichen oben rechts auf dem Bildschirm: erscheint, der Ring füllt sich, dann läuft ein Punkt um (rund um die Uhr) */
.svx-shot{position:relative}
.svx-badge{position:absolute;z-index:6;right:-34px;top:-44px;width:136px;height:136px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#12485A,#0A2A35 72%);box-shadow:0 0 0 1px rgba(131,237,238,.24),0 24px 48px -18px rgba(0,0,0,.75);scale:.82;opacity:0;transition:scale .8s var(--ease),opacity .5s var(--ease)}
.svx-badge svg{position:absolute;inset:0;width:100%;height:100%}
.svx-badge .tr{fill:none;stroke:rgba(233,242,242,.1);stroke-width:6}
.svx-badge .val{fill:none;stroke:url(#ogd);stroke-width:6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.svx-badge .tk{stroke:rgba(233,242,242,.38);stroke-width:1.5}
.svx-badge .hand{opacity:0}
.svx-badge .hand circle{fill:#fff}
.svx-mid{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:3px}
.svx-mid b{font:800 30px/1 var(--f-display);font-stretch:118%;color:#fff}
.svx-mid span{font:700 10px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--lagoon)}
.svx-shot.play .svx-badge{scale:1;opacity:1}
.svx-shot.play .svx-badge .val{animation:svcr 2.4s var(--ease-form) .35s forwards}
.svx-shot.play .svx-badge .hand{animation:hfade .4s 2.75s forwards,hspin 12s linear 2.75s infinite}
@keyframes svcr{to{stroke-dashoffset:0}}
@keyframes hfade{to{opacity:1}}
@keyframes hspin{to{transform:rotate(360deg)}}

/* Module darunter: Icon, Name, eine kurze Zeile */
.svm .sva-in{padding-bottom:clamp(56px,calc(var(--vh) * 9),80px)}
.svx-in{padding-block:0 clamp(96px,calc(var(--vh) * 14),128px)}
.svx-mods{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.svx-mods li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 14px;align-content:start;padding:16px 0 17px;box-shadow:inset 0 1px 0 var(--line)}
.svx-mods .lu{grid-row:span 2;translate:0 2px}
.svx-mods b{font:700 16px/1.35 var(--f-body);color:#fff}
.svx-mods span:not(.lu){color:var(--ink-2);font-size:14px;line-height:1.45}
.sv .pb-portal{min-height:48px;padding:12px 22px;font-size:15px}

@media (prefers-reduced-motion:reduce){
  .sva-search::after{animation:none}
  .sva-cur{display:none}
  .sva-video,.sva-list li,.svx-badge{transition:none!important}
  .svx-badge{scale:1;opacity:1}
  .svx-badge .val{stroke-dashoffset:0;animation:none!important}
  .svx-badge .hand{animation:none!important;opacity:1}
}

/* ===== Sektion 8: Partner und Team, Vorlage A Nebeneinander (Samys Wahl) =====
   Inhalt: Broschüre S. 8 bis 10 (Namen, Titel), Lauser-Entwurf (Händler-Kontakt), F1H2O-Pressemitteilung vom 4.10.2024.
   Das MoU unterschrieb H2O Racing mit Yiyi Tech (chinesischer Markeninhaber), nicht mit XXEWAVE: darum kein Investment, keine Beteiligung, kein Zitat.
   Der F1H2O-Block steht in jeder Vorlage für sich und kann ohne Umbau wegfallen.
   Fotos: Teamfoto und Lauser von der alten Seite, Ewig aus der Broschüre (nur 312 px), Nicolò di San Germano im V1 von der alten F1H2O-Seite. */
.tm{position:relative;background:var(--night)}
.tm img{display:block;width:100%;height:100%;object-fit:cover}
.tm .lu{width:22px;height:22px;flex:none;color:var(--lagoon)}
.tm .lu svg{display:block;width:100%;height:100%}
.tm-head{display:grid;gap:20px;justify-items:start}
.tm-head .h2{max-width:14ch}
.tm-head .lead{max-width:38ch}
.tm-ph{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--night-2)}
.tm-team{aspect-ratio:16 / 9}
.tm-team img{object-position:50% 50%}
.tm .av{display:block;border-radius:50%;overflow:hidden;background:#D9DEE0}
.tm .av img{object-position:50% 28%}

/* Person: rundes Porträt, Name, Titel */
.tm-ps{list-style:none;margin:0;padding:0;display:grid;width:100%}
.tm-p{display:grid;grid-template-columns:56px minmax(0,1fr);gap:1px 16px;align-items:center;padding:14px 0;box-shadow:inset 0 1px 0 var(--line)}
.tm-p .av{grid-row:span 2;width:56px;height:56px}
.tm-p b{align-self:end;font:700 16.5px/1.3 var(--f-body);color:#fff}
.tm-p .ti{align-self:start;color:var(--ink-2);font-size:14px;line-height:1.4}

/* F1H2O: Ort und Jahr, ein Satz, Bildzeile; eigener Block, fällt weg, wenn Andi es streicht */
.tm-f1{display:grid;grid-template-columns:168px minmax(0,1fr);gap:24px;align-items:center;margin:0}
.tm-f1 .tm-ph{aspect-ratio:3 / 2;border-radius:10px}
.tm-f1 .tm-ph img{object-position:50% 28%}
.tm-f1 figcaption{display:grid;gap:6px;justify-items:start}
.tm-f1 em{font:700 12.5px var(--f-body);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--lagoon)}
.tm-f1 p{margin:0;color:var(--ink);font-size:15.5px;line-height:1.55;max-width:58ch;text-wrap:pretty}
.tm-f1 small{color:var(--mut);font-size:13px;line-height:1.45}

/* A Nebeneinander: Teamfoto links, rechts Text und die beiden Köpfe; das Foto zieht beim Hinscrollen scharf, dann kommen die Namen */
.tma-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 72px;align-items:center;padding-block:clamp(88px,calc(var(--vh) * 12),112px) 0}
.tma-copy{display:grid;gap:26px;justify-items:start}
.tma .tm-team img{filter:blur(14px) saturate(.5);scale:1.06;transition:filter 1.4s var(--ease),scale 1.8s var(--ease)}
.tma-in.play .tm-team img{filter:none;scale:1}
.tma .tm-p{opacity:.3;transition:opacity .8s var(--ease) calc(.7s + var(--i) * .18s)}
.tma-in.play .tm-p{opacity:1}
.tma-f1{padding-block:clamp(36px,calc(var(--vh) * 5),48px) clamp(88px,calc(var(--vh) * 12),112px)}
.tma-f1 .tm-f1{padding-top:clamp(28px,calc(var(--vh) * 4),36px);box-shadow:inset 0 1px 0 var(--line)}

@media (prefers-reduced-motion:reduce){
  .tma .tm-team img{filter:none;scale:1;transition:none}
  .tma .tm-p{opacity:1;transition:none}
}

/* ===== Sektion 9: Fragen, Vorlage D Haarlinien (Samys Wahl) =====
   Inhalt: Live-FAQ (steht auf ewave.ae viermal gleich), nur die sechs Fragen aus dem Aufbauplan, Werte nach Broschüre S. 4 und Lauser-Entwurf.
   Garantie und „unsinkbarer Rumpf“ stehen nur auf der Live-Seite, Laufzeit bei Hitze nirgends: Fragen an Andi in den Notizen. */
.fq{position:relative;background:var(--deep)}
.fq .lu{width:22px;height:22px;flex:none;color:var(--lagoon)}
.fq .lu svg{display:block;width:100%;height:100%}
.fq-head{display:grid;gap:20px;justify-items:start;align-content:start}
.fq-head .h2{max-width:12ch}
.fq-head .lead{max-width:34ch}
.fq-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 80px;align-items:start;padding-block:clamp(96px,calc(var(--vh) * 14),128px)}
.fq-in > .fq-head{position:sticky;top:112px}

/* D Haarlinien mit Kennwert: wie die gewählte Händler-Liste, rechts je Zeile der Kennwert in Lagune */
.fqd em{font:700 14.5px var(--f-body);font-style:normal;color:var(--lagoon);white-space:nowrap;text-align:right}
.fqd .la div span{max-width:48ch}

/* ===== Sektion 10: Abschluss, Samys Wahl (27.10.): A Zwei Türen, gemischt mit C Nachricht als Overlay =====
   Kanäle nur aus Quellen: WhatsApp +971 58 580 6890 und christian@ewave.ae (Lauser-Entwurf S. 3, Broschüre S. 10),
   info@ewave.ae, Antwort binnen 24 h, Adresse und Öffnungszeiten (Live-Kontaktseite). Broschüre als PDF erst nach Korrektur S. 8 (F1H2O). */
.ab{position:relative;background:var(--deep);overflow:hidden}
.ab .lu{width:20px;height:20px;flex:none;color:var(--lagoon)}
.ab .lu svg{display:block;width:100%;height:100%}
.ab-head{display:grid;gap:18px;justify-items:start;align-content:start}
.ab-head .lead{max-width:40ch}
.ab-ch{list-style:none;margin:0;padding:0;display:grid}
.ab-ch li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:12px 0;box-shadow:inset 0 -1px 0 var(--line)}
.ab-ch li:first-child{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.ab-ch .lu{grid-row:1 / span 2}
.ab-ch small{grid-column:2;font:700 11px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.ab-ch a{grid-column:2;width:fit-content;color:#fff;font:600 16px/1.35 var(--f-body);text-decoration:none;font-variant-numeric:tabular-nums;transition:color .25s var(--ease)}
.ab-ch a:hover{color:var(--lagoon)}
.ab-pdf{display:inline-flex;align-items:center;gap:10px;width:fit-content;padding-bottom:5px;color:var(--ink);font:600 15px var(--f-body);text-decoration:none;box-shadow:inset 0 -1px 0 rgba(131,237,238,.45);transition:color .25s var(--ease),box-shadow .25s var(--ease)}
.ab-pdf span{color:var(--mut);font-weight:500}
.ab-pdf:hover{color:var(--lagoon);box-shadow:inset 0 -2px 0 var(--lagoon)}
.ab-who{margin:0;color:var(--mut);font:500 14px/1.45 var(--f-body)}
.ab-who b{color:#fff;font-weight:700}

/* Fuß */
.ab-foot{box-shadow:inset 0 1px 0 var(--line);background:var(--deep)}
.ab-foot-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px 40px;align-items:center;padding-block:26px 30px;color:var(--mut);font:500 13px/1.5 var(--f-body)}
.ab-foot .logo{width:84px}
.ab-foot p{margin:0}
.ab-foot p b{color:var(--ink);font-weight:600}
.ab-foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.ab-foot-legal a{color:var(--mut);text-decoration:none;transition:color .25s var(--ease)}
.ab-foot-legal a:hover{color:#fff}

/* A Zwei Türen: Überschrift links, Satz rechts, darunter zwei gleich große Tafeln Händler und Hotels; sie steigen nacheinander auf */
.aba-in{display:grid;gap:clamp(32px,calc(var(--vh) * 5),48px);padding-block:clamp(88px,calc(var(--vh) * 12),120px) clamp(56px,calc(var(--vh) * 8),80px)}
.aba-in .ab-head{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 80px;align-items:end;justify-items:stretch}
.aba-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.aba-door{display:grid;grid-template-rows:auto auto 1fr auto;gap:20px;padding:clamp(28px,3vw,44px);border-radius:22px;background:linear-gradient(160deg,rgba(0,123,180,.16),rgba(29,162,135,.05));box-shadow:inset 0 0 0 1px rgba(131,237,238,.16);opacity:.3;translate:0 24px;transition:opacity .8s var(--ease) calc(var(--i) * .14s),translate .9s var(--ease) calc(var(--i) * .14s),box-shadow .35s var(--ease)}
.aba-doors.play .aba-door{opacity:1;translate:none}
.aba-door:hover{box-shadow:inset 0 0 0 1px rgba(131,237,238,.42)}
.aba-door h3{margin:0;display:flex;align-items:center;gap:12px;font:800 clamp(22px,.7rem + 1.1vw,30px)/1.05 var(--f-display);font-stretch:118%;text-transform:uppercase;color:#fff}
.aba-door h3 .lu{width:26px;height:26px}
.aba-door > p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.6;max-width:40ch;text-wrap:pretty}
.aba-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}

/* Overlay aus C: liegt über der ganzen Seite unter dem Kopf (Kopf z 50, Menü z 40). Das Fenster wächst per clip-path aus dem Knopf,
   der es öffnet, und schrumpft beim Schließen dorthin zurück. Links „Let’s talk!“, rechts das Chatfenster über die volle Höhe. */
.tlk{position:fixed;inset:0;z-index:45}
.tlk .lu{display:block;width:20px;height:20px;flex:none}
.tlk .lu svg{display:block;width:100%;height:100%}
.tlk-dim{position:absolute;inset:0;background:rgba(4,18,24,.66);-webkit-backdrop-filter:blur(8px) saturate(.8);backdrop-filter:blur(8px) saturate(.8)}
.tlk-panel{position:absolute;inset:calc(var(--hb,72px) + 12px) 12px 12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,44%);border-radius:24px;overflow:hidden;background:var(--deep);box-shadow:0 48px 90px -40px rgba(0,0,0,.85)}
.tlk-panel:focus{outline:none}
.tlk-side{position:relative;display:grid;align-content:end;justify-items:start;gap:24px;padding:clamp(40px,5vw,80px);isolation:isolate}
.tlk-side::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 0% 100%,rgba(29,162,135,.2),rgba(29,162,135,0) 62%),radial-gradient(60% 55% at 100% 0%,rgba(0,123,180,.14),rgba(0,123,180,0) 62%)}
.tlk-h{margin:0;font:800 clamp(52px,1rem + 5vw,96px)/.9 var(--f-display);font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;color:#fff;text-wrap:balance}
/* Meer aus Sektion 2 („Your colour“): Horizont bei 36 % und Wasserstriche in Perspektive, die ganz langsam treiben; füllt die linke Hälfte */
.tlk-sea{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.tlk-sea line{stroke:#E9F2F2;stroke-linecap:round;animation:tlkdrift var(--t,14s) ease-in-out infinite alternate}
.tlk-hz{position:absolute;z-index:-1;left:0;right:0;top:36%;height:1px;background:linear-gradient(90deg,rgba(0,123,180,0),rgba(0,123,180,.55) 22%,rgba(29,162,135,.6) 55%,rgba(59,200,97,.55) 80%,rgba(59,200,97,0));pointer-events:none}
.tlk-side .lead{max-width:32ch}
.tlk-chat{display:flex;flex-direction:column;gap:16px;min-height:0;padding:22px 28px 24px;background:linear-gradient(180deg,#0F3644,#0B2B36)}
.tlk-top{display:flex;align-items:center;gap:12px;padding:0 60px 16px 0;box-shadow:inset 0 -1px 0 var(--line)}
.tlk-av{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#007BB4,#1DA287);color:#fff;font:800 16px var(--f-display);font-stretch:125%}
.tlk-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.tlk-panel[data-role="h"] .tlk-av img{opacity:0}
.tlk-top b{display:block;color:#fff;font:700 15px/1.25 var(--f-body)}
.tlk-top small{display:block;color:var(--mut);font:500 12.5px/1.35 var(--f-body)}
.tlk-x{position:absolute;z-index:2;top:20px;right:22px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(233,242,242,.08);color:var(--ink);cursor:pointer;transition:background-color .25s var(--ease),rotate .45s var(--ease)}
.tlk-x:hover{background:rgba(233,242,242,.16);rotate:90deg}
.tlk-role{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:rgba(7,31,40,.65)}
.tlk-role button{min-height:42px;border:0;border-radius:999px;background:none;color:var(--mut);font:600 14px var(--f-body);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.tlk-role button:hover{color:#fff}
.tlk-role button[aria-checked="true"]{background:var(--lagoon);color:var(--night)}
.tlk-thread{flex:1 1 auto;display:grid;min-height:96px;align-content:end}
.tlk-thread > *{grid-area:1 / 1}
.tlk-typing{justify-self:end;align-self:end;display:flex;gap:4px;padding:13px 15px;border-radius:16px 16px 4px 16px;background:rgba(131,237,238,.14);opacity:0}
.tlk-typing i{width:6px;height:6px;border-radius:50%;background:var(--lagoon);animation:tlktyp 1s infinite}
.tlk-typing i:nth-child(2){animation-delay:.15s}
.tlk-typing i:nth-child(3){animation-delay:.3s}
/* Verlauf bleibt leer, bis gesendet wird; dann tippt es kurz und die Nachricht steht als Blase da, darunter wohin es weitergeht */
.tlk-thread:not(.sent) > *{display:none}
.tlk-msg{justify-self:end;align-self:end;display:grid;justify-items:end;gap:6px;max-width:90%}
.tlk-bubble{margin:0;padding:13px 16px;border-radius:18px 18px 4px 18px;background:linear-gradient(160deg,rgba(131,237,238,.22),rgba(29,162,135,.18));color:#fff;font:500 15px/1.5 var(--f-body);overflow-wrap:anywhere}
.tlk-note{display:flex;align-items:center;gap:6px;color:var(--lagoon);font:600 12.5px/1.3 var(--f-body)}
.tlk-note::before{content:"";width:14px;height:8px;border:solid currentColor;border-width:0 0 2px 2px;rotate:-45deg;translate:0 -2px}
.tlk-thread.sent .tlk-typing{animation:tlktyv .7s both}
.tlk-thread.sent .tlk-msg{animation:tlkbub .5s var(--ease) .55s both}
.tlk-comp{display:grid;gap:12px}
.tlk-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tlk-f{display:grid;gap:6px;min-width:0}
.tlk-f > span{font:700 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.tlk-f > span em{font-style:normal;font-weight:600;letter-spacing:.02em;text-transform:none;color:rgba(157,183,189,.8)}
.tlk-f input,.tlk-f textarea{min-width:0;width:100%;margin:0;padding:11px 14px;border:0;border-radius:12px;background:rgba(233,242,242,.06);box-shadow:inset 0 0 0 1px var(--line);color:#fff;font:500 15px/1.45 var(--f-body);caret-color:var(--lagoon);transition:box-shadow .2s var(--ease),background-color .2s var(--ease)}
.tlk-f input{height:46px}
.tlk-f textarea{display:block;min-height:72px;max-height:150px;resize:none;field-sizing:content;scrollbar-width:thin;scrollbar-color:rgba(131,237,238,.35) transparent}
.tlk-f input::placeholder,.tlk-f textarea::placeholder{color:var(--mut)}
.tlk-f input:focus,.tlk-f textarea:focus{outline:none;background:rgba(233,242,242,.09);box-shadow:inset 0 0 0 1.5px var(--lagoon)}
/* „Send on“ mit zwei Symbol-Knöpfen; der vorausgewählte (Händler WhatsApp, Hotels E-Mail) ist gefüllt, Enter in Firma/Land sendet darüber */
.tlk-send{display:grid;gap:8px;margin-top:4px}
.tlk-send > span{font:700 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.tlk-chs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tlk-ch{display:grid;place-items:center;height:54px;border-radius:999px;color:#fff;background:rgba(233,242,242,.06);box-shadow:inset 0 0 0 1px rgba(233,242,242,.3);-webkit-tap-highlight-color:transparent;transition:box-shadow .3s var(--ease),background-position .6s var(--ease),scale .15s var(--ease)}
.tlk-ch svg{display:block;width:24px;height:24px}
.tlk-ch .lu{width:24px;height:24px;color:inherit}
.tlk-ch:hover{box-shadow:inset 0 0 0 1.5px var(--lagoon)}
.tlk-ch:active,.tlk-ch.prs{scale:.96}
.tlk-ch.pre{background:linear-gradient(100deg,#00699A,#0F8A78 42%,#1E9A55 68%,#0F8A78 84%,#00699A);background-size:260% 100%;box-shadow:0 10px 30px -12px rgba(29,162,135,.7)}
.tlk-ch.pre:hover{background-position:62% 0;box-shadow:0 16px 38px -14px rgba(59,200,97,.75)}
@keyframes tlktyp{0%,60%,100%{opacity:.3;translate:0 0}30%{opacity:1;translate:0 -3px}}
@keyframes tlktyv{0%,85%{opacity:1}100%{opacity:0}}
@keyframes tlkbub{from{opacity:0;translate:0 10px}}
@keyframes tlkdrift{from{translate:calc(var(--dx,12px) * -1) 0}to{translate:var(--dx,12px) 0}}

@media (prefers-reduced-motion:reduce){
  .aba-door{opacity:1;translate:none;transition:none}
  .tlk-sea line{animation:none}
  .tlk-thread.sent .tlk-typing{display:none}
  .tlk-thread.sent .tlk-msg,.tlk-typing i{animation:none}
  .tlk-x,.tlk-av img,.tlk-ch{transition:none}
}

/* Schmale Rahmen (Handy) */
@media (max-width:1100px){.nav .n-about,.hdr .lang{display:none}}
@media (max-width:899px){
  .nav,.pb-portal span{display:none}
  .burger{display:grid}
  .bar{width:calc(100% - 20px);margin-top:10px;min-height:54px;padding:5px 5px 5px 18px;gap:12px}
  .site.docked .bar{padding:6px 20px}
  .right{gap:8px}
  .pb-portal{width:44px;padding:0}
  .logo{width:92px}
  .wrap{padding-inline:20px}
  .zoom{inset:-18% 0 18% 0}
  .still{object-position:70% 50%}
  .slot{top:76px;right:16px}
  .qb{--hz:.48;--vpx:1;--ex:.5;--ey:.66;--bw:100vw}
  .qb-head{padding-top:88px;gap:14px}
  .k3-in{padding-block:96px 72px}
  .b3-sw{display:flex;width:100%}.b3-sw button{flex:1;padding:0 12px}
  .g .g-num{font-size:54px}.g .g-unit{font-size:15px}.g .g-ticks text{font-size:15px}
  .c3-list{display:grid}
  .c3-tb,.cp-h,.cp-charge{display:none}
  .cp-tb{display:grid;grid-template-columns:1fr 1fr;max-width:none}
  .cp{grid-template-columns:1fr;gap:22px;margin-top:4px;padding-top:30px}
  .cp-inst{gap:4px 14px}
  .cp .g{max-width:none}
  .cp-inst,.cp-charge{grid-column:auto;grid-row:auto}
  .cp-charge{align-items:flex-start;max-width:none}
  .c3-sheet{gap:12px}
  .c3-draw{margin-bottom:10px}
}
@media (max-width:899px){
  .pb-portal .t{display:none}
  .ls-in{grid-template-columns:1fr;gap:28px;padding-block:88px 72px}
  .ls-copy{position:static;gap:16px}
  .la li{grid-template-columns:22px minmax(0,1fr);column-gap:14px}
  .la em{grid-column:2;text-align:left;padding-top:4px}
}
@media (max-width:899px){
  .vs-in{padding-block:88px 72px;gap:30px}
  .va::before,.va-hr{display:none}
  .va-row{grid-template-columns:1fr;padding:16px 0 18px}
  .va-hr + .va-row{box-shadow:none}
  .va-old,.va-new{padding:0}
  .va-old{font-size:14px;margin-bottom:10px}
  .va-old .lu{width:18px;height:18px}
}
@media (max-width:899px){
  .rs-in{padding-block:88px 72px;gap:30px}
  .rs-e{grid-template-columns:1fr}
  .rs-flow{padding-top:36px}
  .ra-steps{grid-template-columns:1fr;gap:26px}
  .ra-steps::before,.ra-steps::after{display:none}
  .ra-steps li{grid-template-columns:36px minmax(0,1fr);column-gap:16px;row-gap:4px}
  .ra-steps i{grid-row:span 2}
  .ra-steps b{margin-top:7px}
  .ra-steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:42px;bottom:-22px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--teal),var(--growth));transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease) calc(var(--i) * .45s + .3s)}
  .ra-steps.play li::after{transform:none}
  .rd-cols{grid-template-columns:1fr;gap:14px}
  .rs-end .pb{width:100%}
}
@media (max-width:899px){
  .sv .pb-portal{width:auto;padding:12px 22px}
  .sv .pb-portal .t{display:inline-block}
  .sva-in{grid-template-columns:1fr;gap:56px;padding-block:88px 40px}
  .sva-body{grid-template-columns:1fr;min-height:0}
  .sva-nav{display:none}
  .sva-res{grid-template-columns:1fr}
  .sva-list li:nth-child(n+3){display:none}
  .sva-cur svg{display:none}
  .svx-badge{width:96px;height:96px;right:-6px;top:-40px}
  .svx-mid b{font-size:21px}
  .svx-mid span{font-size:8.5px}
  .svx-in{padding-bottom:72px}
  .svx-mods{grid-template-columns:1fr 1fr;column-gap:16px}
  .svx-mods li{grid-template-columns:1fr;gap:6px;padding:14px 0 16px}
  .svx-mods .lu{grid-row:auto;translate:none}
  .svx-mods b{font-size:15px}
  .svx-mods span:not(.lu){font-size:13px}
}
@media (max-width:899px){
  .tm-head .h2{max-width:12ch}
  .tma-in{grid-template-columns:1fr;gap:26px;padding-block:88px 0}
  .tma-copy{display:contents}
  .tma .tm-head{order:-1}
  .tma-f1{padding-block:30px 72px}
  .tm-f1{grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:start}
  .tm-f1 .tm-ph{aspect-ratio:1;border-radius:10px}
  .tm-f1 p{font-size:14.5px}
  .tm-f1 small{display:none}
}
@media (max-width:899px){
  .fq-in{grid-template-columns:1fr;gap:28px;padding-block:88px 72px}
  .fq-in > .fq-head{position:static}
  .fqd .la li{grid-template-columns:22px minmax(0,1fr);column-gap:14px;padding:16px 0 17px}
  .fqd .la b{font-size:16px}
  .fqd .la div span{font-size:14.5px}
  .fqd .la em{display:none}
}
@media (max-width:899px){
  .ab-foot-in{grid-template-columns:1fr;gap:12px;padding-block:28px 40px}
  .aba-in{gap:28px;padding-block:88px 56px}
  .aba-in .ab-head{grid-template-columns:1fr}
  .aba-doors{grid-template-columns:1fr;gap:14px}
  .aba-door{gap:16px;padding:24px 20px}
  .aba-door > p{font-size:15px}
  .tlk-panel{inset:calc(var(--hb,64px) + 8px) 8px 8px;display:flex;flex-direction:column;border-radius:22px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .tlk-side{flex:none;gap:10px;padding:22px 72px 16px 20px}
  .tlk-sea,.tlk-hz{display:none}
  .tlk-h{font-size:38px}
  .tlk-side .lead{font-size:15px}
  .tlk-chat{flex:1 0 auto;gap:12px;padding:16px 16px 18px}
  .tlk-f textarea{min-height:60px}
  .tlk-top{padding-right:0}
  .tlk-x{top:18px;right:14px}
  .tlk-thread{min-height:0}
}
@media (max-width:520px){.ctas{width:100%}.ctas .pb{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){
  .still,.og,.pb-dealer,.pb-portal::before,.menu,.ic *,.c3-svg *{animation:none!important}
  .bar{transition-duration:.01s}
  .ic .arc,.ic .x,.c3-svg .ext,.c3-svg .dl,.c3-svg .ld{stroke-dashoffset:var(--off,0)}
  .ic-gauge .ndl{transform:rotate(var(--to,62deg))}
  .ic .cell,.c3-svg .ar,.c3-svg .dt,.c3-svg .lab text,.c3-svg .pt-in{opacity:1}
}
/* ===== Regie (Samys Wahl 28.10.): Pult, neun Übergänge fest, Inhaltsumbau nach der Kürzungsliste ===== */

/* Pult-Werte wirken über zwei Faktoren auf der Seite */
.site{--ts:1;--gap:1}
.hero{--h1:calc(clamp(28px,1rem + 2.6vw,58px) * var(--ts))}
.h2{font-size:calc(clamp(26px,.8rem + 2.2vw,44px) * var(--ts))}
.lead{font-size:calc(clamp(15px,.9rem + .2vw,17px) * var(--ts))}
.sub{font-size:calc(clamp(15.5px,.9rem + .3vw,18px) * var(--ts))}
.rs-h3{font-size:calc(clamp(20px,.6rem + 1vw,26px) * var(--ts))}
.la b,.va-new b{font-size:calc(17px * var(--ts))}
.la div span{font-size:calc(15px * var(--ts))}
.k3-in{padding-block:calc(clamp(104px,calc(var(--vh) * 15),136px) * var(--gap)) calc(clamp(72px,calc(var(--vh) * 11),112px) * var(--gap))}
.ls-in,.vs-in,.fq-in{padding-block:calc(clamp(96px,calc(var(--vh) * 14),128px) * var(--gap))}
.tma-in{padding-top:calc(clamp(88px,calc(var(--vh) * 12),112px) * var(--gap))}
.tma-f1{padding-bottom:calc(clamp(88px,calc(var(--vh) * 12),112px) * var(--gap))}
.aba-in{padding-block:calc(clamp(88px,calc(var(--vh) * 12),120px) * var(--gap)) calc(clamp(56px,calc(var(--vh) * 8),80px) * var(--gap))}

/* Sektions-Animationen aus (Pult): Schleifen und Einblendungen stehen, Übergänge und Bühnen laufen weiter */
.site[data-sec="aus"] .scroller > section :is(.still,.og,.qb-sea line,.svx-badge .hand,.ic *,.c3-svg *,.tm-sl img,.tm-sl video){animation:none!important}
.site[data-sec="aus"] .scroller > section :is(.la li,.la li > *,.la li::after,.va-old,.va-new,.ra-steps *,.c3-svg *,.aba-door,.cp-akku,.sv-v,.sv-v *,.svx-badge,.g-ndl,.g .g-val){transition:none!important}

/* Überschriften (global, Pult): Wörter steigen aus ihrer Zeile oder eine Maske öffnet sich, einmal beim Hereinkommen */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wdi{display:inline-block}
.chr{visibility:inherit}
.site[data-hd="woerter"] .scroller .h2 .wdi{transition:transform .95s var(--ease) calc(var(--wi,0) * 50ms)}
.site[data-hd="woerter"] .scroller .h2:not(.hin) .wdi{transform:translateY(108%)}
.site[data-hd="maske"] .scroller .h2{transition:clip-path 1.05s var(--ease-form),translate 1.05s var(--ease)}
.site[data-hd="maske"] .scroller .h2:not(.hin){clip-path:inset(0 0 100% 0);translate:0 .3em}
.hl{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}

/* Hero: Andis Malediven-Clip (YouTube 1080p) als Platzhalter bis zum Original */
.hvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%}

/* Ebene für fliegende Elemente der Übergänge (über der Seite, unter Kopf und Chat) */
.fx{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.fx > *{position:absolute;left:0;top:0;opacity:0}
.fx-boat img{position:absolute;left:0;top:0;display:block;max-width:none;transform-origin:50% 50%}
.fx-svg{width:100%;height:100%;opacity:1;overflow:visible}
.fx-svg .th{fill:none;stroke:url(#og);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1}

/* Tiefe: die nächste Sektion liegt als Blatt über der vorigen */
.u-sheet{position:relative;z-index:2;overflow:clip;border-radius:28px 28px 0 0;margin-top:-28px;box-shadow:0 -30px 60px -26px rgba(2,14,18,.85)}
.u1-hz{position:absolute;z-index:2;left:0;right:0;height:1px;bottom:0;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,123,180,0),rgba(0,123,180,.7) 22%,rgba(29,162,135,.8) 55%,rgba(59,200,97,.7) 80%,rgba(59,200,97,0))}
.u4-wave{position:absolute;z-index:3;left:0;top:-60px;width:100%;height:120px;overflow:visible;pointer-events:none}
.u4-wave path{fill:none;stroke:url(#og);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u7-caret{display:inline-block;width:.08em;height:.9em;margin-left:.04em;vertical-align:-.06em;background:var(--lagoon);animation:caret 1s steps(1) infinite}
.aba-in{position:relative;z-index:1}
.ab-foot{position:relative;z-index:1}

/* Kennzahlen: Akku im Hintergrund von „Choose your pace“ (Linienzeichnung als Platzhalter bis zum Render) */
.cp{position:relative;isolation:isolate}

/* Platzhalter Weltkarte mit Globus-Gerüst (Ziel für Übergang 3) */
@keyframes mappulse{0%{opacity:.8;scale:.4}100%{opacity:0;scale:2.6}}

/* Vergleich: vier Paare ohne Beschreibung */
.va-new{align-items:center}

/* ===== Sektion 6 Hotels: Bühne mit stehender Überschrift, zwei Karten fliegen übereinander; darunter How it works als Reiter ===== */
.rs{position:relative;background:var(--night)}
.rs-stage{position:relative;height:calc(calc(var(--vh) * 100) + calc(var(--vh) * 95))}
.rs-pin{position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden;display:grid;align-content:center}
.rs-pin-in{display:grid;gap:clamp(22px,calc(var(--vh) * 3.6),36px);padding-top:76px}
.rs-title{max-width:30ch}
.rs-deck{position:relative;display:grid}
.rs-slide{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);align-items:center;padding:clamp(12px,1.2vw,18px);border-radius:24px;background:#0D3240;box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -48px rgba(0,0,0,.85);transform-origin:50% 0}
.rs-slide + .rs-slide{background:#0F3A4A;box-shadow:inset 0 0 0 1px rgba(131,237,238,.2),0 -30px 70px -40px rgba(0,0,0,.9)}
.rs-media{position:relative;aspect-ratio:16 / 10;border-radius:16px;overflow:hidden;background:var(--deep);transform-origin:0 0}
.rs-media :is(video,img){display:block;width:100%;height:100%;object-fit:cover}
.rs-txt{display:grid;gap:14px;align-content:center;padding-right:clamp(6px,1.6vw,24px)}
.rs .lu{width:22px;height:22px;flex:none;color:var(--lagoon)}
.rs .lu svg{display:block;width:100%;height:100%}
.rs-pts{list-style:none;margin:0;padding:0;display:grid}
.rs-pts li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 14px;padding:13px 0;box-shadow:inset 0 1px 0 var(--line)}
.rs-pts .lu{grid-row:span 2;translate:0 2px}
.rs-pts b{font:700 calc(16.5px * var(--ts))/1.35 var(--f-body);color:#fff}
.rs-pts span:not(.lu){color:var(--ink-2);font-size:calc(14.5px * var(--ts));line-height:1.45}
.rs-stage.flat{height:auto}
.rs-stage.flat .rs-pin{position:static;height:auto;padding-block:calc(clamp(96px,calc(var(--vh) * 14),128px) * var(--gap)) 0}
.rs-stage.flat .rs-deck{gap:16px}
.rs-stage.flat .rs-slide{grid-area:auto;transform:none!important;filter:none!important}
.rs-after{display:grid;gap:clamp(28px,calc(var(--vh) * 5),44px);padding-block:clamp(36px,calc(var(--vh) * 6),56px) calc(clamp(96px,calc(var(--vh) * 14),128px) * var(--gap))}
.rs-how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 72px;align-items:start;padding-top:clamp(36px,calc(var(--vh) * 6),56px);box-shadow:inset 0 1px 0 var(--line)}
.rs-how-l{display:grid;gap:20px;align-content:start}
.rs-tabs{display:grid;gap:4px}
.rs-tab{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:14px;min-height:56px;padding:8px 14px 8px 8px;border:0;border-radius:14px;background:none;color:var(--ink-2);font:700 calc(16px * var(--ts)) var(--f-body);text-align:left;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.rs-tab i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(233,242,242,.25);font:800 14px/1 var(--f-display);font-style:normal;color:var(--mut);transition:box-shadow .3s,color .3s,background-color .3s}
.rs-tab:hover{color:#fff;background:rgba(233,242,242,.04)}
.rs-tab[aria-selected="true"]{background:rgba(131,237,238,.08);color:#fff}
.rs-tab[aria-selected="true"] i{box-shadow:inset 0 0 0 1.5px var(--lagoon);background:#0E4150;color:#fff}
.rs-pans{display:grid}
.rs-pan{grid-area:1 / 1;margin:0;display:grid;gap:14px;align-content:start;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.rs-pan.on{opacity:1;visibility:visible;transition:opacity .55s var(--ease)}
.rs-pan img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:16px;background:var(--deep)}
.rs-pan figcaption{color:var(--ink);font-size:calc(16px * var(--ts));line-height:1.55;max-width:54ch;text-wrap:pretty}
.rs-end{display:flex}

/* ===== Sektion 7 Service: Bühne mit Portal-Bildschirm; erst Chat mit Video, dann die Funktionen nacheinander ===== */
.sv{position:relative;background:var(--deep)}
.sv .lu{width:22px;height:22px;flex:none;color:var(--lagoon)}
.sv .lu svg{display:block;width:100%;height:100%}
.sv-head{display:grid;gap:18px;justify-items:start}
.sv-head .h2{max-width:18ch}
.sv-stage{position:relative;height:calc(calc(var(--vh) * 100) + calc(var(--vh) * 150))}
.sv-pin{position:sticky;top:0;height:calc(var(--vh) * 100);display:grid;align-content:center;overflow:hidden}
.sv-pin-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:center;padding-top:76px}
.sv-scr{position:relative;border-radius:18px;overflow:hidden;background:#0A2530;box-shadow:0 0 0 1px rgba(131,237,238,.18),0 40px 80px -40px rgba(0,0,0,.7)}
.sv-views{position:relative;height:clamp(300px,calc(var(--vh) * 50),430px);overflow:hidden}
.sv-v{position:absolute;inset:0;padding:22px;display:grid;opacity:0;visibility:hidden;translate:0 12px;transition:opacity .35s var(--ease),translate .5s var(--ease),visibility 0s .35s}
.sv-v.on{opacity:1;visibility:visible;translate:none;transition:opacity .5s var(--ease) .08s,translate .7s var(--ease) .08s}
.sv-v small{color:var(--mut);font:500 12px var(--f-body)}
.sv-chat{align-content:end;gap:12px}
.sv-bub{margin:0;max-width:80%;padding:11px 15px;font:500 14.5px/1.45 var(--f-body)}
.sv-bub.me{justify-self:end;min-height:44px;border-radius:16px 16px 4px 16px;background:linear-gradient(160deg,rgba(131,237,238,.22),rgba(29,162,135,.18));color:#fff}
.sv-type:empty::after{content:"";display:inline-block;width:1.5px;height:16px;vertical-align:-3px;background:var(--lagoon);animation:caret 1s steps(1) infinite}
.sv-dots{justify-self:start;display:flex;gap:4px;padding:13px 15px;border-radius:16px 16px 16px 4px;background:rgba(233,242,242,.06);opacity:0}
.sv-dots i{width:6px;height:6px;border-radius:50%;background:var(--lagoon);animation:tlktyp 1s infinite}
.sv-dots i:nth-child(2){animation-delay:.15s}.sv-dots i:nth-child(3){animation-delay:.3s}
.sv-bub.bot{justify-self:start;display:grid;gap:10px;border-radius:16px 16px 16px 4px;background:rgba(233,242,242,.06);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);opacity:0;translate:0 10px;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.sv-chat > *{grid-area:auto}
.sv-chat.s2 .sv-dots{opacity:1}
.sv-chat.s3 .sv-dots{display:none}
.sv-chat.s3 .sv-bub.bot{opacity:1;translate:none}
.sv-card,.sv-player{position:relative;border-radius:12px;overflow:hidden;background:var(--deep)}
.sv-card{width:min(300px,62vw);aspect-ratio:16 / 10}
.sv-card img,.sv-player img{display:block;width:100%;height:100%;object-fit:cover}
.sv-card::after,.sv-player::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,31,40,.7),rgba(7,31,40,0) 55%)}
.sv-chat.s4 .sva-play,.sv-vid.on .sva-play{opacity:0;scale:.8}
.sv-chat.s4 .sva-bar::after,.sv-vid.on .sva-bar::after{transform:scaleX(.6);transition:transform 6s linear}
.sv-vid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:start}
.sv-player{aspect-ratio:16 / 10}
.sv-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sv-list li{padding:10px 12px;border-radius:10px;font:600 13px/1.35 var(--f-body);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.sv-list li small{display:block;margin-top:2px}
.sv-list li.hit{background:rgba(131,237,238,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(131,237,238,.4)}
.sv-vh{margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font:700 16px var(--f-body);color:#fff}
.sv-chk{align-content:start;gap:8px}
.sv-cks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sv-cks li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font:600 14px/1.35 var(--f-body);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .4s var(--ease) calc(.25s + var(--i) * .32s),color .4s calc(.25s + var(--i) * .32s)}
.sv-cks i{position:relative;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(233,242,242,.3);transition:background-color .35s var(--ease) calc(.25s + var(--i) * .32s),box-shadow .35s calc(.25s + var(--i) * .32s)}
.sv-cks i::after{content:"";position:absolute;left:7px;top:5px;width:6px;height:10px;border:solid var(--night);border-width:0 2px 2px 0;rotate:45deg;scale:0;transition:scale .35s cubic-bezier(.3,1.6,.5,1) calc(.35s + var(--i) * .32s)}
.sv-chk.on .sv-cks li{color:#fff;background:rgba(131,237,238,.06)}
.sv-chk.on .sv-cks i{background:var(--lagoon);box-shadow:none}
.sv-chk.on .sv-cks i::after{scale:1}
.sv-sign{justify-self:end;font:700 12.5px var(--f-body);color:var(--lagoon);opacity:0;transition:opacity .4s 1.7s}
.sv-chk.on .sv-sign{opacity:1}
.sv-shop{align-content:center}
.sv-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sv-part{display:grid;gap:8px;justify-items:start;padding:18px 16px;border-radius:14px;background:rgba(233,242,242,.04);box-shadow:inset 0 0 0 1px var(--line);opacity:0;translate:0 14px;transition:opacity .5s var(--ease) calc(.15s + var(--i) * .14s),translate .6s var(--ease) calc(.15s + var(--i) * .14s)}
.sv-part .lu{width:28px;height:28px}
.sv-part b{font:700 15px/1.3 var(--f-body);color:#fff}
.sv-part small::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--growth)}
.sv-shop.on .sv-part{opacity:1;translate:none}
.sv-docs{align-content:center}
.sv-files{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sv-files li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);opacity:0;translate:-10px 0;transition:opacity .45s var(--ease) calc(.1s + var(--i) * .12s),translate .55s var(--ease) calc(.1s + var(--i) * .12s)}
.sv-files b{font:600 14.5px var(--f-body);color:#fff}
.sv-docs.on .sv-files li{opacity:1;translate:none}
.sv-rail{list-style:none;margin:0;padding:0;display:grid}
.sv-rail li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 16px;padding:15px 0 16px;box-shadow:inset 0 1px 0 var(--line);opacity:.34;transition:opacity .5s var(--ease)}
.sv-rail li.on{opacity:1}
.sv-rail .lu{grid-row:span 2;width:24px;height:24px;translate:0 1px}
.sv-rail b{font:700 calc(16.5px * var(--ts))/1.3 var(--f-body);color:#fff}
.sv-rail span:not(.lu){color:var(--ink-2);font-size:calc(14.5px * var(--ts));line-height:1.45}
.sv-rail li.on .lu :is(path,circle,rect,polygon,line,polyline){stroke-dasharray:1;animation:svdraw 1.1s var(--ease) both}
@keyframes svdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.sv-stage.flat{height:auto}
.sv-stage.flat .sv-pin{position:static;height:auto;padding-block:40px calc(clamp(96px,calc(var(--vh) * 14),128px) * var(--gap))}
.sv-stage.flat .sv-rail li{opacity:1}
.sv .svx-badge{right:-30px;top:-40px}

/* ===== Sektion 8 Team: Wechsler mit Bildern und Clips aus dem Alltag, Pfeile statt Seitwärts-Scrollen ===== */
.tm-sw{position:relative;margin:0;aspect-ratio:16 / 10;border-radius:14px;overflow:hidden;background:var(--night-2);touch-action:pan-y}
.tm-sl{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.tm-sl.on{opacity:1}
.tm-sl :is(img,video){display:block;width:100%;height:100%;object-fit:cover;scale:1.05;transition:scale 7s linear}
.tm-sl.on :is(img,video){scale:1}
.tm-sw-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:48px 12px 12px 18px;background:linear-gradient(0deg,rgba(7,31,40,.88),rgba(7,31,40,0))}
.tm-sw-t{margin-right:auto;font:700 14.5px/1.3 var(--f-body);color:#fff}
.tm-sw-n{font:600 12.5px var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums;margin-right:4px}
.tm-sw-b{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(233,242,242,.12);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .25s var(--ease),scale .15s var(--ease)}
.tm-sw-b:hover{background:rgba(233,242,242,.24)}
.tm-sw-b:active{scale:.94}
.tm-sw-b .lu{width:20px;height:20px;color:#fff}

/* Fragen: am Handy zugeklappt (Samy) */
.fq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:-10px 0;padding:10px 0;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer}
.fq-q b{margin:0}
.fq-q .lu{width:20px;height:20px;color:var(--mut);transition:rotate .35s var(--ease)}
.fq-q[aria-expanded="true"] .lu{rotate:180deg;color:var(--lagoon)}

/* Abschluss: Kopf nur noch die Überschrift */
.aba-in .ab-head{grid-template-columns:1fr}

@media (max-width:899px){
  .k3-in{padding-block:calc(96px * var(--gap)) calc(72px * var(--gap))}
  .ls-in,.vs-in,.fq-in{padding-block:calc(88px * var(--gap)) calc(72px * var(--gap))}
  .tma-in{padding-top:calc(88px * var(--gap))}
  .tma-f1{padding-bottom:calc(72px * var(--gap))}
  .aba-in{padding-block:calc(88px * var(--gap)) calc(56px * var(--gap))}
  .hvid{object-position:62% 50%}
  .rs-stage{height:calc(calc(var(--vh) * 100) + calc(var(--vh) * 90))}
  .rs-pin-in{gap:18px;padding-top:70px}
  .rs-slide{grid-template-columns:1fr;gap:14px;padding:10px 10px 4px;border-radius:20px}
  .rs-media{border-radius:13px}
  .rs-txt{gap:6px;padding:0 6px}
  .rs-pts li{padding:9px 0}
  .rs-pts span:not(.lu){font-size:calc(13.5px * var(--ts))}
  .rs-pts b{font-size:calc(15px * var(--ts))}
  .rs-after{padding-block:28px calc(72px * var(--gap))}
  .rs-how{grid-template-columns:1fr;gap:18px;padding-top:32px}
  .rs-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .rs-tab{grid-template-columns:1fr;justify-items:center;gap:8px;min-height:0;padding:10px 4px;font-size:calc(13px * var(--ts));text-align:center;line-height:1.25}
  .rs-pan figcaption{font-size:calc(15px * var(--ts))}
  .rs-end .pb{width:100%}
  .sv-stage{height:calc(calc(var(--vh) * 100) + calc(var(--vh) * 140))}
  .sv-pin-in{grid-template-columns:1fr;gap:20px;padding-top:70px}
  .sv-views{height:300px}
  .sv-card{width:min(220px,56vw)}
  .sv-bub{font-size:14px;padding:10px 13px}
  .sv-v{padding:16px}
  .sv-vid{grid-template-columns:1fr}
  .sv-vid .sv-list li:nth-child(n+3){display:none}
  .sv-parts{grid-template-columns:1fr;gap:8px}
  .sv-part{grid-template-columns:28px minmax(0,1fr);align-items:center;gap:2px 14px;padding:12px 14px}
  .sv-part .lu{grid-row:span 2}
  .sv-files li{padding:11px 12px}
  .sv-rail li{grid-template-columns:22px minmax(0,1fr);padding:8px 0 9px}
  .sv-rail .lu{width:22px;height:22px}
  .sv-rail b{font-size:calc(15px * var(--ts))}
  .sv-rail li:not(.on) span:not(.lu){display:none}
  .sv .svx-badge{right:-6px;top:-34px}
  .tm-sw{aspect-ratio:4 / 3}
  .tm-sw-bar{padding:40px 8px 8px 14px}
  .tm-sw-t{font-size:13.5px}
  .fqd .la li:not(.open) div > span:not(.lu){display:none}
  .fqd .la li{padding-block:14px 15px}
}
@media (prefers-reduced-motion:reduce){
  .site .scroller .h2 .wdi{transform:none!important;transition:none!important}
  .site .scroller .h2{clip-path:none!important;translate:none!important}
  .rs-pan,.sv-v,.sv-part,.sv-files li,.sv-cks *,.tm-sl,.tm-sl *{transition:none!important}
  .sv-rail li.on .lu *{animation:none!important}
}

/* ===== Stufe 13 (Samys Wahl 28.10.) ===== */
/* Sektion 2 und 3 teilen einen klebenden Meeres-Grund (Samy: der Grund von 2 geht mit hinüber, kein Sprung auf flaches Petrol).
   Horizont und Wasserstriche liegen jetzt hier statt in der Farb-Bühne; beide Sektionen sind durchsichtig. */
.sea2{--hz:.42;--vpx:.92}
.sea2-bd{position:sticky;top:0;z-index:0;height:calc(var(--vh) * 100);margin-bottom:calc(var(--vh) * -100);overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#0B2B36 0%,#0E3646 calc(var(--hz) * 100%),#0C3242 calc(var(--hz) * 100%),#082531 calc(var(--hz) * 100% + calc(var(--vh) * 18)),#05171E 100%)}
.sea2 .qb,.sea2 .qb-pin,.sea2 .k3{background:none}

/* Service: Überschrift steht in der Bühne und bleibt sichtbar, solange sie läuft (Samy) */
.sv-pin-in{gap:clamp(22px,calc(var(--vh) * 3.6),36px) 64px;padding-top:clamp(84px,calc(var(--vh) * 11),100px)}
.sv-pin .sv-head{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 48px}
.sv-pin .sv-head .h2{max-width:24ch}
.sv-pin .sv-head .lead{max-width:38ch}
.sv-views{height:clamp(280px,calc(var(--vh) * 44),400px)}

@media (max-width:899px){
  .sea2{--hz:.48;--vpx:1}
  .sv-pin-in{gap:16px;padding-top:76px}
  .sv-pin .sv-head{gap:8px}
  .sv-views{height:272px}
}
/* ===== Globus und Akku eingebaut (28.10.): Akku-Experiment KJR5y5XPZCX872AiVFuXgF, Globus-Experiment Ed7svpnMiZ7GMVY6RLWLBy ===== */

/* Sektion 3, Cockpit dreispaltig: Text und Ladezeile links, Akku in der Mitte, Anzeigen rechts (1232 statt 940 breit) */
.cp{grid-template-columns:330px minmax(0,1fr) 430px;grid-template-areas:"copy ak inst" "chg ak inst";gap:22px 36px;max-width:1232px}
.cp-copy{grid-area:copy;align-self:end;position:relative;z-index:2}
.cp-inst{grid-area:inst;position:relative;z-index:2}
.cp-charge{grid-area:chg;align-self:start;position:relative;z-index:2}
.cp-tb{grid-area:tab}
.ak3{grid-area:ak;position:relative;z-index:0;align-self:center;width:calc(100% + 240px);margin:-70px -120px -40px;cursor:pointer;border-radius:12px}
.ak3:focus-visible{outline:2px solid var(--lagoon);outline-offset:4px}
.g-time.off .g-val,.g-time.off .g-track{opacity:0;transition:none}

/* Sektion 4 auf einem Bildschirm: klebt, solange der Globus auftritt; die Erde zeichnet die Ebene .glb in den Platzhalter .dl-g */
/* Der Meeres-Grund (.sea2-bd) klebt bis zum Ende von Sektion 3 und liegt danach hinter dem ersten Bildschirm von Sektion 4:
   dort bleibt sie durchsichtig, der Grund läuft ohne Kante weiter und endet in #05171E, von da an Nachtblau */
.dealer{position:relative;height:calc(var(--vh) * 200);background:linear-gradient(180deg,transparent 0,transparent calc(var(--vh) * 100),#05171E calc(var(--vh) * 100),var(--night) calc(var(--vh) * 170))}
.dl-pin{position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden}
.dl-in{height:100%;display:grid;grid-template-columns:560px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"h g" "b g" "b l";column-gap:48px;padding-block:104px 56px}
.dl-in > *{min-width:0}
.dl-h{grid-area:h}
.dl-g{grid-area:g;min-height:0}
.dl-b{grid-area:b;display:grid;justify-items:start;align-content:start;margin-top:44px}
.dl-v{margin:22px 0 0;padding:0;list-style:none;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 36px}
.dl-v li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:3px 14px;padding-top:15px}
.dl-v li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--teal),rgba(131,237,238,.35) 30%,var(--line) 70%);transform:scaleX(var(--a,1));transform-origin:left}
.dl-v .lu{grid-row:span 2;width:22px;height:22px;color:var(--lagoon);translate:0 1px}
.dl-v .lu svg{display:block;width:100%;height:100%}
.dl-v b{font:700 15.5px/1.3 var(--f-body);color:#fff}
.dl-v em{font:600 13px/1.35 var(--f-body);font-style:normal;color:var(--lagoon)}
.dealer .pb{margin-top:34px}
.dl-lg{grid-area:l;margin:0;padding:0;list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 30px}
.dl-lg li{display:flex;align-items:center;gap:10px;font:600 14px/1.2 var(--f-body);color:var(--ink-2)}
.dl-lg b{font:800 22px/1 var(--f-display);font-stretch:118%;color:#fff;font-variant-numeric:tabular-nums}
.dl-lg i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--lagoon)}
.dl-lg i.a{background:var(--growth)}
/* Ebene der Erde: über dem Inhalt, unter Kopfleiste, Menü und Chat */
.glb{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.glb canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.glb .dxb{position:absolute;left:0;top:0;font:700 12px/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 8px rgba(4,22,29,.9);opacity:0;will-change:transform}

@media (max-width:899px){
  /* Handy: Schalter, Anzeigen, darunter der Akku groß in eigener Zeile, dann die Tabelle mit der Ladezeile vorn */
  .cp{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "inst" "ak" "tab";gap:18px}
  .ak3{width:calc(100% + 40px);margin:-6px -20px -14px}
  .dl-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"h" "g" "l" "b";padding-block:80px 34px}
  .dl-g{margin:6px 0}
  .dl-lg{justify-content:flex-start;gap:8px 22px}
  .dl-lg li{font-size:13px;gap:8px}
  .dl-lg b{font-size:20px}
  .dl-lg .lg-x{display:none}
  .dl-b{margin-top:22px}
  .dl-p{font-size:15px}
  .dl-v{margin-top:14px;gap:14px 16px}
  .dl-v li{grid-template-columns:18px minmax(0,1fr);gap:1px 10px;padding-top:11px}
  .dl-v .lu{width:18px;height:18px}
  .dl-v b{font-size:13.5px;line-height:1.25}
  .dl-v em{font-size:11.5px}
  .dealer .pb{margin-top:20px}
  .glb .dxb{font-size:11px}
}

/* Unterzeile neben der Überschrift kommt erst mit ihr (28.10. spät: am Desktop stand „EWAVE keeps the ride…“ vor
   „The jetski, minus…“ im Bild). filter statt opacity, weil Übergänge die Deckkraft der Unterzeilen inline führen */
.site[data-hd="woerter"] .scroller .h2+.lead,.site[data-hd="maske"] .scroller .h2+.lead{transition:filter .6s var(--ease) .25s}
.site[data-hd="woerter"] .scroller .h2:not(.hin)+.lead,.site[data-hd="maske"] .scroller .h2:not(.hin)+.lead{filter:opacity(0)}
/* ===== Farbwelt Hell (Samy 28.10. spät): weißer Grund nach der Broschüre 10/2026 (weiße Seiten, Petrol-Schrift,
   Ocean-Growth als Akzent). Pult-Zeile „Farbwelt“, .site[data-fb="hell"] steht für .site[data-fb="hell"] (setzt bau15.py ein).
   Hero bleibt Video mit dunklen Werten (Samy), der Kopf ebenso, solange er über dem Hero schwebt. ===== */
.site[data-fb="hell"]{--night:#FFFFFF;--night-2:#F4F8F9;--deep:#EEF4F5;--line:rgba(11,43,54,.12);--ink:#0B2B36;--ink-2:rgba(11,43,54,.76);--mut:#4E6B75;
  --lagoon:#0C7B6C;--sea-end:#F4F8F9;color-scheme:light;background:var(--night)}
/* Alles weiß (Samy): die Sektionen, die im Dunkeln auf --deep wechselten, stehen hell auf demselben Weiß */
.site[data-fb="hell"] .vs,.site[data-fb="hell"] .sv,.site[data-fb="hell"] .fq,.site[data-fb="hell"] .ab,.site[data-fb="hell"] .ab-foot{background:var(--night)}
/* Hero-Übergang Horizont: das Video sinkt ins Weiß der Seite, nicht in Petrol */
.site[data-fb="hell"] .hero{background:#FFFFFF}
.site[data-fb="hell"] .hero{--night:#0B2B36;--night-2:#0F3644;--deep:#071F28;--line:rgba(220,240,240,.14);--ink:#E9F2F2;
  --ink-2:rgba(233,242,242,.8);--mut:#9DB7BD;--lagoon:#83EDEE;color-scheme:dark;color:var(--ink)}
/* color neu setzen: .site vererbt sonst sein fertiges Petrol, das umgeschaltete --ink greift dann nicht */

/* Kopf angedockt: helles Glas */
.site[data-fb="hell"] .bar{background:rgba(255,255,255,.95);box-shadow:inset 0 -1px 0 rgba(11,43,54,.08),0 18px 44px -32px rgba(11,43,54,.4)}
.site[data-fb="hell"] .logo{color:var(--ink)}
.site[data-fb="hell"] .burger{background:rgba(11,43,54,.06)}

/* Meeres-Grund für Sektion 2 und 3: Himmel weiß, Wasser blasses Aqua, endet in --sea-end, daran schließen Kennzahlen und Händler an */
.site[data-fb="hell"] .qb-pin,.site[data-fb="hell"] .sea2-bd{background:linear-gradient(180deg,#FFFFFF 0%,#F4F9F9 calc(var(--hz) * 100%),#EBF3F5 calc(var(--hz) * 100%),#EFF5F6 calc(var(--hz) * 100% + calc(var(--vh) * 18)),var(--sea-end) 100%)}
.site[data-fb="hell"] .k3{background:linear-gradient(180deg,var(--sea-end) 0,var(--night) min(260px,calc(var(--vh) * 32)))}
.site[data-fb="hell"] .dealer{background:linear-gradient(180deg,transparent 0,transparent calc(var(--vh) * 100),var(--sea-end) calc(var(--vh) * 100),var(--night) calc(var(--vh) * 170))}
.site[data-fb="hell"] .qb-dots button i{background:rgba(11,43,54,.24)}
.site[data-fb="hell"] .qb-dots button:hover i{background:rgba(11,43,54,.55)}

/* Kennzahlen: Bauplan, Instrumente, Schriftfeld */
.site[data-fb="hell"] .b3-sw{background:rgba(11,43,54,.06)}
.site[data-fb="hell"] .g .g-track{stroke:rgba(11,43,54,.1)}
.site[data-fb="hell"] .g .g-ticks line{stroke:rgba(11,43,54,.3)}
.site[data-fb="hell"] .g .g-ticks line.maj{stroke:rgba(11,43,54,.7)}
.site[data-fb="hell"] .g-ndl line,.site[data-fb="hell"] .g-ndl circle{stroke:var(--ink)}
.site[data-fb="hell"] .g .g-num{fill:var(--ink)}
.site[data-fb="hell"] .c3-draw::before{background-image:linear-gradient(rgba(11,43,54,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,43,54,.06) 1px,transparent 1px)}
.site[data-fb="hell"] .c3-svg .ext{stroke:rgba(15,138,120,.5)}
.site[data-fb="hell"] .c3-svg .ld{stroke:rgba(15,138,120,.75)}
.site[data-fb="hell"] .c3-svg .dt,.site[data-fb="hell"] .c3-svg .lt,.site[data-fb="hell"] .c3-svg .pt text{fill:var(--ink)}
.site[data-fb="hell"] .c3-list,.site[data-fb="hell"] .c3-tb{background:rgba(11,43,54,.12);box-shadow:0 0 0 1px rgba(11,43,54,.12)}

/* Fette Werte und Titel, die im Dunkeln weiß waren */
.site[data-fb="hell"] .c3-list li::before,.site[data-fb="hell"] .c3-list b,.site[data-fb="hell"] .c3-tb dd,.site[data-fb="hell"] .cp-charge b,.site[data-fb="hell"] .cp-tb .chg b,.site[data-fb="hell"] .la b,.site[data-fb="hell"] .va-new b,.site[data-fb="hell"] .rs-e b,
.site[data-fb="hell"] .rs-steps b,.site[data-fb="hell"] .ra-steps b,.site[data-fb="hell"] .sv-f b,.site[data-fb="hell"] .svx-mid b,.site[data-fb="hell"] .svx-mods b,.site[data-fb="hell"] .tm-p b,.site[data-fb="hell"] .ab-ch a,.site[data-fb="hell"] .ab-who b,.site[data-fb="hell"] .aba-door h3,
.site[data-fb="hell"] .rs-pts b,.site[data-fb="hell"] .sv-vh,.site[data-fb="hell"] .sv-part b,.site[data-fb="hell"] .sv-files b,.site[data-fb="hell"] .sv-rail b,.site[data-fb="hell"] .fq-q,.site[data-fb="hell"] .dl-v b,.site[data-fb="hell"] .dl-lg b,.site[data-fb="hell"] .tlk-h,.site[data-fb="hell"] .tlk-top b{color:var(--ink)}
.site[data-fb="hell"] .ab-foot-legal a:hover{color:var(--ink)}

/* Listen mit Haarlinie */
.site[data-fb="hell"] .la li::after,.site[data-fb="hell"] .dl-v li::before{background:linear-gradient(90deg,var(--teal),rgba(15,138,120,.3) 30%,var(--line) 70%)}

/* Vergleich: EWAVE-Spalte als blasse Fläche statt Leuchten */
.site[data-fb="hell"] .va::before,.site[data-fb="hell"] .rd-col + .rd-col{background:linear-gradient(180deg,rgba(0,123,180,.07),rgba(29,162,135,.04));box-shadow:inset 0 0 0 1px rgba(15,138,120,.22)}
.site[data-fb="hell"] .va-old .lu{color:rgba(78,107,117,.6)}
.site[data-fb="hell"] .rd-col{background:rgba(11,43,54,.025)}

/* Hotels: Karten weiß mit weichem Schatten (wie die Broschüre), Reiter und Ablauf */
.site[data-fb="hell"] .rs-slide{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(11,43,54,.08),0 40px 80px -48px rgba(11,43,54,.45)}
.site[data-fb="hell"] .rs-slide + .rs-slide{background:#F7FAFB;box-shadow:inset 0 0 0 1px rgba(15,138,120,.2),0 -30px 70px -40px rgba(11,43,54,.45)}
.site[data-fb="hell"] .ra-steps::before,.site[data-fb="hell"] .ra-steps::after{background:rgba(11,43,54,.12)}
.site[data-fb="hell"] .ra-steps i,.site[data-fb="hell"] .rs-tab i{box-shadow:inset 0 0 0 1.5px rgba(11,43,54,.28)}
.site[data-fb="hell"] .ra-steps.play i,.site[data-fb="hell"] .rs-tab[aria-selected="true"] i{color:#fff;background:var(--lagoon)}
.site[data-fb="hell"] .rs-tab:hover{color:var(--ink);background:rgba(11,43,54,.04)}
.site[data-fb="hell"] .rs-tab[aria-selected="true"]{background:rgba(15,138,120,.08);color:var(--ink)}

/* Service: Portal als helle App wie Broschüre S. 07, Chat-Blasen, Funktionen */
.site[data-fb="hell"] .sv-scr,.site[data-fb="hell"] .sva-screen{background:#FFFFFF;box-shadow:0 0 0 1px rgba(11,43,54,.1),0 40px 80px -40px rgba(11,43,54,.4)}
.site[data-fb="hell"] .sva-top{background:#F4F8F9}
.site[data-fb="hell"] .sva-top i{background:#C8D5D9}
.site[data-fb="hell"] .sva-top b{color:var(--ink)}
.site[data-fb="hell"] .sva-nav li.on,.site[data-fb="hell"] .sv-chk.on .sv-cks li{background:rgba(15,138,120,.08);color:var(--ink)}
.site[data-fb="hell"] .sva-search{background:rgba(11,43,54,.04);color:var(--ink)}
.site[data-fb="hell"] .sva-screen.found .sva-list li.hit,.site[data-fb="hell"] .sv-list li.hit{background:rgba(15,138,120,.08);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(15,138,120,.4)}
.site[data-fb="hell"] .sv-bub.me,.site[data-fb="hell"] .tlk-bubble{background:linear-gradient(160deg,rgba(15,138,120,.14),rgba(29,162,135,.1));color:var(--ink)}
.site[data-fb="hell"] .sv-bub.bot,.site[data-fb="hell"] .sv-dots{background:rgba(11,43,54,.05)}
.site[data-fb="hell"] .sv-cks i{box-shadow:inset 0 0 0 1.5px rgba(11,43,54,.3)}
.site[data-fb="hell"] .sv-part{background:rgba(11,43,54,.035)}

/* Abschluss: Türen als helle Karten */
.site[data-fb="hell"] .aba-door{background:linear-gradient(160deg,rgba(0,123,180,.06),rgba(29,162,135,.03));box-shadow:inset 0 0 0 1px rgba(11,43,54,.1)}
.site[data-fb="hell"] .aba-door:hover{box-shadow:inset 0 0 0 1px rgba(15,138,120,.5)}
.site[data-fb="hell"] .ab-pdf{box-shadow:inset 0 -1px 0 rgba(15,138,120,.5)}

/* Knöpfe zweiter Ordnung außerhalb des Heros */
.site[data-fb="hell"] .pb-ghost{background:rgba(11,43,54,.03);box-shadow:inset 0 0 0 1px rgba(11,43,54,.28);color:var(--ink)}
.site[data-fb="hell"] .hero .pb-ghost{background:rgba(11,43,54,.22);box-shadow:inset 0 0 0 1px rgba(233,242,242,.45);color:#fff}

/* Übergang Tiefe: Blatt wirft einen hellen Schatten */
.site[data-fb="hell"] .u-sheet{box-shadow:0 -30px 60px -26px rgba(11,43,54,.28)}

/* Chat-Overlay hell */
.site[data-fb="hell"] .tlk-dim{background:rgba(11,43,54,.32)}
.site[data-fb="hell"] .tlk-panel{box-shadow:0 48px 90px -40px rgba(11,43,54,.55)}
.site[data-fb="hell"] .tlk-chat{background:linear-gradient(180deg,#FFFFFF,#F4F8F9)}
.site[data-fb="hell"] .tlk-sea line{stroke:var(--ink)}
.site[data-fb="hell"] .tlk-x{background:rgba(11,43,54,.06)}
.site[data-fb="hell"] .tlk-x:hover{background:rgba(11,43,54,.12)}
.site[data-fb="hell"] .tlk-role{background:rgba(11,43,54,.06)}
.site[data-fb="hell"] .tlk-role button:hover{color:var(--ink)}
.site[data-fb="hell"] .tlk-typing{background:rgba(15,138,120,.1)}
.site[data-fb="hell"] .tlk-f > span em{color:var(--mut)}
.site[data-fb="hell"] .tlk-f input,.site[data-fb="hell"] .tlk-f textarea{background:rgba(11,43,54,.04);color:var(--ink)}
.site[data-fb="hell"] .tlk-f textarea{scrollbar-color:rgba(15,138,120,.35) transparent}
.site[data-fb="hell"] .tlk-f input:focus,.site[data-fb="hell"] .tlk-f textarea:focus{background:rgba(11,43,54,.07)}
.site[data-fb="hell"] .tlk-ch:not(.pre){color:var(--ink);background:rgba(11,43,54,.04);box-shadow:inset 0 0 0 1px rgba(11,43,54,.25)}
/* ===== Stufe 16: Runde nach Hell (Samy 28.10. spät) ===== */
/* Halten: jede klebende Bühne wird um den Pult-Anteil länger, die Animation endet am alten Punkt (JS teilt den Weg) */
.qb{height:calc(calc(var(--vh) * 250) + calc(var(--vh) * 150) * var(--hold,0))}
.dealer{height:calc(calc(var(--vh) * 200) + calc(var(--vh) * 100) * var(--hold,0))}
.rs-stage{height:calc(calc(var(--vh) * 195) + calc(var(--vh) * 95) * var(--hold,0))}
.sv-stage{height:calc(calc(var(--vh) * 250) + calc(var(--vh) * 150) * var(--hold,0))}
@media (max-width:899px){
  .rs-stage{height:calc(calc(var(--vh) * 190) + calc(var(--vh) * 90) * var(--hold,0))}
  .sv-stage{height:calc(calc(var(--vh) * 240) + calc(var(--vh) * 140) * var(--hold,0))}
}
.rs-stage.flat,.sv-stage.flat{height:auto}

/* Cockpit klebt auf seiner Schiene, der Abstandhalter gibt ihm den Weg */
.cp-rail{position:relative;margin-top:clamp(40px,calc(var(--vh) * 7),72px)}
.cp-rail > .cp{margin-top:0}
.cp.stick{position:sticky;z-index:1}
.cp-hold{height:0;pointer-events:none}
@media (max-width:899px){.cp-rail{margin-top:4px}}

/* Übergang 4 A Faden */
.u4-f{position:absolute;inset:0;opacity:0}
.u4-f svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.u4-f path{fill:none;stroke:#3BC861;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.site[data-fb="hell"] .u4-f path{stroke:#1DA287}

/* Übergang 5 A Spalt: Linie zwischen letzter EWAVE-Zeile und Gäste-Video */
.u5-l{position:absolute;left:0;top:0;height:2px;margin-top:-1px;border-radius:2px;opacity:0;will-change:transform;
  background:linear-gradient(90deg,rgba(0,123,180,0),#0A86BF 16%,#1DA287 50%,#3BC861 84%,rgba(59,200,97,0))}

/* Portal-Abzeichen: 3D-Uhr Edel weiß mit 24/7 (uhr.js) statt Ring mit Zeiger */
.svx-badge.u3h{background:none;box-shadow:none;border-radius:0}
.svx-badge.u3h > svg{display:none}
/* Blatt (4 → 5 B): der Vergleich deckt die Händler-Seite ganz */
.vs.u-sheet{background:var(--deep)}
.site[data-fb="hell"] .vs.u-sheet{background:var(--night)}
/* ===== Stufe 17 ===== */
.site[data-fb="hell"] .glb .dxb{color:#E9F2F2;text-shadow:0 1px 8px rgba(4,22,29,.9)}
/* ===== Stufe 18 ===== */
.dl-g{position:relative}
.dl-grab{position:absolute;left:50%;top:50%;width:var(--gd,0);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:21}
.dl-grab.on{pointer-events:auto}