/* ==========================================================================
   SimpleCrafts Studio - Startseite "Nachtraum"  (26.10.2026)
   Ein globales Stylesheet fuer alle Sprachseiten. Dunkel (Nachtglas-Familie), Jost + Manrope (OFL, selbst gehostet).
   Aufbau: 1 Tokens  2 Grundlagen  3 Bausteine  4 Handy  5 Navigation  6 Hero  7 Manifest  8 App-Kapitel
           9 Haltung  10 Studio  11 FAQ  12 Abschluss/Fuss  13 Bewegung (nur ohne reduced-motion)
   Ohne JavaScript oder bei reduzierter Bewegung gilt das ruhige Grundlayout (nichts klebt, nichts ist unsichtbar).
   ========================================================================== */

@font-face { font-family: "Jost"; src: url("fonts/jost-var.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-var.woff") format("woff"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- 1 Tokens */
:root {
  color-scheme: dark;
  --bg: #070A11;          /* Nachtraum */
  --bg-2: #0B101B;
  --surface: #111826;
  --surface-2: #171F30;
  --text: #F2F5FA;
  --muted: #A9B3C5;       /* 8,6 : 1 auf --bg */
  --line: rgba(255, 255, 255, .13);
  --line-2: rgba(255, 255, 255, .24);
  --a: #2BA8FF;           /* einziger Akzent (Kampagne) */
  --b: #66C0FF;           /* Akzent hell */
  --grad: linear-gradient(90deg, #2BA8FF, #66C0FF);
  --surface-k: #171C27;
  --app: var(--a);        /* nur kleine Details je App (Symbol, Chip, Ziffer) */
  --logo-a: #25E0C0; --logo-b: #8A7DFF;
  --text-logo: #F2F5FA;

  --font-d: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-t: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --maxw: 1240px;
  --gut: clamp(20px, 4.4vw, 64px);
  --nav-h: 68px;
  --radius: 22px;
}

/* ---------------------------------------------------------------- 2 Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 clamp(1rem, .96rem + .2vw, 1.125rem)/1.6 var(--font-t); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(102, 192, 255, .4); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -64px; z-index: 200; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 10px; font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 12px; }
.container { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }

/* Filmkorn und Aurora: ruhige Tiefe, nichts bewegt sich */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px; }
main, .nav, footer { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- 3 Bausteine */
.eyebrow { display: inline-flex; align-items: center; gap: .7em; font: 600 .75rem/1 var(--font-t); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--grad); }
.h-display { font: 300 clamp(2.5rem, 1.3rem + 5.6vw, 6.4rem)/1.02 var(--font-d); letter-spacing: -.035em; text-wrap: balance; }
.h-1 { font: 300 clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem)/1.06 var(--font-d); letter-spacing: -.03em; text-wrap: balance; }
.h-2 { font: 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem)/1.12 var(--font-d); letter-spacing: -.02em; text-wrap: balance; }
.grad { font-weight: 500; color: var(--b); }
.lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
section { position: relative; }

.btn { --pad: 1.05em 1.7em; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 56px; padding: var(--pad); border-radius: 999px; font: 600 1rem/1 var(--font-t); letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s, border-color .22s, filter .22s; }
.btn--primary { color: #03101C; background: var(--grad); box-shadow: 0 10px 30px -12px rgba(43, 168, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--primary:hover { box-shadow: 0 16px 40px -12px rgba(102, 192, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn--ghost { color: var(--text); border-color: var(--line-2); background: rgba(255, 255, 255, .03); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }
.btn svg { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease); }
.btn:hover svg, .btn:focus-visible svg { transform: translateX(4px); }
.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-2); padding-block: .2em; transition: border-color .3s, gap .3s var(--ease); }
.link-arrow:hover { border-color: var(--text); gap: .8em; }

.chip { display: inline-flex; align-items: center; gap: .5em; padding: .42em .9em; border-radius: 999px; font: 600 .78rem/1.2 var(--font-t); letter-spacing: .04em; border: 1px solid var(--line-2); color: var(--text); background: rgba(255, 255, 255, .04); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--app); }
.chip--status { color: var(--muted); }
.chip--live { border-color: color-mix(in srgb, var(--app) 55%, transparent); color: var(--text); }
.glass { background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02)); border: .75px solid var(--line-2); border-radius: var(--radius); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }

/* Logo (Inline-SVG) */
.logo { height: 100%; width: auto; overflow: visible; }
.logo__word { --text: var(--text-logo); }

/* Einblenden: nur wenn JavaScript laeuft und Bewegung erlaubt ist (siehe Abschnitt 13) */

