/* mamaflow.at — Basis-Stylesheet (Issue #6).
   Bausteine 1:1 nach dem Claude-Design-Projekt „mamaflow"
   (docs/design-referenz/): Buttons, Eyebrow, Display-Titel, Sektionen,
   Karten, Kopf & Fuß. Seiten-spezifische Muster (Hero, Modul-Skelett,
   Wellen, Blobs) kommen in den Bau-Slices dazu — rein additiv.
   Farben/Maße NUR über die Tokens aus tokens.css (--mf-*). */

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

body {
  margin: 0;
  background: var(--mf-surface-page);
  color: var(--mf-text-body);
  font-family: var(--mf-font-body);
  font-size: var(--mf-body-md);
  line-height: var(--mf-body-lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--mf-font-display);
  font-weight: var(--mf-weight-regular); /* Überschriften nie fett */
  line-height: var(--mf-display-lh);
  letter-spacing: var(--mf-display-ls);
  color: var(--mf-text-strong);
  margin: 0;
  text-wrap: pretty;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--mf-text-accent); }

p { margin: 0; }
* + p { margin-top: var(--mf-space-4); }

a { color: var(--mf-text-accent); text-decoration: none; }
a:hover { color: var(--mf-apricot); }

::selection { background: var(--mf-sand); }

/* Tastatur-Fokus: bewusste Ergänzung — das Design-Projekt lässt Fokus-
   Zustände offen (dokumentierter Caveat), unsichtbar ist keine Option. */
:focus-visible {
  outline: 2px solid var(--mf-terrakotta);
  outline-offset: 2px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Layout-Helfer ──────────────────────────────────── */
.container {
  max-width: var(--mf-container);
  margin: 0 auto;
  padding-inline: var(--mf-gutter);
}
.container--schmal { max-width: var(--mf-container-narrow); }

.sektion { padding-block: var(--mf-section-y); background: var(--mf-surface-page); }
.sektion--warm   { background: var(--mf-surface-card); }
.sektion--sand   { background: var(--mf-surface-band); }
.sektion--salbei { background: var(--mf-surface-calm); color: var(--mf-salbei-mid); }
.sektion--salbei h1, .sektion--salbei h2, .sektion--salbei h3 { color: var(--mf-salbei-dark); }
/* Dunkle Fläche seit 17.08.2026 Beere statt Braun (Issue #29, Miriam:
   „können wir das kackbraun tauschen"). Das Apricot des Labels und das
   Terrakotta der Zitat-Kursive werden auf Beere trüb, beide bekommen
   deshalb hier eigene Werte. */
.sektion--dunkel { background: var(--mf-surface-dark); color: var(--mf-text-on-dark-body); }
.sektion--dunkel .eyebrow { color: var(--mf-creme-muted); }
.sektion--dunkel h1 em, .sektion--dunkel h2 em, .sektion--dunkel h3 em { color: var(--mf-gold); }
.sektion--dunkel h1, .sektion--dunkel h2, .sektion--dunkel h3 { color: var(--mf-text-on-dark); }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mf-card-gap);
}

/* ── Typo-Bausteine ─────────────────────────────────── */
.display-hero { font-size: var(--mf-display-hero); line-height: var(--mf-display-lh-tight); }
.display-xl   { font-size: var(--mf-display-xl); }
.display-lg   { font-size: var(--mf-display-lg); }
.display-md   { font-size: var(--mf-display-md); }
.display-sm   { font-size: var(--mf-display-sm); }

.vorspann {
  font-size: var(--mf-body-lead);
  max-width: var(--mf-measure-lead);
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mf-eyebrow-size);
  font-weight: var(--mf-eyebrow-weight);
  letter-spacing: var(--mf-eyebrow-ls);
  text-transform: uppercase;
  color: var(--mf-text-eyebrow);
}
.eyebrow--umrandet {
  border: var(--mf-border-hairline);
  border-radius: var(--mf-radius-pill);
  padding: 8px 14px;
}
.eyebrow--punkt::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mf-apricot);
}

/* ── Buttons — immer Pille, Hover hebt 2px & wird dunkler ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  min-height: var(--mf-tap-min);
  padding: 16px 24px;
  border-radius: var(--mf-radius-pill);
  background: var(--mf-action-primary);
  color: var(--mf-on-action);
  font-family: var(--mf-font-body);
  font-size: 15.5px;
  font-weight: var(--mf-weight-bold);
  transition: transform var(--mf-dur-base) ease, background var(--mf-dur-base) ease;
}
.btn:hover { background: var(--mf-action-primary-hover); color: var(--mf-on-action); transform: var(--mf-lift-sm); }

.btn--terrakotta { background: var(--mf-action-secondary); }
.btn--terrakotta:hover { background: var(--mf-action-secondary-hover); }
.btn--dunkel { background: var(--mf-action-dark); }
.btn--dunkel:hover { background: var(--mf-action-dark-hover); }
.btn--sand { background: var(--mf-sand); color: var(--mf-braun-tief); }
.btn--sand:hover { background: var(--mf-sand-hover); color: var(--mf-braun-tief); }
.btn--ghost {
  background: transparent;
  color: var(--mf-terrakotta);
  border: 1px solid var(--mf-line-contrast);
}
.btn--ghost:hover { background: transparent; color: var(--mf-terrakotta-dark); }

.btn--klein { padding: 13px 20px; font-size: 14.5px; }
.btn--gross { padding: 20px 30px; font-size: 17px; }
.btn--schatten { box-shadow: var(--mf-shadow-cta); }

.btn-pfeil { font-size: 1.12em; }

/* Entlastende Beizeile unter CTAs („kein Verkaufsgespräch") */
.cta-beizeile {
  margin-top: var(--mf-space-3);
  font-size: var(--mf-body-xs);
  color: var(--mf-text-muted);
}

/* ── Karten — warme Fläche + Haarlinie, Schatten ist Ausnahme ── */
.karte {
  background: var(--mf-surface-card);
  border: var(--mf-border-hairline);
  border-radius: var(--mf-radius-sm);
  padding: var(--mf-card-pad);
}
.karte--erhoben {
  background: var(--mf-surface-raised);
  border: 0;
  box-shadow: var(--mf-shadow-card);
}
.sektion--dunkel .karte {
  background: var(--mf-veil-on-dark);
  border-color: var(--mf-line-on-dark);
}

/* ── Kopf — sticky auf Creme mit Haarlinie ──────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mf-creme);
  color: var(--mf-terrakotta);
  padding: 12px 18px;
  border-radius: 0 0 var(--mf-radius-2xs) 0;
}
.skip-link:focus { left: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--mf-creme);
  border-bottom: var(--mf-border-hairline);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
  padding-block: 14px;
}

/* Logo = quadratische SVG, über beschnittenen Container positioniert
   (Werte aus Header.jsx des Design-Projekts). Nie verzerren. */
.logo-ausschnitt {
  flex: none;
  display: block;
  position: relative;
  width: 148px;
  height: 66px;
  overflow: hidden;
}
.logo-ausschnitt img {
  position: absolute;
  width: 301px;
  height: 319px;
  left: -77px;
  top: -96px;
  max-width: none;
  filter: brightness(.62) saturate(1.15); /* auf hellem Grund */
}

.hauptnav {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 26px);
  font-size: 15px;
  font-weight: var(--mf-weight-medium);
}
.hauptnav a { color: var(--mf-braun-600); }
.hauptnav a:hover { color: var(--mf-terrakotta); }

/* Mobil: JS-freier Burger wie bei miriamalthaler.at */
.mobilnav { display: none; position: relative; margin-left: auto; }
.mobilnav summary {
  list-style: none;
  cursor: pointer;
  min-height: var(--mf-tap-min);
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--mf-line-contrast);
  border-radius: var(--mf-radius-pill);
  color: var(--mf-terrakotta);
  font-weight: var(--mf-weight-semibold);
  font-size: 14.5px;
}
.mobilnav summary::-webkit-details-marker { display: none; }
.mobilnav nav {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--mf-creme);
  border: var(--mf-border-hairline);
  border-radius: var(--mf-radius-xs);
  padding: 10px;
  box-shadow: var(--mf-shadow-card);
}
.mobilnav nav a {
  padding: 12px 14px;
  border-radius: var(--mf-radius-2xs);
  color: var(--mf-braun-600);
  font-weight: var(--mf-weight-medium);
}
.mobilnav nav a:hover { background: var(--mf-sand-hover); color: var(--mf-braun-tief); }

