/* Farb-/Schrift-Werte 1:1 aus dem echten Firmenauftritt übernommen
   (page/taxi-teuchern.de/styles.css) -- eigenständiges Werkzeug, aber
   visuell erkennbar zur Marke gehörig statt einer generischen Admin-Optik. */
:root {
  --color-bg: #f7f6ef;
  --color-bg-alt: #eeece0;
  --color-card: #ffffff;
  --color-border: #e2ddc9;
  --color-ink: #10130f;
  --color-ink-soft: #1c211c;
  --color-text: #14171a;
  --color-text-soft: #565b56;
  --color-accent: #8a6a00;
  --color-gold: #ffcc00;
  --color-confirmed: #2f7d4f;
  --color-tentative: #b3760a;
  --color-cancelled: #b3261e;
  --font-heading: Arial, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-body: 'Segoe UI', Arial, Helvetica, sans-serif;
  font-size: 17px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.45;
}

main { max-width: 900px; margin: 0 auto; padding: 20px 16px 64px; }

@media (max-width: 520px) {
  main { padding: 14px 10px 56px; }
}

.topbar {
  background: var(--color-ink);
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(16, 19, 15, .12);
}
/* Logo enthält den Firmen-Schriftzug bereits vollständig ("Fahrdienst Chris Mock") --
   kein zusätzlicher Textwortmark daneben (siehe Konvention in page/taxi-teuchern.de).
   Die frühere Seiten-Beschriftung daneben ("Dispo"/"Neuer Termin"/...) ist komplett entfernt
   (Nutzer-Feedback 17.8.26: erst verführte die Button-Optik zum Draufklicken, dann blieb sie
   trotz Textform weiterhin klickbar/navigierte weg -- am Ende auf Nutzer-Wunsch ganz
   gestrichen, die Seite selbst zeigt ohnehin eindeutig genug, wo man sich befindet). */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.topbar-brand:visited { color: inherit; }
.topbar-brand .brand-logo { height: 26px; width: auto; display: block; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* (Korrigiert 17.8.26, dritter Nachtrag) Symbole ohne Beschriftung waren nicht verständlich
   ("wer soll sich daraus was denken" -- Nutzer-Feedback). Jetzt ein einziger, klar
   beschrifteter "Mehr"-Knopf, der ein Menü mit ausgeschriebenen Einträgen aufklappt --
   nur EIN uneindeutiges Element statt mehrerer, und sobald man draufklickt steht in
   Klartext, was sich dahinter verbirgt. */
.menu-wrapper { position: relative; }
.menu-trigger { white-space: nowrap; }
.menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 19, 15, .18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  z-index: 20;
}
/* "display: flex" oben überschreibt sonst das hidden-Attribut komplett (Browser blendet
   [hidden] normalerweise über display:none aus, eine eigene display-Regel gewinnt aber
   dagegen) -- deshalb hier explizit erzwingen, sonst bleibt das Menü immer offen sichtbar. */
.menu-dropdown[hidden] { display: none; }
.menu-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.menu-dropdown a:hover { background: var(--color-bg-alt); }
@media (max-width: 420px) {
  .menu-dropdown { min-width: 160px; max-width: 70vw; }
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 19, 15, .1); }
.topbar .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #f3f1e6; }
.topbar .btn:hover { background: rgba(255, 255, 255, .16); }
.btn-primary { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-ink); }
.btn-primary:hover { background: #ffd633; }
.btn-danger { background: var(--color-cancelled); border-color: var(--color-cancelled); color: #fff; }
.btn-small { padding: 6px 14px; font-size: .85rem; }

/* (Ergänzt 17.8.26) Die Buttons in der Kopfzeile wurden mehrfach schmaler gemacht, der
   Kopf selbst blieb dabei aber unverändert groß -- Logo, Innenabstand und Button-Polsterung
   hatten nie eine eigene Mobil-Regel. Das war der eigentliche Grund, warum sich am Platzbedarf
   trotz kürzerer Beschriftungen nichts änderte. Jetzt wird auf schmalen Bildschirmen der
   gesamte Kopf spürbar kompakter: kleineres Logo, weniger Innenabstand, kleinere Buttons. */
@media (max-width: 520px) {
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar-brand { gap: 8px; }
  .topbar-brand .brand-logo { height: 20px; }
  .topbar-actions { gap: 6px; }
  .topbar .btn { padding: 7px 12px; font-size: .82rem; }
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
}
.filter-chip {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-soft);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin: 14px -10px 18px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-chip { flex: 0 0 auto; }
}

.filter-chip.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-gold);
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.month-nav-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-ink);
  text-align: center;
}