/* ---------------------------------------------------------------- 4 Handy (reines HTML/CSS, 1 em = 1 % der Breite) */
.phone { --w: 280px; --dp: 12em; position: relative; width: var(--w); font-size: calc(var(--w) / 100); transform-style: preserve-3d; transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--sc, 1)); opacity: var(--op, 1); flex: none; }
.phone__body { position: relative; padding: .4em; border-radius: 13em; background: linear-gradient(150deg, #6d7585 0%, #20242e 18%, #0b0d12 48%, #1a1e27 78%, #646c7c 100%); box-shadow: 0 0 0 .08em rgba(0, 0, 0, .7), 0 6em 9em -3em rgba(0, 0, 0, .75); }
.phone__bezel { padding: 2.1em; border-radius: 12.6em; background: #040507; }
.phone__screen { position: relative; border-radius: 10.5em; overflow: hidden; aspect-ratio: 1080 / 2400; background: #000; isolation: isolate; }
.phone__screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .07) 100%), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 14%); transform: translateX(calc(var(--sheen, 0) * 1%)); mix-blend-mode: screen; }
.phone__cam { position: absolute; z-index: 5; top: 2.1em; left: 50%; width: 2.9em; height: 2.9em; margin-left: -1.45em; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #26364f 0, #070a10 46%, #020306 100%); box-shadow: 0 0 0 .3em #000; }
.phone__edge { position: absolute; inset: 0; border-radius: 13em; background: linear-gradient(135deg, #5a6376, #232832 38%, #12151b 68%, #3a4152); transform: translateZ(calc(var(--dp) * var(--k) / -8)); }
.phone__rail { position: absolute; }
.phone__rail--l { left: 0; top: 13em; bottom: 13em; width: var(--dp); transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #d3dae9 0, #8791a6 5%, #465064 22%, #2a303d 52%, #1b2029 100%); }
.phone__rail--r { right: 0; top: 13em; bottom: 13em; width: var(--dp); transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, #d3dae9 0, #8791a6 5%, #465064 22%, #2a303d 52%, #1b2029 100%); }
.phone__rail--t { top: 0; left: 13em; right: 13em; height: var(--dp); transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(180deg, #c3cbdc 0, #7d879b 6%, #3f4859 26%, #242a35 60%, #151920 100%); }
.phone__rail--b { bottom: 0; left: 13em; right: 13em; height: var(--dp); transform-origin: 50% 100%; transform: rotateX(90deg); background: linear-gradient(0deg, #c3cbdc 0, #7d879b 6%, #3f4859 26%, #242a35 60%, #151920 100%); }
.phone__btn { position: absolute; right: -.55em; width: 4.2em; border-radius: .3em; transform-origin: 100% 50%; transform: translateZ(-3.2em) rotateY(-90deg); background: linear-gradient(270deg, #d3dae9 0, #7d879b 20%, #2a303d 100%); }
.phone__btn--p { top: 24%; height: 7%; }
.phone__btn--v { top: 34%; height: 12%; }
.phone__screen > img, .phone__screen > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen { object-fit: cover; opacity: 0; transform: scale(1.025); transition: opacity .7s var(--ease), transform 1s var(--ease); }
.screen.is-on { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 5 Navigation */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); transition: background-color .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(7, 10, 17, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: var(--line); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav__brand { display: block; height: 34px; flex: none; }
.nav__menu { margin-left: auto; }
.nav__list { display: flex; gap: 6px; }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 500 .94rem/1 var(--font-t); text-decoration: none; color: var(--muted); transition: color .25s, background-color .25s; }
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--text); background: rgba(255, 255, 255, .07); }
.nav__tools { display: flex; align-items: center; gap: 10px; }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; font: 600 .82rem/1 var(--font-t); letter-spacing: .08em; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 16px; height: 16px; }
.lang[open] summary { background: rgba(255, 255, 255, .08); }
.lang__list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px -20px #000; }
.lang__list a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 500; }
.lang__list a:hover { background: rgba(255, 255, 255, .08); }
.lang__list a[aria-current="true"] { color: var(--a); }
.nav__burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); cursor: pointer; place-items: center; }
.nav__burger span { display: block; width: 18px; height: 1.5px; background: var(--text); position: relative; transition: background .2s; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--text); transition: transform .35s var(--ease); }
.nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.progress { position: fixed; inset: 0 0 auto 0; z-index: 110; height: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); pointer-events: none; }

@media (max-width: 880px) {
  .nav__burger { display: grid; }
  .nav__menu { position: fixed; inset: var(--nav-h) 0 0 0; margin: 0; padding: 24px var(--gut) 40px; background: rgba(7, 10, 17, .96); backdrop-filter: blur(20px); display: none; overflow-y: auto; }
  .nav__menu.is-open { display: block; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { width: 100%; min-height: 64px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--line); font: 300 1.9rem/1 var(--font-d); color: var(--text); }
  .nav__tools { margin-left: auto; }
}

/* ---------------------------------------------------------------- 6 Hero (Text + 3D-Faecher) */
.hero { position: relative; }
.hero__sticky { position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 12px) 0 40px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38vw 38vw at var(--mx, 70%) var(--my, 48%), rgba(255, 255, 255, .035), transparent 70%); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 calc(25% - .5px), rgba(255, 255, 255, .04) 25%, transparent calc(25% + .5px) calc(50% - .5px), rgba(255, 255, 255, .04) 50%, transparent calc(50% + .5px) calc(75% - .5px), rgba(255, 255, 255, .04) 75%, transparent calc(75% + .5px)); -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); }
.hero__grid { position: relative; width: min(100% - 2 * var(--gut), 1480px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(8px, 2vw, 40px); }
.hero__copy { position: relative; z-index: 3; display: grid; gap: clamp(16px, 2.4vh, 28px); justify-items: start; opacity: calc(1 - var(--p, 0) * 1.15); }
.hero__title { font: 300 clamp(2.6rem, 1rem + 4.5vw, 5.8rem)/.99 var(--font-d); letter-spacing: -.04em; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
/* zentriert */
.cue { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; display: grid; justify-items: center; gap: 10px; font: 600 .68rem/1 var(--font-t); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); opacity: calc(1 - var(--p, 0) * 5); }
.cue::after { content: ""; width: 1px; height: 30px; background: linear-gradient(var(--text), transparent); }

/* Faecher: Handys liegen in einer 3D-Szene (perspective); JS setzt je Handy Position, Drehung und Tiefe aus dem Abstand zur Mitte */
.fan { --fw: clamp(176px, min(17.5vw, 30svh), 292px); position: relative; display: grid; justify-items: center; gap: 12px; }
.fan .phone { --w: var(--fw); }
.fan__glow { display: none; }
.fan__viewport { position: relative; width: 100%; height: calc(var(--fw) * 2.2 + 28px); perspective: 1350px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; border-radius: 24px; }
.fan__viewport.is-drag { cursor: grabbing; }
.fan__viewport:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.fan__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--fy, 0) * -3.5deg)) rotateY(calc(var(--fx, 0) * 4.5deg)); }
.fan__item { position: absolute; left: 50%; top: 50%; width: var(--fw); transform-style: preserve-3d; will-change: transform, opacity; transform: translate(-50%, -50%); }
.fan__item img { -webkit-user-drag: none; pointer-events: none; }
.fan__float { transform-style: preserve-3d; }
.fan__dim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(var(--sd, 90deg), rgba(2, 4, 9, var(--sh, 0)) 0%, rgba(2, 4, 9, 0) 78%), rgba(2, 4, 9, var(--dim, 0)); }
.fan .screen { opacity: 1; transition: none; transform: translate3d(calc(var(--fx, 0) * -.6em), calc(var(--fy, 0) * -.45em), 0) scale(1.012); }
.fan__floor { position: absolute; left: 50%; bottom: calc(var(--fw) * -.03); width: calc(var(--fw) * 2.6); height: calc(var(--fw) * .09); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent 78%); pointer-events: none; opacity: calc(1 - var(--p, 0) * 3); }
.fan__bar { position: relative; z-index: 4; width: min(100%, 600px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; opacity: calc(1 - var(--p, 0) * 3.5); }
.fan__nav { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; transition: background-color .3s, border-color .3s, transform .35s var(--ease); }
.fan__nav svg { width: 22px; height: 22px; }
.fan__nav:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.fan__nav--prev:hover { transform: translateX(-2px); } .fan__nav--next:hover { transform: translateX(2px); }
.fan__caps { display: grid; }
.fan__cap { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: left; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .45s; }
.fan__cap.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fan__icon { width: 44px; height: 44px; border-radius: 24%; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); }
.fan__txt { display: grid; gap: 2px; }
.fan__app { font: 500 1.3rem/1.1 var(--font-d); letter-spacing: -.01em; }
.fan__fn { color: var(--muted); font-size: .9rem; line-height: 1.2; }
.fan__act { display: flex; align-items: center; }
.fan__act .play-badge img { height: 44px; }
.fan__dots { display: flex; gap: 8px; align-items: center; opacity: calc(1 - var(--p, 0) * 3.5); }
.fan__dot { width: 8px; height: 8px; padding: 0; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .28); cursor: pointer; position: relative; transition: width .4s var(--ease), background-color .3s; }
.fan__dot::before { content: ""; position: absolute; inset: -14px -4px; }
.fan__dot.is-on { width: 26px; background: var(--b); }
.fan__hint { font: 500 .72rem/1 var(--font-t); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); opacity: calc(1 - var(--p, 0) * 5); }
.hero.is-leaving .fan__viewport { pointer-events: none; }
.fan__gl { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .55s ease-out; }
.fan__gl.is-ready { opacity: 1; }
/* Platzhalter bis alles bereit ist: nur das Standbild des mittleren Handys (gleiche Lage und Groesse wie im WebGL-Faecher).
   Es blendet weich ein, sobald das Bild decodiert ist, bleibt stehen, bis der Canvas voll da ist, und verschwindet dann hinter ihm. */
