/* ==========================================================================
   unserkinderbuch.de — DESIGN SYSTEM
   Statisches CSS, keine Abhaengigkeiten, kein Build-Step.

   Farbentscheidungen sind auf Kontrast geprueft (WCAG AA):
   - Weiss auf #B23F58 = 5.61:1  (auf #C5516B waeren es nur 4.41:1)
   - #A8384F auf Creme = 6.02:1
   - #247068 auf Creme = 5.66:1  (das alte #48B1A8 lag bei 2.48:1)
   - #2E2024 auf Creme = 14.93:1
   ========================================================================== */

:root {
  /* --- Marke -------------------------------------------------------- */
  --brand: #c5516b;            /* Signaturfarbe, nur Flaechen/Deko */
  --brand-strong: #b23f58;     /* traegt weissen Text (5.61:1) */
  --brand-deep: #a8384f;       /* Markenfarbe als Text auf Hell (6.02:1) */
  --brand-soft: #fce8ec;
  --brand-tint: rgba(197, 81, 107, 0.08);

  --teal: #247068;             /* 5.06:1 auf --teal-soft, 5.66:1 auf Creme */
  --teal-soft: #e2f2f0;

  --gold: #ffc94a;
  --gold-soft: #fff4d6;

  /* --- Flaechen ----------------------------------------------------- */
  --bg: #fff9f6;
  --bg-alt: #fdf0ec;
  --surface: #ffffff;
  --surface-raised: #ffffff;

  /* --- Text --------------------------------------------------------- */
  --ink: #2e2024;              /* 14.93:1 */
  --ink-soft: #6b565c;         /* 6.47:1  */
  --ink-muted: #7a6569;        /* 4.84–5.39:1 je nach Flaeche */
  --on-brand: #ffffff;

  /* --- Linien ------------------------------------------------------- */
  --line: #f0dcdc;
  --line-strong: #e2c4c6;

  /* --- Schrift ------------------------------------------------------ */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Barlow Condensed', 'Inter', sans-serif;

  /* Fluid Type Scale */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-lg:   clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
  --fs-xl:   clamp(1.7rem, 1.6vw + 1.15rem, 2.35rem);
  --fs-2xl:  clamp(1.8rem, 1.9vw + 1.1rem, 2.5rem);
  --fs-3xl:  clamp(2.35rem, 3.4vw + 1.25rem, 3.9rem);

  /* --- Abstaende ---------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;
  --section-y: clamp(40px, 4.4vw, 68px);

  /* --- Radien ------------------------------------------------------- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 9999px;

  /* --- Schatten ----------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(46, 32, 36, 0.06), 0 2px 8px rgba(46, 32, 36, 0.04);
  --sh-md: 0 4px 12px rgba(46, 32, 36, 0.07), 0 12px 28px -8px rgba(46, 32, 36, 0.09);
  --sh-lg: 0 8px 20px rgba(46, 32, 36, 0.08), 0 28px 60px -18px rgba(46, 32, 36, 0.16);
  --sh-brand: 0 8px 24px -6px rgba(178, 63, 88, 0.45);

  /* --- Bewegung ----------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 240ms var(--ease);
  --t-slow: 420ms var(--ease-out);
  --ease-soft: cubic-bezier(0.33, 0.02, 0, 1);

  --maxw: 1180px;
}

/* ==========================================================================
   RESET & BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;      /* Sticky-Header nicht ueber Ankern */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Auf Touchgeraeten wartet der Browser sonst 300 ms auf einen zweiten Tipp
   (Doppeltipp-Zoom). Bei Knoepfen und Links fuehlt sich das traege an.
   Zoomen bleibt ueber die Zwei-Finger-Geste erhalten. */
a, button, label, summary, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(197, 81, 107, 0.16);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { color: var(--ink-soft); text-wrap: pretty; }
a { color: var(--brand-deep); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.text-center { text-align: center; }
.section { padding-block: var(--section-y); }
.section-alt { background: var(--bg-alt); }

/* Linksbuendig und knapp: der zentrierte Kopf mit Eyebrow, Riesenueberschrift
   und Fliesstext hat je Abschnitt rund 450 px verbraucht, sechs Mal auf einer
   Seite. Links ausgerichtet liest er sich ruhiger und braucht die Haelfte. */
.section-head {
  max-width: 44rem;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.section-head p,
.subtitle {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  margin-top: var(--s-3);
  max-width: 42rem;
}

/* Ausnahme fuer Abschnitte, die bewusst mittig stehen (Abschluss-CTA). */
.section-head-center {
  margin-inline: auto;
  text-align: center;
}
.section-head-center p { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: var(--r-full);
  padding: 6px 12px;
  margin-bottom: var(--s-3);
}

/* Goldene Variante fuer das Paket-Angebot */
.eyebrow-gold { color: #7a5400; background: var(--gold-soft); }

.eyebrow svg { width: 15px; height: 15px; }

/* Kompatibilitaet mit den bestehenden Unterseiten */
.badge {
  display: inline-block;
  padding: 7px 14px;
  background: var(--teal-soft);
  color: var(--teal);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: var(--s-4);
}

/* ==========================================================================
   ZUGAENGLICHKEIT
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--brand-strong); color: #fff;
  padding: 14px 22px; font-weight: 600; text-decoration: none;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--brand-strong);
  --btn-fg: var(--on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;                /* Touch-Ziel */
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn-primary { box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-secondary {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
}
.btn-secondary:hover { border-color: var(--brand); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-deep);
  border-color: var(--brand-deep);
}
.btn-ghost:hover { background: var(--brand-tint); }

.btn-lg { min-height: 60px; padding: 18px 36px; font-size: var(--fs-md); }
.btn-full { width: 100%; }

button:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
/* Helle Glasleiste statt massivem Farbbalken. Der volle Markenbalken hat
   oben rund 90 px dauerhaft eingefaerbt und die Seite schwer wirken lassen.
   Die Glasvariante laesst den Inhalt durchscheinen und schrumpft beim
   Scrollen leicht – der Effekt, der moderne Seiten leicht wirken laesst. */
.main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base),
              box-shadow var(--t-base);
}

.main-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: rgba(46, 32, 36, 0.09);
  box-shadow: 0 1px 24px -10px rgba(46, 32, 36, 0.35);
}

/* Ohne backdrop-filter (aeltere Browser) waere die Leiste halbdurchsichtig
   und der Text schlecht lesbar – dann lieber deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .main-header { background: var(--bg); }
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
  padding-block: var(--s-2);
  transition: min-height var(--t-base);
}
.main-header.is-stuck .header-container { min-height: 56px; }

.logo-link { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; text-decoration: none; }

.logo-img {
  width: 34px; height: 34px;
  object-fit: contain;
  transition: transform var(--t-base);
}
.main-header.is-stuck .logo-img { transform: scale(0.9); }

.logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;                     /* Grundwert fuer den dunklen Footer */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.logo-text .dot { color: var(--gold); }

/* In der hellen Kopfleiste dunkel, im Footer weiss */
.main-header .logo-text { color: var(--ink); }
.main-header .logo-text .dot { color: var(--brand); }

.main-nav { display: flex; align-items: center; gap: var(--s-5); }

.main-nav a:not(.btn-nav) {
  position: relative;
  color: var(--ink-soft);          /* 6.47:1 auf --bg */
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 550;
  padding-block: 4px;
  transition: color var(--t-fast);
}
.main-nav a:not(.btn-nav):hover { color: var(--ink); }

.main-nav a:not(.btn-nav)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}