@media (max-width: 48rem) {
  .hauptnav { display: none; }
  .mobilnav { display: block; }
  .site-header .header-cta { display: none; }
}

/* ── Fuß — Creme mit Haarlinie oben, Sand-Schlussleiste ── */
.site-footer {
  background: var(--mf-creme);
  color: var(--mf-braun-600);
  border-top: var(--mf-border-hairline);
}
.site-footer .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 32px;
  padding-block: clamp(40px, 5vw, 66px) 32px;
}
.footer-marke .logo-ausschnitt {
  width: 176px;
  height: 94px;
}
.footer-marke .logo-ausschnitt img {
  width: 359px;
  height: 359px;
  left: -91px;
  top: -114px;
}
.footer-spalte-titel {
  font-size: var(--mf-eyebrow-size);
  letter-spacing: var(--mf-eyebrow-ls-tight);
  text-transform: uppercase;
  color: var(--mf-terrakotta);
  font-weight: var(--mf-eyebrow-weight);
}
.footer-links {
  margin-top: var(--mf-space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}
.footer-links a { color: var(--mf-braun-600); }
.footer-links a:hover { color: var(--mf-terrakotta); }
.footer-schlussleiste { background: var(--mf-sand); }
.footer-schlussleiste .container {
  display: block;
  padding-block: 18px;
  font-size: 12.5px;
  color: var(--mf-braun-600);
}

/* ══ Modul-Bausteine (Bau-Etappe #17) ═══════════════════
   Skelett-Bausteine aller 12 Modul-Seiten nach docs/modul-muster.md;
   Verhalten dazu in /assets/js/modul.js. Herzstück-Typen: hier liegt
   die Übung (ue-*); Selbsttest und Satz-Karten kommen mit dem ersten
   Modul, das sie nutzt (Referenz: Branch prototype/muster-modul-schreien). */

/* ── Hero + Inhaltsverzeichnis ── */
.modul-hero { position: relative; overflow: hidden; }
.modul-hero .container { position: relative; z-index: 2; }

.blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}
.blob img { display: block; width: 100%; height: auto; }
.blob--hero {
  width: min(560px, 60vw);
  right: -140px;
  top: -140px;
  animation: mf-float-a var(--mf-drift-slow) ease-in-out infinite;
}
.blob--hz {
  width: min(480px, 55vw);
  left: -160px;
  bottom: -180px;
  opacity: .5;
  animation: mf-float-b var(--mf-drift-base) ease-in-out infinite;
}

.toc { margin-top: var(--mf-space-8); max-width: 560px; }
.toc-liste {
  list-style: none;
  margin: var(--mf-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toc-liste a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--mf-radius-xs);
  color: var(--mf-braun-600);
  transition: background var(--mf-dur-base) ease, transform var(--mf-dur-base) ease;
}
.toc-liste a::before { content: "✳"; color: var(--mf-apricot); font-size: .8em; }
.toc-liste a:hover { background: var(--mf-sand-hover); color: var(--mf-braun-tief); transform: translateX(5px); }

/* ── Ursachen-Teil ── */
.ursachen h3 { margin-top: var(--mf-space-9); font-size: var(--mf-display-sm); }
.ursachen p { max-width: var(--mf-measure-body); }
.merk-zeile {
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: var(--mf-display-xs);
  color: var(--mf-terrakotta);
  max-width: 30ch;
  line-height: 1.25;
  margin-top: var(--mf-space-6);
}

/* ── Wellen an den Kanten der Sand-Sektion ──
   Zwei gegenläufige SVG-Wellen nach der Design-Referenz
   (26s / 34s reverse, Breite 200%, mf-wave aus tokens.css). */
.welle {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(46px, 5vw, 78px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.welle--oben { top: -1px; }
.welle--unten { bottom: -1px; }
.welle svg {
  display: block;
  width: 200%;
  height: 100%;
  animation: mf-wave 26s linear infinite;
}
.welle--unten svg { animation-duration: 34s; animation-direction: reverse; }

/* ── Herzstück ── */
.hz { position: relative; overflow: hidden; }
.hz .container { position: relative; z-index: 2; }

.aufnahme {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: var(--mf-space-7);
  max-width: 640px;
}
.aufnahme-knopf {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.8px solid var(--mf-terrakotta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mf-terrakotta);
}
.aufnahme-label {
  font-size: var(--mf-eyebrow-size);
  font-weight: var(--mf-eyebrow-weight);
  letter-spacing: var(--mf-eyebrow-ls-tight);
  text-transform: uppercase;
  color: var(--mf-terrakotta);
}
.aufnahme-titel {
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: var(--mf-display-xs);
  color: var(--mf-text-strong);
  margin-top: 6px;
  line-height: 1.2;
}
.aufnahme-platzhalter { font-size: var(--mf-body-xs); color: var(--mf-text-muted); }

/* Aufnahme-Variante Video: hochkanter Player links, Text rechts;
   preload="none" + Poster, geladen wird erst beim Play-Tipp. */
.aufnahme--video { align-items: stretch; }
.aufnahme-video { flex: none; width: min(240px, 42vw); }
.aufnahme-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--mf-radius-sm);
  background: var(--mf-braun-tief);
}
@media (max-width: 34rem) {
  .aufnahme--video { flex-direction: column; }
  .aufnahme-video { width: min(280px, 78vw); margin-inline: auto; }
}
/* Aufnahme-Variante Audio: schlanke Karte, z. B. im Ergebnis-Panel
   der Übung (Visualisierung zum Ausdruck). preload="none", geladen
   wird erst beim Play-Tipp. */
.aufnahme--audio {
  flex-direction: column;
  gap: 4px;
  margin-top: var(--mf-space-5);
  max-width: none;
}
.aufnahme--audio audio {
  display: block;
  width: 100%;
  margin-top: 12px;
}
.aufnahme--audio .aufnahme-platzhalter { margin-top: 10px; }

.aufnahme-spur {
  margin-top: 14px;
  height: 4px;
  border-radius: 999px;
  background: var(--mf-line-strong);
  position: relative;
  overflow: hidden;
}
.aufnahme-spur::before {
  content: "";
  position: absolute;
  inset: 0 82% 0 0;
  background: var(--mf-apricot);
  border-radius: 999px;
}

/* ── Herzstück-Typ: Übung ── */
.hz-uebung { margin-top: var(--mf-space-8); }
.hz-uebung h3 { font-size: var(--mf-display-sm); }
.hz-uebung > p { max-width: var(--mf-measure-body); }
.ue-beispiel {
  background: var(--mf-creme);
  border: var(--mf-border-hairline);
  border-radius: var(--mf-radius-sm);
  padding: 20px 24px;
  margin-top: var(--mf-space-6);
  max-width: 640px;
  font-size: var(--mf-body-sm);
}
.ue-beispiel p { margin-top: 6px; }
.ue-felder {
  margin-top: var(--mf-space-6);
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
.ue-felder label { font-weight: var(--mf-weight-semibold); color: var(--mf-braun); display: block; }
.ue-felder textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid rgba(147,93,55,.18);
  border-radius: var(--mf-radius-field);
  background: var(--mf-creme);
  color: var(--mf-text-body);
  font-family: var(--mf-font-body);
  font-size: var(--mf-body-md);
  line-height: 1.5;
  resize: vertical;
}

