/* =========================================================
   Life Archive – Website

   Dieselbe Formensprache wie die App (styles/base.css, diligent-work):
   Flächen mit zwei abgeschnittenen Ecken (oben links, unten rechts),
   Knöpfe als Rechteck mit Sockel, nichts ist rund. Die Farben sind die
   der App – kopiert, nicht verlinkt: die Website liegt auf einem eigenen
   Origin und darf von der App nichts laden.
   ========================================================= */

@font-face { font-family: "Spline Sans"; font-weight: 300 700; font-display: swap;
  src: url("../fonts/SplineSans[wght].woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-weight: 100 800; font-display: swap;
  src: url("../fonts/MartianMono[wght].woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-display: swap;
  src: url("../fonts/Newsreader[opsz,wght].woff2") format("woff2"); }

:root {
  --bg: #0f1114;
  --bg-deep: #090b0d;
  --surface: #1c1f26;
  --surface-2: #232733;
  --surface-3: #2b303c;
  --text: #e8e9ec;
  --text-muted: #a6adbb;
  --text-faint: #8f939c;    /* ~6:1 auf --bg – Kleingedrucktes steht oft über der Szene */
  --line: rgba(255, 255, 255, .1);

  --c-nutrition: #82f5cb;  --c-calendar: #98e2f5;  --c-meditation: #c7b3ff;
  --c-cue-diary: #f9b4c9;  --c-journal: #f6d68a;   --c-reader: #b08968;
  --c-finance: #66bb6a;    --c-fitness: #ffa7a7;   --c-archive: #c9ccd3;
  --c-home: #ffffff;       --c-home-stroke: #d9dbe0;

  --font: "Spline Sans", "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "Martian Mono", Consolas, monospace;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;

  --cut: 18px;
  --gutter: clamp(20px, 4vw, 56px);   /* EINE Kante für Leiste, Reise und Abschnitte */
  --step: 72vh;      /* Scrollweg je Station: kurz, die Texte rasten ein (site.js) */
  --nav-h: 64px;
  /* iPhone: Kerbe oben, Strich unten (viewport-fit=cover) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-total: calc(var(--nav-h) + var(--safe-t));
}

*, *::before, *::after { box-sizing: border-box; }
/* auf jedem Element, nicht nur an :root: sonst stünde --cut überall auf dem
   Wert der Wurzel (eine Variable in einer Variablen wird dort aufgelöst, wo
   sie steht) – wie in der App (styles/base.css) */
*, *::before, *::after {
  --cut-clip: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                      calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
/* overscroll-behavior: kein Ziehen zum Neuladen (Chrome, Firefox; Safari
   hört nicht immer darauf – dort hält site.js den Wisch an, pullsPage) */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--c-home); outline-offset: 3px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--c-home); color: var(--bg); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Knöpfe: Rechteck mit Sockel ----------------------------------- */
.btn {
  --depth: 3px;
  --btn-face: var(--surface-3);
  --btn-lift: var(--bg-deep);
  --btn-ink: var(--text);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 0; background: none; cursor: pointer;
  color: var(--btn-ink); font: 600 15px/1 var(--font); letter-spacing: .01em; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.btn::before { background: var(--btn-lift); transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out); }
.btn::after { background: var(--btn-face); }
.btn:active { transform: translate(var(--depth), var(--depth)); }
.btn:active::before { opacity: 0; }
.btn--primary { --btn-face: var(--c-home); --btn-lift: #7d8494; --btn-ink: #0f1114; }
.btn--primary:hover { --btn-face: #f1f2f5; }
.btn--tint { --btn-face: rgba(255, 255, 255, .08); --btn-lift: #2b303c; }
.btn--tint::after { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); backdrop-filter: blur(10px); }
.btn--tint:hover { --btn-face: rgba(255, 255, 255, .14); }

/* ---------- Leiste ------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-total);
  display: flex; align-items: center; gap: 28px;
  padding: var(--safe-t) max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
  transition: background var(--dur) var(--ease-out), backdrop-filter var(--dur);
}
.nav::after { /* die weiße Linie der App – vom Zeichen bis zum Rand */
  content: ""; position: absolute; left: calc(var(--gutter) + 20px); right: 0; bottom: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--c-home), rgba(255, 255, 255, .25) 40%, transparent);
  opacity: .0; transition: opacity var(--dur);
}
.nav.is-solid { background: rgba(15, 17, 20, .72); backdrop-filter: blur(14px) saturate(1.2); }
.nav.is-solid::after { opacity: .7; }
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* das Zeichen: die zwei Koi des App-Symbols, ohne Platte – hell auf dunkel */
.nav__mark { width: 42px; height: 42px; display: block; flex: none; }
.nav__mark img { width: 100%; height: 100%; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); }
.nav__name { font-weight: 600; font-size: 17px; letter-spacing: .005em; }
.nav__tag {
  font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  padding: 5px 7px; color: var(--c-journal); background: rgba(246, 214, 138, .12);
}
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a { color: var(--text-muted); text-decoration: none; font-size: 15px; transition: color var(--dur-fast);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 12px rgba(15, 17, 20, .8); }   /* oben ohne Fläche: über der Szene */
.nav__links a:hover, .nav__links a.is-here { color: var(--text); }
.nav__cta { min-height: 40px; padding: 0 16px; font-size: 14px; }
.nav__menu { display: none; }
.menu[hidden] { display: none; }
/* eine Fahrt nach dem Finger: ohne Überlauf rollt kein Schwung weiter (site.js, hold) */
html.is-held { overflow: hidden; }
html.menu-open { overflow: hidden; }
html.menu-open .nav { background: rgba(15, 17, 20, .9); }
html.menu-open .nav::after { opacity: .7; }

