/* ============================================================
   Martin Sonneborn — One-Pager (Editorial Broadsheet, Foto-Hero)
   Built on the Sonneborn Design System tokens (styles.css).
   Newsprint paper + agitprop red + Anton poster type; the hero is a
   full-bleed EU-Parliament photo under a dark scrim — the photo is
   framed (zoom-pan) so text never sits on the person.
   ============================================================ */

/* Marken-Rot auf dunklem Grund: --red-500 (#981436) erreicht auf #0e0d0c nur
   2,30:1. Dieser Ton ist derselbe Farbton, nur hell genug für 5,3:1. Überall
   dort benutzen, wo rote SCHRIFT auf Schwarz steht — nicht für Flächen. */
:root{--red-on-dark:#d06279;
  /* Hoehe des gepinnten EU-Bandes. Steht als Token hier, weil das JS sie fuer
     die Fusslinie des Megafons braucht — beides muss denselben Wert benutzen. */
  --eu-pinned-h:56px;
  /* Der Megafon-Gag hat bewusst eigene Zeiten: der Auftritt darf laenger sein als
     UI-Bewegung (AUDIT: „Marketing / explanatory can be longer"), der Abgang muss
     kurz sein, weil er mit dem Aufklappen des Bandes zusammenfaellt. Benannt statt
     als nackte Zahlen verstreut — vorher standen 550ms, 500ms und 220ms an drei
     Stellen ohne erkennbaren Zusammenhang. */
  --dur-gag-in:550ms;
  --dur-gag-out:220ms}

/* ---------- FORMREGEL (eine pro Rolle, keine Ausnahmen ausser einer) ----------
   Das Designsystem vergibt die Radien nach Rolle (tokens/spacing.css):
     Flaechen, Buttons, Bilder .... 0        „posters, stamps", hart wie Siebdruck
     Tags / Chips ................. pill     Token sagt woertlich „tags only"
     Rundknoepfe .................. circle
   Einzige bewusste Ausnahme: der Marker-Block hinter SONNEBORN traegt
   ungleiche, organische Ecken — das ist eine Handgeste, kein UI-Element.
   Vorher standen hier sechs Formsprachen nebeneinander (0 / 4px / 12px /
   pill / circle / organisch), u.a. zwei Buttons mit zwei Kanten und zwei
   chip-artige Dinge mit zwei Formen. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink-900);font:var(--text-body)}
/* Landmark ohne eigene Box: das sticky EU-Band bleibt am Body verankert
   und damit bis zum Seitenende gepinnt. */
main{display:contents}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}

/* Skip-Link: sichtbar nur bei Tastatur-Fokus */
.skip-link{position:absolute;left:12px;top:-56px;z-index:100;background:var(--ink-900);color:#fff;
  font:var(--fw-bold) 14px/1 var(--font-sans);padding:12px 18px;border-radius:var(--radius-0);
  transition:top var(--dur-fast) var(--ease-out)}
.skip-link:focus{top:12px;outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 6px rgba(152,20,54,.85)}
a{color:inherit;text-decoration:none}
/* Ersetzt das graue OS-Tap-Rechteck durch die Marke. Bewusst NICHT `transparent`:
   die ~20 Papier-Ziele ohne eigenen :active-State (Header-Social, .brand, Quellen-
   und Impressum-Link) hätten sonst gar keine Touch-Rückmeldung mehr. Alpha .18
   liegt unter allen Fokusring-Alphas, damit ein Tap-Blitz nie als Fokus gelesen wird. */
a,button{-webkit-tap-highlight-color:rgba(152,20,54,.18)}
/* base.css:22 setzt ein ungeschütztes a:hover{text-decoration:underline}. Auf Touch
   rastet das als Unterstrich auf button-förmigen Links ein — dort abschalten, für
   echte Zeiger bleibt es unangetastet. */
@media (hover: none){a:hover{text-decoration:none}}

/* ---------- HOVER-GUARD ----------
   Alle Hover-Zustände hängen an echten Zeigern. Ohne diesen Block feuern sie auf
   Touch beim Antippen und BLEIBEN hängen — u.a. auf .termin (nicht interaktiv) und
   auf drei Elementen mit target=_blank, die dann nach der Rückkehr „ausgewählt"
   aussehen. Der Block steht bewusst GANZ OBEN: alle :active-Regeln weiter unten
   haben gleiche Spezifität und gewinnen dadurch, solange der Finger unten ist. */