/* ── Ergebnis-Panel (Salbei = Ruhe- und Ergebnismoment) ── */
.ergebnis-panel {
  margin-top: var(--mf-space-6);
  max-width: 640px;
  background: var(--mf-surface-calm);
  border-radius: var(--mf-radius-md);
  padding: var(--mf-card-pad);
  color: var(--mf-salbei-mid);
}
.ergebnis-panel h4 {
  font-family: var(--mf-font-display);
  font-weight: var(--mf-weight-regular);
  font-size: var(--mf-display-xs);
  color: var(--mf-salbei-dark);
  margin: 0;
}
.ergebnis-panel p { margin-top: var(--mf-space-3); }
.ergebnis-panel dl { margin: 0; }
.ergebnis-eintrag { margin-top: var(--mf-space-4); }
.ergebnis-eintrag dt {
  font-size: var(--mf-eyebrow-size);
  font-weight: var(--mf-eyebrow-weight);
  letter-spacing: var(--mf-eyebrow-ls-tight);
  text-transform: uppercase;
  color: var(--mf-salbei-dark);
}
.ergebnis-eintrag dd { margin: 4px 0 0; }
.hz-aktionen { margin-top: var(--mf-space-6); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hz-daten-hinweis { margin-top: var(--mf-space-5); font-size: var(--mf-body-xs); color: var(--mf-text-muted); max-width: 52ch; }
.nojs-hinweis {
  margin-top: var(--mf-space-6);
  font-size: var(--mf-body-xs);
  color: var(--mf-text-muted);
  max-width: 52ch;
}

/* ── Herzstück-Baustein: Atem-Kreis (Bau-Etappe #19) ──
   Reiner CSS-Baustein, kein JS: der Kreis atmet mit mf-breathe aus
   tokens.css (wachsen = einatmen, halten, langes Schrumpfen = aus-
   atmen); die Wort-Einblendungen laufen im selben 10s-Takt. Ohne
   Animation (prefers-reduced-motion) steht der Kreis voll mit
   „einatmen", die Anleitung daneben trägt die ganze Übung. */
.hz-atem { margin-top: var(--mf-space-8); }
.hz-atem h3 { font-size: var(--mf-display-sm); }
.atem {
  margin-top: var(--mf-space-6);
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 44px);
  flex-wrap: wrap;
  max-width: 640px;
}
.atem-buehne {
  flex: none;
  position: relative;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
}
.atem-buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.8px solid var(--mf-salbei);
}
.atem-kreis {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--mf-surface-calm);
  display: grid;
  place-items: center;
  animation: mf-breathe 10s ease-in-out infinite;
}
.atem-wort {
  grid-area: 1 / 1;
  font-size: var(--mf-eyebrow-size);
  font-weight: var(--mf-eyebrow-weight);
  letter-spacing: var(--mf-eyebrow-ls-tight);
  text-transform: uppercase;
  color: var(--mf-salbei-dark);
  opacity: 0;
  animation: 10s linear infinite;
}
.atem-wort--ein { opacity: 1; animation-name: mf-atem-ein; }
.atem-wort--halten { animation-name: mf-atem-halten; }
.atem-wort--aus { animation-name: mf-atem-aus; }
.atem-anleitung { flex: 1; min-width: 230px; max-width: 42ch; font-size: var(--mf-body-sm); }
@keyframes mf-atem-ein { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes mf-atem-halten { 0%, 32% { opacity: 0; } 37%, 47% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes mf-atem-aus { 0%, 50% { opacity: 0; } 56%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* ── Herzstück-Typ: Probelauf (Bau-Etappe #19) ──
   Geführte Trockenübung mit Auswahl-Chips, ein Schritt nach dem
   anderen: modul.js (data-probelauf) setzt .pl--js und blendet
   Schritte einzeln ein; ohne JS stehen alle Schritte lesbar
   untereinander. Der Atem-Kreis läuft darin als zeitgesteuerter
   Schritt (10s-Takt = mf-breathe). Gewinner des Prototyp-
   Vergleichs A/B/C, entschieden 02.08.2026. */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; max-width: 640px; }
.chip {
  border: 1.4px solid var(--mf-terrakotta);
  background: var(--mf-creme);
  color: var(--mf-terrakotta);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--mf-font-body);
  font-size: var(--mf-body-sm);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background var(--mf-dur-base) ease, color var(--mf-dur-base) ease, transform var(--mf-dur-base) ease;
}
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--mf-terrakotta); color: var(--mf-creme); }
.chip-eigen-feld { margin-top: 12px; max-width: 640px; }
.chip-eigen-feld input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(147,93,55,.18);
  border-radius: var(--mf-radius-field);
  background: var(--mf-creme);
  color: var(--mf-text-body);
  font-family: var(--mf-font-body);
  font-size: var(--mf-body-md);
}

