/* Loribi – Website
   Ruhiger Einstieg nach Bevel, darunter die Woche als Magnettafel.
   Bronze = Kraft, Bleu = Laufen (Schema Denim). Keine dritte Akzentfarbe. */

:root, [data-pensum-theme], [data-pensum-mode] {
  /* Farben kommen aus farben.css (Farbschemata der App, Standard Denim).
     Hier nur die Namen, unter denen die Seite sie benutzt. Weil sie an jedem
     Element mit Schema oder Modus neu gesetzt werden, färbt ein Wechsel alles
     darunter um. */
  --grund: var(--p-bg-void);
  --flaeche: var(--p-bg-surface);
  --getoent: var(--p-bg-raised);
  --text: var(--p-text-primary);
  --text-2: var(--p-text-secondary);
  --linie: var(--p-line-hairline);
  --linie-stark: var(--p-line-strong);

  /* Säulen: Akzent für Text und Symbole, Fläche immer mit weißer Schrift */
  --kraft: var(--p-strength-fill);
  --kraft-text: var(--p-strength-accent);
  --kraft-grund: var(--p-bg-strength);
  --lauf: var(--p-run-fill);
  --lauf-text: var(--p-run-accent);
  --lauf-grund: var(--p-bg-run);
  --verlauf: linear-gradient(90deg, var(--p-strength-fill), var(--p-run-fill));
  --hof-kraft: var(--p-backdrop-strength);
  --hof-lauf: var(--p-backdrop-run);

  /* Magnettafel */
  --email: var(--p-bg-surface);
  --rahmen: #B5B3AE;
  --rahmen-hell: #D2D0CB;
  --raster: var(--p-line-hairline);
  --schraffur: var(--p-bg-raised);

  color: var(--text);
}

:root {
  /* Schrift: die Systemschrift, wie in der App (SF Pro auf Apple-Geräten) */
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-rund: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Größen (für das Regler-Panel in Phase 6) */
  --h1: clamp(2.6rem, 1.4rem + 5.2vw, 5.75rem);
  --h2: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  --h3: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --fliess: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --klein: .9375rem;

  /* Abstände */
  --rand: clamp(16px, 4vw, 56px);
  --abschnitt: clamp(88px, 7rem + 4vw, 176px);
  --breite: 1180px;
  --hero-oben: clamp(124px, 15vh, 168px);
  --hero-buehne-oben: clamp(40px, 6vh, 72px);

  /* Logo (gewählt 2026-10-20, Farbwelt „Denim satt“): die i-Punkte in Kupfer
     (Kraft) und Königsblau (Laufen), kräftiger als die App-Akzente.
     Quelle logo/runde3.py, Familie in logo/final/. */
  --logo-kraft: #A0662A;
  --logo-lauf: #1858B8;

  /* Bewegung */
  --ease-aus: cubic-bezier(.16, 1, .3, 1);
  --ease-feder: cubic-bezier(.34, 1.45, .64, 1);

  color-scheme: light;
}

/* Dunkel, wenn das System dunkel ist. Die Farbwerte setzt farben.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-pensum-mode]) {
    color-scheme: dark;
    --logo-kraft: #D08A44;
    --logo-lauf: #4F92F0;
    --rahmen: var(--p-line-strong);
    --rahmen-hell: var(--p-line-hairline);
  }
  /* Bleu-Akzent liegt dunkel nah am Grau der Unterzeile: Textlinks unterstreichen */
  :root .textlink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--lauf-text) 55%, transparent); }
  /* Der dunkle Abschnitt hebt sich auf dunklem Grund mit der Fläche ab */
  :root .belastung { background: var(--p-bg-surface); }
}

*, *::before, *::after { box-sizing: border-box; }
/* <picture> wählt nur die Datei (hell/dunkel); das Layout hängt am <img> */
picture { display: contents; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--fliess);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: color-mix(in srgb, var(--kraft) 25%, transparent); color: var(--text); }
:focus-visible { outline: 2px solid var(--kraft); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--schrift-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); letter-spacing: -.015em; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1em; height: 1em; flex: none; }
.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; z-index: 50; top: 16px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px);
  padding: 7px 7px 7px 14px;
  background: color-mix(in srgb, var(--flaeche) 84%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(22, 21, 28, .06), 0 10px 30px -18px rgba(22, 21, 28, .35);
  font-size: 1rem; font-weight: 500; white-space: nowrap;
  transition: box-shadow .4s var(--ease-aus), scale .4s var(--ease-aus), background-color .4s var(--ease-aus);
}
/* Beim Scrollen zieht sich die Kapsel etwas zusammen (Klasse aus main.js), über scale statt Innenabstand */
.nav.kompakt { scale: .94; transform-origin: top center; background: color-mix(in srgb, var(--flaeche) 93%, transparent); box-shadow: 0 1px 0 rgba(22, 21, 28, .08), 0 14px 34px -16px rgba(22, 21, 28, .45); }
.nav a { text-decoration: none; color: var(--text); position: relative; }
.nav a:hover { color: var(--kraft-text); }
/* Unter dem Link rastet ein kleiner Magnetpunkt ein */
.nav a:not(.marke)::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 5px; height: 5px; border-radius: 50%; background: var(--kraft-text); translate: -50% 0; scale: 0; transition: scale .35s var(--ease-feder); }
.nav a:not(.marke):hover::after, .nav a[aria-current="page"]::after { scale: 1; }
.nav a[aria-current="page"]::after { background: var(--linie-stark); }
.nav .marke { display: flex; align-items: center; padding-block: 4px; color: var(--text); }
/* Schriftzug: geneigt, die i-Punkte durch denselben Schnitt wie das L getrennt (logo/final/) */
.wortmarke { display: block; height: 27px; width: auto; overflow: visible; }
/* Die i-Punkte laufen beim Scrollen: main.js setzt --hop-k und --hop-l auf dem SVG,
   die Punkte heben sich abwechselnd wie Schritte (Einheiten des viewBox, 20 ≈ 3px) */
