/* Auf einen Blick — Stylesheet
   Farbtoken „Regnum“ (00 Designsystem C+L §2) + Markenfarben der Kanalfamilie.
   Handwerk: Kicker in gesperrten Versalien über dem Titel, EINE kurze Goldlinie je Seite,
   keine Vollrahmen, Weißbühne wie auf den Plakaten. Hell, bewusst ohne Dunkelmodus. */

@font-face{font-family:"Cormorant";src:url("schriften/CormorantGaramond-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("schriften/CormorantGaramond-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("schriften/CormorantGaramond-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("schriften/CormorantGaramond-Italic-500.woff") format("woff");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant";src:url("schriften/CormorantGaramond-Italic-600.woff") format("woff");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Crimson";src:url("schriften/CrimsonPro-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson";src:url("schriften/CrimsonPro-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Crimson";src:url("schriften/CrimsonPro-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --weiss:#FCFBF8; --altweiss:#F5F2EA; --papier:#FFFFFF;
  --tinte:#1C1B19; --tinte2:#55524C; --linie:#D8D2C4; --silber:#8E887C;
  --weinrot:#7A1F2B; --blutrot:#8A1220; --gold:#A6851F; --gold-hell:#C9A227; --navy:#1F3A5F; --gruen:#5A7A4D;
  /* Gold als Schrift: #A6851F erreicht auf Weiß nur 3,4:1. #80692D ist der Ursprungston aus dem Designsystem (§2, „aufgehellt aus 80692D“) und hält 5,1:1. */
  --gold-schrift:#80692D;
  --fuss-text:#F3E9E4; --fuss-leise:#E8D5CF;
  --display:"Cormorant","Cormorant Garamond",Garamond,"Times New Roman",serif;
  --text:"Crimson","Crimson Pro",Georgia,"Times New Roman",serif;
  --rahmen:1180px; --schmal:760px; --rand:clamp(16px,4vw,40px);
  --schatten:0 1px 2px rgba(28,27,25,.08),0 14px 34px -14px rgba(122,31,43,.25);
  --uebergang:220ms cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:80px} /* Sprungziele nicht unter dem klebenden Kopf */
body{margin:0;background:var(--weiss);color:var(--tinte);font:400 1.0625rem/1.55 var(--text);font-feature-settings:"kern","liga","onum";}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:var(--weinrot);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--weinrot) 45%,transparent);transition:color var(--uebergang),text-decoration-color var(--uebergang)}
a:hover{color:var(--blutrot);text-decoration-color:var(--gold)}
::selection{background:color-mix(in srgb,var(--gold) 35%,white);color:var(--tinte)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.sprung{position:absolute;left:-999px;top:8px;background:var(--weinrot);color:#fff;padding:8px 12px;z-index:50}
.sprung:focus{left:8px}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;color:var(--tinte);text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(2.5rem,1.6rem + 4vw,4.6rem);font-weight:600}
h2{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.35rem);margin:0 0 .55em}
h3{font-size:1.45rem}
p{margin:0 0 1em;max-width:70ch}
strong{font-weight:700}
small{font-size:.85em}