@media (max-width: 420px) {
  .month-nav { flex-wrap: wrap; justify-content: center; }
  .month-nav-title { order: -1; flex: 0 0 100%; margin-bottom: 4px; }
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 16px 0 8px;
}
.month-grid-weekday {
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding-bottom: 4px;
}
.month-grid-weekday.is-weekend { color: var(--color-accent); }
.month-grid-day {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
}
.month-grid-day:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16, 19, 15, .1); }
.month-grid-day.is-outside { opacity: .32; }
.month-grid-day.is-today { box-shadow: 0 0 0 2px var(--color-ink) inset; }
.month-grid-day-number { font-weight: 700; font-size: 1rem; }
.month-grid-day-count { font-size: .72rem; font-weight: 700; opacity: .85; }
/* (Ergänzt 17.8.26, dritter Nachtrag) Reine Zahl-in-Pille auf gleichförmig weißen Karten wirkte
   auf Nutzer-Feedback "langweilig" -- jetzt zeigt die Kartenfarbe selbst die Auslastung des
   Tages als Farbverlauf (Heatmap, .lvl-0 bis .lvl-4 je nach Fahrtenzahl, siehe
   month_grid_level() in dashboard.php), die Zahl bleibt zusätzlich lesbar. Der rote Punkt
   (.has-cancelled) ersetzt NICHT die früher entfernten Storno-Punkte 1:1 -- es ist bewusst nur
   noch EIN Punkt pro Tag ("mindestens eine Fahrt an dem Tag ist storniert/vorläufig"), kein
   Punkt pro einzelner Fahrt, um die Karte nicht wieder zu überladen. */
.month-grid-day.lvl-0 { background: var(--color-card); }
.month-grid-day.lvl-1 { background: #fff3c4; }
.month-grid-day.lvl-2 { background: #ffe488; }
.month-grid-day.lvl-3 { background: #ffd24d; }
.month-grid-day.lvl-4 { background: var(--color-gold); border-color: var(--color-gold); }
.month-grid-day.has-cancelled::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-cancelled);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
}
@media (max-width: 640px) {
  .month-grid { gap: 4px; margin: 10px 0 4px; }
  .month-grid-day { aspect-ratio: 1 / 1; border-radius: 9px; gap: 0; }
  .month-grid-day-number { font-size: .82rem; }
  .month-grid-day-count { font-size: .62rem; }
  .month-grid-day.has-cancelled::after { width: 5px; height: 5px; top: 3px; right: 3px; }
  .month-grid-weekday { font-size: .62rem; padding-bottom: 2px; }
  .month-nav-title { font-size: 1rem; }
  .month-nav { margin-bottom: 2px; }
  .month-grid-legend { font-size: .74rem; margin: 6px 0 16px; }
}

.month-grid-legend {
  font-size: .82rem;
  color: var(--color-text-soft);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 24px;
}
.month-grid-legend .swatch {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  display: inline-block;
}
.month-grid-legend .swatch.dot { width: 8px; height: 8px; border-radius: 50%; border: none; }

.day-header {
  margin-top: 28px;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-confirmed);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(16, 19, 15, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.event-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 19, 15, .1); }
