@charset "UTF-8";

/* ==========================================================================
   DIE DEMO
   --------------------------------------------------------------------------
   Leitidee: Plakatwand.
   Schwarz ist die Wand und die Strasse bei Nacht. Gebrochenes Weiss sind
   aufgeklebte Plakate. Was wichtig ist, wird ueber das andere geklebt und
   kehrt sich dadurch um. Eine Strasse mit Mittelstreifen laeuft als
   Rueckgrat durch die Seite und endet bei der Buehne.

   Keine Farbe. Kontrast, Groesse und Umkehrung tragen die Hierarchie.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1  Schriften – lokal ausgeliefert, keine externen Requests
   -------------------------------------------------------------------------- */

/* Display: Archivo, fest instanziiert auf Expanded Black (wdth 125, wght 900).
   Das ist der Charakter der Referenz – extrem breit, geometrisch, schwer.
   Nur die tatsaechlich gebrauchten Zeichen, deshalb 6 KB. */
@font-face {
  font-family: 'Archivo Display';
  src: url('../fonts/archivo-display.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Text: eine Datei mit variabler Strichstaerke 400-700, Breite auf normal
   festgelegt. Ersetzt die frueheren drei statischen Schnitte. */
@font-face {
  font-family: 'Archivo Text';
  src: url('../fonts/archivo-text.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/dm-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/dm-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2  Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ------------------------------------------------------------------
     Farbe gibt es hier nicht – nur Helligkeit. Damit ein Abschnitt sich
     komplett umkehren kann ("aufgeklebtes Plakat"), sind die Werte als
     Rollen benannt, nicht als Farben: --bg ist immer die Flaeche,
     --fg immer der Text darauf. .is-inverted tauscht nur diese Rollen,
     und jede Komponente kippt automatisch mit.
     ------------------------------------------------------------------ */
  --bg:         #f5f5f3;   /* Papier – der Grund der Referenz */
  --bg-lift:    #e8e8e5;   /* leicht abgesetzte Flaeche       */
  --fg:         #0a0a0a;   /* Druckfarbe                      */
  --fg-dim:     #45454a;   /* Fliesstext zweiter Ordnung      */
  --fg-faint:   #6b6b70;   /* Beschriftungen, Zustaende       */
  --fg-mute:    #9a9aa0;   /* deaktiviert                     */
  --fg-ghost:   #dcdcd9;   /* nur eben noch zu erahnen        */

  --rule:       rgba(10, 10, 10, .16);
  --rule-firm:  rgba(10, 10, 10, .38);

  /* Schrift */
  --font-display: 'Archivo Display', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-body:    'Archivo Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Groessen. Plakat oben, ruhig unten. */
  --fs-mega:    clamp(3.9rem, 20.5vw, 13.5rem);
  /* Obergrenze bewusst so gewaehlt, dass "BUNDESPRESSEKONFERENZ" – das
     laengste Wort der Unterzeile – in jeder Breite auf eine Zeile passt.
     Bei 3.1rem fehlten in der Desktop-Spalte acht Pixel, und der Browser
     zerlegte das Wort mitten drin. */
  --fs-outline: clamp(1.1rem, 4.4vw, 2.1rem);
  --fs-h2:      clamp(1.45rem, 7.4vw, 4rem);
  --fs-h3:      clamp(1.15rem, 4.2vw, 1.7rem);
  --fs-lead:    clamp(1.05rem, 2.9vw, 1.35rem);
  --fs-body:    clamp(1rem, 2.4vw, 1.09rem);
  --fs-small:   clamp(.86rem, 2.1vw, .94rem);
  --fs-meta:    clamp(.7rem, 2.05vw, .78rem);

  /* Abstaende */
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4rem;
  --s7: clamp(4rem, 11vw, 8rem);

  --gutter:    clamp(1.15rem, 5vw, 4.5rem);
  --measure:   62ch;
  --max:       1420px;

  /* Die Strasse */
  --spine-x:    clamp(.6rem, 2.4vw, 1.6rem);
  --spine-w:    2px;

  --ease:      cubic-bezier(.2, .7, .3, 1);
  --dur:       .32s;

  color-scheme: light;
}


/* --------------------------------------------------------------------------
   3  Grundlagen
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Das Sprungziel darf nicht unter der Statusleiste verschwinden. */
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
picture,
iframe { max-width: 100%; display: block; }

img { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

a { color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }


/* Fokus – immer sichtbar, nie entfernt. */
:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}

.u-skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 200;
  transform: translateY(-130%);
  background: var(--fg);
  color: var(--bg);
  padding: .8rem 1.3rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}

.u-skip:focus { transform: translateY(0); }

/* Kleine Abstands- und Varianten-Helfer.
   Sie ersetzen Inline-Styles, die von der CSP blockiert wuerden. */
.u-mt-2 { margin-top: var(--s2); }
.u-mt-3 { margin-top: var(--s3); }
.u-mb-3 { margin-bottom: var(--s3); }
.u-dim  { color: var(--fg-faint); }

.u-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.u-visually-hidden,
.u-visually-hidden input {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   Randgrafiken

   Das visuelle System der Referenz: kantige Splitterformen mit duenner
   Kontur, dahinter weiche Tintenflecken. Sie rahmen den Inhalt und lassen
   die Mitte frei.

   Grundsaetze:
   - currentColor, damit sie auf hellen wie dunklen Abschnitten stimmen
   - pointer-events: none, damit sie nie im Weg sind
   - hinter dem Inhalt (z-index), damit sie nie Text verdecken
   - sie ragen bewusst ueber den Rand hinaus; die Abschnitte schneiden ab,
     deshalb entsteht kein horizontaler Scroll
   -------------------------------------------------------------------------- */

.deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: inherit;
}

.deco__item {
  position: absolute;
  display: block;
  width: var(--deco-size, 20rem);
  height: var(--deco-size, 20rem);
  will-change: transform;
}

.deco__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Die Kontur: duenn, praezise, wie ein Siebdruck-Umriss. */
.deco__star {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  opacity: .5;
}

.deco__star--inner {
  opacity: .3;
  transform: scale(.62) rotate(14deg);
  transform-origin: center;
}

/* Der Fleck: weich, tintenartig, deutlich zurueckgenommen. */
.deco__blob {
  fill: currentColor;
  opacity: .09;
  filter: blur(14px);
}

/* Positionen. Alle Elemente sitzen am Rand und ragen hinaus,
   die Mitte bleibt vollstaendig frei. */
.deco--tl { top: -8rem;  left: -13rem;  --deco-size: 22rem; }
.deco--t1 { top: -11rem; left: 34%;     --deco-size: 20rem; }
.deco--tr { top: -9rem;  right: -12rem; --deco-size: 21rem; }
.deco--l1 { top: 14%;    left: -15rem;  --deco-size: 26rem; }
.deco--l2 { top: 60%;    left: -12rem;  --deco-size: 18rem; }
.deco--l3 { top: 38%;    left: -20rem;  --deco-size: 24rem; }
.deco--r1 { top: 22%;    right: -14rem; --deco-size: 24rem; }
.deco--r2 { top: 58%;    right: -17rem; --deco-size: 28rem; }
.deco--r3 { top: 78%;    right: -20rem; --deco-size: 24rem; }
.deco--bl { bottom: -8rem;  left: -11rem;  --deco-size: 20rem; }
.deco--b1 {
  /* Der mittlere Stern bleibt mit Kontur, Bewegungsamplitude und weichem
     Fleck vollstaendig innerhalb des Abschnitts. Ein negativer Wert schnitt
     ihn auf Desktop bisher mit einer sichtbaren horizontalen Kante ab. */
  bottom: 1.5rem;
  left: 42%;
  --deco-size: 22rem;
}
.deco--br { bottom: -9rem;  right: -13rem; --deco-size: 23rem; }

/* Auf schmalen Geraeten reduziert, aber klar erkennbar: die Formen werden
   kleiner und ruecken weiter nach aussen, damit die Inhaltsspalte frei bleibt. */
@media (max-width: 48rem) {
  /* Auf dem Telefon bleibt nur die aeussere Spitzenzone sichtbar:
     die Formen sitzen fast vollstaendig ausserhalb des Viewports. */
  .deco__item { --deco-size: 12rem; }

  .deco--tl { left: -9rem;   top: -6rem; }
  .deco--t1 { left: 46%;     top: -8rem;  --deco-size: 13rem; }
  .deco--tr { right: -9rem;  top: -6rem; }
  .deco--l1 { left: -9.5rem; --deco-size: 14rem; }
  .deco--l2 { left: -9rem; }
  .deco--l3 { left: -10.8rem; --deco-size: 12rem; }
  .deco--r1 { right: -9rem; }
  .deco--r2 { right: -10rem; --deco-size: 15rem; }
  .deco--r3 { right: -10.8rem; --deco-size: 12rem; }
  .deco--bl { left: -8rem;   bottom: -5rem; }
  .deco--b1 { left: 52%;     bottom: -8rem; --deco-size: 13rem; }
  .deco--br { right: -9rem;  bottom: -6rem; }

  .deco__star { opacity: .42; }
  .deco__blob { filter: blur(9px); opacity: .06; }

  /* Die dichteste Stufe wird auf dem Telefon ausgeduennt. */
  .deco--hero .deco--l2,
  .deco--hero .deco--b1,
  .deco--hero .deco--l1,
  .deco--dense .deco--bl,
  .deco--dense .deco--l2 { display: none; }
}

/* Rechtsseiten: deutlich ruhiger. */
.deco--calm .deco__star { opacity: .26; }
.deco--calm .deco__blob { opacity: .04; }

/* Der Live-Ticker ist die Flaeche, die am schnellsten erfassbar sein muss.
   Hier bleiben die Randgrafiken bewusst am schwaechsten und weichen der
   Inhaltsspalte zusaetzlich aus. */
#live .deco__star { opacity: .3; }
#live .deco__blob { opacity: .05; }
#live .deco--l1 { left: -18rem; }
#live .deco--r1 { right: -17rem; }
#live .deco--r2 { right: -20rem; }

@media (max-width: 48rem) {
  #live .deco--l1 { left: -11rem; }
  #live .deco--r1 { right: -11rem; }
  #live .deco--r2 { right: -12rem; }
}


/* Druckkorn. Sehr zurueckhaltend, rein dekorativ. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   4  Raster
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Inhaltsspalte, die neben der Strasse beginnt. */
.wrap--spined {
  padding-left: calc(var(--gutter) + var(--spine-x) + 1.35rem);
}

.section {
  position: relative;
  padding-block: var(--s7);
  /* Die Randgrafiken ragen absichtlich ueber den Rand hinaus.
     Der Abschnitt schneidet ab – so entsteht nie horizontaler Scroll. */
  overflow: hidden;
}

/* Inhalt liegt immer ueber den Randgrafiken. */
.section > .wrap,
.hero > .wrap,
.legal > .wrap {
  position: relative;
  z-index: 1;
}

.section--tight { padding-block: clamp(2.5rem, 7vw, 4.5rem); }

/* Die umgekehrte Flaeche: das aufgeklebte Plakat.
   Hier werden ausschliesslich die Rollen getauscht. Jede Komponente
   darunter kippt dadurch von selbst mit und braucht keine Sonderregel –
   genau daran war die erste Fassung gescheitert (weisse Schrift auf
   weissem Grund bei den Teilnahme-Schaltflaechen). */
.is-inverted {
  --bg:        #0a0a0a;
  --bg-lift:   #171717;
  --fg:        #f5f5f3;
  --fg-dim:    #b6b6b2;
  --fg-faint:  #8c8c88;
  --fg-mute:   #5a5a58;
  --fg-ghost:  #202020;

  --rule:      rgba(245, 245, 243, .20);
  --rule-firm: rgba(245, 245, 243, .42);

  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}



/* Die Strasse: gestrichelte Mittellinie als vertikales Rueckgrat. */
.spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) + var(--spine-x));
  width: var(--spine-w);
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule-firm) 0 18px,
    transparent 18px 34px
  );
}