.main-nav a:not(.btn-nav):hover::after,
.main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--brand-deep); }

.btn-nav {
  background: var(--brand-strong);  /* weisser Text: 5.61:1 */
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--r-full);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 650;
  box-shadow: 0 4px 14px -4px rgba(178, 63, 88, 0.5);
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.btn-nav:hover {
  transform: translateY(-1px);
  background: var(--brand-deep);
  box-shadow: 0 8px 20px -6px rgba(178, 63, 88, 0.55);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  line-height: 0;
  color: var(--ink);
  border-radius: var(--r-sm);
}

.nav-toggle-bar {
  display: block; width: 24px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 18px 32px -12px rgba(46, 32, 36, 0.22);
    padding: var(--s-2) clamp(20px, 4vw, 32px) var(--s-5);
  }
  .main-nav.open { display: flex; }
  .main-nav a:not(.btn-nav) {
    padding: 16px 4px;
    font-size: var(--fs-md);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .main-nav a:not(.btn-nav)::after { display: none; }
  .main-nav .btn-nav { margin-top: var(--s-4); text-align: center; padding: 16px 22px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(24px, 3.5vw, 52px) clamp(32px, 4.5vw, 68px);
  overflow: hidden;
}

/* Weicher Farbverlauf im Hintergrund statt flacher Flaeche */
.hero::before {
  content: '';
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 130%;
  background:
    radial-gradient(52% 46% at 78% 18%, rgba(255, 201, 74, 0.30), transparent 68%),
    radial-gradient(46% 44% at 12% 4%, rgba(197, 81, 107, 0.20), transparent 66%),
    radial-gradient(60% 50% at 50% 100%, rgba(42, 127, 120, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero > * { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  /* Die Textspalte braucht etwas mehr Platz, damit die Vertrauenszeile in
     eine Zeile passt. Das Cover ist auf 430 px begrenzt und verliert nichts. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

.hero h1 { margin-bottom: var(--s-4); max-width: 19ch; }

.hero h1 .accent {
  color: var(--brand-deep);
  display: inline-block;
}

.hero-lead {
  font-size: var(--fs-md);
  max-width: 32rem;
  margin-bottom: var(--s-5);
}

/* --- Schnellstart direkt im Hero: der wichtigste Conversion-Hebel --- */
.quickstart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: var(--s-4) var(--s-5) var(--s-5);
  max-width: 34rem;
}

.quickstart-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.quickstart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
}

.quickstart input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-full);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.quickstart input[type="text"]::placeholder { color: var(--ink-muted); }

/* outline nur bei Maus-/Touch-Fokus unterdruecken, nie bei Tastatur */
.quickstart input[type="text"]:focus:not(:focus-visible) {
  outline: none;
}

.quickstart input[type="text"]:focus {
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px rgba(197, 81, 107, 0.35);
}

.quickstart-hint {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-top: var(--s-3);
}
.quickstart-hint svg { width: 15px; height: 15px; color: var(--teal); flex: 0 0 auto; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
  list-style: none;
}

/* Preis gehoert ueber die Falz: wer ihn erst nach fuenf Bildschirmen findet,
   rechnet mit einer Ueberraschung und springt ab. */
.hero-trust-price {
  gap: var(--s-2);
  padding: 5px 12px 5px 10px;
  background: var(--brand-soft);
  border-radius: var(--r-full);
  color: var(--brand-deep);
}
.hero-trust-price strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink);
}
.hero-trust svg { width: 18px; height: 18px; color: var(--teal); flex: 0 0 auto; }

/* --- Visual --- */
.hero-visual { position: relative; display: flex; justify-content: center; }

.hero-cover {
  position: relative;
  width: min(100%, 430px);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  transform: rotate(2deg);
  transition: transform var(--t-slow);
}
.hero-cover:hover { transform: rotate(0deg) scale(1.015); }
.hero-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Schwebende Info-Karte am Cover */
.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: 12px 16px;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
}

.hero-chip svg { width: 20px; height: 20px; color: var(--brand-deep); }
.hero-chip-play { left: -6%; bottom: 16%; }
.hero-chip-time { right: -4%; top: 12%; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Cover NACH dem Inhalt: der Schnellstart muss ohne Scrollen sichtbar sein */
  .hero-visual { order: 2; margin-top: var(--s-2); }
  .hero-cover { width: min(100%, 250px); }
  .hero-lead, .quickstart { max-width: none; }
  .hero-chip-play { left: 0; }
  .hero-chip-time { right: 0; }
}

@media (max-width: 560px) {
  .quickstart-row { grid-template-columns: 1fr; }
  .hero-chip { display: none; }
}

/* ==========================================================================
   VERTRAUENSLEISTE
   ========================================================================== */
.trust-bar { background: var(--surface); border-block: 1px solid var(--line); }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-5);
}

.trust-item { display: flex; align-items: flex-start; gap: var(--s-3); }

.trust-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.trust-icon svg { width: 22px; height: 22px; }

.trust-item strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
.trust-item span { font-size: var(--fs-sm); color: var(--ink-soft); }

/* ==========================================================================
   ABLAUF IN 3 SCHRITTEN
   ========================================================================== */
/* Ohne Kartenrahmen: die drei Schritte sind ein Ablauf, keine drei Produkte.
   Die Verbindungslinie fuellt sich beim Scrollen (siehe Bewegungsabschnitt). */
.steps {
  --steps-gap: clamp(24px, 3vw, 44px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--steps-gap);
  counter-reset: step;
  list-style: none;
}

@media (min-width: 800px) {
  /* Feste Dreierteilung statt auto-fit: nur so laesst sich ausrechnen, wo die
     Verbindungslinie enden muss. */
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* Graue Grundlinie und die farbige Linie darueber, exakt von Zahlenmitte
   zu Zahlenmitte. Die Zahl ist 44 px breit, ihre Mitte liegt bei 22 px. */
.steps::before,
.steps::after {
  content: '';
  position: absolute;
  top: 21px;
  left: 22px;
  right: calc((100% - 2 * var(--steps-gap)) / 3 - 22px);
  height: 2px;
  border-radius: 2px;
}
.steps::before,
.steps::after { z-index: 0; }
.steps::before { background: var(--line-strong); }
.steps::after  { background: var(--brand); transform-origin: left; }

/* Muss ueber der Linie liegen, sonst laeuft sie quer durch die Zahlen. */
.step { position: relative; z-index: 1; }

.step-num {
  counter-increment: step;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  width: 44px; height: 44px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-full);
  background: var(--brand-strong);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: 0 0 0 8px var(--bg);   /* schneidet die Linie sauber aus */
}
.step-num::before { content: counter(step); }

