/* =========================================================================
   Pacos Traumreisen – Gestaltung
   =========================================================================
   Vorlage: assets/referenzen/referenz-desktop.png und referenz-handy.png

   GRUNDREGEL, die nie gebrochen wird:
   Die ganze Seite ist EIN durchgehender Nachthimmel. Es gibt nirgends einen
   weißen Bereich, keine graue Standardkarte, keine sterile Kachel. Auch
   Preisboxen, Formulare und die Fußzeile liegen im Himmel.

   Handy und Rechner sind getrennt gestaltet, nicht zusammengeschoben.
   ========================================================================= */

:root {
  /* Farben – kommen aus daten/marke.json und werden hier gespiegelt */
  --nacht-tief:   #0b1046;
  --nacht:        #141c5e;
  --nacht-hoch:   #1d2878;
  --indigo:       #2536a8;
  --violett:      #6f52e0;
  --lila:         #b08cff;
  --rosa:         #ff9ad9;
  --rosa-hell:    #ffc2e8;
  --stern:        #ffd873;
  --schrift:      #eef2ff;
  /* ⚠ Diese beiden Töne wurden nach einer Kontrastmessung über dem neuen
     Hintergrundbild aufgehellt. Vorher: #b9c4f0 / #8e9bd4 – kleine Texte
     erreichten damit stellenweise nur 2,7:1 statt der nötigen 4,5:1. */
  --schrift-leise:#d2dafb;
  --schrift-zart: #b3bde9;

  --karte:        rgba(22, 35, 122, 0.82);
  --karte-hell:   rgba(66, 86, 190, 0.56);
  --karte-rand:   rgba(178, 196, 255, 0.34);
  --karte-rand-hell: rgba(190, 205, 255, 0.45);

  --r-l: 26px;
  --r-m: 20px;
  --r-s: 14px;

  --schatten:      0 2px 6px rgba(4, 8, 40, .30), 0 22px 48px -22px rgba(4, 8, 40, .80);
  --schatten-tief: 0 4px 12px rgba(4, 8, 40, .40), 0 34px 70px -28px rgba(4, 8, 40, .95);
  --leuchten:      0 0 32px rgba(176, 140, 255, .40);

  --breite: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

/* ⚠ WICHTIG: Das eingeschobene Handy-Menü steht rechts NEBEN der Seite
   (transform: translateX(100%)). Ohne diese Zeilen macht es die Seite
   breiter als den Bildschirm und man kann seitlich scrollen – gemessen:
   710 px statt 390 px. `clip` schneidet ab, ohne einen Scrollbereich
   zu erzeugen; `hidden` allein reicht dafür nicht. */
html, body { overflow-x: clip; }

/* ⚠ Grundfarbe auf html – ein Blau AUS dem Hintergrundbild.
   Sie ist das Letzte, was sichtbar wäre: beim Überziehen am Rand,
   solange das Bild lädt, oder wenn Bilder abgeschaltet sind.
   Deshalb nie Schwarz und nie Weiß. */
html { background-color: #1b2a86; }

body {
  min-height: 100vh;
  min-height: 100svh;
  color: var(--schrift);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* ⚠ WICHTIG: body muss durchsichtig bleiben.
     Ein farbiger body-Hintergrund wird NACH den Ebenen mit negativem
     z-index gemalt und würde die Traumwelt komplett verdecken.
     Die Grundfarbe steht deshalb oben auf html. */
  background: transparent;
}

/* =========================================================================
   DIE TRAUMWELT – globaler Hintergrund ALLER Seiten
   =========================================================================
   Warum eine feste Ebene und kein Hintergrundbild auf body?

   1. Eine lange Seite (z. B. Geschichten mit vielen Karten) ist mehrere
      Bildschirmhöhen hoch. Ein mitscrollendes Bild wäre irgendwann zu Ende –
      darunter käme eine leere Fläche. Genau das soll nie passieren.
   2. `background-attachment: fixed` auf body wäre die naheliegende Lösung,
      funktioniert aber auf iPhones nicht zuverlässig und ruckelt.
   3. Diese Ebene liegt fest im Sichtfenster, deckt es immer vollständig ab
      und geht deshalb nie aus – egal wie lang die Seite ist.

   Das Bild wird nicht gekachelt und nicht verzerrt: `cover` füllt die
   Fläche, der Ausschnitt wird beschnitten, die Seitenverhältnisse bleiben.
   ========================================================================= */
.himmel {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #1b2a86;
  background-image: image-set(
    url("../bilder/hintergrund/traumwelt-quer.avif") type("image/avif"),
    url("../bilder/hintergrund/traumwelt-quer.webp") type("image/webp"));
  background-image: -webkit-image-set(
    url("../bilder/hintergrund/traumwelt-quer.avif") type("image/avif"),
    url("../bilder/hintergrund/traumwelt-quer.webp") type("image/webp"));
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
}

/* =========================================================================
   DIE BEWEGTE TRAUMWELT
   =========================================================================
   Das Video liegt auf derselben Ebene wie das Standbild, steht im Quelltext
   aber danach – dadurch deckt es das Bild ab, sobald es läuft.

   Es startet unsichtbar (opacity 0) und wird erst eingeblendet, wenn es
   wirklich Bilder liefert. Zwei Dinge sind damit ausgeschlossen:
   ein schwarzer erster Frame und eine leere Fläche, falls der Browser
   Autoplay verbietet. In beiden Fällen bleibt einfach das Standbild stehen.
   ========================================================================= */
.himmel-film {
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;              /* füllt die Fläche, verzerrt nicht */
  object-position: center 42%;
  pointer-events: none;           /* kein Klick nötig, kein Klick möglich */
  opacity: 0;
  transition: opacity 1s ease;
  border: 0; outline: 0;
  background: transparent;
}
.himmel-film.laeuft { opacity: 1; }
/* Keine Bedienelemente, keine Videoleiste – auf keinem Gerät. */
.himmel-film::-webkit-media-controls,
.himmel-film::-webkit-media-controls-enclosure,
.himmel-film::-webkit-media-controls-panel,
.himmel-film::-webkit-media-controls-start-playback-button { display: none !important; }
.himmel-film::-moz-media-controls { display: none !important; }

/* Leseschleier: oben fast durchsichtig, damit Mond und Sterne strahlen –
   unten kräftiger, weil dort die hellen Wolken liegen und Text sonst
   darauf verschwimmt. Das Bild selbst wird NICHT flächig abgedunkelt. */
.himmel-schleier {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 18% 22%, rgba(14, 22, 78, .34) 0%, rgba(14, 22, 78, 0) 70%),
    linear-gradient(180deg,
      rgba(10, 16, 64, .18) 0%,
      rgba(10, 16, 64, .10) 26%,
      rgba(12, 20, 78, .30) 58%,
      rgba(14, 22, 86, .56) 82%,
      rgba(16, 24, 92, .68) 100%);
}

/* Ein sehr feines Funkeln über dem Bild – die Sterne im Bild stehen still,
   diese hier atmen leicht. Bewusst dezent. */

/* ---------- Sterne: reines CSS, kostet keine Ladezeit ---------- */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* hinter allem Inhalt, aber über dem Bild */
  z-index: -1;
}
body::before {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.4px 1.4px at 28% 9%,  rgba(255,232,180,.90), transparent),
    radial-gradient(1.2px 1.2px at 44% 23%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.8px 1.8px at 62% 7%,  rgba(255,255,255,.95), transparent),
    radial-gradient(1.3px 1.3px at 78% 19%, rgba(210,225,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 90% 11%, rgba(255,232,180,.90), transparent),
    radial-gradient(1.2px 1.2px at 8% 42%,  rgba(255,255,255,.70), transparent),
    radial-gradient(1.6px 1.6px at 34% 52%, rgba(255,255,255,.80), transparent),
    radial-gradient(1.3px 1.3px at 57% 38%, rgba(255,232,180,.75), transparent),
    radial-gradient(1.4px 1.4px at 84% 47%, rgba(255,255,255,.80), transparent),
    radial-gradient(1.2px 1.2px at 19% 71%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 48% 83%, rgba(210,225,255,.70), transparent),
    radial-gradient(1.3px 1.3px at 72% 66%, rgba(255,255,255,.72), transparent),
    radial-gradient(1.6px 1.6px at 94% 78%, rgba(255,232,180,.80), transparent);
  opacity: .4;
  animation: funkeln 5.5s ease-in-out infinite alternate;
}
body::after {
  background-image:
    radial-gradient(2.4px 2.4px at 22% 30%, rgba(255,216,115,.85), transparent),
    radial-gradient(2.2px 2.2px at 68% 24%, rgba(255,216,115,.70), transparent),
    radial-gradient(2.6px 2.6px at 86% 58%, rgba(255,216,115,.75), transparent),
    radial-gradient(2.2px 2.2px at 14% 88%, rgba(255,216,115,.65), transparent);
  opacity: .45;
  animation: funkeln 7s ease-in-out infinite alternate-reverse;
}
@keyframes funkeln { from { opacity: .18; } to { opacity: .55; } }

/* ⚠ Der früher hier gezeichnete CSS-Mond ist entfallen.
   Das Hintergrundbild bringt einen echten Mond mit – zwei Monde am
   selben Himmel sahen falsch aus. */

/* ⚠ Die früheren geblurrten Farbblasen sind entfallen.
   Das Hintergrundbild bringt echte Wolken mit; die Blasen darüber
   machten den Himmel nur matschig. */

/* Alles Sichtbare liegt über dem Himmel */
.seite { position: relative; z-index: 1; }

/* =========================================================================
   Kopfzeile
   ========================================================================= */
/* ⚠ Der Kopfbereich hat KEINE eigene Hintergrundfarbe und KEINE Trennlinie.
   Beides erzeugte eine sichtbare waagerechte Kante quer durch die Traumwelt.
   Farbe, Unschärfe und Auslauf liegen stattdessen in .kopf::before – diese
   Ebene wird nach unten weich ausgeblendet, die Schrift darüber nicht. */
