/* =========================================================================
   Navigating Compersion — Startseiten-Prototyp 2026
   Aufbau: Tokens → Basis → Bausteine → Sektionen → Vesper-Room-Gerät → Bewegung
   Farbregel: nur #111111 und Sand #C8AF82; Abstufungen entstehen durch Mischung.
   Ausnahme: das Handy-Modell zeigt die echte Palette der Vesper-Room-App.
   ========================================================================= */

:root {
    --bg: #111111;
    --sand: #C8AF82;

    /* Textstufen, alle aus Sand abgeleitet (Kontrast auf #111 in Klammern) */
    --t1: var(--sand);                                          /* ~8.8:1  Überschriften */
    --t2: color-mix(in srgb, var(--sand) 80%, var(--bg));       /* ~5.9:1  Fließtext */
    --t3: color-mix(in srgb, var(--sand) 67%, var(--bg));       /* ~4.6:1  Metadaten */
    --t4: color-mix(in srgb, var(--sand) 42%, var(--bg));       /* nur Dekor */

    --line: color-mix(in srgb, var(--sand) 16%, var(--bg));
    --line-2: color-mix(in srgb, var(--sand) 32%, var(--bg));
    --surface: color-mix(in srgb, var(--sand) 3.5%, var(--bg));
    --surface-2: color-mix(in srgb, var(--sand) 8%, var(--bg));

    --mono: "DM Mono", "DejaVu Sans Mono", ui-monospace, monospace;
    --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --ease: cubic-bezier(.45, .05, .25, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);

    --gutter: clamp(16px, 4.5vw, 56px);
    --maxw: 1240px;
    --hdr: 76px;
    --grade: .72;   /* Stärke des Farbfilters über allen Fotos */
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--bg);
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hdr) + 24px);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--t2);
    font: 400 1.0625rem/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

html:not(.age-ok) body,
body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

::selection { background: var(--sand); color: var(--bg); }
:focus-visible { outline: 1px solid var(--sand); outline-offset: 4px; }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
    position: fixed; top: 12px; left: 12px; z-index: 200; padding: 12px 16px;
    background: var(--sand); color: var(--bg); font: 500 .75rem/1 var(--mono);
    letter-spacing: .14em; text-transform: uppercase; transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap {
    width: 100%;
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { position: relative; padding-block: clamp(88px, 10vw, 148px); }

.star { fill: currentColor; flex: none; }

/* ---------- Typografie ---------- */

.kicker {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 28px;
    font: 400 .72rem/1.3 var(--mono);
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--t3);
}
.kicker b { font-weight: 400; color: var(--t1); }
.kicker .rule { width: 28px; height: 1px; background: var(--line-2); }

.display {
    margin: 0;
    font: 300 clamp(2.5rem, 7vw, 6.1rem)/1.02 var(--mono);
    letter-spacing: -.05em;
    color: var(--t1);
    text-wrap: balance;
}

.h2 {
    margin: 0 0 24px;
    font: 400 clamp(2rem, 4.4vw, 3.6rem)/1.06 var(--mono);
    letter-spacing: -.04em;
    color: var(--t1);
    text-wrap: balance;
}

.lede {
    max-width: 46ch;
    margin: 0;
    font: 400 clamp(1.1rem, 1.45vw, 1.28rem)/1.6 var(--sans);
    color: var(--t2);
    text-wrap: pretty;
}

.meta {
    margin: 0;
    font: 400 .7rem/1.4 var(--mono);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--t3);
}

/* Abschnittskopf: Kapitelnummer links, Titel rechts (Magazinraster) */
.sec-head {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 20px 48px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.sec-head .kicker { margin: 12px 0 0; align-self: start; }

/* ---------- Buttons & Links ---------- */

.btn {
    --h: 54px;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    min-height: var(--h); padding: 0 26px;
    font: 500 .76rem/1 var(--mono);
    letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
    border: 1px solid transparent;
    outline: 1px solid transparent; outline-offset: 0;
    transition: color .35s var(--ease), border-color .35s var(--ease),
                outline-color .35s var(--ease), outline-offset .45s var(--ease-out);
}
.btn .arr { width: 16px; height: 10px; transition: transform .45s var(--ease-out); }
.btn:hover .arr { transform: translateX(5px); }

/* Einziger gefüllter Button der Seite: Inner Circle */
.btn--primary { background: var(--sand); color: var(--bg); }
.btn--primary .star { width: 11px; height: 11px; transition: transform .7s var(--spring); }
.btn--primary:hover { outline-color: var(--sand); outline-offset: 5px; }
.btn--primary:hover .star { transform: rotate(90deg); }

.btn--ghost { border-color: var(--line-2); color: var(--t1); }
.btn--ghost::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--surface-2);
    transform: scaleX(0); transform-origin: left;
    transition: transform .55s var(--ease-out);
}
.btn--ghost:hover { border-color: var(--sand); }
.btn--ghost:hover::before { transform: scaleX(1); }

.btn--sm { --h: 42px; padding: 0 18px; font-size: .68rem; gap: 10px; }
.btn--block { width: 100%; }

.link {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding-block: 8px;
    font: 400 .74rem/1 var(--mono);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--t1);
}
.link::after {
    content: ""; position: absolute; left: 0; right: 26px; bottom: 1px; height: 1px;
    background: currentColor; transform: scaleX(.3); transform-origin: left;
    transition: transform .55s var(--ease-out);
}
.link .arr { width: 16px; height: 10px; transition: transform .45s var(--ease-out); }
.link:hover::after { transform: scaleX(1); }
.link:hover .arr { transform: translateX(4px); }

/* Pills für Beitragsstatus */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 3px;
    border: 1px solid var(--line-2);
    font: 400 .62rem/1.2 var(--mono);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--t2);
}
.pill svg { width: 9px; height: 10px; }
.pill--ic { border-color: color-mix(in srgb, var(--sand) 55%, var(--bg)); color: var(--t1); }

/* ---------- Beitragskarte ---------- */

.pcard {
    position: relative;
    display: flex; flex-direction: column; gap: 14px;
    padding: 26px 24px 24px;
    background: var(--bg);
    border: 1px solid var(--line);
    transition: border-color .45s var(--ease), background-color .45s var(--ease), transform .6s var(--ease-out);
}
.pcard:hover { border-color: var(--line-2); background: var(--surface); transform: translateY(-3px); }
.pcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pcard__meta > span:not(.pill) { font: 400 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.pcard__title {
    margin: 0;
    font: 400 1.12rem/1.32 var(--mono);
    letter-spacing: -.02em;
    color: var(--t1);
    text-wrap: balance;
}
.pcard__ex {
    margin: 0;
    font-size: .95rem; line-height: 1.55;
    color: var(--t2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__go {
    margin-top: auto; padding-top: 6px;
    display: inline-flex; align-items: center; gap: 10px;
    font: 400 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
    color: var(--t3);
    transition: color .3s;
}
.pcard__go .arr { width: 14px; height: 9px; transition: transform .45s var(--ease-out); }
.pcard:hover .pcard__go { color: var(--t1); }
.pcard:hover .pcard__go .arr { transform: translateX(5px); }
.pcard__star {
    position: absolute; top: 18px; right: 18px; width: 10px; height: 10px;
    color: var(--sand); opacity: 0; transform: rotate(-90deg) scale(.4);
    transition: opacity .4s, transform .7s var(--spring);
}
.pcard:hover .pcard__star { opacity: 1; transform: none; }

.pcard__img { position: relative; margin: -26px -24px 6px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), filter .9s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.05); }

.pcard--feature { border-color: color-mix(in srgb, var(--sand) 45%, var(--bg)); background: var(--surface); }
.pcard--feature .pcard__go { color: var(--t1); }

/* ---------- Bilder ---------- */

.ph { position: relative; margin: 0; overflow: hidden; background: var(--surface-2); }
.ph img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: filter 1.1s var(--ease), transform 1.8s var(--ease-out);
}
.ph::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--sand) 16%, transparent);
}
.ph:hover img { transform: scale(1.035); }

/* Einheitlicher Farbfilter: Der Sandton der Marke liegt als Farbton über jedem Foto
   (Helligkeit und Kontrast bleiben), dazu leicht gedämpfte Lichter. So werden Bilder aus
   verschiedenen Generatoren zu einer Serie. --grade: 0 = Original, 1 = ganz im Sandton. */
.ph, .arrive__ph, .pcard__img { isolation: isolate; }
.ph::before, .arrive__ph::before, .pcard__img::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--sand); mix-blend-mode: color; opacity: var(--grade);
    transition: opacity 1.1s var(--ease);
}
.ph img, .arrive__ph img, .pcard__img img { filter: brightness(.9) contrast(1.07) sepia(.24); }
/* Bei Hover kehrt ein Teil der Originalfarbe zurück — die Serie bleibt erkennbar */
.ph:hover::before, .pcard:hover .pcard__img::before { opacity: calc(var(--grade) * .5); }
.ph:hover img, .pcard:hover .pcard__img img { filter: brightness(.97) contrast(1.05) sepia(.1); }

/* Parallaxe: das Bild ist höher als sein Rahmen und gleitet beim Scrollen */
.ph[data-par] img { position: absolute; inset: -7% 0 auto; height: 114%; translate: 0 var(--par, 0%); }

/* Vorhang: das Bild steigt von unten auf. Die Maske liegt auf dem Bild, nicht auf dem
   beobachteten Rahmen — sonst meldet der IntersectionObserver den Rahmen als unsichtbar. */
.js [data-curtain] img {
    clip-path: inset(100% 0 0 0); transform: scale(1.16);
    transition: clip-path 1.6s var(--ease-out), transform 2.2s var(--ease-out), filter 1.1s var(--ease);
    transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s;
}
.js [data-curtain].is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
.js [data-curtain].is-in:hover img { transform: scale(1.035); }

.ph__cap {
    position: absolute; left: 14px; bottom: 14px; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px 8px;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    font: 400 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--t2);
}
.ph__cap b { font-weight: 500; color: var(--sand); }

/* =========================================================================
   Altersabfrage
   ========================================================================= */

.gate {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    padding: 24px;
    background: var(--bg);
    transition: background-color .6s var(--ease) .35s;
}
.age-ok .gate { display: none; }

.gate__box { width: 100%; max-width: 430px; text-align: center; }
.gate__box > * { transition: opacity .3s var(--ease); }

.gate__star { width: 54px; height: 54px; margin: 0 auto 30px; color: var(--sand); }
.gate__star path {
    fill: transparent; stroke: var(--sand); stroke-width: 1;
    stroke-dasharray: 310; stroke-dashoffset: 310;
    animation: draw 1.6s var(--ease) .2s forwards, fillIn .8s var(--ease) 1.3s forwards;
}

