/* =========================================================================
   Lumi & die Funkelbande — Website-Stylesheet
   Visuelles System nach Markenbibel Schritt 3 („Abenddämmerung mit Glühlicht").
   Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Komponenten · 5 Abschnitte
           6 Bewegung · 7 Print
   Keine externen Schriften/Skripte (DSGVO, Ladezeit).
   ========================================================================= */

/* ---------- 1 · Tokens ------------------------------------------------- */
:root {
  /* Markenfarben (Markenbibel §3) */
  --brand-dusk:       #2e4a7a;
  --brand-glow:       #f5b93b;
  --brand-moss:       #7a9e6e;
  --brand-terracotta: #c9704f;
  --brand-paper:      #f6efe0;
  --brand-bear:       #8b6b4f;

  /* Gefühlsfarben — ausschließlich für Lumis Leuchten */
  --feel-wut:      #c0563f;
  --feel-traurig:  #6b7f96;
  --feel-angst:    #9b86bb;
  --feel-freude:   #f0ad2e;
  --feel-ruhe:     #6e9d72;

  /* Flächen & Text — heller Papiergrund */
  --paper:      #faf5ea;
  --paper-warm: #f3ebda;
  --card:       #fffdf8;
  --ink:        #1b2739;
  --ink-soft:   #4c5568;
  --line:       #e3d9c5;
  --line-soft:  #ece4d5;

  /* Flächen & Text — Dämmerungsgrund */
  --dusk:        #22375e;
  --dusk-deep:   #16233b;
  --dusk-ink:    #f4ecdb;
  --dusk-soft:   #bcc7dc;
  --dusk-line:   #35496f;

  --accent:      #2b4470;
  --accent-hov:  #1d3157;
  --glow-ink:    #7d5710;   /* goldnaher Text mit Kontrast auf Papier */
  --glow-deep:   #b8811a;   /* großes Gold auf Papier (≥3:1) */
  --glow-wash:   #fbf0d7;

  /* Typografie */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  Georgia, ui-serif, serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --step-display: clamp(2.35rem, 1.4rem + 3.8vw, 3.8rem);
  --step-h2:      clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  --step-h3:      clamp(1.12rem, 1.04rem + 0.35vw, 1.32rem);
  --step-lead:    clamp(1.06rem, 1rem + 0.35vw, 1.22rem);

  /* Raster & Rhythmus */
  --shell:   74rem;
  --prose:   40rem;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 8.5vw, 7.75rem);

  /* Form — bewusst zurückhaltend: kleine Radien, kaum Schatten.
     Die Seite soll gebaut wirken, nicht generiert. */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(27, 39, 57, .06);
  --shadow-md: 0 6px 24px rgba(27, 39, 57, .08);

  --ease: cubic-bezier(.22, .68, .36, 1);
}

/* ---------- 2 · Basis -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 0 .6em;
}
h1 { font-size: var(--step-display); line-height: 1.06; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); line-height: 1.3; letter-spacing: -0.005em; }
h4 { font-size: 1.02rem; line-height: 1.35; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-hov); }

img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 650; }
ul, ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
li { margin-bottom: .45rem; }
li:last-child { margin-bottom: 0; }

/* Fokusring: auf hellem Grund dunkel, auf dunklem Grund golden — beides
   deutlich über 3:1 gegen den Untergrund. */
