/* ============================================================================
   stil-masterplan.css  ·  08.09.2026  ·  NUR VORSCHAU (/neu-start/), NICHT LIVE

   Die Bausteine für Toms Masterplan-Seiten: Startseite, Kosmischer Abdruck,
   Kosmische Lesung. Dieses Blatt liegt NEBEN stil.css und ersetzt es nicht —
   Farben, Schriften und Grundraster kommen weiter von dort, damit die übrigen
   Vorschau-Seiten unberührt bleiben.

   Die Regeln, die dieses Blatt durchsetzt:
   · Fließtext nie unter 18 px, Sekundärtext nie unter 16 px. Ausgenommen sind
     Kleinstmarken, die niemand liest, sondern erkennt: Versalien-Etiketten auf
     dem Buchdeckel, die Seitenzahl der Doppelseite, die Ziffern der 21 Tage,
     die Spielzeit. Sie liegen bei 12 bis 13 px.
   · Gold trägt Wert und Handlung. Ein Vollton-Knopf je Bildschirmhöhe.
   · Ein durchgehender Grund. Flächen sind heller als der Grund, nie dunkler,
     mit einer bewussten Ausnahme: die Hörbuch-Sektion.
   · Das Produkt ist der visuelle Star. Keine gleich großen Icon-Kacheln.
   · Berührungsziele nie unter 48 px.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   HAUSREGEL, aus vier Fehlern an einem Abend · 08.09.2026
   ──────────────────────────────────────────────────────────────────────────
   Am 08.09.2026 stand vier Mal etwas links, das mittig stehen sollte, und
   jedes Mal aus DERSELBEN Ursache:

     .mp-schau-gross   margin: 0 0 var(--mp-7)     156 px daneben
     .mp-schau-wink    margin: 14px 0 0             98 px daneben
     inc-ende.php      style="margin:0"            190 px daneben
     .mp-toc-titel-zeile  margin: 0 0 20px         147 px daneben

   DIE REGEL: `margin: A B C` setzt links UND rechts auf B. Steht dort 0, ist
   jedes geerbte `auto` gelöscht. Ein Kasten mit Höchstbreite klebt dann links,
   auch wenn text-align: center darübersteht — denn das zentriert nur den TEXT
   IM Kasten, nicht den Kasten.

   Wer nur den unteren Abstand ändern will, schreibt `margin-bottom: X` oder
   `margin: 0 auto X`. NIE `margin: 0 0 X` an einem Kasten mit max-width.

   DIE PROBE, die alle Fälle auf einmal findet — im Browser, nicht hier:
   jedes Element mit text-align: center suchen, dessen Kasten schmaler ist als
   sein Elternteil, und die beiden Mitten vergleichen. Kinder einer Flex-Reihe
   sind Fehlalarm; echte Treffer sind Block-Elemente mit einer Höchstbreite in
   Pixeln und margin links/rechts null.
   ══════════════════════════════════════════════════════════════════════════ */


:root {
  /* Abstands-Skala. Vielfache von 4, damit nichts frei erfunden wird. */
  --mp-1:  4px;
  --mp-2:  8px;
  --mp-3: 12px;
  --mp-4: 16px;
  --mp-5: 24px;
  --mp-6: 32px;
  --mp-7: 48px;
  --mp-8: 64px;
  --mp-9: 96px;

  /* Typo-Skala der Masterplan-Seiten. Fließtext = 18 px. */
  --mp-klein:  1rem;      /* 16 px, nur Marken und Fußnoten */
  --mp-text:   1.125rem;  /* 18 px, Fließtext */
  --mp-lead:   1.25rem;   /* 20 px, Vorspann */
  --mp-h3:     1.5rem;    /* 24 px */
  --mp-h2:     clamp(1.75rem, 4.2vw, 2.75rem);
  --mp-h1:     clamp(2.25rem, 7.4vw, 4rem);

  --mp-rund:   16px;
  --mp-rund-s: 10px;
}

/* ---------------------------------------------------------------- Grundzeug */
.mp-abschnitt {
  padding: var(--mp-9) var(--mp-5);
  position: relative;
}
.mp-abschnitt--eng { padding-top: var(--mp-7); padding-bottom: var(--mp-7); }
.mp-abschnitt + .mp-abschnitt { border-top: 1px solid rgba(240,230,211,0.08); }

.mp-spalte { max-width: 1080px; margin: 0 auto; }
.mp-spalte--schmal { max-width: 720px; }
.mp-spalte--breit  { max-width: 1180px; }