.kopf {
  position: sticky; top: 0; z-index: 40;
  background: none;
  border-bottom: 0;
}
.kopf::before {
  content: ""; position: absolute; inset: 0 0 -34px 0; z-index: -1;
  pointer-events: none;
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  background: linear-gradient(180deg,
    rgba(13, 20, 78, .84) 0%, rgba(13, 20, 78, .70) 52%, rgba(13, 20, 78, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.45) 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.45) 76%, transparent 100%);
}
.kopf-innen {
  max-width: var(--breite); margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center; gap: 22px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.logo img { height: 72px; width: auto; display: block; filter: drop-shadow(0 6px 16px rgba(4, 8, 40, .55)); }
/* ⚠ Der Markenname steht NICHT als Text neben dem Logo.
   Ein Versuch damit machte die Kopfleiste rund 80 px breiter – der Knopf
   „Geschichte erstellen" wurde rechts abgeschnitten. Das runde Abzeichen
   ist stattdessen groß genug, dass man den Schriftzug darin lesen kann. */
.logo span { display: none; }

.hauptnav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.hauptnav a {
  padding: 9px 12px; border-radius: 999px;
  color: var(--schrift-leise); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  transition: color .18s ease, background .18s ease;
  white-space: nowrap;
}
.hauptnav a:hover { color: #fff; background: rgba(158, 178, 255, .14); }
.hauptnav a.aktiv { color: #fff; background: rgba(158, 178, 255, .20); }

.kopf-aktionen { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.menue-knopf {
  display: none; width: 46px; height: 46px; border: 0; cursor: pointer;
  border-radius: 14px; background: rgba(158, 178, 255, .16); color: var(--schrift);
  align-items: center; justify-content: center;
}
.menue-knopf svg { width: 24px; height: 24px; }

/* =========================================================================
   Knöpfe
   ========================================================================= */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  font-family: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
}
.knopf svg { width: 18px; height: 18px; }
.knopf:active { transform: scale(.975); }
.knopf.haupt {
  background: linear-gradient(135deg, #ffb3e4 0%, #ff8fd4 52%, #f472c8 100%);
  color: #3d0f31;
  box-shadow: 0 10px 30px -10px rgba(255, 143, 212, .70), inset 0 1px 0 rgba(255,255,255,.55);
}
.knopf.haupt:hover { box-shadow: 0 14px 40px -10px rgba(255, 143, 212, .85); }
.knopf.zweit {
  background: rgba(38, 54, 150, .48); color: var(--schrift);
  border-color: rgba(178, 196, 255, .40);
  backdrop-filter: blur(8px);
}
.knopf.zweit:hover { background: rgba(58, 78, 190, .58); border-color: rgba(200, 214, 255, .60); }
.knopf.klein { min-height: 42px; padding: 0 20px; font-size: 14px; }
.knopf.voll { width: 100%; }

/* =========================================================================
   Textbausteine
   ========================================================================= */
.inhalt { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { margin: 0; letter-spacing: -.028em; line-height: 1.1; }
h1 { font-size: 54px; font-weight: 800; text-shadow: 0 2px 18px rgba(6, 10, 44, .55); }
h2 { font-size: 36px; font-weight: 800; text-shadow: 0 2px 14px rgba(6, 10, 44, .50); }
h3 { font-size: 20px; font-weight: 700; }
p  { margin: 0; line-height: 1.6; color: var(--schrift-leise); }
/* Freistehende Absätze (nicht in einer Karte) liegen direkt auf dem Himmel. */
.abschnitt-kopf p, .hero .unter, .versprechen-reihe div { text-shadow: 0 1px 10px rgba(6, 10, 44, .60); }
a  { color: var(--rosa-hell); }

.rosa { color: var(--rosa); }
/* Im Startbereich sind NUR Weiß, Gold und Gelb als Schriftfarben erlaubt.
   Kein Pink, kein Lavendel, kein Lila. Das Gold ist der Sternton aus dem
   Hintergrundbild und aus dem Logo. */
.gold { color: #ffd77a; }
.lila { color: var(--lila); }
.gelb { color: var(--stern); }

/* Ohne Kopfleiste beginnt der Inhalt direkt am oberen Bildschirmrand.
   Der erste Abschnitt einer Seite bekommt deshalb zusätzlich Luft – auf dem
   Handy einschließlich des Platzes für Statusleiste und Kamera-Aussparung. */
.abschnitt { padding: 68px 0; }
main > .abschnitt:first-child { padding-top: calc(64px + env(safe-area-inset-top)); }
/* Seitenüberschriften stehen frei auf der Traumwelt. Auf schmalen
   Bildschirmen landet dort oft der helle Mond – dann verschwimmt der Text.
   Diese weiche, nach außen auslaufende Fläche liegt NUR hinter der
   Überschrift. Der Hintergrund selbst bleibt unangetastet. */
.abschnitt-kopf { position: relative; max-width: 720px; margin-bottom: 34px; }
.abschnitt-kopf::before {
  content: ""; position: absolute; inset: -40px -90px -34px -72px;
  z-index: -1; pointer-events: none;
  /* ⚠ Die Maße sind ausgerechnet, nicht geschätzt: Die Ellipse hat 50 % der
     Kastenhöhe und sitzt bei 42 % der Breite. Damit liegt JEDE Kante des
     Kastens außerhalb des letzten Farbstopps (84 %) – der Verlauf endet
     überall bei null. Vorher war er am Rand noch sichtbar und erzeugte eine
     waagerechte Kante quer über den Himmel. */
  background: radial-gradient(ellipse 50% 50% at 42% 50%,
    rgba(8, 13, 54, .72) 0%, rgba(8, 13, 54, .46) 44%, rgba(8, 13, 54, 0) 84%);
}
.abschnitt-kopf h2 { margin-bottom: 12px; }
.abschnitt-kopf p { font-size: 17px; }

/* Handschrift-Notizen wie in der Vorlage */
.handschrift {
  font-family: "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive;
  color: rgba(226, 232, 255, .78);
  transform: rotate(-4deg);
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* =========================================================================
   Kopfbereich der Startseite
   ========================================================================= */
.hero { padding: 54px 0 26px; position: relative; }

/* =========================================================================
   Der ruhige Startbereich der Startseite
   =========================================================================
   Absicht: Wer die Seite öffnet, soll zuerst Paco und die Traumwelt sehen –
   nicht einen Shop. Deshalb liegen hier KEINE Knöpfe, KEINE Preise und
   KEINE Produktkarten. Die kommen erst im Abschnitt darunter.
   ========================================================================= */
/* Der erste Bildschirm gehört allein Paco: Der Bereich ist so hoch wie das
   sichtbare Fenster (abzüglich Kopfleiste). Produktkarten und Preise
   beginnen dadurch garantiert erst unterhalb – man muss scrollen. */
/* Kein Kopfbereich mehr: der Startbereich beginnt ganz oben am Fenster.
   Etwas Luft nach oben, damit Paco nicht am Rand klebt. */
.hero.hero-ruhig {
  padding: 46px 0 56px;
  min-height: calc(100svh - 120px);
  display: flex; align-items: center;
}
/* Enger zusammengezogen: Überschrift und Paco standen auf 1240 px weit
   auseinander, dazwischen war nur leerer Himmel. */
.hero.hero-ruhig > .inhalt { max-width: 1080px; }
/* Im Startbereich ist jeder Text weiß – nur „Paco" ist gold. */
.hero.hero-ruhig h1 { color: #fff; }
.hero.hero-ruhig .unter { color: rgba(255, 255, 255, .93); }
.hero.hero-ruhig > .inhalt { width: 100%; }
.hero.hero-ruhig .hero-raster { grid-template-columns: 1.04fr .96fr; gap: 22px; }
.hero.hero-ruhig .hero-bild img { max-width: 640px; }
.hero.hero-ruhig h1 { font-size: 48px; line-height: 1.14; margin-bottom: 18px; }
.hero.hero-ruhig .unter { font-size: 18.5px; max-width: 520px; margin-bottom: 0; line-height: 1.62; }
.hero-raster {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 30px; align-items: center;
}
.hero h1 { font-size: 58px; margin-bottom: 18px; }
.hero .unter { font-size: 18px; max-width: 480px; margin-bottom: 26px; }
.hero-knoepfe { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }

/* ⚠ Paco ist jetzt freigestellt (durchsichtiger Hintergrund).
   Früher lag hier ein rechteckiger Bildausschnitt mit eigenem Nachthimmel –
   auf dem Handy sah man deutlich die Kante, wo das zweite Bild anfing.
   Deshalb KEINE Maske mehr: Paco sitzt direkt in der Traumwelt.
   Wird Paco später ausgetauscht, muss das Bild wieder freigestellt sein. */
.hero-bild { position: relative; display: flex; justify-content: center; }
.hero-bild img {
  width: 100%; max-width: 460px; height: auto; display: block;
  /* Weicher Schein nach unten, damit er auf dem Himmel nicht aufgeklebt wirkt */
  filter: drop-shadow(0 18px 34px rgba(6, 10, 44, .55));
}
/* Sanftes Mondlicht hinter Paco – liegt hinter dem Bild, nicht darüber. */
.hero-bild::after {
  content: ""; position: absolute; inset: 6% 10% 14%;
  border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(160,132,255,.38) 0%, rgba(160,132,255,0) 70%);
  filter: blur(34px);
}

.versprechen-reihe { display: flex; gap: 26px; flex-wrap: wrap; }
.versprechen-reihe div { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--schrift-leise); }
.versprechen-reihe svg { width: 17px; height: 17px; color: var(--lila); flex: 0 0 17px; }

/* ⚠ Die Regeln für die sechs kleinen Kategorie-Karten der Startseite
   (.karten-abschnitt, .karten-reihe, .karte) sind am 23.09.2026 mit den
   Karten selbst entfernt worden. Nicht verwechseln mit .kar-karte (die
   großen Karussell-Karten) und .probe-karte (die Hörproben). */

/* =========================================================================
   Allgemeine Glaskarte (Produkte, Formulare, Texte)
   ========================================================================= */
.glas {
  /* Etwas dichter als früher: die Karten liegen jetzt teilweise über den
     hellen Wolken des Hintergrundbildes und müssen dort tragen. */
  background: linear-gradient(160deg, rgba(36, 54, 156, .82) 0%, rgba(15, 25, 96, .89) 100%);
  border: 1px solid var(--karte-rand);
  border-radius: var(--r-l);
  box-shadow: var(--schatten);
  padding: 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.glas.hell { background: linear-gradient(160deg, rgba(92, 74, 208, .82) 0%, rgba(36, 42, 142, .90) 100%); }

.raster-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* ⚠ „display: grid" ist staerker als das eingebaute display:none von
   [hidden]. Ohne diese Zeile blieben ausgeblendete Zweispalter sichtbar –
   im Mitträumer-Bereich standen Fantasietier und Farbe schon da, bevor
   überhaupt eine Rolle gewählt war. */
.raster-2[hidden] { display: none; }
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.raster-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* Produktkachel */
.produkt { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.produkt img { width: 100%; height: 150px; object-fit: cover; display: block; }
.produkt .body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.produkt h3 { margin-bottom: 6px; }
.produkt .kurz { font-size: 13.5px; margin-bottom: 14px; }
.produkt ul { margin: 0 0 18px; padding: 0; list-style: none; }
.produkt li {
  position: relative; padding-left: 22px; margin-bottom: 7px;
  font-size: 13.5px; line-height: 1.45; color: var(--schrift-leise);
}
.produkt li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 11px; height: 6px; border-left: 2px solid var(--rosa); border-bottom: 2px solid var(--rosa);
  transform: rotate(-45deg);
}
/* ⚠ Heißt bewusst NICHT „fuss".
   Vorher hatte der untere Teil einer Produktkarte dieselbe Klasse wie die
   Seitenfußzeile – und erbte deren dunklen Leseschleier. In jeder Karte lag
   dadurch ein hartes dunkles Rechteck hinter Preis und Knopf. */
/* ⚠ Heißt bewusst NICHT „fuss" – siehe Kommentar weiter unten. */
.produkt .karten-fuss { margin-top: auto; }

/* =========================================================================
   Farbwelt der Produktkarten: Weiss, Rosa, Gold
   =========================================================================
   Weiss = Fliesstext, Rosa = das Persoenliche, Gold = Werte und Zeiten.
   Bewusst sparsam: nur Titel, Preis, Zeitangabe und wenige Schluesselwoerter.
   ========================================================================= */
/* Ein kleines goldenes Funkeln direkt hinter dem Titel – nicht an den
   rechten Rand geschoben, sondern im Textfluss. */
.produkt h3::after {
  content: "\2726"; margin-left: 10px;
  font-size: .62em; color: #ffd77a; vertical-align: .35em;
  text-shadow: 0 0 14px rgba(255, 205, 100, .9);
}
.produkt h3 .strich { color: var(--schrift-leise); font-weight: 600; }
.produkt .preis b {
  color: #ffd77a;
  text-shadow: 0 2px 20px rgba(255, 200, 96, .4);
}
/* Zeitangabe als goldene Kapsel mit Uhr. */
.chip.gold-chip {
  background: rgba(12, 18, 66, .62);
  border-color: rgba(255, 216, 130, .45);
  color: #ffd77a;
}
.chip.gold-chip svg { width: 13px; height: 13px; }

/* Der Knopf der Produktkarte traegt einen warmen Rosa-Gold-Schimmer. */
.produkt .knopf.zweit {
  border-color: rgba(255, 170, 224, .55);
  box-shadow: 0 0 26px -10px rgba(255, 154, 217, .75);
}
.produkt .knopf.zweit:hover {
  border-color: rgba(255, 205, 120, .7);
  box-shadow: 0 0 30px -8px rgba(255, 205, 120, .8);
}
.produkt .knopf.zweit::before {
  content: "\2726"; margin-right: 2px; font-size: 12px; color: #ffd77a;
}
.preis { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.preis b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.preis .alt { font-size: 15px; color: var(--schrift-zart); text-decoration: line-through; }
.preis .zeit { font-size: 14px; color: var(--schrift); }

.marke-oben {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(135deg, #ffb3e4, #f472c8); color: #3d0f31;
  box-shadow: 0 6px 18px -6px rgba(255,143,212,.8);
}
.produkt { position: relative; }

.chip svg, .preis-karte .band svg, .versprechen-reihe svg, .knopf svg {
  flex: 0 0 auto;
}
.chip svg { width: 13px; height: 13px; }
.preis-karte .band svg { width: 13px; height: 13px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: rgba(12, 18, 66, .58); border: 1px solid rgba(158, 178, 255, .30);
  color: var(--schrift-leise);
}
.chip.rosa { background: rgba(14, 18, 68, .58); border-color: rgba(255,154,217,.42); color: #ffd0ee; }
.chip.gelb { background: rgba(12, 18, 66, .62); border-color: rgba(255,216,115,.46); color: #ffe6a8; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Diese Zeile steht frei auf dem Hintergrundbild, dort liegen helle Wolken.
   Sie bekommt deshalb eine eigene, sehr dezente dunkle Fläche – nicht der
   ganze Hintergrund wird abgedunkelt, nur genau diese Stelle. */
/* Frei stehender Fließtext direkt auf der Traumwelt. Der weiche dunkle
   Fleck dahinter entsteht aus einer Fläche mit Weichzeichner – dadurch hat
   er keine Kante und wirkt wie ein Schatten. Das Video bleibt sichtbar. */
.leseflaeche { position: relative; }
.leseflaeche::before {
  content: ""; position: absolute; inset: -24px -32px;
  z-index: -1; pointer-events: none;
  border-radius: 30px;
  background: rgba(9, 14, 58, .62);
  filter: blur(20px);
}

.hinweis-zeile { margin-top: 20px; text-align: center; }
.hinweis-zeile span {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  background: rgba(10, 16, 62, .52);
  border: 1px solid rgba(158, 178, 255, .16);
  font-size: 12.5px; color: var(--schrift-leise);
}

/* =========================================================================
   Preistafel (Abos)
   ========================================================================= */
.preis-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; padding-top: 16px; }
/* Die Abo-Karten liegen auf dem Handy genau über dem hellen Wolkenband des
   Videos. Sie sind deshalb etwas dichter als die übrigen Karten – gemessen,
   nicht geschätzt: vorher 3,76:1, nötig sind 4,5:1. */
.preis-karte {
  position: relative; text-align: left; padding: 30px 26px;
  background: linear-gradient(160deg, rgba(30, 46, 140, .92) 0%, rgba(12, 21, 88, .95) 100%);
}
.preis-karte.top {
  border-color: rgba(255, 154, 217, .55);
  /* Diese Karte liegt auf dem Handy über dem hellen Wolkenband des Videos.
     Gemessen waren es nur 3,76:1 statt der nötigen 4,5:1 – deshalb dichter. */
  background: linear-gradient(160deg, rgba(96, 72, 214, .90) 0%, rgba(38, 40, 150, .94) 100%);
  box-shadow: var(--schatten-tief), 0 0 44px -14px rgba(255, 154, 217, .55);
}
.preis-karte .band {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, #ffb3e4, #f472c8); color: #3d0f31;
  box-shadow: 0 8px 22px -8px rgba(255,143,212,.9);
}
.preis-karte .kopfzeile { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.preis-karte .kopfzeile svg { width: 22px; height: 22px; color: var(--stern); }
.preis-karte .unter { font-size: 13px; color: var(--schrift-zart); margin-bottom: 20px; }
.preis-karte .zahl { font-size: 40px; font-weight: 800; letter-spacing: -.035em; margin: 18px 0 20px; }
.preis-karte .zahl small { font-size: 15px; font-weight: 600; color: var(--schrift); letter-spacing: 0; }
.preis-karte ul { margin: 0 0 24px; padding: 0; list-style: none; }
.preis-karte li {
  position: relative; padding-left: 24px; margin-bottom: 10px;
  font-size: 14px; line-height: 1.45;
  /* Die Abo-Karten liegen über hellen Stellen des Videos – gemessen sonst
     nur 3,75:1 statt der nötigen 4,5:1. */
  color: var(--schrift);
}
.preis-karte li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 12px; height: 7px; border-left: 2.5px solid var(--rosa); border-bottom: 2.5px solid var(--rosa);
  transform: rotate(-45deg);
}

/* =========================================================================
   Personalisierung
   ========================================================================= */
.schritt { margin-bottom: 30px; }
.schritt-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.schritt-nr {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: linear-gradient(135deg, #ffb3e4, #f472c8); color: #3d0f31;
}
.schritt-kopf h3 { font-size: 19px; }
.schritt-kopf .pflicht { font-size: 11.5px; color: var(--schrift-zart); margin-left: auto; }

.feld { margin-bottom: 18px; }
.feld label { display: block; font-size: 13.5px; font-weight: 600; color: var(--schrift-leise); margin-bottom: 7px; }
.feld input, .feld select, .feld textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 15.5px;
  color: var(--schrift); background: rgba(12, 18, 66, .60);
  border: 1px solid rgba(158, 178, 255, .30); border-radius: var(--r-s);
  padding: 14px 16px; -webkit-appearance: none; appearance: none;
}
.feld input { min-height: 54px; }
.feld textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.feld select {
  min-height: 54px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c4f0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
  padding-right: 46px;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--rosa);
  box-shadow: 0 0 0 3px rgba(255, 154, 217, .22);
  background: rgba(16, 24, 84, .75);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--schrift-zart); }
.feld .hinweis { margin-top: 7px; font-size: 12px; color: var(--schrift-zart); }

.welten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.welt {
  position: relative; cursor: pointer; border-radius: var(--r-m); overflow: hidden;
  border: 1.5px solid var(--karte-rand);
  background: linear-gradient(160deg, rgba(74, 96, 205, .30), rgba(28, 40, 124, .44));
  padding: 20px 16px; text-align: center;
  transition: transform .16s ease, border-color .18s ease, box-shadow .18s ease;
}
.welt:hover { transform: translateY(-3px); border-color: var(--karte-rand-hell); }
.welt input { position: absolute; opacity: 0; pointer-events: none; }
.welt .emoji { font-size: 32px; display: block; margin-bottom: 8px; }
.welt b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.welt small { display: block; font-size: 11.5px; color: var(--schrift-zart); line-height: 1.35; }
.welt input:checked + .inhalt-welt { color: #fff; }
.welt:has(input:checked) small { color: rgba(255, 255, 255, .93); }
.welt:has(input:checked) {
  border-color: var(--rosa);
  background: linear-gradient(160deg, rgba(255, 154, 217, .26), rgba(111, 82, 224, .40));
  box-shadow: 0 0 30px -8px rgba(255, 154, 217, .60);
}

/* =========================================================================
   Kontrollfenster „Ist alles richtig?"
   =========================================================================
   Oeffnet erst nach „Weiter zur Bestellung". Die Traumwelt bleibt dahinter
   sichtbar – deshalb kein schwarzer Vorhang, sondern ein tiefblauer mit
   Weichzeichner. Auf dem Handy fast bildschirmfuellend und scrollbar.
   ========================================================================= */
.kontrolle {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  /* ⚠ Fast kein Vorhang. Die Wolken sollen voll sichtbar bleiben.
     Dass das Formular nicht durchscheint, loest stattdessen die Regel
     weiter unten: Beim Oeffnen wird die SEITE weichgezeichnet, der
     Himmel dahinter aber nicht. */
  background: rgba(8, 14, 58, .22);
  overscroll-behavior: contain;
}
.kontrolle[hidden] { display: none; }

/* ⚠ Beim geoeffneten Fenster verschwindet die Seite weich im Hintergrund.
   Der Himmel (.himmel und .himmel-film) liegt ausserhalb von .seite und
   bleibt deshalb scharf – man sieht Wolken und Mond, nicht das Formular. */
body.fenster-offen .seite {
  filter: blur(8px);
  opacity: .28;
  transition: opacity .35s ease, filter .35s ease;
  pointer-events: none;
}
.kontrolle-innen {
  position: relative;
  width: 100%; max-width: 620px;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  padding: 34px 34px 30px;
  box-shadow: var(--schatten-tief), 0 0 70px -20px rgba(176, 140, 255, .5);
  /* Deutlich durchsichtiger als eine normale Karte: Wolken, Sterne und
     der Mond der Traumwelt sollen hindurchscheinen. Die Lesbarkeit
     kommt nicht aus einer dichten Flaeche, sondern aus den beiden
     weichen Lichtern unten und der kraeftigen Schrift darueber. */
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(120, 96, 220, .30) 0%, rgba(120, 96, 220, 0) 70%),
    radial-gradient(90% 60% at 82% -10%, rgba(255, 216, 130, .16) 0%, rgba(255, 216, 130, 0) 70%),
    linear-gradient(165deg, rgba(24, 38, 126, .42) 0%, rgba(11, 19, 82, .56) 100%);
  border: 1px solid rgba(198, 212, 255, .30);
}
/* Ein sanftes Funkeln im Fenster – dieselbe Sprache wie der Himmel. */
.kontrolle-innen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 14%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 86% 22%, rgba(255,216,130,.85), transparent),
    radial-gradient(1.2px 1.2px at 30% 68%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 74% 84%, rgba(255,194,232,.7), transparent);
  opacity: .8;
}
.kontrolle-innen > * { position: relative; }
.kontrolle-innen h2 {
  font-size: 28px; margin: 0 0 22px;
  text-shadow: 0 2px 16px rgba(6, 10, 44, .8);
}
/* Ein kleiner goldener Stern vor der Frage. */
.kontrolle-innen h2::before {
  content: "\2726"; color: #ffd77a; margin-right: 10px; font-size: .8em;
}
.kontrolle-innen dl { margin: 0; display: grid; gap: 16px; }
/* Die kleinen Kategorien wechseln zwischen Rosa und Gold.
   Die Angaben darunter bleiben weiss – so bleibt es ruhig. */
.kontrolle-innen dt {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #ffb9e4;
  text-shadow: 0 1px 12px rgba(6, 10, 44, .9);
}
.kontrolle-innen dt::before {
  content: "\2726"; color: #ffd77a; font-size: 13px;
  text-shadow: 0 0 12px rgba(255, 205, 100, .8);
}
.kontrolle-innen dt:nth-of-type(even) { color: #ffd77a; }
.kontrolle-innen dd {
  margin: 0; font-size: 16.5px; line-height: 1.45;
  color: #fff; white-space: pre-line; overflow-wrap: anywhere;
  text-shadow: 0 1px 12px rgba(6, 10, 44, .85);
}
.kontrolle-summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid rgba(178, 196, 255, .22);
}
.kontrolle-summe span {
  font-size: 16px; color: #fff;
  text-shadow: 0 1px 12px rgba(6, 10, 44, .85);
}
.kontrolle-summe b {
  font-size: 32px; font-weight: 800; letter-spacing: -.03em;
  color: #ffd77a;   /* Gold für die wichtigste Zahl */
  text-shadow: 0 2px 22px rgba(255, 200, 96, .45);
}
.kontrolle-knoepfe { display: flex; gap: 12px; margin-top: 24px; }
.kontrolle-knoepfe .knopf { flex: 1; min-height: 54px; justify-content: center; }
/* ⚠ In diesem Fenster KEIN Pink. Der Hauptknopf traegt das Gold der
   Traumwelt, so wie der Preis darueber. */
.kontrolle-knoepfe .knopf.haupt {
  position: relative;
  background: linear-gradient(135deg, #ffe7a8 0%, #ffcf6b 52%, #ffc24f 100%);
  color: #33240a; font-weight: 800;
  box-shadow: 0 12px 38px -12px rgba(255, 205, 100, .85), 0 0 0 1px rgba(255, 233, 180, .6) inset;
}
/* Zwei kleine Funken links und rechts im Knopf – wie in der Vorlage. */
.kontrolle-knoepfe .knopf.haupt::before,
.kontrolle-knoepfe .knopf.haupt::after {
  content: "\2726"; position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: rgba(255, 255, 255, .95); pointer-events: none;
}
.kontrolle-knoepfe .knopf.haupt::before { left: 20px; }
.kontrolle-knoepfe .knopf.haupt::after { right: 20px; }
.kontrolle-knoepfe .knopf.zweit {
  background: rgba(16, 26, 96, .42);
  border: 1px solid rgba(205, 218, 255, .55);
  color: #fff;
}
.kontrolle-knoepfe .knopf.haupt:hover {
  background: linear-gradient(135deg, #ffe7ab 0%, #ffd77a 100%);
}

@media (max-width: 899px) {
  .kontrolle { padding: 12px; align-items: flex-end; }
  .kontrolle-innen {
    max-width: none; padding: 26px 22px 22px;
    max-height: calc(100svh - 24px);
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .kontrolle-innen h2 { font-size: 24px; }
  .kontrolle-knoepfe { flex-direction: column-reverse; }
}

/* Beschriftung mit kleinem Zusatz daneben, z. B. „freiwillig". */
.feld-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.feld-kopf label { margin-bottom: 0; }
.nebensache { font-size: 12.5px; color: var(--schrift-leise); }

/* =========================================================================
   Personalisierungsformular – gewaehltes Produkt und Zusammenfassung
   =========================================================================
   Die Laenge wird auf der Angebotsseite gewaehlt. Hier steht sie nur noch
   als Information – bewusst KEINE Karte, KEINE Auswahl, damit niemand
   zweimal dasselbe entscheiden muss.
   ========================================================================= */
.auswahl-zeile {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin-bottom: 18px; padding: 14px 20px;
  border-radius: 999px;
  background: rgba(14, 24, 92, .58);
  border: 1px solid rgba(178, 196, 255, .24);
}
.auswahl-wort { font-size: 12.5px; color: var(--schrift-leise); }
.auswahl-zeile b { font-size: 15.5px; }
.auswahl-preis { font-size: 15.5px; font-weight: 700; color: var(--stern); }
.auswahl-aendern {
  margin-left: auto; font-size: 13px; font-weight: 600;
  color: var(--schrift-leise); text-decoration: underline;
  text-underline-offset: 3px;
}
.auswahl-aendern:hover { color: var(--schrift); }

.zusammenfassung {
  margin: 26px 0 22px; padding: 22px 24px;
  border-radius: var(--r-m);
  background: rgba(14, 24, 92, .50);
  border: 1px solid rgba(178, 196, 255, .22);
}
.zusammenfassung h3 { font-size: 16px; margin: 0 0 14px; }
.zusammenfassung dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: 8px 18px; font-size: 14px;
}
.zusammenfassung dt { color: var(--schrift-leise); white-space: nowrap; }
.zusammenfassung dd { margin: 0; overflow-wrap: anywhere; }
.zusammenfassung .summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(178, 196, 255, .18);
}
.zusammenfassung .summe span { font-size: 14px; color: var(--schrift-leise); }
.zusammenfassung .summe b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }

@media (max-width: 899px) {
  .auswahl-zeile { border-radius: var(--r-m); }
  .auswahl-aendern { margin-left: 0; }
  .zusammenfassung dl { grid-template-columns: 1fr; gap: 2px; }
  .zusammenfassung dd { margin-bottom: 10px; }
}

/* =========================================================================
   Personalisierungsformular – aufklappbare Teile
   =========================================================================
   Eigene Traumwelt, eigenes Thema und die Personenzeilen sollen sich weich
   oeffnen, nicht hart aufspringen. Kein neues Rosa – dieselbe dunkelblaue,
   leicht durchsichtige Sprache wie der Rest des Formulars.
   ========================================================================= */
.aufklapp {
  margin-top: 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  transition: opacity .35s ease, transform .35s ease, max-height .35s ease;
}
.aufklapp.offen { opacity: 1; transform: none; max-height: 340px; }

.person-zeile {
  position: relative;
  margin-bottom: 14px; padding: 18px 18px 14px;
  border-radius: var(--r-m);
  border: 1px solid rgba(178, 196, 255, .22);
  background: rgba(14, 24, 92, .46);
}
.person-zeile .feld { margin-bottom: 0; }
.person-zeile .raster-2 { gap: 14px; }
.person-zeile .raster-2 > .feld + .feld { margin-top: 0; }
.person-weg {
  margin-top: 12px; padding: 7px 14px;
  border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(178, 196, 255, .28);
  background: transparent; color: var(--schrift-leise);
  font: inherit; font-size: 12.5px; font-weight: 600;
  transition: color .18s ease, border-color .18s ease;
}
.person-weg:hover { color: var(--schrift); border-color: rgba(178, 196, 255, .5); }

/* Kennzeichnet freiwillige Angaben – ruhig, nicht als Warnung. */
.freiwillig {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  /* Gemessen: mit --schrift-leise nur 4,28:1 statt der noetigen 4,5:1. */
  color: var(--schrift);
  background: rgba(14, 22, 78, .55);
  border: 1px solid rgba(158, 178, 255, .26);
}

/* Geburtstag: zwei Auswahllisten nebeneinander, Tag und Monat.
   Ein echtes Datumsfeld wuerde immer auch ein Jahr verlangen – das wollen
   wir bewusst nicht erfassen. */
.datum-zwei { display: grid; grid-template-columns: 5.5rem 1fr; gap: 10px; }
.datum-zwei select { min-width: 0; }

@media (max-width: 899px) {
  .person-zeile .raster-2 { grid-template-columns: 1fr; }
  .aufklapp.offen { max-height: 460px; }
}

.mehr-auf {
  width: 100%; min-height: 50px; cursor: pointer;
  border: 1px dashed rgba(158, 178, 255, .36); border-radius: var(--r-s);
  background: rgba(158, 178, 255, .08); color: var(--schrift-leise);
  font-family: inherit; font-size: 14px; font-weight: 600;
}
.mehr-auf:hover { background: rgba(158, 178, 255, .14); }

.datenschutz-kasten {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--r-s); margin: 22px 0;
  background: rgba(158, 178, 255, .10); border: 1px solid rgba(158, 178, 255, .22);
  font-size: 13px; line-height: 1.55; color: var(--schrift-leise);
}
.datenschutz-kasten svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--lila); margin-top: 1px; }

.zustimmung { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0; }
.zustimmung input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; accent-color: var(--rosa); }
.zustimmung label { font-size: 13.5px; line-height: 1.5; color: var(--schrift-leise); }

/* =========================================================================
   Beispiele
   ========================================================================= */
.beispiel { padding: 24px; }
.beispiel .angaben { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; margin-bottom: 16px; }
.beispiel .angaben b { color: var(--schrift-zart); font-weight: 600; }
.beispiel .ausschnitt {
  padding: 16px 18px; border-radius: var(--r-s); margin-bottom: 14px;
  background: rgba(12, 18, 66, .50); border-left: 3px solid var(--rosa);
  font-size: 14.5px; line-height: 1.6; font-style: italic; color: #dde4ff;
}
.beispiel .reaktion { font-size: 13px; color: var(--stern); }

.hoerprobe {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--r-s); margin-bottom: 16px;
  background: rgba(12, 18, 66, .55); border: 1px solid rgba(158, 178, 255, .24);
}
.hoerprobe .knopf-rund {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #ffb3e4, #f472c8); color: #3d0f31;
  display: grid; place-items: center;
}
.hoerprobe .knopf-rund svg { width: 19px; height: 19px; }
.hoerprobe .balken { flex: 1; height: 5px; border-radius: 3px; background: rgba(158,178,255,.22); overflow: hidden; }
.hoerprobe .balken i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lila), var(--rosa)); }
.hoerprobe small { font-size: 12px; color: var(--schrift-zart); white-space: nowrap; }