.pl { margin-top: var(--mf-space-8); }
.pl-schritt { margin-top: var(--mf-space-8); }
.pl--js .pl-schritt { display: none; margin-top: var(--mf-space-6); }
.pl--js .pl-schritt.aktiv { display: block; animation: mf-fade var(--mf-dur-base) ease; }
.pl-kopf {
  font-size: var(--mf-eyebrow-size);
  font-weight: var(--mf-eyebrow-weight);
  letter-spacing: var(--mf-eyebrow-ls-tight);
  text-transform: uppercase;
  color: var(--mf-terrakotta);
}
.pl-schritt h3 { font-size: var(--mf-display-sm); margin-top: 10px; }
.pl-schritt > p { max-width: var(--mf-measure-body); margin-top: 10px; }
.pl-aktionen { margin-top: var(--mf-space-6); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pl-aktionen button[disabled] { opacity: .45; cursor: default; }
.pl-aktionen button[disabled]:hover { transform: none; }
.pl-ueberspringen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--mf-body-xs);
  color: var(--mf-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
[data-start] { display: none; }
.pl--js [data-start] { display: inline-flex; }
.pl-runde {
  margin-top: var(--mf-space-4);
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: var(--mf-display-xs);
  color: var(--mf-salbei-dark);
}

/* ── CTA-Moment 1: Instagram nach dem Herzstück ── */
.hz-cta-insta {
  margin-top: var(--mf-space-9);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.hz-cta-insta .karten-text { max-width: 52ch; }

/* ── Konkrete Schritte ── */
.schritte-liste {
  list-style: none;
  margin: var(--mf-space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mf-card-gap);
  max-width: 760px;
}
.schritt { display: flex; gap: clamp(16px, 3vw, 30px); }
.schritt-nr {
  flex: none;
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: var(--mf-display-md);
  color: var(--mf-apricot);
  line-height: 1;
  min-width: 58px;
}
.schritt h3 { font-size: var(--mf-display-xs); }
.schritt p { max-width: var(--mf-measure-body); }
.nachsprechen {
  margin-top: var(--mf-space-4);
  border-left: 2px solid var(--mf-sand);
  padding-left: 16px;
}
.nachsprechen-label {
  font-size: var(--mf-eyebrow-size);
  font-weight: var(--mf-eyebrow-weight);
  letter-spacing: var(--mf-eyebrow-ls-tight);
  text-transform: uppercase;
  color: var(--mf-apricot);
}
.nachsprechen q {
  display: block;
  margin-top: 4px;
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: 21px;
  color: var(--mf-terrakotta);
  quotes: "„" "“";
}

/* ── FAQ ── */
.faq-liste { margin-top: var(--mf-space-7); max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.faq-liste details {
  background: var(--mf-surface-card);
  border: var(--mf-border-hairline);
  border-radius: var(--mf-radius-xs);
}
.faq-liste summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 22px;
  font-weight: var(--mf-weight-semibold);
  color: var(--mf-braun);
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: "+"; color: var(--mf-terrakotta); font-size: 20px; flex: none; }
.faq-liste details[open] summary::after { content: "−"; }
.faq-liste details p { padding: 0 22px 20px; max-width: 60ch; }

/* ── Abschluss-Block „Weiter auf deinem Weg" (dunkle Sektion) ── */
.weiter-raster { margin-top: var(--mf-space-8); }
.weiter-karte { max-width: 640px; }
.weiter-karte h3 { font-size: var(--mf-display-xs); }
.weiter-karte .eyebrow { color: var(--mf-creme-muted); }
.weiter-karte .btn { margin-top: var(--mf-space-5); }
.weiter-karte p a { color: var(--mf-creme-on-dark); text-decoration: underline; }
.weiter-insta { margin-top: var(--mf-space-8); color: var(--mf-creme-body); }
.weiter-insta a { color: var(--mf-creme-on-dark); text-decoration: underline; }
.weiter-kennenlernen { margin-top: var(--mf-space-8); max-width: 560px; }
.gruss {
  margin-top: var(--mf-space-6);
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: var(--mf-display-xs);
  color: var(--mf-creme-on-dark);
}

/* ══ Landingpage-Bausteine (Bau-Etappe #24) ═══════════════
   Verkaufsseite /flow/: wörtliche Mama-Gedanken als Hingucker der
   Seite, dazu Porträts im Hero und bei „Warum ich" (Grilling mit
   Miriam, 16.08.2026). Rein additiv. */

/* Gedankenblasen: die Grübel-Sätze der Mama als Chat-Blasen — der
   visuelle Reim auf die WhatsApp-Stimmen weiter unten (aus den Blasen,
   in denen sie heute grübelt, kommen später die Danke-Nachrichten).
   Entschieden im Optik-Vergleich A1/A2 (Miriam, 16.08.2026: A2). */
.blasen {
  list-style: none;
  margin: var(--mf-space-7) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 540px;
}
.blase {
  background: var(--mf-surface-card);
  border: var(--mf-border-hairline);
  padding: 16px 22px;
  font-size: 17.5px;
  line-height: 1.5;
  border-radius: 22px;
  border-bottom-left-radius: 6px;
  width: fit-content;
  max-width: 88%;
  box-shadow: var(--mf-shadow-card);
  transform: rotate(-.6deg);
  color: var(--mf-braun-tief);
  font-weight: 500;
}
.blase:nth-child(even) {
  align-self: flex-end;
  transform: rotate(.6deg);
  border-radius: 22px;
  border-bottom-right-radius: 6px;
  background: var(--mf-sand);
}

/* Traum-Szenen: die Wunschbild-Momente als Karten mit Icon */
.szenen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.szene {
  background: color-mix(in srgb, var(--mf-creme) 72%, transparent);
  border-radius: var(--mf-radius-sm);
  padding: 24px;
}
/* Sechs Szenen (mama.flow, 16.09.2026): ab drei Spalten deckeln, damit
   es 3 + 3 wird statt 4 + 2. Die Startseite mit vier Karten bleibt frei. */
@media (min-width: 56rem) {
  .szenen--sechs { grid-template-columns: repeat(3, 1fr); }
}
.szene-icon { font-size: 30px; line-height: 1; }
.szene p { margin-top: 12px; }
.szene strong { color: var(--mf-salbei-dark); }

/* Stimmen als WhatsApp-Blasen (kurz in der Traum-Sektion,
   lang bei Tanja/Romana vor dem Preis) */
.wa-stimmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.wa-blase {
  background: var(--mf-creme);
  border-radius: 18px;
  border-top-left-radius: 4px;
  padding: 18px 22px;
  box-shadow: var(--mf-shadow-card);
  margin: 0;
}
.wa-blase blockquote { margin: 0; }
.wa-blase blockquote p + p { margin-top: var(--mf-space-4); }
.wa-blase .eyebrow { margin-top: 14px; }

/* „Und dann?" — der Eyecatcher der Verkaufsseite.
   Fassung 17.08.2026 (Issue #29, Miriam am Gerät): „die sonnenstrahlen
   müssen raus … nur dort statt den sonnenstrahlen beere und umrandung in
   gold als eyecatcher." Vorher lag hier ein Rosa-Verlauf mit einem
   Sonnenstrahlen-Kranz, beides ist ersatzlos gestrichen.
   Jetzt: der Baustein ist selbst eine Beere-Fläche und steht als
   gerahmte Karte auf dem warmen Grund der übrigen Seite. Der Aquarell-
   Klecks bleibt hier draußen, auf Beere wäre er ein heller Fleck. */
.sektion--hoehepunkt {
  background: var(--mf-surface-card);
  padding-block: clamp(46px, 6vw, 86px);
}
.sektion--hoehepunkt .blob { display: none; }
.sektion--hoehepunkt > .container {
  background: var(--mf-beere);
  color: var(--mf-beere-hell);
  border: 1px solid var(--mf-gold);
  outline: 1px solid var(--mf-gold-linie);
  outline-offset: 7px;
  border-radius: var(--mf-radius-xl);
  padding-block: clamp(48px, 6vw, 88px);
  max-width: calc(var(--mf-container) - 80px);
}
.sektion--hoehepunkt h2 { color: var(--mf-text-on-dark); }
.sektion--hoehepunkt strong { color: var(--mf-text-on-dark); }
.sektion--hoehepunkt .eyebrow {
  color: var(--mf-gold);
  border-color: var(--mf-gold-linie);
}
.sektion--hoehepunkt .eyebrow--punkt::before { background: var(--mf-gold); }
.sektion--hoehepunkt .cta-beizeile { color: var(--mf-beere-hell); opacity: .75; }

.xxl { text-align: center; }
.xxl p { margin-left: auto; margin-right: auto; max-width: 54ch; }
.xxl-zeile {
  font-family: var(--mf-font-display);
  font-weight: var(--mf-weight-regular);
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.12;
  color: var(--mf-gold);
  margin-top: 30px;
  text-wrap: balance;
}

/* ── Wunschbild-Sektion („Stell dir euren Alltag vor") ──
   Fassung 17.08.2026 (Issue #29). Miriam: „ist immer noch unordentlich
   der teil. kannst du das anders machen. einheitlich? übersichtlich"
   Der Grund war nicht die Schrift, sondern der ständige Achsenwechsel:
   linksbündig, mittig, wieder linksbündig, dazu Breitensprünge und drei
   verschiedene Blockabstände. Drei Regeln räumen das auf. */

/* 1 · Eine Achse: alles mittig. Nur Lesetext INNERHALB der Kärtchen und
   Blasen bleibt linksbündig, sonst wird er unruhig. */
.sektion--wunschbild { text-align: center; }
.sektion--wunschbild .szene,
.sektion--wunschbild .wa-blase { text-align: left; }
.sektion--wunschbild .container--schmal > p { margin-inline: auto; }

/* 2 · Ein Rhythmus für alle Blöcke der Sektion. */
.sektion--wunschbild > .container + .container { margin-top: clamp(38px, 4vw, 56px); }

/* 3 · Eine Treppe: die Serife trägt die großen Aussagen, Karla den
   Lesetext. Das Versprechen wechselt dafür von Karla auf die Serife und
   gehört damit sichtbar zur Überschrift. */
.sektion--wunschbild .versprechen {
  font-family: var(--mf-font-display);
  font-size: clamp(31px, 3.2vw, 40px);
  line-height: 1.14;
  letter-spacing: var(--mf-display-ls);
  color: var(--mf-salbei-dark);
  max-width: 30ch;
  margin-inline: auto;
}

/* Der Gedanke der Mama: dieselbe Serife, kursiv, eine Stufe kleiner als
   das Versprechen. Damit ist er erkennbar ein Zitat und keine zweite
   Überschrift. (Zwischenstände Handschrift und Zitat-Band wurden am
   17.08. verworfen: „zu viele verschiedene größen und schriftarten".) */
.sektion--wunschbild .gedanke {
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: clamp(25px, 2.5vw, 31px);
  line-height: 1.24;
  color: var(--mf-salbei-dark);
  max-width: 28ch;
  margin-top: var(--mf-space-5);
  margin-inline: auto;
}

/* Die kurzen Stimmen sind der Vorgeschmack, nicht der Bericht: gleiche
   Rundung wie die Wunschbild-Kärtchen, aber Haarlinie statt Schatten und
   kleinere Schrift. Sonst läse sich die Sektion als „vier Kästchen, dann
   drei". Die ausführlichen Stimmen von Tanja und Romana weiter unten
   bleiben unverändert. */
.wa-stimmen--kurz .wa-blase {
  background: var(--mf-weiss-warm);
  border: 1px solid var(--mf-line-subtle);
  border-radius: var(--mf-radius-sm);
  border-top-left-radius: 4px;
  box-shadow: none;
  padding: 22px 24px;
  font-size: var(--mf-body-sm);
}
.wa-stimmen--kurz .wa-blase .eyebrow { margin-top: 12px; }

/* Karten-Zitate: Browser-Default-Ränder weg (betrifft auch die
   kurzen Stimmen-Karten der Traum-Sektion) */
.karte blockquote { margin: 0; }
.karte blockquote p + p { margin-top: var(--mf-space-4); }

/* Porträts: organisch maskiert, passend zur Blob-Welt */
.portraet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 46% 54% 52% 48% / 55% 47% 53% 45%;
}
.hero-raster {
  display: grid;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.hero-raster .portraet { max-width: 330px; }
@media (min-width: 56rem) {
  .hero-raster { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); }
  .hero-raster .portraet { max-width: none; }
}
.warum-raster {
  display: grid;
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}
.warum-raster .portraet { max-width: 300px; }
@media (min-width: 56rem) {
  .warum-raster { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
  .warum-raster .portraet { max-width: none; }
}

/* ── Druck: Mitnehmen heißt Drucken ──
   Die Seite druckt als Ratgeber samt Übungsergebnis; Navigation,
   Deko und CTAs bleiben weg. FAQ klappt modul.js beim Drucken auf. */
@media print {
  .site-header, .site-footer, .toc, .welle, .blob,
  .hz-cta-insta, .weiter, .btn, .aufnahme, .hz-atem,
  .atem, .pl-runde, .pl-ueberspringen,
  .hz-daten-hinweis, .nojs-hinweis { display: none !important; }
  /* Probelauf druckt als vollständige Schritt-Liste, egal wo die
     Leserin gerade steht */
  .pl--js .pl-schritt { display: block !important; }
  .pl-schritt { break-inside: avoid; }
  body { background: #fff; font-size: 12pt; }
  .sektion, .sektion--warm, .sektion--sand, .sektion--dunkel { background: #fff; padding-block: 14pt; }
  .container { max-width: none; padding-inline: 0; }
  .ergebnis-panel {
    background: #fff;
    border: 1pt solid #4A2F1D;
    color: #4A2F1D;
    break-inside: avoid;
  }
  .ergebnis-panel h4, .ergebnis-eintrag dt { color: #4A2F1D; }
  .schritt, .faq-liste details { break-inside: avoid; }
  .ue-felder textarea { border: 1pt solid #935D37; }
}

/* ══ Bewegung (Issue #29, 17.08.2026) ═══════════════════
   Miriam: „in der heutigen zeit darf und muss viel los sein damit man
   dran bleibt. seh immer wieder schüttelnde buchungsknöpfe beim drüber
   fahren. einblendungen, action eben."

   Drei Dinge, mehr nicht, damit die Seite lebendig wird und trotzdem
   hochwertig bleibt: Auftritte beim Scrollen, ein Wackler auf den
   Knöpfen beim Drüberfahren, ein ruhiger Puls auf dem Haupt-Knopf.
   Verhalten dazu in /assets/js/bewegung.js. */

/* ── 1 · Auftritte beim Scrollen ──
   Versteckt wird NUR, wenn das Skript läuft (html.js-bewegung). Ohne JS
   steht die Seite vollständig da. Sicherheitsnetz zusätzlich unten für
   „weniger Bewegung". */
.js-bewegung .auftritt {
  opacity: 0;
  transform: translateY(26px);
}
.js-bewegung .auftritt.ist-da {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s var(--mf-ease-soft) var(--auftritt-verzug, 0ms),
    transform .7s var(--mf-ease-soft) var(--auftritt-verzug, 0ms);
}

/* ── 2 · Der Wackler auf den Knöpfen ──
   Beim Drüberfahren, einmal kurz, nicht in Dauerschleife: ein Knopf, der
   pausenlos zappelt, wirkt billig. Am Handy gibt es kein Drüberfahren,
   dort trägt der Puls unten. */
@keyframes mf-wackeln {
  0%, 100% { transform: translateY(-2px) rotate(0deg); }
  20% { transform: translateY(-2px) rotate(-1.6deg); }
  40% { transform: translateY(-2px) rotate(1.4deg); }
  60% { transform: translateY(-2px) rotate(-1deg); }
  80% { transform: translateY(-2px) rotate(.6deg); }
}
@media (hover: hover) {
  .btn:hover { animation: mf-wackeln .45s var(--mf-ease-soft) 1; }
}

/* ── 3 · Der Puls auf dem Haupt-Knopf ──
   Nur die beiden großen CTAs mit Schatten (.btn--schatten) atmen leise
   weiter, damit das Auge sie findet. Sehr langsam und sehr flach: Es soll
   auffallen, ohne zu drängen. */
@keyframes mf-puls {
  0%, 100% { box-shadow: var(--mf-shadow-cta); }
  50% { box-shadow: 0 22px 40px -14px rgba(147,93,55,.85); }
}
.btn--schatten { animation: mf-puls 3.4s var(--mf-ease-soft) infinite; }
.btn--schatten:hover { animation: mf-wackeln .45s var(--mf-ease-soft) 1; }

/* Sicherheitsnetz: „weniger Bewegung" hält alles an UND sichtbar.
   Die globale Regel ganz oben kürzt Dauern nur, sie könnte einen
   Auftritt sonst auf Dauer unsichtbar stehen lassen. */
@media (prefers-reduced-motion: reduce) {
  .js-bewegung .auftritt { opacity: 1 !important; transform: none !important; }
  .btn--schatten, .btn:hover { animation: none !important; }
}

/* ══ Bild-Kopf der Startseite (Issue #28, 17.08.2026) ═══
   Miriam: „der header - ist kein header. so darf eine startseite nicht
   beginnen. einfach mit sprechblasen und fragen. das ist
   unprofessionell." Aus zwei Entwürfen hat sie den Bild-Kopf gewählt.

   Zuschnitt: Miriam sitzt im Foto LINKS der Mitte, ihr Gesicht auf etwa
   43 % der Breite. Der Text steht deshalb rechts und der warme Schleier
   kommt von rechts, sonst liegt die Schrift in ihrem Gesicht. */
.bildkopf {
  position: relative;
  display: grid;
  /* Eine Spalte über die volle Breite. Ohne diese Zeile richtet sich die
     Spalte nach ihrem Inhalt und der Textblock landet trotz margin-left
     in der Mitte. */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(480px, 78vh, 780px);
  overflow: hidden;
  background: var(--mf-surface-card);
}
.bildkopf-bild { position: absolute; inset: 0; z-index: 0; }
.bildkopf-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.bildkopf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(265deg,
    rgba(255, 248, 242, .97) 0%,
    rgba(255, 248, 242, .93) 30%,
    rgba(255, 248, 242, .55) 48%,
    rgba(255, 248, 242, .06) 68%);
}
.bildkopf-inhalt {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(48px, 7vw, 90px);
}
.bildkopf-text { max-width: 30rem; margin-left: auto; }

/* Am Handy steht das Foto oben und der Text darunter: ein Schleier über
   dem ganzen Bild würde das Gesicht schlucken. */
@media (max-width: 46rem) {
  .bildkopf { display: block; min-height: 0; }
  .bildkopf-bild { position: relative; display: block; height: 46vh; }
  .bildkopf-bild img { object-position: 46% 16%; }
  .bildkopf::after { display: none; }
  .bildkopf-inhalt { padding-block: clamp(30px, 8vw, 50px); }
  .bildkopf-text { max-width: none; margin-left: 0; }
}

/* ── Produkt-Sektion der Startseite ────────────────────
   Miriam, 17.08.2026: „da wo die produkte stehen als hintergrund beere."
   Die Fläche kommt über .sektion--dunkel, die beiden Angebots-Karten
   müssen dabei hell bleiben, sonst verschwinden sie in der Fläche —
   und genau sie sollen ja herausstechen. */
.sektion--produkte .karte {
  background: var(--mf-weiss-warm);
  border: var(--mf-border-hairline);
  color: var(--mf-text-body);
}
.sektion--produkte .karte h2,
.sektion--produkte .karte h3 { color: var(--mf-text-strong); }
.sektion--produkte .karte .eyebrow {
  color: var(--mf-terrakotta);
  border-color: var(--mf-line-strong);
}
.sektion--produkte .karte .eyebrow--punkt::before { background: var(--mf-apricot); }

/* ══ Kontaktseite /kennenlernen/ (Issue #26, 17.08.2026) ══
   Miriam: „nicht gleich wie die anderen seite. da soll man direkt buchen
   ganz oben gleich. braucht da nicht viel mehr."
   Deshalb beginnt diese eine Seite mit einer tiefen Beere-Fläche statt
   mit dem warmen Kopf der übrigen Seiten, ohne Foto und ohne Klecks.
   Sie ist eine Handlungsseite: der Kontakt steht über der Falte. */
.kontakt-kopf { padding-block: clamp(52px, 9vw, 120px); }

.kontakt-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--mf-space-8);
}
.kontakt-wege--klein { margin-top: var(--mf-space-8); }

.kontakt-klein {
  margin-top: var(--mf-space-5);
  font-size: var(--mf-body-sm);
  color: var(--mf-creme-body);
}
.kontakt-klein a { color: var(--mf-creme-on-dark); text-decoration: underline; }

/* Der Ablauf in drei Zeilen statt in Schritt-Blöcken: diese Seite soll
   kurz bleiben, die ausführliche Fassung steht auf den Verkaufsseiten. */
.kontakt-ablauf {
  list-style: none;
  margin: var(--mf-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 56ch;
}
.kontakt-ablauf li {
  padding-left: 22px;
  position: relative;
}
.kontakt-ablauf li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mf-apricot);
}

/* ══ Nachrichten-Fenster (Issue #26, 17.08.2026) ═══════
   Miriams Wunsch nach einem „Nachrichten-Plugin", gebaut ohne fremdes
   Werkzeug: ein Knopf unten rechts, der zwei Wege öffnet.
   Markup und Verhalten in /assets/js/nachricht.js, ohne JS gibt es den
   Knopf nicht und die Seite bleibt unverändert. */
.nachricht {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.nachricht-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--mf-tap-min);
  padding: 14px 22px;
  border: 0;
  cursor: pointer;
  border-radius: var(--mf-radius-pill);
  background: var(--mf-action-primary);
  color: var(--mf-on-action);
  font-family: var(--mf-font-body);
  font-size: 15px;
  font-weight: var(--mf-weight-bold);
  box-shadow: var(--mf-shadow-cta);
  transition: transform var(--mf-dur-base) ease, background var(--mf-dur-base) ease;
}
.nachricht-knopf:hover {
  background: var(--mf-action-primary-hover);
  transform: var(--mf-lift-sm);
}
.nachricht-symbol { font-size: 18px; line-height: 1; }

/* Am Handy nur das Symbol: die Fläche ist kostbar, und ein runder Knopf
   unten rechts wird dort ohnehin verstanden. */
@media (max-width: 34rem) {
  .nachricht-label { position: absolute; left: -9999px; }
  .nachricht-knopf { padding: 0; width: 56px; height: 56px; justify-content: center; }
  .nachricht-symbol { font-size: 24px; }
}

.nachricht-fenster {
  width: min(300px, calc(100vw - 32px));
  padding: var(--mf-space-6);
  border-radius: var(--mf-radius-sm);
  background: var(--mf-creme);
  border: var(--mf-border-hairline);
  box-shadow: var(--mf-shadow-card);
  animation: mf-pop var(--mf-dur-slow) var(--mf-ease-soft);
}
.nachricht-titel {
  font-family: var(--mf-font-display);
  font-size: var(--mf-display-xs);
  color: var(--mf-text-strong);
}
.nachricht-text {
  margin-top: var(--mf-space-2);
  font-size: var(--mf-body-sm);
  color: var(--mf-braun-600);
}
.nachricht-weg {
  display: flex;
  width: 100%;
  margin-top: var(--mf-space-4);
  font-size: 14.5px;
  padding: 13px 18px;
}
.nachricht-mehr {
  display: inline-block;
  margin-top: var(--mf-space-4);
  font-size: var(--mf-body-xs);
  color: var(--mf-terrakotta);
  text-decoration: underline;
}

@media print { .nachricht { display: none; } }

/* ══ Kopf von /klar/ (Issue #25, 17.08.2026) ════════════
   Miriam: „die seite sieht den anderen wieder zu ähnlich. besonders der
   header. das geht nicht." Deshalb hat mama.klar als einzige Seite einen
   Kopf auf Sand, ohne Porträt, und rechts eine Karte mit den Sätzen, mit
   denen Mamas zu ihr kommen. Die Sätze stehen als Liste da, nicht als
   Zitate: es sind ihre O-Töne, keine Testimonials. */
.klar-kopf .hero-raster { align-items: start; }

.themen-karte {
  background: var(--mf-creme);
  border: var(--mf-border-hairline);
  border-top: 3px solid var(--mf-gold);
  border-radius: var(--mf-radius-sm);
  padding: clamp(24px, 3vw, 34px);
}
.themen-karte .eyebrow { color: var(--mf-terrakotta); }

.themen-liste {
  list-style: none;
  margin: var(--mf-space-5) 0 0;
  padding: 0;
  font-size: var(--mf-body-sm);
  color: var(--mf-braun-700);
}
.themen-liste li { padding-block: 12px; }
.themen-liste li + li { border-top: 1px solid var(--mf-line-subtle); }

.themen-fuss {
  margin-top: var(--mf-space-5);
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: var(--mf-display-xs);
  color: var(--mf-terrakotta);
}

/* Auf breiten Schirmen steht die Karte rechts neben der Aussage; das
   Raster kommt aus .hero-raster, hier nur die Breite der zweiten Spalte. */
@media (min-width: 56rem) {
  .klar-kopf .hero-raster { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
}

/* Das Gegenstück zur Themen-Karte im Kopf von /klar/: dieselbe Form,
   dieselben Situationen, diesmal danach (Issue #25, 17.08.2026).
   Steht auf Salbei, deshalb bleibt der Text darin linksbündig. */
.themen-karte--danach {
  margin-top: var(--mf-space-7);
  max-width: 700px;
  text-align: left;
  border-top-color: var(--mf-gold);
}
.themen-karte--danach .themen-fuss { color: var(--mf-salbei-dark); }

/* Der Kopf-Knopf ist raus (Issue #26, 17.08.2026). An seiner Stelle
   steht ein ruhiger Textlink, damit der Weg zum Gespräch oben sichtbar
   bleibt, ohne mit dem Nachrichten-Fenster unten rechts zu konkurrieren. */
.hauptnav-cta {
  margin-left: auto;
  font-size: 15px;
  font-weight: var(--mf-weight-semibold);
  color: var(--mf-terrakotta);
  white-space: nowrap;
}
.hauptnav-cta:hover { color: var(--mf-terrakotta-dark); }
@media (max-width: 48rem) {
  .hauptnav-cta { display: none; }   /* steht dann im Burger-Menü */
}

/* Die Mehr-Kaskade im Abschluss von /klar/ (Issue #25, 17.08.2026):
   Miriams diktierte Zeilen bauen sich beim Lesen auf, deshalb stehen sie
   größer und untereinander statt als Fließtext. */
.klar-kaskade {
  margin-top: var(--mf-space-6);
  font-family: var(--mf-font-display);
  font-size: clamp(24px, 2.6vw, 33px);
  line-height: 1.32;
  color: var(--mf-gold);
  max-width: 30ch;
}

/* ══ Startseite „Kompromiss" (Issue #28, 05.09.2026) ════════════════
   Miriam fand die Texte des Prototyps muster/start-max/ zu kurz, Patrick
   will dessen Optik behalten (Entscheidung in #40, 02.09.2026). Diese
   Bausteine tragen die start-max-Optik (Kino-Kopf mit Foto, organische
   Kapitelkanten, Beere-Kapitel, Traum-Karten mit Bildern, Blob-Porträt,
   Chat-Stimmen, Gold-Finale) mit den vollen Texten der abgestimmten
   Startseite. Bewegung: nur die Auftritte aus bewegung.js, sonst nichts
   (kein GSAP, kein Pinnen, kein Ton, kein Video).
   Zuerst auf /muster/start-neu/ zum Vergleich; nach Miriams Freigabe wird
   die Seite zur index.html, der Bild-Kopf (.bildkopf) oben fällt dann. */

/* Pfeil an Textlinks („Meine ganze Geschichte →"): im Knopf sorgt der
   Flex-Abstand für Luft, im Fließtext-Link klebte er bisher am Wort. */
a:not(.btn) > .btn-pfeil { margin-left: .3em; }

/* Kapitel: jedes malt über das Ende des vorigen, die Oberkante ist
   organisch gerundet („kurve" aus start-max). isolation hält Foto,
   Schleier und Text eines Kapitels in dessen eigener Ebene, sonst läge
   der Text des Kopfes über der Kante des nächsten Kapitels. Das Kapitel
   VOR einer Kurve bekommt unten den überdeckten Streifen als Polster
   dazu (.kap--kante), damit sein letzter Absatz nicht an der Kante klebt. */
.kap { position: relative; isolation: isolate; }
.kap--kante { padding-bottom: calc(var(--mf-section-y) + clamp(28px, 6vw, 64px)); }
.kap--kurve {
  border-radius: 52% 48% 0 0 / clamp(28px, 6vw, 64px) clamp(22px, 5vw, 52px) 0 0;
  margin-top: calc(-1 * clamp(28px, 6vw, 64px));
}

/* Kapitelkopf: Eyebrow, Titel und Vorsatz mittig (Bühnen-Charakter aus
   start-max); Lesetext, Karten und Blasen darunter bleiben linksbündig,
   sonst wird Fließtext unruhig (Miriams „unordentlich", 17.08.2026). */
.kap-kopf { text-align: center; }
.kap-kopf h2 { margin-top: 14px; margin-inline: auto; max-width: 26ch; text-wrap: balance; }
.kap-kopf > p:not(.eyebrow) { margin-top: 22px; margin-inline: auto; max-width: 54ch; }
.lesetext { max-width: 62ch; margin-inline: auto; margin-top: clamp(28px, 3vw, 40px); }
.lesetext p { font-size: var(--mf-body-lg); }
.lesetext strong { color: var(--mf-text-strong); }

/* ── 1 · Kino-Kopf: Foto auf voller Höhe, Text unten im Abendlicht ──
   Schleier-Variante A aus start-max: der Schleier beginnt früh und legt
   sich als weiche Tasche hinter den Textblock, damit die Schrift auf dem
   Foto trägt. Miriams Gesicht liegt bei etwa 42 % der Bildbreite oben,
   der Text steht unten. Höhe = ein Bildschirm abzüglich Kopfzeile. */
.kino {
  display: grid;
  align-items: end;
  min-height: calc(100svh - 95px);
  overflow: clip;
  background: var(--mf-braun);
  color: var(--mf-creme);
  padding-block: clamp(80px, 14vh, 140px) clamp(110px, 16vh, 160px);
}
.kino-bild { position: absolute; inset: -6%; z-index: 0; }
.kino-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 16%;
  filter: sepia(.14) saturate(1.05) contrast(1.02) brightness(.96);
}
.kino::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(95% 75% at 22% 74%, rgba(64,38,15,.5), transparent 62%),
    linear-gradient(178deg, rgba(64,38,15,.16) 26%, rgba(64,38,15,.64) 64%, rgba(64,38,15,.9) 100%),
    radial-gradient(120% 90% at 78% 8%, rgba(255,248,242,.2), transparent 55%);
}
/* Das warme Licht oben rechts, in start-max atmend, hier still. */
.kino::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .75;
  background: radial-gradient(60% 45% at 70% 18%, rgba(246,222,198,.9), transparent 70%);
}
/* Im Grid schrumpft ein Container mit margin:auto auf Inhaltsbreite und
   rutscht in die Mitte, deshalb ausdrücklich volle Breite. */
