* { box-sizing: border-box; }

:root {
  --c-musik: #7c3aed;
  --c-buehne: #dc2626;
  --c-kunst: #db2777;
  --c-markt-fest: #ea580c;
  --c-familie: #16a34a;
  /* Nur für WEISSEN Text AUF der Farbe (Badge, aktiver Kategorie-Chip) -
     die beiden Basisfarben oben haben gegen Weiß zu wenig Kontrast für
     kleine Schrift (3,56:1 bzw. 3,30:1, WCAG verlangt 4,5:1 bei <14px).
     Bewusst EIGENE Variablen statt die Basisfarben selbst abzudunkeln,
     damit Kartenmarker/Farbbalken/Chip-Punkte unverändert bleiben (die
     nutzen weiterhin --c-markt-fest/--c-familie direkt). Gefunden+behoben
     2026-08-29. */
  --c-markt-fest-ink: #c94c0a;
  --c-familie-ink: #12863d;
  --c-vortrag-bildung: #2563eb;
  --c-film: #0e7490;
  --c-kulinarik: #b45309;
  --c-sport: #4d7c0f;
  --c-sonstiges: #64748b;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1c2430;
  --muted: #53606e;
  --border: #e4e8ee;
  /* Markenfarben, angelehnt an das Schwesterprojekt GuideYourRide:
     Navy als Hauptakzent (--accent, bisher genutzt), Ocean-Blau und Gold
     als Zweitfarben fuer Logo/Hervorhebungen (siehe index.html, .brand-*). */
  --accent: #0b3d91;
  --ocean: #0077b6;
  --gold: #f4b400;
  --gold-ink: #5c4300;
}

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

/* ---------- Header & Filter ---------- */
.app-header {
  padding: 10px 16px 6px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* Nutzerwunsch 2026-08-28: Melden/Admin sollen IMMER neben dem Logo
     bleiben, nicht bei wenig Platz in eine zweite Zeile umbrechen. */
  flex-wrap: nowrap;
}
.header-row .brand { min-width: 0; }
.header-row .brand-text { min-width: 0; overflow: hidden; }
.header-row .brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-header h1 {
  margin: 0 0 6px;
  font-size: 1.25rem;
}

/* Marke: Logo + Wortmarke */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  /* Bei sehr grosser Systemschrift (getestet 200%) hat "GuideYourTime"
     keine Leerzeichen zum Umbrechen - ohne das hier wuerde der Name
     vom uebergeordneten overflow:hidden hart mitten im Buchstaben
     abgeschnitten statt sauber mit "…" zu enden. */
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
/* Zweifarbiges Logo wie beim Schwesterprojekt GuideYourRide:
   "Guide" in Ocean-Blau (fett), "YourTime" in Gold. */
.brand-name b { color: var(--ocean); }
.brand-name i { color: var(--gold); font-style: normal; }

