/* ── Selbst gehostete Schriften — kein Aufruf an fremde Server ── */
/* Variable Schriften: eine Datei deckt alle Stärken ab (vorher dreimal dieselbe Datei unter drei Namen) */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('schriften/jost-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('schriften/jost-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Vollkorn';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('schriften/vollkorn-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Vollkorn';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('schriften/vollkorn-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Vollkorn';font-style:italic;font-weight:400;font-display:swap;
  src:url('schriften/vollkorn-italic-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Vollkorn';font-style:italic;font-weight:400;font-display:swap;
  src:url('schriften/vollkorn-italic-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ═══════════════════════════════════════════════════════════════
   NACHBAU v2 — nach kritischem Vergleich mit der Referenz
   Korrigiert: Verschränkung, Anschnitt, Rhythmus, Leere,
   Versatz, Sperrung, Randmöblierung statt Kopfzeile.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --papier:#FFFFFF;
  --umraum:#EDEDED;
  --tinte:#111111;
  /* #767676 statt #8E8E8E: hellstes Grau, das auf Papier 4,5:1 erreicht (WCAG AA).
     Die gesamte Mikro-Ebene hängt daran — Navigation, Randlabels, Fuß. Optisch
     kaum unterscheidbar, die Zurückhaltung bleibt. (Technik-Befund 18) */
  --grau:#767676;
  --grau-fein:#D3D3D3;
  --neon:#CCFF00;
  --sans:'Jost',-apple-system,'Segoe UI',sans-serif;
  --serif:'Vollkorn',Georgia,serif;
  --rand:clamp(20px,4vw,58px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--umraum);color:var(--tinte);
  font-family:var(--serif);font-size:1.0625rem;line-height:1.65;
  padding:var(--rand);
}
::selection{background:var(--neon);color:var(--tinte)}
a{color:inherit}

/* ── Mikro-Typografie ── */
.mikro{font-family:var(--sans);font-weight:400;font-size:.5625rem;letter-spacing:.36em;
  text-transform:uppercase;color:var(--grau);line-height:1.6}
.mikro--tinte{color:var(--tinte)}
.mikro--klein{font-size:.5rem;letter-spacing:.28em}

/* ── Das Blatt + Randmöblierung ───────────────────────────────
   Die Navigation lebt an den RÄNDERN, nicht in einer Kopfleiste. */
.blatt{background:var(--papier);position:relative;margin-bottom:var(--rand)}
.blatt__innen{padding:clamp(30px,5vw,78px) clamp(22px,5vw,84px)}
.blatt__nr{position:absolute;top:clamp(18px,2.6vw,32px);right:clamp(18px,2.6vw,32px);z-index:6}
.kante{position:absolute;top:clamp(30px,6vw,90px);z-index:6;
  writing-mode:vertical-rl;transform:rotate(180deg)}
.kante--links{left:calc(-1 * var(--rand) + 3px)}
.kante--rechts{left:auto;right:calc(-1 * var(--rand) + 3px);transform:none;top:clamp(30px,6vw,90px)}
@media (max-width:900px){.kante{display:none}}
/* Eck-Winkel als Möblierung */
.eck{position:absolute;width:clamp(16px,1.5vw,24px);height:auto;stroke:var(--tinte);
  stroke-width:1.6;fill:none;z-index:6;opacity:.85}
.eck--ol{top:clamp(18px,2.6vw,32px);left:clamp(18px,2.6vw,32px)}
.eck--ur{bottom:clamp(18px,2.6vw,32px);right:clamp(18px,2.6vw,32px)}
/* Logo „foh“ oben links (ersetzt den Eckwinkel, 28.10.2026). Neon-Strich, eckige Enden. */
.logo{display:block;width:fit-content;line-height:0;margin-bottom:clamp(14px,2vw,22px)}
.logo svg{display:block;height:clamp(22px,2.2vw,28px);width:auto;fill:none;stroke:var(--neon);stroke-width:6.5;stroke-linecap:butt}
.marken{position:absolute;right:clamp(18px,2.6vw,32px);top:50%;transform:translateY(-50%);
  display:grid;gap:5px;z-index:6}
.marken svg{width:11px;height:auto;stroke:var(--neon);stroke-width:2.4;fill:none}
@media (max-width:900px){.marken{display:none}}
.faden{position:absolute;left:50%;bottom:0;width:1px;height:clamp(34px,6vw,72px);
  background:var(--grau-fein);z-index:6}

/* ── Kopf: nur winzige Wörter, mittig, keine Leiste ── */
.kopfzeile{display:flex;justify-content:center;gap:clamp(16px,2.8vw,40px);flex-wrap:wrap;
  padding-bottom:clamp(46px,9vw,140px)}
/* Klickfläche auf 24px gebracht (WCAG 2.2 / Technik-Befund 17) — die Schrift
   bleibt 9px, nur die unsichtbare Trefferfläche wächst. */
.kopfzeile a{font-family:var(--sans);font-size:.5625rem;letter-spacing:.36em;text-transform:uppercase;
  text-decoration:none;color:var(--grau);padding:6px 0 5px;min-height:24px;
  display:inline-flex;align-items:flex-end;border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s}
.kopfzeile a:hover,.kopfzeile a:focus-visible{color:var(--tinte);border-bottom-color:var(--neon)}
/* .jetzt = die Seite, auf der man steht. .ruf = der Handlungsaufruf.
   Vorher machte .jetzt beides — dadurch verlor „Lesung anfragen" auf jeder
   Unterseite seine Hervorhebung (Technik-Befund 21, Inhalt-Befund 14). */
.kopfzeile a.jetzt{color:var(--tinte)}
.kopfzeile a.ruf{color:var(--tinte);border-bottom-color:var(--neon)}

/* ── DIE HAUPTSTIMME ──────────────────────────────────────────
   Riesig, extrem gesperrt, wenige Wörter pro Zeile, dicht gestapelt. */
.gross{font-family:var(--sans);font-weight:500;text-transform:uppercase;color:var(--neon);
  letter-spacing:.34em;line-height:.99;overflow-wrap:break-word}
/* Deutlich größer (Finn 11.08.: „die überschriften in neon die müssen noch größer,
   vielleicht sogar viel größer").
   Der Hebel ist die Laufweite, nicht nur der Schriftgrad: Bei .34em war „VORLESEN,"
   schon bei 123 px so breit wie das Blatt — jede weitere Vergrößerung brach die Zeile
   um und zerlegte die Komposition. Die Referenz setzt ihre GRÖSSTEN Zeilen deshalb eng
   (Portfolio IV: normal bis leicht negativ) und spart die weite Sperrung für die
   mittleren Grade auf. Genau so hier: XL eng und riesig, L und M weit gesperrt. */
.gross--xl{font-size:clamp(2.4rem,10.6vw,9.6rem);letter-spacing:.1em;white-space:nowrap}
.gross--l{font-size:clamp(1.8rem,6.2vw,5.4rem);letter-spacing:.28em}
@media (max-width:900px){
  .gross--xl{letter-spacing:.06em;white-space:normal}
}
.gross--tinte{color:var(--tinte)}

/* ── 01 · Die Bühne: Verschränkung + Anschnitt ── */
.buehne{position:relative;min-height:min(80vh,720px);overflow:hidden;
  padding-bottom:clamp(10px,2vw,28px)}
.buehne__zeilen{position:relative;margin-left:-.14em}
.buehne__zeilen span{display:block;position:relative}
.z-vor{z-index:4}
.z-hinter{z-index:1}
/* die letzte Zeile wird vom Rand angeschnitten */
.z-anschnitt{margin-bottom:-.19em}
.buehne__foto{position:absolute;z-index:2;right:3%;top:7%;
  width:min(248px,19.5vw);aspect-ratio:3/4;
  background:linear-gradient(158deg,#7C7C7C,#333333)}
.buehne__rahmen{position:absolute;z-index:1;right:calc(3% + 30px);top:calc(7% - 26px);
  width:min(248px,19.5vw);aspect-ratio:3/4;border:1px solid var(--grau-fein)}
.buehne__fotomarke{position:absolute;z-index:5;right:3%;
  top:calc(7% + min(248px,19.5vw)*1.333 + 14px);
  width:min(320px,26vw);text-align:right}
@media (max-width:900px){
  .buehne{min-height:0;overflow:visible;display:flex;flex-direction:column}
  .buehne__zeilen{order:1;margin-left:-.1em}
  .buehne__foto{order:2;position:relative;right:auto;top:auto;width:100%;aspect-ratio:4/3;
    margin-top:clamp(26px,7vw,40px)}
  .buehne__rahmen{display:none}
  .buehne__fotomarke{order:3;position:relative;right:auto;top:auto;
    width:auto;max-width:none;margin-top:10px;text-align:left}
  .z-anschnitt{margin-bottom:0}
}

/* ── Lesetext ── */
.lese{max-width:60ch;font-family:var(--serif)}
.lese p + p{margin-top:1.1em}
.lese--schmal{max-width:44ch}
.streichung{text-decoration:line-through;color:var(--grau);font-style:italic}
/* Die Korrektur wird IN Neon gesetzt, nicht MIT Neon hinterlegt —
   §1.1 schließt „schwarze Typo mit Neon-Markern" aus (Optik-Befund 17).
   Die Haarlinie hält sie als Geste zusammen. */
.korrektur{font-family:var(--sans);font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--neon);background:transparent;padding:.3em 0 .3em .55em;white-space:nowrap;
  border-left:1px solid var(--neon)}
.kicker{font-family:var(--serif);font-style:italic;font-size:1.2rem;margin-top:1.3em}

/* ── 02 · Türen: gegeneinander versetzt, nicht gestapelt ── */
.tueren{position:relative;display:grid;gap:0}
.tuer{display:block;text-decoration:none;color:inherit;position:relative;z-index:2;
  padding:clamp(16px,2.2vw,26px) 0;transition:transform .24s}
.tuer:hover,.tuer:focus-visible{transform:translateX(clamp(6px,1.2vw,16px))}
.tuer--a{margin-left:0;max-width:78%}
.tuer--b{margin-left:auto;max-width:66%;text-align:right;margin-top:clamp(26px,5vw,72px)}
.tuer--c{margin-left:clamp(20px,9vw,140px);max-width:70%;margin-top:clamp(20px,4vw,54px)}
.tuer__nr{display:block;font-family:var(--sans);font-size:.5rem;letter-spacing:.3em;
  color:var(--grau);margin-bottom:.9em}
.tuer .gross--l{display:block}
.tuer__sub{font-family:var(--serif);color:var(--tinte);margin-top:1.15em;font-size:1rem;max-width:40ch;
  display:block}
.tuer--b .tuer__sub{margin-left:auto}
.tuer--b .tuer__sub{text-align:right}
.tuer__strich{display:block;height:1px;background:var(--grau-fein);margin-top:clamp(14px,2vw,22px)}
/* leerer Rahmen als Gegengewicht */
.gegengewicht{position:absolute;z-index:1;border:1px solid var(--grau-fein);
  right:2%;top:14%;width:min(280px,26vw);height:min(340px,32vw);pointer-events:none}
@media (max-width:900px){
  .tuer--a,.tuer--b,.tuer--c{max-width:none;margin-left:0;text-align:left}
  .tuer--b .tuer__sub{text-align:left}
  .gegengewicht{display:none}
}

/* ── Randloses Bildband: der Bruch in der Strecke ── */
.band{position:relative;margin:0 calc(-1 * var(--rand)) var(--rand);
  height:clamp(220px,34vw,470px);
  background:linear-gradient(112deg,#8A8A8A,#2E2E2E)}
.band__marke{position:absolute;left:clamp(20px,4vw,54px);bottom:clamp(16px,2.4vw,28px);
  color:rgba(255,255,255,.9)}
.band__nr{position:absolute;top:clamp(16px,2.4vw,28px);right:clamp(18px,2.6vw,32px);
  color:rgba(255,255,255,.9)}

/* ── 04 · Neues: Karten, versetzt, mit leerem Gegenrahmen ── */
.dicht{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(24px,3.4vw,54px);padding-top:clamp(18px,2.6vw,30px)}
.dicht__feld{font-size:.95rem;line-height:1.55;position:relative;z-index:2;
  border-top:1px solid var(--tinte);padding-top:clamp(12px,1.6vw,18px)}
.dicht__feld:nth-child(2){margin-top:clamp(18px,3.4vw,52px)}
.dicht__feld:nth-child(3){margin-top:clamp(34px,6.4vw,96px)}
.dicht__feld a{text-decoration:none;border-bottom:1px solid var(--neon)}
.dicht__feld a:hover{background:var(--neon)}
.dicht__datum{display:block;margin-bottom:.9em}
.dicht__rahmen{position:absolute;z-index:1;border:1px solid var(--grau-fein);
  left:34%;top:-6%;width:min(300px,26vw);height:min(300px,26vw);pointer-events:none}
@media (max-width:900px){
  .dicht__feld:nth-child(2),.dicht__feld:nth-child(3){margin-top:0}
  .dicht__rahmen{display:none}
}

/* ── 04 · Der Brief: randlos, Neon besitzt die Fläche ── */
.randlos{background:var(--neon);margin:0 calc(-1 * var(--rand)) var(--rand);
  padding:clamp(52px,10vw,150px) clamp(22px,6vw,92px);position:relative}
.randlos .gross{color:var(--tinte)}
.randlos .mikro{color:rgba(17,17,17,.62)}
.randlos .lese{color:var(--tinte)}
.randlos .blatt__nr{color:rgba(17,17,17,.62)}
.brief{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-top:clamp(26px,4vw,44px)}
.brief input{font-family:var(--serif);font-size:1.05rem;border:0;border-bottom:1px solid var(--tinte);
  background:transparent;padding:.55em 0;min-width:min(320px,70vw);height:44px;color:var(--tinte)}
.brief input::placeholder{color:rgba(17,17,17,.42)}
.brief input:focus{outline:0;box-shadow:0 2px 0 var(--tinte)}
.knopf{display:inline-block;font-family:var(--sans);font-size:.5625rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--tinte);text-decoration:none;border:1px solid var(--tinte);
  padding:1em 1.9em;background:transparent;cursor:pointer;transition:background .18s,color .18s}
.knopf:hover,.knopf:focus-visible{background:var(--tinte);color:var(--neon)}
.knopf--hell:hover{background:var(--neon);color:var(--tinte);border-color:var(--neon)}

/* ── Platzhalter ── */
.platzhalter{color:var(--grau);font-family:var(--sans);font-size:.6875rem;letter-spacing:.1em;
  border-bottom:1px dashed var(--grau-fein)}

/* ── Fuß ── */
.fuss{display:grid;gap:9px}
/* Klickfläche wie in der Kopfzeile — die Fußzeilen-Links standen mit 13px
   Höhe und 8px Abstand direkt untereinander (Technik-Befund 17). */
.fuss a{text-decoration:none;border-bottom:1px solid var(--grau-fein);
  display:inline-block;padding:5px 0}
.fuss a:hover{border-bottom-color:var(--neon)}

/* ── Mobiler Riegel, Sprungmarke, Fokus ── */
.riegel{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--neon);display:none;
  padding:calc(13px + env(safe-area-inset-bottom,0)) 16px 13px;text-align:center;
  font-family:var(--sans);font-size:.625rem;letter-spacing:.32em;text-transform:uppercase;
  text-decoration:none;color:var(--tinte);border-top:1px solid var(--tinte)}
@media (max-width:900px){.riegel{display:block}body{padding-bottom:66px}}
/* Zwei getrennte Jobs, zwei Klassen (Technik-Befund 19):
   .sprung = Sprungmarke, wird bei Fokus sichtbar.
   .nur-vorlesen = unsichtbar, aber vorgelesen (versteckte Überschriften).
   Beide mit der heutigen Clip-Technik statt left:-9999px — der Inhalt bleibt
   im Dokumentfluss, keine Leserichtungs- und Scrollleisten-Nebenwirkungen. */
.sprung,.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.sprung:focus{position:absolute;width:auto;height:auto;overflow:visible;clip-path:none;
  left:var(--rand);top:var(--rand);z-index:99;background:var(--neon);padding:10px 16px;
  font-family:var(--sans);font-size:.625rem;letter-spacing:.26em;text-transform:uppercase}
/* Fokusring in Tinte: Neon auf Papier hat 1,18:1 und ist unsichtbar
   (Technik-Befund 1). Neon nur dort, wo der Grund dunkel ist. */
:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
.band :focus-visible,.regalband :focus-visible,.buehne__foto :focus-visible,
.foto__feld :focus-visible,.cover :focus-visible{outline-color:var(--neon)}

/* ── Ankunft ── */
@keyframes auf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.an{animation:auf .75s cubic-bezier(.22,.61,.36,1) both}
.an-1{animation-delay:.06s}.an-2{animation-delay:.2s}.an-3{animation-delay:.34s}
@media (prefers-reduced-motion:reduce){.an{animation:none}*{transition:none!important}}

/* ═══════════════ NACHTRÄGE ═══════════════
   Nur was auf den Unterseiten fehlte. Gleiche Mittel wie oben:
   Haarlinien, kein Radius, kein Schatten, Versatz statt Achse. */

/* Bühne für Unterseiten: gleiche Verschränkung, weniger Höhe,
   weil hier .gross--l steht und nicht --xl (BAUPLAN §4).
   .gross--l ist kürzer als --xl: damit die Schrift trotzdem DURCH das
   Foto läuft (Verschränkung, BAUPLAN §1.4), rückt das Foto nach innen. */
.buehne--knapp{min-height:min(52vh,470px)}
.buehne--knapp .buehne__foto{right:auto;left:57%;top:6%;width:min(206px,17vw)}
.buehne--knapp .buehne__rahmen{right:auto;left:calc(57% + 30px);top:calc(6% - 24px);
  width:min(206px,17vw)}
.buehne--knapp .buehne__fotomarke{right:auto;left:57%;
  top:calc(6% + min(206px,17vw)*1.333 + 14px);width:min(300px,24vw);text-align:left}
@media (max-width:900px){
  .buehne--knapp .buehne__foto{left:auto;width:100%}
  .buehne--knapp .buehne__fotomarke{left:auto;top:auto;width:auto}
}

/* Nackte Listen — Zahlen, Auszeichnungen, Slots. Kein Aufzählungspunkt,
   eine Haarlinie je Zeile. */
.nackt{list-style:none;display:grid;gap:clamp(9px,1.2vw,14px);max-width:46ch}
.nackt li{font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.32rem);line-height:1.35;
  border-bottom:1px solid var(--grau-fein);padding-bottom:.55em}
.nackt--klein li{font-size:clamp(.95rem,1.15vw,1.06rem);line-height:1.45}

/* Zwei Blöcke, gegeneinander versetzt (Zahlen | Auszeichnungen).
   Heißt bewusst nicht .paar — das ist auf der Bücher-Strecke vergeben. */
.doppel{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,90px);align-items:start}
.doppel__b{margin-top:clamp(30px,7vw,110px)}
/* Gegengewicht gehört dorthin, wo Weiß ist — neben den Fließtext,
   nicht neben eine Liste (dort liest es sich als Kasten um die Liste). */
.gegengewicht--text{right:7%;top:26%;width:min(230px,19vw);height:min(300px,25vw)}
@media (max-width:900px){
  .doppel{grid-template-columns:1fr;gap:clamp(34px,7vw,54px)}
  .doppel__b{margin-top:0}
}

/* Presse: Fotoblöcke — dunkles Feld, darunter die ehrlichen Zeilen.
   Bewusst nicht bühnengroß: das sind Downloads, keine Ankunft.
   Versatz wie bei .dicht, damit die drei nicht als Raster stehen. */
.fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(20px,2.8vw,44px);max-width:840px}
.foto__feld:nth-child(2){margin-top:clamp(12px,2.4vw,38px)}
.foto__feld:nth-child(3){margin-top:clamp(24px,4.6vw,72px)}
@media (max-width:900px){.foto__feld:nth-child(n){margin-top:0}}
.foto__feld{background:linear-gradient(158deg,#7C7C7C,#333333);filter:grayscale(1);
  aspect-ratio:3/4;position:relative}
.foto__feld .mikro{position:absolute;left:12px;bottom:12px;right:12px;color:rgba(255,255,255,.9)}
.foto__feld .platzhalter{color:rgba(255,255,255,.82);border-bottom-color:rgba(255,255,255,.46)}
.foto__zeilen{list-style:none;margin-top:clamp(12px,1.6vw,18px);display:grid;gap:7px;
  font-size:.95rem;line-height:1.45}
.foto__zeilen a{text-decoration:none;border-bottom:1px solid var(--neon)}
.foto__zeilen a:hover{background:var(--neon)}

/* Presse: kopierfertige Bio-Blöcke — markierbarer Text, Haarlinie außen. */
.bio{border:1px solid var(--grau-fein);padding:clamp(16px,2.4vw,30px);
  max-width:62ch;font-family:var(--serif);line-height:1.6}
.bio + .bio{margin-top:clamp(26px,4vw,52px)}
.bio:nth-of-type(2){margin-left:clamp(0px,6vw,92px)}
.bio:nth-of-type(3){margin-left:clamp(0px,2vw,34px)}
@media (max-width:900px){.bio:nth-of-type(n){margin-left:0}}
.bio__kopf{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(12px,1.6vw,18px)}
.bio ::selection{background:var(--neon)}

/* Rechtsseiten: Slot-Liste (Begriff / Inhalt), keine Stimme. */
.slots{max-width:60ch}
.slots dt{font-family:var(--sans);font-size:.5625rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--tinte);border-top:1px solid var(--tinte);padding-top:clamp(9px,1.2vw,14px);
  margin-top:clamp(20px,2.8vw,36px)}