/* =========================================================================
   Vertrauensband
   ========================================================================= */
.vertrauen {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  padding: 26px 0; margin-top: 10px;
  border-top: 1px solid rgba(158, 178, 255, .16);
}
.vertrauen div { display: flex; gap: 11px; align-items: flex-start; }
.vertrauen svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--lila); margin-top: 2px; }
.vertrauen b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.vertrauen span { font-size: 11.5px; color: var(--schrift-leise); line-height: 1.4; }

/* =========================================================================
   Fußzeile
   ========================================================================= */
/* ⚠ Leseschleier NUR unter der Fußzeile.
   Genau hier liegen im Hintergrundbild die hellen Wolken – heller Text
   darauf wäre kaum lesbar. Der Verlauf beginnt durchsichtig und wird
   nach unten dichter. Mond, Sterne und Wolken bleiben dabei sichtbar,
   das Bild selbst wird NICHT flächig abgedunkelt. */
footer.fuss {
  margin-top: 40px; padding: 48px 0 32px;
  border-top: 1px solid rgba(158, 178, 255, .16);
  background: linear-gradient(180deg,
    rgba(11, 17, 68, .26) 0%,
    rgba(11, 17, 68, .48) 14%,
    rgba(11, 17, 68, .60) 38%,
    rgba(11, 17, 68, .72) 100%);
  text-shadow: 0 1px 10px rgba(6, 10, 44, .55);
}
footer.fuss .fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 34px; }
footer.fuss h4 { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
footer.fuss ul { margin: 0; padding: 0; list-style: none; }
footer.fuss li { margin-bottom: 9px; }
footer.fuss a { color: var(--schrift); text-decoration: none; font-size: 13.5px; }
footer.fuss a:hover { color: #fff; }
footer.fuss .marke-text { font-size: 13.5px; color: var(--schrift-leise); line-height: 1.6; max-width: 300px; }
.fuss-unten {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding-top: 24px; border-top: 1px solid rgba(158, 178, 255, .12);
  font-size: 12.5px; color: var(--schrift-zart); flex-wrap: wrap;
}
.fuss-spruch { text-align: center; font-size: 19px; margin: 8px 0 26px; }

/* =========================================================================
   Handy – eigenständig gestaltet, nicht zusammengeschoben
   ========================================================================= */
/* Unter 1440 px reicht der Platz in der Kopfleiste nicht für beide Knöpfe.
   „Anmelden" ist weiterhin über das Menü und die Fußzeile erreichbar. */
@media (max-width: 1439px) { .anmelden-knopf { display: none; } }

/* Zwischen 900 und 1180 px (Tablet quer) passen die Menüpunkte nur ohne
   Knöpfe und mit etwas engerer Schrift. Ausgemessen, nicht geschätzt. */
@media (max-width: 1179px) {
  .kopf-aktionen .knopf { display: none; }
  .hauptnav a { padding: 8px 9px; font-size: 13.2px; }
}

@media (max-width: 1100px) {
  .raster-4 { grid-template-columns: repeat(2, 1fr); }
  .welten { grid-template-columns: repeat(3, 1fr); }
  .vertrauen { grid-template-columns: repeat(3, 1fr); }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 44px; }
  .hero h1 { font-size: 46px; }
}

@media (max-width: 899px) {
  /* Eigener Bildausschnitt im Hochformat. Das Querformat würde auf einem
     schmalen Bildschirm so stark beschnitten, dass nur ein Streifen Blau
     übrig bliebe – Mond und Wolken wären weg. */
  .himmel {
    background-image: image-set(
      url("../bilder/hintergrund/traumwelt-hoch.avif") type("image/avif"),
      url("../bilder/hintergrund/traumwelt-hoch.webp") type("image/webp"));
    background-image: -webkit-image-set(
      url("../bilder/hintergrund/traumwelt-hoch.avif") type("image/avif"),
      url("../bilder/hintergrund/traumwelt-hoch.webp") type("image/webp"));
    background-position: center top;
  }
  /* Das Video ist im Querformat. Auf einem hochkanten Handy bleibt nur ein
     schmaler senkrechter Streifen übrig – der Ausschnitt wird deshalb nach
     rechts geschoben, damit der Mond im Bild bleibt. */
  .himmel-film { object-position: 88% 50%; }
  .himmel-schleier {
    background:
      linear-gradient(180deg,
        rgba(10, 16, 64, .22) 0%,
        rgba(10, 16, 64, .12) 22%,
        rgba(12, 20, 78, .34) 56%,
        rgba(14, 22, 86, .58) 80%,
        rgba(16, 24, 92, .70) 100%);
  }

  .inhalt { padding: 0 18px; }
  .kopf-innen { padding: 10px 18px; }
  .logo img { height: 40px; }

  /* Navigation wird zum Schubfach */
  .hauptnav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw);
    flex-direction: column; align-items: stretch; gap: 6px;
    padding: 96px 20px 28px; margin: 0;
    background: linear-gradient(180deg, #131a5c, #0b1046);
    border-left: 1px solid rgba(158, 178, 255, .20);
    box-shadow: -20px 0 60px rgba(0,0,0,.55);
    transform: translateX(100%); transition: transform .28s cubic-bezier(.22,1,.36,1);
    z-index: 50; overflow-y: auto;
  }
  .hauptnav.offen { transform: translateX(0); }
  .hauptnav a { padding: 15px 16px; border-radius: var(--r-s); font-size: 16px; }
  .hauptnav::after { content: ""; display: block; height: 1px; background: rgba(158,178,255,.2); margin: 10px 0; }
  .menue-knopf { display: flex; }
  .kopf-aktionen .knopf { display: none; }

  .abschnitt { padding: 44px 0; }
  h1 { font-size: 36px; }
  h2 { font-size: 27px; }
  .abschnitt-kopf p { font-size: 15.5px; }

  /* Kopfbereich: Text oben, Paco groß darunter – wie in der Handy-Vorlage */
  .hero { padding: 30px 0 10px; }

  /* Startseite: der Menüknopf ist weg, deshalb steht das Logo allein und
     darf mittig und etwas größer stehen. Reihenfolge auf dem Handy:
     Logo – Luft – großer Paco – Luft – Überschrift – Untertext. */
  /* Ohne Kopfleiste beginnt das Bild ganz oben. Der obere Abstand hält
     Paco aus der Statusleiste bzw. der Kamera-Aussparung heraus. */
  .hero.hero-ruhig {
    padding-top: calc(34px + env(safe-area-inset-top));
    padding-bottom: 44px;
    min-height: 100svh;
  }
  /* ⚠ Muss hier stehen: die Zweispalten-Regel des Startbereichs ist
     spezifischer als die allgemeine Handy-Regel und würde sonst auch auf
     dem Handy greifen – Paco wäre winzig und die Überschrift bräche sich. */
  .hero.hero-ruhig .hero-raster { grid-template-columns: 1fr; gap: 26px; }
  .hero.hero-ruhig .hero-bild img { max-width: 330px; }
  /* Mitwachsend, damit die Überschrift auf JEDER Handybreite genau
     dreizeilig bleibt – von 320 px bis 899 px gemessen. */
  .hero.hero-ruhig h1 { font-size: clamp(18px, 5.95vw, 40px); line-height: 1.2; margin-bottom: 15px; }
  .hero.hero-ruhig .unter { font-size: 16px; margin-bottom: 0; }
  .hero-raster { grid-template-columns: 1fr; gap: 20px; }
  .hero h1 { font-size: 38px; margin-bottom: 14px; }
  .hero .unter { font-size: 15.5px; margin-bottom: 20px; }
  .hero-knoepfe { flex-direction: column; gap: 11px; }
  .hero-knoepfe .knopf { width: 100%; }
  .hero-bild { order: -1; }
  .hero-bild img { max-width: 320px; }
  .versprechen-reihe { gap: 14px; }
  .versprechen-reihe div { font-size: 12.5px; }

  /* Produktkarten: zwei Spalten, letzte über die volle Breite */
  .karte:last-child { grid-column: 1 / -1; }
  .karte:last-child img { height: 120px; }

  .raster-2, .raster-3, .raster-4 { grid-template-columns: 1fr; gap: 14px; }
  .preis-raster { grid-template-columns: 1fr; gap: 26px; }
  .preis-karte.top { order: -1; }
  .welten { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .welt { padding: 16px 12px; }
  .welt .emoji { font-size: 27px; }

  .vertrauen { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 22px 0; }
  .fuss-raster { grid-template-columns: 1fr; gap: 26px; }
  .fuss-unten { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fuss-spruch { font-size: 16px; }
  .glas { padding: 20px; }
  .beispiel .angaben { grid-template-columns: 1fr; gap: 2px; }
  .beispiel .angaben b { margin-top: 8px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 33px; }
  .karte:last-child { grid-column: auto; }
  .welten { grid-template-columns: 1fr; }
}

/* Dunkler Schleier hinter dem offenen Menü */
.schleier {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(6, 9, 40, .62); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.schleier.an { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  *, body::before, body::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   GESCHICHTEN-KARUSSELL  (Startseite, direkt unter dem Hero)
   =========================================================================
   Die Karten stehen auf einem echten Kreis. Ihre Plätze rechnet
   skript/paco.js bei jedem Bild neu aus:

       Winkel einer Karte = Platznummer * (360 / Anzahl) + Drehung

   Daraus werden x (seitlich), y (Höhe) und eine Größe gemacht. Die vordere
   Karte ist groß und lesbar, die seitlichen kleiner und weiter hinten, die
   hintere schaut oben heraus – man sieht, dass es rundherum weitergeht.

   ⚠ WARUM NICHT rotateY MIT echter 3D-Drehung?
     Bei vier Karten stünden die seitlichen Karten genau hochkant zum
     Betrachter und wären unsichtbar. Die Karten bleiben deshalb zugewandt
     und wandern nur auf der Kreisbahn.

   ⚠ Die Karten dürfen KEIN transition auf transform haben – die Bewegung
     kommt Bild für Bild aus dem Skript.

   ⚠ Am 20.09.2026 entfernt: der nachgebaute Dachbogen mit den sieben
     Lämpchen und die beiden gelben Ringe (oben und unten). Das Dach ist
     jetzt ein richtiges Bild, und die Karten hängen an goldenen Ketten.
   ========================================================================= */
.kar-abschnitt { padding-top: 22px; padding-bottom: 54px; overflow: hidden; }

/* ---------- Der obere Bereich ----------
   Weich, warm, mit dezentem Gold. Die Zierde ist CSS und SVG – es kommt
   kein einziges neues Bild dazu. */
/* ⚠ Der Kopf nimmt die volle Breite ein, der TEXT darin ist begrenzt.
   Nur so lässt sich Paco weit genug nach links setzen, ohne dass er in
   die Überschrift hineinragt. */
.kar-kopf {
  position: relative; text-align: center;
  max-width: none; margin: 0 auto 10px; padding-top: 6px;
}

/* Paco, gemütlich in eine Wolke gekuschelt – links oben, reine Zierde. */
.kar-paco {
  position: absolute; left: -18px; top: 18px; width: 248px; height: auto;
  pointer-events: none; z-index: 1;
  filter: drop-shadow(0 16px 30px rgba(4, 8, 40, .5));
  animation: paco-schweben 9s ease-in-out infinite;
}
/* Die Wolke darunter: ein weicher heller Schimmer, kein hartes Bild. */
.kar-wolke {
  position: absolute; left: -44px; top: 128px; width: 300px; height: 124px;
  pointer-events: none; z-index: 0; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%,
              rgba(226, 216, 255, .55) 0%, rgba(198, 186, 255, .28) 45%,
              rgba(150, 140, 230, 0) 72%);
  filter: blur(6px);
}
@keyframes paco-schweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* Die Markenzeile mit goldenen Strichen und Sternchen. */
.kar-marke {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 14px;
}
.kar-markenwort {
  font-size: 13px; letter-spacing: .32em; text-transform: uppercase;
  font-weight: 600; color: #ffd77a;
  text-shadow: 0 0 18px rgba(255, 216, 115, .35);
}
.kar-strich {
  height: 1px; width: clamp(28px, 9vw, 86px);
  background: linear-gradient(90deg, rgba(255, 216, 115, 0), rgba(255, 216, 115, .75));
}
.kar-marke .kar-strich:last-child {
  background: linear-gradient(90deg, rgba(255, 216, 115, .75), rgba(255, 216, 115, 0));
}
.kar-stern { display: grid; place-items: center; color: var(--stern); }
.kar-stern svg { width: 13px; height: 13px; }

.kar-kopf h2 {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto 4px;
  font-size: 50px; line-height: 1.08;
  letter-spacing: -.012em;
  text-shadow: 0 2px 22px rgba(6, 10, 44, .55);
}
/* Der betonte Teil verläuft weich von Weiß nach Rosa. */
.kar-betont {
  background: linear-gradient(100deg, #ffffff 0%, #ffc2e8 38%, #ff9ad9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--rosa);
}

/* Das kleine goldene Herz unter der Überschrift. */
.kar-zierde {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 14px; color: rgba(255, 216, 115, .85);
}
.kar-zierde svg { width: 15px; height: 15px; }
.kar-strich.fein { width: clamp(24px, 7vw, 64px); opacity: .7; }

.kar-unterzeile {
  position: relative; z-index: 2;
  font-size: 17px; line-height: 1.6; color: var(--schrift-leise);
  margin: 0 auto; max-width: 540px;
  text-shadow: 0 1px 10px rgba(6, 10, 44, .60);
}

/* Ein paar goldene Funken – langsam, damit es ruhig bleibt. */
.kar-funken {
  position: absolute; color: var(--stern); opacity: .75; pointer-events: none;
  animation: kar-funkeln 4.5s ease-in-out infinite;
}
.kar-funken svg { width: 100%; height: 100%; display: block; }
.kar-funken.f1 { width: 14px; height: 14px; left: 16%; top: 6px; animation-delay: .4s; }
.kar-funken.f2 { width: 10px; height: 10px; right: 13%; top: 54px; animation-delay: 1.8s; }
.kar-funken.f3 { width: 12px; height: 12px; right: 24%; bottom: -6px; animation-delay: 3s; }
@keyframes kar-funkeln {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: .9; transform: scale(1); }
}

/* ---------- Die Bühne ---------- */
.karussell { position: relative; margin: 0 auto; max-width: 1080px; }

.kar-buehne {
  position: relative;
  height: 760px;                 /* Rückfall, bis das Skript nachgemessen hat */
  outline: none;
  touch-action: pan-y;           /* senkrecht scrollen bleibt möglich */
  -webkit-user-select: none; user-select: none;
  cursor: grab;
}
.kar-buehne.zieht { cursor: grabbing; }
.kar-buehne:focus-visible { outline: 2px solid var(--lila); outline-offset: 8px; border-radius: var(--r-l); }

/* ---------- Das Dach ----------
   Ein echtes Bild. Breite und Lage setzt das Skript, damit die Ketten
   genau darunter ansetzen. */
.kar-dach {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 92%; max-width: 780px; height: auto;   /* Rückfall – das Skript misst nach */
  pointer-events: none; z-index: 2;
  filter: drop-shadow(0 18px 34px rgba(4, 8, 40, .55));
}

/* ---------- Die goldenen Ketten ----------
   Ein dünner Goldfaden mit Gliedern. Länge und Lage kommen aus dem Skript,
   weil jede Kette vom Dach bis zu IHRER Karte reichen muss. */
.kar-ketten { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* ⚠ Bewusst OHNE background-blend-mode: mit „overlay" wurde das Gold auf
   dem dunklen Himmel grau. Jetzt sind die Glieder echte Goldtöne. */
.kar-kette {
  position: absolute; width: 9px; margin-left: -4.5px;
  background: repeating-linear-gradient(180deg,
    #ffeec2 0 3px,
    #e8b352 3px 5px,
    #9a6f1e 5px 7px,
    #e8b352 7px 9px);
  border-radius: 5px;
  box-shadow: inset -2px 0 3px rgba(90, 58, 10, .75), inset 2px 0 3px rgba(255, 245, 210, .55),
              0 0 7px rgba(255, 216, 115, .5);
}
/* Der Haken, mit dem die Kette an der Karte hängt. */
.kar-kette::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid #ffd873;
  box-shadow: 0 0 9px rgba(255, 216, 115, .75);
  background: radial-gradient(circle at 35% 30%, rgba(255,245,210,.45), rgba(0,0,0,0) 60%);
}

/* ---------- Die Karten ----------
   ⚠ Die Karten hängen mit dem FUSS auf der Kreisbahn (transform-origin
     unten). Dadurch bleibt beim Verkleinern der untere Rand auf der Bahn,
     und die hintere Karte schaut oben heraus. */
.kar-karten { position: absolute; inset: 0; z-index: 3; }

.kar-karte {
  position: absolute; left: 50%; bottom: 34px; top: auto;
  width: 282px; margin-left: -141px;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}
.kar-karte-innen {
  position: relative; display: block; border-radius: 26px; overflow: hidden;
  /* ⚠ Tiefes Nachtblau statt des helleren Indigo – so wirkt es edler und
     ruhiger, und das Bild geht nahtlos in die Karte über. */
  background: linear-gradient(180deg, #0d1450 0%, #0a0f42 46%, #080c36 100%);
  border: 1px solid rgba(255, 216, 115, .38);
  box-shadow: var(--schatten), inset 0 0 0 1px rgba(255, 216, 115, .10);
  padding: 10px 10px 16px;
  text-decoration: none; color: inherit;
}
.kar-karte.vorne .kar-karte-innen {
  border-color: rgba(255, 224, 140, .9);
  box-shadow: var(--schatten-tief), 0 0 46px rgba(255, 216, 115, .26),
              inset 0 0 0 1px rgba(255, 216, 115, .22);
}
.kar-karte:not(.vorne) .kar-karte-innen { pointer-events: none; }
.kar-karte.vorne .kar-karte-innen:focus-visible { outline: 3px solid var(--rosa-hell); outline-offset: 3px; }

/* =========================================================================
   DAS MOCKUP EINER KARTE – EINE HÖRGESCHICHTE, KEIN BUCH
   =========================================================================
   Nach der Vorlage vom 20.09.2026: tiefes Nachtblau, ein feiner goldener
   Rahmen, das Bild verläuft nach unten weich in die Karte hinein, und
   unter dem Text steht eine Tonwelle.

   ⚠ KEIN PLAY-KNOPF. Die Hörgeschichte zeigt sich über Form, Farbe und
     die Klangkurve – nicht über eine Bedienfläche, die es gar nicht gibt.

   ⚠ Das Bild ist bewusst nur EIN <img> in .kar-bild. Ein anderes
     Paco-Bild einzusetzen heißt: in daten/geschichten-karussell.json eine
     Zeile ändern. Am Aufbau muss dafür nichts angefasst werden.
   ========================================================================= */
.kar-bild {
  position: relative; display: block; overflow: hidden;
  border-radius: 20px 20px 4px 4px;
  background: #070b38;
}
.kar-bild img {
  display: block; width: 100%; height: 182px; object-fit: cover;
  /* Tief, ruhig, nächtlich – deutlich dunkler als das Ausgangsbild. */
  filter: saturate(.78) brightness(.62) contrast(1.08)
          hue-rotate(-6deg);
}
/* Der Verlauf: oben ein Hauch Blau, unten geht das Bild ohne Kante in die
   Karte über. Dadurch wirkt es nicht wie ein aufgeklebtes Buchcover. */
.kar-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(7, 11, 56, .34) 0%,
      rgba(7, 11, 56, .10) 30%,
      rgba(8, 12, 60, .72) 78%,
      #0a0f4a 100%),
    radial-gradient(120% 80% at 50% 8%, rgba(126, 104, 220, .28), rgba(0, 0, 0, 0) 62%);
}
/* Zwei kleine goldene Sternchen wie in der Vorlage. */
.kar-sternchen {
  position: absolute; z-index: 2; color: var(--stern); opacity: .8;
  filter: drop-shadow(0 0 6px rgba(255, 216, 115, .6));
}
.kar-sternchen svg { width: 100%; height: 100%; display: block; }
.kar-sternchen.s1 { width: 13px; height: 13px; left: 13px; top: 14px; }
.kar-sternchen.s2 { width: 9px; height: 9px; right: 16px; top: 34px; opacity: .6; }

/* =========================================================================
   DAS BUCH-KARUSSELL
   =========================================================================
   Dieselbe Bühne, dieselben Ketten – nur die Karte sieht aus wie ein Buch:
   ein heller Buchrücken links, eine angedeutete Seitenkante rechts und
   drei aufgeschlagene Seiten statt der Tonwelle.
   ⚠ Auf den ersten Blick muss klar sein: hier gibt es etwas zu SEHEN,
     nicht zu hören.
   ========================================================================= */
.kar-buch .kar-karte-innen {
  /* Der Buchrücken: ein schmaler Goldstreifen an der linken Kante.
     ⚠ Seit 21.09.2026 füllt das Motiv die GANZE Karte. Deshalb liegt hier
       kein Bildkasten mehr, sondern nur noch der Rücken und ein dunkler
       Grund für den Fall, dass das Bild noch nicht geladen ist. */
  border-radius: 8px 26px 26px 8px;
  background:
    linear-gradient(90deg, rgba(255,216,115,.85) 0 5px, rgba(160,120,40,.55) 5px 9px,
                    rgba(0,0,0,0) 9px),
    linear-gradient(180deg, #121a5e 0%, #0c1248 46%, #090d3c 100%);
  padding: 0 0 18px 16px;
  /* Die Karte bekommt eine feste Form, damit das Vollbild immer gleich
     hoch ist – egal ob die Beschreibung ein- oder zweizeilig ist. */
  display: flex; flex-direction: column; justify-content: flex-end;
  /* ⚠ Ohne Bildkasten hat die Karte keine eigene Höhe mehr – sie waere nur
     so hoch wie ihr Text. Das Seitenverhaeltnis haelt sie genau so gross
     wie eine Geschichten-Karte (282 x 425 auf dem Rechner). Die Buehne
     rechnet ihre Hoehe ohnehin aus der gemessenen Karte. */
  aspect-ratio: 282 / 425;
}

/* =========================================================================
   VOLLBILD: DAS MOTIV IST DIE KARTE
   =========================================================================
   ⚠ Vorher: oben ein kleines Bild, darunter viel dunkelblaue Fläche. Das sah
     aus wie ein aufgeklebtes Foto in einem Kasten.
   Jetzt: das Motiv liegt als Hintergrund über die volle Karte, von ganz oben
   bis ganz unten. Zahl, Beschreibung, Preis und Knopf liegen DARÜBER.

   Damit die Schrift lesbar bleibt, liegt zwischen Bild und Text ein
   Verlauf: oben fast nichts, nach unten immer tieferes Nachtblau. Es gibt
   keine Kante – das Bild läuft sichtbar bis hinter den Preis. */
.kar-buch .kar-bild {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; background: none;
}
.kar-buch .kar-bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  /* ⚠ Das Kartenbild ist schon hochkant gebaut und traegt den Verlauf ins
     Nachtblau IN SICH (assets/bilder/paco/bilderbuch-*-karte.webp).
     Deshalb hier kein Beschnitt, keine Maske, kein Rahmen – nur einfuegen. */
  filter: none;
  -webkit-mask-image: none; mask-image: none;
  border: 0; border-radius: inherit;
}
/* Nur noch ein Hauch extra Dunkelheit ganz unten, damit Preis und Knopf auch
   auf einem hellen Motiv sicher lesbar sind. Keine Trennlinie. */
.kar-buch .kar-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 8, 42, 0) 0%, rgba(5, 8, 42, 0) 52%,
    rgba(5, 8, 42, .22) 74%, rgba(5, 8, 42, .46) 100%);
}
/* Der Text liegt über dem Bild und wird nach unten gedrückt. */
.kar-buch .kar-text {
  position: relative; z-index: 1;
  padding: 0 12px 0;
  /* So viel Luft nach oben, dass das Motiv oben frei atmet. */
  margin-top: auto;
  text-shadow: 0 2px 12px rgba(4, 7, 34, .75);
}
/* Die Seitenkante rechts – ein paar helle Striche wie gestapeltes Papier.
   Sie liegt ÜBER dem Vollbild, sonst wäre sie davon verdeckt.
   ⚠ Seit 22.09.2026 sind die Buch-Karten fertige Mockups mit eigenem Buch-
     rücken und eigener Seitenkante. Dort darf sie NICHT mehr gezeichnet
     werden – sonst läge ein zweiter Papierstapel über dem Bild. */
.kar-buch .kar-nurbild::after { content: none; }
.kar-buch .kar-karte-innen:not(.kar-nurbild)::after {
  content: ""; position: absolute; top: 12px; right: 0; bottom: 12px; width: 6px;
  z-index: 2;
  background: repeating-linear-gradient(180deg,
    rgba(255,245,220,.55) 0 2px, rgba(255,245,220,.12) 2px 4px);
  border-radius: 0 6px 6px 0; pointer-events: none;
}

/* ⚠ Hier standen bis 21.09.2026 drei kleine aufgeschlagene Seiten unter der
   Beschreibung. Der Nutzer wollte sie weg – ersatzlos, ohne Lücke. Das Motiv
   füllt jetzt die ganze Karte, ein zusätzliches Symbol braucht es nicht.
   Die Klasse .kar-seiten wird nirgends mehr erzeugt. */

@media (max-width: 680px) {
  .kar-buch .kar-karte-innen { padding-left: 13px; border-radius: 6px 22px 22px 6px; }
  .kar-buch .kar-text { padding: 0 9px 0; }
}

/* Die Tonwelle unter dem Text – symmetrisch um eine Mittellinie. */
.kar-welle {
  display: flex; align-items: center; justify-content: center; gap: 2.5px;
  height: 30px; margin-top: 13px;
}
.kar-welle i {
  width: 2.5px; height: var(--h); border-radius: 2px;
  background: linear-gradient(180deg, #ffe6a6, #ff9ad9);
  opacity: .55;
}
/* Vorne leuchtet sie kräftiger – die Karte, um die es gerade geht. */
.kar-karte.vorne .kar-welle i {
  opacity: 1; box-shadow: 0 0 7px rgba(255, 216, 115, .45);
}

.kar-text { display: block; text-align: center; padding: 14px 8px 0; }
.kar-zeit { display: block; color: #fff; line-height: 1; }
.kar-zahl { font-size: 42px; font-weight: 800; letter-spacing: -.01em; }
.kar-einheit { font-size: 21px; font-weight: 600; }
.kar-abzeichen {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 6px 15px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 154, 217, .34), rgba(176, 140, 255, .34));
  border: 1px solid rgba(255, 194, 232, .55);
  font-size: 13.5px; font-weight: 600; color: #fff;
}
.kar-abzeichen svg { width: 14px; height: 14px; color: var(--stern); flex: none; }
.kar-unter {
  display: block; margin-top: 11px; font-size: 14.5px; line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}
.kar-preis {
  display: block; margin-top: 12px; font-size: 21px; font-weight: 800; color: #ffd77a;
}
.kar-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px; padding: 9px 20px; border-radius: 999px;
  background: linear-gradient(90deg, var(--rosa), var(--lila));
  color: #17103c; font-size: 14px; font-weight: 700;
}
.kar-knopf svg { width: 15px; height: 15px; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Pfeile ---------- */
.kar-pfeil {
  position: absolute; bottom: 210px;
  width: 52px; height: 52px; border-radius: 50%; z-index: 6;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(22, 35, 122, .78); color: #fff;
  border: 1px solid var(--karte-rand-hell);
  box-shadow: var(--schatten);
  transition: background .2s ease, transform .2s ease;
}
.kar-pfeil svg { width: 22px; height: 22px; }
.kar-pfeil.zurueck { left: -6px; }
.kar-pfeil.weiter { right: -6px; }
.kar-pfeil:hover { background: rgba(111, 82, 224, .9); transform: scale(1.06); }
.kar-pfeil:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }

/* ---------- Unter dem Karussell ----------
   ⚠ Hier stand bis zum 20.09.2026 eine Punktreihe, der Hinweis
     „Wischen & entdecken" und eine Fußzeile. Alles drei ist auf Wunsch
     des Nutzers entfernt. Bedient wird weiter per Wischen, Ziehen,
     Pfeilen und Pfeiltasten – das haengt nicht an diesen Anzeigen. */

@media (max-width: 1100px) {
  .kar-pfeil.zurueck { left: 4px; }
  .kar-pfeil.weiter { right: 4px; }
}

@media (max-width: 900px) {
  .kar-kopf h2 { font-size: 38px; }
  .kar-paco { width: 184px; left: -14px; top: 26px; }
  .kar-wolke { left: -30px; top: 118px; width: 220px; height: 94px; }
  .kar-karte { width: 232px; margin-left: -116px; bottom: 40px; }
  .kar-bild img { height: 160px; }
  .kar-buch .kar-bild img { height: 100%; }
  .kar-buch .kar-karte-innen { aspect-ratio: 232 / 399; }
  .kar-zahl { font-size: 38px; }
}

/* ---------- Handy ----------
   ⚠ Die Pfeile verschwinden hier: auf dem Handy wird gewischt, und sie
     lägen über den Karten. Die Punkte bleiben. */
@media (max-width: 680px) {
  .kar-abschnitt { padding-top: 8px; padding-bottom: 38px; }
  .kar-kopf h2 { font-size: 30px; line-height: 1.14; }
  .kar-unterzeile { font-size: 15px; max-width: 420px; }
  .kar-markenwort { font-size: 11.5px; letter-spacing: .26em; }
  /* ⚠ Auf dem Handy sitzt Paco kleiner und weiter oben links, damit er
     die Überschrift nicht berührt. */
  /* ⚠ Auf dem Handy sitzt Paco klein in der oberen linken Ecke – über der
     Überschrift, nicht daneben. Sonst berührt er den Text. */
  .kar-paco { width: 104px; left: -20px; top: -4px; }
  .kar-wolke { left: -26px; top: 52px; width: 120px; height: 56px; }
  .kar-kopf { padding-top: 34px; }
  .kar-funken.f1 { left: 8%; }
  .kar-funken.f2 { right: 6%; top: 46px; }
  .kar-funken.f3 { display: none; }
  .kar-karte { width: 182px; margin-left: -91px; bottom: 30px; }
  .kar-karte-innen { border-radius: 22px; padding: 8px 8px 13px; }
  .kar-bild { border-radius: 16px 16px 4px 4px; }
  .kar-bild img { height: 120px; }
  .kar-buch .kar-karte-innen { padding: 0 0 14px 13px; aspect-ratio: 182 / 330; }
  .kar-buch .kar-bild { border-radius: inherit; }
  .kar-buch .kar-bild img { height: 100%; }
  .kar-welle { height: 22px; gap: 2px; margin-top: 10px; }
  .kar-welle i { width: 2px; }
  .kar-sternchen.s1 { width: 10px; height: 10px; left: 9px; top: 10px; }
  .kar-sternchen.s2 { width: 7px; height: 7px; right: 11px; top: 26px; }
  .kar-zahl { font-size: 30px; }
  .kar-einheit { font-size: 16px; }
  .kar-unter { font-size: 12.5px; margin-top: 9px; }
  .kar-preis { font-size: 18px; margin-top: 9px; }
  .kar-knopf { font-size: 12.5px; padding: 7px 15px; margin-top: 10px; }
  .kar-abzeichen { font-size: 11.5px; padding: 4px 11px; margin-top: 9px; }
  .kar-text { padding: 11px 6px 0; }
  .kar-pfeil { display: none; }
  .kar-dach { width: 104%; max-width: none; }
  .kar-kette { width: 6px; margin-left: -3px; }
  .kar-kette::after { width: 11px; height: 11px; border-width: 2px; bottom: -5px; }
}

