/* CherryGate Landingpage.
   Dramaturgie: dunkel und laut (das Telefon reißt heraus), dann öffnet ein Kreis aus Kirschrot und Creme die Stille.
   Farben aus Logo und App: Kirschrot #be0a26, Anthrazit #2d2d2d, Creme #fcf8f4.
   Schrift: auf Apple-Geräten die Systemschrift, sonst selbst gehostetes Inter. Keine externen Anfragen. */

@font-face { font-family: "CG Sans"; font-weight: 400; font-display: swap; src: url(fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: "CG Sans"; font-weight: 600; font-display: swap; src: url(fonts/inter-600.woff2) format("woff2"); }
@font-face { font-family: "CG Sans"; font-weight: 700; font-display: swap; src: url(fonts/inter-700.woff2) format("woff2"); }

:root {
  --ink: #0c0b0c;
  --ink-2: #1a1718;
  --anth: #2d2d2d;
  --cherry: #be0a26;
  --cherry-lit: #f0304b;
  --cherry-deep: #6e0515;
  --cream: #fcf8f4;
  --sand: #f3ebe3;
  --paper: #ffffff;
  --on-dark: #f8f4f0;
  --on-dark-2: #a9a29c;
  --on-light: #1b1918;
  --on-light-2: #6b645e;
  --line-dark: rgba(255, 255, 255, .12);
  --line-light: rgba(27, 25, 24, .1);
  --ok: #1f7a3d;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "CG Sans", "Helvetica Neue", Arial, sans-serif;

  --t-hero: clamp(3.3rem, min(11.4vw, 20vh), 11rem);
  --t-1: clamp(2.5rem, 6.4vw, 6rem);
  --t-2: clamp(1.95rem, 4.4vw, 3.9rem);
  --t-3: clamp(1.35rem, 2.1vw, 1.8rem);
  --t-body: clamp(1.06rem, 1.45vw, 1.3rem);

  --gutter: clamp(20px, 5.5vw, 88px);
  --nav-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--ink); color: var(--on-dark); font-family: var(--font); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.028em; line-height: 1.03; text-wrap: balance; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--cherry-lit); outline-offset: 3px; border-radius: 6px; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--cream); color: var(--on-light); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }

