/* Das Protokoll – Prototyp-Designsystem (Stand 09.10.2026, Runde 3).
   Aufbau nach Seed/Grüns, Gestaltung im Elysium-Forge-System: monochromer Canvas #e5e5e5,
   Weiß und Schwarz als Flächen, Headlines in Anton (uppercase), Text in Inter, Labels in Mono.
   Akzent ist das Glut-Orange aus dem Journal (#e2561d), sparsam: Punkte, Marker, Badges, Fortschritt.
   Keine kurzen orangen Striche als Schmuck (DESIGN-REGELN.md im Repo „elysium“, 08.10.2026). */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Farbe */
  --bone: #e5e5e5;      /* Warm Canvas */
  --paper: #ffffff;     /* Paper White */
  --white: #ffffff;     /* Fläche von .band; --paper wird dort zu Mist, damit weiße Karten sichtbar bleiben */
  --sand: #f3f3f3;      /* Mist */
  --ink: #000000;       /* Carbon Black */
  --ink-2: #1a1a1a;
  --ink-3: #2f2f2f;     /* Graphite */
  --stone: #444444;     /* Slate: Sekundärtext auf hellen Flächen */
  --smoke: #979797;     /* Smoke: Sekundärtext nur auf Schwarz */
  --glut: #e2561d;      /* Glut-Orange aus dem Journal: Flächen, Punkte, Marker, Kaufknöpfe (mit schwarzer Schrift). Als Text nur auf Schwarz */
  --glut-deep: #d24c14; /* Glut für Text und Icons auf Hell: hält 3:1 auf Canvas (große Schrift, Icons), auf Weiß 4,4:1 */
  --mint: #d1ffca;      /* Mint: nur Platzhalter-Tags */
  --silver: #d4d5d8;    /* Silberprägung von Journal und Magnetbox: Sanduhr-Marken, nur auf Schwarz */
  /* Discord-Beispielansicht: Grautöne der Discord-Oberfläche (dunkles Design), nur innerhalb von .dc */
  --dc-rail: #1e1f22;
  --dc-side: #2b2d31;
  --dc-bg: #313338;
  --dc-hover: #3c3e44;
  --dc-active: #404249;
  --dc-text: #dbdee1;
  --dc-muted: #949ba4;
  --dc-head: #f2f3f5;
  --dc-blurple: #5865f2;
  --dc-react: rgb(88 101 242 / .15);
  --dc-role-p1: #9cc3e6;
  --dc-role-p2: #f0b37e;
  --dc-role-p3: #b8e6a8;
  --line: rgb(0 0 0 / .12);
  --line-dark: rgb(255 255 255 / .14);
  --scrim: rgb(0 0 0 / .55);

  /* Schrift */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Anton", "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --h1: clamp(56px, 7.6vw, 124px);
  --h2: clamp(48px, 5.2vw, 80px);
  --h3: clamp(20px, 1.6vw, 24px);
  --lead: clamp(18px, 1.45vw, 21px);
  --body: 16px;
  --small: 14px;
  --micro: 12px;

  /* Raum */
  --page: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(64px, 7.5vw, 112px); /* Runde 22 (Finn): vorher 88–160 px, wirkte eine Stufe zu luftig */
  --gap: clamp(16px, 2vw, 24px);

  /* Form */
  --r-sm: 8px;
  --r: 24px;
  --r-lg: 32px;
  --r-xl: 64px;         /* Top-Arc und große Medien */
  --r-btn: 8px;
  --r-pill: 999px;

  /* Bewegung */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: 180ms;
  --mid: 420ms;
  --slow: 900ms;

  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body { margin: 0; background: var(--bone); color: var(--ink); font: 400 var(--body)/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
/* Markieren bleibt schwarz (Wunsch 09.10.2026) */
::selection { background: var(--ink); color: var(--paper); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: min(100% - var(--gutter) * 2, var(--page)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--flush { padding-top: 0; }
/* Runde 22: zwei Sections auf derselben Fläche (Canvas) bekommen nur einen Abstand, nicht unten und oben je einen */
.section:not(.sand, .paper, .dark, .band) + .section:not(.sand, .paper, .dark, .band) { padding-top: 0; }
/* Schema (Finn 06.11.2026): Kopf, danach streng abwechselnd Weiß (.band) und Grau, Schwarz zählt als Wechsel.
   Am Ende stehen die Verweise (.panels) auf Grau, dann der Footer. Neue Abschnitte in diese Folge einordnen. */
/* Runde 25 (Finn): Auf dem Handy war schwer zu sehen, wo ein Abschnitt endet. Jeder zweite Abschnitt liegt jetzt auf einer
   großen weißen Fläche mit 64 px Radius (Handy 32 px). Weiße Karten darin werden zu Mist (--paper lokal überschrieben). */
.band { --paper: var(--sand); background: var(--white); border-radius: var(--r-xl); margin-inline: clamp(8px, 1.2vw, 16px); }
.section.band { padding-block: var(--section); }
.band + .section, .section + .band { margin-top: 0; }
.band + .section--flush { padding-top: var(--section); }
.section--after { padding-top: calc(var(--section) * .5); }
.dark { background: var(--ink); color: var(--bone); }
.sand { background: var(--sand); }
.paper { background: var(--paper); }
.arc-top { border-radius: var(--r-xl) var(--r-xl) 0 0; }
/* Finn 06.11.2026: letzte Top-Arc-Fläche vor Canvas auch unten rund, sonst gerade Kante (Klasse statt „+“, im Theme liegt jede Section in einer Hülle) */
.arc-top.arc-end { border-radius: var(--r-xl); }
/* Finn 06.11.2026: gleiche Breite wie die Bänder. Top-Arc-Flächen liefen randlos, die große App-Karte saß in der
   Inhaltsspalte und war dadurch schmaler als die Bänder daneben */
.arc-top, .about-hourglass--joined { margin-inline: clamp(8px, 1.2vw, 16px); }
.wrap:has(> .app-card--hero) { width: auto; margin-inline: clamp(8px, 1.2vw, 16px); }
/* Startseite: Der App-Abschnitt liegt im Wechsel Weiß/Grau auf Grau, deshalb ohne eigene weiße Karte */
.app-card:not(.app-card--hero) { background: none; padding: var(--section) 0 0; border-radius: 0; overflow: visible; }

/* Icons: monoline */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Sanduhr aus der Bildmarke in Silber wie die Prägung (Wunsch 14.10.2026, vorher Orange). Nur auf Schwarz,
   auf hellen Flächen wäre Silber zu blass: dort schwarz (.phase-mile). */
.sanduhr { display: inline-block; flex: none; width: .66em; height: 1em; background: var(--silver); -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat; mask: url("../img/logo-mark.svg") center / contain no-repeat; }

/* Typografie */
/* Display: Anton, uppercase, nie unter 48 px. Zeilenhöhe 1.14 statt .95: Umlautpunkte ragen in Anton
   1,05 em über die Grundlinie und stoßen sonst an die Zeile darüber (gemessen 09.10.2026; 1.08 war zu knapp, „Silberprägung.“, 06.11.2026). */
.h1, .h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.14; text-wrap: balance; }
.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); }
.h3 { font-family: var(--sans); font-weight: 500; font-size: var(--h3); line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.h1 em, .h2 em, .h3 em, .serif { font-style: normal; }
.lines > span { display: block; }
.dark .h1 em, .dark .h2 em, .accent { color: var(--smoke); }
.lead { font-size: var(--lead); line-height: 1.5; color: var(--stone); max-width: 38em; text-wrap: pretty; }
.dark .lead, .dark .muted { color: var(--smoke); }
.muted { color: var(--stone); }
.lead-strong { color: var(--ink); font-weight: 600; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 var(--small)/1 var(--sans); letter-spacing: .01em; }
.eyebrow--pill { padding: 10px 16px 10px 14px; border-radius: var(--r-pill); background: var(--paper); }
.dark .eyebrow--pill { background: var(--ink-2); }
.kicker { font: 400 var(--micro)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.dark .kicker { color: var(--smoke); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); }
.head.center { justify-items: center; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.head-row .head { margin: 0; }
.prose { display: grid; gap: 16px; max-width: 62ch; color: var(--stone); font-size: 17px; line-height: 1.6; }
.prose strong { color: var(--ink); font-weight: 600; }
/* Abstände, die vorher als Inline-Styles in den Seiten standen */
.section-gap { margin-top: var(--section); }
.statement-title { margin-top: 24px; }
.head--tight { margin-bottom: 40px; }
.app-title, .app-lead { margin-top: 20px; }
.app-more { margin-top: 28px; }
.letter-title { margin-top: 16px; font-size: clamp(48px, 3.6vw, 56px); text-wrap: balance; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px; border-radius: var(--r-btn); font: 500 16px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: background-color var(--fast) ease, color var(--fast) ease, transform var(--fast) var(--ease); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: var(--bone); }
.btn-primary:hover { background: var(--ink-3); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--sand); color: var(--ink); }
.btn-ghost { box-shadow: inset 0 0 0 1px currentColor; }
.btn-ghost:hover { background: var(--ink); color: var(--bone); box-shadow: none; }
.dark .btn-ghost:hover { background: var(--paper); color: var(--ink); }

.btn .price { opacity: .7; font-weight: 400; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link:hover { text-decoration-thickness: 2px; }
.more { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; }
.more::after { content: '→'; transition: transform var(--fast) var(--ease); }
.more:hover::after { transform: translateX(4px); }

/* Zweiter Hero-Knopf: kleine Journalseiten statt Unterstreichung */
.btn-peek { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 22px 6px 6px; border-radius: var(--r-btn); background: var(--paper); color: var(--ink); text-decoration: none; transition: background-color var(--fast) ease; }
.btn-peek:hover { background: var(--sand); }
.peek-thumb { position: relative; flex: none; width: 44px; height: 44px; border-radius: 6px; background: var(--bone); overflow: hidden; }
.peek-thumb img { position: absolute; left: 6px; top: 7px; width: 26px; border-radius: 2px; transform: rotate(-8deg); transition: transform var(--mid) var(--ease); }
.peek-thumb img + img { left: 13px; top: 9px; transform: rotate(6deg); }
.btn-peek:hover .peek-thumb img { transform: rotate(-13deg) translate(-3px, -2px); }
.btn-peek:hover .peek-thumb img + img { transform: rotate(10deg) translate(3px, -4px); }
.peek-text { display: grid; gap: 4px; line-height: 1.1; }
.peek-text strong { font-weight: 500; font-size: 15px; }
.peek-text span { font-size: 12px; color: var(--stone); }

/* Ankündigung + Header */
.announce { background: var(--ink); color: var(--bone); font-size: 13px; text-align: center; padding: 10px var(--gutter); }
.announce strong { color: var(--glut); font-weight: 600; margin-right: 10px; }
/* Runde 12: auf dem Handy eine Zeile, damit der Hero höher steht */
@media (max-width: 720px) { .announce-more { display: none; } }
/* Fester Header ohne Leiste: Marke folgt der Fläche (data-tone), Navigation als weiße Pill. */
.header { position: sticky; top: 0; z-index: 50; height: var(--header-h); pointer-events: none; background: var(--header-bg, transparent); }
/* Runde 11: --header-bg setzt app.js auf die Farbe der Fläche direkt unter dem Header. Kein Inhalt läuft mehr unter Marke
   und Pills durch, und weil die Farbe der Fläche entspricht, entsteht keine sichtbare Leiste (Website-Test, Design und Mobile). */
.header .wrap > * { pointer-events: auto; }
.brand { transition: color var(--fast) ease; }
.header[data-tone="dark"] .brand { color: var(--paper); }
.header[data-tone="dark"] .brand img { filter: invert(1); }
.header[data-tone="dark"] .btn-cta { background: var(--paper); color: var(--ink); }
.header .wrap { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 600 15px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.brand img { width: 30px; height: auto; }
.nav { display: flex; gap: 4px; padding: 6px; border-radius: 48px; background: var(--paper); }
.nav a { padding: 10px 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--fast) ease, color var(--fast) ease; }
.nav a:hover { background: var(--bone); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.header-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); color: var(--ink); transition: background-color var(--fast) ease; }
/* Nur mit echter Maus: auf dem Handy blieb der Hover nach dem Tippen hängen und der Knopf wirkte ausgewählt */
@media (hover: hover) { .icon-btn:hover { background: var(--sand); } }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Zähler sitzt auf dem Rand des Kreises, nicht im Symbol; Ziffern mittig per Grid (Runde 9) */
.cart-count { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--glut); color: var(--ink); font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cart-count.is-bumped { animation: cart-bump .32s var(--ease); }
@keyframes cart-bump { 40% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .cart-count.is-bumped { animation: none; } }
.cart-count:empty, .cart-count[data-count="0"] { display: none; }
.header .btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
.menu-btn { display: none; }

/* Hero */
.hero { padding-block: clamp(16px, 2.5vw, 32px) clamp(56px, 7vw, 96px); }
/* Runde 12: Headline eine Stufe kleiner und weniger Luft oben, damit „Journal sichern“ und „Blick ins Buch“
   auch auf Laptops (um 750 px Fensterhöhe) ohne Scrollen sichtbar sind */
.hero .h1 { font-size: clamp(56px, 6.4vw, 104px); }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-copy .h1 { margin-top: 4px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--small); color: var(--stone); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-media { position: relative; }
.hero-photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--sand); }
/* Runde 12: nie höher als das Fenster, sonst rutscht der zentrierte Text mit den Knöpfen nach unten */
@media (min-width: 1081px) { .hero-photo { max-height: max(460px, calc(100svh - var(--header-h) - 104px)); } }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.06)); transition: transform 1.6s var(--ease); }
html:not(.js-enter) .is-ready .hero-photo img, .hero-go .hero-photo img { --zoom: 1; }
.ki-tag { position: absolute; z-index: 3; top: 14px; left: 14px; padding: 6px 10px; border-radius: var(--r-pill); background: rgb(0 0 0 / .6); color: #fff; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Seitenkopf der Unterseiten */
.page-hero { padding-block: clamp(24px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.page-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.page-hero .h1 { font-size: clamp(56px, 7vw, 112px); }
.page-hero .lead { margin-top: 24px; }
.page-hero-aside { display: grid; gap: 16px; justify-items: start; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.page-hero-grid--media { align-items: center; }
.page-hero .page-hero-aside { margin-top: 32px; }
.page-hero-media { justify-self: end; width: min(100%, 520px); margin: 0; display: grid; justify-items: center; gap: 12px; }
.page-hero-media video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
/* Kein grauer Kasten: Clips tragen eine sRGB-Kennung (Ton exakt Canvas), die Ränder laufen zusätzlich weich in die Seite aus,
   falls ein Browser Video minimal anders wiedergibt (14.10.2026). Wie die Scroll-Szene: 6 % an jeder Kante, das Buch reicht nie so weit. */
.page-hero-media video { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
.jump a { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--paper); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--fast) ease; }
.jump a:hover { background: var(--sand); }

/* Kennzahlen */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { display: grid; gap: 8px; padding: 32px clamp(16px, 2vw, 32px) 8px 0; }
.stat + .stat { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.stat b { font: 400 clamp(64px, 7vw, 112px)/.9 var(--display); letter-spacing: -.01em; }
.stat b small { font: 400 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin-left: 8px; vertical-align: top; }
.stat > span { font-size: var(--small); color: var(--stone); max-width: 18em; }

/* Laufband: Trenner ist die kleine silberne Sanduhr. Dezent (Wunsch 14.10.2026): Anton an der Untergrenze von 48 px,
   schmalere Leiste, Schrift leicht zurückgenommen. */
.marquee { overflow: hidden; background: var(--ink); color: var(--bone); padding-block: 14px; }
.marquee-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 32px; padding-right: 32px; font: 400 48px/1 var(--display); text-transform: uppercase; white-space: nowrap; color: rgb(229 229 229 / .82); }
.marquee-track span::after { content: ''; width: .36em; height: .54em; background: var(--silver); -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat; mask: url("../img/logo-mark.svg") center / contain no-repeat; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Haltung: Wörter füllen sich beim Scrollen */
.statement { max-width: 1040px; margin-inline: auto; text-align: center; }
.statement .h2 { font-size: clamp(48px, 4.8vw, 76px); }
.statement [data-word] { opacity: .16; transition: opacity .25s linear; }
.statement [data-word].on { opacity: 1; }
.statement .lead { margin-top: 32px; margin-inline: auto; }

/* Ablauf: ein Tag als lebendige Bühne. Foto mit langsamem Zoom, die echte Seite schiebt sich darüber,
   die Schritte laufen von selbst weiter (Fortschrittsleiste) und lassen sich anklicken. */
.day { overflow-x: clip; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.day-stage { position: relative; aspect-ratio: 5 / 4.3; }
.day-shots { position: absolute; inset: 0 12% 0 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); }
.day-shot { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 0 0 100%); transition: opacity .6s ease, clip-path .9s var(--ease); }
.day-shot.is-on { opacity: 1; clip-path: inset(0); z-index: 1; }
.day-shot img { width: 100%; height: 100%; object-fit: cover; }
.day-shot.is-on img { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
.day-shots::after { content: ''; position: absolute; inset: 0; z-index: 2; background: rgb(0 0 0 / .18); pointer-events: none; }
.day-shots .ki-tag { left: auto; right: 14px; }
.day-clock { position: absolute; z-index: 3; left: 24px; bottom: 22px; color: #fff; display: grid; gap: 8px; }
.day-clock b { font: 400 clamp(56px, 6vw, 96px)/.9 var(--display); letter-spacing: -.01em; }
.day-clock small { display: inline-flex; align-items: center; gap: 8px; font: 400 var(--micro)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.day-snips { position: absolute; z-index: 4; right: 0; bottom: -6%; width: 47%; aspect-ratio: 845 / 585; }
.day-snip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 6px; background: #fff; opacity: 0; transform: translate(6%, 18%) rotate(7deg); transition: opacity .5s ease, transform .9s var(--ease); }
.day-snip.is-on { opacity: 1; transform: rotate(-3deg); transition-delay: .25s; }
.day-steps { display: grid; gap: 4px; }
.day-side { display: grid; gap: 16px; align-content: center; justify-items: start; }
.day-toggle { margin-left: 22px; }
.day-step { position: relative; border-radius: var(--r); padding: 20px 22px 24px; transition: background-color var(--mid) ease; }
.day-step.is-on { background: var(--paper); }
.day-step button { display: grid; grid-template-columns: 52px 1fr; gap: 4px 14px; align-items: baseline; width: 100%; text-align: left; }
.day-num { grid-row: span 2; font: 400 48px/.9 var(--display); color: var(--stone); opacity: .45; transition: opacity var(--mid) ease; }
.day-step.is-on .day-num { opacity: 1; color: var(--ink); }
.day-when { font: 400 var(--micro)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.day-step .h3 { font-size: clamp(20px, 1.7vw, 26px); }
.day-short, .day-title-m { display: none; }
.day-text { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--mid) var(--ease); }
.day-text > p { overflow: hidden; color: var(--stone); padding-left: 66px; }
.js-day .day-step:not(.is-on) .day-text { grid-template-rows: 0fr; }
.day-step.is-on .day-text > p { padding-top: 10px; }
.day-bar { position: absolute; left: 22px; right: 22px; bottom: 10px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity var(--fast) ease; }
.day-bar i { display: block; height: 100%; background: var(--glut); transform-origin: left; transform: scaleX(0); }
.js-day .day-step.is-on .day-bar { opacity: 1; }
.day-step.is-running .day-bar i { animation: daybar var(--day-ms, 6500ms) linear forwards; }
.day-step.is-paused .day-bar i { animation-play-state: paused; }
@keyframes daybar { to { transform: scaleX(1); } }
.day-foot { margin-top: 28px; padding-left: 22px; }

/* Blick ins Buch. Runde 22 (Finn): hell statt Schwarz, ohne grauen Kasten. Die Seiten liegen als Stapel direkt auf dem
   Canvas, darunter das geschlossene Journal; der Tab legt die gewählte Seite nach vorn. */
.book-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--paper); margin-bottom: 24px; }
.tabs button { min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--stone); transition: background-color var(--fast) ease, color var(--fast) ease; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tabs button:hover:not([aria-selected="true"]) { color: var(--ink); }
.fields { display: grid; gap: 4px; counter-reset: field; }
.fields li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 16px 16px 12px; border-radius: var(--r); cursor: default; transition: background-color var(--fast) ease; }
.fields li.is-active { background: var(--paper); }
.fields li::before { counter-increment: field; content: counter(field, decimal-leading-zero); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); font: 500 12px/1 var(--mono); color: var(--stone); transition: background-color var(--fast) ease, color var(--fast) ease, box-shadow var(--fast) ease; }
.fields li.is-active::before { background: var(--glut); color: var(--ink); box-shadow: none; }
.fields strong { display: block; font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.fields p { margin-top: 4px; color: var(--stone); font-size: 15px; }
.page-stage { position: relative; display: grid; place-items: center; padding: clamp(16px, 3vw, 48px) clamp(16px, 4vw, 64px) clamp(32px, 4vw, 64px); }
.page-stage > * { grid-area: 1 / 1; }
.page { position: relative; z-index: 2; width: min(100%, 460px); border-radius: 6px; overflow: hidden; background: var(--paper); transform: rotate(1.5deg); transition: transform var(--slow) var(--ease), opacity var(--mid) ease; }
.page img { width: 100%; }
.page.is-back { z-index: 1; transform: translate(-9%, 4%) rotate(-6deg); }
.page:not(.is-front) .hotspot { visibility: hidden; }
.page:not(.is-front):not(.is-back) { opacity: 0; }
.page.is-front { animation: page-front var(--slow) var(--ease); }
.page-book { position: relative; z-index: 0; width: min(78%, 360px); aspect-ratio: 148 / 210; border-radius: 4px 10px 10px 4px; background: var(--ink); transform: translate(26%, 9%) rotate(8deg); box-shadow: inset 7px 0 0 var(--ink-3); }
.page-book::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16%; aspect-ratio: 30 / 40; transform: translate(-50%, -50%); background: var(--silver); -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat; mask: url("../img/logo-mark.svg") center / contain no-repeat; }
@keyframes page-front { from { transform: translate(-9%, 4%) rotate(-6deg); } }
.hotspot { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 11px/28px var(--sans); text-align: center; box-shadow: 0 0 0 0 rgb(0 0 0 / .45); animation: pulse 2.4s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .3s); transition: transform var(--fast) var(--ease), background-color var(--fast) ease; }
.hotspot.is-active { transform: scale(1.3); background: var(--glut); color: var(--ink); animation: none; }
.hotspot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.hotspot.is-active::after { inset: -2px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(0 0 0 / .4); } 70% { box-shadow: 0 0 0 14px rgb(0 0 0 / 0); } 100% { box-shadow: 0 0 0 0 rgb(0 0 0 / 0); } }
/* Runde 25 (Finn): Seite in Lesegröße. Knopf unten rechts auf der Bühne, auf dem Handy öffnet auch Tippen auf die Seite */
.page-zoom { position: relative; z-index: 3; align-self: end; justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 4px 4px 0; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 500; }
.page-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet--zoom { width: min(820px, calc(100% - 16px)); height: calc(100dvh - 16px); }
.sheet--zoom[open] { display: flex; flex-direction: column; }
.zoom-pan { flex: 1; overflow: auto; padding: 0 16px 16px; overscroll-behavior: contain; }
.sheet .zoom-pan img { width: 100%; border-radius: 6px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 32px; }
.book [role="tabpanel"] { animation: fade var(--mid) var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* Scroll-Szene: das Journal öffnet sich */
.scene { position: relative; height: 320vh; background: var(--bone); }
.scene-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
/* Bühnenbreite --cw lässt links und rechts Platz für Text + 40 px Abstand. Die Texte hängen an der Bühnenkante,
   nicht an der Seitenspalte: das offene Buch reicht bis 4 % an die Bühnenkante heran (gemessen 14.10.2026). */
.scene { --beat-w: clamp(290px, 23vw, 360px); --gap-x: 40px; --cw: min(72vh, 660px, calc(100vw - 2 * (var(--gutter) + var(--beat-w) + var(--gap-x)))); }
.scene-canvas { width: var(--cw); aspect-ratio: 4 / 5; }
/* Weiche Bildränder: Schatten und Rand des Renders laufen in den Seitenton aus. */
.scene-canvas canvas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
.scene-canvas canvas { width: 100%; height: 100%; }
/* Zwei Texte (Wunsch 14.10.2026): vor dem Aufschlagen links oben, danach rechts unten. Gestaltet wie die
   Abschnittsköpfe der Seite (Kicker, Anton-Headline, Lead). */
.scene-beat { position: absolute; width: var(--beat-w); display: grid; gap: 18px; opacity: 0; transform: translateY(24px); transition: opacity var(--mid) ease, transform var(--mid) var(--ease); }
.scene-beat.on { opacity: 1; transform: none; }
/* „Silberprägung.“ ist mit 5,9 em das längste Wort: Schriftgröße folgt der Spaltenbreite */
.scene-beat .h2 { font-size: clamp(48px, calc(var(--beat-w) / 6.1), 60px); }
.scene-beat .lead { font-size: clamp(17px, 1.3vw, 19px); }
.beat-1 { left: max(var(--gutter), calc(50% - var(--cw) / 2 - var(--gap-x) - var(--beat-w))); top: 22%; }
.beat-3 { right: max(var(--gutter), calc(50% - var(--cw) / 2 - var(--gap-x) - var(--beat-w))); bottom: 16%; }
.scene-progress { position: absolute; bottom: 32px; left: 50%; width: 160px; height: 3px; margin-left: -80px; border-radius: 2px; background: var(--line); overflow: hidden; }
.scene-progress i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Drei Phasen: die echten Phasenseiten des Journals, darüber 90 Tage als Striche.
   Hover oder Fokus auf eine Phase hebt ihre 30 Tage hervor. Kein Scroll-Effekt. */
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: 32px; }
.tally-group { display: grid; gap: 10px; }
.tally-ticks { display: flex; justify-content: space-between; align-items: end; height: 34px; }
.tally-ticks i { width: 2px; height: 22px; border-radius: 1px; background: var(--ink); opacity: .22; transition: opacity var(--fast) ease; transition-delay: calc(var(--d, 0) * 10ms); }
.tally-ticks i:nth-child(7n) { height: 32px; }
.tally-group.is-hot .tally-ticks i { opacity: 1; }
.tally-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 400 var(--micro)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
/* Hover rahmt nur die Karte schwarz, die Seite bleibt ruhig. Kein Zoom ins Bild (schnitt Titel und Wochenliste ab)
   und kein Anheben oder Schrägstellen (Rückmeldung 14.10.2026). */
