/* ============================================================
   Gemeinsames Stylesheet für alle Kurzgeschichten-Seiten
   (Übersicht + individuelle Geschichten-Seiten).
   Einbindung: <link rel="stylesheet" href="../geschichten/theme.css">
   ============================================================ */

/* ---------- Farben & Schriften ---------- */
:root {
    --navy-950: #0b0c26;
    --navy-900: #14163a;
    --navy-800: #1c2361;
    --navy-700: #2a3374;
    --paper: #faf3e3;
    --ink-900: #2a2115;
    --ink-600: #6b5d45;
    --amber-300: #f4d9a6;
    --amber-400: #e8a33d;
    --amber-600: #c17f1f;
    --sky-text: #d7d9f2;
    --sky-text-dim: #9fa1c4;
    --line: rgba(42, 33, 21, 0.14);

    --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Einheitliche Typo-Skala: genau drei Größen für die ganze Seite -
       Überschrift 1. Ordnung, Überschrift 2. Ordnung, Körpertext. */
    --fs-h1: 2.1em;
    --fs-h2: 1.3em;
    --fs-body: 1.05em;
    --fs-footnote: 0.85em;

    /* Geschichten-Farben: pro Geschichte mit eigener Seite ein dunkler
       Rand- und ein heller Hintergrundton. Übersicht und individuelle
       Seite greifen auf dieselben zwei Variablen zu. Geschichten ohne
       eigene Seite brauchen hier keinen Eintrag - die Story-Karte der
       Übersicht fällt automatisch auf Amber/Cream zurück. */
    --story-reise-dark: #386899;
    --story-reise-light: #e6f1fd;
    --story-giganten-dark: #62583d;
    --story-giganten-light: #dad5c9;
    --story-fischwerkstatt-dark: #004b4e;
    --story-fischwerkstatt-light: #d0e6e7;
    --story-computerspiel-dark: #33367d;
    --story-computerspiel-light: #dfe0fd;
    --story-weihnachtsstern-dark: #263749;
    --story-weihnachtsstern-light: #d0e6e7;
}

/* ---------- Grundgerüst ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--sky-text);
    min-height: 100vh;
}

a { color: inherit; }

/* Sichtbarer Fokusring nur bei Tastaturbedienung (nicht bei Mausklick) -
   funktioniert ohne :focus-visible-Unterstützung trotzdem: der Browser
   zeigt dann seinen eigenen Standard-Fokusring, nichts wird unterdrückt. */
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--amber-400);
    outline-offset: 2px;
}

/* ---------- Sternenhimmel ----------
   Ein feststehendes Element hinter der ganzen Seite (fixed statt
   background-attachment, das ist auf Mobilgeräten zuverlässiger).
   Reine CSS-Lösung ohne JavaScript - funktioniert auf jeder Seite,
   die dieses Stylesheet einbindet, ganz ohne eigenes Markup. 120
   Punkte an unregelmäßigen Positionen ergeben ein Muster, das sich
   nirgends sichtbar wiederholt. */
