@import url("/css/fonts.css");

/* =============================================================================
   KÖRNERWOCHE 2026
   Die Blöcke: die Woche, die Teilnehmer, der Film, die Lieder, die Beiträge
   auf X, Körner selbst mit Zeitstrahl und der Newsletter.

   Bewegung: --p ist der Fortschritt eines Elements durch das Fenster,
   --cut der Fortschritt der klebenden Kopffläche, --zug der Fortschritt des
   Zeitstrahls. .is-in schaltet einmalige Auftritte frei.
   ============================================================================= */

:root {
  --gruen:        #0C2A21;
  --gruen-mitte:  #14382C;
  --gruen-nacht:  #071A14;
  --bordeaux:     #6B1230;
  --bordeaux-hell:#8E1A3D;
  --messing:      #C79A3C;
  --messing-hell: #E3C27E;
  --messing-tief: #7A5A17;
  --papier:       #F3EDE2;
  --creme:        #FBF7EF;
  --papier-dim:   #C9BFAE;
  --fokus:        #F0D89B;

  --linie-stark: rgba(199, 154, 60, .22);
  --linie-leise: rgba(243, 237, 226, .12);

  --anzeige: Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --grotesk: Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kursiv: "EB Garamond", Garamond, "Adobe Garamond Pro", "Times New Roman", serif;
  --mono: Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --chrome: 52px;

  --fs-hero:    clamp(3rem, 15vw, 10.5rem);
  --fs-titel:   clamp(2rem, 5vw, 4rem);
  --fs-lead:    clamp(1.08rem, .5vw + 1rem, 1.25rem);
  --fs-body:    clamp(1rem, .3vw + .95rem, 1.0625rem);
  --fs-label:   clamp(.68rem, .3vw + .6rem, .74rem);
  --fs-mono:    clamp(.72rem, .25vw + .66rem, .82rem);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --breite: 84rem;
  --rand: clamp(1.25rem, 5vw, 4rem);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.22, 1, .36, 1);

  color-scheme: dark;
}
/* Am schmalen Rand steht die Leiste zweizeilig, die Navigation darunter.
   Ab 740 Pixeln passt alles in eine Zeile, auch am Tablet und quer am Handy. */
@media (max-width: 739px) { :root { --chrome: 88px; } }

/* ------------------------------------------------------------- Grundlagen -- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  --page-bg: var(--gruen);
  background: var(--page-bg);
  transition: background-color 420ms linear;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: transparent; color: var(--papier);
  font-family: var(--grotesk); font-size: var(--fs-body); line-height: 1.6;
  font-variant-numeric: lining-nums tabular-nums; overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p, figure, blockquote, figcaption { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video { max-width: 100%; display: block; }

a { color: var(--messing-hell); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--papier); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--chrome) + 16px); }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.springlink {
  position: absolute; left: var(--rand); top: -100px; z-index: 100;
  background: var(--messing); color: var(--gruen-nacht);
  padding: 10px 18px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; font-size: var(--fs-label); text-decoration: none;
  transition: top 160ms var(--ease-out);
}
.springlink:focus { top: calc(var(--chrome) + 12px); }

.bahn { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
section { position: relative; }
.woche, .teilnehmer, .beitraege { padding-block: clamp(2.75rem, 5.5vw, 5rem); }

.kicker {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--messing); margin-bottom: var(--s2);
}
.titel {
  font-family: var(--anzeige); font-weight: 900; font-size: var(--fs-titel);
  line-height: 1; letter-spacing: -.012em; text-transform: uppercase;
}
/* Überschrift aus zwei Schriften wie die Wortmarke: oben Garamond kursiv,
   darunter Barlow in Versalien. */
.titel--paar .titel__weich {
  display: block; font-family: var(--kursiv); font-style: italic; font-weight: 500;
  font-size: .95em; line-height: 1.02; letter-spacing: 0; text-transform: none;
}
.titel--paar .titel__hart { display: block; margin-top: .04em; }
.lead {
  font-family: var(--kursiv); font-style: italic; font-weight: 400;
  font-size: calc(var(--fs-lead) * 1.28); line-height: 1.34;
  max-width: 44ch; margin-top: var(--s3);
}
.dim { color: var(--papier-dim); }
.mono {
  font-family: var(--mono); font-weight: 600; font-size: var(--fs-mono);
  letter-spacing: .1em; font-variant-numeric: lining-nums tabular-nums;
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--messing); color: var(--gruen-nacht);
  font-family: var(--grotesk); font-weight: 900;
  font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  min-height: 52px; padding: 0 28px; border: 0; cursor: pointer; text-decoration: none;
  transition: background 160ms linear, color 160ms linear;
}
.knopf:hover { background: var(--messing-hell); color: var(--gruen-nacht); }
.knopf:disabled { opacity: .55; cursor: progress; }
.knopf--klein { min-height: 42px; padding: 0 20px; }

.textlink {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-family: inherit; font-size: inherit; font-weight: 600;
  color: var(--messing-hell); text-decoration: none; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--linie-stark); padding: 0 0 2px;
}
.textlink::after { content: "→"; font-family: var(--mono); }
.textlink:hover { color: var(--papier); border-bottom-color: var(--papier); }
/* Größere Tippfläche, ohne dass sich am Aussehen etwas ändert. */
.hero__aktion .textlink { position: relative; }
.hero__aktion .textlink::before { content: ""; position: absolute; inset: -8px -6px; }

/* ------------------------------------------------------------- Kopfleiste -- */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: rgba(7, 26, 20, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie-stark);
}
.kopf__inner {
  height: var(--chrome);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3);
  max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand);
}
.kopf__marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--papier); text-decoration: none;
}
/* Das Signet in der Leiste, dieselbe Maske wie in der Wortmarke. */
.kopf__bild {
  width: 25px; height: 26px; flex: none;
  background: currentColor;
  -webkit-mask: url("/assets/marke/leier-schwert-klein.png") center / contain no-repeat;
  mask: url("/assets/marke/leier-schwert-klein.png") center / contain no-repeat;
  transition: color 240ms var(--ease-out);
}
.kopf.is-tief .kopf__bild { color: var(--messing-hell); }
.kopf__nav { justify-self: center; display: flex; gap: clamp(12px, 2vw, 28px); }
.kopf__nav a {
  font-family: var(--mono); font-size: var(--fs-mono); color: var(--papier-dim);
  text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.kopf__nav a.is-hier { color: var(--messing-hell); border-bottom-color: var(--messing); }
@media (hover: hover) { .kopf__nav a:hover { color: var(--messing-hell); border-bottom-color: var(--messing); } }
.kopf__cta {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px; white-space: nowrap;
  background: var(--messing); color: var(--gruen-nacht);
  font-weight: 700; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
}
.kopf__cta:hover { background: var(--messing-hell); color: var(--gruen-nacht); }
.fortschritt {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--messing); transform: scaleX(var(--fortschritt, 0)); transform-origin: left;
}
/* Auf Touchgeräten brauchen die Ziele Platz für den Daumen. Mit der Maus
   bleibt die Leiste so schmal wie entworfen. */
.kopf__marke { min-height: 44px; }
@media (pointer: coarse) {
  .kopf__cta { height: auto; min-height: 44px; }
}
/* Einzeilige Leiste am Touchgerät, etwa am Handy quer: Die Abschnittslinks
   bekommen die volle Daumenhöhe. Die Leiste ist 52 Pixel hoch, sie passen hinein. */