.event-card.status-tentative { border-left-color: var(--color-tentative); }
.event-card.status-cancelled { border-left-color: var(--color-cancelled); background: #fbf2f1; }
.event-card.status-cancelled .event-summary { text-decoration: line-through; color: var(--color-text-soft); }

.event-time { min-width: 92px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-ink); }
.event-main { flex: 1; min-width: 0; }
.event-summary { font-weight: 600; }
.event-meta { color: var(--color-text-soft); font-size: .88rem; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.badge-driver {
  background: var(--color-bg-alt);
  color: var(--color-ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: .8rem;
}

.status-pill {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-confirmed .status-pill { background: #e5f3ea; color: var(--color-confirmed); }
.status-tentative .status-pill { background: #fbedd7; color: var(--color-tentative); }
.status-cancelled .status-pill { background: #fbe2e0; color: var(--color-cancelled); }

.alert { padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 500; }
.alert-error { background: #fbe2e0; color: var(--color-cancelled); border: 1px solid #f2c1bd; }
.alert-info { background: var(--color-bg-alt); color: var(--color-ink); border: 1px solid var(--color-border); }
.hint { color: var(--color-text-soft); }

/* Formular */
.event-form fieldset {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(16, 19, 15, .04);
}
.event-form legend {
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 0 8px;
  color: var(--color-ink);
}
.event-form label {
  display: block;
  margin: 10px 0;
  font-weight: 600;
  font-size: .92rem;
  color: var(--color-ink-soft);
}
.event-form input[type=text],
.event-form input[type=date],
.event-form input[type=time],
.event-form input[type=password],
.event-form select,
.event-form textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-weight: normal;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
}
.event-form input:focus, .event-form select:focus, .event-form textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, .25);
}
.event-form input[type=text] + input[type=text] { margin-top: 8px; }
.required { color: var(--color-cancelled); }

/* Eigene Trefferliste fürs Fahrgast-Feld (event_form.php) statt eines nativen <datalist> --
   das war auf dem Handy unzuverlässig (Nutzer-Feedback 17.8.26: "kam gar kein Vorschlag"). */
.suggestion-dropdown {
  margin-top: 4px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(16, 19, 15, .12);
  max-height: 220px;
  overflow-y: auto;
}
.suggestion-dropdown[hidden] { display: none; }
.suggestion-item {
  padding: 10px 12px;
  font-size: .95rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover, .suggestion-item:active { background: var(--color-bg-alt); }

.checkbox { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.checkbox input { width: 20px; height: 20px; accent-color: var(--color-accent); }

/* (Korrigiert 17.8.26, zweite Fassung) Verfügbarkeits-Hinweis unter dem Fahrernamen
   (event_form.php, driver_availability.php). Vorher per festem "margin-left: 28px" an die
   Checkbox-Breite herangerechnet -- das stimmte nur, solange die Checkbox exakt so breit
   gerendert wird wie in der CSS angegeben; auf manchen Geräten passte das sichtbar nicht
   zusammen (Nutzer-Feedback 17.8.26: Name eingerückt, Verfügbarkeit nicht). Jetzt robuster:
   Name und Verfügbarkeit stecken beide in einer gemeinsamen Spalte (.driver-name-col) NEBEN
   der Checkbox -- die Ausrichtung ergibt sich automatisch aus dem Flex-Layout, unabhängig
   davon, wie breit die Checkbox tatsächlich gerendert wird. */
.driver-checkbox-label { align-items: flex-start; }
.driver-name-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.driver-availability {
  font-size: .78rem;
  color: var(--color-tentative);
}
.driver-availability:empty { display: none; }
/* Ein Konflikt pro Zeile statt einer langen, komma-getrennten Textwurst (Nutzer-Feedback
   17.8.26: "wirklich unübersichtlich"). Voller Titel bleibt sichtbar (nicht abgeschnitten) --
   ein Kürzungsversuch wurde zurückgenommen, weil sich sonst dieselbe Tour bei zwei Fahrern
   nicht mehr wiedererkennen ließ; bricht bei Bedarf einfach in mehrere Zeilen um. */
.driver-availability-item {
  padding: 1px 0;
  line-height: 1.4;
}

.driver-grid, .tag-grid, .weekday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
/* Der Fahrername allein wäre auch mehrspaltig kein Problem -- aber seit der
   Verfügbarkeitsanzeige (driver_availability.php) hat jede Karte eine stark unterschiedliche
   Höhe (0 bis mehrere Konflikt-Zeilen), dadurch wirkt ein Mehrspalten-Raster zerrissen/
   unübersichtlich (Nutzer-Feedback 17.8.26). Fahrer-Liste deshalb bewusst nur noch einspaltig,
   unabhängig von der Bildschirmbreite -- anders als tag-grid/weekday-grid, deren Einträge alle
   gleich kurz bleiben und dafür mehrspaltig weiterhin gut funktionieren. */
.driver-grid { grid-template-columns: 1fr; }

.share-banner {
  background: #fff6dc;
  border: 1px solid #f0dfa0;
  color: var(--color-ink);
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: .92rem;
}
.share-banner strong { color: var(--color-accent); }

.time-row { display: flex; gap: 12px; }
.time-row label { flex: 1; }

.form-actions { display: flex; gap: 12px; margin-top: 8px; }

/* Schritt-für-Schritt-Ablauf beim Neuanlegen (nicht beim Bearbeiten, siehe JS) */
.wizard-mode .wizard-step { display: none; }
.wizard-mode .wizard-step.is-active { display: block; animation: wizardStepIn .25s ease; }
@keyframes wizardStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.wizard-progress { margin-bottom: 18px; }
.wizard-steps-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.wizard-dots { display: flex; gap: 6px; }
.wizard-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--color-border); }
.wizard-dot.is-active { background: var(--color-gold); width: 22px; }
.wizard-dot.is-done { background: var(--color-accent); }

.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.wizard-mode .form-actions { display: none; }

.review-summary { display: flex; flex-direction: column; gap: 2px; }
.review-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.review-row:last-child { border-bottom: none; }
.review-label { font-weight: 700; color: var(--color-accent); font-size: .88rem; }
.review-value { color: var(--color-text); }
@media (max-width: 520px) {
  .review-row { grid-template-columns: 1fr; gap: 2px; }
}

.log-list { display: flex; flex-direction: column; gap: 4px; }
/* (Korrigiert 17.8.26) "white-space: nowrap" zwang jede Protokoll-Zeile (Zeitstempel + Nutzer +
   ganzer Aktionstext) auf eine einzige, oft sehr lange Zeile -- man musste seitlich/vertikal
   scrollen, um einen einzelnen Eintrag komplett zu lesen (Nutzer-Feedback). Jetzt bricht der
   Text normal um, der ganze Eintrag ist sofort ohne Scrollen sichtbar. */
.log-row {
  font-family: var(--font-mono, monospace);
  font-size: .82rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 12px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.5;
}

.taxameter-result {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0;
}
.taxameter-result-amount {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-accent);
}
.taxameter-result-breakdown { font-size: .85rem; color: var(--color-text-soft); margin-top: 2px; }

.maps-route-box { margin: 10px 0; }
.maps-route-box .hint { margin: 4px 0 0; font-size: .85rem; }

.location-station { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
/* Flex-Kinder haben standardmäßig "min-width: auto", was effektiv heißt: nie schmaler als der
   eigene Inhalt/Standardbreite, egal was flex-basis vorgibt -- ohne dieses Zurücksetzen bricht
   z.B. Straße/Hausnummer trotz "flex: 1 1 65%"/"25%" jedes für sich auf eine eigene volle Zeile
   um, weil der Browser sie beim Umbruch-Test schlicht nicht schrumpft (Ursache des Mobil-Bugs
   17.8.26, "Hausnummer riesige Zeile, Ort/Straße nur die Hälfte"). */
.location-station input { min-width: 0; }
.location-station-label {
  flex: 0 0 100%;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-accent);
  background: var(--color-bg-alt);
  border-radius: 999px;
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}
/* Reihenfolge: Ort, Straße, Hausnummer (kein PLZ-Feld mehr, siehe event_form.php) */
.location-station input[name="ort[]"],
.location-station input[name="return_ort[]"] { flex: 1 1 140px; }
.location-station input[name="street_name[]"],
.location-station input[name="return_street_name[]"] { flex: 2 1 200px; }
.location-station input.house-number-field { flex: 0 0 90px; }
/* (Korrigiert 17.8.26) Diese Regel stammte noch aus der Zeit mit PLZ-Feld (PLZ+Hausnummer
   sollten sich zu zweit eine schmale Zeile teilen). Ohne PLZ-Feld stand die Hausnummer dadurch
   allein auf einer eigenen, viel zu schmalen 45%-Zeile mit Leerraum daneben, während Ort und
   Straße sich (über die allgemeine 100%-Regel) fälschlich je eine ganze Zeile für sich
   genommen hatten (Nutzer-Feedback 17.8.26: "riesige Zeile" bei Hausnummer, Ort/Straße nur
   "die Hälfte"). Jetzt bewusst neu aufgeteilt: Ort bekommt eine eigene volle Zeile (kann lang
   werden, z.B. "06682 Teuchern OT Wittgendorf"), Straße und Hausnummer teilen sich darunter
   eine Zeile (wie auf einem Adressschild üblich). */
@media (max-width: 640px) {
  .location-station input[name="ort[]"],
  .location-station input[name="return_ort[]"] { flex: 1 1 100%; }
  .location-station input[name="street_name[]"],
  .location-station input[name="return_street_name[]"] { flex: 1 1 65%; }
  .location-station input.house-number-field { flex: 1 1 25%; }
}

/* Login */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  /* "100vh" zählt auf vielen Handy-Browsern die Fläche HINTER der ein-/ausblendenden
     Adressleiste mit, nicht nur den tatsächlich sichtbaren Bereich -- die zentrierte Box wirkt
     dadurch nach unten verschoben statt echt mittig (Nutzer-Feedback 17.8.26). "100dvh"
     (dynamische Viewport-Höhe) berücksichtigt die Adressleiste korrekt; als Fallback bleibt
     100vh für ältere Browser, die dvh noch nicht kennen. */
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(circle at 30% 20%, #1c211c 0%, #10130f 70%);
}
.login-box {
  background: var(--color-card);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.login-logo { display: block; height: 48px; width: auto; margin: 0 auto 14px; }
.login-box h1 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin-top: 0;
  color: var(--color-ink);
  text-align: center;
}
.login-box label { display: block; margin: 14px 0 4px; font-weight: 600; color: var(--color-ink-soft); }
.login-box input {
  width: 100%;
  padding: 11px 12px;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
}
.login-box input:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(255, 204, 0, .25); }
.login-box button {
  width: 100%;
  margin-top: 20px;
  padding: 13px;
  background: var(--color-gold);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  font-size: 1rem;
}
.login-box button:hover { background: #ffd633; }

@media (max-width: 480px) {
  :root { font-size: 16px; }
  .event-card { flex-wrap: wrap; }
  .status-pill { order: 3; }
}