body::before {
    content: '';
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background-image:
                radial-gradient(circle 0.5px at 3.0% 2.2%, rgba(255,255,255,0.24), transparent),
                radial-gradient(circle 1.8px at 9.6% 5.1%, rgba(244,217,166,0.41), transparent),
                radial-gradient(circle 1.1px at 20.3% 7.6%, rgba(255,255,255,0.39), transparent),
                radial-gradient(circle 0.5px at 29.7% 4.2%, rgba(255,255,255,0.3), transparent),
                radial-gradient(circle 0.8px at 35.1% 1.9%, rgba(255,255,255,0.18), transparent),
                radial-gradient(circle 0.5px at 46.8% 4.0%, rgba(255,255,255,0.16), transparent),
                radial-gradient(circle 0.7px at 55.4% 4.4%, rgba(255,255,255,0.23), transparent),
                radial-gradient(circle 1.2px at 64.5% 6.6%, rgba(255,255,255,0.37), transparent),
                radial-gradient(circle 0.5px at 72.4% 3.3%, rgba(255,255,255,0.22), transparent),
                radial-gradient(circle 1.9px at 76.8% 4.9%, rgba(255,255,255,0.55), transparent),
                radial-gradient(circle 0.7px at 90.0% 3.5%, rgba(255,255,255,0.25), transparent),
                radial-gradient(circle 0.8px at 98.1% 8.6%, rgba(255,255,255,0.16), transparent),
                radial-gradient(circle 0.6px at 5.1% 18.9%, rgba(255,255,255,0.22), transparent),
                radial-gradient(circle 1.0px at 9.3% 14.7%, rgba(255,255,255,0.29), transparent),
                radial-gradient(circle 0.8px at 18.4% 13.0%, rgba(255,255,255,0.16), transparent),
                radial-gradient(circle 0.8px at 29.5% 18.1%, rgba(255,255,255,0.2), transparent),
                radial-gradient(circle 0.6px at 36.6% 18.1%, rgba(255,255,255,0.18), transparent),
                radial-gradient(circle 0.6px at 44.1% 14.9%, rgba(255,255,255,0.15), transparent),
                radial-gradient(circle 0.8px at 53.3% 15.5%, rgba(255,255,255,0.24), transparent),
                radial-gradient(circle 0.8px at 63.7% 11.4%, rgba(255,255,255,0.3), transparent),
                radial-gradient(circle 1.3px at 70.1% 14.2%, rgba(244,217,166,0.29), transparent),
                radial-gradient(circle 0.5px at 77.2% 12.3%, rgba(255,255,255,0.15), transparent),
                radial-gradient(circle 1.9px at 84.8% 13.9%, rgba(255,255,255,0.52), transparent),
                radial-gradient(circle 0.5px at 94.2% 13.8%, rgba(255,255,255,0.29), transparent),
                radial-gradient(circle 1.0px at 3.9% 24.9%, rgba(255,255,255,0.34), transparent),
                radial-gradient(circle 2.0px at 14.7% 22.3%, rgba(255,255,255,0.51), transparent),
                radial-gradient(circle 0.9px at 21.1% 21.2%, rgba(255,255,255,0.3), transparent),
                radial-gradient(circle 1.3px at 27.6% 23.9%, rgba(255,255,255,0.37), transparent),
                radial-gradient(circle 0.9px at 36.4% 22.8%, rgba(255,255,255,0.29), transparent),
                radial-gradient(circle 1.2px at 48.0% 26.9%, rgba(244,217,166,0.34), transparent),
                radial-gradient(circle 1.3px at 51.0% 23.2%, rgba(255,255,255,0.44), transparent),
                radial-gradient(circle 0.6px at 65.4% 28.9%, rgba(255,255,255,0.19), transparent),
                radial-gradient(circle 0.9px at 68.8% 22.6%, rgba(255,255,255,0.29), transparent),
                radial-gradient(circle 1.3px at 80.2% 27.4%, rgba(255,255,255,0.43), transparent),
                radial-gradient(circle 1.3px at 89.2% 24.8%, rgba(255,255,255,0.34), transparent),
                radial-gradient(circle 0.9px at 99.0% 24.2%, rgba(255,255,255,0.27), transparent),
                radial-gradient(circle 0.8px at 1.7% 32.2%, rgba(255,255,255,0.17), transparent),
                radial-gradient(circle 0.7px at 15.7% 36.3%, rgba(244,217,166,0.17), transparent),
                radial-gradient(circle 0.9px at 24.0% 36.2%, rgba(255,255,255,0.22), transparent),
                radial-gradient(circle 1.1px at 31.3% 32.7%, rgba(255,255,255,0.32), transparent),
                radial-gradient(circle 1.4px at 35.9% 34.4%, rgba(255,255,255,0.34), transparent),
                radial-gradient(circle 0.9px at 46.4% 38.2%, rgba(255,255,255,0.24), transparent),
                radial-gradient(circle 0.6px at 54.3% 31.1%, rgba(255,255,255,0.15), transparent),
                radial-gradient(circle 0.7px at 60.3% 34.8%, rgba(255,255,255,0.21), transparent),
                radial-gradient(circle 1.2px at 71.2% 37.3%, rgba(255,255,255,0.32), transparent),
                radial-gradient(circle 0.8px at 81.0% 35.1%, rgba(255,255,255,0.31), transparent),
                radial-gradient(circle 0.8px at 88.3% 35.0%, rgba(255,255,255,0.23), transparent),
                radial-gradient(circle 0.9px at 95.7% 38.5%, rgba(255,255,255,0.31), transparent),
                radial-gradient(circle 0.6px at 4.6% 48.5%, rgba(255,255,255,0.17), transparent),
                radial-gradient(circle 1.3px at 9.7% 42.9%, rgba(255,255,255,0.41), transparent),
                radial-gradient(circle 0.6px at 18.5% 46.7%, rgba(255,255,255,0.3), transparent),
                radial-gradient(circle 0.7px at 27.3% 48.6%, rgba(255,255,255,0.32), transparent),
                radial-gradient(circle 0.6px at 35.2% 44.5%, rgba(255,255,255,0.18), transparent),
                radial-gradient(circle 0.7px at 47.3% 41.2%, rgba(255,255,255,0.15), transparent),
                radial-gradient(circle 1.4px at 55.0% 45.1%, rgba(255,255,255,0.41), transparent),
                radial-gradient(circle 1.9px at 59.9% 43.1%, rgba(244,217,166,0.45), transparent),
                radial-gradient(circle 0.6px at 70.3% 48.3%, rgba(255,255,255,0.18), transparent),
                radial-gradient(circle 1.0px at 79.6% 46.6%, rgba(255,255,255,0.4), transparent),
                radial-gradient(circle 0.8px at 84.6% 48.5%, rgba(255,255,255,0.16), transparent),
                radial-gradient(circle 0.6px at 92.9% 47.9%, rgba(255,255,255,0.24), transparent),
                radial-gradient(circle 0.6px at 2.6% 52.0%, rgba(255,255,255,0.17), transparent),
                radial-gradient(circle 0.6px at 9.5% 52.6%, rgba(255,255,255,0.28), transparent),
                radial-gradient(circle 0.5px at 20.8% 52.4%, rgba(244,217,166,0.19), transparent),
                radial-gradient(circle 1.2px at 30.7% 55.4%, rgba(244,217,166,0.44), transparent),
                radial-gradient(circle 0.8px at 39.6% 54.5%, rgba(255,255,255,0.22), transparent),
                radial-gradient(circle 0.8px at 47.1% 58.9%, rgba(255,255,255,0.27), transparent),
                radial-gradient(circle 1.7px at 53.5% 53.8%, rgba(255,255,255,0.41), transparent),
                radial-gradient(circle 1.3px at 60.9% 52.3%, rgba(255,255,255,0.43), transparent),
                radial-gradient(circle 0.7px at 69.4% 52.9%, rgba(255,255,255,0.18), transparent),
                radial-gradient(circle 0.7px at 77.6% 58.7%, rgba(255,255,255,0.19), transparent),
                radial-gradient(circle 1.8px at 86.2% 53.9%, rgba(255,255,255,0.49), transparent),
                radial-gradient(circle 1.7px at 93.8% 55.0%, rgba(255,255,255,0.42), transparent),
                radial-gradient(circle 0.6px at 1.1% 61.2%, rgba(255,255,255,0.25), transparent),
                radial-gradient(circle 0.9px at 14.2% 66.3%, rgba(255,255,255,0.22), transparent),
                radial-gradient(circle 0.8px at 24.1% 62.2%, rgba(255,255,255,0.16), transparent),
                radial-gradient(circle 0.8px at 31.8% 66.0%, rgba(255,255,255,0.17), transparent),
                radial-gradient(circle 0.8px at 37.5% 67.7%, rgba(255,255,255,0.25), transparent),
                radial-gradient(circle 1.0px at 47.1% 66.5%, rgba(255,255,255,0.3), transparent),
                radial-gradient(circle 0.8px at 51.5% 67.7%, rgba(255,255,255,0.26), transparent),
                radial-gradient(circle 0.8px at 62.4% 61.0%, rgba(255,255,255,0.24), transparent),
                radial-gradient(circle 0.6px at 71.9% 61.5%, rgba(255,255,255,0.16), transparent),
                radial-gradient(circle 0.9px at 80.7% 62.6%, rgba(255,255,255,0.23), transparent),
                radial-gradient(circle 0.7px at 87.4% 66.5%, rgba(244,217,166,0.26), transparent),
                radial-gradient(circle 0.6px at 93.5% 63.0%, rgba(244,217,166,0.25), transparent),
                radial-gradient(circle 0.8px at 1.2% 73.2%, rgba(255,255,255,0.26), transparent),
                radial-gradient(circle 0.5px at 12.6% 74.7%, rgba(255,255,255,0.3), transparent),
                radial-gradient(circle 1.8px at 24.0% 78.5%, rgba(255,255,255,0.56), transparent),
                radial-gradient(circle 1.4px at 28.8% 73.1%, rgba(255,255,255,0.32), transparent),
                radial-gradient(circle 0.6px at 35.1% 75.2%, rgba(255,255,255,0.29), transparent),
                radial-gradient(circle 1.4px at 48.4% 76.6%, rgba(244,217,166,0.36), transparent),
                radial-gradient(circle 0.6px at 50.9% 74.9%, rgba(255,255,255,0.17), transparent),
                radial-gradient(circle 1.9px at 61.3% 77.7%, rgba(244,217,166,0.57), transparent),
                radial-gradient(circle 0.6px at 73.7% 76.7%, rgba(255,255,255,0.21), transparent),
                radial-gradient(circle 0.7px at 82.5% 75.7%, rgba(244,217,166,0.2), transparent),
                radial-gradient(circle 0.9px at 84.8% 77.7%, rgba(255,255,255,0.19), transparent),
                radial-gradient(circle 0.9px at 95.9% 72.5%, rgba(255,255,255,0.3), transparent),
                radial-gradient(circle 0.7px at 5.0% 88.3%, rgba(244,217,166,0.27), transparent),
                radial-gradient(circle 0.8px at 14.0% 84.6%, rgba(244,217,166,0.2), transparent),
                radial-gradient(circle 0.6px at 23.7% 82.0%, rgba(255,255,255,0.2), transparent),
                radial-gradient(circle 0.6px at 32.3% 83.1%, rgba(255,255,255,0.24), transparent),
                radial-gradient(circle 1.4px at 35.3% 82.3%, rgba(255,255,255,0.36), transparent),
                radial-gradient(circle 0.6px at 48.5% 89.0%, rgba(244,217,166,0.18), transparent),
                radial-gradient(circle 1.1px at 53.1% 81.7%, rgba(255,255,255,0.38), transparent),
                radial-gradient(circle 0.7px at 64.2% 84.3%, rgba(255,255,255,0.21), transparent),
                radial-gradient(circle 0.6px at 67.9% 83.2%, rgba(255,255,255,0.24), transparent),
                radial-gradient(circle 1.1px at 81.6% 82.7%, rgba(255,255,255,0.35), transparent),
                radial-gradient(circle 0.5px at 90.5% 87.8%, rgba(255,255,255,0.16), transparent),
                radial-gradient(circle 0.5px at 98.5% 84.8%, rgba(255,255,255,0.22), transparent),
                radial-gradient(circle 0.6px at 6.3% 97.8%, rgba(255,255,255,0.17), transparent),
                radial-gradient(circle 0.8px at 12.6% 96.5%, rgba(255,255,255,0.26), transparent),
                radial-gradient(circle 1.9px at 20.5% 95.4%, rgba(255,255,255,0.45), transparent),
                radial-gradient(circle 1.1px at 30.1% 93.4%, rgba(255,255,255,0.39), transparent),
                radial-gradient(circle 0.7px at 34.9% 91.6%, rgba(255,255,255,0.22), transparent),
                radial-gradient(circle 0.7px at 46.5% 91.1%, rgba(255,255,255,0.31), transparent),
                radial-gradient(circle 1.1px at 56.7% 94.8%, rgba(255,255,255,0.44), transparent),
                radial-gradient(circle 0.8px at 61.2% 91.2%, rgba(255,255,255,0.22), transparent),
                radial-gradient(circle 1.0px at 71.9% 98.4%, rgba(255,255,255,0.34), transparent),
                radial-gradient(circle 0.8px at 80.4% 92.6%, rgba(255,255,255,0.24), transparent),
                radial-gradient(circle 0.6px at 90.6% 93.5%, rgba(255,255,255,0.19), transparent),
                radial-gradient(circle 0.6px at 94.5% 98.6%, rgba(255,255,255,0.19), transparent),
                radial-gradient(ellipse 900px 500px at 18% 0%, rgba(232,163,61,0.16), transparent 60%),
                linear-gradient(180deg, var(--navy-950) 0%, var(--navy-700) 45%, var(--navy-950) 100%);
}

