/* Das gemeinsame Gerüst aller Seiten: Farben, Schriften, Kopfzeile mit
   Marke und Navigation, Filterleiste, Werkzeugleiste (Trefferzahl,
   Schalter, Chips, Stand) und Fußzeile. Eine Datei für Liste, Karte und
   Startseite - zwei Kopien derselben Kopfzeile wären beim nächsten Umbau
   auseinandergelaufen (dieselbe Linie wie bei filter-ui.css). Wird mit
   ?v=-Stempel eingebunden (scripts/stamp_assets.py).

   SEIT DEM 21.09.2026 GILT DER STYLE GUIDE DES NUTZERS ("Design-System
   v1", Richtung "Morgenstart"): Navy und Signal-Orange, warme Neutrale,
   vier Sportfarben als zweite Ebene; Barlow Condensed für alles Große,
   Barlow für Text und Bedienelemente (vendor/fonts/barlow.css, selbst
   gehostet); Radius 10 px für Bedienelemente, 14-16 px für Karten und
   Panels; Primär ist Navy, das Orange bleibt dem Hero-CTA vorbehalten;
   Klickflächen mindestens 40 px. Die Werte unten sind die des Guides -
   wer eine Farbe ändert, ändert den Guide.

   Die Variablen sind der Vertrag mit filter-ui.css und event-detail.css:
   --accent ist die Hervorhebung (Hauptknopf, gewählte Pille, Sortier-
   pfeil), --on-accent die Schrift darauf; --frame die Linien um einen
   aufgeklappten Block.

   ZWEI Farbschemata: hell ist der Guide ("Kreide" als Grund, "Nacht" als
   Primärfarbe), dunkel seine Dunkelmodus-Zeile ("Navy wird zur Fläche,
   Signal bleibt Signal, Sportfarben aufgehellt"). Das Schema hängt an
   `data-theme` am <html>: "dark" (Voreinstellung, die Werte in :root)
   oder "light" (der Block :root[data-theme="light"]). Gesetzt wird das
   Attribut von einem kleinen Skript im <head> jeder Seite (gespeicherte
   Wahl `endurance-theme` vor der Systemeinstellung), der Knopf
   .theme-btn in der Kopfzeile schaltet um. Die Gestaltung hängt NUR an
   den Variablen - feste Farben gibt es nur dort, wo eine Fläche in
   beiden Schemata gleich aussieht (Leaflet-Popup, Sportfarben der
   Marker, die Navy-Fußzeile). Nicht auf eine @media-Abfrage der
   Systemeinstellung umstellen: Dann hätte der Knopf keine Wirkung
   (test_farbschema_skript wacht darüber). */