.phase-card { display: grid; grid-template-rows: auto 1fr; gap: 24px; align-content: start; padding: 16px 16px 28px; border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--fast) ease; }
.phase-page { position: relative; border-radius: var(--r); background: var(--ink); overflow: hidden; aspect-ratio: 760 / 1078; }
.phase-page img { width: 100%; height: 100%; object-fit: cover; }
.phase-card:hover, .phase-card:focus-within, .phase-card.is-hot { box-shadow: inset 0 0 0 2px var(--ink); }
.phase-body { display: flex; flex-direction: column; gap: 12px; padding-inline: 8px; }
.phase-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.phase-top .days { font: 400 var(--micro)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.phase-body p { color: var(--stone); }

.phase-mile { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.phase-body .phase-mile { color: var(--ink); }

/* App: echtes Handy-Mockup, leicht gedreht, mit Tiefe (geschichtete Kanten) */
.app-card { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(32px, 5vw, 80px); padding: clamp(32px, 5vw, 80px); border-radius: var(--r-xl); background: var(--paper); overflow: hidden; }
.app-list { display: grid; gap: 18px; margin-top: 32px; }
.app-list li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.app-list svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.app-list strong { font-weight: 500; }
.app-list p { color: var(--stone); font-size: 15px; }
.device-wrap { position: relative; display: grid; justify-items: center; gap: 28px; padding-block: 24px; }
.device-scene { position: relative; perspective: 1800px; }
.device { --rx: 6deg; --ry: -24deg; --rz: 2deg; position: relative; width: min(290px, 70vw); aspect-ratio: 300 / 620; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); transition: transform 1.2s var(--ease); }
.device-float { position: absolute; inset: 0; transform-style: preserve-3d; }
.device-layer { position: absolute; inset: 0; border-radius: 15% / 7.2%; background: #3d3d40; transform: translateZ(calc(var(--z) * -1px)); }
.device-layer:nth-child(2n) { background: #48484c; }
.device-layer.is-edge { background: #2a2a2c; }
.device-layer.is-back { background: #161617; }
/* Seitentasten wachsen aus den mittleren Lagen heraus */
.device-layer.has-keys::before, .device-layer.has-keys::after { content: ''; position: absolute; width: 4px; border-radius: 2px; background: inherit; }
.device-layer.has-keys::before { right: -2.5px; top: 25%; height: 13%; }
.device-layer.has-keys::after { left: -2.5px; top: 20%; height: 7%; }
.device-front { position: absolute; inset: 0; border-radius: 15% / 7.2%; background: #0a0a0a; padding: 3.6%; transform: translateZ(1px); box-shadow: inset 0 0 0 1.5px #3a3a3c; }
/* Statusleiste wie beim iPhone (54 von 852 pt): die App-Aufnahmen (393 × 798 pt) beginnen darunter, die Island verdeckt nichts */
.device-screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 11.5% / 5.6%; overflow: hidden; background: #1a1816; container-type: inline-size; }
.device-status { flex: 0 0 6.34%; display: flex; align-items: center; justify-content: space-between; padding: 0 7% 0 12.5%; color: #fff; font: 600 4.6cqw/1 var(--sans); letter-spacing: -.01em; }
.device-status svg { width: 21cqw; height: auto; fill: currentColor; }
.device-screen video, .device-screen img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
.device-island { position: absolute; z-index: 2; top: 2.2%; left: 50%; width: 30%; height: 3.6%; margin-left: -15%; border-radius: 20px; background: #000; }
.device-glare { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .14) 0%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .06) 100%); }
.device-shadow { position: absolute; left: 18%; right: 18%; bottom: -26px; height: 24px; border-radius: 50%; background: rgb(0 0 0 / .3); filter: blur(16px); animation: shadow 7s ease-in-out infinite; }
@keyframes shadow { 50% { transform: scale(.86); opacity: .7; } }
.loop-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 12px; border-radius: var(--r-pill); background: var(--bone); color: var(--stone); font-size: 13px; font-weight: 500; transition: background-color var(--fast) ease, color var(--fast) ease; }
.loop-toggle.day-toggle { background: var(--paper); }
.page-hero-media .loop-toggle { background: var(--paper); }
.loop-toggle:hover { background: var(--ink); color: var(--paper); }
.loop-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.loop-toggle .i-play, .loop-toggle[aria-pressed="true"] .i-pause { display: none; }
.loop-toggle[aria-pressed="true"] .i-play { display: block; }
.page-hero .app-h1 { font-size: clamp(48px, 6vw, 96px); }
.app-card > *, .panels > *, .page-hero-grid > * { min-width: 0; }
.app-trust { margin-top: 24px; }
.app-cta { margin-top: 28px; }
.device-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.app-views { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--bone); }
.app-views button { min-height: 48px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--stone); transition: background-color var(--fast) ease, color var(--fast) ease; }
.app-views button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Vergleich */
.compare-intro { max-width: 46em; margin: -24px auto clamp(40px, 5vw, 64px); text-align: center; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.compare th, .compare td { padding: 18px 14px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare th:first-child, .compare td:first-child { text-align: left; padding-left: 0; }
.compare tbody th { font-weight: 500; }
.compare tbody th small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--stone); }
.compare thead th { font-weight: 500; font-size: 14px; color: var(--stone); vertical-align: bottom; }
.compare .us { width: 19%; background: var(--ink); color: var(--bone); border-bottom-color: var(--line-dark); }
.compare thead .us { border-radius: var(--r) var(--r) 0 0; color: var(--bone); padding-top: 24px; }
.compare tbody tr:last-child .us { border-radius: 0 0 var(--r) var(--r); border-bottom: 0; }
.compare thead .us img { width: 26px; margin: 0 auto 10px; filter: invert(1); }
.compare .them { width: 19%; }
.yes, .no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; }
.yes { background: var(--ink); color: var(--paper); }
.compare .us .yes { background: var(--glut); color: var(--ink); }
.yes::before { content: ''; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); }
.no { position: relative; box-shadow: inset 0 0 0 1.5px var(--line); }
.no::before, .no::after { content: ''; position: absolute; width: 11px; height: 1.6px; border-radius: 1px; background: var(--stone); transform: rotate(45deg); }
.no::after { transform: rotate(-45deg); }
.part { font-size: 13px; color: var(--stone); }
.compare .us .part { color: var(--smoke); }
.snark { display: block; margin-top: 6px; font-size: 12px; line-height: 1.3; color: var(--stone); }
.compare-note { margin-top: 20px; font-size: 13px; color: var(--stone); }