@media (pointer: coarse) and (min-width: 740px) {
  .kopf__nav a { display: flex; align-items: center; min-height: 44px; padding-bottom: 0; }
}
@media (max-width: 739px) {
  .kopf__inner {
    height: auto; min-height: var(--chrome);
    grid-template-columns: auto 1fr;
    grid-template-areas: "marke cta" "nav nav";
    align-items: center; gap: 0; padding-block: 6px 0;
  }
  .kopf__marke { grid-area: marke; }
  .kopf__cta { grid-area: cta; justify-self: end; height: auto; min-height: 44px; }
  .kopf__nav {
    grid-area: nav; justify-self: stretch; margin-top: 0;
    gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
    padding-bottom: 0; scrollbar-width: none;
  }
  .kopf__nav::-webkit-scrollbar { display: none; }
  .kopf__nav a { flex: none; padding: 10px 0 8px; }
  /* Passt die Navigation nicht ganz hinein, läuft sie am Rand weich aus.
     So sieht man, dass es seitlich weitergeht. */
  .kopf__nav.geht-weiter {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .kopf__nav.geht-weiter.war-weiter {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  }
  .kopf__nav.war-weiter:not(.geht-weiter) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
    mask-image: linear-gradient(to right, transparent, #000 36px);
  }
}
/* Unterseiten ohne Navigation: eine Zeile, das Datum steht in der Mitte. */
@media (max-width: 739px) {
  .einreichen .kopf__inner {
    min-height: 0; padding-block: 6px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marke datum cta";
    gap: 0 var(--s2);
  }
  .einreichen .kopf__datum { grid-area: datum; justify-self: center; }
}
/* Unter 600 Pixeln fällt das Datum weg. Dann zwei Spalten ohne leere Mitte,
   sonst frisst der doppelte Abstand den Platz und „Zur Startseite“ bricht um. */
@media (max-width: 599px) {
  .einreichen .kopf__datum { display: none; }
  .einreichen .kopf__inner { grid-template-columns: auto 1fr; grid-template-areas: "marke cta"; }
}
/* Bei flachem Fenster und offener Tastatur rollt die Leiste mit weg. */
@media (max-height: 500px) { .einreichen .kopf { position: relative; } }
@media (max-width: 460px) {
  .kopf__cta { padding: 0 11px; letter-spacing: .06em; }
  .kopf__marke { font-size: .75rem; letter-spacing: .1em; }
}

/* ------------------------------------------------------------ Titelschlag -- */
.hero { background: var(--gruen); }
.hero__sticky {
  position: sticky; top: 0; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: calc(var(--chrome) + clamp(2rem, 5vw, 4rem)) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  opacity: calc(1 - var(--weg, 0) * .92);
  transform: translate3d(0, calc(var(--weg, 0) * -48px), 0);
}
.hero__bahn { display: grid; gap: var(--s4); width: 100%; }
@media (min-width: 1000px) {
  .hero { height: 185svh; }
  .hero__bahn { grid-template-columns: minmax(0, 1fr) 380px; align-items: end; gap: var(--s5); }
  /* Neben dem Bildnis bleibt nur die linke Spalte. Die Wortmarke darf nicht
     nach der Fensterbreite wachsen, sonst schiebt sie sich unter das Bild.
     4,95 ist die Breite der Marke in Vielfachen ihrer Schriftgröße. */
  .hero__text {
    /* Die Bahn ist auf --breite begrenzt, deshalb zählt nicht die Fensterbreite,
       sondern die kleinere von beiden. */
    --spalte: calc(min(100vw, var(--breite)) - 2 * var(--rand) - 380px - var(--s5));
    --fs-hero: min(10.5rem, calc(var(--spalte) / 4.7));
  }
}
@media (max-width: 999px) {
  .hero { height: auto; }
  /* Die Leiste steht hier im Fluss, ihre Höhe darf nicht noch einmal ins
     Polster. */
  .hero__sticky { position: static; min-height: 0; overflow: visible; padding-top: clamp(2rem, 5vw, 4rem); }
  /* Ohne Bildnis daneben darf die Marke die ganze Breite nehmen. 3,6 ist die
     Breite von KÖRNER in Vielfachen der Schriftgröße, mit etwas Reserve. */
  .hero__text { --fs-hero: min(10.5rem, calc((100vw - 2 * var(--rand)) / 4.7)); }
}

/* Die Wortmarke nach der Vorlage des Auftraggebers. Oben KÖRNER in Barlow Black.
   Darunter links der Untertitel in drei Zeilen, rechts daneben woche in
   Garamond Kursiv, groß, mit dem Ausleger des h direkt rechts neben dem R und
   ein Stück hoch in die Zeile von KÖRNER. Alle Maße sind in em der Wortmarke
   angegeben und an der Vorlage ausgemessen, deshalb liegen die drei Teile
   absolut in einem Kasten fester Größe. */
.wortmarke {
  position: relative;
  font-size: var(--fs-hero); line-height: 1;
  padding-top: .1em;
  color: var(--papier); user-select: none; z-index: 2;
}
.wortmarke__lage {
  position: relative; display: block;
  width: var(--marke-b, 4.622em); height: var(--marke-h, 1.669em);
}
.wortmarke__hart {
  position: absolute; left: 0; top: 0; line-height: 1; white-space: nowrap;
  font-family: var(--anzeige); font-weight: 900;
  letter-spacing: -.02em; text-transform: uppercase;
}
.wortmarke__weich {
  position: absolute; line-height: 1; white-space: nowrap;
  left: var(--woche-links, 1.1423em); top: var(--woche-oben, 0.3382em);
  font-family: var(--kursiv); font-style: italic; font-weight: 500;
  font-size: var(--woche-groesse, 1.3659em); letter-spacing: -.005em;
}
.wortmarke__satz {
  position: absolute; left: var(--satz-links, 0.2180em); top: var(--satz-oben, 9.7701em);
  font-family: var(--grotesk); font-weight: 500;
  font-size: var(--satz-groesse, 0.1250em); line-height: var(--satz-zeile, 1.1451);
  white-space: nowrap; letter-spacing: 0;
}
.wortmarke__unten { display: block; color: var(--papier); }
/* Auf schmalen Bildschirmen wäre der Untertitel neben woche kleiner als
   zehn Pixel. Dort steht er unter der Marke in lesbarer Größe. */
@media (max-width: 599px) {
  .wortmarke__lage { height: auto; padding-top: var(--marke-h, 1.669em); }
  .wortmarke__satz {
    position: static; display: block; margin-top: .9rem;
    font-size: clamp(.95rem, 4vw, 1.1rem); line-height: 1.35;
  }
}
/* Die Kante hängt hart am Scrollrad. Bis --cut 50 Prozent wächst die Fläche von
   oben herein, danach zieht sie sich nach unten wieder heraus. */
.wortmarke__oben {
  position: absolute; inset: 0; padding-top: .1em;
  color: var(--messing-hell); background: var(--bordeaux);
  clip-path: inset(var(--cut-oben, 0%) 0 var(--cut-unten, 100%) 0);
}
.hero__unten {
  transform: translate3d(0, calc(var(--cut, 0) * -40px), 0);
  opacity: calc(1 - var(--cut, 0) * .55);
}
.hero__text { transform: translate3d(0, calc(var(--cut, 0) * -26px), 0); }
/* Ausblenden nur dort, wo der Titel klebt. Darunter steht der Inhalt mitten
   im Bild, während man ihn liest. */
@media (max-width: 999px) {
  .hero__sticky { opacity: 1; transform: none; }
  .hero__unten { opacity: 1; }
}
.hero__aktion { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.hero__zaehler { margin-top: var(--s3); }

.bildnis { position: relative; width: min(380px, 78vw); justify-self: start; }
@media (min-width: 1000px) { .bildnis { justify-self: end; margin-top: -96px; z-index: 1; } }
.bildnis__rahmen {
  position: relative; overflow: hidden;
  border: 1px solid rgba(199, 154, 60, .45);
  box-shadow: 14px 14px 0 rgba(199, 154, 60, .16);
  background: var(--gruen-mitte);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--ease-snap) 220ms;
}
.is-in .bildnis__rahmen { clip-path: inset(0 0 0 0); }
.bildnis__video {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  filter: contrast(1.05) saturate(.9);
  /* Die Verschiebung bleibt innerhalb des Überstands, den die Skalierung
     schafft: ±3 % × 1,08 liegt unter 4 %, sonst entsteht unten ein Streifen. */
  transform: scale(1.08) translate3d(0, calc((var(--cut, 0) - .5) * -6%), 0);
}
.bildnis__zeile {
  margin-top: var(--s2); color: var(--papier-dim); line-height: 1.5;
  transform: translate3d(0, calc(var(--cut, 0) * -14px), 0);
}
.bildnis__knopf {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: rgba(7, 26, 20, .8); color: var(--messing-hell);
  border: 1px solid var(--messing); font-family: var(--mono);
  font-size: var(--fs-mono); letter-spacing: .1em; padding: 10px 16px; cursor: pointer;
}
/* Handy quer: Marke und Bildnis nebeneinander, die Marke nach der Höhe
   begrenzt. Sonst sieht man beim Öffnen nur die Leiste und ein halbes KÖRNER. */
@media (max-width: 999px) and (max-height: 520px) and (orientation: landscape) {
  .hero__sticky { padding-block: 1.25rem 1.75rem; }
  .hero__bahn {
    --bild-b: calc((100svh - var(--chrome) - 4.5rem) * .75);
    grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s4);
  }
  .bildnis { width: var(--bild-b); }
  .hero__text { --fs-hero: min(10.5rem, calc((100vw - 2 * var(--rand) - var(--s4) - var(--bild-b)) / 4.7), 22svh); }
  .hero .wortmarke__lage { height: auto; padding-top: var(--marke-h, 1.669em); }
  .hero .wortmarke__satz { position: static; display: block; margin-top: .6rem; font-size: .95rem; line-height: 1.3; }
  .hero__aktion { margin-top: var(--s2); }
  .hero__zaehler { margin-top: var(--s1); }
}