/* Im Hero taucht die Fahrbahnmarkierung aus dem Nichts auf,
   statt hart an der Oberkante zu beginnen. */
.spine--head {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}

/* Letzter Abschnitt: die Markierung wird durchgezogen und endet an
   einer Haltelinie – die Strasse ist angekommen. */
.spine--end {
  background-image: linear-gradient(
    to bottom,
    var(--rule-firm) 0 62%,
    transparent 62% 100%
  );
}

.spine--end::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  width: 1.6rem;
  height: 3px;
  background: var(--rule-firm);
}

/* Querstrich, der einen Abschnitt an die Strasse andockt. */
.spine-tick {
  position: absolute;
  left: calc(var(--gutter) + var(--spine-x));
  width: 1.05rem;
  height: var(--spine-w);
  background: var(--rule-firm);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   5  Typografie-Bausteine
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0;
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.042em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* Outline-Schrift. Solide Darstellung als Ausgangspunkt, damit ohne
   Unterstuetzung fuer text-stroke nichts unsichtbar wird. */
.outline {
  /* Bewusst NICHT die Display-Schrift: die Referenz lebt davon, dass
     genau ein Element dominiert. Der Textschnitt in 700 haelt die
     Konturen offen und laesst dem Titel den Auftritt. */
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .002em;
  text-transform: uppercase;
  color: var(--fg);
  /* Keine automatische Silbentrennung: der Browser bricht sonst
     "BUNDESPRES-SEKONFERENZ" – falsch getrennt und typografisch daneben.
     Ohne sie fallen die Umbrueche auf die Wortfugen, was der Zeile die
     Gliederung eines Plakats gibt. break-word bleibt als Notnagel, falls
     die Redaktion spaeter ein noch laengeres Wort eintraegt. */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

@supports ((-webkit-text-stroke: 1px currentColor) or (text-stroke: 1px currentColor)) {
  .outline {
    color: transparent;
    -webkit-text-stroke: 1.1px var(--fg);
    text-stroke: 1.1px var(--fg);
    paint-order: stroke fill;
  }

    @media (min-width: 48rem) {
    .outline { -webkit-text-stroke-width: 1.5px; text-stroke-width: 1.5px; }
  }
}

.section-head > * { min-width: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s4);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  /* Flex-Elemente schrumpfen sonst nicht unter ihre Wortbreite und
     schieben die Ueberschrift aus dem Viewport. */
  min-width: 0;
  overflow-wrap: break-word;
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.038em;
  text-transform: uppercase;
}

/* "PROGRAMM" ist das laengste einzeilige Bereichswort. Seine leicht
   kleinere fluide Groesse verhindert, dass nur das letzte M an Tablet-
   und schmalen Desktopbreiten in eine eigene Zeile faellt. */
#ablauf-titel {
  font-size: clamp(1.45rem, 6.7vw, 3.6rem);
  overflow-wrap: normal;
  word-break: normal;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 34ch;
  font-weight: 500;
}