/* Kleine Zeichnung je Schritt. Freigestellte Motive, deshalb contain auf
   durchsichtigem Grund statt cover. */
.step-bild {
  display: block;
  width: 100%;
  max-width: 210px;
  height: 116px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--s-3);
}

/* Drei Cover leicht versetzt - das ist "Geschichte waehlen" ohne Worte. */
.step-stapel {
  position: relative;
  display: block;
  width: 210px;
  height: 116px;
  margin-bottom: var(--s-3);
}
.step-stapel img {
  position: absolute;
  bottom: 0;
  width: 84px; height: 88px;
  border-radius: var(--r-sm);
  object-fit: cover;
  box-shadow: var(--sh-sm);
  border: 2px solid var(--surface);
}
.step-stapel img:nth-child(1) { left: 0;    transform: rotate(-7deg); }
.step-stapel img:nth-child(2) { left: 38px; transform: rotate(2deg); }
.step-stapel img:nth-child(3) { left: 76px; transform: rotate(8deg); }

.step h3 { font-size: var(--fs-md); text-transform: none; margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-sm); margin: 0; color: var(--ink-soft); }

/* Untereinander ergibt eine waagerechte Linie keinen Sinn. Ausserdem duerfen
   die Zeichnungen kleiner sein, sonst waechst der Abschnitt am Telefon
   um mehrere hundert Pixel. */
@media (max-width: 799px) {
  .steps::before, .steps::after { display: none; }
  .step-num { margin-bottom: var(--s-2); }
  .step-bild { height: 84px; margin-bottom: var(--s-2); }
  .step-stapel { width: 152px; height: 84px; }
  .step-stapel img { width: 62px; height: 66px; }
  .step-stapel img:nth-child(2) { left: 28px; }
  .step-stapel img:nth-child(3) { left: 56px; }
}

/* ==========================================================================
   HOERBUCH-KARTEN
   ========================================================================== */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}

.book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.book-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--line-strong);
}

.book-card.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint), var(--sh-md);
}

.book-cover-wrapper { position: relative; overflow: hidden; }

.book-cover {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.book-card:hover .book-cover { transform: scale(1.04); }

.sale-flag {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 2;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-full);
  box-shadow: var(--sh-sm);
}

.info-trigger-btn {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: background var(--t-fast), transform var(--t-fast);
}
.info-trigger-btn:hover { background: #fff; transform: translateY(-1px); }
.info-trigger-btn svg { width: 15px; height: 15px; }

.book-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-4);
}

.book-tag {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.book-details h3 {
  margin: 0;
  font-size: var(--fs-md);
  text-transform: none;
  letter-spacing: 0.005em;
  line-height: 1.15;
}
/* inline-block plus Innenabstand: der Titellink ist damit hoch genug,
   um als eigenes Ziel zu gelten, nicht nur als Textzeile. */
.book-details h3 a {
  display: inline-block;
  padding-block: 3px;
  color: inherit;
  text-decoration: none;
}
.book-details h3 a:hover { color: var(--brand-deep); }

/* Zwei Zeilen reichen zum Anlesen; der ganze Text steht im Inhalts-Overlay
   und auf der Produktseite. Gleich hohe Karten beruhigen ausserdem das Raster. */
.book-details > p {
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.book-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.duration svg { width: 15px; height: 15px; }

.price { display: flex; align-items: baseline; gap: var(--s-2); }
.price-was { color: var(--ink-muted); text-decoration: line-through; font-size: var(--fs-sm); }
.price-now { color: var(--brand-deep); font-weight: 750; font-size: var(--fs-md); }

/* --- Inhalts-Overlay --- */
.book-info-overlay {
  overscroll-behavior: contain;
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--surface);
  padding: var(--s-5);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* visibility mit 0s-Dauer und Verzoegerung: beim Oeffnen schaltet sie sofort
     (sonst greift .focus() im selben Frame nicht), beim Schliessen erst nach
     dem Ausblenden, damit die Animation sichtbar bleibt. */
  transition: opacity var(--t-base), transform var(--t-base), visibility 0s linear 240ms;
}

.book-info-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-base), transform var(--t-base), visibility 0s linear 0s;
}

.info-close-btn {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg-alt);
  border: 0;
  border-radius: var(--r-full);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast);
}
.info-close-btn:hover { background: var(--brand-soft); }

.info-overlay-content h4 {
  color: var(--brand-deep);
  margin-block: var(--s-4) var(--s-2);
}
.info-overlay-content h4:first-child { margin-top: 0; }
.info-overlay-content p,
.info-overlay-content li { font-size: var(--fs-sm); color: var(--ink-soft); }
.info-overlay-content ul { padding-left: var(--s-5); }
.info-overlay-content li { margin-bottom: 6px; }

/* ==========================================================================
   KONFIGURATOR
   ========================================================================== */
.config-section { scroll-margin-top: 0; }
.config-grid { scroll-margin-top: 8px; }

.config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

/* Links untereinander die beiden Schritte, rechts der Player. Der Player
   bekommt beide Zeilen zugewiesen, damit er beim Ausfuellen mitlaeuft. */
.config-card       { grid-column: 1; grid-row: 1; }
.config-card-kauf  { grid-column: 1; grid-row: 2; }
.config-visual     { grid-column: 2; grid-row: 1 / -1; align-self: start; }

.config-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: clamp(24px, 3.5vw, 40px);
}

/* Der Player laeuft beim Ausfuellen mit: das ausgewaehlte Cover und die
   Hoerprobe bleiben im Blick, statt beim Scrollen nach oben zu verschwinden. */
.config-visual { position: sticky; top: 84px; }

.config-section .section-head { margin-bottom: var(--s-5); }
.config-section .section-head h2 { font-size: var(--fs-xl); }

.config-card > h2 { margin-bottom: var(--s-3); }
.form-desc { font-size: var(--fs-sm); margin-bottom: var(--s-6); }

/* --- Ausgewaehltes Hoerbuch --- */
.selected-story-badge {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-bottom: var(--s-6);
}

.badge-cover-mini {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.badge-cover-mini img { width: 100%; height: 100%; object-fit: cover; }

.badge-content { flex: 1; min-width: 0; }
.badge-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.badge-content h3 { font-size: var(--fs-md); margin: 0; }

.change-story-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--brand-deep);
  text-decoration: underline;
}

/* --- Formularfelder --- */
.form-group { margin-bottom: var(--s-5); }