.gl-ok .fan__item { display: none; }
.gl-ok .fan__item[data-i="0"] { display: block; opacity: 0; transition: opacity .45s ease-out; }
.gl-ok.fan-ph .fan__item[data-i="0"] { opacity: 1; }
.gl-ok.gl-live .fan__item[data-i="0"] { opacity: 0; pointer-events: none; transition: opacity .2s linear .6s; }
.gl-ok .fan__item[data-i="0"] video.live { display: none; }
.fan video.live { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.fan video.live.is-live { opacity: 1; }
@media (max-width: 880px), (max-width: 1100px) and (orientation: portrait) {
  .hero__grid { grid-template-columns: 1fr; gap: 6px; }
  .hero__copy { gap: 12px; transform: none; }
  .hero__sticky { padding-top: calc(var(--nav-h) + 4px); padding-bottom: 10px; }
  .hero__title { font-size: clamp(2.3rem, 7.4vw, 4.2rem); }
  .fan { --fw: clamp(118px, min(28vw, 24svh), 260px); gap: 8px; }
  .fan__bar { width: min(100%, 520px); }
  .fan__hint { display: none; }
  .cue { display: none; }
}
@media (max-width: 600px) {
  .hero__copy .lead { display: none; }
  .hero__actions { gap: 10px; flex-wrap: nowrap; }
  .hero__actions .btn { min-height: 48px; padding-inline: 1.15em; font-size: .94rem; }
  .fan { --fw: clamp(100px, min(40vw, 21.5svh), 200px); }
  .fan__bar { display: block; width: 100%; position: static; }
  .fan__nav { position: absolute; top: calc(var(--fw) * 1.1 - 4px); width: 44px; height: 44px; background: rgba(7, 10, 17, .55); z-index: 5; }
  .fan__nav--prev { left: 2px; } .fan__nav--next { right: 2px; }
  .fan__cap { gap: 10px; justify-content: center; flex-wrap: nowrap; }
  .fan__icon { width: 38px; height: 38px; } .fan__app { font-size: 1.1rem; } .fan__fn { font-size: .8rem; }
  .fan__act .play-badge img { height: 40px; }
}
@media (max-width: 600px) and (max-height: 760px) {
  .hero__copy .eyebrow { display: none; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero__actions .btn { min-height: 44px; }
  .fan { --fw: clamp(96px, min(36vw, 18.5svh), 200px); }
  .fan__act .play-badge img { height: 36px; }
}
@media (max-height: 700px) { .hero__copy .lead { display: none; } .fan__hint { display: none; } }

html:not(.js) .fan__item:not([data-i="0"]) { display: none; }

/* ---------------------------------------------------------------- 7 Manifest */
.manifest { position: relative; }
.manifest__sticky { min-height: 100svh; display: grid; align-content: center; padding: 14vh 0; position: relative; overflow: hidden; }
.manifest__sticky::before { content: ""; position: absolute; left: 50%; top: 50%; width: 80vw; height: 80vw; max-width: 1100px; max-height: 1100px; border-radius: 50%; transform: translate(-50%, -50%) scale(calc(.7 + var(--p, 1) * .4)); background: radial-gradient(closest-side, rgba(255, 255, 255, .03), transparent 75%); pointer-events: none; }
.manifest__text { position: relative; font: 300 clamp(2rem, 1rem + 4.6vw, 5rem)/1.12 var(--font-d); letter-spacing: -.03em; max-width: 21ch; text-wrap: balance; }
.manifest__text .w { opacity: clamp(.16, calc(.16 + (var(--p, 1) * (var(--n, 20) + 6) - var(--i, 0)) / 3 * .84), 1); }
.manifest__sub { position: relative; margin-top: clamp(24px, 5vh, 56px); display: flex; align-items: center; gap: 16px; font: 500 1.05rem/1 var(--font-t); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); opacity: var(--o2, 1); transform: translateY(calc((1 - var(--o2, 1)) * 14px)); }
.manifest__sub::before { content: ""; width: 48px; height: 1px; background: var(--grad); }

/* ---------------------------------------------------------------- 8 App-Kapitel */
.apps__intro { padding: clamp(80px, 14vh, 160px) 0 clamp(24px, 6vh, 64px); display: grid; gap: 22px; }
.chapter { position: relative; --app: var(--a); }
.chapter__sticky { position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 8px) 0 24px; overflow: visible; }
.chapter__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.chapter__bg::before { content: ""; position: absolute; width: min(70vw, 900px); aspect-ratio: 1; border-radius: 50%; top: 50%; left: var(--glow-x, 72%); transform: translate(-50%, -50%) scale(calc(.8 + var(--p, .5) * .3)); background: radial-gradient(closest-side, rgba(255, 255, 255, .035), transparent 72%); }
.chapter__big { position: absolute; left: 0; top: 50%; margin: 0; font: 200 clamp(8rem, 24vw, 26rem)/.8 var(--font-d); letter-spacing: -.05em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .075); transform: translateY(-50%); translate: -50% 0; will-change: translate; animation: bigpendel var(--pendel-dauer, 50s) ease-in-out infinite alternate; user-select: none; }
.chapter__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 5vw, 80px); }
.chapter--flip .chapter__text { order: 2; }
.chapter--flip { --glow-x: 28%; }
.chapter__text { display: grid; gap: clamp(14px, 2.2vh, 24px); justify-items: start; max-width: 540px; }
.chapter__num { display: flex; align-items: center; gap: 14px; font: 600 .78rem/1 var(--font-t); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.chapter__num b { font: 300 1.5rem/1 var(--font-d); letter-spacing: 0; color: var(--app); }
.chapter__title { display: flex; align-items: center; gap: 16px; }
.chapter__icon { width: 56px; height: 56px; border-radius: 24%; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); }
.chapter__name { font: 500 clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem)/1 var(--font-d); letter-spacing: -.02em; }
.chapter__head { font: 300 clamp(1.7rem, 1rem + 2.6vw, 3.1rem)/1.08 var(--font-d); letter-spacing: -.03em; text-wrap: balance; }
.chapter__desc { color: var(--muted); font-size: .98rem; line-height: 1.55; max-width: 46ch; }
.steps { width: 100%; display: grid; border-top: 1px solid var(--line); }
.step { border-bottom: 1px solid var(--line); }
.step__btn { width: 100%; display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline; text-align: left; background: none; border: 0; padding: 13px 0; cursor: pointer; color: var(--muted); transition: color .35s; }
.step__btn:hover { color: var(--text); }
.step__n { font: 500 .8rem/1 var(--font-t); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.step__t { font: 400 1.2rem/1.2 var(--font-d); letter-spacing: -.01em; }
.step__d { grid-column: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease), opacity .45s; opacity: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.step__d > span { overflow: hidden; display: block; padding-top: 0; }
.step.is-on .step__btn { color: var(--text); }
.step.is-on .step__n { color: var(--app); }
.step.is-on .step__d { grid-template-rows: 1fr; opacity: 1; }
.step.is-on .step__d > span { padding-top: 8px; }
.chapter__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.chapter__note { font-size: .84rem; color: var(--muted); max-width: 46ch; }
.chapter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.chapter__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .94rem; }
.chapter__links a { color: var(--muted); } .chapter__links a:hover { color: var(--text); }
.play-badge img { height: 56px; width: auto; }
.chapter__phone { touch-action: pan-y; position: relative; display: grid; place-items: center; perspective: 1600px; min-height: min(80svh, 820px); }
.chapter__phone { --pw: clamp(150px, min(26vw, calc((100svh - 300px) / 2.3)), 380px); }   /* Handybreite; Karussell-Baustein (Nachbar-Handys) liest dieselbe Groesse */
.chapter .phone { --w: var(--pw); }
.chapter__static { display: none; }
@media (max-width: 880px) {
  /* Handyansicht (28.10.2026): das Handy ist der Hauptdarsteller. Kopf, Handy, Striche, Schrittext und Knoepfe stehen untereinander im normalen Fluss
     (kein Hoehenzwang auf eine Bildschirmhoehe mehr, sonst blieb fuers Handy nur ein Streifen); die Breite des Handys folgt Breite UND Hoehe des Fensters. */
  .chapter__sticky { padding: calc(var(--nav-h) + 12px) 0 44px; align-items: start; }
  .chapter__grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 6px; align-content: start; }
  .chapter--flip .chapter__text { order: 0; }
  .chapter__text { display: contents; }
  .chapter__top { display: grid; gap: 6px; }
  .chapter__phone { min-height: 0; grid-row: 2; align-self: start; padding: 4px 0 2px; }
  .chapter__bottom { grid-row: 3; display: grid; gap: 12px; }
  .chapter__desc, .chapter__num { display: none; }
  .chapter__head { font-size: clamp(1.45rem, 6.6vw, 2rem); }
  .chapter__icon { width: 40px; height: 40px; }
  .chapter__name { font-size: 1.4rem; }
  /* Handybreite aus der Fensterhoehe: Handy (2,16 x Breite) plus Punkte-Leiste und Beschreibung muessen ohne Scrollen ins Bild passen (28.10.2026) */
  .chapter__phone { --pw: min(56vw, 22.5svh, 300px); }
  .steps { border-top: 0; }
  /* alle Schritte liegen in einer Zelle uebereinander: Hoehe = laengster Text, damit beim Wischen nichts darunter springt */
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { display: block; grid-area: 1 / 1; border: 0; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s .3s; } .step.is-on { visibility: visible; opacity: 1; transition: opacity .35s ease; }
  .step__btn { grid-template-columns: 1fr; padding: 0; pointer-events: none; }
  .step__n { display: none; }
  .step__t { font-size: 1.15rem; color: var(--text); }
  .step__d { grid-column: 1; grid-template-rows: 1fr; opacity: 1; }
  .step__d > span { padding-top: 6px; }
  .chapter__facts { gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .chapter__facts::-webkit-scrollbar { display: none; } .chapter__facts .chip { padding: .3em .7em; font-size: .72rem; }
  .chapter__note { font-size: .78rem; }
  .play-badge img { height: 48px; }
  .chapter__dots { display: none; }   /* ersetzt durch die Punkte-Leiste des Karussell-Bausteins (unten) */
}
@media (max-width: 880px) and (orientation: landscape) and (max-height: 560px) {
  .chapter__sticky { padding: calc(var(--nav-h) + 4px) 0 20px; min-height: 100svh; }
  .chapter__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: 20px; align-items: center; }
  .chapter__phone { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .chapter__top { grid-column: 2; grid-row: 1; align-self: end; }
  .chapter__bottom { grid-column: 2; grid-row: 2; align-self: start; }
  .chapter__phone { --pw: min(34vw, calc((100svh - var(--nav-h) - 100px) / 2.3)); }
}
@media (min-width: 881px) { .chapter__dots { display: none; } .chapter__top, .chapter__bottom { display: contents; } }
@media (min-width: 881px) and (max-height: 780px) { .chapter__desc { display: none; } .step__btn { padding: 6px 0; } .step__t { font-size: 1.08rem; } .chapter__text { gap: 10px; } .chapter__facts .chip { padding: .3em .7em; } .chapter__head { font-size: 1.7rem; } .chapter__sticky { padding-top: calc(var(--nav-h) + 4px); padding-bottom: 12px; } }