:root { --focus-ring: #1b2739; }
.hero, .section--dusk, .site-footer { --focus-ring: var(--brand-glow); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--brand-glow); color: #23303f; }

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--dusk); color: var(--dusk-ink);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: transform .18s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); color: var(--dusk-ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3 · Layout ------------------------------------------------- */
.shell {
  width: min(100% - (2 * var(--gutter)), var(--shell));
  margin-inline: auto;
}
.prose { max-width: var(--prose); }

.section { padding-block: var(--section); position: relative; }
.section--paper { background: var(--paper); }
.section--paper + .section--paper { border-top: 1px solid var(--line); }
.section--dusk  { background: var(--dusk); color: var(--dusk-ink); }
.section--dusk h2, .section--dusk h3, .section--dusk h4 { color: var(--dusk-ink); }
.section--dusk a { color: var(--brand-glow); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head p { color: var(--ink-soft); font-size: var(--step-lead); margin-bottom: 0; }
.section--dusk .section-head p { color: var(--dusk-soft); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--glow-ink); margin: 0 0 .9rem;
}
.section--dusk .eyebrow { color: var(--brand-glow); }


/* ---------- 4 · Komponenten -------------------------------------------- */

/* Buttons */
.btn {
  --btn-bg: var(--dusk); --btn-fg: #fdf8ec; --btn-bd: var(--dusk);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .72rem 1.3rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-md);
  font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
/* Höhere Spezifität als `.section--dusk a`, damit Knopftext nie verschwindet */
a.btn, a.btn:hover, .section--dusk a.btn, .hero a.btn { color: var(--btn-fg); }
.btn:hover { color: var(--btn-fg); --btn-bg: var(--accent-hov); --btn-bd: var(--accent-hov); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.btn--glow  { --btn-bg: var(--brand-glow); --btn-fg: #40300d; --btn-bd: var(--brand-glow); }
.btn--glow:hover { --btn-bg: #e9ab27; --btn-bd: #e9ab27; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bg: transparent; --btn-bd: var(--ink); }
a.btn--ghost, a.btn--ghost:hover { color: var(--btn-fg); }
.section--dusk .btn--ghost,
.hero .btn--ghost { --btn-fg: #f2e9d8; --btn-bd: rgba(244, 236, 219, .38); }
.section--dusk .btn--ghost:hover,
.hero .btn--ghost:hover { --btn-bd: #f4ecdb; background: rgba(244, 236, 219, .08); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* Aufklappbare Kapitel — Hairlines statt Boxen */
.acc {
  border-top: 1px solid var(--line);
  margin-top: 0;
}
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: .75rem;
  padding: 1.05rem 0;
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 600;
  letter-spacing: -0.005em; color: var(--ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before {
  content: "+"; flex: none;
  font-family: var(--font-body); font-weight: 500; color: var(--glow-ink);
  width: 1rem; text-align: center;
}
.acc[open] summary::before { content: "–"; }
.acc summary:hover { color: var(--accent-hov); }
.acc > *:not(summary) { margin-left: 1.75rem; }
.acc .acc-intro { color: var(--ink-soft); font-size: .96rem; max-width: 38rem; margin-top: -.2rem; }
.acc[open] { padding-bottom: 1.5rem; }
@media (max-width: 38rem) {
  .acc > *:not(summary) { margin-left: 0; }
}

/* Kopfzeile */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 245, 234, .86);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: saturate(140%) blur(14px); }
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--line);
  background: rgba(250, 245, 234, .94);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: 4.1rem;
}
.header-inner > * { min-width: 0; }

.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none; line-height: 1.1;
}
.wordmark:hover { color: var(--ink); }
.wordmark .mark { width: 1.75rem; height: 1.75rem; flex: none; }
.wordmark b { font-weight: 600; }
.wordmark span { color: var(--ink-soft); font-weight: 400; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.nav a {
  position: relative; font-size: .95rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none; padding: .35rem 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.1rem; height: 2px;
  background: var(--brand-glow); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.nav a[aria-current="true"] { color: var(--ink); }

/* Aktionen rechts: Der YouTube-Knopf bleibt auf JEDER Breite und in jeder
   Scrollposition sichtbar — das Abo ist damit immer genau ein Klick entfernt. */
.header-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.header-cta { display: inline-flex; }
.header-cta .cta-short { display: none; }
.btn--sm { padding: .52rem 1rem; font-size: .92rem; }
.nav-toggle { display: none; }

@media (max-width: 61.25rem) {
  .header-cta .cta-long { display: none; }
  .header-cta .cta-short { display: inline; }
  .header-cta { min-height: 2.75rem; }  /* bequeme Trefferfläche am Handy */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: none; border: 1px solid var(--line); border-radius: var(--r-md);
    min-width: 2.75rem; min-height: 2.75rem;
    padding: .5rem .9rem; font: inherit; font-size: .9rem; font-weight: 600;
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle .bars { display: grid; gap: 3px; }
  .nav-toggle .bars i { width: 15px; height: 1.5px; background: var(--ink); display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.35rem;
    box-shadow: var(--shadow-md);
  }
  .site-header[data-nav="open"] .nav { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1.02rem; }
  .nav a::after { display: none; }
  .nav a[aria-current="true"] { color: var(--accent); }
  .nav .btn { margin-top: 1rem; justify-content: center; }
  /* „Elternpost" steht auf Schmalgeräten schon als Knopf im Panel */
  .nav a[href="#post"]:not(.btn) { display: none; }
}
@media (min-width: 61.3125rem) {
  .nav .nav-cta { display: none; }
}
/* Sehr schmale Geräte: Menü-Knopf nur als Symbol, Beschriftung per aria-label */
@media (max-width: 26rem) {
  .nav-toggle { padding: .5rem; }
  .nav-toggle .nav-toggle-text { display: none; }
  .header-inner { gap: .75rem; }
}

/* ---------- 5 · Abschnitte --------------------------------------------- */

/* Hero */
.hero {
  position: relative; isolation: isolate;
  background: var(--dusk-deep);
  color: var(--dusk-ink);
  padding-block: clamp(4.5rem, 12vw, 9rem) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.hero picture, .hero .hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
}
.hero .hero-img { object-fit: cover; object-position: 50% 58%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Schmal: flächiger Schleier, damit der Text überall lesbar bleibt */
  background:
    linear-gradient(to bottom, rgba(11, 18, 31, .82) 0%, rgba(11, 18, 31, .64) 55%,
                    rgba(11, 18, 31, .84) 100%);
}
@media (min-width: 54rem) {
  /* Breit: Schleier nur unter der Textspalte, rechts bleibt die Wiese sichtbar */
  .hero::after {
    background:
      linear-gradient(96deg, rgba(11, 18, 31, .94) 0%, rgba(11, 18, 31, .86) 26%,
                      rgba(11, 18, 31, .52) 52%, rgba(11, 18, 31, .08) 78%,
                      rgba(11, 18, 31, .24) 100%),
      linear-gradient(to top, rgba(11, 18, 31, .55) 0%, rgba(11, 18, 31, 0) 42%);
  }
}
.hero-inner { max-width: 39rem; }
.hero h1 { color: #fdf8ec; margin-bottom: .8rem; }
.hero h1 em { font-style: normal; color: var(--brand-glow); }
.hero-kicker {
  font-size: .95rem; color: var(--brand-glow); margin-bottom: 1.1rem;
  font-family: var(--font-display); font-style: italic; letter-spacing: .01em;
}
.hero-lead {
  font-size: var(--step-lead); color: #e6ddcb; max-width: 32rem; margin-bottom: 1.9rem;
}
.hero .btn-row { margin-bottom: 2.4rem; }

/* Zweitweg im Hero: stiller Textlink statt zweitem Knopf */
.quiet-link {
  color: #e6ddcb; font-size: .95rem; font-weight: 500;
  text-decoration-color: rgba(230, 221, 203, .5); text-underline-offset: .25em;
}
.quiet-link:hover { color: #fdf8ec; }

.hero-note {
  font-size: .9rem; color: #cfc5b0; margin: 0;
  border-top: 1px solid rgba(244, 236, 219, .18); padding-top: 1.2rem;
  max-width: 32rem;
}

.pull {
  border-left: 3px solid var(--brand-glow);
  padding: .35rem 0 .35rem 1.4rem;
  margin: 2.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.4; letter-spacing: -0.01em; text-wrap: balance;
  max-width: 44rem;
}
.pull cite { display: block; font: inherit; font-size: .82rem; font-family: var(--font-body);
  font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: .9rem; }
.section--dusk .pull cite { color: var(--dusk-soft); }

/* Figuren — redaktionelle Komposition statt Vier-Karten-Raster:
   Lumi als große Auftaktfigur, die drei anderen kompakter und gestaffelt. */
.bande-head { max-width: 42rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.bande-head p { color: var(--ink-soft); font-size: var(--step-lead); margin: 0; }

.char-kicker {
  display: flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--glow-ink); margin-bottom: .5rem;
}
.char-kicker::before { content: ""; width: 1.1rem; height: 2px; background: var(--brand-glow); }
.char-quote {
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  color: var(--ink); line-height: 1.45; margin: 0;
}

.charfeature {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.charfeature-figure { margin: 0; }
.charfeature-figure img {
  width: 100%; max-width: 26rem; border-radius: var(--r-md);
}
.charfeature-body { max-width: 30rem; padding-bottom: clamp(0rem, 2vw, 1.5rem); }
.charfeature-body h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: .55rem; }
.charfeature-body p { color: var(--ink-soft); }
.charfeature-body .char-quote { margin-top: 1.1rem; }

.charrow {
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.charrow-item figure { margin: 0 0 1rem; }
.charrow-item img { width: 100%; max-width: 11.5rem; border-radius: var(--r-md); }
.charrow-item h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.charrow-item p { font-size: .96rem; color: var(--ink-soft); margin-bottom: .6rem; }
.charrow-item .char-quote { font-size: .98rem; }

@media (min-width: 52rem) {
  .charfeature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .charrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* bewusst gestaffelt, nicht zufällig: Mitte tiefer, rechts leicht versetzt */
  .charrow-item:nth-child(2) { margin-top: 2.5rem; }
  .charrow-item:nth-child(3) { margin-top: 1.1rem; }
}

/* Gefühlsfarben */
.feelings {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 54rem) {
  .feelings { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}
.orb-stage {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1; max-width: 15rem; margin-inline: auto; width: 100%;
}
@media (min-width: 54rem) { .orb-stage { max-width: 20rem; } }
/* Lumis Leuchten: eine ruhige Farbscheibe mit einem einzigen weichen Schein.
   Kein Puls, kein Ring — der Farbwechsel selbst ist die Aussage. */
.orb {
  width: 54%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff8e6 0%, var(--orb, var(--feel-freude)) 62%);
  box-shadow: 0 0 48px 10px rgba(245, 185, 59, .18);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
@supports (box-shadow: 0 0 0 1px color-mix(in srgb, red 50%, transparent)) {
  .orb {
    box-shadow: 0 0 48px 10px color-mix(in srgb, var(--orb, var(--feel-freude)) 32%, transparent);
  }
}

/* Ohne JavaScript: keine toten Knöpfe — alle fünf Farben stehen untereinander
   wie eine aufgeschlagene Doppelseite. */
html:not(.js) .feel-tabs { display: none; }
html:not(.js) .feel-panel[hidden] { display: block; }
html:not(.js) .feel-panel { margin-bottom: 1.75rem; }
html:not(.js) .orb-stage { display: none; }

.feel-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.75rem; }
.feel-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent;
  color: var(--dusk-soft); font: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease);
}
.feel-tab i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--dot); flex: none; }
.feel-tab:hover { color: var(--dusk-ink); }
.feel-tab[aria-selected="true"] {
  color: #fdf8ec; border-color: var(--dusk-line); background: rgba(244, 236, 219, .06);
}
.feel-panel { min-height: 9.5rem; }
.feel-panel h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: .55rem; }
.feel-panel p { color: var(--dusk-soft); max-width: 34rem; }
.feel-panel .say {
  font-family: var(--font-display); font-style: italic; color: #fdf8ec;
  font-size: 1.1rem; border-left: 2px solid var(--brand-glow); padding-left: 1rem;
}

/* Aufbau einer Folge */
.format {
  counter-reset: block;
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
}
.format li {
  display: grid; gap: .35rem 1.5rem; margin: 0;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  padding: 1.15rem 0; border-top: 1px solid var(--line);
}
.format li:last-child { border-bottom: 1px solid var(--line); }
.format li::before {
  counter-increment: block; content: counter(block, decimal-leading-zero);
  font-family: var(--font-display); font-size: .95rem; color: var(--glow-ink);
  letter-spacing: .04em;
}
.format h4 { margin: 0 0 .2rem; font-size: 1.02rem; }
.format p { grid-column: 2; font-size: .96rem; color: var(--ink-soft); margin: 0; }
.format .dur {
  font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--ink-soft);
  white-space: nowrap;
}
@media (max-width: 38rem) {
  .format li { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .format .dur { grid-column: 2; grid-row: 3; }
}

/* Folge 1 — auf Papier, wie eine Buchdoppelseite: Text links, Bild rechts */
.episode {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 52rem) { .episode { grid-template-columns: 1.05fr 1fr; } }
.episode > div > p:not(.eyebrow) { max-width: 34rem; color: var(--ink-soft); }
.episode .pull { margin: 1.75rem 0; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }
.episode-figure { margin: 0; }
.episode-figure img {
  width: 100%; border-radius: var(--r-md); aspect-ratio: 16 / 10; object-fit: cover;
}
.episode-figure figcaption {
  font-size: .86rem; color: var(--ink-soft); margin-top: .7rem;
}
.goal-line {
  border-left: 3px solid var(--brand-glow); padding: .2rem 0 .2rem 1.1rem;
  font-size: .98rem; max-width: 34rem;
}
.goal-line strong { color: var(--ink); }

/* Lieder in der Folgen-Sektion: Zeile statt Karte */
.songline {
  display: grid; gap: .5rem 2rem; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line); padding: 1.15rem 0;
}
@media (min-width: 44rem) {
  .songline { grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr); }
}
.songline h3 { font-size: 1.08rem; margin: 0 0 .15rem; }
.songline p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.songline audio { width: 100%; }
.songline--small { padding-block: .9rem; }

/* Staffelplan (im Aufklapp-Kapitel) */
.season { border-top: 1px solid var(--line-soft); }
.season-row {
  display: grid; gap: .3rem 1.5rem; align-items: baseline;
  grid-template-columns: 2.6rem minmax(0, 1.1fr) minmax(0, 1.4fr);
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
.season-row .no {
  font-family: var(--font-display); color: var(--glow-ink); font-size: .95rem;
  letter-spacing: .04em;
}
.season-row h4 { margin: 0; font-size: 1.02rem; }
.season-row .goal-text { color: var(--ink-soft); font-size: .96rem; }
@media (max-width: 44rem) {
  .season-row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .season-row .goal-text { grid-column: 2; }
}
.season-note { margin-top: 1.5rem; font-size: .92rem; color: var(--ink-soft); }

/* Zwischenspiel: die Orte — ein stilles Bildband ohne Abschnittskopf */
.interlude {
  background: var(--paper-warm);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.interlude-grid {
  display: grid; gap: clamp(.9rem, 2vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 44rem) {
  .interlude-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.interlude figure { margin: 0; }
.interlude img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-md);
}
.interlude figcaption { padding-top: .5rem; font-size: .86rem; color: var(--ink-soft); }
.interlude-note {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0; font-size: .95rem; color: var(--ink-soft);
  font-family: var(--font-display); font-style: italic;
}

/* Eltern */
.parents { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start;
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 54rem) { .parents { grid-template-columns: 1fr .85fr; } }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative; padding-left: 1.75rem; margin-bottom: 1.15rem;
}
.checklist li::before {
  content: ""; position: absolute; left: .1rem; top: .52rem;
  width: .55rem; height: .3rem;
  border-left: 2px solid var(--glow-ink);
  border-bottom: 2px solid var(--glow-ink);
  transform: rotate(-45deg);
}
.checklist strong { display: block; }
.checklist span { color: var(--ink-soft); font-size: .96rem; }

/* Produktionsweise — bewusst als eigener, hervorgehobener Block statt als
   Stichpunkt unter vielen. */
.transparency {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--brand-glow);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.transparency h3 { margin-bottom: .7rem; }
.transparency p { font-size: .98rem; color: var(--ink-soft); }
.transparency strong { color: var(--ink); }

.workshop { margin: 0; }
.workshop img { border-radius: var(--r-lg); border: 1px solid var(--line); }
.workshop figcaption {
  font-size: .86rem; color: var(--ink-soft); margin-top: .8rem; line-height: 1.55;
}

/* Kontakt / Elternpost */
.contact {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 54rem) { .contact { grid-template-columns: 1fr 1fr; } }
.signup { display: grid; gap: .75rem; margin-top: 1.5rem; }
.field-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.signup label { font-size: .9rem; font-weight: 600; color: var(--dusk-ink); }
.signup input[type="email"] {
  flex: 1 1 14rem; min-width: 0;
  background: rgba(253, 248, 236, .96); color: #1b2739;
  border: 1px solid rgba(244, 236, 219, .35); border-radius: var(--r-md);
  padding: .72rem 1rem; font: inherit; font-size: .98rem;
}
.signup input::placeholder { color: #5c6678; }
.signup .hint { font-size: .84rem; color: var(--dusk-soft); margin: 0; }
.signup .status { font-size: .92rem; margin: 0; min-height: 1.4rem; color: var(--brand-glow); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem;
  color: var(--dusk-soft); font-weight: 400; }
.consent input {
  margin-top: .25rem; accent-color: var(--brand-glow); flex: none;
  width: 1.1rem; height: 1.1rem;
}

.contact-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.contact-list li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem 1rem;
  padding: .85rem 0; border-top: 1px solid var(--dusk-line); font-size: .96rem;
}
.contact-list li:last-child { border-bottom: 1px solid var(--dusk-line); }
.contact-list dt, .contact-list .k { color: var(--dusk-soft); }
@media (max-width: 32rem) { .contact-list li { grid-template-columns: minmax(0, 1fr); } }

/* Fußzeile */
.site-footer {
  background: var(--dusk-deep); color: var(--dusk-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.25rem; font-size: .93rem;
}
.footer-top {
  display: grid; gap: 2.25rem;
  grid-template-columns: minmax(0, 1fr); align-items: start;
  padding-bottom: 2.25rem; border-bottom: 1px solid var(--dusk-line);
}
@media (min-width: 48rem) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: 1.05rem; color: #fdf8ec; margin-bottom: .9rem; }
.site-footer a { color: var(--dusk-soft); text-decoration: none; }
.site-footer a:hover { color: var(--brand-glow); text-decoration: underline; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-brand p { max-width: 26rem; }
.footer-brand .wordmark { color: #fdf8ec; margin-bottom: .9rem; }
.footer-brand .wordmark span { color: var(--dusk-soft); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-top: 1.5rem; font-size: .86rem;
}
.footer-bottom p { margin: 0; }

/* Rechtstexte (Impressum, Datenschutz) */
.legal { padding-block: clamp(3rem, 7vw, 5.5rem); }
.legal .prose h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); margin-top: 2.75rem; }
.legal .prose h2:first-of-type { margin-top: 1.5rem; }
.legal .prose h3 { margin-top: 1.75rem; }
.legal .prose p, .legal .prose li { color: var(--ink-soft); }
.todo {
  background: var(--glow-wash); border: 1px solid #e8d5a4; border-left: 3px solid var(--brand-glow);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 1rem 1.25rem; margin: 1.5rem 0;
  font-size: .95rem; color: #5c4413;
}
.todo strong { color: #40300d; }
.placeholder {
  background: #f0e6cf; border-bottom: 1px solid #d8c393; padding: 0 .3em;
  border-radius: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; color: #5c4413;
}

/* ---------- 6 · Bewegung ----------------------------------------------- */
/* Nur wenn JavaScript läuft, wird überhaupt etwas versteckt — sonst bliebe die
   Seite ohne Skript leer. */
.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 7 · Print --------------------------------------------------- */
@media print {
  .site-header, .hero picture, .btn-row, .signup { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section, .hero { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
  .hero::after { display: none; }
  .hero h1, .section--dusk h2, .section--dusk h3 { color: #000 !important; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}