/* ---------- Funkelnde Sterne & Sternschnuppe (optional) ----------
   Nur sichtbar, wenn eine Seite den Container <div class="star-fx">
   mit den passenden <span>-Elementen einbindet (siehe index.htm).
   Ohne dieses Markup bleiben diese Regeln einfach ungenutzt - der
   Sternenhimmel oben funktioniert davon unabhängig immer. */
.star-fx {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.twinkle {
    position: absolute;
    width: 4px; height: 4px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
}

.shooting-star {
    position: absolute;
    top: 8%; left: 4%;
    width: 70px; height: 2px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    opacity: 0;
    transform: rotate(18deg);
}

@media (prefers-reduced-motion: no-preference) {
    .twinkle { animation: twinkle 2.6s ease-in-out infinite; }
    .shooting-star { animation: shoot 9s ease-in 1.5s infinite; }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.7); }
}

@keyframes shoot {
    0% { opacity: 0; transform: translate(0, 0) rotate(18deg); }
    2% { opacity: 1; }
    9% { opacity: 0; transform: translate(90px, 30px) rotate(18deg); }
    100% { opacity: 0; }
}

/* ---------- Seitenspalte ---------- */
main { 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 0 52px 8px; 
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ---------- Kopfbereich (Titel über der Buch-Illustration) ---------- */
header.section-dark h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: var(--fs-h1);
    letter-spacing: 0.01em;
    margin: 4px 0 8px;
}