.rahmen{width:min(100% - 2*var(--rand),var(--rahmen));margin-inline:auto}
.rahmen.schmal,.schmal{width:min(100% - 2*var(--rand),var(--schmal))}
.abschnitt{padding:clamp(40px,6vw,84px) 0}
.abschnitt-ton{background:var(--altweiss);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.abschnitt-ton + .abschnitt-ton{border-top:0}
.abschnitt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.abschnitt-kopf h2{margin-bottom:.3em}
.mehr{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-size:1.15rem;font-weight:600;white-space:nowrap}

/* Kicker, Goldlinie, Titelkopf — Handwerk des Designsystems */
.kicker{font-family:var(--display);font-weight:600;font-size:.875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--weinrot);margin:0 0 .75rem}
.goldlinie{display:block;width:64px;height:2px;background:var(--gold);margin:1.1rem auto 1.4rem}
.goldlinie.links{margin-left:0}
.titelkopf{text-align:center;padding:clamp(40px,6vw,80px) 0 clamp(12px,2vw,24px)}
.titelkopf h1{max-width:18ch;margin-inline:auto}
.unterzeile{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.25rem,1rem + 1vw,1.7rem);color:var(--tinte2);margin:.6em auto 0;max-width:40ch}
.vorspann{font-size:1.22rem;line-height:1.5;max-width:60ch}
.vorspann.klein{font-size:1.08rem;color:var(--tinte2)}
.randnotiz{font-style:italic;color:var(--tinte2);max-width:60ch}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--weiss) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.marke{flex:0 0 auto;min-width:46px;min-height:44px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinte);font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:.01em}
.marke img{width:46px;height:46px;object-fit:contain}
.nav{display:flex;gap:clamp(14px,2.4vw,32px)}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;text-decoration:none;color:var(--tinte2);font-family:var(--display);font-weight:600;font-size:1.12rem;padding:0 2px;border-bottom:2px solid transparent;transition:color var(--uebergang),border-color var(--uebergang)}
.nav a:hover{color:var(--tinte);border-color:var(--gold)}
.nav a[aria-current="page"]{color:var(--weinrot);border-color:var(--weinrot)}

/* Held (Startseite) */
.held{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(48px,8vw,120px) 0 clamp(120px,16vw,210px)}
.held-text h1{max-width:12ch}
.held .vorspann{margin-top:0}
.held-bild{display:flex;justify-content:center}
.held-bild picture{width:min(100%,420px)}
.held-bild .gucker{width:100%;filter:drop-shadow(0 18px 28px rgba(28,27,25,.14))}
.figuren{position:absolute;bottom:0;height:clamp(92px,13vw,190px);width:auto;pointer-events:none}
.figuren-links{left:0}
.figuren-rechts{right:0}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin:1.4rem 0 0}
.knopf{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--weinrot);color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.15;padding:12px 20px;border:1px solid var(--weinrot);border-radius:3px;min-height:48px;justify-content:center;box-shadow:0 1px 2px rgba(28,27,25,.1),0 10px 24px -12px rgba(122,31,43,.6);transition:transform var(--uebergang),box-shadow var(--uebergang),background var(--uebergang)}
.knopf:hover{background:var(--blutrot);color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px rgba(28,27,25,.1),0 14px 28px -12px rgba(122,31,43,.7)}
.knopf small{font-family:var(--text);font-weight:400;font-size:.875rem;opacity:.9;letter-spacing:0}
.knopf.zweit{background:transparent;color:var(--tinte);border-color:var(--tinte2);box-shadow:none}
.knopf.zweit:hover{background:var(--papier);border-color:var(--tinte);color:var(--tinte)}
.knopf.zweit small{color:var(--tinte2);opacity:1}

/* Werk-Liste (Karten als Zeitungsspalten, nicht als gleichförmige Kacheln) */
.werk-liste{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(20px,3vw,40px) clamp(20px,3vw,36px)}
.werk-liste.gross{grid-template-columns:1fr;gap:0}
.werk-karte{display:flex;flex-direction:column;gap:14px;padding:0 0 22px;border-bottom:1px solid var(--linie)}
.werk-liste.gross .werk-karte{flex-direction:row;align-items:flex-start;gap:clamp(18px,3vw,40px);padding:28px 0}
.werk-liste.gross .werk-bild{flex:0 0 min(44%,460px)}
.werk-bild{display:block;overflow:hidden;border-radius:4px;box-shadow:var(--schatten);background:var(--papier)}
.werk-bild img{transition:transform 600ms cubic-bezier(.2,.8,.2,1)}
.werk-bild:hover img{transform:scale(1.025)}
.werk-text :is(h2,h3){font-size:1.65rem;margin:.1em 0 .25em}
.werk-liste.gross .werk-text :is(h2,h3){font-size:2.1rem}
.werk-text :is(h2,h3) a{text-decoration:none;color:var(--tinte)}
.werk-text :is(h2,h3) a:hover{color:var(--weinrot)}
.werk-autor{font-family:var(--display);font-weight:600;font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-schrift);margin:0}
.werk-frage{font-family:var(--display);font-style:italic;font-size:1.3rem;line-height:1.3;color:var(--navy);margin:0 0 .5em}
.werk-meta{font-size:.95rem;color:var(--tinte2);margin:0 0 .4em}
.werk-links{margin:0;font-size:1rem}
/* Textlinks in Karten: Polster vergrößert die Tippfläche auf 44 px, ohne die Zeile zu verschieben */
.werk-links a,.weiter a{padding-block:13px}