.kino .container { position: relative; z-index: 2; width: 100%; }
.kino-text {
  max-width: 640px;
  text-shadow: 0 2px 26px rgba(64,38,15,.6), 0 1px 3px rgba(64,38,15,.4);
}
/* Der Eyebrow sitzt oben im Kopf, wo der Schleier dünn und das Bokeh hell
   ist; als lose Schrift war er dort nicht lesbar (Patrick, 05.09.2026).
   Deshalb ein Chip: dunkle, leicht durchscheinende Pille mit heller
   Kante, Schrift in Creme, ohne Schatten. Am Handy engere Laufweite,
   damit die Zeile in eine Pille passt. */
.kino .eyebrow {
  color: var(--mf-creme);
  background: rgba(64,38,15,.46);
  border: 1px solid rgba(246,222,198,.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-shadow: none;
}
.kino .eyebrow--punkt::before { background: var(--mf-apricot); }
@media (max-width: 46rem) {
  .kino .eyebrow { letter-spacing: var(--mf-eyebrow-ls-tight); }
}
.kino h1 {
  margin-top: 18px;
  font-size: clamp(52px, 11.5vw, 118px);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--mf-creme);
}
.kino h1 .zeile { display: block; }
/* Das Tinten-Wort: Verlauf in der Schrift statt Farbe. Der Textschatten
   würde durch die Verlaufs-Füllung schimmern, deshalb drop-shadow. */
