/* =====================================================================
   pages/geschichte.css  –  "Eine Geschichte" (Story-Ideen der Zuschauer)
   ---------------------------------------------------------------------
   Großer Typo-Hero, erklärender Text, Ideen-Einreichformular.
   ===================================================================== */

.story-hero { min-height: 90svh; display: flex; flex-direction: column; justify-content: center; position: relative; }
.story-hero__kicker { margin-bottom: 1.6rem; }
.story-hero h1 { font-size: var(--fs-hero); }
.story-hero h1 em { font-style: normal; color: var(--gelb); }
.story-hero__lead { max-width: 58ch; margin-top: 1.8rem; font-size: var(--fs-lead); color: var(--creme-dim); }

/* großer, sich bewegender Hintergrund-Schriftzug */
.story-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; display: grid; align-content: center; opacity: 0.05; pointer-events: none; }
.story-bg span { font-family: var(--font-display); font-size: 22vw; line-height: 0.8; white-space: nowrap; text-transform: uppercase; }

/* Ablauf-/Erklär-Karten */
.story-hero + .section .sec-head { margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.story-hero + .section .sec-head .eyebrow { margin-bottom: 1rem; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(1.2rem, 2vw, 2rem); }
.how__card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; background: var(--card); }
.how__num { font-family: var(--font-display); font-size: 2.4rem; color: var(--gelb); }
.how__card h3 { font-size: var(--fs-h3); margin: 0.6rem 0; }
.how__card p { color: var(--creme-dim); font-size: var(--fs-small); }
@media (max-width: 860px) { .how { grid-template-columns: 1fr; } }

/* Einreich-Formular zentriert */
.idea { }
.idea__box { max-width: 760px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3.4rem); background: var(--card); }
.idea__box h2 { font-size: var(--fs-h2); text-align: center; margin-bottom: 0.8rem; }
.idea__box .lead { margin-inline: auto; text-align: center; margin-bottom: 2.4rem; }