.form-group > label,
.form-group legend {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.form-group input[type="text"] {
  width: 100%;
  min-height: 54px;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-group input[type="text"]::placeholder { color: var(--ink-muted); }

.form-group input[type="text"]:focus:not(:focus-visible) {
  outline: none;
}

.form-group input[type="text"]:focus {
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px rgba(197, 81, 107, 0.35);
}

.form-group input.input-error,
.gender-radio-group.input-error .gender-custom-radio { border-color: #c0392b; }

.error-hint {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #c0392b;
  margin-top: var(--s-2);
}
.error-hint.visible { display: flex; }

/* Bestaetigung der automatischen Geschlechtserkennung. Bewusst gedaempft und
   ohne Markenfarbe: der Hinweis soll lesbar sein, aber nicht wie ein Erfolg
   aussehen, den man wegklickt. Er bittet ums Nachsehen, und genau das muss
   ankommen - eine uebersehene Fehlauswahl vertont das Hoerbuch falsch. */
.gender-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: var(--s-2);
}
.gender-hint svg { flex: none; }

/* --- Geschlechtswahl --- */
.gender-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.gender-label { cursor: pointer; }

.gender-label input[type="radio"] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.gender-custom-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 54px;
  padding: 14px;
  background: var(--bg);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.gender-label:hover .gender-custom-radio { border-color: var(--brand); }

.gender-label input[type="radio"]:checked + .gender-custom-radio {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-deep);
}

.gender-label input[type="radio"]:focus-visible + .gender-custom-radio {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* --- Hoerprobe --- */
.preview-action-row { margin-bottom: var(--s-4); }

.btn-preview { width: 100%; }

.preview-loader-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
}

.mini-progress-bar {
  flex: 1;
  height: 10px;
  background: var(--bg-alt);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  border-radius: var(--r-full);
  transition: width 120ms linear;
}

#preview-progress-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-soft);
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.status-message {
  display: none;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: var(--s-5);
}
.status-message.visible { display: flex; }
.status-message.info { background: var(--teal-soft); color: #1d5a55; }
.status-message.error { background: #fdecea; color: #a02c1e; }

/* --- Bestelluebersicht --- */
/* Kleine Wegmarken im Formular. Ohne sie wirkt der Block nach dem Sprung aus
   dem Hero wie eine Wand aus Feldern - man sieht nicht, wo man steht. */
.form-step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.form-step + .form-step,
.order-summary + .form-step { margin-top: var(--s-5); }

.form-step span {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--brand-strong);
  color: #fff;
  font-size: 0.85rem;
}

.form-step::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Zweite Marke bekommt Luft nach oben, weil davor die Statusmeldung steht */
.status-message + .form-step { margin-top: var(--s-5); }

.order-summary {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}

.order-summary dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--s-4);
  font-size: var(--fs-sm);
  margin: 0;
}
.order-summary dt { color: var(--ink-soft); }
.order-summary dd { margin: 0; color: var(--ink); font-weight: 650; text-align: right; }

/* --- Einwilligungen --- */
.consent-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.consent-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}

.consent-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 24px; height: 24px;        /* WCAG 2.2: Mindestgroesse fuer Ziele */
  margin-top: 0;
  accent-color: var(--brand-strong);
  cursor: pointer;
}
.consent-item a { color: var(--brand-deep); font-weight: 650; }
.consent-group.input-error .consent-item { color: #a02c1e; }

/* --- Kauf-Fusszeile --- */
.buy-action-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.price-display { display: flex; flex-direction: column; }
.total-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.total-was { color: var(--ink-muted); text-decoration: line-through; font-size: var(--fs-sm); }
.total-price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1;
}
.vat-hint { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 2px; }

.btn-checkout { flex: 1 1 260px; position: relative; }

.checkout-spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-checkout.loading .checkout-spinner { display: block; }
.btn-checkout.loading .checkout-text { opacity: 0.75; }

@keyframes spin { to { transform: rotate(360deg); } }

.checkout-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  list-style: none;
}
.checkout-reassure li { display: flex; align-items: center; gap: 6px; }
.checkout-reassure svg { width: 14px; height: 14px; color: var(--teal); }

/* ==========================================================================
   PLAYER
   ========================================================================== */
.player-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
}

/* Cover, Titel und Steuerung liegen nebeneinander statt gestapelt. Vorher war
   allein das Cover 504 px hoch, die Abspieltaste lag dadurch erst bei 988 px –
   wer aus dem Hero hierher sprang, sah den Player gar nicht. */
.player-kopf {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
}

.player-cover {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.player-cover img { width: 92px; height: 92px; aspect-ratio: 1; object-fit: cover; }

.player-floating-tag {
  display: inline-block;
  margin-bottom: 5px;
  background: var(--teal-soft);
  border-radius: var(--r-full);
  padding: 4px 11px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Kurze Erklaerung unter der Karte. Fuellt am Schreibtisch den Platz neben
   dem Formular und beantwortet die Frage, was da eigentlich abgespielt wird. */
.player-hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-inline: var(--s-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.player-hinweis svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--teal); margin-top: 2px; }

.player-meta { min-width: 0; }
.player-meta h3 { font-size: var(--fs-md); text-transform: none; margin-bottom: 2px; }
.player-meta p { font-size: var(--fs-sm); line-height: 1.4; margin: 0; color: var(--ink-soft); }

.custom-audio-player { padding: 0 var(--s-4) var(--s-4); }

.waveform-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 40px;
  margin-bottom: var(--s-3);
}

.waveform-container .bar {
  width: 4px;
  height: 20%;
  background: var(--line-strong);
  border-radius: var(--r-full);
  transition: background var(--t-base);
}

.custom-audio-player.playing .bar {
  background: var(--brand);
  animation: wave 1s ease-in-out infinite;
}
.custom-audio-player.playing .bar:nth-child(2n) { animation-delay: 0.12s; }
.custom-audio-player.playing .bar:nth-child(3n) { animation-delay: 0.24s; }
.custom-audio-player.playing .bar:nth-child(5n) { animation-delay: 0.36s; }

@keyframes wave {
  0%, 100% { height: 22%; }
  50% { height: 92%; }
}

.player-controls { display: flex; align-items: center; gap: var(--s-4); }

.player-play-btn {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--brand-strong);
  color: #fff;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  box-shadow: var(--sh-brand);
  transition: transform var(--t-fast), background var(--t-fast);
}
.player-play-btn svg { width: 22px; height: 22px; }
.player-play-btn:hover:not(:disabled) { transform: scale(1.06); background: var(--brand-deep); }
.player-play-btn:disabled { background: var(--line-strong); box-shadow: none; color: var(--ink-muted); }

.timeline-slider-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.timeline-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 44px;               /* Trefferflaeche; die Spur zeichnen die Pseudoelemente */
  background: transparent;
  cursor: pointer;
}

.timeline-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--bg-alt);
  border-radius: var(--r-full);
}

.timeline-slider::-moz-range-track {
  height: 6px;
  background: var(--bg-alt);
  border-radius: var(--r-full);
}
.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -6px;           /* (6 px Spur - 18 px Daumen) / 2 */
  width: 18px; height: 18px;
  background: var(--brand-strong);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: var(--sh-sm);
}
.timeline-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--brand-strong);
  border-radius: 50%;
  border: 2px solid #fff;
}
.timeline-slider:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 980px) {
  .config-grid { grid-template-columns: 1fr; }
  /* Reihenfolge kommt aus dem Markup: Schritt 1, Player, Schritt 2.
     Frueher stand der Player mit order:-1 GANZ oben - man sah zuerst einen
     leeren Abspieler und musste zum Namensfeld scrollen. */
  .config-card,
  .config-card-kauf,
  .config-visual { grid-column: 1; grid-row: auto; }
  .config-visual { position: static; }
}