.prose {
  max-width: var(--measure);
  color: var(--fg-dim);
}

.prose p + p { margin-top: var(--s2); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}


/* --------------------------------------------------------------------------
   6  Schaltflaechen
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .95rem 1.6rem;
  border: 2px solid var(--fg);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn--solid {
  background: var(--fg);
  color: var(--bg);
}

.btn:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--fg);
  color: var(--bg);
}

.btn--solid:hover:not(:disabled):not([aria-disabled='true']) {
  background: transparent;
  color: var(--fg);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  border-color: var(--fg-mute);
  color: var(--fg-faint);
  background: transparent;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.btn-row > .btn { flex: 1 1 14rem; }

@media (min-width: 48rem) {
  .btn-row > .btn { flex: 0 0 auto; }
}


/* --------------------------------------------------------------------------
   7  Statusleiste
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 3.1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.topbar__mark {
  display: inline-flex;
  align-items: center;
  /* Beruehrflaeche mindestens 44px hoch, ohne die Leiste aufzublaehen. */
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: clamp(.86rem, 3vw, 1rem);
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}

.topbar__meta {
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--fg);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--rule-firm);
  white-space: nowrap;
}

.topbar__link:hover { box-shadow: inset 0 -1px 0 var(--fg); }

/* Auf sehr schmalen Geraeten weicht die Mitte, nicht der Inhalt. */
@media (max-width: 26rem) {
  .topbar__meta { display: none; }
}


