/* ===========================================================================
   Startaufstellung — racing.css
   Renntermine gemeinsam planen. Ein einziges Stylesheet, keine externen
   Ressourcen, keine Webfonts. Reiner System-Font-Stack.
   Aufbau: 1 Tokens · 2 Reset/Basis · 3 Layout · 4 Header/Footer · 5 Flash
   6 Buttons/Formulare · 7 Chips und Filterzeile · 8 Event-Karten/Listenzeilen
   9 Aufklappbare Bloecke · 10 Protokoll · 11 Pagination · 12 Einstieg/Statik
   13 Responsive · 14 Pointer/Motion/Print
   =========================================================================== */

/* --- 1 Tokens ----------------------------------------------------------- */
:root {
  --asphalt-900: #0d0f12;
  --asphalt-800: #15181d;
  --asphalt-700: #212630;
  /* Das Serancon-Cyan, aus dem Logo ausgelesen (haeufigster Farbwert der
     Wortmarke). Ersetzt seit 04.09.2026 das Signalrot als Akzent — es ist
     zugleich deutlich kontraststaerker: 10,21:1 auf dem dunkelsten Grund
     gegen 3,86:1 beim Rot. */
  --marke-cyan: #00cfef;
  --marke-cyan-hell: #4de0f7;   /* Hover auf dunklem Grund */
  /* Rot bleibt fuer das, was Rot bedeutet: Fehler und das Herz im
     Footer. Nicht mehr fuer Akzente. */
  --signal-red: #e10600;
  /* Gelb ist seit dem 04.09.2026 keine Akzentfarbe mehr — die Akzente
     sind cyan. Es bleibt fuer genau zwei Dinge, bei denen Farbe
     Bedeutung traegt und nicht Marke ist: die Warnung am "Zum Event"-
     Knopf bei einem fremden Zielhost (.btn--fremd) und die dritte
     Protokollart (.log-row--proposed) neben gruen und rot. */
  --signal-yellow: #ffd400;
  --gruen: #21c05a;
  --chalk: #f2f4f7;
  --smoke: #9aa3af;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --gap: 1rem;
  --container: 1240px;

  color-scheme: dark;
}

/* --- 2 Reset / Basis ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--asphalt-900);
  /* verhindert, dass ein einzelnes langes Wort die Seite aufzieht */
  overflow-wrap: break-word;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--asphalt-900);
  color: var(--chalk);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  margin: 0 0 .5rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 .75rem; }

a { color: var(--marke-cyan); text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: var(--chalk); }

img, svg { max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--asphalt-700);
  margin: 1.5rem 0;
}

ul, ol { margin: 0 0 .75rem; padding-left: 1.2rem; }

small { font-size: .82rem; }

/* Alle Ziffern bündig: Mono + tabular-nums. Kern des Renn-Timing-Eindrucks. */
.num,
.event-date,
.event-price,
.vote-count,
.log-time,
.disclosure__zahl,
.pagination,
time,
kbd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.muted { color: var(--smoke); }
.nowrap { white-space: nowrap; }

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