.slots dt:first-child{margin-top:0}
.slots dd{margin-top:.6em;font-size:1rem;line-height:1.6}

/* Für Knopfreihen (404) steht .knopfzeile weiter unten bereit —
   keine zweite Klasse dafür. */

/* Knopf, dessen Datei noch nicht liegt: sichtbar als Slot, aber grau
   und nicht klickbar — kein „folgt in Kürze", das etwas verspricht. */
.knopf--wartet{color:var(--grau);border-color:var(--grau-fein);cursor:default}

/* ═══════════════════════════════════════════════════════════════
   NACHTRÄGE — angelegt für die Lesungs-Strecke (/lesungen/…)
   Regel des BAUPLANs: neue Klassen hierher, nicht ins HTML.
   ═══════════════════════════════════════════════════════════════ */

/* ── Links im Lesetext: Haarlinie in Neon statt Unterstreichung ── */
.lese a{color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--neon)}
.lese a:hover,.lese a:focus-visible{background:var(--neon)}
.randlos .lese a{border-bottom-color:var(--tinte)}
.randlos .lese a:hover,.randlos .lese a:focus-visible{background:var(--tinte);color:var(--neon)}

/* ── Mittlere Riesenschrift: für Wegweiser mit vielen Türen ──
   Sechs Türen in --l wären lauter als die Startseite. */
.gross--m{font-size:clamp(1.5rem,4.8vw,4rem);letter-spacing:.3em}

/* ── Seitentitel der Unterseiten (sichtbare h1) ── */
.seitentitel{margin-bottom:clamp(20px,3.2vw,42px)}
.vorspann{margin-bottom:clamp(30px,5vw,74px)}

/* ── Tür ohne Ziel: Format, dessen Seite noch nicht existiert ──
   Sieht aus wie eine Tür, verhält sich aber nicht wie eine. */
/* Inhalt-Befund 4: Die ruhenden Türen sind jetzt Links auf den Inhalt, den es
   schon gibt — nur ohne eigene Seite. Der zurückgenommene Look bleibt, der
   Hover-Versatz nicht (sie versprechen keine volle Formatseite). */
.tuer--ruht{cursor:pointer}
.tuer--ruht:hover,.tuer--ruht:focus-visible{transform:none}
/* Riesenwort bleibt Neon: grau las sich als defekt, nicht als „Seite folgt"
   (Optik-Befund 15). Die Information trägt .tuer__wartet darunter. */
.tuer__wartet{display:block;font-family:var(--serif);font-style:italic;color:var(--grau);
  margin-top:1.1em;font-size:.95rem;max-width:40ch}
.tuer--b .tuer__wartet{margin-left:auto;text-align:right}
@media (max-width:900px){.tuer--b .tuer__wartet{text-align:left}}
/* zweite Türengruppe: Versatz gegen die erste kippen */
.tueren--kehrt .tuer--a{margin-left:auto;max-width:66%;text-align:right}
.tueren--kehrt .tuer--a .tuer__sub{margin-left:auto;text-align:right}
.tueren--kehrt .tuer--b{margin-left:clamp(20px,9vw,140px);margin-right:auto;max-width:70%;text-align:left}
.tueren--kehrt .tuer--b .tuer__sub{margin-left:0;text-align:left}
.tueren--kehrt .tuer--c{margin-left:0;max-width:78%}
.tueren--kehrt .gegengewicht{right:auto;left:3%;top:8%}
@media (max-width:900px){
  .tueren--kehrt .tuer--a,.tueren--kehrt .tuer--b,.tueren--kehrt .tuer--c{
    margin-left:0;margin-right:0;max-width:none;text-align:left}
  .tueren--kehrt .tuer--a .tuer__sub{margin-left:0;text-align:left}
}
/* Alterspanne unter dem Türnamen */
.tuer__spanne{display:block;font-family:var(--sans);font-size:.5625rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--grau);margin-top:1em}
.tuer--b .tuer__spanne{text-align:right}
.tueren--kehrt .tuer--a .tuer__spanne{text-align:right}
.tueren--kehrt .tuer--b .tuer__spanne{text-align:left}
@media (max-width:900px){.tuer__spanne{text-align:left!important}}

/* ── Kerndaten: vier dichte Felder mit eigenem Versatz ── */
.dicht--daten{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.dicht--daten .dicht__feld:nth-child(1){margin-top:0}
.dicht--daten .dicht__feld:nth-child(2){margin-top:clamp(12px,2.2vw,34px)}
.dicht--daten .dicht__feld:nth-child(3){margin-top:clamp(24px,4.4vw,66px)}
.dicht--daten .dicht__feld:nth-child(4){margin-top:clamp(10px,1.8vw,26px)}
.dicht__wert{display:block;font-size:1.05rem;line-height:1.4}
@media (max-width:900px){.dicht--daten .dicht__feld:nth-child(n){margin-top:0}}

/* ── Vergleichstabelle: echte Tabelle, nur Haarlinien ──
   Auf schmalen Schirmen werden aus Zeilen Karten (Spaltennamen
   stehen dann als data-spalte vor dem Wert). */
.tabelle__huelle{overflow-x:auto;margin-top:clamp(18px,2.6vw,30px)}
/* Nächste Lesungen (Lesungen-Seite, 29.10.): Kasten mit Haarlinie, Datum in Mono, Stadt als Mikro-Label */
.termine{border:1px solid var(--tinte);padding:clamp(16px,2.4vw,28px) clamp(16px,2.6vw,32px);margin:clamp(30px,4.4vw,64px) 0 clamp(36px,5vw,72px);max-width:60rem}
.termine__liste{list-style:none;margin:clamp(12px,1.8vw,20px) 0 0;padding:0}
.termine__liste li{display:grid;grid-template-columns:6.6em 8.5em minmax(0,1fr) minmax(0,1.3fr);gap:.3em 1.4em;align-items:baseline;
  padding:.75em 0;border-top:1px solid var(--grau-fein);font-family:var(--serif);font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.35}
.termine time{font-family:'Courier New',monospace;font-size:.92em}
.termine__stadt{font-family:var(--sans);font-size:.5625rem;letter-spacing:.34em;text-transform:uppercase}
.termine__ort{color:var(--grau)}
.termine__fuss{margin-top:clamp(12px,1.6vw,18px)}
@media (max-width:700px){
  .termine__liste li{grid-template-columns:6.2em minmax(0,1fr)}
  .termine__ort,.termine__was{grid-column:2}
}
.tabelle{width:100%;border-collapse:collapse;font-family:var(--serif);font-size:.95rem;line-height:1.45}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;
  padding:clamp(11px,1.5vw,17px) clamp(12px,1.6vw,22px) clamp(11px,1.5vw,17px) 0;
  border-bottom:1px solid var(--grau-fein)}
.tabelle thead th{font-family:var(--sans);font-weight:400;font-size:.5625rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--grau);border-bottom:1px solid var(--tinte);white-space:nowrap}
.tabelle tbody th{font-weight:400}
.tabelle a{text-decoration:none;border-bottom:1px solid var(--neon)}
.tabelle a:hover,.tabelle a:focus-visible{background:var(--neon)}
.tabelle .platzhalter{white-space:nowrap}
@media (max-width:700px){
  .tabelle,.tabelle tbody,.tabelle tr,.tabelle th,.tabelle td{display:block;width:auto}
  .tabelle thead{position:absolute;left:-9999px}
  .tabelle tbody tr{border-top:1px solid var(--tinte);padding:clamp(13px,3.4vw,20px) 0}
  .tabelle tbody th{padding:0 0 .55em;border:0;font-size:1.05rem;line-height:1.35}
  .tabelle tbody td{border:0;padding:.12em 0;display:flex;gap:.7em;align-items:baseline}
  .tabelle tbody td::before{content:attr(data-spalte);font-family:var(--sans);font-size:.5rem;
    letter-spacing:.28em;text-transform:uppercase;color:var(--grau);flex:0 0 6.4em}
}

/* ── Format-Blöcke: was in welchem Format passiert ── */
.block{position:relative;max-width:58ch;border-top:1px solid var(--tinte);
  padding-top:clamp(13px,1.9vw,21px)}
.block + .block{margin-top:clamp(40px,7vw,104px)}
.block--versetzt{margin-left:auto}
.block__titel{font-family:var(--sans);font-weight:500;font-size:1.05rem;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.25}
.block__feld{margin-top:clamp(14px,1.8vw,22px)}
.block__marke{display:block;font-family:var(--sans);font-size:.5625rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--grau);margin-bottom:.4em}
.block__feld a{text-decoration:none;border-bottom:1px solid var(--neon)}
.block__feld a:hover,.block__feld a:focus-visible{background:var(--neon)}
@media (max-width:900px){.block--versetzt{margin-left:0}}

/* ── Aufzählung mit Neon-Haarstrich statt Punkt ── */
.vorbereiten{list-style:none;display:grid;gap:clamp(12px,1.8vw,20px);max-width:54ch}
.vorbereiten li{position:relative;padding-left:1.7em;line-height:1.55;font-size:1rem}
.vorbereiten li::before{content:"";position:absolute;left:0;top:.72em;width:.95em;height:1px;
  background:var(--neon)}

/* ── Häufige Fragen: zwei Spalten, gegeneinander versetzt ── */
.faq{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(26px,3.6vw,52px) clamp(30px,5vw,88px);padding-top:clamp(18px,2.6vw,30px)}
.faq__stueck{position:relative;z-index:2;border-top:1px solid var(--tinte);
  padding-top:clamp(11px,1.5vw,17px);max-width:44ch}
.faq__stueck:nth-child(even){margin-top:clamp(16px,3.2vw,48px)}
.faq__frage{font-family:var(--sans);font-weight:500;font-size:.98rem;letter-spacing:.03em;
  line-height:1.35}
.faq__antwort{margin-top:.65em;font-size:.98rem;line-height:1.55}
@media (max-width:900px){.faq__stueck:nth-child(even){margin-top:0}}

/* ── Der Anfrage-Weg auf der Neonfläche ── */
.anfrageweg{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,24px);align-items:center;
  margin-top:clamp(26px,4vw,44px)}
.anfrageweg .knopf{border-width:1px}

/* ── Der Zusatz in der h1 (Suchanfragen-Überschriften sind lang) ──
   Bleibt Teil der einen sichtbaren h1, schreit aber nicht mit. */
.seitentitel__zusatz{display:block;font-family:var(--sans);font-weight:400;text-transform:none;
  font-size:clamp(.82rem,1.5vw,1.15rem);letter-spacing:.16em;line-height:1.5;
  color:var(--tinte);margin-top:.85em}
.seitentitel__zusatz .platzhalter{letter-spacing:.08em}
/* Suchanfragen-Überschriften enthalten lange Wörter („Autorenlesung",
   „weiterführende"). Auf schmalen Schirmen bricht .gross--l sie mitten
   im Wort — hier deshalb etwas kleiner und etwas weniger gesperrt. */
@media (max-width:560px){
  .seitentitel.gross--l{font-size:clamp(1.3rem,5.6vw,1.7rem);letter-spacing:.24em}
}

/* Gegengewicht in der Fragenliste: schwebender Rahmen, kein Kasten
   um eine einzelne Frage. */
.faq__rahmen{position:absolute;z-index:1;border:1px solid var(--grau-fein);pointer-events:none;
  left:31%;top:-9%;width:min(250px,21vw);height:min(280px,23vw)}
@media (max-width:900px){.faq__rahmen{display:none}}

/* ── Die Neonfläche als eine große Klickfläche ── */
.plattenlink{display:block;text-decoration:none;color:inherit}
.plattenlink:hover .gross,.plattenlink:focus-visible .gross{text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:.14em}

/* ── Randnotiz: kleiner Nachsatz unter einem Abschnitt ── */
.nachsatz{margin-top:clamp(26px,4vw,54px);max-width:52ch}

/* ═══════════════════════════════════════════════════════════════
   NACHTRÄGE — Bücher-Strecke (/buecher/ + vier Buchseiten)
   Alles aus vorhandenen Prinzipien: Haarlinie, kein Radius,
   kein Schatten, Versatz statt Achse, Schwarz nur klein & Foto.
   ═══════════════════════════════════════════════════════════════ */

/* ── Wegweiser „Wo fange ich an?" — versetzte Einträge, kein Raster ── */
.weg{position:relative;display:grid;gap:clamp(24px,3.6vw,50px);margin-top:clamp(30px,5vw,64px)}
.weg__rahmen{position:absolute;z-index:1;border:1px solid var(--grau-fein);
  right:1%;top:22%;width:min(260px,22vw);height:min(320px,28vw);pointer-events:none}
.weg__eintrag{position:relative;z-index:2;display:block;text-decoration:none;color:inherit;
  max-width:54ch;border-top:1px solid var(--tinte);padding-top:clamp(11px,1.5vw,17px);
  transition:transform .24s}
.weg__eintrag:hover,.weg__eintrag:focus-visible{transform:translateX(clamp(5px,1vw,14px))}
.weg__eintrag:nth-of-type(2){margin-left:clamp(0px,7vw,110px)}
.weg__eintrag:nth-of-type(3){margin-left:clamp(0px,3vw,48px)}
.weg__eintrag:nth-of-type(4){margin-left:clamp(0px,11vw,170px)}
.weg__eintrag:nth-of-type(5){margin-left:clamp(0px,5vw,80px)}
.weg__frage{display:block;font-family:var(--serif);font-weight:500;font-size:1.02rem;
  margin-bottom:.35em}
.weg__antwort{display:block;font-family:var(--serif);font-size:1rem;color:var(--tinte)}
.weg__eintrag .titel{border-bottom:1px solid var(--neon)}
.weg__eintrag:hover .titel{background:var(--neon)}
@media (max-width:900px){
  .weg__eintrag:nth-of-type(n){margin-left:0;max-width:none}
  .weg__rahmen{display:none}
}