/* --------------------------------------------------------------------------
   8  Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Bewusst knapp gehalten: die Live-Updates sollen auf dem Handy
     unmittelbar nach dem Hero stehen, nicht erst nach langem Scrollen. */
  min-height: min(74svh, 44rem);
  padding-top: clamp(2rem, 8vw, 4rem);
  padding-bottom: clamp(1.75rem, 5vw, 3rem);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__kicker {
  margin-bottom: clamp(1.1rem, 4vw, 2rem);
}

.hero__title {
  font-size: var(--fs-mega);
  margin-bottom: clamp(.9rem, 3.4vw, 1.6rem);
}

/* "DIE" und "DEMO" brechen immer bewusst, nie zufaellig. */
.hero__title span {
  display: block;
}

/* Keine eigene Maximalbreite: die Zeile darf genau so breit werden wie
   ihre Spalte. Eine geratene ch-Breite war hier schmaler als die Spalte
   und hat "BUNDESPRESSEKONFERENZ" mitten im Wort zerlegt. */
.hero__claim {
  font-size: var(--fs-outline);
  margin-bottom: clamp(1.5rem, 5vw, 2.6rem);
}

/* Das kleine Bindewort gehoert semantisch zur Claim-Zeile, soll aber nicht
   wie die plakative Konturschrift behandelt werden. */