.skip-link {
  /* Der Versatz war ein fester Rem-Wert (-3rem). Bei groesserer
     Grundschrift wird der Text mehrzeilig, das Element hoeher als der
     Versatz — und der Link stand dauerhaft sichtbar ueber Marke und
     Flagge, nicht nur bei Tastaturfokus. Ab 22 px Grundschrift gemessen,
     bei 32 px ragte er 51 px in den Kopf. translateY(-100%) verschiebt
     immer um die tatsaechliche Hoehe, egal wie viele Zeilen. */
  position: absolute;
  left: .5rem; top: 0;
  transform: translateY(-100%);
  z-index: 50;
  background: var(--marke-cyan);
  color: var(--asphalt-900);
  padding: .6rem .9rem;
  /* Er ist zwar nur bei Tastaturbedienung sichtbar, aber wenn er da ist,
     soll er auch mit dem Finger zu treffen sein. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease-in-out;
}
.skip-link:focus {
  transform: translateY(.5rem);
  color: var(--asphalt-900);
}

/* Tastaturbedienung: überall sichtbar. */
:focus-visible {
  outline: 3px solid var(--marke-cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- 3 Layout ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
  padding-block: 1.25rem 2.5rem;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .9rem;
  margin-bottom: 1rem;
}
.page-head h1 { margin: 0; }
.page-head__saison { color: var(--marke-cyan); }
.page-head__frische {
  margin: .15rem 0 0;
  font-size: .78rem;
  color: var(--smoke);
}
.frische--fehler { color: var(--signal-red); font-weight: 700; }

.page-head .page-head__count { color: var(--smoke); font-size: .92rem; }

.panel {
  background: var(--asphalt-800);
  border: 1px solid var(--asphalt-700);
  border-radius: var(--radius);
  padding: 1rem;
}

.prose { max-width: 68ch; }
.prose dt { font-weight: 700; margin-top: .8rem; }
.prose dd { margin: 0 0 .4rem; color: var(--chalk); }

/* --- 4 Header / Rennstreifen / Footer ------------------------------------ */
.site-header {
  position: relative;
  isolation: isolate;
  background: var(--asphalt-800);
  border-bottom: 1px solid var(--asphalt-700);
  overflow: hidden;
}

/* Zielflaggenmuster, sehr dezent: zwei versetzte repeating-conic-gradients. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .06;
  background-image:
    repeating-conic-gradient(var(--chalk) 0% 25%, transparent 0% 50%),
    repeating-conic-gradient(var(--chalk) 0% 25%, transparent 0% 50%);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding-block: .75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--chalk);
  min-width: 0;
}
.brand:hover { color: var(--chalk); }
.brand__logo { display: block; height: 44px; width: auto; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
/* Im Kopf steht die quadratische Bildmarke (44px) neben dem Textblock, nicht
   das volle Logo-Lockup — sonst stuenden Wortmarke und Claim doppelt da.
   Unter 560px bleibt der Name stehen (dafuer ist neben der 44px-Marke Platz),
   nur der Claim weicht, sonst bricht der Block buchstabenweise um. */
.brand__name,
.brand__claim {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__name {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .01em;
  line-height: 1.1;
  text-transform: uppercase;
}
.brand__claim {
  color: var(--smoke);
  font-size: .78rem;
  line-height: 1.2;
}

/* ⚠️ Diese beiden Bloecke muessen NACH den Basisregeln stehen. Eine
   @media-Query erhoeht die Spezifitaet nicht — standen sie davor, gewann bei
   gleichem Selektor die spaetere Basisregel, und beide Verkleinerungen waren
   wirkungslos (nachgemessen 04.09.2026: der Name blieb bei 320 px auf
   1.15rem und wurde gekappt). Nicht wieder nach oben schieben. */
@media (max-width: 559px) {
  .brand__claim {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .brand__name { font-size: 1rem; }
}

/* Bei 320 px (iPhone SE 1) braucht der Schriftzug 214 px, es sind aber nur
   180 px da — er wurde zu "STARTAUFSTEL…" gekappt. Drei der vier
   Pruefagenten haben das unabhaengig gemeldet. Ab 360 px passt er, deshalb
   greift die Verkleinerung nur ganz unten. */
@media (max-width: 345px) {
  .brand__name { font-size: .84rem; letter-spacing: 0; }
  .marke { gap: .45rem; }
}

/* Navigation und Namensblock als eine Einheit rechts: mit auto-Margin allein
   rutschte die Identitaetszeile ab 768px in eine eigene, volle Zeile. */
.header-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem 1.25rem;
  margin-inline-start: auto;
  min-width: 0;
}

.identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  font-size: .9rem;
  color: var(--smoke);
}
.identity__name {
  color: var(--chalk);
  font-weight: 700;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.identity form { margin: 0; }

/* Schmale Geraete: der Kopf soll nicht ein Drittel des Bildschirms fressen. */
@media (max-width: 559px) {
  .identity__prefix { display: none; }
  .identity__name { max-width: 12ch; }
  .header-tools { gap: .4rem .6rem; }
  .header-inner { gap: .5rem .6rem; }
}

/* Rennstreifen — 4px unter dem Header. */
.marke {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.flagge {
  /* Deutschlandflagge neben dem Schriftzug: drei waagerechte Felder als
     Verlauf, kein Bild und kein zusaetzlicher Abruf.

     Der helle Rahmen ist Pflicht — ohne ihn verschmilzt das schwarze Feld mit
     der dunklen Kopfleiste, und die Flagge sieht aus wie ein zweifarbiger
     Klecks. Seitenverhaeltnis 5:3 wie die echte Flagge. */
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  width: 65px;
  height: 39px;
  overflow: hidden;
  border: 1px solid var(--chalk);
  border-radius: 2px;
  background: linear-gradient(180deg,
      #000000 0 33.34%,
      #dd0000 33.34% 66.67%,
      #ffce00 66.67% 100%);
  transform-origin: left center;
  animation: flagge-wehen 4.5s ease-in-out infinite;
}

.flagge__falten {
  /* Die eigentliche Bewegung: wandernde Licht- und Schattenfalten. Ein reines
     Kippen der Flaeche saehe aus wie ein Wackeln, erst die Falten machen
     daraus ein Wehen. Liegt auf einem eigenen Element, damit der Verlauf der
     Flagge darunter unangetastet bleibt. */
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(100deg,
      rgba(255, 255, 255, .00) 0 6px,
      rgba(255, 255, 255, .16) 10px,
      rgba(0, 0, 0, .28) 18px,
      rgba(255, 255, 255, .00) 26px);
  background-size: 26px 100%;
  animation: flagge-falten 2.6s linear infinite;
}

@keyframes flagge-wehen {
  0%, 100% { transform: skewY(0deg)    scaleY(1); }
  30%      { transform: skewY(-1.4deg) scaleY(1.015); }
  70%      { transform: skewY(1.4deg)  scaleY(.985); }
}

@keyframes flagge-falten {
  from { background-position: 0 0; }
  to   { background-position: 26px 0; }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt eine
   ruhige Flagge — die Information steckt in den Farben, nicht im Wehen. */
@media (prefers-reduced-motion: reduce) {
  .flagge, .flagge__falten { animation: none; }
  .flagge { transform: none; }
}


.footer-text {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.herz { color: var(--signal-red); font-size: 1.05em; line-height: 1; }
.footer-marke {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Das Logo bringt seine eigenen Farben mit und braucht keine Linkfarbe. */
  opacity: .92;
}
.footer-marke:hover { opacity: 1; }
.footer-marke img { display: block; height: 22px; width: auto; }
/* Verwaist seit 04.09.2026: die Quellenangabe ist auf User-Wunsch aus
   dem Footer verschwunden. Regel bleibt stehen, damit ein
   Zurueckholen ein Handgriff ist. */
.footer-quelle { margin: 0; font-size: .78rem; color: var(--smoke); }

.site-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--asphalt-700);
  background: var(--asphalt-800);
  color: var(--smoke);
  font-size: .87rem;
  padding-block: 1rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  /* War auf zwei Elemente ausgelegt (Text + Rechtliches-Nav). Die Nav ist
     schon laenger raus — seitdem stand der Rest links, weil ein einzelnes
     Flex-Kind bei space-between an den Anfang faellt. */
  justify-content: center;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.footer-text {
  margin: 0;
  /* 25% groesser als die Footer-Grundschrift (.87rem -> ca. 1.09rem). */
  font-size: 1.09rem;
}
.footer-marke img {
  /* Skaliert mit der 25%-groesseren Textzeile mit (22px -> 27.5px). */
  height: 27.5px;
}

/* --- 5 Flash ------------------------------------------------------------- */
.flash-area { margin-bottom: 1rem; display: grid; gap: .5rem; }
.flash {
  border: 1px solid var(--asphalt-700);
  border-left: 4px solid var(--smoke);
  background: var(--asphalt-800);
  border-radius: var(--radius-sm);
  padding: .6rem .85rem;
}
.flash--info { border-left-color: var(--gruen); }
.flash--error { border-left-color: var(--signal-red); }

/* --- 6 Buttons / Formulare ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .9rem;
  min-height: 40px;
  border: 1px solid var(--asphalt-700);
  border-radius: var(--radius-sm);
  background: var(--asphalt-700);
  color: var(--chalk);
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out,
              color .12s ease-in-out;
}
.btn:hover { background: #2b3140; color: var(--chalk); }

.btn--primary {
  /* Dunkle Schrift auf der cyanfarbenen Flaeche: Weiss haette hier nur
     1,88:1 und waere unlesbar, Dunkel hat 10,21:1. */
  background: var(--marke-cyan);
  border-color: var(--marke-cyan);
  color: var(--asphalt-900);
  font-weight: 700;
}
.btn--primary:hover {
  background: var(--marke-cyan-hell);
  border-color: var(--marke-cyan-hell);
  color: var(--asphalt-900);
}

/* Angebot "Ich bin dabei": umrandet statt gefuellt. Auf einer Seite mit 50
   Terminen waeren 50 gefuellte Signalrot-Flaechen kein Signal mehr, sondern
   der Hintergrund — und der gesetzte Zustand darunter nicht mehr zu finden. */
.btn--wahl {
  background: transparent;
  border-color: var(--marke-cyan);
  color: var(--marke-cyan);
}
.btn--wahl:hover {
  background: var(--marke-cyan);
  border-color: var(--marke-cyan);
  color: var(--asphalt-900);
}

/* Der Knopf auf einer Karte, bei der man dabei ist. Ruhig, damit nicht jede
   zweite Zeile schreit — die Farbe traegt die Information, nicht die Flaeche.

   Seit dem 05.09.2026 steht darauf "Ich bin nicht dabei" und nicht mehr
   "✓ Dabei": die Beschriftung sagt, was ein Klick tut. Den Zustand traegt
   allein noch die Farbe — dieselbe wie die gruene Kante der Karte
   (.event-card--mine). Wer hier etwas aendert, sollte beide zusammen
   aendern, sonst passen Kante und Knopf nicht mehr zueinander. */
.btn--active {
  background: #12301d;
  border-color: var(--gruen);
  color: var(--gruen);
}
.btn--active:hover { background: #17452a; border-color: #2ad669; color: #4ee083; }

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--asphalt-700); }

.btn--small { padding: .35rem .6rem; min-height: 34px; font-size: .85rem; }
.btn--block { width: 100%; }

label { display: block; font-size: .85rem; color: var(--smoke); margin-bottom: .2rem; }

/* Nach dem Umbau kommen drei Feldtypen vor: Textfelder (Name, Termintitel),
   zwei Datumsfelder im Vorschlagsformular und seit dem 04.09.2026 das
   E-Mail-Feld der Anmeldung. Suchfeld, Zahlenfeld und URL-Feld sind aus der
   Oberflaeche verschwunden. */
input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-width: 0;
  padding: .5rem .6rem;
  min-height: 40px;
  border: 1px solid var(--asphalt-700);
  border-radius: var(--radius-sm);
  background: var(--asphalt-900);
  color: var(--chalk);
  font: inherit;
  font-size: .95rem;
}
input[type="date"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
/* Der Pfeil ist aus zwei Farbverlaeufen gezeichnet — kein Bild, keine
   externe Datei. Ohne ihn sieht ein <select> aus wie ein Textfeld, und die
   Auswahl ist jetzt das wichtigste Bedienelement der Seite. */
select {
  appearance: none;
  padding-right: 2.1rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--smoke) 50%),
    linear-gradient(135deg, var(--smoke) 50%, transparent 50%);
  background-position: right 1.1rem center, right .75rem center;
  background-size: .38rem .38rem, .38rem .38rem;
  background-repeat: no-repeat;
}
select:hover { background-color: var(--asphalt-800); }
input::placeholder { color: #6b7280; }

.field { margin-bottom: .85rem; }
.field__error { color: #ff8078; font-size: .85rem; margin-top: .2rem; }
.field--invalid input,
.field--invalid select { border-color: var(--signal-red); }

/* Das Anmeldeformular ist bewusst untereinander statt nebeneinander: zwei
   Felder und ein Knopf, die auf 320 px genauso aussehen wie auf dem
   Schreibtisch. Eine Flex-Zeile wie bei der frueheren Namenswahl brauchte
   hier nichts zu retten — es gibt nur noch ein Formular. */
.anmelden { margin-block: 1rem 0; }
.anmelden .form-actions { margin-top: .25rem; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.form-grid { display: grid; gap: 0 .9rem; grid-template-columns: 1fr; }

/* --- 7 Chips und Filterzeile --------------------------------------------- */
/* Eine gemeinsame Pillen-Basis fuer alles Chip-foermige: die Schnellauswahl
   (.chip-btn), die entfernbaren aktiven Filter (.chip) und die Merkmale
   (.feature-chip). Vorher stand dieselbe Optik dreimal im Stylesheet. */
.chip-btn,
.chip,
.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  padding: .32rem .7rem;
  border: 1px solid var(--asphalt-700);
  border-radius: 999px;
  background: var(--asphalt-900);
  color: var(--chalk);
  font-size: .85rem;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out,
              color .12s ease-in-out;
}

.chip-btn { font-weight: 600; }
.chip-btn:hover { background: var(--asphalt-700); color: var(--chalk); }
/* Aktiv = gelb umrandet und gelb beschriftet, wie frueher der aktive
   Navigationspunkt. Kein aria-pressed: das gehoert auf Buttons, nicht auf
   Links — hier sind es Links, damit ein Klick genuegt und die Adresse
   teilbar bleibt. */
.chip-btn--aktiv {
  /* Zweites, farbunabhaengiges Merkmal: der Zustand darf nicht allein
     an der Farbe haengen (Review-Befund K3). */
  font-weight: 800;
  border-color: var(--marke-cyan);
  color: var(--marke-cyan);
  background: var(--asphalt-800);
}
.chip-btn--aktiv:hover { color: var(--marke-cyan); background: var(--asphalt-700); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .5rem;
}
/* Die Gruppierung der drei Ansichten ist REIN semantisch (role="group" im
   Markup), nicht mehr visuell. Bis zum 05.09.2026 (dritte Runde) stand hier
   ``display: flex; flex-wrap: wrap`` — eine eigene Box, die als Ganzes ein
   Flex-Kind der Zeile war und deshalb NUR auf ihrer eigenen ersten Zeile
   umbrach. "Termin fehlt?" landete dadurch selbst dann noch in einer neuen
   Zeile fuer sich allein, wenn rechts neben "Meine Termine" laengst Platz
   gewesen waere — bei 390px etwa 220 von 358px frei.

   ``display: contents`` nimmt die Box weg, ohne das Element aus dem DOM zu
   nehmen: seine Kinder werden direkte Flex-Kinder von .chip-row und reihen
   sich dort ganz gewoehnlich ein, "Termin fehlt?" inklusive — genau der
   User-Wunsch ("rechts neben 'Meine Termine', wenn das passt").

   ⚠️ Codex-Befund 05.09.2026: ``display: contents`` auf einem Element mit
   ``role``/``aria-label`` galt lange als riskant — mehrere Engines haben
   Rolle und Name jahrelang aus dem Accessibility-Tree verloren, sobald das
   Element selbst keine Box mehr hatte. Das ist seit der Klarstellung in der
   CSS Display Level 3 / HTML-AAM-Spezifikation (~2020) behoben, und
   Chromium haelt sich daran — mit Playwrights ARIA-Snapshot
   nachgesehen (05.09.2026): ``group "Ansicht"`` mit allen drei Links bleibt
   erhalten, "Termin fehlt?" bleibt sauber ausserhalb. Das deckt Chromium
   ab, nicht die ganze Kombinatorik aus Firefox/WebKit mit echten
   Vorleseprogrammen (NVDA, VoiceOver, JAWS) — bei einer App mit einer
   Handvoll Nutzern eine bewusst begrenzte Pruefung, keine Garantie fuer
   jeden denkbaren Klienten.

   ⚠️ IE macht das nicht (kennt display:contents nicht) — hier ohne Belang,
   niemand in der Zielgruppe nutzt es. */
.chip-gruppe { display: contents; }

/* "Termin fehlt?" — seit dem 05.09.2026 kein Aufklapper mehr unter der
   Liste, sondern ein Knopf in der Filterleiste (erste Runde: an den
   rechten Rand; zweite Runde: direkt hinter die drei Ansichten; dritte
   Runde: darf mit "Meine Termine" auf einer Zeile landen, siehe
   .chip-gruppe oben).

   Sie bleibt trotzdem unterscheidbar, und zwar staerker als vorher noetig:
   direkt neben drei Schaltern, die einander ausschliessen, wuerde ein
   gleich aussehender vierter Knopf als vierte Ansicht gelesen. Das
   uebernimmt allein der gestrichelte Rand. Ein "+" stand kurzzeitig davor
   und ist auf Wunsch des Users wieder raus; wer den Rand auch noch
   angleicht, nimmt dem Knopf das letzte Merkmal.
   Im Markup steht sie weiter ausserhalb der Ansichts-Gruppe, damit
   Screenreader sie auch nicht dazuzaehlen. */
.chip-btn--aktion { border-style: dashed; font-weight: 600; }
.chip-btn--aktion:hover { border-color: var(--marke-cyan); }

.filter-bar {
  background: var(--asphalt-800);
  border: 1px solid var(--asphalt-700);
  border-left: 3px solid var(--marke-cyan);
  border-radius: var(--radius);
  padding: .75rem .85rem;
  margin-bottom: 1.25rem;
}

/* Zwei Dropdowns und ein Knopf in einer Zeile; auf 360px umbrechend.
   Kein onchange-Autosubmit — das waere das einzige JavaScript der App. */
.chip-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}
.chip-form select { flex: 1 1 12rem; width: auto; }
.chip-form .btn { flex: 0 0 auto; }

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: .7rem 0 0;
  font-size: .85rem;
  color: var(--smoke);
}
/* Das ✕ ist Teil des Links, kein eigenes kleines Ziel daneben — nur so
   entsteht unter (pointer: coarse) eine 44px-Trefferflaeche. */
.chip--weg { color: var(--smoke); }
.chip--weg:hover { border-color: var(--marke-cyan); color: var(--chalk); }
.chip--reset { color: var(--marke-cyan); }
.chip--reset:hover { background: var(--asphalt-700); color: var(--chalk); }

/* --- 8 Event-Karten / Listenzeilen --------------------------------------- */
.monat-kopf {
  /* Kein Kartenrahmen, keine Interaktion: eine Trennlinie mit Beschriftung.
     Sie gliedert die Liste, statt mit den Terminen um Aufmerksamkeit zu
     konkurrieren. Das grid-column ist Pflicht — .event-list ist ein Grid und
     ab 768px zweispaltig, sonst stuende die Ueberschrift als schmale Zelle
     neben dem ersten Termin des Monats. */
  grid-column: 1 / -1;
  list-style: none;
  margin: .9rem 0 -.15rem;
  padding: 0 0 .35rem;
  border-bottom: 1px solid var(--asphalt-700);
}
.monat-kopf:first-child { margin-top: 0; }
.monat-kopf h2 {
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--marke-cyan);
}

.event-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem .9rem;
  background: var(--asphalt-800);
  border: 1px solid var(--asphalt-700);
  border-left: 3px solid var(--asphalt-700);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  min-width: 0;
}
.event-card--mine { border-left: 3px solid var(--gruen); }
.event-card--past { opacity: .58; }
.event-card > * { min-width: 0; }