/* ---------------------------------------------------------------- 9 Haltung */
.principles { padding: clamp(96px, 16vh, 200px) 0; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .025) 20%, rgba(255, 255, 255, .025) 80%, transparent); }
.principles__head { display: grid; gap: 22px; margin-bottom: clamp(48px, 9vh, 100px); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.pillar { position: relative; padding-top: 28px; display: grid; gap: 14px; align-content: start; }
.pillar::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--grad); transform-origin: 0 50%; }
.pillar__n { font: 200 clamp(3.6rem, 2rem + 5vw, 6.4rem)/.9 var(--font-d); letter-spacing: -.05em; color: var(--b); }
.pillar__t { font: 400 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.15 var(--font-d); letter-spacing: -.02em; }
.pillar__d { color: var(--muted); font-size: .98rem; line-height: 1.6; }
.stats { margin-top: clamp(56px, 10vh, 120px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: clamp(22px, 4vh, 40px) 0 clamp(22px, 4vh, 40px) clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line); display: grid; gap: 6px; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { font: 300 clamp(2rem, 1.3rem + 2.4vw, 3.6rem)/1.05 var(--font-d); letter-spacing: -.03em; }
.stat span { color: var(--b); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.stat small { color: var(--muted); font-size: .9rem; line-height: 1.45; }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: 0; padding-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------------------------------------------------------------- 10 Studio */
.studio { padding: clamp(80px, 14vh, 180px) 0; }
.studio__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.studio__facts { display: grid; gap: 18px; padding-left: clamp(16px, 3vw, 40px); border-left: 1px solid var(--line); }
.studio__facts dt { font: 600 .72rem/1 var(--font-t); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.studio__facts dd { margin: 0; font: 300 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.2 var(--font-d); }
.soon { margin-top: clamp(56px, 9vh, 110px); display: grid; gap: 22px; }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 20px; width: max-content; }
.soon__item { width: clamp(280px, 30vw, 380px); padding: 26px; display: grid; gap: 10px; align-content: start; }
.soon__item .chip { justify-self: start; }
.soon__item h3 { font: 400 1.6rem/1 var(--font-d); letter-spacing: -.015em; }
.soon__item p { color: var(--muted); font-size: .95rem; line-height: 1.5; }
@media (max-width: 880px) { .studio__grid { grid-template-columns: 1fr; } .studio__facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; } .marquee__track { flex-wrap: wrap; width: auto; animation: none !important; transform: none !important; margin: 0; padding: 0; } .marquee { -webkit-mask: none; mask: none; } .soon__item { width: 100%; } .marquee__track [aria-hidden="true"] { display: none; } }

/* ---------------------------------------------------------------- 11 FAQ */
.faq { padding: clamp(64px, 10vh, 130px) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); }
.faq__head { display: grid; gap: 18px; align-content: start; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 14px 0; cursor: pointer; font: 400 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.25 var(--font-d); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat, linear-gradient(var(--text), var(--text)) center / 1.5px 12px no-repeat; transition: transform .45s var(--ease), background-color .3s; }
.faq summary:hover::after { background-color: rgba(255, 255, 255, .08); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq__a { padding: 0 60px 24px 0; color: var(--muted); max-width: 62ch; animation: faq-in .5s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 880px) { .faq__grid { grid-template-columns: 1fr; } .faq__a { padding-right: 0; } }

/* ---------------------------------------------------------------- 12 Abschluss und Fuss */
.cta { padding: clamp(80px, 14vh, 170px) 0; text-align: center; overflow: hidden; }
.cta::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(90vw, 1000px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, .03), transparent 75%); pointer-events: none; }
.cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; }
.cta__inner > * { max-width: 100%; }
.cta__mark { width: auto; }
.cta__mark .cta__icon { width: clamp(72px, 9vw, 112px); height: auto; aspect-ratio: 1; object-fit: cover; }   /* Symbol nie stauchen: feste Proportion statt fester Hoehe in einem schmalen Container */
.cta__apps { margin-top: 14px; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; max-width: 920px; }
.cta__app { padding: 22px 18px; display: grid; justify-items: center; gap: 14px; transition: transform .45s var(--ease), border-color .3s; }
.cta__app:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .45); }
.cta__app img.ic { width: 56px; height: 56px; border-radius: 24%; }
.cta__app strong { font: 500 1.25rem/1 var(--font-d); }
.contact { padding: clamp(48px, 8vh, 96px) 0 24px; border-top: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto auto; gap: clamp(24px, 4vw, 56px); }
.contact h2 { font: 600 .72rem/1 var(--font-t); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.contact li + li { margin-top: 8px; }
.contact a { text-decoration: none; color: var(--text); } .contact a:hover { text-decoration: underline; }
.contact__big { font: 300 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem)/1.15 var(--font-d); letter-spacing: -.02em; }
.contact__mail { display: inline-block; margin-top: 12px; font: 300 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.2 var(--font-d); border-bottom: 1px solid var(--line-2); }
.foot { margin-top: clamp(40px, 8vh, 90px); padding: 22px 0 36px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: space-between; color: var(--muted); font-size: .84rem; }
.foot a { color: var(--muted); }
.contact__grid li a { white-space: nowrap; }
@media (max-width: 880px) { .contact__grid { grid-template-columns: 1fr 1fr; } .contact__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .contact__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 13 Bewegung (nur wenn JS laeuft und Bewegung erlaubt ist) */
@media all {   /* Showcase-Bewegung laeuft immer (Entscheidung Bjoern/Manfred); html.calm = Sitzungsschalter im Fuss */
  /* Einblenden */
  html.js .reveal { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .9s var(--ease) calc(var(--d, 0) * 90ms), transform 1.1s var(--ease) calc(var(--d, 0) * 90ms); }
  html.js .reveal.is-in { opacity: 1; transform: none; }
  html.js .pillar::before { transform: scaleX(0); transition: transform 1.4s var(--ease) calc(var(--d, 0) * 140ms); }
  html.js .pillar.is-in::before { transform: scaleX(1); }
  /* Schweben */
  .fan__float { animation: fanfloat 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
  @keyframes fanfloat { 0%, 100% { transform: translate3d(0, -7px, 0) rotateZ(-.5deg); } 50% { transform: translate3d(0, 8px, 0) rotateZ(.5deg); } }
  /* Lauftext der kommenden Apps */
  .marquee__track { animation: marq 60s linear infinite; }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
  @keyframes marq { to { transform: translate3d(calc(-50% - 10px), 0, 0); } }

  /* Normaler Seitenfluss: nichts klebt; Bewegung wird vom Scrollstand getrieben */
  html.js .hero__sticky { height: 100svh; min-height: 620px; padding-bottom: 40px; }
  html.js .manifest__sticky { min-height: 100svh; padding: 12vh 0; align-content: center; }
  html.js .chapter__sticky { height: auto; min-height: max(100svh, 620px); }
  @media (max-width: 880px) {
    html.js .chapter__sticky { min-height: 0; display: block; }
  }
}
/* Ruhige Variante (nur per Schalter im Fuss, nur fuer die Sitzung): kein Dauerschweben, keine angehefteten Szenen */
html.calm .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.calm .pillar::before { transform: none !important; transition: none !important; }
html.calm .fan__float, html.calm .marquee__track { animation: none !important; }
html.calm .hero, html.calm .manifest, html.calm .chapter { height: auto !important; }
html.calm .hero__sticky, html.calm .manifest__sticky, html.calm .chapter__sticky { position: relative !important; height: auto !important; min-height: 100svh; top: auto !important; }
html.calm .manifest__text .w { opacity: 1; }
html.calm .chapter__phone { padding: 24px 0; }
html.calm .step__d { grid-template-rows: 1fr; opacity: 1; } html.calm .step__d > span { padding-top: 6px; }
html.calm .totop { transition: opacity .15s linear, visibility 0s .15s; transform: none; }
/* Ohne JavaScript: Kapitel zeigen das erste Bild, Schritte offen */
html:not(.js) .step__d { grid-template-rows: 1fr; opacity: 1; }
html:not(.js) .screen:first-of-type { opacity: 1; transform: none; }

/* Nach-oben-Knopf (global): rund, Glas, Verlaufskante; erscheint nach etwa einer Bildschirmhoehe */
.totop { position: fixed; z-index: 80; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text);
  border: 1.5px solid transparent; background: linear-gradient(rgba(10, 14, 24, .78), rgba(10, 14, 24, .78)) padding-box, var(--grad) border-box; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .35s, box-shadow .3s; }
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop svg { width: 22px; height: 22px; transition: transform .35s var(--ease); }
.totop:hover { box-shadow: 0 16px 40px -10px rgba(102, 192, 255, .4); } .totop:hover svg { transform: translateY(-3px); }
@media (max-width: 880px) { .totop { width: 48px; height: 48px; } .chapter__sticky { padding-bottom: 64px; } }

/* Schalter "Bewegung reduzieren": Zustand deutlich sichtbar (Text + Schieber + Farbe) */
.motion-toggle { display: inline-flex; align-items: center; gap: 12px; background: none; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font: 500 .86rem/1 var(--font-t); min-height: 44px; padding: 0 14px 0 18px; cursor: pointer; transition: border-color .25s, color .25s, background-color .25s; }
.motion-toggle:hover { color: var(--text); }
.motion-toggle__track { position: relative; width: 40px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, .16); transition: background-color .25s; flex: none; }
.motion-toggle__track i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.motion-toggle__state { min-width: 2.2em; font-weight: 700; text-align: left; }
.motion-toggle[aria-checked="true"] { color: var(--text); border-color: var(--b); background: rgba(43, 168, 255, .12); }
.motion-toggle[aria-checked="true"] .motion-toggle__track { background: var(--a); }
.motion-toggle[aria-checked="true"] .motion-toggle__track i { transform: translateX(18px); }
.foot { padding-right: 84px; }
@media (max-width: 880px) { .foot { padding-right: 70px; } }