.hero__claim-prefix {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--fg);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

.hero__facts {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-top: var(--s2);
  border-top: 1px solid var(--rule-firm);
  margin-bottom: clamp(1.5rem, 4.5vw, 2.2rem);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.hero__where { color: var(--fg-dim); }

@media (min-width: 60rem) {
  .hero {
    min-height: min(84svh, 52rem);
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
    /* Der Countdown braucht ein eigenes Feld. Ohne benannte Flaeche wird er
       automatisch platziert und landet unter der Konturzeile. */
    grid-template-areas:
      'kicker kicker'
      'title  title'
      'claim  facts'
      'claim  count'
      'claim  actions';
    align-items: end;
    column-gap: var(--s5);
  }

  .hero__kicker  { grid-area: kicker; }
  .hero__title   { grid-area: title; }
  .hero__claim   { grid-area: claim; margin-bottom: 0; align-self: end; }
  .hero__facts   { grid-area: facts; margin-bottom: var(--s2); }
  .countdown     { grid-area: count;  margin-bottom: var(--s3); }
  .hero__actions { grid-area: actions; }
}


/* --------------------------------------------------------------------------
   Countdown

   Traegt die Display-Schrift, bleibt aber bewusst kleiner als der Titel und
   kleiner als die Ueberschrift des Live-Tickers: er informiert, er dominiert
   nicht. Feste Ziffernbreite, damit beim Weiterzaehlen nichts springt.
   -------------------------------------------------------------------------- */

.countdown {
  margin-bottom: clamp(1.4rem, 4vw, 2rem);
}

.countdown__units {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem clamp(.9rem, 3vw, 1.6rem);
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
}

.countdown__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  line-height: .9;
  letter-spacing: -.035em;
  /* Tabellenziffern und feste Mindestbreite: verhindert Layoutspruenge,
     wenn aus 9 eine 10 wird oder Sekunden zurueckzaehlen. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  min-width: 1.9ch;
  display: inline-block;
}

.countdown__label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.countdown__done {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 5vw, 2rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.countdown__done[hidden] { display: none; }

/* In der schmalen Desktop-Seitenspalte ist ein bewusstes 2-x-2-Raster
   ruhiger als ein zufaelliger Umbruch nach der dritten Einheit. Auf Mobile
   und Tablet bleibt die kompakte Viererzeile erhalten. */
@media (min-width: 60rem) {
  .countdown__units {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem var(--s2);
  }

  .countdown__unit { min-width: 0; }
}


/* --------------------------------------------------------------------------
   9  Live-Updates
   -------------------------------------------------------------------------- */

.live {
  border-top: 2px solid var(--fg);
  padding-top: clamp(1.75rem, 5vw, 2.75rem);
}

.live__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s3);
}