/* Im Fliesstext (Rangliste) ganz normal inline. */
.event-date {
  display: inline;
  font-size: .92rem;
  font-weight: 700;
  color: var(--marke-cyan);
  letter-spacing: .01em;
}
.event-date__wd { color: var(--smoke); font-weight: 400; margin-inline-end: .45rem; }
.event-date__wd:empty { margin-inline-end: 0; }

/* In der Datumsspalte steht das Datum als Block, damit die Tagesangabe
   darunter landet statt mitten im Wort zu brechen ("3 / Tage").

   Der Wochentag hatte hier bis zum 04.09.2026 eine eigene Spalte fester
   Breite (2.2ch). Gedacht war das so: dann stehen die ZIFFERN eintaegiger und
   mehrtaegiger Termine untereinander auf derselben Kante. Der Preis dafuer
   war ein haengender Einzug — bei einem mehrtaegigen Termin ist die Spalte
   leer, das Datum begann also 26,6 px weiter rechts als die Tagesangabe und
   der Titel darunter. Gemessen an allen Breiten von 390 bis 1440 px, auf
   jeder Karte mit Tagesangabe.

   Zwei Arten von "buendig" schliessen einander an dieser Stelle aus: entweder
   die Ziffern untereinander (Wochentag haengt links heraus) oder die linken
   Kanten (Ziffern eintaegiger Termine beginnen zwei Zeichen weiter rechts).
   Die Entscheidung ist auf die linken Kanten gefallen — User-Vorgabe:
   "Das bitte beides ordentlich linksbuendig setzen, aktuell ist es versetzt."

   Der Aussenabstand des Wochentags wird hier ausdruecklich NICHT gesetzt: die
   Grundregeln oben erledigen beide Faelle schon richtig — .45rem hinter "Sa",
   und .event-date__wd:empty raeumt ihn beim mehrtaegigen Termin wieder weg.
   Ein Override hier haette dieselbe Spezifitaet wie die :empty-Regel und
   stuende spaeter, wuerde sie also schlagen und die 7,2 px Einzug
   zurueckholen, die gerade verschwunden sind. */