/* ==========================================================================
   ANLAESSE (Streifen)
   Vorher fuenf Bento-Kacheln mit je einem Satz. Auf dem Telefon lagen die
   untereinander und ergaben 975 px fuer eine einzige Aussage. Jetzt eine
   Reihe von Stichworten, die umbricht.
   ========================================================================== */
.occasion-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.occasion-strip li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  white-space: nowrap;
}

.occasion-strip svg {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  color: #8a6410;
}

/* Abschnitt ohne eigene Aussage ausser der Ueberschrift: halber Rand. */
.section-schmal { padding-block: calc(var(--section-y) * 0.6); }
.section-schmal .section-head { margin-bottom: var(--s-4); }

/* ==========================================================================
   WARUM WIR
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.why-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0;
  background: none;
  border: 0;
}

.why-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--teal-soft);
  color: var(--teal);
}
.why-icon svg { width: 21px; height: 21px; }

.why-item h3 { font-size: var(--fs-md); text-transform: none; margin: 0; }
.why-item p { font-size: var(--fs-sm); margin: 0; color: var(--ink-soft); }

/* Am Telefon standen hier neun gestapelte Karten mit je 200 px Hoehe.
   Als Liste mit Symbol links braucht derselbe Inhalt ein Drittel davon
   und liest sich beim Daumenscrollen deutlich schneller. */
@media (max-width: 680px) {
  .occasions,
  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }

  .occasion,
  .why-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "symbol titel"
      "symbol text";
    column-gap: var(--s-4);
    row-gap: 2px;
    align-items: start;
    padding: var(--s-4);
  }

  .occasion-icon,
  .why-icon { grid-area: symbol; width: 40px; height: 40px; }
  .occasion-icon svg,
  .why-icon svg { width: 20px; height: 20px; }

  .occasion h3, .why-item h3 { grid-area: titel; align-self: center; }
  .occasion p,  .why-item p  { grid-area: text; }

  .occasion:hover { transform: none; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
  gap: 0 clamp(28px, 4vw, 64px);
}

/* Acht weisse Kaesten mit fetter Schrift waren mehr Rahmen als Inhalt.
   Jetzt nur noch Trennlinien - ruhiger und deutlich flacher. */
.faq-item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.faq-item[open] { border-bottom-color: var(--line-strong); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 2px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  min-height: 52px;
}
.faq-item summary:hover { color: var(--brand-deep); }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-right: 2px solid var(--brand-deep);
  border-bottom: 2px solid var(--brand-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq-content { padding: 0 2px var(--s-4); }
.faq-content p { font-size: var(--fs-sm); margin: 0; color: var(--ink-soft); max-width: 60ch; }

/* ==========================================================================
   ABSCHLUSS-CTA
   ========================================================================== */
.final-cta { padding-block: var(--section-y); }

.final-cta-inner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-strong), var(--brand-deep));
  border-radius: var(--r-xl);
  padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px);
  text-align: center;
  box-shadow: var(--sh-lg);
}

.final-cta-inner::before {
  content: '';
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 0%, rgba(255, 201, 74, 0.12), transparent 70%);
  pointer-events: none;
}

.final-cta-inner > * { position: relative; }
.final-cta-inner h2 { color: #fff; margin-bottom: var(--s-4); }
.final-cta-inner p { color: #fff; font-size: var(--fs-md); max-width: 38rem; margin-inline: auto; margin-bottom: var(--s-6); }

.final-cta .btn-secondary { --btn-bg: #fff; border-color: #fff; }

/* ==========================================================================
   DAUERHAFTE KAUFLEISTE

   Bisher nur unter 780 px sichtbar. Am Schreibtisch war der Kaufpunkt damit
   nach dem Scrollen gar nicht mehr erreichbar. Jetzt auf allen Breiten:
   am Telefon als Leiste am unteren Rand, am Schreibtisch als schwebende
   Pille in der Mitte. ui.js blendet sie nach dem Hero ein und im
   Konfigurator wieder aus – dort steht der echte Knopf.
   (Klassenname aus Ruecksicht auf ui.js unveraendert.)
   ========================================================================== */
.mobile-cta {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: auto;
  max-width: calc(100% - 32px);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  box-shadow: var(--sh-lg);
  padding: 9px 9px 9px 22px;
  opacity: 0;
  transform: translateY(150%);
  transition: transform var(--t-slow), opacity var(--t-base);
}

.mobile-cta.visible { opacity: 1; transform: none; }

/* Weicht dem Tastaturfokus aus (siehe ui.js). Schnell, damit das fokussierte
   Element nicht erst nach einer halben Sekunde frei liegt. */
.mobile-cta.is-verdeckend {
  opacity: 0;
  transform: translateY(150%);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.mobile-cta-price { display: flex; flex-direction: column; line-height: 1.2; }
.mobile-cta-price .was { font-size: var(--fs-xs); color: var(--ink-muted); text-decoration: line-through; }
.mobile-cta-price .now { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--brand-deep); }
.mobile-cta-price .hint { font-size: var(--fs-xs); color: var(--ink-soft); }

.mobile-cta .btn { min-height: 48px; white-space: nowrap; }

/* Am Telefon lieber eine volle Leiste: groessere Trefferflaeche fuer den Daumen */
@media (max-width: 620px) {
  .mobile-cta {
    left: 0; right: 0; bottom: 0;
    width: auto;
    max-width: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: var(--s-3) var(--s-4);
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
    transform: translateY(110%);
  }
  .mobile-cta.visible { transform: none; }
  .mobile-cta .btn { flex: 1; min-height: 52px; }
  body.has-mobile-cta { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: opacity var(--t-fast); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.main-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.75);
  padding-block: var(--s-7) var(--s-6);
  margin-top: auto;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5) var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Neun Hoerbuecher untereinander machen den Footer unnoetig lang.
   Die Spalte bekommt darum mehr Platz und stellt sie zweispaltig. */
@media (min-width: 1000px) {
  .footer-top { grid-template-columns: 1.35fr 2.35fr 0.9fr 1.05fr; }
  .footer-col:has(a[href^="hoerbuch-"]) ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-5);
  }
}

.footer-brand .logo-text { font-size: 1.35rem; }
.footer-brand p { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-sm); margin-top: var(--s-3); max-width: 30ch; }

.footer-col h3 { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0; }
.footer-col a {
  display: inline-block;
  /* 6 px oben und unten ergeben rund 37 px Trefferflaeche - deutlich ueber
     den geforderten 24 px, aber ohne den Footer auseinanderzuziehen. */
  padding-block: 6px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.footer-col a:hover { color: var(--gold); text-decoration: underline; }

.footer-container,
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-5);
  font-size: var(--fs-xs);
}

.footer-bottom p, .footer-container p { color: rgba(255, 255, 255, 0.6); margin: 0; }