@media (max-width: 860px) {
  .nav { gap: 12px; }
  .nav__links, .nav__cta { display: none; }
  .nav__menu {
    /* das ⋯ der App (styles/shell.css, .sh-fab): Sechseck mit Spitze oben,
       ein Rand (#363c48) um die Fläche (#1b1f28), drei Punkte untereinander
       in Weiß – offen drehen sie sich quer */
    --hexp: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    position: relative; display: grid; place-items: center; margin-left: auto; width: 46px; height: 53px;
    padding: 0; border: 0; background: #363c48; cursor: pointer; clip-path: var(--hexp);
    transition: transform var(--dur) cubic-bezier(.34, 1.56, .64, 1);
  }
  .nav__menu-face { position: absolute; inset: 2.3px; clip-path: var(--hexp); background: #1b1f28;
    transition: background-color var(--dur) var(--ease-out); }
  .nav__menu:hover .nav__menu-face { background: #262b35; }
  .nav__menu:active { transform: scale(.92); transition-duration: var(--dur-fast); }
  .nav__menu-dots { position: relative; z-index: 1; display: grid; gap: 4px;
    transition: transform var(--dur) cubic-bezier(.34, 1.56, .64, 1); }
  .nav__menu-dots i { display: block; width: 5px; height: 5px; background: var(--c-home); }
  .nav__menu[aria-expanded="true"] .nav__menu-dots { transform: rotate(90deg); }
  /* das Blatt: wie das ⋯-Blatt der App – Glas mit zwei Schnitten, unter
     der Leiste; dahinter abgedunkelt, ein Tipp daneben schließt */
  .menu {
    position: fixed; inset: 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--nav-total) + 8px) 10px calc(16px + var(--safe-b));
    background: rgba(9, 11, 13, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    animation: menu-dim 240ms var(--ease-out);
  }
  .menu__sheet { --cut: 20px; position: relative; isolation: isolate; clip-path: var(--cut-clip); padding: 6px 0 18px;
    animation: menu-in 380ms var(--ease-out); }
  .menu__sheet::before, .menu__sheet::after { content: ""; position: absolute; z-index: -1; clip-path: var(--cut-clip); }
  .menu__sheet::before { inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .06)); }
  .menu__sheet::after { inset: 1px; background: radial-gradient(90% 50% at 0% 0%, rgba(255, 255, 255, .07), transparent 70%), rgba(20, 23, 29, .94);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
  .menu__list { list-style: none; margin: 0; padding: 0; }
  .menu__list li, .menu__foot { animation: menu-row 420ms var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 32ms); }
  .menu__list a {
    position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 6px; align-items: baseline;
    padding: 12px 18px 12px 16px; text-decoration: none; transition: background var(--dur-fast);
  }
  .menu__list li + li a::before { content: ""; position: absolute; left: 56px; right: 18px; top: 0; height: 1px; background: var(--line); }
  .menu__list a:active { background: rgba(255, 255, 255, .06); }
  .menu__no { grid-row: span 2; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-faint); }
  .menu__name { font: 400 25px/1.15 var(--font-serif); letter-spacing: -.01em; }
  .menu__list small { margin-top: 3px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .05em; color: var(--text-faint); }
  /* wo man steht: die Nummer wird zum weißen Sechseck, die Zeile hebt sich */
  .menu__list a.is-here { background: rgba(255, 255, 255, .06); }
  .menu__list a.is-here .menu__no { font-size: 0; }
  .menu__list a.is-here .menu__no::after { content: ""; display: inline-block; width: 10px; height: 11px; background: var(--c-home);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  .menu__foot { display: grid; gap: 4px; padding: 14px 16px 0; }
  .menu__cta { width: 100%; }
  .menu__foot .facts { justify-content: center; }
}
@keyframes menu-dim { from { opacity: 0; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes menu-row { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu__sheet, .menu__list li, .menu__foot { animation: none; }
}

/* ---------- Bühne -------------------------------------------------------- */
.scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block;
  transition: opacity 600ms var(--ease-out); }
.scene-veil { /* Vignette + Korn: wie bei Dala, aber ohne Nachbearbeitung im GL */
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 55% 45%, transparent 55%, rgba(9, 11, 13, .55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
html.no-webgl .scene { display: none; }
html.no-webgl body { background: radial-gradient(ellipse at 70% 30%, #232733, var(--bg) 60%); }

/* Schleier für Sprünge quer über die Reise */
.cut { position: fixed; inset: 0; z-index: 45; pointer-events: none; background: var(--bg); opacity: 0;
  transition: opacity 190ms var(--ease-out); }
html.is-cut .cut { opacity: 1; }

/* Kapitel der Reise: unten in der Mitte (Telefon: oben unter der Leiste) */
.chapters {
  position: fixed; z-index: 44; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 12px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  isolation: isolate; --cut: 12px; clip-path: var(--cut-clip);
}
.chapters::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(18, 21, 26, .9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.chapters.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.chapters__list { list-style: none; margin: 0; padding: 0; display: flex; }
.chapters__list button {
  display: grid; place-items: center; width: 26px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
}
/* das Zeichen eines Kapitels: ein kleines Sechseck, das aktuelle gefüllt */
.chapters__list i { width: 10px; height: 11px; background: rgba(255, 255, 255, .42);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background var(--dur), transform var(--dur) var(--ease-out); }
.chapters__list button:hover i { background: rgba(255, 255, 255, .6); }
.chapters__list button[aria-current] i { background: var(--c-home); transform: scale(1.35); }
.chapters__skip { min-height: 36px; padding: 0 14px; font-size: 13.5px; gap: 8px; }
.chapters__skip i { width: 9px; height: 11px; background: currentColor;
  clip-path: polygon(50% 100%, 0 45%, 32% 45%, 32% 0, 68% 0, 68% 45%, 100% 45%); }
@media (max-width: 860px), (max-aspect-ratio: 6/5) {
  .chapters { top: calc(var(--nav-total) + 8px); bottom: auto; transform: translate(-50%, -8px); }
  .chapters.is-on { transform: translate(-50%, 0); }
  .chapters__list button { width: 22px; }
  .chapters__long { display: none; }
}

main, .foot { position: relative; z-index: 3; }

/* ---------- Die Reise ---------------------------------------------------- */
.journey { position: relative; height: calc(6 * var(--step) + 100vh); }
/* Fühler: misst --step in Pixeln für journey.js und site.js (stepOf) */
.journey__step { position: absolute; top: 0; left: 0; width: 1px; height: var(--step); visibility: hidden; pointer-events: none; }
.beat {
  --side: max(var(--gutter), 6.5vw);
  /* fest im Bild: die Lage kommt aus der Szene (site.js, journey.anchor) */
  /* top + bottom statt 100vh: am Telefon ist 100vh die Höhe OHNE
     Adressleiste – unten lag der Text unter der Leiste des Browsers */
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-total) + 24px) var(--side) 48px;
  will-change: transform;
}
/* Ein- und Ausblenden je Zeile (--o aus site.js), nie am ganzen Abschnitt:
   eine Deckkraft unter 1 an einem Vorfahren nähme der weichen Unschärfe
   dahinter die Szene weg (backdrop root) */
.beat > *, .beat::before { opacity: var(--o, 1); }
/* rechts bleibt Platz für den Karpfen der Scrollleiste */
.beat--right { padding-right: calc(var(--side) + 28px); }
/* Sprungmarken für Links (#stats): der Text selbst steht fest und hat
   keinen Platz auf der Seite mehr */
.beat-mark { position: absolute; left: 0; width: 1px; height: 1px; top: calc(var(--i) * var(--step)); }
.beat > * { max-width: 36rem; }
.beat--left { align-items: flex-start; }
.beat--right { align-items: flex-end; }
.beat--right > * { width: 100%; }
.beat--center { align-items: center; text-align: center; }
.beat--center > * { max-width: 44rem; }
.beat--gate { justify-content: center; align-items: stretch; }
.beat--gate > * { max-width: none; }
.beat--gate .legend { font-size: clamp(16px, 1.2vw, 19px); margin-bottom: 18px; }
/* links und rechts neben dem Tor – die Mitte gehört dem Tor */
.beat__split { display: grid; grid-template-columns: minmax(0, 1fr) 48% minmax(0, 1fr); gap: 24px; align-items: center; }
.beat__split > :first-child { grid-column: 1; }
.beat__split .title { margin: 0; font-size: clamp(30px, 3.2vw, 48px); }
.beat--final { justify-content: flex-end; padding-bottom: 6vh; }
.beat--final .display { margin-top: 8px; }

.eyebrow {
  margin: 0 0 14px; font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-home-stroke);
}
.eyebrow--lined { display: flex; align-items: center; gap: 12px; }
.eyebrow--lined::before {
  content: ""; width: 36px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5));
}
.display {
  margin: 0 0 22px; font: 300 clamp(48px, 8.2vw, 116px)/.92 var(--font-serif);
  letter-spacing: -.025em; font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.display--sm { font-size: clamp(44px, 6.4vw, 92px); }
.title {
  margin: 0 0 18px; font: 350 clamp(36px, 4.7vw, 66px)/1.02 var(--font-serif);
  letter-spacing: -.018em; text-wrap: balance;
}
.legend {
  margin: 0 0 26px; font: italic 300 clamp(19px, 1.55vw, 23.5px)/1.5 var(--font-serif);
  color: rgba(236, 237, 240, .94); text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(15, 17, 20, 1), 0 0 30px rgba(15, 17, 20, .9);
}
.legend .short { display: none; }
.legend--big { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.25; color: var(--text); }
.body { margin: 0 0 22px; color: var(--text-muted); font-size: clamp(16.5px, 1.32vw, 20px); text-wrap: pretty; }
.fine { margin: 14px 0 0; font: 400 12.5px/1.5 var(--font-mono); color: var(--text-faint); letter-spacing: .02em; }
.fine > span { white-space: nowrap; }   /* eine Angabe bricht nie in sich um */
/* Angaben als Liste, je ein kleines Sechseck davor – der Punkt dazwischen
   stand am Telefon allein am Anfang der zweiten Zeile */
.facts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.facts > span { display: inline-flex; align-items: center; gap: 7px; }
.facts > span::before { content: ""; flex: none; width: 6px; height: 7px; background: currentColor; opacity: .75;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.beat--center .facts { justify-content: center; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.actions--center { justify-content: center; }
.soon {
  font: 500 11px/1 var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-journal); padding: 4px 6px; background: rgba(246, 214, 138, .1); white-space: nowrap;
  vertical-align: 2px;
}

.scroll-hint {
  position: absolute; left: var(--gutter); bottom: 28px; margin: 0; display: flex; align-items: center; gap: 12px;
  font: 500 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
}
.scroll-hint i { width: 12px; height: 14px; background: var(--text-faint);
  clip-path: polygon(50% 100%, 0 30%, 30% 30%, 30% 0, 70% 0, 70% 30%, 100% 30%);
  animation: hint 1.8s var(--ease-out) infinite; }
@keyframes hint { 0%, 100% { transform: translateY(-3px); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } }

/* Text der Reise steht über hellen Teilchen (Mond, Drache, Gischt): ein
   dunkler Saum um jede Zeile, dazu der Schleier unten */
.beat .body, .beat .fine, .beat .eyebrow, .beat .title, .beat .display {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 18px rgba(15, 17, 20, .9);
}

/* Lesbarkeit über der Szene: am Rechner liegt hinter der Textspalte eine
   leichte Unschärfe mit weichem Rand (keine Kante, nur ein Schleier), auf
   dem Telefon steht der Text unten, ebenso verschleiert */
@media (min-aspect-ratio: 6/5) {
  .beat--left::before, .beat--right::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: min(60rem, 60%); z-index: -1; pointer-events: none;
    background: rgba(15, 17, 20, .34);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask: radial-gradient(ellipse 62% 46% at 44% 52%, #000 38%, transparent 100%);
            mask: radial-gradient(ellipse 62% 46% at 44% 52%, #000 38%, transparent 100%);
  }
  .beat--right::before { left: auto; right: 0;
    -webkit-mask: radial-gradient(ellipse 62% 46% at 56% 52%, #000 38%, transparent 100%);
            mask: radial-gradient(ellipse 62% 46% at 56% 52%, #000 38%, transparent 100%); }
  .beat--gate::before, .beat--center::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  }
  .beat--gate::before {
    background: rgba(15, 17, 20, .38);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask: radial-gradient(ellipse 22% 38% at 15% 52%, #000 40%, transparent 100%), radial-gradient(ellipse 22% 38% at 85% 52%, #000 40%, transparent 100%);
            mask: radial-gradient(ellipse 22% 38% at 15% 52%, #000 40%, transparent 100%), radial-gradient(ellipse 22% 38% at 85% 52%, #000 40%, transparent 100%);
  }
  /* Mitte und Schluss: derselbe weiche Schleier, unter dem Text zentriert */
  .beat--center::before {
    background: rgba(15, 17, 20, .36);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    -webkit-mask: radial-gradient(ellipse 44% 30% at 50% 50%, #000 42%, transparent 100%);
            mask: radial-gradient(ellipse 44% 30% at 50% 50%, #000 42%, transparent 100%);
  }
  /* nur hinter den Zeilen, ohne Unschärfe: darüber steht der Kopf des Drachen */
  .beat--final::before {
    background: rgba(15, 17, 20, .4);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    -webkit-mask: radial-gradient(ellipse 40% 21% at 50% 80%, #000 40%, transparent 100%);
            mask: radial-gradient(ellipse 40% 21% at 50% 80%, #000 40%, transparent 100%);
  }
}

@media (max-aspect-ratio: 1199/1000) {   /* hochkant – wie journey.js (aspect < 1.2) */
  .beat { justify-content: flex-end; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .beat--right { align-items: flex-start; }
  .beat::before {
    content: ""; position: absolute; inset: 35% 0 0 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(15, 17, 20, .62) 42%, rgba(15, 17, 20, .8));
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    -webkit-mask: linear-gradient(180deg, transparent, #000 30%); mask: linear-gradient(180deg, transparent, #000 30%);
  }
  .beat--hero { justify-content: flex-end; }
  /* hochkant: die Sage in einem Satz, damit Wert und Aufruf über den Rand passen */
  .beat--hero .legend .long { display: none; }
  .beat--hero .legend .short { display: inline; }
  .beat--hero .legend { margin-bottom: 14px; }
  .beat--hero::before { inset: 22% 0 0 0; }
  /* zwei Knöpfe: auf einer Zeile teilen sie sich den Platz, brechen sie
     um, ist jeder so breit wie die Zeile – nie zwei ungleich breite */
  .actions { gap: 10px; align-self: stretch; }
  .actions .btn { flex: 1 1 auto; padding: 0 16px; }
  .beat--gate { justify-content: flex-end; }
  .beat__split { grid-template-columns: 1fr; gap: 0; }
  .scroll-hint { display: none; }
}

/* ---------- Abschnitte nach der Reise ------------------------------------- */
.sec { position: relative; padding: clamp(96px, 14vh, 150px) var(--gutter); max-width: clamp(1240px, 76vw, 1480px); margin: 0 auto;
  overflow-x: clip; }   /* der Schleier der Überschrift ragt seitlich hinaus – auf dem Telefon machte er die Seite breiter */
.sec__head { position: relative; isolation: isolate; max-width: 42rem; margin: 0 auto 48px; text-align: center; }
/* hinter jeder Überschrift ein leiser Schleier – darunter schwebt noch die Wolke des Drachen */
.sec__head::before {
  content: ""; position: absolute; inset: -48px -14%; z-index: -1; pointer-events: none;
  background: rgba(15, 17, 20, .34);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask: radial-gradient(ellipse 58% 56% at 50% 50%, #000 40%, transparent 100%);
          mask: radial-gradient(ellipse 58% 56% at 50% 50%, #000 40%, transparent 100%);
  transition: opacity 900ms var(--ease-out);
}
/* solange der Text noch nicht eingeblendet ist (site.js), fehlt auch der Schleier */
.sec__head[data-veil="wait"]::before { opacity: 0; }
.sec__head .eyebrow--lined { justify-content: center; }
.sec__head .eyebrow--lined::after {
  content: ""; width: 36px; height: 1px; flex: none;
  background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .5));
}

.glass, .area, .fb, .flow li {
  position: relative; isolation: isolate; clip-path: var(--cut-clip);
}
.glass::before, .area::before, .fb::before, .flow li::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(255, 255, 255, .14); clip-path: var(--cut-clip);
}
.glass::after, .area::after, .fb::after, .flow li::after {
  content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut-clip);
  background: rgba(22, 25, 31, .78); backdrop-filter: blur(16px) saturate(1.3);
}

/* ---------- Bereiche: ein Bento aus großen und kleinen Karten ------------------
   Jede Karte trägt das Zeichen des Bereichs wie in der App (Sechseck in der
   Bereichsfarbe, Symbol dunkel darin) und ein eigenes Bild: Nutrition einen
   echten Bildschirm, Fitness die Körperkarte, die übrigen ein Stück App von
   Hand (seit 13.10.2026). Am Telefon eine Wischreihe, siehe unten. Symbole: Kopien aus assets/icons (img/icons), als Maske. */
[data-area="nutrition"], [data-area-open="nutrition"] { --a: var(--c-nutrition); --m: url("../img/icons/nutrition_icon.svg"); }
[data-area="fitness"], [data-area-open="fitness"] { --a: var(--c-fitness); --m: url("../img/icons/fitness_icon.svg"); }
[data-area="meditation"], [data-area-open="meditation"] { --a: var(--c-meditation); --m: url("../img/icons/meditation_icon.svg"); }
[data-area="journal"], [data-area-open="journal"] { --a: var(--c-journal); --m: url("../img/icons/journal_icon.svg"); }
[data-area="cue-diary"], [data-area-open="cue-diary"] { --a: var(--c-cue-diary); --m: url("../img/icons/cue_diary_icon.svg"); }
[data-area="calendar"], [data-area-open="calendar"] { --a: var(--c-calendar); --m: url("../img/icons/calendar_icon.svg"); }
[data-area="reader"], [data-area-open="reader"] { --a: var(--c-reader); --m: url("../img/icons/reader_icon.svg"); }
[data-area="archive"], [data-area-open="archive"] { --a: var(--c-archive); --m: url("../img/icons/archive_icon.svg"); }

.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .areas { grid-template-columns: 1fr; } }
.area { --cut: 20px; padding: 24px 24px 22px; min-height: 270px; display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--dur) var(--ease-out); }
.area > * { position: relative; z-index: 1; }
.area:hover { transform: translateY(-4px); }
/* Rand in der Farbe des Bereichs – oben links kräftig, dann leise */
.area::before { background: linear-gradient(150deg, color-mix(in srgb, var(--a) 60%, transparent), rgba(255, 255, 255, .1) 42%); }
.area::after { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--a) 15%, transparent), transparent 62%),
  rgba(22, 25, 31, .86); }
/* das Zeichen: Sechseck in der Bereichsfarbe, das Symbol dunkel darin */
.area__mark { display: grid; place-items: center; width: 56px; height: 50px; flex: none; background: var(--a);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transition: transform var(--dur) var(--ease-out); }
.area__mark i { width: 27px; height: 27px; background: #16191f;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.area:hover .area__mark { transform: rotate(-8deg) scale(1.04); }
.area__text h3 { margin: 18px 0 6px; font: 600 20px/1.2 var(--font); }
.area__text p { margin: 0; color: var(--text-muted); font-size: 15px; max-width: 30rem; }
.area__tags { list-style: none; margin: auto 0 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.area__tags li { --cut: 6px; padding: 6px 9px; clip-path: var(--cut-clip); white-space: nowrap;
  font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--a) 78%, #fff); background: color-mix(in srgb, var(--a) 13%, transparent); }
/* Archive füllt die untere Reihe, solange Finance fehlt (vier Spalten) */
@media (min-width: 641px) { .area[data-area="archive"] { grid-column: span 2; } }

/* Jede Karte: oben der Text, unten (große Karten: rechts) ihr Bild. Das Bild
   stößt an den unteren Rand der Karte, oben links der Eckschnitt wie bei einem
   Bildschirm, darum ein Rahmen in der Bereichsfarbe, der nach unten verläuft. */
.area { padding-bottom: 0; }
.area__text { flex: 1 1 auto; display: flex; flex-direction: column; }
.area--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px;
  padding: 24px 0 0 24px; min-height: 310px; }
.area--wide .area__text { padding-bottom: 22px; }
.area__shot, .area__viz { position: relative; margin: 0; align-self: end; height: 280px; overflow: hidden; padding: 2px 2px 0;
  --cut: 14px; clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 70%, transparent), rgba(255, 255, 255, .08) 70%);
  transition: transform var(--dur) var(--ease-out); }
.area__shot img { width: 100%; height: auto; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
.area--wide:hover .area__shot { transform: translateY(-10px); }
/* die gezeichneten Bilder: eine dunkle Bühne im Rahmen */
.area__viz { isolation: isolate; display: flex; flex-direction: column; padding: 16px 16px 14px; }
.area__viz::before { content: ""; position: absolute; inset: 2px 2px 0; z-index: -1; background: #12151a;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
.area:not(.area--wide) .area__viz { align-self: stretch; height: 178px; margin: 22px -24px 0; }
/* bewegt wird nur, was gerade zu sehen ist (site.js setzt .is-live) */
.area__viz *, .area__viz *::before, .area__viz *::after { animation-play-state: paused; }
.area.is-live .area__viz *, .area.is-live .area__viz *::before, .area.is-live .area__viz *::after { animation-play-state: running; }

/* Fitness: die Körperkarte der App, je Muskel die Farbe seines Rangs */
.vz-body { padding: 14px 12px 12px; gap: 10px; }
.vz-body img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); }
.vz-body__ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.vz-body__ranks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.vz-body__ranks i { width: 12px; height: 11px; background: var(--r); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow: 0 0 8px var(--r); }
.vz-body__ranks b { font: 500 10.5px/1 var(--font-mono); color: var(--r); letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 640px) {
  .vz-body { flex-direction: row; align-items: center; gap: 14px; }
  .vz-body img { flex: 0 0 48%; height: 100%; }
  .vz-body__ranks { flex: 1; gap: 9px; }
  .vz-body__ranks li { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; white-space: normal; }
  .vz-body__ranks b { grid-column: 2; }
}

/* Meditation: ein Atemzug im Sechseck, darunter die Woche */
.vz-med { gap: 13px; }
.vz-med__hex { width: 46px; height: 41px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--a) 18%, transparent); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.vz-med__hex i { width: 100%; height: 100%; background: var(--a); clip-path: inherit; transform: scale(.42);
  animation: vz-breathe 16s var(--ease-out) infinite; }
@keyframes vz-breathe { 0% { transform: scale(.42); } 25%, 50% { transform: scale(1); } 75%, 100% { transform: scale(.42); } }
.vz-med__breath b { display: grid; font: 600 15px/1.2 var(--font); }
.vz-med__breath b span { grid-area: 1 / 1; animation: vz-in 16s steps(1) infinite; }
.vz-med__breath b span + span { animation-name: vz-out; opacity: 0; }
@keyframes vz-in { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes vz-out { 0% { opacity: 0; } 50% { opacity: 1; } }
.vz-med__breath small { display: block; grid-column: 2; font: 400 10.5px/1.3 var(--font-mono); color: var(--text-faint); }
.vz-med__breath { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; }
.vz-med__hex { grid-row: span 2; }
.vz-med__week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.vz-med__week li { aspect-ratio: 1.12; display: grid; place-items: center; font: 500 10px/1 var(--font-mono); color: var(--text-faint);
  background: rgba(255, 255, 255, .07); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.vz-med__week li.on { background: var(--a); color: #16191f; }
.vz-med__week li.now { color: var(--text); background: linear-gradient(0deg, color-mix(in srgb, var(--a) 70%, transparent) 55%, rgba(255, 255, 255, .1) 55%); }
.vz-med__sum { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.vz-med__sum b { color: var(--a); font-weight: 600; }

/* Journal: eine Zeile, ein „/" und das Menü der Befehle */
.vz-doc { gap: 6px; }
.vz-doc__day { margin: 0; font: 400 17px/1.2 var(--font-serif); color: var(--text); }
.vz-doc__line { margin: 0; font-size: 13px; color: var(--text-muted); }
.vz-doc__slash { color: var(--a); font-weight: 600; position: relative; }
.vz-doc__slash::after { content: ""; position: absolute; right: -4px; top: 1px; bottom: 1px; width: 1.5px; background: var(--text);
  animation: vz-caret 1.1s steps(1) infinite; }
@keyframes vz-caret { 50% { opacity: 0; } }
.vz-doc__menu { --row: 23px; list-style: none; position: relative; margin: 2px 0 0 18%; padding: 4px; width: min(190px, 76%);
  background: var(--surface-2); --cut: 8px; clip-path: var(--cut-clip); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.vz-doc__menu::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: var(--row);
  background: color-mix(in srgb, var(--a) 20%, transparent); animation: vz-pick 8s steps(1) infinite; }
@keyframes vz-pick { 0% { transform: none; } 25% { transform: translateY(var(--row)); } 50% { transform: translateY(calc(2 * var(--row))); } 75% { transform: translateY(calc(3 * var(--row))); } }
.vz-doc__menu li { position: relative; display: flex; align-items: center; gap: 9px; height: var(--row); padding: 0 6px;
  font-size: 12px; color: var(--text); white-space: nowrap; }
.vz-doc__menu i { width: 15px; flex: none; display: grid; place-items: center; font: 600 11px/1 var(--font-mono); font-style: normal; color: var(--a); }
.vz-doc__menu i.box { height: 11px; width: 11px; margin-inline: 2px; border: 1.5px solid var(--a); }
.vz-doc__menu i.hx { height: 11px; width: 13px; background: var(--c-fitness); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* Cue Diary: der kurze Chat, darunter die Stärke als Sechsecke – ohne Rot und Grün */
.vz-cue { gap: 6px; }
.vz-cue p { margin: 0; max-width: 86%; padding: 6px 10px; font-size: 12px; line-height: 1.35; --cut: 7px; }
.vz-cue__q { align-self: flex-start; background: var(--surface-2); color: var(--text);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.vz-cue__a { align-self: flex-end; background: color-mix(in srgb, var(--a) 22%, transparent); color: var(--text);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.vz-cue__scale { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.vz-cue__scale li { aspect-ratio: 1.12; display: grid; place-items: center; font: 500 9px/1 var(--font-mono); color: var(--text-faint);
  background: rgba(255, 255, 255, .07); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.vz-cue__scale li.on { background: var(--a); color: #16191f; }
/* einmal, wenn die Karte zum ersten Mal zu sehen ist: Frage, Antwort, Frage, Wahl */
.areas.has-viz .area:not(.is-seen) .vz-cue > * { opacity: 0; transform: translateY(6px); }
.vz-cue > * { transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.vz-cue > :nth-child(2) { transition-delay: 500ms; }
.vz-cue > :nth-child(3) { transition-delay: 1100ms; }
.vz-cue > :nth-child(4) { transition-delay: 1500ms; }

/* Reader: eine Seite mit Markierung, darunter das Vorlesen und wie weit */
.vz-read { gap: 10px; }
.vz-read__page { margin: 0; font: 400 15px/1.5 var(--font-serif); color: rgba(232, 233, 236, .88); }
.vz-read__page mark { color: var(--text); background: linear-gradient(transparent 12%, rgba(246, 214, 138, .34) 12%, rgba(246, 214, 138, .34) 92%, transparent 92%); }
.vz-read__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vz-read__wave { display: flex; align-items: center; gap: 2.5px; height: 16px; }
.vz-read__wave i { width: 2.5px; height: 100%; background: var(--a); transform: scaleY(.3); transform-origin: center;
  animation: vz-wave 1.2s ease-in-out infinite alternate; }
.vz-read__wave i:nth-child(3n) { animation-delay: -.4s; } .vz-read__wave i:nth-child(3n+1) { animation-delay: -.8s; }
.vz-read__wave i:nth-child(4n) { animation-duration: .9s; }
@keyframes vz-wave { to { transform: scaleY(1); } }
.vz-read__where { font: 400 10.5px/1 var(--font-mono); color: var(--text-faint); }
.vz-read__bar { height: 3px; background: rgba(255, 255, 255, .09); }
.vz-read__bar i { display: block; width: 42%; height: 100%; background: var(--a); }

/* Calendar: der Monat – je Tag ein Strich je Bereich, in dem etwas steht */
.vz-month { gap: 8px; padding: 14px 12px 12px; }
.vz-month__head { margin: 0; display: flex; align-items: baseline; justify-content: space-between; }
.vz-month__head b { font: 400 18px/1 var(--font-serif); }
.vz-month__head span { font: 400 10.5px/1 var(--font-mono); color: var(--text-faint); }
.vz-month__days { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); gap: 3px; }
.vz-month__days .wd { font: 500 9px/1 var(--font-mono); color: var(--text-faint); text-align: center; padding-bottom: 2px; }
.vz-month__days .d { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 3px 3px 3px;
  background: rgba(255, 255, 255, .045); font: 500 9px/1 var(--font-mono); color: var(--text-muted); min-height: 0; overflow: hidden; }
.vz-month__days .d.past { background: rgba(255, 255, 255, .07); }
.vz-month__days .d.today { box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); }
.vz-month__days .d.later { color: var(--text-faint); }
.vz-month__days .lines { display: grid; gap: 1.5px; }
.vz-month__days .lines i { display: block; height: 2.5px; background: var(--c); transform-origin: left; }
.areas.has-viz .area:not(.is-seen) .vz-month .lines i { transform: scaleX(0); }
.vz-month .lines i { transition: transform 600ms var(--ease-out); transition-delay: var(--dl, 0ms); }

/* Archive: Notizen in ihren Farben, eine Aufgabe zeigt auf ein Workout */
.vz-notes { flex-direction: row; gap: 8px; padding: 14px 12px 0;
  -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
.vz-notes__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vz-note { --cut: 8px; clip-path: var(--cut-clip); padding: 9px 10px 10px; display: grid; gap: 5px;
  background: color-mix(in srgb, var(--t) 15%, #16191f); box-shadow: inset 0 2px 0 var(--t); }
.vz-note b { font: 600 12px/1.2 var(--font); color: var(--t); }
.vz-note p { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 11.5px; line-height: 1.3; color: var(--text); }
.vz-note p.plain { display: block; color: var(--text-muted); }
.vz-note p i { width: 10px; height: 10px; flex: none; border: 1.5px solid color-mix(in srgb, var(--t) 70%, transparent); position: relative; }
.vz-note p.done { color: var(--text-faint); text-decoration: line-through; }
.vz-note p.done i, .vz-note p.tick i { background: var(--t); border-color: var(--t); }
.vz-note p.tick { transition: color 400ms 700ms; }
.vz-note p.tick i { transition: background 300ms 600ms, border-color 300ms 600ms; }
.areas.has-viz .area:not(.is-seen) .vz-note p.tick i { background: transparent; border-color: color-mix(in srgb, var(--t) 70%, transparent); }
.vz-note p.link { align-self: start; justify-self: start; padding: 4px 8px 4px 5px; --cut: 5px; clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--c-fitness) 18%, transparent); font-size: 11px; }
.vz-note p.link .hx { width: 12px; height: 11px; background: var(--c-fitness); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

@media (prefers-reduced-motion: reduce) {
  .area__viz *, .area__viz *::before, .area__viz *::after { animation: none !important; transition: none !important; }
  .vz-med__hex i { transform: scale(.8); }
  .vz-read__wave i { transform: scaleY(.6); }
}

/* ---------- Am Telefon eine Wischreihe -------------------------------------
   Acht Karten untereinander waren fast fünf Bildschirme lang. Jetzt liegen
   sie nebeneinander, 84 % breit, damit die nächste hereinschaut; darunter
   (site.js) die acht Zeichen zum Springen, „3 / 8 · Meditation" und Pfeile.
   Alle Karten gleich hoch, die Bilder alle gleich hoch – die Reihe springt
   beim Wischen nicht. Am Rechner bleibt das Bento. */
.areas-nav { display: none; }
@media (max-width: 640px) {
  .areas { position: relative; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; }
  .areas::-webkit-scrollbar { display: none; }
  .areas:focus-visible { outline: 2px solid var(--c-home); outline-offset: -2px; }
  .area, .area--wide { flex: 0 0 min(84%, 340px); scroll-snap-align: start; display: flex; flex-direction: column;
    min-height: 0; padding: 20px 20px 0; grid-column: auto; }
  .area:hover { transform: none; }
  .area--wide .area__text { padding-bottom: 0; }
  .area__shot, .area__viz, .area:not(.area--wide) .area__viz { align-self: stretch; height: 212px; margin: 18px -20px 0; }
  .area--wide:hover .area__shot { transform: none; }
  /* die Karten rechts außerhalb des Bildes kämen sonst erst beim Wischen herein */
  .areas > [data-reveal]:not(.is-in) { opacity: 1; transform: none; }

  .areas-nav { display: grid; gap: 10px; margin-top: 14px; }
  .areas-nav__marks { display: flex; justify-content: space-between; margin-inline: -6px; }
  .areas-nav__mark { width: 42px; height: 42px; display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; }
  .areas-nav__mark span { width: 28px; height: 25px; display: grid; place-items: center; background: var(--a);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    opacity: .32; transform: scale(.82); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
  .areas-nav__mark span i { width: 14px; height: 14px; background: #16191f;
    -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
  .areas-nav__mark[aria-current="true"] span { opacity: 1; transform: scale(1.08); }
  .areas-nav__mark:focus-visible { outline: 2px solid var(--c-home); outline-offset: -2px; }
  .areas-nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .areas-nav__count { margin: 0; font: 400 12px/1.3 var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .areas-nav__count b { color: var(--text); font-weight: 500; }
  .areas-nav__btns { display: flex; gap: 10px; }
  .areas-nav__btns .btn { min-height: 42px; width: 50px; padding: 0; }
  .areas-nav__btns .btn[disabled] { opacity: .38; cursor: default; }
}

/* ---------- Personalisierung: Home nach eigenem Geschmack ------------------------
   Links die echte Home der App (site/home/, ein Abzug – im <iframe>, um den
   Faktor --k verkleinert), rechts ALLE Einstellungen von Home in einem Feld:
   Look · On Home · Colour. Wahl = kleine Fläche mit Schnitt, gewählt weiß;
   Zurücksetzen = Knopf mit Sockel. Nichts Rundes. */
.cz { --k: .86; --h: 844; display: grid; grid-template-columns: auto minmax(0, 44rem); gap: clamp(28px, 4vw, 64px);
  justify-content: center; align-items: start; }
.cz__phone { position: sticky; top: calc(var(--nav-total) + 24px); margin: 0; display: grid; justify-items: center; gap: 14px; }
.cz__screen {
  --cut: 26px; position: relative; width: calc(390px * var(--k)); height: calc(var(--h) * 1px * var(--k));
  clip-path: var(--cut-clip); background: #0f1114;
}
/* der Rand des Telefons über dem Bild (clip-path schnitte einen border ab) */
.cz__screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; clip-path: var(--cut-clip);
  padding: 2px; background: linear-gradient(165deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, .06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cz__frame { position: absolute; left: 0; top: 0; width: 390px; height: calc(var(--h) * 1px); border: 0;
  transform: scale(var(--k)); transform-origin: 0 0; background: #0f1114; opacity: 0; transition: opacity 600ms var(--ease-out); }
.cz__screen.is-ready .cz__frame { opacity: 1; }
/* am Telefon rollt der Finger die Seite, nicht Home */
@media (pointer: coarse) { .cz__frame { pointer-events: none; } }
/* wo sich etwas geändert hat, leuchtet kurz ein Rahmen auf */
.cz__spot { position: absolute; z-index: 4; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 0 18px 2px rgba(255, 255, 255, .35); }
.cz__spot.is-on { animation: cz-spot 1100ms var(--ease-out); }
@keyframes cz-spot { 0% { opacity: 0; transform: scale(1.04); } 18% { opacity: 1; transform: scale(1); } 70% { opacity: .9; } 100% { opacity: 0; } }
.cz__cap { min-height: 1.4em; margin: 0; font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--text-muted);
  text-shadow: 0 0 6px #0f1114, 0 0 14px #0f1114;
  text-align: center; max-width: calc(390px * var(--k)); }

.cz__panel { position: relative; isolation: isolate; --cut: 22px; clip-path: var(--cut-clip); padding: 24px 26px 22px; display: grid; gap: 22px; }
.cz__panel::before { content: ""; position: absolute; inset: 0; z-index: -2; clip-path: var(--cut-clip); background: rgba(255, 255, 255, .14); }
.cz__panel::after { content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut-clip);
  background: rgba(22, 25, 31, .88); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.cz__block { display: grid; gap: 12px; }
.cz__block + .cz__block { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); }
.cz__label { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font: 600 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.cz__label small { font: 400 12.5px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--text-faint); }

/* Look: sieben Zeilen, links was, rechts die Wahlen */
.cz__look { display: grid; gap: 2px; }
.cz-set { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); gap: 14px; align-items: center; padding: 5px 0; }
.cz-set__head { margin: 0; display: grid; gap: 2px; }
.cz-set__head b { font: 600 14px/1.25 var(--font); }
.cz-set__head small { font-size: 12px; line-height: 1.3; color: var(--text-faint); }
.cz-set__opts { display: flex; flex-wrap: wrap; gap: 5px; }
.cz-opt { --cut: 6px; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border: 0; background: rgba(255, 255, 255, .065); color: var(--text-muted); font: 500 13px/1 var(--font); cursor: pointer;
  clip-path: var(--cut-clip); transition: background var(--dur-fast), color var(--dur-fast); }
.cz-opt:hover { background: rgba(255, 255, 255, .13); color: var(--text); }
.cz-opt[aria-checked="true"] { background: #f1f2f5; color: #0f1114; font-weight: 600; }
.cz-opt:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cz-opt[aria-checked="true"]:focus-visible { outline-color: #0f1114; }
/* wie die App ausgeliefert wird: ein kleines Quadrat hinter dem Namen */
.cz-opt__def { width: 4px; height: 4px; background: currentColor; opacity: .55; }

/* On Home: ein Knopf je Bereich – an ist gefüllt, aus ist leer */
.cz__areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cz-area { --cut: 8px; width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px 6px 7px; border: 0;
  background: color-mix(in srgb, var(--a) 13%, rgba(35, 39, 51, .75)); color: var(--text); font: 600 13px/1.15 var(--font);
  text-align: start; cursor: pointer; clip-path: var(--cut-clip); transition: background var(--dur-fast), color var(--dur-fast); }
.cz-area:hover { background: color-mix(in srgb, var(--a) 22%, rgba(35, 39, 51, .8)); }
.cz-area__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-area__eye { position: relative; flex: none; width: 14px; height: 14px; background: #f1f2f5; }
.cz-area__eye::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 7.5px;
  border: solid #0f1114; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cz-area[aria-pressed="false"] { background: rgba(35, 39, 51, .4); color: var(--text-faint); }
.cz-area[aria-pressed="false"] .cz-sign { filter: grayscale(1); opacity: .45; }
.cz-area[aria-pressed="false"] .cz-area__eye { background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.cz-area[aria-pressed="false"] .cz-area__eye::after { display: none; }
.cz-area:focus-visible, .cz-pick:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cz-sign { display: grid; place-items: center; flex: none; width: 26px; height: 23px; background: var(--a);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.cz-sign i { width: 13px; height: 13px; background: #16191f; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.cz__sections { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* ein Schalter: Rechteck mit Sockel, auch der Knopf darin (nichts Rundes) */
.cz-switch { --cut: 8px; position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; clip-path: var(--cut-clip);
  background: rgba(35, 39, 51, .7); cursor: pointer; }
.cz-switch > span { flex: 1; display: grid; gap: 2px; }
.cz-switch b { font-size: 14px; }
.cz-switch small { font-size: 12px; color: var(--text-muted); }
.cz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cz-switch i { position: relative; flex: none; width: 40px; height: 22px; background: #0b0d10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: background var(--dur); }
.cz-switch i::before { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: #a6adbb;
  box-shadow: 2px 2px 0 #2b303c; transition: transform var(--dur) var(--ease-out), background var(--dur); }
.cz-switch input:checked + i { background: rgba(255, 255, 255, .85); }
.cz-switch input:checked + i::before { transform: translateX(18px); background: #0f1114; box-shadow: 2px 2px 0 #7d8494; }
.cz-switch input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; }

/* Colour: erst der Bereich (Sechsecke), dann die Farbe */
.cz__colour { display: grid; gap: 12px; }
.cz__picks { display: grid; grid-template-columns: repeat(8, minmax(0, 52px)); gap: 6px; }
.cz-pick { --cut: 7px; display: grid; place-items: center; width: 100%; height: 40px; border: 0; padding: 0; cursor: pointer;
  background: rgba(35, 39, 51, .7); clip-path: var(--cut-clip); transition: background var(--dur-fast); }
.cz-pick:hover { background: rgba(255, 255, 255, .12); }
.cz-pick[aria-checked="true"] { background: rgba(255, 255, 255, .2); box-shadow: inset 0 -2px 0 #fff; }
.cz__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.cz-swatch { --depth: 3px; position: relative; isolation: isolate; width: 32px; height: 32px; border: 0; padding: 0; background: none;
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.cz-swatch::before, .cz-swatch::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.cz-swatch::before { background: color-mix(in srgb, var(--s) 45%, #000); transform: translate(var(--depth), var(--depth)); }
.cz-swatch::after { background: var(--s); }
.cz-swatch:hover { transform: translate(-1px, -1px); }
.cz-swatch[aria-checked="true"] { transform: translate(var(--depth), var(--depth)); }
.cz-swatch[aria-checked="true"]::before { opacity: 0; }
.cz-swatch[aria-checked="true"]::after { box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 5px var(--s); }
.cz-swatch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cz__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.cz__count { font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.cz__foot .btn { min-height: 40px; font-size: 13.5px; }
.cz__foot .btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 1180px) {
  .cz { --k: .72; grid-template-columns: auto minmax(0, 1fr); }
  .cz-set { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 6px 0; }
  .cz-set__head { display: flex; align-items: baseline; gap: 10px; }
  .cz__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cz { --k: .6; gap: 22px; }
  .cz__panel { padding: 18px 16px; }
  .cz__sections { grid-template-columns: 1fr; }
}
/* Telefon: Home bleibt oben stehen, während man darunter wählt – wie ein
   Konfigurator, nur der obere Teil (Home rollt zu dem, was sich ändert).
   Nur hochkant mit genug Höhe (quer bliebe nichts übrig). */
@media (max-width: 720px) {
  .cz { --k: .5; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cz__phone { position: static; }
  .cz__panel { width: 100%; }
}
@media (max-width: 720px) and (min-height: 600px) {
  .cz { --k: .5; --h: 560; gap: 10px; }
  .cz__phone { position: sticky; top: var(--nav-total); z-index: 3; width: 100%; padding: 10px 0 14px; gap: 6px; }
  .cz__phone::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, var(--bg) calc(100% - 12px), rgba(15, 17, 20, 0)); }
  .cz__screen { --cut: 14px; }
  .cz__cap { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .cz__areas { gap: 5px; }
  .cz-area { padding-inline: 6px; gap: 6px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cz__spot.is-on { animation: none; }
  .cz__frame { transition: none; }
}

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  counter-reset: f; }
.flow li { padding: 24px 20px; display: grid; gap: 8px; }
.flow b { font-weight: 600; }
.flow span:not(.flow__hex) { color: var(--text-muted); font-size: 15px; }
.flow__hex { width: 26px; height: 29px; background: var(--a);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 50% 0, 50% 14%, 12% 33%, 12% 67%, 50% 86%, 88% 67%, 88% 33%, 50% 14%); }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } }

/* ---------- Download: Browser · Telefon · Rechner ------------------------------ */
.dl { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .dl { grid-template-columns: 1fr; max-width: 34rem; margin: 0 auto; } }
.dl__group { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; clip-path: var(--cut-clip); --cut: 22px; }
.dl__group::before { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(255, 255, 255, .14); clip-path: var(--cut-clip); }
.dl__group::after { content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut-clip);
  background: linear-gradient(180deg, rgba(30, 34, 42, .9), rgba(22, 25, 31, .86) 46%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.dl__group--live::after { background: linear-gradient(180deg, rgba(152, 226, 245, .16), rgba(22, 25, 31, .86) 46%); }
.dl__group.is-yours::before { background: linear-gradient(180deg, var(--c-home), rgba(255, 255, 255, .2)); }

/* die Bühne jeder Gruppe: ein Gerät mit der App darin */
.dl__art { margin: 0; height: 230px; display: grid; place-items: start center; padding: 30px 22px 0; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.mock-browser { width: 100%; max-width: 330px; background: #2b303c; padding: 0 3px 3px; --cut: 10px; clip-path: var(--cut-clip);
  }
.mock-browser__bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; }
.mock-browser__bar i { width: 7px; height: 7px; background: rgba(255, 255, 255, .28); }
.mock-browser__bar span { margin-left: 8px; flex: 1; height: 15px; padding: 0 8px; font: 500 9px/15px var(--font-mono);
  color: var(--text-faint); background: rgba(9, 11, 13, .6); }
.mock-browser img, .mock-laptop img { width: 100%; height: auto; }
.mock-phone { width: 150px; padding: 3px; background: #2b303c; --cut: 14px; clip-path: var(--cut-clip); }
.mock-phone img { width: 100%; height: auto; clip-path: var(--cut-clip); --cut: 12px; }
.mock-laptop { width: 100%; max-width: 330px; }
.mock-laptop__screen { margin: 0 18px; padding: 8px 8px 10px; background: #2b303c; --cut: 10px; clip-path: var(--cut-clip); }
.mock-laptop__base { height: 12px; background: linear-gradient(180deg, #3a404e, #232733);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%); }

.dl__body { padding: 20px 24px 24px; display: grid; gap: 10px; align-content: start; }
.dl__title { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 21px/1.2 var(--font); }
.dl__ico, .dl__os { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.dl__ico { width: 24px; height: 24px; color: var(--c-calendar); }
.dl__body > p { margin: 0 0 4px; color: var(--text-muted); font-size: 15px; }
.dl__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dl__opt { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 3px; padding: 10px 12px; --cut: 10px; clip-path: var(--cut-clip);
  background: rgba(255, 255, 255, .05); }
.dl__opt--live { display: block; padding: 4px 0 0; background: none; }
/* Name oben, die Zeile darunter darf unter „Coming soon" weiterlaufen – so bricht sie in keiner Breite um */
.dl__opt > svg { grid-row: 1 / span 2; }
.dl__opt > span { display: contents; }
.dl__opt b { grid-column: 2; grid-row: 1; }
.dl__opt small { grid-column: 2 / 4; grid-row: 2; }
.dl__opt:has(.dl__get) small { grid-column: 2; }
.dl__opt .soon { grid-column: 3; grid-row: 1; justify-self: end; }
.dl__opt .dl__get { grid-column: 3; grid-row: 1 / span 2; }
.dl__opt b { font-weight: 600; font-size: 15.5px; }
.dl__opt small { color: var(--text-faint); font: 400 13px/1.35 var(--font); }   /* Mono brach hier jede Zeile um */
.dl__opt.is-yours { background: rgba(255, 255, 255, .12); }
/* Ein Download, der schon geht (Android-APK seit 12.10.2026): ein Knopf statt „Coming soon" */
.dl__get { flex: none; min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.dl__opt.is-yours small::after { content: "This device"; display: block; margin-top: 3px; color: var(--c-home); }   /* eigene Zeile: daneben steht „Coming soon" */
.dl__os { width: 26px; height: 26px; color: var(--text); }
/* Android: der Robo-Kopf gefüllt, Augen ausgespart (CC BY 3.0, Hinweis im Fuß) */
.dl__os--android .fillp { fill: #a4c639; stroke: none; }
.dl__os--android .hole { fill: #16191f; stroke: none; }
.dl__os--android path:not(.fillp):not(.hole) { stroke: #a4c639; stroke-width: 1.4; stroke-linecap: round; }
/* Linux: ein Pinguin, eigene Zeichnung */
.dl__os--tux path { stroke: none; }
.dl__os--tux .tux-body { fill: #e8e9ec; }
.dl__os--tux .tux-belly { fill: #16191f; }
.dl__os--tux .tux-beak { fill: var(--c-journal); }
.dl__os--tux .tux-eye { fill: #16191f; }
.dl__note { text-align: center; margin: 22px auto 0; max-width: 46rem; text-wrap: balance; }
.foot__credits { max-width: 52rem; }

.fb { max-width: 44rem; margin: 0 auto; padding: 28px; display: grid; gap: 18px; }
.fb__kinds { border: 0; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.fb__kinds label { position: relative; cursor: pointer; }
.fb__kinds input { position: absolute; opacity: 0; }
.fb__kinds span {
  --cut: 8px; display: block; padding: 10px 16px; clip-path: var(--cut-clip);
  background: rgba(255, 255, 255, .07); color: var(--text-muted); font-weight: 500;
}
.fb__kinds input:checked + span { background: rgba(255, 255, 255, .9); color: var(--bg); }
.fb__kinds input:focus-visible + span { outline: 2px solid var(--c-home); outline-offset: 2px; }
.fb__field { display: grid; gap: 8px; font-size: 14px; color: var(--text-muted); }
.fb__field em { font: 500 11px/1 var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); margin-left: 6px; }
.fb textarea, .fb input[type="email"] {
  --cut: 10px; width: 100%; border: 0; padding: 14px 16px; clip-path: var(--cut-clip);
  background: rgba(9, 11, 13, .7); color: var(--text); font: 400 16px/1.5 var(--font); resize: vertical;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.fb textarea:focus, .fb input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--c-home); }
.fb__trap { position: absolute; left: -9999px; }
.fb__send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.fb__send .fine { margin: 0; flex: 1 1 16rem; }

/* Mit dem Kenncode nachsehen (seit 11.10.2026) – eine stillere zweite
   Fläche unter dem Formular, dieselbe Form. */
.fb-check { margin-top: 16px; padding-top: 22px; padding-bottom: 22px; gap: 10px; }
.fb-check__row { display: flex; gap: 12px; align-items: stretch; }
.fb-check__row input {
  /* width 0 + wachsen: sonst setzt die Breite des Feldes von Haus aus
     (size=20) eine Untergrenze, und am Telefon rutscht „Check" hinaus */
  --cut: 10px; flex: 1 1 0; width: 0; min-width: 0; border: 0; padding: 12px 16px; clip-path: var(--cut-clip);
  background: rgba(9, 11, 13, .7); color: var(--text); font: 500 16px/1.4 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.fb-check__row input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font); }
.fb-check__row .btn { flex: 0 0 auto; }
.fb-check__out { margin: 0; display: grid; gap: 6px; }
.fb-check__out:empty { display: none; }
/* .fine > span bricht sonst nie um – eine Antwort schon */
.fine > .fb-check__reply { color: var(--text); white-space: pre-line; }

.foot { --edge: max(var(--gutter), calc((100% - clamp(1240px, 76vw, 1480px)) / 2 + var(--gutter)));   /* dieselbe Kante wie die Abschnitte */
  padding: 56px var(--edge) calc(64px + var(--safe-b)); border-top: 1px solid var(--line); display: grid; gap: 18px;
  background: rgba(9, 11, 13, .82); backdrop-filter: blur(10px); }
.foot__brand { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot__links a { color: var(--text-muted); text-decoration: none; font-size: 15px; }
.foot__links a:hover { color: var(--text); }

/* ---------- Die Scroll-Leiste: ein Karpfen im Fluss --------------------- */
html.has-rail { scrollbar-width: none; }
html.has-rail::-webkit-scrollbar { display: none; }
.koi-rail { position: fixed; z-index: 60; right: 6px; top: calc(var(--nav-total) + 10px); bottom: calc(14px + var(--safe-b)); width: 28px;
  display: none; touch-action: none; }
html.has-rail .koi-rail { display: block; }
.koi-rail__river {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; margin-left: -5px; opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='22'%3E%3Cpolygon points='5,2 9,4.5 9,9.5 5,12 1,9.5 1,4.5' fill='none' stroke='%2398e2f5' stroke-width='1' opacity='.7'/%3E%3C/svg%3E");
  background-size: 10px 22px; animation: river 2.4s linear infinite;
  -webkit-mask: linear-gradient(transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(transparent, #000 6%, #000 94%, transparent);
}
@keyframes river { to { background-position: 0 22px; } }
.koi-rail__marks { position: absolute; inset: 0; }
.koi-rail__mark {
  position: absolute; left: 50%; width: 9px; height: 10px; margin: -5px 0 0 -4.5px; background: var(--text-faint);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.koi-rail__mark.is-past { background: var(--c-calendar); }
.koi-rail__koi {
  position: absolute; left: 50%; top: 0; width: 22px; height: 66px; margin-left: -11px;
  cursor: grab; transition: rotate 380ms var(--ease-out);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6));
}
.koi-rail__koi svg { width: 100%; height: 100%; overflow: visible; }
.koi-rail__koi.is-up { rotate: 180deg; }
.koi-rail.is-dragging .koi-rail__koi { cursor: grabbing; }
/* Leib in zwei Teilen (vorn, hinten): Füllung und Umriss getrennt, damit an
   der Gelenkstelle keine Naht zu sehen ist */
.k-fill { fill: #000; }
.k-line { fill: none; stroke: #434a59; stroke-width: 1; stroke-linecap: round; }
.k-fin { fill: var(--c-meditation); }
.k-vein { fill: none; stroke: #8f78e6; stroke-width: .8; stroke-linecap: round; }
.k-pec { fill: var(--c-fitness); }
.k-pec-vein { fill: none; stroke: #f26c6c; stroke-width: .7; stroke-linecap: round; }
.k-scales path { fill: none; stroke-width: 1.1; stroke-linejoin: round; }
.k-dorsal { stroke: var(--c-journal); stroke-width: 1.3; stroke-linecap: round; }
.k-gill { fill: none; stroke: #434a59; stroke-width: .9; }
.k-eye { fill: var(--c-meditation); }
.k-barbel { fill: none; stroke: #434a59; stroke-width: .9; stroke-linecap: round; }
/* Schwimmen: der Hinterleib schwingt um die Mitte, die Schwanzflosse folgt
   eine Viertelschwingung später – wie eine Peitsche, nicht nur die Spitze */
.k-rear { transform-origin: 20px 76px; animation: rear var(--swim, 1.2s) ease-in-out infinite; }
.k-tail { transform-origin: 20px 37px; animation: tail var(--swim, 1.2s) ease-in-out infinite;
  animation-delay: calc(var(--swim, 1.2s) * -0.25); }
@keyframes rear { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes tail { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@media (pointer: coarse) {
  .koi-rail { width: 22px; right: 2px; }
  .koi-rail__koi { width: 18px; height: 54px; margin-left: -9px; }
  /* wie die Scroll-Anzeige des Telefons: nur beim Scrollen da (site.js, wakeRail) */
  .koi-rail { opacity: 0; transition: opacity 600ms var(--ease-out); }
  html.rail-awake .koi-rail { opacity: 1; transition-duration: 150ms; }
}
html.menu-open .koi-rail { visibility: hidden; }

.dbg { position: fixed; left: 8px; bottom: 8px; z-index: 99; margin: 0; padding: 8px 10px; font: 11px/1.4 var(--font-mono);
  background: rgba(0, 0, 0, .7); color: #9f9; pointer-events: none; white-space: pre-wrap; max-width: 60vw; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .koi-rail__river, .k-tail, .k-rear, .scroll-hint i { animation: none; }
}

/* ---------- Einblenden nach der Reise (site.js) ------------------------------
   Gleitet von unten herein, je Gruppe versetzt (--rd); Titel heben sich
   zusätzlich aus einer Maske. Nach dem Auftritt entfernt site.js das
   Attribut wieder – dann gelten die eigenen Übergänge (Hover). */
[data-reveal] {
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), clip-path 900ms var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
[data-reveal]:not(.is-in) { opacity: 0; transform: translateY(40px) scale(.975); }
.sec__head > [data-reveal]:not(.is-in) { transform: translateY(22px); }
.sec__head > .title[data-reveal] { clip-path: inset(-10% -5% -20% -5%); }
.sec__head > .title[data-reveal]:not(.is-in) { clip-path: inset(-10% -5% 100% -5%); transform: translateY(36px); }
@media (prefers-reduced-motion: reduce) {
  .beat--home.is-live .amarks li { animation: none; }
  [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .sec__head > .title[data-reveal]:not(.is-in) { clip-path: none; transform: none; }
}

/* =========================================================
   Die Reise zum Anfassen (seit 11.10.2026, umgebaut 12.10.2026):
   Home als Film, die Bereichs-Kacheln, Stats und Tutorial als Film
   mit Kapiteln, die Wege zurück – und das Fenster, in dem jeder
   Bereich als Film läuft (mit seinen Zahlen).
   ========================================================= */

/* ---------- 2 · acht Kacheln: Fläche mit Eckschnitt, Zeichen wie in der App ---- */
.atiles { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 8.6rem)); max-width: none !important; }
.atile {
  --cut: 14px; position: relative; isolation: isolate; width: 100%; min-height: 108px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 14px 12px;
  border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit;
  clip-path: var(--cut-clip); transition: transform var(--dur) var(--ease-out);
}
.atile::before, .atile::after { content: ""; position: absolute; z-index: -1; clip-path: var(--cut-clip); }
.atile::before { inset: 0; background: linear-gradient(150deg, color-mix(in srgb, var(--a) 70%, transparent), rgba(255, 255, 255, .12) 55%); }
.atile::after { inset: 1px; background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--a) 18%, transparent), transparent 70%),
  rgba(18, 21, 26, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background var(--dur); }
.atile:hover { transform: translateY(-3px); }
.atile:hover::after { background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--a) 30%, transparent), transparent 75%),
  rgba(22, 25, 31, .86); }
.atile:active { transform: translateY(0) scale(.98); }
.atile:focus-visible { outline-offset: 2px; }
.atile__mark, .adlg__mark {
  display: grid; place-items: center; flex: none; width: 38px; height: 34px; margin-bottom: 8px; background: var(--a);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transition: transform var(--dur) var(--ease-out);
}
.atile__mark i, .adlg__mark i { width: 19px; height: 19px; background: #16191f;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.atile:hover .atile__mark { transform: rotate(-10deg) scale(1.06); }
.atile b { font: 600 15.5px/1.2 var(--font); }
.atile small { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .04em; color: color-mix(in srgb, var(--a) 70%, #fff); }

.hint { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font: 500 11.5px/1.2 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
/* ein kleiner Zeiger, der tippt */
.hint i { width: 12px; height: 14px; background: var(--text-faint);
  clip-path: polygon(0 0, 0 78%, 26% 58%, 44% 100%, 62% 92%, 44% 52%, 80% 52%);
  animation: tap 2.2s var(--ease-out) infinite; }
@keyframes tap { 0%, 60%, 100% { transform: translate(0, 0); } 70% { transform: translate(2px, 2px) scale(.9); } }

/* ---------- 1 · Home: Text und Film, darunter die acht Bereiche als Zeichen ------ */
/* Text und Film nebeneinander – Home (1, links), Stats (3, rechts), Tutorial (4, im Tor) */
.beat--duo > .duo { max-width: none; width: auto; display: grid; grid-template-columns: minmax(0, 22rem) auto;
  gap: clamp(22px, 3vw, 44px); align-items: center; }
.duo__film .film__screen { height: min(58vh, 520px); }
.duo__film .film__cap { max-width: 15rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(15, 17, 20, 1); color: var(--text); }
.duo__text > :last-child { margin-bottom: 0; }
.beat--home .duo__film { --a: var(--c-home); }
.beat--stats .duo__film, .beat--stats .fsteps { --a: var(--c-calendar); }
.beat--tour .duo__film, .beat--tour .fsteps { --a: var(--c-meditation); }
/* der Film leuchtet leise in seiner Farbe – der Bildschirm ist das Wichtigste der Station */
.duo__film .film__screen { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px color-mix(in srgb, var(--a) 16%, transparent)); }

/* die acht Bereiche: Zeichen mit Namen, wie die Kacheln auf Home – nur kleiner */
.amarks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 24rem !important; }
.amarks li {
  --cut: 7px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; clip-path: var(--cut-clip);
  font: 500 12.5px/1 var(--font); color: var(--text); white-space: nowrap;
  background: color-mix(in srgb, var(--a) 13%, rgba(18, 21, 26, .78));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.amarks i { display: grid; place-items: center; width: 22px; height: 19px; flex: none; background: var(--a);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.amarks i::after { content: ""; width: 12px; height: 12px; background: #16191f;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
/* nacheinander, sobald die Station dran ist (site.js setzt .is-live) */
.beat--home.is-live .amarks li { animation: amark 520ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 55ms); }
@keyframes amark { from { opacity: 0; transform: translateY(6px) scale(.96); } }

/* ---------- Kapitel eines Films: eine Zeile je Aufnahme, die laufende füllt sich ---- */
.fsteps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 3px; max-width: 22rem !important; counter-reset: none; }
.adlg__steps button, .fsteps button {
  --cut: 8px; position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline;
  padding: 7px 12px 8px; border: 0; background: rgba(255, 255, 255, .04); color: var(--text-muted); text-align: left;
  font: 400 13.5px/1.35 var(--font); cursor: pointer; clip-path: var(--cut-clip); overflow: hidden;
  transition: background var(--dur), color var(--dur);
}
.fsteps button { background: rgba(18, 21, 26, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.adlg__steps button:hover, .fsteps button:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.adlg__steps button[aria-current], .fsteps button[aria-current] { background: color-mix(in srgb, var(--a) 13%, rgba(18, 21, 26, .8)); color: var(--text); }
.adlg__no, .fsteps__no { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-faint); }
.adlg__steps button[aria-current] .adlg__no, .fsteps button[aria-current] .fsteps__no { color: var(--a); }
.adlg__steps i, .fsteps i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--a); }
.adlg__steps button[aria-current] i, .fsteps button[aria-current] i { width: calc(var(--p, 0) * 100%); }

/* ---------- 4 · im Tor: das Tutorial – links der Text, rechts der Film -------------- */
.beat--tour .beat__split { grid-template-columns: minmax(0, 1fr) 40% minmax(0, 1fr); }
.beat--tour .beat__split > .duo__film { grid-column: 3; justify-self: start; }
.beat--tour .title { margin: 0 0 14px; }
.beat--tour .body { font-size: clamp(15.5px, 1.15vw, 18px); margin: 0; }

/* ---------- 5 · ein Jahr wird ein Bild (js/year.js) ---------------------------------
   Die Bühne hat feste Maße (600 × 338 wie der Bericht in 16:9) und wird als
   Ganzes skaliert (--s); innen rechnet alles in diesen Pixeln. Erst liegt
   das Raster auf einem leisen Schleier, dann wird der Schleier zum Papier
   des Berichts, und Kopf, Ring und Zahlen kommen um das Raster herum. */
.beat--whole .legend--big { font-size: clamp(22px, 2.3vw, 32px); margin-bottom: 14px; }
.beat--whole .eyebrow--lined { justify-content: center; }
.beat--whole .eyebrow--lined::after { content: ""; width: 36px; height: 1px; flex: none;
  background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .5)); }
.beat--whole .title { font-size: clamp(30px, 3.3vw, 48px); margin-bottom: 12px; }
.beat--whole .body { max-width: 34rem; margin: 0 auto 20px; font-size: clamp(15.5px, 1.15vw, 17.5px); }
.yr { width: min(560px, 100%); max-width: none !important; display: grid; gap: 8px; }
.yr__box { position: relative; width: 100%; height: 315px; }
.yr__stage { position: absolute; left: 0; top: 0; width: 600px; height: 338px; transform: scale(var(--s, .9333)); transform-origin: 0 0;
  text-align: left; isolation: isolate; }
.yr__stage::before, .yr__stage::after { content: ""; position: absolute; inset: 88px 0 106px; --cut: 16px; clip-path: var(--cut-clip); pointer-events: none;
  transition: inset 900ms var(--ease-out), background 800ms var(--ease-out), opacity 800ms var(--ease-out); }
/* erst ein schmales Band um das Raster – beim Bericht wächst es zum ganzen Bild */
.yr.is-poster .yr__stage::before, .yr.is-poster .yr__stage::after { inset: 0; }
.yr__stage::before { z-index: -1; background: rgba(15, 17, 20, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* der Rand: eine Kontur aus zwei Masken (clip-path schnitte einen border ab) */
.yr__stage::after { z-index: 3; padding: 1px; opacity: .45;
  background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, .08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.yr.is-poster .yr__stage::before { background: rgba(15, 17, 20, .95); }
.yr.is-poster .yr__stage::after { opacity: 1; }

/* während das Jahr sich füllt: oben die Woche */
.yr__hud { position: absolute; left: 22px; right: 22px; top: 101px; display: flex; justify-content: space-between;
  font: 500 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
  transition: opacity 400ms var(--ease-out); }
.yr__hud span:last-child { color: var(--text); letter-spacing: .06em; }
.yr.is-poster .yr__hud { opacity: 0; }

/* das Raster: 53 Wochen × 7 Tage, Spalte für Spalte */
.yr__grid { position: absolute; left: 0; top: 123px; width: 600px; z-index: 1; transform-origin: 0 0;
  transform: var(--from); transition: transform 900ms var(--ease-out); }
.yr.is-poster .yr__grid { transform: var(--to); }
.yr__months { position: relative; height: 14px; font: 500 9px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-faint); }
.yr__months span { position: absolute; top: 0; }
.yr__cells { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 9.46px); grid-auto-columns: 9.46px; gap: 1.89px; }
.yr__cells i { position: relative; background: rgba(255, 255, 255, .07); }
.yr__cells i.is-out { visibility: hidden; }
.yr__cells i::after { content: ""; position: absolute; inset: 0; background: var(--c, transparent); opacity: 0; transform: scale(.3);
  transition: opacity 220ms ease-out, transform 340ms cubic-bezier(.34, 1.56, .64, 1); transition-delay: inherit; }
.yr__cells i.on::after { opacity: var(--l, 0); transform: none; }

/* der Bericht um das Raster */
.yr__poster { position: absolute; inset: 0; z-index: 1; padding: 22px; display: grid; grid-template-rows: repeat(4, auto); align-content: space-between; }
.yr__poster > * { opacity: 0; transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); }
.yr__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; transform: translateY(-12px); }
.yr__nums { transform: translateY(12px); }
.yr.is-poster .yr__poster > * { opacity: 1; transform: none; }
.yr.is-poster .yr__head { transition-delay: 250ms; }
.yr.is-poster .yr__nums { transition-delay: 500ms; }
.yr.is-poster .yr__foot { transition-delay: 700ms; }
.yr__kick { display: block; font: 500 8.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.yr__year { display: block; margin-top: 6px; font: 700 54px/.9 var(--font-mono); letter-spacing: -.05em; color: var(--text); }
.yr__sub { display: block; margin-top: 5px; font: italic 300 15px/1 var(--font-serif); color: var(--text-muted); }
.yr__donut { position: relative; width: 78px; height: 78px; }
.yr__donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.yr__donut circle { fill: none; stroke: var(--c); stroke-width: 5.5; stroke-dasharray: 0 100; stroke-dashoffset: var(--o);
  transition: stroke-dasharray 900ms var(--ease-out); transition-delay: calc(300ms + var(--i, 0) * 70ms); }
.yr.is-poster .yr__donut circle { stroke-dasharray: var(--p) 100; }
.yr__donut .yr__ring-base, .yr.is-poster .yr__donut .yr__ring-base { stroke: rgba(255, 255, 255, .07); stroke-dasharray: 100 0; transition: none; }
.yr__donut span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.yr__donut b { font: 600 16px/1 var(--font-mono); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.yr__donut small { margin-top: 3px; font: 400 7px/1.2 var(--font); color: var(--text-faint); }
.yr__legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto; gap: 4px 16px;
  font: 500 9px/1.2 var(--font); color: var(--text-muted); }
.yr__legend li { display: flex; align-items: center; gap: 6px; }
.yr__legend i { width: 6px; height: 6px; flex: none; background: var(--c); }
.yr__legend b { margin-left: auto; padding-left: 8px; font: 500 8.5px/1 var(--font-mono); color: var(--text); }
.yr__slot { width: 556px; height: 85px; }
.yr__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.yr__nums span { display: grid; gap: 4px; }
.yr__nums b { font: 600 18px/1 var(--font-mono); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.yr__nums small { font: 400 9px/1.2 var(--font); color: var(--text-faint); }
.yr__foot { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font: 500 7.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-faint); }

/* Halten (seit 13.10.2026 ohne Regler – der Balken wirkte wie ein Videoplayer):
   ein kleiner Knopf unten rechts in der Ecke, leise, bis man auf ihn zeigt.
   Das Jahr läuft in Schleife, also muss es sich anhalten lassen (WCAG 2.2.2). */
.yr .yr__toggle { position: absolute; right: 0; bottom: max(0px, calc(var(--s, 1) * 106px - 34px)); z-index: 5; opacity: .55;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), bottom 900ms var(--ease-out), right 900ms var(--ease-out); }
/* erst knapp unter dem Band, im Bericht in seiner Ecke */
.yr.is-poster .yr__toggle { right: 10px; bottom: 10px; }
.yr .yr__toggle:hover, .yr .yr__toggle:focus-visible, .yr.is-paused .yr__toggle { opacity: 1; }
.yr.is-paused .yr__toggle i { clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
@media (prefers-reduced-motion: reduce) {
  .yr__cells i::after, .yr__grid, .yr__poster > *, .yr__donut circle, .yr__stage::before, .yr__stage::after, .yr__hud, .yr .yr__toggle { transition: none; }
}

/* ---------- der Film: ein Telefon mit echten Bildschirmen ---------------------- */
.film { display: grid; justify-items: center; gap: 10px; }
.film__screen {
  --cut: 18px; position: relative; height: min(60vh, 560px); aspect-ratio: 464 / 1004; overflow: hidden;
  clip-path: var(--cut-clip); background: #0f1114;
}
/* der Rand des Telefons: ein Rahmen aus zwei Masken über dem Bild, weil
   clip-path einen border mit abschneiden würde */
.film__screen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; clip-path: var(--cut-clip);
  padding: 2px; background: linear-gradient(165deg, color-mix(in srgb, var(--a, #fff) 80%, transparent), rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, .08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.film__clip { position: absolute; inset: 0; opacity: 0; transition: opacity 520ms var(--ease-out); }
.film__clip.is-on { opacity: 1; z-index: 2; }
.film__clip.is-leaving { opacity: 1; z-index: 1; }
.film__clip.is-rewind { animation: rewind 640ms var(--ease-out); }
@keyframes rewind { 0% { opacity: 1; } 42%, 58% { opacity: 0; } 100% { opacity: 1; } }
.film__strip { position: absolute; inset: 0; overflow: hidden; }
.film__strip img, .film__still { display: block; width: 100%; height: auto; will-change: transform; }
.film__still { transform-origin: 50% 30%; }
/* ein echter Mitschnitt (films.js, video): füllt das Telefon, das Standbild steht, bis er läuft */
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0f1114; }
.film__top, .film__tabs { position: absolute; left: 0; width: 100%; height: auto; pointer-events: none; }
.film__top { top: 0; }
.film__tabs { bottom: 0; }
.film__bar { display: flex; align-items: center; gap: 10px; }
.film__toggle {
  --depth: 2px; position: relative; isolation: isolate; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 0;
  background: none; cursor: pointer; display: grid; place-items: center; transition: transform var(--dur-fast) var(--ease-out);
}
.film__toggle::before, .film__toggle::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.film__toggle::before { background: var(--bg-deep); transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out); }
.film__toggle::after { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.film__toggle:active { transform: translate(var(--depth), var(--depth)); }
.film__toggle:active::before { opacity: 0; }
/* läuft: zwei Balken (Pause) – angehalten: ein Dreieck (Weiter) */
.film__toggle i { width: 9px; height: 10px; background: var(--text);
  clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%, 0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0); }
.film.is-paused .film__toggle i { clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.film__dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.film__dots button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.film__dots i { position: relative; width: 22px; height: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.film__dots i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--a, #fff); }
.film__dots [aria-current] i::after { width: calc(var(--p, 0) * 100%); }
.film--still .film__dots [aria-current] i::after, .film.is-paused .film__dots [aria-current] i::after { width: 100%; }
.film__cap { margin: 0; min-height: 2.7em; max-width: 19rem; text-align: center; font-size: 13.5px; line-height: 1.35;
  color: var(--text-muted); text-wrap: balance; }
/* Reduce motion: die lange Seite scrollt man selbst */
.film--still .film__strip { overflow-y: auto; scrollbar-width: none; }
.film--still .film__strip::-webkit-scrollbar { display: none; }
.duo__film { --a: var(--c-calendar); }

/* ---------- der Dialog: ein Bereich als Film -------------------------------------- */
html.dlg-open { overflow: hidden; }
.adlg {
  /* zwei Schichten wie jede Fläche: der Dialog selbst ist der Rand, das Blatt
     darin die Fläche (clip-path schnitte einen border an den Schrägen ab) */
  --cut: 26px; width: min(1000px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 1px; border: 0; color: var(--text); overflow: hidden; clip-path: var(--cut-clip);
  background: linear-gradient(150deg, color-mix(in srgb, var(--a, #fff) 70%, transparent), rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, .08));
}
.adlg::backdrop { background: rgba(9, 11, 13, .62); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
.adlg[open] { animation: dlg-in 420ms var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.adlg__panel {
  --cut: 25px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 48px); padding: clamp(22px, 3vw, 36px); max-height: calc(100dvh - 34px); overflow: auto;
  clip-path: var(--cut-clip); scrollbar-width: thin;
  background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--a, #fff) 16%, transparent), transparent 70%), #15181d;
}
.adlg__film { align-self: center; }
.adlg__film .film__screen { height: min(68dvh, 600px); }
.adlg__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 4px; }
.adlg__head { display: flex; align-items: center; gap: 14px; padding-right: 52px; }
.adlg__mark { width: 52px; height: 46px; margin: 0; }
.adlg__mark i { width: 25px; height: 25px; }
.adlg__kick { margin: 0 0 6px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.adlg__title { margin: 0; font: 350 clamp(32px, 3.4vw, 46px)/1 var(--font-serif); letter-spacing: -.015em; }
.adlg__close { position: absolute; top: clamp(16px, 2.4vw, 28px); right: clamp(16px, 2.4vw, 28px); z-index: 4;
  width: 44px; min-height: 44px; padding: 0; }
.adlg__close i { width: 14px; height: 14px; background: var(--text);
  clip-path: polygon(14% 0, 50% 36%, 86% 0, 100% 14%, 64% 50%, 100% 86%, 86% 100%, 50% 64%, 14% 100%, 0 86%, 36% 50%, 0 14%); }
.adlg__lead { margin: 0; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.5; color: var(--text); max-width: 34rem; }
/* was eingebaut ist, in Zahlen */
.adlg__nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.adlg__nums[hidden] { display: none; }
.adlg__nums li { --cut: 9px; display: grid; gap: 4px; align-content: start; padding: 10px 12px; clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--a) 9%, rgba(255, 255, 255, .03)); }
.adlg__nums b { font: 600 24px/1 var(--font-mono); letter-spacing: -.03em; color: var(--a); font-variant-numeric: tabular-nums; }
.adlg__nums span { font-size: 12.5px; line-height: 1.3; color: var(--text-muted); }
.adlg__feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.adlg__feats li { position: relative; padding-left: 26px; color: var(--text-muted); font-size: 15px; }
.adlg__feats li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 12px; background: var(--a);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.adlg__foot { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; padding-top: 6px; }
.adlg__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adlg__try { min-height: 44px; font-size: 14px; }
@media (max-width: 1000px) { .adlg__foot { grid-template-columns: 1fr; } }
.adlg__nav .btn { min-height: 44px; font-size: 14px; }
.adlg__nav .btn > span { display: inline-flex; align-items: center; gap: 8px; }
.adlg__arrow { width: 7px; height: 11px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.adlg__arrow--back { transform: scaleX(-1); }

/* die Szenen des Films: eine Zeile je Aufnahme, die laufende leuchtet und füllt sich */
.adlg__film-steps { display: grid; gap: 8px; }
.adlg__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
@media (min-width: 721px) { .adlg .film__cap { display: none; } }
@media (max-width: 720px) { .adlg__film-steps { display: none; } }

/* das Bento darunter: jede Karte hat ihren Film */
.area__watch { align-self: flex-start; margin-top: 14px; min-height: 36px; padding: 0 14px; font-size: 13.5px; gap: 8px; }
.area__watch i { width: 9px; height: 10px; background: var(--a); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Datenschutz: sechs Schritte in zwei Reihen */
.flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- hochkant und schmal ------------------------------------------------- */
@media (max-aspect-ratio: 1199/1000) {
  .atiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .atile { --cut: 10px; min-height: 0; align-items: center; text-align: center; padding: 10px 4px 9px; gap: 0; }
  .atile__mark { width: 32px; height: 28px; margin-bottom: 6px; }
  .atile__mark i { width: 16px; height: 16px; }
  .atile b { font-size: 12px; }
  .atile small { display: none; }
  .hint { margin-top: 10px; }
  /* Home, Stats, Tutorial: das Telefon klein rechts unten neben dem Text – der Karpfen bleibt frei */
  .beat--duo > .duo, .beat--tour .beat__split { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; width: 100%; align-items: end; }
  .beat--tour .beat__split > .duo__film { grid-column: 2; }
  .beat--tour { justify-content: flex-end; }
  .duo__film .film__screen { --cut: 12px; height: min(34vh, 262px); }
  .beat--duo .title, .beat--tour .title { font-size: 29px; margin-bottom: 10px; }
  .duo__film .film__cap { display: none; }
  .duo__text .body, .duo__text .fsteps { display: none; }
  .duo__text .legend { margin-bottom: 12px; }
  /* die acht Bereiche nur als Zeichen – die Namen stehen in der nächsten Station */
  .amarks { display: grid; grid-template-columns: repeat(4, max-content); gap: 4px; }
  .amarks li { padding: 3px; font-size: 0; gap: 0; }
  .amarks i { width: 20px; height: 17px; }
  .amarks i::after { width: 11px; height: 11px; }
  /* Station 5: das Bild zuerst – der Satz darunter steht schon im Titel */
  .beat--whole .body { display: none; }
  .beat--whole .legend--big { font-size: 20px; margin-bottom: 10px; }
  .beat--whole .title { font-size: 27px; margin-bottom: 14px; }
  .yr { width: 100%; }
}
@media (max-width: 720px) {
  .adlg { --cut: 0px; width: 100vw; height: 100dvh; max-height: none; margin: 0; padding: 0; }
  .adlg__panel { --cut: 0px; grid-template-columns: 1fr; gap: 18px; height: 100dvh; max-height: none; padding: 16px var(--gutter) 24px; }
  .adlg__film .film__screen { height: min(56dvh, 520px); }
  .adlg__close { position: fixed; top: 14px; right: 14px; }
  .adlg__title { font-size: 32px; }
}
@media (max-width: 860px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .flow { grid-template-columns: 1fr; gap: 8px; }
  /* eine Zeile je Schritt: Sechseck links, Text daneben – halb so hoch */
  .flow li { grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: start;
    padding: 16px 18px 16px 16px; }
  .flow__hex { grid-row: span 2; margin-top: 2px; }
  .dl__art { height: 168px; padding-top: 22px; }
  .dl__body { padding: 16px 18px 20px; }
  .dl__opt--live .btn { width: 100%; }
  .fb { padding: 22px 18px; }
  .fb__send .btn { flex: 1 1 100%; }
}
@media (max-width: 720px) {
  .adlg__panel { padding-top: calc(16px + var(--safe-t)); padding-bottom: calc(24px + var(--safe-b)); }
  .adlg__close { top: calc(14px + var(--safe-t)); }
}
@media (prefers-reduced-motion: reduce) {
  .hint i, .adlg[open], .film__clip.is-rewind { animation: none; }
  .film__clip { transition: none; }
}


/* =========================================================
   Die Reise auf jedem Bildschirm (13.10.2026)

   EIN Maß für alle Stationen: Titel, Sage, Text, Marke, Textspalte und
   Filmhöhe stehen als Token an .beat (--t-*, --col, --film-h) und gelten
   in jeder Station gleich – keine Station hat größere Schrift oder einen
   größeren Film als die nächste. Ausnahmen mit Absicht: der Titel der
   Sage (Station 0) und der Aufruf am Schluss (6), beide .display.

   Quer (Rechner, Tablet quer, Telefon quer): Schrift fließend mit clamp(),
   nach Breite UND Höhe (ein breiter, flacher Bildschirm darf nicht
   überlaufen). Die Filme sind so hoch, wie das Bild unter der Leiste
   hergibt. Stats steht mittig zwischen Karpfen und Rand, das Tutorial
   mittig zwischen Tor und Rand (--gate: halbe Breite des Tors; die Szene
   rechnet mit festem Bildwinkel in der Höhe, das Tor ist also so breit,
   wie das Bild hoch).

   Hochkant (Telefon, Tablet hoch): der Film ist die Bühne – er füllt die
   Mitte zwischen Kapitelleiste und Text. Der Text darunter hat in allen
   drei Film-Stationen dieselbe Höhe (--story-text, gemessen in site.js),
   also steht jeder Film gleich groß an derselben Stelle.
   ========================================================= */
.beat--home .fsteps { --a: var(--c-home); }
.beat .title { font-size: var(--t-title, clamp(36px, 4.7vw, 66px)); }
.beat .legend { font-size: var(--t-legend, clamp(19px, 1.55vw, 23.5px)); }
.beat .body { font-size: var(--t-body, clamp(16.5px, 1.32vw, 20px)); }
.beat .eyebrow { font-size: var(--t-eye, 11.5px); }

@media (min-aspect-ratio: 6/5) {
  .beat {
    --t-title: clamp(34px, min(3.9vw, 7.4vh), 78px);
    --t-legend: clamp(17px, min(1.4vw, 2.7vh), 26px);
    --t-body: clamp(16px, min(1.2vw, 2.3vh), 21px);
    --t-eye: clamp(11.5px, min(.8vw, 1.55vh), 14px);
    --col: clamp(21rem, 28vw, 32rem);
    --side: max(var(--gutter), 5.5vw);
    --film-h: clamp(340px, calc(100vh - var(--nav-total) - 150px), 860px);
    padding-bottom: 84px;          /* unten die Kapitelleiste */
  }
  .beat > * { max-width: min(46rem, 44vw); }
  .beat--center > * { max-width: min(54rem, 72vw); }
  .beat.beat--gate > * { max-width: none; }
  .beat .display { font-size: clamp(48px, min(8.4vw, 15.5vh), 160px); }
  .beat .display--sm { font-size: clamp(44px, min(6.4vw, 12vh), 120px); }
  .beat .title { line-height: 1.04; margin-bottom: clamp(14px, 2vh, 20px); }
  .beat .legend { margin-bottom: clamp(16px, 2.6vh, 26px); line-height: 1.45; }
  .beat .body { line-height: 1.55; margin-bottom: 0; }
  .beat .fine { font-size: clamp(12.5px, min(.85vw, 1.65vh), 15px); }
  .beat--hero .actions .btn { min-height: clamp(48px, 3.3vw, 58px); padding: 0 clamp(22px, 1.6vw, 30px); font-size: clamp(15px, 1vw, 17.5px); }
  .beat--hero .legend { font-size: clamp(18px, min(1.5vw, 2.85vh), 28px); }

  /* 2 · die acht Kacheln: wachsen mit dem Bild */
  .atiles { grid-template-columns: repeat(4, clamp(8.6rem, 10.2vw, 13.5rem)); gap: clamp(10px, .8vw, 16px); margin-top: clamp(16px, 2.4vh, 24px); }
  .atile { --cut: clamp(14px, 1.1vw, 20px); min-height: clamp(108px, 15.5vh, 158px); gap: 4px;
    padding: clamp(14px, 1.15vw, 20px) clamp(14px, 1.15vw, 20px) clamp(12px, 1vw, 18px); }
  .atile__mark { width: clamp(38px, 2.9vw, 54px); height: auto; aspect-ratio: 38 / 34; margin-bottom: clamp(8px, .7vw, 12px); }
  .atile__mark i { width: 50%; height: 56%; }
  .atile b { font-size: clamp(15.5px, 1.15vw, 20.5px); }
  .atile small { font-size: clamp(10.5px, .78vw, 13px); }
  .hint { margin-top: 18px; font-size: clamp(11.5px, .8vw, 13.5px); }

  /* 1 · 3 · 4: dieselbe Spalte, dieselbe Filmhöhe, dieselbe Kapitelliste */
  .beat--duo > .duo { grid-template-columns: minmax(0, var(--col)) auto; gap: clamp(28px, 3.2vw, 64px); }
  .duo__film .film__screen { --cut: clamp(18px, 1.4vw, 26px); height: var(--film-h); }
  .duo__film .film__bar { gap: 12px; }
  /* die Liste daneben sagt, was läuft – die Zeile unter dem Film fiele doppelt */
  .duo__film .film__cap { display: none; }
  .fsteps { max-width: none !important; margin-top: clamp(18px, 2.6vh, 28px); gap: 4px; }
  .fsteps button { --cut: 10px; gap: 16px; padding: clamp(9px, 1.25vh, 13px) clamp(12px, 1vw, 18px);
    font-size: clamp(14.5px, min(1.08vw, 2.05vh), 19px); }
  .fsteps__no { font-size: clamp(11px, .78vw, 13.5px); }
  .fsteps i { height: 2.5px; }
  /* Home: die acht Zeichen als eine Reihe (die Namen stehen in Station 2) */
  .amarks { display: flex; flex-wrap: nowrap; gap: clamp(5px, .45vw, 8px); margin-top: clamp(16px, 2.4vh, 24px); max-width: none !important; }
  .amarks li { padding: clamp(4px, .35vw, 6px); font-size: 0; gap: 0; }
  .amarks i { width: clamp(24px, 1.9vw, 32px); height: auto; aspect-ratio: 22 / 19; }
  .amarks i::after { width: 55%; height: 63%; }

  /* 3 · Stats: mittig zwischen dem Karpfen (links, bis ~36 %) und dem Rand */
  /* fast quadratisch reicht der Platz rechts des Karpfens nicht: dann rückt der Block nach links (min) */
  .beat--stats { align-items: center;
    padding-left: max(var(--side), min(39vw, calc(100vw - var(--side) - 28px - var(--col) - clamp(28px, 3.2vw, 64px) - var(--film-h) * .4622))); }
  .beat--stats > .duo { width: auto; }

  /* 4 · im Tor: Text links bis ans Tor, Film mittig zwischen Tor und Rand */
  .beat--tour { --gate: 35vh; --g: 24px; --pl: var(--side); padding-left: var(--pl); padding-right: 40px;
    --tf: clamp(min(400px, var(--film-h)), calc((50vw - var(--gate) - 76px) * 2.16), var(--film-h)); }
  .beat--tour .beat__split { gap: var(--g);
    grid-template-columns: max(21rem, calc(50vw - var(--gate) - var(--pl) - var(--g))) minmax(0, calc(2 * var(--gate))) minmax(calc(var(--tf) * .4622 + 2px), 1fr); }
  .beat--tour .duo__text { max-width: var(--col); }
  .beat--tour .beat__split > .duo__film { grid-column: 3; justify-self: center; }
  /* fast quadratisch: das Tor nimmt die Breite – der Film wird nicht kleiner als 400 px */
  .beat--tour .duo__film .film__screen { height: var(--tf); }

  /* 5 · das Jahr: so groß, wie das Bild unter dem Titel hergibt */
  .beat--whole .body { max-width: 40rem; margin: 0 auto clamp(18px, 2.6vh, 26px); }
  .yr { width: min(64vw, clamp(560px, calc((100vh - 450px) * 1.775), 800px)); }
}

/* quer, aber fast quadratisch (4:3, 3:2 – kleine Laptops, Tablet quer): das Tor
   füllt die Breite ohnehin – der Film des Tutorials bleibt so groß wie die
   anderen und liegt über dem rechten Pfeiler, statt zu schrumpfen */
@media (min-aspect-ratio: 6/5) and (max-aspect-ratio: 149/100) {
  .beat--tour { --tf: var(--film-h); }
}

/* quer und flach (Telefon quer, kleines Fenster): nur das Wichtigste */
@media (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .beat { --t-title: clamp(26px, 7.6vh, 34px); --film-h: calc(100vh - var(--nav-total) - 64px);
    padding-top: calc(var(--nav-total) + 10px); padding-bottom: 14px; }
  /* zu flach für eine Kapitelleiste über dem Text – blättern geht mit dem Finger, „Download" steht im Menü */
  .chapters { display: none; }
  .beat .legend, .beat .scroll-hint, .beat .body, .beat .hint, .amarks { display: none; }
  .beat--hero .legend { display: block; margin-bottom: 12px; }
  .beat--hero .legend .long { display: none; }
  .beat--hero .legend .short { display: inline; }
  .beat .display { margin-bottom: 12px; }
  .atiles { grid-template-columns: repeat(4, minmax(0, 7.5rem)); gap: 6px; }
  .atile { min-height: 0; padding: 9px 10px; }
  .atile__mark { width: 30px; margin-bottom: 4px; }
  .atile small { display: none; }
  .fsteps { margin-top: 10px; }
  .fsteps button { padding: 6px 10px; font-size: 13px; }
  .yr { width: clamp(260px, calc((100vh - 200px) * 1.775), 520px); }
}

@media (max-aspect-ratio: 1199/1000) {
  .beat {
    --t-title: clamp(29px, 8.4vw, 44px);
    --side: var(--gutter);           /* dieselbe Kante wie Leiste und Abschnitte */
    --t-legend: clamp(16px, 4.3vw, 21px);
    --t-body: 16px;
    --t-eye: 11.5px;
  }
  .beat .title { line-height: 1.06; margin-bottom: 0; }
  /* Anfang und Schluss: im selben Verhältnis zum Titel wie am Rechner (~1,5×) */
  .beat .display { font-size: clamp(46px, 13vw, 76px); }
  .beat .display--sm { font-size: clamp(42px, 11.4vw, 64px); }
  .beat .legend { margin-bottom: 10px; }
  .beat .eyebrow { margin-bottom: 10px; }
  .beat--areas .title, .beat--whole .title { margin-bottom: 14px; }

  /* 2 · die acht Kacheln: zu zweit, Zeichen links, Name und Inhalt daneben */
  .atiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 4px; }
  .atile { --cut: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center;
    column-gap: 10px; row-gap: 2px; min-height: 60px; padding: 10px 10px 10px 11px; text-align: left; }
  .atile__mark { grid-row: span 2; width: 36px; height: 32px; margin: 0; }
  .atile__mark i { width: 19px; height: 19px; }
  .atile b { font-size: 15.5px; align-self: end; }
  /* Schrift der Seite statt Mono: „Write · look back" passt so in eine Zeile */
  .atile small { display: block; font: 500 12.5px/1.25 var(--font); letter-spacing: 0; white-space: nowrap; align-self: start; }
  .hint { margin-top: 14px; }

  /* 1 · 3 · 4: der Film füllt die Mitte, der Text steht darunter – überall gleich hoch */
  .beat--duo, .beat--tour { justify-content: flex-start; padding-top: calc(var(--nav-total) + 64px); }
  /* auch Stats (rechts): dieselben Ränder wie die anderen – der Film steht überall an derselben Stelle */
  .beat--duo.beat--right { padding-right: var(--side); }
  .beat--duo > .duo, .beat--tour .beat__split {
    flex: 1 1 auto; min-height: 0; width: 100%; max-width: 40rem; align-self: center;
    display: flex; flex-direction: column; align-items: stretch; gap: clamp(16px, 2.6vh, 28px);
  }
  /* der Film selbst ist das Raster (films.js setzt .film an .duo__film): Bild oben, Knöpfe darunter */
  .duo__film { order: -1; flex: 1 1 0; min-height: 0; width: 100%; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .duo__film .film__screen { --cut: 16px; height: 100%; min-height: 0; }
  .duo__film .film__bar { justify-content: center; }
  .duo__film .film__cap { display: none; }
  .duo__text { flex: 0 0 var(--story-text, auto); display: flex; flex-direction: column; justify-content: flex-end; }
  .duo__text .body, .duo__text .fsteps { display: none; }
  /* Home: die acht Zeichen in einer Reihe */
  .amarks { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 14px; max-width: none !important; }
  .amarks li { padding: 4px; }
  .amarks i { width: clamp(24px, 6.4vw, 34px); height: auto; aspect-ratio: 22 / 19; }
  .amarks i::after { width: 55%; height: 62%; }

  /* 5 · das Jahr: fast von Rand zu Rand – jedes Pixel macht die Quadrate größer */
  .yr { width: min(calc(100vw - 16px), 720px); }
}
/* Tablet hochkant: der Text steht mittig unter dem Film, die Kacheln zu viert */
@media (max-aspect-ratio: 1199/1000) and (min-width: 600px) {
  .duo__text { text-align: center; align-items: center; }
  .duo__text .eyebrow--lined { justify-content: center; }
  .duo__text .eyebrow--lined::after { content: ""; width: 36px; height: 1px; flex: none;
    background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .5)); }
  .amarks { justify-content: center; }
  .atiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .atile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px;
    min-height: 124px; padding: 16px 16px 14px; }
  .atile__mark { width: 44px; height: 39px; margin-bottom: 10px; }
  .atile__mark i { width: 22px; height: 22px; }
  .atile b { font-size: 17px; align-self: auto; }
  .atile small { align-self: auto; }
}
@media (max-aspect-ratio: 1199/1000) and (min-width: 600px) and (min-height: 960px) {
  .beat { --t-body: 18px; }
  .duo__text .body { display: block; margin: 14px 0 0; max-width: 36rem; }
}
/* schmale Telefone (360 px): Kacheln enger, damit jede Zeile ganz bleibt */
@media (max-aspect-ratio: 1199/1000) and (max-width: 374px) {
  .atiles { gap: 6px; }
  .atile { column-gap: 8px; padding-inline: 9px 8px; }
  .atile__mark { width: 32px; height: 28px; }
  .atile__mark i { width: 16px; height: 16px; }
  .atile small { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-aspect-ratio: 1199/1000) and (min-height: 720px) {
  .beat--whole .body { display: block; margin-bottom: 18px; }
}
/* kleine Telefone (SE, mit den Leisten des Browsers): die Sage fällt in JEDER
   Station weg (außer am Anfang), damit der Film groß bleibt */
@media (max-aspect-ratio: 1199/1000) and (max-height: 640px) {
  .beat { --t-title: clamp(26px, 7.6vw, 32px); }
  .beat:not(.beat--hero):not(.beat--final) .legend, .beat .hint { display: none; }
  .atile { min-height: 52px; padding-block: 8px; }
  .atile small { display: none; }
  .amarks { margin-top: 10px; }
}

/* Die Abschnitte nach der Reise: dasselbe Maß wie die Reise (13.10.2026) –
   Titel, Text und Marke wie in den Stationen, damit die Seite aus einem
   Guss ist und nicht nach der Reise plötzlich größer oder kleiner wird */
.sec__head .title { font-size: clamp(34px, 3.9vw, 76px); line-height: 1.04; }
.sec__head .body { font-size: clamp(16px, 1.2vw, 21px); }
.sec__head .eyebrow { font-size: clamp(11.5px, .8vw, 14px); }
@media (max-aspect-ratio: 1199/1000) {
  .sec__head .title { font-size: clamp(29px, 8.4vw, 44px); line-height: 1.06; }
  .sec__head .body { font-size: 16px; }
}
/* Karten (Bereiche, Datenschutz, Download): wachsen auf großen Bildschirmen leise mit */
.area__text h3, .dl__title { font-size: clamp(20px, 1.3vw, 24px); }
.area__text p, .flow span:not(.flow__hex), .dl__body > p, .adlg__feats li { font-size: clamp(15px, .95vw, 17px); }
.flow b { font-size: clamp(16px, 1vw, 18px); }
@media (min-width: 641px) {
  .area--wide { grid-template-columns: minmax(0, 1fr) clamp(210px, 15vw, 270px); }
  /* ein gezeichnetes Bild (Körper, Monat, Notizen) braucht mehr Breite als ein Bildschirm */
  .area--wide:has(> .area__viz) { grid-template-columns: minmax(0, 1fr) clamp(250px, 20vw, 330px); }
  .area__shot, .area--wide .area__viz { height: clamp(280px, 19vw, 350px); }
}

/* ---------- Geschlossene Beta: drei Wege hinein (seit 13.10.2026) ----------
   Drei gleich breite Glasflächen; genau EIN gefüllter Knopf („Ask for an
   invite") – bis ein gültiger Schlüssel im Feld steht, dann übernimmt der
   Knopf daneben (site.js). */
.beta { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beta__way { padding: 26px 24px; display: grid; gap: 12px; align-content: start; grid-template-rows: auto auto 1fr auto; }
.beta__hex { width: 26px; height: 29px; background: var(--a);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 50% 0, 50% 14%, 12% 33%, 12% 67%, 50% 86%, 88% 67%, 88% 33%, 50% 14%); }
.beta__title { margin: 0; font-size: 20px; font-weight: 600; }
.beta__text { margin: 0; color: var(--text-muted); font-size: 15px; }
.beta__go { justify-self: start; }
.beta__key { display: grid; gap: 10px; }
.beta__key input {
  --cut: 10px; width: 100%; min-width: 0; border: 0; padding: 12px 16px; clip-path: var(--cut-clip);
  background: rgba(9, 11, 13, .7); color: var(--text); font: 500 16px/1.4 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.beta__key input::placeholder { color: var(--text-faint); }
.beta__key input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--c-home); }
.beta__key.is-ok input { box-shadow: inset 0 0 0 1.5px var(--c-nutrition); }
.beta__key.is-bad input { box-shadow: inset 0 0 0 1.5px var(--c-fitness); }
.beta__key .fine { margin: 0; }
.beta__key.is-ok .beta__hint { color: var(--c-nutrition); }
.beta__key.is-bad .beta__hint { color: var(--c-fitness); }
@media (max-width: 960px) { .beta { grid-template-columns: 1fr; max-width: 34rem; margin: 0 auto; } }

/* Der Verlauf unter „Check for a reply" (E2/E3) */
.fb-check__state { color: var(--text); font-weight: 600; }
.fb-check__state:focus { outline: none; }
.fb-check__day { color: var(--text-faint); }
.fb-thread { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.fb-thread__msg { --cut: 8px; display: grid; gap: 4px; padding: 12px 14px; clip-path: var(--cut-clip); background: rgba(255, 255, 255, .05); }
.fb-thread__msg--you { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); padding-block: 8px; }
.fb-thread__who { font: 500 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.fb-thread .fb-check__reply { color: var(--text); white-space: pre-line; overflow-wrap: anywhere; font: 400 15px/1.55 var(--font); letter-spacing: 0; }
.fb-check__state, .fb-check__day { font-family: var(--font); letter-spacing: 0; }
.fb-thread__go { justify-self: start; margin-top: 6px; }
.fb-more { display: grid; gap: 10px; margin-top: 10px; }
.fb-more textarea {
  --cut: 10px; width: 100%; border: 0; padding: 12px 14px; clip-path: var(--cut-clip);
  background: rgba(9, 11, 13, .7); color: var(--text); font: 400 16px/1.5 var(--font); resize: vertical;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.fb-more textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--c-home); }