/* Gründer-Brief */
.letter { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
/* Echtes Gründerfoto rechts: so wechseln Bild und Text gegenüber dem Produkt-Teaser darunter (Bild links) ab */
.letter-photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); }
.letter-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.letter-card { padding: clamp(32px, 4vw, 56px); border-radius: var(--r-lg); background: var(--paper); }
.letter-text { display: grid; gap: 14px; margin-top: 24px; font-size: 17px; line-height: 1.6; color: var(--stone); max-width: 60ch; text-wrap: pretty; }
.letter-text p:first-child { color: var(--ink); font-size: 19px; }
.letter-card .placeholder { margin-top: 20px; padding: 16px; border-radius: var(--r-sm); background: var(--bone); color: var(--stone); font-size: 14px; }
.sign { margin-top: 28px; display: flex; align-items: center; gap: 16px; }
.sign b { font: 600 18px/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; }
.sign span { font-size: 14px; color: var(--stone); }
.letter-proof { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--stone); }
.letter-proof .stars { margin: 0; }

/* Produkt-Teaser der Startseite */
.teaser { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.teaser-media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--sand); aspect-ratio: 3 / 2.2; }
.teaser-media img { width: 100%; height: 100%; object-fit: cover; }
.teaser-body { display: grid; gap: 24px; }
.teaser-body .h2 { font-size: clamp(56px, 5vw, 80px); }
/* 28 px statt 12 px: das Badge „Empfehlung“ (−12 px) ragt sonst optisch in die Karte darüber (Rückmeldung 14.10.2026) */
.t-opts { display: grid; gap: 28px; }
.t-opt { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 20px 22px; border-radius: var(--r); background: var(--paper); text-decoration: none; transition: box-shadow var(--fast) ease; }
.t-opt:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.t-opt strong { font-weight: 600; font-size: 17px; }
.t-opt > span:not(.badge) { grid-column: 1; color: var(--stone); font-size: 14px; }
.t-opt b { grid-row: 1 / 3; grid-column: 2; font-weight: 600; font-size: 18px; text-align: right; }
.teaser-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pack-actions { justify-content: center; margin-top: 32px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 64px; background: var(--ink); color: var(--paper); font: 400 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.badge--float { position: absolute; z-index: 2; top: -12px; right: 18px; }
.free { display: inline-block; padding: 3px 9px; border-radius: 64px; background: var(--glut); color: var(--ink); font: 500 11px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
/* Bestandteile heißen „Inklusive“ (schwarz), nur das Geschenk trägt Orange und den durchgestrichenen Wert */
.free--incl { background: var(--ink); color: var(--paper); }
/* Einzeln dazugenommene Teile im Warenkorb: heller Rahmen statt Füllung */
.free--extra { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Produktseite */
.pdp { padding-block: clamp(8px, 2vw, 24px) var(--section); }
.buy-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.buy-media { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 12px; }
.buy-photo { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--sand); }
.buy-photo > img, .buy-photo > .buy-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity var(--mid) ease, transform var(--slow) var(--ease); }
.buy-photo > .is-on { opacity: 1; transform: none; z-index: 1; }
.buy-photo > img[data-fit="contain"] { object-fit: contain; padding: 7%; background: var(--bone); }
.buy-slide { background: var(--bone); }
.buy-photo .ki-tag { z-index: 4; }
.buy-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.buy-thumbs button { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1; background: var(--bone); transition: box-shadow var(--fast) ease; }
.buy-thumbs button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.buy-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.buy-photo { touch-action: pan-y; }
.buy-card { --buy-gap: 22px; display: grid; gap: var(--buy-gap); }
.buy-card .h1 { font-size: clamp(56px, 5.4vw, 88px); }
.buy-sub { font-size: 17px; line-height: 1.45; color: var(--stone); text-wrap: pretty; }
/* Runde 25: der Claim führt, schwarz und größer; der Rest des Satzes in Slate */
.buy-sub strong { display: block; margin-bottom: 4px; font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
.buy-checks b { font-weight: 600; }
.checks { display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; }
.checks svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
/* Das Pack steht oben, sein Badge ragt nur in den freien Raum darüber: 12 px reichen zwischen den Optionen */
.options { display: grid; gap: 12px; border: 0; padding: 0; margin: 6px 0 0; }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option-box { display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 16px; align-items: start; padding: 20px 22px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--fast) ease; }
.option:hover .option-box { box-shadow: inset 0 0 0 1.5px var(--stone); }
.option input:checked + .option-box { box-shadow: inset 0 0 0 2px var(--ink); }
.option input:focus-visible + .option-box { outline: 2px solid var(--ink); outline-offset: 3px; }
.radio { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--stone); transition: box-shadow var(--fast) ease; }
.option input:checked + .option-box .radio { box-shadow: inset 0 0 0 7px var(--ink); }
.option-title { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.option-price { font-weight: 600; font-size: 17px; text-align: right; }
.option-price s { display: block; font-weight: 400; font-size: 13px; color: var(--stone); }
.option-sub { grid-column: 2 / 4; color: var(--stone); font-size: 14px; }
/* Runde 11: Wert des Packs als ehrliche Liste mit Einzelpreisen statt Streichpreis und „Du sparst 2,90 €“ */
.pack-value { grid-column: 2 / 4; display: grid; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sand); font-size: 13px; }
.pack-value > span { display: flex; justify-content: space-between; gap: 12px; }
.pack-value > span > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.option-pills { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Runde 18: Pack zeigt, was man in der Hand hat (Bilder statt Preisliste), dazu ein Satz zum Mehrwert */
.pack-show { grid-column: 2 / 4; display: grid; gap: 12px; margin-top: 10px; }
.pack-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* Runde 26 (Finn): Bild, Name und Preis/„Im Pack“ je Kachel in gemeinsamen Zeilen, damit „Im Pack“ überall auf einer Höhe steht,
   auch wenn ein Name umbricht */
.pack-items { grid-template-rows: auto auto auto; }
.pack-item { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 6px; align-content: start; }
.pack-item img { width: 100%; aspect-ratio: 1; border-radius: var(--r-sm); object-fit: cover; background: var(--bone); }
.pack-item img.is-phone { object-fit: contain; padding: 8%; }
.pack-item small { margin-top: -4px; font-size: 12px; color: var(--stone); font-variant-numeric: tabular-nums; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.pack-item, .pack-item b { min-width: 0; hyphens: auto; -webkit-hyphens: auto; }
.pack-item-free { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; align-self: stretch; }
.pack-item-free .free { padding: 1px 7px; font-size: 10px; }
.pack-item b { font-size: 12px; font-weight: 600; line-height: 1.25; }
.pack-more { font-size: 13px; color: var(--stone); }
/* Runde 24 (Finn): Pack als „Alles aus dem Journal, dazu:“. Oben eine Zeile mit dem kompletten Journal-Umfang, darunter die vier
   Dinge, die nur das Pack bringt. So sieht der Vergleich nach „Journal plus vier“ aus statt nach „vier Bilder gegen sechs“. */
.pack-base { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 14px 8px 8px; border-radius: var(--r-sm); background: var(--sand); }
.pack-base-media { display: flex; }
.pack-base-media img { width: 40px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--bone); outline: 2px solid var(--sand); }
.pack-base-media img + img { margin-left: -10px; }
.pack-base-media img.is-phone { object-fit: contain; padding: 3px; }
.pack-base-text b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.pack-base-text small { display: block; font-size: 12px; line-height: 1.35; color: var(--stone); }
.pack-base-price { font-size: 13px; color: var(--stone); font-variant-numeric: tabular-nums; }
.pack-plus { display: flex; align-items: center; gap: 8px; margin-top: 2px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.pack-plus::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.5v9M5.5 10h9' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
.pack-item-guides { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--bone); overflow: hidden; }
.pack-item .pack-item-guides img { position: absolute; width: 40%; height: auto; aspect-ratio: 600 / 852; border-radius: 3px; background: none; }
.pack-item-guides img:first-child { transform: translateX(-24%) rotate(-8deg); }
.pack-item-guides img:last-child { transform: translateX(24%) rotate(7deg); }
/* Runde 22 (Finn): Journal allein wirkte billig (zwei kleine Kacheln, viel Leerraum). Jetzt das Journal groß links,
   rechts, was ohne Aufpreis dabei ist, je mit Bild und einer Zeile. */
/* Runde 25 (Finn): Das Journal allein war auf dem Handy unklar (vier gleiche Zeilen, das Buch eine davon). Jetzt dieselbe
   Grammatik wie das Pack: oben das Buch, das man in die Hand bekommt, darunter „Inklusive“ als drei Kacheln mit Bild. */
.journal-base { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 8px 16px 8px 8px; }
.journal-base-media img { width: 64px; height: 80px; border-radius: 6px; object-fit: cover; }
.journal-base .pack-base-text b { font-size: 16px; }
/* Runde 28/29 (Finn): Kacheln beim Journal so groß wie beim Pack (Breite einer von vier Spalten), aber über die ganze
   Breite verteilt statt links mit leerer vierter Stelle */
.pack-items--3 { grid-template-columns: repeat(3, calc((100% - 24px) / 4)); justify-content: space-between; }
.pack-item-guides--4 img:nth-child(1) { transform: translateX(-36%) rotate(-12deg); }
.pack-item-guides--4 img:nth-child(2) { transform: translateX(-12%) rotate(-4deg); }
.pack-item-guides--4 img:nth-child(3) { transform: translateX(12%) rotate(4deg); }
.pack-item-guides--4 img:nth-child(4) { transform: translateX(36%) rotate(12deg); }
.pack-item-guides--4 img { width: 36%; }
.pack-item-icon { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--ink); }
.pack-item-icon svg { width: 34%; height: 34%; fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pack-deal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--sand); }
.pack-deal { justify-content: flex-start; }
.pack-deal-text { font-size: 17px; }
.pack-deal-text b { font-weight: 700; }
/* Nur die gewählte Ausführung zeigt Beschreibung und Pills, die anderen bleiben eine Zeile */
.option input:not(:checked) + .option-box .option-sub, .option input:not(:checked) + .option-box .pack-value, .option input:not(:checked) + .option-box .option-pills, .option input:not(:checked) + .option-box .pack-show { display: none; }
.option input:not(:checked) + .option-box { align-items: center; padding-block: 16px; }
.option input:not(:checked) + .option-box .radio { grid-row: auto; }
.option-title small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--stone); }
.addon-mark { width: 40%; height: 54%; background: var(--silver); -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat; mask: url("../img/logo-mark.svg") center / contain no-repeat; }
/* Einschluss auf einen Blick, direkt unter dem Produktnamen */
.incl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
/* Inhalte je Ausführung: data-show="journal|pack", die Form trägt data-variant (ohne JS: Pack) */
[data-buy-form] [data-show] { display: none; }
[data-buy-form][data-variant="journal"] [data-show~="journal"], [data-buy-form][data-variant="pack"] [data-show~="pack"],
[data-buy-form][data-variant="duo"] [data-show~="duo"], [data-buy-form][data-variant="duo-pack"] [data-show~="duo-pack"] { display: flex; }
[data-buy-form][data-variant] li[data-show] { display: none; }
[data-buy-form][data-variant="journal"] li[data-show~="journal"], [data-buy-form][data-variant="pack"] li[data-show~="pack"],
[data-buy-form][data-variant="duo"] li[data-show~="duo"], [data-buy-form][data-variant="duo-pack"] li[data-show~="duo-pack"] { display: grid; }
/* Pack: sechs Pills in zwei gleichen Reihen statt fünf plus eine */
.incl[data-show="pack"] { max-width: 420px; }
.incl[data-show="duo-pack"] { max-width: 480px; }
/* Duo-Schalter (14.10.2026, Runde 8): Karte wie die Ergänzungen, zwei Journals, die sich beim Einschalten auffächern.
   Ein Schalter statt Segmenten: wirkt wie Ausprobieren, nicht wie eine Entscheidung. Beim ersten Blick schaut das
   zweite Journal einmal hinter dem ersten hervor. */