header.section-dark p {
    margin: 0;
}

/* ---------- Fließtext: Übersichts-Intro & Geschichtentext ----------
   .info-page (Intro) und .story-page (eigentlicher Geschichtentext)
   teilen sich Form, Maße und die Initiale des ersten Buchstabens -
   nur Hintergrund und Textfarbe unterscheiden sich. */
.info-page, .story-page {
    font-family: var(--font-serif);
    border-radius: 14px;
    padding: 28px 26px;
    margin: 0;
}
.info-page { background: none; box-shadow: none; }
.story-page { background: var(--paper); box-shadow: 0 10px 28px rgba(11, 12, 38, 0.35); }

.info-page p, .story-page p {
    line-height: 1.85;
    margin: 0 0 20px;
}
.info-page p:last-child, .story-page p:last-child { margin-bottom: 0; }
.info-page p { color: var(--sky-text); }
.story-page p { color: var(--ink-900); }

.first::first-letter {
    font-family: var(--font-serif);
    font-size: 3.4em;
    line-height: 0.78;
    float: left;
    padding: 4px 10px 0 0;
    color: var(--firstcolor, var(--amber-400));
    font-weight: 700;
}

/* ---------- Inhaltliche Bereiche ----------
   main regelt den horizontalen Abstand und den Abstand zwischen den
   Abschnitten jetzt einheitlich an einer Stelle (padding/gap oben) -
   der frühere Wrapper ".section-content" wird dafür nicht mehr
   gebraucht und ist komplett entfernt. */