.wrap { max-width: 1320px; margin: 0 auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.wrap--text { max-width: 1120px; }

.eyebrow { font-size: clamp(.95rem, 1.25vw, 1.15rem); font-weight: 600; letter-spacing: -.01em; color: var(--on-dark-2); }
.eyebrow--cherry { color: var(--cherry); }
.h1 { font-size: var(--t-1); }
.h2 { font-size: var(--t-2); }
.hero-size { font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em; }
.sub { font-size: var(--t-body); color: var(--on-light-2); max-width: 36em; line-height: 1.42; letter-spacing: -.008em; }
.lede { font-size: var(--t-body); color: var(--on-dark-2); max-width: 31em; line-height: 1.4; letter-spacing: -.008em; }
.fine { font-size: .82rem; color: var(--on-light-2); }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border-radius: 999px; background: var(--cherry); color: #fff; font-weight: 600; font-size: 1.03rem; letter-spacing: -.01em; text-decoration: none; transition: background .2s, transform .2s; white-space: nowrap; }
.btn:hover { background: #d70f2e; transform: scale(1.025); }
.btn--sm { min-height: 34px; padding: 0 15px; font-size: .84rem; }
.btn--lg { min-height: 60px; padding: 0 38px; font-size: 1.15rem; }
.link { font-weight: 600; font-size: 1.03rem; letter-spacing: -.01em; text-decoration: none; color: var(--on-dark); padding: 8px 4px; }
.link span { display: inline-block; transition: transform .25s; }
.link:hover span { transform: translateY(3px); }
.actions { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* Navigation */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; padding-top: env(safe-area-inset-top, 0px); color: var(--on-dark); }
.nav::before { content: ""; position: absolute; inset: 0; background: rgba(12, 11, 12, .55); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); opacity: 0; transition: opacity .3s, background .3s; }
.nav[data-stuck]::before { opacity: 1; }
.nav[data-tone="light"] { color: var(--on-light); }
.nav[data-tone="light"]::before { background: rgba(252, 248, 244, .72); }
.nav__in { position: relative; height: var(--nav-h); max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 28px; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 21px; height: 24px; color: var(--cherry-lit); }
.nav[data-tone="light"] .brand__mark { color: var(--cherry); }
.brand__name { font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em; }
.brand__name b { font-weight: 700; color: var(--cherry-lit); }
.nav[data-tone="light"] .brand__name b { color: var(--cherry); }
.nav__links { display: flex; gap: 26px; font-size: .86rem; }
.nav__links a { text-decoration: none; opacity: .78; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }

/* ---------- Der Scrollfilm ---------- */
.story { position: relative; background: var(--ink); }
.stage { position: relative; }

/* Ruhezustand ohne Bewegung: alles lesbar untereinander */
.beat { padding: 72px var(--gutter); }
.beat--hero { padding-top: 130px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.6vh, 28px); }
.beat--hero h1 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em; }
.ln { display: block; overflow: hidden; padding-bottom: .13em; margin-bottom: -.13em; }
.ln > span { display: block; }
.motion .ln > span { animation: rise 1.05s cubic-bezier(.16, 1, .3, 1) both; }
.motion .ln:nth-child(2) > span { animation-delay: .09s; }
.motion .beat--hero .eyebrow, .motion .beat--hero .lede, .motion .beat--hero .actions { animation: fadeUp .9s cubic-bezier(.16, 1, .3, 1) both; }
.motion .beat--hero .eyebrow { animation-delay: .05s; }
.motion .beat--hero .lede { animation-delay: .32s; }
.motion .beat--hero .actions { animation-delay: .42s; }
.fx .phone { animation: phoneIn 1.2s cubic-bezier(.16, 1, .3, 1) .25s both; }
.beat--hero .lede { text-align: center; }
.beat--hero .actions { margin-top: 6px; }
.beat--stmt time { display: block; font-size: var(--t-3); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cherry-lit); margin-bottom: .35em; letter-spacing: -.01em; }
.beat--stmt p { font-size: var(--t-1); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
.beat--center { text-align: center; }
.beat--center h2 { font-size: var(--t-1); }
.beat--turn h2 { font-size: clamp(2.6rem, 7.6vw, 7.4rem); }
.beat--verdict h2 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.035em; }
.beat--cap h2 { font-size: var(--t-2); margin-bottom: .4em; }
.beat--cap p { font-size: var(--t-body); max-width: 26em; color: var(--on-dark-2); line-height: 1.42; }
.notes, .wipe, .rings, .glow { display: none; }