/* ============================================================ Der Film === */
.film { background: var(--gruen-nacht); padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--linie-stark); }
.film__raster { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) {
  .film__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--s6); }
}
.film__dauer { margin-top: var(--s3); color: var(--messing); letter-spacing: .14em; text-transform: uppercase; }
/* Die Breite hängt auch an der Fensterhöhe, damit der ganze Film mit
   Startknopf und Bedienleiste ins Bild passt. */
.film__buehne { justify-self: center; width: min(420px, 100%, calc((100svh - var(--chrome) - 2rem) * 9 / 16)); }
@media (min-width: 900px) { .film__buehne { justify-self: end; } }
.film__rahmen {
  position: relative; overflow: hidden; background: #000;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(199, 154, 60, .45);
  box-shadow: 16px 16px 0 rgba(199, 154, 60, .14);
}
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Großer Startknopf über dem Standbild. Nach dem ersten Klick übernehmen die
   Bedienelemente des Browsers. */
.film__start {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, rgba(7,26,20,.15) 0%, rgba(7,26,20,.55) 100%);
  transition: background 240ms var(--ease-out);
}
.film__start:hover, .film__start:focus-visible { background: radial-gradient(circle at 50% 50%, rgba(7,26,20,.05) 0%, rgba(7,26,20,.45) 100%); }
.film__dreieck {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--messing);
  box-shadow: 0 0 0 10px rgba(199, 154, 60, .22);
  display: grid; place-items: center;
  transition: transform 240ms var(--ease-out), background 240ms var(--ease-out);
}
.film__dreieck::after {
  content: ""; margin-left: 7px;
  border-style: solid; border-width: 17px 0 17px 28px;
  border-color: transparent transparent transparent var(--gruen-nacht);
}
.film__start:hover .film__dreieck, .film__start:focus-visible .film__dreieck { transform: scale(1.06); background: var(--messing-hell); }
.film__start[hidden] { display: none !important; }

/* ============================================================ Die Lieder = */
.lieder { background: var(--gruen); padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--linie-stark); }
.lieder__raster { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 900px) {
  .lieder__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--s6); }
}
.lieder__text .lead { margin-top: var(--s2); max-width: 44ch; }
.lieder__liste {
  list-style: none; margin: var(--s4) 0 0; padding: 0; counter-reset: lied;
  border-top: 1px solid var(--linie-stark);
}
.lieder__liste li { counter-increment: lied; border-bottom: 1px solid var(--linie-stark); }
.lieder__liste a {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--s2);
  min-height: 48px; padding: 12px 4px; text-decoration: none; color: var(--papier);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.lieder__liste a::before {
  content: counter(lied, decimal-leading-zero);
  font-family: var(--anzeige); font-weight: 900; font-size: 1.05rem; letter-spacing: .02em; color: var(--messing);
}
.lieder__titel { font-family: var(--kursiv); font-style: italic; font-size: clamp(1.12rem, 1.4vw, 1.3rem); line-height: 1.25; }
.lieder__dauer { font-family: var(--mono); font-size: max(12px, var(--fs-mono)); letter-spacing: .08em; color: var(--papier-dim); font-variant-numeric: tabular-nums; }
.lieder__liste a:hover, .lieder__liste a:focus-visible { background: rgba(199, 154, 60, .08); color: var(--messing-hell); }
.lieder__liste a:hover::before, .lieder__liste a:focus-visible::before { color: var(--messing-hell); }
.lieder__spieler { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .lieder__spieler { position: sticky; top: calc(var(--chrome) + var(--s4)); } }
.lieder__spieler .lieder__schalter { margin: 0; }
.lieder__rahmen {
  border: 1px solid rgba(199, 154, 60, .45); box-shadow: 16px 16px 0 rgba(199, 154, 60, .14);
  background: var(--gruen-nacht); border-radius: 14px; overflow: hidden;
}
.lieder__player { display: block; width: 100%; height: 452px; border: 0; }
.lieder__hinweis { font-size: max(12px, var(--fs-mono)); line-height: 1.5; }

/* ====================================================== 1 · Die Körnerwoche = */
.woche { background: var(--gruen); border-top: 1px solid var(--linie-stark); }
.woche__oben { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 1000px) {
  .woche__oben { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--s6); }
  .woche__oben .motiv { margin-top: var(--s4); }
}
/* In einer Spalte würden die Motive sonst so breit wie die Bahn und quer
   am Handy mehrere Bildschirme hoch. Die Breite folgt der sichtbaren Höhe,
   240 Pixel bleiben, damit die Bildzeile lesbar umbricht. */
@media (max-width: 999px) {
  .woche__oben .motiv { width: min(100%, 420px, max(240px, calc((100svh - var(--chrome) - 5rem) * .8))); }
  .person__auftakt .motiv { width: min(100%, 360px, max(240px, calc((100svh - var(--chrome) - 4rem) * .7464))); }
}
.woche__satz { display: grid; gap: var(--s3); margin-top: var(--s4); max-width: 64ch; }
.woche__satz p { color: var(--papier-dim); }
.woche__satz p:first-child { color: var(--papier); font-size: var(--fs-lead); line-height: 1.5; }
.woche__satz--zwei { margin-top: var(--s5); }
.woche__satz--zwei p:first-child { color: var(--papier-dim); font-size: var(--fs-body); }
.woche__ruf {
  font-family: var(--kursiv); font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.22; color: var(--papier) !important; margin-top: var(--s2);
}

.veranstalter { display: grid; gap: 1px; background: var(--linie-stark); border: 1px solid var(--linie-stark); margin-top: var(--s4); }
@media (min-width: 860px) { .veranstalter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.veranstalter li { background: var(--gruen); padding: var(--s4) var(--s3); }
.veranstalter h3 {
  font-family: var(--anzeige); font-weight: 900; font-size: 1.28rem;
  line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; color: var(--messing-hell);
}
.veranstalter p { margin-top: var(--s2); color: var(--papier-dim); font-size: .98rem; }

/* Drei Felder in einer Reihe, auch am Handy. Dort wird der Innenabstand
   schmaler, damit „Teilnehmer“ in sein Feld passt. */
.zahlen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--linie-stark); border: 1px solid var(--linie-stark); margin-top: var(--s4);
}
.zahlen li { position: relative; background: var(--gruen); padding: var(--s3) var(--s3) var(--s4); }
@media (max-width: 599px) {
  .zahlen li { padding: var(--s2) 12px var(--s3); }
}
.zahlen b {
  display: block; font-family: var(--anzeige); font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; letter-spacing: -.02em; color: var(--messing-hell);
}
/* Die Messinglinie über jedem Feld läuft mit dem Zählwerk von links ein. */
.zahlen li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--messing); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1100ms var(--ease-out); transition-delay: calc(var(--feld, 0) * 160ms + 120ms);
}
.zahlen.zaehlt li::before { transform: scaleX(1); }