.story-actions { 
    text-align: right; 
    margin: 0; 
}

.surprise-btn, .copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
}

.surprise-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--amber-300);
    border-radius: 999px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.surprise-btn:hover { border-color: var(--amber-400); background: rgba(232, 163, 61, 0.12); }

/* ---------- Geschichten als Buch-Karten ---------- */
ul.story-list { list-style: none; padding: 0; margin: 0; }

/* Farben je Karte: Standard ist Amber/Cream. Für eine einzelne Geschichte
           per style="--spine: FARBE; --card-bg: FARBE;" am <li> überschreibbar -
           siehe Vorlage direkt über der Liste weiter unten. */
ul.story-list li {
            padding: 16px 18px;
            margin-bottom: 16px;
            border-radius: 6px 14px 14px 6px;
            border: 1px solid var(--line);
            border-left: 6px solid var(--spine, var(--amber-600));
            background: var(--card-bg, var(--paper));
            box-shadow: 0 6px 18px rgba(11, 12, 38, 0.35);
            transition: transform 0.18s ease, box-shadow 0.18s ease;
}

ul.story-list li a.story-card-link {
            display: flex;
            align-items: flex-start;
            gap: 18px;
            text-decoration: none;
            color: inherit;
}

ul.story-list li > div { min-width: 0; }