/* ── Dunkles Regalband: die vier Bücher, randlos ── */
.regalband{position:relative;margin:0 calc(-1 * var(--rand)) var(--rand);
  background:linear-gradient(112deg,#8A8A8A,#2E2E2E);
  padding:clamp(30px,5vw,74px) clamp(20px,4vw,54px) clamp(28px,4.4vw,66px)}
.regalband .mikro{color:rgba(255,255,255,.86)}
.regalband__nr{position:absolute;top:clamp(16px,2.4vw,28px);right:clamp(18px,2.6vw,32px)}
.regalband__reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:clamp(20px,3vw,46px);margin-top:clamp(20px,3vw,40px)}
.buch{display:block;text-decoration:none;color:#FFFFFF}
.buch:nth-child(2){margin-top:clamp(0px,2vw,34px)}
.buch:nth-child(4){margin-top:clamp(0px,3vw,54px)}
.buch__cover{aspect-ratio:2/3;border:1px solid rgba(255,255,255,.42);
  background:linear-gradient(158deg,#6B6B6B,#1F1F1F);
  display:flex;align-items:flex-end;padding:clamp(9px,1vw,14px)}
.buch__titel{display:block;font-family:var(--sans);font-weight:500;font-size:.9rem;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.35;margin-top:1.15em}
.buch__alter{display:block;margin-top:.85em}
.buch__satz{display:block;font-family:var(--serif);font-size:.92rem;line-height:1.5;
  color:rgba(255,255,255,.88);margin-top:.7em}
.buch__mehr{display:inline-block;margin-top:1em;font-family:var(--sans);font-size:.5625rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--neon);
  border-bottom:1px solid var(--neon);padding-bottom:2px}
.buch:hover .buch__mehr,.buch:focus-visible .buch__mehr{background:var(--neon);color:#1F1F1F}
.regalband .platzhalter{color:rgba(255,255,255,.8);border-bottom-color:rgba(255,255,255,.42)}

/* ── Das Regal: nackte Liste, Haarlinien ── */
.regal{margin-top:clamp(22px,3.4vw,40px);border-top:1px solid var(--tinte)}
.regal__zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(10px,2vw,34px);align-items:baseline;
  padding:clamp(13px,1.8vw,20px) 0;border-bottom:1px solid var(--grau-fein)}
.regal__titel{font-family:var(--serif);font-size:1rem;line-height:1.45}
.regal__titel a{text-decoration:none;border-bottom:1px solid var(--neon)}
.regal__titel a:hover{background:var(--neon)}
.regal__meta{font-family:var(--sans);font-size:.5625rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--grau);text-align:right;line-height:1.7}
.regal__meta .platzhalter{font-size:.5625rem;letter-spacing:.18em}
.regal__luecke{grid-column:1 / -1;font-family:var(--serif);font-size:.94rem;color:var(--grau);
  max-width:56ch;margin-top:.55em}
.regal__rest{margin-top:clamp(18px,2.6vw,30px);max-width:60ch}
.regal__mit{display:block;margin-top:4px;font-family:var(--serif);font-size:.82rem;line-height:1.35;color:var(--grau)}
@media (max-width:700px){
  .regal__zeile{grid-template-columns:1fr;gap:6px}
  .regal__meta{text-align:left}
}

/* ── Buchseite: Faktenzeile ── */
.fakten{font-family:var(--sans);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grau);line-height:1.9;max-width:82ch;
  border-top:1px solid var(--grau-fein);padding-top:clamp(11px,1.5vw,17px);
  margin-top:clamp(18px,2.6vw,32px)}
.fakten .platzhalter{font-size:.625rem;letter-spacing:.14em}
.fakten__band{display:block;padding:.45em 0;border-bottom:1px solid var(--grau-fein)}
.fakten__band:last-child{border-bottom:0}

/* ── Buchseite: der erste Absatz als großes Zitat ── */
.zitat{font-family:var(--serif);font-size:clamp(1.02rem,1.7vw,1.3rem);line-height:1.55;
  max-width:42ch;border-left:1px solid var(--neon);padding-left:clamp(14px,2vw,26px);
  margin-top:clamp(26px,4vw,54px)}
.zitat + .zitat{margin-top:clamp(20px,3vw,36px)}
.zitat .mikro{display:block}

/* ── Regal-Karte: eine geprüfte Pressestimme statt einer Behauptung ──
   Kursiv und klein, damit sie den Buchsatz stützt statt mit ihm zu konkurrieren. */
.buch__stimme{display:block;margin-top:.9em;font-family:var(--serif);font-style:italic;
  font-size:.88rem;line-height:1.45;color:var(--grau);
  border-left:1px solid var(--neon);padding-left:.8em}
.buch__stimme .mikro{display:block;margin-top:.5em;font-style:normal}

/* ── Buchseite: Cover-Platzhalter + Text, versetzt ── */
.paar{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(170px,22vw,290px);
  gap:clamp(26px,5vw,84px);align-items:start}
.paar__text{max-width:52ch}
.cover{position:relative;aspect-ratio:2/3;filter:grayscale(1);
  background:linear-gradient(158deg,#7C7C7C,#2B2B2B);
  display:flex;align-items:flex-end;padding:clamp(10px,1.2vw,16px);
  margin-top:clamp(10px,3vw,54px)}
.cover .mikro{color:rgba(255,255,255,.9)}
.cover + .cover{margin-top:clamp(16px,2.4vw,28px)}
@media (max-width:900px){
  .paar{grid-template-columns:1fr;gap:clamp(22px,6vw,34px)}
  .paar__text{order:1;max-width:none}
  .paar__bild{order:2}
  .cover{aspect-ratio:3/4;margin-top:0}
}

/* ── Nackte Liste „Was daraus wurde" ── */
.liste{list-style:none;display:grid;gap:.5em;max-width:54ch;margin-top:clamp(16px,2.2vw,24px)}
.liste li{font-size:.98rem;line-height:1.5;padding-left:1.15em;position:relative}
.liste li::before{content:"";position:absolute;left:0;top:.74em;width:8px;height:1px;
  background:var(--tinte)}

/* ── Weiterweg, Kauf, Brücke ── */
.weiter{border-top:1px solid var(--tinte);padding-top:clamp(13px,1.8vw,19px);max-width:54ch}
.weiter a{text-decoration:none;border-bottom:1px solid var(--neon)}
.weiter a:hover{background:var(--neon)}
.knopfzeile{display:flex;gap:clamp(12px,2vw,22px);flex-wrap:wrap;align-items:center;
  margin-top:clamp(20px,3vw,32px)}

/* ── Randlos-Neon: Links, Platzhalter, Knöpfe lesbar halten ── */
.randlos a{color:var(--tinte)}
.randlos .platzhalter{color:rgba(17,17,17,.66);border-bottom-color:rgba(17,17,17,.34)}
.randlos .gross a{text-decoration:none;color:inherit}
.randlos .gross a:hover,.randlos .gross a:focus-visible{color:var(--papier)}
.randlos .liste li::before{background:var(--tinte)}

/* ═══════════════════════════════════════════════════════════════
   NACHTRÄGE — Service-Strecke (/anfragen/, /termine/, /newsletter/)
   Nur was fehlte. Konditionen laufen auf .slots, das Perlen-Zitat
   auf .zitat, der Weiterweg auf .weiter — schon da, nicht doppelt.
   ═══════════════════════════════════════════════════════════════ */

/* ── Das Formular: Labels oben, Haarlinie unten, 44px hohe Felder ── */
.formular{display:grid;gap:clamp(28px,3.8vw,50px);margin-top:clamp(30px,5vw,62px);max-width:58ch}
.feld{display:block;border:0;padding:0;min-width:0}
.feld__label{display:block;font-family:var(--sans);font-weight:500;font-size:.5625rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--tinte);line-height:1.6;
  margin-bottom:7px;padding:0}
.feld__hilfe{display:block;font-family:var(--serif);font-size:.95rem;line-height:1.5;
  color:rgba(17,17,17,.72);margin-bottom:13px;max-width:44ch}
.feld input,.feld textarea{display:block;width:100%;height:44px;border-radius:0;
  font-family:var(--serif);font-size:1.05rem;line-height:1.4;color:var(--tinte);
  background:transparent;border:0;border-bottom:1px solid var(--tinte);padding:.5em 0;
  -webkit-appearance:none;appearance:none}
.feld textarea{height:auto;min-height:88px;resize:vertical}
.feld input::placeholder,.feld textarea::placeholder{color:rgba(17,17,17,.4)}
.feld input:focus,.feld textarea:focus{outline:0;box-shadow:0 2px 0 var(--tinte)}
.feld__reihe{display:grid;gap:clamp(18px,2.4vw,26px);margin-top:clamp(4px,1vw,10px)}
.feld__unter{display:block;font-family:var(--sans);font-size:.5rem;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(17,17,17,.66);margin-bottom:6px}
.formular .knopf{justify-self:start}

/* Altersgruppe: echte Radios, als Kästchen gesetzt.
   Die Anker #kita … springen auf das Feld und markieren es. */
.wahl{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.wahl__stueck{display:inline-flex;align-items:center;gap:.8em;min-height:44px;
  border:1px solid var(--tinte);padding:0 1.15em}
.wahl input{-webkit-appearance:none;appearance:none;width:12px;height:12px;flex:0 0 auto;
  border:1px solid var(--tinte);border-radius:0;background:transparent;margin:0}
.wahl input:checked{background:var(--tinte)}
/* Anker-Ziel deutlicher machen: Der Sprung aus den Formatseiten (?gruppe=…#kita)
   markiert das Feld, hakt es aber nicht an — echtes Vorbelegen macht erst der
   Dienst (A9). Bis dahin muss die Markierung auf dem Handy auffallen
   (Inhalt-Befund 15). */
.wahl input:target{outline:2px solid var(--tinte);outline-offset:4px}
.wahl__stueck:has(input:target){background:var(--tinte)}
.wahl__stueck:has(input:target) label{color:var(--neon)}
.wahl__stueck:has(input:target) input{border-color:var(--neon)}
.wahl label{font-family:var(--sans);font-size:.5625rem;letter-spacing:.28em;
  text-transform:uppercase;line-height:1.6;cursor:pointer;padding:.95em 0;flex:1 1 auto}
@media (max-width:560px){.wahl__stueck{width:100%}}

/* Neon auf Neon wäre unsichtbar: Fokus auf der Fläche wird Tinte. */
.randlos :focus-visible{outline-color:var(--tinte)}

/* ── Treppe: nummerierte Schritte, absteigend versetzt ── */
.dicht--treppe{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:clamp(20px,2.6vw,40px)}
.dicht--treppe .dicht__feld:nth-child(1){margin-top:0}
.dicht--treppe .dicht__feld:nth-child(2){margin-top:clamp(14px,2.4vw,34px)}
.dicht--treppe .dicht__feld:nth-child(3){margin-top:clamp(28px,4.8vw,68px)}
.dicht--treppe .dicht__feld:nth-child(4){margin-top:clamp(42px,7.2vw,102px)}
.dicht--treppe .dicht__feld:nth-child(5){margin-top:clamp(56px,9.6vw,136px)}
.dicht__ziffer{display:block;font-family:var(--sans);font-size:.5rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--grau);margin-bottom:.9em}
.dicht__feld strong{font-weight:500}
@media (max-width:900px){.dicht--treppe .dicht__feld:nth-child(n){margin-top:0}}

/* ── Leerzustand (/termine/): die Leere wird zum Bild ── */
.leerstand{position:relative;padding-top:clamp(8px,1.6vw,22px)}
.leerstand > :not(.leerstand__rahmen){position:relative;z-index:2}
.leerstand__rahmen{position:absolute;z-index:1;border:1px solid var(--grau-fein);
  right:2%;top:-3%;width:min(300px,24vw);height:min(360px,30vw);pointer-events:none}
@media (max-width:900px){.leerstand__rahmen{display:none}}

/* ── Orte: zweispaltige Haarlinien-Liste, wächst nur ── */
.orte{list-style:none;columns:2;column-gap:clamp(26px,4vw,64px);
  margin-top:clamp(20px,3vw,34px);max-width:64ch}
.orte li{break-inside:avoid;border-top:1px solid var(--grau-fein);
  padding:clamp(8px,1vw,12px) 0;font-size:.98rem;line-height:1.4}
@media (max-width:700px){.orte{columns:1}}

/* ═══════════════════════════════════════════════════════════════
   NACHTRÄGE — PRÜFBEFUNDE 10.08. (Technik · Inhalt · Optik)
   Alles aus vorhandenen Mitteln: Haarlinie, kein Radius, kein
   Schatten, Versatz statt Achse. Steht VOR dem @media print,
   damit der Druck weiter das letzte Wort hat.
   ═══════════════════════════════════════════════════════════════ */

/* ── Verschränkung reparieren (Optik-Befund 1, blockierend) ──
   `@keyframes auf` endet auf transform:none, läuft aber mit `both` — der
   Endzustand bleibt als Matrix stehen. Eine Matrix ≠ none erzeugt einen
   Stacking Context auf der Bühnen-Überschrift; damit sind .z-vor und
   .z-hinter darin eingesperrt und die ganze Zeile rutscht UNTER das Foto.
   Die Bühnenzeilen bekommen deshalb eine reine Blende ohne transform. */
@keyframes auf-blende{from{opacity:0}to{opacity:1}}
/* Erster Versuch war `animation-name:auf-blende` auf demselben Element — das reicht
   NICHT: Chrome promotiert ein Element mit animierter opacity auf eine eigene Ebene
   und hält den Stacking Context, solange die Animation mit `both` vorwärts füllt.
   Gemessen: .buehne__foto (z-index 2) lag weiter ÜBER .z-vor (z-index 4).
   Lösung: Der Bühnen-Absatz animiert gar nicht mehr; die Blende läuft auf den
   einzelnen Zeilen. Die Zeilen werden dadurch selbst zu Stacking Contexts — mit
   ihrem eigenen z-index, und der zählt gegen das Foto. Verschränkung intakt,
   Ankunft bleibt, sogar gestaffelt. */
.buehne__zeilen.an{animation:none}
.buehne__zeilen.an > span{animation:auf-blende .75s cubic-bezier(.22,.61,.36,1) both}
.buehne__zeilen.an > span:nth-child(1){animation-delay:.06s}
.buehne__zeilen.an > span:nth-child(2){animation-delay:.15s}
.buehne__zeilen.an > span:nth-child(3){animation-delay:.24s}
.buehne__zeilen.an > span:nth-child(4){animation-delay:.33s}
@media (prefers-reduced-motion:reduce){.buehne__zeilen.an > span{animation:none}}

/* ── Kurze Bühne (zwei Wörter): das Foto rückt weiter nach innen ──
   Sonst greift die Verschränkung nicht — die Zeile erreicht das Foto gar nicht.
   Gebraucht auf /ueber/, seit die Bühne den Namen trägt (Inhalt-Befund 6). */
/* Nachjustiert 11.08. nach der Vergrößerung von .gross--l: Bei 38 % verschluckte das
   Foto das letzte Wort („HEINRIC"). Ein Satz darf angeschnitten werden, ein Name nicht —
   das liest sich als Fehler, nicht als Setzung. Das Foto rückt nach rechts, sodass die
   Verschränkung nur noch den Wortausgang streift. */
.buehne--name .buehne__foto{left:auto;right:4%}
.buehne--name .buehne__rahmen{left:auto;right:calc(4% + 30px);top:calc(6% - 20px)}
.buehne--name .buehne__fotomarke{left:auto;right:4%}
/* Ein-Wort-Bühne (Hub-Seiten): das Foto rückt noch weiter nach innen, sonst
   endet die Zeile weit davor und es entsteht genau das Loch, das Optik-Befund 2
   und 21 beschreiben. */
.buehne--wort{min-height:min(46vh,420px)}
.buehne--wort .buehne__foto{left:26%}
.buehne--wort .buehne__rahmen{left:calc(26% + 30px)}
.buehne--wort .buehne__fotomarke{left:26%}
@media (max-width:900px){
  .buehne--name .buehne__foto,.buehne--name .buehne__fotomarke,
  .buehne--wort .buehne__foto,.buehne--wort .buehne__fotomarke{left:auto}
}

/* ── Wortbruch mitten im Wort auf schmalen Schirmen (Optik-Befund 4) ──
   Die Regel gab es schon, sie griff aber nur auf .seitentitel — die
   Bühnen-Überschriften trugen die Klasse nicht. */
@media (max-width:560px){
  h1.gross--l,.seitentitel.gross--l,.buehne__zeilen.gross--l{
    font-size:clamp(1.3rem,5.6vw,1.7rem);letter-spacing:.24em}
}
/* Zweite Stufe für die schmalsten Schirme: „WEITERFÜHRENDE" (14 Zeichen) passte
   auch mit .24em nicht in 236 px und brach nach dem D. Lieber eine Stufe weniger
   Sperrung als ein einzelnes E auf der nächsten Zeile. */
@media (max-width:420px){
  h1.gross--l,.seitentitel.gross--l,.buehne__zeilen.gross--l{
    font-size:clamp(1.15rem,5.2vw,1.5rem);letter-spacing:.19em}
}

/* ── Klickflächen: Links innerhalb der Mikro-Ebene (Technik-Befund 17) ──
   Der Brotkrumen-Link „Lesungen" und die Fußzeilen-Kleinschrift lagen bei
   14 bzw. 13 px. Nur die Trefferfläche wächst, die Schrift bleibt. */
.mikro a,.fuss .mikro--klein a{display:inline-block;padding:6px 0;min-height:24px}
/* Die Links in den „Neues"-Karten stehen allein auf ihrer Zeile, sind also keine
   Fließtext-Links und fallen nicht unter die Inline-Ausnahme von WCAG 2.5.8. */
.dicht__feld a{display:inline-block;padding:4px 0}
/* Die Regal-Zeilen sind je eine Titelzeile mit Link — auch das ist kein Fließtext. */
.regal__titel a{display:inline-block;padding:3px 0}

/* ── Horizontaler Überlauf auf /lesungen/ bei 320 px (beim Nachmessen gefunden) ──
   .tueren ist ein Grid mit impliziter auto-Spalte. Deren Mindestbreite richtet sich
   nach dem längsten unzerlegbaren Wort — „WEITERFÜHRENDE" mit .3em Sperrung ergibt
   286 px in einem 236 px breiten Blatt, und overflow-wrap:break-word zählt beim
   Grid-Sizing nicht mit. minmax(0,1fr) deckelt die Spalte, dann greift der Umbruch. */
.tueren{grid-template-columns:minmax(0,1fr)}

/* ── Kein Gewicht über 500 (Optik-Befund 11) ──
   Geladen sind nur Vollkorn 400/500; ein <strong> ohne Regel rechnet der
   Browser als synthetische Fettung hoch und bläht die Kanten auf. */
.lese strong,.lese b,.slots dd strong,.faq__antwort strong{font-weight:500}

/* ── Riegel auf der Neonfläche (Optik-Befund 7) ──
   Auf /anfragen/ scrollt man zwei Bildschirme durch Neon; ein neonfarbener
   Riegel verschwindet darin. Dort läuft er invertiert. */
.riegel--tinte{background:var(--tinte);color:var(--neon);border-top-color:var(--neon)}

/* ── Buchseiten: Mikro-Versalien werden nicht zum Fließtext (Optik-Befund 10) ──
   .mikro ist als LABEL definiert, nicht als Textsorte. Die Faktenzeile bleibt
   gesperrt, ganze Sätze darin laufen auf Serife. Auf schmalen Schirmen wird
   zusätzlich die Sperrung zurückgenommen, sonst werden drei Zeilen daraus. */