/* Zählwerk: je Stelle ein Fenster von 1em Höhe, dahinter das Ziffernband.
   Die Maske lässt die Ziffern oben und unten weich ein- und austreten. */
.zaehlwerk { display: inline-flex; vertical-align: top; }
.zaehlwerk__stelle {
  display: block; height: 1em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.zaehlwerk__band {
  display: block; transform: translate3d(0, 0, 0);
  transition: transform var(--dauer, 1700ms) cubic-bezier(.2, 1.04, .32, 1);
  transition-delay: calc(var(--feld, 0) * 160ms);
}
.zaehlwerk__band > span { display: block; height: 1em; line-height: 1; text-align: center; }
.laeuft .zaehlwerk__band { transform: translate3d(0, calc(var(--ziel, 0) * -1em), 0); }
/* Nur die Beschriftung, nicht die Spans im Zählwerk. */
.zahlen li > span {
  display: block; margin-top: 6px; font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--papier-dim);
}

/* --------------------------------------------------------------- Motive -- */
/* Gemalte Motive. Der Rahmen öffnet sich beim Auftritt von unten, das Bild
   wandert langsamer als der Rahmen. Beides steht bei prefers-reduced-motion. */
.motiv { align-self: start; }
.motiv__rahmen {
  display: block; position: relative; overflow: hidden;
  border: 1px solid rgba(199, 154, 60, .45);
  box-shadow: 12px 12px 0 rgba(199, 154, 60, .14);
  background: var(--gruen-mitte);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1000ms var(--ease-snap) 160ms;
}
.is-in .motiv__rahmen, .motiv.is-in .motiv__rahmen { clip-path: inset(0 0 0 0); }
.motiv__bild {
  width: 100%; height: auto; display: block;
  transform: scale(1.07) translate3d(0, calc((var(--p, .5) - .5) * -30px), 0);
  filter: saturate(.92) contrast(1.03);
}
.motiv__zeile {
  margin-top: var(--s2); color: var(--papier-dim); line-height: 1.5; max-width: 42ch;
}

/* Das breite Motiv läuft über die ganze Breite und schiebt sich gegen den Scroll. */
.motivband { margin-top: var(--s3); }
.motivband__rahmen {
  display: block; position: relative; overflow: hidden;
  height: clamp(300px, 58svh, 620px);
  border-block: 1px solid var(--linie-stark);
  background: var(--gruen-nacht);
}
.motivband__bild {
  position: absolute; inset: -12% 0;
  width: 100%; height: 124%; object-fit: cover; object-position: 50% 12%;
  transform: translate3d(0, calc((var(--p, .5) - .5) * 74px), 0);
  filter: saturate(.9) contrast(1.04);
}
.motivband__rahmen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7,26,20,.55) 0%, rgba(7,26,20,.08) 38%, rgba(7,26,20,.72) 100%);
}
.motivband__zeile { margin-top: var(--s2); color: var(--papier-dim); }
/* Am schmalen Rand zeigt das Band das Motiv fast ganz, mit Säbeln und
   Pferdeköpfen. Nur bei normaler Bewegung, reduziert gilt der Block unten. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .motivband__rahmen { height: min(62.5vw, calc(100svh - var(--chrome) - 2rem)); }
  .motivband__bild {
    inset: -5% 0; height: 110%; object-position: 50% 0;
    transform: translate3d(0, calc((var(--p, .5) - .5) * 18px), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .station { filter: none; }
  .lauf__geist { display: none; }
  .jahr__zahl { transform: none; }
  .motiv__bild, .motivband__bild { transform: none; }
  .motiv__rahmen { clip-path: none; transition: none; }
  .motivband__bild { position: static; height: auto; inset: auto; }
  .motivband__rahmen { height: auto; }
}

/* ========================================================= 2 · Teilnehmer == */
.teilnehmer { background: var(--gruen-nacht); }
.laufband { display: flex; overflow: hidden; width: 100%; border-block: 1px solid var(--linie-stark); }
.laufband + .laufband { border-top: 0; }
.bahn + .laufband { margin-top: var(--s4); }
/* Dauer und Richtung stehen fest. Das Tempo beim Scrollen setzt app.js über
   die Abspielrate, die hält die Stelle, an der das Band gerade steht. */
.laufband__spur {
  display: flex; flex: none; min-width: 100%; align-items: center; padding-block: 18px;
  animation: laufen var(--dauer, 52s) linear infinite;
}
.laufband[data-richtung="reverse"] .laufband__spur { animation-direction: reverse; }
/* Ausserhalb des Bildes steht das Band still. Unter dem Mauszeiger und bei
   Tastaturfokus auch. Auf Touchgeräten nicht, dort bliebe es nach einem
   Tipp sonst für immer stehen. */
.laufband .laufband__spur { animation-play-state: paused; }
.laufband.ist-sichtbar .laufband__spur { animation-play-state: running; }
.laufband.ist-sichtbar:has(:focus-visible) .laufband__spur { animation-play-state: paused; }
.laufband:has(:focus-visible) .marke img { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .laufband.ist-sichtbar:hover .laufband__spur { animation-play-state: paused; }
  .laufband:hover .marke img { opacity: 1; }
}
@keyframes laufen { to { transform: translate3d(-100%, 0, 0); } }

.marke {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 78px; min-width: 150px; padding-inline: clamp(18px, 2.4vw, 38px);
  text-decoration: none; color: var(--papier);
}
/* Jedes Logo bekommt seine eigene Höhe, damit breite und hohe Zeichen
   optisch gleich schwer wirken. */
.marke img {
  max-height: var(--logo-h, 46px); width: auto; object-fit: contain;
  opacity: .88; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.marke:focus-visible img { opacity: 1; transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) {
  .marke:hover img { opacity: 1; transform: scale(1.05); }
  .marke:hover .marke__wort { color: var(--messing-hell); }
  .marke:hover .marke__name { color: var(--gruen-nacht); background: var(--messing-hell); border-color: var(--messing-hell); }
}
/* Kachellogos bringen ihren eigenen Grund mit und laufen deshalb quadratisch. */
.marke--kachel img { border-radius: 5px; }
/* Zeichen ohne eigenen Schriftzug bekommen den Namen daneben gesetzt. */
.marke--mitname { gap: 12px; }
.marke__wort {
  font-family: var(--anzeige); font-weight: 900; font-size: .92rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--papier); white-space: nowrap;
  transition: color 240ms var(--ease-out);
}
.marke:focus-visible .marke__wort { color: var(--messing-hell); }
.marke__name {
  font-family: var(--anzeige); font-weight: 900; font-size: 1.05rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--papier); white-space: nowrap;
  border: 1px solid rgba(199, 154, 60, .34); padding: 11px 20px;
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out), background 240ms var(--ease-out);
}
.marke:focus-visible .marke__name {
  color: var(--gruen-nacht); background: var(--messing-hell); border-color: var(--messing-hell);
}
#teilnehmerStand { margin-top: var(--s4); }