/* Kapitel-Handys schweben wie die im Hero (Drehung beim Scrollen bleibt, Schweben kommt obendrauf) */
.stage__float2 { animation: fanfloat 7s ease-in-out infinite; transform-style: preserve-3d; }
.chapter--flip .stage__float2 { animation-delay: -3.5s; }
html.calm .stage__float2 { animation: none; }

/* Pendelzeit der Hintergrundschrift (ein Weg links nach rechts): hier anpassen */
:root { --pendel-dauer: 50s; }
@keyframes bigpendel { from { translate: -50% 0; } to { translate: calc(100vw - 50%) 0; } }
html.calm .chapter__big { animation-play-state: paused; }

/* Einheitliche Hover-/Fokus-Sprache (ein Baustein fuer Listen, Karten, Knoepfe, Links) */
:root { --hov-bg: rgba(255, 255, 255, .075); --hov-line: rgba(255, 255, 255, .34); --hov-t: 160ms; }
.step__btn, .nav__link, .lang__list a, .faq summary, .soon__item, .cta__app, .fan__nav, .btn--ghost, .motion-toggle, .contact li a, .link-arrow { transition: background-color var(--hov-t) ease, color var(--hov-t) ease, border-color var(--hov-t) ease, box-shadow var(--hov-t) ease, transform .25s var(--ease); }
.step__btn { position: relative; padding-left: 12px; padding-right: 12px; margin: 0; border-radius: 0; box-shadow: inset 2px 0 0 transparent; }
.step__btn:hover, .step__btn:focus-visible { background: var(--hov-bg); color: var(--text); box-shadow: inset 3px 0 0 var(--hov-line); transform: translateX(3px); }
.step__btn:hover .step__n, .step__btn:focus-visible .step__n { color: var(--text); }
.step.is-on .step__btn { background: color-mix(in srgb, var(--app) 14%, transparent); box-shadow: inset 3px 0 0 var(--app); color: var(--text); transform: none; }
.step.is-on .step__btn:hover { background: color-mix(in srgb, var(--app) 20%, transparent); }
.nav__link:hover, .lang__list a:hover, .nav__link:focus-visible, .lang__list a:focus-visible { background: rgba(255, 255, 255, .11); color: var(--text); }
.faq summary:hover, .faq summary:focus-visible { background: var(--hov-bg); }
.faq summary { padding-left: 10px; padding-right: 10px; }
.soon__item:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); border-color: var(--hov-line); }
.fan__nav:hover, .fan__nav:focus-visible, .btn--ghost:hover, .btn--ghost:focus-visible, .motion-toggle:hover, .motion-toggle:focus-visible { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); color: var(--text); }
.contact li a:hover, .contact li a:focus-visible, .link-arrow:hover, .link-arrow:focus-visible { color: var(--b); }

/* Google-Play-Knopf: wichtigster Knopf der Seite. Bewegung und Skalierung nur am Wrapper, die Badge-Grafik bleibt unveraendert; Freiraum 1/4 Hoehe */
.play-badge { position: relative; display: inline-block; margin: 14px; border-radius: 10px; line-height: 0; animation: badgefloat 6.5s ease-in-out infinite; animation-delay: calc(var(--bi, 0) * -1.7s); transition: scale .35s var(--ease), filter .35s; will-change: transform; }
.play-badge::before { content: ""; position: absolute; inset: -20px; z-index: -1; border-radius: 28px; background: radial-gradient(closest-side, rgba(102, 192, 255, .16), transparent 80%); opacity: .7; transition: opacity .35s; pointer-events: none; }
.play-badge img { box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .9); border-radius: 8px; }
.play-badge:hover, .play-badge:focus-visible { scale: 1.09; }
.play-badge:hover::before, .play-badge:focus-visible::before { opacity: 1; }
@keyframes badgefloat { 0%, 100% { transform: translateY(-3px) rotate(-.4deg); } 50% { transform: translateY(4px) rotate(.4deg); } }
html.calm .play-badge { animation: none; }
.hero .play-badge img, .fan__act .play-badge img { height: 52px; }
.chapter__actions .play-badge img { height: 60px; }
.cta__app .play-badge img { height: 60px; }

/* Abschluss-Kacheln: gleiche Zeilen in allen Kacheln; Hover/Fokus = Kachel kommt dezent nach vorn (nur diese Kachel aendert sich) */
.cta__app { position: relative; z-index: 1; align-content: start; grid-template-rows: 56px auto 88px; align-items: center; transition: transform .26s var(--ease), box-shadow .26s ease, background-color .26s ease, border-color .26s ease; }
.cta__app > :last-child { min-height: 88px; display: flex; align-items: center; justify-content: center; }
.cta__app:focus-within { z-index: 5; transform: translateY(-3px) scale(1.035); border-color: rgba(102, 192, 255, .5); background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035)); box-shadow: 0 0 22px -8px rgba(43, 168, 255, .3), 0 24px 40px -24px rgba(0, 0, 0, .85); }
@media (hover: hover) {
  .cta__app:hover { z-index: 5; transform: translateY(-3px) scale(1.035); border-color: rgba(102, 192, 255, .5); background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035)); box-shadow: 0 0 22px -8px rgba(43, 168, 255, .3), 0 24px 40px -24px rgba(0, 0, 0, .85); }
}

/* Ruhiger Hover fuer alle Knoepfe (kein Verfolgen des Zeigers): 1-2 px anheben, gleichmaessiges Leuchten, Kontur heller, 220 ms */
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn--primary:hover, .btn--primary:focus-visible { filter: brightness(1.08); box-shadow: 0 14px 34px -12px rgba(102, 192, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .09); }
.btn:active, .fan__nav:active, .totop:active { transform: translateY(0) scale(.98); filter: brightness(.97); transition-duration: 90ms; }