:root {
  color-scheme: dark;
  --font-text: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius-ctl: 10px;
  --radius-card: 16px;
  --seite-rand: 28px;
  /* Dunkelmodus des Guides: Navy wird zur Fläche. */
  --bg: #0b1b33;
  --panel: #13233d;
  --panel-2: #0f1d35;
  --border: #2a3a56;
  --border-strong: #3e5273;
  --text: #edf1f7;
  --text-muted: #9aa6b8;
  --accent: #edf1f7;
  --on-accent: #0b1b33;
  --accent-bg: #1c2c48;
  --row-alt: #0f1f38;
  --row-hover: #182a47;
  --frame: #3e5273;
  --brand: #e8590c;
  --brand-bg: rgba(232, 89, 12, 0.18);
  --link: #8fb3e6;
  --hero-cta: #f97316;
  --on-hero-cta: #0b1b33;
  --header-bg: var(--bg);
  --footer-bg: #0b1b33;
  /* Die Marke auf Navy: weiße Kachel, Navy-Route, der Punkt bleibt
     orange (Guide, Abschnitt Marke). */
  --logo-bg: #ffffff;
  --logo-fg: #0b1b33;
  --logo-dot: #e8590c;
  --pill-active-bg: var(--accent-bg);
  --pill-active-fg: var(--text);
  --pill-active-border: var(--border-strong);
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  /* Sportfarben (Icon, Marker, Tag), ihre Tonfläche und die Textfarbe
     darauf - aufgehellt für den dunklen Grund. */
  --sport-laufen: #f97316;    --sport-laufen-bg: #3a2213;    --sport-laufen-fg: #ffb27a;
  --sport-fahrrad: #3db55a;   --sport-fahrrad-bg: #14321e;   --sport-fahrrad-fg: #8fe0a4;
  --sport-schwimmen: #4a9be6; --sport-schwimmen-bg: #10294a; --sport-schwimmen-fg: #9cc8f5;
  --sport-triathlon: #9a7bf0; --sport-triathlon-bg: #2b2352; --sport-triathlon-fg: #c4b3fa;
  /* Charity: die Markierung der Benefiz-Veranstaltungen (Herz in der
     Spalte Kategorie, Abzeichen in der Box - vom Nutzer am 21.09.2026
     gewünscht; eine rosa Zeile dazu hat er am selben Tag verworfen). Eine fünfte Farbe neben den vier
     Sportfarben, nach demselben Muster: Farbe / Tonfläche / Textfarbe
     darauf. Im Dunkeln ist die Tonfläche dunkel und die Schrift hell -
     ein helles Rosa unter weißem Text wäre unlesbar, genau die Falle,
     vor der der Style Guide bei --on-accent warnt. */
  --charity: #f783ac;         --charity-bg: #3a1f2b;         --charity-fg: #ffc9dd;
  /* Die Karte (karte.html): Fläche außerhalb der Länder mit feinem
     Raster, die Landfläche, ihr Umriss, der Schleier über den fremden
     Kacheln und der Filter über den OSM-Kacheln. */
  --map-bg: #0b1b33;
  --map-grid: rgba(255, 255, 255, 0.05);
  --map-land: #14243e;
  --map-outline: #3e5273;
  --map-mask: #0b1b33;
  --map-mask-opacity: 0.55;
  --map-tile-filter: brightness(0.72) saturate(0.7);
  --map-halo: #14243e;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f2ed;            /* Kreide: Seitenhintergrund, warm statt Grau */
  --panel: #ffffff;         /* Weiß: Karten, Tabelle, Panels */
  --panel-2: #f7f6f2;
  --border: #e2ded5;        /* Linie: Rahmen, Trennlinien */
  --border-strong: #c8c2b4;
  --text: #0f1b20;          /* Tinte */
  --text-muted: #66707f;    /* Grau: Beschriftungen (4,5:1 auf Weiß) */
  --accent: #0b1b33;        /* Nacht: Primär-Buttons, gewählte Filter */
  --on-accent: #ffffff;
  --accent-bg: #edf1f7;     /* Ton: gewählte Zeile, aufgeklappter Block, Icon-Flächen */
  --row-alt: #faf9f6;
  --row-hover: #f4f2ed;
  --frame: #0b1b33;
  --brand: #e8590c;         /* Signal: Marke, Sportfarbe Laufen, Akzente - nie als Fläche unter weißem Text */
  --brand-bg: #fff1e8;
  --link: #163b6b;          /* Tiefe: Hover, Links */
  --hero-cta: #f97316;      /* Sonne: Hero-CTA mit Navy-Text */
  --on-hero-cta: #0b1b33;
  --header-bg: var(--panel);
  --footer-bg: #0b1b33;
  /* Die Marke auf hellem Grund: Navy-Kachel, weiße Route, oranger Punkt. */
  --logo-bg: #0b1b33;
  --logo-fg: #ffffff;
  --logo-dot: #e8590c;
  --pill-active-bg: var(--accent);
  --pill-active-fg: var(--on-accent);
  --pill-active-border: var(--accent);
  --shadow: 0 12px 36px rgba(11, 27, 51, 0.14);
  --charity: #d6336c;         --charity-bg: #fff0f6;         --charity-fg: #a61e4d;
  --sport-laufen: #e8590c;    --sport-laufen-bg: #fff1e8;    --sport-laufen-fg: #9a3b05;
  --sport-fahrrad: #2b8a3e;   --sport-fahrrad-bg: #e9f7ec;   --sport-fahrrad-fg: #1b5e2b;
  --sport-schwimmen: #1971c2; --sport-schwimmen-bg: #e7f1fc; --sport-schwimmen-fg: #0f4c86;
  --sport-triathlon: #7048e8; --sport-triathlon-bg: #f1ecff; --sport-triathlon-fg: #482fa6;
  --map-bg: #e9e6df;
  --map-grid: rgba(11, 27, 51, 0.06);
  --map-land: #fbfaf7;
  --map-outline: #c8c2b4;
  --map-mask: #dad6cc;
  --map-mask-opacity: 0.6;
  --map-tile-filter: grayscale(0.35) brightness(1.02);
  --map-halo: #fbfaf7;
}
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}
a { color: inherit; }
/* Überschriften und Zahlen in der Condensed - "wirkt wie eine
   Startnummer, bleibt in der Tabelle ruhig". */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0; }