.wortmarke .pk { fill: var(--logo-kraft); translate: 0 var(--hop-k, 0px); transition: translate .18s ease-out; }
.wortmarke .pl { fill: var(--logo-lauf); translate: 0 var(--hop-l, 0px); transition: translate .18s ease-out; }
.nav .marke:hover .pk { translate: 0 -16px; transition: translate .45s var(--ease-feder); }
.nav .marke:hover .pl { translate: 0 -16px; transition: translate .45s var(--ease-feder) .07s; }
.status {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  background: transparent; color: var(--text-2); border: 1px solid var(--linie-stark); border-radius: 999px;
  padding: 6px 12px; font-size: .875rem; font-weight: 500; letter-spacing: -.005em;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kraft-text); }
/* Der Punkt pulst dreimal zur Begrüßung, dann ist Ruhe */
.status::after { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--kraft-text); opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .nav { gap: 14px; font-size: .9375rem; left: var(--rand); right: var(--rand); translate: none; justify-content: space-between; padding-right: 16px; }
  .nav.kompakt { scale: .96; }
  .nav .nav-woche, .nav .status { display: none; }
}

/* ---------- Einstieg ---------- */
.hero { position: relative; padding-top: var(--hero-oben); text-align: center; overflow: clip; }
.hero h1 { font-size: var(--h1); letter-spacing: -.035em; line-height: .98; }
.hero .unterzeile { max-width: 34ch; margin: 22px auto 0; color: var(--text-2); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.45; }
.hero .aktionen { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; align-items: center; }
.hero .aktionen .status { order: 2; }
.textlink {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--lauf-text);
  text-decoration: none; letter-spacing: -.01em;
}
.textlink .icon { transition: translate .4s var(--ease-aus); }
.textlink:hover .icon { translate: 0 3px; }
.textlink.rechts:hover .icon { translate: 3px 0; }
.textlink:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.buehne { position: relative; margin: var(--hero-buehne-oben) auto 0; width: min(100% - 2 * var(--rand), 980px); height: clamp(430px, 52vw, 640px); }
.buehne::before {
  content: ""; position: absolute; inset: 14% 2% -20% 2%;
  background:
    radial-gradient(42% 46% at 38% 52%, color-mix(in srgb, var(--hof-kraft) 95%, transparent), transparent 70%),
    radial-gradient(40% 44% at 64% 58%, color-mix(in srgb, var(--hof-lauf) 95%, transparent), transparent 70%);
  filter: blur(24px);
}
/* Geräte: Apple Product Bezels, mit dem Screen zu einem Bild zusammengesetzt (deploy/geraete.py) */
.telefon {
  position: absolute; left: 50%; top: 0; translate: -62% 0;
  width: var(--telefon-b, clamp(250px, 27vw, 340px)); height: auto;
  filter: drop-shadow(0 34px 40px rgba(24, 24, 26, .22)) drop-shadow(0 10px 14px rgba(24, 24, 26, .12));
}
.uhr {
  position: absolute; left: 50%; top: var(--uhr-oben, 22%); translate: var(--uhr-x, 22%) 0;
  width: var(--uhr-b, clamp(170px, 17vw, 222px)); height: auto;
  filter: drop-shadow(0 26px 30px rgba(24, 24, 26, .24)) drop-shadow(0 8px 10px rgba(24, 24, 26, .12));
}

@media (max-width: 380px) { .hero h1 { font-size: 2.3rem; } }
@media (max-width: 640px) {
  .buehne { height: 540px; }
  .telefon { width: 250px; translate: -66% 0; }
  .uhr { width: 150px; top: 30%; translate: 18% 0; }
}

/* ---------- Abschnitte allgemein ---------- */
.abschnitt { padding-block: var(--abschnitt); position: relative; }
.kopf { max-width: 760px; }
.kopf p { margin-top: 22px; color: var(--text-2); max-width: 60ch; }
.kopf p + p { margin-top: 14px; }

/* ---------- Problem ---------- */
.problem { padding-top: calc(var(--abschnitt) * .8); }
.problem .innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.zwei-apps { display: grid; gap: 14px; }
.app-zeile { background: var(--flaeche); border-radius: 22px; padding: 16px 16px 18px; box-shadow: 0 1px 0 rgba(22,21,28,.04), 0 16px 34px -26px rgba(22, 21, 28, .35); }
.app-zeile .name { display: flex; align-items: center; gap: 8px; font-size: var(--klein); font-weight: 600; margin-bottom: 12px; }
.app-zeile .name .punkt { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.app-zeile .name .punkt .icon { width: 13px; height: 13px; }
.tage7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tage7 > div { border-radius: 10px; background: var(--grund); min-height: 58px; padding: 7px 6px; font-size: .78rem; line-height: 1.2; color: var(--text-2); display: flex; flex-direction: column; justify-content: space-between; }
.tage7 b { font-weight: 600; color: var(--text); font-size: .75rem; letter-spacing: .02em; }
.tage7 .belegt-k { background: var(--kraft-grund); color: var(--kraft-text); }
.tage7 .belegt-l { background: var(--lauf-grund); color: var(--lauf-text); }
.tage7 .konflikt { outline: 2px solid var(--text); outline-offset: -2px; background: repeating-linear-gradient(45deg, var(--lauf-grund) 0 7px, var(--flaeche) 7px 12px); }
.zwei-apps .fussnote { display: flex; gap: 10px; align-items: flex-start; font-size: var(--klein); color: var(--text-2); padding: 4px 6px 0; }
.zwei-apps .fussnote span.marke-k { flex: none; width: 18px; height: 18px; margin-top: 3px; border: 2px solid var(--text); border-radius: 5px; background: repeating-linear-gradient(45deg, var(--flaeche) 0 3px, var(--lauf-grund) 3px 6px); }
@media (max-width: 860px) { .problem .innen { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .tage7 { gap: 4px; } .tage7 > div { padding: 6px 4px; font-size: .7rem; min-height: 54px; } }

/* ---------- Woche (Magnettafel) ---------- */
.woche { --schritt: 0; position: relative; height: 340vh; background: linear-gradient(180deg, var(--grund), var(--p-backdrop-neutral) 18%, var(--p-backdrop-neutral) 82%, var(--grund)); }
.woche-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 88px 28px; }
.woche-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(18px, 3vh, 34px); }
.woche-kopf h2 { max-width: 13ch; }
.woche-kopf p { max-width: 38ch; color: var(--text-2); }