@media (hover: hover) and (pointer: fine) {
  .social a:hover{color:var(--red-500);transform:translateY(-1px)}
  .site-footer .social a:hover,
  .hero-social a:hover{color:var(--red-on-dark)}   /* Footer und Hero sind dunkel */
  .btn-cta:hover{background:var(--red-600)}
  .eu:hover{background:var(--red-600)}
  .eu:hover .eu-arrow-inline{transform:translateX(7px)}
  .filter-chip:hover{border-color:var(--red-500);color:var(--red-600)}
  /* .termin:hover ist bewusst weg: die Zeile ist nicht klickbar, faerbte sich
     aber wie ein Knopf ein und versprach eine Detailansicht, die es nicht gibt. */
  .termin-tickets:hover{background:var(--red-500);color:#fff;transform:translate(2px,2px)}
  .book a:hover img{transform:translate(-3px,-5px);box-shadow:7px 7px 0 var(--red-500)}
  .footer-legal a:hover{color:var(--red-on-dark)}
  .books-sub:hover{color:#fff}
  /* Stand bis 2026-08-02 AUSSERHALB dieses Blocks und blieb auf Touch nach dem
     Antippen haengen — dieselbe Falle wie bei den anderen neun. */
  .books-nav:hover{border-color:var(--red-on-dark);color:var(--red-on-dark)}
  .quote-toggle:hover{background-color:var(--red-600)}
  /* Die Spur-Fassung traegt keine Flaeche (siehe Handy-Block), also darf der
     Hover auch keine einfaerben — sonst blitzte hier ein rotes Quadrat auf. */
  .quote-toggle-spur:hover{background-color:transparent;color:#fff}
}

/* social icon rows */
/* flex:0 0 auto ist hier tragend: ohne das saugt die Icon-Reihe den gesamten
   Ueberlauf des space-between-Headers auf und die Icons schrumpfen auf 7,5px
   (bei 321px sogar auf 0) — sichtbar bleibt nur das ueberstehende SVG.
   Die Trefferflaeche ist 44px hoch, das Glyph bleibt 20px. */
.social{display:flex;align-items:center;gap:6px}
.social a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-12px -6px;color:var(--ink-700);
  transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.social svg{flex:0 0 auto;width:20px;height:20px;fill:currentColor;display:block}

/* ---------- HEADER (on paper) ---------- */
.site-header{background:var(--paper);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--ink-200)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:86px}
.brand{display:inline-flex;flex-direction:column;gap:3px;text-decoration:none;white-space:nowrap}
.brand-name{font:var(--fw-black) 25px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.02em;color:var(--ink-900)}
.brand-name .red{color:var(--red-600)}
.brand-sub{font:var(--fw-bold) 11px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.2em;color:var(--red-600)}
.site-header .social svg{width:22px;height:22px}
/* Rechnung: Wortmarke 207px + 20px Abstand + sechs 44px-Ziele mit 6px Luecken
   = 521px, plus 48px Aussenabstand => unter ~620px passt das nicht mehr
   nebeneinander. Vorher wurde die Reihe stattdessen auf 7,5px zusammen-
   gequetscht (bei 321px auf 0) und blieb als sechs unsichtbare Tab-Stopps
   stehen. Hier verschwindet sie ganz — der Footer traegt dieselben sechs
   Links in voller Groesse. */
/* Bis 2026-08-01 lag die Grenze bei 620px (dort wurde es rechnerisch eng).
   Jetzt 700px: darunter faehrt das Megafon-Cutout in genau diese Ecke ein und
   wuerde die Icons ueberlagern. Dieselben sechs Links stehen im Footer. */
@media (max-width:700px){.site-header .social{display:none}}

/* ---------- HERO (full-bleed EU-Parliament photo, cinematic) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:3px solid var(--ink-900);padding-top:clamp(14px,2.6vw,28px);background:var(--ink-900)}
/* Foto füllt den Hero randlos. */
.hero-bg{position:absolute;inset:0;z-index:0;display:block;margin:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.32);transform-origin:6% 46%}
/* Dunkler Verlauf-Schleier: links/unten kräftig für Textlesbarkeit, oben-rechts
   leicht für die Pressestimme; ganz unten ein roter Übergang zum EU-Band. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg, rgba(20,18,16,.92) 0%, rgba(20,18,16,.82) 30%, rgba(20,18,16,.5) 48%, rgba(20,18,16,.18) 62%, rgba(20,18,16,0) 76%),
    radial-gradient(120% 95% at 100% 0%, rgba(20,18,16,.62) 0%, rgba(20,18,16,.26) 26%, rgba(20,18,16,0) 52%),
    linear-gradient(0deg, rgba(20,18,16,.85) 0%, rgba(20,18,16,.14) 24%, rgba(20,18,16,0) 40%),
    linear-gradient(0deg, rgba(152,20,54,.36) 0%, rgba(152,20,54,0) 15%)}
/* Bildnachweis: gehört sichtbar ans Foto, darf aber nichts von ihm wollen.
   Unten rechts auf dem dunkelsten Teil des Schleiers, klein und zurückgenommen —
   noch gut lesbar (rund 5:1), aber ohne Anspruch auf Aufmerksamkeit.
   z-index 2, damit es über dem Schleier, aber unter dem Text liegt. */
.hero-credit{position:absolute;right:var(--gutter);bottom:8px;z-index:2;margin:0;
  font:var(--fw-medium) 10px/1.2 var(--font-sans);letter-spacing:.04em;
  color:rgba(243,239,232,.55);pointer-events:none}
/* Unter 700px steht der Bildnachweis ganz unten, die Social-Reihe darueber.
   Nebeneinander passen sie nicht: die Reihe misst 262px, der Nachweis rund 160,
   verfuegbar sind 327. */
@media (max-width:620px){.hero-credit{font-size:9px}}

/* ---------- SOCIAL AN DER HERO-UNTERKANTE (nur Handy) ----------
   Auf dem Handy verschwindet die Reihe aus dem Header (das Megafon braucht die
   Ecke) und stand danach erst im Footer, also nach 3.100px Scrollweg. Hier sitzt
   sie am unteren Rand des Heros: der endet bei 375x812 fast genau an der Falz,
   die Reihe liegt damit im Daumenbereich, auf dunklem Grund und ohne mit der
   Ueberschrift zu konkurrieren.
   position:absolute — die Reihe kostet keine Layouthoehe, der Hero bleibt so
   hoch wie er war. Die Icons klont das JS aus dem Header, damit die sechs
   SVG-Pfade nicht ein drittes Mal im Markup stehen.
   Sichtbar sind immer genau zwei Reihen: Desktop Header + Footer, Handy Hero +
   Footer. Die jeweils abgeschaltete ist display:none und damit auch aus dem
   Tab-Fluss. */
.hero-social{display:none}
@media (max-width:700px){
  /* Mittig ueber die volle Breite, der Bildnachweis sitzt darunter an der
     Unterkante. bottom:28 laesst der 44px-Trefferflaeche (sie ragt ueber die
     negativen Raender 12px unter die sichtbaren Glyphen) Luft zum Nachweis:
     bei 28px ueberlappte sie ihn um 3px, bei 38px bleiben 4px frei. */
  .hero-social{display:flex;justify-content:center;position:absolute;left:0;right:0;bottom:38px;z-index:3;gap:2px}
  .hero-social a{color:rgba(243,239,232,.92)}
  .hero-social svg{width:21px;height:21px}
}

/* Hero füllt die Resthöhe, sodass das Aktivitäten-Band beim ersten Laden
   genau am unteren Bildschirmrand sitzt (Header + Hero + Band = 100vh). */
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center;min-height:max(460px, calc(100svh - 249px))}
/* min-width:0 ist Pflicht, nicht Kosmetik: als Grid-Element hat .hero-text von
   Haus aus min-width:auto, also die Mindestbreite seines Inhalts. Seit im Hero
   ein Wischkarussell steckt, ist dieser Inhalt 9100px breit (13 Folien à 100%),
   und die Spalte wuchs auf die vollen 700px max-width — gemessen bei 375px
   Viewport, die halbe Seite lief unter dem Bildrand hindurch. Die minmax(0,1fr)
   der Spalte allein genügt dagegen nicht, der Riegel muss am Element selbst
   sitzen. */
.hero-text{align-self:center;padding:clamp(18px,2.5vw,30px) 0;max-width:700px;min-width:0}
/* ══════ PRESSESTIMMEN ══════
   Ein Markup, zwei Erscheinungsformen.
   Desktop: rechts oben, EIN Zitat sichtbar, die uebrigen display:none, Wechsel
            per Ueberblendung, dunkler Schleier hinter dem Text.
   <=900px: Wischkarussell ueber die volle Breite, OHNE Schleier — der
            Hero-Verlauf ist dort oben zu 90% deckend, ein zweiter Schleier
            darueber war nur eine graue Platte im Bild.
   Nebeneffekt der Folienbauweise: reserveHeight() ist ersatzlos entfallen. Auf
   dem Handy liegen alle Folien in einer Flex-Zeile, die Spur ist damit von sich
   aus so hoch wie die hoechste Folie — der Ruck, den die Funktion abfing, kann
   konstruktiv nicht mehr entstehen. */