/* ------------------------------------------------- Stimmen der Teilnehmer -- */
.stimmen { margin-top: var(--s5); }
.stimmen__marke {
  display: inline-block; color: var(--messing-hell);
  border: 1px solid rgba(199, 154, 60, .34); padding: 6px 12px; margin-bottom: var(--s3);
}
.stimmen__liste { display: grid; gap: var(--s3); }
@media (min-width: 860px) { .stimmen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }
/* Eine einzelne Stimme steht allein und darf größer sein. */
@media (min-width: 860px) { .stimmen__liste--eins { grid-template-columns: minmax(0, 1fr); } }
.stimmen__liste--eins .stimme { max-width: 44rem; }
.stimmen__liste--eins .stimme__text { font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.28; }
.stimme {
  border-top: 1px solid var(--linie-stark); padding-top: var(--s3);
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 560ms var(--ease-out), transform 640ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.is-in .stimme { opacity: 1; transform: none; }
.stimme--muster { opacity: .82; }
.is-in .stimme--muster { opacity: .82; }
.stimme__text {
  font-family: var(--kursiv); font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.32; color: var(--papier);
}
.stimme__text::before { content: "„"; }
.stimme__text::after { content: "“"; }
.stimme__wer {
  display: block; margin-top: var(--s2);
  font-family: var(--mono); font-weight: 600; font-size: var(--fs-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--papier);
}
.stimme__rolle { display: block; margin-top: 3px; color: var(--papier-dim); text-transform: none; letter-spacing: .04em; }

.stimmen + .teilnehmer__ruf { margin-top: var(--s5); }
.teilnehmer__ruf {
  font-family: var(--kursiv); font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.3;
  margin-top: var(--s2); max-width: 40ch;
}

/* ==================================================== 3 · Beiträge auf X === */
.beitraege { background: var(--gruen); border-top: 1px solid var(--linie-stark); }
.xschalter {
  margin-top: var(--s4); border: 1px solid var(--linie-stark);
  padding: var(--s3); display: grid; gap: var(--s3); max-width: 64ch;
}
.xschalter__text { color: var(--papier-dim); font-size: .95rem; line-height: 1.55; }
.xschalter__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.xliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 860px) { .xliste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } }
@media (min-width: 1300px) { .xliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.xkarte {
  border: 1px solid var(--linie-stark); background: var(--gruen-mitte);
  display: flex; flex-direction: column; min-height: 200px;
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity 560ms var(--ease-out), transform 640ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* Jede Karte tritt einzeln auf. Eine lange Liste als Ganzes erreicht die
   Schwelle des Beobachters sonst nie und bliebe unsichtbar. */
.is-in .xkarte, .xkarte.is-in { opacity: 1; transform: none; }
.xkarte__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: var(--s3) var(--s3) 0; color: var(--papier-dim); }
.xkarte__zeichen { font-family: var(--kursiv); font-style: italic; font-weight: 600; color: var(--messing); font-size: 1.3rem; }
.xkarte__wer { font-weight: 600; color: var(--papier); min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.xkarte__griff { font-family: var(--mono); font-size: var(--fs-mono); }
.xkarte__text { padding: var(--s3); flex: 1; }
.xkarte__titel { font-family: var(--kursiv); font-style: italic; font-size: 1.4rem; line-height: 1.2; }
.xkarte__vor { margin-top: 10px; color: var(--papier-dim); font-size: .95rem; }
.xkarte__fuss {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center;
  padding: 0 var(--s3) var(--s3); font-family: var(--mono); font-size: var(--fs-mono);
}
.xkarte__rahmen { border: 0; width: 100%; min-height: 520px; background: var(--papier); display: block; }

/* ======================================================== 4 · Über Körner == */
.person { background: var(--gruen); border-top: 1px solid var(--linie-stark); }
.person__auftakt {
  position: relative; z-index: 5;
  padding-block: clamp(2.5rem, 5vw, 4rem) 0;
  display: grid; gap: var(--s4); align-items: start;
}
@media (min-width: 1000px) {
  .person__auftakt { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s6); }
}
/* Schmal liegt die Schiene des Zeitstrahls links unter der Bildzeile. Dort
   blendet sie erst unterhalb der Bildzeile ein. */
@media (max-width: 999px) {
  .person__auftakt { padding-bottom: var(--s3); }
  .schiene__linie {
    background: linear-gradient(to bottom, rgba(199,154,60,0) 36%, rgba(199,154,60,.42) 44%, rgba(199,154,60,.42) 86%, rgba(199,154,60,0));
  }
}
.person__kurz { margin-top: var(--s3); max-width: 62ch; line-height: 1.65; }
.person__links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }

/* Der Zeitstrahl. Die Bühne klebt, die Stationen ziehen darunter hindurch.
   ACHTUNG: kein content-visibility, kein contain und kein overflow auf einem
   Vorfahren von .lauf, sonst hört das Kleben auf. */
.lauf {
  --n: 25; --slot: 14svh; --abstand: clamp(104px, 15svh, 168px);
  position: relative; height: calc(100svh + var(--n) * var(--slot));
  /* Die erste Station steht in der Mitte der Bühne. Ohne Zug nach oben bliebe
     darüber ein halber Bildschirm leer. Der Auftakt liegt darüber. */
  margin-top: calc(-1 * min(36svh, 22rem));
}
.lauf__buehne {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
  /* Der Schein in der Mitte liegt hinter den Stationen. */
  background: radial-gradient(66% 50% at 50% 50%, rgba(26, 70, 55, .95) 0%, rgba(20, 56, 44, 0) 72%);
}
/* Riesige Jahreszahl im Hintergrund, sie wandert waagerecht mit dem Scrollweg. */
.lauf__geist {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  font-family: var(--anzeige); font-weight: 900;
  font-size: clamp(14rem, 42vw, 34rem); line-height: 1; letter-spacing: -.04em;
  color: rgba(199, 154, 60, .045); white-space: nowrap; user-select: none;
  transform: translate3d(calc(-50% + (var(--zug, .5) - .5) * -14vw), -50%, 0);
}

/* Der Verlauf oben und unten liegt darüber und blendet die Stationen ein. */
.lauf__buehne::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, var(--gruen) 0%, rgba(12,42,33,0) 15%, rgba(12,42,33,0) 85%, var(--gruen) 100%);
}
.lauf__raster {
  width: 100%; height: 100%; position: relative;
  display: grid; grid-template-columns: minmax(0, .85fr) 3.5rem minmax(0, 1.15fr); align-items: center;
}

.jahr { grid-column: 1; justify-self: end; text-align: right; position: relative; z-index: 3; }
.jahr__zahl {
  display: block; font-family: var(--anzeige); font-weight: 900;
  font-size: clamp(3.4rem, 9vw, 8rem); line-height: .9; letter-spacing: -.035em;
  color: var(--messing-hell);
  transform: translate3d(0, calc((var(--zug, .5) - .5) * -26px), 0);
  transition: opacity 200ms var(--ease-out);
}
.jahr.is-wechsel .jahr__zahl { opacity: 0; }
.jahr__monat {
  display: block; margin-top: 8px; color: var(--papier-dim);
  letter-spacing: .18em; text-transform: uppercase;
  transition: opacity 200ms var(--ease-out);
}
.jahr.is-wechsel .jahr__monat { opacity: 0; }

.schiene { grid-column: 2; position: relative; height: 100%; }
.schiene__linie {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-.5px);
  background: linear-gradient(to bottom, rgba(199,154,60,0), rgba(199,154,60,.42) 14%, rgba(199,154,60,.42) 86%, rgba(199,154,60,0));
}
.schiene__zug { position: absolute; left: 0; right: 0; top: 50%; }
.knoten {
  position: absolute; left: 50%; top: calc(var(--i, 0) * var(--abstand));
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border: 1px solid var(--messing-hell); border-radius: 50%; background: var(--gruen);
  transition: background 260ms var(--ease-out), transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.knoten.ist-durch { background: var(--messing-hell); }
.knoten.ist-nah { box-shadow: 0 0 0 5px rgba(199, 154, 60, .18); }
.knoten.ist-nah { transform: scale(1.9); }
.knoten--werk { border-radius: 0; transform: rotate(45deg); }
.knoten--werk.ist-nah { transform: rotate(45deg) scale(1.7); }
.knoten--werk.ist-durch { background: var(--bordeaux-hell); border-color: var(--messing-hell); }
.schiene__spitze {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 1px solid var(--messing-hell); border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--takt, 0) * 7px) rgba(199, 154, 60, .13);
}
.schiene__spitze::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid rgba(199, 154, 60, .28);
  transform: scale(calc(.7 + var(--takt, 0) * .5));
  opacity: calc(.35 + var(--takt, 0) * .65);
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
.schiene__spitze::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--messing-hell); }