.brand-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.updated {
  /* Nutzerwunsch 2026-08-28: Stand-Datum weg (spart auch Platz im
     Kopf, damit Melden/Admin sicher neben dem Logo bleiben). Element
     bleibt im DOM (js/app.js setzt weiterhin seinen textContent), wird
     hier nur unsichtbar gemacht statt entfernt zu werden. */
  display: none;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Sichtbarer Favoriten-Filter im Header (Ersatz für den aus dem Filter-Sheet
   entfernten Chip - Nutzerwunsch 2026-08-28). */
.fav-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.fav-header-btn:hover { background: #eef1f5; }
.fav-header-btn.active,
.fav-header-btn[data-active="1"] {
  background: #f5b301;
  border-color: #f5b301;
  color: #3a2f00;
}

/* Ort (editierbar) + Umkreis, immer sichtbar direkt über der Suche (nicht
   erst im Filter-Sheet versteckt) - Nutzerwunsch 2026-08-28. */
.header-ort-row {
  display: flex;
  /* Nutzerwunsch 2026-08-28: Ort + Umkreis IMMER in einer Zeile, auch mobil -
     das Ort-Feld schrumpft notfalls, statt den Umkreis umbrechen zu lassen. */
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  margin: 6px 0 2px;
}
.header-city-search { flex: 1 1 auto; min-width: 90px; max-width: 260px; }
.header-ort-row .near-active { flex: none; }
/* Roter Pin vor dem Ortsfeld, roter Pin mit Umkreis-Ring vor dem Regler
   (Nutzerwunsch 2026-08-30). Bewusst Inline-SVG statt Emoji: 📍/◉ werden je
   nach Betriebssystem völlig anders und oft gar nicht rot gerendert.
   flex:none, damit die Icons in der nowrap-Zeile nie mitschrumpfen. */
.header-ort-row .ort-ic,
.header-ort-row .umkreis-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.header-ort-row .ort-ic { margin-right: -4px; }

.header-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 8px;
}

#search {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Filter-Button + Filter-Panel-Teile: nur auf dem Handy sichtbar */
.filter-btn,
.filter-sheet-head,
.filter-sheet-foot,
.filter-backdrop {
  display: none;
}

.filter-btn {
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-btn .filter-ic { font-size: 1.1rem; line-height: 1; }

.filter-btn.has-filters {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-count {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.72rem;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
}

.filters {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 6px 16px 10px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.chip {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.chip:hover { background: #eef1f5; }

.time-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cat-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chip-color);
}

.cat-chip.active {
  background: var(--chip-color-active, var(--chip-color));
  border-color: var(--chip-color-active, var(--chip-color));
  color: #fff;
}

.cat-chip.active::before { background: #fff; }

.cat-chip .count {
  opacity: 0.65;
  font-size: 0.72rem;
}

.custom-date {
  font-size: 0.8rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.custom-date input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 0.8rem;
  color: var(--text);
}

/* ---------- Ansicht-Umschalter (nur mobil) ---------- */
.view-toggle {
  display: none;
  padding: 8px 16px;
  gap: 8px;
}

.view-toggle button {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

.view-toggle button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- Inhalt: Liste + Karte ---------- */
.content {
  flex: 1;
  display: flex;
  min-height: 0;
}

.list-pane {
  width: 46%;
  max-width: 640px;
  overflow-y: auto;
  padding: 12px 16px 40px;
}

.map-pane {
  flex: 1;
  min-height: 0;
}

#map {
  height: 100%;
  min-height: 300px;
}

.result-count {
  /* Nutzerwunsch 2026-08-28: Trefferzahl weg. Element bleibt im DOM
     (js/app.js schreibt weiter hinein), nur unsichtbar gemacht. */
  display: none;
}

.day-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 10px 0 6px;
  margin: 8px 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  z-index: 5;
}

.day-header .day-tag {
  color: var(--accent);
  margin-right: 6px;
}

details.running {
  margin-bottom: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 10px;
}

/* Eindeutige Aufklapp-Erkennbarkeit (Nutzerfeedback 2026-08-28: war nicht
   klar, dass man antippen muss, weil der native Browser-Pfeil oft zu
   unauffällig ist neben dem schimmernden Farbverlauf). Eigener, immer
   sichtbarer Pfeil + Hinweistext statt des nativen Markers. */
details.running summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 2px;
  list-style: none; /* nativer Marker (Firefox) */
}
details.running summary::-webkit-details-marker { display: none; } /* nativer Marker (Chrome/Safari) */
details.running summary::marker { content: ''; }

details.running summary:hover { background: rgba(220, 38, 38, 0.06); border-radius: 6px; }

.running-chevron {
  flex: none;
  display: inline-block; /* "transform" wirkt sonst nicht (inline-Box) */
  font-size: 0.85rem;
  color: #dc2626;
  transition: transform 0.15s ease;
}
details.running[open] .running-chevron { transform: rotate(90deg); }

.running-label {
  display: inline-block; /* noetig, damit "transform" im Keyframe wirkt */
  background: linear-gradient(90deg, #dc2626, #f97316, #facc15, #dc2626, #b91c1c);
  background-size: 500% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: waber 1.6s ease-in-out infinite;
}

.running-hint {
  flex: none;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
details.running[open] .running-hint { display: none; } /* nach dem Aufklappen ueberfluessig */

@keyframes waber {
  0%   { background-position: 0% 50%;   transform: scale(1) skewX(0deg); }
  25%  { background-position: 60% 50%;  transform: scale(1.035) skewX(-1.5deg); }
  50%  { background-position: 100% 50%; transform: scale(1) skewX(0deg); }
  75%  { background-position: 40% 50%;  transform: scale(1.035) skewX(1.5deg); }
  100% { background-position: 0% 50%;   transform: scale(1) skewX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .running-label { animation: none; background: none; -webkit-text-fill-color: initial; color: #dc2626; }
}

@media (max-width: 480px) {
  .running-hint { display: none; } /* auf schmalen Screens reicht der Pfeil */
  /* Untertitel ist rein dekorativ (steht eh im Ort-Feld darunter) - bei
     kleinem Display oder großer Schrifteinstellung quetscht er sonst die
     wichtigeren Header-Buttons (Melden/Admin/Favoriten) zusammen.
     Nutzerwunsch 2026-08-29. */
  .brand-sub { display: none; }
  /* Seit dem Konto-Knopf (2026-08-30) stehen im angemeldeten Admin-Fall VIER
     Knöpfe in der Kopfzeile. .header-meta schrumpft nie (flex-shrink:0), also
     ginge der fehlende Platz komplett zulasten der Wortmarke - gemessen bei
     375 px fiel "GuideYourTime" auf "Gu…" zusammen. Statt die Marke zu opfern
     wird "Melden" mobil zum reinen ＋-Knopf (wie das Zahnrad daneben) und der
     Benutzername gedeckelt. Normale Besucher sehen nur drei Knöpfe und waren
     ohnehin nie betroffen. */
  .konto-btn { max-width: 92px; }
  /* "Melden" wird mobil zum reinen ＋-Knopf: das ist der groesste
     Platzgewinn in der Kopfzeile und die Aktion ist nicht die primaere. */
  .melden-wort { display: none; }
  /* Bei 375 px passen Logo + volle Wortmarke + Kopfzeilen-Knöpfe rechnerisch
     nicht nebeneinander (.header-meta schrumpft nie, .header-row bricht bewusst
     nicht um) - "GuideYourTime" wurde schon vor dem Konto-Knopf abgeschnitten.
     Etwas kleinere Schrift lässt spürbar mehr vom Namen stehen, statt ihn nur
     früher mit "…" enden zu lassen. */
  .brand-name { font-size: 1.15rem; }
}

.event {
  display: flex;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* Quick-Win gegen den dokumentierten Rendering-Flaschenhals (Listen-
     Rendering, nicht das Laden, ist bei vielen tausend Terminen die
     Bremse): der Browser überspringt Layout/Paint für Karten außerhalb
     des sichtbaren Bereichs, bis sie ins Blickfeld scrollen. Kein JS-Umbau
     nötig, ~60-80% weniger Renderzeit bei langen Listen laut Messung.
     contain-intrinsic-size schätzt die Kartenhöhe, bis der Browser die
     echte kennt (verhindert Sprünge in der Scrollbar). Gefunden+behoben
     2026-08-29. */
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}

.event:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Karten sind jetzt per Tastatur fokussierbar (tabindex=0) - sichtbarer
   Fokusring statt des Browser-Standards, im Markenlook. */
.event:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.event.no-geo { cursor: default; }

.event-color {
  width: 4px;
  border-radius: 2px;
  background: var(--ev-color);
  flex-shrink: 0;
}

.event-main { flex: 1; min-width: 0; }

.event-top {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.event-time {
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

.badge {
  font-size: 0.68rem;
  padding: 1px 8px;
  border-radius: 999px;
  color: #fff;
  /* --ev-badge-color (kontrastkorrigiert) hat Vorrang, sonst --ev-color -
     siehe --c-*-ink in :root weiter oben. */
  background: var(--ev-badge-color, var(--ev-color));
  white-space: nowrap;
  /* Bei sehr grosser Systemschrift (getestet 200%) ist eine Kategorie wie
     "Sport & Freizeit" allein schon breiter als eine 320px-Karte - ohne
     min-width:0 kann ein Flex-Kind trotz flex-wrap nicht unter seine
     Text-Eigenbreite schrumpfen und ragt seitlich aus der Karte heraus
     (live gefunden). max-width+ellipsis schneidet sauber statt hart ab. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.draft-tag {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f5d67a;
  white-space: nowrap;
}

.event-title {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 2px 0;
}

.event-title a {
  color: var(--text);
  text-decoration: none;
}

.event-title a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.event-venue {
  font-size: 0.82rem;
  color: var(--muted);
}
.event-entfernung {
  font-weight: 600;
  white-space: nowrap;
}

.event-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-thumb {
  width: 68px;
  min-width: 68px;
  height: 68px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #e9edf2;
  flex-shrink: 0;
}

.fav-star {
  border: none;
  background: none;
  color: #cbd2db;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  /* Tap-Fläche auf WCAG-2.2-Mindestmaß (24px) angehoben statt der vorherigen
     ~23×19px (Nutzerwunsch 2026-08-29: Fehltaps auf die Karte statt den
     Stern) - min-width/-height statt reinem Padding, damit die Fläche
     unabhängig von Zeichenbreite garantiert groß genug ist. */
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  transition: color 0.15s, transform 0.1s;
}

.fav-star:hover { color: #f5b301; transform: scale(1.15); }
.fav-star.on { color: #f5b301; }

.permalink-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  min-width: 32px;
  min-height: 32px;
  align-self: flex-start;
  text-decoration: none;
  opacity: 0.35;
  filter: grayscale(1);
  transition: opacity 0.15s;
}
.permalink-link:hover { opacity: 1; filter: none; }

.empty-note {
  color: var(--muted);
  padding: 24px 8px;
  text-align: center;
}

/* ---------- Footer (Haftung, Quellen, Rechtslinks) ---------- */
.app-footer {
  margin-top: 24px;
  padding: 16px 4px 8px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.app-footer p { margin: 0 0 8px; }
.app-footer a { color: var(--accent); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  font-weight: 600;
}

/* ---------- Tages-Navigation ---------- */
.day-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
}

.day-arrow {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--accent);
}

.day-arrow:hover { background: #eef1f5; }

.day-nav input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.9rem;
  color: var(--text);
}

.day-weekday {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
}

/* ---------- Zweite Filterzeile (Ort / Favoriten) ---------- */
.secondary-row .row-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.secondary-row .spacer { flex: 1; }

.fav-chip[data-active="1"],
.fav-chip.active {
  background: #f5b301;
  border-color: #f5b301;
  color: #3a2f00;
}

/* ---------- Detail-Overlay ---------- */
body.modal-open { overflow: hidden; }

.detail-backdrop[hidden],
.day-nav[hidden] { display: none; }

.detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 33, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.detail-panel {
  background: var(--panel);
  border-radius: 14px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.detail-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #333;
  z-index: 2;
}

.detail-body { padding: 0 20px 20px; }

.detail-img {
  height: 200px;
  margin: 0 -20px 14px;
  border-radius: 14px 14px 0 0;
  background-size: cover;
  background-position: center;
  background-color: #e9edf2;
}

.detail-body .badge { margin-top: 16px; display: inline-block; }

.detail-body h2 {
  margin: 10px 0 8px;
  font-size: 1.3rem;
}

.detail-when { font-weight: 600; margin-bottom: 4px; }

.detail-where { color: var(--muted); margin-bottom: 10px; }

.detail-desc { line-height: 1.5; color: #35404f; }

.detail-karte { width: 100%; height: 220px; border-radius: 10px; margin: 12px 0; z-index: 0; }

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.detail-btn {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
}

.detail-btn:hover { background: #eef1f5; }

.detail-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.detail-btn.primary:hover { background: #1a43b8; }

.detail-btn.fav-on {
  background: #f5b301;
  border-color: #f5b301;
  color: #3a2f00;
}

.popup-detail {
  margin-top: 6px;
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--accent);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.78rem;
  cursor: pointer;
}

.popup-detail:hover { background: var(--accent); color: #fff; }

.popup-sep { border: none; border-top: 1px solid #eee; margin: 6px 0; }

/* ---------- Karten-Marker & Popup ---------- */
.dot-marker {
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.leaflet-popup-content { margin: 10px 14px; }

.popup-event { margin-bottom: 8px; max-width: 240px; }

.popup-event .badge { font-size: 0.65rem; }

.popup-event strong { display: block; margin: 2px 0; }

.popup-event a { color: var(--accent); }

.popup-meta { color: var(--muted); font-size: 0.8rem; }

/* ---------- Zeitraum (von–bis) ---------- */
.range-nav {
  display: flex;
  gap: 10px;
  margin: 2px 0 8px;
  flex-wrap: wrap;
}
.range-nav[hidden] { display: none; }
.range-field {
  font-size: 0.8rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.range-field input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.9rem;
  color: var(--text);
}

/* ---------- Umkreis-Filter ---------- */
.umkreis-row { align-items: center; }
.umkreis-row .chip.active,
#near-gps.active,
#near-map.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.near-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.near-active[hidden] { display: none; }
.umkreis-row[hidden],
.secondary-row[hidden] { display: none; }
#near-radius { accent-color: var(--accent); width: 120px; }
#near-radius-val { font-size: 0.82rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.near-hint {
  font-size: 0.8rem;
  color: var(--accent);
  background: #eef4ff;
  border: 1px solid #c7dbff;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px 0 8px;
}
.near-hint[hidden] { display: none; }
.near-pin { font-size: 22px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

/* ---------- Stadt-Suche (Ort frei eingeben statt Goettingen-Fixierung) ---------- */
.city-search {
  position: relative;
  flex: 1;
  min-width: 160px;
  max-width: 280px;
}
.city-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--panel);
}
.city-search input:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.18);
}
.city-ac-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 4px;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  max-height: 240px;
  overflow-y: auto;
}
.city-ac-list[hidden] { display: none; }
.city-ac-list li {
  padding: 8px 10px;
  font-size: 0.88rem;
  font-weight: 400;
  border-radius: 6px;
  cursor: pointer;
}
.city-ac-list li:hover,
.city-ac-list li.active {
  background: #eef4ff;
}
.city-ac-list li .city-ac-muted {
  color: var(--muted);
  font-size: 0.8rem;
}
.city-ac-list li.city-ac-spezial {
  color: var(--ocean, #0077b6);
  font-weight: 600;
}
.city-ac-list li.city-ac-spezial + li:not(.city-ac-spezial) {
  margin-top: 4px;
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
}
.city-search.loading input {
  background-image: none;
}

/* ---------- Start-Standortdialog (erster Besuch) ---------- */
.start-modal-backdrop[hidden] { display: none; }
.start-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 33, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2000;
}
.start-modal-panel {
  background: var(--panel);
  border-radius: 14px;
  max-width: 380px;
  width: 100%;
  padding: 26px 24px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.start-modal-panel h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: var(--text);
}
.start-modal-sub {
  margin: 0 0 18px;
  font-size: 0.88rem;
  color: var(--muted);
}
.start-modal-search {
  max-width: none;
  text-align: left;
}
.start-modal-or {
  margin: 14px 0;
  font-size: 0.82rem;
  color: var(--muted);
  position: relative;
}
.start-modal-or::before,
.start-modal-or::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  border-top: 1px solid var(--border);
}
.start-modal-or::before { left: 0; }
.start-modal-or::after { right: 0; }
.start-modal-gps {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
}
.start-modal-gps:hover { opacity: 0.92; }
.start-modal-gps:disabled { opacity: 0.6; cursor: default; }
.start-modal-skip {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.start-modal-skip:hover { color: var(--text); }

/* ---------- Karten-Popup scrollbar (viele Termine) ---------- */
.leaflet-popup-content .popup-scroll {
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.leaflet-popup-content-wrapper { border-radius: 12px; }

/* ---------- Mobil ---------- */
@media (max-width: 820px) {
  /* Kompakter, klebriger Kopf: Titel klein, Suche + Filter-Knopf immer sichtbar */
  .app-header {
    position: sticky;
    top: 0;
    z-index: 900;
    padding: 8px 12px 6px;
  }

  .app-header h1 { font-size: 1.05rem; margin: 0; }
  .brand-logo { width: 30px; height: 30px; }
  .brand-name { font-size: 1.15rem; }
  .header-row .updated { font-size: 0.68rem; }
  /* Popup auf dem Handy kompakter, damit es nicht den Schirm sprengt */
  .leaflet-popup-content .popup-scroll { max-height: 40vh; }
  .leaflet-popup-content-wrapper { max-width: 78vw; }
  .header-controls { margin: 6px 0 2px; }
  .header-ort-row { margin: 4px 0 0; gap: 6px; }
  .header-city-search { min-width: 70px; max-width: 45%; }
  .header-ort-row #near-radius { width: 60px; }
  .header-ort-row #near-radius-val { font-size: 0.72rem; }

  .filter-btn { display: inline-flex; }

  /* Liste/Karte-Umschalter direkt unter dem Kopf */
  .view-toggle {
    display: flex;
    background: var(--bg);
    padding: 8px 12px 4px;
    margin: 0;
  }

  .view-toggle button { padding: 10px; font-size: 0.95rem; }

  /* Filter als Vollbild-Panel (Sheet) – standardmäßig ausgeblendet */
  .filters {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    overflow-y: auto;
    padding: 0 16px 32px;
    border-bottom: none;
    -webkit-overflow-scrolling: touch;
  }

  body.filters-open { overflow: hidden; }
  body.filters-open .filters { display: block; }

  .filter-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Bei sehr grosser Systemschrift (getestet 200%) passen "Filter" +
       Zähler + "Fertig"-Knopf nicht mehr in eine Zeile - ohne Wrap ragte
       der Knopf sichtbar aus dem Sheet heraus (live gefunden). */
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    background: var(--panel);
    margin: 0 -16px 10px;
    padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 1.1rem;
  }

  /* Großer, daumenfreundlicher Schließen-/Anzeigen-Knopf unten */
  .filter-sheet-foot {
    display: block;
    position: sticky;
    bottom: 0;
    background: var(--panel);
    margin: 14px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
  }

  .filter-apply {
    width: 100%;
    border: none;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 15px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }

  .filter-sheet-count {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--muted);
  }

  .filter-done {
    border: none;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }

  /* Chips im Panel größer/griffiger, Kategorien einzeilig gestapelt */
  .filters .chip { padding: 8px 14px; font-size: 0.9rem; }
  .filters .chip-row { gap: 8px; margin-bottom: 12px; }

  /* Inhalt */
  .content { display: block; }

  .list-pane {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 8px 12px 40px;
  }

  .map-pane { display: none; height: 100%; }

  body.show-map .list-pane { display: none; }

  body.show-map .map-pane { display: block; }

  /* In der Karten-Ansicht (mobil) die Suchleiste ausblenden - gibt der Karte
     mehr Platz, Suche macht beim Kartenblättern ohnehin wenig Sinn (man
     würde danach eh zur Liste zurückwechseln). Nutzerwunsch 2026-08-28.
     Nur mobil betroffen - auf Desktop stehen Liste+Karte immer nebeneinander,
     dort bleibt die Suchleiste sichtbar. */
  body.show-map .header-controls { display: none; }

  #map { height: 100%; min-height: 400px; }

  /* Event-Karten: etwas größere Tap-Fläche, Bild links */
  .event { padding: 10px; }
  .event-thumb { width: 60px; min-width: 60px; height: 60px; }
  .event-title { font-size: 1rem; }

  .detail-backdrop { padding: 0; align-items: stretch; }

  .detail-panel {
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
  }

  .detail-img { border-radius: 0; }

  .filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 33, 0.4);
    z-index: 1100;
  }
  .filter-backdrop[hidden] { display: none; }
}

/* Melde-Button + Dialog (Veranstaltung melden / Webseite vorschlagen) */
.melden-link { border: 1px solid #cdd6e3; background: #fff; color: #1d4ed8; border-radius: 999px; padding: 5px 11px; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.melden-link:hover { background: #eef4ff; }
.melden-backdrop { position: fixed; inset: 0; background: rgba(15, 22, 33, 0.45); z-index: 1500; }
.melden-backdrop[hidden] { display: none; }
.melden-modal { position: fixed; z-index: 1600; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); padding: 18px 18px 20px; }
.melden-modal[hidden] { display: none; }
.melden-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.melden-head strong { font-size: 1.1rem; }
.melden-x { border: none; background: none; font-size: 1.2rem; color: #67707e; cursor: pointer; line-height: 1; }
.melden-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.melden-tab { flex: 1; border: 1px solid #dfe3e9; background: #f5f6f8; color: #35404f; border-radius: 8px; padding: 9px; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.melden-tab.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
#melden-form label { display: block; font-size: 0.82rem; font-weight: 600; color: #35404f; margin-bottom: 10px; }
#melden-form input, #melden-form select, #melden-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 9px 10px; font-size: 0.95rem; font-family: inherit; font-weight: 400; color: #1e2530; background: #fff; }
#melden-form input:focus, #melden-form select:focus, #melden-form textarea:focus { outline: 2px solid #1d4ed8; outline-offset: -1px; border-color: #1d4ed8; }
#melden-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.melden-row { display: flex; gap: 10px; }
.melden-row label { flex: 1; }
.melden-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.melden-submit { border: none; background: #1d4ed8; color: #fff; border-radius: 8px; padding: 11px 20px; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.melden-submit:hover { background: #1a43b8; }
.melden-msg { font-size: 0.85rem; font-weight: 600; }
.melden-hint { font-size: 0.76rem; color: #98a2b3; margin: 12px 0 0; }

/* ---------- Nachladen: sichtbarer Ladezustand ----------
   Die App lädt beim Start nur einen Ausschnitt (Umkreis bzw. die nächsten
   Wochen). Diese Elemente sorgen dafür, dass der Nutzer nie glaubt, es gäbe
   keine Termine, obwohl sie nur noch nicht geladen sind. */
/* Nutzerwunsch 2026-08-28: der Hinweis-Balken unter der Trefferzahl weg.
   ACHTUNG (Kompromiss, dem Nutzer mitgeteilt): dieser Balken war bewusst
   eingebaut, damit nie der Eindruck entsteht, es gäbe keine Termine, obwohl
   nur noch nicht alles geladen ist (siehe CLAUDE.md, Eintrag "Regionales/
   zeitfensterweises Laden"). Element bleibt im DOM (js/app.js schreibt
   weiter hinein), nur unsichtbar gemacht. */
.lade-hinweis {
  display: none !important;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.lade-note {
  padding: 16px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lade-btn {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.lade-btn:hover { background: #dbeafe; }
.lade-spinner {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border: 2px solid #bfdbfe;
  border-top-color: #1d4ed8;
  border-radius: 50%;
  display: inline-block;
  animation: lade-dreh 0.8s linear infinite;
}
@keyframes lade-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lade-spinner { animation-duration: 3s; }
}
/* Knopf über der Karte, wenn in eine noch ungeladene Gegend geschwenkt wurde */
.map-pane { position: relative; }
.karte-nachladen {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 900;
  border: none;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 18px;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
  cursor: pointer;
}
.karte-nachladen:hover { background: #1d4ed8; }

/* ---------- Benutzerkonto (2026-08-30) ----------
   Ein Konto ist rein optional und dient nur dem Favoriten-Abgleich über
   mehrere Geräte. Optik bewusst am bestehenden Start-Standortdialog
   (.start-modal-*) ausgerichtet, damit die App nicht zwei Dialog-Sprachen
   spricht. */
.konto-btn {
  border: 1px solid #cdd6e3;
  background: #fff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.konto-btn:hover { background: #eef4ff; }
.konto-btn.angemeldet { background: #eef4ff; border-color: #b6ccf0; }

/* Zugang zum internen Bereich - sitzt im Konto-Dialog statt in der Kopfzeile
   (siehe Kommentar in index.html), nur für Admin-Konten sichtbar. */
.konto-admin-link {
  display: block;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}
.konto-admin-link:hover { background: #eef1f5; }
.konto-admin-link[hidden] { display: none; }

.konto-backdrop[hidden] { display: none; }
.konto-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 33, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2100;
}
.konto-panel {
  position: relative;
  background: var(--panel);
  border-radius: 14px;
  max-width: 400px;
  width: 100%;
  padding: 26px 24px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.konto-panel h2 { margin: 0 0 8px; font-size: 1.2rem; }
.konto-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  /* WCAG-Mindestgröße 24px, hier großzügiger fürs Antippen am Handy */
  min-width: 36px;
  min-height: 36px;
}
.konto-sub { margin: 0 0 14px; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.konto-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.konto-tab {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.konto-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.konto-feld { display: block; margin-bottom: 11px; font-size: 0.82rem; font-weight: 600; }
.konto-feld[hidden] { display: none; }
.konto-optional { font-weight: 400; color: var(--muted); }
.konto-feld input {
  display: block;
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--text);
  background: var(--panel);
}
.konto-feld input:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.18);
}
.konto-hinweis { margin: -4px 0 10px; font-size: 0.78rem; color: var(--muted); }
.konto-hinweis[hidden] { display: none; }
.konto-fehler {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-radius: 8px;
  padding: 8px 10px;
}
.konto-fehler[hidden] { display: none; }
.konto-submit {
  width: 100%;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
}
.konto-submit:hover { filter: brightness(1.07); }
.konto-submit:disabled { opacity: 0.6; cursor: default; }
.konto-loeschen {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #f5c6c2;
  border-radius: 9px;
  background: #fff;
  color: #b3261e;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px;
  cursor: pointer;
}
.konto-loeschen:hover { background: #fdecea; }
.konto-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 8px;
  cursor: pointer;
  text-decoration: underline;
}
.konto-ok {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: #1b5e20;
  background: #e8f5e9;
  border: 1px solid #b7dfb9;
  border-radius: 8px;
  padding: 8px 10px;
}
.konto-ok[hidden] { display: none; }

/* Herkunftsangabe in der Detailansicht (S5 der Rechtspruefung 30.08.2026):
   zurueckhaltend, aber lesbar - sie soll informieren, nicht ablenken. */
.detail-quelle {
  margin: 10px 0 2px;
  font-size: 0.82rem;
  color: var(--muted, #67707e);
}