@media (prefers-reduced-motion: no-preference) {
            ul.story-list li:hover {
                transform: translateY(-3px) rotate(-0.3deg);
                box-shadow: 0 14px 30px rgba(11, 12, 38, 0.45);
            }
            ul.story-list li.is-picked { animation: pickPulse 1.4s ease-in-out 1; }
}

ul.story-list li.is-picked { outline: 2px solid var(--amber-400); outline-offset: 3px; }

@keyframes pickPulse {
            0%, 100% { box-shadow: 0 6px 18px rgba(11, 12, 38, 0.35); }
            40% { box-shadow: 0 0 0 6px rgba(232, 163, 61, 0.35), 0 14px 30px rgba(11, 12, 38, 0.5); }
}

.story-icon, .story-pic {
    object-fit: cover;
    border-radius: 4px 10px 10px 4px;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}
.story-icon { width: 110px; height: 110px; }
.story-pic { width: 100%; height: auto; }
@media (max-width: 600px) {
    .story-icon { width: 84px; height: 84px; }
}
@media (max-width: 480px) {
    .story-icon { width: 64px; height: 64px; }
}

ul.story-list .story-title {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    display: inline-block;
    font-weight: 600;
    color: var(--story-color-dark, var(--navy-800));
    margin-bottom: 4px;
}

ul.story-list .story-front-title {
    text-align: center;
    font-family: var(--font-serif);
    font-size: var(--fs-h1);
    font-weight: 600;
    color: var(--story-color-dark, var(--navy-800));
    margin-bottom: 4px;
}

ul.story-list a.story-card-link:hover .story-title { text-decoration: underline; }

.story-text { color: var(--ink-600); }
.teaser-text { color: var(--ink-600); text-align: center; margin-bottom: 30px }

/* ---------- Podcast/Hörbuch-Abschnitt ---------- */
.podcast-card {
            margin: 0;
            padding: 28px 26px;
            border-radius: 14px;
            background:
                radial-gradient(circle at 15% 0%, rgba(232, 163, 61, 0.35), transparent 55%),
                linear-gradient(160deg, var(--navy-950), var(--navy-800));
            color: #fff;
}

.podcast-card h2 { font-size: var(--fs-h2); font-weight: 600; margin: 0; }
.podcast-card audio {
            width: 100%;
            accent-color: var(--amber-400);
}

.podcast-card__head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 6px;
}

.podcast-card__head svg { flex-shrink: 0; }
 
.podcast-card__lead {
            color: var(--sky-text);
            margin: 0 0 20px;
}

.podcast-steps {
            list-style: none;
            counter-reset: step;
            padding: 0;
            margin: 0 0 22px;
            display: grid;
            gap: 12px;
}

.podcast-steps li {
            counter-increment: step;
            display: flex;
            gap: 12px;
            align-items: flex-start;
            color: #e7e7f5;
}