.duo-switch { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 12px 18px 12px 12px; border-radius: var(--r); background: var(--paper); cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--fast) ease; }
.duo-switch:hover { box-shadow: inset 0 0 0 1.5px var(--stone); }
.duo-switch:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.duo-switch:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.duo-switch input { position: absolute; opacity: 0; pointer-events: none; }
.duo-covers { position: relative; display: block; height: 48px; border-radius: var(--r-sm); background: var(--bone); overflow: hidden; }
.duo-covers .duo-book { position: absolute; top: 5px; left: 50%; width: 28px; height: 38px; margin-left: -14px; border-radius: 2px 4px 4px 2px; background: var(--ink); box-shadow: inset 2px 0 0 var(--ink-3); transition: transform var(--mid) var(--ease); }
.duo-book::after { content: ''; position: absolute; inset: 9px 8px; background: var(--silver); -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat; mask: url("../img/logo-mark.svg") center / contain no-repeat; }
.duo-covers .duo-book:first-child { transform: translateX(2px) rotate(3deg); background: var(--ink-3); }
.duo-covers .duo-book:last-child { transform: translateX(-2px) rotate(-3deg); }
.duo-switch:hover .duo-covers .duo-book:first-child { transform: translateX(6px) rotate(8deg); }
.duo-switch:hover .duo-covers .duo-book:last-child { transform: translateX(-5px) rotate(-6deg); }
.duo-switch.is-nudged:not(:hover):not(:has(input:checked)) .duo-covers .duo-book { animation: duo-peek 2.2s var(--ease) both; }
.duo-switch.is-nudged:not(:hover):not(:has(input:checked)) .duo-covers .duo-book:last-child { animation-name: duo-peek-front; }
.duo-switch:has(input:checked) .duo-covers .duo-book:first-child { transform: translateX(9px) rotate(10deg); }
.duo-switch:has(input:checked) .duo-covers .duo-book:last-child { transform: translateX(-8px) rotate(-8deg); }
@keyframes duo-peek { 0%, 100% { transform: translateX(2px) rotate(3deg); } 30%, 60% { transform: translateX(9px) rotate(10deg); } }
@keyframes duo-peek-front { 0%, 100% { transform: translateX(-2px) rotate(-3deg); } 30%, 60% { transform: translateX(-8px) rotate(-8deg); } }
.duo-text { display: grid; gap: 2px; }
.duo-text strong { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.duo-text span { font-size: 13px; color: var(--stone); text-wrap: pretty; }
/* Runde 11: kein Prozent-Badge und kein laufender Glut-Ring mehr (Website-Test: zu viel Orange, Rabatt-Anmutung).
   Die Zeile steht jetzt unter den Ausführungen und ist etwas kleiner. */
.duo-switch { margin-top: -10px; }
.duo-switch .duo-text span span { font: inherit; color: inherit; }
.duo-on, .duo-switch:has(input:checked) .duo-off { display: none; }
.duo-switch:has(input:checked) .duo-on { display: block; }
.duo-toggle { position: relative; width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--bone); transition: background var(--fast) ease; }
.duo-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform var(--mid) var(--ease), background var(--fast) ease; }
.duo-switch:hover .duo-toggle { background: var(--sand); }
.duo-switch:has(input:checked) .duo-toggle { background: var(--ink); }
.duo-switch:has(input:checked) .duo-toggle::after { transform: translateX(18px); background: var(--glut); }
/* Zu zweit: kleines Etikett auf dem Produktbild, Ergänzungen „Für beide“ */
.buy-duo-tag { position: absolute; z-index: 4; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity var(--mid) ease, transform var(--mid) var(--ease); }
.buy-grid:has([data-mode="duo"]) .buy-duo-tag { opacity: 1; transform: none; }
.option[hidden] { display: none; }
.duo-note { margin-top: 24px; text-align: center; font-size: 14px; color: var(--stone); text-wrap: balance; }
.duo-note .link { color: var(--ink); font-size: 14px; }
/* Pills springen zum passenden Abschnitt der Produktseite (Wunsch 14.10.2026) */
.incl li { display: flex; }
.incl a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: var(--r-pill); background: var(--paper); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: box-shadow var(--fast) ease; }
.incl a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.incl svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* „Warum das Protokoll“ ist beim Laden offen (Rückmeldung 14.10.2026) */
.why { display: grid; gap: 14px; padding: 0 !important; list-style: none !important; }
.why li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.why svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.why b { color: var(--ink); font-weight: 600; }
.why-note { margin-top: 14px; font-size: 14px; color: var(--stone); }
.why-note .link { font-size: 14px; color: var(--ink); }
.acc--buy .answer { padding-right: 8px; }
.addon-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--bone); }
.meter { height: 6px; border-radius: 3px; background: var(--ink-3); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--glut); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--mid) var(--ease); }
/* Preis, Knopf und Vertrauen als ein kompakter Block (Rückmeldung 14.10.2026: weniger Luft, kein Preis im Knopf) */
.buy-pay { display: grid; gap: 12px; padding-top: 4px; }
.buy-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.buy-total strong { font: 400 44px/1 var(--display); }
/* Runde 11: Tagespreis-Pill raus (94 von 100 Testkäufern nannten sie manipulativ), an ihrer Stelle der Versand */
.buy-ship { max-width: 230px; font-size: 14px; line-height: 1.35; color: var(--stone); text-align: right; text-wrap: balance; }
/* Vertrauen an der Kaufentscheidung: Gründer und Kodex (Runde 11) */
/* Vertrauen an der Kaufentscheidung (Runde 11/12): zwei Porträts nebeneinander statt eines Ausschnitts, in dem beide
   am Rand standen; Zahlen als Sterne mit Anzahl, wie man es aus Shops kennt */
.buy-proof { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 6px; padding: 14px 16px 14px 14px; border-radius: var(--r); background: var(--paper); }
.proof-faces { display: flex; }
.proof-faces img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--paper); }
.proof-faces img + img { margin-left: -12px; }
.proof-text { display: grid; gap: 3px; font-size: 13px; line-height: 1.45; color: var(--stone); }
.proof-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.proof-stats { display: grid; gap: 1px; color: var(--ink); }
.proof-stats > span { display: inline-flex; align-items: center; }
.proof-text a { color: var(--ink); }
.stars { display: inline-flex; gap: 1px; vertical-align: -2px; margin-inline: 2px 4px; }
.stars svg { width: 13px; height: 13px; fill: var(--ink); stroke: none; }
/* Preis unter dem Titel, nur einspaltig (Handy, Tablet): der erste Bildschirm zeigt ein Angebot */
.buy-from { display: none; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-top: -8px; font-size: 14px; color: var(--stone); }
.buy-from > span { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.buy-from b { font-weight: 600; font-size: 18px; color: var(--ink); }
.buy-from .link { font-size: 14px; color: var(--ink); }
.buy-cta { width: 100%; min-height: 58px; font-size: 16px; letter-spacing: .01em; }
.buy-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 12px; color: var(--stone); }
.buy-trust li { display: inline-flex; align-items: center; gap: 6px; }
.buy-trust svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Wert-Stapel und Nutzen */
.stack { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stack-item { display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: var(--r-lg); background: var(--paper); }
.stack-item .ico { width: 30px; height: 30px; }
.stack-item p { color: var(--stone); font-size: 15px; }
.stack-item .free { justify-self: start; }
/* Runde 14: hell statt schwarz (Rückmeldung Finn: schwarze Blöcke stören auf der Produktseite) */
/* Runde 22 (Finn): „Weniger Vorsätze. Mehr erledigt.“ wörtlich: oben der Vorsatz, beim Erscheinen in Glut durchgestrichen,
   darunter, was das Protokoll daraus macht. Einzelne weiße Karten statt Raster mit Haarlinien. */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: benefit; }
.benefit { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.benefit-excuse { position: relative; padding: clamp(24px, 2.6vw, 32px) clamp(24px, 2.6vw, 32px) 20px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -.01em; color: var(--stone); }
.benefit-excuse::before { counter-increment: benefit; content: counter(benefit, decimal-leading-zero); display: block; margin-bottom: 14px; font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--stone); }
.benefit-excuse s { text-decoration: line-through 2px; text-decoration-color: var(--glut); text-decoration-skip-ink: none; transition: text-decoration-color var(--slow) ease .35s, color var(--slow) ease .35s; }
.js-motion .benefit:not(.in) .benefit-excuse s { text-decoration-color: transparent; color: var(--ink); }
.benefit-body { display: grid; grid-template-columns: 44px 1fr; gap: 10px 14px; align-content: start; margin: 0 8px 8px; padding: clamp(18px, 2vw, 24px); border-radius: var(--r); background: var(--bone); }
.benefit-ico { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); }
.benefit-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--paper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.benefit-body .h3 { align-self: center; font-size: clamp(18px, 1.4vw, 21px); }
.benefit-body p { color: var(--stone); font-size: 15px; }

/* Zubehör: Notizbuch und Stift */
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.extra { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.extra-media { position: relative; aspect-ratio: 16 / 10; background: var(--bone); overflow: hidden; }
.extra-media > img { width: 100%; height: 100%; object-fit: cover; }
.extra-body { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3vw, 36px); }
.extra-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.extra-top b { font-size: 20px; font-weight: 600; white-space: nowrap; }
.extra-body p { color: var(--stone); }
.extra-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.extra-actions small { font-size: 13px; color: var(--stone); }
.extra-media > img[src$=".svg"] { object-fit: contain; }
.extra-gift { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 500; }
.extra-body .extra-ph { font-size: 13px; }

/* Regeln, Woche, Forschung */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.rule { display: grid; gap: 16px; align-content: start; padding: clamp(28px, 3vw, 40px); border-radius: var(--r-lg); background: var(--paper); }
.rule b { font: 400 72px/.9 var(--display); }
.rule p { color: var(--stone); }
.quote-band { margin-top: var(--gap); padding: clamp(32px, 4vw, 56px); border-radius: var(--r-lg); background: var(--ink); color: var(--paper); font: 400 clamp(48px, 4.4vw, 64px)/1.08 var(--display); text-transform: uppercase; text-wrap: balance; }
.quote-band em { font-style: normal; color: var(--glut); }
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); counter-reset: flow; }
.flow li { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r); background: var(--paper); }
.flow li::before { counter-increment: flow; content: counter(flow, decimal-leading-zero); font: 400 var(--micro)/1 var(--mono); letter-spacing: .06em; color: var(--stone); }
.flow strong { font-weight: 600; }
.flow p { font-size: 14px; color: var(--stone); }
.research { width: 100%; border-collapse: collapse; font-size: 15px; }
.research th, .research td { padding: 16px 16px 16px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.research thead th { font: 400 var(--micro)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.research tbody th { font-weight: 600; }
.research td:last-child { color: var(--stone); font-size: 14px; }
.steps-app { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); counter-reset: app; }
.steps-app li { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--r-lg); background: var(--paper); }
.steps-app li::before { counter-increment: app; content: counter(app); font: 400 56px/.9 var(--display); }
.steps-app p { color: var(--stone); }

/* Akkordeon */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding-block: 18px; list-style: none; cursor: pointer; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121110' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform var(--mid) var(--ease), background-color var(--fast) ease; }
.acc details[open] summary::after { transform: rotate(45deg); background-color: var(--sand); }
.paper .acc summary::after { background-color: var(--bone); }
.acc .answer { padding: 0 48px 24px 0; color: var(--stone); max-width: 62ch; }
.acc .answer p + p, .acc .answer p + ul, .acc .answer ul + p { margin-top: 12px; }
.acc .answer ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }
.acc .answer .incl-detail { gap: 0; padding-left: 0; list-style: none; }
.incl-detail li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.incl-detail li:first-child { padding-top: 0; }
.incl-detail li:last-child { border-bottom: 0; padding-bottom: 0; }
.incl-detail b { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.shot-ph { display: grid; place-content: center; justify-items: center; gap: 10px; margin: 0; padding: 20px; background: var(--sand); color: var(--stone); text-align: center; }
.shot-ph svg { width: 32px; height: 32px; fill: none; stroke: var(--stone); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.shot-ph b { padding: 3px 9px; border-radius: var(--r-pill); background: var(--mint); color: var(--stone); font: 500 11px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.shot-ph span { max-width: 30ch; font-size: var(--small); line-height: 1.45; }
.pack-final { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pack-final-photo { position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--paper); }
.tag-ph { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--mint); color: var(--stone); font: 500 11px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 96px); }
.faq-aside { display: grid; gap: 20px; align-content: start; }
.faq-contact { margin-top: 12px; padding: 24px; border-radius: var(--r); background: var(--bone); display: grid; gap: 8px; }
.faq-contact a { font-weight: 500; }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group > h2 { margin-bottom: 20px; font: 400 var(--micro)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }

/* Querverweise zu den Unterseiten */
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.panel { display: grid; gap: 12px; align-content: space-between; min-height: 220px; padding: 28px; border-radius: var(--r-lg); background: var(--paper); text-decoration: none; transition: background-color var(--fast) ease, color var(--fast) ease; }
.panel:hover { background: var(--ink); color: var(--paper); }
.panel:hover p { color: var(--smoke); }
.panel h3 { font: 400 48px/1.05 var(--display); text-transform: uppercase; }
.panel p { color: var(--stone); font-size: 15px; }

/* Abschluss-Band */
.finale { position: relative; min-height: min(86vh, 760px); display: grid; align-items: center; overflow: hidden; color: #fff; }
.finale img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--s, 1.08)); }
.finale::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / .5); }
/* Runde 30 (Finn): die FAQ-Fläche stieß direkt an das Bild */
.band + .finale { margin-top: clamp(40px, 5vw, 64px); }
.finale .wrap { position: relative; z-index: 2; display: grid; gap: 28px; justify-items: start; }
.finale .h2 { font-size: clamp(64px, 8vw, 132px); max-width: 9em; }
.finale p { color: rgb(255 255 255 / .8); max-width: 30em; font-size: var(--lead); }
.finale .kicker { color: rgb(255 255 255 / .7); font-size: var(--micro); }
.ki-tag.ki-tag--right { left: auto; right: 14px; }