.kino h1 em {
  font-style: italic;
  color: transparent;
  background: linear-gradient(100deg, var(--mf-sand), var(--mf-apricot) 30%, var(--mf-gold) 55%, var(--mf-sand) 80%, var(--mf-apricot));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 14px rgba(64,38,15,.45));
  text-shadow: none;
}
/* Breite Fenster: Miriams Gesicht liegt bei rund 43 % der Bildbreite und
   das Querformat füllt die Breite ohne Überstand, object-position kann es
   also nicht verschieben. Stattdessen wird die Bildfläche nach rechts
   verlängert (der Überstand ist geclippt): das Gesicht wandert nach
   rechts oben, der Text steht links davon frei. Die H1 bleibt dafür in
   drei Zeilen kompakt. */
@media (min-width: 64rem) {
  .kino-bild { right: -56%; }
  .kino h1 { font-size: clamp(60px, 6.2vw, 84px); }
}
/* Handy: das Hochformat-Ausschnitt zeigt das Gesicht im oberen Drittel,
   der Text rückt darunter. Der Knopf bleibt im ersten Bildschirm. */
@media (max-width: 46rem) {
  .kino { padding-top: clamp(260px, 36svh, 320px); padding-bottom: 80px; }
  .kino .vorspann { font-size: 16.5px; }
}
.kino .vorspann { margin-top: 22px; color: var(--mf-creme-body); max-width: 40ch; }
.kino .btn { margin-top: 30px; box-shadow: var(--mf-shadow-cta); }
.kino .cta-beizeile { color: var(--mf-creme-muted); letter-spacing: .04em; }