.mp-marke {
  display: inline-block;
  font-family: var(--sans, sans-serif);
  font-size: var(--mp-klein);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #C9A84C);
  margin: 0 0 var(--mp-4);
}
.mp-abschnitt h2, .mp-h2 {
  font-family: var(--serif, Georgia, serif);
  font-weight: 400;
  font-size: var(--mp-h2);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--gold-hell, #E8D5A3);
  margin: 0 0 var(--mp-5);
  max-width: 20ch;
}
.mp-abschnitt h2.mp-breit, .mp-h2.mp-breit { max-width: 28ch; }
.mp-abschnitt h3 {
  font-family: var(--serif, Georgia, serif);
  font-weight: 400;
  font-size: var(--mp-h3);
  line-height: 1.25;
  color: var(--text, #F0E6D3);
  margin: 0 0 var(--mp-3);
}
.mp-lead {
  font-size: var(--mp-lead);
  line-height: 1.65;
  color: var(--text, #F0E6D3);
  max-width: 58ch;
  margin: 0 0 var(--mp-6);
}
.mp-text {
  font-size: var(--mp-text);
  line-height: 1.75;
  color: var(--text, #F0E6D3);
  max-width: 62ch;
  margin: 0 0 var(--mp-4);
}
.mp-still { color: var(--slate, #B6AC99); }
.mp-fuss  { font-size: var(--mp-klein); color: var(--slate, #B6AC99); line-height: 1.6; }
.mp-mitte { text-align: center; }
.mp-mitte .mp-h2, .mp-mitte h2, .mp-mitte .mp-lead { margin-left: auto; margin-right: auto; }
/* 08.09.2026 erweitert: dieselbe Regel galt für Überschrift und Lead, aber nicht
   für gewöhnliche Absätze. Genau die klebten dann links, obwohl .mp-mitte sie
   zentriert. Ein zentrierter Kasten mit Höchstbreite braucht IMMER auto. */
.mp-mitte > p, .mp-mitte > .mp-fuss { margin-left: auto; margin-right: auto; }
/* Der Block unter den Produktbildern ist zentriert; seine Absätze auch. */
.mp-schau-gross > p { margin-left: auto; margin-right: auto; }

/* Die goldene Haarlinie als Sektionstrenner, sparsam. */
.mp-linie {
  width: 64px; height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--gold, #C9A84C), transparent);
  margin: 0 0 var(--mp-5);
}
.mp-mitte .mp-linie { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ Knöpfe */
.mp-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px;
  padding: 16px 30px;
  border: 0; border-radius: 999px;
  font-family: var(--sans, sans-serif);
  font-size: var(--mp-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, #E8D5A3 0%, #C9A84C 100%);
  color: #06060A;
  box-shadow: 0 10px 30px rgba(201,168,76,0.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mp-knopf:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(201,168,76,0.3); }
.mp-knopf:active { transform: translateY(0); }
.mp-knopf--gross { min-height: 62px; padding: 19px 38px; font-size: 1.1875rem; }

.mp-knopf-still {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px;
  font-size: var(--mp-text);
  color: var(--gold-hell, #E8D5A3);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,213,163,0.4);
  padding-bottom: 2px;
}
.mp-knopf-still:hover { border-bottom-color: var(--gold, #C9A84C); }

.mp-knopf-rand {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 15px 28px;
  border: 1px solid var(--linie-gold, rgba(201,168,76,0.34));
  border-radius: 999px;
  font-size: var(--mp-text); font-weight: 500;
  color: var(--gold-hell, #E8D5A3); text-decoration: none;
  background: transparent;
}
.mp-knopf-rand:hover { border-color: var(--gold, #C9A84C); background: rgba(201,168,76,0.07); }

/* ------------------------------------------------------------------- Hero */
.mp-hero {
  padding: var(--mp-7) var(--mp-5) var(--mp-8);
  position: relative;
  overflow: hidden;
}
/* Ein einziger, ruhiger Lichtschein. Kein Glitzer, kein Verlauf über alles. */
.mp-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 90%;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.14), transparent 62%);
  pointer-events: none;
}
.mp-hero-raster {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--mp-8); align-items: center;
  position: relative;
}
.mp-hero h1 em {
  /* Der goldene Teil glueht, wie im Juli gemessen: dort lag ein Schein von
     26 und 57 Pixeln darauf, der ueber fuenf Sekunden auf- und abschwoll. */
  color: var(--gold, #C9A84C);
  font-style: italic;
  animation: heroGoldAtmet 5s ease-in-out infinite;
}
@keyframes heroGoldAtmet {
  0%, 100% { text-shadow: 0 0 18px rgba(201,168,74,0.24), 0 0 38px rgba(201,168,74,0.10); }
  50%      { text-shadow: 0 0 30px rgba(201,168,74,0.52), 0 0 68px rgba(201,168,74,0.24); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-hero h1 em { animation: none; text-shadow: 0 0 20px rgba(201,168,74,0.28); }
}
.mp-hero h1 {
  font-family: var(--serif, Georgia, serif);
  /* 10.09.2026 · Gemessen an der Juli-Fassung, die Tom als die schoenste in
     Erinnerung hat: dort stand die Ueberschrift in Playfair 700, Zeilenhoehe
     1,3, mit einem dunklen Schein, der sie vom Grund abhob. Heute stand sie
     in 400 mit Zeilenhoehe 1,04 und ohne jeden Schein — dieselbe Farbe, aber
     flach. Das war der Unterschied, den Tom gesehen hat. */
  font-weight: 700;
  font-size: var(--mp-h1);
  line-height: 1.12;
  letter-spacing: -0.015em;
  /* Weiss und Gold, wie in der Maerz- und Juli-Fassung: der erste Teil in
     Creme, der zweite in Gold und kursiv. Dort hiess die Regel
     `.hero-title { color: var(--cream) }` und `.hero-title em { color:
     var(--gold); font-style: italic }`. */
  color: var(--text, #F0E6D3);
  text-shadow: 0 0 40px rgba(11, 16, 32, 0.6);
  margin: 0 0 var(--mp-5);
  max-width: 15ch;
}
.mp-hero-sub {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  line-height: 1.4;
  color: var(--text, #F0E6D3);
  margin: 0 0 var(--mp-3);
  max-width: 30ch;
}
.mp-hero-sub2 {
  font-size: var(--mp-text); line-height: 1.7;
  color: var(--slate, #B6AC99);
  margin: 0 0 var(--mp-5);
  max-width: 44ch;
}
/* Der Umfangsanker: die vier Belege in einer Zeile, gold getrennt. */
.mp-anker {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px;
  font-size: var(--mp-klein);
  letter-spacing: 0.06em;
  color: var(--text, #F0E6D3);
  margin: 0 0 var(--mp-5);
  padding: 0; list-style: none;
}
.mp-anker li { display: flex; align-items: center; gap: 14px; }
.mp-anker li::after { content: "·"; color: var(--gold, #C9A84C); }
.mp-anker li:last-child::after { content: ""; }
/* Die Preiszeile im Hero. Sie stand in der verkaufsstärksten Phase im ersten
   Bildschirm und fehlt seit dem 28.08. — Beleg: landingpage-historie-2026-09-08. */
.mp-hero-preis {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 0 0 var(--mp-4);
}
.mp-hero-preis b {
  font-family: var(--serif, Georgia, serif);
  font-size: 2rem; font-weight: 400; color: var(--gold, #C9A84C);
  line-height: 1;
}
.mp-hero-preis span { font-size: var(--mp-klein); color: var(--slate, #B6AC99); }
.mp-hero-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-5); }
.mp-hero-siegel {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: var(--mp-5) 0 0; padding: 0; list-style: none;
  font-size: var(--mp-klein); color: var(--slate, #B6AC99);
}
.mp-hero-siegel li::before { content: "✓ "; color: var(--gold, #C9A84C); }

/* --------------------------------------------------- Drei Wege, asymmetrisch */
.mp-wege {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--mp-5);
}
/* 08.09.2026 mit den Entwicklerwerkzeugen gefunden: stil.css setzt in der
   Tippziel-Regel vom 20.08. global `a { display: inline-flex; align-items:
   center; }`. Jede Karte, die ein Link ist, erbt daraus align-items: center —
   und dann ist die Überschrift in der Karte eingerückt, während die Liste
   darunter links steht. Es sah nach einem Text-Fehler aus, war aber die
   Flex-Ausrichtung. `align-items: stretch` muss deshalb an jeder Link-Karte
   ausdrücklich dastehen. */
.mp-weg {
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--panel, #12121A);
  border: 1px solid rgba(240,230,211,0.1);
  border-radius: var(--mp-rund);
  padding: var(--mp-6);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.mp-weg:hover { border-color: var(--linie-gold, rgba(201,168,76,0.34)); transform: translateY(-2px); }
/* Der Abdruck ist die Hauptsache: eigene Spalte, doppelte Höhe, Goldrand. */
.mp-weg--haupt {
  grid-row: span 2;
  padding: var(--mp-7);
  border-color: var(--linie-gold, rgba(201,168,76,0.34));
  background:
    radial-gradient(ellipse at 12% 0%, rgba(201,168,76,0.12), transparent 58%),
    var(--panel, #12121A);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.mp-weg-empfehlung {
  align-self: flex-start;
  font-size: var(--mp-klein); letter-spacing: 0.14em; text-transform: uppercase;
  color: #06060A; background: var(--gold, #C9A84C);
  border-radius: 999px; padding: 5px 14px; margin: 0 0 var(--mp-4);
}
.mp-weg h3 {
  font-family: var(--serif, Georgia, serif); font-weight: 400;
  color: var(--gold-hell, #E8D5A3);
  font-size: 1.5rem; line-height: 1.2; margin: 0 0 var(--mp-2);
}
.mp-weg--haupt h3 { font-size: clamp(1.75rem, 3.4vw, 2.375rem); }
.mp-weg-frage {
  font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: var(--mp-text); line-height: 1.55;
  color: var(--text, #F0E6D3); margin: 0 0 var(--mp-4); max-width: 32ch;
}
.mp-weg--haupt .mp-weg-frage { font-size: 1.375rem; max-width: 26ch; }
.mp-weg-liste { list-style: none; margin: 0 0 var(--mp-5); padding: 0; }
.mp-weg-liste li {
  font-size: var(--mp-text); line-height: 1.6; color: var(--slate, #B6AC99);
  padding: 6px 0 6px 22px; position: relative;
}
.mp-weg-liste li::before {
  content: "✦"; position: absolute; left: 0; top: 6px;
  color: var(--gold, #C9A84C); font-size: 0.8em;
}
.mp-weg-preis {
  margin-top: auto;
  display: flex; align-items: baseline; gap: 10px;
  padding-top: var(--mp-4);
  border-top: 1px solid rgba(240,230,211,0.1);
  margin-bottom: var(--mp-4);
}
.mp-weg-preis b {
  font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: 1.75rem; color: var(--gold, #C9A84C); line-height: 1;
}
.mp-weg--haupt .mp-weg-preis b { font-size: 2.5rem; }
.mp-weg-preis span { font-size: var(--mp-klein); color: var(--slate, #B6AC99); }
.mp-weg-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--mp-text); font-weight: 600; color: var(--gold-hell, #E8D5A3);
}
.mp-weg--haupt .mp-weg-cta {
  align-self: flex-start;
  min-height: 56px; padding: 16px 30px; border-radius: 999px;
  background: linear-gradient(180deg, #E8D5A3 0%, #C9A84C 100%);
  color: #06060A;
  box-shadow: 0 10px 30px rgba(201,168,76,0.22);
}

/* --------------------------------------------------------- Die Produktschau */
.mp-schau { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--mp-7); align-items: center; }
.mp-schau-bilder { position: relative; min-height: 460px; }

/* Buchdeckel, gebaut, nicht fotografiert. */
.mp-buch {
  position: relative; width: 260px; max-width: 62%;
  aspect-ratio: 3 / 4.3;
  border-radius: 4px 12px 12px 4px;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.06) 0 6px, transparent 7px),
    radial-gradient(ellipse at 30% 12%, rgba(201,168,76,0.2), transparent 60%),
    linear-gradient(160deg, #171B33 0%, #0C0F1E 100%);
  border: 1px solid rgba(201,168,76,0.3);
  box-shadow: 24px 30px 70px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.03);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px 22px; gap: 10px;
}
.mp-buch-marke { font-size: 0.75rem; letter-spacing: 0.32em; color: var(--gold, #C9A84C); text-transform: uppercase; }
.mp-buch-titel { font-family: var(--serif, Georgia, serif); font-size: 1.5rem; line-height: 1.2; color: var(--gold-hell, #E8D5A3); }
.mp-buch-name  { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.125rem; color: var(--text, #F0E6D3); }
.mp-buch-stern { color: var(--gold, #C9A84C); font-size: 1.5rem; }
.mp-buch-fuss  { font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--slate, #B6AC99); text-transform: uppercase; }

/* 10.09.2026 · Das Buch im Heldenbereich. Dieselbe Gestalt wie im
   Produktbeweis, nur ohne Telefon daneben: es steht mittig. Der Schatten
   faellt kuerzer, weil es hier nicht schwebt, sondern steht. */
.mp-buch--ruhe {
  width: 232px; max-width: 74%;
  margin: 0 auto;
  box-shadow: 14px 20px 48px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.03);
  cursor: default;
}
.mp-hero-buehne { flex-direction: column; }

/* 17.09.2026 · „Dein Schmerz sucht Heilung" über der Animation, so wie in der
   Fassung vom 26.08.2026. Dort: Cormorant kursiv, 1.5rem, #C4A54A, Atem über
   fünf Sekunden. Hier dasselbe, nur mit der Hausschrift und dem Hausgold. */
.mp-hero-slogan {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.3;
  color: var(--gold, #C9A84C);
  text-align: center;
  /* 17.09.2026 · ohne volle Breite schrumpft die Hülle in der Flex-Spalte auf
     224 px und der Satz bricht am Telefon auf zwei Zeilen. */
  width: 100%;
  text-wrap: balance;
  margin: 0 0 18px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  animation: mpSloganAtem 5s ease-in-out infinite;
}
@keyframes mpSloganAtem {
  0%, 100% { opacity: 0.78; text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
  50%      { opacity: 1;    text-shadow: 0 2px 26px rgba(201,168,74,0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-hero-slogan { animation: none; opacity: 1; }
}

/* 10.09.2026 · Die Animation an ihrem neuen Platz, unter den drei Saetzen
   ueber das Feststecken. Mittig, mit Luft darueber. */
.mp-problem-bild { display: flex; justify-content: center; margin: var(--mp-7, 40px) auto 0; }

/* Telefon mit einem echten Bildschirmfoto aus der Zeitgeist-App. */
.mp-telefon {
  position: absolute; right: 0; bottom: 0;
  width: 214px; max-width: 46%;
  border-radius: 30px;
  padding: 8px;
  background: linear-gradient(160deg, #2A2E45, #0C0E18);
  border: 1px solid rgba(240,230,211,0.16);
  box-shadow: -10px 24px 60px rgba(0,0,0,0.6);
}
/* 08.09.2026 gemessen: das Bildschirmfoto ist 640x1330 und damit hoeher als die
   Bildflaeche. Ohne Deckel ragte das Telefon oben aus dem Abschnitt heraus und
   wurde abgeschnitten. Es zeigt jetzt seinen oberen Teil, wie ein Telefon, das
   auf dem Tisch liegt und dessen unteres Ende hinter dem Buch verschwindet. */
.mp-telefon img { display: block; width: 100%; height: 390px; object-fit: cover;
  object-position: top center; border-radius: 23px; }
.mp-schau-bildzeile { margin: var(--mp-4) 0 0; font-size: var(--mp-klein); color: var(--slate, #B6AC99); }

/* Aufgeschlagene Doppelseite */
.mp-seiten {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--mp-rund-s);
  overflow: hidden;
  border: 1px solid rgba(240,230,211,0.12);
  background: var(--panel, #12121A);
  box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}
.mp-seite { padding: var(--mp-5); }
.mp-seite + .mp-seite { border-left: 1px solid rgba(240,230,211,0.1); }
.mp-seite-kopf { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold, #C9A84C); margin: 0 0 10px; }
/* 10.09.2026: h3 dazugenommen. Auf der Abdruck-Seite steht dieser Block unter
   einer H2, dort ist H3 die richtige Ebene — eine H4 würde eine Ebene
   überspringen. Auf der Startseite stand er unter einer H3, dort blieb H4
   richtig. Beide sollen gleich aussehen. */
.mp-seite h3,
.mp-seite h4 { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 1.25rem; color: var(--gold-hell, #E8D5A3); margin: 0 0 10px; }
.mp-seite p { font-size: var(--mp-klein); line-height: 1.7; color: var(--slate, #B6AC99); margin: 0 0 8px; }
.mp-seite-zahl { font-size: 0.75rem; color: var(--slate, #B6AC99); text-align: right; margin: 14px 0 0; }

/* Zahlen-Beweise */
.mp-beweise {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: rgba(240,230,211,0.1);
  border: 1px solid rgba(240,230,211,0.1); border-radius: var(--mp-rund-s);
  overflow: hidden; margin: var(--mp-6) 0 0;
}
.mp-schau .mp-beweise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-beweis { background: var(--nacht-tief, #0A0A0F); padding: var(--mp-5); text-align: center; }
.mp-beweis b {
  display: block; font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: 2rem; color: var(--gold, #C9A84C); line-height: 1.1; margin-bottom: 4px;
}
.mp-beweis span { font-size: var(--mp-klein); color: var(--slate, #B6AC99); }

/* -------------------------------------------------------------- Vier Säulen */
.mp-saeulen { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--mp-5); }
.mp-saeule {
  background: var(--panel, #12121A);
  border: 1px solid rgba(240,230,211,0.1);
  border-radius: var(--mp-rund);
  padding: var(--mp-6);
  position: relative; overflow: hidden;
}
.mp-saeule::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold, #C9A84C), transparent);
}
.mp-saeule-nr {
  font-family: var(--serif, Georgia, serif); font-size: 0.875rem;
  letter-spacing: 0.2em; color: var(--gold, #C9A84C); text-transform: uppercase;
  margin: 0 0 var(--mp-3);
}
.mp-saeule h3 { font-size: 1.625rem; color: var(--gold-hell, #E8D5A3); margin: 0 0 6px; }
.mp-saeule-zeile { font-size: var(--mp-klein); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate, #B6AC99); margin: 0 0 var(--mp-4); }
.mp-saeule p { font-size: var(--mp-text); line-height: 1.7; color: var(--text, #F0E6D3); margin: 0 0 var(--mp-4); }
.mp-saeule ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mp-saeule li {
  font-size: var(--mp-klein); color: var(--slate, #B6AC99);
  border: 1px solid rgba(240,230,211,0.14); border-radius: 999px; padding: 6px 12px;
}
.mp-saeulen-schluss {
  font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.5;
  color: var(--gold-hell, #E8D5A3); text-align: center;
  margin: var(--mp-7) auto 0; max-width: 30ch;
}

/* ------------------------------------------------------ Daten + Geschichte */
.mp-gleichung {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--mp-5); align-items: stretch;
}
.mp-gleichung-teil {
  background: var(--panel, #12121A); border: 1px solid rgba(240,230,211,0.1);
  border-radius: var(--mp-rund); padding: var(--mp-6);
}
.mp-gleichung-teil h3 { color: var(--gold-hell, #E8D5A3); }
.mp-gleichung-teil ul { list-style: none; margin: 0; padding: 0; }
.mp-gleichung-teil li {
  font-size: var(--mp-text); line-height: 1.6; color: var(--slate, #B6AC99);
  padding: 7px 0 7px 20px; position: relative;
}
.mp-gleichung-teil li::before { content: "·"; position: absolute; left: 4px; color: var(--gold, #C9A84C); }
.mp-gleichung-pfeil {
  align-self: center; text-align: center;
  font-size: 2rem; color: var(--gold, #C9A84C);
}
.mp-gleichung-ziel {
  margin: var(--mp-5) 0 0;
  border: 1px solid var(--linie-gold, rgba(201,168,76,0.34));
  border-radius: var(--mp-rund);
  padding: var(--mp-6); text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.12), transparent 62%), var(--panel, #12121A);
}
.mp-gleichung-ziel b {
  display: block; font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.125rem); color: var(--gold-hell, #E8D5A3); margin-bottom: 8px;
}
.mp-gleichung-ziel span { font-size: var(--mp-text); color: var(--slate, #B6AC99); }

/* ---------------------------------------------------- Inhaltsverzeichnis 24 */
.mp-toc-gruppe { margin: 0 0 var(--mp-6); }
.mp-toc-gruppe > summary,
.mp-toc-gruppe > .mp-toc-gruppe-titel {
  font-family: var(--serif, Georgia, serif); font-size: 1.25rem;
  color: var(--gold, #C9A84C); letter-spacing: 0.02em;
  padding: var(--mp-3) 0; margin: 0 0 var(--mp-3);
  border-bottom: 1px solid rgba(201,168,76,0.24);
  list-style: none; cursor: default; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between;
}
.mp-toc-gruppe > summary::-webkit-details-marker { display: none; }
.mp-toc-liste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--mp-7); }
.mp-toc-liste li {
  break-inside: avoid; display: flex; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid rgba(240,230,211,0.07);
}
.mp-toc-nr {
  font-family: var(--serif, Georgia, serif); font-size: var(--mp-klein);
  color: var(--gold, #C9A84C); min-width: 26px; padding-top: 3px;
}
.mp-toc-titel { display: block; font-size: var(--mp-text); color: var(--text, #F0E6D3); line-height: 1.4; }
.mp-toc-zeile { display: block; font-size: var(--mp-klein); color: var(--slate, #B6AC99); line-height: 1.5; margin-top: 3px; }

/* ------------------------------------------------------------- 21-Tage-Weg */
.mp-tag-karte {
  background: var(--panel, #12121A);
  border: 1px solid var(--linie-gold, rgba(201,168,76,0.34));
  border-radius: var(--mp-rund);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.mp-tag-kopf {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: var(--mp-5) var(--mp-6);
  background: rgba(201,168,76,0.09);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.mp-tag-kopf b {
  font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: 1.5rem; color: var(--gold, #C9A84C);
}
.mp-tag-kopf span { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: var(--mp-lead); color: var(--gold-hell, #E8D5A3); }
.mp-tag-zeile { display: grid; grid-template-columns: 170px 1fr; gap: var(--mp-5); padding: var(--mp-5) var(--mp-6); }
.mp-tag-zeile + .mp-tag-zeile { border-top: 1px solid rgba(240,230,211,0.08); }
.mp-tag-marke { font-size: var(--mp-klein); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold, #C9A84C); padding-top: 3px; }
.mp-tag-text { font-size: var(--mp-text); line-height: 1.7; color: var(--text, #F0E6D3); margin: 0; }
.mp-tag-punkte { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--mp-6) 0 0; padding: 0; list-style: none; }
.mp-tag-punkt {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8125rem; color: var(--slate, #B6AC99);
  border: 1px solid rgba(240,230,211,0.14);
}
.mp-tag-punkt--jetzt { border-color: var(--gold, #C9A84C); color: #06060A; background: var(--gold, #C9A84C); }

/* ------------------------------------------------------- 12-Monats-Fahrplan */
.mp-zeitleiste {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(224px, 1fr);
  gap: var(--mp-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 0 var(--mp-5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.mp-monat {
  scroll-snap-align: start;
  background: var(--panel, #12121A);
  border: 1px solid rgba(240,230,211,0.1);
  border-top: 2px solid var(--gold, #C9A84C);
  border-radius: 0 0 var(--mp-rund-s) var(--mp-rund-s);
  padding: var(--mp-5);
}
.mp-monat-kopf { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--mp-4); }
.mp-monat-kurz { font-size: var(--mp-klein); letter-spacing: 0.18em; color: var(--gold, #C9A84C); }
.mp-monat-zahl {
  font-family: var(--serif, Georgia, serif); font-size: 1.75rem;
  color: var(--gold-hell, #E8D5A3); line-height: 1;
}
.mp-monat h3 { font-size: 1.25rem; margin: 0 0 var(--mp-3); color: var(--gold-hell, #E8D5A3); }
.mp-monat dl { margin: 0; font-size: var(--mp-klein); line-height: 1.6; }
.mp-monat dt { color: var(--gold, #C9A84C); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125rem; margin-top: 10px; }
.mp-monat dd { margin: 2px 0 0; color: var(--slate, #B6AC99); }
.mp-wisch { font-size: var(--mp-klein); color: var(--slate, #B6AC99); margin: var(--mp-3) 0 0; }

/* -------------------------------------------------------------- Hörbuch --- */
/* Die eine bewusst dunklere Fläche der Seite. */
.mp-hoerbuch {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(201,168,76,0.1), transparent 60%),
    #06060A;
  border-top: 1px solid rgba(201,168,76,0.2);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.mp-spieler {
  max-width: 620px; margin: var(--mp-7) auto 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 999px;
  padding: 14px 20px 14px 14px;
  display: flex; align-items: center; gap: var(--mp-4);
}
.mp-spieler-knopf {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; border: 0;
  background: linear-gradient(180deg, #E8D5A3, #C9A84C);
  color: #06060A; font-size: 1.25rem; cursor: pointer;
  display: grid; place-items: center;
}
.mp-spieler-mitte { flex: 1 1 auto; min-width: 0; }
.mp-spieler-titel { font-size: var(--mp-klein); color: var(--text, #F0E6D3); margin: 0 0 8px; }
.mp-spieler-balken { height: 4px; border-radius: 2px; background: rgba(240,230,211,0.16); position: relative; }
.mp-spieler-balken::before { content: ""; position: absolute; inset: 0 62% 0 0; border-radius: 2px; background: var(--gold, #C9A84C); }
.mp-spieler-zeit { font-size: 0.8125rem; color: var(--slate, #B6AC99); font-variant-numeric: tabular-nums; }
.mp-hoerbuch-welle { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 64px; margin: var(--mp-6) 0 0; }
.mp-hoerbuch-welle i {
  display: block; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold, #C9A84C), rgba(201,168,76,0.18));
}

/* -------------------------------------------------------------- Angebot --- */
.mp-angebot {
  max-width: 780px; margin: 0 auto;
  border: 1px solid var(--linie-gold, rgba(201,168,76,0.34));
  border-radius: var(--mp-rund);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.14), transparent 60%),
    var(--panel, #12121A);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  overflow: hidden;
}
.mp-angebot-kopf { padding: var(--mp-7) var(--mp-6) var(--mp-5); text-align: center; border-bottom: 1px solid rgba(201,168,76,0.2); }
.mp-angebot-kopf h2 { margin: 0 auto var(--mp-2); max-width: none; }
.mp-angebot-claim { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: var(--mp-lead); color: var(--text, #F0E6D3); margin: 0 0 var(--mp-5); }
.mp-angebot-preis { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.mp-angebot-preis b { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: clamp(3rem, 9vw, 4.25rem); color: var(--gold, #C9A84C); line-height: 1; }
.mp-angebot-preis span { font-size: var(--mp-text); color: var(--slate, #B6AC99); }
.mp-angebot-liste { list-style: none; margin: 0; padding: var(--mp-6); columns: 2; column-gap: var(--mp-6); }
.mp-angebot-liste li {
  break-inside: avoid; position: relative; padding: 9px 0 9px 28px;
  font-size: var(--mp-text); line-height: 1.5; color: var(--text, #F0E6D3);
}
.mp-angebot-liste li::before { content: "✦"; position: absolute; left: 0; top: 10px; color: var(--gold, #C9A84C); font-size: 0.8em; }
.mp-angebot-fuss { padding: 0 var(--mp-6) var(--mp-7); text-align: center; }
.mp-angebot-fuss .mp-knopf { width: 100%; max-width: 460px; }

/* Zusatz, ausdrücklich freiwillig */
.mp-zusatz {
  max-width: 780px; margin: var(--mp-5) auto 0;
  border: 1px dashed rgba(240,230,211,0.2); border-radius: var(--mp-rund);
  padding: var(--mp-5) var(--mp-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-4) var(--mp-5);
}
.mp-zusatz-marke { font-size: var(--mp-klein); letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate, #B6AC99); }
.mp-zusatz b { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 1.25rem; color: var(--gold-hell, #E8D5A3); }
.mp-zusatz p { font-size: var(--mp-klein); color: var(--slate, #B6AC99); margin: 4px 0 0; max-width: 52ch; line-height: 1.6; }
.mp-zusatz-preis { margin-left: auto; font-family: var(--serif, Georgia, serif); font-size: 1.5rem; color: var(--gold, #C9A84C); }

/* ------------------------------------------------------------ Downsell ---- */
.mp-downsell {
  border: 1px solid rgba(240,230,211,0.12); border-radius: var(--mp-rund);
  background: var(--panel, #12121A);
  padding: var(--mp-6);
  display: grid; grid-template-columns: 1fr auto; gap: var(--mp-5); align-items: center;
}
.mp-downsell h3 { margin: 0 0 8px; }
.mp-downsell p { font-size: var(--mp-text); color: var(--slate, #B6AC99); margin: 0; max-width: 54ch; line-height: 1.6; }
.mp-downsell-rechts { text-align: right; }
.mp-downsell-preis { font-family: var(--serif, Georgia, serif); font-size: 2rem; color: var(--gold, #C9A84C); display: block; margin-bottom: var(--mp-3); }

/* ------------------------------------------------------------ Vergleich --- */
.mp-vergleich { width: 100%; border-collapse: collapse; font-size: var(--mp-text); }
.mp-vergleich caption { text-align: left; font-size: var(--mp-klein); color: var(--slate, #B6AC99); padding-bottom: var(--mp-3); }
.mp-vergleich th, .mp-vergleich td { padding: var(--mp-4); text-align: left; border-bottom: 1px solid rgba(240,230,211,0.1); vertical-align: top; line-height: 1.55; }
.mp-vergleich thead th { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 1.25rem; color: var(--gold-hell, #E8D5A3); border-bottom-color: rgba(201,168,76,0.3); }
.mp-vergleich tbody th { font-weight: 500; color: var(--slate, #B6AC99); font-size: var(--mp-klein); width: 22%; }
.mp-vergleich td { color: var(--text, #F0E6D3); }
.mp-vergleich .mp-sp-abdruck { background: rgba(201,168,76,0.06); }

/* ------------------------------------------------------------- Formulare -- */
.mp-form {
  background: var(--panel, #12121A);
  border: 1px solid var(--linie-gold, rgba(201,168,76,0.34));
  border-radius: var(--mp-rund);
  padding: var(--mp-6);
  max-width: 640px;
}
.mp-form--mitte { margin-left: auto; margin-right: auto; }
.mp-form-schritt { font-size: var(--mp-klein); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold, #C9A84C); margin: 0 0 var(--mp-3); }
.mp-feld { margin: 0 0 var(--mp-4); }
.mp-feld label { display: block; font-size: var(--mp-klein); color: var(--text, #F0E6D3); margin: 0 0 8px; }
.mp-feld input, .mp-feld select, .mp-feld textarea {
  width: 100%; min-height: 52px;
  padding: 13px 16px;
  font-family: inherit; font-size: var(--mp-text); line-height: 1.5;
  color: var(--text, #F0E6D3);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(240,230,211,0.18);
  border-radius: var(--mp-rund-s);
}
.mp-feld textarea { min-height: 130px; resize: vertical; }
.mp-feld input:focus, .mp-feld select:focus, .mp-feld textarea:focus {
  outline: 2px solid var(--gold, #C9A84C); outline-offset: 1px; border-color: transparent;
}
.mp-feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-4); }
.mp-feld-drei { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: var(--mp-3); }
.mp-feld-hinweis { font-size: var(--mp-klein); color: var(--slate, #B6AC99); margin: 6px 0 0; line-height: 1.5; }
.mp-form .mp-knopf { width: 100%; margin-top: var(--mp-3); }
.mp-form-fuss { font-size: var(--mp-klein); color: var(--slate, #B6AC99); text-align: center; margin: var(--mp-4) 0 0; line-height: 1.6; }
.mp-fehler {
  border: 1px solid rgba(220,90,90,0.5); background: rgba(220,90,90,0.1);
  border-radius: var(--mp-rund-s); padding: var(--mp-4) var(--mp-5); margin: 0 0 var(--mp-5);
}
.mp-fehler ul { margin: 0; padding-left: 20px; font-size: var(--mp-text); color: #F3D2D2; line-height: 1.7; }

/* Wahlkarten (Zusätze, Varianten) */
.mp-wahl { display: grid; gap: var(--mp-3); margin: 0 0 var(--mp-5); }
.mp-wahl label {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--mp-4); align-items: start;
  min-height: 56px; padding: var(--mp-4);
  border: 1px solid rgba(240,230,211,0.16); border-radius: var(--mp-rund-s);
  cursor: pointer; background: rgba(255,255,255,0.02);
}
.mp-wahl label:hover { border-color: var(--linie-gold, rgba(201,168,76,0.34)); }
.mp-wahl input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: #C9A84C; }
.mp-wahl b { display: block; font-weight: 600; font-size: var(--mp-text); color: var(--text, #F0E6D3); }
.mp-wahl small { display: block; font-size: var(--mp-klein); color: var(--slate, #B6AC99); line-height: 1.55; margin-top: 3px; }
.mp-wahl-preis { font-family: var(--serif, Georgia, serif); font-size: 1.25rem; color: var(--gold, #C9A84C); white-space: nowrap; }
.mp-wahl label:has(input:checked) { border-color: var(--gold, #C9A84C); background: rgba(201,168,76,0.08); }

.mp-summe {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--mp-4);
  padding: var(--mp-5) 0 var(--mp-4);
  border-top: 1px solid rgba(201,168,76,0.24);
  margin-top: var(--mp-5);
}
.mp-summe-wert { font-family: var(--serif, Georgia, serif); font-size: 2rem; color: var(--gold, #C9A84C); line-height: 1; }
.mp-summe small { display: block; font-size: var(--mp-klein); color: var(--slate, #B6AC99); margin-top: 6px; }

/* ------------------------------------------------- Stimmen: eine große ---- */
.mp-stimme-gross {
  max-width: 820px; margin: 0 auto;
  text-align: center;
  border-top: 1px solid rgba(201,168,76,0.24);
  border-bottom: 1px solid rgba(201,168,76,0.24);
  padding: var(--mp-7) var(--mp-5);
}
.mp-stimme-gross blockquote {
  font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: clamp(1.375rem, 3.2vw, 1.875rem); line-height: 1.5;
  color: var(--gold-hell, #E8D5A3); margin: 0 0 var(--mp-5);
}
.mp-stimme-gross figcaption { font-size: var(--mp-klein); color: var(--slate, #B6AC99); letter-spacing: 0.06em; }

/* -------------------------------------------------------- Mehr Wege ------- */
.mp-mehr { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mp-4); }
.mp-mehr a {
  display: block; padding: var(--mp-5);
  border: 1px solid rgba(240,230,211,0.1); border-radius: var(--mp-rund-s);
  text-decoration: none; background: rgba(255,255,255,0.02);
}
.mp-mehr a:hover { border-color: var(--linie-gold, rgba(201,168,76,0.34)); }
.mp-mehr b { display: block; font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 1.25rem; color: var(--gold-hell, #E8D5A3); margin-bottom: 6px; }
.mp-mehr span { font-size: var(--mp-klein); color: var(--slate, #B6AC99); line-height: 1.6; }

/* ------------------------------------------------------- Klebende Leiste -- */
.mp-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  align-items: center; justify-content: space-between; gap: var(--mp-4);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(6,6,10,0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201,168,76,0.3);
}
.mp-leiste-wort { min-width: 0; }
.mp-leiste-wort b { display: block; font-size: var(--mp-klein); color: var(--text, #F0E6D3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-leiste-wort span { font-family: var(--serif, Georgia, serif); font-size: 1.375rem; color: var(--gold, #C9A84C); }
.mp-leiste .mp-knopf { flex: 0 0 auto; min-height: 52px; padding: 14px 22px; font-size: var(--mp-klein); }

/* ============================================================== Telefon === */
@media (max-width: 900px) {
  .mp-abschnitt { padding: var(--mp-8) var(--mp-5); }
  .mp-hero { padding: var(--mp-5) var(--mp-5) var(--mp-7); }
  .mp-hero-raster { grid-template-columns: 1fr; gap: var(--mp-6); }
  .mp-hero h1 { max-width: none; }
  .mp-hero-sub, .mp-hero-sub2 { max-width: none; }
  .mp-hero-knoepfe { flex-direction: column; align-items: stretch; }
  .mp-hero-knoepfe .mp-knopf { width: 100%; }
  .mp-hero-knoepfe .mp-knopf-still { justify-content: center; }

  .mp-wege { grid-template-columns: 1fr; }
  .mp-weg--haupt { grid-row: auto; padding: var(--mp-6); }
  .mp-weg--haupt .mp-weg-cta { align-self: stretch; text-align: center; justify-content: center; }

  .mp-schau { grid-template-columns: 1fr; gap: var(--mp-6); }
  .mp-schau-bilder { min-height: 0; display: flex; align-items: flex-end; gap: var(--mp-4); }
  .mp-buch { width: auto; max-width: 54%; }
  .mp-telefon { position: static; max-width: 42%; }

  .mp-seiten { grid-template-columns: 1fr; }
  .mp-seite + .mp-seite { border-left: 0; border-top: 1px solid rgba(240,230,211,0.1); }

  .mp-saeulen { grid-template-columns: 1fr; }

  .mp-gleichung { grid-template-columns: 1fr; }
  .mp-gleichung-pfeil { transform: rotate(90deg); }

  .mp-toc-liste { columns: 1; }
  .mp-toc-gruppe > summary { cursor: pointer; }
  .mp-toc-gruppe > summary::after { content: "+"; color: var(--gold, #C9A84C); font-size: 1.5rem; }
  .mp-toc-gruppe[open] > summary::after { content: "–"; }

  .mp-tag-zeile { grid-template-columns: 1fr; gap: 6px; padding: var(--mp-4) var(--mp-5); }

  .mp-angebot-liste { columns: 1; padding: var(--mp-5); }
  .mp-angebot-fuss .mp-knopf { max-width: none; }

  .mp-downsell { grid-template-columns: 1fr; }
  .mp-downsell-rechts { text-align: left; }

  .mp-zusatz-preis { margin-left: 0; }

  .mp-feld-paar { grid-template-columns: 1fr; }

  .mp-leiste { display: flex; }
  /* Platz, damit die Leiste nichts verdeckt. */
  body { padding-bottom: 84px; }

  /* Der Vergleich wird auf dem Telefon zu Blöcken. */
  /* 08.09.2026 gemessen: sobald die Tabelle zu Bloecken wird, bleibt die
     <caption> eine Tabellenbeschriftung und schrumpft auf ein Wort je Zeile.
     Sie muss mit umgestellt werden. */
  .mp-vergleich, .mp-vergleich tbody, .mp-vergleich tr, .mp-vergleich th, .mp-vergleich td,
  .mp-vergleich caption { display: block; width: auto; }
  .mp-vergleich thead { display: none; }
  .mp-vergleich tbody tr { border-bottom: 1px solid rgba(201,168,76,0.2); padding: var(--mp-4) 0; }
  .mp-vergleich tbody th { width: auto; padding: 0 0 6px; border: 0; }
  .mp-vergleich td { border: 0; padding: 4px 0 4px 16px; position: relative; }
  .mp-vergleich td::before { content: attr(data-spalte) ": "; color: var(--gold, #C9A84C); font-size: var(--mp-klein); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-knopf, .mp-weg { transition: none; }
  .mp-hoerbuch-welle i { animation: none !important; }
}

/* ============================================================================
   NACHTRAG 08.09.2026 · Toms finaler Masterplan
   Neue Bausteine: Vorschau-Band, Trust-Streifen, großes Statement, Problem,
   Visual-Story, Produktvergleich mit zwei ungleichen Seiten, Beweis-Wand,
   Universum, Ablauf, Autor, Content-Hub, Final-Close, Audio-Wahl.
   Rhythmus: dunkel → hell → Produkt → Emotion → dunkel → editorial.
   ========================================================================== */

/* Das Band, das die Vorschau als Vorschau kenntlich macht. Es steht ganz oben
   und ist bewusst NICHT im Markenton: es soll auffallen, nicht gefallen. */
.mp-vorschau-band {
  background: #2A1B10;
  border-bottom: 1px solid #7A5A2A;
  color: #F3E2C6;
  font-size: 0.9375rem;
  line-height: 1.6;
  padding: 12px 24px;
  text-align: center;
}
.mp-vorschau-band b { color: #F6C97A; }

/* ---------------------------------------------------------- Trust-Streifen */
/* Ruhig, klein, keine Kacheln. Vier Belege in einer Zeile, sonst nichts. */
.mp-trust {
  border-top: 1px solid rgba(240,230,211,0.08);
  border-bottom: 1px solid rgba(240,230,211,0.08);
  padding: var(--mp-5) var(--mp-5);
}
.mp-trust ul {
  max-width: 1080px; margin: 0 auto; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--mp-4) var(--mp-7);
}
.mp-trust li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--mp-klein); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate, #B6AC99);
}
.mp-trust svg { width: 18px; height: 18px; flex: 0 0 18px; stroke: var(--gold, #C9A84C);
  fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------ Das eine große Statement */
/* Heller Grund. Es ist die einzige helle Fläche der Seite und trägt deshalb
   den einen Satz, den ein Mensch über sein Werk geschrieben hat. */
.mp-statement {
  background: linear-gradient(180deg, #15151E 0%, #0F0F16 100%);
  border-top: 1px solid rgba(201,168,76,0.18);
  border-bottom: 1px solid rgba(201,168,76,0.18);
}
.mp-statement figure { max-width: 900px; margin: 0 auto; text-align: center; }
.mp-statement blockquote {
  font-family: var(--serif, Georgia, serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.375rem); line-height: 1.42;
  color: var(--gold-hell, #E8D5A3); margin: 0 0 var(--mp-5);
}
.mp-statement figcaption { font-size: var(--mp-klein); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--slate, #B6AC99); }
.mp-statement .mp-anfuehrung {
  display: block; font-family: var(--serif, Georgia, serif); font-size: 4rem;
  line-height: 1; color: rgba(201,168,76,0.4); margin-bottom: var(--mp-2);
}

/* --------------------------------------------------------- Problem/Desire */
.mp-problem { text-align: center; }
.mp-problem h2 { margin-left: auto; margin-right: auto; max-width: 24ch; }
.mp-problem-zeilen {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--mp-6); max-width: 940px; margin: var(--mp-7) auto 0; text-align: left;
}
.mp-problem-zeile { border-top: 1px solid rgba(201,168,76,0.3); padding-top: var(--mp-4); }
.mp-problem-zeile p { font-size: var(--mp-text); line-height: 1.7; color: var(--slate, #B6AC99); margin: 0; }
.mp-problem-satz {
  font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem); line-height: 1.5;
  color: var(--gold-hell, #E8D5A3); max-width: 34ch; margin: var(--mp-7) auto 0;
}

/* ---------------------------------------------------------- Visual-Story */
/* Der Produktbeweis. Kein Karten-Raster: eine Folge von Bildern, jede mit
   einer Zeile daneben, abwechselnd links und rechts. */
.mp-story-teil {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--mp-7); align-items: center;
  padding: var(--mp-7) 0;
}
.mp-story-teil + .mp-story-teil { border-top: 1px solid rgba(240,230,211,0.07); }
.mp-story-teil:nth-child(even) .mp-story-bild { order: -1; }
.mp-story-nr {
  font-size: var(--mp-klein); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold, #C9A84C); margin: 0 0 var(--mp-3);
}
.mp-story-teil h3 { font-size: clamp(1.375rem, 2.8vw, 1.875rem); color: var(--gold-hell, #E8D5A3); }
.mp-story-teil p { font-size: var(--mp-text); line-height: 1.75; color: var(--text, #F0E6D3); max-width: 46ch; margin: 0; }
.mp-story-bild {
  border: 1px solid rgba(240,230,211,0.12); border-radius: var(--mp-rund);
  background: var(--panel, #12121A); padding: var(--mp-5);
  box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}
.mp-story-schluss {
  text-align: center; padding-top: var(--mp-7);
  border-top: 1px solid rgba(201,168,76,0.24); margin-top: var(--mp-6);
}
.mp-story-schluss .mp-hero-preis { justify-content: center; }

/* Die Signatur-Tafel, wie im Abdruck selbst */
.mp-signatur { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(240,230,211,0.1);
  border: 1px solid rgba(240,230,211,0.1); border-radius: var(--mp-rund-s); overflow: hidden; }
.mp-signatur div { background: var(--nacht-tief, #0A0A0F); padding: var(--mp-4); text-align: center; }
.mp-signatur dt { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold, #C9A84C); margin: 0 0 6px; }
.mp-signatur dd { margin: 0; font-family: var(--serif, Georgia, serif); font-size: 1.25rem;
  color: var(--text, #F0E6D3); }
.mp-signatur small { display: block; font-size: 0.8125rem; color: var(--slate, #B6AC99); margin-top: 3px; }

/* Stärken und Schatten nebeneinander */
.mp-waage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-4); }
.mp-waage > div { padding: var(--mp-4); border-radius: var(--mp-rund-s); }
.mp-waage-hell { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.24); }
.mp-waage-dunkel { background: rgba(255,255,255,0.03); border: 1px solid rgba(240,230,211,0.12); }
.mp-waage h4 { margin: 0 0 10px; font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: 1.125rem; color: var(--gold-hell, #E8D5A3); }
.mp-waage ul { margin: 0; padding-left: 18px; font-size: var(--mp-klein); line-height: 1.7; color: var(--slate, #B6AC99); }

/* ------------------------------------------- Produktvergleich, zwei Größen */
.mp-zwei {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--mp-5); align-items: stretch;
}
.mp-zwei .mp-weg { height: 100%; }
.mp-zwei-satz {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.25rem, 2.8vw, 1.75rem); line-height: 1.5; text-align: center;
  color: var(--gold-hell, #E8D5A3); max-width: 34ch; margin: var(--mp-7) auto 0;
}

/* ------------------------------------------------------------ Beweis-Wand */
.mp-wand { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--mp-5); }
.mp-wand figure {
  margin: 0; padding: var(--mp-6);
  border: 1px solid rgba(240,230,211,0.1); border-radius: var(--mp-rund);
  background: var(--panel, #12121A);
  display: flex; flex-direction: column;
}
.mp-wand-frage {
  font-size: var(--mp-klein); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold, #C9A84C); margin: 0 0 var(--mp-4);
}
.mp-wand blockquote {
  margin: 0 0 var(--mp-5); font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: 1.1875rem; line-height: 1.6; color: var(--text, #F0E6D3);
}
.mp-wand figcaption { margin-top: auto; font-size: var(--mp-klein); color: var(--slate, #B6AC99); }

/* ------------------------------------------------------------- Universum */
.mp-universum { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--mp-5); }
.mp-uni {
  position: relative; overflow: hidden;
  /* stretch ausdrücklich, siehe Hinweis bei .mp-weg */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end;
  min-height: 300px; padding: var(--mp-6);
  border: 1px solid rgba(240,230,211,0.1); border-radius: var(--mp-rund);
  background: var(--panel, #12121A);
  text-decoration: none; color: inherit;
}
.mp-uni::before {
  content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%;
  background: radial-gradient(ellipse at 50% 100%, rgba(201,168,76,0.16), transparent 65%);
  pointer-events: none;
}
.mp-uni:hover { border-color: var(--linie-gold, rgba(201,168,76,0.34)); }
.mp-uni-marke { position: relative; font-size: var(--mp-klein); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold, #C9A84C); margin: 0 0 var(--mp-3); }
.mp-uni h3 { position: relative; font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--gold-hell, #E8D5A3); margin: 0 0 var(--mp-3); }
.mp-uni p { position: relative; font-size: var(--mp-text); line-height: 1.65;
  color: var(--slate, #B6AC99); margin: 0 0 var(--mp-4); max-width: 40ch; }
.mp-uni span.mp-uni-weiter { position: relative; font-size: var(--mp-text); color: var(--gold-hell, #E8D5A3); }

/* ---------------------------------------------------------------- Ablauf */
.mp-ablauf { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--mp-5); counter-reset: schritt; }
.mp-schritt { position: relative; padding-top: var(--mp-6); }
.mp-schritt::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; top: 0; left: 0;
  font-family: var(--serif, Georgia, serif); font-size: 2.5rem; line-height: 1;
  color: rgba(201,168,76,0.35);
}
.mp-schritt::after {
  content: ""; position: absolute; top: 18px; left: 46px; right: -12px; height: 1px;
  background: linear-gradient(90deg, rgba(201,168,76,0.4), transparent);
}
.mp-schritt:last-child::after { display: none; }
.mp-schritt h3 { font-size: 1.25rem; color: var(--gold-hell, #E8D5A3); margin: var(--mp-4) 0 8px; }
.mp-schritt p { font-size: var(--mp-klein); line-height: 1.7; color: var(--slate, #B6AC99); margin: 0; }

/* ----------------------------------------------------------------- Autor */
.mp-autor { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: var(--mp-7); align-items: center; }
.mp-autor-bild {
  aspect-ratio: 4 / 5; border-radius: var(--mp-rund); overflow: hidden;
  border: 1px solid rgba(201,168,76,0.24);
  background: radial-gradient(ellipse at 50% 30%, rgba(201,168,76,0.14), transparent 62%), var(--panel, #12121A);
  display: grid; place-items: center; text-align: center; padding: var(--mp-6);
}
.mp-autor-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 29.09.2026: Das Feld trug bisher Text und hatte deshalb Innenabstand.
   Steht ein Foto darin, wuerde derselbe Abstand einen Rahmen um das Bild
   legen und den Zuschnitt zerschneiden. --foto nimmt ihn weg. */
.mp-autor-bild--foto { padding: 0; }
.mp-autor-bild--foto picture { display: block; width: 100%; height: 100%; }
.mp-autor-unterschrift {
  font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.5rem;
  color: var(--gold-hell, #E8D5A3); margin: var(--mp-5) 0 0;
}

/* ------------------------------------------------------------ Content-Hub */
.mp-hub { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--mp-5); }
.mp-hub a {
  /* stretch ausdrücklich, siehe Hinweis bei .mp-weg */
  display: flex; flex-direction: column; align-items: stretch; gap: var(--mp-3);
  padding: var(--mp-5); text-decoration: none;
  border: 1px solid rgba(240,230,211,0.1); border-radius: var(--mp-rund);
  background: rgba(255,255,255,0.02);
}
.mp-hub a:hover { border-color: var(--linie-gold, rgba(201,168,76,0.34)); }
.mp-hub b { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 1.25rem;
  line-height: 1.3; color: var(--gold-hell, #E8D5A3); }
.mp-hub span { font-size: var(--mp-klein); line-height: 1.65; color: var(--slate, #B6AC99); }
.mp-hub em { margin-top: auto; font-style: normal; font-size: var(--mp-klein); color: var(--gold, #C9A84C); }

/* ----------------------------------------------------------- Final-Close */
.mp-final {
  text-align: center;
  background: radial-gradient(ellipse at 50% 120%, rgba(201,168,76,0.16), transparent 62%), #06060A;
  border-top: 1px solid rgba(201,168,76,0.2);
}
.mp-final h2 { margin-left: auto; margin-right: auto; max-width: 22ch; }
.mp-final .mp-hero-preis { justify-content: center; }

/* --------------------------------------------------------- Die Audio-Wahl */
/* Das Audio ist kein Zubehör und wird deshalb nicht als Häkchen in einer
   Zusatzliste geführt, sondern als eigene, ruhige Fläche mit eigener Marke. */
.mp-form-eigen {
  margin: var(--mp-6) 0 0; padding: var(--mp-5);
  border: 1px solid rgba(240,230,211,0.14); border-radius: var(--mp-rund);
  background: rgba(255,255,255,0.02);
}
.mp-form-eigen > p:first-child { margin-top: 0; }

/* ================================================================ Telefon */
@media (max-width: 900px) {
  .mp-problem-zeilen { grid-template-columns: 1fr; gap: var(--mp-5); }
  .mp-story-teil { grid-template-columns: 1fr; gap: var(--mp-5); padding: var(--mp-6) 0; }
  .mp-story-teil:nth-child(even) .mp-story-bild { order: 0; }
  .mp-zwei { grid-template-columns: 1fr; }
  .mp-wand { grid-template-columns: 1fr; }
  .mp-universum { grid-template-columns: 1fr; }
  .mp-uni { min-height: 0; }
  .mp-ablauf { grid-template-columns: 1fr; gap: var(--mp-6); }
  .mp-schritt::after { display: none; }
  .mp-autor { grid-template-columns: 1fr; gap: var(--mp-5); }
  .mp-autor-bild { aspect-ratio: 3 / 2; }
  /* 29.09.2026, Toms Wort: „auf der Startseite mein Bild, man sieht nur meinen
     Kopf." Die 3:2-Regel darueber stammt aus der Zeit, als in diesem Feld TEXT
     stand — ein breiter Kasten ist fuer Text richtig. Seit dort ein Foto liegt,
     schneidet sie es zu: am Telefon gemessen 340 x 227 sichtbar bei einem Bild
     von 340 x 425, also alles unter dem Kinn weg. `object-fit: cover` zoomt
     dabei zusaetzlich in die Mitte, darum blieb nur das Gesicht.
     Die Foto-Fassung behaelt darum ihr Hochformat, auch am Telefon. */
  .mp-autor-bild--foto { aspect-ratio: 4 / 5; }
  .mp-hub { grid-template-columns: 1fr; }
  .mp-signatur, .mp-waage { grid-template-columns: 1fr; }
  .mp-trust ul { gap: var(--mp-3) var(--mp-5); }
  .mp-trust li { font-size: 0.875rem; }
}

/* Das Thema einer Monatskarte. War eine H3 und ist jetzt ein Absatz: zwölf
   Überschriften in einer Zeitleiste sagen einer Suchmaschine nichts. Die
   Gestaltung bleibt gleich. */
.mp-monat-thema {
  font-family: var(--serif, Georgia, serif); font-size: 1.25rem; line-height: 1.25;
  color: var(--gold-hell, #E8D5A3); margin: 0 0 var(--mp-3);
}

/* ---------------------------------------- Anriss-Fassungen für die Startseite
   08.09.2026: die Startseite war am Telefon 35 Bildschirme hoch, davon ein
   Drittel allein der Produktbeweis. Die ausführlichen Fassungen stehen auf der
   Abdruck-Seite; hier stehen die Anrisse. */

/* Vier Säulen ohne Schlagwort-Zeile, engere Kästen */
.mp-saeulen--anriss { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mp-saeulen--anriss .mp-saeule { padding: var(--mp-5); }
.mp-saeulen--anriss .mp-saeule h3 { font-size: 1.375rem; margin-bottom: var(--mp-3); }
.mp-saeulen--anriss .mp-saeule p { margin: 0; font-size: var(--mp-text); line-height: 1.65; }

/* Inhaltsverzeichnis als Anriss: sechs Gruppen statt 24 Zeilen */
.mp-toc-anriss { list-style: none; margin: 0; padding: 0; }
.mp-toc-anriss li { padding: 12px 0; border-bottom: 1px solid rgba(240,230,211,0.08); }
.mp-toc-anriss li:last-child { border-bottom: 0; }
.mp-toc-anriss-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mp-4); }
.mp-toc-anriss-kopf b {
  font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 1.25rem;
  color: var(--gold-hell, #E8D5A3);
}
.mp-toc-anriss-kopf em {
  font-style: normal; font-size: var(--mp-klein); letter-spacing: 0.08em;
  color: var(--gold, #C9A84C); white-space: nowrap;
}
.mp-toc-anriss-bsp { display: block; font-size: var(--mp-klein); line-height: 1.6; color: var(--slate, #B6AC99); margin-top: 4px; }

@media (max-width: 900px) {
  .mp-saeulen--anriss { grid-template-columns: 1fr; }
}

/* Die Signatur-Tafel am Telefon: zwei Spalten statt einer. Sechs gestapelte
   Felder waren 1.328 px hoch; nebeneinander liest man sie ohnehin besser,
   sie ist eine Tafel und keine Liste. */
@media (max-width: 900px) {
  .mp-signatur { grid-template-columns: 1fr 1fr; }
  .mp-signatur div { padding: var(--mp-3); }
  .mp-signatur dd { font-size: 1.0625rem; }
}

/* Die klebende Leiste einzeilig: Produkt · Preis, Knopf rechts. */
.mp-leiste-wort--zeile { display: flex; align-items: baseline; gap: 8px; }
.mp-leiste-wort--zeile b { font-size: var(--mp-klein); white-space: nowrap; }
.mp-leiste-trenn { color: var(--gold, #C9A84C); }
.mp-leiste-preis { font-family: var(--serif, Georgia, serif); font-size: 1.25rem; color: var(--gold, #C9A84C); }

/* Die beiden Fragen in Schritt 4. Sie sind Fragen, keine Warenkorbzeilen,
   deshalb tragen sie eine echte Überschrift statt einer Versalien-Marke. */
.mp-frage {
  font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: 1.375rem; line-height: 1.3;
  color: var(--gold-hell, #E8D5A3); margin: 0 0 var(--mp-3);
}
/* Untergeordnete Zusätze: zugeklappt, ohne Goldrand, kleinere Schrift. */
.mp-form-klein { margin: var(--mp-5) 0 0; border-top: 1px solid rgba(240,230,211,0.12); }
.mp-form-klein > summary {
  cursor: pointer; list-style: none; min-height: 48px;
  display: flex; align-items: center;
  font-size: var(--mp-klein); color: var(--slate, #B6AC99);
}
.mp-form-klein > summary::-webkit-details-marker { display: none; }
.mp-form-klein > summary::after { content: " +"; color: var(--gold, #C9A84C); margin-left: 8px; }
.mp-form-klein[open] > summary::after { content: " –"; }
.mp-form-klein .mp-wahl label { padding: var(--mp-3) var(--mp-4); }

/* Einordnung unter einer Kundenstimme aus der Zeit, als Audio noch dabei war.
   Klein und ruhig: sie soll die Stimme einordnen, nicht überschreiben. */
.stimme-einordnung {
  display: block; margin: 6px 0 10px;
  font-size: 0.875rem; line-height: 1.5; color: var(--slate, #B6AC99);
  border-left: 2px solid rgba(201,168,76,0.4); padding-left: 10px;
}

/* Die belegten Zahlen in der Autoren-Sektion. Keine Kacheln, keine Kreise:
   drei Angaben in einer Zeile, die Zahl in der Serifenschrift, die Erklärung
   klein darunter. */
.mp-zahlen {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--mp-5); margin: var(--mp-6) 0 var(--mp-6);
  padding: var(--mp-5) 0; border-top: 1px solid rgba(201,168,76,0.24);
  border-bottom: 1px solid rgba(201,168,76,0.24);
}
.mp-zahlen dt {
  font-family: var(--serif, Georgia, serif); font-size: 1.75rem; line-height: 1.1;
  color: var(--gold, #C9A84C); margin: 0 0 6px;
}
.mp-zahlen dd { margin: 0; font-size: var(--mp-klein); line-height: 1.5; color: var(--slate, #B6AC99); }
@media (max-width: 900px) { .mp-zahlen { grid-template-columns: 1fr; gap: var(--mp-4); } }

/* Beispielseiten aus einem Test-Werk. Sie müssen als Beispiel erkennbar sein,
   ohne wie ein Warnschild auszusehen: eine gestrichelte Klammer und eine
   kleine Marke darüber. */
.mp-beispiel { border: 1px dashed rgba(201,168,76,0.4); border-radius: var(--mp-rund); padding: var(--mp-6); }
.mp-beispiel-marke {
  display: inline-block; margin: 0 0 var(--mp-5);
  font-size: var(--mp-klein); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold, #C9A84C);
}

/* Der Markenmoment: die Zeitgeist-Animation bekommt eine eigene Bühne mit
   Luft darum. Kein Kasten, kein Rahmen, nur Raum und ein ruhiger Lichtschein. */
.mp-markenmoment {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, rgba(201,168,76,0.09), transparent 62%);
}
.mp-markenmoment-buehne {
  display: flex; justify-content: center;
  margin: var(--mp-7) auto 0; max-width: 560px;
}
@media (max-width: 900px) {
  .mp-markenmoment-buehne { margin-top: var(--mp-6); }
}

/* ------------------------------------------------------- Einwilligung ----
   Eine schmale Leiste unten, kein Vollbild-Block. Sie liegt über der
   klebenden Kauf-Leiste und schiebt nichts weg. */
.mp-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(6,6,10,0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(201,168,76,0.34);
  box-shadow: 0 -14px 40px rgba(0,0,0,0.5);
  /* Sie liegt von Anfang an da, nur außerhalb des Bildes. Hereingeschoben wird
     mit transform: das fasst das Layout nicht an und zählt deshalb nicht als
     Layoutsprung. Mit dem hidden-Attribut waren es gemessene 0,1617.
     visibility nimmt sie solange aus Vorlese- und Tabreihenfolge. */
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
}
.mp-consent--auf { transform: translateY(0); visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .mp-consent { transition: none; } }
.mp-consent-innen {
  max-width: 1080px; margin: 0 auto;
  padding: var(--mp-5) var(--mp-5) calc(var(--mp-5) + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--mp-4) var(--mp-6);
  align-items: center;
}
.mp-consent-titel {
  margin: 0 0 6px; font-family: var(--serif, Georgia, serif); font-size: 1.25rem;
  color: var(--gold-hell, #E8D5A3);
}
.mp-consent-text { margin: 0; font-size: var(--mp-klein); line-height: 1.6; color: var(--slate, #B6AC99); max-width: 62ch; }
.mp-consent-knoepfe { display: flex; flex-wrap: wrap; gap: var(--mp-3); align-items: center; }
.mp-consent-knoepfe .mp-knopf, .mp-consent-knoepfe .mp-knopf-rand { min-height: 48px; padding: 12px 22px; font-size: var(--mp-klein); }
.mp-consent-mehr {
  background: none; border: 0; cursor: pointer; min-height: 48px; padding: 0 6px;
  font-family: inherit; font-size: var(--mp-klein); color: var(--slate, #B6AC99);
  text-decoration: underline; text-underline-offset: 4px;
}
.mp-consent-mehr:hover { color: var(--gold-hell, #E8D5A3); }
/* Am Rechner bleibt alles, wie es war: der Knopf steht bei den anderen beiden,
   die schmale Zweitfassung in der Linkzeile ist abgeschaltet. */
.mp-consent-mehr--schmal, .mp-consent-mehr-punkt { display: none; }
.mp-consent-text--kurz { display: none; }
.mp-consent-fein { grid-column: 1 / -1; border-top: 1px solid rgba(240,230,211,0.14); padding-top: var(--mp-4); }
.mp-consent-zeile {
  display: grid; grid-template-columns: auto 1fr; gap: var(--mp-4);
  align-items: start; padding: var(--mp-3) 0; min-height: 48px;
}
.mp-consent-zeile input { width: 22px; height: 22px; margin-top: 2px; accent-color: #C9A84C; }
.mp-consent-zeile b { display: block; font-size: var(--mp-klein); color: var(--text, #F0E6D3); }
.mp-consent-zeile small { display: block; font-size: 0.875rem; line-height: 1.55; color: var(--slate, #B6AC99); margin-top: 3px; }
.mp-consent-fein .mp-knopf { margin-top: var(--mp-4); }
.mp-consent-fuss { grid-column: 1 / -1; margin: var(--mp-3) 0 0; font-size: 0.875rem; color: var(--slate, #B6AC99); }
.mp-consent-fuss a { color: var(--slate, #B6AC99); }
@media (max-width: 900px) {
  .mp-consent-innen { grid-template-columns: 1fr; }
  .mp-consent-knoepfe .mp-knopf, .mp-consent-knoepfe .mp-knopf-rand { flex: 1 1 auto; }
  /* Die Kauf-Leiste rückt hoch, solange gefragt wird. */
  .mp-consent.mp-consent--auf ~ .mp-leiste { display: none; }
}

/* ── 10.09.2026 · Der Zustimmungs-Kasten auf dem Telefon ────────────────────
   Gemessen auf 390 × 681 beim ersten Besuch: der Kasten war 412 px hoch und
   verdeckte damit ab y=269 alles, was darunter lag — Animation, Marke, die
   drei Anker, den Preis und den Haupt-Knopf. 60 Prozent des ersten
   Bildschirms waren Zustimmungs-Kasten.

   Über der Regel steht seit jeher der Satz „Eine schmale Leiste unten, kein
   Vollbild-Block". Genau das war sie auf dem Telefon nicht: Titel, Fließtext,
   drei Knöpfe untereinander und eine Fußzeile stapelten sich zu einem halben
   Bildschirm.

   Diese Regeln ändern NICHTS an der Einwilligung selbst: dieselben drei
   Möglichkeiten, dieselben Schalter, derselbe Text, dieselben Links, dieselbe
   Speicherung. Nur die Darstellung wird wieder zu dem, was sie sein sollte.

   Warum das Verkleinern das Problem nicht restlos löst und trotzdem der
   richtige Weg ist: der Haupt-Knopf liegt im Hero bei y≈587 bis 651, also am
   unteren Rand des ersten Bildschirms. Eine unten verankerte Leiste — gleich
   welcher Höhe über 30 px — liegt zwangsläufig darüber. Was sich messbar
   ändert, ist der Preis: er wird wieder sichtbar, und der Knopf steht nach
   einem kurzen Wisch frei statt erst nach einem halben Bildschirm.
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  .mp-consent-innen {
    padding: 10px var(--mp-4) calc(10px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  /* Der Titel wandert in die Textzeile: eine Aussage, keine zwei Zeilen. */
  .mp-consent-titel { display: none; }
  /* Der lange Satz bleibt in der Vorlese-Reihenfolge — er wird nur nicht mehr
     gemalt. Kein display:none: das nähme ihn auch der Sprachausgabe. */
  .mp-consent-text--lang {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .mp-consent-text--kurz { display: block; font-size: 0.875rem; line-height: 1.4; }
  /* Die drei Möglichkeiten nebeneinander statt untereinander. Beide Knöpfe
     bleiben mindestens 44 px hoch, „Einstellungen" wird zum Textlink daneben. */
  .mp-consent-knoepfe { flex-wrap: nowrap; gap: 8px; }
  .mp-consent-knoepfe .mp-knopf,
  .mp-consent-knoepfe .mp-knopf-rand {
    min-height: 44px; padding: 10px 12px; font-size: 0.9375rem;
    flex: 1 1 0; white-space: nowrap;
  }
  /* Der breite „Einstellungen"-Knopf verschwindet, der schmale in der
     Linkzeile übernimmt. Genau einer ist je Bildschirmbreite da. */
  .mp-consent-mehr--breit { display: none; }
  .mp-consent-mehr--schmal, .mp-consent-mehr-punkt { display: inline-flex; }
  .mp-consent-mehr--schmal {
    min-height: 44px; align-items: center; padding: 0 4px;
    font-size: 0.75rem; text-decoration: underline; text-underline-offset: 4px;
    background: none; border: 0; cursor: pointer; font-family: inherit;
    color: var(--slate, #B6AC99);
  }
  /* Die Pflichtlinks bleiben — sie gehören zur Einwilligung und werden NICHT
     entfernt. Sie kosten nur keine eigene Zeile mehr: sie stehen direkt unter
     dem Text, klein und eng, statt als dritte volle Zeile mit 44 px. */
  .mp-consent-fuss { margin-top: 0; font-size: 0.75rem; line-height: 1.3; }
  /* Eine ausdrückliche Reihenfolge, damit auch der aufgeklappte Zustand
     stimmt: Titel, Text, Pflichtlinks, Knöpfe, Feineinstellung. Die Knöpfe
     stehen bewusst unten — dort ist der Daumen. */
  .mp-consent-wort { display: contents; }
  .mp-consent-innen { display: flex; flex-direction: column; }
  .mp-consent-titel  { order: 1; }
  .mp-consent-text   { order: 2; }
  .mp-consent-fuss   { order: 3; }
  .mp-consent-knoepfe { order: 4; }
  .mp-consent-fein   { order: 5; }
  /* Sobald „Einstellungen" offen ist, darf die Leiste wachsen — dann will der
     Mensch sie lesen. Damit sie nie den ganzen Bildschirm nimmt, scrollt sie
     in sich selbst. */
  .mp-consent-innen:has(#mp-consent-fein:not([hidden])) {
    max-height: 82svh; overflow-y: auto;
  }
  .mp-consent-innen:has(#mp-consent-fein:not([hidden])) .mp-consent-titel { display: block; }
  .mp-consent-innen:has(#mp-consent-fein:not([hidden])) .mp-consent-text {
    -webkit-line-clamp: unset; overflow: visible;
  }
}

/* Die gemessene Höhe der Leiste steht als Variable bereit (gesetzt in
   inc-consent.php). Solange gefragt wird, endet die Seite nicht unter der
   Leiste: der letzte Knopf der Seite bleibt erreichbar, ohne dass jemand
   dagegen scrollen muss. */
body.mp-consent-offen { padding-bottom: var(--mp-consent-h, 0px); }
html { scroll-padding-bottom: var(--mp-consent-h, 0px); }

/* ------------------------------------------------------------ Tablet ------
   Ein Tablet-Rahmen für das Inhaltsverzeichnis. Es ist ein digitales Werk,
   also zeigt der Rahmen einen Bildschirm und keinen Buchrücken. */
.mp-tablet {
  border-radius: 18px; padding: 12px;
  background: linear-gradient(160deg, #2A2E45, #0C0E18);
  border: 1px solid rgba(240,230,211,0.16);
  box-shadow: 0 22px 60px rgba(0,0,0,0.5);
}
.mp-tablet-schirm {
  border-radius: 10px; background: var(--nacht-tief, #0A0A0F);
  padding: var(--mp-5); max-height: 420px; overflow: hidden; position: relative;
}
/* Der Inhalt läuft unten sanft aus, statt hart abgeschnitten zu werden. */
.mp-tablet-schirm::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, transparent, var(--nacht-tief, #0A0A0F));
  pointer-events: none;
}
.mp-tablet-kopf {
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold, #C9A84C); text-align: center; margin: 0 0 var(--mp-4);
}
.mp-tablet-liste { list-style: none; margin: 0; padding: 0; }
.mp-tablet-liste li {
  display: flex; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid rgba(240,230,211,0.07);
  font-size: var(--mp-klein); color: var(--text, #F0E6D3);
}
.mp-tablet-liste span { color: var(--gold, #C9A84C); min-width: 24px; }

/* Die beiden Links unter der Einwilligung waren 18 px hoch und damit kein
   brauchbares Tippziel. Sie sind klein, aber sie müssen treffbar sein. */
.mp-consent-fuss a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
}

/* Das Vorschau-Band meldet normalerweise nur, dass dies die Vorschau ist.
   Nur wenn produkte.json und die Seiten auseinanderlaufen, wird es laut. */
.mp-vorschau-band--warnung { background: #3A1512; border-bottom-color: #A5372A; }
.mp-vorschau-band--warnung b { color: #FF9E8A; }

/* ------------------------------------------------------- Beispielhörprobe -
   Native Bedienelemente in einem ruhigen Rahmen. Die feste Höhe verhindert,
   dass beim Laden der Datei etwas springt. */
.mp-hoerprobe {
  margin: var(--mp-5) 0 0; padding: var(--mp-5);
  border: 1px dashed rgba(201,168,76,0.4); border-radius: var(--mp-rund);
  background: rgba(255,255,255,0.02);
  max-width: 620px;
}
.mp-hoerprobe--gross { margin: var(--mp-7) auto 0; }
.mp-hoerprobe figcaption { display: block; margin: 0 0 var(--mp-4); text-align: left; }
.mp-hoerprobe-marke {
  display: inline-block; margin: 0 0 6px;
  font-size: var(--mp-klein); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold, #C9A84C);
}
.mp-hoerprobe-satz { display: block; font-size: var(--mp-klein); line-height: 1.6; color: var(--slate, #B6AC99); }
/* 54 px ist die Höhe, die Chrome dem nativen Spieler gibt. Fest gesetzt, damit
   der Kasten schon vor dem Laden seinen Platz hat: CLS bleibt 0. */
.mp-hoerprobe-spieler { display: block; width: 100%; height: 54px; }

/* ============================================================================
   BEISPIEL-ABDRUCK · die Lichtbox
   Die sieben Ansichten liegen als HTML in der Seite, nicht als Bilder. Nur so
   sind die Texte bei jeder Größe wirklich lesbar, und es wird nichts geladen.
   ========================================================================== */
.ba-oeffner { margin-top: var(--mp-5); }

.ba-schleier {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4,4,8,0.92);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--mp-5);
}
.ba-schleier[hidden] { display: none; }

.ba-rahmen {
  /* 08.09.2026: Die Lichtbox steht im Markup innerhalb von .mp-schau-gross,
     und das ist zentriert. Ohne diese Zeile erbt jeder Absatz im Beispiel-
     Abdruck die Zentrierung und der Fließtext steht mittig — schlecht lesbar
     und nicht die Form, in der ein Abdruck geschrieben ist. Das Deckblatt
     zentriert sich weiter selbst. */
  text-align: left;
  width: 100%; max-width: 1100px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--panel, #12121A);
  border: 1px solid var(--linie-gold, rgba(201,168,76,0.34));
  border-radius: var(--mp-rund);
  box-shadow: 0 30px 90px rgba(0,0,0,0.7);
  overflow: hidden;
}
.ba-kopfleiste {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mp-5);
  padding: var(--mp-5) var(--mp-6);
  border-bottom: 1px solid rgba(201,168,76,0.24);
}
.ba-marke {
  display: inline-block; font-size: var(--mp-klein); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold, #C9A84C); margin-bottom: 6px;
}
.ba-hinweis { margin: 0; font-size: var(--mp-klein); line-height: 1.55; color: var(--slate, #B6AC99); max-width: 64ch; }
.ba-zu {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(240,230,211,0.2); background: transparent;
  color: var(--text, #F0E6D3); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.ba-zu:hover { border-color: var(--gold, #C9A84C); color: var(--gold-hell, #E8D5A3); }

.ba-buehne {
  flex: 1 1 auto; min-height: 0;
  display: flex; gap: var(--mp-5);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: var(--mp-6);
  -webkit-overflow-scrolling: touch;
}
.ba-seite {
  scroll-snap-align: center;
  flex: 0 0 100%; max-width: 100%;
  overflow-y: auto;
  background: var(--nacht-tief, #0A0A0F);
  border: 1px solid rgba(240,230,211,0.12);
  border-radius: var(--mp-rund-s);
  padding: var(--mp-7) var(--mp-6);
  position: relative;
}
/* Fließtext in der Lichtbox: 18 px, damit man ihn wirklich liest. */
.ba-seite p { font-size: var(--mp-text); line-height: 1.75; color: var(--text, #F0E6D3); margin: 0 0 var(--mp-4); max-width: 66ch; }
.ba-seite h3 {
  font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.2;
  color: var(--gold-hell, #E8D5A3); margin: 0 0 var(--mp-5);
}
.ba-seite h4 { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 1.125rem;
  color: var(--gold-hell, #E8D5A3); margin: 0 0 10px; }
.ba-kopf { font-size: 0.8125rem !important; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold, #C9A84C) !important; margin-bottom: 10px !important; }
.ba-zahl { position: absolute; right: var(--mp-6); bottom: var(--mp-5);
  font-size: 0.8125rem !important; color: var(--slate, #B6AC99) !important; margin: 0 !important; }
.ba-fuss-hinweis { font-size: var(--mp-klein) !important; color: var(--slate, #B6AC99) !important; }

/* Deckblatt */
.ba-deckel { text-align: center; padding: var(--mp-8) var(--mp-5); }
.ba-deckel-marke { display: block; font-size: 0.8125rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold, #C9A84C); }
.ba-deckel-stern { display: block; font-size: 1.75rem; color: var(--gold, #C9A84C); margin: var(--mp-5) 0; }
.ba-deckel h3 { font-size: clamp(1.75rem, 4.4vw, 2.75rem); margin-bottom: var(--mp-5); }
.ba-deckel-name { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.5rem !important; color: var(--text, #F0E6D3) !important; margin: 0 auto 6px !important; }
.ba-deckel-datum { font-size: var(--mp-klein) !important; color: var(--slate, #B6AC99) !important; margin: 0 auto var(--mp-7) !important; }
.ba-deckel-fuss { font-size: 0.8125rem !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate, #B6AC99) !important; margin: 0 auto !important; }

/* Inhaltsverzeichnis */
.ba-inhalt { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--mp-7); }
.ba-inhalt li { break-inside: avoid; display: flex; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid rgba(240,230,211,0.07); font-size: var(--mp-klein); color: var(--text, #F0E6D3); }
.ba-inhalt span { color: var(--gold, #C9A84C); min-width: 26px; }

/* Signatur, Waage, Tag, Monate */
.ba-signatur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(240,230,211,0.1); border: 1px solid rgba(240,230,211,0.1);
  border-radius: var(--mp-rund-s); overflow: hidden; margin: 0 0 var(--mp-5); }
.ba-signatur > div { background: var(--nacht-tief, #0A0A0F); padding: var(--mp-4); text-align: center; }
.ba-signatur dt { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold, #C9A84C); margin-bottom: 5px; }
.ba-signatur dd { margin: 0; font-family: var(--serif, Georgia, serif); font-size: 1.25rem; color: var(--text, #F0E6D3); }
.ba-signatur small { display: block; font-size: 0.8125rem; color: var(--slate, #B6AC99); margin-top: 2px; }

.ba-waage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-4); margin: 0 0 var(--mp-5); }
.ba-waage > div { padding: var(--mp-5); border-radius: var(--mp-rund-s); }
.ba-waage-hell { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.24); }
.ba-waage-dunkel { background: rgba(255,255,255,0.03); border: 1px solid rgba(240,230,211,0.12); }
.ba-waage p { font-size: var(--mp-klein) !important; margin: 0 !important; }

.ba-tag-titel { font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: 1.25rem !important; color: var(--gold-hell, #E8D5A3) !important; }
.ba-tag, .ba-monate { margin: 0; }
.ba-tag > div, .ba-monate > div { padding: var(--mp-4) 0; border-top: 1px solid rgba(240,230,211,0.08); }
.ba-tag dt, .ba-monate dt { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold, #C9A84C); margin-bottom: 6px; }
.ba-tag dd, .ba-monate dd { margin: 0; font-size: var(--mp-text); line-height: 1.7; color: var(--text, #F0E6D3); }
.ba-monate dd b { color: var(--gold-hell, #E8D5A3); font-weight: 400; }

/* Steuerung */
.ba-steuerung {
  display: flex; align-items: center; gap: var(--mp-4);
  padding: var(--mp-4) var(--mp-6) calc(var(--mp-4) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(240,230,211,0.12);
}
.ba-pfeil {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(240,230,211,0.2); background: transparent;
  color: var(--text, #F0E6D3); font-size: 1.125rem; cursor: pointer;
}
.ba-pfeil:hover { border-color: var(--gold, #C9A84C); }
.ba-mini { flex: 1 1 auto; display: flex; gap: 6px; overflow-x: auto; }
.ba-mini button {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px;
  border: 1px solid rgba(240,230,211,0.16); border-radius: 999px; background: transparent;
  font-family: inherit; font-size: 0.875rem; color: var(--slate, #B6AC99); cursor: pointer; white-space: nowrap;
}
.ba-mini button[aria-selected="true"] { border-color: var(--gold, #C9A84C); color: var(--gold-hell, #E8D5A3); background: rgba(201,168,76,0.1); }

@media (max-width: 900px) {
  .ba-schleier { padding: 0; }
  .ba-rahmen { max-width: none; max-height: 100vh; height: 100vh; border: 0; border-radius: 0; }
  .ba-kopfleiste { padding: var(--mp-4) var(--mp-5); }
  .ba-hinweis { font-size: 0.875rem; }
  .ba-buehne { padding: var(--mp-4); gap: var(--mp-4); }
  .ba-seite { padding: var(--mp-6) var(--mp-5); }
  .ba-inhalt { columns: 1; }
  .ba-signatur { grid-template-columns: 1fr 1fr; }
  .ba-waage { grid-template-columns: 1fr; }
  .ba-steuerung { padding: var(--mp-3) var(--mp-4) calc(var(--mp-3) + env(safe-area-inset-bottom)); }
}

/* Die Animation als Hero-Bild. Sie bekommt die ganze rechte Spalte. */
.mp-hero-buehne { display: flex; justify-content: center; align-items: center; }

/* Die Brücke: zwei Sätze, viel Dunkelraum, sonst nichts. */
.mp-bruecke { padding-top: var(--mp-9); padding-bottom: var(--mp-9); }
.mp-bruecke-gross {
  max-width: 24ch; margin-left: auto; margin-right: auto;
  font-size: clamp(1.75rem, 4.6vw, 3rem); line-height: 1.18;
}
.mp-bruecke-leise {
  font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem); line-height: 1.6;
  color: var(--slate, #B6AC99);
  /* 08.09.2026: waren 34ch. Damit brach die zweite Zeile mitten in der
     Wendung um („das du / längst spürst"). Mit 44ch steht jeder der beiden
     Sätze auf dem Rechner in einer Zeile; am Telefon bricht er ohnehin. */
  max-width: 44ch; margin: var(--mp-6) auto 0;
}

/* Die große, anklickbare Produktvorschau im Beweis. */
/* 08.09.2026: `margin: 0 0 …` setzte die seitlichen Ränder auf null und hob
   damit das `margin: 0 auto` von .mp-spalte auf. Der 1080 Pixel breite
   Kasten klebte links, gemessen 156 Pixel neben der Achse der Animation
   darüber. `auto` statt `0` in der Mitte der Kurzschreibweise. */
.mp-schau-gross { text-align: center; margin: 0 auto var(--mp-7); }
.mp-schau-taste {
  display: block; width: 100%; border: 0; background: none; padding: 0; cursor: pointer;
  color: inherit; font: inherit;
}
.mp-schau-bilder--gross {
  display: flex; align-items: flex-end; justify-content: center; gap: var(--mp-6);
  min-height: 0; position: relative;
}
.mp-schau-bilder--gross .mp-buch { width: 300px; max-width: 40%; position: static; }
.mp-schau-bilder--gross .mp-telefon { position: static; width: 260px; max-width: 34%; }
.mp-schau-taste:hover .mp-buch,
.mp-schau-taste:focus-visible .mp-buch { border-color: var(--gold, #C9A84C); }
.mp-schau-lupe {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  margin-top: var(--mp-5);
  font-size: var(--mp-text); color: var(--gold-hell, #E8D5A3);
  border-bottom: 1px solid rgba(232,213,163,0.4); padding-bottom: 2px;
}
.mp-schau-lupe::before { content: "⌕"; font-size: 1.375rem; color: var(--gold, #C9A84C); }
/* 08.09.2026: hier stand `display: none` mit der Begründung „der Bild-Knopf
   reicht". Er reichte nicht. Ohne Beschriftung, ohne Lupe und am Telefon
   ohne Mauszeiger sagt nichts, dass die Bilder anklickbar sind. */
.mp-schau-gross .ba-oeffner { display: inline-flex; }

@media (max-width: 900px) {
  .mp-schau-bilder--gross { gap: var(--mp-4); }
  .mp-schau-bilder--gross .mp-buch { width: auto; max-width: 46%; }
  .mp-schau-bilder--gross .mp-telefon { max-width: 40%; }
}

/* Solange der Beispiel-Abdruck offen ist, tritt die Kauf-Leiste zurück. */
body.ba-offen .mp-leiste { display: none; }
/* Der Preis in der Leiste darf nicht umbrechen: „89" und „€" gehören zusammen. */
.mp-leiste-preis { white-space: nowrap; }
.mp-leiste-wort--zeile b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   DIE FRAGEN AUS DEM ALTEN FORMULAR · 08.09.2026
   Themen-Knöpfe, Hilfssätze und Beispiel-Knöpfe, zurückgeholt aus guide.php.
   Die Themen sind hier echte Kästchen mit Beschriftung: sie sehen aus wie
   Knöpfe, funktionieren aber ohne JavaScript und lassen sich mit der Tastatur
   bedienen. Das Kästchen selbst wird nicht versteckt, sondern nur unsichtbar
   gemacht — sonst nähme ihm der Browser den Tastaturfokus.
   ========================================================================== */

.ab-themen { display: flex; flex-wrap: wrap; gap: 10px; }

/* Zwei Vorfahren im Namen, und das ist nötig: .mp-feld label und .mp-feld
   input stehen weiter oben in diesem Blatt und wiegen schwerer als eine
   einzelne Klasse. Ohne den zweiten Namen wird aus jedem Themen-Knopf ein
   Block über die ganze Zeile (gemessen am Telefon: achtzehn Knöpfe
   untereinander, über zweitausend Pixel Weg), und das unsichtbare Kästchen
   bekommt Breite 100 % und Höhe 52 px.
   Beim Kästchen steht zusätzlich das Wort input im Namen, weil im Grundblatt
   `input[type="checkbox"]:not([name="website"])` steht und ein :not() mit
   Merkmal genauso schwer wiegt wie zwei Klassen. Ohne das Wort blieb das
   Kästchen 22 mal 22 Pixel gross (im Browser nachgesehen, nicht geraten). */
.ab-themen input.ab-thema-kasten {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; min-width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0;
  border: 0; appearance: none;
}
.ab-themen .ab-thema {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; margin: 0;
  min-height: 44px;                     /* Daumengröße, auch am Telefon */
  padding: 10px 16px;
  border: 1px solid rgba(174,182,216,0.28);
  border-radius: 999px;
  background: rgba(35,44,78,0.35);
  color: var(--text, #F4F6FF);
  font-family: var(--sans, sans-serif);
  font-size: 0.875rem; line-height: 1.2;   /* guide.php hatte 0.82rem */
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.ab-themen .ab-thema:hover { border-color: rgba(232,213,163,0.5); background: rgba(35,44,78,0.6); }

/* Gewählt: Gold, wie jeder andere Wert auf dieser Seite. */
.ab-themen input.ab-thema-kasten:checked + .ab-thema {
  border-color: var(--gold, #C9A84C);
  background: rgba(201,168,76,0.14);
  color: var(--creme, #F6DFA8);
}
/* Der Tastatur-Rahmen gehört auf die Beschriftung, weil das Kästchen unsichtbar ist. */
.ab-themen input.ab-thema-kasten:focus-visible + .ab-thema {
  outline: 2px solid var(--gold, #C9A84C);
  outline-offset: 2px;
}
.ab-thema-zeichen { font-size: 1rem; line-height: 1; }

/* Das Wort (optional) hinter einer Frage: leise, nicht wichtiger als die Frage. */
.ab-freiwillig {
  font-family: var(--sans, sans-serif);
  font-size: 0.8125rem; font-weight: 400;
  color: var(--slate, #AEB6D8);
  letter-spacing: 0;
}

/* Die Beispiel-Knöpfe unter einem Feld. */
.ab-beispiele { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.ab-beispiele-titel {
  flex: 0 0 100%; margin: 0 0 2px;
  font-family: var(--sans, sans-serif); font-size: 0.8125rem;
  color: var(--slate, #AEB6D8);
}
.ab-beispiele .ab-beispiel {
  min-height: 36px; padding: 7px 13px;
  border: 1px dashed rgba(174,182,216,0.34);
  border-radius: 999px;
  background: none; color: var(--slate, #AEB6D8);
  font-family: var(--sans, sans-serif); font-size: 0.8125rem; line-height: 1.2;
  cursor: pointer; transition: color 0.18s, border-color 0.18s;
}
.ab-beispiele .ab-beispiel:hover { color: var(--creme, #F6DFA8); border-color: rgba(232,213,163,0.55); }

/* Die Auswahlfelder (Geschlecht, Beziehung, Dauer) im Ton der Eingabefelder. */
.mp-feld .mp-auswahl {
  width: 100%; min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(174,182,216,0.28);
  border-radius: var(--mp-rund-klein, 10px);
  background: rgba(20,26,48,0.6);
  color: var(--text, #F4F6FF);
  font-family: var(--sans, sans-serif); font-size: 1rem;
}
.mp-feld .mp-auswahl:focus-visible { outline: 2px solid var(--gold, #C9A84C); outline-offset: 2px; }

@media (max-width: 560px) {
  .ab-themen .ab-thema { font-size: 0.8125rem; padding: 9px 14px; }
  .ab-themen { gap: 8px; }
}

/* ==========================================================================
   DAS INHALTSVERZEICHNIS IM READER-STIL · 08.09.2026 zurückgeholt
   Maße und Farben aus der Live-Seite abdruck.php, Zeilen 584 bis 595, dort
   wiederum aus dem echten Reader. Zwei Änderungen gegenüber dort, beide
   begründet: eine Karte je Zeile auf dem Telefon statt zwei (bei 390 px
   blieben sonst 21 Zeichen Platz für den Namen), und eine zweite, leise
   Zeile mit dem Satz zum Kapitel, den es früher nicht gab.
   ========================================================================== */

.mp-toc-block {
  background: var(--panel, #232C4E);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: var(--mp-rund, 14px);
  padding: 28px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
/* 08.09.2026, Toms Fund an der Live-Seite: „der Titel ist links, das muss doch
   mittig sein". Im Browser nachgemessen: text-align stand auf center, der TEXT
   war also mittig — im Kasten. Der Kasten selbst war 720 statt 1080 Pixel breit
   und sass 147 Pixel links neben der Mitte, weil ein p in diesem Blatt eine
   Höchstbreite erbt und `margin: 0 0 20px` die seitlichen Ränder auf null
   setzt. Vierter Fall derselben Ursache an einem Abend. */
.mp-toc-titel-zeile {
  margin: 0 auto 20px;
  color: var(--gold, #C9A84C);
  font-family: var(--serif, Georgia, serif);
  font-size: 1.125rem;
  text-align: center;
}
.mp-toc-raster { display: grid; grid-template-columns: 1fr; gap: 8px; }

.mp-toc-karte {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.mp-toc-zeichen {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-size: 1.3rem; line-height: 1;
}
.mp-toc-wort { display: block; min-width: 0; }
.mp-toc-name {
  display: block;
  color: var(--text, #F4F6FF);
  font-family: var(--sans, sans-serif);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
}
.mp-toc-satz {
  display: block; margin-top: 2px;
  color: var(--slate, #AEB6D8);
  font-family: var(--sans, sans-serif);
  font-size: 0.8125rem; line-height: 1.4;
}

@media (min-width: 760px) {
  .mp-toc-raster { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
  .mp-toc-block  { padding: 32px; }
}

/* ==========================================================================
   DAS TELEFON ALS FENSTER · 08.09.2026
   Toms Wunsch: oben die Zeichen, beim Scrollen das Inhaltsverzeichnis.
   Der Rahmen bleibt gleich gross, der Inhalt darin ist länger als der Rahmen
   und lässt sich bewegen. Kein Bild mehr, deshalb nichts, was beschnitten
   werden könnte, und bei jeder Grösse scharf.
   ========================================================================== */

.mp-buch--taste {
  border: 0; font: inherit; color: inherit; cursor: pointer;
  text-align: center;
}
.mp-buch--taste:focus-visible { outline: 2px solid var(--gold, #C9A84C); outline-offset: 4px; }

/* Die Höhe muss FEST stehen, sonst wächst das Fenster einfach mit seinem
   Inhalt und es gibt nichts zu scrollen (gemessen: sichtbare Höhe 1020,
   Gesamthöhe 1020, also null Weg). 390 Pixel ist genau die Höhe, die das
   Bildschirmfoto vorher hatte, damit sich am Aufbau der Sektion nichts
   verschiebt. */
.mp-telefon--fenster { overflow: hidden; height: 406px; }
.mp-telefon--fenster .mp-tf-fenster { height: 390px; }

.mp-tf-fenster {
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;          /* der Wisch endet im Fenster */
  scrollbar-width: none;
  border-radius: 14px;
  background: #0B0E1C;
  padding: 0 0 10px;
  text-align: left;
  font-family: var(--sans, sans-serif);
}
.mp-tf-fenster::-webkit-scrollbar { width: 0; height: 0; }
.mp-tf-fenster:focus-visible { outline: 2px solid var(--gold, #C9A84C); outline-offset: 2px; }

.mp-tf-leiste {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding: 8px 9px 7px;
  background: #0B0E1C;
  border-bottom: 1px solid rgba(201,168,76,0.16);
}
.mp-tf-leiste-titel { color: var(--gold, #C9A84C); font-size: 8px; font-weight: 600; line-height: 1.2; }
.mp-tf-leiste-still { color: rgba(201,168,76,0.65); font-size: 7px; }

.mp-tf-marke {
  padding: 7px 0 6px; text-align: center;
  color: var(--gold, #C9A84C);
  font-size: 7px; letter-spacing: 0.22em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mp-tf-kicker {
  margin: 10px 9px 6px; padding: 3px 6px;
  border: 1px solid rgba(201,168,76,0.35); border-radius: 4px;
  color: var(--gold, #C9A84C);
  font-size: 6px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
}
.mp-tf-titel {
  margin: 0 9px 9px; text-align: center;
  color: var(--text, #F4F6FF);
  font-family: var(--serif, Georgia, serif);
  font-size: 12px; line-height: 1.3;
}
.mp-tf-titel em { color: var(--gold, #C9A84C); font-style: italic; }

.mp-tf-raster {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 9px;
  border: 1px solid rgba(255,255,255,0.07); border-radius: 6px;
  overflow: hidden;
}
.mp-tf-kachel {
  padding: 7px 6px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mp-tf-kachel:nth-child(2n) { border-right: 0; }
.mp-tf-kachel:nth-last-child(-n+2) { border-bottom: 0; }
.mp-tf-kachel-kopf {
  display: block; margin-bottom: 2px;
  color: rgba(201,168,76,0.85);
  font-size: 5.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.mp-tf-kachel b {
  display: block;
  color: var(--creme, #F6DFA8);
  font-family: var(--serif, Georgia, serif); font-size: 9px; line-height: 1.2;
}
.mp-tf-kachel small { display: block; color: var(--slate, #AEB6D8); font-size: 6px; }

.mp-tf-trenner {
  margin: 12px 9px 6px; padding-top: 9px;
  border-top: 1px solid rgba(201,168,76,0.16);
  color: var(--gold, #C9A84C);
  font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
}
.mp-tf-kapitel { list-style: none; margin: 0; padding: 0 9px; }
.mp-tf-kapitel li {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mp-tf-kapitel li:last-child { border-bottom: 0; }
.mp-tf-kapitel-zeichen {
  flex: 0 0 auto; width: 13px; height: 13px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px; font-size: 7px; line-height: 1;
}
.mp-tf-kapitel-nr { flex: 0 0 auto; color: rgba(201,168,76,0.7); font-size: 6px; }
.mp-tf-kapitel-name { color: var(--text, #F4F6FF); font-size: 7px; line-height: 1.25; }

.mp-tf-ende {
  margin: 10px 9px 0; text-align: center;
  color: var(--slate, #AEB6D8); font-size: 6px;
}

/* Der Hinweis unter den beiden Bildern. */
/* margin-inline auto ist nötig, nicht schmückend: p trägt in diesem Blatt
   eine Höchstbreite, und ein Absatz mit Höchstbreite und Rand null klebt
   links, auch wenn text-align center darübersteht (gemessen: Mitte bei 622
   statt 720). */
.mp-schau-wink {
  margin: 22px auto 0;
  color: var(--slate, #AEB6D8);
  font-family: var(--sans, sans-serif); font-size: 0.8125rem;
}
.mp-schau-wink::before { content: "↕ "; color: var(--gold, #C9A84C); }

/* ==========================================================================
   DIE SECHS NEUEN ANSICHTEN IM BEISPIEL-ABDRUCK · 08.09.2026
   Toms Wort: „die 7 Seiten das sieht sehr wenig aus." Jetzt dreizehn.
   Diese Klassen kommen nur in den neuen Ansichten vor.
   ========================================================================== */

.ba-brief-anrede {
  margin: 0 0 14px;
  color: var(--creme, #F6DFA8);
  font-family: var(--serif, Georgia, serif);
  font-size: 1.0625rem; font-style: italic;
}
.ba-brief-schluss {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(201,168,76,0.2);
  color: var(--creme, #F6DFA8);
  font-family: var(--serif, Georgia, serif);
  font-size: 1.0625rem; font-style: italic;
}
.ba-hinweis {
  margin: 0 0 16px; padding: 10px 14px;
  border-left: 2px solid rgba(201,168,76,0.45);
  background: rgba(201,168,76,0.06);
  color: var(--slate, #AEB6D8);
  font-size: 0.875rem; line-height: 1.6;
}
.ba-affirmationen { margin: 16px 0; padding: 0; list-style: none; }
.ba-affirmationen li {
  position: relative;
  margin: 0 0 12px; padding: 0 0 0 24px;
  color: var(--text, #F4F6FF);
  font-family: var(--serif, Georgia, serif);
  font-size: 1.0625rem; line-height: 1.55;
}
.ba-affirmationen li::before {
  content: "✦"; position: absolute; left: 0; top: 0;
  color: var(--gold, #C9A84C); font-size: 0.8125rem; line-height: 1.9;
}
.ba-schritt-satz {
  margin: 18px 0; padding: 18px 20px;
  border: 1px solid rgba(201,168,76,0.3); border-radius: 10px;
  background: rgba(201,168,76,0.07);
  color: var(--creme, #F6DFA8);
  font-family: var(--serif, Georgia, serif);
  font-size: 1.125rem; line-height: 1.5;
}

/* 08.09.2026, MUST FIX 6: an die Stelle der Emojis tritt die Kapitelnummer.
   Sie steht in derselben Fläche, in der vorher das Bildchen sass, in der Farbe
   des Kapitels statt in der Farbe eines fremden Zeichensatzes. */
.mp-toc-zeichen,
.mp-tf-kapitel-zeichen {
  font-family: var(--serif, Georgia, serif);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mp-toc-zeichen { font-size: 0.9375rem; }
.mp-tf-kapitel-zeichen { font-size: 6.5px; }

/* ==========================================================================
   FASSUNG C · DIE ANIMATIONEN LIEGEN INEINANDER · 08.09.2026
   Nur zum Vergleichen, erreichbar über ?anim=c. Die weisse Gestalt ist der
   Grund, das Sternbild liegt darauf. Beide Bögen dauern 11 Sekunden und
   laufen deshalb im Gleichtakt.
   ========================================================================== */
.mp-anim-c { position: relative; width: 100%; max-width: 340px; margin: 0 auto; }
.mp-anim-c-grund { position: relative; z-index: 1; }
.mp-anim-c-drauf {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  /* 08.09.2026, zweimal geändert und beide Male am Bildschirm nachgesehen:
     Zuerst stand hier mix-blend-mode screen. Das sah nach der richtigen Wahl
     aus, war aber falsch — screen ADDIERT Licht, und Gold auf Gold ergibt
     Gold. Genau auf der Gestalt, wo Tom die Ziffern haben will, verschwanden
     sie. Schlimmer noch: unter screen ist Schwarz wirkungslos, also hätte
     auch keine dunkle Kontur geholfen.
     Jetzt normal, dazu die dunkle Kontur weiter unten. Der leere Rand des
     Sternbilds stört nicht, weil das SVG ohnehin durchsichtig ist. */
  mix-blend-mode: normal;
  opacity: 1;
}
.mp-anim-c-drauf .zbl-anim { width: 78%; margin: 0 auto; }

/* 08.09.2026 am Bildschirm nachgesehen: mit screen allein VERSCHWINDEN die
   Ziffern genau dort, wo Tom sie haben will — auf der Gestalt. Gold addiert
   auf Gold ergibt Gold. Deshalb bekommt jede Ziffer eine dunkle Kontur: auf
   dem hellen Körper trennt sie die Ziffer ab, auf dem dunklen Grund ist sie
   unsichtbar. paint-order sorgt dafür, dass die Kontur HINTER der Füllung
   liegt und die Ziffer nicht dünner macht. */
.mp-anim-c-drauf .zbl-ziffer,
.mp-anim-c-drauf .zbl-herz,
.mp-anim-c-drauf .zbl-datum {
  paint-order: stroke fill;
  stroke: rgba(8, 8, 16, 0.85);
  stroke-width: 2.6px;
  stroke-linejoin: round;
}
.mp-anim-c-drauf .zbl-linie { stroke: #F6DFA8; }

/* Bewegungsreduzierung gilt auch hier: dann steht beides still. */
@media (prefers-reduced-motion: reduce) {
  .mp-anim-c-drauf, .mp-anim-c-grund { animation: none !important; }
  .mp-anim-c *, .mp-anim-c *::before, .mp-anim-c *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Am Telefon ist die Gestalt kleiner, das Sternbild darf dann nicht mit
   schrumpfen, sonst werden die Ziffern zu Gekrissel. */
@media (max-width: 560px) {
  .mp-anim-c { max-width: 300px; }
  .mp-anim-c-drauf .zbl-anim { width: 86%; }
  .mp-anim-c-drauf .zbl-ziffer { stroke-width: 3px; }
}

/* Die Anbieterliste im Einwilligungs-Fenster · 08.09.2026 */
.mp-consent-anbieter { margin: 4px 0 16px; }
.mp-consent-anbieter summary {
  cursor: pointer; padding: 8px 0;
  color: var(--gold, #C9A84C);
  font-family: var(--sans, sans-serif); font-size: 0.875rem;
}
.mp-consent-anbieter dl { margin: 6px 0 0; font-family: var(--sans, sans-serif); }
.mp-consent-anbieter dt {
  margin: 12px 0 4px;
  color: var(--creme, #F6DFA8);
  font-size: 0.8125rem; font-weight: 600;
}
.mp-consent-anbieter dd {
  margin: 0; color: var(--slate, #AEB6D8);
  font-size: 0.8125rem; line-height: 1.6;
}
.mp-consent-anbieter dd b { color: var(--text, #F4F6FF); font-weight: 500; }
.mp-consent-anbieter dd em { color: var(--gold, #C9A84C); font-style: normal; }

/* ==========================================================================
   DIE ZWEI WEGE IM FORMULAR · 08.09.2026, Toms Fund an der laufenden Seite
   „wenn man beim Schritt 2 ist, dann ist der Button Zurück komplett komisch."
   Er hatte recht: dort stand .mp-knopf-still, und das ist gar kein Knopf,
   sondern ein unterstrichener Textlink. Unter einem Hauptknopf auf einer
   Seite ist das der richtige leise zweite Weg — mitten in einem Formular
   sieht es aus wie ein versehentlich unterstrichenes Wort.

   .mp-knopf-still bleibt unverändert, sie wird anderswo als leiser Weg
   gebraucht. Der Zurück-Knopf bekommt eine eigene Klasse: ein Umriss-Knopf
   im selben Maß wie der Hauptknopf, erkennbar ein Knopf, aber leiser —
   kein Farbverlauf, kein Schatten, nur Rahmen und goldene Schrift.
   ========================================================================== */

.mp-form-wege {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 16px;
  margin-top: 24px;
}
/* Der Hauptknopf bleibt der lautere und geht am Telefon über die ganze Breite. */
.mp-form-wege .mp-knopf { flex: 1 1 auto; }

.mp-knopf-zurueck {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto;
  min-height: 48px;              /* Daumengröße, wie überall */
  padding: 12px 24px;
  border: 1px solid rgba(201,168,76,0.55);
  border-radius: 999px;
  background: none;
  color: var(--gold-hell, #E8D5A3);
  font-family: var(--sans, sans-serif);
  font-size: var(--mp-text);
  font-weight: 500;              /* leiser als die 600 des Hauptknopfs */
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.mp-knopf-zurueck:hover {
  border-color: var(--gold, #C9A84C);
  background: rgba(201,168,76,0.08);
  color: var(--creme, #F6DFA8);
}
.mp-knopf-zurueck:focus-visible { outline: 2px solid var(--gold, #C9A84C); outline-offset: 3px; }
.mp-knopf-zurueck-pfeil { font-size: 1.05em; line-height: 1; }

/* Am Telefon untereinander: nebeneinander stünden sie so eng, dass der Daumen
   den falschen trifft. Weiter oben, Zurück darunter, dazwischen echter Platz. */
@media (max-width: 560px) {
  .mp-form-wege { flex-direction: column; align-items: stretch; gap: 14px; }
  .mp-form-wege .mp-knopf,
  .mp-form-wege .mp-knopf-zurueck { width: 100%; }
}

/* ==========================================================================
   FASSUNG B AUF DER LESUNGSSEITE · 08.09.2026, Toms Entscheidung „b war gut"
   Sternbild oben, weisse Gestalt darunter.

   Mein eigener Vorbehalt von vorhin, hier eingelöst: beide Animationen liefen
   endlos, und am Rechner bewegten sie sich gleichzeitig in derselben Spalte.
   Die Verwandlung der Gestalt läuft jetzt EINMAL und bleibt dann stehen —
   von Weiss zu Gold, und dort bleibt sie. Das Atmen und die aufsteigenden
   Funken laufen weiter, sonst wirkt die Gestalt tot.

   WICHTIG: das gilt NUR hier. reader-animation.php wird auch von index.php,
   ueber-mich.php, astro-animation.php, begleitung-animation.php und
   lesung-buch-animation.php benutzt; dort ändert sich nichts, weil die Regel
   an der Klasse dieser Seite hängt und nicht an der Animation selbst.
   ========================================================================== */

.mp-anim-b-gestalt { margin-top: 28px; }

/* rda-erleuchtung und rda-hof-wandel sind die beiden 11-Sekunden-Bögen der
   Verwandlung. forwards hält den Endzustand, sonst springt sie zurück. */
.mp-anim-b-gestalt .rda-koerper,
.mp-anim-b-gestalt .rda-hof {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion: reduce) {
  .mp-anim-b-gestalt *, .mp-anim-b-gestalt *::before, .mp-anim-b-gestalt *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   09.09.2026 · DIE STARTSEITE BAUTE AM TELEFON 1018 PIXEL BREIT
   Gefunden beim Prüfen des Untermenüs, nicht gesucht. Am Telefon meldete die
   Startseite innerWidth 1018 statt 390, /uebersicht dagegen korrekt 390. Auf
   einem echten Telefon heißt das: die ganze Seite wird herausgezoomt und die
   Schrift wird winzig.

   Ursache: die Monats-Zeitleiste ist ein waagerecht scrollbarer Streifen. Ihr
   Elternteil .mp-story-bild steht in einem Raster und hatte min-width auto —
   damit darf ein Rasterkind nie schmaler werden als sein Inhalt. Der Streifen
   scrollte deshalb nicht, sondern schob die ganze Seite auf 944 Pixel auf.
   Auf der Abdruckseite steht dieselbe Zeitleiste in einem gewöhnlichen Block
   und scrollt korrekt — deshalb fiel es dort nicht auf.

   Nachgemessen: vorher innerWidth 1018 und scrollWidth 1018, die Leiste 944
   breit ohne Scrollweg. Nachher 390 und 390, die Leiste 292 breit mit 944
   Scrollweg. Genau so war sie gemeint.

   ACHTUNG bei künftigen Streifen: eine waagerecht scrollbare Fläche in einem
   Raster oder Flex-Kasten braucht IMMER min-width 0 am Elternteil, sonst
   scrollt sie nicht, sondern wächst.
   ========================================================================== */
.mp-story-bild { min-width: 0; }
.mp-story-teil > * { min-width: 0; }

/* Beim Nachmessen zeigte sich, dass es nicht bei der Startseite blieb: die
   Abdruckseite baute am Telefon 431 Pixel breit, aus derselben Ursache an
   drei weiteren Rastern. Ein Rasterkind darf ohne min-width 0 nie schmaler
   werden als sein Inhalt — dann wächst die ganze Seite statt umzubrechen.
   Gemessen: die Hero-Spalte war 407 Pixel breit in einem 342 Pixel breiten
   Raster. Danach: 390 und 390, alles bricht um. */
.mp-hero-raster > *,
.mp-schau > *,
.mp-gleichung > *,
.mp-saeulen > * { min-width: 0; }

/* ==========================================================================
   DER HERO AM TELEFON · 09.09.2026
   Nach der belegten Vorlage vom 08.03. bis 07.04.2026, der Fassung mit den
   meisten bezahlten Abdrucken. Ihr Aufbau am Telefon war: schmale Kopfleiste,
   dann SOFORT die Animation, dann Label, Überschrift, Unterzeile, Knopf mit
   dem Preis darin, Zusatzzeile darunter.

   Am Rechner ändert sich NICHTS. Tom hat es zweimal gesagt: es geht nur um
   oben auf der Telefonversion.

   Warum `order` und nicht das Markup umstellen: im Markup steht der Text
   zuerst, und das ist die richtige Vorlesereihenfolge für einen Screenreader
   und die richtige Anordnung am Rechner, wo die Animation rechts daneben
   steht. Nur am Telefon, wo aus zwei Spalten eine wird, muss sie nach vorn.
   ========================================================================== */

@media (max-width: 900px) {
  /* order wirkt nur in Flex und Grid. Das Raster ist am Telefon einspaltig,
     als Flex-Spalte ist die Reihenfolge am leichtesten zu steuern. */
  .mp-hero-raster { display: flex; flex-direction: column; }

  /* Wohin die Bühne am Telefon gehört, steht weiter unten im Block
     „DER TELEFON-HERO DER STARTSEITE". Seit dem 09.09.2026 steht sie NACH
     dem Kaufknopf, nicht mehr davor. */

  /* Die Merkmalsliste ist als eine Zeile mit Mittelpunkten gebaut. Am Telefon
     bricht sie in drei Zeilen, und die Punkte bleiben am Zeilenende hängen —
     zwei verwaiste Punkte im Nichts. Untereinander ohne Punkte. */
  .mp-anker { display: block; }
  .mp-anker li::after { content: none; }
}

/* Die Zusatzzeile unter dem Knopf, wie in der alten Fassung. */
/* 09.09.2026 (Tom): stand auf 14 px. Der Beruhigungssatz unter dem Preis ist
   die letzte Zeile vor dem Kauf und wurde am Telefon kaum gelesen. 1rem. */
/* 10.09.2026 · Die drei Anker als gleich breite Spalten. Sie fuellen die
   Zeile, statt mit Punkten umzubrechen, und jede traegt unter dem Wort die
   Zahl, die es belegt. */
.mp-anker--drei {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--linie-gold, rgba(201,168,76,0.34));
  border-bottom: 1px solid var(--linie-gold, rgba(201,168,76,0.34));
}
.mp-anker--drei li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  text-align: center;
}
.mp-anker--drei li + li { border-left: 1px solid var(--linie-gold, rgba(201,168,76,0.22)); }
.mp-anker--drei li::before, .mp-anker--drei li::after { content: none !important; }
.mp-anker--drei b {
  font-family: var(--sans, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-hell, #E8D5A3);
  letter-spacing: 0.01em;
}
.mp-anker--drei span {
  font-family: var(--sans, sans-serif);
  font-size: 0.78rem;
  color: var(--slate, #B6AC99);
  letter-spacing: 0.02em;
}

.mp-hero-preis-zusatz {
  font-family: var(--sans, sans-serif);
  font-size: 1rem;
  color: var(--slate, #B6AC99);
  margin-left: 8px;
}
.mp-hero-unterpreis {
  margin: 14px auto 0;
  color: var(--slate, #AEB6D8);
  font-family: var(--sans, sans-serif);
  font-size: 1rem;
}

/* Die Kaufleiste tritt zurück, solange der Hero im Bild ist. Nur mit
   JavaScript; ohne bleibt sie sichtbar, siehe Kommentar in index.php. */
.mp-leiste--gesteuert { transition: transform 0.25s ease-out, opacity 0.2s; }
.mp-leiste--aus { transform: translateY(120%); opacity: 0; pointer-events: none; }


/* ==========================================================================
   DER TELEFON-HERO DER STARTSEITE · 09.09.2026, zweite Fassung
   ==========================================================================
   Tom hat den Hero auf einem echten Telefon gesehen und seine Anweisung
   umgekehrt. Seine Worte: „Auf einem echten Smartphone sieht man zunächst
   Header plus sehr große Animation, und erst weit darunter Finde zurück zu
   dir selbst. Preis und Haupt-CTA sind dadurch nicht im ersten relevanten
   Sichtbereich."

   Die Animation steht deshalb NICHT mehr vor der Überschrift, sondern als
   eigener, kompakter Abschnitt hinter dem Kaufknopf. Die Reihenfolge am
   Telefon ist jetzt:
     Kopfleiste · Marke · Überschrift · Unterzeile · Erklärung ·
     Vertrauenszeile · Preis · Kaufknopf · zweiter Weg · Animation

   AM RECHNER ÄNDERT SICH NICHTS. Dort steht der Text weiter links und die
   Animation rechts daneben, der Preis weiter im Knopf, die Vertrauenszeile
   weiter in einer Zeile mit goldenen Punkten.

   Zu den Abständen: Tom hat für diesen Bildschirm eigene Spannen vorgegeben
   (18 bis 22, 20 bis 24, 12 bis 16 und so fort). Sie liegen zwischen den
   Stufen unserer Skala 24/32/48. Seine Vorgabe geht hier vor; die Werte
   unten sind die Mitte seiner Spannen.
   ========================================================================== */

/* Am Rechner unsichtbar: die eigene Preiszeile. Dort steht der Preis im Knopf. */
/* 17.09.2026 · Der Hero-Knopf heisst jetzt „Meinen Kosmischen Abdruck erstellen
   lassen". Mit Pfeil UND Preis darin brauchte er 2 Zeilen und wurde 101px hoch —
   gemessen an einem echten Browser bei 1440px. Der Preis steht deshalb ab jetzt
   auf ALLEN Breiten als eigene Zeile ueber dem Knopf, nicht mehr nur am Telefon.
   Toms Auftrag laesst das ausdruecklich zu. */
.mp-hero-preis--telefon { display: flex; }
.mp-hero--start .mp-knopf-preis { display: none; }
.mp-hero--start .mp-knopf--gross { white-space: nowrap; }

@media (max-width: 900px) {

  /* ---- 1 · Die Reihenfolge ---------------------------------------------- */
  /* 10.09.2026 · Toms Vorgabe: „ich will die Animation, das Maennchen, genau
     wieder sehen, wenn man draufgeht — wie bei der alten Vision."
     Die Buehne steht deshalb wieder VOR dem Text, direkt unter der
     Ueberschrift. Damit sie sich zwischen h1 und Unterzeile schieben kann,
     loest sich der Textkasten am Telefon auf (display: contents) und seine
     Kinder werden selbst zu Flex-Elementen mit eigener Reihenfolge.
     Das kehrt die Anordnung vom 09.09. um. Der Kaufknopf des Heros liegt
     dadurch wieder unter der Faltkante — aufgefangen von der festen Leiste
     am unteren Rand, die am Telefon jetzt dauerhaft steht (siehe index.php).
     AM RECHNER AENDERT SICH NICHTS. */
  /* 10.09.2026 · Toms Skizze, Element fuer Element. Der Textkasten loest sich
     am Telefon auf, damit das Buch zwischen Unterzeile und Ankerzeile stehen
     kann. Am Rechner bleibt die Zweispaltigkeit unberuehrt. */
  .mp-hero--start .mp-hero-text { display: contents; }
  /* 10.09.2026, fuenfte Runde · Toms Anordnung: „Finde zurueck" steht ganz
     oben, „Dein persoenliches kosmisches Werk" faellt von dort weg und steht
     direkt unter der Animation. Die Zeile wird damit vom Vorspann zur
     Bildunterschrift: erst das Versprechen, dann das Bild, dann die Einordnung
     dessen, was man gerade gesehen hat. */
  .mp-hero--start h1                        { order: 1; }
  .mp-hero--start .mp-hero-sub              { order: 2; }
  .mp-hero--start .mp-marke                 { order: 4; margin: 0 0 10px; }
  /* 10.09.2026, vierte Runde · Die Huelle wird begrenzt, nicht die Figur:
     das SVG traegt ein Inline-`max-width:420px` aus dem PHP-Aufruf, und
     Inline schlaegt jede Stilregel. Ueber die Huelle bekommt die Figur am
     Telefon 280 Pixel Breite und damit 238 Pixel Hoehe — dieselbe Hoehe,
     die das Buch hatte. Am Rechner bleibt sie 420 breit. */
  .mp-hero--start .mp-hero-buehne { order: 3; max-width: 224px; margin: 0 auto 6px; overflow: visible; }
  /* 17.09.2026 · Das `white-space: nowrap` von heute frueh loeste den
     101-px-Knopf am Rechner, sprengte ihn aber am Telefon: bei 390 px war der
     Text 387 px breit und lief links und rechts aus der goldenen Flaeche.
     Am Telefon darf er also umbrechen, der Rand wird dafuer schmaler. */
  .mp-hero--start .mp-knopf--gross {
    white-space: normal;
    padding-left: 20px; padding-right: 20px;
    line-height: 1.25;
    /* Bricht der Text auf zwei Zeilen, richtet `justify-content` nur den
       Block aus, nicht die Zeilen darin — sie standen linksbuendig. */
    text-align: center;
  }
  /* 17.09.2026 · Die Bühne ist am Telefon auf 224 px gedeckelt, damit die
     Figur die Höhe des Buches behält. „Dein Schmerz sucht Heilung" bräche
     darin zweizeilig, deshalb tritt der Satz aus der Hülle heraus und steht
     mittig über dem ganzen Bildschirm — wie im August. */
  .mp-hero--start .mp-hero-slogan {
    /* Symmetrisch aus der Huelle heraus: die Prozent-Verschiebung landete
       bei -84 px am linken Rand. Zwei gleiche negative Raender halten den
       Satz dagegen auf jeder Breite in der Mitte. */
    width: auto; margin-left: -58px; margin-right: -58px;
    font-size: clamp(0.95rem, 4.4vw, 1.2rem);
  }
  .mp-hero--start .mp-anker                 { order: 5; }
  .mp-hero--start .mp-hero-preis--telefon   { order: 6; }
  /* Toms Skizze hat unter dem Knopf die Zusicherungen, nicht den zweiten Weg.
     Der Knopfkasten loest sich deshalb ebenfalls auf: der grosse Knopf steht
     auf 7, die Zusicherungen auf 8, der zweite Weg (Lesung, 44 €) darunter
     auf 9. Er verschwindet nicht, er steht nur einen Blick tiefer. */
  .mp-hero--start .mp-hero-knoepfe          { display: contents; }
  .mp-hero--start .mp-knopf--gross          { order: 7; }
  .mp-hero--start .mp-knopf-still           { order: 9; margin-top: 14px; }
  .mp-hero--start .mp-hero-unterpreis       { order: 8; }
  /* Die lange Erklaerung steht nicht mehr im ersten Bildschirm: die drei
     Anker sagen dasselbe in drei Woertern. */
  /* 10.09.2026 · Toms Bildschirmfoto (IMG_3948): zwischen dem zweiten Weg
     („Erst meine kosmische Signatur kennenlernen · 44 €") und diesem Absatz
     lagen gemessen NULL Pixel. Der Absatz las sich dadurch wie eine Fussnote
     zu dem 44-Euro-Link, obwohl er vom Abdruck spricht.
     Der Grund: `margin-top` an einem Flex-Element wird nicht mit dem
     `margin-bottom` des Nachbarn verrechnet, aber der zweite Weg hat gar
     keinen — und der Absatz stand direkt darunter. Jetzt trennt eine feine
     Linie mit Luft die beiden Blöcke. */
  /* 17.09.2026 · HIER STAND `order: 10` mit Trennlinie darüber: die Unterzeile
     schloss den Heldenbereich ab. Das war richtig, solange dort eine
     Produktbeschreibung stand. Seit heute trägt sie den Einstieg („Trennung,
     Trauer, Selbstzweifel"), den im Juli jeder als Zweites gelesen hat — also
     steht sie am Telefon direkt unter der Überschrift, wie damals. */
  .mp-hero--start .mp-hero-sub2 {
    order: 2;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  /* 168 Pixel: bei 190 fiel die letzte Zeile („24 bis 72 Stunden · 30 Tage
     Geld zurueck") aus dem ersten Bildschirm. Gemessen, nicht geschaetzt.
     Die Schrift auf dem Deckel wird mitverkleinert — sonst laufen „ZEITGEIST"
     oben und „24 KAPITEL" unten aus dem Deckel heraus, weil der Deckel ein
     festes Seitenverhaeltnis hat und der Inhalt nicht mitschrumpft. */
  .mp-hero--start .mp-buch--hero .mp-buch-name  { font-size: 0.8rem; }
  .mp-hero--start .mp-buch--hero .mp-buch-fuss  { font-size: 0.6rem;  letter-spacing: 0.1em; }
  /* Platz fuer die feste Leiste, damit sie nichts verdeckt. */
  .mp-hero--start { padding-bottom: 96px; }
  /* Das Raster zentriert am Rechner senkrecht UND waagerecht. Am Telefon ist
     es eine Spalte, und dort sorgte align-items: center dafür, dass die Bühne
     nur so breit wurde wie ihr Inhalt — gemessen 300 statt 346 Pixel. Deshalb
     hier auf volle Breite stellen. */
  .mp-hero--start .mp-hero-raster { gap: 0; align-items: stretch; }

  /* Preis als eigene Zeile vor dem Knopf, dafür raus aus dem Knopf.
     So steht 89 € im ersten Bildschirm genau einmal. */
  .mp-hero--start .mp-hero-preis--telefon { display: flex; }
  .mp-hero--start .mp-knopf-preis { display: none; }

  /* ---- 2 · Ränder -------------------------------------------------------- */
  .mp-hero--start { padding: 30px 22px 40px; }

  /* ---- 3 · Typografie, mit clamp von 320 bis 430 Pixeln sauber ----------- */
  /* Marke 16–17 px */
  /* Die Marke bricht bis 390 Pixel Breite in zwei Zeilen um. Einzeilig wäre
     sie nur ohne jede Sperrung zu haben, und eine goldene Versalzeile ohne
     Sperrung ist keine mehr. Stattdessen die Zeilenhöhe von 1,65 auf 1,2:
     zwei Zeilen kosten damit 40 statt 55 Pixel. */
  /* 10.09.2026, sechste Runde · Toms Wort: „aber Dein persoen… in EINER
     Zeile, mache es super schoen jetzt."

     Der Satz hat 33 Zeichen. In der bisherigen Groesse (17 px) brauchte er
     zwei Zeilen und stand linksbuendig unter der Figur wie ein abgerissener
     Absatz. Als Bildunterschrift gehoert er in die Form, die eine
     Bildunterschrift hat: klein, weit gesperrt, mittig, in einer Zeile — und
     mit zwei feinen goldenen Linien links und rechts, die ihn in die Zeile
     einfassen und zum Anker-Band darunter ueberleiten.

     Die Groesse waechst mit dem Fenster (clamp), damit die Zeile auf jedem
     Geraet EINE bleibt: bei 320 px sind es 9,8 px, bei 390 px 11,9 px, ab
     430 px stehen 12,5 px fest. */
  .mp-hero--start .mp-marke {
    display: block;
    width: 100%;
    text-align: center;
    /* Etwas kleiner und enger gesperrt als zuerst gesetzt: bei 0,19em blieben
       links und rechts nur elf Pixel fuer die Linien, und die sahen aus wie
       zwei verirrte Striche. Jetzt sind es rund dreissig. */
    font-size: clamp(0.6rem, 2.95vw, 0.76rem);
    letter-spacing: 0.17em;
    line-height: 1.2;
    white-space: nowrap;
    text-wrap: nowrap;
    color: var(--gold, #C9A84C);
    margin: 2px 0 9px;
  }
  /* Keine Linien links und rechts. Der Satz ist 33 Zeichen lang; es blieben
     nur dreizehn Pixel je Seite, und das sahen aus wie zwei verirrte Striche.
     Die Haarlinie unter dem Anker-Band traegt die Struktur schon. */
  /* Die obere Haarlinie des Anker-Bands faellt weg: die Unterschrift und das
     Band lesen sich als ein Block, nicht als zwei. */
  .mp-hero--start .mp-anker--drei { border-top: none; }
  /* Überschrift 42–46 px, Zeilenhöhe 1,0 */
  /* ══════════════════════════════════════════════════════════════════════
     10.09.2026 · DER ECHTE SICHTBARE BEREICH, gemessen an Toms Geraet.

     Ich hatte mit einem nackten Fenster von 390 x 844 Punkten gemessen. Auf
     einem echten iPhone in Safari sieht man aber viel weniger: Toms
     Bildschirmfoto (iPhone 15/16 Pro, 402 x 874) zeigt die Statusleiste oben
     mit rund 62 Punkten und die Safari-Leiste unten ab 743 Punkten.

         wirklich sichtbar:  rund 681 Punkte, nicht 844
         mein Messfehler:    163 Punkte

     Deshalb war der Kaufknopf (677 bis 741) von der Safari-Leiste
     angeschnitten. Alle Groessen unten sind jetzt so gerechnet, dass der
     Knopf bei 660 Punkten zu Ende ist — mit Luft fuer Geraete, die noch
     weniger zeigen.
     ══════════════════════════════════════════════════════════════════════ */
  .mp-hero--start h1 {
    font-size: clamp(2.35rem, 10.1vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 11px;
  }
  /* Unterzeile 24–27 px, Zeilenhöhe 1,2 */
  .mp-hero--start .mp-hero-sub {
    font-size: clamp(1.35rem, 5.9vw, 1.5rem);
    line-height: 1.18;
    margin: 0 0 6px;
  }
  /* Erklärung 18–19 px, Zeilenhöhe 1,55.
     10.09.2026 · Der Abstand nach oben steht HIER, nicht weiter oben: diese
     Regel kommt spaeter in der Datei und hat `margin: 0 0 18px` gesetzt, was
     jeden `margin-top` davor ausgeloescht hat. Gemessen waren zwischen dem
     zweiten Weg und diesem Absatz null Pixel. */
  .mp-hero--start .mp-hero-sub2 {
    font-size: clamp(1.125rem, 4.8vw, 1.1875rem);
    line-height: 1.55;
    /* 17.09.2026 · war `30px 0 18px`, als der Absatz ganz unten stand. */
    margin: 4px 0 18px;
  }
  /* Vertrauenszeile 16–17 px, wieder EINE Zeile mit goldenen Punkten */
  /* 10.09.2026 · Die drei Anker als gleich breite Spalten mit einer zweiten
     Zeile. Die alte Regel („display: flex" mit Punkten dazwischen) steht
     hier weiter fuer andere Seiten; die Startseite bekommt das Raster.
     Gemessen: als Flex-Zeile brach die Reihe in drei Zeilen um und wurde
     162 Pixel hoch, was Preis, Knopf und Zusicherung unter die Kante schob. */
  .mp-hero--start .mp-anker--drei {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 9px;
  }
  .mp-hero--start .mp-anker--drei li { padding: 7px 4px; gap: 0; }
  .mp-hero--start .mp-anker--drei b    { font-size: 0.85rem; line-height: 1.2; }
  .mp-hero--start .mp-anker--drei span { font-size: 0.7rem;  line-height: 1.25; }

  .mp-hero--start .mp-anker {
    display: flex; flex-wrap: wrap;
    gap: 4px 10px;
    font-size: clamp(1rem, 4.3vw, 1.0625rem);
    letter-spacing: 0.02em;
    margin: 0 0 10px;
  }
  /* Der goldene Punkt steht VOR dem Eintrag, nicht dahinter. Die Zeile bricht
     am Telefon um, und ein nachgestellter Punkt bliebe dann am Zeilenende
     hängen — genau der verwaiste Punkt, wegen dem die Punkte hier im August
     einmal ganz verschwunden waren. Vorangestellt wandert er mit seinem
     Eintrag in die nächste Zeile. */
  .mp-hero--start .mp-anker li { gap: 8px; }
  .mp-hero--start .mp-anker li::after { content: none; }
  .mp-hero--start .mp-anker li + li::before { content: "·"; color: var(--gold, #C9A84C); }
  /* Preis 28–32 px */
  .mp-hero--start .mp-hero-preis--telefon { margin: 0 0 6px; gap: 4px 10px; }
  .mp-hero--start .mp-hero-preis b { font-size: clamp(1.75rem, 7.7vw, 2rem); }

  /* ---- 4 · Der Kaufknopf ------------------------------------------------- */
  .mp-hero--start .mp-hero-knoepfe { gap: 12px; }
  .mp-hero--start .mp-knopf--gross {
    width: 100%;
    min-height: 60px;
    padding: 17px 20px;
    font-size: 1.125rem;
  }
  /* Der zweite Weg: die Unterstreichung lief über die ganze Breite und sah
     dadurch aus wie eine Trennlinie. Am Telefon deshalb den Text selbst
     unterstreichen. */
  .mp-hero--start .mp-knopf-still {
    min-height: 56px;
    justify-content: center;
    text-align: center;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .mp-hero--start .mp-hero-unterpreis { margin-top: 16px; text-wrap: balance; }

  /* ---- 5 · Die Animation als eigener, kompakter Abschnitt ---------------- */
  /* Tom: „Zielhöhe 280 bis 330 px, keine 600 bis 700. Und die Zeichen, Zahlen
     und Wörter DARIN sollen am Telefon GRÖSSER dargestellt werden."

     Beides zusammen geht nur, wenn die Fläche breiter wird und die leeren
     Ränder der Zeichenfläche wegfallen. Gemessen: über der Aura sind 12,5
     Prozent der Höhe leer, unter dem Kissen 17 Prozent. Die Fläche bekommt
     deshalb ein Seitenverhältnis von 1 zu 0,85 statt 1 zu 1,15, und das SVG
     läuft in seiner natürlichen Größe darüber hinaus und wird oben und unten
     im leeren Bereich beschnitten. Die Figur wird dadurch so breit wie die
     Textspalte — bei 390 Pixeln 346 statt 280 — und die Fläche bleibt mit
     294 Pixeln in Toms Spanne. Bei 430 Pixeln sind es 328. */
  .mp-hero--start .mp-hero-buehne .ka-anim {
    /* 10.09.2026, vierte Runde · 280 statt volle Breite. Die Figur bekommt
       dieselbe Hoehe, die das Buch hatte (238 px), damit die acht Elemente
       weiter zusammen in EINEN Bildschirm passen. Bei voller Breite waren es
       346 x 294, und die Zusicherungen fielen heraus. */
    max-width: 280px;
    width: 100%;
    aspect-ratio: 1 / 0.85;
  }
  .mp-hero--start .mp-hero-buehne .ka-anim svg {
    height: auto;
    margin-top: -12%;
  }

  /* Kein Ton am Telefon: der Lautsprecher verschwindet. */
  .mp-hero--start .ka-sound { display: none; }

  /* Die Schrift in der Animation. Auf der breiteren Fläche ist rechts und
     links neben der Figur je rund 100 Pixel frei, dort passen jetzt 16 bis
     18 Pixel statt der bisherigen 12 bis 18 mit Anschnitt.
     Der einseitige Einzug rechts bleibt: er hält die rechten Wörter vom Rand
     weg und schiebt die linken zugleich weiter nach außen, weg vom
     leuchtenden Buch. Ein beidseitiger Einzug hatte genau das kaputt
     gemacht. */
  /* 10.09.2026 · NACHTRAG. Die Werte oben galten fuer eine 346 Pixel breite
     Flaeche. Seit die Figur auf 224 Pixel gerechnet ist — damit der Kaufknopf
     in den WIRKLICH sichtbaren 681 Punkten steht — bleibt links und rechts
     kaum Platz, und die Woerter lagen auf der Figur. Kleiner gesetzt und der
     Wortbereich breiter als die Figur, damit sie daneben fallen. */
  /* Die Woerter bleiben INNERHALB der Flaeche. Nach aussen geschoben wurden
     sie an der Kante abgeschnitten („nnerlich leer", „erschoep") — die
     Animationsflaeche schneidet ab, weil der Ausschnitt der Figur daran
     haengt. Innen duerfen sie die Figur leicht ueberlagern; so war es in der
     Juli-Fassung auch, und dort hat es getragen. */
  .mp-hero--start .ka-particles { position: absolute; inset: 0; }
  .mp-hero--start .ka-schatten-wort { font-size: clamp(0.7rem, 3vw, 0.8rem) !important; opacity: 0.72; }
  .mp-hero--start .ka-particle { font-size: 1.05rem !important; }
  .mp-hero--start .ka-particle[style*="italic"] { font-size: 0.85rem !important; }


}

/* ==========================================================================
   DER BEISPIEL-ABDRUCK AM TELEFON · 09.09.2026
   Tom: „eigene Sektion, Mockup NICHT winzig … Keine Miniaturseiten, die
   ältere Menschen nicht lesen können."

   Gemessen war es genau das: Buchdeckel und Telefon-Fenster standen bei 390
   Pixeln Breite nebeneinander, 157 und 137 Pixel breit. Im Fenster liegt ein
   zweispaltiges Raster mit sechs Kacheln — bei 137 Pixeln blieb von jeder
   Kachel eine halbe übrig, „Mondzeichen" wurde zu „Mondze", „Krafttag" zu
   „Kraf", „Mittwoch" zu „Mittw". Dieselbe Art Fehler wie die angeschnittenen
   Wörter in der Animation.

   Am Telefon stehen beide deshalb untereinander: der Deckel oben in Ruhe,
   das Fenster darunter über die volle Spaltenbreite, wo die sechs Kacheln
   ihren Text tragen. Am Rechner bleibt das Nebeneinander.
   ========================================================================== */

.mp-nur-telefon { display: none; }

@media (max-width: 900px) {
  .mp-nur-telefon { display: inline; }
  .mp-nur-rechner { display: none; }

  .mp-schau-bilder--gross {
    flex-direction: column;
    align-items: center;
    gap: var(--mp-5);
  }
  .mp-schau-bilder--gross .mp-buch { max-width: 240px; width: 100%; }
  .mp-schau-bilder--gross .mp-telefon { max-width: none; width: 100%; }

  /* Ohne min-width: 0 darf eine Rasterzelle nie schmaler werden als ihr
     Inhalt. Genau daran sind die Kacheln vorher zerbrochen. */
  .mp-tf-raster > * { min-width: 0; }
  .mp-tf-kachel b, .mp-tf-kachel small, .mp-tf-kachel-kopf { overflow-wrap: anywhere; }
}

/* ==========================================================================
   DIE AUSWAHLZEILEN IM BESTELLFORMULAR · 09.09.2026
   Dritter Fall derselben Ursache. Die Lesungsseite baute bei 320 Pixeln
   Gerätebreite 365 Pixel breit — die Seite zoomt sich damit auf einem alten
   iPhone SE selbst heraus, und alles wird winzig.

   Die Zeile ist ein Raster aus drei Spalten: Auswahlknopf, Text, Preis. Die
   mittlere Spalte hat kein `min-width: 0`, und ein Rasterkind darf ohne diese
   Angabe nie schmaler werden als sein längstes Wort. Zusammen mit dem Preis
   rechts, der `white-space: nowrap` trägt und als „inbegriffen" 103 Pixel
   misst, reichte der Platz bei 320 nicht mehr. Statt umzubrechen, hat die
   Zeile die Seite auseinandergeschoben.

   Gleiche Familie wie die 1018 Pixel der Startseite am 08.09. und die
   halbierten Kacheln im Telefon-Fenster. Der Preis darf weiter nicht
   umbrechen — „+ 89 €" gehört zusammen —, aber der Text daneben muss.
   ========================================================================== */
.mp-wahl label > * { min-width: 0; }
.mp-wahl b, .mp-wahl small { overflow-wrap: anywhere; }

/* Auf den schmalsten Telefonen bekommt der Preis eine eigene Zeile unter dem
   Text. Bei 320 Pixeln blieben der Beschriftung sonst noch 64 Pixel, und
   „Auch hören, etwa 25 bis 30 Minuten" stünde dort als Buchstabensäule. */
@media (max-width: 360px) {
  .mp-wahl label { grid-template-columns: auto 1fr; row-gap: var(--mp-2); }
  .mp-wahl-preis { grid-column: 2; }
}

/* ==========================================================================
   DER TEXTAUSSCHNITT AUS DEM BEISPIEL-ABDRUCK · 09.09.2026
   Er steht dort, wo bis heute das dritte Mockup-Paar stand. An dieser Stelle
   geht es nicht darum, wie das Werk aussieht, sondern wie darin geschrieben
   wird — deshalb ein echter Absatz statt eines geschrumpften Bildes.

   Die Fläche nimmt bewusst dieselben Werte wie ein Blatt in der Lichtbox:
   derselbe tiefe Grund, dieselbe Umrandung, Fließtext 18 Pixel mit
   Zeilenhöhe 1,75. Wer den Ausschnitt liest und danach die Lichtbox öffnet,
   soll dasselbe Werk wiedererkennen.
   ========================================================================== */
.mp-probe {
  margin: 0;
  background: var(--nacht-tief, #0A0A0F);
  border: 1px solid rgba(240,230,211,0.12);
  border-radius: var(--mp-rund-s);
  padding: var(--mp-7) var(--mp-6);
}
.mp-probe-kopf {
  margin: 0 0 var(--mp-4);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold, #C9A84C);
}
.mp-probe-text { margin: 0; padding: 0; border: 0; }
.mp-probe-text p {
  font-family: var(--serif, Georgia, serif);
  font-size: var(--mp-text);
  line-height: 1.75;
  color: var(--text, #F0E6D3);
  margin: 0;
  max-width: 60ch;
}
.mp-probe-fuss {
  margin: var(--mp-5) 0 0;
  font-size: var(--mp-klein);
  color: var(--slate, #B6AC99);
}

@media (max-width: 900px) {
  .mp-probe { padding: var(--mp-6) var(--mp-5); }
}

/* Seit dem 09.09.2026 steht im Hero der Abdruckseite nur noch der Deckel.
   Als einziges Kind einer Zeile, die für zwei gebaut war, klebte er links und
   blieb mit 185 Pixeln so schmal, als stünde das Telefon noch daneben.
   Allein darf er in die Mitte und größer werden. `:only-child` sorgt dafür,
   dass die Regel nur dort greift, wo er wirklich allein steht. */
.mp-schau-bilder > .mp-buch:only-child { margin-inline: auto; max-width: 260px; }
@media (max-width: 900px) {
  .mp-schau-bilder > .mp-buch:only-child { max-width: 240px; width: 100%; }
}

/* ==========================================================================
   DIE ZWEI FASSUNGEN DES INHALTSVERZEICHNIS-ANRISSES · 09.09.2026
   Zur Auswahl durch Tom, sichtbar über ?toc=1 und ?toc=2. Ohne Parameter
   greift keine der beiden, dann gilt die bisherige Form.
   ========================================================================== */

/* Fassung 1 · „5 Kapitel über …". Ein Satz je Zeile, die Zahl vorn in Gold,
   das Thema in der Textfarbe. Keine zweite Zeile, keine rechte Spalte. */
.mp-toc-anriss--eins li { padding: 14px 0; }
.mp-toc-anriss-satz {
  display: block;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--text, #F0E6D3);
}
.mp-toc-anriss-satz b {
  font-weight: 400;
  color: var(--gold, #C9A84C);
}

/* Fassung 2 · Gruppe als Überschrift, darunter die echten Kapitelnamen,
   klein. Dieselbe Form, die auf der Abdruckseite schon steht. */
.mp-toc-anriss-alle {
  display: block;
  font-size: var(--mp-klein);
  line-height: 1.65;
  color: var(--slate, #B6AC99);
  margin-top: 6px;
}

/* 09.09.2026 (Tom): Herkunftszeile ueber dem einen grossen Zitat, damit
   niemand denkt, Tom habe den Satz selbst geschrieben. */
.mp-statement .mp-statement-herkunft {
  font-family: var(--sans, sans-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #C9A84C);
  opacity: 0.85;
  margin: 0 0 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DAS BILD, DAS ALLES VERBINDET · 10.09.2026
   Die Signature-Section der Startseite. Drei Fragmente, die sich beim
   Scrollen über feine goldene Linien in ein Zentrum verbinden.

   Grundsatz: alles ist im Ruhezustand lesbar. Die Animation fügt Linien
   hinzu, sie deckt nichts auf. Ein Bildschirmfoto zeigt denselben Inhalt
   wie ein Mensch, der scrollt.
   ══════════════════════════════════════════════════════════════════════ */
.zg-bild .mp-marke { display: block; margin-bottom: var(--mp-6); }

.zg-bild-buehne {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mp-7);
  margin: 0 auto;
  max-width: 1040px;
  padding: var(--mp-4) 0 0;
}

/* Die Linien liegen über der Bühne, aber unter dem Text und fangen keine
   Berührung ab. */
.zg-bild-linien {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
}
.zg-bild-linie {
  fill: none;
  stroke: url(#zgBildGold);
  stroke-width: 1;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1);
}
.zg-bild-linie:nth-child(2) { transition-delay: .12s; }
.zg-bild-linie:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .zg-bild-linie { transition: none; }
}

.zg-frag {
  position: relative; z-index: 1;
  display: grid; justify-items: center; text-align: center;
  gap: var(--mp-4);
}
.zg-frag-zeichen {
  display: grid; place-items: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  color: var(--gold, #C9A84C);
  background: radial-gradient(circle at 50% 45%,
              rgba(201,168,76,0.10) 0%, rgba(201,168,76,0.03) 55%, transparent 72%);
  border: 1px solid rgba(201,168,76,0.20);
}
.zg-frag-zeichen svg { width: 60px; height: 60px; display: block; }
/* Wenn das Bild zusammenläuft, treten die Zeichen leise hervor. Sie waren
   vorher nicht unsichtbar — sie werden nur ein wenig heller. */
.ist-verbunden .zg-frag-zeichen {
  border-color: rgba(201,168,76,0.42);
  box-shadow: 0 0 26px rgba(201,168,76,0.16);
  transition: border-color 1.2s ease, box-shadow 1.2s ease;
}
.zg-frag-titel {
  margin: 0;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: var(--mp-klein);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-hell, #E8D5A3);
}
.zg-frag-nr {
  display: inline-block; margin-right: 8px;
  color: var(--gold, #C9A84C); opacity: .7;
  font-variant-numeric: tabular-nums;
}
.zg-frag-text {
  margin: 0; max-width: 34ch;
  font-size: var(--mp-text); line-height: 1.65;
  color: var(--slate, #B6AC99);
}

/* Das Zentrum: ein einzelner Punkt mit weichem Hof. */
.zg-bild-zentrum {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  min-height: 72px; margin-top: var(--mp-5);
}
.zg-bild-kern {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-hell, #E8D5A3);
  box-shadow: 0 0 0 rgba(201,168,76,0.0);
  transition: box-shadow 1.6s ease .5s;
}
.ist-verbunden .zg-bild-kern {
  box-shadow: 0 0 14px 3px rgba(232,213,163,0.55),
              0 0 46px 12px rgba(201,168,76,0.22);
}
@media (prefers-reduced-motion: reduce) {
  .zg-bild-kern { transition: none; }
}

.zg-bild-satz {
  margin: var(--mp-7) auto 0;
  max-width: 22ch; text-align: center; text-wrap: balance;
}
.zg-bild-klein {
  margin: var(--mp-4) auto 0;
  text-align: center; font-size: var(--mp-klein);
  color: var(--slate, #B6AC99); opacity: .8;
}

/* Am Rechner stehen die drei Fragmente nebeneinander und laufen nach unten in
   die Mitte. Auf dem Telefon stehen sie untereinander — die Linien laufen
   dann senkrecht nach unten, dieselbe Aussage in der Hochkant-Dramaturgie. */
@media (min-width: 900px) {
  .zg-bild-buehne {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mp-6) var(--mp-7);
    padding-top: var(--mp-6);
  }
  .zg-bild-zentrum { grid-column: 1 / -1; min-height: 120px; margin-top: var(--mp-7); }
  .zg-frag-zeichen { width: 108px; height: 108px; }
  .zg-frag-zeichen svg { width: 68px; height: 68px; }
  .zg-bild-satz { max-width: 26ch; }
}

/* Nachtrag 10.09.2026, nach der ersten Messung:
   · die drei Fragmente sind gleich hoch, ihr Inhalt soll aber oben beginnen,
     sonst stehen die drei Titel auf drei verschiedenen Höhen
   · der Schlusssatz braucht die eigene Mittigkeit, weil .mp-h2 eine eigene
     Außenkante mitbringt */
.zg-frag { align-content: start; }
.zg-bild .zg-bild-satz { margin-left: auto; margin-right: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   VIER TEILE. EIN BILD. · 10.09.2026
   Vier vorhandene Zeitgeist-Zeichen, verbunden durch eine einzige feine
   goldene Linie. Kein zweites Skript: die Linie ist CSS.
   ══════════════════════════════════════════════════════════════════════ */
.zg-teile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mp-7);
  margin: var(--mp-6) auto 0;
  max-width: 1040px;
}
/* Die gemeinsame Linie. Sie liegt hinter den Zeichen und läuft auf dem Telefon
   senkrecht, am Rechner waagerecht durch die Reihe der Bühnen. */
.zg-teile::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 8%; bottom: 8%; width: 1px; transform: translateX(-0.5px);
  background: linear-gradient(to bottom,
    rgba(201,168,76,0) 0%, rgba(201,168,76,0.28) 12%,
    rgba(201,168,76,0.28) 88%, rgba(201,168,76,0) 100%);
}
.zg-teil {
  position: relative; z-index: 1;
  display: grid; justify-items: center; text-align: center; gap: var(--mp-3);
  align-content: start;
}
/* Die Bühne hat eine feste Höhe, damit die vier Zeichen trotz verschiedener
   Seitenverhältnisse auf einer Linie stehen. Der dunkle Grund dahinter
   unterbricht die Verbindungslinie genau dort, wo das Zeichen sitzt — so
   wirkt sie durchgezogen und läuft nicht durch das Bild. */
.zg-teil-buehne {
  display: grid; place-items: center;
  height: 156px; padding: 0 var(--mp-4);
  /* Ein weicher Ausschnitt in der Verbindungslinie, kein harter Kreis: die
     Linie laeuft optisch weiter, beruehrt das Zeichen aber nicht. */
  background: radial-gradient(closest-side,
              var(--nacht-tief, #0A0A0F) 62%, rgba(10,10,15,0) 100%);
}
.zg-teil-buehne > * { max-width: 100%; }
/* Das eine neu gezeichnete Zeichen braucht seine Masse selbst — die drei
   vorhandenen Animationen bringen ihre eigene Breitenregel mit. */
.zg-himmel {
  display: block; width: 100%; max-width: 168px; height: auto;
  color: var(--gold, #C9A84C);
}
.zg-himmel-stern { fill: #F6DFA8; stroke: none; }
.zg-himmel-hof { stroke: currentColor; fill: none; }
.zg-teil .mp-saeule-nr { margin: var(--mp-2) 0 0; }
.zg-teil h3 { margin: 0; }
.zg-teil > p:last-child {
  margin: 0; max-width: 34ch;
  font-size: var(--mp-text); line-height: 1.65; color: var(--slate, #B6AC99);
}

@media (min-width: 760px) {
  .zg-teile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mp-7) var(--mp-6); }
}
@media (min-width: 1080px) {
  .zg-teile { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mp-6) var(--mp-5); }
  /* Am Rechner läuft die Linie waagerecht auf Höhe der Bühnen. */
  .zg-teile::before {
    left: 6%; right: 6%; width: auto; top: 78px; bottom: auto; height: 1px;
    transform: none;
    background: linear-gradient(to right,
      rgba(201,168,76,0) 0%, rgba(201,168,76,0.30) 10%,
      rgba(201,168,76,0.30) 90%, rgba(201,168,76,0) 100%);
  }
}

/* Die Zeichen der Universums-Kacheln · 10.09.2026 */
.zg-uni-zeichen {
  display: block; width: 64px; height: 64px;
  margin: 0 0 var(--mp-3);
  color: var(--gold, #C9A84C);
}
.zg-uni-zeichen svg { width: 100%; height: 100%; display: block; }
.mp-uni:hover .zg-uni-zeichen,
.mp-uni:focus-visible .zg-uni-zeichen { color: var(--gold-hell, #E8D5A3); }
@media (prefers-reduced-motion: no-preference) {
  .zg-uni-zeichen { transition: color .35s ease; }
}

/* Der Abschluss · 10.09.2026. Die zweite Hälfte des Satzes trägt das Gold —
   dort steht die Aussage, nicht in der Verneinung davor. */
.mp-final-gold { color: var(--gold-hell, #E8D5A3); }
.mp-final .mp-h2 { text-wrap: balance; }

/* 10.09.2026 · Der Artikel-Link unter dem Content-Hub war 19 px hoch und damit
   kein Tippziel. Aufgefallen ist er erst, seit der Abschnitt überhaupt
   erscheint: der Pfad zu den Artikel-Daten war eine Ebene daneben, deshalb war
   „Zum Weiterlesen" nie auf der Seite. Er steht auf einer eigenen Zeile, also
   darf er wachsen, ohne den Fließtext auseinanderzuziehen. */
#lesen .mp-fuss a {
  display: inline-block; min-height: 44px; line-height: 20px; padding: 12px 6px;
}

/* 17.09.2026 · Das Zeitgeist-Universum steht NACH dem Abschluss und ist
   Entdeckung, kein zweiter Verkaufsblock. Etwas ruhiger, etwas kleiner. */
.mp-abschnitt--sekundaer{opacity:.92;padding-top:clamp(36px,5vw,64px)}
.mp-abschnitt--sekundaer .mp-h3{font-size:clamp(22px,2.4vw,30px)}

/* 17.09.2026 · Das Buch ist jetzt ein Link auf den echten Abdruck. Ohne diese
   Zeile unterstreicht der Browser jede Zeile darin, und das Buch sieht kaputt aus. */
a.mp-buch, a.mp-buch * { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   17.09.2026 · DAS HÖRBUCH und DER THERAPIE-VERGLEICH
   Beides kommt aus der Fassung, die im April die meisten Abdrücke verkauft hat.
   ═══════════════════════════════════════════════════════════════════════════ */

.mp-vergleich {
  max-width: 54ch; margin: 0 auto 26px;
  font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem); line-height: 1.55;
  color: var(--mp-text-leise, #B9B4AA);
}
.mp-vergleich span { display: block; margin-top: 6px; color: var(--gold, #C9A84C); }

.mp-hoerbuch-punkte {
  list-style: none; margin: 30px 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(201,168,76,0.22);
  border-bottom: 1px solid rgba(201,168,76,0.22);
}
.mp-hoerbuch-punkte li {
  padding: 18px 16px; text-align: center;
  border-left: 1px solid rgba(201,168,76,0.16);
}
.mp-hoerbuch-punkte li:first-child { border-left: 0; }
.mp-hoerbuch-punkte b {
  display: block; font-family: var(--sans, sans-serif);
  font-size: 1.02rem; font-weight: 600; color: var(--mp-text, #F0E6D3);
}
.mp-hoerbuch-punkte span {
  display: block; margin-top: 4px; font-size: 0.9rem;
  color: var(--mp-text-leise, #B9B4AA);
}
@media (max-width: 700px) {
  .mp-hoerbuch-punkte { grid-template-columns: 1fr; }
  .mp-hoerbuch-punkte li { border-left: 0; border-top: 1px solid rgba(201,168,76,0.16); }
  .mp-hoerbuch-punkte li:first-child { border-top: 0; }
}

/* Der Abspieler. Derselbe Gedanke wie „Hör mir kurz zu" im April: ein goldener
   Kreis, ein Dreieck, ein Satz daneben. Nichts weiter. */
.mp-hoerprobe {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 26px; padding: 16px 20px;
  border: 1px solid rgba(201,168,76,0.32); border-radius: 14px;
  background: rgba(201,168,76,0.06);
}
.mp-hoerprobe-knopf {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--gold, #C9A84C); background: rgba(201,168,76,0.12);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.mp-hoerprobe-knopf:hover { background: rgba(201,168,76,0.22); transform: scale(1.05); }
.mp-hoerprobe-knopf:focus-visible { outline: 2px solid var(--gold, #C9A84C); outline-offset: 3px; }
/* Dreieck im Ruhezustand, zwei Balken beim Laufen — ohne Schriftzeichen. */
.mp-hoerprobe-zeichen {
  width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid var(--gold, #C9A84C);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.mp-hoerprobe-knopf.laeuft .mp-hoerprobe-zeichen {
  width: 14px; height: 16px; margin-left: 0; border: 0;
  border-left: 5px solid var(--gold, #C9A84C);
  border-right: 5px solid var(--gold, #C9A84C);
}
.mp-hoerprobe-text b {
  display: block; font-size: 1.02rem; font-weight: 600; color: var(--gold, #C9A84C);
}
.mp-hoerprobe-text span { display: block; font-size: 0.9rem; color: var(--mp-text-leise, #B9B4AA); }
.mp-fliess--leise { font-size: 0.95rem; color: var(--mp-text-leise, #B9B4AA); }

/* 17.09.2026 · Der zweite, stille Weg im Hero — wie im Juli unter dem Kaufknopf.
   Ein Textlink, kein zweiter Knopf: er darf den einen Knopf nicht schwächen. */
.mp-hero-zweiterweg { margin: 14px 0 0; }
.mp-hero-zweiterweg a {
  display: inline-block; min-height: 44px; line-height: 44px;
  font-family: var(--sans, sans-serif); font-size: 1rem; font-weight: 600;
  color: var(--gold, #C9A84C); text-decoration: none;
  border-bottom: 1px solid rgba(201,168,76,0.45);
}
.mp-hero-zweiterweg a:hover { border-bottom-color: var(--gold, #C9A84C); }
.mp-hero-zweiterweg a:focus-visible { outline: 2px solid var(--gold, #C9A84C); outline-offset: 3px; }
@media (max-width: 900px) { .mp-hero--start .mp-hero-zweiterweg { order: 8; } }