.tafel {
  position: relative;
  background: var(--email);
  border-radius: 14px;
  padding: clamp(14px, 2vw, 28px);
  border: clamp(8px, .9vw, 12px) solid var(--rahmen);
  box-shadow: 0 24px 50px -30px rgba(24, 24, 26, .35);
}
.raster { position: relative; z-index: 1; display: grid; grid-template-columns: clamp(78px, 9vw, 120px) repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(2, clamp(88px, 13.5vh, 132px)); border-top: 2px solid var(--text); }
.raster > [style*="--d"] { grid-column: calc(var(--d) + 1); grid-row: calc(var(--r) + 1); }
.raster > div { border-left: 1px solid var(--raster); border-bottom: 1px solid var(--raster); position: relative; }
.raster .tag { font-weight: 600; font-size: .95rem; letter-spacing: .04em; padding: 10px 12px 8px; text-transform: uppercase; font-family: var(--schrift-rund); }
.raster .tag small { display: block; font-size: .72rem; letter-spacing: .02em; text-transform: none; color: var(--kraft-text); font-weight: 600; height: 1.1em; transition: opacity .5s var(--ease-aus); }
.js .raster .tag small { opacity: 0; }
.woche[data-schritt="1"] .tag small, .woche[data-schritt="2"] .tag small, .woche[data-schritt="3"] .tag small, .woche[data-schritt="4"] .tag small, .woche.fertig .tag small { opacity: 1; }
.raster .zeilenkopf { border-left: 0; display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 600; padding-right: 8px; }
.raster .zeilenkopf .chip { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.raster .zeilenkopf .chip .icon { width: 14px; height: 14px; }
.raster .ecke { border-left: 0; }
.zelle { transition: background-color .4s var(--ease-aus); }
.zelle.gesperrt { background: repeating-linear-gradient(45deg, transparent 0 9px, var(--schraffur) 9px 14px); }
.zelle.blitz { animation: blitz .9s var(--ease-aus); }
@keyframes blitz { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(22,21,28,0); } 25% { box-shadow: inset 0 0 0 3px var(--text); } }
.zelle.ziel { background-color: color-mix(in srgb, var(--lauf) 10%, transparent); }
.zelle.ziel-k { background-color: color-mix(in srgb, var(--kraft) 10%, transparent); }
.zelle.ziel-nein { background-color: rgba(22, 21, 28, .06); }

.notiz {
  position: absolute; left: 8px; right: 8px; bottom: 6px; z-index: 1;
  font-family: var(--schrift-rund); font-size: .8rem; line-height: 1.15; color: var(--text-2);
  opacity: 0; translate: 0 4px; transition: opacity .5s var(--ease-aus), translate .5s var(--ease-aus);
  pointer-events: none;
}
.notiz.sichtbar { opacity: 1; translate: 0 0; }

.magnet {
  position: absolute; z-index: 3; left: 0; top: 0;
  width: var(--m, 64px); height: var(--m, 64px); margin: calc(var(--m, 64px) / -2) 0 0 calc(var(--m, 64px) / -2);
  border-radius: 50%; border: 0; padding: 0; cursor: grab; touch-action: none;
  display: grid; place-items: center; color: #fff;
  font: 600 calc(var(--m, 64px) * .32)/1 var(--schrift-rund); letter-spacing: -.01em;
  translate: var(--x, 0) var(--y, 0);
  transition: translate .75s var(--ease-feder), scale .45s var(--ease-feder), opacity .35s var(--ease-aus), box-shadow .3s var(--ease-aus);
  box-shadow:
    0 2px 0 rgba(0,0,0,.16),
    0 10px 16px -8px rgba(20, 10, 40, .5),
    inset 0 -5px 9px rgba(0,0,0,.2),
    inset 0 4px 6px rgba(255,255,255,.3);
  -webkit-tap-highlight-color: transparent;
}
.js .magnet { opacity: 0; scale: .4; }
/* Mit JS bleibt der Bezug der Magnete das ganze Raster, nicht die Zelle aus --d/--r */
.js .raster .magnet { grid-column: auto; grid-row: auto; }
/* Ohne JavaScript steht die fertige Woche: Magnete als Rasterkinder in ihren Zellen (--d/--r aus dem HTML) */
html:not(.js) .magnet { position: relative; left: auto; top: auto; margin: 0; translate: none; place-self: center; width: 52px; height: 52px; font-size: 17px; cursor: default; }
html:not(.js) .magnet .bez { display: none; }
.magnet.k { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--kraft) 70%, white), var(--kraft) 60%, color-mix(in srgb, var(--kraft) 78%, black)); }
.magnet.l { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lauf) 70%, white), var(--lauf) 60%, color-mix(in srgb, var(--lauf) 78%, black)); }
.magnet .icon { width: 36%; height: 36%; }
.magnet .bez { position: absolute; bottom: -1.55em; left: 50%; translate: -50% 0; white-space: nowrap; font: 600 .74rem/1 var(--schrift); color: var(--text); letter-spacing: 0; background: color-mix(in srgb, var(--email) 90%, transparent); padding: 2px 5px; border-radius: 4px; }
.magnet.hart::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--lauf); }
.magnet.hart .icon { display: none; }
.magnet.hart .hart-zeichen { display: block; }
.magnet .hart-zeichen { display: none; font-size: calc(var(--m, 64px) * .34); }
.magnet.da { opacity: 1; scale: 1; }
.magnet.zieht { cursor: grabbing; transition: scale .25s var(--ease-aus), box-shadow .25s; scale: 1.08; z-index: 5; box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 22px 26px -10px rgba(20, 10, 40, .5), inset 0 -5px 9px rgba(0,0,0,.2), inset 0 4px 6px rgba(255,255,255,.3); }
.magnet.wackelt { animation: wackeln .5s var(--ease-aus); }
@keyframes wackeln { 0%,100% { rotate: 0deg; } 20% { rotate: -9deg; } 45% { rotate: 7deg; } 70% { rotate: -4deg; } }
.tafel:not(.bereit) .magnet { cursor: default; }