.event-card__date .event-date { display: block; }
.event-card__date .event-date__badge { margin-inline-start: 0; margin-top: .25rem; }

/* ⚠️ Diese Regel greift zurzeit NIRGENDS: .event-date__badge steht in der
   Vorlage immer als Geschwister von .event-date in .event-card__date, nie
   darin (geprueft 04.09.2026 ueber alle Vorlagen). "4 Tage" und "vorbei"
   erscheinen deshalb als schlichter Text und nicht als Pille — margin-top
   oben wirkt aus demselben Grund nicht, ein inline-Element nimmt keine
   senkrechten Abstaende an. Absichtlich stehen gelassen und nicht auf
   .event-card__date umgeschrieben: das waere ein Aussehen, das so nie
   jemand bestellt hat. Wer die Pille will, tauscht den Selektor. */
.event-date .event-date__badge {
  display: inline-block;
  margin-inline-start: .4rem;
  padding: 0 .4rem;
  border: 1px solid var(--asphalt-700);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--smoke);
  font-family: var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.event-title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.event-title a { color: var(--chalk); text-decoration: none; }
.event-title a:hover { text-decoration: underline; }

.event-meta {
  margin: .15rem 0 0;
  color: var(--smoke);
  font-size: .88rem;
  overflow-wrap: anywhere;
}
/* Trenner muessen sichtbar sein — in --asphalt-700 verschwanden sie auf der
   Karte komplett und die Metazeile las sich als ein einziger Satz. */