/* Schritte */
.schritte{counter-reset:s;list-style:none;margin:8px 0 1.2em;padding:0;display:grid;gap:18px}
.schritte li{position:relative;padding-left:60px;max-width:62ch}
.schritte li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-4px;width:40px;height:40px;border-radius:50%;background:var(--weinrot);color:#fff;font-family:var(--display);font-weight:700;font-size:1.3rem;display:grid;place-items:center}
.schritte strong{font-family:var(--display);font-size:1.3rem;font-weight:700;display:block;margin-bottom:.1em}

/* Kanäle */
.kanal-liste{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:28px 48px}
.kanal{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--linie)}
.kanal > picture,.kanal .platzhalter{flex:0 0 88px}
.kanal > div{min-width:0}
.kanal img,.kanal .platzhalter{width:88px;height:88px;border-radius:50%;object-fit:cover;box-shadow:0 1px 2px rgba(28,27,25,.1),0 8px 18px -8px rgba(28,27,25,.3)}
.kanal .platzhalter{display:grid;place-items:center;background:var(--papier);border:1px dashed var(--silber);box-shadow:none}
/* Geplante Kanäle: das Zeichen des Dachs, ausgegraut — kein Ersatzsymbol, bis sie ein eigenes Logo haben */
.kanal .platzhalter img{width:52px;height:52px;border-radius:0;box-shadow:none;object-fit:contain;filter:grayscale(1);opacity:.4}
.kanal h3{font-size:1.5rem;margin:0 0 .25em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kanal h3 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--tinte)}
.kanal h3 a:hover{color:var(--weinrot)}
.kanal p{margin:0 0 .4em;max-width:52ch}
.kanal.geplant p,.kanal.geplant h3{color:var(--tinte2)}
.status{font-family:var(--display);font-weight:600;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte2);border:1px solid var(--linie);border-radius:999px;padding:2px 9px;vertical-align:middle}
.status.laeuft{color:var(--gruen);border-color:color-mix(in srgb,var(--gruen) 45%,transparent)}
.kanal-links{font-size:1rem}
.sozial{display:flex;flex-wrap:wrap;gap:8px;margin:.3em 0 .6em}
.sozial a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--linie);border-radius:999px;background:var(--papier);text-decoration:none;color:var(--tinte);font-family:var(--display);font-weight:600;font-size:1rem;transition:border-color var(--uebergang),color var(--uebergang),transform var(--uebergang)}
.sozial a:hover{border-color:var(--weinrot);color:var(--weinrot);transform:translateY(-1px)}
.sozial.hell a{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.sozial.hell a:hover{border-color:var(--gold-hell);color:#fff}
.fuss-sozial{grid-column:span 2}
.fuss-titel{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:0 0 .2em;color:var(--fuss-text)}
.fuss-sozial .sozial{margin:0 0 .9em}
.lesen .sozial{margin:.2em 0 1em}

/* Plakat-Teaser */
.plakat-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.plakat-stapel{position:relative;display:block;aspect-ratio:16/10;text-decoration:none}
.plakat-stapel > picture{position:absolute;width:78%;transition:transform 500ms cubic-bezier(.2,.8,.2,1)}
.plakat-stapel img{width:100%;border-radius:3px;box-shadow:var(--schatten);border:1px solid var(--linie);transition:transform 500ms cubic-bezier(.2,.8,.2,1)}
.plakat-stapel > :nth-child(1){right:0;top:0;z-index:3}
.plakat-stapel > :nth-child(2){left:6%;top:16%;z-index:2;transform:rotate(-3deg)}
.plakat-stapel > :nth-child(3){left:0;bottom:0;z-index:1;transform:rotate(2deg)}
.plakat-stapel:hover > :nth-child(1){transform:translateY(-6px)}

/* Werkseite */
.werk .titelkopf{padding-bottom:0}
.leitfrage{background:var(--navy);color:#fff;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem);line-height:1.3;padding:18px 26px 20px;margin:1.6rem auto 1.4rem;max-width:40ch;text-align:center;border-radius:3px;box-shadow:0 10px 30px -14px rgba(31,58,95,.7)}
.leitfrage span{display:block;font-style:normal;font-weight:600;font-size:.875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hell);margin-bottom:.4em}
.kurz{font-size:1.2rem;text-align:center;max-width:56ch;margin:0 auto 1.6rem;color:var(--tinte)}
.video{margin:0 auto;max-width:980px}
.video-knopf{position:relative;display:block;width:100%;padding:0;border:0;background:var(--tinte);cursor:pointer;border-radius:4px;overflow:hidden;box-shadow:var(--schatten);aspect-ratio:16/9}
.video-knopf picture{height:100%}
.video-knopf img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.2,.8,.2,1),opacity var(--uebergang)}
.video-knopf:hover img{transform:scale(1.02);opacity:.92}
.video-knopf .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--weinrot);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.5);transition:transform var(--uebergang),background var(--uebergang)}
.video-knopf .play svg{margin-left:4px;width:34px;height:34px}
.video-knopf:hover .play{transform:scale(1.06);background:var(--blutrot)}
.video-knopf .dauer{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.72);color:#fff;font-family:var(--text);font-size:.9rem;padding:2px 8px;border-radius:3px;font-variant-numeric:tabular-nums}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:4px;box-shadow:var(--schatten);background:#000}
.video figcaption{font-size:.92rem;color:var(--tinte2);margin:10px 0 0;text-align:center}