.fakten__satz{font-family:var(--serif);font-size:.95rem;letter-spacing:0;
  text-transform:none;line-height:1.5;color:var(--tinte)}
@media (max-width:700px){
  .fakten{letter-spacing:.1em;line-height:1.7}
  .fakten .platzhalter{letter-spacing:.06em}
}

/* ── Buchseite mit zwei Bänden: kein 550-px-Loch (Optik-Befund 9) ──
   Die Cover standen untereinander und liefen 700 px unter den Text hinaus.
   Jetzt nebeneinander, gegeneinander versetzt. */
.paar--reihe{grid-template-columns:minmax(0,1fr) clamp(230px,30vw,400px)}
.paar--reihe .paar__bild{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.4vw,20px);align-items:start}
.paar--reihe .cover{margin-top:clamp(10px,3vw,54px)}
.paar--reihe .cover + .cover{margin-top:clamp(26px,6vw,96px)}
.paar--reihe .paar__bild > p{grid-column:1 / -1}
@media (max-width:900px){
  .paar--reihe{grid-template-columns:1fr}
  .paar--reihe .cover,.paar--reihe .cover + .cover{margin-top:0}
}

/* ── Presse: Bios sind Text, kein Formular (Optik-Befund 20) ──
   Drei gerahmte Kästen unterschiedlicher Höhe lasen sich als Eingabemaske.
   Der Kasten ist auf dieser Website sonst nirgends eine Textform. */
.bio{border:0;border-top:1px solid var(--tinte);padding:clamp(14px,2vw,22px) 0 0;
  max-width:62ch}
.bio:nth-of-type(3){border-top-color:var(--grau-fein)}

/* ── Wartender Knopf als echtes <button disabled> (Technik-Befund 24) ── */
.knopf--wartet[disabled]{color:var(--grau);border-color:var(--grau-fein);
  cursor:default;background:transparent}
.knopf--wartet[disabled]:hover{background:transparent;color:var(--grau)}
/* Auf der Neonfläche ist Grau auf Neon unlesbar — dort gedämpfte Tinte. */
.randlos .knopf--wartet[disabled],.randlos .knopf--wartet[disabled]:hover{
  color:rgba(17,17,17,.58);border-color:rgba(17,17,17,.32)}

/* ── Rechtsseiten: die rechte Bildhälfte lebt (Optik-Befund 19) ──
   Die Slots enden bei 60ch; daneben stand 600 px Weiß ohne Möblierung. */
.slots__gegengewicht{position:absolute;z-index:1;border:1px solid var(--grau-fein);
  right:8%;top:34%;width:min(230px,18vw);height:min(300px,24vw);pointer-events:none}
@media (max-width:1100px){.slots__gegengewicht{display:none}}

/* ── 404: Knöpfe treppen statt auf einer Achse stehen (Optik-Befund 18) ── */
.knopfzeile--treppe .knopf:nth-child(2){margin-top:clamp(8px,1.4vw,18px)}
.knopfzeile--treppe .knopf:nth-child(3){margin-top:clamp(18px,3vw,40px)}
@media (max-width:700px){.knopfzeile--treppe .knopf:nth-child(n){margin-top:0}}

/* ── Leerer Rahmen nie im Fotoformat und nie auf Fotoposition (Optik-Befund 16) ──
   Sonst liest er sich als nicht geladenes Bild. Schmal, hochkant, versetzt. */
.gegengewicht--schmal{right:11%;top:20%;width:min(96px,9vw);height:min(300px,26vw)}

/* ── Der Anfrage-Weg endet nicht im Flüstern (Optik-Befund 8) ──
   Der Hub war die einzige Seite ohne randlose Fläche; drei weiße Blätter
   gleicher Dichte hintereinander verletzen §1.6. */
.randlos--still{padding-top:clamp(40px,7vw,110px);padding-bottom:clamp(40px,7vw,110px)}

/* ═══════════════════════════════════════════════════════════════
   NACHTRAG — DRUCK (steht bewusst ganz am Ende der Datei,
   damit es alle vorherigen Nachträge überschreibt)
   Gedacht für /presse/: eine Journalistin druckt die Seite oder legt
   sie als PDF ab. Auf Papier gibt es kein Neon — die Riesenschrift
   wird Tinte und behält ihre Betonung als Unterstreichung.
   Randmöblierung, Wegweiser und Zierrat verschwinden.
   ═══════════════════════════════════════════════════════════════ */