/* Footer */
.footer { background: var(--ink); color: var(--bone); padding-block: 96px 40px; }
/* Finn 06.11.2026: auch am Desktop eine runde schwarze Karte wie die Bänder darüber, nicht eckig über die volle Breite */
.footer { margin: clamp(40px, 5vw, 64px) clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px); border-radius: var(--r-xl); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.25fr 1fr; gap: 40px; }
@media (min-width: 1081px) { .footer-mail { white-space: nowrap; } }
.footer-grid > div { min-width: 0; }
.footer-grid li { overflow-wrap: anywhere; }
.footer-link { all: unset; cursor: pointer; }
.footer-link:hover { text-decoration: underline; }
.footer-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.footer .brand img { filter: invert(1); }
.footer-claim { margin-top: 24px; font: 400 clamp(48px, 4vw, 56px)/1.08 var(--display); text-transform: uppercase; color: var(--paper); max-width: 9em; text-wrap: balance; }
.footer h4 { font: 400 var(--micro)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); margin-bottom: 20px; }
.footer ul { display: grid; gap: 12px; font-size: 15px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-mail { color: var(--glut); }
/* Widerrufsfunktion (§ 356a BGB, Finn 06.11.2026): letzter Punkt unter „Rechtliches“, in Glut hervorgehoben wie die Mail */
.footer-withdraw { color: var(--glut); font-weight: 500; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 13px; color: var(--smoke); }

/* Klebende Kaufkapsel: schwarz auf hellen Flächen, weiß über Schwarz. Farbwechsel hart, ohne Übergang. */
.buybar { position: fixed; z-index: 40; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 10px; border-radius: 48px; background: var(--ink); color: var(--paper); transform: translate(-50%, 140%); transition: transform var(--mid) var(--ease); }
.buybar[data-tone="dark"] { background: var(--paper); color: var(--ink); }
.buybar[data-tone="dark"] .buybar-text span { color: var(--stone); }
.buybar.is-on { transform: translate(-50%, 0); }
.buybar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.buybar-text { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.2; white-space: nowrap; }
.buybar-text > * { overflow: hidden; text-overflow: ellipsis; }
a.buybar-text { color: inherit; text-decoration: none; }
.buybar-text strong { font-weight: 600; }
.buybar-text span { color: var(--smoke); font-size: 12px; }
.buybar .btn { flex: none; min-height: 48px; padding: 0 26px; font-size: 15px; background: var(--paper); color: var(--ink); transition: none; border-radius: var(--r-pill); }
.buybar[data-tone="dark"] .btn { background: var(--ink); color: var(--paper); }
.drawer-open .buybar { transform: translate(-50%, 140%); }
/* Runde 11: auf breiten Bildschirmen rechts unten, damit sie keinen Fließtext überdeckt (Website-Test: lag über „Noah & Finn“) */
@media (min-width: 721px) {
  .buybar { left: auto; right: 24px; transform: translateY(140%); }
  .buybar.is-on { transform: none; }
  .drawer-open .buybar { transform: translateY(140%); }
}

/* Warenkorb: Schublade mit Gratis-Leiste, Paket-Liste und Ergänzungen */
.drawer { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.drawer::before { content: ''; position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--mid) ease; }
.drawer-panel { position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(460px, calc(100% - 16px)); display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--r-lg); background: var(--paper); transform: translateX(110%); transition: transform var(--mid) var(--ease); overflow: hidden; }
.drawer.is-open { pointer-events: auto; }
.drawer.is-open::before { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 14px 24px; }
.drawer-head h2 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.drawer-head h2 span { color: var(--stone); font-weight: 400; }
.drawer-head .icon-btn { background: var(--bone); }
/* Runde 11: Versand statt Geschenk-Leiste. Eine helle Zeile, die mitscrollt, schmaler Balken nur unter der Schwelle. */
.drawer-ship { position: relative; display: grid; gap: 10px; margin-top: 4px; padding: 14px 18px; border-radius: var(--r); background: var(--sand); }
.drawer-ship p { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.drawer-ship p b { font-weight: 600; }
.drawer-ship .ico { width: 20px; height: 20px; }
.drawer-ship .meter { height: 4px; background: var(--paper); }
.drawer-ship .meter i { background: var(--ink); }
/* Versandkostenfrei (Finn 04.11.2026): schwarze Fläche wie die Primär-Buttons. Beim Erreichen der Schwelle wächst die volle
   Leiste per clip-path zu dieser Fläche (.ship-flood liegt deckungsgleich darüber, protokoll.js tauscht danach die Endfassung ein) */
.drawer-ship.is-free, .ship-flood { background: var(--ink); color: var(--paper); }
/* Gleiche Höhe wie mit Leiste (14 + 10 Abstand + 4 Leiste + 14 = 21 oben und unten): beim Wechsel ändert sich kein Layout */
.drawer-ship.is-free, .ship-flood { padding-block: 21px; }
.ship-flood { position: absolute; inset: 0; display: grid; align-content: start; padding-inline: 18px; border-radius: inherit; will-change: clip-path; }
/* Handy (Finn 06.11.2026): clip-path ruckelte auf dem Handy. Dort wächst eine eigene Fläche per transform (läuft auf der GPU), die Zeile ist kleiner */
.ship-flood.is-lite { background: none; will-change: auto; }
.ship-flood.is-lite > p { position: relative; }
.ship-flood-bg { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: 0 0; will-change: transform; }
@media (max-width: 720px) {
  .drawer-ship { gap: 8px; padding: 10px 14px; }
  .drawer-ship p { gap: 8px; font-size: 13px; }
  .drawer-ship .ico { width: 18px; height: 18px; }
  .drawer-ship .meter { height: 3px; }
  /* gleiche Höhe wie mit Leiste: (10 + 8 + 3 + 10) / 2 */
  .drawer-ship.is-free, .ship-flood { padding-block: 15.5px; }
  .ship-flood { padding-inline: 14px; }
  .drawer-ship .ship-more { display: none; }
}
/* Geschenk-Option (Runde 11) */
.drawer-present { display: grid; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.present-toggle { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.present-toggle input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.present-toggle b { display: block; font-weight: 600; font-size: 14px; }
.present-toggle small { display: block; font-size: 12px; line-height: 1.45; color: var(--stone); }
.drawer-after { display: grid; gap: 10px; margin-top: 20px; }
.drawer-body { overflow: auto; padding: 8px 24px 20px; overscroll-behavior: contain; }
.drawer-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; padding-block: 14px; border-bottom: 1px solid var(--line); }
.drawer-item img, .drawer-item .addon-ico { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; background: var(--bone); }
.drawer-item strong { display: block; font-weight: 600; font-size: 15px; }
.drawer-item span { display: block; font-size: 13px; color: var(--stone); }
.drawer-item .price { text-align: right; font-weight: 600; white-space: nowrap; }
.drawer-item .price s { display: block; font-weight: 400; font-size: 12px; color: var(--stone); }
.drawer-item .remove { margin-top: 10px; font-size: 12px; color: var(--stone); text-decoration: underline; }
.qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; padding: 2px; border-radius: var(--r-pill); background: var(--bone); }
.qty button { width: 30px; height: 30px; border-radius: 50%; font-size: 16px; line-height: 1; }
.qty button:hover { background: var(--paper); }
.qty output { min-width: 22px; text-align: center; font-size: 14px; font-weight: 500; }
.drawer-free { margin-top: 18px; padding: 14px 16px; border-radius: var(--r); background: var(--sand); }
.drawer-free h3, .drawer-up h3 { margin-bottom: 8px; font: 400 var(--micro)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.drawer-free li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding-block: 6px; font-size: 14px; }
.drawer-free li svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drawer-free li small { display: block; font-size: 12px; color: var(--stone); }
.free-wrap { display: flex; align-items: center; gap: 6px; }
.free-wrap s { font-size: 12px; color: var(--stone); white-space: nowrap; }
.drawer-free li.is-community { margin: 4px -8px; padding: 10px 8px; border-radius: var(--r-sm); background: var(--paper); }
.drawer-once { display: inline-block; margin-top: 8px; font: 400 11px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--stone); }
.drawer .addon-ico.addon-ico--mark { display: grid; place-items: center; background: var(--ink); }
.addon-ico--mark .addon-mark { width: 36%; height: 56%; }
.drawer-up { margin-top: 22px; }
/* Ergänzungen: eine helle Liste, alle Zeilen gleich, getrennt durch Haarlinien (Runde 9) */
.drawer-up ul { border-radius: var(--r); background: var(--sand); padding-inline: 14px; }
.up-card { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 12px; align-items: center; padding-block: 12px; }
.up-card + .up-card { border-top: 1px solid var(--line); }
/* Das Upgrade aufs Pack ist das Hauptangebot (Runde 11): eigene weiße Fläche mit Rahmen, steht immer oben */
.drawer-up ul:has(.up-card--main) { padding-top: 10px; }
.up-card--main { margin-inline: -4px; padding: 12px 10px; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.up-card--main + .up-card { border-top: 0; }
.up-card--main .up-add { background: var(--ink); color: var(--paper); }
.up-card img, .up-card .addon-ico { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; background: var(--bone); }
.up-card strong { display: block; font-weight: 600; font-size: 14px; }
.up-card span { display: block; font-size: 12px; color: var(--stone); line-height: 1.35; }
.up-card .addon-ico.addon-ico--mark { background: var(--paper); }
.drawer .addon-ico.addon-ico--icon { display: grid; place-items: center; background: var(--paper); }
.drawer .drawer-item .addon-ico.addon-ico--icon { background: var(--bone); }
.drawer-item img.is-contain, .up-card img.is-contain { object-fit: contain; padding: 4px; }
.addon-ico--icon svg { width: 40%; height: 40%; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.up-card .addon-mark { background: var(--ink); }
.up-price { font-weight: 600; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.up-add { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); color: var(--ink); transition: background-color var(--fast) ease, color var(--fast) ease; }
.up-add:hover { background: var(--ink); color: var(--paper); }
.up-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.drawer-empty { display: grid; gap: 16px; justify-items: start; color: var(--stone); padding-block: 24px; }
.drawer-foot { display: grid; gap: 12px; padding: 18px 24px 22px; border-top: 1px solid var(--line); }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 600; }
.drawer-total small { display: block; font-size: 12px; font-weight: 400; color: var(--stone); }
.drawer-note { font-size: 12px; color: var(--stone); text-align: center; }
.drawer-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 12px; color: var(--stone); }
.drawer-trust li { display: inline-flex; align-items: center; gap: 6px; }
.drawer-trust svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Originalseiten-Dialog */
.sheet { width: min(980px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); }
.sheet::backdrop { background: var(--scrim); }
.sheet-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 16px 24px; background: var(--paper); z-index: 1; }
.sheet img { width: 100%; }
.sheet-body { display: grid; gap: 20px; padding: 0 16px 16px; }
.sheet figure { display: grid; gap: 8px; }
.sheet figcaption { font-size: 13px; color: var(--stone); padding-inline: 4px; }

/* Leseprobe gegen Mail-Adresse (Runde 12): drei Seiten als Vorschau, Formular, Bestätigung */
.sheet--probe { width: min(880px, calc(100% - 24px)); }
.probe { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 4vw, 40px); align-items: center; padding: 0 clamp(16px, 3vw, 32px) clamp(20px, 3vw, 32px); }
.probe-pages { position: relative; aspect-ratio: 1 / 1.05; border-radius: var(--r); background: var(--bone); overflow: hidden; }
.probe-pages img { position: absolute; top: 15%; width: 46%; border-radius: 3px; outline: 1px solid var(--line); }
.probe-pages img:nth-child(1) { left: 5%; transform: rotate(-7deg); }
.probe-pages img:nth-child(2) { left: 27%; top: 10%; z-index: 2; }
.probe-pages img:nth-child(3) { left: 49%; z-index: 1; transform: rotate(7deg); }
.probe-ask, .probe-done { display: grid; gap: 14px; align-content: start; }
.probe-title { font: 400 clamp(48px, 4.6vw, 56px)/1.08 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.probe-lead { font-size: 16px; color: var(--stone); }
.probe-lead b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.probe-meta { font: 400 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.probe-form { display: grid; gap: 10px; }
.probe-field { display: flex; gap: 8px; }
.probe-field input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-btn); background: var(--bone); font-size: 16px; }
.probe-field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.probe-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.probe-field .btn { flex: none; }
.probe-error { font-size: 13px; font-weight: 500; }
.probe-legal { font-size: 12px; line-height: 1.45; color: var(--stone); }
.probe-legal a { color: var(--ink); }
.probe-proto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--stone); }
.probe-proto .link { font-size: 13px; color: var(--ink); }

/* Einblenden beim Scrollen (nur mit JS und ohne reduzierte Bewegung) */
.js-motion [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js-motion [data-reveal].in { opacity: 1; transform: none; }

/* Auftritt des Hero beim Laden (Klasse setzt ein Inline-Skript vor dem ersten Bild) */
.js-enter .hero [data-reveal] { animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
.js-enter .hero-media { animation: settle 1.2s var(--ease) both; }
/* Bis Schriften und Foto geladen sind, steht alles im Startzustand (Skript im Kopf von index.html setzt .hero-go) */
.js-enter:not(.hero-go) .hero [data-reveal], .js-enter:not(.hero-go) .hero-media { animation-play-state: paused; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes settle { from { opacity: 0; transform: translateY(20px) scale(.98); } }

/* Mobiles Menü */
.menu-sheet { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; background: var(--ink); color: var(--bone); }
.menu-sheet .sheet-head { background: var(--ink); }
/* Runde 26: .sheet img (100 %) machte die Bildmarke im Menü riesig */
.menu-sheet .brand img { width: 30px; filter: invert(1); }
.menu-links { display: grid; gap: 4px; padding: 24px var(--gutter); }
.menu-links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 28px; font-weight: 500; letter-spacing: -.03em; text-decoration: none; }
.menu-links a[aria-current="page"] { color: var(--glut); }
.menu-links a.menu-account { display: flex; align-items: center; gap: 12px; font-size: 20px; color: var(--smoke); }
.menu-account svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-links .btn { margin-top: 24px; }
/* Runde 26: schwarzer Knopf auf schwarzem Menü war unsichtbar, hier weiß wie .btn-light */
.menu-links .btn-primary { background: var(--paper); color: var(--ink); }
.menu-links .btn-primary .price { color: var(--stone); }
/* Runde 30 (Finn): Menü blendet weich ein, die Zeilen folgen kurz nacheinander; beim Schließen kurz aus */
.sheet:focus { outline: none; }
.menu-sheet[open] { animation: menu-in 420ms var(--ease) both; }
.menu-sheet[open]::backdrop { animation: menu-fade 420ms ease both; }
.menu-sheet[open] .sheet-head, .menu-sheet[open] .menu-links > * { animation: menu-item 560ms var(--ease) both; }
.menu-sheet[open] .menu-links > :nth-child(1) { animation-delay: 60ms; }
.menu-sheet[open] .menu-links > :nth-child(2) { animation-delay: 100ms; }
.menu-sheet[open] .menu-links > :nth-child(3) { animation-delay: 140ms; }
.menu-sheet[open] .menu-links > :nth-child(4) { animation-delay: 180ms; }
.menu-sheet[open] .menu-links > :nth-child(5) { animation-delay: 220ms; }
.menu-sheet[open] .menu-links > :nth-child(6) { animation-delay: 260ms; }
.menu-sheet[open] .menu-links > :nth-child(7) { animation-delay: 300ms; }
.menu-sheet.is-closing { animation: menu-out 240ms ease both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-16px); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-16px); } }
@keyframes menu-fade { from { opacity: 0; } }
@keyframes menu-item { from { opacity: 0; transform: translateY(16px); } }

/* Startseite, App-Abschnitt: Premium als Hinweis-Leiste unter den Standard-Funktionen */
/* Runde 12: beide Premium-Funktionen gleichrangig als helle Kacheln (vorher schwarzer Streifen mit dem Selbstbild zuerst) */
/* Runde 23 (Finn): Premium-Funktionen als runde Knöpfe in einer Zeile (Kästen gefielen nicht). Mist-Fläche, Icon im
   schwarzen Kreis, Pfeil rechts; beim Überfahren schwarz. Die Beschreibung steht als ein Satz darüber. */
.prem-duo { display: grid; gap: 12px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.prem-duo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; }
.prem-duo-head b { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.prem-duo-head b svg { width: 18px; height: 18px; fill: none; stroke: var(--glut); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prem-duo-head span { padding: 5px 10px; border-radius: var(--r-pill); background: var(--bone); font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.prem-duo-text { max-width: 36em; font-size: 15px; color: var(--stone); }
.prem-duo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.prem-tile { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 18px 6px 6px; border-radius: var(--r-pill); background: var(--sand); color: var(--ink); text-decoration: none; transition: background-color var(--fast) ease, color var(--fast) ease; }
.prem-tile:hover, .prem-tile:focus-visible { background: var(--ink); color: var(--paper); }
.prem-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); transition: background-color var(--fast) ease; }
.prem-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--paper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--fast) ease; }
.prem-tile:hover .prem-ico, .prem-tile:focus-visible .prem-ico { background: var(--paper); }
.prem-tile:hover .prem-ico svg, .prem-tile:focus-visible .prem-ico svg { stroke: var(--ink); }
.prem-tile strong { font-weight: 600; font-size: 15px; white-space: nowrap; }
.prem-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast) var(--ease); }
.prem-tile:hover .prem-arrow { transform: translateX(3px); }