.plakat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,4vw,60px);align-items:center}
.plakat-text .knoepfe{flex-direction:column;align-items:stretch;gap:10px;max-width:380px}
.plakat-bild{display:block;border:1px solid var(--linie);border-radius:3px;box-shadow:var(--schatten);background:var(--papier);overflow:hidden}
.plakat-bild img{transition:transform 700ms cubic-bezier(.2,.8,.2,1)}
.plakat-bild:hover img{transform:scale(1.015)}

.inhalt{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.inhalt h2{font-size:1.75rem;margin:1.8em 0 .5em}
.inhalt h2:first-child{margin-top:0}
.klausur{counter-reset:k;list-style:none;margin:0 0 1em;padding:0;display:grid;gap:12px}
.klausur li{position:relative;padding-left:44px;font-size:1.12rem;max-width:60ch}
.klausur li::before{counter-increment:k;content:counter(k);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--weinrot);color:#fff;font-family:var(--display);font-weight:700;display:grid;place-items:center;font-size:1.05rem}
.tipp{background:var(--papier);border:1px solid var(--linie);border-radius:3px;padding:12px 16px;max-width:60ch}
.zitat{font-family:var(--display);font-style:italic;font-size:1.4rem;line-height:1.35;color:var(--weinrot);margin:1em 0 1.4em;padding-left:18px;border-left:1px solid var(--linie);max-width:40ch}
.etappen{counter-reset:et;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.etappen li{position:relative;padding-left:44px}
.etappen li::before{counter-increment:et;content:counter(et);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;border:2px solid var(--weinrot);color:var(--weinrot);font-family:var(--display);font-weight:700;display:grid;place-items:center;font-size:1.05rem;background:var(--papier)}
.etappen strong,.paare strong{font-family:var(--display);font-size:1.25rem;font-weight:700;display:block;line-height:1.2}
.etappen span,.paare span{color:var(--tinte2)}
.paare{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px 24px}
.steckbrief{margin:0 0 .5em;display:grid;gap:8px}
.steckbrief div{display:grid;grid-template-columns:118px 1fr;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--linie)}
.steckbrief dt{font-family:var(--display);font-weight:700;color:var(--weinrot);font-size:1.08rem}
.steckbrief dd{margin:0}
.spalte-rand h2{font-size:1.4rem;margin:1.6em 0 .5em}
.spalte-rand h2:first-child{margin-top:0}
.kapitel{list-style:none;margin:0;padding:0;columns:2;column-gap:20px;font-size:.98rem}
.kapitel li{break-inside:avoid}
.kapitel a{text-decoration:none;color:var(--tinte);display:flex;gap:10px;padding:10px 0}
.kapitel a:hover{color:var(--weinrot)}
.zeit{font-variant-numeric:tabular-nums;color:var(--gold-schrift);font-weight:700;min-width:38px;text-align:right}
.short{display:flex;gap:18px;align-items:flex-start;margin-top:2em;padding:18px;background:var(--papier);border:1px solid var(--linie);border-radius:4px}
.short-bild{flex:0 0 110px;border-radius:6px;overflow:hidden;box-shadow:var(--schatten)}
.short h3{font-size:1.3rem;margin:0 0 .3em}
.short p{margin:0 0 .5em;font-size:1rem}
.hinweise{margin-top:1.6em;font-size:.95rem;color:var(--tinte2)}
.hinweise p{max-width:46ch}

/* Videofamilie */
.familienplakat{border:1px solid var(--linie);border-radius:3px;box-shadow:var(--schatten);margin:10px 0 28px;background:var(--papier)}
.aeste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:26px 32px}
.ast ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ast li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:"id titel bald" "id serie bald";column-gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--linie)}
.ast li strong{grid-area:titel;font-family:var(--display);font-size:1.12rem;font-weight:700;line-height:1.2}
.ast-id{grid-area:id;font-family:var(--display);font-weight:700;color:var(--tinte2);font-size:.9rem}
.ast-serie{grid-area:serie;font-size:.9rem;color:var(--tinte2)}
.ast .bald{grid-area:bald;align-self:center;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte2);font-family:var(--display);font-weight:600;white-space:nowrap}
.ast-marke{display:inline-block;font-family:var(--display);font-weight:700;font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:5px 12px;border-radius:999px;background:var(--weinrot)}
.ast-navy .ast-marke{background:var(--navy)}
.ast-gruen .ast-marke{background:var(--gruen)}
.ast-gold .ast-marke{background:var(--gold-schrift)}
.ast h3{margin:0 0 .3em}
.ast-satz{font-style:italic;color:var(--tinte2);margin:0 0 .6em;font-size:1rem}