@media print{
  :root{--rand:0}
  body{background:#fff;color:#000;padding:0;font-size:10.5pt;line-height:1.45}
  .blatt{background:#fff;margin:0}
  .blatt__innen{padding:0 0 14pt}
  /* Randmöblierung und Wegweiser fliegen raus */
  .kante,.eck,.marken,.faden,.blatt__nr,.riegel,.sprung,.kopfzeile,.logo,
  .gegengewicht,.dicht__rahmen,.buehne__rahmen,.weg__rahmen,
  .tuer__strich,.regalband__nr{display:none!important}
  /* Neon → Tinte mit Unterstreichung */
  .gross{color:#000;text-decoration:underline;text-decoration-thickness:1pt;
    text-underline-offset:.16em;font-size:15pt;letter-spacing:.2em;line-height:1.2}
  .gross--xl{font-size:20pt}
  .randlos{background:#fff;margin:0;padding:12pt 0 0;border-top:1pt solid #000}
  .randlos .gross,.randlos a{color:#000}
  .knopf{border:1pt solid #000;color:#000;padding:.4em 1em;background:transparent}
  .korrektur{background:transparent;color:#000;border-left-color:#000;text-decoration:underline}
  .platzhalter{color:#000;border-bottom:1pt dashed #666}
  /* Platzhalter, die auf dunklem Grund weiß gesetzt sind, wären auf Papier
     unsichtbar (weiß auf weiß) — ihre Regeln sind spezifischer als die Zeile
     darüber und müssen einzeln zurückgeholt werden. */
  .foto__feld .platzhalter,.regalband .platzhalter,.randlos .platzhalter,
  .cover .platzhalter,.buch .platzhalter{color:#000;border-bottom-color:#666}
  .mikro,.mikro--tinte{color:#000}
  /* Fotos: auf Papier zählt der Download-Weg, nicht die graue Fläche.
     Das Bildfeld fällt auf seine Beschriftung zusammen. */
  .band,.buehne__foto,.cover,.buch__cover,.regalband{
    background:#fff;border:1pt solid #000;filter:none}
  .foto__feld{background:#fff;border:0;filter:none;aspect-ratio:auto;min-height:0}
  .foto__feld .mikro{position:static;left:auto;right:auto;bottom:auto}
  .zitat{border-left-color:#000}
  .foto__feld .mikro,.band__marke,.band__nr,.cover .mikro,.regalband .mikro,
  .buch,.buch__satz{color:#000}
  .band{height:auto;min-height:60pt}
  .buehne,.buehne--knapp{min-height:0;overflow:visible}
  /* Links: die Adresse muss auf dem Papier stehen */
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")";
    font-family:var(--sans);font-size:8pt;letter-spacing:.04em;word-break:break-all}
  .bio,.slots dt,.slots dd,.nackt li,.dicht__feld,.foto{break-inside:avoid}
  h1,h2,.bio__kopf{break-after:avoid}
  .an{animation:none}
}

/* Zwei Spalten ab Tablet: sonst wird die Neonfläche eine Wand statt
   ein Moment. Breite Felder (Auswahl, Absender, Knopf) laufen durch. */
@media (min-width:901px){
  .formular{grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,84px);
    max-width:none;width:min(100%,1000px)}
  .feld--breit,.formular > .knopf{grid-column:1 / -1}
  .formular > .knopf{justify-self:start}
  .feld__reihe{grid-template-columns:repeat(3,1fr)}
}

/* ── Kontur verworfen (Finn 11.08.: „ich finde die umrandung der großbuchstaben
   hässlich. bitte ohne rand.") ──
   Die Riesenschrift läuft ohne Kontur, wie in der Referenz. Damit bleibt der
   Kontrast Neon-auf-Papier rechnerisch niedrig — das ist eine bewusste
   Gestaltungsentscheidung: Die Riesenschrift ist eine Geste, und jede Information,
   die sie trägt, steht auf derselben Seite noch einmal als Tinte im Lesetext.
   Offen bleibt die Handy-Frage (dort schrumpft die Schrift auf ~33 px) —
   siehe WAS-FEHLT.md, Abschnitt Entscheidungen. */

/* ═══════════════════════════════════════════════════════════════
   KOMPOSITIONS-EBENE  (ersetzt die „Chaos-Ebene", 11.08.)
   Befund aus 06-aaa-lauf/KOMPOSITION-ANALYSE.md: In der Vorlage ist
   NICHTS gedreht — kein Foto, kein Rahmen, keine Karte. Gleichmäßig
   verteilte Mini-Drehungen sind ein Filter, und Filter liest das Auge
   als maschinell (derselbe Fehler wie simulierter Ink-Bleed).
   Chaos entsteht aus ÜBERLAPPUNG, KREUZUNG und UNGLEICHER PLATZIERUNG.
   Regeln: ein Anker pro Abschnitt · jedes Element berührt etwas ·
   leere Rahmen überlappen · Versatz in Prozent (10–20 %), nicht in Grad ·
   Anschnitt mutig · Größen in einer Gruppe Faktor 2–3 · Leere asymmetrisch.
   Steht VOR dem @media print am Dateiende.
   ═══════════════════════════════════════════════════════════════ */

/* Zweites Foto, deutlich kleiner (Verhältnis ~1:2,4) — es überlappt das
   große an dessen unterer linker Ecke. Berührung, nicht Nachbarschaft. */
.buehne__foto2{
  position:absolute;z-index:3;
  right:17.5%;top:38%;
  width:min(142px,11.2vw);aspect-ratio:4/3;
  background:linear-gradient(24deg,#9A9A9A,#4A4A4A);
}

/* Der Strich VERBINDET: er beginnt im leeren Rahmen und endet im großen
   Foto — läuft also durch beide Bildebenen, statt daneben ins Leere. */
.strich{
  position:absolute;z-index:5;height:1px;background:var(--tinte);
  transform-origin:left center;pointer-events:none;
}
.strich--buehne{right:5.5%;top:23%;width:23%;transform:rotate(34deg)}

/* Verstreute Buchstaben folgen einer Diagonale von oben links nach unten
   rechts; Größen schwanken um Faktor ~2,8. Kein Zufall, ein Weg. */
.streu{position:absolute;inset:0;z-index:3;pointer-events:none}
.streu b{
  position:absolute;font-family:var(--sans);font-weight:500;color:var(--neon);
  line-height:1;letter-spacing:0;font-size:clamp(2.4rem,6.4vw,6rem);
}
.streu b:nth-child(1){left:5%;top:9%;font-size:clamp(2rem,5vw,4.6rem)}
.streu b:nth-child(2){left:13%;top:24%}
.streu b:nth-child(3){left:22.5%;top:36%;font-size:clamp(3.4rem,9.4vw,9rem)}
.streu b:nth-child(4){left:38%;top:47%;font-size:clamp(1.9rem,4.6vw,4.2rem)}
.streu b:nth-child(5){left:49%;top:40%;font-size:clamp(2.8rem,7.4vw,7rem)}
.streu b:nth-child(6){left:63%;top:55%;font-size:clamp(2.2rem,5.4vw,5rem)}
.streu b:nth-child(7){left:75%;top:62%;font-size:clamp(3rem,8vw,7.6rem)}
@media (max-width:900px){ .streu b{font-size:1.6rem!important} .streu b:nth-child(n+6){display:none} }

/* Ungleicher Zeilen-Einzug — deutlich genug, um als Setzung gelesen zu
   werden, nicht als Rundungsfehler. */
.versetzt-1{margin-left:.17em}
.versetzt-2{margin-left:-.06em}

/* Die leeren Rahmen ÜBERLAPPEN ihre Gruppe, statt daneben zu stehen —
   nur so binden sie lose Elemente zusammen. */
.gegengewicht{right:7%;top:20%;width:min(340px,31vw);height:min(410px,37vw)}
.dicht__rahmen{left:28%;top:-16%;width:min(350px,30vw);height:min(350px,30vw)}

/* ═══════════════════════════════════════════════════════════════
   ECHTE BILDER IN DEN FOTO-SLOTS — 16.08.2026
   Die Slots waren graue Verläufe. Liegt ein <img> drin, bekommt die
   Hülle .hat-bild: der Verlauf verschwindet, das Bild füllt den Slot.
   Der Alt-Text sitzt am Bild, deshalb fällt role/aria-label an der
   Hülle weg. Gleiche Mittel wie überall: kein Radius, kein Schatten.
   ═══════════════════════════════════════════════════════════════ */
.buehne__foto>img,.buehne__foto2>img,.band>img,.foto__feld>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.hat-bild{background:none}
.foto__feld.hat-bild{filter:none}          /* Bilder sind schon s/w */
/* Die Marken lagen weiß auf dunklem Verlauf. Auf einem hellen Raster
   wären sie unsichtbar — dort schreiben sie in Tinte, auf einem
   Papier-Plättchen, damit sie über jedem Tonwert stehen. */
.band.hat-bild .band__marke,.band.hat-bild .band__nr{
  color:var(--tinte);background:var(--papier);padding:.5em .8em;z-index:4}
.foto__feld.hat-bild .mikro{
  color:var(--tinte);background:var(--papier);padding:.45em .7em;z-index:4;right:auto}

/* ═══════════════════════════════════════════════════════════════
   STRUKTUR V2 (08.10.2026) — Artist Page
   Neue Bausteine: Neues-Schau, Kosmos-Türen 4+5, Formatkarten,
   Video-Standbild, Cover-Regal, Schalter, Formular.
   Gesetze unverändert: Neon = Riesenschrift, ≤500, 1px, kein Radius.
   ═══════════════════════════════════════════════════════════════ */

/* ── Neues-Schau: randlos, dunkel, wischt von selbst ── */
.schau{position:relative;margin:0 calc(-1 * var(--rand)) var(--rand);background:#1A1A1A;
  color:#fff;overflow:hidden;min-height:clamp(380px,62vh,640px)}
.schau__spur{position:relative;min-height:inherit}
.schau__dia{position:absolute;inset:0;display:block;text-decoration:none;color:inherit;
  opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.schau__dia.ist-da{opacity:1;visibility:visible;transition:opacity .9s ease}
.schau__bild{position:absolute;inset:0}
.schau__bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.46) contrast(1.08)}
.schau__bild--cover{display:flex;align-items:center;justify-content:flex-end;padding-right:clamp(20px,9vw,150px)}
.schau__bild--cover img{position:relative;width:auto;height:72%;max-width:44%;object-fit:contain;
  filter:none;border:1px solid rgba(255,255,255,.4)}
.schau__text{position:absolute;left:clamp(20px,5vw,84px);right:clamp(20px,5vw,84px);bottom:clamp(54px,8vw,110px);z-index:3}
.schau__text .gross{color:var(--neon);white-space:normal}
.schau__text .mikro{color:rgba(255,255,255,.82);display:block;margin-bottom:clamp(12px,1.6vw,20px)}
.schau__satz{display:block;font-family:var(--serif);font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.5;
  max-width:46ch;margin-top:clamp(14px,1.8vw,22px);color:#fff}
.schau__mehr{display:inline-block;margin-top:clamp(14px,1.8vw,20px);font-family:var(--sans);font-size:.5625rem;
  letter-spacing:.32em;text-transform:uppercase;border-bottom:1px solid var(--neon);padding-bottom:3px}
.schau__dia:hover .schau__mehr:not(.schau__mehr--zwei),.schau__flaeche:focus-visible~.schau__text .schau__mehr:not(.schau__mehr--zwei){background:var(--neon);color:#111}
/* 28.10.: Dia trägt einen Flächenlink; Links im Text und der zweite Knopf liegen darüber */
.schau__flaeche{position:absolute;inset:0;z-index:2}
.schau__text{pointer-events:none}
.schau__text a{pointer-events:auto;position:relative;z-index:4}
.schau__satz a{color:inherit;text-decoration:underline;text-decoration-color:var(--neon);text-decoration-thickness:1px;text-underline-offset:3px}
.schau__satz a:hover{background:var(--neon);color:#111;text-decoration:none}
.schau__mehr--zwei{color:inherit;text-decoration:none;margin-left:clamp(16px,2.2vw,28px)}
.schau__mehr--zwei:hover,.schau__mehr--zwei:focus-visible{background:var(--neon);color:#111}
.schau__nr{position:absolute;top:clamp(16px,2.4vw,28px);right:clamp(18px,2.6vw,32px);z-index:5;color:rgba(255,255,255,.82)}
.schau__kopf{position:absolute;top:clamp(16px,2.4vw,28px);left:clamp(20px,5vw,84px);z-index:5;color:rgba(255,255,255,.82)}
.schau__kopf a{color:inherit;text-decoration:none;border-bottom:1px solid var(--neon)}
.schau__punkte{position:absolute;left:clamp(20px,5vw,84px);bottom:clamp(20px,3vw,38px);z-index:5;display:flex;gap:10px}
.schau__punkte button{width:28px;height:24px;background:none;border:0;cursor:pointer;position:relative}
.schau__punkte button::after{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:rgba(255,255,255,.5)}
.schau__punkte button[aria-current="true"]::after{height:3px;top:10px;background:var(--neon)}
.schau__entwurf{position:absolute;top:clamp(46px,6vw,70px);left:clamp(20px,5vw,84px);z-index:5;
  font-family:var(--sans);font-size:.6875rem;letter-spacing:.1em;color:#111;background:#fff;padding:2px 8px}
@media (prefers-reduced-motion:reduce){.schau__dia{transition:none}}
.schau :focus-visible{outline-color:var(--neon)}

/* ── Kosmos: fünf Türen. a/b/c wie gehabt, d/e setzen den Versatz fort ── */
.tuer--d{margin-left:auto;margin-right:clamp(0px,6vw,90px);max-width:64%;text-align:right;margin-top:clamp(26px,5vw,72px)}
.tuer--d .tuer__sub{margin-left:auto;text-align:right}
.tuer--e{margin-left:clamp(0px,3vw,48px);max-width:72%;margin-top:clamp(22px,4.4vw,60px)}
.tuer__bild{display:block;width:clamp(92px,11vw,150px);margin-bottom:clamp(12px,1.6vw,18px)}
.tuer--b .tuer__bild,.tuer--d .tuer__bild{margin-left:auto}
.tuer__bild img{display:block;width:100%;height:auto;filter:grayscale(1)}
.tuer:hover .tuer__bild img,.tuer:focus-visible .tuer__bild img{filter:none}

/* ── Formatkarten auf den Altersgruppen-Seiten ── */
.formate{display:grid;gap:clamp(44px,7vw,100px)}
.format{position:relative;display:grid;grid-template-columns:clamp(96px,13vw,170px) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);border-top:1px solid var(--tinte);padding-top:clamp(16px,2.2vw,26px);max-width:70rem}
.format:nth-child(even){margin-left:clamp(0px,8vw,130px)}
.format__cover img{display:block;width:100%;height:auto;border:1px solid var(--grau-fein)}
.format__cover--leer{border:1px solid var(--grau-fein);aspect-ratio:2/3}
.format__titel{font-family:var(--sans);font-weight:500;font-size:clamp(1.05rem,1.6vw,1.35rem);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.format__daten{display:flex;flex-wrap:wrap;gap:6px 22px;margin:clamp(10px,1.4vw,16px) 0}
.format__daten .mikro{color:var(--tinte)}
.format__daten .mikro b{font-weight:400;color:var(--grau)}
.format__text{max-width:58ch}
.format__text p + p{margin-top:.9em}
.format__preis{font-family:var(--serif);font-style:italic;color:var(--grau);margin-top:.9em;font-size:.95rem}
.format__fuss{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-top:clamp(16px,2vw,24px)}
.format__fuss a.leise{font-family:var(--sans);font-size:.5625rem;letter-spacing:.32em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--neon);padding-bottom:3px}
@media (max-width:640px){.format{grid-template-columns:86px minmax(0,1fr)}.format:nth-child(even){margin-left:0}}

/* ── Video: erst Standbild, YouTube lädt beim Klick ── */
.video{position:relative;aspect-ratio:16/9;background:#1A1A1A;max-width:58rem}
.video img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.7)}
.video__knopf{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-start;padding:clamp(14px,2.4vw,30px);background:none;border:0;cursor:pointer;color:#fff;text-align:left;text-decoration:none}
.video__knopf .gross{color:var(--neon);font-size:clamp(1.3rem,3.2vw,2.6rem);letter-spacing:.3em}
.video__knopf .mikro{color:rgba(255,255,255,.86);margin-top:10px;display:block;max-width:52ch;line-height:1.7}
.video:hover img{filter:grayscale(.2) brightness(.8)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── Cover-Regal: alle Bücher als Kacheln, Klick zum Verlag ── */
.regalgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(96px,11vw,150px),1fr));
  gap:clamp(18px,2.6vw,34px) clamp(14px,2vw,26px);margin-top:clamp(24px,3.4vw,44px)}
.regalgitter a{display:block;text-decoration:none;color:inherit}
.regalgitter a:nth-child(3n+2){margin-top:clamp(0px,1.6vw,22px)}
.regalgitter img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--grau-fein)}
.regalgitter .mikro{display:block;margin-top:8px;color:var(--tinte);letter-spacing:.2em;line-height:1.7}
.regalgitter a:hover img,.regalgitter a:focus-visible img{outline:3px solid var(--neon);outline-offset:-3px}

/* ── Die Großen auf der Bücherseite ── */
.gross-buch{display:grid;grid-template-columns:clamp(120px,17vw,230px) minmax(0,1fr);gap:clamp(20px,4vw,60px);
  border-top:1px solid var(--tinte);padding-top:clamp(18px,2.4vw,30px);scroll-margin-top:24px}
.gross-buch + .gross-buch{margin-top:clamp(56px,9vw,130px)}
.gross-buch:nth-of-type(even){margin-left:clamp(0px,7vw,110px)}
.gross-buch__cover img{display:block;width:100%;height:auto;border:1px solid var(--grau-fein)}
.gross-buch .video{margin-top:clamp(18px,2.4vw,28px)}
.gross-buch__preise{list-style:none;margin-top:clamp(12px,1.6vw,18px);display:grid;gap:4px}
.gross-buch__preise li{font-family:var(--sans);font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;line-height:1.8}
.gross-buch__preise li::before{content:"— ";color:var(--neon)}
@media (max-width:640px){.gross-buch{grid-template-columns:1fr}.gross-buch__cover{max-width:160px}.gross-buch:nth-of-type(even){margin-left:0}}

/* ── Schalter: Wegweiser, alles auf einen Blick ── */
.schalter{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:clamp(24px,3.6vw,46px);
  border-top:1px solid var(--tinte);border-bottom:1px solid var(--tinte)}
.schalter a{display:block;text-decoration:none;color:inherit;padding:clamp(18px,2.6vw,34px) clamp(14px,2vw,26px);
  border-left:1px solid var(--grau-fein)}
.schalter a:first-child{border-left:0}
.schalter a:hover,.schalter a:focus-visible{background:var(--neon)}
.schalter .gross{font-size:clamp(1.1rem,2.6vw,2.1rem);letter-spacing:.24em;display:block}
.schalter a:hover .gross,.schalter a:focus-visible .gross{color:var(--tinte)}
.schalter .mikro{display:block;margin-top:10px;color:var(--tinte)}

/* ── Neues-Liste ── */
.meldung{border-top:1px solid var(--tinte);padding-top:clamp(16px,2.2vw,26px);display:grid;
  grid-template-columns:clamp(90px,12vw,160px) minmax(0,1fr);gap:clamp(18px,3vw,40px);max-width:64rem}
.meldung + .meldung{margin-top:clamp(40px,6vw,84px)}
.meldung:nth-of-type(even){margin-left:clamp(0px,6vw,90px)}
.meldung__bild img{display:block;width:100%;height:auto;filter:grayscale(1)}
.meldung h2{font-family:var(--sans);font-weight:500;font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:.14em;text-transform:uppercase;line-height:1.3;margin:.4em 0 .6em}

/* ── Anfrageformular ── */
.formular{display:grid;gap:clamp(16px,2.2vw,24px);max-width:44rem}
.formular label{display:grid;gap:6px}
.formular .mikro{color:var(--tinte)}
.formular input,.formular select,.formular textarea{font-family:var(--serif);font-size:1.05rem;color:var(--tinte);
  background:transparent;border:0;border-bottom:1px solid var(--tinte);border-radius:0;padding:8px 0;width:100%}
.formular textarea{min-height:7em;border:1px solid var(--grau-fein);padding:10px}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:0;box-shadow:0 2px 0 var(--neon)}
.formular__paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2.2vw,24px)}
.formular__hinweis{font-size:.95rem;color:var(--grau)}
.formular__kopie{display:none;margin-top:12px}
.formular__kopie.ist-da{display:block}
.formular__kopie textarea{width:100%;min-height:12em;font-family:var(--serif);font-size:.95rem;border:1px solid var(--grau-fein);padding:10px}

/* ── Weiter-Baustein „Wenn dich das interessiert …“ ── */
.weiter{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:clamp(18px,2.4vw,28px)}
.weiter a{font-family:var(--serif);font-size:1.05rem;text-decoration:none;border-bottom:1px solid var(--neon)}
.weiter a:hover,.weiter a:focus-visible{background:var(--neon)}
.schau__dia--cover .schau__text{right:clamp(20px,50vw,52%)}
@media (max-width:700px){.schau__bild--cover{justify-content:center;align-items:flex-start;padding:70px 0 0}
  .schau__bild--cover img{height:42%;max-width:60%}.schau__dia--cover .schau__text{right:clamp(20px,5vw,84px)}}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(18px,2.6vw,34px)}
/* 28.10.: Versatz des zweiten Videos entfernt — Finn will die Trailer auf einer Höhe */
.video__knopf .gross{line-height:1.1}
.video__knopf .mikro{margin-top:14px}
@media (max-width:640px){.video__knopf .mikro{display:none}}
@media (max-width:640px){
  .tueren .tuer{max-width:100%;margin-left:0;margin-right:0}
  .tueren .gross--l,.tueren .gross--m{letter-spacing:.14em;font-size:clamp(1.5rem,8.4vw,2.4rem);overflow-wrap:normal;word-break:keep-all}
  .seitentitel.gross--l{letter-spacing:.16em;font-size:clamp(1.7rem,9vw,2.6rem)}
}

/* ── A · Die Ziffer als Held: 2800 in Neon, läuft durchs Foto ── */
.ziffer{position:relative;min-height:clamp(220px,30vw,430px);margin:clamp(20px,4vw,60px) 0 clamp(60px,9vw,130px)}
.ziffer__foto{position:absolute;z-index:2;right:6%;top:0;width:clamp(150px,26vw,360px)}
.ziffer__foto img{display:block;width:100%;height:auto;filter:grayscale(1)}
.ziffer__zahl{position:relative;z-index:3;display:block;font-size:clamp(5rem,27vw,24rem);letter-spacing:.04em;line-height:.86;
  margin-left:-.06em;padding-top:clamp(40px,7vw,110px);white-space:nowrap;mix-blend-mode:multiply}
.ziffer__zeile{position:relative;z-index:4;display:block;margin-top:clamp(12px,1.6vw,20px);color:var(--tinte)}

/* ── C · Neon beim Drüberfahren: die Tür füllt sich ── */
.tueren .tuer{padding:clamp(10px,1.4vw,18px);transition:background .18s ease,transform .25s ease}
.tueren .tuer:hover,.tueren .tuer:focus-visible{background:var(--neon);transform:none}
.tueren .tuer:hover .gross,.tueren .tuer:focus-visible .gross{color:var(--tinte)}
.tueren .tuer:hover .tuer__strich,.tueren .tuer:focus-visible .tuer__strich{background:var(--tinte)}
.tueren .tuer:hover .tuer__bild img{filter:none}
.ziffer__foto{top:clamp(70px,11vw,170px);right:4%;width:clamp(170px,38vw,560px)}
.ziffer__zahl{padding-top:clamp(20px,4vw,60px)}
.video__knopf{gap:16px}.video__knopf .gross{display:block;line-height:1.2}.video__knopf .mikro{margin-top:0}

/* ═══════════ Feedback Runde 1 (Finn, 11.10.2026, Handy) ═══════════ */

/* Handy-Menü: eingeklappt hinter „Menü", statt drei Zeilen Links */
.menue-knopf{display:none}
@media (max-width:700px){
  .hat-menue .kopfzeile{display:none}
  .hat-menue .kopfzeile.offen{display:flex;flex-direction:column;align-items:flex-start;gap:18px;
    margin:6px 0 clamp(26px,6vw,40px)}
  .hat-menue .kopfzeile.offen a{font-size:.75rem}
  .menue-knopf{display:inline-block;background:none;border:0;border-bottom:1px solid var(--neon);padding:6px 0;
    font-family:var(--sans);font-size:.625rem;letter-spacing:.36em;text-transform:uppercase;color:var(--tinte);cursor:pointer}
  .menue-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:clamp(18px,5vw,26px)!important}
  .menue-zeile--allein{justify-content:flex-end}
}

/* Unterzeile der Startseite: auf dem Handy bewusst zweizeilig */
@media (max-width:700px){
  .unterzeile{letter-spacing:.2em;line-height:2}
  .unterzeile span{display:block}
}

/* „nein, anders:" — Tinte mit Neonlinie statt Neon auf Papier (unlesbar) */
.korrektur{color:var(--tinte);font-size:.6875rem;border-left:0;padding:0 0 .1em;margin-left:.5em;
  border-bottom:2px solid var(--neon)}

/* Neues-Schau auf dem Handy: Bild oben, Text darunter — nichts liegt mehr übereinander */
@media (max-width:700px){
  .schau{min-height:0}
  .schau__spur{display:grid;min-height:0}
  .schau__dia{position:relative;inset:auto;grid-area:1/1;padding:66px 20px 70px}
  .schau__bild,.schau__bild--cover{position:relative;inset:auto;display:block;padding:0;margin-bottom:24px}
  .schau__bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) brightness(.85)}
  .schau__bild--cover img{width:auto;max-width:52%;height:auto;max-height:240px;aspect-ratio:auto;filter:none}
  .schau__text,.schau__dia--cover .schau__text{position:relative;left:auto;right:auto;bottom:auto}
  .schau__text .gross{letter-spacing:.12em;font-size:clamp(1.5rem,7.4vw,2.1rem);line-height:1.15}
  .schau__punkte{bottom:24px;left:20px}
}

/* Türen: alle linksbündig, alle mit Bild in Farbe */
.tueren .tuer,.tueren .tuer .tuer__sub{text-align:left}
.tueren .tuer .tuer__sub{margin-left:0}
.tuer--b .tuer__bild,.tuer--d .tuer__bild{margin-left:0}
.tuer__bild img,.tueren .tuer__bild img{filter:none}
.tuer__bild--quer{width:clamp(150px,18vw,240px)}
/* Handys kennen kein Drüberfahren: dort leuchtet die Tür, die gerade mittig im Bild ist */
@media (hover:none){
  .tueren .tuer.im-blick{background:var(--neon)}
  .tueren .tuer.im-blick .gross{color:var(--tinte)}
  .tueren .tuer.im-blick .tuer__strich{background:var(--tinte)}
}
/* Reihen als Stapel: erster Band vorn, die anderen versetzt dahinter */
.gross-buch__cover--stapel{position:relative;padding:0 18% 14% 0}
.gross-buch__cover--stapel img{position:relative;z-index:3;box-shadow:none}
.gross-buch__cover--stapel img:not([style*="--i:0"]){position:absolute;top:calc(var(--i) * 7%);left:calc(var(--i) * 9%);
  width:82%;z-index:calc(3 - var(--i))}
.gross-buch__cover--stapel img[style*="--i:0"]{width:82%;z-index:3}
/* Startbild in Farbe (Finn, 11.10.): Gesicht mittig im Ausschnitt */
.buehne__foto>img.in-farbe{filter:none;object-fit:cover;object-position:58% 40%}
/* Bücherseite nach Lesealter (11.10.): Trailer kompakt, Titel als kleines Regal */
.gross-buch__video{max-width:560px}
.regalgitter--klein{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.buehne--name .buehne__foto>img.in-farbe{object-position:50% 50%}
@media (max-width:900px){.buehne--name .buehne__foto{aspect-ratio:3/4;width:min(100%,420px)}}
/* Runde 2 (11.10.): Stapel gleich groß, im eigenen Kasten — überdeckt keinen Titel mehr */
.gross-buch__cover--stapel{position:relative;padding:0}
.gross-buch__cover--stapel img,.gross-buch__cover--stapel img[style]{position:absolute;height:auto;object-fit:cover;
  border:1px solid var(--grau-fein);background:#fff}
@media (max-width:640px){.gross-buch__cover--stapel{max-width:220px}}
/* Regal: Cover nie beschneiden, alle stehen auf einer Linie */
.regalgitter{align-items:end}
.regalgitter img{aspect-ratio:auto;height:auto;object-fit:contain}
.regalgitter a:nth-child(3n+2){margin-top:0}
.regalgitter{align-items:start}
.regalgitter img{height:clamp(140px,15vw,200px);width:100%;object-fit:contain;object-position:left bottom;border:0}

/* ── Neon-Textmarker (Finn, 11.10.): wie eilig mit dickem Pinsel drübergemalt,
      unsauber, leicht verrutscht. Zwei Pinselformen, damit es nicht maschinell wirkt. ── */
:root{
  --pinsel-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M6 14 C40 9 70 12 110 8 C160 4 210 10 255 7 C275 6 290 9 296 13 L293 21 C296 26 291 31 284 33 C240 36 190 32 140 35 C95 37 50 34 18 36 C9 36 4 31 6 26 C2 22 3 17 6 14Z' fill='%23CCFF00'/%3E%3Cpath d='M20 30 C80 27 150 31 230 28' stroke='%23CCFF00' stroke-width='5' fill='none' opacity='.55'/%3E%3C/svg%3E");
  --pinsel-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M3 18 C30 11 80 15 130 11 C185 8 240 13 292 9 C297 13 298 20 294 24 C296 29 289 33 270 32 C220 30 170 35 120 33 C70 31 35 35 10 33 C2 30 5 24 3 18Z' fill='%23CCFF00'/%3E%3Cpath d='M12 12 C60 10 140 13 200 10' stroke='%23CCFF00' stroke-width='4' fill='none' opacity='.5'/%3E%3C/svg%3E");
}
.marker,.korrektur,
.blatt__innen h2.mikro--tinte,.blatt__innen h3.mikro--tinte,
.lese a,.weiter a{
  background:var(--pinsel-a) no-repeat;background-size:104% 78%;background-position:-2px 70%;
  padding:.05em .28em;margin-left:-.28em;border-bottom:0;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.blatt__innen h2.mikro--tinte,.blatt__innen h3.mikro--tinte{display:inline-block;padding:.35em .5em;margin-left:-.5em;
  background-size:100% 100%;background-position:0 50%}
.blatt__innen section:nth-of-type(even) h2.mikro--tinte,.lese p:nth-child(even) a,.weiter a:nth-child(even){background-image:var(--pinsel-b)}
.korrektur{border:0;margin-left:.4em;padding:.15em .45em;color:var(--tinte)}
.lese a:hover,.lese a:focus-visible,.weiter a:hover,.weiter a:focus-visible{background-color:transparent;background-size:110% 115%;background-position:-4px 50%}
.randlos .lese a{background-image:none;border-bottom:1px solid var(--tinte)}
@media (hover:none){.tueren .tuer{transition:background .08s linear}}
/* Startbild steckt seit 22.10. in <picture> (WebP + JPEG): dieselben Regeln wie für das direkte <img> */
.buehne__foto>picture{position:absolute;inset:0;display:block;z-index:0}
.buehne__foto>picture>img{display:block;width:100%;height:100%;object-fit:cover;filter:none;object-position:58% 40%}
/* Karussell: Fortschrittslinie im aktiven Strich + Pause-Knopf (22.10.) */
.schau__punkte{align-items:center}
.schau__punkte button[aria-current="true"]::after{background:rgba(255,255,255,.5);height:1px;top:11px}
.schau__punkte button[aria-current="true"]::before{content:"";position:absolute;left:0;right:0;top:10px;height:3px;background:var(--neon);
  transform-origin:left center}
.schau.laeuft .schau__punkte button[aria-current="true"]::before{animation:schau-fortschritt var(--standzeit,5500ms) linear forwards}
@keyframes schau-fortschritt{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.schau__pause{width:auto!important;height:auto!important;margin-left:14px;padding:6px 0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.4)}
.schau__pause::after{display:none!important}
.schau__pause:hover,.schau__pause:focus-visible{color:#fff;border-bottom-color:var(--neon)}
@media (prefers-reduced-motion:reduce){.schau.laeuft .schau__punkte button[aria-current="true"]::before{animation:none}}

/* ═══ Review 22.10.: Lesbarkeit der Entscheidungsdaten, Manuskript-Platzhalter, Newsletter-Kasten, Tippziele ═══ */
/* Dauer, Klasse, Art: das, wonach Lehrkräfte entscheiden — größer, in Tinte, ohne Versalien-Sperrung */
.format__daten{display:grid;gap:5px;margin:clamp(12px,1.6vw,18px) 0}
.format__daten .mikro{font-family:var(--sans);font-size:.875rem;letter-spacing:.01em;text-transform:none;line-height:1.45;color:var(--tinte)}
.format__daten .mikro b{display:inline-block;min-width:6.2em;font-weight:500;font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grau)}
/* Leeres Cover = Manuskriptblatt statt leerer Kasten */
.format__cover--leer{position:relative;border:1px solid var(--tinte);aspect-ratio:2/3;
  background:repeating-linear-gradient(180deg,transparent 0 13px,var(--grau-fein) 13px 14px)}
.format__cover--leer::after{content:"Manuskript";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--neon);padding:.35em .55em;font-family:var(--sans);font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;color:var(--tinte)}
/* Newsletter-Kasten: Feld und Knopf kräftig genug für das Neon */
.randlos .brief input{border-bottom:2px solid var(--tinte);min-width:min(320px,100%);padding:8px 0}
.randlos .brief .knopf{background:var(--tinte);color:var(--neon);border-color:var(--tinte);padding:12px 20px}
.randlos .brief .knopf:hover,.randlos .brief .knopf:focus-visible{background:#000;color:#fff}
/* Tippziele: kleine Textlinks bekommen Luft (mind. 24 px hoch) */
.format__fuss a.leise,.fuss a,.weiter a{display:inline-block;padding-top:5px;padding-bottom:5px}
/* Neon-Marker malt sich (einmal, von links nach rechts) — nur mit .hat-marker, also nie bei „weniger Bewegung" */
.hat-marker .blatt__innen h2.mikro--tinte,.hat-marker .blatt__innen h3.mikro--tinte,.hat-marker .korrektur{
  transition:background-size .5s cubic-bezier(.3,.7,.2,1)}
.hat-marker .blatt__innen h2.mikro--tinte:not(.gemalt),.hat-marker .blatt__innen h3.mikro--tinte:not(.gemalt){background-size:0% 100%}
.hat-marker .korrektur:not(.gemalt){background-size:0% 78%}
.hat-marker .korrektur.gemalt{transition-delay:.25s}
.format__daten .mikro{display:grid;grid-template-columns:6.6em 1fr;column-gap:.5em;align-items:baseline}
.format__daten .mikro b{min-width:0}

/* ── Erster Bildschirm, Runde 3 (Finn, 26.10.2026) ───────────────────────────
   „das foto kann deutlich größer und die schrift (titel) kann da rüber gehen.
   lieber ein paar einzelne gezielte brüche als alles so clean und langweilig.“
   Zwei Brüche, nicht mehr:
   1. Der Name liegt ÜBER dem Foto. Auf dem Papier ist das Neon leise,
      auf dem dunklen Wasser leuchtet es.
   2. Das Foto ragt über den Blattrand hinaus auf den grauen Grund
      (am Handy: von Kante zu Kante).
   Alles andere bleibt ruhig: Feldzeile, ein schwarzer Knopf, eine Mikro-Zeile. */
.buehne--gross{
  --innen:clamp(22px,5vw,84px);                      /* Innenabstand des Blatts */
  --grund:clamp(20px,4vw,58px);                      /* grauer Rand ums Blatt */
  --ueber:calc(var(--innen) + var(--grund) * .55);   /* so weit ragt das Foto hinaus */
  --oben:clamp(4px,1vw,14px);
  overflow:visible}
.buehne--gross .buehne__foto{top:calc(var(--oben) - clamp(20px,4vw,60px));right:calc(-1 * var(--ueber));
  width:calc(60% + var(--ueber));aspect-ratio:7/4}
.buehne--gross .buehne__foto>picture>img{object-position:50% 50%}
.buehne--gross .buehne__rahmen{top:calc(var(--oben) - clamp(20px,4vw,60px) + clamp(24px,3.2vw,44px));
  right:calc(-1 * var(--ueber) + clamp(30px,4vw,56px));
  width:calc(60% + var(--ueber));aspect-ratio:7/4}
.buehne--gross .strich--buehne{display:none}
.buehne--gross .buehne__zeilen{padding-top:clamp(56px,8vh,110px)}
.blatt:has(.buehne--gross) .marken{display:none}            /* Pfeilmarken lägen sonst auf dem Foto */
.buehne--gross .z-vor,.buehne--gross .z-hinter{z-index:4}   /* der ganze Name liegt vor dem Foto */
.buehne__wege{position:relative;z-index:4;margin-top:clamp(28px,4.4vw,56px);max-width:40%}
.buehne__felder{font-family:var(--sans);font-size:.6875rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--tinte);line-height:1}
.buehne__felder a{text-decoration:none;display:inline-block;padding:.9em 0}
.buehne__felder a:hover,.buehne__felder a:focus-visible{background:var(--neon)}
.buehne__ruf{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  margin-top:clamp(8px,1.2vw,14px)}
.knopf--voll{background:var(--tinte);color:var(--neon);border-color:var(--tinte)}
.knopf--voll:hover,.knopf--voll:focus-visible{background:var(--neon);color:var(--tinte);border-color:var(--neon)}
@media (max-width:900px){
  /* Handy: Foto von Kante zu Kante, der Name liegt unten im dunklen Teil des Bildes. */
  .buehne--gross .buehne__foto{order:1;top:auto;right:auto;aspect-ratio:1/1;
    width:calc(100% + 2 * (var(--innen) + var(--grund)));
    margin:0 0 0 calc(-1 * (var(--innen) + var(--grund)))}
  .buehne--gross .buehne__foto>picture>img{object-position:57% 38%}
  .buehne--gross .buehne__zeilen{order:2;padding-top:0;font-size:clamp(2.4rem,12.4vw,9.6rem);
    margin-top:-2.5em}
  .buehne--gross .buehne__wege{order:3;max-width:none;margin-top:clamp(34px,9vw,52px)}
  .buehne__felder{font-size:.625rem;letter-spacing:.22em}
  .buehne__ruf .mikro{letter-spacing:.2em}
}
/* Tablet hochkant: das ganze Querformat statt Quadrat (sonst riesig und unscharf) */
@media (min-width:600px) and (max-width:900px){
  .buehne--gross .buehne__foto{aspect-ratio:7/4}
  .buehne--gross .buehne__foto>picture>img{object-position:50% 50%}
  .buehne--gross .buehne__zeilen{font-size:clamp(2.4rem,9vw,9.6rem)}   /* sonst liegt der Name im Gesicht */
}
/* Sehr breite Schirme: das Foto wächst nicht endlos (Vorlage ist 1344 px breit) */
@media (min-width:1600px){
  .buehne--gross .buehne__foto,.buehne--gross .buehne__rahmen{width:min(calc(60% + var(--ueber)), 1040px)}
}

/* ── Türen, Runde 3 (26.10.): dasselbe Prinzip wie der erste Bildschirm ─────────
   Bild groß, der Titel läuft über die Unterkante des Bildes (halb Bild, halb Papier),
   Bilder wechseln die Seite, zwei ragen über den Blattrand. Fotos schwarzweiß wie in
   der Vorlage, damit das Neon darauf trägt; Farbe kommt beim Drüberfahren. */
.tueren--gross{--innen:clamp(22px,5vw,84px)}
.tueren--gross .tuer{max-width:none;margin:clamp(44px,7vw,104px) 0 0;padding:0;text-align:left;transform:none}
.tueren--gross .tuer:first-child{margin-top:clamp(20px,3vw,40px)}
.tueren--gross .tuer,.tueren--gross .tuer .tuer__sub{text-align:left}
.tueren--gross .tuer__bild{position:relative;z-index:1;display:block;margin:0 0 0 var(--x,0%);width:var(--b,50%)}
.tueren--gross .tuer__bild img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.06) brightness(.86);
  transition:filter .35s ease}
.tueren--gross .tuer__nr{position:absolute;top:0;left:max(var(--x,0%),0%);transform:translateY(-190%);margin:0}
.tueren--gross .tuer .gross--l{position:relative;z-index:3;margin:-.58em 0 0 var(--tx,8%);
  font-size:clamp(2rem,7.6vw,7.2rem);letter-spacing:.2em;line-height:.99}
.tueren--gross .tuer__sub,.tueren--gross .tuer .tuer__sub{margin:1em 0 0 var(--tx,8%);max-width:38ch}
.tueren--gross .tuer__strich{display:none}
/* Drüberfahren: kein Neon-Block mehr, das Bild bekommt Farbe, der Titel einen Pinselstrich */
.tueren--gross .tuer:hover,.tueren--gross .tuer:focus-visible{background:none;transform:none}
.tueren--gross .tuer:hover .gross,.tueren--gross .tuer:focus-visible .gross{color:var(--neon)}
.tueren--gross .tuer:hover .tuer__bild img,.tueren--gross .tuer:focus-visible .tuer__bild img{filter:none}
.tueren--gross .tuer:hover .tuer__sub,.tueren--gross .tuer:focus-visible .tuer__sub{text-decoration:underline;text-decoration-color:var(--neon);text-decoration-thickness:3px;text-underline-offset:4px}
/* Einzelne Türen: Breite, Lage, wo der Titel ansetzt */
.tueren--gross .tuer--a{--x:2%;--b:46%;--tx:22%}
.tueren--gross .tuer--b{--x:46%;--b:calc(54% + var(--innen));--tx:24%}
.tueren--gross .tuer--c{--x:10%;--b:46%;--tx:30%}
.tueren--gross .tuer--d{--x:38%;--b:calc(62% + var(--innen));--tx:0%}
.tueren--gross .tuer--e{--x:6%;--b:26%;--tx:16%}
/* Bücher: drei Cover als gestufte Collage (Vorlage: HUNTER & GOLD) */
.tueren--gross .tuer__bild--stapel,.tuer__bild--stapel{display:flex;align-items:flex-start}
.tuer__bild--stapel img,.tueren--gross .tuer__bild--stapel img{width:37%;flex:none;border:1px solid var(--grau-fein)}
.tuer__bild--stapel img+img{margin-left:-4%}
.tuer__bild--stapel img:nth-child(1){margin-top:9%}
.tuer__bild--stapel img:nth-child(2){margin-top:0;position:relative;z-index:2}
.tuer__bild--stapel img:nth-child(3){margin-top:15%}
@media (max-width:900px){
  .tueren--gross{--rand-aussen:calc(var(--innen) + clamp(20px,4vw,58px))}
  .tueren--gross .tuer{margin-top:clamp(52px,14vw,80px)}
  .tueren--gross .tuer .gross--l{font-size:clamp(1.9rem,10.4vw,3rem);letter-spacing:.14em;margin-top:-.55em}
  /* abwechselnd links und rechts bis an die Bildschirmkante */
  .tueren--gross .tuer--a,.tueren--gross .tuer--c,.tueren--gross .tuer--e{--x:calc(-1 * var(--rand-aussen));--b:calc(88% + var(--rand-aussen));--tx:6%}
  .tueren--gross .tuer--b,.tueren--gross .tuer--d{--x:12%;--b:calc(88% + var(--rand-aussen));--tx:0%}
  .tueren--gross .tuer--e{--b:58%;--x:0%}
  .tueren--gross .tuer--a{--x:0%;--b:92%}
  .tueren--gross .tuer__nr{transform:translateY(-170%)}
}
/* Handys: die Tür in Bildmitte bekommt Farbe statt Neon-Block */
@media (hover:none){
  .tueren--gross .tuer.im-blick{background:none}
  .tueren--gross .tuer.im-blick .gross{color:var(--neon)}
  .tueren--gross .tuer.im-blick .tuer__bild img{filter:none}
}

/* ── Über-Kopf, Runde 3 (26.10.): nach der Über-Seite der Vorlage ─────────────
   Freigestelltes Porträt in Schwarzweiß, der Name riesig davor (Neon auf dem
   dunklen Pullover), die zweite Zeile schneidet der Rand an. Ein offenes
   Neon-Dreieck liegt hinter dem Kopf — wie die Eule im Dreieck der Vorlage. */
.buehne--portraet{min-height:min(64vh,580px);display:flex;align-items:flex-end}
.blatt:has(.buehne--portraet) .marken{display:none}
.buehne--portraet .portraet{position:absolute;z-index:2;right:6%;bottom:-4%;height:100%;width:auto;max-width:none}
.portraet__dreieck{position:absolute;z-index:1;right:2%;top:-2%;width:min(44%,560px);height:88%;
  fill:none;stroke:var(--neon);stroke-width:4;stroke-linejoin:miter}
.buehne--portraet .buehne__zeilen{position:relative;z-index:4;margin:0 0 0 -.06em}
.buehne--portraet .z-anschnitt{margin-bottom:-.24em}
@media (max-width:900px){
  .buehne--portraet{min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .buehne--portraet .portraet{position:relative;order:1;right:auto;bottom:auto;height:auto;width:92%;margin:0 0 0 auto}
  .portraet__dreieck{right:-6%;top:2%;width:84%;height:66%}
  .buehne--portraet .buehne__zeilen{order:2;margin-top:-1.9em;font-size:clamp(2.4rem,12.4vw,9.6rem)}
  .buehne--portraet .z-anschnitt{margin-bottom:-.2em}
}

/* ── Lesungen-Kopf, Runde 3 (26.10.): nach Bildschirm 03 der Vorlage ─────────────
   Ein randloses Foto, die Buchstaben des Titels verteilt im Bild. Nicht zufällig:
   sie hängen an der Lichterkette des Zirkuszelts, folgen ihrem Bogen. */
.streu{--innen:clamp(22px,5vw,84px);position:relative;margin:clamp(26px,4vw,60px) calc(-1 * var(--innen)) clamp(28px,5vw,64px)}
/* Lesungen: Bild folgt direkt aufs Menü → der große Abstand unter dem Menü wäre doppelt (29.10.) */
@media (min-width:701px){.kopfzeile + .streu{margin-top:calc(-1 * clamp(46px,9vw,140px) + clamp(26px,4vw,60px))}}
.streu__bild{display:block;width:100%;height:auto}
.streu__wort{position:absolute;inset:0;margin:0;pointer-events:none}
.streu__b{position:absolute;left:var(--x);top:var(--y);transform:translateX(-50%);
  font-family:var(--sans);font-weight:400;font-size:clamp(1.7rem,6.8vw,6.6rem);line-height:1;color:var(--neon)}
@media (max-width:900px){
  .streu{margin-left:calc(-1 * (var(--innen) + clamp(20px,4vw,58px)));margin-right:calc(-1 * (var(--innen) + clamp(20px,4vw,58px)))}
  .streu__b{font-size:clamp(1.5rem,8vw,3rem)}
}

/* ── Videos, Runde 3 (26.10.): der Titel statt 14 × „Abspielen“ ───────────────
   Der Titel läuft über die Unterkante des Standbilds, das Zeichen ist ein kleines
   offenes Neon-Dreieck wie in der Vorlage. Die Zeile darunter steht auf dem Papier. */
.video{margin-bottom:clamp(70px,7.4vw,104px)}
.video__knopf{display:block}
.video__dreieck{position:absolute;z-index:2;left:clamp(12px,1.6vw,20px);top:clamp(12px,1.6vw,20px);
  width:clamp(20px,2.2vw,30px);height:auto;fill:none;stroke:var(--neon);stroke-width:1.6;transition:fill .2s}
.video:hover .video__dreieck,.video__knopf:focus-visible .video__dreieck{fill:var(--neon)}
.video__knopf .video__titel{position:absolute;z-index:2;left:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);bottom:-.52em;
  display:block;font-size:clamp(1.05rem,2.1vw,1.8rem);letter-spacing:.16em;line-height:1.04;color:var(--neon)}
.video__knopf .video__zeile,.video__knopf .mikro.video__zeile{position:absolute;left:clamp(12px,1.6vw,20px);right:0;top:calc(100% + clamp(30px,3.4vw,46px));
  display:block;margin:0;color:var(--grau);max-width:52ch}
@media (max-width:640px){
  .video__knopf .video__zeile,.video__knopf .mikro.video__zeile{display:block}
  .video__knopf .video__titel{font-size:clamp(1rem,5.4vw,1.4rem)}
}

/* ── Film-Kopf, Runde 3 (26.10.): gebaut wie Bildschirm 04 der Vorlage ──────────
   Fotoblock (Standbild aus Finns eigenem Trailer), ein leerer Rahmen versetzt dahinter,
   eine dünne Linie quer durch alles, der Titel läuft vom Papier aufs Holz. */
.kopf-film{position:relative;margin-top:clamp(40px,6vw,90px);min-height:clamp(320px,40vw,600px)}
.kopf-film__bild{position:relative;z-index:2;width:58%;margin-left:36%}
.kopf-film__bild img{display:block;width:100%;height:auto}
.kopf-film__rahmen{position:absolute;z-index:1;left:30%;top:clamp(30px,4vw,60px);width:52%;aspect-ratio:16/9;border:1px solid var(--grau-fein)}
.kopf-film__linie{position:absolute;z-index:3;left:24%;top:-6%;width:1px;height:118%;background:var(--tinte);transform:rotate(24deg);transform-origin:top center}
.kopf-film__titel{position:absolute;z-index:4;left:0;top:44%;margin:0;font-size:clamp(3rem,13vw,12rem);letter-spacing:.24em;line-height:.9;color:var(--neon)}
.kopf-film__text{position:relative;z-index:4;margin:clamp(22px,3vw,40px) 0 0 36%;max-width:44ch}
@media (max-width:900px){
  .kopf-film{min-height:0;display:flex;flex-direction:column}
  .kopf-film__bild{order:1;width:calc(100% + clamp(22px,5vw,84px) + clamp(20px,4vw,58px));margin-left:0;margin-right:calc(-1 * (clamp(22px,5vw,84px) + clamp(20px,4vw,58px)))}
  .kopf-film__rahmen{display:none}
  .kopf-film__linie{left:18%;top:-4%;height:70%}
  .kopf-film__titel{position:relative;order:2;top:auto;margin-top:-.5em;font-size:clamp(3rem,20vw,6rem)}
  .kopf-film__text{order:3;margin-left:0}
}

/* ── Theater-Kopf, Runde 3: randloses Bühnenfoto, Titel läuft über die Unterkante ── */
.kopf-band{--innen:clamp(22px,5vw,84px);position:relative;margin:0 calc(-1 * var(--innen))}
.kopf-band__bild{display:block;width:100%;height:auto}
.kopf-band__titel{position:relative;z-index:2;margin:-.56em 0 0 var(--innen);font-size:clamp(2.6rem,10vw,9rem);letter-spacing:.24em;line-height:1;color:var(--neon)}
@media (max-width:900px){
  .kopf-band{margin:0 calc(-1 * (var(--innen) + clamp(20px,4vw,58px)))}
  .kopf-band__titel{margin-left:calc(var(--innen) + clamp(20px,4vw,58px));font-size:clamp(2.4rem,13vw,4.4rem);letter-spacing:.16em}
}
/* Videos: Standbilder dunkler, damit die Neon-Titel tragen; Titel kleiner, lange auf zwei Zeilen */
.video img{filter:grayscale(1) brightness(.56) contrast(1.05)}
.video:hover img{filter:grayscale(.2) brightness(.72)}
.video__knopf .video__titel{font-size:clamp(.98rem,1.6vw,1.45rem);letter-spacing:.14em}
.gross-buch .video__knopf .video__titel{font-size:clamp(1.2rem,2.4vw,2.1rem)}
@media (max-width:640px){.video__knopf .video__titel{font-size:clamp(.9rem,4.4vw,1.16rem);letter-spacing:.12em}}

/* ── Bücher-Kopf, Runde 3 (26.10.): nach Bildschirm 02 der Vorlage („HUNTER & GOLD“) ──
   Fünf Cover von klein bis groß als gestufte Collage, schwarzweiß, der Titel läuft quer durch. */
.kopf-stapel{position:relative;margin-top:clamp(40px,6vw,90px)}
.kopf-stapel__bilder{display:flex;align-items:flex-start;width:min(100%,1120px)}
.kopf-stapel__bilder img{flex:none;width:21.5%;height:auto;margin:var(--y,0) 0 0 -2.6%;border:1px solid var(--grau-fein);
  filter:grayscale(1) contrast(1.06) brightness(.9)}
.kopf-stapel__bilder img:first-child{margin-left:0}
.kopf-stapel__bilder img:nth-child(odd){position:relative;z-index:1}
.kopf-stapel__titel{position:absolute;z-index:3;left:-.04em;top:36%;margin:0;font-size:clamp(3rem,12.4vw,11.5rem);
  letter-spacing:.22em;line-height:.9;color:var(--neon)}
@media (max-width:900px){
  .kopf-stapel__bilder img{width:27%}
  .kopf-stapel__bilder img:nth-child(5){display:none}
  .kopf-stapel__titel{top:34%;font-size:clamp(2.6rem,15vw,5rem);letter-spacing:.14em}
}

/* ── Neues als Kartenwand, Runde 3 (26.10.): nach Bildschirm 06 der Vorlage ──────
   Drei versetzte Spalten, Bilder schwarzweiß und dunkel, der Neon-Titel läuft über die
   Unterkante. Die neueste Meldung steht in einem leeren Rahmen mit gedrehtem Wort. */
.kartenwand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(56px,6vw,96px) clamp(24px,3.4vw,52px);
  margin-top:clamp(40px,6vw,80px);align-items:start}
.karte{position:relative}
.karte:nth-child(3n+2){margin-top:clamp(40px,7vw,120px)}
.karte:nth-child(3n+3){margin-top:clamp(16px,3vw,48px)}
.karte__zeile{margin-bottom:10px}
.karte__bild img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;
  filter:grayscale(1) brightness(.62) contrast(1.05);transition:filter .3s}
.karte:hover .karte__bild img{filter:none}
.karte__titel{position:relative;z-index:2;margin:-.6em 0 0 .45em;font-size:clamp(1.05rem,1.7vw,1.6rem);
  letter-spacing:.14em;line-height:1.06;color:var(--neon)}
.karte__text{margin-top:.9em;font-size:.95rem}
.karte__text p{margin:0}
.karte:first-child::before{content:"";position:absolute;inset:calc(-1 * clamp(14px,1.8vw,24px));border:1px solid var(--tinte);pointer-events:none}
.karte:first-child::after{content:"Neu";position:absolute;right:calc(-1 * clamp(14px,1.8vw,24px) - 1.9em);top:0;
  writing-mode:vertical-rl;font-family:var(--sans);font-size:.5625rem;letter-spacing:.36em;text-transform:uppercase;color:var(--tinte)}
@media (max-width:900px){
  .kartenwand{grid-template-columns:minmax(0,1fr)}
  .karte:nth-child(3n+2),.karte:nth-child(3n+3){margin-top:0}
  .karte:nth-child(even){margin-left:12%}
  .karte__titel{font-size:clamp(1.05rem,5.6vw,1.5rem)}
  .karte:first-child::after{right:calc(-1 * clamp(14px,1.8vw,24px) + 4px);writing-mode:horizontal-tb;top:calc(-1 * clamp(14px,1.8vw,24px) - 1.8em)}
}

/* ── Presse-Kopf, Runde 3 (26.10.): Treppen-Schrift + Wort im schwarzen Kasten (Vorlage 01) ── */
.kopf-treppe{display:flex;align-items:flex-start;gap:clamp(24px,5vw,90px);margin-top:clamp(40px,6vw,90px);flex-wrap:wrap}
.kopf-treppe__titel{margin:0;font-size:clamp(3rem,13vw,12rem);letter-spacing:.22em;line-height:.9;color:var(--neon)}
.treppe{margin:clamp(6px,1.4vw,22px) 0 0;font-family:var(--sans);font-size:.6875rem;letter-spacing:.34em;text-transform:uppercase;line-height:2.1;color:var(--tinte)}
.treppe span{display:block;margin-left:calc(var(--s) * 1.5em)}
.treppe__kasten{display:inline-block!important;background:var(--tinte);color:#fff;padding:.15em .5em;margin-top:.2em}
@media (max-width:900px){.kopf-treppe{display:block}.treppe{margin-top:clamp(16px,4vw,24px)}.kopf-treppe__titel{font-size:clamp(2.8rem,17vw,5rem);letter-spacing:.14em}}

/* ── Anfragen-Kopf, Runde 3: zwei Wege wie die Kontaktseite der Vorlage (04) ── */
.kopf-dialog{position:relative;display:grid;grid-template-columns:1fr minmax(0,34%) 1fr;align-items:center;margin-top:clamp(40px,6vw,90px)}
.kopf-dialog__bild{grid-column:2;grid-row:1}
.kopf-dialog__bild img{display:block;width:100%;height:auto;filter:grayscale(1) brightness(.62) contrast(1.06)}
.kopf-dialog__links,.kopf-dialog__rechts{position:relative;z-index:2;grid-row:1}
.kopf-dialog__links{grid-column:1/3;align-self:start;margin-top:8%;max-width:62%}
.kopf-dialog__rechts{grid-column:2/4;justify-self:end;align-self:end;margin-bottom:10%;max-width:62%;text-align:right}
.kopf-dialog__satz{margin:0 0 clamp(16px,2vw,24px);font-size:clamp(1.9rem,5.6vw,5rem);letter-spacing:.22em;line-height:1.02;color:var(--neon)}
@media (max-width:900px){
  .kopf-dialog{display:flex;flex-direction:column}
  .kopf-dialog__bild{order:1;width:72%;margin:0 auto}
  .kopf-dialog__links{order:2;max-width:none;margin-top:-1.4em}
  .kopf-dialog__rechts{order:3;max-width:none;margin:clamp(24px,6vw,40px) 0 0}
  .kopf-dialog__satz{font-size:clamp(1.8rem,10vw,3rem);letter-spacing:.14em}
}

/* ── huckepack-Kopf, Runde 3: ein Cover nimmt das nächste huckepack ── */
.kopf-huckepack{position:relative;margin-top:clamp(40px,6vw,90px);height:clamp(300px,42vw,560px)}
.kopf-huckepack__bilder img{position:absolute;width:clamp(96px,13vw,170px);height:auto;border:1px solid var(--grau-fein);
  filter:grayscale(1) contrast(1.06) brightness(.9)}
.kopf-huckepack__bilder img:nth-child(1){left:50%;bottom:0;z-index:1}
.kopf-huckepack__bilder img:nth-child(2){left:calc(50% + clamp(96px,13vw,170px) * .7);bottom:calc(clamp(96px,13vw,170px) * 1.4 * .72);z-index:2}
.kopf-huckepack__bilder img:nth-child(3){left:calc(50% + clamp(96px,13vw,170px) * 1.4);bottom:calc(clamp(96px,13vw,170px) * 1.4 * 1.44);z-index:3}
.kopf-huckepack__titel{position:absolute;z-index:4;left:-.04em;bottom:clamp(10px,2vw,30px);margin:0;font-size:clamp(2.2rem,8vw,7.4rem);letter-spacing:.2em;line-height:1;color:var(--neon)}
@media (max-width:900px){
  .kopf-huckepack{height:clamp(300px,90vw,420px)}
  .kopf-huckepack__bilder img{width:26%}
  .kopf-huckepack__bilder img:nth-child(1){left:30%}
  .kopf-huckepack__bilder img:nth-child(2){left:calc(30% + 26% * .7);bottom:calc(26vw * 1.4 * .72 * .86)}
  .kopf-huckepack__bilder img:nth-child(3){left:calc(30% + 26% * 1.4);bottom:calc(26vw * 1.4 * 1.44 * .86)}
  .kopf-huckepack__titel{font-size:clamp(2rem,11vw,3.2rem);letter-spacing:.12em}
}

/* ── Newsletter-Kopf, Runde 3: das Wort wird durchgestrichen, Finn korrigiert ── */
.kopf-strich{margin-top:clamp(40px,6vw,90px);font-weight:400}
.kopf-strich__alt{display:block;font-size:clamp(2rem,6.4vw,6rem);letter-spacing:.22em;color:var(--grau-fein);text-decoration:none;
  background:linear-gradient(var(--tinte),var(--tinte)) no-repeat 0 55%/100% 2px;width:fit-content}
.kopf-strich .korrektur{display:inline-block;margin:clamp(10px,1.4vw,18px) 0 0 0}
.kopf-strich__neu{display:block;margin-top:.1em;font-size:clamp(3rem,13vw,12rem);letter-spacing:.22em;line-height:.9;color:var(--neon)}

/* ── Lesungen: 2800 als Ziffern-Held über einem großen Foto ── */
.ziffer{display:flex;flex-direction:column;min-height:0}
.ziffer__zahl{order:1;position:relative;z-index:3;padding-top:0}
.ziffer__foto{order:2;position:relative;right:auto;top:auto;z-index:2;width:auto;
  margin:-.42em calc(-1 * clamp(22px,5vw,84px)) 0;font-size:clamp(5rem,27vw,24rem)}
.ziffer__foto img{width:100%;height:auto;filter:grayscale(1) brightness(.85)}
.ziffer__zeile{order:3}
@media (max-width:900px){.ziffer__foto{margin-left:calc(-1 * (clamp(22px,5vw,84px) + clamp(20px,4vw,58px)));margin-right:calc(-1 * (clamp(22px,5vw,84px) + clamp(20px,4vw,58px)))}}

/* ── Altersseiten: der Titel läuft quer durch die Cover der Gruppe (kleiner als bei Bücher) ── */
.kopf-stapel--klein{margin-top:clamp(14px,2vw,24px)}
.kopf-stapel--klein .kopf-stapel__bilder{width:min(100%,760px)}
.kopf-stapel--klein .kopf-stapel__bilder img{width:24%}
.kopf-stapel--klein .kopf-stapel__titel{font-size:clamp(2.4rem,8.4vw,7.6rem);top:30%}
@media (max-width:900px){.kopf-stapel--klein .kopf-stapel__bilder img{width:27%}.kopf-stapel--klein .kopf-stapel__titel{font-size:clamp(2.2rem,12vw,4rem)}}
/* Nachbesserung Runde 3: Wörter nie mitten im Wort trennen, Abstände */
.kopf-dialog__satz,.kopf-stapel__titel,.kopf-huckepack__titel,.kopf-treppe__titel,.kopf-strich__neu{word-break:keep-all;overflow-wrap:normal;hyphens:none}
.kopf-dialog__satz{font-size:clamp(1.8rem,4.6vw,4.2rem)}
.kopf-dialog__links,.kopf-dialog__rechts{max-width:72%}
.kopf-treppe + .vorspann{margin-top:clamp(18px,2.6vw,30px)}
@media (max-width:900px){.kopf-dialog__links,.kopf-dialog__rechts{max-width:none}}
/* Neon trägt nur auf Dunklem: Cover im Kopf dunkler; lange Namen am Handy kleiner, damit nichts abgeschnitten wird */
.kopf-stapel__bilder img{filter:grayscale(1) brightness(.6) contrast(1.12)}
@media (max-width:900px){.kopf-stapel--klein .kopf-stapel__titel{font-size:clamp(1.8rem,8.6vw,3rem);letter-spacing:.1em;top:24%}}
.kopf-stapel--klein .kopf-stapel__titel--kurz{font-size:clamp(3rem,14vw,12rem)}
@media (max-width:900px){.kopf-stapel--klein .kopf-stapel__titel--kurz{font-size:clamp(2.8rem,19vw,5rem);letter-spacing:.2em}}

/* Runde 4 (Finn, 26.10.): „die überschriften über den videos und stücken könnten sogar noch etwas größer“ */
.video{margin-bottom:clamp(84px,8.4vw,120px)}
.video__knopf .video__titel{font-size:clamp(1.3rem,2.5vw,2.4rem);letter-spacing:.12em;line-height:1.02;bottom:-.5em}
.gross-buch .video__knopf .video__titel{font-size:clamp(1.5rem,3.2vw,3rem)}
.video__knopf .video__zeile,.video__knopf .mikro.video__zeile{top:calc(100% + clamp(40px,4.2vw,60px))}
@media (max-width:640px){.video__knopf .video__titel{font-size:clamp(1.15rem,6vw,1.6rem);letter-spacing:.1em}}
/* Stückeliste: Titel größer und in Tinte, Uraufführung bleibt Mikro */
.stuecke li > span:first-child{font-size:clamp(1.1rem,1.7vw,1.5rem);letter-spacing:.1em!important;font-weight:400!important;text-transform:uppercase}

/* ── Über-Kopf, Runde 4 (26.10.): neues Profil vom Ostsee-Shooting ─────────────
   Das Gesicht bleibt frei, der Name kreuzt Bart und Schulter. Das Porträt ragt rechts
   über den Blattrand hinaus (wie das Startbild). */
.buehne--portraet{--innen:clamp(22px,5vw,84px);--grund:clamp(20px,4vw,58px);
  min-height:min(80vh,720px);overflow:visible}
.buehne--portraet .portraet{right:calc(-1 * (var(--innen) + var(--grund) * .55));top:0;bottom:auto;height:90%;width:auto}
.portraet__dreieck{right:4%;top:2%;width:min(40%,520px);height:76%}
.buehne--portraet .buehne__zeilen{font-size:clamp(3rem,12.6vw,11.6rem)}
@media (max-width:900px){
  .buehne--portraet{min-height:0;overflow:visible}
  .buehne--portraet .portraet{position:relative;order:1;right:auto;top:auto;height:auto;
    width:calc(100% + var(--innen) + var(--grund));max-width:none;margin:0 calc(-1 * (var(--innen) + var(--grund))) 0 0}
  .portraet__dreieck{right:-8%;top:0;width:76%;height:62%}
  .buehne--portraet .buehne__zeilen{order:2;margin-top:-1.15em;font-size:clamp(2.4rem,12.8vw,9.6rem)}
  .buehne--portraet .z-anschnitt{margin-bottom:0}
}
.buehne--portraet{min-height:min(68vh,620px)}
.buehne--portraet .portraet{height:94%}
.portraet__dreieck{right:auto;left:42%;top:-4%;width:min(46%,600px);height:80%}
@media (max-width:900px){.portraet__dreieck{left:auto;right:-8%;top:0;width:76%;height:62%}}
@media (max-width:900px){.buehne--portraet{min-height:0}.buehne--portraet .portraet{height:auto}}

/* ── Runde 4 (Finn, 26.10.): kein Cover-Muster mehr, Farbe erlaubt, Presse und huckepack voller ── */

/* Presse-Kopf: großes Porträt rechts über den Blattrand, Titel quer darüber, Treppe darunter */
.kopf-presse{--innen:clamp(22px,5vw,84px);--grund:clamp(20px,4vw,58px);position:relative;margin-top:clamp(30px,4vw,60px);
  min-height:clamp(380px,46vw,700px)}
.kopf-presse__bild{position:absolute;z-index:1;top:0;right:calc(-1 * (var(--innen) + var(--grund) * .55));width:calc(66% + var(--innen))}
.kopf-presse__bild img{display:block;width:100%;height:auto}
.kopf-presse__titel{position:relative;z-index:3;margin:0;padding-top:clamp(120px,15vw,240px);font-size:clamp(3rem,13vw,12rem);
  letter-spacing:.22em;line-height:.9;color:var(--neon)}
.kopf-presse .treppe{position:relative;z-index:3;margin-top:clamp(20px,3vw,40px)}
@media (max-width:900px){
  .kopf-presse{min-height:0;display:flex;flex-direction:column}
  .kopf-presse__bild{position:relative;order:1;right:auto;width:calc(100% + 2 * (var(--innen) + var(--grund)));margin-left:calc(-1 * (var(--innen) + var(--grund)))}
  .kopf-presse__titel{order:2;padding-top:0;margin-top:-.62em;font-size:clamp(2.8rem,17vw,5rem);letter-spacing:.14em}
  .kopf-presse .treppe{order:3}
}
/* Pressefotos: ungleich groß, wie ausgelegte Abzüge */
.pressefotos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);align-items:start;margin-top:clamp(18px,2.4vw,30px)}
.pressefotos a{display:block;text-decoration:none;color:inherit}
.pressefotos img{display:block;width:100%;height:auto;border:1px solid var(--grau-fein)}
.pressefotos .mikro{display:block;margin-top:10px}
.pressefotos a:nth-child(1){grid-column:1/4}
.pressefotos a:nth-child(2){grid-column:4/6;margin-top:clamp(30px,5vw,80px)}
.pressefotos a:nth-child(3){grid-column:1/3;margin-top:clamp(10px,2vw,30px)}
.pressefotos a:nth-child(4){grid-column:3/5}
.pressefotos a:nth-child(5){grid-column:5/7;margin-top:clamp(40px,6vw,100px)}
@media (max-width:900px){.pressefotos{grid-template-columns:1fr 1fr}.pressefotos a:nth-child(n){grid-column:auto;margin-top:0}.pressefotos a:nth-child(1){grid-column:1/3}}

/* huckepack-Kopf: randloses Foto in Farbe, der Titel steht im Himmel */
.kopf-himmel{--innen:clamp(22px,5vw,84px);position:relative;margin:clamp(30px,4vw,60px) calc(-1 * var(--innen)) clamp(30px,4vw,56px)}
.kopf-himmel__bild{display:block;width:100%;height:auto}
.kopf-himmel__titel{position:absolute;z-index:2;right:5%;top:12%;margin:0;font-size:clamp(2.4rem,9.4vw,9rem);letter-spacing:.2em;line-height:1;color:var(--neon)}
@media (max-width:900px){
  .kopf-himmel{margin-left:calc(-1 * (var(--innen) + clamp(20px,4vw,58px)));margin-right:calc(-1 * (var(--innen) + clamp(20px,4vw,58px)))}
  .kopf-himmel__titel{right:4%;top:8%;font-size:clamp(1.9rem,10.4vw,3.4rem);letter-spacing:.12em}
}

/* Bücher-Kopf: Cover in Farbe, ungleich groß, frei verteilt; Titel kreuzt die dunklen Cover */
.kopf-buecher{position:relative;height:clamp(340px,40vw,600px);margin-top:clamp(30px,4vw,60px)}
.kb{position:absolute;height:auto;border:1px solid var(--grau-fein);box-shadow:none}
.kb--1{right:7%;top:0;width:28%;z-index:2}
.kb--2{left:3%;top:20%;width:17%;z-index:1}
.kb--3{left:26%;top:0;width:10%;z-index:1}
.kb--4{left:50%;top:50%;width:12%;z-index:1}
.kb--5{right:0;top:56%;width:11%;z-index:3}
.kopf-buecher__titel{position:relative;z-index:4;margin:calc(-1 * clamp(180px,20vw,300px)) 0 0;font-size:clamp(3rem,12.6vw,11.6rem);
  letter-spacing:.22em;line-height:.9;color:var(--neon)}
@media (max-width:900px){
  .kopf-buecher{height:clamp(300px,92vw,460px)}
  .kb--1{right:0;width:52%}.kb--2{left:0;top:26%;width:34%}.kb--3{left:30%;width:20%}.kb--4{left:22%;top:62%;width:24%}.kb--5{display:none}
  .kopf-buecher__titel{margin-top:-1.6em;font-size:clamp(2.6rem,15vw,5rem);letter-spacing:.14em}
}

/* Altersseiten: EIN Bild (Cover in Farbe oder Bühnenfoto), der Titel läuft hinein */
.kopf-einzel{display:flex;align-items:flex-end;margin-top:clamp(14px,2vw,24px)}
.kopf-einzel__titel{position:relative;z-index:3;flex:none;margin:0 0 clamp(18px,3vw,48px);font-size:var(--fs,9vw);
  letter-spacing:.2em;line-height:.92;color:var(--neon);white-space:nowrap}
.kopf-einzel__bild{position:relative;z-index:1;flex:none;width:clamp(150px,21vw,290px);height:auto;margin-left:clamp(-140px,-7vw,-40px);border:1px solid var(--grau-fein)}
.kopf-einzel__bild--foto{width:clamp(280px,44vw,640px);border:0}
@media (max-width:900px){
  .kopf-einzel{flex-direction:column;align-items:flex-start}
  .kopf-einzel__bild{order:1;margin:0 0 0 auto;width:52%}
  .kopf-einzel__bild--foto{width:calc(100% + clamp(22px,5vw,84px) + clamp(20px,4vw,58px));margin-right:calc(-1 * (clamp(22px,5vw,84px) + clamp(20px,4vw,58px)))}
  .kopf-einzel__titel{order:2;margin:-.8em 0 0;font-size:min(var(--fs,9vw) * 1.7, 15vw);letter-spacing:.12em;white-space:normal}
}
@media (max-width:900px){.kopf-einzel__titel{font-size:min(calc(var(--fs,9vw) * 1.35), 14vw);letter-spacing:.08em}}
/* Video-Titel: nie mitten im Wort umbrechen, lange deutsche Wörter mit Trennstrich */
.video__knopf .video__titel{font-size:clamp(1.2rem,2.1vw,2rem);overflow-wrap:normal;word-break:normal;-webkit-hyphens:auto;hyphens:auto}
.gross-buch .video__knopf .video__titel{font-size:clamp(1.4rem,2.8vw,2.7rem)}
/* Pressefotos: das Hochformat steht rechts über zwei Reihen, kein Loch daneben */
.pressefotos{grid-template-columns:repeat(12,minmax(0,1fr))}
.pressefotos a:nth-child(1){grid-column:1/8;grid-row:1;margin-top:0}
.pressefotos a:nth-child(2){grid-column:8/13;grid-row:1/3;margin-top:clamp(30px,5vw,80px)}
.pressefotos a:nth-child(3){grid-column:2/7;grid-row:2;margin-top:clamp(10px,2vw,30px)}
.pressefotos a:nth-child(4){grid-column:1/7;grid-row:3;margin-top:clamp(20px,3vw,40px)}
.pressefotos a:nth-child(5){grid-column:7/13;grid-row:3;margin-top:clamp(60px,8vw,130px)}
@media (max-width:900px){.pressefotos{grid-template-columns:1fr 1fr}.pressefotos a:nth-child(n){grid-column:auto;grid-row:auto;margin-top:0}.pressefotos a:nth-child(1),.pressefotos a:nth-child(5){grid-column:1/3}}

/* Über-Kopf, Runde 5 (26.10.): Finns Profil-Favorit blickt nach rechts, also steht er links und schaut in die Seite */
.buehne--portraet-links .portraet{right:auto;left:calc(-1 * (var(--innen) + var(--grund) * .55))}
.buehne--portraet-links .portraet__dreieck{left:6%;right:auto;top:-6%;width:min(44%,560px);height:84%}
.buehne--portraet-links .buehne__zeilen{margin-left:auto;text-align:right;margin-right:-.06em}
@media (max-width:900px){
  .buehne--portraet-links .portraet{margin:0 0 0 calc(-1 * (var(--innen) + var(--grund)));width:calc(100% + var(--innen) + var(--grund))}
  .buehne--portraet-links .portraet__dreieck{left:-6%;right:auto;top:0;width:76%;height:62%}
  .buehne--portraet-links .buehne__zeilen{text-align:left;margin-left:0}
}
/* Pressefotos, Runde 5: zwei Hochformate, vier Querformate */
.pressefotos a:nth-child(1){grid-column:1/8;grid-row:1;margin-top:0}
.pressefotos a:nth-child(2){grid-column:8/13;grid-row:1/3;margin-top:clamp(30px,5vw,80px)}
.pressefotos a:nth-child(3){grid-column:2/8;grid-row:2;margin-top:clamp(10px,2vw,30px)}
.pressefotos a:nth-child(4){grid-column:1/7;grid-row:3;margin-top:clamp(20px,3vw,40px)}
.pressefotos a:nth-child(5){grid-column:8/12;grid-row:3/5;margin-top:clamp(40px,6vw,100px)}
.pressefotos a:nth-child(6){grid-column:1/7;grid-row:4;margin-top:clamp(20px,3vw,40px)}
@media (max-width:900px){.pressefotos a:nth-child(n){grid-column:auto;grid-row:auto;margin-top:0}.pressefotos a:nth-child(1),.pressefotos a:nth-child(6){grid-column:1/3}}

/* Pressefotos mit Dita (28.10.): ruhiges Raster nach den ungleich gelegten Porträts, alle quer */
.pressefotos-duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(18px,2.4vw,30px)}
.pressefotos-duo a{display:block;text-decoration:none;color:inherit}
.pressefotos-duo img{display:block;width:100%;height:auto;border:1px solid var(--grau-fein)}
.pressefotos-duo .mikro{display:block;margin-top:8px}
.pressefotos-duo a:hover img,.pressefotos-duo a:focus-visible img{outline:3px solid var(--neon);outline-offset:-3px}
@media (max-width:900px){.pressefotos-duo{grid-template-columns:1fr 1fr}}

/* 28.10. (Finn): Bildwelten auf /presse/ größer und unbeschnitten, ohne Versatz */
.regalgitter--welten{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));align-items:start}
.regalgitter--welten a:nth-child(3n+2){margin-top:0}
.regalgitter--welten img{aspect-ratio:auto;height:auto;object-fit:contain}