/* Produktseite: das System aus Buch, App, Guides und Community */
.system { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.sys-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.sys-media { position: relative; aspect-ratio: 1 / 1.02; background: var(--bone); overflow: hidden; }
.sys-media > img { width: 100%; height: 100%; object-fit: cover; }
.sys-media--app { display: grid; place-items: center; }
.sys-media--app .device-scene { display: grid; place-items: center; width: 100%; }
.sys-media--app .device { width: min(150px, 46%); }
.sys-media--app .device-shadow { bottom: -18px; }
/* Auf der Produktseite ein Standbild wie die anderen Karten: kein Schweben, kein Neigen (Wunsch 14.10.2026) */
.sys-media--app .device-float, .sys-media--app .device-shadow { animation: none; }
.sys-media--guides { display: flex; justify-content: center; align-items: center; padding: 0 18px; }
.sys-media--guides > img { width: 31%; height: auto; border-radius: 4px; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); }
.sys-media--guides > img + img { margin-left: -9%; }
.sys-media--guides > img:nth-child(1) { --r: -7deg; --y: 6%; }
.sys-media--guides > img:nth-child(2) { --r: -2deg; --y: -2%; }
.sys-media--guides > img:nth-child(3) { --r: 3deg; --y: -2%; }
.sys-media--guides > img:nth-child(4) { --r: 8deg; --y: 6%; }
.sys-body { display: grid; gap: 10px; align-content: start; padding: 24px; }
.sys-body p { color: var(--stone); font-size: 15px; }
.sys-body .more { margin-top: 4px; font-size: 15px; }
.sys-num { font: 400 var(--micro)/1 var(--mono); letter-spacing: .08em; color: var(--stone); }
.sys-card--dark { background: var(--ink); color: var(--bone); }
.sys-card--dark p, .sys-card--dark .sys-num { color: var(--smoke); }
.sys-card--dark .more { color: var(--paper); }

/* Protokoll Premium: Selbstbild, exklusive Hörgeschichten, Preis, Standard gegen Premium */
.premium-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap); }
.premium .h2 em { display: block; }
/* Runde 14: Premium hell wie der Rest der Produktseite (Finn, 14.10.: „hell darstellen, nicht als schwarze Fläche“).
   Selbstbild-Ansicht und Player bleiben dunkel, sie zeigen die App. */
.prem-card { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--paper); }
.prem-card p { color: var(--stone); }
.prem-card--wide { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.prem-text { display: grid; gap: 16px; align-content: start; }
.prem-tag { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: var(--r-pill); background: var(--bone); color: var(--ink); font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.prem-tag svg { width: 16px; height: 16px; fill: none; stroke: var(--glut); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prem-card .h3 { font-size: clamp(24px, 2.2vw, 32px); }
/* Runde 15: echte Screens aus dem Beispielmodus der App (assets/app/README.md) statt nachgebauter Auswertung */
.prem-card--split { grid-template-columns: minmax(0, 1fr) minmax(0, 250px); gap: clamp(20px, 3vw, 40px); align-items: center; }
.prem-shot { display: grid; gap: 10px; justify-items: center; margin: 0; }
.prem-shot > img { width: 100%; max-width: 360px; height: auto; border-radius: var(--r); background: var(--ink-2); }
.prem-shot--phone > img { max-width: 230px; border-radius: 0; background: none; }
.prem-shot figcaption { max-width: 250px; font: 400 11px/1.45 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--stone); }
.prem-perks b { font-weight: 600; }
.selfie { position: relative; display: grid; gap: 18px; padding: 24px; border-radius: var(--r); background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-dark); }
.selfie-head { display: grid; gap: 4px; }
.selfie-head small, .selfie-notes small { font: 400 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }
.selfie-head b { font: 400 32px/1.08 var(--display); text-transform: uppercase; }
.selfie-bars { display: grid; gap: 12px; }
.selfie-bars li { --v: .5; display: grid; gap: 6px; font-size: 13px; color: var(--bone); }
.selfie-bars i { display: block; height: 8px; border-radius: 4px; background: var(--ink-3); overflow: hidden; }
.selfie-bars i::before { content: ''; display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--glut); transform-origin: left; transform: scaleX(var(--v)); transition: transform 1.4s var(--ease); }
.js-motion .prem-card--wide:not(.in) .selfie-bars i::before { transform: scaleX(0); }
.selfie-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.selfie-notes p { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ink-2); color: var(--paper); font-weight: 500; font-size: 15px; }
.selfie .tag-ph { position: absolute; top: 16px; right: 16px; margin: 0; }
/* Runde 12: eine echte exklusive Folge mit Cover (LEGO, aus der App) statt „Exklusive Folge 01–03“ */
.audio-feature { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; margin-top: 4px; padding: 12px; border-radius: var(--r); background: var(--ink); }
.audio-cover { width: 132px; height: 132px; border-radius: var(--r-sm); object-fit: cover; outline: 1px solid var(--line-dark); outline-offset: -1px; }
.audio-meta { display: grid; gap: 4px; }
.audio-meta small { font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }
.audio-meta b { font-weight: 600; font-size: 17px; color: var(--paper); }
.audio-meta > span { font-size: 14px; line-height: 1.45; color: var(--smoke); }
.audio-player { display: flex !important; align-items: center; gap: 12px; margin-top: 8px; }
.audio-play { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); }
.audio-play::before { content: ''; margin-left: 3px; border-left: 10px solid var(--ink); border-block: 6px solid transparent; }
.audio-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--ink-3); overflow: hidden; }
.audio-bar i { display: block; width: 34%; height: 100%; background: var(--silver); }
.audio-note { font-size: 13px; }
.prem-card--price { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.prem-card--price .kicker { color: var(--stone); }
.prem-price { font: 400 clamp(64px, 6vw, 88px)/1 var(--display); color: var(--ink); }
.prem-perks { display: grid; gap: 10px; margin-bottom: 8px; }
.prem-perks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; font-size: 15px; }
.prem-perks svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prem-card--price .btn-light { background: var(--ink); color: var(--paper); }
.prem-card--price .btn-light:hover { background: var(--ink-3); }
/* Langer Knopf auf der App-Seite („Journal mit Premium-Features sichern“) darf auf dem Handy umbrechen, sonst läuft die Karte über */
.prem-card--price .btn { white-space: normal; text-align: center; }
.premium-grid > * { min-width: 0; }
.prem-alt { justify-self: center; font-size: 14px; }
/* Runde 31: Premium als Bogen über 90 Tage, vier Stationen (neuer Selbstbild-Reiter der App, Commit 00e9365) */
.prem-arc { position: relative; margin-bottom: calc(var(--gap) + 48px); }
.prem-arc-bar { position: relative; display: block; height: 40px; background: linear-gradient(90deg, rgb(0 0 0 / .14) 0 2px, transparent 2px) 0 0 / calc(100% / 90) 100%; }
.prem-arc-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0 2px, transparent 2px) 0 0 / calc(100% / 90) 100%; clip-path: inset(0 0 0 0); transition: clip-path 2.4s var(--ease) .3s; }
.js-motion .prem-arc:not(.in) .prem-arc-bar i { clip-path: inset(0 100% 0 0); }
.prem-arc-mark { position: absolute; top: 100%; left: calc(var(--at) * 100%); display: grid; gap: 2px; padding-top: 12px; font: 400 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); white-space: nowrap; }
.prem-arc-mark::before { content: ''; position: absolute; top: -46px; left: 0; width: 2px; height: 52px; background: var(--glut); }
.prem-arc-mark b { font: 600 14px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.prem-arc-mark.is-mid { transform: translateX(-50%); justify-items: center; }
.prem-arc-mark.is-mid::before { left: calc(50% - 1px); }
.prem-arc-mark.is-end { transform: translateX(-100%); justify-items: end; }
.prem-arc-mark.is-end::before { left: auto; right: 0; }
.prem-step { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); background: var(--bone); color: var(--ink); font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.prem-step b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--white); font: 400 11px/1 var(--mono); letter-spacing: 0; }
.prem-card--leit .prem-shot > img, .prem-card:not(.prem-card--split) > .prem-shot > img { max-width: none; }
.prem-card--abgleich .prem-shot > img { max-width: 260px; }
.prem-audio { display: grid; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--ink); color: var(--white); }
.prem-audio-head { display: flex; align-items: center; gap: 12px; }
.prem-audio-head > svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--glut); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prem-audio-head span { display: grid; gap: 4px; }
.prem-audio-head small { font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }
.prem-audio-head b { font-weight: 600; font-size: 17px; }
.prem-audio-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prem-audio-parts li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-sm); background: var(--ink-2); font-weight: 600; font-size: 14px; }
.prem-audio-play { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--white); }
.prem-audio-play::before { content: ''; margin-left: 3px; border-left: 9px solid var(--ink); border-block: 5.5px solid transparent; }
.prem-card .prem-audio p { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--smoke); }
.prem-audio p svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: none; stroke: var(--smoke); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.premium .prem-card--price { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) minmax(0, 340px); align-items: center; gap: clamp(20px, 4vw, 64px); }
.premium .prem-card--price .prem-perks { grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0; }
.prem-price-col { display: grid; gap: 4px; }
/* Runde 31b: kurze Fassung der Produktseite, Preis wieder als Spalte neben den Hörgeschichten */
.premium .prem-card--price-col { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
.premium .prem-card--price-col .prem-perks { grid-template-columns: 1fr; margin-bottom: 8px; }
.prem-card--hoeren:not(.prem-card--wide) .audio-feature { margin-top: auto; }
.prem-duell { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--ink); }
.prem-duell svg { width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--glut); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prem-card .prem-duell p { font-size: 15px; line-height: 1.5; color: var(--smoke); }
.prem-duell b { font-weight: 600; color: var(--white); }
.prem-card--wide.prem-card--hoeren { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.prem-card--wide.prem-card--hoeren .audio-feature { margin: 0; }
.prem-price-actions { display: grid; gap: 12px; }
@media (max-width: 1080px) {
  .premium .prem-card--price:not(.prem-card--price-col) { grid-template-columns: auto minmax(0, 1fr); }
  .premium .prem-card--price .prem-perks { grid-template-columns: 1fr; }
  .prem-price-actions { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .prem-arc { margin-bottom: calc(var(--gap) + 44px); }
  .prem-arc-bar { height: 32px; }
  .prem-arc-mark.is-mid { display: none; }
  .premium .prem-card--price, .premium .prem-card--price:not(.prem-card--price-col) { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* :not() schlägt sonst die Handy-Regel (Preis und Vorteile gequetscht) */
  .prem-audio-parts li { flex-direction: column; gap: 8px; padding: 12px 8px; }
  .prem-card--abgleich .prem-shot > img { max-width: 320px; }
}
.plans-wrap { margin-top: var(--gap); padding: clamp(16px, 3vw, 32px) clamp(16px, 3vw, 40px); border-radius: var(--r-lg); background: var(--paper); }
.plans { width: 100%; border-collapse: collapse; font-size: 15px; }
.plans th, .plans td { padding: 14px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.plans tr:last-child th, .plans tr:last-child td { border-bottom: 0; }
.plans th:first-child { text-align: left; padding-left: 0; font-weight: 500; color: var(--ink); }
.plans tbody th small { display: block; font-weight: 400; font-size: 13px; color: var(--stone); }
.plans thead th { font: 600 16px/1.2 var(--sans); color: var(--ink); vertical-align: bottom; }
.plans thead small { display: block; margin-top: 4px; font: 400 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--stone); }
.plans .is-premium { width: 24%; }
.plans td:not(.is-premium) { width: 24%; }
.plans .is-premium .yes { background: var(--glut); color: var(--ink); }

/* Das Archiv: Guides nur als Cover mit einem Satz angeteasert */
/* Runde 22 (Finn): Guides als Regal aus weißen Karten, vier pro Reihe. Die zwei Pack-Guides stehen in der zweiten Reihe
   neben einer Karte, die erklärt, wo es sie gibt. */
.archive { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.guide { display: grid; gap: 10px; align-content: start; padding: 12px 12px 20px; border-radius: var(--r-lg); background: var(--paper); }
.guide figure { position: relative; margin-bottom: 6px; border-radius: var(--r); overflow: hidden; background: var(--ink); aspect-ratio: 600 / 852; }
.guide figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.guide:hover figure img { transform: scale(1.04); }
.guide figure .badge { position: absolute; left: 12px; bottom: 12px; }
.guide-meta, .guide h3, .guide > p:last-child { padding-inline: 8px; }
.guide-meta { display: flex; justify-content: space-between; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.guide h3 { font-weight: 600; font-size: 17px; line-height: 1.25; text-transform: uppercase; letter-spacing: -.01em; }
.guide > p:last-child { font-size: 15px; color: var(--stone); }
/* Runde 23 (Finn): Pack-Guides als eigenes Fach über die ganze Breite, schwarz gerahmt, Kopfzeile „Nur im kompletten Pack“;
   die Guide-Karten darin auf Mist, damit sie sich vom Fach abheben. */
.archive-pack { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.archive-pack-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.archive-pack .guide { background: var(--sand); border-radius: var(--r); }
.archive-cta { grid-column: span 2; display: grid; gap: 16px; align-content: center; justify-items: start; padding: clamp(16px, 3vw, 40px); }
.archive-cta-title { font: 400 clamp(48px, 4vw, 56px)/1.02 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.archive-cta-title em { font-style: normal; color: var(--stone); }
.archive-cta > p:not([class]) { max-width: 34em; color: var(--stone); }
.archive-cta .btn { margin-top: 8px; }
.archive-note { margin-top: clamp(24px, 3vw, 32px); color: var(--stone); }

/* Community auf Discord: bei jedem Journal, Einladung mit der Bestellmail.
   Oben Text und Punkte, darunter ein Discord-Fenster (Beispielansicht mit gezeichneten Profilbildern). */
.community { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
.community-text { display: grid; gap: 20px; justify-items: start; }
.community-side { display: grid; gap: 24px; justify-items: start; }
.community-list { display: grid; gap: 14px; }
.community-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--stone); }
.community-list b { color: var(--ink); font-weight: 600; }
.community-list svg { width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.dc { position: relative; display: grid; grid-template-columns: 72px 232px 1fr 232px; min-height: 520px; border-radius: var(--r-lg); overflow: hidden; background: var(--dc-bg); color: var(--dc-text); font-size: 15px; line-height: 1.375; text-align: left; }
.dc p { margin: 0; }
.dc .tag-ph { position: absolute; top: 14px; right: 14px; margin: 0; }
.dc-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; background: var(--dc-rail); }
.dc-server { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--ink); color: var(--dc-muted); font-size: 22px; }
.dc-server .addon-mark { width: 44%; height: 62%; }
.dc-server--add { background: var(--dc-bg); color: var(--dc-role-p3); border-radius: 50%; }
.dc-sep { width: 32px; height: 2px; border-radius: 1px; background: var(--dc-active); }
.dc-side { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 8px 64px; background: var(--dc-side); }
.dc-guild { display: flex; justify-content: space-between; align-items: center; height: 48px; margin: 0 -8px 8px; padding: 0 16px; border-bottom: 1px solid var(--dc-rail); color: var(--dc-head); font-weight: 600; }
.dc-guild svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dc-cat { padding: 16px 8px 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--dc-muted); }
.dc-ch { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 4px; color: var(--dc-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ch::before { content: '#'; font-size: 20px; line-height: 1; font-weight: 400; opacity: .8; }
.dc-ch.is-on { background: var(--dc-active); color: var(--dc-head); }
.dc-ch.is-unread { color: var(--dc-head); }
.dc-me { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 10px; background: var(--dc-rail); }
.dc-me b, .dc-members b { display: block; font-size: 14px; font-weight: 600; }
.dc-me b { color: var(--dc-head); }
.dc-me small, .dc-members small { display: block; font-size: 12px; color: var(--dc-muted); }
.dc-ava { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); object-fit: cover; }
.dc-ava--server .addon-mark { width: 42%; height: 60%; }
.dc-me .dc-ava, .dc-members .dc-ava { width: 32px; height: 32px; }
.dc-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.dc-top { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--dc-rail); color: var(--dc-head); white-space: nowrap; overflow: hidden; }
.dc-hash { color: var(--dc-muted); font-size: 22px; line-height: 1; }
.dc-topic { margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--dc-active); font-size: 14px; color: var(--dc-muted); overflow: hidden; text-overflow: ellipsis; }
.dc-burger { display: none; width: 18px; height: 12px; border-block: 2px solid var(--dc-muted); position: relative; margin-right: 4px; }
.dc-burger::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: var(--dc-muted); }
.dc-feed { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 16px 16px 8px; }
.dc-feed > * { flex: none; }
.dc-day { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--dc-muted); }
.dc-day::before, .dc-day::after { content: ''; flex: 1; height: 1px; background: var(--dc-active); }
.dc-msg { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.dc-msg > div { min-width: 0; }
.dc-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dc-name { font-weight: 600; color: var(--dc-head); }
.dc-role-team { color: var(--glut) !important; }
.dc-role-p1 { color: var(--dc-role-p1) !important; }
.dc-role-p2 { color: var(--dc-role-p2) !important; }
.dc-role-p3 { color: var(--dc-role-p3) !important; }
.dc-tag { align-self: center; padding: 1px 5px; border-radius: 4px; background: var(--dc-blurple); color: var(--paper); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.dc-time { font-size: 12px; color: var(--dc-muted); }
.dc-msg b:not(.dc-name) { color: var(--dc-head); font-weight: 600; }
.dc-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px !important; }
.dc-reacts span { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 8px; background: var(--dc-side); box-shadow: inset 0 0 0 1px var(--dc-side); font-size: 14px; }
.dc-reacts span.is-mine { background: var(--dc-react); box-shadow: inset 0 0 0 1px var(--dc-blurple); }
.dc-reacts i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--dc-text); }
.dc-input { display: flex; align-items: center; gap: 14px; margin: 0 16px 20px !important; padding: 0 16px; height: 44px; border-radius: 8px; background: var(--dc-hover); color: var(--dc-muted); font-size: 15px; }
.dc-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dc-muted); color: var(--dc-side); font-weight: 700; line-height: 1; }
.dc-members { padding: 8px 8px 0; background: var(--dc-side); overflow: hidden; }
.dc-members ul { display: grid; gap: 2px; }
.dc-members li { display: flex; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 4px; }