/* Zeitleiste (Bücher-Seite): Goldpfad und Kreise wie das Familienplakat. Quer als SVG erst ab 1200 px (die
   SVG-Schrift skaliert mit), darunter dieselbe Zeitleiste senkrecht als Liste — Schrift bleibt ≥ 14 px. */
.zeitleiste{margin:8px 0 clamp(20px,3vw,36px);padding:0 0 clamp(20px,3vw,32px);border-bottom:1px solid var(--linie)}
.zeitleiste h2{margin-bottom:.2em}
.zl-legende{color:var(--tinte2);font-size:1rem;margin:0 0 1rem}
.zeitleiste .zeitleiste-quer{display:none;width:100%;height:auto;overflow:visible}
@media (min-width:1200px){.zeitleiste:not(.nur-hoch) .zeitleiste-quer{display:block}.zeitleiste:not(.nur-hoch) .zeitleiste-hoch{display:none}}
.zeitleiste-hoch{max-width:560px}
.zl-lauf{margin-left:8px;padding-left:26px;border-left:3px solid var(--gold)}
.zl-lauf ul{list-style:none;margin:0;padding:0}
.zl-ep{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.15rem;color:var(--gold-schrift);margin:0;padding:10px 0 2px}
.zl-lauf li{position:relative;padding:8px 0}
.zl-lauf li::before{content:"";position:absolute;left:-35px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--weiss)}
.zl-lauf li.zl-offen::before{left:-34px;width:13px;height:13px;margin-top:-6.5px;background:var(--weiss);border:1.5px dashed var(--tinte2)}
.zl-da a{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--tinte)}
.zl-da picture{flex:0 0 120px}
.zl-da a > span{min-width:0}
.zl-da img{border-radius:3px;border:1px solid var(--linie)}
.zl-da a:hover strong{color:var(--weinrot)}
.zl-lauf strong{display:block;font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.15}
.zl-offen strong{font-style:italic;font-weight:600;color:var(--tinte2)}
.zl-m{display:block;color:var(--tinte2);font-size:1rem}
.zl-bruch{height:26px;margin-left:-2px}
.zl-bruch svg{display:block}
.zl-bruch path{stroke:var(--gold);stroke-width:2.5;fill:none;stroke-linecap:round}
.zl-pfad{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.zl-bruch{stroke:var(--gold);stroke-width:2;fill:none;stroke-linecap:round}
.zl-grenze{stroke:var(--linie);stroke-width:1}
.zl-knoten{fill:var(--gold);stroke:var(--weiss);stroke-width:3}
.zl-knoten-bald{fill:var(--weiss);stroke:var(--tinte2);stroke-width:1.5;stroke-dasharray:3 2.5}
.zl-rahmen{fill:none;stroke:var(--linie);stroke-width:1}
.zl-epoche{font-family:var(--display);font-style:italic;font-weight:500;font-size:18px;fill:var(--gold-schrift)}
.zl-titel{font-family:var(--display);font-weight:700;font-size:19px;fill:var(--tinte)}
.zl-titel-bald{font-family:var(--display);font-style:italic;font-weight:600;font-size:18px;fill:var(--tinte2)}
.zl-meta{font-family:var(--text);font-size:16px;fill:var(--tinte2)}
.zl-stand{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase;fill:var(--tinte2)}
.zeitleiste a:hover .zl-titel,.zeitleiste a:focus-visible .zl-titel{fill:var(--weinrot)}
.zeitleiste a:hover .zl-rahmen,.zeitleiste a:focus-visible .zl-rahmen{stroke:var(--weinrot);stroke-width:2}
.zeitleiste a{text-decoration:none}
.zeitleiste a:focus{outline:none}

/* Erschienene Äste als Karten mit ihrem Thumbnail */
.erschienen-h{font-size:1.35rem;margin:6px 0 14px}
.ast-karten{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:24px 28px}
.ast-karte{display:flex;flex-direction:column;gap:4px}
.ast-karte-bild{margin-bottom:6px}
.ast-karte p{margin:0}
.ast-karte-bild{display:block;overflow:hidden;border-radius:4px;box-shadow:var(--schatten);background:var(--papier)}
.ast-karte-bild img{transition:transform 600ms cubic-bezier(.2,.8,.2,1)}
.ast-karte-bild:hover img{transform:scale(1.03)}
.ast-karte h4{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.15;margin:0}
.ast-karte h4 a{text-decoration:none;color:var(--tinte);display:inline-block;padding-block:10px}
.ast-karte h4 a:hover{color:var(--weinrot)}
.ast-karte-meta{font-size:.95rem;color:var(--tinte2)}

/* Bücher-Seite */
.bald-liste{list-style:none;margin:0 0 1em;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px 24px}
.bald-liste li{padding:10px 0;border-bottom:1px solid var(--linie)}
.bald-liste strong{font-family:var(--display);font-size:1.25rem;font-weight:700;display:block}
.bald-liste span{color:var(--tinte2)}

/* Plakate-Seite */
.plakat-liste{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:clamp(36px,5vw,64px)}
.plakat-gross{display:block;border:1px solid var(--linie);border-radius:3px;box-shadow:var(--schatten);background:var(--papier);overflow:hidden}
.plakat-karte img{transition:transform 700ms cubic-bezier(.2,.8,.2,1)}
.plakat-gross:hover img{transform:scale(1.012)}
.plakat-karte > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;padding:14px 0 0}
.plakat-karte h2{font-size:1.7rem;flex-basis:100%;margin:0}
.plakat-karte .werk-autor{flex-basis:100%}