.woche-fuss { margin-top: clamp(16px, 2.6vh, 26px); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; min-height: 3.2em; }
.erklaer { font-size: var(--fliess); max-width: 56ch; color: var(--text); }
.erklaer b { font-weight: 600; }
.hinweis-ziehen { font-size: var(--klein); color: var(--text-2); display: flex; align-items: center; gap: 8px; transition: opacity .6s var(--ease-aus); }
.js .hinweis-ziehen { opacity: 0; }
html:not(.js) .hinweis-ziehen { display: none; }
.tafel.bereit ~ .woche-fuss .hinweis-ziehen, .woche.fertig .hinweis-ziehen { opacity: 1; }
.zuruecksetzen { font: inherit; font-size: var(--klein); font-weight: 600; color: var(--kraft-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; }
.zuruecksetzen[hidden] { display: none; }

.woche-regel { padding-block: 0 var(--abschnitt); }
.woche-regel .innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.woche-regel p { color: var(--text-2); }
.woche-regel p.gross { color: var(--text); font-family: var(--schrift-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
@media (max-width: 860px) { .woche-regel .innen { grid-template-columns: 1fr; } }

/* Tafel hochkant auf schmalen Bildschirmen: Tage als Zeilen, ganze Zellen */
@media (max-width: 760px) {
  .woche { height: auto; }
  .woche-buehne { position: relative; height: auto; padding-block: 72px 40px; }
  .woche-kopf { flex-direction: column; align-items: flex-start; gap: 14px; }
  .raster { grid-template-columns: 64px 1fr 1fr; grid-template-rows: auto repeat(7, 76px); }
  .raster > [style*="--d"] { grid-column: calc(var(--r) + 1); grid-row: calc(var(--d) + 1); }
  .raster .tag { display: flex; flex-direction: column; justify-content: center; border-left: 0; padding: 8px 6px; }
  .raster .zeilenkopf { border-left: 1px solid var(--raster); justify-content: center; min-height: 48px; padding: 8px 4px; font-size: .85rem; }
  .woche-fuss { flex-direction: column; gap: 12px; }
}

/* ---------- Ablauf ---------- */
.ablauf .schritte { --luecke: clamp(24px, 3vw, 48px); isolation: isolate; list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--luecke); position: relative; }
.ablauf .schritte::before, .ablauf .schritte::after {
  content: ""; position: absolute; z-index: -1; top: 35px; left: 36px; right: calc((100% - 2 * var(--luecke)) / 3 - 36px); height: 3px; border-radius: 3px; background: var(--linie);
}
.ablauf .schritte::after { background: var(--verlauf); transform-origin: left; scale: var(--fuellung, 0) 1; transition: scale 1.6s var(--ease-aus); }
.ablauf .schritte.sichtbar { --fuellung: 1; }
.ablauf .schritte li { position: relative; }
.ablauf .nummer {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  font: 600 1.5rem/1 var(--schrift-rund); position: relative; z-index: 1;
  box-shadow: 0 2px 0 rgba(0,0,0,.14), 0 12px 18px -10px rgba(20, 10, 40, .5), inset 0 -5px 9px rgba(0,0,0,.2), inset 0 4px 6px rgba(255,255,255,.3);
}
.ablauf li:nth-child(1) .nummer { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--kraft) 70%, white), var(--kraft) 60%, color-mix(in srgb, var(--kraft) 78%, black)); }
.ablauf li:nth-child(2) .nummer { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lauf) 70%, white), var(--lauf) 60%, color-mix(in srgb, var(--lauf) 78%, black)); }
.ablauf li:nth-child(3) .nummer { background: linear-gradient(90deg, var(--kraft) 0 50%, var(--lauf) 50% 100%); }
.ablauf h3 { margin-top: 26px; }
.ablauf li p { margin-top: 10px; color: var(--text-2); font-size: 1.0625rem; }
@media (max-width: 860px) {
  .ablauf .schritte { grid-template-columns: 1fr; gap: 36px; }
  .ablauf .schritte li { padding-left: 96px; min-height: 72px; }
  .ablauf .nummer { position: absolute; left: 0; top: 0; }
  .ablauf h3 { margin-top: 4px; }
  /* Hochkant: je Schritt ein Stück Linie bis zur nächsten Nummer, endet an der letzten */
  .ablauf .schritte::before, .ablauf .schritte::after { display: none; }
  .ablauf .schritte li:not(:last-child)::after {
    content: ""; position: absolute; z-index: -1; left: 35px; top: 72px; bottom: -36px; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, var(--kraft), var(--lauf));
  }
}