/* Statusanzeige ohne Farbe: ein pulsierendes Quadrat. */
.pulse {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.pulse::before {
  content: '';
  width: .58rem;
  height: .58rem;
  background: var(--fg);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .28; transform: scale(.72); }
}

.live__status {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.live__refresh {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  box-shadow: inset 0 -1px 0 var(--rule-firm);
  padding: .3rem 0;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 2.75rem;
}

.live__refresh:hover { color: var(--fg); box-shadow: inset 0 -1px 0 var(--fg); }
.live__refresh:disabled { color: var(--fg-mute); cursor: progress; }

.feed { display: block; }

.feed__item {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.3rem, 4vw, 1.9rem);
}

.feed__item:first-child { border-top: 0; padding-top: var(--s1); }

/* Angeheftet: ueber die anderen geklebt, also umgekehrt. */
/* Angeheftet heisst: darueber geklebt. Deshalb kehrt sich der Eintrag um –
   dieselbe Rollenvertauschung wie bei einem ganzen Abschnitt, damit auch
   Kennzeichnungen, Zeitstempel und Bildrahmen korrekt mitkippen. */
.feed__item--pinned {
  --bg:        #0a0a0a;
  --bg-lift:   #171717;
  --fg:        #f5f5f3;
  --fg-dim:    #b6b6b2;
  --fg-faint:  #8c8c88;
  --fg-mute:   #5a5a58;
  --fg-ghost:  #202020;

  --rule:      rgba(245, 245, 243, .20);
  --rule-firm: rgba(245, 245, 243, .42);

  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;

  border-top: 0;
  padding-inline: clamp(1rem, 4vw, 1.75rem);
  margin-bottom: var(--s3);
  /* Ragt leicht ueber die Spalte hinaus, wie ein zu gross geklebtes Blatt. */
  margin-inline: calc(clamp(1rem, 4vw, 1.75rem) * -1);
}

.feed__meta {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.feed__time { color: var(--fg-dim); }

.tag {
  display: inline-block;
  padding: .28rem .55rem;
  border: 1px solid currentColor;
  font-size: var(--fs-meta);
  letter-spacing: .12em;
  line-height: 1;
}

/* WICHTIG wird gefuellt statt konturiert – gleiche Sprache, mehr Gewicht. */
.tag--wichtig {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.feed__pin {
  margin-left: auto;
  letter-spacing: .12em;
  color: var(--fg-mute);
}

.feed__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}

.feed__body {
  max-width: var(--measure);
  color: var(--fg-dim);
}

.feed__body p + p { margin-top: .7rem; }

.feed__figure {
  margin-top: var(--s2);
  max-width: 42rem;
}

.feed__figure img {
  width: 100%;
  border: 1px solid var(--rule);
}

/* Leerer Zustand – gestaltet, nicht leer. */
.feed__empty {
  border: 1px dashed var(--rule-firm);
  padding: clamp(1.5rem, 6vw, 2.75rem);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.7;
  max-width: 46ch;
}

.feed__error {
  margin-top: var(--s2);
  padding: .8rem 1rem;
  border-left: 2px solid var(--fg);
  background: var(--bg-lift);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

@media (min-width: 60rem) {
  .feed__item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: var(--s4);
  }

  .feed__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 0;
  }

  .feed__pin { margin-left: 0; }
}