/* ── 2 · Gedanken: Beere-Kapitel mit den Sprechblasen ──
   start-max zeigte hier eine gepinnte Satz-Sequenz; die fällt weg (#40).
   Ein statischer Stapel großer kursiver Zeilen wäre aber genau der
   „Gedankenstrom", den Miriam am 16.08.2026 gegen die Sprechblasen
   verworfen hat. Also: ihre Blasen, auf der dunklen Bühne von start-max. */
.sektion--gedanken { background: var(--mf-beere-tief); color: var(--mf-beere-hell); overflow: clip; }
.sektion--gedanken .eyebrow { color: var(--mf-gold); }
.sektion--gedanken h2 { color: var(--mf-creme); }
.gedanken-blob {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  width: 110vmin;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: .16;
  mix-blend-mode: screen;
  filter: blur(6px) saturate(.7);
}
.gedanken-blob img { display: block; width: 100%; height: auto; }
.sektion--gedanken .container { position: relative; z-index: 1; }
.sektion--gedanken .blasen {
  margin-inline: auto;
  margin-top: clamp(30px, 4vw, 44px);
  max-width: 620px;
  text-align: left;
}
.sektion--gedanken .blase {
  border-color: transparent;
  box-shadow: 0 22px 44px -24px rgba(0,0,0,.6);
  font-size: 18px;
}