.event-meta .sep { color: #5b6373; padding-inline: .3rem; }

.event-price { font-size: .9rem; font-weight: 700; color: var(--chalk); white-space: nowrap; }
/* Kein Preis bekannt: Fliesstext statt Mono — Mono ist fuer Ziffern. */
.event-price--unknown {
  font-family: var(--font);
  color: var(--smoke);
  font-weight: 400;
  /* nowrap gilt nur fuer "1.290,00 €" — der Ersatztext darf umbrechen,
     sonst schob er die halbe Metazeile in die naechste Zeile. */
  white-space: normal;
}

.event-category {
  display: inline-block;
  padding: .1rem .55rem;
  border: 1px solid var(--marke-cyan);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--chalk);
  overflow-wrap: anywhere;
}

/* Feature-Chips: bis 6 Stück, dürfen auf 360px nicht überlaufen. */
.event-features {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.feature-chip {
  display: inline-block;
  max-width: 100%;
  padding: .08rem .5rem;
  border: 1px solid var(--asphalt-700);
  border-radius: var(--radius-sm);
  background: var(--asphalt-900);
  color: var(--smoke);
  font-size: .78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.event-votes {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .45rem;
  font-size: .88rem;
  color: var(--smoke);
}
.vote-count {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--chalk);
}
.event-card--mine .vote-count { color: var(--gruen); }

.event-action { display: grid; gap: .35rem; align-content: start; }
.event-action form { margin: 0; }
.event-action .btn { width: 100%; }
.event-source { margin: .3rem 0 0; }
/* Zweiter Knopf unter dem Interesse-Knopf: klar als Knopf erkennbar,
   aber ruhiger — er ist das Nebenangebot, nicht die Hauptaktion. */
.btn--klein {
  min-height: 32px;
  padding: .25rem .5rem;
  font-size: .8rem;
  font-weight: 600;
  background: transparent;
  border-color: var(--asphalt-700);
  color: var(--smoke);
  text-decoration: none;
}
.btn--klein:hover { background: var(--asphalt-700); color: var(--chalk); }
/* Zeigt ein Termin woandershin als auf die Importquelle, steht der Host
   im Knopftext — und der Knopf faellt auf. Selbst eingetragene Termine
   duerfen auf eine beliebige Adresse zeigen; vor dem Klick soll man
   sehen, wohin. */
.btn--fremd { border-color: var(--signal-yellow); color: var(--signal-yellow); }

.empty-state {
  border: 1px dashed var(--asphalt-700);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--smoke);
}