/* --------------------------------------------------------------------------
   10  Teilnahme

   Eine einzige Schaltflaeche, die immer die naechste moegliche Aktion zeigt.
   Kein Zaehler, keine zwei konkurrierenden Optionen: der Zustand ist
   entweder "dabei" oder "nicht dabei".
   -------------------------------------------------------------------------- */

.rsvp__grid {
  display: grid;
  gap: var(--s3);
}

@media (min-width: 60rem) {
  .rsvp__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: var(--s6);
  }
}

.rsvp { margin-top: var(--s3); }

.rsvp__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.2rem;
  padding: 1.1rem 1.6rem;
  border: 2px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.rsvp__btn:hover:not(:disabled) {
  background: transparent;
  color: var(--fg);
}

/* Zurueckziehen ist die ruhigere Aktion: umrandet statt gefuellt. */
.rsvp__btn--out {
  background: transparent;
  color: var(--fg);
}

.rsvp__btn--out:hover:not(:disabled) {
  background: var(--fg);
  color: var(--bg);
}

.rsvp__btn:disabled { opacity: .55; cursor: progress; }

.rsvp__state {
  margin-top: var(--s2);
  min-height: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: .04em;
}

.rsvp__state[data-tone='error'] { font-weight: 500; }

.rsvp__note {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-faint);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   11  Video
   -------------------------------------------------------------------------- */

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--rule-firm);
  background: var(--bg-lift);
  overflow: hidden;
}

.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__placeholder,
.video__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3);
  text-align: center;
}

/* Der Platzhalter ist bewusst zurueckgenommen: er soll als bewusster
   Bestandteil lesbar sein, aber nicht wie eine aktive Schaltflaeche. */
.video__placeholder { color: var(--fg-mute); }

.video__consent {
  background: var(--bg-lift);
  border: 0;
  color: var(--fg);
  cursor: pointer;
  width: 100%;
}

.video__play {
  width: clamp(3.2rem, 11vw, 4.6rem);
  height: clamp(3.2rem, 11vw, 4.6rem);
  flex: none;
}

.video__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.video__caption--sub { letter-spacing: .05em; }

.video__consent:hover .video__caption { color: var(--fg); }

.video__note {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .05em;
  color: var(--fg-faint);
  max-width: 52ch;
}


/* --------------------------------------------------------------------------
   12  Format, Programm
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: var(--s6);
  }
}

.note {
  border: 1px dashed var(--rule-firm);
  padding: clamp(1.15rem, 4vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--fg-dim);
}

.credit {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem var(--s2);
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}


/* --------------------------------------------------------------------------
   13  Spenden
   -------------------------------------------------------------------------- */

.donate {
  display: grid;
  gap: var(--s4);
  align-items: start;
}

@media (min-width: 48rem) {
  .donate {
    grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
    gap: var(--s5);
  }
}

.donate__qr {
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 1;
  border: 1px solid var(--rule-firm);
  background: var(--fg);
}

.donate__qr img { width: 100%; height: 100%; object-fit: contain; }


/* --------------------------------------------------------------------------
   14  Ort und Buehne
   -------------------------------------------------------------------------- */

.place__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule-firm);
  background: var(--bg-lift);
  overflow: hidden;
}

@media (min-width: 48rem) {
  .place__map { aspect-ratio: 16 / 9; }
}

.place__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.place__tba {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3);
  text-align: center;
}

.place__grid {
  position: absolute;
  inset: 0;
  opacity: .28;
  pointer-events: none;
}

.place__label {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1rem, 4.2vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 18ch;
}