/* ══ Anfrage-Seite (28.10., Finn): Bild groß, Einladung, Fragen nacheinander, Praktisches unten ══ */
.anfrage__titel span{display:block}
.anfrage__zwei{padding-left:clamp(36px,14vw,260px)}
.anfrage__zeile{margin-bottom:clamp(28px,5vw,70px)}
.band--anfrage{height:clamp(260px,46vw,780px)}
.band--anfrage img{object-position:50% 55%}
.anfrage__einladung{max-width:40rem;margin:clamp(30px,6vw,90px) 0 clamp(36px,6vw,80px)}
.anfrage__lust{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.38;margin:.5em 0 .8em}
.anfrage__leise{color:var(--grau);font-size:1rem}
/* Fragen */
.formular--schritte{max-width:54rem;gap:clamp(28px,4vw,48px);grid-template-columns:minmax(0,1fr)}
.formular--schritte > *{grid-column:1 / -1}
.schritt{border:0;padding:0;margin:0;min-width:0;display:grid;gap:clamp(16px,2.2vw,24px)}
.schritt[hidden]{display:none}
.schritt__frage{font-family:var(--sans);font-weight:500;text-transform:uppercase;color:var(--neon);
  font-size:clamp(1.5rem,3.6vw,3rem);letter-spacing:.24em;line-height:1.05;padding:0;margin-bottom:clamp(14px,2vw,24px)}