.gate__brand { margin: 0 0 42px; font: 400 .66rem/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--t3); }
.gate__title { margin: 0 0 16px; font: 300 clamp(2.1rem, 6vw, 2.8rem)/1.05 var(--mono); letter-spacing: -.04em; color: var(--t1); }
.gate__text { margin: 0 0 36px; color: var(--t2); font-size: 1rem; }
.gate__btns { display: grid; gap: 6px; }
.gate__btns .btn { border-color: var(--sand); }
.gate__exit {
    display: block; padding: 14px;
    font: 400 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
    color: var(--t3); transition: color .3s;
}
.gate__exit:hover { color: var(--t2); }
.gate__fine { margin: 26px 0 0; font-size: .78rem; line-height: 1.55; color: var(--t3); }

.gate.is-leaving { background-color: transparent; pointer-events: none; }
.gate.is-leaving .gate__box > :not(.gate__star) { opacity: 0; }
body.gate-flying .brand__star { opacity: 0; }

/* =========================================================================
   Header, Menü, Kapitelleiste, Mobile-Leiste
   ========================================================================= */

.hdr {
    position: fixed; inset: 0 0 auto; z-index: 50;
    border-bottom: 1px solid transparent;
    transition: transform .55s var(--ease-out), background-color .4s var(--ease), border-color .4s var(--ease);
}
.hdr.is-scrolled {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-color: var(--line);
}
.hdr.is-hidden { transform: translateY(-101%); }
.hdr__in { display: flex; align-items: center; gap: 36px; height: var(--hdr); }

.brand {
    display: flex; align-items: center; gap: 12px;
    font: 500 .68rem/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase;
    color: var(--t1);
}
.brand__star { width: 22px; height: 22px; color: var(--sand); transition: transform .9s var(--spring), opacity .2s; }
.brand:hover .brand__star { transform: rotate(90deg); }

.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a, .hdr__signin {
    position: relative; padding: 8px 0;
    font: 400 .7rem/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
    color: var(--t2); transition: color .3s;
}
.nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
    background: var(--sand); transform: scaleX(0); transform-origin: right;
    transition: transform .5s var(--ease-out);
}
.nav a:hover, .hdr__signin:hover { color: var(--t1); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.hdr__actions { display: flex; align-items: center; gap: 22px; }

.burger { display: none; width: 42px; height: 42px; place-items: center; }
.burger span { position: relative; display: block; width: 22px; height: 1px; background: var(--sand); transition: background-color .2s; }
.burger span::before, .burger span::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: var(--sand);
    transition: transform .45s var(--ease-out);
}
.burger span::before { transform: translateY(-7px); }
.burger span::after { transform: translateY(7px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.menu {
    position: fixed; inset: 0; z-index: 49;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--hdr) + 24px) var(--gutter) 40px;
    background: var(--bg);
    visibility: hidden; opacity: 0;
    transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .45s var(--ease); }
.menu__links a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--line);
    font: 300 clamp(1.7rem, 8vw, 2.6rem)/1.1 var(--mono); letter-spacing: -.04em; color: var(--t1);
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
    transition-delay: calc(var(--i) * 55ms + 80ms);
}
.menu__links a .arr { width: 18px; height: 12px; color: var(--t3); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu__foot { display: grid; gap: 14px; margin-top: 36px; }
.menu__foot .meta { text-align: center; }

.rail {
    position: fixed; right: 22px; top: 50%; z-index: 30;
    display: none; flex-direction: column; gap: 4px;
    transform: translateY(-50%);
    opacity: 0; pointer-events: none; transition: opacity .6s var(--ease);
}
.rail.is-on { opacity: 1; pointer-events: auto; }
.rail a {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 22px;
    font: 400 .62rem/1 var(--mono); letter-spacing: .14em; color: var(--t4);
    transition: color .4s;
}
.rail i { width: 12px; height: 1px; background: currentColor; transition: width .5s var(--ease-out); }
.rail em {
    font-style: normal; text-transform: uppercase; white-space: nowrap;
    opacity: 0; transform: translateX(6px); transition: opacity .35s, transform .45s var(--ease-out);
    background: var(--bg); padding: 3px 6px;
}
.rail a:hover { color: var(--t2); }
.rail a:hover em { opacity: 1; transform: none; }
.rail a.is-active { color: var(--sand); }
.rail a.is-active i { width: 30px; }

.sticky-cta {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    display: none; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 9px 9px 16px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--line-2);
    transform: translateY(calc(100% + 30px));
    transition: transform .6s var(--ease-out);
}
.sticky-cta.is-on { transform: none; }
.sticky-cta b { display: block; font: 500 .68rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--t1); }
.sticky-cta small { display: block; font-size: .8rem; color: var(--t3); }

/* =========================================================================
   Kompassrose (Hero + Kompass)
   ========================================================================= */

.rose { width: 100%; height: auto; overflow: visible; }
.rose__ring, .rose__star, .rose__minor { transform-box: view-box; transform-origin: 50% 50%; }
.rose__circle { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rose__circle--soft { stroke: var(--line); }
.rose__ticks line { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rose__ticks line.is-major { stroke: var(--sand); }
.rose__notch { fill: var(--sand); }
.rose__lbl { font: 400 8px var(--mono); letter-spacing: .12em; fill: var(--t4); text-anchor: middle; dominant-baseline: middle; transition: fill .5s; }
.rose__minor path { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rose .f-a { fill: var(--sand); }
.rose .f-b { fill: color-mix(in srgb, var(--sand) 38%, var(--bg)); }
.rose__pin { fill: var(--bg); stroke: var(--sand); stroke-width: 1; vector-effect: non-scaling-stroke; }

.rose--hero .rose__ring { animation: spin 180s linear infinite; }
.rose--hero .rose__minor { animation: spin 240s linear infinite reverse; }
.rose--hero .rose__star { animation: breathe 8s var(--ease) infinite; }

.rose--compass .rose__lbl { font-size: 12px; }
.rose--compass .rose__ring { transform: rotate(var(--ring, 0deg)); transition: transform 1.2s var(--spring); }
.rose--compass .pt { transition: opacity .6s var(--ease); }
.rose__star.wobble { animation: wobble 1s var(--ease-out); }

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
    position: relative; overflow: clip;
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center;
    padding-block: calc(var(--hdr) + 48px) 150px;
}
.hero__chart { position: absolute; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, var(--sand) 6%, var(--bg)); pointer-events: none; }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero__copy { position: relative; z-index: 1; }
.hero .display { margin-bottom: 30px; }
.hero .lede { margin-bottom: 44px; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

.hero__visual { position: relative; justify-self: end; width: min(520px, 38vw); margin-right: 3vw; }
.hero__rose { --px: 0; --py: 0; position: absolute; inset: -17%; display: grid; pointer-events: none; }
.hero__rose .rose { width: 100%; height: 100%; }
/* Hinter dem Foto bleibt nur der Ring mit Skala sichtbar */
.hero__rose .rose__star, .hero__rose .rose__minor, .hero__rose .rose__pin, .hero__rose .rose__lbl { display: none; }
.ph--hero { z-index: 1; aspect-ratio: 1 / 1; }
.ph--hero img { object-position: 50% 50%; }
.hero__rose .rose {
    transform: translate(calc(var(--px) * -22px), calc(var(--py) * -22px)) rotate(calc(var(--px) * 7deg));
    transition: transform 1.4s var(--ease-out);
}

.hero__meta { position: absolute; left: 0; right: 0; bottom: 30px; }
.hero__meta .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.scroll-cue { display: flex; align-items: center; gap: 14px; }
.scroll-cue i { position: relative; width: 1px; height: 46px; background: var(--line); overflow: hidden; }
.scroll-cue i::after {
    content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%;
    background: var(--sand); animation: cue 2.4s var(--ease) infinite;
}

/* Wortweises Einblenden großer Überschriften */
.split .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; }
.js .split .w > span {
    transform: translateY(108%);
    transition: transform 1.1s var(--ease-out);
    transition-delay: calc(var(--i) * 65ms + 120ms);
}
.js .split.is-in .w > span { transform: none; }

/* =========================================================================
   01 — Wie Männer ankommen (Scroll-Sequenz) + Definition
   ========================================================================= */

.arrive { position: relative; height: 260vh; }
.arrive__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.arrive__media { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 68vh; }
.arrive__media::after { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--sand) 16%, transparent); pointer-events: none; }
.arrive__ph { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; transition: opacity 1.1s var(--ease); }
.arrive__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s var(--ease-out); }
.arrive__ph.is-on { opacity: 1; }
.arrive__ph.is-on img { transform: none; }
.arrive__count { position: absolute; left: 0; bottom: -34px; }
.arrive__count b { font-weight: 400; color: var(--sand); }
.arrive__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.arrive__intro { margin: 0 0 clamp(24px, 4vh, 44px); font: 400 clamp(1rem, 1.4vw, 1.15rem)/1.5 var(--sans); color: var(--t3); }
.arrive__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 2.4vh, 28px); }
.arrive__lines li {
    max-width: 24ch;
    font: 300 clamp(1.45rem, 3.4vw, 2.9rem)/1.16 var(--mono);
    letter-spacing: -.04em;
    color: var(--t1);
    opacity: .13;
    transition: opacity .8s var(--ease);
}
.arrive__lines li.is-past { opacity: .34; }
.arrive__lines li.is-on { opacity: 1; }
.arrive__lines .arrive__last { display: flex; align-items: center; gap: .35em; font-size: clamp(2.6rem, 7.5vw, 6rem); line-height: 1; }
.arrive__last .star { width: .42em; height: .42em; color: var(--sand); transform: rotate(-90deg) scale(.3); opacity: 0; transition: transform 1s var(--spring) .15s, opacity .5s .15s; }
.arrive__last.is-on .star { transform: none; opacity: 1; }
.arrive.is-static { height: auto; }
.arrive.is-static .arrive__sticky { position: static; height: auto; padding-block: 120px; }
.arrive.is-static li { opacity: 1; transform: none; }
.arrive.is-static .arrive__last .star { opacity: 1; transform: none; }

.define { padding-top: 40px; }
.define__entry {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px 48px;
    padding-top: 26px; border-top: 1px solid var(--line);
}
.define__entry .meta { padding-top: 14px; }
.define__word { margin: 0 0 10px; font: 300 clamp(2.6rem, 6.4vw, 5.4rem)/1 var(--mono); letter-spacing: -.05em; color: var(--t1); }
.define__word span { color: var(--t4); }
.define__pron { margin: 0 0 26px; font: 400 .78rem/1 var(--mono); letter-spacing: .12em; color: var(--t3); }
.define__text { max-width: 32ch; margin: 0; font: 400 clamp(1.25rem, 2.3vw, 1.95rem)/1.35 var(--mono); letter-spacing: -.03em; color: var(--t1); }