@media (max-width: 380px) {
  .kar-karte { width: 162px; margin-left: -81px; bottom: 26px; }
}

/* =========================================================================
   EINE SEITE JE LÄNGE  (traumreise-10.html … traumreise-60.html)
   =========================================================================
   Hier steht bewusst NUR EIN Angebot. Wer im Karussell auf „20 Minuten"
   klickt, soll auch nur die 20 Minuten sehen – nicht wieder die Übersicht.
   ========================================================================= */
.einzel-abschnitt { padding-top: calc(38px + env(safe-area-inset-top)); }

/* ⚠ Pfeil UND Schrift im Paco-Pink – beides steht im selben Link. */
.einzel-zurueck { margin: 0 0 22px; font-size: 15px; }
.einzel-zurueck a { color: var(--rosa); text-decoration: none; font-weight: 600; }
.einzel-zurueck a:hover { color: var(--rosa-hell); }

.einzel-raster {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 38px; align-items: center;
}
.einzel-bild { position: relative; overflow: visible; }
.einzel-bild img {
  display: block; width: 100%; height: auto;
  /* ⚠ Seit 22.09.2026 auf ALLEN Angebotsseiten ohne Rahmen. Vorher endete
     der gemalte Nachthimmel im Bild an einer scharfen goldenen Linie mitten
     im Nachthimmel der Seite – das sah aus wie ein aufgeklebtes Rechteck. */
  border: 0; border-radius: 0; box-shadow: none;
}
.einzel-marke { position: absolute; left: 12%; bottom: 12%; }

/* =========================================================================
   DAS GROSSE BILD OBEN OHNE HARTE KANTE  (alle Angebotsseiten)
   =========================================================================
   ⚠ Bis 21.09.2026 stand hier ein goldener Rahmen mit Buchrücken. Das sah
     aus wie ein aufgeklebtes Rechteck: der gezeichnete Nachthimmel im Bild
     endete mitten im Nachthimmel der Seite an einer scharfen Linie.

   Jetzt läuft das Bild nach AUSSEN weich aus. Gemacht wird das mit einer
   Maske: in der Mitte ist das Bild voll da, zum Rand hin wird es Schritt
   für Schritt durchsichtig und geht in den Seitenhintergrund über. Kein
   Rahmen, keine Ecke, keine Box.

   Darunter liegt ein sanfter Schein, damit das Bild trotzdem Halt hat und
   nicht verwaschen wirkt.
   ========================================================================= */
.einzel-bild img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* DREI Masken, die miteinander verrechnet werden:
       1. weich nach links und rechts
       2. weich nach oben und unten
       3. eine runde, die zusätzlich die Ecken auflöst
     Nur so ist der Rand auf allen vier Seiten gleich weich – eine einzelne
     runde Maske lässt an den langen Kanten immer noch eine Linie stehen. */
  -webkit-mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0, #000 17%, #000 83%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 15%, #000 85%, rgba(0,0,0,0) 100%),
    radial-gradient(78% 80% at 50% 48%, #000 40%, rgba(0,0,0,.72) 72%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0, #000 17%, #000 83%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 15%, #000 85%, rgba(0,0,0,0) 100%),
    radial-gradient(78% 80% at 50% 48%, #000 40%, rgba(0,0,0,.72) 72%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
  /* Etwas größer zeichnen: was am Rand weggeblendet wird, fehlt sonst am Bild.
     ⚠ Nur leicht. Bei 1.14 lief das Bild auf dem Rechner unter den Text und
     die Beschreibung war kaum noch zu lesen. */
  transform: scale(1.05);
  transform-origin: 50% 46%;
}
/* Der Platz, den das größere Bild braucht, darf den Text nicht anschieben. */
.einzel-bild { overflow: visible; }
/* Der Schein dahinter – warm, sehr weich, ohne sichtbare Grenze. */
.einzel-bild::before {
  content: ""; position: absolute; inset: -6% -4%;
  border-radius: 50%;
  background: radial-gradient(60% 58% at 50% 46%,
    rgba(126, 104, 220, .30), rgba(126, 104, 220, .10) 58%, rgba(0, 0, 0, 0) 78%);
  filter: blur(18px);
  pointer-events: none;
}
/* Buchrücken und Papierkante sind damit hinfällig – das Bild läuft ringsum
   weich aus, ein gezeichneter Rand daneben wäre nur eine harte Linie mehr. */
.einzel-bild::after { content: none; }



.einzel-oben {
  margin: 0 0 8px; font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--schrift-zart);
}
.einzel-text h1 { font-size: 42px; line-height: 1.1; margin: 0 0 12px; }
.einzel-kurz { margin: 0 0 16px; font-size: 18px; color: var(--rosa-hell); }
.einzel-lang { margin: 0 0 22px; font-size: 16.5px; line-height: 1.62; color: var(--schrift-leise); }

.einzel-liste { margin: 0 0 24px; padding: 0; list-style: none; }
/* ⚠ Goldenes Häkchen, pinker Text – auf allen vier Angebotsseiten gleich.
   Die einzelnen Wörter, die `hervor()` sonst gold oder rosa einfärbt,
   bekommen hier bewusst dieselbe Farbe wie die Zeile: sonst wäre eine
   Zeile dreifarbig und die Liste unruhig. */
.einzel-liste li {
  position: relative; padding-left: 28px; margin-bottom: 11px;
  /* ⚠ Das kräftige Paco-Pink, nicht das helle: --rosa-hell (#ffc2e8) sah
     auf dem dunklen Himmel fast weiß aus. */
  font-size: 15px; line-height: 1.5; color: var(--rosa);
}
.einzel-liste li .gold, .einzel-liste li .rosa { color: inherit; }
.einzel-liste li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 13px; height: 7px;
  border-left: 2.6px solid var(--stern); border-bottom: 2.6px solid var(--stern);
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 4px rgba(255, 216, 115, .55));
}

.einzel-kauf { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.einzel-preis { margin: 0; font-size: 34px; font-weight: 800; color: #ffd77a; }

.einzel-zeile {
  display: flex; gap: 20px; flex-wrap: wrap; margin: 20px 0 0;
  font-size: 13.5px; color: var(--schrift-zart);
}
.einzel-zeile span { display: inline-flex; align-items: center; gap: 7px; }
.einzel-zeile span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--stern);
}

.einzel-erklaerung { margin-top: 64px; }
.einzel-erklaerung h2 { font-size: 30px; margin: 0 0 24px; text-align: center; }
.einzel-schritt { padding: 26px 24px; }
.einzel-schritt h3 { font-size: 18px; margin: 0 0 10px; }
.einzel-schritt p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--schrift-leise); }
/* ⚠ Muss genauer stehen als „.einzel-schritt p" – sonst erbt die Zahl die
   kleine Schriftgröße des Fließtextes und ist im Kreis kaum zu sehen. */
.einzel-schritt .einzel-nummer {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 0 14px;
  display: grid; place-items: center; font-size: 19px; font-weight: 800;
  line-height: 1; color: #1a1046;
  background: linear-gradient(135deg, var(--rosa), var(--lila));
}

.einzel-andere { margin-top: 58px; text-align: center; }
.einzel-andere-kopf { margin: 0 0 16px; font-size: 16px; color: var(--schrift-zart); }
.einzel-andere-reihe { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.einzel-andere-karte {
  display: flex; flex-direction: column; gap: 4px; min-width: 180px;
  padding: 16px 22px; border-radius: var(--r-m); text-decoration: none;
  background: rgba(46, 63, 170, .42); border: 1px solid var(--karte-rand);
  transition: border-color .2s ease, transform .2s ease;
}
.einzel-andere-karte:hover { border-color: rgba(255, 216, 115, .7); transform: translateY(-3px); }
.einzel-andere-karte b { font-size: 17px; color: #fff; }
.einzel-andere-karte span { font-size: 13px; color: var(--schrift-zart); }

@media (max-width: 900px) {
  .einzel-raster { grid-template-columns: 1fr; gap: 26px; }
  .einzel-text h1 { font-size: 32px; }
  .einzel-kurz { font-size: 16.5px; }
  .einzel-lang { font-size: 15.5px; }
  .einzel-preis { font-size: 30px; }
  .einzel-erklaerung { margin-top: 46px; }
  .einzel-erklaerung h2 { font-size: 25px; }
  .einzel-andere-karte { min-width: 0; flex: 1 1 44%; }
}

/* =========================================================================
   DER MITTRÄUMER-BEREICH IM FORMULAR
   =========================================================================
   Eine eigene, ruhige Karte mitten im Formular. Solange niemand auf
   „hinzufügen" drückt, steht dort nur ein Satz und ein Knopf – erst danach
   klappen die Felder auf. So wirkt das Formular nicht unruhig, und es ist
   auf den ersten Blick zu sehen, dass dieser Teil freiwillig ist.
   ========================================================================= */
.mitkarte {
  margin: 0 0 22px; padding: 18px 20px 20px;
  border-radius: var(--r-m);
  background: linear-gradient(160deg, rgba(88, 74, 196, .30), rgba(30, 40, 130, .34));
  border: 1px solid rgba(190, 205, 255, .30);
}
.mitkarte-kopf {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: 14px; row-gap: 5px;
}
.mitkarte-zeichen {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255, 154, 217, .16);
  border: 1px solid rgba(255, 194, 232, .38); color: var(--rosa-hell);
}
.mitkarte-zeichen svg { width: 20px; height: 20px; }
.mitkarte-titel { font-size: 16.5px; font-weight: 700; color: #fff; }
.mitkarte-satz {
  grid-column: 2 / -1;
  font-size: 13.5px; line-height: 1.5; color: var(--schrift-zart);
}
.mitkarte-freiwillig { white-space: nowrap; }
.mitkarte-knopf { margin-top: 14px; }
.mitkarte .person-zeile { margin-top: 16px; }
/* Im Formular sind die Felder dort etwas enger – die Karte soll kompakt
   bleiben und nicht wie ein zweites Formular wirken. */
.mitkarte .feld { margin-bottom: 14px; }

/* Überschrift über jeder Mitfigur: „Mitträumer 1", „Mitträumer 2" … Sie
   erscheint nur, wenn mehr als eine möglich ist. */
.person-nummer {
  margin: 0 0 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rosa);
}

@media (max-width: 680px) {
  .mitkarte { padding: 16px 14px 18px; }
  /* ⚠ Das Zeichen reicht über beide Zeilen, damit der Satz links bündig
     unter der Überschrift steht und nicht unter dem Kreis. */
  .mitkarte-zeichen { grid-row: 1 / span 2; width: 34px; height: 34px; }
  .mitkarte-titel { font-size: 15.5px; }
  .mitkarte-satz { font-size: 13px; }
}

/* ⚠ Die Überschrift über dem Bestellformular – im Paco-Pink. */
.formular-titel { color: var(--rosa); }

/* Wer weniger Bewegung möchte: das Karussell springt still weiter. */
@media (prefers-reduced-motion: reduce) {
  .kar-karte { transition: none; }
  .kar-paco, .kar-funken { animation: none; }
}

/* =========================================================================
   MUSIK-SCHALTER
   =========================================================================
   Klein, ruhig, unten rechts. Er soll da sein, wenn man ihn sucht, und
   sonst nicht stören.
   ========================================================================= */
.tonschalter {
  position: fixed; right: 18px; z-index: 40;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(22, 35, 122, .72);
  border: 1px solid var(--karte-rand);
  color: var(--schrift-leise);
  box-shadow: var(--schatten);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.tonschalter:hover { color: #fff; border-color: rgba(255, 216, 115, .55); transform: translateY(-2px); }
.tonschalter:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }
.tonschalter svg { width: 17px; height: 17px; display: block; }
.tonschalter-zeichen { display: grid; place-items: center; color: var(--stern); }
/* Immer nur EIN Zeichen: klingend oder durchgestrichen. */
.tonschalter .ton-aus { display: none; }
.tonschalter.aus .ton-an { display: none; }
.tonschalter.aus .ton-aus { display: block; color: var(--schrift-zart); }
.tonschalter.aus { color: var(--schrift-zart); }

@media (max-width: 680px) {
  .tonschalter { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
                 padding: 8px 13px 8px 10px; font-size: 12.5px; }
  .tonschalter svg { width: 16px; height: 16px; }
}

/* =========================================================================
   DIGITALES BILDERBUCH – Auswahl „Fantasiewesen oder Kind selbst"
   =========================================================================
   Zwei grosse, gut treffbare Karten statt kleiner Punkte. Auf dem Handy
   liegen sie untereinander, ab 620 px nebeneinander. Die ausgewaehlte
   Karte bekommt einen rosa Rand und einen leichten Schein – so ist auch
   bei hellem Licht draussen zu sehen, was gewaehlt ist.
   ========================================================================= */
.wahl-reihe { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 620px) { .wahl-reihe { grid-template-columns: 1fr 1fr; } }

.wahl-karte { position: relative; display: block; cursor: pointer; }
.wahl-karte input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.wahl-innen {
  display: block; height: 100%;
  padding: 16px 16px 15px 46px;
  border-radius: var(--r-m);
  background: rgba(12, 18, 72, .42);
  border: 1px solid rgba(190, 205, 255, .26);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
/* Der Kreis links – gezeichnet, nicht als Bild, damit er ueberall gleich aussieht. */
.wahl-innen::before {
  content: ""; position: absolute; left: 16px; top: 18px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(190, 205, 255, .55);
  background: transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wahl-innen b { display: block; font-size: 15px; color: #fff; line-height: 1.35; }
.wahl-innen small {
  display: block; margin-top: 5px;
  font-size: 12.5px; line-height: 1.5; color: var(--schrift-zart);
}
.wahl-karte:hover .wahl-innen { border-color: rgba(255, 194, 232, .45); }
.wahl-karte input:checked + .wahl-innen {
  border-color: var(--rosa); background: rgba(255, 154, 217, .12);
  box-shadow: 0 0 0 1px var(--rosa) inset;
}
.wahl-karte input:checked + .wahl-innen::before {
  border-color: var(--rosa);
  box-shadow: inset 0 0 0 4px var(--rosa);
}
/* Tastatur-Bedienung muss sichtbar bleiben. */
.wahl-karte input:focus-visible + .wahl-innen {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* Erklaersatz ueber einem Feld – etwa ueber dem Foto-Feld. */
.feld-satz {
  margin: 0 0 10px; font-size: 13px; line-height: 1.55;
  color: var(--schrift-zart);
}

/* Foto hochladen. Der eigene Knopf des Browsers sieht auf jedem Geraet
   anders aus – deshalb bekommt er hier eine feste, ruhige Form. */
.feld input[type="file"] {
  min-height: 54px; padding: 14px 16px;
  font-size: 14px; color: var(--schrift-leise); cursor: pointer;
}
.feld input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 9px 16px;
  border: 0; border-radius: 999px;
  background: rgba(255, 154, 217, .18);
  border: 1px solid rgba(255, 194, 232, .42);
  color: #fff; font: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer;
}
.feld input[type="file"]::file-selector-button:hover {
  background: rgba(255, 154, 217, .30);
}

/* ⚠ Wie bei .raster-2: „hidden" muss staerker sein als die eigene
   Anzeigeart, sonst bliebe das Foto-Feld trotz Verstecken sichtbar. */
.feld[hidden], .mitkarte[hidden] { display: none; }

/* Die Auswahl „Fantasiewesen oder Foto" beim Mitträumer – etwas kompakter
   als beim Traumkind, damit die Karte nicht zu einem zweiten Formular wird. */
.person-frage {
  margin: 4px 0 0; font-size: 13.5px; font-weight: 600;
  color: var(--schrift-leise);
}
.person-frage[hidden] { display: none; }
.wahl-reihe.wahl-klein { margin-top: 10px; margin-bottom: 14px; }
.wahl-reihe.wahl-klein[hidden] { display: none; }
.wahl-klein .wahl-innen { padding: 12px 13px 12px 42px; }
.wahl-klein .wahl-innen::before { top: 14px; left: 13px; width: 18px; height: 18px; }
.wahl-klein .wahl-innen b { font-size: 14px; }
.wahl-klein .wahl-innen small { font-size: 12px; margin-top: 3px; }
.wahl-klein .wahl-karte input:checked + .wahl-innen::before { box-shadow: inset 0 0 0 3.5px var(--rosa); }

/* Auf schmalen Handys ist der Datei-Knopf des Browsers zu breit – dann
   bleibt vom Dateinamen nur „K…lt" übrig. Hier wird er kleiner. */
@media (max-width: 460px) {
  .feld input[type="file"] { font-size: 13px; padding: 12px 12px; }
  .feld input[type="file"]::file-selector-button {
    margin-right: 10px; padding: 8px 12px; font-size: 12.5px;
  }
}

/* Der Merksatz unter dem Foto-Feld bei den Gute-Nacht-Geschichten:
   das Foto ist NUR fuer das Cover, die Figur in der Geschichte bleibt. */
.foto-merke {
  margin-top: 6px; padding-left: 14px; position: relative;
  color: var(--rosa-hell);
}
.foto-merke::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rosa);
}
.hinweis[hidden] { display: none; }
.nebensache[hidden] { display: none; }

/* =========================================================================
   KARTE = BILD  (Gute-Nacht-Geschichten seit 22.09.2026)
   =========================================================================
   Die vier Mockups sind fertige Bilder: Rahmen, Minutenzahl, Beschreibung,
   Preis und der Ansehen-Knopf sind hineingemalt. Deshalb bekommt die Karte
   hier KEINEN eigenen Rahmen, keinen Hintergrund und keinen Innenabstand –
   sonst läge ein Kasten um ein Bild, das seinen Rahmen schon hat.

   ⚠ Angeklickt wird weiterhin die GANZE Karte. Der gemalte Knopf im Bild
     funktioniert dadurch von selbst mit.
   ========================================================================= */
.kar-karte-innen.kar-nurbild {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  /* Alle vier Karten gleich hoch – die Motive sind minimal unterschiedlich
     hoch, das Bild sitzt unten auf und der Rest bleibt durchsichtig. */
  aspect-ratio: 660 / 1172;
  display: block;
}
.kar-nurbild .kar-bild {
  position: absolute; inset: 0;
  background: none; border-radius: 0; overflow: visible;
}
.kar-nurbild .kar-bild img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
  filter: none;
  border: 0; border-radius: 0;
  -webkit-mask-image: none; mask-image: none;
  /* Ein warmer Schein statt eines Schattens – er folgt der Form des Motivs
     und erzeugt keine rechteckige Kante. */
  filter: drop-shadow(0 14px 26px rgba(4, 7, 34, .55));
}
/* Kein eigener Verlauf – das Motiv bringt seinen eigenen mit. */
.kar-nurbild .kar-bild::after { content: none; }
/* ⚠ Die vordere Karte bekommt sonst einen goldenen Rahmen und einen
   rechteckigen Schein. Um ein Bild mit eigenem Rahmen sieht das aus wie ein
   zweiter Kasten. Hier wird stattdessen das MOTIV selbst zum Leuchten
   gebracht – der Schein folgt dann seiner Form. */
.kar-karte.vorne .kar-karte-innen.kar-nurbild {
  border: 0; box-shadow: none; border-color: transparent;
}
.kar-karte.vorne .kar-nurbild .kar-bild img {
  filter: drop-shadow(0 16px 30px rgba(4, 7, 34, .6))
          drop-shadow(0 0 22px rgba(255, 216, 115, .38));
}
.kar-karte.vorne .kar-nurbild:focus-visible {
  outline: 3px solid var(--rosa-hell); outline-offset: 6px; border-radius: 26px;
}
/* Die hinteren Karten sollen wie bisher zurücktreten. */
.kar-karte:not(.vorne) .kar-nurbild .kar-bild img { opacity: .94; }

/* =========================================================================
   DAS LIEDER-KARUSSELL  (drittes Karussell, seit 22.09.2026)
   =========================================================================
   Dieselbe Bühne, dieselben Ketten, dieselbe Karte wie bei den Geschichten.
   Anders sind nur drei Kleinigkeiten:
     · ein eigener Name über der Zahl („Mein Paco-Lied")
     · drei Noten statt der Tonwelle
     · ein Hauch Violett im Kartengrund, damit man die drei Bereiche auch
       aus dem Augenwinkel auseinanderhält
   ⚠ Die Bilder sind VORLÄUFIG. Getauscht wird nur der Dateiname in
     daten/lieder-karussell.json – hier muss dafür nichts angefasst werden.
   ========================================================================= */
/* ⚠ Nur für den Fall, dass hier einmal eine Textkarte steht. Die fertigen
   Mockups (.kar-nurbild) bringen ihren eigenen Rahmen mit – dort darf KEIN
   Kasten dahinter liegen, sonst sieht man ein dunkles Rechteck um das Bild. */
.kar-lied .kar-karte-innen:not(.kar-nurbild) {
  background: linear-gradient(180deg, #131154 0%, #0d0b45 46%, #0a0838 100%);
}

/* Der eigene Name des Angebots – klein, golden, über der Zahl. */
.kar-name {
  display: block; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--stern);
}

/* Drei Noten statt der Tonwelle. */
.kar-noten {
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  height: 30px; margin-top: 13px;
}
.kar-noten svg {
  width: 21px; height: 21px; color: var(--stern);
  opacity: .5;
  filter: drop-shadow(0 2px 6px rgba(4, 8, 40, .45));
}
/* Die Noten stehen leicht versetzt – wie Töne auf einer Linie. */
.kar-noten svg:nth-child(1) { transform: translateY(3px) rotate(-8deg); width: 17px; height: 17px; }
.kar-noten svg:nth-child(3) { transform: translateY(5px) rotate(9deg); width: 15px; height: 15px; }
.kar-karte.vorne .kar-noten svg {
  opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 216, 115, .55));
}