/* 880 statt der frueheren 820: seit die Quelle nicht mehr umbrechen darf, ist
   sie der breiteste Einzelposten. Gemessen brauchte die laengste („Victor
   Negrescu …") samt Knopf und Polsterung 813px — sieben Pixel unter der alten
   Grenze. Das haelt keine Ersatzschrift aus, die vor dem Laden der Webfont kurz
   breiter setzt; mit 880 sind es 67px Reserve. */
.hero-quote{position:absolute;top:0;right:var(--gutter);max-width:880px;margin:0;text-align:right;z-index:3;
  /* 180ms statt der frueheren 500: die Blende laeuft ZWEIMAL je Wechsel (raus,
     Text tauschen, rein) und der Wechsel feuert alle 7,5s von selbst. Mit 500
     waren das 1000ms Bewegung je Wechsel, rund 13% der Zeit stand das Zitat im
     Uebergang. Das JS liest die Dauer aus dieser Zeile, nicht aus einer zweiten
     Zahl — siehe blendeDauer() im Skript. */
  transition:opacity var(--dur-base) var(--ease-out)}
.hero-quote.is-fading{opacity:0}
.hero-quote-track{display:block}
.hero-quote-slide{display:none}
.hero-quote-slide.is-active{display:block}
/* Der Schleier haengt auf der inneren Huelle, damit er den Text umschliesst
   statt eine Box zu fuellen. Weicher Auslauf nach allen Seiten (schon bei 62%
   durchsichtig), sonst entstuende eine sichtbare Kante. */
/* position:relative macht die Huelle zum Bezugsrahmen fuer den Eckknopf.
   padding-bottom von 26 auf 36: das Eckquadrat ragt 26px in die Box hinein und
   braucht Abstand zur Quellenzeile — 36 minus 26 lassen 10px Luft. */
.hero-quote-inner{position:relative;display:inline-block;padding:22px 42px 36px 64px;
  background:radial-gradient(78% 92% at 62% 48%,
    rgba(20,18,16,.88) 0%, rgba(20,18,16,.78) 30%, rgba(20,18,16,.5) 55%,
    rgba(20,18,16,.2) 76%, rgba(20,18,16,0) 100%)}