.type { display: grid; }
.type > span[aria-hidden] { grid-area: 1 / 1; }
.type__ghost { visibility: hidden; }
.type.is-typing .type__out::after {
    content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -.12em;
    background: var(--sand); animation: blink 1s steps(1) infinite;
}

.define__cards {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(64px, 8vw, 104px);
    border: 1px solid var(--line);
}
.dcard { background: var(--bg); padding: 38px 32px 42px; transition: background-color .5s var(--ease); }
.dcard + .dcard { border-left: 1px solid var(--line); }
.dcard:hover { background: var(--surface); }
.dcard .meta { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--t1); }
.dcard .meta .star { width: 9px; height: 9px; color: var(--sand); }
.dcard p { margin: 0 0 14px; color: var(--t2); }
.dcard p:last-child { margin: 0; }
.dcard__big { font: 400 1.15rem/1.45 var(--mono) !important; letter-spacing: -.02em; color: var(--t1) !important; }

.strike { list-style: none; margin: 0 0 22px; padding: 0; }
.strike li {
    position: relative; display: table; margin: 0 0 10px;
    font: 400 1.05rem/1.35 var(--mono); letter-spacing: -.02em; color: var(--t1);
    transition: color .6s var(--ease); transition-delay: calc(var(--i) * 170ms + 520ms);
}
.strike li::after {
    content: ""; position: absolute; left: -3px; right: -3px; top: 55%; height: 1px;
    background: var(--sand); transform: scaleX(0); transform-origin: left;
    transition: transform .7s var(--ease-out); transition-delay: calc(var(--i) * 170ms + 300ms);
}
.is-in .strike li { color: var(--t3); }
.is-in .strike li::after { transform: scaleX(1); }

.define__more { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 40px; }

/* =========================================================================
   02 — Kompass
   ========================================================================= */

.compass {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(36px, 6vw, 104px); align-items: center;
    margin-top: clamp(56px, 7vw, 88px);
}
.compass__rose { width: 100%; max-width: 430px; justify-self: center; }

.compass[data-stage] .pt { opacity: .15; }
.compass[data-stage="unsaid"] .pt--n, .compass[data-preview="unsaid"] .pt--n,
.compass[data-stage="gap"] .pt--e,    .compass[data-preview="gap"] .pt--e,
.compass[data-stage="real"] .pt--s,   .compass[data-preview="real"] .pt--s,
.compass[data-stage="under"] .pt--w,  .compass[data-preview="under"] .pt--w { opacity: 1; }
.compass:not([data-stage])[data-preview] .pt { opacity: .3; }
.compass:not([data-stage])[data-preview="unsaid"] .pt--n,
.compass:not([data-stage])[data-preview="gap"] .pt--e,
.compass:not([data-stage])[data-preview="real"] .pt--s,
.compass:not([data-stage])[data-preview="under"] .pt--w { opacity: 1; }
.compass[data-stage="unsaid"] [data-lbl="n"], .compass[data-stage="gap"] [data-lbl="e"],
.compass[data-stage="real"] [data-lbl="s"],   .compass[data-stage="under"] [data-lbl="w"] { fill: var(--sand); }

.opts { border-top: 1px solid var(--line); }
.opt {
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px;
    grid-template-areas: "dir shelf go" "dir line go";
    column-gap: 22px; row-gap: 8px; align-items: center;
    width: 100%; padding: 26px 14px 26px 0;
    text-align: left;
    border-bottom: 1px solid var(--line);
    transition: padding .5s var(--ease-out);
}
.opt::before {
    content: ""; position: absolute; inset: -1px 0 -1px -14px; z-index: -1;
    background: var(--surface);
    transform: scaleX(0); transform-origin: left;
    transition: transform .6s var(--ease-out);
}
.opt:hover, .opt[aria-checked="true"] { padding-left: 14px; }
.opt:hover::before, .opt[aria-checked="true"]::before { transform: scaleX(1); }
.opt__dir {
    grid-area: dir; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--line-2);
    font: 500 .74rem/1 var(--mono); color: var(--t3);
    transition: background-color .4s, color .4s, border-color .4s;
}
.opt[aria-checked="true"] .opt__dir { background: var(--sand); border-color: var(--sand); color: var(--bg); }
.opt__shelf { grid-area: shelf; font: 400 .68rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--t3); }
.opt__line { grid-area: line; font: 400 clamp(1.08rem, 1.7vw, 1.4rem)/1.3 var(--mono); letter-spacing: -.03em; color: var(--t1); }
.opt__go { grid-area: go; width: 16px; height: 10px; color: var(--sand); opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .5s var(--ease-out); }
.opt:hover .opt__go, .opt[aria-checked="true"] .opt__go { opacity: 1; transform: none; }

.shelf { margin-top: clamp(56px, 7vw, 88px); }
.shelf__prompt {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 34px 20px; border: 1px dashed var(--line-2); text-align: center;
}
.shelf__prompt .star { width: 10px; height: 10px; color: var(--sand); animation: spin 8s linear infinite; }

.shelf__panel {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 56px;
    padding-top: 40px; border-top: 1px solid var(--line-2);
    scroll-margin-top: calc(var(--hdr) + 32px);
}
.ph--shelf { aspect-ratio: 16 / 10; margin-bottom: 28px; }
.shelf__title { margin: 10px 0 14px; font: 400 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--mono); letter-spacing: -.04em; color: var(--t1); }
.shelf__desc { margin: 0 0 28px; color: var(--t2); max-width: 36ch; }
.shelf__ic { display: flex; gap: 12px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--t2); }
.shelf__ic .star { width: 10px; height: 10px; margin-top: 7px; color: var(--sand); }
.shelf__ic a { color: var(--t1); border-bottom: 1px solid var(--line-2); transition: border-color .3s; }
.shelf__ic a:hover { border-color: var(--sand); }
.shelf__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.shelf__panel.is-entering .shelf__head > * { animation: rise .7s var(--ease-out) both; }
.shelf__panel.is-entering .shelf__head > :nth-child(2) { animation-delay: 60ms; }
.shelf__panel.is-entering .shelf__head > :nth-child(3) { animation-delay: 120ms; }
.shelf__panel.is-entering .pcard { animation: rise .8s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 120ms); }

/* =========================================================================
   03 — Das Magazin
   ========================================================================= */

.week {
    position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
    margin-top: clamp(64px, 8vw, 104px); padding-top: 64px;
}
.week__line { position: absolute; top: 18px; left: 0; right: 0; height: 1px; background: var(--line); }
.week__line span { position: absolute; inset: 0; background: var(--sand); transform: scaleX(0); transform-origin: left; transition: transform 2s var(--ease-out) .2s; }
.week.is-in .week__line span { transform: scaleX(1); }

.day { position: relative; display: flex; flex-direction: column; }
.day__mark {
    position: absolute; top: -64px; left: 0;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg); border: 1px solid var(--line-2); color: var(--sand);
    opacity: 0; transform: scale(.5) rotate(-90deg);
    transition: opacity .5s var(--ease), transform .8s var(--spring), border-color .5s;
    transition-delay: calc(var(--i) * 380ms + 250ms);
}
.day__mark svg { width: 12px; height: 12px; }
.week.is-in .day__mark { opacity: 1; transform: none; border-color: var(--sand); }
.day.is-today .day__mark::after {
    content: ""; position: absolute; inset: -1px; border: 1px solid var(--sand); border-radius: 50%;
    animation: pulse 2.6s var(--ease) infinite;
}
.day__today { position: absolute; top: -51px; left: 44px; padding: 0 8px; background: var(--bg); font: 400 .64rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sand); }
.day__today:empty { display: none; }
.day__name { margin: 0 0 6px; font: 400 1.35rem/1.1 var(--mono); letter-spacing: -.03em; color: var(--t1); }
.day__fmt { margin: 0 0 20px; }
.day .pcard { flex: 1; }

.stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: clamp(72px, 9vw, 112px) 0 0;
    border-top: 1px solid var(--line);
}
.stats > div { display: flex; flex-direction: column; padding: 28px 16px 0 0; }
.stats dd { order: 1; margin: 0; font: 300 clamp(2.5rem, 5.2vw, 4.4rem)/1 var(--mono); letter-spacing: -.06em; color: var(--t1); font-variant-numeric: tabular-nums; }
.stats dt { order: 2; margin-top: 14px; }
.week-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 48px; }
.week-foot p { margin: 0; color: var(--t3); font-size: .95rem; }

/* =========================================================================
   04 — Vesper Room
   ========================================================================= */

.vesper { background: var(--surface); border-block: 1px solid var(--line); }
.vesper__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.vesper .display { font-size: clamp(2.2rem, 4.3vw, 3.9rem); margin-bottom: 28px; }
.vesper .lede { margin-bottom: 8px; }

.roles { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 36px 0 22px; border: 1px solid var(--line-2); }
.roles button {
    position: relative; z-index: 1; padding: 13px 22px;
    font: 500 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
    color: var(--t3); transition: color .4s;
}
.roles button[aria-selected="true"] { color: var(--t1); }
.roles__ind {
    position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
    background: var(--surface-2); border-bottom: 1px solid var(--sand);
    transition: transform .6s var(--spring);
}
.vesper[data-role="cuck"] .roles__ind { transform: translateX(100%); }

.role-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.role-list li {
    display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px;
    padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--t2);
    animation: rise .55s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms);
}
.role-list .star { width: 9px; height: 9px; margin-top: 8px; color: var(--sand); }

.privacy { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.privacy li { font: 400 .78rem/1.5 var(--mono); letter-spacing: .02em; color: var(--t3); }
.privacy b { display: block; font-weight: 400; color: var(--t1); }

.vesper__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 40px; }
.vesper__device { position: sticky; top: calc(var(--hdr) + 32px); display: grid; grid-template-columns: minmax(0, 1fr); }
.ph--vesper { grid-area: 1 / 1; justify-self: end; width: 84%; aspect-ratio: 3 / 4; }
.ph--vesper img { object-position: 46% 50%; }
.vesper__device .phone { grid-area: 1 / 1; justify-self: start; margin-top: 96px; z-index: 1; }
.vesper__caption { grid-area: 2 / 1; margin-top: 22px; }
.vesper__caption { text-align: center; }

/* =========================================================================
   05 — Inner Circle
   ========================================================================= */

.ph--band { aspect-ratio: 21 / 8; margin-top: clamp(48px, 6vw, 80px); }
.offer__grid {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 96px); align-items: start;
    margin-top: clamp(56px, 7vw, 88px);
}
.benefits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.benefit { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.benefit__day { display: flex; align-items: center; gap: 8px; height: 1.6rem; font: 500 .68rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sand); }
.benefit__day .star { width: 10px; height: 10px; }
.benefit h3 { margin: 0 0 8px; font: 400 1.28rem/1.3 var(--mono); letter-spacing: -.03em; color: var(--t1); }
.benefit p { margin: 0; max-width: 54ch; }