/* Mini-Discord in der System-Karte */
.sys-media--chat { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 18px 8px; background: var(--dc-bg); color: var(--dc-text); font-size: 14px; line-height: 1.35; }
.sys-media--chat .dc-top { height: 44px; margin: 0 -18px 4px; padding: 0 18px; font-size: 15px; }
.sys-media--chat .dc-msg { grid-template-columns: 32px 1fr; gap: 10px; }
.sys-media--chat .dc-ava { width: 32px; height: 32px; }
.sys-media--chat .dc-meta { gap: 6px; font-size: 14px; }
.sys-media--chat .dc-reacts span { padding: 1px 6px; font-size: 12px; }
.sys-media--chat p { margin: 0; }

/* Über uns (04.11.2026, Runde 2): Mission, kompakte Zeitleiste, Gründer, Sanduhr zum Mitmachen, Grundsätze, Brief.
   Anton nur ab 48 px (Überschriften, Jahreszahlen, Namen), alles Kleinere in Inter. Keine grauen Teilüberschriften. */
.about-hero-photo { justify-self: end; width: min(100%, 400px); margin: 0; aspect-ratio: 2 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); }
.about-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.page-hero .about-h1 { margin-top: 16px; }
.about-statement { max-width: 22ch; margin-top: 20px; font: 400 var(--h2)/1.14 var(--display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.about-mission-text { margin-top: 28px; }
.about-head { display: grid; gap: 12px; margin-bottom: clamp(32px, 4vw, 56px); }

.timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.station { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: var(--gap) clamp(24px, 5vw, 80px); padding-block: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.station-when { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 8px; margin: 0; }
.station-when span { font: 400 clamp(48px, 5vw, 80px)/1 var(--display); letter-spacing: -.01em; }
.station-when small { display: inline-flex; align-items: center; gap: 8px; font: 400 var(--micro)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.station--now .station-when small::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--glut); }
.station-body { display: grid; gap: 12px; align-content: start; justify-items: start; }
.station-body p { max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--stone); text-wrap: pretty; }
.station-photo { width: 100%; margin: 8px 0 0; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.station-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.founder { margin: 0; padding: 16px; border-radius: var(--r-lg); background: var(--paper); }
.founder-photo { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--bone); }
.founder-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05); }
.founder--finn .founder-photo img { object-position: 50% 8%; }
.founder figcaption { display: grid; gap: 10px; padding: 24px 12px 12px; }
.founder-name { font: 400 48px/1 var(--display); text-transform: uppercase; }
.founder-quote { margin: 0; font: 500 clamp(19px, 1.6vw, 22px)/1.35 var(--sans); letter-spacing: -.01em; }

.about-hourglass { border-radius: var(--r-xl); }
.hourglass { display: grid; grid-template-columns: .95fr 1.05fr; grid-template-areas: "copy years" "after years"; gap: 24px clamp(32px, 5vw, 80px); align-items: center; }
.hourglass-copy { grid-area: copy; align-self: end; display: grid; gap: 24px; justify-items: start; }
.years { grid-area: years; display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(6px, .7vw, 10px); }
.hourglass-after { grid-area: after; align-self: start; display: grid; gap: 20px; justify-items: start; }
.hourglass-mark { display: inline-flex; align-items: center; gap: 10px; }
.hourglass-mark img { width: 18px; height: auto; filter: invert(1); opacity: .7; }
.hourglass-field { display: inline-flex; align-items: center; gap: 16px; padding: 10px 22px 10px 24px; border-radius: var(--r-pill); background: var(--ink-2); color: var(--paper); font-weight: 500; }
.hourglass-field input { width: 2.6em; height: 44px; padding: 0 8px; border: 1px solid var(--ink-3); border-radius: var(--r-sm); background: var(--ink); color: var(--paper); font: 600 24px/1 var(--sans); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.hourglass-field input::-webkit-outer-spin-button, .hourglass-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hourglass-field input::placeholder { color: var(--smoke); opacity: 1; }
.hourglass-field input:focus { outline: none; border-color: var(--silver); }
.hourglass-field small { font: 400 var(--micro)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }
.hourglass-result { font: 600 clamp(20px, 1.8vw, 24px)/1.3 var(--sans); letter-spacing: -.01em; color: var(--paper); }
.hourglass-question { max-width: 36em; font-size: var(--lead); line-height: 1.5; color: var(--smoke); }
.hourglass-question strong { display: block; margin-top: 8px; font-weight: 500; color: var(--paper); }
.year { aspect-ratio: 1; border-radius: 4px; border: 1px solid rgb(255 255 255 / .24); background: transparent; transition: background-color var(--mid) var(--ease) var(--d, 0ms), border-color var(--mid) var(--ease) var(--d, 0ms); }
.year.is-past { border-color: var(--silver); background: var(--silver); }
.year.is-now { border-color: var(--glut); background: var(--glut); }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.value { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--paper); }
.value-num { font: 400 var(--micro)/1.4 var(--mono); letter-spacing: .08em; color: var(--stone); }
.value p { color: var(--stone); line-height: 1.6; }

/* Runde 3: Überschriften mit Umlauten brauchen Luft nach oben, auf Schwarz reines Weiß */
.about.dark .h2 { color: var(--paper); }
/* Der Name: zwei Zeilen wie die Zeitleiste, Wort links, Erklärung rechts. Name und Sanduhr bilden eine schwarze Fläche
   (im Theme sind es zwei Shopify-Sections, deshalb feste Klassen statt Nachbar-Selektor) */