.podcast-steps li::before {
            content: counter(step);
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(232, 163, 61, 0.25);
            border: 1px solid rgba(232, 163, 61, 0.6);
            color: var(--amber-300);
            display: flex;
            align-items: center;
            justify-content: center;
}

.feed-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 10px;
            padding: 10px 10px 10px 14px;
            margin-bottom: 16px;
}

.feed-row code {
    flex: 1 1 220px;
    color: var(--amber-300);
    word-break: break-all;
    font-size: var(--fs-footnote);
}

.copy-btn {
    background: var(--amber-400);
    color: var(--navy-950);
    border: none;
    border-radius: 8px;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.copy-btn:hover { background: var(--amber-600); }
.copy-btn.copied { background: #4fae6b; color: #fff; }

.podcast-note { margin: 14px 0 0; color: var(--sky-text-dim); font-size: var(--fs-footnote); font-family: var(--font-sans); }

/* Ersetzt den bisherigen Inline-Style am "Zur Übersicht"-Link: als
   echte Klasse jetzt auch per @media überschreibbar. Breite/Abstand
   erbt der Link von .section-dark, nur die Ausrichtung weicht ab. */
.back-link { text-align: left; }

/* ---------- Barrierefreiheit ---------- */
.skip-link {
    position: absolute;
    left: -999px; top: 0;
    background: var(--amber-400);
    color: var(--navy-950);
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
    font-weight: 700;
    z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Kopf- und Fußbereich (Buchdeckel vorn & hinten) ----------
   Kein eigener Hintergrund: beide liegen auf dem Sternenhimmel oben,
   damit jede Seite wie ein durchgehendes Bild wirkt. Dieselbe Spalte
   (max-width/margin) und derselbe horizontale Abstand wie main, damit
   Titel, Fußzeile und Inhalt sichtbar zur selben Spalte gehören.
   header.section-dark (Titel + Buch-Illustration) ist seitenspezifisch
   und bleibt daher im jeweiligen <style>-Block der einzelnen Seite. */
.section-dark {
    color: #fff;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 52px;
}

.section-dark a { color: var(--amber-300); text-decoration: underline; }

footer.section-dark { padding: 22px 52px; }

footer.section-dark p { margin: 0; color: var(--sky-text); }

/* ---------- Buch-Illustration ----------
   Das SVG selbst wird von theme.js in jedes .hero-illustration-Element
   eingesetzt (auch wenn aktuell nur die Übersichtsseite es nutzt) -
   hier nur die Größe, responsiv wie gehabt. */
.book-hero { width: 160px; height: auto; display: block; margin: 0 auto; }

/* ---------- Veränderte Darstellung auf kleineren Bildschirmen ---------- */
@media (max-width: 480px) {
    .book-hero { width: 120px; }
    main { padding-left: 0px; padding-right: 0px; gap: 20px; }
    header.section-dark, footer.section-dark { padding-left: 18px; padding-right: 18px; }
    .podcast-card { padding: 22px 18px; border-radius: 0px; }
    ul.story-list li { gap: 12px; padding: 12px; border-radius: 0px; }
    .info-page, .story-page { padding: 24px 18px 28px; border-radius: 0px; }
}

/* ---------- Druckansicht ----------
   Sternenhimmel und interaktive Elemente brauchen kein Papier;
   Intro- und Geschichtentext bleiben gut lesbar auf Weiß. */
@media print {
    body::before, .star-fx, .skip-link,
    .story-actions, .podcast-card, .back-link { display: none; }
    body { color: #000; }
    header.section-dark, footer.section-dark { color: #000; }
    header.section-dark p, footer.section-dark p { color: #333; }
    .section-dark a { color: #000; }
    .info-page, .story-page { background: #fff; box-shadow: none; }
    .info-page p, .story-page p { color: #000; }
    ul.story-list li {
        background: #fff !important;
        border: 1px solid #999;
        border-left-color: #999 !important;
        border-left-width: 4px;
        box-shadow: none;
        page-break-inside: avoid; /* Fallback für ältere Browser/Druck-Engines */
        break-inside: avoid;
    }
    ul.story-list .story-title { color: #000; }
}