.price { position: sticky; top: calc(var(--hdr) + 28px); padding: 38px 34px 32px; background: var(--surface); border: 1px solid var(--line-2); }
.price__amt { display: flex; align-items: baseline; margin: 16px 0 10px; font: 300 clamp(3.4rem, 5.6vw, 4.6rem)/1 var(--mono); letter-spacing: -.06em; color: var(--t1); }
.price__cur { align-self: flex-start; margin: .25em 4px 0 0; font-size: .42em; letter-spacing: 0; }
.price__per { margin-left: 14px; font: 400 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.price__sub { margin: 0 0 28px; color: var(--t2); }
.price__cancel { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .88rem; color: var(--t2); }
.price__cancel svg { width: 14px; height: 14px; color: var(--sand); }

.stmt { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.stmt__row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px;
    margin: 14px 0; padding: 15px 16px;
    background: var(--bg); border-block: 1px dashed var(--line-2);
    font: 400 .84rem/1 var(--mono); letter-spacing: .04em; color: var(--t1);
    white-space: nowrap;
}
.stmt__row span:first-child { color: var(--t3); }
.stmt__row .is-typing::after {
    content: ""; display: inline-block; width: .55em; height: 1em; margin-left: 1px; vertical-align: -.15em;
    background: var(--sand); animation: blink 1s steps(1) infinite;
}
.stmt__note { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--t2); }
.price__why { display: inline-block; margin-top: 18px; font-size: .85rem; color: var(--t3); border-bottom: 1px solid var(--line-2); transition: color .3s, border-color .3s; }
.price__why:hover { color: var(--t1); border-color: var(--sand); }

.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(64px, 8vw, 96px); }
.voice { position: relative; margin: 0; padding: 30px 26px 24px; border: 1px dashed var(--line-2); }
.voice blockquote { margin: 0 0 18px; font: italic 400 1.02rem/1.55 var(--sans); color: var(--t2); }
.voice__ph { position: absolute; top: -9px; left: 18px; padding: 0 8px; background: var(--bg); font: 400 .62rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }

/* =========================================================================
   06 — So kommst du rein · 07 — Fragen
   ========================================================================= */

.steps { list-style: none; margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.step { position: relative; }
.step__n {
    width: 46px; height: 46px; border-radius: 50%; margin-bottom: 28px;
    display: grid; place-items: center;
    border: 1px solid var(--sand); font: 400 .9rem/1 var(--mono); color: var(--t1);
    opacity: 0; transform: scale(.6);
    transition: opacity .5s var(--ease), transform .8s var(--spring);
    transition-delay: calc(var(--i) * 420ms + 100ms);
}
.step:not(:last-child)::after {
    content: ""; position: absolute; top: 23px; left: 62px; right: -16px; height: 1px;
    background: var(--line-2); transform: scaleX(0); transform-origin: left;
    transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * 420ms + 380ms);
}
.steps.is-in .step__n { opacity: 1; transform: none; }
.steps.is-in .step::after { transform: scaleX(1); }
.step h3 { margin: 0 0 10px; font: 400 1.28rem/1.3 var(--mono); letter-spacing: -.03em; color: var(--t1); }
.step p { margin: 0; max-width: 34ch; }
.steps-help { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--t3); font-size: .95rem; }
.steps-help a { color: var(--t1); border-bottom: 1px solid var(--line-2); }

.faq__list { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 26px 0; cursor: pointer; list-style: none;
    font: 400 clamp(1.05rem, 1.6vw, 1.3rem)/1.35 var(--mono); letter-spacing: -.02em; color: var(--t1);
    transition: padding .5s var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { padding-left: 10px; }
.qa__icon { position: relative; width: 14px; height: 14px; flex: none; }
.qa__icon::before, .qa__icon::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: var(--sand); transition: transform .5s var(--ease-out);
}
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa__body { overflow: hidden; }
.qa__body p { max-width: 62ch; margin: 0 0 14px; }
.qa__body p:last-child { margin-bottom: 28px; }
.qa__body a { color: var(--t1); border-bottom: 1px solid var(--line-2); }

/* =========================================================================
   Abschluss + Footer
   ========================================================================= */

.final { text-align: center; border-top: 1px solid var(--line); }
.final__star { width: 64px; height: 64px; margin: 0 auto 36px; }
.final__star path { fill: transparent; stroke: var(--sand); stroke-width: 1; stroke-dasharray: 310; stroke-dashoffset: 310; }
.final__head.is-in .final__star path { animation: draw 1.8s var(--ease) forwards, fillIn .9s var(--ease) 1.4s forwards; }
.final__head .h2 { margin-bottom: 22px; }
.final__head .lede { margin-inline: auto; max-width: 52ch; }

.final__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: clamp(56px, 7vw, 80px) auto 0; text-align: left; }
.fcard { display: flex; flex-direction: column; padding: 36px 32px 32px; border: 1px solid var(--line-2); }
.fcard--ic { border-color: var(--sand); background: var(--surface); }
.fcard__img { margin: -36px -32px 28px; aspect-ratio: 16 / 9; }
.fcard__img::after { border: 0; border-bottom: 1px solid var(--line); }
.fcard h3 { margin: 10px 0 12px; font: 400 1.6rem/1.15 var(--mono); letter-spacing: -.04em; color: var(--t1); }
.fcard > p:not(.meta) { margin: 0 0 26px; }
.fcard .btn { margin-top: auto; }
.fcard__small { margin: 14px 0 0 !important; text-align: center; font-size: .82rem; color: var(--t3); }

.signup { position: relative; display: flex; margin-top: 12px; border: 1px solid var(--line-2); transition: border-color .3s; }
.signup:focus-within { border-color: var(--sand); }
.signup input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; background: transparent; border: 0; outline: 0; font: 400 .88rem/1 var(--mono); color: var(--t1); }
.signup input::placeholder { color: var(--t3); }
.signup button { padding: 0 18px; border-left: 1px solid var(--line-2); font: 500 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--t1); transition: background-color .3s; }
.signup button:hover { background: var(--surface-2); }
.signup__msg { display: none; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; font: 400 .85rem/1.3 var(--mono); color: var(--t1); }
.signup__msg .star { width: 11px; height: 11px; color: var(--sand); animation: spin 6s linear infinite; }
.signup.is-done input, .signup.is-done button { display: none; }
.signup.is-done .signup__msg { display: flex; animation: rise .6s var(--ease-out); }

.ftr { padding: 88px 0 34px; border-top: 1px solid var(--line); }
.ftr__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.ftr__brand .star { width: 26px; height: 26px; color: var(--sand); margin-bottom: 20px; }
.ftr__brand p { max-width: 34ch; margin: 0; font-size: .95rem; color: var(--t3); }
.ftr h2 { margin: 0 0 18px; font: 400 .68rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--t1); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr li a { font-size: .95rem; color: var(--t3); transition: color .3s; }
.ftr li a:hover { color: var(--t1); }
.ftr__base {
    position: relative;
    display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 72px; padding-top: 24px;
    font: 400 .68rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t3);
}
.ftr__base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.ftr__url { color: var(--sand); margin-right: auto; }
.ftr__legal { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font: 400 .72rem/1.4 var(--sans); letter-spacing: .02em; text-transform: none; }
.ftr__legal a { color: color-mix(in srgb, var(--sand) 50%, var(--bg)); transition: color .3s; }
.ftr__legal a + a::before { content: "·"; display: inline-block; margin: 0 10px; color: color-mix(in srgb, var(--sand) 35%, var(--bg)); }
.ftr__legal a:hover { color: var(--t1); }

/* =========================================================================
   Vesper-Room-Gerät (App-Palette, nur innerhalb des Handys)
   ========================================================================= */

.phone {
    --tx: 0deg; --ty: 0deg;
    position: relative;
    width: min(318px, 84vw); aspect-ratio: 318 / 656;
    padding: 9px; border-radius: 48px;
    background: #050507; border: 1px solid var(--line-2);
    transform: perspective(1400px) rotateY(var(--ty)) rotateX(var(--tx));
    transition: transform .9s var(--ease-out);
}
.phone::before {
    content: ""; position: absolute; top: 19px; left: 50%; z-index: 4;
    width: 82px; height: 22px; margin-left: -41px; border-radius: 12px; background: #050507;
}

.vr {
    --vr-bg: #0b0b0e; --vr-card: #15151c; --vr-card2: #1a1a23;
    --vr-line: rgba(201, 162, 39, .22); --vr-soft: rgba(255, 255, 255, .07);
    --vr-gold: #c9a227; --vr-gold-b: #e6c35c; --vr-wine: #7a1f2b;
    --vr-text: #ece8df; --vr-muted: #9b96a4;
    --vr-serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --vr-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    position: relative; height: 100%;
    display: flex; flex-direction: column;
    border-radius: 40px; overflow: hidden;
    background: var(--vr-bg); color: var(--vr-text);
    font: 400 12px/1.4 var(--vr-sans);
}
.vr ::selection { background: var(--vr-gold); color: #111; }
.vr button:focus-visible { outline: 1px solid var(--vr-gold); outline-offset: 2px; }

.vr__top { display: flex; justify-content: space-between; align-items: center; padding: 50px 18px 12px; border-bottom: 1px solid var(--vr-soft); }
.vr__logo { font: 400 15px/1 var(--vr-serif); color: var(--vr-gold); }
.vr__badge { padding: 5px 8px; border: 1px solid var(--vr-soft); border-radius: 20px; font: 600 8px/1 var(--vr-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--vr-muted); }
.vr__body { position: relative; flex: 1; overflow: hidden; padding: 14px 14px 0; }
.vr__view { animation: vrIn .45s var(--ease-out); }
.vr-h { margin: 16px 2px 9px; font: 400 10px/1 var(--vr-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--vr-gold); }
.vr-h:first-child { margin-top: 2px; }

.vr-status { padding: 18px 14px 16px; text-align: center; background: var(--vr-card); border: 1px solid var(--vr-line); border-radius: 16px; }
.vr-status__icon { width: 50px; height: 50px; margin: 0 auto 12px; display: grid; place-items: center; border: 1px solid var(--vr-gold); border-radius: 50%; color: var(--vr-gold-b); }
.vr-status__icon svg { width: 21px; height: 21px; }
.vr-status__name { margin: 0 0 6px; font: 400 25px/1.1 var(--vr-serif); }
.vr-status__name.swap { animation: vrSwap .6s var(--ease-out); }
.vr-status__quote { margin: 0 0 8px; font: italic 400 12px/1.4 var(--vr-serif); color: var(--vr-muted); }
.vr-status__eta { margin: 6px 0 3px; font: 400 18px/1 var(--vr-serif); color: var(--vr-gold-b); font-variant-numeric: tabular-nums; }
.vr-status__lbl, .vr-status__by { margin: 0; font: 600 8px/1.5 var(--vr-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--vr-muted); }
.vr-status__by { margin-top: 8px; }
.vr-steps { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.vr-steps i { width: 18px; height: 2px; border-radius: 2px; background: var(--vr-soft); transition: background-color .5s; }
.vr-steps i.on { background: var(--vr-gold); }

.vr-serve { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--vr-wine); color: var(--vr-text); font: 500 12px/1 var(--vr-sans); transition: transform .2s, opacity .3s; }
.vr-serve svg { width: 13px; height: 13px; }
.vr-serve:active { transform: scale(.97); }
.vr-serve:disabled { opacity: .5; cursor: default; }
.vr-ask { margin-top: 8px; padding: 11px 12px; border-radius: 12px; background: var(--vr-card); border: 1px solid var(--vr-soft); animation: vrIn .45s var(--ease-out); }
.vr-ask p { margin: 0 0 5px; font-size: 11.5px; }
.vr-ask span { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--vr-muted); }
.vr-ask svg { width: 11px; height: 11px; animation: hourglass 2s var(--ease) infinite; }
.vr-ask.is-answered span { color: var(--vr-gold-b); }
.vr-ask.is-answered svg { animation: none; }