/* --- 9 Aufklappbare Bloecke (Protokoll, Vorschlag) ------------------------ */
/* Reines <details>, kein JavaScript. Loest die frueheren Seiten /protokoll
   und /vorschlag ab. */
.disclosure {
  background: var(--asphalt-800);
  border: 1px solid var(--asphalt-700);
  border-radius: var(--radius);
  margin-top: .8rem;
  overflow: hidden;
}
.disclosure > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  border-left: 3px solid var(--marke-cyan);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "▾";
  margin-inline-start: auto;
  color: var(--smoke);
  font-size: .9rem;
}
.disclosure[open] > summary::after { content: "▴"; }
.disclosure__zahl {
  font-size: .8rem;
  color: var(--asphalt-900);
  background: var(--marke-cyan);
  border-radius: 999px;
  padding: 0 .45rem;
}
.disclosure__body {
  padding: .9rem;
  border-top: 1px solid var(--asphalt-700);
}

/* Das Vorschlagsformular. Sieht aus wie ein aufgeklappter .disclosure, ist
   aber keiner mehr: aufgeklappt wird es ueber den Knopf in der Filterleiste,
   eine zweite Beschriftung direkt darunter waere doppelt (05.09.2026).

   Eigener Name und nicht .panel: die Klasse gibt es oben schon, sie gehoert
   der alten Vorschlagsseite propose.html (REGELN Punkt 2, sie bleibt
   erreichbar). Zwei Bedeutungen unter einem Namen waeren eine Falle fuer
   den Naechsten. */
.eintragen {
  background: var(--asphalt-800);
  border: 1px solid var(--asphalt-700);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.eintragen__kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .7rem .9rem;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 700;
  border-left: 3px solid var(--marke-cyan);
}
.eintragen__zu {
  margin-inline-start: auto;
  font-size: .85rem;
  font-weight: 400;
  color: var(--smoke);
  text-decoration: none;
  white-space: nowrap;
}
.eintragen__zu:hover { color: var(--marke-cyan); text-decoration: underline; }
.eintragen__body {
  padding: .9rem;
  border-top: 1px solid var(--asphalt-700);
}

.vote-label {
  font-family: var(--font);
  font-weight: 400;
  font-size: .84rem;
  color: var(--smoke);
}
/* Wer dabei ist — frueher nur auf der Ranglistenseite, jetzt auf jeder Karte. */
.rank-names {
  margin: 0;
  color: var(--smoke);
  font-size: .87rem;
  overflow-wrap: anywhere;
}
/* Ist niemand dabei, faellt die Zeile weg statt eine leere Luecke zu lassen.
   Ab 1280px bleibt sie als Rasterspalte stehen (siehe Responsive). */
.rank-names:empty { display: none; }

/* --- 10 Protokoll -------------------------------------------------------- */
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }

.log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .1rem .9rem;
  background: var(--asphalt-800);
  border: 1px solid var(--asphalt-700);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--asphalt-700);
  padding: .55rem .75rem;
}
.log-row > * { min-width: 0; }
.log-row--added { border-left-color: var(--gruen); }
.log-row--removed { border-left-color: var(--signal-red); }
.log-row--proposed { border-left-color: var(--signal-yellow); }

.log-time { color: var(--smoke); font-size: .84rem; white-space: nowrap; }
.log-person { font-weight: 700; color: var(--chalk); overflow-wrap: anywhere; }
.log-action { color: var(--smoke); font-size: .92rem; overflow-wrap: anywhere; }
.log-action .log-action__title { color: var(--chalk); }