/* ---------- Kraft und Laufen ---------- */
.saeulen .innen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.saeule { border-radius: 36px; padding: clamp(28px, 3.4vw, 52px); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.saeule.kraft { background: var(--kraft-grund); }
.saeule.laufen { background: var(--lauf-grund); }
.saeule .saeulen-kopf { display: block; }
.saeule .saeulen-kopf .chip { position: absolute; top: clamp(20px, 2.4vw, 32px); right: clamp(20px, 2.4vw, 32px); }
.saeule .saeulen-kopf h2 { padding-right: 56px; }
.saeule .saeulen-kopf .chip { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 10px 16px -8px rgba(20,10,40,.45), inset 0 -4px 8px rgba(0,0,0,.18), inset 0 3px 5px rgba(255,255,255,.3); }
.saeule.kraft .chip { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--kraft) 70%, white), var(--kraft) 60%, color-mix(in srgb, var(--kraft) 78%, black)); }
.saeule.laufen .chip { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lauf) 70%, white), var(--lauf) 60%, color-mix(in srgb, var(--lauf) 78%, black)); }
.saeule .saeulen-kopf .chip .icon { width: 24px; height: 24px; }
.saeule h2 { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.6rem); }
.saeule .saeulen-kopf + p { margin-top: 20px; }
.saeule > p { margin-top: 16px; color: var(--text-2); max-width: 46ch; }
.saeule .bild { margin: 34px auto 0; width: min(78%, 300px); position: relative; }
.saeule .bild .telefon { position: relative; left: auto; top: auto; translate: none; width: 100%; transition: translate .7s var(--ease-aus); }
.saeule:hover .bild .telefon { translate: 0 -10px; }
.punkte { list-style: none; margin: 36px 0 0; padding: 0; }
.punkte li { padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.punkte li:last-child { padding-bottom: 0; }
.punkte b { display: block; font-weight: 600; letter-spacing: -.01em; }
.punkte span { display: block; margin-top: 4px; color: var(--text-2); font-size: 1.0625rem; }
@media (max-width: 960px) { .saeulen .innen { grid-template-columns: 1fr; } }

/* ---------- Belastung (dunkel, App-Welt) ---------- */
.belastung { background: var(--grund); color: var(--text); overflow: hidden; }
.belastung .innen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.belastung .erholung { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--linie); }
.belastung .erholung p { margin-top: 12px; color: var(--text-2); max-width: 58ch; }
.werte { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 0; list-style: none; }
.werte li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: var(--klein); font-weight: 500; }
.werte .icon { width: 16px; height: 16px; color: var(--text-2); }
.belastung .bild { position: relative; justify-self: center; width: min(100%, 330px); }
.belastung .bild::before { content: ""; position: absolute; inset: -18% -40%; background: radial-gradient(40% 40% at 40% 45%, color-mix(in srgb, var(--hof-kraft) 90%, transparent), transparent 70%), radial-gradient(38% 38% at 62% 60%, color-mix(in srgb, var(--hof-lauf) 90%, transparent), transparent 70%); filter: blur(10px); }
.belastung .telefon { position: relative; left: auto; top: auto; translate: none; width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
@media (max-width: 860px) { .belastung .innen { grid-template-columns: 1fr; } .belastung .bild { width: min(80%, 300px); } }

/* ---------- Regeln ---------- */
.regeln .innen { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.regeln .kopf { position: sticky; top: 120px; }
.regel-liste { list-style: none; margin: 0; padding: 0; }
.regel-liste li { display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start; padding: 26px 0; border-top: 1px solid var(--linie); font-family: var(--schrift-display); font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.regel-liste li:last-child { border-bottom: 1px solid var(--linie); }
.regel-liste .chip { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-top: -4px; }
.regel-liste .chip .icon { width: 20px; height: 20px; }
.regel-liste .chip.k { background: var(--kraft); }
.regel-liste .chip.l { background: var(--lauf); }
.regel-liste .chip.kl { background: linear-gradient(90deg, var(--kraft) 0 50%, var(--lauf) 50% 100%); }
.regel-liste li:first-child { font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); }
.regeln .textlink { margin-top: 28px; }
@media (max-width: 860px) { .regeln .innen { grid-template-columns: 1fr; } .regeln .kopf { position: static; } }

/* ---------- Beschwerden ---------- */
.beschwerden { background: var(--getoent); }
.beschwerden .innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.beschwerden .kopf p.betont { color: var(--text); font-weight: 500; }
.beschwerden .bild { justify-self: center; width: min(100%, 280px); }
.beschwerden .telefon { position: relative; left: auto; top: auto; translate: none; width: 100%; }
@media (max-width: 860px) { .beschwerden .innen { grid-template-columns: 1fr; } .beschwerden .bild { width: min(70%, 260px); } }

/* ---------- Daten ---------- */
.daten { text-align: center; }
.daten .innen { max-width: 860px; }
.daten .drei { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin: 30px 0 4px; padding: 0; list-style: none; }
.daten .drei li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--flaeche); font-weight: 600; letter-spacing: -.01em; box-shadow: 0 1px 0 rgba(22,21,28,.04), 0 14px 30px -24px rgba(22,21,28,.4); }
.daten .drei .icon { width: 19px; height: 19px; color: var(--text-2); }
.daten .kopf { margin-inline: auto; }
.daten .kopf p { margin-inline: auto; }
.daten .textlink { margin-top: 26px; }