.vr-chips { display: grid; gap: 6px; }
.vr-chip { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--vr-card); border: 1px solid var(--vr-soft); text-align: left; font-size: 12px; transition: border-color .3s, background-color .3s; }
.vr-chip svg { width: 15px; height: 15px; color: var(--vr-muted); transition: color .3s; }
.vr-chip[aria-pressed="true"] { border-color: var(--vr-gold); background: var(--vr-card2); }
.vr-chip[aria-pressed="true"] svg { color: var(--vr-gold-b); }
.vr-switch-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px 0; font-size: 11px; color: var(--vr-muted); }
.vr-switch { position: relative; width: 34px; height: 20px; border-radius: 20px; background: var(--vr-soft); transition: background-color .3s; }
.vr-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--vr-text); transition: transform .4s var(--spring); }
.vr-switch[aria-checked="true"] { background: var(--vr-gold); }
.vr-switch[aria-checked="true"]::after { transform: translateX(14px); }
.vr-req { padding: 12px; border-radius: 12px; background: var(--vr-card); border: 1px solid var(--vr-line); animation: vrIn .45s var(--ease-out); }
.vr-req p { margin: 0 0 10px; font-size: 11.5px; }
.vr-req div { display: flex; gap: 6px; }
.vr-req button { flex: 1; padding: 9px; border-radius: 9px; font-size: 11px; background: var(--vr-card2); border: 1px solid var(--vr-soft); }
.vr-req button[data-answer="yes"] { background: var(--vr-gold); border-color: transparent; color: #111; }
.vr-none { margin: 0; padding: 12px; border: 1px dashed var(--vr-soft); border-radius: 12px; text-align: center; font-size: 11px; color: var(--vr-muted); }

.vr-bal { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--vr-card); border: 1px solid var(--vr-soft); font-size: 11.5px; }
.vr-bal b { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--vr-line); font: 400 12px/1 var(--vr-serif); color: var(--vr-gold-b); font-variant-numeric: tabular-nums; }
.vr-bal svg { width: 8px; height: 8px; }
.vr-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vr-task { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 12px; background: var(--vr-card); border: 1px solid var(--vr-soft); text-align: left; font-size: 12px; transition: border-color .3s; }
.vr-task__t { display: block; transition: color .3s; }
.vr-task small { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 9.5px; color: var(--vr-muted); }
.vr-task small svg { width: 10px; height: 10px; }
.vr-task em { font: normal 400 10px/1 var(--vr-sans); color: var(--vr-gold-b); }
.vr-check { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--vr-muted); border-radius: 6px; transition: background-color .3s, border-color .3s; }
.vr-check svg { width: 12px; height: 12px; color: #111; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s var(--ease-out) .05s; }
.vr-task[aria-pressed="true"] { border-color: var(--vr-line); }
.vr-task[aria-pressed="true"] .vr-check { background: var(--vr-gold); border-color: var(--vr-gold); }
.vr-task[aria-pressed="true"] .vr-check svg { stroke-dashoffset: 0; }
.vr-task[aria-pressed="true"] .vr-task__t { color: var(--vr-muted); text-decoration: line-through; }

.vr-count { margin-bottom: 8px; padding: 14px; text-align: center; background: var(--vr-card); border: 1px solid var(--vr-soft); border-radius: 16px; }
.vr-count b { display: block; margin-bottom: 4px; font: 400 34px/1 var(--vr-serif); color: var(--vr-gold-b); }
.vr-count span { font: 600 8px/1 var(--vr-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--vr-muted); }
.vr-rec { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vr-rec li { padding: 9px 12px; border-radius: 12px; background: var(--vr-card); border: 1px solid var(--vr-soft); }
.vr-rec time { display: block; margin-bottom: 3px; font-size: 9.5px; color: var(--vr-muted); }
.vr-rec p { margin: 0; font-size: 11.5px; }
.vr-sealed { display: flex; align-items: center; gap: 10px; font: italic 12px/1 var(--vr-serif); color: var(--vr-muted); }
.vr-price { padding: 5px 9px; border-radius: 7px; background: var(--vr-gold); color: #111; font: 600 9.5px/1 var(--vr-sans); transition: transform .2s; }
.vr-price:hover { transform: scale(1.06); }
.vr-rec li.is-sealed p { display: none; }
.vr-rec li.is-open p { animation: vrUnseal .9s var(--ease-out); }
.vr-rec li.is-open .vr-sealed { display: none; }
.vr-rec li.shake { animation: shake .45s; }
.vr-vis { display: none; margin-top: 4px; font-size: 9px; color: var(--vr-gold-b); }
.vr-log { list-style: none; margin: 0; padding: 0 2px; display: grid; gap: 10px; }
.vr-log li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; }
.vr-log li.is-new { animation: vrIn .6s var(--ease-out); }
.vr-log svg { width: 26px; height: 26px; padding: 6px; border: 1px solid var(--vr-soft); border-radius: 50%; color: var(--vr-gold-b); }
.vr-log b { display: block; font-weight: 500; font-size: 11.5px; }
.vr-log small { font-size: 9.5px; color: var(--vr-muted); }
.vr-note { margin: 9px 2px 0; font-size: 9.5px; line-height: 1.45; text-align: center; color: var(--vr-muted); }
.phone[data-role="hot"] .vr-rec li.is-sealed p { display: block; }
.phone[data-role="hot"] .vr-sealed { display: none; }
.phone[data-role="hot"] .vr-vis { display: block; }
.phone[data-role="hot"] [data-for="cuck"], .phone[data-role="cuck"] [data-for="hot"] { display: none; }

.vr__tabs { display: flex; justify-content: space-around; padding: 9px 8px 16px; background: var(--vr-bg); border-top: 1px solid var(--vr-soft); }
.vr__tabs button { display: grid; justify-items: center; gap: 4px; padding: 4px 12px; font-size: 9px; color: var(--vr-muted); transition: color .3s; }
.vr__tabs svg { width: 17px; height: 17px; }
.vr__tabs button[aria-selected="true"] { color: var(--vr-gold-b); }
.vr-float { position: absolute; z-index: 5; pointer-events: none; font: 600 13px/1 var(--vr-serif); color: var(--vr-gold-b); animation: vrFloat 1.1s var(--ease-out) forwards; }

/* =========================================================================
   Einblenden beim Scrollen
   ========================================================================= */

.js [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 1ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .hero__visual[data-reveal] { transform: scale(.94); transition-duration: 1.6s, 2.2s; }
.js .hero__visual[data-reveal].is-in { transform: none; }

/* =========================================================================
   Keyframes
   ========================================================================= */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(.965); } }
@keyframes wobble { 0% { transform: rotate(0); } 25% { transform: rotate(7deg); } 50% { transform: rotate(-4deg); } 75% { transform: rotate(1.5deg); } 100% { transform: rotate(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillIn { to { fill: var(--sand); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes cue { to { top: 100%; } }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes vrIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes vrSwap { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
@keyframes vrUnseal { from { opacity: 0; filter: blur(6px); letter-spacing: .12em; } }
@keyframes vrFloat { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-32px); } }
@keyframes hourglass { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* =========================================================================
   Breakpoints
   ========================================================================= */

@media (min-width: 1360px) {
    .rail { display: flex; }
}

@media (max-width: 1100px) {
    .shelf__panel { grid-template-columns: 1fr; }
    .ph--shelf { max-width: 560px; }
    .week { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; }
    .week__line { display: none; }
    .day__mark { top: -52px; }
    .day__today { top: -44px; }
}

@media (max-width: 980px) {
    .nav, .hdr__signin { display: none; }
    .burger { display: grid; }
    .hdr__actions { margin-left: auto; gap: 8px; }
    .hdr__actions .btn .long { display: none; }
}

@media (max-width: 860px) {
    :root { --hdr: 64px; }
    body { font-size: 1.02rem; }
    .brand span { display: none; }

    .sec-head, .define__entry { grid-template-columns: 1fr; }
    .sec-head .kicker { margin-top: 0; }
    .define__entry .meta { padding-top: 0; }

    .hero { flex-direction: column; align-items: stretch; padding-block: calc(var(--hdr) + 56px) 40px; }
    .hero__in { grid-template-columns: 1fr; gap: 48px; }
    .hero .display { font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
    .hero__visual { justify-self: stretch; width: auto; margin: 0 6px; }
    .hero__rose { inset: -12% -6%; opacity: .7; }
    .ph--hero { aspect-ratio: 4 / 3; }
    .hero__meta { position: static; margin-top: 64px; }
    .hero__facts { flex-direction: column; gap: 8px; }
    .scroll-cue { display: none; }

    .arrive__grid { grid-template-columns: 1fr; gap: 22px; }
    .arrive__media { order: -1; aspect-ratio: 16 / 10; max-height: 26vh; }
    .arrive__count { bottom: auto; top: 10px; left: auto; right: 10px; padding: 4px 8px; background: color-mix(in srgb, var(--bg) 80%, transparent); }
    .arrive__lines li { font-size: clamp(1.25rem, 5.2vw, 1.6rem); }
    .arrive__lines .arrive__last { font-size: clamp(2.3rem, 10vw, 3rem); }
    .arrive__intro { margin-bottom: 16px; }

    .ph--band { aspect-ratio: 4 / 3; }
    .fcard__img { margin: -36px -32px 24px; }

    .define__cards { grid-template-columns: 1fr; }
    .dcard + .dcard { border-left: 0; border-top: 1px solid var(--line); }
    .compass { grid-template-columns: 1fr; }
    .compass__rose { max-width: 250px; }
    .shelf__posts { grid-template-columns: 1fr; }

    .week { grid-template-columns: 1fr; padding-top: 0; padding-left: 56px; row-gap: 40px; }
    .week__line { display: block; top: 0; bottom: 0; left: 17px; right: auto; width: 1px; height: auto; }
    .week__line span { transform: scaleY(0); transform-origin: top; }
    .week.is-in .week__line span { transform: scaleY(1); }
    .day__mark { top: 0; left: -56px; }
    .day__today { position: static; display: block; margin-bottom: 6px; padding: 0; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stats > div { padding-bottom: 8px; }

    .vesper__grid { grid-template-columns: 1fr; }
    .vesper__device { position: static; }
    .ph--vesper { width: 100%; aspect-ratio: 16 / 10; }
    .vesper__device .phone { justify-self: center; margin-top: 150px; }
    .vesper__caption { text-align: center; }
    .privacy { grid-template-columns: 1fr; }

    .offer__grid { grid-template-columns: 1fr; }
    .price { position: static; padding: 30px 22px 26px; }
    .benefit { grid-template-columns: 1fr; gap: 10px; }
    .voices { grid-template-columns: 1fr; gap: 24px; }

    .steps { grid-template-columns: 1fr; gap: 36px; }
    .step { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 20px; }
    .step__n { grid-row: span 2; margin: 0; }
    .step:not(:last-child)::after { top: 58px; bottom: -30px; left: 23px; right: auto; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; }
    .steps.is-in .step::after { transform: scaleY(1); }

    .final__grid { grid-template-columns: 1fr; }
    .ftr__grid { grid-template-columns: 1fr 1fr; }
    .ftr__brand { grid-column: 1 / -1; }
    .ftr { padding-bottom: 100px; }
    .sticky-cta { display: flex; }
}

@media (max-width: 420px) {
    .stmt__row { gap: 10px; padding: 14px 12px; font-size: .78rem; }
    .price__amt { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; transition-delay: 0s !important;
    }
    html { scroll-behavior: auto; }
}


/* =========================================================================
   Fassung 2 — baut auf ../assets/css/navcom.css auf und überschreibt nur,
   was neu ist: Thema sofort klar, mehr Rhythmus (Laufband, Kinobänder,
   umgekehrte Sandfläche), Filmkorn, Terminal-Überschriften.
   ========================================================================= */

/* ---------- Filmkorn: statisch, fein, liegt über allem außer der Altersabfrage ---------- */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
    opacity: .055;
    background-image: 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='.9' 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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Hero: das Thema steht in der ersten Zeile unter der Überschrift ---------- */
/* Breiterer Rahmen, damit alle drei Männer im Bild sind: das Paar links, der Wartende rechts */
.ph--hero { aspect-ratio: 5 / 4; }
/* Ring bleibt bei nicht-quadratischem Rahmen mittig */
.hero__rose { display: block; }
.hero__rose .rose { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph--hero img { object-position: 66% 50%; }
.hero__title { font-size: clamp(3rem, 5.8vw, 5.4rem); line-height: .98; letter-spacing: -.06em; margin-bottom: 0 !important; }
.hero__title .w:last-of-type > span { color: transparent; -webkit-text-stroke: 1.5px var(--sand); }
.hero__topic {
    max-width: 38ch; margin: 30px 0 14px;
    font: 400 clamp(1.15rem, 1.65vw, 1.42rem)/1.5 var(--sans);
    color: var(--t1); text-wrap: pretty;
}
.hero__by { max-width: 48ch; margin: 0 0 40px; font: 400 .78rem/1.6 var(--mono); letter-spacing: .04em; color: var(--t3); }
.hero__proof { font-weight: 500; color: var(--sand); }

/* ---------- Zeitmarke wie im Film ---------- */
.tc {
    position: absolute; top: 14px; left: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px 5px;
    background: color-mix(in srgb, #111 80%, transparent);
    font: 400 .7rem/1 var(--mono); letter-spacing: .16em; color: #C8AF82;
}
.tc__rec { width: 7px; height: 7px; border-radius: 50%; background: #C8AF82; animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: .15; } }

/* ---------- Laufband mit den Regalen der Library ---------- */
.marquee { overflow: hidden; padding: 26px 0; border-block: 1px solid var(--line); }
.marquee__track {
    display: flex; align-items: center; gap: 36px; padding-right: 36px; width: max-content;
    font: 300 clamp(1.7rem, 3.4vw, 3rem)/1 var(--mono); letter-spacing: -.04em; white-space: nowrap;
    color: var(--t4);
    animation: marquee 52s linear infinite;
}
.marquee__track span:nth-of-type(odd) { color: var(--t1); }
.marquee .star { width: .45em; height: .45em; color: var(--sand); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Einstieg: halb so viel Scrollweg wie in Fassung 1 ---------- */
.arrive { height: 190vh; }

/* ---------- Kinobänder über die volle Breite ---------- */
.cine {
    position: relative; margin: 0; overflow: hidden; isolation: isolate;
    height: min(80vh, 50vw); min-height: 340px;
    background: var(--surface-2);
}
.cine img {
    position: absolute; inset: -7% 0 auto; width: 100%; height: 114%; object-fit: cover;
    translate: 0 var(--par, 0%);
    filter: brightness(.9) contrast(1.07) sepia(.24);
}
.cine::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: #C8AF82; mix-blend-mode: color; opacity: var(--grade);
}
.cine__cap {
    position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(24px, 5vw, 64px);
    display: grid; justify-items: start; gap: 14px; max-width: min(620px, 82%);
}
.cine--right .cine__cap { left: auto; right: var(--gutter); justify-items: end; text-align: right; }
.cine__cap .tc { position: static; }
.cine__quote {
    display: block; padding: 14px 18px;
    background: color-mix(in srgb, #111 80%, transparent);
    font: 300 clamp(1.25rem, 2.4vw, 2.1rem)/1.22 var(--mono); letter-spacing: -.03em; color: #C8AF82;
}

/* ---------- Umgekehrte Sektion: Inner Circle auf Sand ---------- */
.inv { --bg: #C8AF82; --sand: #111111; background: var(--bg); color: var(--t2); }
.inv .price { --bg: #111111; --sand: #C8AF82; }
.inv, .inv .price {
    --t1: var(--sand);
    --t2: color-mix(in srgb, var(--sand) 82%, var(--bg));
    --t3: color-mix(in srgb, var(--sand) 68%, var(--bg));
    --t4: color-mix(in srgb, var(--sand) 42%, var(--bg));
    --line: color-mix(in srgb, var(--sand) 20%, var(--bg));
    --line-2: color-mix(in srgb, var(--sand) 36%, var(--bg));
    --surface: color-mix(in srgb, var(--sand) 5%, var(--bg));
    --surface-2: color-mix(in srgb, var(--sand) 9%, var(--bg));
}
.inv .price { background: var(--bg); border-color: var(--bg); }
.inv ::selection { background: #111; color: #C8AF82; }
.inv__title { font-size: clamp(2.4rem, 5.4vw, 4.7rem); line-height: 1.02; }
.inv .benefit__day { color: var(--t1); }
.inv .ph::before { background: #C8AF82; }
.inv .ph__cap { background: color-mix(in srgb, #111 84%, transparent); color: #C8AF82; }
.inv .ph__cap b { color: #C8AF82; }

.inv__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 36px; }
.inv__shots .ph { aspect-ratio: 4 / 3; }

.price__list { list-style: none; margin: 18px 0 28px; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.price__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--t2); font-size: .98rem; line-height: 1.45; }
.price__list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--sand); }
.price__steps { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; font-size: .9rem; line-height: 1.45; color: var(--t2); }
.price__steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.price__steps b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 50%; font: 400 .68rem/1 var(--mono); color: var(--t1); }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
    .hero__title { font-size: clamp(2.8rem, 13vw, 3.8rem); }
    .hero__topic { margin-top: 22px; }
    .hero__by { margin-bottom: 32px; }
    .arrive { height: 170vh; }
    .cine { height: 78vw; min-height: 300px; }
    .cine__cap { max-width: none; right: var(--gutter); }
    .cine__quote { font-size: 1.1rem; padding: 12px 14px; }
    .marquee { padding: 18px 0; }
    .inv__shots { gap: 8px; }
    .inv__shots .ph { aspect-ratio: 1 / 1; }
}

/* Kapitelleiste bleibt auch über der Sandfläche lesbar */
.rail { mix-blend-mode: difference; }

/* ---------- Einstieg: breiterer Bildrahmen, damit das Paar im Türrahmen ganz drin ist ---------- */
.arrive__media { aspect-ratio: 4 / 3; }

/* ---------- Free und Inner Circle nebeneinander ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-top: 40px; }
.plan { display: flex; flex-direction: column; padding: 36px 34px 30px; }
.plan--free { border: 1px solid var(--line-2); }
.plan--ic { position: static; }
.plan__name { margin: 10px 0 0; font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--mono); letter-spacing: -.04em; color: var(--t1); }
.plan .price__amt { margin: 18px 0 4px; }
.plan .price__list { flex: 1; }
.price__list li.is-no { color: var(--t4); }
.price__list li.is-no > span[aria-hidden] { width: 16px; flex: none; text-align: center; color: var(--t4); }
.price__list li.is-no s { text-decoration-color: color-mix(in srgb, currentColor 60%, transparent); }
.price__list li.is-plus { color: var(--t1); }
.plan--free .signup { margin-top: 4px; }
.plan__note { margin: 12px 0 0; text-align: center; font-size: .85rem; color: var(--t3); }
.plans__after { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; margin-top: 40px; }
.plans__after .stmt { margin: 0; padding: 0; border: 0; }
.plans__after .price__steps { margin-top: 14px; padding-top: 0; border: 0; }

/* ---------- Brücke vor dem Vesper Room: verstehen, vereinbaren, leben ---------- */
.bridge { margin-bottom: clamp(56px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.bridge__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.bridge__steps li { position: relative; display: grid; gap: 8px; padding: 22px 28px 0 0; border-top: 1px solid var(--line-2); }
.bridge__steps li::before {
    content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2);
}
.bridge__steps b { font: 400 clamp(1.4rem, 2.6vw, 2.2rem)/1.1 var(--mono); letter-spacing: -.04em; color: var(--t2); }
.bridge__steps li > span:last-child { color: var(--t3); font-size: .95rem; }
.bridge__live { border-top-color: var(--sand) !important; }
.bridge__live::before { background: var(--sand) !important; }
.bridge__live b { color: var(--sand); }

@media (max-width: 860px) {
    .plans, .plans__after { grid-template-columns: 1fr; }
    .plan { padding: 30px 22px 26px; }
    .bridge__steps { grid-template-columns: 1fr; gap: 26px; }
    .arrive__media { aspect-ratio: 16 / 10; }
}

.price__list em { font-style: normal; color: var(--t3); white-space: nowrap; }
.price__list li.is-no em { color: inherit; }


/* =========================================================================
   THEME-TEIL: alles außerhalb der Startseite
   ========================================================================= */

.hdr__search { display: grid; place-items: center; width: 36px; height: 36px; color: var(--t2); transition: color .3s; }
.hdr__search:hover { color: var(--t1); }
.hdr__search svg { width: 18px; height: 18px; }
@media (max-width: 980px) { .hdr__search { display: none; } }

/* Außerhalb der Startseite steht der Inhalt direkt unter dem Header */
.article-wrap, .listing { padding-top: calc(var(--hdr) + clamp(40px, 6vw, 88px)); }

.wrap-text { width: 100%; max-width: calc(720px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: calc(1240px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Lesefortschritt ---------- */
.progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--sand); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- Artikelkopf ---------- */
.article__head { max-width: calc(820px + var(--gutter) * 2); }
.article__head .kicker { flex-wrap: wrap; }
.article__head .kicker a { color: var(--t1); }
.article__title {
    margin: 0 0 24px;
    font: 400 clamp(2.2rem, 5vw, 4rem)/1.06 var(--mono); letter-spacing: -.045em;
    color: var(--t1); text-wrap: balance;
}
.article__lede { max-width: 42ch; margin: 0 0 30px; font: 400 clamp(1.15rem, 1.8vw, 1.4rem)/1.5 var(--sans); color: var(--t1); text-wrap: pretty; }
.article__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.article__image { margin-top: clamp(40px, 5vw, 64px); background: none; }
.article__image img { aspect-ratio: 16 / 9; }
.article__image figcaption { padding-top: 12px; font-size: .85rem; color: var(--t3); }
.article__image::after { left: var(--gutter); right: var(--gutter); }

/* ---------- Fließtext (Ghost-Inhalt) ---------- */
.gh-content {
    display: grid;
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [wide-start] minmax(0, 120px) [main-start] min(720px, calc(100% - var(--gutter) * 2)) [main-end] minmax(0, 120px) [wide-end] minmax(var(--gutter), 1fr) [full-end];
    margin-top: clamp(40px, 5vw, 72px);
    font: 400 1.14rem/1.78 var(--sans); color: var(--t2);
}
.gh-content > * { grid-column: main; margin: 0 0 1.35em; }
.gh-content > .kg-width-wide { grid-column: wide; }
.gh-content > .kg-width-full { grid-column: full; }
.gh-content > .kg-width-full img { width: 100%; }
.gh-content h2, .gh-content h3, .gh-content h4 {
    margin: 2.1em 0 .7em; color: var(--t1); text-wrap: balance;
    font-family: var(--mono); font-weight: 400; letter-spacing: -.035em;
}
.gh-content h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); line-height: 1.15; }
.gh-content h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.25; }
.gh-content h4 { font-size: 1.1rem; }
.gh-content strong { color: var(--t1); font-weight: 500; }
.gh-content a:not(.btn):not(.kg-btn):not(.kg-bookmark-container):not(.kg-file-card-container) {
    color: var(--t1); text-decoration: underline; text-decoration-color: var(--line-2);
    text-underline-offset: 3px; transition: text-decoration-color .3s;
}
.gh-content a:hover { text-decoration-color: var(--sand) !important; }
.gh-content ul, .gh-content ol { padding-left: 1.3em; }
.gh-content li { margin-bottom: .45em; }
.gh-content li::marker { color: var(--sand); }
.gh-content blockquote:not(.kg-blockquote-alt) {
    margin-left: 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--sand);
    font: 400 clamp(1.2rem, 2vw, 1.45rem)/1.5 var(--mono); letter-spacing: -.02em; color: var(--t1);
}
.gh-content .kg-blockquote-alt { font: 300 clamp(1.4rem, 2.6vw, 2rem)/1.35 var(--mono); letter-spacing: -.03em; color: var(--t1); text-align: center; }
/* Trennlinie als Stern */
.gh-content hr { position: relative; height: 1px; margin: 2.6em 0; border: 0; background: var(--line); overflow: visible; }
.gh-content hr::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
    background: var(--sand); box-shadow: 0 0 0 10px var(--bg);
    clip-path: polygon(50% 2%, 62.73% 37.27%, 98% 50%, 62.73% 62.73%, 50% 98%, 37.27% 62.73%, 2% 50%, 37.27% 37.27%);
}
.gh-content figure { margin-inline: 0; }
.gh-content figcaption { padding-top: 10px; font-size: .85rem; color: var(--t3); text-align: center; }
.gh-content code { padding: 2px 6px; background: var(--surface-2); font: .9em var(--mono); color: var(--t1); }
.gh-content pre { padding: 18px 20px; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); }
.gh-content pre code { padding: 0; background: none; }
.gh-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gh-content th, .gh-content td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.gh-content th { font: 400 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t1); }

/* Ghost-Karten in der Markenfarbe (die Grundstile liefert Ghost über card_assets) */
.gh-content .kg-callout-card { border-radius: 0; background: var(--surface-2) !important; color: var(--t2); }
.gh-content .kg-callout-card-accent { background: var(--sand) !important; color: var(--bg); }
.gh-content .kg-btn, .gh-content .kg-btn-accent, .gh-content .kg-header-card-button, .gh-content .kg-product-card-button {
    border-radius: 0 !important; background: var(--sand) !important; color: var(--bg) !important;
    font: 500 .76rem/1 var(--mono) !important; letter-spacing: .16em; text-transform: uppercase;
}
.gh-content .kg-toggle-card, .gh-content .kg-file-card-container, .gh-content .kg-bookmark-container, .gh-content .kg-audio-card, .gh-content .kg-product-card-container {
    border-radius: 0 !important; background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; color: var(--t2) !important;
}
.gh-content .kg-bookmark-title, .gh-content .kg-file-card-title, .gh-content .kg-toggle-heading-text, .gh-content .kg-audio-title, .gh-content .kg-product-card-title { color: var(--t1) !important; font-family: var(--mono) !important; }
.gh-content .kg-image-card img, .gh-content .kg-gallery-image img { height: auto; }
.gh-content .kg-signup-card, .gh-content .kg-cta-card { border-radius: 0; }

/* ---------- Paywall (partials/content-cta.hbs) ---------- */
.paywall { position: relative; margin-top: 1em !important; }
.paywall__fade { height: 1px; margin-bottom: 36px; background: var(--line-2); }
.paywall__box { position: relative; padding: clamp(32px, 5vw, 52px) clamp(22px, 5vw, 48px) 32px; background: var(--sand); color: var(--bg); text-align: center; }
.paywall__star { width: 30px; height: 30px; margin: 0 auto 20px; fill: var(--bg); animation: spin 14s linear infinite; }
.paywall .meta { color: color-mix(in srgb, var(--bg) 70%, var(--sand)); }
.paywall__title { margin: 10px 0 14px !important; font: 400 clamp(1.9rem, 4vw, 2.8rem)/1.05 var(--mono) !important; letter-spacing: -.045em; color: var(--bg) !important; }
.paywall__text { max-width: 46ch; margin: 0 auto 28px !important; font-size: 1.02rem; line-height: 1.6; color: color-mix(in srgb, var(--bg) 85%, var(--sand)); }
.paywall .btn--primary { background: var(--bg); color: var(--sand); white-space: normal; text-align: center; line-height: 1.4; padding-block: 14px; }
.paywall .btn--primary:hover { outline-color: var(--bg); }
.paywall__facts { list-style: none; display: grid; gap: 8px; justify-content: center; margin: 22px 0 0 !important; padding: 0 !important; font-size: .9rem; text-align: left; color: color-mix(in srgb, var(--bg) 85%, var(--sand)); }
.paywall__facts li { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; }
.paywall__facts li::marker { content: none; }
.paywall__facts svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--bg); }
.paywall__steps { max-width: 50ch; margin: 22px auto 0 !important; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--bg) 22%, var(--sand)); font-size: .85rem; line-height: 1.55; color: color-mix(in srgb, var(--bg) 75%, var(--sand)); }
.paywall__signin { margin: 14px 0 0 !important; font-size: .85rem; color: color-mix(in srgb, var(--bg) 75%, var(--sand)); }
.paywall a:not(.btn) { color: var(--bg) !important; text-decoration-color: var(--bg) !important; }

/* ---------- Ende freier Beiträge ---------- */
.post-end { margin-top: clamp(48px, 6vw, 80px); padding-top: 34px; border-top: 1px solid var(--line-2); }
.post-end__title { margin: 0 0 14px; font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--mono); letter-spacing: -.04em; color: var(--t1); }
.post-end > p:not(.kicker) { color: var(--t2); }
.post-end .btn { margin-top: 10px; white-space: normal; }
.post-end__small { margin-top: 14px; font-size: .88rem; color: var(--t3) !important; }
.post-end__small a { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.article__comments { margin-top: clamp(48px, 6vw, 80px); }

/* ---------- Mehr aus dem Regal, Listen ---------- */
.related { border-top: 1px solid var(--line); margin-top: clamp(64px, 8vw, 110px); }
.related__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.related__head .kicker { margin: 0; }
.related__grid, .listing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.listing { padding-bottom: clamp(80px, 10vw, 140px); }
.listing__head { margin-bottom: clamp(40px, 5vw, 64px); }
.listing__head .lede a { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.listing__head .btn { margin-top: 28px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); }
.listing .pcard, .related .pcard { height: 100%; }

@media (max-width: 980px) { .related__grid, .listing__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
    .related__grid, .listing__grid { grid-template-columns: 1fr; }
    .related__head { flex-direction: column; align-items: flex-start; }
    .gh-content { font-size: 1.06rem; }
}

/* ---------- Anmeldeformulare: Zustände setzt Ghost (loading / success / error) ---------- */
.signup.loading button { opacity: .5; pointer-events: none; }
.signup.success input, .signup.success button, .signup.success .signup__err { display: none; }
.signup.success .signup__msg { display: flex; animation: rise .6s var(--ease-out); }
.signup__err { display: none; }
.signup.error .signup__err { display: block; position: absolute; left: 0; top: calc(100% + 6px); margin: 0; font-size: .8rem; color: var(--t1); }
.signup { margin-bottom: 0; }
.plan__you { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; font-size: .92rem; color: var(--t2); }
.plan__you .star { width: 11px; height: 11px; margin-top: 6px; color: var(--sand); }

/* Ghost-Suche und Portal-Knopf erben sonst fremde Farben */
.gh-portal-triggerbtn-iframe { display: none !important; }

.article__image::before { left: var(--gutter); right: var(--gutter); }

/* Header-Karten (z. B. die Regale der Library): nur die Schrift anpassen, Bild und Farben bleiben wie im Editor */
.gh-content .kg-header-card { border-radius: 0; }
.gh-content .kg-header-card h2, .gh-content .kg-header-card h3 { font-family: var(--mono) !important; letter-spacing: -.04em; }

/* Kommentare: Das Modul steckt in einem eingebetteten Fenster. Weicht dessen Farbschema vom
   dunklen Seitenschema ab, malt der Browser einen weißen Hintergrund dahinter. */
.article__comments iframe { color-scheme: normal; }
/* Fünf Menüpunkte: nie umbrechen; unterhalb von 1180 px übernimmt das Menü hinter dem Burger */
.nav a, .hdr__signin { white-space: nowrap; }
@media (max-width: 1180px) {
    .nav, .hdr__signin, .hdr__search { display: none; }
    .burger { display: grid; }
    .hdr__actions { margin-left: auto; gap: 8px; }
}

/* =========================================================================
   1.0.8 — nach dem ersten Leser-Feedback
   ========================================================================= */

/* Lesbarkeit: Fließtext heller (warmes Hell aus Sand und Weiß), Metadaten heller.
   Überschriften, Linien und Buttons bleiben im reinen Sand. */
:root {
    --t2: color-mix(in srgb, var(--sand) 62%, #ffffff);
    --t3: color-mix(in srgb, var(--sand) 84%, var(--bg));
}

/* Kleine Beschriftungen: nichts mehr unter ~12 px */
.meta, .kicker { font-size: .8rem; }
.pill { font-size: .7rem; padding: 5px 9px 4px; }
.pcard__meta > span:not(.pill) { font-size: .74rem; }
.pcard__go, .link { font-size: .78rem; }
.nav a, .hdr__signin { font-size: .76rem; }
.day__fmt, .stats dt, .price__per { font-size: .76rem; }
.privacy li { font-size: .88rem; }
.ftr__base { font-size: .74rem; }

/* Fließtexte auf einheitliche, gut lesbare Größen */
.pcard__ex { font-size: 1rem; }
.dcard p, .benefit p, .step p, .shelf__desc, .price__list li, .qa__body p, .role-list li { font-size: 1.04rem; }
.gh-content { font-size: 1.16rem; }
.hero__by { font-size: .84rem; }

/* ---------- Hero: Definition und Angebot ---------- */
.hero__def {
    max-width: 52ch; margin: 0 0 12px;
    font: 400 .95rem/1.55 var(--sans); color: var(--t3);
}
.hero__def b { font: 500 .95rem/1 var(--mono); letter-spacing: .02em; color: var(--sand); }
.hero__def i { font-style: italic; }
.hero__by { margin-bottom: 26px; }
.hero__offer {
    display: flex; gap: 12px; align-items: flex-start;
    max-width: 50ch; margin: 0 0 30px; padding: 16px 18px;
    border: 1px solid var(--line-2); background: var(--surface);
    font: 400 1rem/1.55 var(--sans); color: var(--t2);
}
.hero__offer .star { width: 11px; height: 11px; flex: none; margin-top: 7px; color: var(--sand); }
.hero__offer b { font-weight: 500; color: var(--sand); }

/* ---------- Augenzwinkern ---------- */
.wink { margin: 14px 0 0; font: italic 400 .95rem/1.5 var(--sans); color: var(--t3); }
.price .wink { text-align: center; }

@media (max-width: 480px) { .hero .kicker { font-size: .7rem; letter-spacing: .14em; } }


/* 1.0.9 — Einstieg auf dem Handy läuft automatisch ab (siehe arrive() in main.js) */
.arrive.is-auto { height: auto; }
.arrive.is-auto .arrive__sticky { position: static; height: auto; padding-block: 88px 72px; }
.arrive.is-auto .arrive__media { max-height: none; }

/* 1.0.10 — Eingebettete HTML-Tools (Gap Game, Worksheets …) bringen oft eigene body-Regeln mit
   (display:flex, zentriert, Innenabstand). Die würden Header, Artikel und Footer nebeneinander
   schieben. Das Seitengerüst gehört dem Theme; die Tools gestalten nur ihren eigenen Block. */
html body {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: normal !important;
    justify-content: normal !important;
    background: #111111 !important;
}

.btn--ghost .star { width: 10px; height: 10px; color: var(--sand); }


/* =========================================================================
   1.0.12
   ========================================================================= */

/* ---------- Stimmen von Mitgliedern (auf der Sandfläche) ---------- */
.voices--live { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0 0 40px; }
.voices--live:not(:has(.voice)) { display: none; }
.voices--live .voice { margin: 0; padding: 28px 26px 24px; border: 1px solid var(--line-2); background: color-mix(in srgb, #111 4%, transparent); }
.voices--live blockquote { margin: 0 0 16px; font: italic 400 1.06rem/1.6 var(--sans); color: var(--t1); }
.voices--live figcaption { font: 400 .74rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.voices--live figcaption a { color: inherit; border-bottom: 1px solid var(--line-2); transition: border-color .3s; }
.voices--live figcaption a:hover { border-color: currentColor; }

/* ---------- Vesper Room: „11 couples …" ---------- */
.couples { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 8px 14px; border: 1px solid var(--line-2); font: 400 .8rem/1.4 var(--mono); letter-spacing: .04em; color: var(--t1); }
.couples__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); animation: rec 2.4s steps(1) infinite; }

@media (max-width: 860px) {
    /* ---------- Einstieg als Bildstrecke ---------- */
    .arrive.is-story { height: auto; }
    .arrive.is-story .arrive__sticky { position: static; height: auto; padding-block: 88px 40px; }
    .arrive.is-story .arrive__media { display: none; }
    .arrive.is-story .arrive__lines { gap: 44px; }
    .arrive.is-story .arrive__lines li { display: block; opacity: .2; transform: translateY(18px); transition: opacity .9s var(--ease), transform 1s var(--ease-out); }
    .arrive.is-story .arrive__lines li.is-on { opacity: 1; transform: none; }
    .arrive.is-story .arrive__last .star { display: inline-block; vertical-align: middle; }
    .arrive__story-ph { position: relative; margin: 0 0 18px; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; border: 1px solid var(--line); }
    .arrive__story-ph img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) contrast(1.07) sepia(.24); }
    .arrive__story-ph::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #C8AF82; mix-blend-mode: color; opacity: var(--grade); }

    /* ---------- Vesper Room: App-Demo direkt unter Überschrift und erstem Absatz ---------- */
    .vesper__copy { display: contents; }
    .vesper__copy > .kicker { order: 1; }
    .vesper__copy > .display { order: 2; }
    .vesper__copy > .lede { order: 3; }
    .vesper__copy > .couples { order: 4; justify-self: start; }
    .vesper__device { order: 5; margin: 8px 0 12px; }
    .vesper__copy > .roles { order: 6; justify-self: start; }
    .vesper__copy > .role-list { order: 7; }
    .vesper__copy > .privacy { order: 8; }
    .vesper__copy > .vesper__ctas { order: 9; }
    .vesper__copy > .wink { order: 10; }
    .vesper__grid { row-gap: 22px; }
    .vesper .display { margin-bottom: 0; }
    .vesper__device .phone { margin-top: 120px; }

    /* ---------- Karten: 2 und 3 ausklappbar ---------- */
    .dcard.is-collapsible { padding-block: 22px; }
    .dcard.is-collapsible h3 { margin: 0; cursor: pointer; justify-content: space-between; }
    .dcard.is-collapsible h3::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--sand); transition: transform .4s var(--ease-out); }
    .dcard.is-collapsible.is-open h3::after { transform: rotate(45deg); }
    .dcard.is-collapsible.is-open h3 { margin-bottom: 20px; }
    .dcard.is-collapsible:not(.is-open) > :not(h3) { display: none; }
    .dcard.is-collapsible.is-open > :not(h3) { animation: rise .5s var(--ease-out); }
    /* Die Durchstreich-Animation läuft erst beim Aufklappen */
    .dcard.is-collapsible:not(.is-open) .strike li { color: var(--t1); }
    .dcard.is-collapsible:not(.is-open) .strike li::after { transform: scaleX(0); }
}

/* Kinoband im Seitenverhältnis des Bildes (≈ 2.33 : 1): beide Seiten der Geschichte bleiben sichtbar —
   links der Beobachter, rechts das Paar. Die Bildunterschrift steht in der dunklen Mitte. */
.cine--story { height: min(80vh, 43vw); min-height: 0; }
.cine--story img { inset: -3% 0 auto; height: 106%; }
.cine--story .cine__cap { left: 22%; right: auto; max-width: min(560px, 46%); }
@media (max-width: 860px) {
    .cine--story { height: auto; }
    .cine--story img { position: relative; inset: auto; height: auto; aspect-ratio: 2.33 / 1; translate: none; }
    .cine--story .cine__cap { position: static; max-width: none; padding: 14px var(--gutter) 0; background: var(--bg); }
}

/* Hero ab 1.0.13: Figuren mittig */
.ph--hero img { object-position: 50% 50%; }


/* Vesper Room: Taxi-Bild gespiegelt, damit Marc rechts neben dem App-Handy sitzt statt dahinter */
.ph--vesper img { object-position: 60% 50%; }


/* Hero: Angebot als eine Zeile unter dem Button statt als Kasten */
.hero__micro { margin: 16px 0 0; font: 400 .74rem/1.5 var(--mono); letter-spacing: .06em; color: var(--t3); }
.hero__by { margin-bottom: 36px; }


/* Ab 1.0.21: Die alten Fanvue-Boxen („Get the Full Access …“) aus der Zeit vor dem Relaunch stecken noch
   in allen Bezahlbeiträgen. Seit es die Paywall aus partials/content-cta.hbs gibt, doppeln sie sich und
   verlinken ohne Tracking-Code. In freien Beiträgen bleiben sie sichtbar, dort sind sie gewollte Werbung. */
.article--paid .kg-cta-card:has(a[href*="fanvue.com"]) { display: none; }

/* Ab 1.0.26: Der Shelf „The Unsaid“ hat vier Karten (Coming Out Guide, /for-you/, Deep Dive, Tool).
   Auf dem Desktop 2 × 2 statt drei Spalten: oben die freien Karten, unten der Inner Circle. */
@media (min-width: 861px) {
    .shelf__posts--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Karte ohne Kürzung: der zweite Satz ist die wichtigste Information */
.pcard--full .pcard__ex { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Ab 1.0.27: die letzten Beschriftungen unter ~12 px angehoben (Bildunterschriften, Kompass-Optionen,
   Wochentage, Stimmen, Footer-Überschriften, Zeitstempel). Stil und Farben bleiben. */
.ph__cap, .opt__shelf, .benefit__day, .ftr h2, .tc { font-size: .74rem; }
.day__today, .voice__ph { font-size: .72rem; }