.stationen { grid-column: 3; position: relative; height: 100%; }
.station {
  position: absolute; left: 0; right: 0;
  top: calc(50% + var(--i, 0) * var(--abstand));
  transform: translate3d(calc((1 - var(--nah, 0)) * 26px), -50%, 0);
  opacity: calc(.34 + var(--nah, 0) * .66);
  filter: blur(calc((1 - var(--nah, 0)) * 1.1px));
  max-width: 36ch;
  will-change: transform, opacity;
}
/* Ein Messingstrich wächst von der Schiene zur vordersten Station. */
.station::before {
  content: ""; position: absolute; left: -1.75rem; top: .95em;
  height: 1px; width: calc(var(--nah, 0) * 1.55rem);
  background: var(--messing-hell); opacity: calc(var(--nah, 0) * var(--nah, 0));
}
.station__zeit {
  color: var(--messing);
  transition: color 260ms var(--ease-out);
}
.station__was {
  font-family: var(--kursiv); font-style: italic;
  font-size: clamp(1.2rem, 2.3vw, 2rem);
  line-height: 1.18; margin-top: 4px; color: var(--papier);
  transform-origin: left center; scale: calc(.93 + var(--nah, 0) * .07);
}
/* Die vordere Station steht heller als die anderen, damit der Blick sie findet. */
.station.ist-nah .station__zeit { color: var(--messing-hell); }
.station.ist-nah .station__was { color: var(--creme); }
.station--werk .station__zeit::before {
  content: "Werk"; margin-right: .7em; color: var(--papier);
  border: 1px solid rgba(199, 154, 60, .45); padding: 1px 7px; font-size: .9em;
}

@media (max-width: 899px) {
  .lauf { --abstand: clamp(92px, 13svh, 130px); --slot: 12svh; }
  .lauf__raster { grid-template-columns: 2.5rem minmax(0, 1fr); }
  /* Am schmalen Rand liegt die Jahreszahl über den Stationen. Der weichere
     Verlauf am oberen Rand hält den Hintergrund unter ihr ruhig. */
  .lauf__buehne::before {
    background: linear-gradient(to bottom, var(--gruen) 0%, var(--gruen) 12%, rgba(12,42,33,0) 30%, rgba(12,42,33,0) 85%, var(--gruen) 100%);
  }
  .jahr {
    grid-column: 1 / -1; grid-row: 1; justify-self: start; align-self: start;
    text-align: left; padding-top: calc(var(--chrome) + 12px);
  }
  .jahr::before {
    content: ""; position: absolute; z-index: -1;
    inset: 0 -30% -18px -16%;
    background: radial-gradient(62% 62% at 28% 52%, var(--gruen) 46%, rgba(12,42,33,0) 100%);
  }
  .jahr__zahl { font-size: clamp(2.6rem, 14vw, 4rem); }
  /* Der Zeitstrahl rückt unter den Auftakt. Bis die Bühne oben klebt, läge die
     Jahreszahl sonst über der Bildzeile. */
  html:not(.no-js) .lauf:not(.ist-oben) .jahr { opacity: 0; }
  .jahr { transition: opacity 240ms var(--ease-out); }
  .schiene { grid-column: 1; grid-row: 1; }
  .stationen { grid-column: 2; grid-row: 1; padding-right: var(--rand); }
  /* Kürzerer Anlauf, sonst schiebt eine ferne Station über den Rand hinaus. */
  .station {
    max-width: none;
    transform: translate3d(calc((1 - var(--nah, 0)) * 12px), -50%, 0);
  }
  .station::before { left: -1.1rem; width: calc(var(--nah, 0) * .95rem); }
}
/* Flach und quer: Über den Stationen ist kein Platz, die Jahreszahl steht
   wie am Rechner links neben der Schiene. */
@media (max-width: 899px) and (max-height: 500px) {
  .lauf__raster { grid-template-columns: minmax(0, .55fr) 3rem minmax(0, 1.45fr); }
  .jahr { grid-column: 1; grid-row: 1; justify-self: end; align-self: center; text-align: right; padding-top: 0; }
  .jahr::before { display: none; }
  .schiene { grid-column: 2; grid-row: 1; }
  .stationen { grid-column: 3; grid-row: 1; }
  .lauf__buehne::before {
    background: linear-gradient(to bottom, var(--gruen) 0%, var(--gruen) 22%, rgba(12,42,33,0) 38%, rgba(12,42,33,0) 85%, var(--gruen) 100%);
  }
}

/* ============================================================ Newsletter = */
.brief__bald {
  font-family: var(--kursiv); font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.3; margin-top: var(--s4);
}
.brief { background: var(--gruen); border-top: 1px solid var(--linie-stark); padding-block: clamp(2.75rem, 5.5vw, 5rem); }
.brief__form { margin-top: var(--s4); }
.brief__hinweis { margin-top: var(--s3); max-width: 64ch; line-height: 1.6; }

/* Die Prüfung: Bild mit Zeichen, daneben ein neues Bild, darunter das Feld. */
.pruefung__zeile { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: 6px 0 4px; }
.pruefung__bild {
  width: 260px; max-width: 100%; height: auto; aspect-ratio: 260 / 90;
  border: 1px solid var(--linie-stark); background: var(--papier);
  image-rendering: auto;
}
.pruefung input { letter-spacing: .32em; text-transform: uppercase; font-weight: 600; }
.pruefung__stand { display: block; margin-top: 6px; }
.pruefung__hilfe { display: block; margin-top: 2px; font-size: .88rem; line-height: 1.45; }
/* Die Adresse bricht nicht am Bindestrich um, sie rückt als Ganzes in die
   nächste Zeile. Nur wenn sie allein zu lang ist, darf sie brechen. */