.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer-links a {
  display: inline-block;
  padding-block: 12px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: var(--fs-xs);
}
.footer-links a:hover { color: var(--gold); text-decoration: underline; }

.main-footer .logo-text { color: #fff; }

@media (max-width: 700px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   BEWEGUNG

   Zwei Ebenen, absichtlich in dieser Reihenfolge:

   1. Grundlage: .reveal + IntersectionObserver (ui.js). Blendet ein Element
      einmalig ein. Funktioniert ueberall.
   2. Aufsatz: scrollgebundene CSS-Animationen (animation-timeline). Dabei
      haengt der Fortschritt am Scrollstand statt an einer Uhr – das ist der
      Grund, warum sich Seiten wie die von Apple "mitbewegt" anfuehlen.
      Kostet kein Skript, kein Paket und keine Bildrate.

   Ohne Unterstuetzung bleibt Ebene 1 uebrig, bei prefers-reduced-motion
   bleibt gar nichts. In beiden Faellen ist die Seite vollstaendig sichtbar.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.step.reveal { transform: none; }

/* Grundzustand der Fortschrittslinie: gefuellt, damit sie ohne Animation
   nicht unsichtbar bleibt. */
.steps::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Einblenden am Scrollstand statt per Zeitschaltung. Der Bereich
       "entry 5% cover 24%" heisst: beginnt kurz nach dem Auftauchen am
       unteren Rand, ist fertig, wenn das Element gut sichtbar ist.

       Bewusst in Langschreibweise mit ausdruecklichem
       "animation-duration: auto": bei scrollgebundenen Animationen haengt
       alles an diesem Wert, und die Kurzschreibweise laesst ihn implizit.
       Ausgeschrieben ist beim Nachlesen sofort klar, warum er auto ist. */
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
      will-change: auto;
      animation-name: einblenden;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 5% cover 24%;
    }

    /* Karten kommen eine Spur weiter von unten – das erzeugt Tiefe. */
    .book-card.reveal,
    .occasion.reveal,
    .why-item.reveal {
      animation-name: einblenden-karte;
      animation-range: entry 2% cover 22%;
    }

    /* Die Schritte duerfen sich NICHT verschieben: die Verbindungslinie
       gehoert zur Liste, nicht zum einzelnen Schritt, und wuerde sonst
       neben den Zahlen schweben. */
    .step.reveal { animation-name: einblenden-ohne-versatz; }

    /* Fortschrittslinie zwischen den drei Schritten */
    .steps::after {
      animation-name: linie-fuellen;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 45% cover 42%;
    }
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Parallaxe im Hero: Cover und die beiden Schwebe-Karten wandern beim
       Scrollen unterschiedlich schnell nach oben. Kleiner Effekt, grosse
       Wirkung – und er kostet nichts, weil der Compositor ihn allein macht. */
    .hero-visual,
    .hero-chip-time,
    .hero-chip-play {
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    .hero-visual    { animation-name: schweben-langsam; }
    .hero-chip-time { animation-name: schweben-schnell; }
    .hero-chip-play { animation-name: schweben-gegen; }
  }
}

@keyframes einblenden {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes einblenden-ohne-versatz {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes einblenden-karte {
  from { opacity: 0; transform: translateY(38px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}

@keyframes linie-fuellen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes schweben-langsam { to { transform: translateY(-38px); } }
@keyframes schweben-schnell { to { transform: translateY(-72px); } }
@keyframes schweben-gegen   { to { transform: translateY(-8px); } }

/* ==========================================================================
   RECHTSTEXTE / INHALTSSEITEN
   ========================================================================== */
.legal-section { padding-block: var(--section-y); }

.legal-content {
  max-width: 780px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: clamp(24px, 4vw, 56px);
}

.legal-content h1 { font-size: var(--fs-xl); margin-bottom: var(--s-6); }
.legal-content h2 { font-size: var(--fs-lg); color: var(--ink); margin-block: var(--s-7) var(--s-3); }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-size: var(--fs-md); margin-block: var(--s-5) var(--s-2); }
.legal-content p, .legal-content li { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--s-3); }
.legal-content ul, .legal-content ol { padding-left: var(--s-5); margin-bottom: var(--s-4); }
.legal-content li { margin-bottom: var(--s-2); }
.legal-content a:not(.btn) { color: var(--brand-deep); font-weight: 650; }
.legal-content address { font-style: normal; line-height: 1.8; color: var(--ink); font-weight: 550; }

.legal-meta { font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: var(--s-6); }

.legal-callout {
  background: var(--bg-alt);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-5);
  margin-block: var(--s-5);
}
.legal-callout p:last-child { margin-bottom: 0; }

/* ==========================================================================
   PRODUKT-EINZELSEITEN
   ========================================================================== */
.product-page { padding-block: var(--s-7) var(--section-y); }

.breadcrumb { font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: var(--s-6); }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-deep); }

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.product-cover {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  background: var(--surface);
}
.product-cover img { width: 100%; }

.product-info h1 { font-size: var(--fs-xl); margin-bottom: var(--s-3); }

.product-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-5) var(--s-2); }
.product-price-was { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink-muted); text-decoration: line-through; }
.product-price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--brand-deep); line-height: 1; }
.product-save { background: var(--gold); color: var(--ink); font-size: var(--fs-xs); font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: var(--r-full); }
.product-vat { font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: var(--s-5); }

.product-facts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-5); }
.product-fact {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 8px 16px;
  font-size: var(--fs-xs); color: var(--ink-soft);
}
.product-fact svg { width: 15px; height: 15px; color: var(--teal); }

.product-learn { background: var(--bg-alt); border-radius: var(--r-lg); padding: var(--s-5); margin-block: var(--s-5); }
.product-learn h2 { font-size: var(--fs-md); color: var(--ink); margin-bottom: var(--s-3); }
.product-learn ul { padding-left: var(--s-5); }
.product-learn li { color: var(--ink-soft); font-size: var(--fs-sm); margin-bottom: var(--s-2); }

@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; }
  .product-cover { max-width: 420px; margin-inline: auto; }
}

/* ==========================================================================
   MELDESEITEN (Danke / Abbruch)
   ========================================================================== */
.message-section { min-height: 66vh; display: grid; place-items: center; padding-block: var(--s-8); }

.message-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: clamp(28px, 4vw, 56px);
  max-width: 620px;
  width: 100%;
  text-align: center;
  margin-inline: auto;
}

.status-icon {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  font-size: 2.2rem;
  margin: 0 auto var(--s-5);
}
.status-icon.success { background: var(--teal-soft); border: 2px solid var(--teal); color: var(--teal); }
.status-icon.cancel { background: var(--brand-soft); border: 2px solid var(--brand-strong); color: var(--brand-deep); }