@media (max-width: 900px) { .kar-name { font-size: 11.5px; } }
@media (max-width: 680px) {
  .kar-name { font-size: 10.5px; letter-spacing: .13em; margin-bottom: 5px; }
  .kar-noten { height: 22px; gap: 7px; margin-top: 10px; }
  .kar-noten svg { width: 16px; height: 16px; }
  .kar-noten svg:nth-child(1) { width: 13px; height: 13px; }
  .kar-noten svg:nth-child(3) { width: 12px; height: 12px; }
}

/* =========================================================================
   KINDERLIED-FORMULAR: JEDES LIED EIN EIGENER ABSCHNITT
   =========================================================================
   ⚠ Der Nutzer soll immer nur EINEN Gedanken haben: „Jetzt gestalte ich
     Lied 1." Danach: „Jetzt Lied 2." Deshalb ist jedes Lied eine eigene,
     deutlich abgesetzte Karte mit eigener Überschrift – auf dem Handy
     untereinander, am Rechner ebenfalls untereinander. Nie zwei Lieder
     nebeneinander.
   ========================================================================= */
.lied-block {
  margin: 0 0 28px;
  padding: 22px 22px 24px;
  border-radius: var(--r-l);
  background: linear-gradient(170deg, rgba(88, 74, 196, .22), rgba(24, 32, 118, .30));
  border: 1px solid rgba(190, 205, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.lied-block:last-child { margin-bottom: 22px; }

.lied-kopf {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 216, 115, .28);
  font-size: 15px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #fff;
}
.lied-stern { color: var(--stern); font-size: 17px; line-height: 1; }

/* Die Zwischenfragen im Lied-Abschnitt. */
.lied-frage {
  margin: 18px 0 0; font-size: 13.5px; font-weight: 600;
  color: var(--schrift-leise);
}
.lied-block .wahl-reihe { margin-bottom: 18px; }
.lied-block .mitkarte { margin-bottom: 18px; }
.lied-block .feld:last-child { margin-bottom: 0; }

/* Fünf Stimmungen: am Rechner nebeneinander, auf dem Handy untereinander. */
.lied-block .wahl-reihe[role="radiogroup"] { gap: 10px; }
@media (min-width: 620px) {
  .lied-block > .wahl-reihe { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 680px) {
  .lied-block { padding: 17px 15px 18px; margin-bottom: 22px; border-radius: var(--r-m); }
  .lied-kopf { font-size: 13.5px; letter-spacing: .14em; margin-bottom: 14px; }
}

/* Der ruhige Hinweissatz in einem Lied-Abschnitt – etwa „Paco sucht den
   Titel aus" oder „Wir nehmen das Fantasiewesen von oben". */
.lied-hinweis {
  margin: -8px 0 16px; padding-left: 14px; position: relative;
  font-size: 13px; line-height: 1.55; color: var(--schrift-zart);
}
.lied-hinweis::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--stern);
}
.lied-hinweis[hidden] { display: none; }

/* =========================================================================
   DAS TRICKFILM-KARUSSELL  (viertes Karussell, seit 22.09.2026)
   =========================================================================
   Dieselbe Bühne, dieselben Ketten, dieselbe Karte wie bei den anderen.
   Anders sind nur zwei Dinge:
     · ein eigener Name über der Zahl („Mein großer Paco-Traumfilm")
     · ein kleiner Filmstreifen statt der Tonwelle
   ⚠ Die Bilder sind VORLÄUFIG. Getauscht wird nur der Dateiname in
     daten/trickfilme-karussell.json – hier muss dafür nichts angefasst
     werden. Die Texte stehen bewusst als TEXT auf der Karte, nicht im
     Bild: so lassen sich die Mockups später frei austauschen.
   ========================================================================= */
/* ⚠ Nur für den Fall, dass hier einmal eine Textkarte steht. Die fertigen
   Mockups (.kar-nurbild) bringen ihren eigenen Rahmen mit – dort darf KEIN
   Kasten dahinter liegen, sonst sieht man ein dunkles Rechteck um das Bild. */
.kar-film .kar-karte-innen:not(.kar-nurbild) {
  background: linear-gradient(180deg, #0e1550 0%, #0a1044 46%, #070b38 100%);
}

/* Ein kleiner Filmstreifen – fünf Kader nebeneinander. */
.kar-streifen {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 30px; margin-top: 13px;
}
.kar-streifen i {
  width: 17px; height: 22px; border-radius: 3px;
  background: linear-gradient(160deg, rgba(255, 246, 222, .92), rgba(198, 214, 255, .5));
  box-shadow: 0 2px 6px rgba(4, 8, 40, .45),
              inset 0 3px 0 rgba(8, 12, 60, .55), inset 0 -3px 0 rgba(8, 12, 60, .55);
  opacity: .55;
}
.kar-streifen i:nth-child(1), .kar-streifen i:nth-child(5) { height: 17px; opacity: .35; }
.kar-karte.vorne .kar-streifen i {
  opacity: 1; box-shadow: 0 2px 10px rgba(255, 216, 115, .35),
              inset 0 3px 0 rgba(8, 12, 60, .55), inset 0 -3px 0 rgba(8, 12, 60, .55);
}
.kar-karte.vorne .kar-streifen i:nth-child(1),
.kar-karte.vorne .kar-streifen i:nth-child(5) { opacity: .7; }

@media (max-width: 680px) {
  .kar-streifen { height: 22px; gap: 3px; margin-top: 10px; }
  .kar-streifen i { width: 13px; height: 17px; }
  .kar-streifen i:nth-child(1), .kar-streifen i:nth-child(5) { height: 13px; }
}

/* Anklickbare Vorschläge – etwa für die Traumwelt im Trickfilm.
   ⚠ Sie ersetzen das Freitextfeld NICHT, sie füllen es nur aus. Eine ganz
     eigene Traumwelt bleibt immer möglich. */
.vorschlaege {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.vorschlag {
  padding: 7px 14px; border-radius: 999px;
  background: rgba(12, 18, 72, .42);
  border: 1px solid rgba(190, 205, 255, .26);
  color: var(--schrift-leise); font: inherit; font-size: 13px;
  cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.vorschlag:hover {
  border-color: rgba(255, 194, 232, .5); background: rgba(255, 154, 217, .12); color: #fff;
}
.vorschlag:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* =========================================================================
   DIE PACO-GESCHENKBOX  (fünftes Karussell, seit 22.09.2026)
   =========================================================================
   Karte im Karussell: wie die anderen, nur mit einer Schleife statt
   Tonwelle, Noten oder Filmstreifen – und der Preis steht groß oben.
   ⚠ Die Bilder sind VORLÄUFIG. Getauscht wird nur der Dateiname in
     daten/geschenkboxen-karussell.json.
   ========================================================================= */
/* ⚠ Nur für den Fall, dass hier einmal eine Textkarte steht. Die fertigen
   Mockups (.kar-nurbild) bringen ihren eigenen Rahmen mit – dort darf KEIN
   Kasten dahinter liegen, sonst sieht man ein dunkles Rechteck um das Bild. */
.kar-box .kar-karte-innen:not(.kar-nurbild) {
  background: linear-gradient(180deg, #16104f 0%, #100b44 46%, #0b0738 100%);
}
.kar-box .kar-zahl { font-size: 38px; }
.kar-box .kar-einheit { font-size: 24px; }
.kar-schleife {
  display: flex; align-items: center; justify-content: center;
  height: 30px; margin-top: 13px;
}
.kar-schleife svg {
  width: 26px; height: 26px; color: var(--stern); opacity: .55;
  filter: drop-shadow(0 2px 6px rgba(4, 8, 40, .45));
}
.kar-karte.vorne .kar-schleife svg {
  opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 216, 115, .55));
}
@media (max-width: 680px) {
  .kar-box .kar-zahl { font-size: 30px; }
  .kar-box .kar-einheit { font-size: 19px; }
  .kar-schleife { height: 22px; margin-top: 10px; }
  .kar-schleife svg { width: 20px; height: 20px; }
}

/* -------------------------------------------------------------------------
   DIE PACO-ABOS
   -------------------------------------------------------------------------
   ⚠ Auf der Karte steht beim Abo der PREIS gross – nicht eine Minutenzahl.
     „9,90 €" ist laenger als „20", deshalb etwas kleiner als bei den
     Geschichten, und „/ Monat" darf nie umbrechen.
   ------------------------------------------------------------------------- */
/* ⚠ Nur für den Fall, dass hier einmal eine Textkarte steht. Die fertigen
   Mockups (.kar-nurbild) bringen ihren eigenen goldenen Rahmen mit – dort
   darf KEIN Kasten dahinter liegen, sonst sieht man ein dunkles Rechteck. */
.kar-abo .kar-karte-innen:not(.kar-nurbild) {
  background: linear-gradient(180deg, #16104f 0%, #100b44 46%, #0b0738 100%);
}
.kar-abo .kar-zahl { font-size: 33px; }
.kar-abo .kar-einheit { font-size: 17px; white-space: nowrap; }
.kar-pass {
  display: flex; align-items: center; justify-content: center;
  height: 30px; margin-top: 13px;
}
.kar-pass svg {
  width: 27px; height: 27px; color: var(--stern); opacity: .55;
  filter: drop-shadow(0 2px 6px rgba(4, 8, 40, .45));
}
.kar-karte.vorne .kar-pass svg {
  opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 216, 115, .55));
}
/* „/ Monat" hinter dem grossen Preis auf der Angebotsseite. */
.einzel-intervall { font-size: 19px; font-weight: 700; color: var(--schrift-zart); }
@media (max-width: 680px) {
  .kar-abo .kar-zahl { font-size: 27px; }
  .kar-abo .kar-einheit { font-size: 15px; }
  .kar-pass { height: 22px; margin-top: 10px; }
  .kar-pass svg { width: 21px; height: 21px; }
  .einzel-intervall { font-size: 16px; }
}

/* =========================================================================
   DER KOPF ÜBER DEM GESCHENKBOX-FORMULAR
   =========================================================================
   ⚠ Es steht immer nur EIN Teil im Formular. Damit trotzdem klar ist, wo
     man gerade ist und wie viel noch kommt, sitzt oben eine Zeile mit
     Zähler, Titel des Teils und Punkten für alle Teile.
   ========================================================================= */
#box-kopf[hidden] { display: none; }
#box-kopf {
  margin: 0 0 24px; padding: 18px 20px 20px;
  border-radius: var(--r-m);
  background: linear-gradient(160deg, rgba(255, 154, 217, .16), rgba(88, 74, 196, .26));
  border: 1px solid rgba(255, 194, 232, .34);
}
.box-zaehler {
  display: flex; align-items: center; gap: 9px; margin: 0 0 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--stern);
}
.box-zaehler svg { width: 17px; height: 17px; flex: none; }
.box-teiltitel { margin: 0 0 14px; font-size: 20px; color: #fff; line-height: 1.25; }
.box-punkte { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.box-punkt {
  display: grid; place-items: center; width: 27px; height: 27px;
  border-radius: 50%; font-size: 12.5px; font-weight: 700;
  background: rgba(12, 18, 72, .5); border: 1px solid rgba(190, 205, 255, .3);
  color: var(--schrift-zart);
}
.box-punkt.fertig {
  background: rgba(255, 216, 115, .2); border-color: rgba(255, 216, 115, .6);
  color: var(--stern);
}
.box-punkt.jetzt {
  background: var(--rosa); border-color: var(--rosa); color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 154, 217, .22);
}
.box-hinweis { margin: 0; font-size: 13px; line-height: 1.55; color: var(--schrift-zart); }

/* Fortschrittsbalken statt Punkte.
   ⚠ Das Super-Abo hat 20 Teile. Zwanzig Punkte waeren auf dem Handy eine
     unlesbare Reihe – dort zeigt der Kopf einen Balken mit Prozentangabe.
     Die Punkte bleiben fuer alles bis acht Teile. */
.box-balken {
  height: 9px; border-radius: 999px; margin-bottom: 8px; overflow: hidden;
  background: rgba(12, 18, 72, .55); border: 1px solid rgba(190, 205, 255, .3);
}
.box-balken-fuell {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--stern), var(--rosa));
  transition: width .35s ease;
}
.box-anteil {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--stern);
}