/* ── 3 · Der Dreh: das System-Bild aus start-max, still ── */
.system-bild { width: min(80vw, 380px); margin: clamp(28px, 4vw, 44px) auto 0; }
.system-bild svg { display: block; width: 100%; height: auto; overflow: visible; }
.system-bild .rad { fill: none; stroke-linecap: round; }
.system-bild .rad--du { stroke: var(--mf-apricot); }
.system-bild .rad--kind { stroke: var(--mf-salbei-soft); }
.system-bild .rad--alltag { stroke: var(--mf-gold); }
.system-bild .nabe { fill: var(--mf-creme-warm); }
.system-bild text { fill: var(--mf-terrakotta); font: var(--mf-weight-bold) 15px var(--mf-font-body); }

/* ── 4 · Wunschbild: Salbei, vier Traum-Karten mit Bild ──
   Die Karten aus start-max (Bild hinten, Verlauf nach Creme, Serifen-
   Kopf), als Raster statt horizontaler Fahrt. Leicht gedreht, damit sie
   wie hingelegt wirken. */
.sektion--traum { background: var(--mf-salbei); color: var(--mf-salbei-mid); }
.sektion--traum .eyebrow { color: var(--mf-salbei-mid); }
.sektion--traum h2 { color: var(--mf-salbei-dark); }
.sektion--traum .traum-satz {
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: clamp(19px, 2.6vw, 24px);
  letter-spacing: var(--mf-display-ls);
  color: var(--mf-salbei-mid);
}
.szenen--bild {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(38px, 5vw, 60px);
  text-align: left;
}
.traumkarte {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(340px, 46vh, 440px);
  display: grid;
  align-content: end;
  gap: 12px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--mf-radius-xl);
  background: var(--mf-creme);
  box-shadow: var(--mf-shadow-card);
}
.traumkarte:nth-child(odd) { rotate: -1.2deg; }
.traumkarte:nth-child(even) { rotate: 1.1deg; margin-top: 18px; }
.traumkarte-bild { position: absolute; inset: 0; z-index: -1; }
.traumkarte-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.traumkarte-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, transparent 30%, rgba(255,248,242,.94) 62%);
}
.traumkarte .szene-icon { font-size: 30px; line-height: 1; }
.traumkarte p { margin-top: 0; font-size: var(--mf-body-lg); color: var(--mf-braun-700); }
.traumkarte p strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mf-font-display);
  font-weight: var(--mf-weight-medium);
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.15;
  letter-spacing: var(--mf-display-ls);
  color: var(--mf-text-strong);
}

/* ── 5 · Wer: Blob-Porträt (Maske aus start-max) neben dem vollen Text ── */
.wer-raster { display: grid; gap: 34px; align-items: center; max-width: 1020px; margin-inline: auto; }
@media (min-width: 56rem) {
  .wer-raster { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); }
}
.blob-portraet { position: relative; isolation: isolate; width: min(88vw, 420px); margin-inline: auto; }
.blob-portraet img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask: url("/assets/blobs/petal-rose.png") center / 130% no-repeat;
          mask: url("/assets/blobs/petal-rose.png") center / 130% no-repeat;
  filter: sepia(.1) saturate(1.04);
}
.blob-portraet::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: url("/assets/blobs/peach.webp") center / contain no-repeat;
  opacity: .55;
}
.wer-text .eyebrow { color: var(--mf-terrakotta); }
.wer-text h2 { margin-top: 14px; }
.wer-text p { margin-top: 18px; max-width: 48ch; }
.wer-text .wer-zitat {
  margin-top: 22px;
  max-width: 26ch;
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
  letter-spacing: var(--mf-display-ls);
  color: var(--mf-terrakotta);
}
.wer-link { display: inline-block; font-weight: var(--mf-weight-bold); }

/* ── 6 · Stimmen: eine Chat-Spalte (start-max), ohne Tipp-Theater ── */
.sektion--stimmen { background: var(--mf-creme-warm); }
.chat { display: grid; gap: 14px; max-width: 640px; margin: clamp(30px, 4vw, 44px) auto 0; text-align: left; }
.chat-blase {
  margin: 0;
  max-width: 88%;
  background: var(--mf-creme);
  border-radius: 22px 22px 22px 6px;
  padding: 18px 20px;
  box-shadow: 0 10px 26px -18px rgba(74,47,29,.4);
}
.chat-blase blockquote { margin: 0; }
.chat-blase blockquote p { margin-top: 0; color: var(--mf-braun-700); }
.chat-blase .eyebrow { margin-top: 10px; color: var(--mf-apricot); letter-spacing: var(--mf-eyebrow-ls-tight); }

/* ── 7 · Zwei Wege: Beere, helle Karten mit Goldkante (start-max) ── */
.sektion--wege .eyebrow { color: var(--mf-gold); }
.sektion--wege .raster { margin-top: clamp(34px, 4vw, 48px); max-width: 1040px; margin-inline: auto; text-align: left; }
.weg {
  background: var(--mf-creme);
  color: var(--mf-braun-700);
  border-radius: var(--mf-radius-xl);
  border-top: 4px solid var(--mf-gold);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--mf-shadow-card);
}
.sektion--wege .weg .eyebrow { color: var(--mf-terrakotta); border-color: var(--mf-line-strong); }
.sektion--wege .weg .eyebrow--punkt::before { background: var(--mf-apricot); }
.sektion--wege .weg h3 {
  margin-top: 10px;
  font-weight: var(--mf-weight-medium);
  font-size: clamp(30px, 4.6vw, 40px);
  color: var(--mf-text-strong);
}
.weg .claim {
  margin-top: 4px;
  font-family: var(--mf-font-display);
  font-style: italic;
  font-size: clamp(19px, 2.6vw, 23px);
  letter-spacing: var(--mf-display-ls);
  color: var(--mf-terrakotta);
}
.weg strong { color: var(--mf-text-strong); }
.weg .btn { margin-top: 24px; }

/* ── 8 · Kostenlos anfangen ── */
.sektion--los .raster { margin-top: clamp(34px, 4vw, 48px); text-align: left; }
.sektion--los .karte h3 { margin-top: 12px; }
.sektion--los .schluss { margin-top: 34px; margin-inline: auto; max-width: 54ch; text-align: center; }

/* ── 9 · Finale: Beere mit Gold-Glut (start-max), das Zitat groß und kursiv ── */
.sektion--finale {
  background: var(--mf-beere);
  color: var(--mf-beere-hell);
  overflow: clip;
  text-align: center;
  padding-block: clamp(90px, 14vh, 150px);
}
.sektion--finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% 42%, rgba(198,161,91,.4), transparent 70%);
}
.sektion--finale .container { position: relative; z-index: 1; }
.sektion--finale .eyebrow { color: var(--mf-gold); }
.finale-zitat {
  margin-top: 18px;
  margin-inline: auto;
  font-style: italic;
  font-size: clamp(38px, 8vw, 84px);
  line-height: 1.04;
  color: var(--mf-creme);
  text-wrap: balance;
}
.sektion--finale p { margin-inline: auto; max-width: 46ch; color: var(--mf-creme-body); }
.sektion--finale .finale-traum { margin-top: 26px; font-size: var(--mf-body-lead); }
.sektion--finale strong { color: var(--mf-creme); }
.sektion--finale .btn { margin-top: 32px; }
.sektion--finale .cta-beizeile { color: var(--mf-creme-muted); letter-spacing: .04em; }