.schritt__frage:focus{outline:0}
.schritt__hilfe{font-family:var(--serif);color:var(--grau);max-width:44ch}
.schritt__unter{margin-top:clamp(10px,1.6vw,18px)}
.schritt__feld{display:grid;gap:6px;max-width:34rem}
.schritte__stand:empty{display:none}
.schritte__nav{display:flex;gap:12px;flex-wrap:wrap}
.schritte__nav[hidden],.schritte__nav [hidden],.schritte__ab[hidden]{display:none}
.knopf--leise{border-color:var(--grau-fein);color:var(--grau)}
/* Täfelchen: das Häkchen ist das ganze Feld */
.taefelchen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px}
.taefelchen--klein{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
.tafel{position:relative;display:grid;gap:4px;align-content:start;border:1px solid var(--grau-fein);
  padding:14px 16px 16px;cursor:pointer;background:var(--papier);transition:border-color .15s,background .15s}
.tafel[hidden]{display:none}
.tafel input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tafel__titel{font-family:var(--sans);font-size:.95rem;letter-spacing:.06em;line-height:1.3}
.tafel__zeile{font-family:var(--sans);font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grau);line-height:1.6}
.tafel:hover{border-color:var(--tinte)}
.tafel:has(input:focus-visible){outline:2px solid var(--tinte);outline-offset:2px}
.tafel:has(input:checked){background:var(--neon);border-color:var(--tinte)}
.tafel:has(input:checked) .tafel__zeile{color:var(--tinte)}
.taefelchen--klein .tafel{padding:10px 12px 12px}
.taefelchen--klein .tafel__titel{font-size:.85rem}
/* Zusammenfassung vor dem Abschicken */
.schritte__zusammen{border-top:1px solid var(--tinte);padding-top:16px;margin-top:8px}
.schritte__zusammen dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-family:var(--serif)}
.schritte__zusammen dt{font-family:var(--sans);font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--grau);padding-top:.35em}
/* Unten auf Neon: wie eine Lesung zustande kommt */
.anfrage__wie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,4vw,56px);margin-top:clamp(24px,4vw,48px)}
.anfrage__wie .mikro{margin-bottom:10px}
.anfrage__wie .lese{max-width:none!important;margin-top:0!important}