/* iPhone-Warteliste */
.wl { padding: clamp(64px, 10vh, 130px) 0; }
.wl__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.wl__head { display: grid; gap: 18px; align-content: start; }
.wl__form { padding: clamp(22px, 3vw, 40px); display: grid; gap: 18px; }
.wl__field { display: grid; gap: 8px; }
.wl__field label { font: 600 .74rem/1 var(--font-t); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wl__field input, .wl__field select { width: 100%; min-height: 60px; padding: 0 18px; font: 400 1.1rem/1.2 var(--font-t); color: var(--text); background: rgba(255, 255, 255, .045); border: 1px solid var(--line-2); border-radius: 14px; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.wl__field input::placeholder { color: rgba(169, 179, 197, .6); }
.wl__field input:hover, .wl__field select:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .4); }
.wl__field input:focus-visible, .wl__field select:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; border-color: var(--b); background: rgba(255, 255, 255, .08); }
.wl__field input[aria-invalid="true"] { border-color: #ff8c8c; box-shadow: 0 0 0 3px rgba(255, 140, 140, .18); }
.wl__select { position: relative; }
.wl__select select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.wl__select::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.wl__select option { background: #111826; color: #F2F5FA; }
.wl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl__check { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; cursor: pointer; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.wl__check input { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; cursor: pointer; }
.wl__box { width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .045); display: grid; place-items: center; transition: border-color .2s, background-color .2s; }
.wl__box::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid #03101C; border-bottom: 2.5px solid #03101C; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .2s var(--ease); }
.wl__check:hover .wl__box { border-color: rgba(255, 255, 255, .55); }
.wl__check input:checked + .wl__box { background: var(--grad); border-color: transparent; }
.wl__check input:checked + .wl__box::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.wl__check input:focus-visible + .wl__box { outline: 2px solid var(--a); outline-offset: 3px; }
.wl__check input[aria-invalid="true"] + .wl__box { border-color: #ff8c8c; }
.wl__consent a { color: var(--b); text-underline-offset: .2em; }
.wl__send { width: 100%; justify-self: stretch; }
.wl__send[disabled] { opacity: .6; cursor: progress; transform: none; }
/* Rueckmeldefenster der Warteliste (Fehler/Erfolg im Formular), Premium-Fassung 28.10.2026: Glas-Tafel mit Symbol, sanft eingeblendet */
.wl__msg { min-height: 1.4em; font-size: .94rem; line-height: 1.5; color: var(--muted); }
.wl__msg:focus { outline: none; }
.wl__msg.is-err, .wl__msg.is-ok { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid; border-radius: 16px; backdrop-filter: blur(10px); animation: wl-in .38s var(--ease) both; }
.wl__msg.is-err { color: #FFD6D6; background: linear-gradient(160deg, rgba(255, 120, 120, .14), rgba(255, 120, 120, .05)); border-color: rgba(255, 140, 140, .42); }
.wl__msg.is-ok { color: var(--text); background: linear-gradient(160deg, rgba(37, 224, 192, .13), rgba(43, 168, 255, .05)); border-color: rgba(143, 232, 199, .42); }
.wl__ico { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.wl__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wl__ico path { stroke-dasharray: 32; stroke-dashoffset: 32; animation: wl-draw .5s .12s var(--ease) forwards; }
.is-err .wl__ico { color: #FF9A9A; background: rgba(255, 140, 140, .16); box-shadow: inset 0 0 0 1px rgba(255, 140, 140, .4); }
.is-ok .wl__ico { color: #03101C; background: linear-gradient(135deg, #25E0C0, #66C0FF); box-shadow: 0 0 22px -6px rgba(37, 224, 192, .7); }
.wl__txt { min-width: 0; padding-top: 6px; overflow-wrap: anywhere; }
.wl__msg small { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; }
.wl__form.is-done > :not(.wl__msg) { display: none; }
.wl__form.is-done .wl__msg { flex-direction: column; align-items: center; gap: 18px; padding: clamp(22px, 4vw, 40px) clamp(8px, 2vw, 24px); border: 0; background: none; backdrop-filter: none; text-align: center; font-size: 1.05rem; line-height: 1.6; color: var(--text); }
.wl__form.is-done .wl__ico { width: 76px; height: 76px; }
.wl__form.is-done .wl__ico svg { width: 38px; height: 38px; }
.wl__form.is-done .wl__ico::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid rgba(143, 232, 199, .55); animation: wl-ring 1.1s .2s var(--ease) both; }
.wl__form.is-done .wl__txt { padding-top: 0; max-width: 44ch; }
@keyframes wl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wl-draw { to { stroke-dashoffset: 0; } }
@keyframes wl-ring { from { opacity: 0; transform: scale(.7); } 40% { opacity: 1; } to { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .wl__msg.is-err, .wl__msg.is-ok { animation: none; } .wl__ico path { animation: none; stroke-dashoffset: 0; } .wl__form.is-done .wl__ico::after { display: none; } }
html.calm .wl__msg.is-err, html.calm .wl__msg.is-ok { animation: none; } html.calm .wl__ico path { animation: none; stroke-dashoffset: 0; } html.calm .wl__form.is-done .wl__ico::after { display: none; }
@media (max-width: 880px) { .wl__grid { grid-template-columns: 1fr; } }

@media (max-width: 880px) { body:has(.wl__form:focus-within) .totop { opacity: 0; pointer-events: none; } }

/* ---------------------------------------------------------------- App-Seiten */
.apphero { position: relative; padding: calc(var(--nav-h) + clamp(28px, 6vh, 80px)) 0 clamp(40px, 8vh, 100px); overflow: hidden; }
.apphero__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40vw 40vw at 75% 40%, rgba(255, 255, 255, .035), transparent 70%); }
.apphero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.apphero__copy { display: grid; gap: clamp(16px, 2.6vh, 26px); justify-items: start; }
.apphero__icon { width: 44px; height: 44px; border-radius: 24%; margin-right: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.apphero__title { font: 300 clamp(3rem, 1rem + 6vw, 7.2rem)/.96 var(--font-d); letter-spacing: -.045em; }
.apphero__usps { display: flex; flex-wrap: wrap; gap: 8px; }
.apphero:has(.apphero__grid--solo) { padding-bottom: clamp(8px, 2vh, 28px); }
.apphero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.apphero__grid--solo .apphero__copy { max-width: 880px; }
.apphero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.appsec { padding: clamp(56px, 9vh, 120px) 0; }
.appsec__head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(28px, 5vh, 56px); }
.appsec__note { margin-top: 28px; color: var(--muted); max-width: 70ch; font-size: .95rem; }
.featgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.featcard { padding: 26px; display: grid; gap: 10px; align-content: start; }
.featcard h3 { font: 500 1.3rem/1.2 var(--font-d); letter-spacing: -.01em; }
.featcard p { color: var(--muted); font-size: .96rem; line-height: 1.6; }
.featcard__tip { font-size: .85rem !important; border-left: 2px solid var(--b); padding-left: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.howgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; counter-reset: h; }
.howstep { padding: 28px; display: grid; gap: 10px; align-content: start; }
.howstep__n { font: 200 3.6rem/.9 var(--font-d); color: var(--b); letter-spacing: -.04em; }
.howstep h3 { font: 500 1.35rem/1.2 var(--font-d); } .howstep p { color: var(--muted); font-size: .96rem; line-height: 1.6; }
.notegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; }
.notecard { padding: 28px; display: grid; gap: 12px; align-content: start; } .notecard h3 { font: 500 1.3rem/1.2 var(--font-d); } .notecard p { color: var(--muted); line-height: 1.6; font-size: .96rem; }
.detailgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.detailcol { padding: 28px; } .detailcol h3 { font: 500 1.35rem/1.2 var(--font-d); margin-bottom: 14px; }
.detailcol ul { display: grid; gap: 12px; } .detailcol li { color: var(--muted); font-size: .94rem; line-height: 1.55; padding-left: 16px; position: relative; } .detailcol li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--b); } .detailcol strong { color: var(--text); font-weight: 600; }
.step__tip { display: block; margin-top: 10px; font-style: normal; font-size: .84rem; color: var(--muted); border-left: 2px solid var(--b); padding-left: 12px; }
.vid { display: grid; gap: 14px; max-width: 900px; }
.vid__btn { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden; cursor: pointer; background: #0B101B; padding: 0; transition: border-color .22s, transform .22s var(--ease); }
.vid__btn:hover, .vid__btn:focus-visible { border-color: rgba(255, 255, 255, .55); transform: translateY(-2px); }
.vid__poster { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: brightness(.6) saturate(.9); }
.vid__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: rgba(7, 10, 17, .7); border: 1.5px solid var(--b); color: var(--text); backdrop-filter: blur(8px); }
.vid__play svg { width: 34px; height: 34px; margin-left: 4px; }
.vid__label { position: absolute; left: 20px; bottom: 16px; font: 600 .9rem/1 var(--font-t); }
.vid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 22px; }
.vid__note, .vid__soon { color: var(--muted); font-size: .85rem; max-width: 70ch; }
.cta__mark .chapter__icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.appseite .wl__field input { min-height: 56px; }
@media (max-width: 880px) { .apphero__grid { grid-template-columns: 1fr; } }
/* Grosse Systemschrift (130 %): App-Name im Titel darf nicht ueber den Rand laufen (Name bleibt bei Handybreite eine Zeile) */
@media (max-width: 880px) { .apphero__title { font-size: min(3rem, 12.8vw); overflow-wrap: anywhere; } }

/* ---------------------------------------------------------------- Rechtsseiten (Datenschutz je App) und Linkseite */
.legalbar { position: sticky; top: 0; z-index: 50; background: rgba(7, 10, 17, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.legalbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--nav-h); }
.legalbar__back { min-height: 44px; padding-inline: 20px; }
.legal-wrap { max-width: 860px; padding-block: clamp(36px, 7vw, 84px) 40px; position: relative; z-index: 1; }
.legal-title { font: 600 clamp(2rem, 1.4rem + 2.6vw, 3.2rem)/1.1 var(--font-d); letter-spacing: -.01em; margin: 10px 0 14px; }
.legal-meta { color: var(--muted); margin-bottom: 26px; }
.legal-meta a { color: var(--b); }
.legal-card { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: .75px solid var(--line-2); border-radius: var(--radius); padding: clamp(22px, 4vw, 44px); margin-bottom: 28px; }
.legal-card h2 { font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.2 var(--font-d); margin-bottom: 6px; }
.legal-card h3 { font: 600 1.18rem/1.3 var(--font-d); margin: 2em 0 .5em; color: var(--text); }
.legal-card p { margin: 0 0 1em; max-width: 68ch; }
.legal-card p.muted, .legal-card .muted { color: var(--muted); }
.legal-card .lead { font-size: 1.08em; color: var(--text); }
.legal-card ul, .legal-card ol { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.legal-card li { margin-bottom: .4em; max-width: 66ch; }
.legal-card a { color: var(--b); overflow-wrap: anywhere; }
.legal-card hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.legal-card table { border-collapse: collapse; width: 100%; margin: 0 0 1em; display: block; overflow-x: auto; }
.legal-card th, .legal-card td { border: 1px solid var(--line-2); padding: 8px 12px; text-align: left; vertical-align: top; }
.legalfoot { padding: 28px 0 48px; text-align: center; color: var(--muted); font-size: .9rem; position: relative; z-index: 1; }
.legalfoot p { margin: 4px 0; }
mark.jana { background: rgba(255, 196, 61, .22); color: inherit; outline: 1px dashed rgba(255, 196, 61, .7); border-radius: 4px; padding: 0 .15em; }
.legal-draft { margin: 2em 0; padding: 18px 22px; border: 1.5px dashed rgba(255, 196, 61, .75); border-radius: 16px; background: rgba(255, 196, 61, .07); }
.legal-draft h3 { margin-top: .4em; }
.legal-draft__tag { font: 700 .82rem/1.3 var(--font-t); letter-spacing: .08em; text-transform: uppercase; color: #FFC43D; }
.legal-draftnote { font: 600 .9rem/1.45 var(--font-t); color: #FFC43D; background: rgba(255, 196, 61, .1); border-left: 3px solid #FFC43D; padding: 10px 14px; border-radius: 8px; margin-bottom: 1.4em !important; }

/* Linkseite (Link in Bio) */
.links-page { background: var(--bg); min-height: 100vh; }
.links-top { position: relative; z-index: 5; display: flex; justify-content: flex-end; padding: 14px var(--gut) 0; }
.langpick { position: relative; }
.langpick__btn { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); cursor: pointer; font-weight: 600; }
.langpick__btn:hover { border-color: var(--text); }
.langpick__list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px -20px #000; z-index: 20; }
.langpick__list[hidden] { display: none; }
.langpick__list a { display: block; padding: 11px 14px; border-radius: 10px; text-decoration: none; }
.langpick__list a:hover, .langpick__list a[aria-current] { background: rgba(255, 255, 255, .08); }
.links-wrap { position: relative; z-index: 1; width: min(100% - 2 * var(--gut), 560px); margin: 0 auto; padding: 18px 0 20px; }
.links-head { text-align: center; margin-bottom: 28px; }
.links-logo { width: min(320px, 82vw); margin: 4px auto 18px; }
.links-logo .logo { display: block; width: 100%; height: auto; }
.links-head h1 { font: 600 clamp(1.9rem, 1.5rem + 1.8vw, 2.5rem)/1.1 var(--font-d); }
.links-head h1 span { color: var(--b); }
.links-head p { color: var(--muted); margin-top: 8px; }
.links-list, .links-social { display: grid; gap: 12px; }
.links-social { grid-template-columns: 1fr 1fr; }
.links-title { font: 600 .85rem/1 var(--font-t); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 30px 0 12px; text-align: center; }
.link-btn { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px; border-radius: 18px; text-decoration: none; font-weight: 600; background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); border: .75px solid var(--line-2); transition: border-color .3s, background-color .3s, transform .35s var(--ease); }
.link-btn:hover, .link-btn:focus-visible { border-color: var(--b); background-color: rgba(43, 168, 255, .08); transform: translateY(-2px); }
.link-btn.is-main { min-height: 76px; }
.link-app { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.link-text { display: grid; flex: 1; line-height: 1.25; }
.link-text small { color: var(--muted); font-weight: 400; font-size: .9rem; }
.link-go { font-size: .85rem; color: var(--b); white-space: nowrap; }
.link-app { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.link-app--studio { padding: 0; }
/* Symbol-Kachel: gleiche Groesse und Form wie .link-app, damit alle Zeilen buendig stehen */
.ico-kachel { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(160deg, rgba(43, 168, 255, .22), rgba(138, 125, 255, .26)), #0e1426; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ico-kachel .ico { width: 28px; height: 28px; }
/* Play-Badge in der Linkliste: ruhig, ohne Schweben und Glow; Hover steuert die Zeile (.link-btn) */
.link-go--badge { flex: none; line-height: 0; }
.play-badge--liste { margin: 0; animation: none; will-change: auto; scale: none; }
.play-badge--liste::before { display: none; }
.play-badge--liste img { height: 40px; width: auto; box-shadow: none; }
.link-btn:hover .play-badge--liste img, .link-btn:focus-visible .play-badge--liste img { filter: brightness(1.12); }
.links-social .link-btn { justify-content: flex-start; min-height: 58px; }
.ico { width: 24px; height: 24px; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-play { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-linejoin='round' stroke-width='.8'%3E%3Cpath fill='%2300A3FF' stroke='%2300A3FF' d='M3.5 2.3v19.4L13.3 12z'/%3E%3Cpath fill='%2300E070' stroke='%2300E070' d='M3.5 2.3 16.9 9.9 13.3 12z'/%3E%3Cpath fill='%23FF3D4A' stroke='%23FF3D4A' d='M3.5 21.7 16.9 14.1 13.3 12z'/%3E%3Cpath fill='%23FFD400' stroke='%23FFD400' d='M16.9 9.9 20.6 12 16.9 14.1 13.3 12z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: none; mask: none; }
.ico-youtube { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8c.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5.2 3z'/%3E%3C/svg%3E"); }
.ico-instagram { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5zm0 2a2.5 2.5 0 1 0 2.5 2.5A2.5 2.5 0 0 0 12 9.5zM17.5 6a1 1 0 1 1-1 1 1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.ico-tiktok { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 2h-3v13.5a2.5 2.5 0 1 1-2.5-2.5c.3 0 .5 0 .8.1V10a5.5 5.5 0 1 0 4.7 5.4V8.8A6.5 6.5 0 0 0 20 10V7a4 4 0 0 1-4-4z'/%3E%3C/svg%3E"); }
.ico-facebook { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8.5H16l.5-3.3h-3V8.1c0-1 .4-1.6 1.700-1.600h1.400V3.500A18 18 0 0 0 14.600 3.400c-2.500 0-4.100 1.500-4.100 4.200v2.600H8v3.300h2.500V22z'/%3E%3C/svg%3E"); }
.links-priv { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.links-priv a { color: var(--muted); display: inline-block; padding: 8px 2px; }
.links-priv a:hover { color: var(--text); }
.links-foot { position: relative; z-index: 1; text-align: center; padding: 26px var(--gut) 44px; color: var(--muted); font-size: .9rem; }
.links-foot nav { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.links-foot a { padding: 8px 2px; display: inline-block; }
@media (max-width: 380px) { .links-social { grid-template-columns: 1fr; } }
.vidrow { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); max-width: 1100px; }
.vidrow .vid { max-width: none; }
.foot__note, .notecard small { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; margin-top: 2px; }
.link-btn, .link-text { min-width: 0; }
.link-go { white-space: normal; text-align: right; }
.link-go--badge { white-space: nowrap; }
.link-text b { overflow-wrap: normal; }
.link-go:not(.link-go--badge) { max-width: 40%; }
.link-text b, .link-text small { overflow-wrap: anywhere; }
@media (max-width: 480px) { .links-social { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .link-btn { gap: 12px; padding: 10px 14px; } .play-badge--liste img { height: 34px; } .link-text b { font-size: .98rem; } }

/* ---------------------------------------------------------------- Antwortseiten der Warteliste (PHP: Bestaetigen / Abmelden / Fehler), Premium-Fassung 28.10.2026
   Ausgeliefert von warteliste/lib.php (wl_seite), laedt dieses globale Stylesheet. Kein JavaScript noetig. */
.wlp { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(70vw 55vh at 50% -12%, rgba(43, 168, 255, .17), transparent 72%), radial-gradient(45vw 45vh at 96% 104%, rgba(138, 125, 255, .13), transparent 70%), radial-gradient(40vw 40vh at 0% 100%, rgba(37, 224, 192, .08), transparent 70%), var(--bg); }
.wlp__top { position: relative; z-index: 1; display: flex; justify-content: center; padding: 26px var(--gut) 0; }
.wlp__brand { display: block; border-radius: 8px; }
.wlp__brand img { height: 34px; width: auto; }
.wlp__main { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; padding: clamp(20px, 5vw, 56px) var(--gut) clamp(40px, 8vw, 80px); }
.wlp__card { width: min(100%, 580px); padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 52px); display: grid; justify-items: center; gap: 18px; text-align: center; animation: wlp-in .7s var(--ease) both; }
.wlp__badge { --c: 43, 168, 255; position: relative; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: rgb(var(--c)); background: radial-gradient(circle at 35% 30%, rgba(var(--c), .3), rgba(var(--c), .08) 70%); box-shadow: inset 0 0 0 1.5px rgba(var(--c), .55), 0 0 44px -10px rgba(var(--c), .7); }
.wlp__badge::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid rgba(var(--c), .5); animation: wl-ring 1.3s .35s var(--ease) both; }
.wlp__badge svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.wlp__badge path, .wlp__badge rect, .wlp__badge circle { stroke-dasharray: 90; stroke-dashoffset: 90; animation: wl-draw .8s .3s var(--ease) forwards; }
.wlp__badge.is-ok { --c: 37, 224, 192; }
.wlp__badge.is-err { --c: 255, 140, 140; }
.wlp__badge.is-bye { --c: 138, 125, 255; }
.wlp__chip { display: inline-flex; align-items: center; gap: .6em; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); font: 600 .9rem/1.2 var(--font-t); letter-spacing: .02em; }
.wlp__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.wlp__title { font: 500 clamp(1.8rem, 1.3rem + 2vw, 2.6rem)/1.1 var(--font-d); letter-spacing: -.02em; overflow-wrap: anywhere; }
.wlp__text { max-width: 44ch; color: var(--muted); font-size: 1.04rem; line-height: 1.65; }
.wlp__text + .wlp__text { margin-top: -6px; }
.wlp__form { width: 100%; margin-top: 6px; }
.wlp__form .btn { width: 100%; }
.wlp__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 20px; margin-top: 10px; padding-top: 22px; width: 100%; border-top: 1px solid var(--line); }
.wlp__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--muted); font-size: .92rem; }
.wlp__links a:hover, .wlp__links a:focus-visible { color: var(--text); }
.wlp__links .btn { color: var(--text); font-size: .96rem; min-height: 52px; padding: 0 1.5em; }
@keyframes wlp-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wlp__card { animation: none; } .wlp__badge::after { display: none; } .wlp__badge path, .wlp__badge rect, .wlp__badge circle { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 380px) { .wlp__badge { width: 76px; height: 76px; } .wlp__badge svg { width: 36px; height: 36px; } .wlp__links .btn { width: 100%; } }


/* ---------------------------------------------------------------- Karussell-Baustein (global, 28.10.2026)
   Gilt fuer jedes Kapitel mit mehreren Schritten (Startseite und alle App-Seiten). app.js legt je Schritt ein eigenes Handy (.cslide) mit eigenem, vorgeladenem Bild
   auf eine Bahn: Mitte gross und hell, Nachbarn kleiner, gedreht, dunkler (angeschnitten). Position, Drehung, Groesse und Abdunklung kommen aus einer Zahl (pos) und
   laufen beim Ziehen mit dem Finger, danach weich (420 ms, cubic-bezier .22/.8/.2/1) ins Ziel. Dazu Punkte-Leiste mit Zaehler "2 / 6", Pfeile, Tastatur, Wisch-Hinweis. */
.chapter__phone.is-carousel { overflow-x: clip; }
.cstage { position: relative; display: grid; place-items: center; width: 100%; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  perspective: 1600px; padding-block: calc(var(--pw) * .16); margin-block: calc(var(--pw) * -.16); }
/* Seitenverlauf nur am Rechner: Auf Handys (Chrome Android) laesst eine Maske ueber der 3D-Bahn beim Scrollen Kacheln ungezeichnet - Handys wurden unten abgeschnitten (29.10.2026). Dort schneidet .is-carousel die Raender hart. */
@media (min-width: 881px) { .cstage { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent); mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent); } }
/* Rechner (31.10.2026): Handys etwas kleiner, damit die beiden Nachbar-Handys (staerker gedreht, Abstand aus der Buehnenbreite in app.js layout()) komplett sichtbar bleiben; schmale Randmaske nur fuer das Wegblenden der ausfahrenden Handys. Handy-Ansicht unveraendert. */
@media (min-width: 881px) { .chapter__phone { --pw: clamp(150px, min(22vw, calc((100svh - 300px) / 2.4), 280px), 380px); } }
.cstage > .stage__float2 { position: relative; z-index: 2; transform-style: preserve-3d; }
.phone--tpl { visibility: hidden; }
.cslide { position: absolute; left: 50%; top: 50%; width: var(--pw); transform-style: preserve-3d; transform: translate(-50%, -50%); visibility: hidden; cursor: pointer; will-change: transform; }
.cslide .phone { --w: var(--pw); }
.cdim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(var(--sd, 90deg), rgba(2, 4, 9, var(--sh, 0)) 0%, rgba(2, 4, 9, 0) 78%), rgba(2, 4, 9, var(--dim, 0)); }
.cslide .screen { opacity: 1; transform: none; transition: none; }
/* Bedienleiste */
.cc { position: relative; z-index: 4; width: min(100%, 340px); display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; margin-top: 8px; }
.cc__btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .3s, border-color .3s, transform .35s var(--ease); }
.cc__btn svg { width: 20px; height: 20px; }
.cc__btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.cc__btn--prev:hover { transform: translateX(-2px); } .cc__btn--next:hover { transform: translateX(2px); }
.cc__mid { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.cc__dots { display: flex; justify-content: center; flex-wrap: wrap; }
.cc__dot { position: relative; width: 20px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.cc__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 99px; background: rgba(255, 255, 255, .34); transition: width .4s var(--ease), margin .4s var(--ease), background-color .3s; }
.cc__dot.is-on::before { width: 22px; margin-left: -11px; background: var(--app); }
.cc__dot:focus-visible { outline-offset: -2px; }
.cc__count { font: 600 .78rem/1 var(--font-t); letter-spacing: .16em; font-variant-numeric: tabular-nums; color: var(--muted); }
/* Hinweis "Wischen" (nur beim ersten Mal): Glas-Plakette ueber dem unteren Handyrand */
.cc__hint { position: absolute; z-index: 5; left: 50%; bottom: 84px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 14px; border-radius: 999px; font: 600 .82rem/1 var(--font-t); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--text);
  background: rgba(10, 14, 24, .72); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s; pointer-events: none; }
.cc__hint svg { width: 34px; height: 18px; color: var(--b); }
.is-hint .cc__hint { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (max-width: 880px) and (orientation: portrait) { .chapter__phone.is-carousel { margin-inline: calc(var(--gut) * -1); } }
@media (max-width: 880px) { .cc { margin-top: 4px; } .cc__hint { bottom: 76px; } }
@media (max-width: 880px) and (max-height: 780px) and (orientation: portrait) { .chapter__phone { --pw: min(52vw, 20.5svh, 300px); } }
.chapter__phone.is-carousel:focus-visible { outline: 2px solid var(--a); outline-offset: -2px; border-radius: 22px; }
.phone__screen > video.screen { object-fit: cover; }