/* Nur für Screenreader (z. B. die Beschriftung des Teilen-Symbols). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Kopfzeile: Marke, Navigation, Aktionen ----------
   Die Marke führt zur Startseite - die übliche Konvention und der einzige
   Rückweg, seit der Startseiten-Knopf weg ist (vom Nutzer als "bloß
   verwirrend" entfernt). Die Klassen .top-bar/.top-actions bleiben: der
   Rauchtest prüft an ihnen, dass die Knopfreihe im Kopf bleibt. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 14px var(--seite-rand);
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--logo-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--logo-fg);
}
/* Der Punkt am Ende der Linie: im Hellen orange auf Marine (Vorlage der
   Karte), im Dunkeln weiß auf Orange. */
.brand-logo circle { fill: var(--logo-dot); }
.brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
/* Die Startseite trägt die Kopfzeile auf Navy (Guide: "Nacht - Kopf der
   Startseite, Fußzeile"): dort die weiße Kachel mit Navy-Route. Die
   Variablen werden nur INNERHALB der Kopfzeile umgebogen. */
.site-header--navy {
  background: #0b1b33;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.72);
  --panel-2: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.4);
  --logo-bg: #ffffff;
  --logo-fg: #0b1b33;
  --logo-dot: #e8590c;
  --pill-active-bg: #ffffff;
  --pill-active-fg: #0b1b33;
  color: #fff;
}
.site-nav { display: flex; gap: 26px; }
.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 6px 0;
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  /* Rechts, auch wenn die Reihe unter die Marke umbricht: ein einzelnes
     Flex-Element auf einer neuen Zeile beginnt sonst links. */
  margin-left: auto;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { border-color: var(--border-strong); }
.lang-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--border);
  background: var(--panel-2);
  flex-shrink: 0;
}
.lang-btn {
  padding: 7px 11px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}
.lang-btn.active { background: var(--pill-active-bg); color: var(--pill-active-fg); }
/* Hell/Dunkel: ein Symbol-Knopf; im Dunkeln zeigt er die Sonne (dahin
   führt der Klick), im Hellen den Mond. Umgeschaltet wird vom Skript im
   <head> der Seite (data-theme), siehe oben. */
.theme-btn .theme-moon { display: none; }
:root[data-theme="light"] .theme-btn .theme-sun { display: none; }
:root[data-theme="light"] .theme-btn .theme-moon { display: inline; }
/* Der Anmelde-Knopf kommt aus auth.js (weiß umrandet für den alten
   blauen Kopf) - hier ruhig: nur Symbol und Wort. */
#auth-mount .ee-auth-btn,
#auth-mount .ee-auth-user button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px 0 12px; border-radius: var(--radius-ctl);
  border: 1px solid transparent; background: transparent;
  color: var(--text); font: inherit; font-size: 0.95rem; font-weight: 600;
}
#auth-mount .ee-auth-btn::before {
  content: '';
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
#auth-mount .ee-auth-btn:hover,
#auth-mount .ee-auth-user button:hover { border-color: var(--border); background: var(--panel-2); }
/* Anmelde-Dialog (auth.js) auf dunkler Fläche: der Hauptknopf ist hell,
   die Schrift darauf muss dunkel sein. */
.ee-submit-btn { color: var(--on-accent) !important; }
/* Leer, solange alles in Ordnung ist; die Notbremse im Skript schreibt
   hierhin ("Bitte neu laden"). */
.page-note {
  margin: 0;
  padding: 10px var(--seite-rand);
  background: var(--brand-bg);
  color: var(--text);
  font-size: 0.9rem;
}
.page-note:empty { display: none; }

/* ---------- Filterleiste ----------
   Suchfeld, die Filterpillen (filter-ui.js, buildButtonBar) und rechts
   die Knöpfe der Seite (Liste: Karte + E-Mail-Abo, Karte: Liste). */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px var(--seite-rand);
  border-bottom: 1px solid var(--border);
}
.filter-bar-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.bar-btn:hover { background: var(--accent-bg); }
.bar-btn svg { flex-shrink: 0; }