/* ══ Presse: Pressekit-Block · Über: Bios zum Aufklappen (28.10.) ══ */
.pressekit{margin:clamp(30px,5vw,70px) 0 clamp(10px,2vw,20px);display:grid;gap:12px;max-width:44rem}
.pressekit__inhalt{color:var(--grau);font-size:1rem}
.bio--klapp{border-top:1px solid var(--tinte);padding:clamp(14px,2vw,20px) 0}
.bio--klapp + .bio--klapp{margin-top:clamp(10px,1.6vw,16px)}
.bio--klapp summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bio--klapp summary::-webkit-details-marker{display:none}
.bio--klapp summary .mikro--tinte::after{content:" +";color:var(--grau)}
.bio--klapp[open] summary .mikro--tinte::after{content:" –"}
.bio--klapp .lese{margin-top:clamp(12px,1.8vw,18px)}
/* Anfrage-Kopf (28.10.): Foto schwarzweiß, Titel kreuzt die Unterkante */
.kopf-band--anfrage{margin-top:clamp(24px,4vw,56px)}
.kopf-band--anfrage .kopf-band__bild{filter:grayscale(1) contrast(1.08) brightness(.82)}
.kopf-band--anfrage .kopf-band__titel{font-size:clamp(2.2rem,7.4vw,7rem);margin-top:-.635em}
.kopf-band--anfrage + .anfrage__zeile{margin:clamp(14px,2vw,24px) 0 0}
.anfrage__einladung{margin-top:clamp(60px,9vw,140px)}
/* Über-Kopf (28.10.): Kanal-Bild so groß wie möglich, Name kreuzt die Unterkante */
.kopf-band--ueber{margin-top:clamp(20px,3vw,44px)}
.kopf-band--ueber .kopf-band__titel{font-size:clamp(2.4rem,8.6vw,8.4rem);letter-spacing:.2em;line-height:.99;margin-top:-1.08em}
.kopf-band--ueber .kopf-band__titel span{display:block}
.kopf-band--ueber .kopf-band__titel span + span{padding-left:.9em}
.kopf-band--anfrage{margin-top:clamp(10px,2vw,28px)}
/* Bios auf /ueber/ (28.10.): Kurz · Mittel · Lang als Reiter, ohne JavaScript */
.laengen{max-width:48rem}
.laengen__wahl{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.laengen__leiste{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--tinte);margin-bottom:clamp(18px,2.6vw,28px)}
.laengen__reiter{display:grid;gap:2px;padding:12px 22px 12px 0;margin-right:22px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.laengen__name{font-family:var(--sans);text-transform:uppercase;letter-spacing:.24em;font-size:.85rem}
.laengen__reiter:hover .laengen__name{color:var(--tinte);text-decoration:underline;text-underline-offset:4px}
.laengen__text{display:none}
#bio-kurz:checked ~ [data-laenge=kurz],#bio-mittel:checked ~ [data-laenge=mittel],#bio-lang:checked ~ [data-laenge=lang]{display:block}
#bio-kurz:checked ~ .laengen__leiste [for=bio-kurz],#bio-mittel:checked ~ .laengen__leiste [for=bio-mittel],#bio-lang:checked ~ .laengen__leiste [for=bio-lang]{border-bottom-color:var(--neon)}
#bio-kurz:checked ~ .laengen__leiste [for=bio-kurz] .laengen__name,#bio-mittel:checked ~ .laengen__leiste [for=bio-mittel] .laengen__name,#bio-lang:checked ~ .laengen__leiste [for=bio-lang] .laengen__name{box-shadow:inset 0 -.5em 0 var(--neon)}
.laengen__wahl:focus-visible ~ .laengen__leiste{outline:2px solid var(--tinte);outline-offset:4px}
.laengen__tipp{margin-top:14px}
/* Mehr Stimmen auf /ueber/ (28.10.): ausklappbar, ohne JavaScript */
.mehr-stimmen{margin-top:clamp(28px,4vw,50px)}
.mehr-stimmen summary{list-style:none;display:inline-block}
.mehr-stimmen summary::-webkit-details-marker{display:none}
.mehr-stimmen summary::after{content:" +"}
.mehr-stimmen[open] summary::after{content:" –"}
.mehr-stimmen__buch{margin:clamp(30px,4.4vw,54px) 0 clamp(14px,2vw,22px);padding-top:12px;border-top:1px solid var(--grau-fein);max-width:58ch}
/* Presse (28.10., Finns Auswahl): vier Porträts — zwei hoch, zwei quer, verschränkt; vier Duo-Bilder in 2 × 2 */
.pressefotos.pressefotos--vier a:nth-child(n){grid-row:auto;margin-top:0}
.pressefotos.pressefotos--vier a:nth-child(1){grid-column:1/6}
.pressefotos.pressefotos--vier a:nth-child(2){grid-column:6/13;margin-top:clamp(40px,6vw,110px)}
.pressefotos.pressefotos--vier a:nth-child(3){grid-column:1/8;margin-top:clamp(20px,3vw,40px)}
.pressefotos.pressefotos--vier a:nth-child(4){grid-column:8/12;margin-top:clamp(-120px,-8vw,-40px)}
.pressefotos-duo.pressefotos-duo--vier{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.pressefotos.pressefotos--vier a:nth-child(n){grid-column:auto;margin-top:0}.pressefotos.pressefotos--vier a:nth-child(2),.pressefotos.pressefotos--vier a:nth-child(3){grid-column:1/3}}