/* Zurück und Weiter nebeneinander, auf dem Handy untereinander. */
.box-navi { display: grid; gap: 12px; }
@media (min-width: 620px) {
  .box-navi:has(#box-zurueck:not([hidden])) { grid-template-columns: auto 1fr; align-items: center; }
}
#box-zurueck[hidden] { display: none; }

@media (max-width: 680px) {
  #box-kopf { padding: 15px 15px 16px; margin-bottom: 20px; }
  .box-teiltitel { font-size: 17px; }
  .box-punkt { width: 24px; height: 24px; font-size: 11.5px; }
}

/* =========================================================================
   „HÖR MAL REIN" – DREI KLEINE HÖRPROBEN (nur Gute-Nacht-Geschichten)
   =========================================================================
   ⚠ WICHTIGSTE REGEL: Auf dem Handy stehen alle DREI Karten NEBENEINANDER.
     Darum drei gleich breite Spalten – auch bei 390 px. Die Karten sind
     dafür bewusst schmal und kurz gehalten.
   ⚠ Der Titel darf hoechstens drei Zeilen hoch sein, sonst werden die
     Karten unterschiedlich gross und die Reihe wirkt unruhig.
   ========================================================================= */
.hoerproben { margin: 26px 0 6px; }
.hoerproben-titel {
  margin: 0 0 4px; font-size: 21px; line-height: 1.2; color: #fff;
}
.hoerproben-unter {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--schrift-zart);
}
.probe-reihe {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-items: stretch;
}
.probe-karte {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 12px 11px 11px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255, 154, 217, .14), rgba(88, 74, 196, .20));
  border: 1px solid rgba(255, 194, 232, .30);
  box-shadow: 0 10px 22px rgba(4, 8, 40, .30);
}
.probe-name {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stern);
}
.probe-titel {
  margin: 0; font-size: 13.5px; line-height: 1.3; font-weight: 700; color: #fff;
  /* Hoechstens drei Zeilen – der Rest wird mit … abgekuerzt. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.probe-welt {
  margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--schrift-zart);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.probe-fuss {
  display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px;
}
.probe-knopf {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--rosa); color: #fff;
  box-shadow: 0 4px 12px rgba(255, 154, 217, .40);
  transition: transform .15s ease, box-shadow .15s ease;
}
.probe-knopf:hover { transform: scale(1.06); }
.probe-knopf:focus-visible { outline: 3px solid var(--rosa-hell); outline-offset: 3px; }
.probe-knopf svg { width: 16px; height: 16px; display: block; }
.probe-knopf[hidden] { display: none; }
.probe-karte.laeuft .probe-knopf {
  background: var(--stern); color: #2a1a52;
  box-shadow: 0 0 0 4px rgba(255, 216, 115, .22);
}
.probe-dauer {
  font-size: 12px; font-weight: 700; color: var(--schrift-zart); white-space: nowrap;
}

/* Handy: noch schmaler, aber weiterhin ALLE DREI nebeneinander. */
@media (max-width: 680px) {
  .hoerproben-titel { font-size: 19px; }
  .hoerproben-unter { font-size: 12.5px; margin-bottom: 11px; }
  .probe-reihe { gap: 7px; }
  .probe-karte { padding: 10px 8px 9px; border-radius: 14px; gap: 4px; }
  .probe-name { font-size: 10.5px; letter-spacing: .1em; }
  .probe-titel { font-size: 12px; -webkit-line-clamp: 3; }
  .probe-welt { font-size: 10.5px; -webkit-line-clamp: 1; }
  .probe-fuss { gap: 6px; padding-top: 6px; }
  .probe-knopf { width: 30px; height: 30px; }
  .probe-knopf svg { width: 14px; height: 14px; }
  .probe-dauer { font-size: 11px; }
}
@media (max-width: 400px) {
  .probe-karte { padding: 9px 7px 8px; }
  .probe-titel { font-size: 11.5px; }
  .probe-dauer { font-size: 10.5px; }
}

/* =========================================================================
   „BLÄTTERE DURCH EIN PACO-BILDERBUCH" – KARTE AUF DER ANGEBOTSSEITE
   =========================================================================
   ⚠ Nur auf den vier Bilderbuch-Angebotsseiten. Die Karte ist klein und
     ruhig – sie soll neugierig machen, nicht den Preis verdrängen.
   ⚠ Die Reihe ist schon für DREI Beispielbücher gebaut. Solange nur eines
     aktiv ist, steht es allein links und wird nicht breitgezogen.
   ========================================================================= */
.leseprobe { margin: 26px 0 6px; }
.leseprobe-titel {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 22px; margin: 0 0 4px; color: var(--schrift);
}
.leseprobe-unter {
  font-size: 13.5px; color: var(--schrift-leise); margin: 0 0 13px; line-height: 1.5;
}

/* ⚠ ALLE Beispielbücher stehen NEBENEINANDER – auch auf dem Handy bei
   390 Punkten. Die Anzahl der Spalten kommt aus dem Bauplan
   (--lp-anzahl), damit hier keine Zahl steht, die irgendwann nicht mehr
   stimmt. Deshalb sind die Karten bewusst schmal und hochkant:
   Cover oben, Titel, Seitenzahl, kleiner Knopf. */
.leseprobe-reihe {
  display: grid;
  grid-template-columns: repeat(var(--lp-anzahl, 3), minmax(0, 1fr));
  gap: 12px;
  /* ⚠ „stretch": alle Karten werden so hoch wie die hoechste. Sonst
     rutscht der Knopf bei einem laengeren Titel tiefer als bei den
     anderen und die Reihe sieht schief aus. */
  align-items: stretch;
}
.lp-karte {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 7px; min-width: 0; padding: 11px 9px 12px;
  background: var(--karte); border: 1px solid var(--karte-rand);
  border-radius: var(--r-m); box-shadow: var(--schatten);
}
/* ⚠ Feste Form 3:4 mit „contain": die drei Cover haben leicht
   verschiedene Seitenverhältnisse. So stehen die Titel trotzdem auf
   einer Linie – und es wird nichts vom Bild abgeschnitten. */
.lp-cover {
  width: 100%; aspect-ratio: 3 / 4; cursor: pointer; line-height: 0;
  border-radius: 9px; overflow: hidden;
  box-shadow: 0 6px 16px -6px rgba(4, 8, 40, .9), 0 0 0 1px rgba(255, 216, 115, .35);
  transition: transform .16s ease;
}
.lp-cover:hover { transform: translateY(-2px) scale(1.02); }
.lp-cover img { width: 100%; height: 100%; display: block; object-fit: contain; }
.lp-titel {
  font-family: 'Baloo 2', system-ui, sans-serif; font-size: 14px; line-height: 1.2;
  margin: 0; color: var(--schrift); min-width: 0;
  /* Höchstens drei Zeilen – sonst werden die Karten unterschiedlich hoch. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; hyphens: auto;
}
.lp-zahl {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--stern); white-space: nowrap;
}
.lp-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: auto; padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #2a1a52;
  background: linear-gradient(135deg, var(--stern), #ffb9e4);
  box-shadow: 0 6px 16px -6px rgba(255, 216, 115, .8);
  transition: transform .15s ease;
}
.lp-knopf:hover { transform: translateY(-1px); }
.lp-knopf:focus-visible { outline: 3px solid var(--rosa-hell); outline-offset: 3px; }
.lp-knopf svg { width: 13px; height: 13px; flex: none; }
/* Lange Beschriftung am Rechner, kurze auf dem Handy. */
.lp-eng { display: none; }

@media (max-width: 860px) {
  .lp-titel { font-size: 13px; }
}
@media (max-width: 680px) {
  .leseprobe-titel { font-size: 19px; }
  .leseprobe-unter { font-size: 12.5px; margin-bottom: 11px; }
  .leseprobe-reihe { gap: 7px; }
  .lp-karte { gap: 5px; padding: 8px 6px 9px; border-radius: 14px; }
  .lp-titel { font-size: 11.5px; line-height: 1.18; }
  .lp-zahl { font-size: 10px; }
  .lp-knopf { padding: 5px 9px; font-size: 11.5px; gap: 3px; }
  .lp-knopf svg { width: 11px; height: 11px; }
  .lp-breit { display: none; }
  .lp-eng { display: inline; }
}
@media (max-width: 400px) {
  .leseprobe-reihe { gap: 6px; }
  .lp-karte { padding: 7px 5px 8px; }
  .lp-titel { font-size: 11px; }
  .lp-knopf { padding: 5px 7px; font-size: 11px; }
}

/* =========================================================================
   DER VOLLBILD-BUCHLESER
   =========================================================================
   ⚠ Liegt über allem (position: fixed) und bringt seinen eigenen
     Nachthimmel mit – die Seite darunter scrollt nicht mit, solange er
     offen ist (body bekommt dafür die Klasse „buch-offen").

   ⚠ DIE GRÖSSE DER BUCHSEITEN WIRD GERECHNET, NICHT GERATEN.
     paco.js misst die freie Fläche und setzt --bl-breite/--bl-hoehe.
     Dadurch passt das Buch bei 390 px genauso wie bei 1440 px, und der
     Text auf den Seiten bleibt lesbar. Wird eine Doppelseite zu schmal,
     schaltet das Skript selbst auf eine grosse Einzelseite um.

   ⚠ Die Buchseiten selbst bekommen KEINE Effekte übergelegt. Funkeln,
     Wolken und Glühen liegen ausschliesslich im Hintergrund daneben.
   ========================================================================= */
body.buch-offen { overflow: hidden; }
/* ⚠ Der Musikschalter der Website liegt sonst ueber dem Buch – auf dem
   Handy genau auf dem Knopf „Weiter". Solange das Buch offen ist, gilt
   der Ton-Schalter IM Leser. */
body.buch-offen .tonschalter { display: none; }

.buchleser {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 8%, #22307e 0%, #131a5c 45%, #080c36 100%);
  overscroll-behavior: contain; touch-action: pan-y;
  opacity: 0; transition: opacity .28s ease;
}
.buchleser[hidden] { display: none; }
.buchleser.da { opacity: 1; }

/* ---------- Der Nachthimmel im Leser ---------- */
.bl-himmel { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bl-mond {
  position: absolute; top: 12%; right: 6%; width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, rgba(255, 246, 216, .95), rgba(255, 223, 154, .55) 42%, rgba(255, 216, 115, 0) 70%);
  opacity: .34; filter: blur(2px);
}
.bl-wolke {
  position: absolute; border-radius: 50%; filter: blur(34px);
  background: radial-gradient(circle, rgba(176, 140, 255, .55), rgba(176, 140, 255, 0) 70%);
}
.bl-wolke.w1 { width: 62vw; height: 40vh; left: -16vw; bottom: -12vh; animation: bl-treiben 34s ease-in-out infinite; }
.bl-wolke.w2 { width: 54vw; height: 34vh; right: -14vw; top: -8vh; animation: bl-treiben 44s ease-in-out infinite reverse; }
@keyframes bl-treiben {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(4vw, -2vh, 0); }
}
.bl-funke {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #fff3c8; box-shadow: 0 0 10px 3px rgba(255, 216, 115, .75);
  opacity: 0; animation: bl-funkeln 5.5s ease-in-out infinite;
}
.bl-funke.f1 { left: 9%;  top: 18%; animation-delay: .0s; }
.bl-funke.f2 { left: 21%; top: 68%; animation-delay: 1.1s; }
.bl-funke.f3 { left: 78%; top: 26%; animation-delay: 2.0s; }
.bl-funke.f4 { left: 88%; top: 62%; animation-delay: 3.0s; }
.bl-funke.f5 { left: 46%; top: 8%;  animation-delay: 3.8s; }
.bl-funke.f6 { left: 62%; top: 88%; animation-delay: 4.6s; }
@keyframes bl-funkeln {
  0%, 82%, 100% { opacity: 0; transform: scale(.6); }
  88%           { opacity: .95; transform: scale(1.25); }
}

/* ---------- Kopf und Fuß ---------- */
.bl-kopf, .bl-fuss {
  position: relative; z-index: 3; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px max(12px, env(safe-area-inset-left)) 10px max(12px, env(safe-area-inset-right));
  transition: opacity .35s ease;
}
.bl-kopf { justify-content: space-between; padding-top: max(10px, env(safe-area-inset-top)); }
.bl-fuss { justify-content: center; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.buchleser.ruhig .bl-kopf, .buchleser.ruhig .bl-fuss { opacity: .22; }

.bl-buchtitel {
  margin: 0; min-width: 0; font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 16px; color: var(--schrift);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bl-kopf-knoepfe { display: flex; gap: 8px; flex: none; }
.bl-rund {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px;
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--schrift); background: rgba(12, 18, 64, .62);
  border: 1px solid var(--karte-rand); backdrop-filter: blur(6px);
}
.bl-rund:hover { background: rgba(36, 50, 130, .8); }
.bl-rund:focus-visible { outline: 3px solid var(--rosa-hell); outline-offset: 2px; }
.bl-rund svg { width: 18px; height: 18px; }
.bl-rund.bl-zu { width: 38px; padding: 0; justify-content: center; }
#bl-ton .ton-aus { display: none; }
#bl-ton[aria-pressed="false"] .ton-an { display: none; }
#bl-ton[aria-pressed="false"] .ton-aus { display: block; }
#bl-ton[aria-pressed="false"] { color: var(--schrift-zart); }

.bl-knopf {
  min-width: 96px; height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--schrift);
  background: rgba(12, 18, 64, .62); border: 1px solid var(--karte-rand);
}
.bl-knopf:hover:not(:disabled) { background: rgba(36, 50, 130, .82); }
.bl-knopf:disabled { opacity: .34; cursor: default; }
.bl-knopf:focus-visible { outline: 3px solid var(--rosa-hell); outline-offset: 2px; }
.bl-zaehler {
  margin: 0; min-width: 116px; text-align: center; font-size: 13.5px; font-weight: 700;
  color: var(--stern); letter-spacing: .04em;
}

/* ---------- Die Bühne mit dem Buch ---------- */
.bl-buehne {
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 8px 26px;
  /* ⚠ Das umgeblätterte Blatt schwenkt über den Rand hinaus. Ohne diese
     Zeile könnte man die Seite seitlich schieben. */
  overflow: hidden;
}
.bl-pfeil {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--schrift);
  background: rgba(12, 18, 64, .55); border: 1px solid var(--karte-rand);
}
.bl-pfeil:hover:not(:disabled) { background: rgba(36, 50, 130, .82); }
.bl-pfeil:disabled { opacity: .28; cursor: default; }
.bl-pfeil:focus-visible { outline: 3px solid var(--rosa-hell); outline-offset: 2px; }
.bl-pfeil svg { width: 22px; height: 22px; }

/* Die Fläche des Buches. Breite und Höhe kommen gerechnet aus paco.js. */
.bl-buch {
  position: relative; flex: none;
  width: var(--bl-breite, 320px); height: var(--bl-hoehe, 400px);
  perspective: 1800px; perspective-origin: 50% 50%;
  touch-action: pan-y;
}

/* Eine einzelne Buchseite. Immer das ganze Bild, nie beschnitten. */
.bl-seite {
  position: absolute; top: 0; height: 100%; overflow: hidden;
  background: #0d1444; border-radius: 6px;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .95);
}
.bl-seite img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bl-buch[data-modus="einzel"] .bl-seite { left: 0; width: 100%; border-radius: 10px; }
.bl-buch[data-modus="doppel"] .bl-seite.links  { left: 0;   width: 50%; border-radius: 10px 3px 3px 10px; }
.bl-buch[data-modus="doppel"] .bl-seite.rechts { left: 50%; width: 50%; border-radius: 3px 10px 10px 3px; }
.bl-buch[data-modus="doppel"] .bl-seite.leer { background: transparent; box-shadow: none; }

/* ⚠ Solange das Cover noch geladen wird, steht dort ein ruhiges
   Schimmern statt einer schwarzen Flaeche. Gemessen: bei langsamer
   Verbindung sah man sonst beim Oeffnen ein paar Augenblicke lang ein
   leeres dunkles Rechteck. */
.bl-buch.laedt .bl-seite::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 62%);
  background-size: 260% 100%;
  animation: bl-schimmern 1.35s linear infinite;
}
@keyframes bl-schimmern { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .bl-buch.laedt .bl-seite::before { animation: none; } }

/* Der Buchrücken in der Mitte – nur bei der Doppelseite. */
.bl-buch[data-modus="doppel"]::after {
  content: ''; position: absolute; top: 2%; bottom: 2%; left: calc(50% - 9px); width: 18px;
  pointer-events: none; z-index: 4; border-radius: 2px;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 42%,
                                     rgba(0,0,0,.52) 50%, rgba(0,0,0,.42) 58%, rgba(0,0,0,0) 100%);
}

/* ---------- Das umblätternde Blatt ---------- */
/* ⚠ Genau EIN Blatt bewegt sich. Vorderseite ist die Seite, die man
   gerade sieht, Rückseite die, die darunter auftaucht. Der Schatten
   wandert mit dem Winkel – dadurch sieht es aus wie Papier. */
.bl-blatt {
  position: absolute; top: 0; height: 100%; z-index: 6;
  transform-style: preserve-3d; will-change: transform;
  pointer-events: none;
}
.bl-blatt[hidden] { display: none; }
.bl-blatt.weich { transition: transform .62s cubic-bezier(.34, .05, .3, 1); }
.bl-buch[data-modus="einzel"] .bl-blatt { left: 0; width: 100%; }
.bl-buch[data-modus="doppel"] .bl-blatt.vor   { left: 50%; width: 50%; transform-origin: left center; }
.bl-buch[data-modus="doppel"] .bl-blatt.zurck { left: 0;   width: 50%; transform-origin: right center; }
.bl-buch[data-modus="einzel"] .bl-blatt.vor   { transform-origin: left center; }
.bl-buch[data-modus="einzel"] .bl-blatt.zurck { transform-origin: right center; }

.bl-flaeche {
  position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden;
  background: #0d1444; border-radius: 8px;
  box-shadow: 0 20px 55px -20px rgba(0, 0, 0, .95);
}
.bl-flaeche img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bl-flaeche.hinten { transform: rotateY(180deg); }
/* Die blanke Rückseite eines Blattes – nur auf dem Handy sichtbar, wo es
   keine gegenüberliegende Seite gibt. */
.bl-flaeche.papier {
  background: linear-gradient(120deg, #efe6ff 0%, #dcd2f6 48%, #cfc4ee 100%);
}
/* Der wandernde Schatten. Liegt NUR auf dem Blatt, das sich bewegt. */
.bl-flaeche::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--bl-schatten, 0);
  background: linear-gradient(var(--bl-winkel, 90deg),
              rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 34%, rgba(255,255,255,.10) 72%, rgba(0,0,0,.30) 100%);
}

/* ---------- Cover und Schlussansicht ---------- */
/* ⚠ Der Hinweis liegt UNTER dem Buch in der Bühne, nicht auf dem Cover.
   Die gelieferte Buchseite bleibt dadurch vollständig unangetastet. */
.bl-cover-hinweis {
  position: absolute; left: 0; right: 0; top: var(--bl-hinweis, auto); bottom: 4px; z-index: 5;
  margin: 0; text-align: center; font-size: 13px; color: var(--schrift-leise);
  animation: bl-atmen 2.8s ease-in-out infinite;
}
.bl-cover-hinweis[hidden] { display: none; }
@keyframes bl-atmen { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.bl-ende {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 11px; text-align: center;
  padding: 24px 20px; border-radius: 10px;
  background: linear-gradient(160deg, rgba(38, 30, 96, .96), rgba(14, 18, 68, .96));
  border: 1px solid rgba(255, 216, 115, .42);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .95);
  overflow: auto;
}
.bl-ende h3 {
  font-family: 'Baloo 2', system-ui, sans-serif; margin: 0;
  font-size: clamp(19px, 3.4vw, 27px); color: var(--stern);
}
.bl-ende p { margin: 0; font-size: clamp(13px, 2.2vw, 16px); color: var(--schrift); line-height: 1.55; max-width: 34ch; }
.bl-ende .klein { font-size: clamp(11.5px, 1.8vw, 13px); color: var(--schrift-zart); max-width: 38ch; }
.bl-ende .knopf { margin-top: 3px; }

/* ---------- Grössen ---------- */
@media (max-width: 680px) {
  .bl-buchtitel { font-size: 14px; }
  .bl-rund .bl-wort { display: none; }
  .bl-rund { padding: 0 11px; }
  .bl-knopf { min-width: 78px; height: 38px; font-size: 13px; padding: 0 12px; }
  .bl-zaehler { min-width: 92px; font-size: 12.5px; }
  /* ⚠ Auf dem Handy stehen die Pfeile ÜBER den Rändern des Buches, nicht
     daneben. Nebeneinander fraßen sie 100 der 390 Bildschirmpunkte – die
     Buchseite war dadurch nur 274 statt 366 Punkte breit und der Text
     darauf unnötig klein. Gewischt wird hier ohnehin. */
  .bl-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 36px; height: 36px; background: rgba(8, 12, 44, .62);
  }
  .bl-pfeil-links  { left: 3px; }
  .bl-pfeil-rechts { right: 3px; }
  /* Sie liegen ueber dem Buch – abgeschaltet waeren sie nur im Weg. */
  .bl-pfeil:disabled { visibility: hidden; }
  .bl-pfeil svg { width: 18px; height: 18px; }
  .bl-buehne { gap: 0; padding: 0 4px 24px; }
}