/* ---------- Werkzeugleiste: Trefferzahl, Schalter, Chips, Stand ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 16px var(--seite-rand) 12px;
}
.result-count {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
/* Der Schalter steht direkt hinter der Trefferzahl: Er verändert, WIE
   diese Zahl zu lesen ist (Veranstaltungen oder Strecken). Ein echter
   Schalter (Schiene + Knopf) wie in der Vorlage; das Häkchen bleibt als
   Eingabe, nur unsichtbar. */
.group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.group-toggle:hover { color: var(--text); }
.group-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.group-toggle .switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.16s ease;
  flex-shrink: 0;
}
.group-toggle .switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--panel);
  transition: transform 0.16s ease;
}
.group-toggle input:checked + .switch { background: var(--accent); }
.group-toggle input:checked + .switch::after { transform: translateX(20px); }
.group-toggle input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.active-chips:empty { display: none; }
/* Chips (aktive Filter): Pillen auf der Tonfläche, wie im Guide. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-bg);
  border: 1px solid transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}
.chip button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}
.chip button:hover { color: var(--text); }
/* "Filter löschen" als unterstrichener Link, nicht als Knopf: Er
   konkurriert sonst mit den Pillen. */
.reset-btn {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.reset-btn:hover { color: var(--text-muted); }
/* "Stand: Mo, 21.09.2026" - aus dem Last-Modified der events.json. */
.stand {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
  white-space: nowrap;
}
.stand[hidden] { display: none; }

/* ---------- Fußzeile: "Dein Event fehlt?" links, Impressum rechts ----------
   Impressum und Datenschutz müssen von JEDER Seite aus unmittelbar
   erreichbar sein (§ 5 DDG). */
/* Die Fußzeile ist Navy (Guide: "Nacht - Fußzeile"), in beiden
   Schemata; Schrift darauf weiß bzw. gedämpft weiß. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px var(--seite-rand) 18px;
  background: var(--footer-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
}
.fehlt-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fehlt-bar .plus { font-size: 1.1rem; line-height: 1; }
.fehlt-btn {
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fehlt-btn:hover { color: rgba(255, 255, 255, 0.8); }
/* Die Fußnote zum Sternchen. Sie stand mit 60 % Deckung so leise da,
   dass der Nutzer sie am 21.09.2026 gar nicht fand; jetzt 78 % - immer
   noch zurückhaltend, aber lesbar. Die eigentliche Antwort auf die
   Klage ist der Tooltip am Sternchen selbst (.vorlaeufig-stern). */
.fussnote { font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); }
.fussnote[hidden] { display: none; }
.seiten-footer { display: flex; gap: 20px; margin-left: auto; }
.seiten-footer a { color: inherit; text-decoration: none; }
.seiten-footer a:hover { color: #fff; text-decoration: underline; }
.seiten-footer .trenner { display: none; }

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  :root { --seite-rand: 16px; }
  .site-header { gap: 10px 18px; padding: 12px var(--seite-rand); }
  .brand-name { font-size: 1.15rem; }
  .brand-logo { width: 36px; height: 36px; border-radius: 10px; }
  .site-nav { gap: 18px; }
  .result-count { font-size: 1.25rem; }
  .filter-bar { padding: 12px var(--seite-rand); }
  .master-search { flex: 1 1 100%; }
  .filter-bar-actions { margin-left: 0; }
  .stand { margin-left: 0; flex-basis: 100%; }
  .toolbar { padding: 12px var(--seite-rand) 10px; }
}

/* Das Sternchen an einem vorläufigen Termin ("Juni 2027*"). Es ist ein
   <abbr> mit Erklärung im `title`, und diese Regel macht sichtbar, dass
   dort etwas zu holen ist: Ohne sie sieht ein <abbr> aus wie normaler
   Text, und genau das war die Klage ("finde ich als user nirgendwo was
   genau das '*' bedeutet"). Der Hilfe-Cursor und die gepunktete Linie
   sind die Konvention dafür; die Fußzeile trägt die Fußnote zusätzlich,
   weil ein `title` auf einem Touchgerät nicht erscheint. */
.vorlaeufig-stern {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
  color: var(--brand);
  font-weight: 700;
}