/* Telefon */
.phone-wrap { --pw: clamp(150px, 36vh, 340px); position: relative; width: var(--pw); margin: 40px auto 90px; }
.phone { position: relative; width: 100%; aspect-ratio: .475; font-size: calc(var(--pw) / 18.75); border-radius: 3.05em; background: linear-gradient(145deg, #77767a 0%, #2c2b2e 16%, #1b1a1c 50%, #2f2e31 84%, #67666a 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 .35em rgba(0, 0, 0, .9), 0 2.4em 5em -1em rgba(0, 0, 0, .55), 0 .8em 1.6em rgba(0, 0, 0, .28); }
.phone__key { position: absolute; width: .2em; background: linear-gradient(180deg, #4d4c50, #29282b); border-radius: .1em; }
.phone__key--l1 { left: -.16em; top: 16%; height: 7%; }
.phone__key--l2 { left: -.16em; top: 25%; height: 7%; }
.phone__key--r { right: -.16em; top: 20%; height: 11%; }
.screen { position: absolute; inset: .52em; border-radius: 2.6em; overflow: hidden; background: #fff; color: var(--on-light); }
.island { position: absolute; z-index: 5; top: .62em; left: 50%; width: 5.1em; height: 1.45em; margin-left: -2.55em; border-radius: 1em; background: #050505; }
.phone__tag { margin-top: 1.1em; font-size: .78rem; text-align: center; color: var(--on-dark-2); }
.scr { position: relative; }

.scr--lock, .scr--answer { display: none; }
.scr--case { display: none; }

.fx .scr { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; }
.fx .scr--lock { opacity: 1; }

/* Sperrbildschirm */
.scr--lock { background: radial-gradient(120% 70% at 50% 8%, #4a0a16 0%, #1b0a0e 52%, #0a0809 100%); color: #fff; align-items: center; padding: 4.4em 1em 1em; gap: 2em; }
.lock__time { font-size: 4.7em; font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.lock__call { width: 100%; display: flex; align-items: center; gap: .75em; padding: .85em 1em; border-radius: 1.4em; background: rgba(255, 255, 255, .13); }
.lock__call span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lock__call small { font-size: .74em; opacity: .75; }
.lock__call b { font-size: .86em; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lock__list { width: 100%; display: flex; flex-direction: column; gap: .4em; margin-top: -1.2em; }
.lock__list li { display: flex; justify-content: space-between; gap: 1em; padding: .62em .95em; border-radius: 1.1em; background: rgba(255, 255, 255, .09); font-size: .84em; font-weight: 600; letter-spacing: -.01em; }
.lock__list time { font-weight: 400; opacity: .68; font-variant-numeric: tabular-nums; }
.lock__dot { position: relative; flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--cherry-lit); }
.lock__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cherry-lit); animation: ping 1.4s ease-out infinite; }

/* Annahme */
.scr--answer { background: var(--ink); color: #fff; align-items: center; justify-content: center; gap: 1.5em; text-align: center; }
.answer__mark { width: 5.4em; height: 6.1em; color: var(--cherry-lit); }
.scr--answer p { font-size: 1.42em; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
.wave { display: inline-flex; align-items: center; gap: .22em; height: 2em; }
.wave i { width: .28em; height: 100%; border-radius: .2em; background: var(--cherry-lit); transform: scaleY(.35); animation: talk 1.1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: -.25s; }
.wave i:nth-child(3) { animation-delay: -.55s; }
.wave i:nth-child(4) { animation-delay: -.15s; }
.wave i:nth-child(5) { animation-delay: -.7s; }
.wave--sm { height: 1.3em; gap: .16em; }
.wave--sm i { width: .2em; background: var(--cherry); }

/* Gespräch */
.scr--chat { background: var(--cream); padding-top: 2.75em; }
.fx .scr--chat { padding-top: 2.75em; }
.chat__head { display: flex; align-items: center; gap: .6em; padding: .6em .95em .7em; border-bottom: 1px solid var(--line-light); }
.chat__head svg { flex: none; width: 1.45em; height: 1.65em; color: var(--cherry); }
.chat__head span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.chat__head b { font-size: .78em; letter-spacing: -.012em; white-space: nowrap; }
.chat__head small { font-size: .66em; color: var(--on-light-2); }
.chat { display: flex; flex-direction: column; gap: .55em; padding: .9em .8em; }
.chat__foot { display: flex; align-items: center; justify-content: center; gap: .55em; margin: auto .8em 1.1em; padding: .62em 1em; border-radius: 1.4em; background: var(--anth); color: #fff; font-size: .8em; font-weight: 600; letter-spacing: -.01em; }
.chat__foot .wave--sm i { background: var(--cherry-lit); }
.b { display: block; max-width: 86%; padding: .58em .82em; border-radius: 1.05em; font-size: .9em; line-height: 1.26; letter-spacing: -.008em; }
.b--ai { align-self: flex-start; background: var(--paper); color: var(--on-light); border-bottom-left-radius: .3em; box-shadow: 0 1px 4px rgba(27, 25, 24, .08); }
.b--you { align-self: flex-end; background: var(--anth); color: #fff; border-bottom-right-radius: .3em; }
.tag { display: inline-flex; align-items: center; align-self: center; gap: .4em; padding: .42em .8em; border-radius: 1em; background: rgba(31, 122, 61, .12); color: var(--ok); font-size: .8em; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
.tag svg { width: 1em; height: 1em; }

/* Vorgang */
.scr--case { background: var(--cream); padding: 3.5em 1.05em 1em; gap: .3em; }
.fx .scr--case { padding: 3.5em 1.05em 1em; }
.case__no { font-size: .8em; font-weight: 600; color: var(--on-light-2); font-variant-numeric: tabular-nums; }
.case__title { font-size: 1.8em; font-weight: 700; letter-spacing: -.028em; line-height: 1.08; }
.case__flag { align-self: flex-start; margin-top: .45em; padding: .22em .7em; border-radius: 1em; background: var(--cherry); color: #fff; font-size: .74em; font-weight: 600; }
.case__sum { margin-top: .75em; font-size: .9em; line-height: 1.3; color: var(--on-light-2); letter-spacing: -.008em; }
.scr--case dl { margin: 1em 0 .9em; background: var(--paper); border-radius: 1.1em; padding: .25em .85em; box-shadow: 0 1px 4px rgba(27, 25, 24, .08); }
.scr--case dl div { padding: .52em 0; border-bottom: 1px solid var(--line-light); }
.scr--case dl div:last-child { border-bottom: 0; }
.scr--case dt { font-size: .7em; color: var(--on-light-2); }
.scr--case dd { font-size: .92em; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.tag--block { align-self: flex-start; }

/* Bewegte Bühne */
.fx .story { height: 1040vh; }
.fx .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); isolation: isolate; }
.fx .beat { position: absolute; padding: 0; opacity: 0; pointer-events: none; }
.fx .beat a { pointer-events: auto; }
.fx .beat--hero { inset: 0; padding: clamp(84px, 12.5vh, 132px) var(--gutter) 0; opacity: 1; z-index: 8; }
.fx .beat--stmt, .fx .beat--cap { z-index: 7; top: 0; bottom: 0; left: var(--gutter); width: min(40vw, 620px); display: flex; flex-direction: column; justify-content: center; }
.fx .beat--center { z-index: 8; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); }
.fx .beat--cap h2, .fx .beat--turn h2 { color: var(--on-light); }
.fx .beat--cap p { color: var(--on-light-2); }
.fx .phone-wrap { position: absolute; z-index: 5; left: 50%; top: 50%; margin: calc(var(--pw) / -.95) 0 0 calc(var(--pw) / -2); will-change: transform, opacity; }
.fx .phone__tag { position: absolute; left: 0; right: 0; top: 100%; margin-top: .7em; color: var(--on-light-2); opacity: 0; }

.fx .glow { display: block; position: absolute; z-index: 0; left: 50%; top: 50%; width: 130vmin; height: 130vmin; margin: -65vmin 0 0 -65vmin; border-radius: 50%; background: radial-gradient(closest-side, rgba(190, 10, 38, .5), rgba(190, 10, 38, .14) 52%, transparent 72%); pointer-events: none; }
.fx .rings { display: block; }
.rings { position: absolute; z-index: 1; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.rings i { position: absolute; left: -32vmin; top: -32vmin; width: 64vmin; height: 64vmin; border-radius: 50%; border: 1.5px solid var(--cherry-lit); opacity: 0; animation: ring 3.6s cubic-bezier(.2, .55, .35, 1) infinite; }
.rings i:nth-child(2) { animation-delay: 1.2s; }
.rings i:nth-child(3) { animation-delay: 2.4s; }
.is-paused .rings i, .is-paused .wave i, .is-paused .lock__dot::after, .off .rings i, .off.rings i, .off .wave i, .off .lock__dot::after { animation-play-state: paused; }

.fx .wipe { display: block; position: absolute; left: -300px; top: -300px; width: 600px; height: 600px; border-radius: 50%; z-index: 3; pointer-events: none; visibility: hidden; will-change: transform; }
.fx .stage.is-cream { background: var(--cream); }
.wipe--cherry { background: var(--cherry); }
.wipe--cream { background: var(--cream); z-index: 4 !important; }

.fx .notes { display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.note { position: absolute; left: calc(var(--l) * 1vw); top: calc(var(--t) * 1%); width: clamp(190px, 15.5vw, 250px); padding: 11px 14px 12px; border-radius: 16px; background: rgba(38, 34, 36, .92); box-shadow: inset 0 0 0 1px var(--line-dark), 0 14px 34px rgba(0, 0, 0, .45); color: var(--on-dark); font-size: .92rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.22; opacity: 0; }
.note small { display: block; font-size: .73rem; font-weight: 400; color: var(--on-dark-2); margin-bottom: 2px; }

/* ---------- Ohne Film: Handy, Tablet, „Bewegung reduzieren“, ohne JavaScript. Normale Abschnitte, der Browser scrollt allein.
   Eingeblendet wird nur der Text, nie eine Fläche: sonst schiene der dunkle Hintergrund kurz durch. ---------- */
html:not(.fx) .stage { display: flex; flex-direction: column; }
html:not(.fx) .phone-wrap { order: 1; }
html:not(.fx) [data-b="c2"], html:not(.fx) [data-b="c3"], html:not(.fx) [data-b="c4"] { order: 2; }
html:not(.fx) .beat--hero { padding-bottom: 92px; background: radial-gradient(100% 34% at 50% 100%, rgba(190, 10, 38, .42), transparent 72%); }
html:not(.fx) .beat--stmt { padding-block: 20px; padding-inline: max(var(--gutter), calc(50% - 340px)); }
html:not(.fx) .beat--hero + .beat--stmt { padding-top: 72px; }
html:not(.fx) .notes { display: grid; gap: 10px; width: 100%; max-width: 620px; margin-inline: auto; padding: 48px var(--gutter) 8px; }
html:not(.fx) .note { position: static; width: auto; max-width: 74%; font-size: 1rem; opacity: 1; }
html:not(.fx) .note:nth-child(even) { justify-self: end; }
html:not(.fx) .note:nth-child(n+7) { display: none; }
html:not(.fx) .beat--verdict { padding: 84px var(--gutter) 112px; }
html:not(.fx) .beat--turn { background: var(--cream); border-radius: 36px 36px 0 0; padding: 104px var(--gutter) 36px; }
html:not(.fx) .beat--turn h2 { color: var(--on-light); font-size: var(--t-1); }
html:not(.fx) .beat--cap { background: var(--cream); margin-top: -1px; padding-block: 22px; padding-inline: max(var(--gutter), calc(50% - 300px)); }
html:not(.fx) .beat--cap h2 { color: var(--on-light); }
html:not(.fx) .beat--cap p { color: var(--on-light-2); }
html:not(.fx) .phone-wrap { --pw: min(72vw, 300px); width: 100%; margin: -1px 0 0; padding: 26px var(--gutter) 34px; background: var(--cream); }
html:not(.fx) .phone { width: var(--pw); margin-inline: auto; }
html:not(.fx) .phone__tag { color: var(--on-light-2); }
html:not(.fx) .scr--chat { height: 100%; display: flex; flex-direction: column; }
html:not(.fx) .wave i { animation-play-state: paused; }
html:not(.fx) .is-live .wave i { animation-play-state: running; }
.motion:not(.fx) .chat li { opacity: 0; }
.motion:not(.fx) .is-played .chat li { animation: fadeUp .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .8s); }
[data-m="1"] { --i: 1; } [data-m="2"] { --i: 2; } [data-m="3"] { --i: 3; } [data-m="4"] { --i: 4; } [data-m="5"] { --i: 5; }

/* ---------- Abschnitte ---------- */
.morning { position: relative; background: var(--cream); color: var(--on-light); padding-block: clamp(70px, 13vh, 150px) clamp(80px, 14vh, 170px); }
.morning .wrap { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 24px); }
.board-wrap { margin: clamp(40px, 7vh, 80px) auto 0; max-width: 1320px; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); will-change: transform; transform-origin: 50% 0; }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: clamp(14px, 1.8vw, 24px); border-radius: 30px; background: var(--paper); box-shadow: 0 40px 90px -40px rgba(60, 30, 20, .32), 0 0 0 1px var(--line-light); }
.board__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(10px, 1.2vw, 16px); border-radius: 20px; background: var(--cream); }
.board__h { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; padding: 2px 4px 6px; color: var(--on-light-2); }
.board__h--hot { color: var(--cherry); }
.card { display: flex; flex-direction: column; gap: 1px; padding: 13px 15px; border-radius: 14px; background: var(--paper); box-shadow: 0 1px 3px rgba(27, 25, 24, .08); min-width: 0; }
.card small { font-size: .72rem; color: var(--on-light-2); font-variant-numeric: tabular-nums; }
.card b { font-size: 1rem; letter-spacing: -.014em; line-height: 1.2; }
.card span { font-size: .84rem; color: var(--on-light-2); }
.card--hot { box-shadow: inset 0 0 0 1.5px var(--cherry), 0 6px 18px rgba(190, 10, 38, .14); }
.card--done b { color: var(--on-light-2); }
.board-wrap .fine { margin-top: 12px; text-align: center; }

.know { background: var(--ink); padding-block: clamp(120px, 26vh, 300px); }
.words { font-size: clamp(2rem, 5.1vw, 4.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-wrap: pretty; }
.words .w { transition: opacity .25s linear; }
.fx .words .w { opacity: .2; }

.more { background: var(--cream); color: var(--on-light); padding-block: clamp(90px, 15vh, 180px); }
.bento { max-width: 1320px; margin: clamp(36px, 6vh, 70px) auto clamp(90px, 15vh, 170px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.tile { display: flex; flex-direction: column; gap: 10px; min-height: clamp(340px, 42vw, 500px); padding: clamp(24px, 3vw, 42px); border-radius: 30px; overflow: hidden; min-width: 0; }
.tile h3 { font-size: clamp(1.7rem, 3vw, 2.7rem); }
.tile p { max-width: 27em; font-size: 1.05rem; line-height: 1.38; letter-spacing: -.008em; }
.tile--dark { grid-column: span 7; background: var(--anth); color: var(--on-dark); }
.tile--dark p { color: #c6c0ba; }
.tile--paper { grid-column: span 5; background: var(--paper); box-shadow: 0 0 0 1px var(--line-light); }
.tile--paper p { color: var(--on-light-2); }
.tile--cherry { grid-column: span 5; background: var(--cherry); color: #fff; }
.tile--cherry p { color: rgba(255, 255, 255, .86); }
.tile--sand { grid-column: span 7; background: var(--sand); }
.tile--sand p { color: var(--on-light-2); }

.mini { margin-top: auto; display: flex; flex-direction: column; gap: 10px; font-size: 1.32rem; padding-top: 22px; }
.mini .b--ai { background: #434141; color: #fff; box-shadow: none; }
.mini .b--you { background: var(--cream); color: var(--on-light); }
.mini .tag { background: rgba(120, 220, 150, .16); color: #a6ecbd; }

.steps { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; }
.steps li { position: relative; padding: 9px 0 9px 28px; font-weight: 600; letter-spacing: -.012em; color: var(--on-light-2); }
.steps li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px #cfc7bf; }
.steps li::after { content: ""; position: absolute; left: 9px; top: calc(50% + 9px); width: 2px; height: calc(100% - 18px); background: #e3dcd4; }
.steps li:last-child::after { display: none; }
.steps .is-done { color: var(--on-light); }
.steps .is-done::before { background: var(--on-light); box-shadow: none; }
.steps .is-now { color: var(--cherry); }
.steps .is-now::before { background: var(--cherry); box-shadow: 0 0 0 5px rgba(190, 10, 38, .15); }

.hello { margin-top: auto; padding-top: 24px; font-size: clamp(2.6rem, 5.4vw, 4.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; min-height: 1.3em; transition: opacity .32s, transform .32s; }
.hello.is-out { opacity: 0; transform: translateY(10px); }

.chan { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 9px; }
.chan li { padding: 12px 20px; border-radius: 999px; background: var(--paper); font-weight: 600; letter-spacing: -.012em; }

.rules { margin-top: clamp(26px, 4vh, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); }
.rules li { padding-top: 18px; border-top: 1px solid var(--line-light); min-width: 0; }
.rules h3 { font-size: var(--t-3); margin-bottom: .45em; line-height: 1.12; }
.rules p { color: var(--on-light-2); line-height: 1.42; }

.about { background: var(--sand); color: var(--on-light); padding-block: clamp(80px, 13vh, 150px); }
.about__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about__art { aspect-ratio: 1; border-radius: 36px; background: var(--anth); display: grid; place-items: center; color: var(--cherry); }
.about__art svg { width: 52%; height: 60%; }
.about__txt { display: flex; flex-direction: column; gap: clamp(14px, 1.7vw, 22px); }
.about__name { font-size: clamp(2.5rem, 5.4vw, 5rem); letter-spacing: -.035em; line-height: 1; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line-light); }
.facts dt { font-size: .84rem; color: var(--on-light-2); margin-bottom: 4px; }
.facts dd { font-size: 1.08rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }

.close { position: relative; overflow: hidden; background: var(--ink); text-align: center; padding-block: clamp(120px, 24vh, 260px); isolation: isolate; }
.close .rings { display: block; z-index: -1; }
.close__in { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 30px); }
.close .lede { text-align: center; }
.close__mail { color: var(--on-dark-2); font-size: .95rem; user-select: all; }

.foot { background: var(--ink); color: var(--on-dark-2); border-top: 1px solid var(--line-dark); padding-block: 34px calc(30px + env(safe-area-inset-bottom, 0px)); font-size: .86rem; }
.foot__in { display: grid; grid-template-columns: 1fr auto; gap: 14px 40px; align-items: start; }
.foot__brand { display: flex; gap: 14px; align-items: flex-start; }
.foot__brand svg { flex: none; width: 27px; height: 31px; color: var(--cherry-lit); margin-top: 2px; }
.foot__brand p { line-height: 1.42; }
.foot__nav { display: flex; gap: 22px; }
.foot__nav a { color: var(--on-dark); text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; }
.foot__copy { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: .8rem; }

/* Sanftes Auftauchen beim Scrollen */
.motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.motion [data-reveal].in { opacity: 1; transform: none; }

/* Am Handy zählt jede Grafikebene: kein Milchglas, keine großen weichen Schatten, zwei statt drei Ringe */
.touch body { text-rendering: auto; }
.touch .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 11, 12, .94); }
.touch .nav::before { opacity: 1; }
.touch .rings i:nth-child(3) { display: none; }
.touch .note { background: #262224; box-shadow: inset 0 0 0 1px var(--line-dark); }
.touch .phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 1.4em 3em -1em rgba(0, 0, 0, .5); }
.touch .board { box-shadow: 0 0 0 1px var(--line-light); }
.touch .card--hot { box-shadow: inset 0 0 0 1.5px var(--cherry); }
.touch .board-wrap { will-change: auto; }
.touch.motion [data-reveal] { transform: translateY(10px); transition-duration: .3s; }
.touch.motion [data-reveal].in { transform: none; }

/* Rechtstexte */
.doc-page { background: var(--cream); color: var(--on-light); }
.doc-nav { padding-block: 18px; border-bottom: 1px solid var(--line-light); }
.doc-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 840px; }
.doc-nav .brand__mark { color: var(--cherry); }
.doc-nav .brand__name b { color: var(--cherry); }
.doc-back { font-size: .9rem; text-decoration: none; color: var(--on-light-2); }
.doc-back:hover { color: var(--on-light); }
.doc { max-width: 840px; padding-block: clamp(44px, 8vh, 84px); }
.doc h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: .55em; }
.doc h2 { font-size: 1.32rem; letter-spacing: -.02em; margin: 2.1em 0 .5em; line-height: 1.2; }
.doc p, .doc li, .doc address { font-size: 1.03rem; line-height: 1.55; color: #3f3a36; font-style: normal; }
.doc p + p { margin-top: .75em; }
.doc ul { list-style: disc; padding-left: 1.2em; }
.doc li + li { margin-top: .3em; }
.doc a { color: var(--cherry); }
.doc .lead { font-size: 1.16rem; color: var(--on-light); }
.doc-foot { background: var(--cream); border-top: 1px solid var(--line-light); padding-block: 24px 32px; font-size: .84rem; color: var(--on-light-2); }
.doc-foot .wrap { max-width: 840px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 26px; }
.doc-foot a { color: inherit; }

@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes phoneIn { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { transform: scale(.42); opacity: 0; } 12% { opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2); opacity: 0; } }
@keyframes talk { 0%, 100% { transform: scaleY(.32); } 50% { transform: scaleY(1); } }

@media (max-width: 899px) {
  :root { --nav-h: 52px; }
  .nav__links { display: none; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile--dark, .tile--paper, .tile--cherry, .tile--sand { grid-column: auto; }
  .tile { min-height: 0; }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .about__in { grid-template-columns: minmax(0, 1fr); }
  .about__art { max-width: 280px; border-radius: 28px; }
  .board { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .board__extra { display: none; }
  .foot__in { grid-template-columns: 1fr; }
}

/* Telefon und Text übereinander: Handy und Tablet hochkant. Handy quer bleibt nebeneinander. */
@media (max-width: 899px) and (orientation: portrait), (max-width: 639px) {
  .phone-wrap { --pw: min(64vw, 31vh); }
  .fx .beat--stmt, .fx .beat--cap { left: 20px; right: 20px; width: auto; top: calc(var(--nav-h) + 22px); bottom: auto; justify-content: flex-start; }
  .note { left: calc(var(--ml) * 1vw); top: calc(var(--mt) * 1%); width: min(56vw, 214px); padding: 9px 12px 10px; font-size: .84rem; border-radius: 14px; }
}

@media (max-height: 640px) and (min-width: 640px) {
  .beat--hero .lede { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rings i, .wave i, .lock__dot::after { animation: none; }
  .wave i { transform: scaleY(.7); }
  .lock__list { display: none; }
  .btn, .link span, .hello { transition: none; }
}