/* Lesen-Seite */
.lesen h2{margin-top:2em}
.lesen h3{font-size:1.2rem;margin:1.2em 0 .3em}
.weiter{padding:30px 0 10px;text-align:center}

/* Fuß */
/* Kein goldener Vollstreifen über dem Fuß: je Seite gibt es genau eine Goldlinie, die unter dem Titel (Designsystem §3) */
.fuss{margin-top:clamp(40px,6vw,80px);background:var(--weinrot);color:var(--fuss-text)}
.fuss a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.fuss a:hover{color:#fff;text-decoration-color:var(--gold-hell)}
.fuss-innen{display:grid;grid-template-columns:1.2fr 1.8fr;gap:32px;padding:40px 0 20px}
.fuss-marke{display:flex;gap:14px;align-items:flex-start}
.fuss-marke picture{flex:0 0 40px}
.fuss-marke img{width:40px;height:40px;background:#fff;border-radius:50%;padding:4px;object-fit:contain}
.fuss-marke strong{font-family:var(--display);font-size:1.3rem}
.fuss-marke span{color:var(--fuss-leise);font-size:.98rem}
.fuss-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fuss-links a{display:inline-block;padding:10px 0}
.fuss-zeile{font-size:.88rem;color:var(--fuss-leise);padding:0 0 26px;max-width:none;border-top:1px solid rgba(255,255,255,.18);padding-top:16px}

/* Handy und Tablet */
@media (max-width:900px){
  .held{grid-template-columns:1fr;padding-bottom:clamp(110px,22vw,170px);text-align:left}
  .held-bild{order:-1}
  .held-bild picture{width:min(60%,260px)}
  .plakat,.plakat-teaser,.inhalt{grid-template-columns:1fr}
  .plakat-bild{order:-1}
  .fuss-innen{grid-template-columns:1fr;gap:20px}
  .fuss-sozial{grid-column:auto}
}
@media (max-width:640px){
  body{font-size:1rem}
  .kopf-innen{min-height:56px}
  .marke span{display:none}
  .nav a{font-size:1.02rem}
  .held-text h1{font-size:clamp(2.4rem,12vw,3.2rem)}
  .figuren{height:max(72px,17vw)}
  .werk-liste.gross .werk-karte{flex-direction:column}
  .werk-liste.gross .werk-bild{flex-basis:auto}
  .kapitel{columns:1}
  .kicker{letter-spacing:.16em}
  .steckbrief div{grid-template-columns:1fr}
  .short{flex-direction:row}
  .knopf{min-height:48px;width:100%}
  .leitfrage{text-align:left;padding:14px 18px 16px}
  .kurz{text-align:left}
  .video figcaption{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{
  .kopf,.fuss,.video figcaption,.knoepfe{display:none}
  body{background:#fff}
}