/* ⚠ Wer weniger Bewegung eingestellt hat, bekommt sie auch hier nicht:
   kein Funkeln, keine Wolken – und das Blatt wechselt ruhig statt zu
   drehen. Bedienbar bleibt alles unverändert. */
@media (prefers-reduced-motion: reduce) {
  .bl-funke, .bl-wolke, .bl-cover-hinweis { animation: none; }
  .bl-funke { opacity: .5; }
  .bl-blatt.weich { transition: opacity .2s linear; }
  .buchleser { transition: none; }
}

/* =========================================================================
   „HÖR DIR EIN PERSÖNLICHES PACO-LIED AN" – DIE LIEDKARTEN
   =========================================================================
   ⚠ Nur auf den vier Angebotsseiten der Kinderlieder.

   ⚠ Sie sehen bewusst ANDERS aus als die Hörproben der Geschichten
     (.probe-karte): dunkles Nachtblau mit Lila, ein Goldrand, eine Note
     und zwei Funken im Hintergrund, rosa-goldener Abspielknopf. Nicht
     verwechseln – das sind zwei verschiedene Bausteine.

   ⚠ So viele Spalten, wie es Lieder gibt (--lied-anzahl kommt aus dem
     Bauplan). Bei drei Liedern stehen sie NEBENEINANDER, auch auf dem
     Handy bei 390 Punkten. Bei einem Lied bleibt die Karte trotzdem
     schmal – sie soll neugierig machen, nicht die Seite beherrschen.

   ⚠ Die Tonlinie bewegt sich NUR, solange wirklich etwas laeuft
     (.laeuft). Eine dauerhaft zappelnde Grafik waere auf einer
     Einschlaf-Website genau das Falsche.
   ========================================================================= */
.liedproben { margin: 26px 0 6px; }
.liedproben-titel {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 22px; margin: 0 0 4px; color: var(--schrift);
}
.liedproben-unter {
  font-size: 13.5px; color: var(--schrift-leise); margin: 0 0 13px; line-height: 1.5;
}
.lied-reihe {
  display: grid;
  grid-template-columns: repeat(var(--lied-anzahl, 3), minmax(0, 1fr));
  gap: 12px; align-items: stretch;
}
.lied-karte {
  position: relative; overflow: hidden; min-width: 0; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; padding: 13px 11px 12px;
  border-radius: var(--r-m);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(176, 140, 255, .40) 0%, rgba(176, 140, 255, 0) 58%),
    linear-gradient(165deg, rgba(38, 30, 110, .94), rgba(13, 18, 68, .96));
  border: 1px solid rgba(255, 216, 115, .38);
  box-shadow: var(--schatten), 0 0 26px -10px rgba(176, 140, 255, .55);
}
/* Note und Funken liegen HINTER dem Text und fangen keine Klicks ab. */
.lied-note {
  position: absolute; right: -10px; top: -8px; width: 62px; height: 62px;
  color: rgba(255, 216, 115, .16); pointer-events: none;
  transform: rotate(12deg);
}
.lied-note svg { width: 100%; height: 100%; }
.lied-funke {
  position: absolute; width: 4px; height: 4px; border-radius: 50%; pointer-events: none;
  background: #fff3c8; box-shadow: 0 0 8px 2px rgba(255, 216, 115, .7);
  opacity: 0; animation: lied-funkeln 5s ease-in-out infinite;
}
.lied-funke.f1 { left: 12%; top: 16%; animation-delay: .4s; }
.lied-funke.f2 { right: 16%; bottom: 22%; animation-delay: 2.6s; }
@keyframes lied-funkeln {
  0%, 84%, 100% { opacity: 0; transform: scale(.6); }
  90%           { opacity: .9; transform: scale(1.3); }
}

.lied-kategorie {
  margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stern);
}
.lied-titel {
  font-family: 'Baloo 2', system-ui, sans-serif; font-size: 15px; line-height: 1.2;
  margin: 0; color: var(--schrift); min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; hyphens: auto;
}
.lied-fuer {
  margin: 0; font-size: 11.5px; color: var(--rosa-hell); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* ---------- Die Tonlinie ---------- */
.lied-wellen {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  height: 16px; margin: 3px 0 1px;
}
.lied-wellen span {
  width: 3px; border-radius: 2px; height: 4px;
  background: linear-gradient(180deg, var(--rosa-hell), var(--rosa));
  opacity: .45; transition: height .2s ease, opacity .2s ease;
}
.lied-karte.laeuft .lied-wellen span {
  opacity: 1;
  animation: lied-welle .9s ease-in-out infinite alternate;
  animation-delay: calc(var(--w) * .11s);
}
@keyframes lied-welle { from { height: 3px; } to { height: 16px; } }

/* ---------- Der Abspielknopf ---------- */
.lied-knopf {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  margin-top: 2px; border: 0; border-radius: 50%; cursor: pointer;
  color: #2a1a52; background: linear-gradient(135deg, var(--stern), var(--rosa));
  box-shadow: 0 6px 18px -6px rgba(255, 154, 217, .85);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lied-knopf:hover { transform: scale(1.06); }
.lied-knopf:focus-visible { outline: 3px solid var(--rosa-hell); outline-offset: 3px; }
.lied-knopf svg { width: 20px; height: 20px; display: block; }
.lied-knopf [hidden] { display: none; }
.lied-karte.laeuft .lied-knopf {
  box-shadow: 0 0 0 5px rgba(255, 216, 115, .20), 0 6px 18px -6px rgba(255, 154, 217, .85);
}

.lied-zeit {
  margin: 1px 0 0; font-size: 11.5px; font-weight: 700; color: var(--schrift-zart);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lied-balken {
  width: 100%; height: 4px; border-radius: 2px; margin-top: 5px;
  background: rgba(255, 255, 255, .13); overflow: hidden;
}
.lied-balken span {
  display: block; height: 100%; width: var(--fortschritt, 0%);
  border-radius: 2px; background: linear-gradient(90deg, var(--stern), var(--rosa));
  transition: width .2s linear;
}

/* Handy: schmaler, aber bei drei Liedern weiterhin ALLE nebeneinander. */
@media (max-width: 680px) {
  .liedproben-titel { font-size: 19px; }
  .liedproben-unter { font-size: 12.5px; margin-bottom: 11px; }
  .lied-reihe { gap: 7px; }
  .lied-karte { gap: 4px; padding: 10px 7px 10px; border-radius: 14px; }
  .lied-note { width: 46px; height: 46px; right: -8px; top: -6px; }
  .lied-kategorie { font-size: 9px; letter-spacing: .09em; }
  .lied-titel { font-size: 12.5px; }
  .lied-fuer { font-size: 10px; }
  .lied-wellen { height: 12px; gap: 1.5px; }
  .lied-wellen span { width: 2.5px; }
  @keyframes lied-welle { from { height: 3px; } to { height: 12px; } }
  .lied-knopf { width: 40px; height: 40px; }
  .lied-knopf svg { width: 17px; height: 17px; }
  .lied-zeit { font-size: 10px; }
}
@media (max-width: 400px) {
  .lied-reihe { gap: 6px; }
  .lied-karte { padding: 9px 5px 9px; }
  .lied-titel { font-size: 12px; }
  .lied-fuer { font-size: 9.5px; }
  .lied-zeit { font-size: 9.5px; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt eine ruhige Tonlinie. */
@media (prefers-reduced-motion: reduce) {
  .lied-karte.laeuft .lied-wellen span { animation: none; height: 10px; }
  .lied-funke { animation: none; opacity: .5; }
}

/* =========================================================================
   DIE RECHTSZEILE AM ENDE DER STARTSEITE
   =========================================================================
   ⚠ Sie ist das EINZIGE, was unter dem letzten Karussell steht. Impressum
     und Datenschutzerklärung müssen in Deutschland von jeder Seite aus
     unmittelbar erreichbar sein; vorher führte von der Startseite kein
     einziger Weg dorthin. Bewusst klein und ruhig – sie soll die Seite
     nicht abschließen, sondern nur vorhanden sein.
   ========================================================================= */
.recht-zeile {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  padding: 26px 16px max(26px, env(safe-area-inset-bottom));
  font-size: 12.5px;
}
.recht-zeile a {
  color: var(--schrift-zart); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.recht-zeile a:hover { color: var(--schrift); border-bottom-color: var(--karte-rand); }
.recht-zeile a:focus-visible { outline: 3px solid var(--rosa-hell); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 680px) {
  /* ⚠ Unten rechts schwebt der Musikschalter fest im Bild. Ohne diesen
     Abstand lag er am Seitenende genau auf dem letzten Link („Widerruf") –
     gemessen am 23.09.2026. Der Platz darunter ist also kein toter Raum,
     sondern die noetige Luft unter dem Schalter. */
  .recht-zeile {
    gap: 5px 14px; font-size: 12px;
    padding: 20px 14px calc(58px + env(safe-area-inset-bottom));
  }
}

/* =========================================================================
   „HEUTE FÜR DICH" – DER OBERE BEREICH DER STARTSEITE
   =========================================================================
   Gebaut nach dem Wolkenbild des Nutzers vom 24.09.2026
   (assets/bilder/heute/original/wolke-zwei-faecher.png).

   ⚠ DIE WOLKE IST DAS HAUPTELEMENT und wird NIE VERZERRT.
     Sie behaelt immer ihr Seitenverhaeltnis (1672:941). Auf schmalen
     Bildschirmen wird sie dafuer BREITER als der Bildschirm gemacht und
     ragt links und rechts hinaus – dort ist sie ohnehin nur weicher
     Nebel. Das ist der Grund fuer --wolke-breite weiter unten.

   ⚠ DIE ZWEI FÄCHER SIND AUSGEMESSEN, NICHT GESCHÄTZT.
     Im Bild liegen die goldenen Rahmen bei
        linkes Fach   x 267–814,  rechtes x 856–1406
        beide         y 295–724   (von 1672 × 941)
     Daraus werden die Prozentwerte unten. Kommt einmal eine andere
     Wolke, sind NUR diese sechs Zahlen anzupassen.
   ========================================================================= */
.heute-abschnitt {
  position: relative; overflow: hidden;
  padding-top: 14px; padding-bottom: 10px;
}
.heute-himmel { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.heute-funke {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #fff4cd; box-shadow: 0 0 10px 3px rgba(255, 216, 115, .75);
  opacity: 0; animation: heute-funkeln 6s ease-in-out infinite;
}
.heute-funke.f1 { left: 8%;  top: 22%; animation-delay: .2s; }
.heute-funke.f2 { left: 92%; top: 30%; animation-delay: 1.9s; }
.heute-funke.f3 { left: 18%; top: 82%; animation-delay: 3.4s; }
.heute-funke.f4 { left: 80%; top: 88%; animation-delay: 4.8s; }
@keyframes heute-funkeln {
  0%, 86%, 100% { opacity: 0; transform: scale(.6); }
  92%           { opacity: .95; transform: scale(1.3); }
}

/* ---------- Kopf ---------- */
.heute-kopf { position: relative; z-index: 2; text-align: center; margin-bottom: 4px; }
.heute-titel {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(30px, 7.4vw, 56px); line-height: 1.05; margin: 0 0 4px;
  color: var(--stern);
  text-shadow: 0 2px 0 rgba(90, 60, 10, .35), 0 0 34px rgba(255, 216, 115, .38);
}
.heute-unter {
  margin: 0 auto; max-width: 44ch;
  font-size: clamp(12.5px, 3.2vw, 17px); line-height: 1.45; color: var(--schrift-leise);
}

/* ---------- Die Wolke ---------- */
.heute-wolke {
  --wolke-breite: 100%;
  position: relative; z-index: 1;
  width: var(--wolke-breite);
  /* ⚠ „margin-inline: auto" zentriert NICHT, sobald etwas breiter als
     sein Platz ist – es rutscht dann einfach nach rechts. Gemessen am
     24.09.2026: das rechte Fach stand bei 390 Punkten 63 Punkte
     ausserhalb des Bildschirms. Deshalb wird die Mitte hier gerechnet. */
  margin-inline-start: calc((100% - var(--wolke-breite)) / 2);
  aspect-ratio: 1672 / 941;
  /* ⚠ Das leichte Schweben. Wird von paco.js beim Scrollen gesetzt. */
  transform: translate3d(0, var(--schweben, 0px), 0);
  will-change: transform;
}
.heute-wolke-bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; pointer-events: none;
  /* Ein Hauch Eigenleben – sehr langsam, kaum merklich. */
  animation: heute-atmen 14s ease-in-out infinite;
}
@keyframes heute-atmen {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.012) translateY(-.6%); }
}

/* ---------- Die zwei Fächer, genau auf den gemalten Rahmen ---------- */
.heute-fach {
  position: absolute; z-index: 2;
  top: 31.35%; height: 45.59%;
  display: flex; flex-direction: column; align-items: center;
  /* Innen etwas Luft, damit nichts den Goldrand beruehrt. */
  padding: 2.2% 2.4% 2.6%;
  box-sizing: border-box;
}
.heute-fach-1 { left: 15.97%; width: 32.72%; }
.heute-fach-2 { left: 51.20%; width: 32.89%; }
.heute-fach.heute-geschichte { --heute-ton: var(--stern); --heute-rand: rgba(255, 216, 115, .75); }
.heute-fach.heute-lied       { --heute-ton: #e6ccff;      --heute-rand: rgba(200, 160, 255, .75); }

/* Die Beschriftung sitzt AUF der gemalten Goldkante. */
.heute-marke {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -52%);
  display: inline-flex; align-items: center; gap: 5px; margin: 0;
  padding: clamp(3px, .7vw, 6px) clamp(7px, 1.4vw, 14px);
  border-radius: 999px; border: 1px solid var(--heute-rand);
  background: linear-gradient(180deg, rgba(38, 28, 96, .96), rgba(16, 20, 74, .96));
  box-shadow: 0 0 18px -4px var(--heute-rand);
  font-size: clamp(8.5px, 1.5vw, 13px); font-weight: 800; letter-spacing: .03em;
  line-height: 1.15; color: var(--heute-ton); white-space: nowrap; max-width: 108%;
}
.heute-marke svg { width: 1.05em; height: 1.05em; flex: none; }

.heute-inhalt {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(3px, .8vw, 9px); width: 100%; height: 100%; min-height: 0;
  padding-top: clamp(4px, 1vw, 10px);
}
.heute-bild {
  width: 100%; min-height: 0; flex: 1 1 auto;
  border-radius: clamp(7px, 1.2vw, 13px); overflow: hidden; line-height: 0;
  box-shadow: 0 6px 18px -8px rgba(2, 4, 26, .95);
}
.heute-bild img { width: 100%; height: 100%; display: block; object-fit: cover; }
.heute-name {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(11px, 2.1vw, 22px); line-height: 1.12; margin: 0;
  /* ⚠ Nur das Bild darf schrumpfen. Ohne diese Zeile wurde dem Titel auf
     dem Handy die zweite Zeile abgeschnitten. */
  flex: none; width: 100%;
  color: #fff; text-shadow: 0 1px 6px rgba(4, 6, 40, .8);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ⚠ Der Satz ist das Erste, was weichen darf: auf dem Handy ist im
   gemalten Fach kein Platz dafuer. Titel und Knopf bleiben immer. */
.heute-text {
  margin: 0; flex: none; width: 100%;
  font-size: clamp(9px, 1.25vw, 14px); line-height: 1.32;
  color: rgba(226, 232, 255, .92);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.heute-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: auto; width: 100%; box-sizing: border-box; flex: none;
  padding: clamp(4px, .9vw, 11px) clamp(6px, 1.2vw, 16px);
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; text-align: center;
  font: inherit; font-size: clamp(9px, 1.5vw, 15px); font-weight: 800; line-height: 1.1;
  color: #2a1a52;
  background: linear-gradient(135deg, #ffe9a8, var(--stern));
  box-shadow: 0 5px 16px -7px rgba(255, 216, 115, .9);
  transition: transform .15s ease;
}
.heute-fach.heute-lied .heute-knopf {
  color: #fff; background: linear-gradient(135deg, var(--lila), #c77bff);
  box-shadow: 0 5px 16px -7px rgba(176, 140, 255, .95);
}
.heute-knopf:hover { transform: translateY(-1px); }
.heute-knopf:focus-visible { outline: 3px solid var(--rosa-hell); outline-offset: 3px; }
.heute-knopf svg { width: 1.1em; height: 1.1em; flex: none; }
.heute-knopf [hidden] { display: none; }
.heute-wort { min-width: 0; }

.heute-zeit {
  margin: 2px 0 0; font-size: clamp(8.5px, 1.1vw, 12px); font-weight: 700; flex: none;
  color: rgba(226, 232, 255, .85); font-variant-numeric: tabular-nums;
}
.heute-zeit[hidden] { display: none; }
.heute-balken {
  width: 100%; height: 3px; border-radius: 2px; margin-top: 3px; flex: none;
  background: rgba(255, 255, 255, .16); overflow: hidden;
}
.heute-balken span {
  display: block; height: 100%; width: var(--fortschritt, 0%); border-radius: 2px;
  background: linear-gradient(90deg, var(--stern), var(--rosa));
  transition: width .2s linear;
}

/* ---------- Grössen ----------
   ⚠ Die Wolke wird nie gestaucht. Auf schmalen Bildschirmen wird sie
     stattdessen breiter gemacht, damit die gemalten Fächer gross genug
     bleiben; was links und rechts hinausragt, ist nur Nebel. */
@media (min-width: 1200px) { .heute-wolke { --wolke-breite: 1120px; } }
@media (max-width: 900px)  { .heute-wolke { --wolke-breite: 112%; } }
/* ⚠ GERECHNET, NICHT GERATEN: die zwei gemalten Fächer liegen zwischen
   15,97 % und 84,09 % der Wolkenbreite, nehmen also 68,1 % davon ein.
   Damit sie bei 390 Punkten vollständig ins Bild passen, darf die Wolke
   höchstens 374 / 0,681 = 549 Punkte breit sein – das sind rund 150 %
   der Inhaltsbreite. Bei 164 % ragten die Fächer seitlich hinaus. */
@media (max-width: 700px)  {
  .heute-wolke { --wolke-breite: 142%; }
  /* Im gemalten Fach ist bei dieser Breite kein Platz fuer den Satz. */
  .heute-text { display: none; }
  .heute-abschnitt { padding-bottom: 0; }
}
@media (max-width: 430px) {
  .heute-wolke { --wolke-breite: 146%; }
}

@media (prefers-reduced-motion: reduce) {
  .heute-funke { animation: none; opacity: .5; }
  .heute-wolke { transform: none; }
  .heute-wolke-bild { animation: none; }
}
}