.place__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--bg-lift);
  border: 0;
  color: var(--fg);
  cursor: pointer;
  text-align: center;
  width: 100%;
}

.stage {
  width: 100%;
  max-width: 34rem;
  margin-top: var(--s4);
  opacity: .8;
}

.address {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.8;
  letter-spacing: .04em;
  font-style: normal;
}


/* --------------------------------------------------------------------------
   15  Fusszeile
   -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: var(--s5) var(--s4);
}

.foot__mark {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 15vw, 8rem);
  line-height: .8;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--fg-ghost);
  margin-bottom: var(--s4);
  user-select: none;
}

.foot__rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2) var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--fg-dim);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 transparent;
}

.foot__links a:hover { color: var(--fg); box-shadow: inset 0 -1px 0 var(--rule-firm); }

/* Der Redaktionszugang: ein typografisches Zeichen, kein Geheimnis.
   Die Sicherheit liegt vollstaendig auf dem Server. */
.foot__editorial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--fg-ghost);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  transition: color var(--dur) var(--ease);
}

.foot__editorial:hover,
.foot__editorial:focus-visible { color: var(--fg-faint); }


/* --------------------------------------------------------------------------
   16  Rechtsseiten
   -------------------------------------------------------------------------- */

.legal { padding-block: clamp(2.5rem, 8vw, 5rem) var(--s7); }

.legal__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.038em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
}

.legal__body { max-width: var(--measure); }

.legal__body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}

.legal__body h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  margin-top: var(--s3);
  margin-bottom: .4rem;
}

.legal__body p,
.legal__body li { color: var(--fg-dim); }

.legal__body p + p { margin-top: var(--s2); }

.legal__body ul {
  margin-top: var(--s2);
  display: grid;
  gap: .5rem;
}

.legal__body li { padding-left: 1.1rem; position: relative; }

.legal__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: .5rem;
  height: 1px;
  background: var(--rule-firm);
}

.legal__body a { color: var(--fg); }

/* Noch auszufuellendes Rechtsfeld – klar als offen markiert. */
.pending {
  display: inline-block;
  padding: .15rem .5rem;
  border: 1px dashed var(--rule-firm);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}


/* --------------------------------------------------------------------------
   17  Bewegung
   Ein orchestrierter Moment beim Laden, sonst Ruhe.
   Alle Animationen enden im sichtbaren Zustand: ohne JavaScript und bei
   abgebrochener Animation bleibt der Inhalt lesbar.
   -------------------------------------------------------------------------- */

@keyframes paste {
  from { opacity: 0; clip-path: inset(105% 0 0 0); transform: translateY(.42em); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-paste { animation: paste .62s var(--ease) both; }

/* Der Hero baut sich als eine choreografierte Bewegung auf, Zeile fuer
   Zeile – wie ein Plakat, das von unten nach oben angeklebt wird.
   Die Verzoegerungen stehen hier statt als style-Attribut im HTML:
   die Content Security Policy laesst Inline-Styles bewusst nicht zu. */
.hero__kicker                 { animation-delay: 0ms; }
.hero__title span:first-child { animation-delay: 90ms; }
.hero__title span:last-child  { animation-delay: 180ms; }
.hero__claim                  { animation-delay: 270ms; }
.hero__facts                  { animation-delay: 360ms; }
.countdown                    { animation-delay: 405ms; }
.hero__actions                { animation-delay: 450ms; }

/* Erst sichtbar machen, wenn JavaScript den Beobachter gestartet hat. */
.js .reveal { opacity: 0; }

.js .reveal.is-visible {
  animation: fade-up .5s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal { opacity: 1; }
  .pulse::before { animation: none; opacity: 1; }
}

/* Rechtsseiten brauchen denselben Rahmen wie die Abschnitte, damit die
   Randgrafiken auch dort nicht ueber den Viewport hinaus schieben. */
.legal {
  position: relative;
  overflow: hidden;
}