/* --- 11 Pagination ------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}
.pagination li { display: block; }
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 40px;
  padding: .25rem .55rem;
  border: 1px solid var(--asphalt-700);
  border-radius: var(--radius-sm);
  background: var(--asphalt-800);
  color: var(--chalk);
  text-decoration: none;
  font-size: .9rem;
}
.pagination a:hover { background: var(--asphalt-700); color: var(--chalk); }
.pagination .is-current {
  background: var(--marke-cyan);
  border-color: var(--marke-cyan);
  color: var(--asphalt-900);
  font-weight: 700;
}
.pagination .is-gap { border-color: transparent; background: transparent; color: var(--smoke); }
.pagination .is-disabled { color: var(--smoke); opacity: .5; }
.pagination__status {
  margin-inline-start: auto;
  color: var(--smoke);
  font-size: .85rem;
  border: 0;
  background: transparent;
  min-height: 0;
}

/* --- 12 Einstieg (Schritt 1) / statische Seiten --------------------------- */
/* Ein Kasten, zwei Felder, ein Knopf: Name und E-Mail-Adresse. Derselbe
   Kasten traegt seit dem 04.09.2026 auch "Sieh in dein Postfach",
   "Anmelden als ...?" und die Fehlerseite abgelaufener Links — vier Seiten,
   ein Rahmen, damit der Ablauf zusammenhaengend aussieht. */
.einstieg {
  background: var(--asphalt-800);
  border: 1px solid var(--asphalt-700);
  border-top: 3px solid var(--marke-cyan);
  border-radius: var(--radius);
  padding: 1.1rem;
  max-width: 34rem;
  margin-inline: auto;
}
.einstieg h1 { margin-bottom: .3rem; }

/* VERWAIST seit dem 04.09.2026: die Namenswahl (Dropdown der bekannten
   Namen + Textfeld fuer Neue) ist durch das Anmeldeformular ersetzt. Kein
   Template benutzt diese Klassen mehr. Bleibt stehen, REGELN Punkt 2. */
.name-wahl,
.name-neu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem;
  margin-bottom: .9rem;
}
.name-wahl select,
.name-neu input[type="text"] { flex: 1 1 12rem; width: auto; }
.name-wahl .btn,
.name-neu .btn { flex: 0 0 auto; }
.name-neu {
  border-top: 1px solid var(--asphalt-700);
  padding-top: .85rem;
}
.name-neu label { flex: 1 1 100%; margin: 0; }

.placeholder-note {
  border: 1px solid var(--marke-cyan);
  border-left: 4px solid var(--marke-cyan);
  border-radius: var(--radius-sm);
  background: var(--asphalt-800);
  padding: .7rem .85rem;
  margin-bottom: 1.25rem;
}
.ph {
  font-family: var(--mono);
  background: var(--asphalt-700);
  color: var(--marke-cyan);
  border-radius: 4px;
  padding: 0 .3rem;
  /* kein white-space:nowrap — lange Klammerfelder liefen sonst auf 360px raus */
  overflow-wrap: anywhere;
  display: inline-block;
  max-width: 100%;
}

.errorpage { text-align: center; padding-block: 2rem; }
.errorpage .form-actions { justify-content: center; }
.errorpage__code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.5rem, 2rem + 12vw, 7rem);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 .5rem;
  color: var(--marke-cyan);
  letter-spacing: .04em;
}

/* --- 13 Responsive ------------------------------------------------------- */

/* ab 768: zwei Spalten. Die Filterzeile braucht keinen Aufklapp-Hack mehr —
   sie ist kein <details>, sondern eine Reihe Chips und zwei Dropdowns. */