/* ---------- Außerdem ---------- */
.ausserdem { padding-top: 0; }
.ausserdem .liste { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); }
.ausserdem .liste li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--linie); }
.ausserdem .liste .icon { width: 24px; height: 24px; margin-top: 2px; color: var(--text); }
.ausserdem .liste b { display: block; font-weight: 600; letter-spacing: -.01em; }
.ausserdem .liste span { display: block; margin-top: 2px; color: var(--text-2); font-size: 1.0625rem; }
@media (max-width: 760px) { .ausserdem .liste { grid-template-columns: 1fr; } }

/* ---------- Fragen ---------- */
.fragen { background: var(--flaeche); }
.fragen .innen { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-weight: 600; letter-spacing: -.01em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--text-2); transition: rotate .35s var(--ease-aus); }
.faq details[open] summary .icon { rotate: 180deg; }
.faq summary:hover { color: var(--kraft-text); }
.faq .antwort { padding: 0 44px 24px 0; color: var(--text-2); max-width: 64ch; }
.faq details[open] .antwort { animation: aufklappen .45s var(--ease-aus); }
@media (max-width: 860px) { .fragen .innen { grid-template-columns: 1fr; } }

/* ---------- Abschluss ---------- */
.abschluss { text-align: center; overflow: hidden; }
.abschluss::before { content: ""; position: absolute; left: 50%; top: 30%; width: min(900px, 120vw); height: 520px; translate: -50% -50%; background: radial-gradient(40% 46% at 42% 50%, color-mix(in srgb, var(--hof-kraft) 80%, transparent), transparent 70%), radial-gradient(38% 44% at 60% 54%, color-mix(in srgb, var(--hof-lauf) 80%, transparent), transparent 70%); filter: blur(20px); pointer-events: none; }
.abschluss .innen { position: relative; }
.abschluss .zeichen { width: clamp(88px, 10vw, 120px); height: auto; margin: 0 auto 32px; filter: drop-shadow(0 18px 26px rgba(24, 24, 26, .22)); transition: rotate .5s var(--ease-feder), scale .5s var(--ease-feder); }
.abschluss .zeichen:hover { rotate: -7deg; scale: 1.05; }
.abschluss h2 { font-size: var(--h1); letter-spacing: -.035em; }
.abschluss p { margin: 22px auto 0; max-width: 46ch; color: var(--text-2); }
.knopf {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 34px;
  background: var(--text); color: var(--grund); text-decoration: none; font-weight: 600; letter-spacing: -.01em;
  padding: 15px 24px; border-radius: 999px; transition: background-color .25s var(--ease-aus), translate .25s var(--ease-aus);
}
.knopf:hover { background: color-mix(in srgb, var(--text) 86%, var(--grund)); text-decoration: none; translate: 0 -1px; }
.knopf .icon { width: 18px; height: 18px; transition: translate .3s var(--ease-aus); }
.knopf:hover .icon { translate: 3px 0; }