a[href^="mailto:"] { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* ------------------------------------------------------------- Formulare -- */
.formular { display: grid; gap: 18px; max-width: 46rem; }
.formular__paar { display: grid; gap: 18px; }
@media (min-width: 720px) { .formular__paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.feld { display: block; }
.feld__label {
  display: block; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--papier-dim); margin-bottom: 4px;
}
.feld input, .feld textarea, .feld select {
  width: 100%; min-height: 50px; background: transparent;
  border: 0; border-bottom: 1px solid var(--messing-tief);
  color: var(--papier); font-family: var(--grotesk); font-size: 1.0625rem;
  padding: 10px 0; border-radius: 0; transition: border-color 160ms linear;
}
.feld textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.feld select option { background: var(--gruen); color: var(--papier); }
.feld input:focus, .feld textarea:focus, .feld select:focus { border-bottom-color: var(--messing); outline: none; }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.feld input::placeholder, .feld textarea::placeholder { color: rgba(243, 237, 226, .4); }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.haken { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; }
.haken input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 24px; height: 24px; margin-top: 2px;
  border: 1px solid var(--messing); background: transparent; cursor: pointer; border-radius: 0;
}
.haken input:checked { background: var(--messing); box-shadow: inset 0 0 0 4px var(--gruen-nacht); }
.haken span { font-size: .95rem; line-height: 1.45; color: var(--papier-dim); }
.meldung { min-height: 1.5em; font-size: .95rem; }
.meldung--fehler { color: #FFC9D2; }
.meldung--ok { color: var(--messing-hell); }
/* ------------------------------------------------------------------ Fuß --- */
.fuss { background: var(--papier); color: var(--gruen-mitte); padding-block: 0 72px; overflow: hidden; }
.fuss__spanne {
  font-family: var(--anzeige); font-weight: 900; font-size: clamp(2.2rem, 8vw, 6rem);
  line-height: 1; letter-spacing: -.03em; white-space: nowrap;
  color: rgba(12, 42, 33, .18); padding-top: 24px; margin-bottom: var(--s5);
  transform: translate3d(calc((var(--p, .5) - .5) * -1 * var(--weite, 140px)), 0, 0);
}
.fuss a { color: var(--messing-tief); }
.fuss a:hover { color: var(--bordeaux); }
.fuss__raster { display: grid; gap: 48px; }
@media (min-width: 860px) { .fuss__raster { grid-template-columns: 1.4fr 1fr; } }
.fuss__titel {
  font-family: var(--anzeige); font-weight: 900; font-size: 1.3rem;
  line-height: 1.1; text-transform: uppercase; margin-bottom: var(--s3);
}
.fuss__liste { font-family: var(--mono); font-size: var(--fs-mono); }
@media (min-width: 700px) { .fuss__liste.is-lang { column-count: 2; column-gap: var(--s4); } }
.fuss__liste li { padding: 9px 0; border-bottom: 1px solid rgba(12, 42, 33, .16); break-inside: avoid; }
/* Die ganze Zeile ist der Link, nicht nur die Schrift darin. */
.fuss__liste li:has(> a) { padding: 0; }
.fuss__liste a { display: block; padding-block: 11px; }
.fuss__meta { margin-top: var(--s4); color: #47554D; line-height: 1.6; }
.fuss__meta a { display: inline-block; white-space: nowrap; padding-block: 11px; margin-right: var(--s3); }
.fuss__meta + .fuss__meta { font-size: .875rem; letter-spacing: .02em; }
.fuss :focus-visible { outline: 2px solid var(--bordeaux); }

/* =============================================================== BEWEGUNG == */
.r-auf {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.is-in .r-auf { opacity: 1; transform: none; }
.r-maske {
  display: block; clip-path: inset(0 0 105% 0); transform: translate3d(0, .3em, 0);
  transition: clip-path 780ms var(--ease-snap), transform 780ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.is-in .r-maske { clip-path: inset(-.25em 0 -.35em 0); transform: none; }
.r-zeile {
  position: relative; opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 480ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.is-in .r-zeile { opacity: 1; transform: none; }

/* --------------------------------------------------------------- ohne JS --- */
.no-js .wortmarke__oben { display: none; }
.no-js .r-auf, .no-js .r-zeile, .no-js .station { opacity: 1; transform: none; }
.no-js .r-maske { clip-path: none; transform: none; }
.no-js .bildnis__rahmen { clip-path: none; }
.no-js .lauf { height: auto; }
.no-js .lauf__buehne { position: static; height: auto; overflow: visible; padding-block: var(--s5); }
.no-js .lauf__buehne::before { display: none; }
/* Die riesige Jahreszahl ragt ohne die abgeschnittene Bühne seitlich aus der Seite. */
.no-js .lauf__geist { display: none; }
.no-js .lauf__raster { display: block; }
.no-js .schiene, .no-js .jahr { display: none; }
.no-js .stationen { position: static; height: auto; display: grid; gap: var(--s3); }
.no-js .station { position: static; max-width: none; }
/* Ohne JavaScript lassen sich die Formulare nicht absenden. Statt eines
   Formulars, das die Angaben in die Adresse schreibt, steht ein Hinweis da. */
.no-js #briefFormular, .no-js #briefHinweis { display: none; }
.ohne-js { display: none; }
.no-js .ohne-js { display: block; margin-top: var(--s4); max-width: 64ch; }

/* ------------------------------------------------------------- Rücksicht --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wortmarke__oben { display: none; }
  .laufband__spur { animation: none; flex-wrap: wrap; min-width: 0; }
  .laufband { overflow-x: auto; }
  .r-auf, .r-zeile, .xkarte { opacity: 1 !important; transform: none !important; }
  .zaehlwerk__band, .zahlen li::before { transition: none !important; }
  .r-maske { clip-path: none !important; transform: none !important; }
  .bildnis__rahmen { clip-path: none !important; }
  .bildnis__video, .bildnis__zeile, .hero__text, .hero__unten, .fuss__spanne { transform: none !important; }
  .hero__unten, .hero__sticky { opacity: 1 !important; }
  .hero { height: auto !important; }
  .hero__sticky { position: static; min-height: 0; overflow: visible; padding-top: clamp(2rem, 5vw, 4rem); }
  html { transition: none; }
  /* Der Zeitstrahl wird zur ruhigen Liste. */
  .lauf { height: auto; }
  .lauf__buehne { position: static; height: auto; overflow: visible; padding-block: var(--s5); }
  .lauf__buehne::before { display: none; }
  .lauf__raster { display: block; }
  .schiene, .jahr { display: none; }
  .stationen { position: static; height: auto; display: grid; gap: var(--s3); }
  .station { position: static; max-width: none; opacity: 1 !important; transform: none !important; }
  .station__was { scale: 1; }
}

/* -------------------------------------------------------- Rechtstexte ------ */
body.rechtstext { background: var(--papier); color: var(--gruen-nacht); }
.rt-wrap { max-width: 46rem; margin-inline: auto; padding: clamp(2.5rem, 7vw, 5rem) var(--rand) var(--s6); }
.rt-kicker { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--messing-tief); font-weight: 700; margin-bottom: var(--s2); }
.rechtstext h1 {
  font-family: var(--anzeige); font-weight: 900; font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: .96; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: var(--s4);
  /* Lange Wörter trennt ein weiches Trennzeichen im HTML. Fehlt es, bricht
     das Wort lieber, als die Seite seitlich verschiebbar zu machen. */
  overflow-wrap: break-word; hyphens: manual;
}
.rechtstext h2 {
  font-family: var(--anzeige); font-weight: 900; font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.15; text-transform: uppercase; margin: var(--s5) 0 var(--s2);
}
.rechtstext h3 { font-weight: 600; font-size: 1rem; }
.rechtstext p { margin-bottom: var(--s2); max-width: 40rem; }
.rechtstext a { color: var(--messing-tief); }
.rechtstext a:hover { color: var(--bordeaux); }
.rt-stand { color: #566159; font-size: .92rem; }
.rt-zurueck-zeile { margin-top: var(--s5); }
.rt-zurueck {
  display: inline-block; background: var(--gruen); color: var(--papier);
  font-weight: 700; font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; padding: 14px 26px; text-decoration: none;
}
.rt-zurueck:hover { background: var(--bordeaux); color: var(--papier); }
/* Auf dunklem Grund hätte der Knopf dieselbe Farbe wie die Seite. */
.einreichen .rt-zurueck { background: transparent; border: 1px solid var(--messing); color: var(--messing-hell); }
.einreichen .rt-zurueck:hover { background: var(--messing); color: var(--gruen-nacht); }
.rechtstext :focus-visible { outline: 2px solid var(--gruen-nacht); }
.rechtstext .zeitleiste li {
  display: grid; gap: 4px var(--s3); border-top: 1px solid rgba(12, 42, 33, .18); padding-block: 18px;
}
@media (min-width: 620px) { .rechtstext .zeitleiste li { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.rechtstext .zeit__jahr { color: var(--messing-tief); }
.rechtstext .zeitleiste p { color: #47554D; margin: 0; }

/* --------------------------------------------- Seite „Beitrag eintragen“ --- */
.einreichen { background: var(--gruen); }
.ein-wrap { max-width: 46rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--rand) var(--s6); }
.ein-hallo { font-family: var(--kursiv); font-style: italic; font-size: 1.5rem; margin: var(--s4) 0; }
.ein-h2 {
  font-family: var(--anzeige); font-weight: 900; font-size: 1.25rem;
  text-transform: uppercase; margin: var(--s5) 0 var(--s3);
}
.ein-liste { display: grid; gap: var(--s2); }
.ein-eintrag { border: 1px solid var(--linie-stark); padding: var(--s3); display: grid; gap: 6px; }
.ein-eintrag__kopf { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; justify-content: space-between; }
.ein-eintrag__titel { font-weight: 600; }
.ein-eintrag__meta { color: var(--papier-dim); }
.tag-marke {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  border: 1px solid var(--linie-stark); padding: 3px 9px; white-space: nowrap;
}
.tag-marke--freigegeben { border-color: var(--messing); color: var(--messing-hell); }
.tag-marke--abgelehnt { border-color: var(--bordeaux-hell); color: #FFC9D2; }
.ein-loeschen {
  justify-self: start; background: transparent; border: 1px solid var(--linie-stark);
  color: var(--papier-dim); font: inherit; font-size: .85rem; min-height: 44px; padding: 10px 16px; cursor: pointer;
}
.ein-loeschen:hover { border-color: var(--bordeaux-hell); color: var(--papier); }
.ein-hinweis { margin-top: var(--s4); }
/* Der Knopf steht nicht direkt am kursiven Einleitungssatz. */
#nlBestaetigen { margin-top: var(--s4); }
.ein-hinweis + p { margin-top: var(--s3); }
.ein-fuss { border-top: 1px solid var(--linie-stark); padding: var(--s3) 0; }
.ein-fuss a { display: inline-flex; align-items: center; min-height: 44px; }

/* Lesbare Mindestgrößen am Handy für Formulare, Hinweise, Fuß und die
   Unterseiten. Die Kopfleiste und der Titel behalten ihre Maße. */
@media (max-width: 999px) {
  :root { --fs-label: .8rem; --fs-mono: .8rem; }
  .knopf, .feld__label { font-size: .8rem; }
  .einreichen .tag-marke { font-size: .78rem; }
  /* Die Kopfleiste behält ihr Maß, nur nicht unter 12 Pixel. */
  .kopf { --fs-mono: clamp(.75rem, .25vw + .66rem, .82rem); --fs-label: clamp(.75rem, .3vw + .6rem, .78rem); }
  .kopf__cta { font-size: .75rem; }
}

/* =========================================================== COUNTDOWN == */
/* Bis zum Start liefert der Server statt der Startseite nur diese Fläche:
   Wortmarke, großes Zählwerk, Bildnis. Danach erscheint die ganze Seite. */
.tor-seite { background: var(--gruen); display: flex; flex-direction: column; min-height: 100svh; }
.tor {
  position: relative; flex: 1 0 auto; display: grid; align-items: center;
  padding: clamp(2rem, 6vh, 4.5rem) var(--rand) clamp(4.5rem, 10vh, 6rem);
  background:
    radial-gradient(120% 80% at 85% 20%, rgba(107, 18, 48, .38), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(199, 154, 60, .08), transparent 60%),
    var(--gruen);
  overflow: hidden;
}
.tor__bahn {
  width: 100%; max-width: var(--breite); margin: 0 auto;
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.tor__text {
  --spalte: calc(100vw - 2 * var(--rand));
  /* Auf flachen Bildschirmen begrenzt die Höhe, sonst füllt die Marke allein
     das Fenster. */
  --fs-hero: min(10.5rem, calc(var(--spalte) / 4.7), 19svh);
  min-width: 0;
}
.tor__marke { margin-bottom: clamp(2rem, 6vh, 3.5rem); }

.tor__uhr {
  --uhr: min(8.5rem, calc(var(--spalte) / 6.9), 17svh);
  display: flex; align-items: flex-start; gap: calc(var(--uhr) * .12);
  font-family: var(--anzeige); font-weight: 900; font-size: var(--uhr);
  line-height: 1; letter-spacing: -.02em; color: var(--messing-hell);
}
.tor__feld { display: flex; flex-direction: column; align-items: flex-start; }
.tor__zahl { display: block; font-weight: 900; font-variant-numeric: tabular-nums; }
.tor__einheit {
  display: block; margin-top: .7rem; font-family: var(--mono); font-weight: 600;
  font-size: clamp(.62rem, .35vw + .55rem, .82rem); letter-spacing: .16em;
  text-transform: uppercase; color: var(--papier-dim);
}
.tor__trenner { color: var(--messing); opacity: .55; transform: translateY(-.06em); }
.tor .zaehlwerk__band {
  transform: translate3d(0, calc(var(--pos, 0) * -1em), 0);
  transition: transform 620ms cubic-bezier(.25, 1.3, .4, 1); transition-delay: 0ms;
}
.tor .zaehlwerk__band.ohne-uebergang { transition: none; }
.tor__start {
  margin-top: clamp(1.75rem, 4vh, 2.5rem); max-width: 52ch;
  font-family: var(--kursiv); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.3; color: var(--papier);
}
.tor.ist-da .tor__uhr { color: var(--papier); transition: color 600ms var(--ease-out); }

/* Auftritt: Marke, Uhr und Satz kommen nacheinander. Ohne JavaScript steht
   alles sofort da. */
.tor__marke, .tor__uhr, .tor__start, .tor__bild {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out);
}
.tor.ist-bereit .tor__marke { opacity: 1; transform: none; }
.tor.ist-bereit .tor__uhr { opacity: 1; transform: none; transition-delay: 180ms; }
.tor.ist-bereit .tor__start { opacity: 1; transform: none; transition-delay: 360ms; }
.tor.ist-bereit .tor__bild { opacity: 1; transform: none; transition-delay: 240ms; }
.no-js .tor__marke, .no-js .tor__uhr, .no-js .tor__start, .no-js .tor__bild { opacity: 1; transform: none; }

.tor__bild { width: min(340px, 72vw); }
.tor__video {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid rgba(199, 154, 60, .45); box-shadow: 14px 14px 0 rgba(199, 154, 60, .16);
  background: var(--gruen-mitte);
}
.tor__bildzeile {
  margin-top: var(--s2); font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: .06em; color: var(--papier-dim); line-height: 1.5;
}
.tor__fuss {
  display: flex; gap: var(--s3); justify-content: center; background: var(--gruen);
  padding: var(--s3) var(--rand); font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: .08em;
}
.tor__fuss a { color: var(--papier-dim); text-decoration: none; padding: 10px 4px; }
@media (pointer: coarse) {
  .tor__fuss a, .xkarte__fuss a { display: inline-flex; align-items: center; min-height: 44px; }
}
.tor__fuss a:hover, .tor__fuss a:focus-visible { color: var(--messing-hell); }

@media (min-width: 1000px) {
  .tor__bahn { grid-template-columns: minmax(0, 1fr) 380px; }
  .tor__text { --spalte: calc(min(100vw, var(--breite)) - 2 * var(--rand) - 380px - clamp(2rem, 5vw, 4rem)); }
  .tor__bild { width: 100%; justify-self: end; }
}
@media (max-width: 999px) {
  .tor { align-items: start; padding-bottom: var(--s4); }
  .tor__bild { justify-self: start; }
}
/* Auf dem Handy wäre eine Zeile mit acht Ziffern zu klein. Dort stehen die
   vier Felder zu zweit übereinander, groß. */
@media (max-width: 599px) {
  .tor__uhr {
    --uhr: min(27vw, 7rem);
    display: grid; grid-template-columns: repeat(2, max-content); gap: var(--s3) calc(var(--uhr) * .32);
  }
  .tor__trenner { display: none; }
  .tor__einheit { margin-top: .5rem; }
}
@media (max-width: 999px) {
  .tor__einheit { font-size: .8rem; }
}
/* Handy quer: Neben woche wäre der Untertitel winzig, und das Datum steht
   ohnehin im Satz unter der Uhr. */
@media (max-height: 520px) and (min-width: 600px) {
  .tor .wortmarke__satz { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tor__marke, .tor__uhr, .tor__start, .tor__bild { opacity: 1; transform: none; transition: none; }
  .tor .zaehlwerk__band { transition: none; }
}

/* ------------------------------------------------ Seite „Inhalt melden“ --- */
.no-js #mdFormular { display: none; }
.feld__hilfe { display: block; margin-top: 6px; font-size: .88rem; line-height: 1.45; }
.melden { margin-top: var(--s4); }
.melden textarea {
  min-height: 10rem; padding: 10px 12px;
  border: 1px solid var(--linie-stark); border-bottom-color: var(--messing-tief);
}
.melden select { cursor: pointer; }
#mdFertig { margin-top: var(--s4); }
#mdNummer { margin: var(--s2) 0 var(--s4); }