@media (min-width: 768px) {
  .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .log-row {
    grid-template-columns: 8.5rem minmax(0, 10rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* ab 1280: Listenzeilen statt Karten */
@media (min-width: 1280px) {
  .event-list { grid-template-columns: minmax(0, 1fr); gap: .45rem; }

  /* Fuenf Spalten statt sechs: Kategorie und Merkmale sind von der Karte
     verschwunden, die Namen der Interessierten dazugekommen. */
  .event-card {
    /* Die drei festen Spalten waren reine rem-Werte und wuchsen mit der
       Grundschrift mit — die Fensterbreite nicht. Bei 32 px Grundschrift
       schrumpfte die Titelspalte dadurch von 409 auf 105 px und zerriss
       Referenzcodes mitten im Wort ("PF00 / 1-26 / Almer / ia / E").
       clamp() deckelt jede feste Spalte, und der Titel bekommt einen
       Mindestwert, unter den er nicht mehr faellt. */
    grid-template-columns:
      clamp(9rem, 10.75rem, 190px)   /* Datum ("28.–30.09.2026" einzeilig) */
      minmax(11rem, 1.9fr)           /* Titel + Strecke */
      minmax(0, 1.4fr)               /* wer dabei ist */
      clamp(3.5rem, 4.25rem, 75px)   /* Stimmen */
      clamp(8rem, 12.5rem, 215px);  /* Aktion */
    /* Die Aktionsspalte war 10,75rem breit und auf "✓ Dabei"
       zugeschnitten. "Ich bin nicht dabei" (05.09.2026) braucht
       einzeilig 192,7 px — im Browser als max-content des fertigen
       Knopfes gemessen, nicht aus Schriftbreite und Innenabstand
       geschaetzt: der erste Versuch mit 192 px lag 0,7 px daneben und
       der Knopf brach doch um, hoeher als "Zum Event" darunter.
       12,5rem = 200 px laesst Luft. Der Deckel bleibt, damit die
       Spalte bei grosser Grundschrift nicht den Titel auffrisst
       (Responsive-Befund 04.09.2026) — dort bricht der Knopf dann
       eben um, das ist der harmlosere Fehler. Wer die Beschriftung
       aendert, misst hier nach. */
    align-items: center;
    gap: .3rem .9rem;
    padding: .6rem .9rem;
  }
  .event-card__date { align-self: center; }
  /* Im Raster muss die Namensspalte auch leer ihren Platz behalten, sonst
     rutschen Stimmen und Aktion eine Spalte nach links. */
  .event-card .rank-names:empty { display: block; }
  .event-card__votes { justify-self: center; text-align: center; }
  .event-votes { justify-content: center; flex-direction: column; align-items: center; gap: 0; }
  /* Nicht kleiner als 12px: darunter wird die Beschriftung auf einem
     Laptop muehsam, und gespart ist damit nichts (Responsive-Pruefung
     04.09.2026). 0.76rem = 12.16px. */
  .event-votes .vote-label { font-size: .76rem; }
  .event-title { font-size: .98rem; }
  .event-meta { font-size: .84rem; }
}

/* ab 1440: etwas mehr Luft, Container bleibt bei 1240 zentriert */
@media (min-width: 1440px) {
  .site-main { padding-block: 1.75rem 3rem; }
  .event-card { padding: .7rem 1.1rem; }
}

/* --- 14 Pointer / Motion / Print ----------------------------------------- */

/* Tap-Targets über den Zeigertyp, NICHT über die Breite. */
@media (pointer: coarse) {
  .btn,
  .pagination a,
  .pagination span,
  .disclosure > summary,
  .eintragen__zu,
  .chip-btn,
  .chip--weg,
  .chip--reset,
  input[type="text"],
  input[type="email"],
  input[type="date"],
  select,
  textarea {
    min-height: 44px;
  }
  .btn--small { min-height: 44px; }
  .footer-nav a,
  .event-source a,
  .footer-marke {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Links im Fliesstext (Kleingedrucktes der Einstiegsseite) lassen sich
     nicht auf 44px strecken, ohne den Absatz zu zerreissen. Senkrechte
     Innenabstaende vergroessern die Trefferflaeche trotzdem spuerbar,
     ohne den Zeilenfluss zu brechen. */
  .einstieg p a,
  .muted a,
  small a {
    display: inline-block;
    padding-block: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .filter-bar, .disclosure, .eintragen,
  .event-action, .pagination { display: none; }
  .event-card, .log-row { border: 1px solid #999; background: #fff; color: #000; }

  /* Die Farben des dunklen Designs sind spezifischer als das generische
     color:#000 oben und ueberlebten den Druck unveraendert: Datum und
     Monatsueberschrift standen in Signalgelb auf Weiss (1,43:1), die
     Stimmenzahl in Kreideweiss (1,10:1), Strecke und Beschriftungen in
     Rauchgrau (2,55:1) — WCAG verlangt 4,5:1. Auf Papier war davon fast
     nichts zu lesen. */
  .event-date, .event-date__wd, .event-date__val,
  .monat-kopf h2, .page-head__saison,
  .vote-count, .event-title, .log-time, .log-person { color: #000; }
  .event-meta, .muted, .vote-label, .rank-names,
  .event-price, .event-date__badge { color: #333; }
  .monat-kopf { border-bottom: 1px solid #999; }
}

/* Flache Viewports (Telefon im Querformat). Kopfzeile, Seitentitel und
   Filterleiste brauchten dort zusammen 329 von 390 px Hoehe — vom ersten
   Termin blieb die Datumszeile, der Titel war nicht mehr zu sehen. Der
   Kernzweck der Seite war ohne Scrollen nicht erfuellbar. Im Stylesheet
   gab es bis dahin keine einzige Regel fuer flache Schirme. */
@media (orientation: landscape) and (max-height: 500px) {
  .header-inner { padding-block: .35rem; }
  .brand__claim { display: none; }
  .flagge { width: 40px; height: 24px; }
  /* Der Frische-Hinweis ist eine Nebeninformation und kostet hier eine
     ganze Zeile. */
  .page-head__frische { display: none; }
  .page-head { margin-bottom: .4rem; }
  .page-head h1 { font-size: 1.5rem; }
  .filter-bar { padding: .4rem .6rem; margin-bottom: .5rem; }
  .chip-row { gap: .3rem; margin-bottom: .3rem; }
  .chip-btn { padding: .3rem .6rem; min-height: 36px; }
  .monat-kopf { margin: .5rem 0 -.1rem; }
  .site-main { padding-block: .5rem; }
}

/* Sehr schmale Schirme: die Flagge etwas kleiner, damit sie neben dem
   Schriftzug bleibt statt ihn zu verdraengen. */
@media (max-width: 420px) {
  .marke { gap: .55rem; }
  .flagge { width: 46px; height: 28px; }
}

/* Bis 365 px brachen die drei Ansichts-Chips in DREI Zeilen statt zwei.
   Das schob den ersten "Ich bin dabei"-Knopf von 660 auf 781 px nach
   unten — auf genau den Geraeten, auf denen die App am meisten benutzt
   wird. Etwas weniger Innenabstand und Laufweite reichen fuer zwei
   Zeilen; die 44-px-Trefferflaeche aus dem coarse-Block bleibt. */
@media (max-width: 365px) {
  .chip-btn { padding-inline: .55rem; font-size: .82rem; letter-spacing: 0; }
  .chip-row { gap: .3rem; }
}