/* ---------- Fußzeile ---------- */
.fuss { border-top: 1px solid var(--linie); padding-block: 40px 56px; font-size: var(--klein); color: var(--text-2); }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: center; }
.fuss .marke { display: flex; align-items: baseline; gap: 8px; color: var(--text-2); }
.fuss .marke .wortmarke { height: 21px; color: var(--text); align-self: center; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Unterseiten (Ratgeber, Support, Rechtliches) ---------- */
.seite { padding-top: var(--hero-oben); }
.seite .innen { max-width: 760px; }
.seite h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); letter-spacing: -.035em; overflow-wrap: anywhere; hyphens: auto; }
.seite .stand { margin-top: 18px; font-size: var(--klein); color: var(--text-2); }
.seite .einleitung { margin-top: 28px; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.375rem); line-height: 1.5; color: var(--text); }
.text h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-top: clamp(56px, 7vw, 88px); }
.text p, .text ul, .text ol, .text table { margin-top: 20px; }
.text h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); letter-spacing: -.015em; margin-top: 40px; }
.text h3 + p, .text h3 + ul { margin-top: 10px; }
.text p, .text li { color: var(--text); }
.text ul { padding-left: 1.2em; }
.text li { margin-top: 10px; }
.text li::marker { color: var(--kraft); }
.text a:not(.knopf) { color: var(--lauf-text); }
.text sup { font-size: .68em; line-height: 0; }
.text sup a { text-decoration: none; font-weight: 600; }
.kurz { margin-top: 44px; background: var(--flaeche); border-radius: 28px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 1px 0 rgba(22,21,28,.04), 0 18px 40px -30px rgba(22,21,28,.4); }
.kurz h2 { margin: 0; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
.kurz ul { list-style: none; padding: 0; margin: 18px 0 0; }
.kurz li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linie); margin: 0; color: var(--text); }
.kurz li:first-child { border-top: 0; }
.kurz li::before { content: ""; width: 10px; height: 10px; margin-top: .5em; border-radius: 50%; background: var(--linie-stark); }
.wochentabelle { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.wochentabelle th, .wochentabelle td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--linie); }
.wochentabelle th { font-weight: 600; font-size: var(--klein); color: var(--text-2); }
.wochentabelle td:first-child { font-weight: 600; }
.wochentabelle .k { color: var(--kraft-text); }
.wochentabelle .l { color: var(--lauf-text); }
@media (max-width: 400px) { .wochentabelle { font-size: .9rem; } .wochentabelle th, .wochentabelle td { padding: 10px 5px; } }
.hinweisbox { margin-top: 40px; padding: 20px 24px; border-radius: 20px; background: var(--getoent); color: var(--text); }
.quellen { margin-top: 20px; font-size: var(--klein); }
.quellen li { color: var(--text-2); overflow-wrap: anywhere; }
.support-kontakt { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.support-kontakt .knopf { margin-top: 0; }
.support-kontakt span { color: var(--text-2); font-size: var(--klein); }
.faq.seite-faq { margin-top: 28px; }
mark.platzhalter { background: color-mix(in srgb, var(--p-state-attention) 24%, transparent); color: var(--text); padding: 0 4px; border-radius: 4px; font-weight: 600; }

/* ---------- Einblenden (nur wenn JS läuft und Bewegung erlaubt ist) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .auftauchen { opacity: 0; translate: 0 22px; transition: opacity .9s var(--ease-aus), translate .9s var(--ease-aus); }
  .js .auftauchen.sichtbar { opacity: 1; translate: 0 0; }
  .js .hero .auftauchen { transition-duration: 1.1s; }
  .js .hero .telefon.auftauchen { translate: -62% 40px; }
  .js .hero .telefon.auftauchen.sichtbar { translate: -62% 0; }
  .js .hero .uhr.auftauchen { translate: var(--uhr-x, 22%) 60px; transition-delay: .15s; }
  .js .hero .uhr.auftauchen.sichtbar { translate: var(--uhr-x, 22%) 0; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .js .hero .telefon.auftauchen, .js .hero .telefon.auftauchen.sichtbar { translate: -66% 0; }
  .js .hero .uhr.auftauchen, .js .hero .uhr.auftauchen.sichtbar { translate: 18% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .woche { height: auto; }
  .woche-buehne { position: relative; height: auto; padding-block: var(--abschnitt) 40px; }
  .magnet, .zelle, .notiz, .ablauf .schritte::after { transition: none; animation: none; }
}

/* ---------- Farbschemata ---------- */
.schemata { padding-top: 0; }
.schemata .innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.umschalter { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.umschalter fieldset { border: 0; margin: 0; padding: 4px; display: inline-flex; gap: 2px; background: var(--getoent); border-radius: 999px; }
.umschalter label { position: relative; cursor: pointer; }
.umschalter input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.umschalter span { display: block; padding: 9px 16px; border-radius: 999px; font-size: var(--klein); font-weight: 600; color: var(--text-2); transition: background-color .25s var(--ease-aus), color .25s var(--ease-aus); }
.umschalter input:checked + span { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(24, 24, 26, .12); }
.umschalter input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.schemata .schema-text { margin-top: 18px; font-size: 1.0625rem; }
.vorschau {
  justify-self: center; width: min(100%, 380px); padding: 26px 20px 20px; border-radius: 40px;
  background: var(--grund); color: var(--text);
  box-shadow: 0 0 0 1px var(--linie), 0 30px 60px -34px rgba(24, 24, 26, .45);
  transition: background-color .5s var(--ease-aus), color .5s var(--ease-aus);
  font-family: var(--schrift);
}
.vorschau * { transition: background-color .5s var(--ease-aus), color .5s var(--ease-aus), border-color .5s var(--ease-aus); }
.v-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.v-titel { font-family: var(--schrift-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.v-datum { font-size: .875rem; color: var(--text-2); }
.v-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 18px; }
.v-woche span { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0 10px; border-radius: 999px; background: var(--flaeche); min-height: 64px; }
.v-woche span.heute { box-shadow: inset 0 0 0 1.5px var(--text); }
.v-woche b { font-size: .7rem; font-weight: 600; color: var(--text-2); }
.v-woche i { display: block; width: 9px; height: 9px; border-radius: 50%; }
.v-woche i.k { background: var(--kraft-text); }
.v-woche i.l { background: var(--lauf-text); }
.v-karte { margin-top: 16px; background: var(--flaeche); border-radius: 24px; padding: 6px 16px; }
.v-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-weight: 600; font-size: 1.05rem; }
.v-zeile + .v-zeile { border-top: 1px solid var(--linie); }
.v-zeile small { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
.v-zeile small.k { color: var(--kraft-text); }
.v-zeile small.l { color: var(--lauf-text); }
.v-chip { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px dashed; }
.v-chip.k { color: var(--kraft-text); border-color: var(--kraft-text); }
.v-chip.l { color: var(--lauf-text); border-color: var(--lauf-text); }
.v-chip .icon { width: 20px; height: 20px; }
.v-knopf { margin-top: 16px; background: var(--kraft); color: #fff; text-align: center; font-weight: 600; padding: 14px; border-radius: 999px; }
@media (max-width: 860px) { .schemata .innen { grid-template-columns: 1fr; } }

/* ---------- Leben (2026-10-20, Wunsch der Person: lebendiger) ----------
   Alles hängt an Scrollen, Zeiger oder dem Erscheinen eines Abschnitts und läuft
   nur über transform und opacity. Einzige Wiederholung: der Punkt der Kapsel
   pulst dreimal nach dem Laden. Bei reduzierter Bewegung gilt nichts davon. */
@keyframes pop { from { opacity: 0; scale: .5; } 60% { opacity: 1; } to { opacity: 1; scale: 1; } }
@keyframes hoch { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes puls { from { scale: 1; opacity: .55; } to { scale: 2.6; opacity: 0; } }
@keyframes nicken { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
@keyframes fallen { from { opacity: 0; translate: 0 -30px; rotate: -12deg; scale: .8; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes aufklappen { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes pulsen { 0% { scale: 1; } 40% { scale: .975; } 100% { scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* Kapsel: der Punkt pulst dreimal */
  .js .status::after { animation: puls 1.4s var(--ease-aus) .8s 3; }

  /* Einstieg: H1 Zeile für Zeile, iPhone und Watch mit Tiefe beim Scrollen (--sy) und am Zeiger (--mx, --my) */
  .js .hero h1 .zeile { display: inline-block; translate: 0 .35em; transition: translate 1.1s var(--ease-aus); }
  .js .hero h1.sichtbar .zeile { translate: 0 0; }
  .js .hero h1 .zeile:nth-of-type(2) { transition-delay: .14s; }
  .js .hero .telefon { transform: translate(calc(var(--mx, 0) * -6px), calc(var(--sy, 0) * .07px + var(--my, 0) * -4px)); will-change: transform; }
  .js .hero .uhr { transform: translate(calc(var(--mx, 0) * 10px), calc(var(--sy, 0) * -.06px + var(--my, 0) * 7px)); will-change: transform; }
  .js .hero .textlink.sichtbar .icon { animation: nicken 1.3s var(--ease-aus) 1.9s 2; }

  /* Problem: die Tage beider Apps ploppen nacheinander auf, die Konfliktfelder wackeln */
  .js .zwei-apps.auftauchen:not(.sichtbar) .tage7 > div, .js .zwei-apps.auftauchen:not(.sichtbar) .fussnote { opacity: 0; }
  .zwei-apps.sichtbar .tage7 > div { animation: pop .55s var(--ease-feder) var(--d1, .2s) both; }
  .zwei-apps.sichtbar .tage7 .konflikt { animation-name: pop, wackeln; animation-duration: .55s, .6s; animation-timing-function: var(--ease-feder), var(--ease-aus); animation-fill-mode: both, none; animation-delay: var(--d1, .2s), 1.25s; }
  .zwei-apps.sichtbar .fussnote { animation: einblenden .6s var(--ease-aus) 1.3s both; }
  .tage7 > div:nth-child(1) { --d1: .2s; } .tage7 > div:nth-child(2) { --d1: .25s; } .tage7 > div:nth-child(3) { --d1: .3s; } .tage7 > div:nth-child(4) { --d1: .35s; }
  .tage7 > div:nth-child(5) { --d1: .4s; } .tage7 > div:nth-child(6) { --d1: .45s; } .tage7 > div:nth-child(7) { --d1: .5s; }
  .app-zeile + .app-zeile .tage7 > div { animation-delay: calc(var(--d1, .2s) + .3s); }
  .app-zeile + .app-zeile .tage7 .konflikt { animation-delay: calc(var(--d1, .2s) + .3s), 1.25s; }

  /* Ablauf: die Nummern federn ein */
  .js .ablauf li.auftauchen:not(.sichtbar) .nummer { opacity: 0; }
  .ablauf li.sichtbar .nummer { animation: pop .7s var(--ease-feder) .15s both; }

  /* Säulen: Chip federt, die Punkte kommen gestaffelt */
  .js .saeule.auftauchen:not(.sichtbar) .chip, .js .saeule.auftauchen:not(.sichtbar) .punkte li { opacity: 0; }
  .saeule.sichtbar .chip { animation: pop .7s var(--ease-feder) .25s both; }
  .saeule.sichtbar .punkte li { animation: hoch .7s var(--ease-aus) both; }
  .saeule.sichtbar .punkte li:nth-child(1) { animation-delay: .25s; } .saeule.sichtbar .punkte li:nth-child(2) { animation-delay: .35s; }
  .saeule.sichtbar .punkte li:nth-child(3) { animation-delay: .45s; } .saeule.sichtbar .punkte li:nth-child(4) { animation-delay: .55s; }
  .saeule .saeulen-kopf .chip { transition: rotate .5s var(--ease-feder); }
  .saeule:hover .saeulen-kopf .chip { rotate: -12deg; }

  /* Regeln, Erholung, Daten, Außerdem: Chips, Kapseln und Symbole federn ein */
  .js .regel-liste li.auftauchen:not(.sichtbar) .chip, .js .erholung.auftauchen:not(.sichtbar) .werte li,
  .js .daten .kopf.auftauchen:not(.sichtbar) .drei li, .js .ausserdem li.auftauchen:not(.sichtbar) .icon { opacity: 0; }
  .regel-liste li.sichtbar .chip { animation: pop .6s var(--ease-feder) .1s both; }
  .erholung.sichtbar .werte li, .daten .kopf.sichtbar .drei li { animation: pop .6s var(--ease-feder) both; }
  .erholung.sichtbar .werte li:nth-child(1), .daten .kopf.sichtbar .drei li:nth-child(1) { animation-delay: .3s; }
  .erholung.sichtbar .werte li:nth-child(2), .daten .kopf.sichtbar .drei li:nth-child(2) { animation-delay: .42s; }
  .erholung.sichtbar .werte li:nth-child(3), .daten .kopf.sichtbar .drei li:nth-child(3) { animation-delay: .54s; }
  .ausserdem li.sichtbar .icon { animation: pop .6s var(--ease-feder) .15s both; }

  /* Magnete heben sich unter dem Zeiger, sobald die Tafel bereit ist */
  .tafel.bereit .magnet.da:hover:not(.zieht) { scale: 1.08; }

  /* Vorschau pulst beim Umschalten (Klasse aus main.js), das L fällt am Ende ein */
  .vorschau.wechselt { animation: pulsen .5s var(--ease-feder); }
  .js .abschluss .innen.auftauchen:not(.sichtbar) .zeichen { opacity: 0; }
  .abschluss .innen.sichtbar .zeichen { animation: fallen .9s var(--ease-feder) .1s both; }
}
@media (prefers-reduced-motion: reduce) {
  .wortmarke .pk, .wortmarke .pl, .nav, .saeule .bild .telefon, .abschluss .zeichen, .nav a::after { transition: none; }
  .nav .marke:hover .pk, .nav .marke:hover .pl { translate: 0 0; }
  .saeule:hover .bild .telefon { translate: none; }
  .abschluss .zeichen:hover { rotate: 0deg; scale: 1; }
  .faq details[open] .antwort { animation: none; }
}