/* Schaukasten. Werte in einer .szene sind cqw = px der echten Seite bei 1440 / 14.4,
   Container ist .glas-inhalt; Hairlines bleiben px.
   Zahlenangaben in den Nachbauten sind eingefrorene Stände, keine Live-Werte. */

/* ---------- Schriften, je Nachbau eigener Name ---------- */
@font-face{font-family:'sc-fredoka';src:url(/assets/showcase/nextep-fredoka-var.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'sc-spartan';src:url(/assets/showcase/nextep-leaguespartan-var.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'sc-baskerville';src:url(/assets/showcase/aquago-librebaskerville-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'sc-yellowtail';src:url(/assets/showcase/aquago-yellowtail-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'sc-archivo';src:url(/assets/showcase/showcase-archivo-var.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'sc-anton';src:url(/assets/showcase/boot-anton-400.woff2) format('woff2');font-weight:400;font-display:swap}

/* ---------- Bühne ---------- */
.schaukasten{position:relative;margin-top:clamp(40px,6vw,72px);padding-bottom:52px;
  perspective:1600px;perspective-origin:50% 42%;text-align:left}
.schaukasten::after{content:"";position:absolute;left:50%;bottom:-40px;width:70%;height:200px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(79,195,216,.35),transparent 65%)}
.schaukasten::before{content:"";position:absolute;inset:-8% 0 -14%;z-index:-2;pointer-events:none;opacity:.62;
  background:radial-gradient(60% 55% at 50% 45%,rgba(79,195,216,.16),transparent 70%)}

/* Telefon ist Geschwister des Rahmens, nicht Kind: Stapelung per z-index statt 3D-Schnitt */
.geraete{position:relative;width:min(880px,100%);margin-inline:auto}
.rahmen{position:relative;border-radius:16px;
  background:var(--stahl);border:1px solid var(--kante);
  box-shadow:inset 0 1px 0 var(--kante-hell),0 40px 90px -24px rgba(0,0,0,.92),0 0 70px -24px rgba(79,195,216,.40);
  --kipp:rotateX(calc(3.1deg - var(--my,0)*1.2deg)) rotateY(calc(-5deg + var(--mx,0)*1.6deg));
  transform:var(--kipp);
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1)}

.schaukasten .leiste{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  background:rgba(255,255,255,.04);border-bottom:1px solid var(--kante);border-radius:15px 15px 0 0;
  font-size:11px;color:var(--nebel)}
.schaukasten .leiste i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);flex:none}
.urlleiste{margin-left:8px;display:inline-flex;align-items:center;gap:6px;min-width:0;
  color:var(--nebel);text-decoration:none;font-size:11px;white-space:nowrap}
.urlleiste svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.urlleiste:hover,.urlleiste:focus-visible{color:var(--tuerkis)}

/* Der Container für alle cqw-Werte. Bewusst getrennt vom 3D-Rahmen: ein
   container-type flacht preserve-3d ab, overflow:hidden ebenfalls. */
.glas-inhalt{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:0 0 15px 15px;
  background:var(--stahl);container-type:inline-size}

/* ---------- Telefon ---------- */
.telefon{position:absolute;z-index:2;right:-72px;bottom:-52px;width:190px;height:411px;padding:4px;
  border-radius:22px;border:1px solid rgba(255,255,255,.22);background:#0b0f1c;
  --tel:translateX(calc(var(--mx,0)*6px)) rotateY(-9deg) rotateX(2deg);
  transform:var(--tel);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.95),0 0 42px -16px rgba(79,195,216,.35)}