.message-card h1 { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.message-card p { font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.message-card .btn { margin-top: var(--s-3); }

/* ==========================================================================
   COOKIE-BANNER
   ========================================================================== */
.consent-banner {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(46, 32, 36, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: var(--s-4);
  overflow-y: auto;
}
.consent-banner.visible { display: flex; align-items: flex-end; justify-content: center; }

.consent-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: clamp(22px, 3vw, 32px);
  width: 100%;
  max-width: 620px;
  margin: auto 0 0;
}

.consent-box h2 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.consent-box p { font-size: var(--fs-sm); margin-bottom: var(--s-5); }
.consent-box a { color: var(--brand-deep); font-weight: 650; }

.consent-services {
  border-block: 1px solid var(--line);
  padding-block: var(--s-4);
  margin-bottom: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.consent-service {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}
.consent-service strong { display: block; color: var(--ink); font-size: var(--fs-sm); }
.consent-service input[type="checkbox"] {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  accent-color: var(--brand-strong); cursor: pointer;
}
.consent-service-fixed { cursor: default; }

.consent-check-fixed {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 0.8rem;
  display: grid; place-items: center;
}

.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

.consent-btn {
  min-height: 52px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  padding: 14px 20px;
  border-radius: var(--r-full);
  border: 2px solid var(--brand-strong);
  background: var(--surface);
  color: var(--brand-deep);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.consent-btn:hover { background: var(--bg-alt); transform: translateY(-1px); }
.consent-btn-accept { background: var(--brand-strong); color: #fff; }
.consent-btn-accept:hover { background: var(--brand-deep); }

.consent-actions-secondary { display: flex; justify-content: center; margin-top: var(--s-3); }

.consent-link {
  background: none; border: 0;
  min-height: 44px; padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.consent-link:hover { color: var(--brand-deep); }

@media (max-width: 520px) {
  .consent-banner { padding: 0; }
  .consent-box { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .consent-actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ANLEITUNGSSEITE
   ========================================================================== */
.anleitung-section { padding-block: var(--s-7) var(--section-y); }
.anleitung-header { margin-bottom: clamp(40px, 6vw, 72px); text-align: center; }

.steps-list { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 88px); max-width: 940px; margin-inline: auto; }

.step-item { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(28px, 4vw, 56px); }
.step-item:nth-child(even) .step-content { order: 1; }

.step-content .step-num {
  position: static;
  width: auto; height: auto;
  display: block;
  background: none;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--brand);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: var(--s-2);
}
.step-content .step-num::before { content: none; }

.step-content h2 { font-size: var(--fs-lg); margin-bottom: var(--s-4); }
.step-content p { font-size: var(--fs-base); margin: 0; }

.step-image-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  background: var(--surface);
  transition: transform var(--t-base);
}
.step-image-wrap:hover { transform: scale(1.015); }
.step-image-wrap img { width: 100%; }

.anleitung-cta { text-align: center; margin-top: clamp(48px, 7vw, 88px); }

@media (max-width: 820px) {
  .step-item, .step-item:nth-child(even) { grid-template-columns: 1fr; gap: var(--s-5); }
  .step-item:nth-child(even) .step-content { order: 0; }
}

/* ==========================================================================
   HILFSKLASSEN
   ========================================================================== */
.section-divider { height: 1px; background: var(--line); max-width: var(--maxw); margin-inline: auto; }

/* ==========================================================================
   BUECHER MOBIL: horizontales Wisch-Karussell
   Gestapelte Karten haben mobil den Kaufpunkt weit nach unten geschoben.
   Als Karussell bleibt der Inhalt vollstaendig, braucht aber nur noch eine
   Kartenhoehe. Der Haltepunkt liegt bei 780 px: das Tablet im Hochformat
   wird wie ein Telefon bedient, ein zweispaltiges Raster mit neun Karten
   waere dort 2.000 px hoeher.
   ========================================================================== */
@media (max-width: 780px) {
  .books-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    gap: var(--s-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Randabstand, damit die erste/letzte Karte nicht am Rand klebt */
    padding-inline: clamp(20px, 4vw, 32px);
    margin-inline: calc(-1 * clamp(20px, 4vw, 32px));
    padding-bottom: var(--s-4);
    scrollbar-width: thin;
  }

  .books-grid > .book-card {
    scroll-snap-align: center;
  }

  /* Schmalere Karte, also passt weniger in eine Zeile: eine Zeile mehr,
     damit der Teaser vollstaendig bleibt. */
  .book-details > p { -webkit-line-clamp: 4; line-clamp: 4; }

  /* Hover-Anhebung stoert auf Touch */
  .book-card:hover { transform: none; }

}

.books-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.books-hint svg { width: 15px; height: 15px; }

/* Muss nach der Basisregel stehen, sonst gewinnt display:none */
@media (max-width: 780px) {
  .books-hint { display: flex; }
}

/* ==========================================================================
   PAKET-KACHEL UNTER DEN BUECHERN
   Das Dreier-Paket lag bisher nur im Konfigurator und wurde kaum gefunden.
   Hier steht es genau dort, wo die Entscheidung fuer eine Geschichte faellt.
   ========================================================================== */
.bundle-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(20px, 2.6vw, 32px);
  background: linear-gradient(115deg, var(--surface) 0%, var(--gold-soft) 100%);
  border: 1px solid #f3e0b4;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}

.bundle-promo h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--s-2);
}
.bundle-promo p {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: 52ch;
}

.bundle-promo-buy {
  display: grid;
  gap: var(--s-3);
  justify-items: end;
  text-align: right;
}

.bundle-promo-price strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--brand-deep);      /* 5.73:1 auf --gold-soft */
}
.bundle-promo-price span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);        /* 6.00:1 auf --gold-soft */
}

@media (max-width: 820px) {
  .bundle-promo { grid-template-columns: 1fr; }
  .bundle-promo-buy { justify-items: stretch; text-align: left; }
  .bundle-promo-buy .btn { justify-content: center; }
}

/* Ehrlicher Nutzen-Hinweis statt Rabatt-Inszenierung */
.value-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--teal-soft);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.value-note svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--teal); margin-top: 2px; }

/* Temporaerer Hinweis, solange der Bezahlvorgang nicht freigeschaltet ist.
   Entfaellt zusammen mit CHECKOUT_ENABLED = true in app.js. */
.setup-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.setup-note svg { width: 20px; height: 20px; flex: 0 0 auto; color: #8a6410; margin-top: 2px; }
.setup-note strong { display: block; }

/* ==========================================================================
   KAUFART: EINZELN ODER DREIER-PAKET
   ========================================================================== */
.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.mode-option { cursor: pointer; }

.mode-option input[type="radio"] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.mode-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 64px;
  justify-content: center;
  padding: 12px 16px;
  background: var(--bg);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.mode-body strong { font-size: var(--fs-sm); color: var(--ink); }
.mode-body small { font-size: var(--fs-xs); color: var(--ink-soft); }

.mode-option:hover .mode-body { border-color: var(--brand); }

.mode-option input[type="radio"]:checked + .mode-body {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.mode-option input[type="radio"]:checked + .mode-body strong { color: var(--brand-deep); }

.mode-option input[type="radio"]:focus-visible + .mode-body {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* --- Auswahl der drei Geschichten --- */
.bundle-picker { margin-bottom: var(--s-5); }

/* Der Hinweis stand frueher als goldener Kasten UEBER dem Raster und war
   groesser als die Auswahl selbst. Jetzt steht er klein darunter, zusammen
   mit dem Zaehler. */
.bundle-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
}

.bundle-hint {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin: 0;
}

/* grid-auto-rows: 1fr macht alle Reihen gleich hoch. Ohne das war jede
   Kachel so hoch wie ihr laengster Titel - genau der unruhige Eindruck.
   Der frueher begrenzte Bereich (max-height + overflow) hat ausserdem
   innerhalb des Formulars gescrollt, was niemand erwartet. */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s-3);
  padding: 2px;
}