.about-name { padding-bottom: 0; }
.name-rows { margin-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--line-dark); }
.name-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap) clamp(24px, 5vw, 80px); align-items: end; padding-block: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line-dark); }
.name-big { font: 400 clamp(72px, 10vw, 160px)/.9 var(--display); letter-spacing: -.01em; text-transform: uppercase; color: var(--paper); }
.name-copy { display: grid; gap: 10px; padding-bottom: 6px; }
.name-short { font: 400 var(--micro)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--silver); }
.name-text { max-width: 36ch; font-size: var(--lead); line-height: 1.5; color: var(--smoke); }
.about-hourglass--joined { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.closing { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.closing-head { display: grid; gap: 16px; }
.closing-body .letter-text { margin-top: 0; }
.closing-body a { color: var(--ink); white-space: nowrap; }
.about-letter { max-width: 760px; margin-inline: auto; }
.about-letter .letter-text a { color: var(--ink); }
.letter-close { margin-top: 28px; font: 600 clamp(18px, 1.6vw, 22px)/1.3 var(--sans); letter-spacing: .01em; text-transform: uppercase; }
.about-sign { display: grid; gap: 8px; justify-items: start; margin-top: 24px; }
.about-sign img { width: min(300px, 80%); height: auto; }
.about-sign span { font-size: 14px; color: var(--stone); }
.letter-ps { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--stone); }
.letter-ps b { color: var(--ink); font-weight: 600; }
.panels--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1080px) {
  .about-hero-photo { justify-self: center; width: min(100%, 400px); }
  .hourglass { grid-template-columns: 1fr; grid-template-areas: "copy" "years" "after"; }
}
@media (max-width: 900px) {
  .station { grid-template-columns: 1fr; gap: 10px; }
  .station-when { position: static; grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
  .founders, .values, .panels--2, .closing, .name-row { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 1080px) {
  .nav { display: none; }
  .header .wrap { grid-template-columns: 1fr auto; }
  .menu-btn { display: inline-grid; }
  .account-btn { display: none; }
  .header .btn-cta { display: none; }
  .hero-grid, .book-grid, .app-card, .letter, .buy-grid, .faq-grid, .teaser, .page-hero-grid, .day { grid-template-columns: 1fr; }
  /* Runde 26 (Finn): einspaltig kam der App-Screen erst nach Liste und Premium. Jetzt direkt nach Überschrift und Lead,
     danach erklären Liste und Premium, was man gerade gesehen hat. */
  .app-card { gap: 0; }
  .app-card > div:first-child { display: contents; }
  .app-card .kicker, .app-card .app-title, .app-card .app-lead { order: -2; }
  .app-card .device-wrap { order: -1; margin-top: 16px; padding-block: 8px; }
  .app-card .app-more { justify-self: start; }
.page-hero-media { justify-self: center; width: min(100%, 420px); }
  .hero-media { max-width: 640px; } /* Runde 12: Bild nach dem Text, Knöpfe zuerst */
  .day-stage { max-width: 720px; }
  .buy-media { position: static; }
  .buy-from { display: flex; }
  .letter-photo { width: 100%; max-width: 560px; }
  /* Runde 30 (Finn): einspaltig das Gründerfoto vor dem Brief, nicht erst nach dem langen Text */
  .letter-photo { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .stack, .benefits, .system { grid-template-columns: 1fr 1fr; }
  .archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-cta { grid-column: 1 / -1; }
  .prem-card--wide, .prem-card--split, .community { grid-template-columns: minmax(0, 1fr); }
  /* Hörgeschichten (Finn 06.11.2026): auf dem Handy war die breite Karte zweispaltig, das Cover stand gequetscht neben dem Text */
  .prem-card--wide.prem-card--hoeren { grid-template-columns: minmax(0, 1fr); }
  .pack-final { grid-template-columns: minmax(0, 1fr); }
  .pack-final-photo { position: static; aspect-ratio: 16 / 9; }
  .dc { grid-template-columns: 72px 220px 1fr; }
  .dc-members { display: none; }
  .flow { grid-template-columns: 1fr 1fr; }
  .phases { grid-template-columns: 1fr; max-width: 720px; }
  .phase-card { grid-template-columns: .8fr 1.2fr; grid-template-rows: auto; align-items: start; padding: 16px; }
  .phase-body { padding: 8px 8px 8px 0; }
  .panels { grid-template-columns: 1fr 1fr; }
}
/* Scroll-Szene schmal: zu wenig Platz neben dem Buch. Buch oben, Text als Karte am unteren Rand. */
@media (max-width: 1180px) {
  /* Bühne so groß, dass das Buch (bis 81 % der Bildhöhe) über der Textkarte endet. --beat-h misst app.js. */
  .scene { --beat-b: 16px; --cw: min(86vw, 600px, max(220px, calc((100svh - var(--header-h) - var(--beat-h, 280px) - var(--beat-b) - 32px) / 1.02))); }
  .scene-sticky { place-items: start center; padding-top: calc(var(--header-h) + 8px); }
  .scene-beat, .beat-1, .beat-3 { top: auto; left: var(--gutter); right: var(--gutter); bottom: var(--beat-b); width: auto; max-width: 560px; margin-inline: auto; gap: 12px; padding: 20px 22px; border-radius: var(--r); background: rgb(255 255 255 / .94); }
  .scene-beat .h2 { font-size: 48px; }
  .scene-beat .lead { font-size: 16px; }
  .scene-progress { display: none; }
}
/* Niedrige Bildschirme (z. B. iPhone SE): Karte nur mit Kicker und Headline, sonst reicht der Platz unter dem Buch nicht */
@media (max-width: 1180px) and (max-height: 720px) {
  .scene-beat .lead { display: none; }
}
@media (max-width: 720px) {
  :root { --header-h: 64px; }
  .band { border-radius: var(--r-lg); }
  .announce { font-size: 12px; }
  .header .brand { font-size: 16px; }
  .header .wrap { grid-template-columns: auto 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero-actions > * { width: 100%; }
  /* Runde 30 (Finn): Journal direkt unter der Headline statt nach Text, Knöpfen und Vertrauenszeile.
     Erster Bildschirm: Claim und Produkt, darunter Lead, Knopf und Vertrauen. */
  .hero-grid { gap: 24px; justify-items: start; }
  .hero-copy { display: contents; }
  .hero-copy > * { order: 1; }
  .hero .eyebrow, .hero .h1 { order: -1; }
  .hero-media, .hero-actions { justify-self: stretch; }
  .hero-photo { aspect-ratio: 1 / 1; }
  .hero-photo img { object-position: 50% 55%; }
  /* Eine Abfolge: Eyebrow, Headline, Foto. Lead, Knöpfe und Vertrauenszeile blenden danach als Gruppe ein, sobald der
     Lead wirklich im Bild ist (.hero-rest aus app.js). Unten liegt in Safari die Leiste über der Seite: Der Lead galt dort
     beim Laden schon als sichtbar und blendete unsichtbar dahinter ein, die Vertrauenszeile stand sofort da. */
  .js-enter .hero-media { animation-delay: 260ms; }
  .js-enter .hero .lead, .js-enter .hero .hero-actions, .js-enter .hero .trust { animation: none; opacity: 0; transform: translateY(24px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay: 0ms; }
  .hero-go.hero-rest .hero .lead, .hero-go.hero-rest .hero .hero-actions, .hero-go.hero-rest .hero .trust { opacity: 1; transform: none; }
  .hero-go.hero-rest .hero .hero-actions { transition-delay: 100ms; }
  .hero-go.hero-rest .hero .trust { transition-delay: 200ms; }
  /* Schon beim Laden im Bild (große Handys): nach dem Foto */
  .hero-go.hero-rest:not(.hero-done) .hero .lead { transition-delay: 450ms; }
  .hero-go.hero-rest:not(.hero-done) .hero .hero-actions { transition-delay: 550ms; }
  .hero-go.hero-rest:not(.hero-done) .hero .trust { transition-delay: 650ms; }
  .day-stage { aspect-ratio: 4 / 4.6; }
  .day-shots { inset: 0 0 14% 0; }
  .day-snips { width: 60%; bottom: 0; }
  .day-clock { bottom: auto; top: 18px; left: 18px; }
  /* Runde 26 (Finn): Schritt 2 und 3 lagen unter dem Bild, man musste scrollen, während das Bild oben wechselte.
     Jetzt wie Stories: drei Balken mit „Morgens / Abends / Woche“ direkt unter dem Bild, darunter nur der aktive Schritt.
     Bild, Balken und Text passen auf einen Bildschirm. */
  .day { gap: 20px; touch-action: pan-y; }
  .day-side { gap: 12px; justify-items: stretch; }
  .day-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 0; }
  .day-step { display: contents; }
  .day-bar, .js-day .day-bar { position: static; grid-row: 1; height: 3px; opacity: 1; }
  .day-step.is-done .day-bar i { transform: none; }
  .day-step button { grid-row: 2; display: flex; align-items: baseline; gap: 6px; padding: 10px 0 4px; }
  .day-step .day-num { grid-row: auto; font: 400 var(--micro)/1 var(--mono); letter-spacing: .06em; opacity: 1; color: var(--stone); }
  .day-short { display: block; font-size: 15px; font-weight: 500; color: var(--stone); transition: color var(--fast) ease; }
  .day-step.is-on .day-short, .day-step.is-on .day-num { color: var(--ink); }
  .day-step .day-when, .day-step button .h3 { display: none; }
  .day-text { grid-row: 3; grid-column: 1 / -1; }
  .js-day .day-step:not(.is-on) .day-text { display: none; }
  .day-text > p { padding-left: 0; }
  .day-text > .day-title-m { display: block; padding-top: 14px; font: 500 22px/1.15 var(--sans); letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
  .day-title-m span { display: block; margin-top: 6px; font: 400 var(--micro)/1.3 var(--mono); letter-spacing: .06em; color: var(--stone); }
  .day-step.is-on .day-text > p:not(.day-title-m) { padding-top: 8px; }
  .day-foot { padding-left: 0; }
  .day-toggle { margin-left: 0; justify-self: start; }
  .scene { height: 260vh; }
  .scene { --beat-b: 92px; } /* Textkarte über der Kaufkapsel */
  .tally { gap: 8px; }
  .tally-ticks { height: 26px; }
  .tally-ticks i { width: 1.5px; height: 16px; }
  .tally-ticks i:nth-child(7n) { height: 24px; }
  .tally-label { font-size: 10px; letter-spacing: .02em; }
  /* Runde 30 (Finn): Hover gibt es auf dem Handy nicht. Die Phasen liegen nebeneinander zum Wischen,
     die Striche darüber zeigen, welche Phase gerade im Bild ist (Tippen springt hin). */
  .phases { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .phases::-webkit-scrollbar { display: none; }
  .phase-card { flex: 0 0 84%; grid-template-columns: 1fr; scroll-snap-align: start; }
  /* Kein Auswahlrahmen beim Antippen: welche Phase dran ist, zeigen allein die Striche */
  .phase-card:hover, .phase-card:focus-within, .phase-card.is-hot { box-shadow: none; }
  .phase-card { -webkit-tap-highlight-color: transparent; scroll-snap-stop: always; -webkit-user-select: none; user-select: none; }
  /* Nur waagerecht wischen: keine senkrechte Bewegung in der Reihe (Einblenden ohne Versatz), Bilder nicht als Geisterbild ziehbar */
  .phases { overflow-y: hidden; }
  .js-motion .phases [data-reveal] { transform: none; }
  .phase-page img { -webkit-user-drag: none; pointer-events: none; }
  .phases.is-dragging { scroll-snap-type: none; cursor: grabbing; }
  .phase-page { aspect-ratio: 760 / 1078; }
  .phase-page img { object-fit: contain; }
  .tally-group { cursor: pointer; }
  /* Gründerbrief: weniger Innenabstand, sonst bleibt neben dem Band kaum Zeilenbreite */
  .letter-card { padding: 28px 20px; }
  /* Abschluss: Karte mit runden Ecken wie die übrigen Flächen, Text unten auf dem abgedunkelten Hochformat
     (aufgeschlagene Seite „Tag 01“ am Abend). Vorher Querformat, auf dem Handy nur Holz bzw. harte Kanten. */
  .finale { min-height: min(calc(100svh - 96px), 680px); align-items: end; margin: 0 8px; border-radius: var(--r-lg); background: var(--ink); }
  .finale img { object-position: 50% 30%; }
  .finale::before { background: rgb(0 0 0 / .62); }
  .finale .wrap { padding-block: var(--section); gap: 24px; } /* oben und unten wie die Bänder und der Footer */
  .finale .h2 { font-size: 64px; }
  .compare { font-size: 13px; table-layout: fixed; }
  .compare th:first-child { width: 40%; }
  .compare td, .compare th { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .h1, .h2, .panel h3 { hyphens: auto; -webkit-hyphens: auto; }
  .panel { padding: 24px 20px; }
  .app-card { padding: 28px 20px; border-radius: var(--r-lg); }
  .compare th, .compare td { padding: 12px 4px; }
  .compare thead th { font-size: 12px; }
  .compare tbody th small { display: none; }
  .compare .us, .compare .them { width: 20%; }
  .snark { font-size: 11px; }
  .buy-trust { grid-template-columns: 1fr 1fr 1fr; }
  .buy-thumbs { gap: 6px; }
  .pack-value, .pack-show, .option-pills { grid-column: 1 / -1; }
  /* Runde 11: Galerie niedriger und Kaufentscheidung vor Text und Häkchen, damit der Knopf auf Bildschirm 1–2 statt 3 steht */
  .buy-photo { aspect-ratio: 4 / 3; }
  .buy-card { --buy-gap: 18px; }
  .buy-card .h1 { order: 0; }
  .buy-from { order: 1; }
  .audio-feature { grid-template-columns: 96px 1fr; gap: 14px; }
  .audio-cover { width: 96px; height: 96px; }
  .probe { grid-template-columns: 1fr; }
  .probe-pages { aspect-ratio: 16 / 9; }
  .probe-pages img { width: 30%; top: 12%; }
  .probe-pages img:nth-child(1) { left: 12%; }
  .probe-pages img:nth-child(2) { left: 35%; top: 8%; }
  .probe-pages img:nth-child(3) { left: 58%; }
  .probe-field { flex-direction: column; }
  .buy-card .incl { order: 2; }
  .buy-card .options { order: 3; }
  .buy-card .duo-switch { order: 5; }
  .buy-card .buy-pay { order: 7; }
  /* Runde 25 (Finn): Claim und Punkte wieder direkt unter Titel und Preis, vor der Auswahl. Unten sah sie keiner. */
  .buy-card .buy-sub { order: 1; }
  .buy-card .checks { order: 1; }
  .buy-checks li { font-size: 14px; }
  .buy-card .acc { order: 10; }
  .buybar { left: 8px; right: 8px; gap: 12px; transform: translateY(140%); justify-content: space-between; }
  .buybar-text { flex: 1; }
  .buybar .btn { padding: 0 20px; }
  .buybar.is-on { transform: none; }
  .drawer-open .buybar { transform: translateY(140%); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Runde 30 (Finn): Footer als runde schwarze Karte wie die Flächen darüber: 8 px Rand, Inhalt 24 px vom Bildschirmrand,
     oben derselbe Abschnittsabstand wie in den Bändern */
  .footer { margin: clamp(40px, 5vw, 64px) 8px 8px; border-radius: var(--r-lg); padding-block: var(--section) 40px; }
  .footer .wrap { width: min(100% - (var(--gutter) * 2), var(--page)); }
  .footer-base { margin-top: 48px; }
  .stack, .benefits, .extras, .rules, .panels, .steps-app, .premium-grid { grid-template-columns: 1fr; }
  .system { grid-template-columns: 1fr; }
  /* Guides wischen statt stapeln */
  .archive { gap: 8px; }
  /* Runde 25 (Finn): Blick ins Buch war auf dem Handy kaum lesbar (ganze Seite klein unter der Liste, daneben viel Leere).
     Jetzt: Tabs, darunter groß der Ausschnitt der gewählten Seite mit den Punkten, direkt darunter die Felder.
     Kein Stapel, kein geschlossenes Buch. Ganze Seite in Lesegröße über „Vergrößern“. */
  .book-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .book-grid > div:first-child, .book [data-tabs] { display: contents; }
  .book .head { order: 1; }
  .book .tabs { order: 2; justify-self: start; margin-bottom: 16px; }
  .book .page-stage { order: 3; }
  .book .fields { order: 4; margin-top: 12px; }
  .book .page-actions { order: 5; }
  .page-stage { padding: 0; }
  .page-book, .page.is-back { display: none; }
  .page { width: 100%; padding-left: 30px; border-radius: var(--r); transform: none; cursor: zoom-in; }
  .page.is-front { animation: fade var(--mid) var(--ease); }
  /* Punkte im linken Rand neben dem Ausschnitt, damit sie die Feldnamen nicht verdecken */
  .page .hotspot { left: 18px; top: var(--my, var(--y)); width: 24px; height: 24px; margin: -12px 0 0 -12px; line-height: 24px; }
  .page-zoom { grid-area: 2 / 1; justify-self: start; margin: 12px 0 0; background: var(--paper); color: var(--ink); }
  .fields li { padding: 12px 12px 12px 8px; }
  .fields strong { font-size: 16px; }
  .fields p { font-size: 14px; }
  .sheet .zoom-pan img { width: 880px; max-width: none; }
  .guide { gap: 8px; padding: 8px 8px 16px; border-radius: var(--r); }
  .guide figure { border-radius: 16px; }
  .archive-pack { gap: 8px; padding: 8px; }
  .guide-meta, .guide h3, .guide > p:last-child { padding-inline: 4px; }
  .guide h3 { font-size: 15px; }
  .guide > p:last-child { font-size: 14px; }
  .community .h2 { hyphens: manual; -webkit-hyphens: manual; }
  .dc { grid-template-columns: 1fr; min-height: 0; font-size: 14px; }
  .dc-msg--wide { display: none; }
  .dc-rail, .dc-side { display: none; }
  .dc-burger { display: inline-block; }
  .dc-topic { display: none; }
  .dc .tag-ph { top: 12px; }
  .dc-msg { gap: 12px; }
  .sys-media { aspect-ratio: 4 / 3.4; }
  .selfie-head b { font-size: 26px; }
  .plans { font-size: 14px; }
  .plans th, .plans td { padding: 12px 4px; }
  .plans .is-premium, .plans td:not(.is-premium) { width: 22%; }
  .incl a { padding: 6px 10px 6px 8px; font-size: 12px; }
  .t-opts { gap: 24px; }
  .flow { grid-template-columns: 1fr; }
  .extra-media { aspect-ratio: 4 / 3.4; }
  .research thead { display: none; }
  .research tr { display: grid; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .research th, .research td { padding: 2px 0; border: 0; }
  .device { width: min(250px, 66vw); }
  .app-cta { width: 100%; white-space: normal; text-align: center; }
}

@media (max-width: 374px) {
  .header .brand span { display: none; }
  .selfie-notes { grid-template-columns: 1fr; }

  .compare th:first-child { width: 31%; }
  .compare .us, .compare .them { width: 23%; }
  .compare th, .compare td { overflow-wrap: normal; }
  .compare .snark, .compare .part { font-size: 11px; }
  .compare thead th { font-size: 11px; }

  .app-views button { padding: 0 10px; }

  .pack-actions .btn { white-space: normal; width: 100%; }

  .page-hero .h1 { font-size: 48px; }

  .quote-band { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee-track { animation: none; }
  .statement [data-word] { opacity: 1; }
  .scene { height: auto; }
  .scene-sticky { position: relative; height: auto; padding-block: var(--section); }
  .scene-beat { position: static; opacity: 1; transform: none; margin-top: 24px; }
  .device-float, .device-shadow { animation: none; }
}

/* Runde 32: Nutzen als vier Momente im Buch, jeweils mit echtem Ausschnitt */
.gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gain { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.gain-page { display: grid; place-items: center; aspect-ratio: 16 / 9; margin: 8px 8px 0; padding: clamp(16px, 2.4vw, 32px); border-radius: var(--r); background: var(--bone); overflow: hidden; }
.gain-page img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.gain-page--phases { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.2vw, 16px); }
.gain-page--phases img { flex: 0 1 auto; width: calc((100% - 2 * clamp(8px, 1.2vw, 16px)) / 3); max-width: 200px; height: auto; aspect-ratio: 760 / 1079; }
.gain-page--phases img:nth-child(2) { transform: translateY(-4%); }
.gain-body { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.6vw, 32px); }
.gain-when { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.gain-when b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--white); font-weight: 400; letter-spacing: 0; }
.gain-body .h3 { font-size: clamp(22px, 2vw, 28px); }
.gain-body > p:last-child { color: var(--stone); max-width: 46ch; }
.gain-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.gain-notes p { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-lg); background: var(--ink); color: var(--smoke); font-size: 15px; }
.gain-notes b { color: var(--white); font-weight: 500; }
.gain-notes svg { width: 22px; height: 22px; fill: none; stroke: var(--white); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.prem-more { margin-top: 24px; text-align: center; }
@media (max-width: 720px) {
  .gains, .gain-notes { grid-template-columns: 1fr; }
  .gain-page { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Glut-System (Finn 06.11.2026): mehr Wärme, ohne beliebig zu werden. Orange hat feste Aufgaben:
   1. Der zweite Satz jeder Überschrift (<em>) ist Glut: ein Rhythmus durch alle Seiten.
   2. Kaufknöpfe sind Glut mit schwarzer Schrift (5,6:1): Orange heißt überall „hier geht's los“.
   3. Gewähltes und Vorteile (Ausführung, Empfehlung, Ersparnis) tragen Glut-Rahmen bzw. Glut-Badge, keine getönten Flächen.
   4. Haken und Icons im Kaufbereich, Link-Unterstreichung, Markierung.
   Keine Deko-Punkte vor Labels und Badges, keine Pill mit Punkt, kein Schweben, kein Weichzeichner: wirkt nach KI-Vorlage (Finn 06.11.2026).
   Text in Glut auf Hell nur groß (Überschriften, Ziffern) und in --glut-deep, kleiner Text bleibt schwarz.
   ========================================================================== */
::selection { background: var(--glut); color: var(--ink); }
.h1 em, .h2 em, .about-statement em { font-style: normal; color: var(--glut-deep); }
.dark .h1 em, .dark .h2 em, .finale .h2 em, .about.dark .h2 em { color: var(--glut); }
.link { text-decoration-color: var(--glut); }
.btn-primary, .buybar .btn, .finale .btn-light, .prem-card--price .btn-light { background: var(--glut); color: var(--ink); }
.btn-primary:hover, .buybar .btn:hover, .finale .btn-light:hover, .prem-card--price .btn-light:hover { background: var(--ink); color: var(--paper); }
.btn-primary:disabled, .btn-primary[disabled] { background: var(--sand); color: var(--stone); }
.checks svg, .why svg, .buy-trust svg { stroke: var(--glut-deep); }
.dark .checks svg { stroke: var(--glut); }
.rule b { color: var(--glut-deep); }
.prem-tag svg, .prem-duo-head b svg { stroke: var(--glut-deep); } /* stehen auf Canvas: Glut hält dort nur 2,99:1 */
.footer-claim em { font-style: normal; color: var(--glut); }
/* Produktseite: gewählte Ausführung mit Glut-Rahmen (ohne getönte Fläche, Finn 06.11.2026) */
.option input:checked + .option-box { box-shadow: inset 0 0 0 2px var(--glut); }
.option input:checked + .option-box .radio { box-shadow: inset 0 0 0 7px var(--glut); }
.badge--float { background: var(--glut); color: var(--ink); }