.hero-quote-text{display:block;font:italic var(--fw-regular) clamp(18px,2.1vw,26px)/1.35 var(--font-serif);color:#f3efe8}
/* ---------- QUELLENZEILE ----------
   Nur noch die Quelle, rechtsbuendig — sie schliesst damit exakt mit der rechten
   Kante des Zitattextes ab. Vorher teilte sie sich eine Flex-Zeile mit dem Knopf
   und war um dessen Breite plus Abstand nach links versetzt.
   nowrap haelt sie einzeilig, ausdrueckliche Ansage: der Autor darf unten nicht
   umbrechen. Nachgemessen: die laengste Quelle („Victor Negrescu …") misst
   einzeilig 659px, verfuegbar sind 714px. Auf schmaleren Desktops schrumpft die
   Schrift ueber clamp() mit, der Abstand bleibt also erhalten. Auf dem Handy
   wird nowrap wieder aufgehoben. */
.hero-quote-byline{display:block;text-align:right;margin-top:9px}
.hero-quote-cite{display:block;margin-top:0;white-space:nowrap;
  font:var(--fw-bold) clamp(12px,1.05vw,15px)/1.2 var(--font-sans);text-transform:uppercase;letter-spacing:.12em;color:rgba(243,239,232,.85)}
/* ---------- PLAY/PAUSE: rotes Quadrat in der unteren rechten Ecke ----------
   Aus dem Fluss genommen, deshalb kostet der Knopf keine Layoutbreite mehr und
   kann die Quellenzeile nicht mehr verschieben.
   Der Trick mit background-clip: das Element ist volle 44x44 gross und damit als
   Trefferflaeche normgerecht, eingefaerbt wird aber nur die Inhaltsbox — sichtbar
   bleibt ein 26px-Quadrat. Die 9px Polsterung ringsum sind klickbar, aber unsichtbar.
   Gefuellt statt nur umrandet, weil der Schleier genau hier, in der Ecke, schon
   fast durchsichtig ist: eine Flaeche traegt sich selbst, eine Kontur nicht.
   Radius 0 — die Formregel ganz oben sagt fuer Buttons hart, und ein Quadrat ist
   hier ausdruecklich gewuenscht.
   right/bottom auf -9px: das SICHTBARE Quadrat soll ohne Abstand in der Ecke
   sitzen. Weil die 9px Polsterung ringsum unsichtbar sind, muss die 44px-Box
   um genau diese 9px ueber die Kante hinausragen — sonst bliebe optisch ein
   Rand. Die Box laeuft dabei in den Gutter, nicht ueber den Bildschirm. */
.quote-toggle{position:absolute;right:-9px;bottom:-9px;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:9px;border:0;border-radius:var(--radius-0);
  background:var(--red-500);background-clip:content-box;
  color:var(--paper);cursor:pointer;
  /* color gehoert MIT in die Liste: die Handy-Fassung faerbt beim Druck den Glyph
     statt der Flaeche (siehe .quote-toggle-spur:active). Ohne das sprang dort die
     einzige Rueckmeldung hart, waehrend alles andere auf der Seite blendet. */
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
/* Pause = zwei Balken aus Raendern, Play = ein Dreieck aus Raendern. currentColor
   sorgt dafuer, dass beide Formen die Textfarbe mitnehmen. */
.quote-toggle-glyph{display:block;width:8px;height:11px;
  border-left:3px solid currentColor;border-right:3px solid currentColor}
.quote-toggle[aria-pressed="true"] .quote-toggle-glyph{width:0;height:0;border:none;
  border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
/* base.css:32 setzt global box-shadow:var(--ring) — Rot auf Rot verschwindet,
   deshalb hier ein heller Ring direkt am sichtbaren Quadrat statt an der
   unsichtbaren 44px-Box. */
.quote-toggle:focus-visible{outline:none;box-shadow:none}
.quote-toggle:focus-visible .quote-toggle-glyph{outline:2px solid var(--paper);outline-offset:9px}
.quote-toggle:active{background-color:var(--accent-press)}
.quote-nav{display:none}
/* Reduced motion: Zitat wechselt hart statt zu faden, das Karussell springt
   statt zu gleiten (das JS setzt dafuer behavior:auto). Die Rotation selbst
   laeuft weiter — ein Textwechsel alle 7,5s ist keine Bewegung. */
@media (prefers-reduced-motion: reduce){.hero-quote{transition:none}.hero-quote.is-fading{opacity:1}
  .quote-toggle,.quote-dot{transition:none}}
.hero-name{font-family:var(--font-poster);font-weight:var(--fw-regular);text-transform:uppercase;font-size:clamp(52px,8.8vw,120px);line-height:.86;letter-spacing:.005em;color:#fff;margin:14px 0 0}
/* „SONNEBORN" als rot hingewischter Marker-Block: gleichmäßig um die Versalien,
   leicht schräg (Stempel-Motiv) mit organisch gerundeten Enden für Dynamik. */
.hero-name .red{display:inline-block;color:#fff;
  background:linear-gradient(var(--red-500),var(--red-500)) left center / 100% 100% no-repeat;
  padding:.14em .2em .1em;margin-top:.1em;line-height:.7;
  border-radius:8px 16px 9px 15px;transform:rotate(-1.8deg);transform-origin:left center;
  box-shadow:5px 6px 0 rgba(20,18,16,.32)}
/* Marker-Animation: das Rot wischt beim Laden von links ein. */
@media (prefers-reduced-motion: no-preference){
  .hero-name .red{background-size:0% 100%;animation:marker-swipe .75s var(--ease-out) .35s both}
}
@keyframes marker-swipe{from{background-size:0% 100%}to{background-size:100% 100%}}
.hero-lead{font:var(--fw-regular) clamp(17px,2.4vw,21px)/1.55 var(--font-serif);color:var(--text-on-dark);max-width:480px;margin:16px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.btn-cta{display:inline-flex;align-items:center;gap:10px;background:var(--red-500);color:#fff;font:var(--fw-black) 15px/1 var(--font-sans);
  text-transform:uppercase;letter-spacing:.04em;padding:18px 28px;box-shadow:6px 6px 0 rgba(246,243,236,.9);
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
/* box-shadow bewusst in der Transition: der Offset-Block muss 6px→3px zusammen-
   gehen, WÄHREND der Button 3px vorrückt — sonst zerfällt die Screenprint-Illusion
   in ein bloßes Verschieben. Einzige Ausnahme von „nur transform/opacity". */
.btn-cta:active{transform:translate(3px,3px);box-shadow:3px 3px 0 rgba(246,243,236,.9);background:var(--accent-press)}
@media (prefers-reduced-motion:reduce){.btn-cta:active{transform:translate(1px,1px);box-shadow:5px 5px 0 rgba(246,243,236,.9)}}
/* Ohne diese Zeile würde der Fokusring durch die neue box-shadow-Transition
   einblenden statt zu erscheinen. Ring schaltet hart AN, blendet beim Blur aus. */
.btn-cta:focus-visible{transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}

/* ---------- EU BAND (compact, sticky under the header) ---------- */
.eu{position:sticky;top:87px;z-index:40;display:block;background:var(--red-500);color:#fff;text-decoration:none;
  box-shadow:0 8px 20px rgba(20,18,16,.16);transition:background var(--dur-fast) var(--ease-out)}
.eu:hover{text-decoration:none}
/* Nur Farbe, bewusst kein Transform: .eu ist sticky und dockt unter dem Header —
   einen angehefteten Vollbreiten-Balken unter dem Finger zu verschieben, kämpft
   gegen den Scroll. background liegt bereits in der Transition oben. */
.eu:active{background:var(--accent-press)}
.eu .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(24px,3vw,36px) var(--gutter)}
.eu-kicker{font:var(--fw-bold) 12px/1.2 var(--font-sans);text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.85);margin:0 0 5px}
.eu-title{font-family:var(--font-poster);font-weight:var(--fw-regular);text-transform:uppercase;font-size:clamp(24px,3.4vw,40px);line-height:1;margin:0}
.eu-arrow-inline{display:inline-block;margin-left:.1em;transition:transform var(--dur-base) var(--ease-out)}
.eu-nobreak{white-space:nowrap}
/* ---------- BAND IM GEPINNTEN ZUSTAND ----------
   Ungeschrumpft belegten Header und Band zusammen 218px von 900 (24%) bzw.
   202px von 812 (25%) — dauerhaft, ueber einen Scrollweg von 3.100 bis 4.100px.
   Man las die Terminliste durch einen Schlitz, waehrend ein Banner, das man
   bereits abgelehnt hatte, ein Viertel des Glases hielt.
   Gepinnt wechselt das Band deshalb auf position:fixed und wird flach: Kicker
   raus, Titel auf 20px, einzeilig. Der Platzhalter darunter uebernimmt im
   selben Moment die urspruengliche Hoehe — das Band verlaesst den Fluss (minus
   H) und der Platzhalter tritt ein (plus H), macht netto null. Ohne ihn
   spraenge der gesamte Inhalt darunter um die Bandhoehe nach oben. */
.eu-spacer{height:0}
body.eu-pinned .eu{position:fixed;top:87px;left:0;right:0}
body.eu-pinned .eu .wrap{padding:0 var(--gutter);height:var(--eu-pinned-h)}
body.eu-pinned .eu-kicker{display:none}
body.eu-pinned .eu-title{font-size:20px}

/* Spielerei: Megafon-Cut-out wächst aus der Band-Unterkante in den Header,
   sobald der Hero rausgescrollt ist (Höhe/Top per JS, über dem Header). */
/* AUFTRITT UND ABGANG SIND VERSCHIEDEN, und das ist der ganze Punkt.
   Auftritt: waechst in 550ms aus der Bandunterkante — das ist der Gag.
   Abgang: blendet in 220ms weg. Frueher schrumpfte es zurueck, und weil das Band
   im selben Moment von 56 auf 131px aufklappt, loeste sich das Megafon dabei
   sichtbar von der Unterkante und hing kurz frei in der Luft, bevor es
   verschwand. Ausblenden hat dieses Problem nicht.
   Der Kniff fuer zwei verschiedene Wege: `transform` bekommt auf der RUHE-Regel
   eine Dauer von 0s mit 220ms VERZOEGERUNG. Beim Abgang laeuft also erst die
   Blende durch, und erst wenn nichts mehr zu sehen ist, springt die Skalierung
   zurueck auf 0 — bereit fuer den naechsten Auftritt. */
.band-cutout{position:fixed;z-index:55;right:19%;height:0;width:auto;pointer-events:none;
  transform:scale(0);transform-origin:center bottom;opacity:0;
  filter:drop-shadow(0 12px 20px rgba(20,18,16,.4));
  transition:opacity var(--dur-gag-out) var(--ease-out),transform 0s linear var(--dur-gag-out)}
body.show-bandcutout .band-cutout{transform:scale(1);opacity:1;
  transition:transform var(--dur-gag-in) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
/* ---------- Handy-Fassung: klein oben rechts IM HEADER ----------
   Unter 700px gibt es das Wachsen aus dem Band nicht mehr — der Fuss braeuchte
   ein Band, das hoeher ist als das Totband der Beobachter. Stattdessen faehrt
   das Megafon hier von oben in die Header-Ecke ein, ausgeloest vom selben
   Signal. Hoehe UND top setzt das JS, sodass die Fuesse exakt auf der
   Unterkante des Headers stehen; der Wert hier ist nur der Rueckfall.
   right haengt am Gutter, damit es mit dem Header-Inhalt fluchtet. */
@media (max-width:700px){
  /* calc statt Prozent: -135% liessen die Unterkante bei -14px liegen, der
     Schlagschatten reicht aber 5px nach unten plus 10px Weichzeichnung — auf dem
     iPhone stand deshalb ein grauer Streifen am oberen Rand, bevor sich
     ueberhaupt etwas bewegte. -100% minus 60px setzt die Unterkante auf -48px,
     der Schatten endet bei -33px. Der Wert haengt nicht mehr an der Bildhoehe. */
  .band-cutout{top:12px;right:var(--gutter);
    transform:translateY(calc(-100% - 60px));transform-origin:center top;
    filter:drop-shadow(0 5px 10px rgba(20,18,16,.45))}
  /* Gleiche Aufteilung wie am Desktop: einfahren, ausblenden. Die verzoegerte
     transform-Regel steht schon oben und gilt hier mit. */
  body.show-bandcutout .band-cutout{transform:translateY(0);opacity:1;
    transition:transform var(--dur-gag-in) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
}
/* SPEZIFITÄTSFALLE, doppelt: `body.show-bandcutout .band-cutout` ist (0,2,1),
   `.band-cutout` nur (0,1,0), und Media Queries erhöhen die Spezifität NICHT.
   Daraus folgen zwei Pflichten. Erstens müssen hier beide Selektoren stehen,
   sonst bekäme der gedrückte Zustand still das volle Wachsen zurück. Zweitens
   muss dieser Block HINTER der Handy-Fassung stehen — stünde er davor, gäbe die
   Handy-Regel bei gleicher Spezifität die Bewegung wieder frei.
   transform:none ist für beide Fassungen der Ruhezustand (scale(1) bzw.
   translateY(0)), deshalb genügt eine Regel für beide. */
@media (prefers-reduced-motion:reduce){
  .band-cutout{transform:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
  body.show-bandcutout .band-cutout{transform:none;opacity:1;transition:opacity var(--dur-slow) var(--ease-out)}
}

/* ---------- TERMINE ---------- */
.termine{scroll-margin-top:200px}
.termine .wrap{padding:clamp(56px,7vw,88px) var(--gutter)}
.termine-kicker{font:var(--fw-bold) 13px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.18em;color:var(--red-500);margin:0}
.termine-title{font-family:var(--font-poster);font-weight:var(--fw-regular);text-transform:uppercase;font-size:clamp(40px,6vw,64px);line-height:.95;color:var(--ink-900);margin:8px 0 20px}
.termine-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.filter-chip{font:var(--fw-bold) 12px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-700);
  background:transparent;border:1.5px solid var(--ink-300);border-radius:var(--radius-pill);padding:0 16px;min-height:44px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.filter-chip.is-active{background:var(--red-500);border-color:var(--red-500);color:#fff}
/* Nur translateY: der Chip hat keinen Offset-Block, in den er diagonal hinein-
   rücken könnte, und ein Scale würde seine 1.5px-Border ins Subpixel schieben. */
.filter-chip:active{transform:translateY(2px);border-color:var(--accent-press);color:var(--accent-press)}
/* PFLICHT, nicht Kür: .filter-chip:active und .filter-chip.is-active sind beide
   (0,2,0). Ohne diese (0,3,0)-Regel malte der Press dunkelrote Schrift auf die
   rote Fläche des aktiven Chips. */
.filter-chip.is-active:active{background:var(--accent-press);border-color:var(--accent-press);color:#fff}
@media (prefers-reduced-motion:reduce){.filter-chip:active{transform:translateY(1px)}}
/* Doppelring, weil der aktive Chip selbst rot ist (roter Ring darauf = 1,00:1). */
.filter-chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 5px rgba(152,20,54,.85)}
.termine-list{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink-900)}
.termin{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:22px;padding:13px 6px;border-bottom:1px solid var(--ink-200)}
.termin[hidden]{display:none}
.termin-date{display:flex;flex-direction:column;line-height:1;font-variant-numeric:tabular-nums}
.termin-day{font:var(--fw-black) 24px/1 var(--font-sans);color:var(--red-600)}
.termin-mon{font:var(--fw-bold) 12px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-700);margin-top:4px}
.termin-year{font:var(--fw-medium) 11px/1 var(--font-sans);color:var(--ink-600);margin-top:3px}
.termin-main{min-width:0}
.termin-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
/* Einheitlich: bricht IRGENDEINE Kategorie unter den Ort um (zu schmal),
   werden via JS ALLE Kategorien unter den Ort gestellt (Klasse cats-stacked). */
.termine-list.cats-stacked .termin-head{flex-direction:column;align-items:flex-start;gap:6px}
.termin-place{font:var(--fw-bold) clamp(17px,2vw,20px)/1.2 var(--font-sans);color:var(--ink-900)}
.termin-sub{font:var(--fw-regular) 14px/1.35 var(--font-sans);color:var(--ink-600);margin-top:3px}
/* category chip — brand black / white / red, one style per programme */
.termin-cat{display:inline-block;max-width:100%;font:var(--fw-bold) 11.5px/1.25 var(--font-sans);text-transform:uppercase;letter-spacing:.08em;
  border:1.5px solid transparent;border-radius:var(--radius-pill);padding:4px 11px;transform:translateY(-1px)}
.termin-cat--solo{background:var(--red-500);color:#fff;border-color:var(--red-500)}
.termin-cat--boygroup{background:transparent;color:var(--red-600);border-color:var(--red-300)}
.termin-cat--gysi{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
/* [hidden] allein genuegt nicht: .termin-cat setzt display:inline-block und
   schlaegt bei gleicher Spezifitaet die UA-Regel. */
.termin-cat[hidden]{display:none}
/* ---------- MONATSBALKEN ----------
   Leichte Abgrenzung, kein Kapitelkopf: eine schmale rote Leiste mit Monat und
   Jahr. Sie kostet 25px je Gruppe — das kompakte Zeilenlayout darunter bleibt
   unangetastet. Die Balken baut das JS aus den vorhandenen data-date-Attributen
   und blendet sie aus, wenn der aktive Filter in dem Monat nichts uebriglaesst. */
.termin-monat{display:block;margin:0;padding:5px 10px;background:var(--red-500);color:#fff;
  font:var(--fw-bold) 12px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.14em;
  border-radius:var(--radius-0)}
.termin-monat[hidden]{display:none}
/* Der erste Balken sitzt direkt unter der 3px-Oberkante der Liste — dort waere
   die Doppelkante zu schwer, deshalb dort kein zusaetzlicher Abstand. */
.termine-list > .termin-monat + .termin{border-top:0}
.termine-list > .termin-monat:not(:first-child){margin-top:10px}
/* Ein Primaer statt dreizehn. Nur der naechste Termin traegt den gefuellten
   Knopf; die uebrigen zwoelf bleiben Kontur. Ohne das konkurrieren dreizehn
   gleich laute Ziele miteinander und keines gewinnt. */
.termin.is-next .termin-tickets{background:var(--red-500);color:#fff;border-color:var(--red-500)}
.termin.is-next .termin-day{color:var(--red-500)}
.termin-tickets{font:var(--fw-bold) 13px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--red-600);
  border:2px solid var(--red-500);border-radius:var(--radius-0);padding:13px 18px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
/* Kein border-color im :active — es fehlt bewusst in der Transition oben und
   würde als Einziges hart umspringen. */
.termin-tickets:active{background:var(--accent-press);color:#fff;transform:translate(3px,3px)}
/* 2px, nicht 1px: der Hover steht bereits auf translate(2px,2px) ohne eigenen
   reduce-Override — bei 1px liefe der Press auf dem Desktop rückwärts. */
@media (prefers-reduced-motion:reduce){.termin-tickets:active{transform:translate(2px,2px)}}
.termine-empty{font:var(--text-column);color:var(--ink-700);padding:24px 6px}
.termine-source{font:var(--text-caption);color:var(--ink-600);margin:24px 0 0}
.termine-source a{color:var(--red-600)}

/* ---------- BÜCHER (Karussell) ---------- */
.books{background:var(--black);scroll-margin-top:200px;scroll-padding-top:230px}
.books .wrap{padding:clamp(48px,6vw,80px) var(--gutter)}
.books-kicker{font:var(--fw-bold) 13px/1.3 var(--font-sans);text-transform:uppercase;letter-spacing:.18em;color:var(--red-on-dark);margin:0}
.books-title{font-family:var(--font-poster);font-weight:var(--fw-regular);text-transform:uppercase;font-size:clamp(40px,6vw,64px);line-height:.95;color:#fff;margin:18px 0 6px}
/* Echter Link (war ein <p>, sah aber aus wie die fuenf echten Links der Seite). */
.books-sub{display:inline-block;font:var(--fw-bold) 13px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.06em;
  color:rgba(243,239,232,.75);margin:0 0 28px;padding-bottom:3px;border-bottom:1px solid var(--red-on-dark);
  transition:color var(--dur-fast) var(--ease-out)}
.books-viewport{position:relative}
/* dunkle Regal-Bühne: Cover stehen auf einer Regalkante */
/* overscroll-behavior-x:contain — ohne das kann ein Wisch zurück zum ersten Cover
   die Overscroll-Navigation auslösen und die Seite verlassen (Chrome Android
   braucht dafür nicht einmal einen Start am Rand). */
.books-track{display:flex;align-items:flex-end;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;overscroll-behavior-x:contain;list-style:none;margin:0;
  padding:14px 2px 0;border-bottom:2px solid rgba(243,239,232,.22);scrollbar-width:none}
/* html bekommt bei reduced-motion oben scroll-behavior:auto — .books-track deklariert
   sein smooth aber selbst und wäre sonst die einzige Motion, die die Präferenz ignoriert. */
@media (prefers-reduced-motion: reduce){.books-track{scroll-behavior:auto}}
.books-track::-webkit-scrollbar{display:none}
.book{flex:0 0 auto;scroll-snap-align:start}
.book a{display:block;text-decoration:none}
.book img{height:clamp(190px,25vw,250px);width:auto;display:block;border:1px solid rgba(243,239,232,.25);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
/* Hover hebt das Cover vom Regal, der Press drückt es zurück. Steht bewusst VOR
   :focus-visible (beide (0,2,2), Quellreihenfolge entscheidet): so behält eine
   Tastaturaktivierung ihren Ring, ein Mausklick schlägt trotzdem den Hover. */
.book a:active img{transform:translate(-1px,-2px);box-shadow:4px 4px 0 var(--accent-press)}
/* Der Hover-Guard hier ist zwingend: auf Zeigergeräten startet der Press beim
   Hover-Wert (-3px,-5px), der Weg wird also kürzer — richtig. Ungegatet gälte er
   auch auf Touch, wo es keinen Hover gibt und der Weg WACHSEN würde. */
@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){
  .book a:active img{transform:translate(-2px,-3px)}
}
.book a:focus-visible img{outline:none;box-shadow:0 0 0 3px var(--paper)}
.books-nav{position:absolute;top:48%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:var(--radius-circle);
  border:1.5px solid rgba(243,239,232,.35);background:var(--ink-900);color:#fff;font:var(--fw-bold) 22px/1 var(--font-sans);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  transition:opacity var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
/* Statt inline-visibility (die hart wegblinkt und sich nicht überblenden lässt):
   echtes disabled. Blendet aus, sperrt Klick UND Enter ohne JS-Wächter und meldet
   den Zustand an Hilfstechnik. Kein Transform — der transform-Kanal trägt hier
   das statische translateY(-50%) zur Zentrierung. */
.books-nav[disabled]{opacity:0;pointer-events:none;cursor:default}
/* Die Pfeile waren die einzigen Bedienelemente der Seite ohne Druckzustand.
   Kein transform — der Kanal traegt hier das statische translateY(-50%) zur
   Zentrierung; stattdessen faerbt der Rahmen durch, wie bei .filter-chip. */
.books-nav:active{border-color:var(--red-on-dark);background:var(--accent-press)}
.books-nav--prev{left:-12px}
.books-nav--next{right:-12px}
@media (hover:none){.books-nav{display:none}}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--black);color:rgba(243,239,232,.7)}
.site-footer .wrap{padding:40px var(--gutter)}
.footer-disclaimer{font:var(--text-caption);color:rgba(243,239,232,.6);max-width:680px;line-height:1.6;margin:0 0 22px}
.footer-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding-top:20px;border-top:1px solid rgba(243,239,232,.15)}
.footer-legal{font:var(--fw-medium) 13px/1.5 var(--font-sans)}
.footer-legal a{color:rgba(243,239,232,.95);border-bottom:1px solid var(--red-500)}
.site-footer .social{color:rgba(243,239,232,.8)}

/* ---------- FOKUSRING ----------
   Ein roter Ring auf rotem Band ergibt 1,00:1 — für Tastaturnutzer unsichtbar.
   Deshalb überall ein zweifarbiger Ring: heller Kern gegen dunkle/rote Flächen,
   roter Saum gegen das Papier. Einer der beiden hat immer Kontrast (>=3:1). */
a:focus-visible,.btn-cta:focus-visible{outline:none;
  box-shadow:0 0 0 3px var(--paper),0 0 0 6px rgba(152,20,54,.85)}
/* Auf den dunklen Flächen (EU-Band, Bücher, Footer) genügt der helle Ring allein —
   dort hat er 9,9:1 gegen Rot und wirkt ruhiger als der doppelte. */
.eu:focus-visible,.site-footer a:focus-visible,.books a:focus-visible{
  box-shadow:0 0 0 3px var(--paper)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  /* Mehr Hoehe auf dem Handy: der Zitatblock ist fuer das laengste Zitat
     reserviert (bis 233px) und schiebt Ueberschrift, Lead und Buttons weit
     nach unten. Ohne Zusatzhoehe bleibt unter den Buttons kein Platz fuer
     das Gesicht — und Text auf der Person ist ausgeschlossen. */
  /* Die Rechnung war unvollstaendig: abgezogen wurde nur der Header, nicht die
     eigene padding-top des Heros (clamp) und nicht seine 3px Unterkante. Der Hero
     lief dadurch 17px UNTER die Falz, obwohl der Kommentar oben „Header + Hero +
     Band = 100vh" behauptet — auf dem Desktop stimmt die Rechnung, hier nicht.
     Die 114 sind 87 Header + 3 Rahmen + 24 fuer einen sichtbaren Streifen des
     roten Bandes: er zeigt, dass darunter etwas kommt.
     Warum nicht das GANZE Band ueber die Falz holen: dafuer muesste der Hero auf
     610px, dann bleiben unter dem Text nur 159px, und das Gesicht liegt entweder
     hinter dem Lead oder ist auf eine Kopfhaut-Sichel beschnitten. Beides
     ausprobiert und verworfen — die Regel „Text liegt nie auf der Person" wiegt
     schwerer als ein vollstaendig sichtbares Band. */
  .hero-grid{grid-template-columns:1fr;align-items:start;min-height:max(620px, calc(100svh - 114px - clamp(14px,2.6vw,28px)));gap:0}
  .hero-text{align-self:start;padding:clamp(24px,6vw,40px) 0 0}
  /* Ausschnitt nachgezogen, nachdem der Zitatblock feste Hoehe bekam: staerker
     skaliert und vom oberen Rand aus, damit das Gesicht unter Lead und Buttons
     rutscht. Vorgabe: Text liegt nie auf der Person. */
  .hero-bg img{object-position:50% 0%;transform:scale(1.55);transform-origin:50% 0%}
  .hero::after{background:
    linear-gradient(180deg, rgba(20,18,16,.9) 0%, rgba(20,18,16,.72) 30%, rgba(20,18,16,.4) 52%, rgba(20,18,16,.16) 68%, rgba(20,18,16,0) 82%),
    linear-gradient(0deg, rgba(20,18,16,.72) 0%, rgba(20,18,16,0) 26%),
    linear-gradient(0deg, rgba(152,20,54,.34) 0%, rgba(152,20,54,0) 14%)}
  /* ---------- WISCHKARUSSELL ----------
     Volle Breite, kein eigener Schleier: der Hero-Verlauf darueber ist hier oben
     zu 90% deckend, ein zweiter Verlauf war nur eine graue Platte im Bild.
     Die Folien liegen in einer Flex-Zeile und rasten per scroll-snap ein — damit
     folgt das Wischen dem Finger nativ, mit Schwung und Gummiband, und die Spur
     ist automatisch so hoch wie die hoechste Folie. scroll-snap-stop:always
     verhindert, dass ein Schwung drei Zitate weiterspringt.
     touch-action:pan-x pan-y laesst das senkrechte Scrollen der Seite in Ruhe. */
  .hero-quote{position:static;max-width:none;margin:0 0 18px;text-align:center}
  .hero-quote.is-fading{opacity:1}          /* auf dem Handy wird gewischt, nicht geblendet */
  .hero-quote-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;touch-action:pan-x pan-y;
    scrollbar-width:none;-ms-overflow-style:none}
  .hero-quote-track::-webkit-scrollbar{display:none}
  /* padding-bottom haelt den Platz fuer die Steuerung frei, die weiter unten aus
     dem Fluss genommen und an den Fuss geheftet wird. position:relative macht
     die Folie zu deren Bezugsrahmen. */
  .hero-quote-slide{display:block;flex:0 0 100%;min-width:0;
    scroll-snap-align:center;scroll-snap-stop:always}
  .hero-quote-inner{display:block;padding:0;background:none}
  /* ZWISCHENLOESUNG, bis die Handy-Steuerung entschieden ist.
     Der Glyph steht hier bewusst auf einer eigenen, zentrierten Zeile. Die
     beiden naheliegenderen Wege scheitern beide an derselben Stelle — dass die
     Quelle hier zentriert und mehrzeilig sein darf:
       Textfluss (inline): folgt zwar huebsch dem letzten Wort, rutscht aber bei
         zwei der dreizehn Quellen auf eine eigene Zeile, sobald deren letzte
         Zeile die Breite fast ausfuellt (gemessen 27px tiefer). Die
         Umbruchstelle laesst sich nicht schliessen: ein atomarer Inline-Kasten
         bringt sie nach den Umbruchregeln selbst mit — Leerraum im Markup
         entfernen und geschuetztes Leerzeichen wurden geprueft, beides half nicht.
       Flex-Zeile: bricht konstruktiv nie um, haengt den Glyph aber an den Rand
         des Quellenkastens statt hinter das letzte Wort — gemessene Luecke bis
         zu 140px bei „Marie-Agnes Strack-Rheinmetall (FDP)".
     Eine eigene Zeile ist bei allen dreizehn gleich und sieht gewollt aus statt
     verrutscht. Kostet rund 14px Hoehe; die sind zurueckzuholen, sobald wir uns
     fuer eine endgueltige Steuerung entschieden haben. */
  .hero-quote-byline{display:block;text-align:center;margin-top:11px}
  /* Auf voller Breite darf die Quelle wieder umbrechen — nowrap ist eine
     Desktop-Vorgabe. hyphens:auto, weil „Victor Negrescu (Vizepraesident des
     Europaeischen Parlaments)" sonst laenger ist als jeder Handybildschirm. */
  .hero-quote-cite{white-space:normal;min-width:0;-webkit-hyphens:auto;hyphens:auto}
  /* Bedienleiste unter der Spur: Striche als Positionsanzeige plus das rote
     Quadrat als Steuerung. Der Knopf IN der Folie ist hier abgeschaltet — er
     wackelte mit der Zitatlaenge und beruehrte den Textumbruch. Die Leiste
     erfuellt WCAG 2.2.2 (Anhalten) und schliesst zugleich die Luecke, dass man
     im Karussell nicht sieht, an welcher von dreizehn Stellen man steht. */
  .hero-quote-slide .quote-toggle{display:none}
  .quote-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
  .quote-dots{display:flex;align-items:center;gap:4px}
  /* Striche, keine Punkte: der Rest der Seite kennt Haarlinien und harte Kanten,
     keine Kreise. Der aktive ist heller UND breiter — Farbe allein darf die
     Information nicht tragen (WCAG 1.4.1). */
  .quote-dot{display:block;width:9px;height:2px;background:rgba(243,239,232,.32);
    transition:background var(--dur-base) var(--ease-out),width var(--dur-base) var(--ease-out)}
  .quote-dot.is-on{width:16px;background:var(--paper)}
  /* Gleiche Marke wie der Eckknopf am Desktop: 26px rotes Quadrat, sichtbar
     ueber background-clip, 44px Trefferflaeche. Die negativen Raender halten
     den Layoutbeitrag der Zeile bei 18px. */
  /* Kein rotes Quadrat mehr: neben dreizehn hellen Haarstrichen wirkte der
     gefuellte Block wie ein Fremdkoerper. Der Knopf traegt jetzt denselben Ton
     wie der aktive Strich und gehoert damit sichtbar zur selben Gruppe. Die
     Trefferflaeche bleibt volle 44px, nur die Farbflaeche verschwindet.
     Der Glyph waechst leicht (10x13), damit er neben dem 16px-Strich nicht
     verloren wirkt. Am Desktop bleibt das rote Eckquadrat, wie es ist — dort
     sitzt es in einer Ecke und nicht in einer Reihe heller Striche. */
  .quote-toggle-spur{position:static;flex:0 0 auto;width:44px;height:44px;
    margin:-13px 0;padding:0;transform:none;background:none;color:var(--paper)}
  .quote-toggle-spur .quote-toggle-glyph{width:10px;height:13px}
  .quote-toggle-spur[aria-pressed="true"] .quote-toggle-glyph{width:0;height:0;
    border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
  .quote-toggle-spur:active{background:none;color:rgba(243,239,232,.5)}
  .termin{grid-template-columns:62px 1fr;gap:14px;row-gap:8px;align-items:start}
  .termin-tickets{grid-column:2;justify-self:start;margin-top:2px}
}
/* ---------- KURZE VIEWPORTS: Text lag auf dem Gesicht ----------
   Ab hier greift min-height:620px statt 100svh-87px, der Hero wird also nicht
   mehr kuerzer, waehrend das Foto weiter mit scale(1.55) vom oberen Rand
   skaliert — das Gesicht wandert in den Lead. Gemessen bei 320x720: Zeile 3 auf
   2,56:1, Zeile 4 auf 2,25:1 gegen #f3efe8; gefordert sind 4,5:1. Das ist die
   Pruefbreite von WCAG 1.4.10 Reflow, also 400% Zoom auf einem 1280er Schirm.
   620 + 87 = 707, deshalb 720 als Grenze mit etwas Reserve.
   Der Schleier bleibt hier laenger deckend statt das Bild umzurechnen: das
   Foto behaelt seinen Ausschnitt, nur die Textzone wird dunkler gehalten. */
@media (max-width:900px) and (max-height:720px){
  .hero::after{background:
    linear-gradient(180deg, rgba(20,18,16,.93) 0%, rgba(20,18,16,.88) 38%, rgba(20,18,16,.74) 60%, rgba(20,18,16,.4) 78%, rgba(20,18,16,.1) 92%, rgba(20,18,16,0) 100%),
    linear-gradient(0deg, rgba(20,18,16,.78) 0%, rgba(20,18,16,0) 26%),
    linear-gradient(0deg, rgba(152,20,54,.34) 0%, rgba(152,20,54,0) 14%)}
}
@media (max-width:520px){
  .brand-name{font-size:18px}
  .brand-sub{font-size:9.5px;letter-spacing:.16em}
  .social{gap:14px}
  .termin-cat{font-size:11px;letter-spacing:.05em}
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUZIERTE BEWEGUNG — LETZTE INSTANZ
   Dieser Block steht bewusst ganz am Dateiende. Die Datei dokumentiert die
   Spezifitaetsfalle bereits zweimal beim Megafon, und sie hat trotzdem ein
   drittes Mal zugeschlagen: `.quote-dot{transition:none}` stand oben im
   reduced-motion-Block, die Mobil-Regel deklarierte die Transition 332 Zeilen
   spaeter bei gleicher Spezifitaet neu — und gewann. Die Striche animierten
   also trotz Systemeinstellung.
   Media Queries erhoehen die Spezifitaet NICHT. Wer weiter unten Bewegung
   deklariert, muss sie hier abschalten. Neue Bewegung also immer gegen diesen
   Block gegenpruefen.
   Was hier NICHT steht, ist Absicht: reine Farb- und Deckkraft-Uebergaenge
   bleiben. Reduzierte Bewegung heisst weniger und sanfter, nicht tot. */
@media (prefers-reduced-motion: reduce){
  /* 1) Die Positionsstriche unter dem Handy-Karussell. */
  .quote-dot{transition:none}
  /* 2) Der Pfeil im EU-Band faehrt beim Hover 7px nach rechts (site.css:65).
        Selektor und Spezifitaet muessen die Hover-Regel treffen: (0,3,0). */
  .eu:hover .eu-arrow-inline{transform:none}
  /* 3) Der Skip-Link faehrt beim Fokus 68px ein (top:-56px auf top:12px).
        Er erscheint jetzt sofort — sichtbar ist er dadurch genauso. */
  .skip-link{transition:none}
}