.bundle-option { cursor: pointer; display: block; height: 100%; }

.bundle-option input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.bundle-option-body {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 100%;
  min-height: 66px;
  padding: 8px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.bundle-option-body img {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex: 0 0 auto;
}

.bundle-option-text { display: flex; flex-direction: column; min-width: 0; }
.bundle-option-text strong {
  font-size: var(--fs-xs);
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* Genre und Dauer duerfen nicht umbrechen - sonst wird die hoechste Kachel
   zum Mass fuer alle neun. */
.bundle-option-text small {
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bundle-option:hover .bundle-option-body { border-color: var(--line-strong); }

.bundle-option input:checked + .bundle-option-body {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.bundle-option input:focus-visible + .bundle-option-body {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* Wenn drei gewaehlt sind, werden die uebrigen zurueckgenommen */
.bundle-grid.is-full .bundle-option input:not(:checked) + .bundle-option-body {
  opacity: 0.45;
}

.bundle-counter {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--ink-soft);
  margin: 0;
}
.bundle-counter.is-complete { color: var(--teal); }

.bundle-summary-list {
  margin: 0;
  padding-left: 1.1em;
  text-align: left;
  font-weight: 650;
  color: var(--ink);
}
.bundle-summary-list li { font-size: var(--fs-sm); }

@media (max-width: 520px) {
  .mode-switch { grid-template-columns: 1fr; }
  .bundle-grid { grid-template-columns: 1fr; max-height: 280px; }
}

/* ==========================================================================
   AKTIV-MARKIERUNG UEBER EINE KLASSE

   Die Regeln oben arbeiten mit ":checked + Nachbar". Das ist gueltiges CSS,
   verlaesst sich aber darauf, dass der Browser den Nachbarn neu berechnet,
   wenn sich der Zustand aendert. In der Vorschau ist genau das nicht passiert:
   die Markierung blieb an der Option kleben, die beim Laden aktiv war.

   Deshalb setzt app.js zusaetzlich die Klasse .is-active. Das Ergebnis ist
   dasselbe, haengt aber nicht von der Invalidierung ab.
   ========================================================================== */
.mode-option.is-active .mode-body {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.mode-option.is-active .mode-body strong { color: var(--brand-deep); }

.bundle-option.is-active .bundle-option-body {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.gender-label.is-active .gender-custom-radio {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-deep);
}

/* ==========================================================================
   SCHRITT-KONFIGURATOR (nur Telefon)

   Der Konfigurator zeigte auf dem Telefon drei Bildschirme am Stueck: Kaufart,
   Auswahl, Name, Geschlecht, Hoerprobe, Player, Bestelluebersicht, zwei
   Pflichthaken mit Rechtstext, Preis, Bestellknopf. Die Testgruppe kam da
   nicht durch. Jetzt laeuft mobil ein Schritt nach dem anderen.

   Zwei Dinge halten das Risiko klein:
   - Alles haengt an .js-schritte, gesetzt von app.js. Ohne JavaScript bleibt
     das Formular die lange Liste von frueher - unaufgeraeumt, aber vollstaendig
     bedienbar.
   - Die Regeln stehen in einer Media Query. Ab 800 px greift keine davon,
     der Desktop ist also woertlich unberuehrt.

   Kein [hidden] auf den Schritten: weiter oben steht
   [hidden] { display: none !important } - das wuerde den Desktop mit
   abschalten.
   ========================================================================== */

/* Schrittanzeige, Weiter/Zurueck und die Schrittueberschriften gehoeren zum
   Telefon. Auf dem Desktop beschriftet die vorhandene Zeile ("1 Geschichte und
   Name") die Karten - eine zweite Ueberschrift daneben waere eine Doppelung. */
.schritt-kopf,
.schritt-nav,
.schritt-titel { display: none; }

@media (max-width: 799px) {
  .js-schritte .schritt-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
  }

  .schritt-zaehler {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
  }

  .schritt-punkte {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .schritt-punkte li {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line);
  }
  .js-schritte[data-schritt="1"] .schritt-punkte li[data-punkt="1"],
  .js-schritte[data-schritt="2"] .schritt-punkte li[data-punkt="1"],
  .js-schritte[data-schritt="2"] .schritt-punkte li[data-punkt="2"],
  .js-schritte[data-schritt="3"] .schritt-punkte li[data-punkt="1"],
  .js-schritte[data-schritt="3"] .schritt-punkte li[data-punkt="2"],
  .js-schritte[data-schritt="3"] .schritt-punkte li[data-punkt="3"],
  .js-schritte[data-schritt="4"] .schritt-punkte li { background: var(--brand-strong); }

  /* Nur der aktive Schritt steht da. */
  .js-schritte [data-step] { display: none; }
  .js-schritte[data-schritt="1"] [data-step="1"],
  .js-schritte[data-schritt="2"] [data-step="2"],
  .js-schritte[data-schritt="3"] [data-step="3"],
  .js-schritte[data-schritt="4"] [data-step="4"] { display: block; }

  /* In Schritt 4 traegt die erste Karte nichts mehr - sonst stuende dort
     ein leerer weisser Kasten ueber der Bestellung. */
  .js-schritte[data-schritt="4"] .config-card:not(.config-card-kauf) { display: none; }

  .js-schritte .schritt-titel {
    display: block;
    font-size: var(--fs-md);
    text-transform: none;
    margin: 0 0 var(--s-3);
  }
  .schritt-titel:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 4px; }

  /* Die alte Schrittzeile ("1 Geschichte und Name") doppelt jetzt die
     Kopfzeile - sie beschriftete zwei Schritte, die es so nicht mehr gibt. */
  .js-schritte .form-step { display: none; }

  .js-schritte .schritt-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    margin-top: var(--s-4);
  }
  /* In Schritt 4 bestellt der Knopf in der Karte, nicht "Weiter". */
  .js-schritte[data-schritt="4"] .schritt-nav [data-weiter] { display: none; }
  .js-schritte[data-schritt="1"] .schritt-nav [data-zurueck] { visibility: hidden; }

  .schritt-zurueck {
    background: none;
    border: 0;
    padding: var(--s-3);
    min-height: 44px;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    text-decoration: underline;
    cursor: pointer;
  }
  .schritt-zurueck:hover { color: var(--ink); }

  /* Der Player klebt auf dem Desktop am oberen Rand. In einem Schritt, der
     ohnehin allein steht, wuerde das nur wackeln. */
  .js-schritte .config-visual { position: static; }
}