.telefon::after{content:"";position:absolute;inset:-14% 0;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(50% 50% at 50% 50%,rgba(79,195,216,.45),transparent 70%)}
.telefon .schirm{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;background:#11203a}
/* Platzhalter in der Stimmung der jeweiligen Seite, damit ein noch nicht
   geladener Screenshot nicht wie ein defektes Gerät aussieht. */
.telefon[data-projekt=nextep] .schirm{background:linear-gradient(180deg,#ffffff 0%,#eaf7f6 100%)}
.telefon[data-projekt=aquago] .schirm{background:linear-gradient(180deg,#43709f 0%,#1C4474 55%,#0E2747 100%)}
.telefon[data-projekt=boot] .schirm{background:linear-gradient(180deg,#bfe1ef 0%,#0b4f74 46%,#083a56 100%)}
.telefon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}

/* ---------- Auswahl ---------- */
.wahl{display:none;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.js .wahl{display:flex}
.wahl span{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 14px;
  border-radius:999px;background:transparent;border:1px solid transparent;
  font:600 14px/1 Inter,ui-sans-serif,system-ui,sans-serif;color:var(--mond);
  transition:background .5s,border-color .5s,color .5s}
.wahl span::before{content:"";width:6px;height:6px;border-radius:50%;background:transparent;transition:background .18s,box-shadow .18s}
.wahl span.an{color:var(--frost);background:rgba(79,195,216,.14);border-color:rgba(79,195,216,.35)}
.wahl span.an::before{background:var(--tuerkis);box-shadow:0 0 10px var(--tuerkis)}

/* Alle drei Kundenlinks stehen statisch im HTML. Ohne JS sind sie die Bedienung
   (die Tablist wäre tot), mit JS liegen sie unsichtbar, aber fokussierbar hinter
   der Auswahl — ohne Platz im Fluss, damit der Fokus nichts verschiebt. */
.ziele{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;padding:0;list-style:none}
.ziele a{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 14px;
  border-radius:999px;background:transparent;border:1px solid transparent;text-decoration:none;
  font:600 14px/1 Inter,ui-sans-serif,system-ui,sans-serif;color:var(--mond);
  transition:background .18s,border-color .18s,color .18s}
.ziele a:hover{background:rgba(255,255,255,.09);border-color:var(--kante-hell);color:var(--frost)}
.ziele svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.js .ziele{display:block;position:relative;height:0;margin:0;text-align:center}
.js .ziele li{display:inline}
.js .ziele a{position:absolute;left:-9999px;top:0;white-space:nowrap}
.js .ziele a:focus{left:50%;top:8px;transform:translateX(-50%);z-index:6;
  background:rgba(6,9,19,.94);border-color:var(--tuerkis);color:var(--frost)}

/* ---------- Szenen, gemeinsam ---------- */
.szene{position:absolute;inset:0;overflow:hidden}
.szene[hidden]{display:none}
.sc-bg{position:absolute;inset:0;z-index:0}

/* ===================================================================
   Nextep Personal
   =================================================================== */
.szene--nextep .sc-bg{background:radial-gradient(90% 120% at 85% 0%,#eef9f8 0%,rgba(255,255,255,0) 60%),#fff}
.nx-blob-a{position:absolute;width:43.056cqw;height:43.056cqw;top:-15.972cqw;right:-12.5cqw;border-radius:50%;
  background:radial-gradient(circle,rgba(13,176,168,.28),rgba(13,176,168,0) 70%)}
.nx-blob-b{position:absolute;width:31.944cqw;height:31.944cqw;bottom:-12.5cqw;left:-13.889cqw;border-radius:50%;
  background:radial-gradient(circle,rgba(243,142,149,.24),rgba(243,142,149,0) 70%)}

.nx-kopf{position:absolute;inset:0 0 auto;z-index:2;height:5.417cqw;display:flex;align-items:center;
  padding:0 11.111cqw;background:rgba(255,255,255,.86)}
.nx-kopf img{height:3.056cqw;width:auto;display:block}
.nx-nav{list-style:none;margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:1.944cqw}
.nx-nav li{font:500 1.067cqw/1 'sc-spartan',sans-serif;color:#010f0e;white-space:nowrap}
.nx-navcta{margin-left:1.944cqw;background:linear-gradient(135deg,#007c76,#00615c);color:#fff;
  border-radius:999px;padding:.764cqw 1.528cqw;font:600 1.056cqw/1.1 'sc-spartan',sans-serif;
  box-shadow:0 .833cqw 1.806cqw -.833cqw rgba(0,97,92,.75);white-space:nowrap}

.nx-inhalt{position:absolute;inset:0;z-index:1;max-width:83.333cqw;margin-inline:auto;
  padding:7cqw 2.778cqw 6.4cqw;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:4.4cqw;align-items:center}
.nx-eyebrow{display:flex;align-items:center;gap:.625cqw;margin:0 0 1.25cqw;
  font:700 .889cqw/1 'sc-spartan',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#006f6a}
.nx-eyebrow i{width:.556cqw;height:.556cqw;border-radius:50%;background:#f38e95;flex:none}
.nx-h1{margin:0 0 1.667cqw;font:600 4.444cqw/1.1 'sc-fredoka',sans-serif;letter-spacing:-.015em;color:#010f0e}
.nx-h1 span{display:block}
.nx-h1 .z2{color:#006f6a}
.nx-lead{margin:0;font:400 1.35cqw/1.65 'sc-spartan',sans-serif;letter-spacing:.005em;color:#434343;max-width:54ch}
.nx-aktionen{display:flex;gap:.972cqw;margin-top:2.361cqw}
.nx-btn,.nx-btn2{border-radius:999px;padding:1.042cqw 2.083cqw;letter-spacing:.01em;
  font:600 1.111cqw/1.15 'sc-spartan',sans-serif;border:.139cqw solid transparent;white-space:nowrap}
.nx-btn{background:linear-gradient(135deg,#007c76,#00615c);color:#fff;
  box-shadow:0 .833cqw 1.806cqw -.833cqw rgba(0,97,92,.75)}
.nx-btn2{background:rgba(255,255,255,.8);color:#006f6a;border-color:#d1dfdf}
.nx-tags{list-style:none;margin:2.361cqw 0 0;padding:1.806cqw 0 0;border-top:1px solid #d1dfdf;
  display:flex;flex-wrap:wrap;gap:.694cqw 1.806cqw}
.nx-tags li{display:flex;align-items:center;gap:.556cqw;letter-spacing:.02em;
  font:600 1.033cqw/1 'sc-spartan',sans-serif;color:#5f6f6e}
.nx-tags li::before{content:"";width:.833cqw;height:.833cqw;border-radius:50%;background:#eaf7f6;
  border:.139cqw solid #0db0a8;flex:none}

.nx-fotobox{position:relative}
.nx-foto{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#eaf7f6;
  border-radius:13.889cqw 13.889cqw 2.778cqw 2.778cqw;
  box-shadow:0 2.361cqw 4.861cqw -2.361cqw rgba(0,66,63,.38)}
.nx-foto img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block}
.nx-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(165deg,rgba(13,176,168,.1) 0%,rgba(13,176,168,0) 42%,rgba(0,66,63,.3) 100%)}
.nx-badge{position:absolute;left:-1.944cqw;bottom:2.917cqw;display:flex;align-items:center;gap:.972cqw;
  background:#fff;border:1px solid #d1dfdf;border-radius:1.944cqw;
  padding:1.111cqw 1.528cqw 1.111cqw 1.25cqw;max-width:20.139cqw;
  box-shadow:0 .972cqw 2.361cqw -1.25cqw rgba(1,15,14,.22)}
.nx-badge .kreis{width:2.778cqw;height:2.778cqw;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#0db0a8,#008983)}
.nx-badge svg{width:1.389cqw;height:1.389cqw;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nx-badge b{display:block;font:600 1.089cqw/1.25 'sc-fredoka',sans-serif;color:#010f0e;margin-bottom:.139cqw}
.nx-badge span{display:block;font:400 .933cqw/1.35 'sc-spartan',sans-serif;color:#5f6f6e}

/* ===================================================================
   AquaGo SUP
   =================================================================== */
.szene--aquago .sc-bg{background-color:#1C4474;background-repeat:no-repeat;background-position:center;
  background-size:cover,cover;
  background-image:url(/assets/showcase/aquago-hero.webp),linear-gradient(180deg,#43709f 0%,#1C4474 55%,#0E2747 100%)}
.ag-veil{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(28,68,116,.25),transparent 60%),
             linear-gradient(180deg,rgba(7,24,46,.55) 0%,rgba(7,24,46,.25) 45%,rgba(7,24,46,.92) 100%)}
.ag-kopf{position:absolute;inset:0 0 auto;z-index:2;display:flex;justify-content:space-between;
  align-items:center;padding:1.778cqw 3.333cqw}
.ag-kopf img{height:4.444cqw;width:auto;display:block;filter:drop-shadow(0 .139cqw .694cqw rgba(0,0,0,.6))}
.ag-rechts{display:flex;align-items:center;gap:2.083cqw}
.ag-sprache{display:flex;align-items:center;gap:1.111cqw;
  font:600 .8cqw/1 'sc-archivo',sans-serif;letter-spacing:.08em;color:#f7f3ec}
.ag-sprache span{opacity:.55}
.ag-sprache .an{opacity:1;font-weight:800;color:#fff;text-decoration:underline;text-underline-offset:.208cqw}
.ag-navcta{font:700 .8cqw/1 'sc-archivo',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:#C42A78;border:.104cqw solid #C42A78;border-radius:999px;padding:.972cqw 1.806cqw;
  box-shadow:0 .556cqw 1.528cqw -.694cqw rgba(196,42,120,.7);white-space:nowrap}

.ag-typo{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:2cqw 3.333cqw}
.ag-eyebrow{margin:0 0 1.222cqw;font:800 .911cqw/1 'sc-archivo',sans-serif;text-transform:uppercase;
  letter-spacing:.42em;padding-left:.42em;color:#f7f3ec}
.ag-h1{margin:0;font:700 6.667cqw/1.1 'sc-baskerville',Georgia,serif;color:#f7f3ec}
.ag-h1 .go{color:#C42A78}
.ag-script{display:block;margin:.5cqw 0 1.4cqw;font:400 3.778cqw/1 'sc-yellowtail',cursive;color:#C42A78}
.ag-lead{margin:0 0 2.444cqw;font:italic 700 2.111cqw/1.2 'sc-baskerville',Georgia,serif;color:#f7f3ec;white-space:nowrap}
.ag-aktionen{display:flex;gap:1cqw;justify-content:center}
.ag-btn,.ag-btn2{border-radius:999px;padding:1.111cqw 2.444cqw;letter-spacing:.1em;text-transform:uppercase;
  font:700 1.111cqw/1.15 'sc-archivo',sans-serif;white-space:nowrap}
.ag-btn{background:#C42A78;color:#fff;box-shadow:0 .972cqw 2.778cqw -.694cqw rgba(196,42,120,.6)}
.ag-btn2{border:.111cqw solid rgba(247,243,236,.6);color:#f7f3ec;background:rgba(0,0,0,.15)}
.ag-frei{display:inline-flex;align-items:center;gap:.556cqw;margin-top:1.333cqw;padding:.556cqw 1.111cqw;
  border:1px solid rgba(247,243,236,.22);border-radius:999px;background:rgba(6,24,26,.45);
  font:700 .911cqw/1.2 'sc-archivo',sans-serif;letter-spacing:.04em;color:#f7f3ec}
.ag-frei i{width:.625cqw;height:.625cqw;border-radius:50%;background:#1FA35E;flex:none}

/* ===================================================================
   Motorbootfahrschule Bodensee
   =================================================================== */
.szene--boot .sc-bg{background:linear-gradient(180deg,#bfe1ef 0%,#0b4f74 46%,#083a56 100%)}
.bt-foto{position:absolute;inset:0 0 2.5cqw;background:url(/assets/showcase/boot-hero.webp) center/cover no-repeat}
.bt-scrim{position:absolute;inset:0 0 2.5cqw;
  background:linear-gradient(100deg,rgba(8,58,86,.48) 0%,rgba(8,58,86,.22) 34%,rgba(8,58,86,0) 58%),
             linear-gradient(180deg,rgba(8,58,86,.14) 0%,rgba(8,58,86,0) 26%,rgba(8,58,86,0) 65%,rgba(8,58,86,.1) 100%)}
.bt-wake{position:absolute;left:0;right:0;bottom:2.5cqw;height:20cqw;width:100%;display:block}
.bt-korn{position:absolute;inset:0 0 2.5cqw;opacity:.10;mix-blend-mode:overlay;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.6) 1px,transparent 1.4px);background-size:3px 3px}
.bt-cream{position:absolute;left:0;right:0;bottom:0;height:2.5cqw;background:#f4ecd9}

.bt-hero{position:absolute;inset:0 0 2.5cqw;z-index:1;display:flex;flex-direction:column}
.bt-kopf{display:flex;justify-content:space-between;align-items:center;gap:1cqw;padding:1.528cqw 4.444cqw}
.bt-marke{font:400 1.319cqw/1.15 'sc-anton',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#f4ecd9;background:rgba(8,58,86,.82);padding:.556cqw 1.111cqw;border-radius:6.944cqw;white-space:nowrap}
.bt-marke b{color:#f2b705;font-weight:400}
.bt-navbox{display:flex;align-items:center;gap:.694cqw}
.bt-nav{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.694cqw}
.bt-nav li{font:600 .972cqw/1.15 'sc-archivo',sans-serif;letter-spacing:.02em;color:#f4ecd9;
  padding:.486cqw .903cqw;background:rgba(8,58,86,.82);border-radius:6.944cqw;white-space:nowrap}
.bt-en{display:inline-flex;align-items:center;gap:.417cqw;font:700 .903cqw/1.15 'sc-archivo',sans-serif;
  letter-spacing:.06em;color:#f4ecd9;border:1px solid rgba(244,236,217,.55);padding:.417cqw .833cqw;
  border-radius:6.944cqw;background:rgba(8,58,86,.82)}
.bt-en svg{width:1.528cqw;height:auto;display:block;border:1px solid rgba(244,236,217,.55)}

.bt-wrap{flex:1;width:100%;max-width:81.944cqw;padding:0 4.444cqw 3.75cqw;
  display:flex;flex-direction:column;justify-content:center}
.bt-h1{margin:0;font:400 6.667cqw/.92 'sc-anton',sans-serif;text-transform:uppercase;letter-spacing:-.01em;
  color:#f4ecd9;text-shadow:0 .139cqw 0 rgba(8,58,86,.5),0 .278cqw 1.806cqw rgba(8,58,86,.55)}
.bt-lead{margin:1.528cqw 0 0;font:600 1.556cqw/1.4 'sc-archivo',sans-serif;color:#eef5f2;max-width:34ch}
.bt-cta{display:flex;align-items:center;gap:1.111cqw;margin-top:2.361cqw}
.bt-btn{background:#c9391f;color:#fff;letter-spacing:.01em;font:800 1.167cqw/1.15 'sc-archivo',sans-serif;
  padding:1.111cqw 1.806cqw;border-radius:.139cqw;
  box-shadow:0 .556cqw 1.528cqw -.556cqw rgba(201,57,31,.7);white-space:nowrap}
.bt-price{display:inline-flex;flex-direction:column;gap:.208cqw;background:#f2b705;color:#0e2a38;
  border:.139cqw solid #0e2a38;box-shadow:.278cqw .278cqw 0 rgba(14,42,56,.35);
  padding:.694cqw 1.25cqw;line-height:1.05;transform:rotate(-2deg)}
.bt-price small{font:700 .778cqw/1.05 'sc-archivo',sans-serif;text-transform:uppercase;letter-spacing:.14em}
.bt-price b{font:800 1.778cqw/1.05 'sc-archivo',sans-serif}
.bt-fakten{list-style:none;margin:0;padding:.972cqw 1.389cqw;display:flex;flex-wrap:wrap;
  justify-content:center;gap:.556cqw 2.361cqw;background:#f2b705;color:#0e2a38;
  border-top:.139cqw solid #0e2a38;font:700 .911cqw/1.2 'sc-archivo',sans-serif;
  letter-spacing:.06em;text-transform:uppercase}
.bt-fakten li{display:flex;align-items:center;gap:.625cqw}
.bt-fakten li::before{content:"";width:.486cqw;height:.486cqw;border-radius:50%;background:#c9391f;flex:none}

/* ===================================================================
   Tablet / Telefon
   =================================================================== */
/* 641–1100: der Rahmen füllt die Spalte fast ganz aus. Das Telefon rückt nach
   innen, damit zwischen ihm und dem Fensterrand mindestens 24 px bleiben
   (die Perspektive zieht die rechte Kante zusätzlich nach aussen). */
@media (max-width:1100px){
  .telefon{right:16px}
}
@media (max-width:1023px){
  .schaukasten{padding-bottom:40px}
  .rahmen{--kipp:rotateX(2.5deg) rotateY(-3deg)}
  .telefon{--tel:rotateY(-6deg);width:150px;height:325px;bottom:-40px}
  .nx-nav,.bt-nav{display:none}
}
/* ≤640 zeigt der Rahmen ohnehin eine Miniatur der Seite; ein zweites Gerät
   daneben verdeckt nur Text und wiederholt dieselbe Schlagzeile. */
@media (max-width:640px){
  .schaukasten{perspective:none;padding-bottom:14px}
  .rahmen{--kipp:rotateX(0deg);border-radius:12px}
  .schaukasten .leiste{height:30px;border-radius:11px 11px 0 0}
  .glas-inhalt{border-radius:0 0 11px 11px}
  .telefon{display:none}
  .ag-sprache{display:none}
  .wahl,.ziele{gap:6px}
  .wahl span,.ziele a{font-size:12.5px;padding:8px 12px;min-height:38px}
  .wahl span{gap:6px}
}

/* ===================================================================
   Bewegung. Der Ruhezustand oben IST die fertige Komposition; alles hier
   existiert nur, solange JS .bereit gesetzt hat, und verschwindet danach.
   =================================================================== */
@keyframes sc-hoch{from{opacity:0;transform:translateY(var(--y,12px))}to{opacity:1;transform:none}}
@keyframes sc-pop{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
@keyframes sc-wash{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes sc-fade{from{opacity:0}to{opacity:1}}
@keyframes sc-glow{from{opacity:0}to{opacity:.55}}
@keyframes sc-bloom{from{opacity:0}to{opacity:.62}}
@keyframes sc-arch{
  from{clip-path:inset(0 0 100% 0 round 13.889cqw 13.889cqw 2.778cqw 2.778cqw)}
  to{clip-path:inset(0 0 0 0 round 13.889cqw 13.889cqw 2.778cqw 2.778cqw)}}
@keyframes sc-archbild{from{transform:translateY(5%) scale(1.06)}to{transform:none}}
/* Eintritt nur über Y, Deckkraft und eine kleine Drehung: ein X-Versatz auf einem
   rechtsbündigen Telefon erzeugt sonst während der Eröffnung Querscroll. */
@keyframes sc-telefon{
  from{opacity:0;transform:var(--tel) translateY(76px) scale(.94) rotateY(-7deg)}
  to{opacity:1;transform:var(--tel) translateY(0) scale(1) rotateY(0deg)}}
@keyframes sc-rahmen{
  0%{opacity:0;transform:var(--kipp) translateY(34px) scale(.962) rotateX(5.9deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  18.4%{opacity:1;transform:var(--kipp) translateY(0) scale(1) rotateX(.4deg);animation-timing-function:linear}
  79.6%{opacity:1;transform:var(--kipp) translateY(0) scale(1) rotateX(.4deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}
  100%{opacity:1;transform:var(--kipp) translateY(0) scale(1) rotateX(0deg)}}
@keyframes sc-raus{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px) scale(.99)}}
@keyframes sc-fondip{0%{opacity:1}42%{opacity:.18}100%{opacity:1}}
@keyframes sc-preis{from{opacity:0;transform:rotate(-2deg) translateY(1.4cqw) scale(.93)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes sc-url{0%{opacity:1}50%{opacity:0}100%{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  /* scharfgestellt: Ausgangszustand */
  .schaukasten.bereit .rahmen,
  .schaukasten.bereit .telefon,
  .schaukasten.bereit .leiste,
  .schaukasten.bereit .sc-bg,
  .schaukasten.bereit .nx-badge,
  .schaukasten.bereit .sc-an{opacity:0}
  .schaukasten.bereit .telefon::after,
  .schaukasten.bereit::before{opacity:0}
  .schaukasten.bereit .nx-foto{clip-path:inset(0 0 100% 0 round 13.889cqw 13.889cqw 2.778cqw 2.778cqw)}
  .schaukasten.bereit+.wahl{opacity:0}

  /* Eröffnung, 4,9 s, läuft genau einmal */
  .schaukasten.bereit.vor .rahmen,
  .schaukasten.bereit.laeuft .rahmen{animation:sc-rahmen 4.9s both;will-change:transform,opacity}
  .schaukasten.bereit.vor .leiste,
  .schaukasten.bereit.laeuft .leiste{animation:sc-fade .42s cubic-bezier(.2,.8,.2,1) .24s both}
  .schaukasten.bereit.vor .nx-kopf,
  .schaukasten.bereit.laeuft .sc-an{
    animation:sc-hoch var(--dur,.5s) var(--ez,cubic-bezier(.2,.8,.2,1)) var(--d,0s) both;
    will-change:transform,opacity}
  .schaukasten.bereit.vor .sc-bg,
  .schaukasten.bereit.laeuft .sc-bg{animation:sc-wash .62s cubic-bezier(.33,1,.68,1) .42s both}
  .schaukasten.bereit.laeuft .nx-foto{animation:sc-arch .76s cubic-bezier(.22,1,.36,1) calc(.88s - var(--ab,0s)) both;will-change:clip-path}
  .schaukasten.bereit.laeuft .nx-foto img{animation:sc-archbild .76s cubic-bezier(.22,1,.36,1) calc(.88s - var(--ab,0s)) both}
  .schaukasten.bereit.laeuft .nx-badge{animation:sc-pop .56s cubic-bezier(.2,.9,.3,1.06) calc(2.18s - var(--ab,0s)) both}
  .schaukasten.bereit.laeuft .telefon{animation:sc-telefon .9s cubic-bezier(.16,1,.3,1) calc(2.64s - var(--ab,0s)) both;will-change:transform,opacity}
  .schaukasten.bereit.laeuft .telefon::after{animation:sc-glow .7s cubic-bezier(.33,1,.68,1) calc(2.9s - var(--ab,0s)) both}
  .schaukasten.bereit.laeuft::before{animation:sc-bloom .8s cubic-bezier(.33,1,.68,1) calc(3.4s - var(--ab,0s)) both}
  .schaukasten.bereit.laeuft+.wahl{--y:10px;animation:sc-hoch .5s cubic-bezier(.2,.8,.2,1) calc(4.1s - var(--ab,0s)) both}

  .schaukasten.spaet{--ab:.75s}

  /* Taktung der Nextep-Eröffnung */
  .nx-kopf{--d:.55s;--dur:.5s;--y:0px}
  .nx-eyebrow{--d:calc(1.42s - var(--ab,0s));--dur:.48s}
  .nx-h1 .z1{--d:calc(1.5s - var(--ab,0s));--dur:.54s;--y:16px}
  .nx-h1 .z2{--d:calc(1.58s - var(--ab,0s));--dur:.54s;--y:16px}
  .nx-lead{--d:calc(1.69s - var(--ab,0s));--dur:.52s}
  .nx-btn{--d:calc(1.8s - var(--ab,0s));--dur:.5s}
  .nx-btn2{--d:calc(1.87s - var(--ab,0s));--dur:.5s}
  .nx-tags{--d:calc(1.96s - var(--ab,0s));--dur:.48s;--y:10px}

  /* Wechsel, rund 1 s: alte Szene raus, neue Szene lagenweise rein */
  .szene.raus{animation:sc-raus .26s cubic-bezier(.4,0,1,1) both}
  .szene.rein .sc-bg{animation:sc-wash .47s cubic-bezier(.22,1,.36,1) .23s both}
  .szene.rein .sw{animation:sc-hoch var(--swdur,.35s) cubic-bezier(.2,.8,.2,1) var(--sw,0s) both}
  .szene.rein .bt-price{animation:sc-preis .4s cubic-bezier(.2,.9,.3,1.06) .74s both}
  .szene.rein .nx-badge{animation:sc-pop .4s cubic-bezier(.2,.9,.3,1.06) .74s both}
  .szene.rein .ag-frei{animation:sc-pop .4s cubic-bezier(.2,.9,.3,1.06) .74s both}
  /* Das Gerät dimmt einmal ab; im dunkelsten Moment wird der (bereits
     dekodierte) Screenshot getauscht. Animiert wird bewusst .telefon selbst,
     nicht das <img>: ein animierter Nachkomme innerhalb des translateZ-
     Teilbaums wird in Chromium nicht mehr gezeichnet. */
  .telefon.tauscht{animation:sc-fondip .61s cubic-bezier(.33,1,.68,1) .14s both}
  .urlleiste.tauscht{animation:sc-url .5s linear .23s both}

  /* AquaGo: erst die Kulisse, dann die Typo, dann der Buchen-Knopf */
  .ag-kopf{--sw:.39s}
  .ag-eyebrow{--sw:.46s}
  .ag-h1{--sw:.5s;--swdur:.35s}
  .ag-script{--sw:.54s;--swdur:.34s}
  .ag-lead{--sw:.55s;--swdur:.34s}
  .ag-btn{--sw:.62s;--swdur:.34s}
  .ag-btn2{--sw:.66s;--swdur:.34s}
  /* Motorboot: erst das Wasser, dann die Schlagzeile, Knöpfe, Preisschild */
  .bt-kopf{--sw:.39s}
  .bt-h1{--sw:.5s;--swdur:.35s}
  .bt-lead{--sw:.55s;--swdur:.34s}
  .bt-btn{--sw:.62s;--swdur:.34s}
  .bt-fakten{--sw:.66s;--swdur:.34s}
  /* Nextep beim Zurückwechseln */
  .szene--nextep .nx-kopf{--sw:.39s}
  .szene--nextep .nx-eyebrow{--sw:.46s}
  .szene--nextep .nx-h1{--sw:.5s;--swdur:.35s}
  .szene--nextep .nx-lead{--sw:.55s;--swdur:.34s}
  .szene--nextep .nx-aktionen{--sw:.62s;--swdur:.34s}
  .szene--nextep .nx-tags{--sw:.66s;--swdur:.34s}
}

/* ---------- Sterne der Rezensionen: Gold mit Glanz, erscheinen einzeln ---------- */
.sterne{width:fit-content;font-size:22px;line-height:1;letter-spacing:3px;
  background:linear-gradient(105deg,#d9a514 0,#f3c93a 38%,#fff8d6 50%,#f3c93a 62%,#d9a514 100%) 100% 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px rgba(233,185,28,.55))}
@keyframes sc-glanz{0%,50%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:no-preference){
  .sterne{animation:sc-glanz 4.95s ease-in-out infinite}
  .js .stimme .sterne{clip-path:inset(-20px 100% -20px -20px);transition:clip-path .99s steps(5,end) .28s}
  .js .stimme.in .sterne{clip-path:inset(-20px)}
  .stimme:nth-of-type(2) .sterne{animation-delay:.55s;transition-delay:.5s}
}

/* Scroll-Abgang: der Hero bleibt stehen (sticky), solange --p von 0 auf 1 läuft. Jede Textzeile
   verlässt den Schirm in eine andere Richtung, der Schaukasten rückt nach oben.
   --p, --hub, --weg und --oben setzt showcase.js. */
@media (prefers-reduced-motion:no-preference){
  .js .held{--p:0;--t:0;--s:0;--hub:0px;--weg:0px;margin-bottom:calc(var(--hub)*-1);overflow-x:clip}
  /* Haltestrecke als Inhalt, nicht als padding: sticky hält nur innerhalb der Content-Box */
  .js .held::after{content:"";display:block;height:var(--weg)}
  .js .held>.innen{position:sticky;top:var(--oben,0px)}
  /* Abgang als eigene Animation: showcase.js setzt .ab, sobald gescrollt wird (und nimmt es ganz oben zurück).
     Jede Zeile geht gestaffelt (--d) in ihre Richtung, danach steigt der Schaukasten nach. */
  .js .held h1,.js .held .lead,.js .held .aktionen,.js .held .hinweis{--d:0s;will-change:translate,opacity;
    transition:translate .88s cubic-bezier(.7,0,.3,1) var(--d),opacity .61s ease-in var(--d),visibility 0s}
  .js .held .lead{--d:.08s}.js .held .aktionen{--d:.15s}.js .held .hinweis{--d:.23s}
  .js .held.ab :is(h1,.lead,.aktionen,.hinweis){opacity:0;visibility:hidden;
    transition:translate .88s cubic-bezier(.7,0,.3,1) var(--d),opacity .61s ease-in var(--d),visibility 0s calc(var(--d) + .88s)}
  .js .held.ab h1{translate:-70vw 0}
  .js .held.ab .lead{translate:70vw 0}
  .js .held.ab .aktionen{translate:0 -160px}
  .js .held.ab .hinweis{translate:0 90px}
  /* translate statt transform: die Eröffnung animiert transform im Schaukasten */
  .js .held .schaukasten{transition:translate 1.1s cubic-bezier(.5,0,.15,1) .11s}
  .js .held.ab .schaukasten{translate:0 calc(var(--hub)*-1);transition-delay:.44s}
  /* Lichtschein steht mit, solange der Hero hält */
  .js .held::before{translate:0 var(--stand,0px)}
}

/* ---------- Kundenstimmen: Karte zeigt die Website, von der die Rede ist ---------- */
.stimme{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;column-gap:22px;align-items:start}
.stimme>*{grid-column:1}
.stimme figcaption{align-self:end}
.stimmbild{grid-column:2;grid-row:1/-1;align-self:center;width:78px;height:150px;object-fit:cover;object-position:top;
  border-radius:13px;border:2px solid #1b2436;background:#0a0f1a;rotate:3deg;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.8),0 0 26px -6px rgba(79,195,216,.45)}
.stimme:nth-of-type(2) .stimmbild{rotate:-3deg}
@media (prefers-reduced-motion:no-preference){
  .js #beispiele,.js #preis,.js #risiko{overflow-x:clip} /* Karten, Preiszahl und Versprechen ragen beim Auftritt seitlich über */
  .js .stimme:not(.in){visibility:hidden} /* kein Fokus auf Links in Karten, die noch draussen warten */
  /* Karten kommen von gegenüberliegenden Seiten, das Zitat leuchtet Wort für Wort auf */
  .js .stimme{opacity:0;translate:-60vw 0;transition:opacity .66s,translate 1.21s cubic-bezier(.16,.84,.24,1)}
  .js .stimme:nth-of-type(2){translate:60vw 0;transition-delay:.17s}
  .js .stimme.in{opacity:1;translate:0 0}
  .js .stimmbild{opacity:0;translate:0 26px;transition:opacity .66s .5s,translate .88s cubic-bezier(.2,.8,.2,1) .5s}
  .js .stimme.in .stimmbild{opacity:1;translate:0 0}
  .stimme blockquote span{opacity:.2;transition:opacity .5s calc(var(--i)*29ms + .61s)}
  .stimme.in blockquote span{opacity:1}
}
@media (max-width:480px){.stimmbild{width:60px;height:116px;border-radius:10px}.stimme{column-gap:16px}}

/* ---------- Preis: die Zahl landet, die Liste hakt sich ab, ein Licht läuft um die Karte ---------- */
@property --sc-w{syntax:'<angle>';inherits:false;initial-value:0deg}
.preise--eins .paket:first-child{border-color:rgba(79,195,216,.4);
  box-shadow:inset 0 1px 0 var(--kante-hell),0 0 0 1px rgba(79,195,216,.14),0 30px 80px -30px rgba(79,195,216,.45)}
/* Haken statt Punkt */
.preise--eins .paket:first-child li{position:relative}
.preise--eins .paket:first-child li::before{background:none}
.preise--eins .paket:first-child li::after{content:"";position:absolute;left:5.5px;top:6.5px;width:5px;height:9px;
  border:solid var(--tuerkis);border-width:0 2px 2px 0;rotate:45deg}
@keyframes sc-landen{
  0%{opacity:0;transform:translate(28%,70px) scale(3.2);filter:blur(14px)}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes sc-blitz{0%,100%{opacity:0}35%{opacity:1}}
@keyframes sc-umlauf{0%{--sc-w:0deg;opacity:0}12%,80%{opacity:1}100%{--sc-w:360deg;opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .js .preise--eins .paket:first-child{transition:border-color 1.1s 3.74s,box-shadow 1.32s 3.74s}
  .js .preise--eins:not(.in) .paket:first-child{border-color:var(--kante);box-shadow:inset 0 1px 0 var(--kante-hell),0 30px 60px -30px rgba(0,0,0,.8)}
  .js .preise--eins .paket:first-child .preis{transform-origin:0 50%}
  .js .preise--eins:not(.in) .paket:first-child>*{opacity:0}
  .js .preise--eins.in .paket:first-child .preis{animation:sc-landen .94s cubic-bezier(.2,.75,.2,1) both}
  .js .preise--eins .paket:first-child>:is(h3,.fuer,.knopf){transition:opacity .55s .83s}
  .js .preise--eins .paket:first-child>.knopf{transition-delay:1.87s}
  /* Liste: Zeile für Zeile, der Haken zeichnet sich mit */
  .js .preise--eins .paket:first-child li{transition:opacity .44s calc(1.04s + var(--i,0)*99ms),translate .55s cubic-bezier(.2,.8,.2,1) calc(1.04s + var(--i,0)*99ms)}
  .js .preise--eins:not(.in) .paket:first-child li{opacity:0;translate:-10px 0}
  .js .preise--eins .paket:first-child li::after{transition:clip-path .39s calc(1.21s + var(--i,0)*99ms)}
  .js .preise--eins:not(.in) .paket:first-child li::after{clip-path:inset(0 100% 0 0)}
  .js .preise--eins .paket:first-child li::after{clip-path:inset(-2px)}
  /* Blitz hinter der Zahl */
  .js .preise--eins .paket:first-child::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
    background:radial-gradient(circle at 20% 24%,rgba(79,195,216,.38),transparent 52%)}
  .js .preise--eins.in .paket:first-child::after{animation:sc-blitz .99s ease-out .5s both}
  /* Umlaufendes Licht auf dem Rand, einmal */
  .js .preise--eins .paket:first-child::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
    background:conic-gradient(from var(--sc-w),transparent 0 68%,var(--tuerkis) 88%,#dff8ff 94%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .js .preise--eins.in .paket:first-child::before{animation:sc-umlauf 2.64s linear 1.76s both}
  /* Die zweite Karte bleibt still */
  .js .preise--eins .bausteine{transition:opacity .88s 1.43s,translate .99s cubic-bezier(.2,.8,.2,1) 1.43s}
  .js .preise--eins:not(.in) .bausteine{opacity:0;translate:0 18px}
}

/* ---------- Vier Versprechen: jede Karte tritt gross auf, wird gelesen, rückt an ihren Platz ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .sicher:not(.fertig) .sicherung:not(.da){opacity:0}
  .sicherung.vorn{z-index:3;position:relative}
}

/* ---------- Ablauf: ein Lichtpuls läuft die Linie entlang und zündet Schritt für Schritt ---------- */
@keyframes sc-zuenden{0%{border-color:var(--kante);box-shadow:none;scale:1}
  35%{scale:1.55;background:#dff8ff;border-color:#dff8ff;box-shadow:0 0 50px 12px rgba(79,195,216,1)}100%{scale:1}}
@keyframes sc-ring{0%{opacity:.9;scale:1}100%{opacity:0;scale:var(--weit,3.6)}}
@keyframes sc-live{50%{box-shadow:0 0 34px 5px rgba(79,195,216,.95),inset 0 0 12px rgba(79,195,216,.9)}}
@keyframes sc-puls{0%{left:12.5%;opacity:0}8%,92%{opacity:1}100%{left:87.5%;opacity:0}}
@media (prefers-reduced-motion:no-preference){
  /* --d: Ankunft des Pulses am jeweiligen Punkt (1,35 s für die ganze Linie) */
  .js .schritt{--d:0s}.js .schritt:nth-child(2){--d:.5s}.js .schritt:nth-child(3){--d:.99s}.js .schritt:nth-child(4){--d:1.49s;--weit:6.5}
  .js .schritt i{position:relative}
  .js .ablauf:not(.in) .schritt i{border-color:var(--kante);box-shadow:none}
  .js .ablauf.in .schritt :is(small,b,p){transition:opacity .39s var(--d),translate .5s cubic-bezier(.2,.8,.2,1) var(--d)}
  .js .ablauf:not(.in) .schritt :is(small,b,p){opacity:0;translate:0 12px}
  .js .ablauf.in .schritt i{animation:sc-zuenden .61s ease-out var(--d) backwards}
  .js .ablauf.in .schritt i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--tuerkis);opacity:0;
    animation:sc-ring .83s ease-out var(--d)}
  /* «Online» bleibt als Live-Punkt stehen */
  .js .ablauf.in .schritt:last-child i{animation:sc-zuenden .61s ease-out var(--d) backwards,sc-live 2.64s ease-in-out calc(var(--d) + .61s) infinite}
  .js .ablauf::before{transform-origin:0 50%;transition:transform 1.49s linear}
  .js .ablauf:not(.in)::before{transform:scaleX(0)}
  .js .ablauf.in::after{content:"";position:absolute;top:13px;left:12.5%;width:110px;height:5px;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:0;
    background:radial-gradient(closest-side,#fff,var(--tuerkis) 45%,transparent);filter:drop-shadow(0 0 10px var(--tuerkis));
    animation:sc-puls 1.49s linear}
}
@media (max-width:980px){.js .ablauf.in::after{display:none}}