:root{
  --bg:#0F141A; --bg-elev:#121820; --bg-card:#1A222C;
  --ink:#E7EDF5; --muted:#95A2B3; --line:#233042;
  --warn:#F4A340; --warn-bg:#1E1E1E;
  --bad:#FF6B6B; --bad-border:#b42318; --on-bad:#fff;
  --ok:#51DDBB; --row:#151C24;
  --on-accent:#0b1218; /* Schrift auf Akzent-/Primärflächen */
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --content-max:1140px; /* maximale Breite aller Boxen (Desktop) */
  --viz-zero:#2B3A4C;   /* Fahrt(en) mit 0 min – neutral, in allen Schemata gleich */
}

/* ===== Farbschemata (Einstellungen → Farbschema; index.php setzt data-theme am <html>) =====
   Jedes Schema setzt alle Akzentfarben vollständig – auch die var()-Verweise, damit eine Vorschau
   mit eigenem data-theme (Auswahlkacheln) ihre eigenen Farben zeigt.
   Diagramm-Klassen = Rangfolge: dunkel (wenig) → hell (viel); Stufen 3–5 sind die App-Farben selbst.
   Jede Skala geprüft als ordinale Skala gegen die Kartenfläche --bg-elev (Helligkeitsabstände, Kontrast). */

/* Türkis – Standard (Farbton ≈ 196°) */
:root,[data-theme="tuerkis"]{
  --accent:#19C6C7; --accent-strong:#17B5B6;
  --primary:#1FA2A3; --primary-strong:#16999A;
  --focus:#68E8E9; --focus-ring:rgba(104,232,233,.15);
  --head-ink:#CFE7F5; --card-title:#CBE6EC;
  --viz-c1:#005F60;            /* 1–5 min   */
  --viz-c2:#0F8081;            /* 6–15 min  */
  --viz-c3:var(--primary);     /* 16–30 min */
  --viz-c4:var(--accent);      /* 31–59 min */
  --viz-c5:var(--focus);       /* ≥ 60 min  */
  --viz-series:var(--primary); /* Einzelserie (Wochentage) */
}
/* Rot – Warnsignale (Verspätung, Ausfall, Löschen, Kalender) werden hier bernsteinfarben */
[data-theme="rot"]{
  --accent:#F57F7C; --accent-strong:#EC6F6C;
  --primary:#E05A60; --primary-strong:#D24E54;
  --focus:#FFB3AE; --focus-ring:rgba(255,179,174,.15);
  --head-ink:#F5D6D6; --card-title:#F2D0D0;
  --bad:#F5A524; --bad-border:#B26A00; --on-bad:#0b1218;
  --warn:#F2D35B;
  --viz-c1:#962634; --viz-c2:#B8343F;
  --viz-c3:var(--primary); --viz-c4:var(--accent); --viz-c5:var(--focus);
  --viz-series:var(--primary);
}
/* Blau */
[data-theme="blau"]{
  --accent:#63A9F2; --accent-strong:#559CE8;
  --primary:#3B8BE0; --primary-strong:#327ED2;
  --focus:#A5CFFF; --focus-ring:rgba(165,207,255,.15);
  --head-ink:#D3E4F8; --card-title:#CFE0F5;
  --viz-c1:#1A5294; --viz-c2:#2468B4;
  --viz-c3:var(--primary); --viz-c4:var(--accent); --viz-c5:var(--focus);
  --viz-series:var(--primary);
}
/* Grün */
[data-theme="gruen"]{
  --accent:#52C76E; --accent-strong:#48B963;
  --primary:#35A553; --primary-strong:#2F9749;
  --focus:#98E6A8; --focus-ring:rgba(152,230,168,.15);
  --head-ink:#D2F0DA; --card-title:#CCEBD4;
  --viz-c1:#19612F; --viz-c2:#258341;
  --viz-c3:var(--primary); --viz-c4:var(--accent); --viz-c5:var(--focus);
  --viz-series:var(--primary);
}
*{box-sizing:border-box}
html{height:100%}
body{min-height:100%} /* nicht height: sonst endet der Bereich der festen Kopfzeile nach einer Bildschirmhöhe */
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0; padding:12px;
  -webkit-tap-highlight-color: transparent;
}
h1{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.35rem;margin:8px 0 12px;font-weight:800;color:var(--ink);}

/* Footer: API-Statistik (nur mit der Einstellung „Debug“) */
.site-footer{
  max-width:var(--content-max);margin:24px auto 0;padding:14px 4px 4px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  color:var(--muted);font-size:.85rem;
}
#stats{display:flex;gap:6px 16px;flex-wrap:wrap;}
#stats strong{color:var(--ink);}
.site-footer[hidden]{display:none;}
@media (max-width:420px){
  .site-footer{flex-direction:column;align-items:center;text-align:center;}
  #stats{justify-content:center;}
}

.login{max-width:360px;margin:40px auto;display:flex;flex-direction:column;gap:12px;}
.login label{font-weight:700;}
.login input{
  background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  min-height:56px;padding:12px 16px;font-size:1.05rem;box-shadow:var(--shadow);outline:none;
}
.login input:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring),var(--shadow);}
.login-error{color:var(--bad);font-weight:700;}

.window-controls{max-width:820px;margin:10px auto;display:flex;gap:10px;justify-content:center;}
.btn,.round-btn,.plus-btn{
  appearance:none;border:0;border-radius:14px;min-height:56px;padding:12px 18px;
  font-weight:800;letter-spacing:.2px;color:var(--on-accent);background:var(--primary);
  box-shadow:var(--shadow);cursor:pointer;transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  touch-action:manipulation;
}
.btn:hover,.round-btn:hover,.plus-btn:hover{background:var(--primary-strong);}
.btn:active,.round-btn:active,.plus-btn:active{transform:translateY(1px);}
.btn.secondary{background:#22303F;color:var(--ink);border:1px solid var(--line);}
.btn.secondary:hover{background:#263646;}

/* Zugtabelle */
.table-outer{ margin:0 auto; max-width:var(--content-max); overflow-x:hidden; }
.table-wrap{ background:var(--bg-elev); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); width:100%; }
table{ width:100%; border-collapse:separate; border-spacing:0; font-size:1rem; table-layout:fixed; }
th,td{ padding:10px 8px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle; }
th{ background:linear-gradient(180deg,#1C2531,#17202A); color:var(--head-ink); position:sticky; top:0; z-index:1; font-size:.9rem; text-transform:uppercase; letter-spacing:.4px; }
/* 4 Spalten je 25% */
th:nth-child(1),td:nth-child(1),
th:nth-child(2),td:nth-child(2),
th:nth-child(3),td:nth-child(3),
th:nth-child(4),td:nth-child(4){ width:25%; }

tbody tr:nth-child(odd){background:#121922;}
tbody tr:nth-child(even){background:#0F1620;}
tr:hover{background:#15202B;}

.label{ color:var(--muted); margin-right:6px; }

.delay-bad-min{ color:var(--bad); font-weight:800; }

/* Tagesliste */

 /* Icon-Buttons nebeneinander */

/* Charts feste Höhe */
.card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow); color:var(--ink); }
.card h3{ color:var(--card-title); margin:0 0 2px; }
.charts{max-width:var(--content-max);margin:12px auto;display:grid;gap:14px;}
.card{position:relative;}

@media (max-width:420px){
  th,td{padding:8px 6px;font-size:.95rem;}

}

.muted{color:var(--muted);}

/* Toast-Meldungen (ersetzen alert) */
#toasts{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:100;width:min(92vw,420px);pointer-events:none;}
.toast{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease;}
.toast.show{opacity:1;transform:none;}
.toast.error{border-left-color:var(--bad);}

/* Eigener Kalender (native Datumsauswahl kann keine Tage markieren) */

.calendar{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:50;
  width:min(92vw,340px);background:var(--bg-card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:12px;
}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.cal-title{font-weight:800;}
.cal-nav{appearance:none;border:1px solid var(--line);background:var(--bg-elev);color:var(--ink);border-radius:10px;width:44px;height:44px;font-size:1.3rem;cursor:pointer;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;}
.cal-wd{color:var(--muted);font-size:.8rem;font-weight:700;padding:4px 0;}
.cal-day{
  appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:600;
  aspect-ratio:1;width:100%;max-width:44px;margin:0 auto;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.cal-day:hover{background:var(--bg-elev);}
.cal-day.today{color:var(--accent);font-weight:800;}
.cal-day.has-entry{background:var(--bad);color:var(--on-bad);}
.cal-day.selected{box-shadow:0 0 0 2px var(--focus);}
.cal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px;}
.cal-legend{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:6px;}
.cal-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--bad);}
.cal-foot .btn{min-height:44px;padding:8px 14px;}

.toast-action{pointer-events:auto;appearance:none;border:1px solid var(--line);background:var(--bg-elev);color:var(--accent);font:inherit;font-weight:800;border-radius:10px;padding:8px 12px;min-height:40px;cursor:pointer;white-space:nowrap;}

/* Speichern mit einem Tipp in der Zugtabelle */

/* Zuginfo in der Einträge-Liste */
.train-col{ text-align:left; line-height:1.25; }
.train-col span{ display:block; }
.train-name{ font-weight:800; }

.train-col .label{ font-size:.8rem; margin:1px 0 0; }

/* Icon-Buttons: kompakt, aber 44×44 px Tippfläche (Apple-Mindestgröße) */
.btn.icon-btn{width:44px;height:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;flex:0 0 auto;}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* Manuelle Eingabe: − [Minuten] + [Speichern] immer in einer Zeile */

/* Hinweis bei automatischer Tab-Wahl per Standort */

/* ===== Ansichten „Erfassen“ / „Auswertung“ ===== */
.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;}

/* Filterzeile: eine Zeile über allem, was sie filtert */
.filter-row{max-width:var(--content-max);margin:4px auto 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.filter-select,.range-custom input{
  background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  min-height:44px;padding:8px 12px;font:inherit;font-weight:700;
}
.range-custom{display:inline-flex;align-items:center;gap:6px;color:var(--muted);}
.range-custom[hidden]{display:none;}
.range-label{color:var(--muted);font-size:.85rem;}

/* Kennzahlen-Kacheln */
.kpis{max-width:var(--content-max);margin:0 auto 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.kpi{background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);}
.kpi-label{color:var(--muted);font-size:.85rem;font-weight:600;}
.kpi-value{font-size:1.6rem;font-weight:700;margin:4px 0 2px;line-height:1.15;}
.kpi-delta{font-size:.8rem;color:var(--muted);}
.delta{font-weight:800;white-space:nowrap;}
.delta.bad{color:var(--bad);}
.delta.good{color:var(--ok);}
.delta.flat{color:var(--ink);}
.delta-ref{white-space:nowrap;}

/* Diagramm-Karten */
.card-sub{color:var(--muted);font-size:.85rem;margin:0 0 10px;}
.chart-box{position:relative;height:260px;}            /* inkl. Achsenbeschriftung, kein inneres Scrollen */
.chart-box-sm{height:220px;}
.chart-box canvas{position:absolute;inset:0;width:100% !important;height:100% !important;}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:.8rem;color:var(--muted);}
.legend-title{font-weight:700;}
.legend-item{display:inline-flex;align-items:center;gap:6px;}
.legend-item i{display:inline-block;width:12px;height:12px;border-radius:3px;}
.legend-item i.legend-none{border:1px solid var(--line);}
.table-view{margin-top:10px;font-size:.85rem;}
.table-view summary{cursor:pointer;color:var(--accent);font-weight:700;min-height:32px;display:flex;align-items:center;}
.data-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:6px;}
.data-table th,.data-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;}
.data-table th:first-child,.data-table td:first-child{text-align:left;}
.data-table th{position:static;background:none;color:var(--muted);text-transform:none;letter-spacing:0;font-size:.8rem;}

/* Kalender-Heatmap: ein Mini-Monat pro Kachel */
.heatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.hm-title{font-size:.85rem;font-weight:700;color:var(--muted);margin-bottom:4px;}
.hm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.hm-wd{font-size:.65rem;color:var(--muted);text-align:center;}
.hm-day,.hm-empty{aspect-ratio:1;border-radius:4px;}
.hm-day{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:.62rem;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hm-day.hm-has{border-color:transparent;font-weight:700;}
.hm-day:hover,.hm-day:focus-visible{outline:2px solid var(--focus);outline-offset:0;}

/* Farbskala der Verspätungsklassen (Werte in :root, --viz-…) */
.hm-c0,.sw-c0{background:var(--viz-zero);}
.hm-c1,.sw-c1{background:var(--viz-c1);}
.hm-c2,.sw-c2{background:var(--viz-c2);}
.hm-c3,.sw-c3{background:var(--viz-c3);}
.hm-c4,.sw-c4{background:var(--viz-c4);}
.hm-c5,.sw-c5{background:var(--viz-c5);}
.hm-day.hm-has{color:#fff;}
.hm-day.hm-c3,.hm-day.hm-c4,.hm-day.hm-c5{color:var(--on-accent);}  /* helle Felder → dunkle Schrift (wie auf den Buttons) */

/* ===== Zugausfall ===== */

.badge-cancel{display:inline-block;padding:3px 8px;border-radius:999px;border:1px solid var(--bad);color:var(--bad);font-size:.8rem;font-weight:800;}

/* Auswahl beim Tipp auf eine Zugzeile (unten eingeblendet) */
.sheet-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;padding:12px;}
.sheet-backdrop[hidden]{display:none;}
.sheet{width:min(100%,480px);background:var(--bg-card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow);}
.sheet h3{margin:0 0 8px;font-size:1.05rem;}
.sheet-status{margin:0 0 6px;color:var(--muted);font-size:.9rem;}
.sheet-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.sheet-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;}
.sheet-btn .icon{width:22px;height:22px;}
.sheet-cancel{color:var(--bad);border:1px solid var(--bad-border);}
.sheet{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;}
/* Fahrtverlauf im Overlay */
.trip-toggle{appearance:none;width:100%;margin-top:12px;min-height:50px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer;}
.trip-toggle:hover{border-color:var(--accent);}
.trip-toggle::after{content:'▾';color:var(--accent);font-size:1.1rem;line-height:1;transition:transform .15s;}
.trip-toggle[aria-expanded="true"]{border-color:var(--accent);border-radius:12px 12px 0 0;color:var(--accent);}
.trip-toggle[aria-expanded="true"]::after{transform:rotate(180deg);}
.trip:not([hidden]){border:1px solid var(--accent);border-top:0;border-radius:0 0 12px 12px;padding:10px 12px 8px;}
.trip{margin:0;}
.trip-msg{margin:4px 0;color:var(--muted);font-size:.9rem;}
.trip-stops{list-style:none;margin:6px 0 0;padding:0;}
.trip-stop{position:relative;display:flex;gap:10px;padding-bottom:10px;}
.trip-stop::before{content:'';position:absolute;left:5px;top:14px;bottom:-2px;width:2px;background:var(--line);}
.trip-stop:last-child::before{display:none;}
.trip-stop.past::before,.trip-stop.passed::before{background:var(--accent);} /* vorbei: Verbindung in der Farbe der Punkte (bis „Jetzt“) */
.trip-dot{position:relative;z-index:1;flex:0 0 12px;width:12px;height:12px;margin-top:4px;border-radius:50%;border:2px solid var(--accent);background:var(--accent);box-sizing:border-box;}
.trip-stop.future .trip-dot{background:var(--bg-card);}
.trip-stop.missing .trip-dot{background:var(--bg-card);border-color:var(--line);}
.trip-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.trip-name{font-weight:700;font-size:.95rem;}
.trip-stop.cancelled .trip-name{text-decoration:line-through;color:var(--bad);}
.trip-stop.missing .trip-name,.trip-stop.missing .trip-times{color:var(--muted);}
.trip-times{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:.85rem;color:var(--muted);}
.trip-delay{font-weight:700;color:var(--ink);}
.trip-delay.late,.trip-time.cancelled{color:var(--bad);font-weight:800;}
.trip-platform.changed{color:var(--warn);font-weight:700;}
.trip-change{font-size:.75rem;font-weight:800;margin-left:4px;white-space:nowrap;}
.trip-change.lost{color:var(--bad);}
.trip-change.gain{color:var(--ok);}
.trip-now{display:flex;align-items:center;gap:8px;margin:-4px 0 6px;color:var(--accent);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;}
.trip-now::before{content:'';flex:1;border-top:2px dashed var(--accent);} /* Linie, „Jetzt“ am rechten Rand */
.trip-foot{margin:2px 0 0;color:var(--muted);font-size:.75rem;}



/* ===== Kopfzeile mit Zahnrad ===== */
.app-head{position:relative;max-width:var(--content-max);margin:0 auto;}
/* Angemeldet: Kopfzeile Titel der Ansicht | Zahnrad (die Ansichten wechselt die Menüleiste unten). Bleibt beim Scrollen oben stehen;
   Hintergrund über die volle Breite, Inhalt so breit wie die Boxen (--content-max). */
.app-head-nav{
  display:flex;align-items:center;gap:8px;
  position:sticky;top:0;z-index:60;background:var(--bg);
  max-width:none;margin:-12px -12px 12px;padding:8px max(12px, calc((100% - var(--content-max)) / 2 + 12px));
  border-bottom:1px solid transparent;
}
.app-head-nav.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 16px rgba(0,0,0,.25);}
.gear-btn{
  flex:0 0 auto;margin-left:auto; /* bleibt rechts, auch wenn der Umschalter (Einstellungen) ausgeblendet ist */
  appearance:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-card);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.gear-btn:hover,.gear-btn[aria-expanded="true"]{color:var(--accent);}
.gear-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

/* ===== Einstellungen ===== */
/* Zurück-Button an der Stelle des Umschalters Erfassen/Auswertung (gleiche Breite, etwas höher) */
.settings-head{max-width:var(--content-max);margin:0 auto 12px;display:flex;flex-direction:column;align-items:center;gap:10px;}
/* Einstellungen/Verbindungssuche: Kopfzeile ausgeblendet (body.overlay-open); Zurück-Button + Titel bleiben beim Scrollen
   oben stehen. Hintergrund über die volle Breite, damit nichts durchscheint. */
body.overlay-open .app-head-nav{display:none;}
#view-settings .settings-head,#view-search .settings-head{
  position:sticky;top:0;z-index:55;background:var(--bg);padding:8px 0 10px;
  box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax);
}
.settings-head h2{margin:0;font-size:1.15rem;}
.btn.settings-back{width:100%;max-width:360px;min-height:56px;font-size:1.05rem;display:flex;align-items:center;justify-content:center;gap:8px;}
.settings{max-width:var(--content-max);margin:0 auto;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
.settings-card h3{margin-bottom:6px;}
.settings-fields{display:flex;flex-direction:column;gap:10px;}
.settings-fields label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.9rem;}
.settings-fields input{
  background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  min-height:48px;padding:10px 12px;font:inherit;font-weight:600;outline:none;
}
.settings-fields input:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring);}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.settings-actions .btn{min-height:48px;padding:10px 16px;display:inline-flex;align-items:center;gap:8px;}
.settings-actions a.btn{text-decoration:none;}
.settings-error{color:var(--bad);font-weight:700;margin:10px 0 0;}
.settings-error[hidden]{display:none;}
/* Persönliche Daten */
.settings-status{margin:0 0 12px;font-size:.88rem;font-weight:700;color:var(--muted);}
.settings-status.ok{color:var(--ok);}
.settings-status.warn{color:var(--warn);}
.settings-status:empty{display:none;}
.settings-group{display:flex;flex-direction:column;gap:6px;}
.settings-label{font-weight:700;font-size:.9rem;}
#set-anrede{grid-template-columns:repeat(3,1fr);}
.settings-subhead{margin:18px 0 10px;font-size:.95rem;color:var(--card-title);}
.settings-note{margin:0;font-size:.85rem;color:var(--muted);}
.settings-fields input[aria-invalid="true"]{border-color:var(--bad);}
#set-personal-delete{color:var(--bad);border-color:var(--bad-border);}
.refund-personal{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--warn);font-weight:700;}
.refund-personal[hidden]{display:none;}
/* Unterschrift: Vorschau und Zeichenfläche (immer hell wie Papier, auch im dunklen Modus) */
.sig-preview{display:flex;align-items:center;justify-content:center;min-height:84px;padding:8px;border:1px dashed var(--line);border-radius:12px;background:#fff;}
.sig-preview img{max-width:100%;max-height:80px;}
.sig-preview img[hidden],#set-sig-delete[hidden]{display:none;}
.sig-preview .muted{color:#6b7280;}
.sig-upload{cursor:pointer;position:relative;}
.sig-upload:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px;}
.sig-sheet{width:min(100%,640px);}
.sig-pad{display:block;width:100%;height:200px;border-radius:12px;border:1px solid var(--line);background:#fff;touch-action:none;cursor:crosshair;
  background-image:linear-gradient(transparent calc(100% - 52px),#cbd5e1 calc(100% - 52px),#cbd5e1 calc(100% - 50px),transparent calc(100% - 50px));}
.sig-actions{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;margin-top:12px;}
.sig-actions .btn{min-height:48px;}
@media (orientation:landscape) and (max-height:500px){ .sig-pad{height:calc(100vh - 170px);} }
.refund-personal .btn{min-height:44px;padding:8px 14px;font-size:.9rem;}

.theme-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.theme-option,.segment{
  appearance:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;
  background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  font:inherit;font-weight:700;cursor:pointer;text-align:left;
}
.theme-option[aria-checked="true"],.segment[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;}
.theme-option:focus-visible,.segment:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.theme-swatch{display:inline-flex;gap:3px;flex:0 0 auto;}
.theme-swatch i{display:block;width:14px;height:28px;border-radius:4px;}
.segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} /* minmax: lange Beschriftung bricht um statt überzustehen */
.segment{justify-content:center;}

/* ⟳ Verspätungen aktualisieren: quadratischer Icon-Button rechts neben Früher/Später, gleiche Höhe
   (steht hinter .btn.icon-btn, damit die 56 px auch ohne Spezifität greifen) */
.window-controls{align-items:center;}
.window-controls .btn:not(.icon-btn){padding:12px 14px;}

@keyframes dt-spin{to{transform:rotate(360deg);}}

/* Früher/Später ausgegraut, wenn es in diese Richtung keine Züge mehr gibt */
.window-controls .btn:disabled{opacity:.4;cursor:default;transform:none;}
.window-controls .btn:not(.secondary):disabled:hover{background:var(--primary);}

/* ===== Erstattung ===== */
.refund-card{max-width:var(--content-max);margin:12px auto;}
.refund-wrap{box-shadow:none;}
.refund-table td{font-size:.95rem;}
.refund-check{width:22px;height:22px;accent-color:var(--accent);}
.refund-needsTrain td,.refund-open td{color:var(--muted);}
.refund-badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:.75rem;font-weight:700;}
.refund-badge.warn{border-color:var(--warn);color:var(--warn);}
.refund-hint{color:var(--warn);font-weight:700;margin:12px 0 0;}
.refund-hint[hidden]{display:none;}
#btn-refund-export:disabled{opacity:.4;cursor:default;}
#refund-exported summary{cursor:pointer;font-weight:800;color:var(--card-title);min-height:32px;display:flex;align-items:center;gap:6px;}
.refund-batch{border-top:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.refund-batch .btn{min-height:40px;padding:6px 12px;font-size:.85rem;}
.refund-batch-actions{display:flex;flex-wrap:wrap;gap:8px;}
/* Details je Verspätung: Zusammenfassung + Kosten */
.refund-badge.cost{border-color:var(--accent);color:var(--accent);}
.refund-detail[hidden]{display:none;}
.refund-detail td{padding-top:0;}
.refund-detail-body{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;border-radius:12px;background:var(--bg-elev);border:1px solid var(--line);}
.refund-field-label{font-size:.8rem;font-weight:800;color:var(--muted);}
.refund-summary-input{width:100%;box-sizing:border-box;min-height:7.5em;resize:vertical;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg-card);color:var(--ink);font:inherit;font-size:.9rem;line-height:1.4;}
.refund-summary-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;}
.refund-fit{font-size:.78rem;color:var(--muted);}
.refund-fit.warn{color:var(--warn);font-weight:700;}
.refund-summary-reset{appearance:none;background:none;border:0;padding:6px 0;color:var(--accent);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;}
.refund-summary-reset[hidden]{display:none;}
.refund-costs-label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.9rem;font-weight:700;cursor:pointer;}
.refund-costs-label input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--accent);}
.refund-costs-row{display:flex;align-items:center;gap:8px;}
.refund-costs-row[hidden]{display:none;}
.refund-costs-row label{font-size:.85rem;font-weight:700;color:var(--muted);}
.refund-costs-input{width:7.5em;min-height:44px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg-card);color:var(--ink);font:inherit;text-align:right;}
.refund-costs-input[aria-invalid="true"]{border-color:var(--bad);}
.assign-dest{margin:8px 0;}
.assign-list{display:flex;flex-direction:column;gap:6px;max-height:45vh;overflow-y:auto;}
.btn.assign-train{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:8px 14px;text-align:left;}

/* ===== Erfassen: Wischen nach links/rechts wechselt den Tag (assets/commute.js) ===== */
/* auf dem ganzen Bildschirm (auch unter einem kurzen Tag): waagerecht gehört der Geste, senkrecht bleibt Scrollen */
body[data-view="capture"]:not(.overlay-open){touch-action:pan-y pinch-zoom;}
#views{overflow-x:clip;} /* der einblendende Tag macht die Seite nicht seitlich schiebbar */
/* ohne Mitziehen: der neue Tag blendet kurz aus der Wischrichtung ein */
.day-in-next{animation:day-in-next .22s ease-out;}
.day-in-prev{animation:day-in-prev .22s ease-out;}
@keyframes day-in-next{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
@keyframes day-in-prev{from{opacity:0;transform:translateX(-24px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .day-in-next,.day-in-prev{animation:none;} }

/* ===== Meldungen von zuginfo.nrw (Glocke) ===== */
:root{--badge:#E5484D;--on-badge:#fff;} /* roter Kreis an der Glocke – in allen Farbschemata rot */
.news-badge{
  position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--badge);color:var(--on-badge);font-size:.75rem;font-weight:800;line-height:22px;text-align:center;
  box-shadow:0 0 0 2px var(--bg);
}
.news-badge[hidden]{display:none;}
.news-source{margin:0;color:var(--muted);font-size:.8rem;}
.news-source.stale{color:var(--warn);}
.news-list{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:16px;}
#view-news .news-source{max-width:var(--content-max);margin:0 auto 10px;padding:0 4px;} /* Quelle/Stand über der Liste */
#view-news .news-source:empty{display:none;}
/* Gruppe („Jetzt aktiv“, „Geplant“, „Ausgeblendet“): Überschrift mit Anzahl, darunter die Zeilen in einem Kasten */
.news-group-head{
  display:flex;justify-content:space-between;margin:0;padding:0 4px 6px;
  color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
}
.news-group-box{background:var(--bg-elev);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);}
.news-item + .news-item{border-top:1px solid var(--line);}
.news-major{box-shadow:inset 0 0 0 2px var(--bad);border-radius:15px;} /* Großstörung: roter Rahmen */
.news-major + .news-item,.news-item + .news-major{border-top-color:transparent;}
.news-row{
  appearance:none;width:100%;min-height:56px;padding:12px 14px;background:none;border:0;cursor:pointer;
  display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:2px 10px;align-items:center;
  text-align:left;color:var(--ink);font:inherit;
}
.news-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:15px;}
.news-dot{width:10px;height:10px;border-radius:5px;background:var(--muted);}
.news-dot.sev-bad{background:var(--bad);}
.news-dot.sev-warn{background:var(--warn);}
.news-head{display:flex;gap:6px;align-items:center;min-width:0;}
.news-line{flex:0 0 auto;background:var(--ink);color:var(--bg);border-radius:6px;padding:2px 6px;font-size:.75rem;font-weight:800;}
.news-title{font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.news-row[aria-expanded="true"] .news-title{white-space:normal;}
.news-chevron{color:var(--muted);font-size:18px;transition:transform .15s;}
.news-row[aria-expanded="true"] .news-chevron{transform:rotate(90deg);}
.news-sub{grid-column:2;display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.8rem;}
.news-flag{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:1px 7px;font-size:.65rem;font-weight:800;letter-spacing:.3px;}
@media (prefers-reduced-motion:reduce){ .news-chevron{transition:none;} }
/* Details der aufgeklappten Meldung (eingerückt bis zum Titel) */
.news-detail{padding:0 14px 12px 34px;font-size:.9rem;line-height:1.45;}
.news-period{margin:0 0 6px;color:var(--muted);font-size:.8rem;}
.news-text{white-space:pre-line;color:var(--ink);}
.news-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
.news-link{color:var(--accent);font-weight:700;font-size:.85rem;text-decoration:none;padding:6px 0;}
.news-link:hover{text-decoration:underline;}
.news-hide{
  appearance:none;background:none;border:1px solid var(--line);border-radius:999px;
  min-height:32px;padding:0 12px;color:var(--muted);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
}
.news-hide:hover{color:var(--ink);border-color:var(--muted);}
.news-published{margin:4px 0 0;color:var(--muted);font-size:.75rem;}
.news-empty{margin:0;text-align:center;padding:24px 0;}
/* Ausgeblendete Meldungen: aufklappbar am Ende */
.news-hidden{border-top:1px solid var(--line);padding-top:4px;}
.news-hidden-toggle{appearance:none;background:none;border:0;padding:0 4px;min-height:44px;color:var(--muted);font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;}
.news-hidden-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.news-group-hidden{margin-top:4px;}
.news-group-hidden .news-item > *{opacity:.75;}

/* ===== Kopfzeile: Titel der Ansicht (bzw. Tag in „Pendeltag“) | Zahnrad =====
   Steht am Dateiende, damit diese Werte die allgemeinen Regeln (.gear-btn) sicher überschreiben. */
.app-head-nav{min-height:60px;}
.app-head-nav .gear-btn{width:44px;height:44px;border-radius:14px;}
.head-title{flex:1 1 auto;min-width:0;margin:0;font-size:1.35rem;font-weight:800;color:var(--ink);}

/* ===== Erstattungsliste: Datumszeile je Tag, Spalten Auswahl | Fahrt | Verspätung | Aktionen ===== */
/* (am Dateiende: überschreibt die allgemeinen Tabellen-Regeln, auch in jsdom ohne Spezifität) */
/* Breiten über <colgroup> (feste Tabellenbreite); die Überschrift „Verspätung“ reicht über die Aktionen-Spalte */
.refund-table col.c-check{width:30px;}
.refund-table col.c-delay{width:62px;}
.refund-table col.c-actions{width:92px;}
.refund-table th,.refund-table td{width:auto;}
.refund-table th.col-check,.refund-table td.col-check{padding-left:8px;padding-right:0;text-align:left;}
.refund-table th.col-trip,.refund-table td.train-col{text-align:left;}
.refund-table th.col-delay{text-align:left;padding-left:6px;}
.refund-table td.col-delay{padding-left:4px;padding-right:4px;}
.refund-table td.col-actions{padding-left:4px;}
.refund-table td.col-delay strong{display:block;white-space:nowrap;font-size:.95rem;}
.refund-table td.col-delay .label{display:block;margin:2px 0 0;font-size:.8rem;font-weight:400;white-space:nowrap;}
.refund-table th.refund-date{position:static;background:var(--bg);color:var(--card-title);text-transform:none;letter-spacing:0;text-align:left;font-size:.9rem;font-weight:800;padding:14px 10px 6px;}
.refund-table tr.refund-date-row:first-child th.refund-date{padding-top:10px;}
.train-col .refund-badges{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;margin-top:6px;}
.train-col .refund-badges span{display:inline-block;width:auto;flex:0 0 auto;}
.refund-actions{display:flex;flex-direction:column;gap:6px;}
.btn.refund-action{min-height:40px;width:100%;padding:6px 6px;font-size:.78rem;line-height:1.15;}
.btn.refund-more[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.refund-needsCosts .btn.refund-more{color:var(--warn);border-color:var(--warn);}
.btn.refund-unassign{color:var(--bad);border-color:var(--bad-border);}
@media (min-width:700px){
  .refund-table col.c-check{width:40px;}
  .refund-table col.c-delay{width:110px;}
  .refund-table col.c-actions{width:150px;}
  .refund-table th.col-delay{padding-left:8px;}
  .btn.refund-action{font-size:.85rem;}
}

/* Kennzeichnung einer Test-Installation (config 'instance_label') */
.instance-badge{position:fixed;left:8px;bottom:8px;z-index:200;padding:3px 10px;border-radius:999px;background:var(--warn);color:#111;font-size:.75rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.35);}

/* ===== PWA: Offline-Hinweis und „Neue Version“ ===== */
.pwa-banner[hidden]{display:none;}
.pwa-offline{max-width:var(--content-max);margin:8px auto 0;padding:10px 14px;border-radius:12px;border:1px solid var(--warn);background:var(--warn-bg);color:var(--warn);font-size:.88rem;font-weight:700;}
.pwa-update{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);padding:10px 10px 10px 16px;border-radius:14px;
  background:var(--bg-elev);border:1px solid var(--accent);color:var(--ink);font-weight:700;box-shadow:var(--shadow);}
.pwa-update .btn{min-height:44px;padding:0 16px;}
/* ===== Ziehen zum Aktualisieren (assets/pull.js): runder Anzeiger, kommt von oben herein; --pull = gezogene Strecke in px ===== */
html{overscroll-behavior-y:contain;} /* kein Neuladen der Seite durch den Browser (Android) – das macht die App selbst */
.pull-ind{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 6px);left:50%;z-index:70;width:40px;height:40px;margin-left:-20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--bg-elev);border:1px solid var(--line);color:var(--muted);box-shadow:var(--shadow);pointer-events:none;
  transform:translateY(calc(var(--pull, 0) * 1px - 56px));opacity:calc(var(--pull, 0) / 40);transition:transform .2s ease, opacity .2s ease;}
.pull-ind[hidden]{display:none;}
.pull-ind.dragging{transition:none;}
.pull-ind .icon{transform:rotate(calc(var(--pull, 0) * 4deg));}
.pull-ind.ready,.pull-ind.loading{color:var(--accent);border-color:var(--accent);}
.pull-ind.loading .icon{animation:dt-spin .8s linear infinite;}
@media (prefers-reduced-motion:reduce){ .pull-ind{transition:none;} .pull-ind.loading .icon{animation:none;} }
/* Ohne Verbindung: Speichern-Knöpfe sichtbar zurücknehmen (Senden wird ohnehin abgefangen) */
body.offline .sheet-btn[data-sheet="save"],body.offline .sheet-btn[data-sheet="cancel"],body.offline #btn-refund-export,body.offline .settings-save{opacity:.45;}

/* ===== Einstellungen: Bereiche (Tabs) und Benachrichtigungen ===== */
.settings-tabs{display:flex;width:100%;max-width:520px;padding:4px;gap:4px;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;}
/* drei Tabs: auf schmalen Displays zweizeilig mit Silbentrennung („Benach-richtigungen“) */
.settings-tab{flex:1 1 0;min-width:0;appearance:none;border:0;border-radius:10px;min-height:44px;padding:4px 6px;line-height:1.2;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;background:transparent;color:var(--muted);font:inherit;font-weight:800;cursor:pointer;}
.settings-tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent);}
.settings-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
@media (max-width:420px){ .settings-tab{font-size:.85rem;padding:4px;} }
.settings[hidden]{display:none;}
/* Schalter (Checkbox mit role="switch") */
.switch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.switch-head h3{margin:0;}
.switch{appearance:none;flex:0 0 auto;position:relative;width:52px;height:32px;margin:0;border-radius:16px;background:#22303F;border:1px solid var(--line);cursor:pointer;transition:background .15s ease;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--muted);transition:transform .15s ease, background .15s ease;}
.switch:checked{background:var(--accent);border-color:var(--accent);}
.switch:checked::after{transform:translateX(20px);background:var(--on-accent);}
.switch:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.push-off .push-options{display:none;}
.push-select{background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-radius:12px;min-height:48px;padding:10px 12px;font:inherit;font-weight:600;}
.push-numbers{flex-direction:row;flex-wrap:wrap;}
.push-numbers label{flex:1 1 140px;}
/* Listen: Geräte, eigene Züge, Suchergebnis */
.push-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.push-list[hidden]{display:none;}
.push-list > .muted{font-size:.9rem;}
.push-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;}
.push-item-main{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:2px;}
.push-item-sub{color:var(--muted);font-size:.85rem;}
.push-tag{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:.75rem;font-weight:700;}
.btn.push-small{min-height:40px;padding:6px 12px;font-size:.88rem;border-radius:10px;}
#push-results{margin-top:10px;}
.push-days{flex:1 1 100%;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.push-day{appearance:none;min-height:40px;padding:0;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:.85rem;font-weight:800;cursor:pointer;}
.push-day[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.push-day:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.push-search{margin-top:14px;display:flex;flex-direction:column;gap:6px;}
.push-search label{font-weight:700;font-size:.9rem;}
.push-search-row{display:flex;gap:8px;}
.push-search-row input{flex:1;min-width:0;background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-radius:12px;min-height:48px;padding:10px 12px;font:inherit;font-weight:600;outline:none;}
.push-search-row input:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring);}
.push-search-row .btn{min-height:48px;padding:10px 16px;}
#push-enable[hidden],#push-test[hidden],#push-disable[hidden]{display:none;}

/* ===== Menüleiste unten: Meldungen · Auswertung · Erstattung · Erfassen (immer sichtbar) =====
   Schwebt wie unter iOS als abgerundete, durchscheinende Leiste über dem Inhalt. Die Auswahl (.nav-ind) ist eine
   eigene Fläche, die beim Wechsel über die Einträge dazwischen zum neuen wandert (Position über data-active). */
:root{
  --nav-h:66px;
  --nav-gap:max(10px, calc(env(safe-area-inset-bottom, 0px) - 12px)); /* Abstand zum unteren Rand; über dem Home-Balken etwas tiefer */
  --nav-space:calc(var(--nav-h) + var(--nav-gap));
}
body.has-bottom-nav{padding-bottom:calc(var(--nav-space) + 16px);}
.bottom-nav{
  position:fixed;left:0;right:0;bottom:var(--nav-gap);z-index:70;display:grid;grid-template-columns:repeat(5,1fr);
  width:calc(100% - 24px);max-width:520px;margin:0 auto;padding:4px;box-sizing:border-box;
  background:var(--bg-elev);background:color-mix(in srgb, var(--bg-card) 68%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.nav-ind{
  position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 5);border-radius:999px;
  background:var(--focus-ring);pointer-events:none;
  transform:translateX(calc(var(--nav-i, 4) * 100%));
  transition:transform .38s cubic-bezier(.3,1.25,.5,1),opacity .2s ease;
}
.bottom-nav[data-active="news"] .nav-ind{--nav-i:0;}
.bottom-nav[data-active="stats"] .nav-ind{--nav-i:1;}
.bottom-nav[data-active="refund"] .nav-ind{--nav-i:2;}
.bottom-nav[data-active="station"] .nav-ind{--nav-i:3;}
.bottom-nav[data-active="capture"] .nav-ind{--nav-i:4;}
.bottom-nav.no-active .nav-ind{opacity:0;} /* Einstellungen: kein Eintrag aktiv, die Fläche bleibt an ihrer Stelle */
.nav-item{
  position:relative;z-index:1;
  appearance:none;background:none;border:0;min-height:56px;padding:4px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);font:inherit;font-size:.68rem;font-weight:700;cursor:pointer;border-radius:999px;
  transition:color .2s ease;-webkit-tap-highlight-color:transparent;
}
.nav-icon{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:28px;transition:transform .15s ease;}
.nav-item.active{color:var(--accent);font-weight:800;}
.nav-item:hover{color:var(--ink);}
.nav-item.active:hover{color:var(--accent);}
.nav-item:active .nav-icon{transform:scale(.92);}
.nav-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;}
.bottom-nav .news-badge{top:-4px;right:6px;}
/* Hinweise, Toasts und Beta-Schild über der Menüleiste */
body.has-bottom-nav #toasts,body.has-bottom-nav .pwa-update{bottom:calc(var(--nav-space) + 12px);}
body.has-bottom-nav .instance-badge{bottom:calc(var(--nav-space) + 8px);}

/* ===== Ansicht „Pendeltag“ (assets/commute.js) ===== */
.cm-head{display:none;flex:1 1 auto;min-width:0;align-items:center;gap:6px;}
body[data-view="capture"] .cm-head{display:flex;}
body[data-view="capture"] #head-title{display:none;}
.cm-title-btn{appearance:none;flex:1 1 auto;min-width:0;min-height:44px;padding:0;background:none;border:0;text-align:left;color:var(--ink);font:inherit;cursor:pointer;display:flex;flex-direction:column;justify-content:center;}
.cm-title{display:flex;align-items:center;gap:6px;font-size:1.35rem;font-weight:800;line-height:1.2;}
.cm-caret{color:var(--accent);font-size:1rem;transition:transform .15s ease;}
.cm-title-btn[aria-expanded="true"] .cm-caret{transform:rotate(180deg);}
.cm-title-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px;}
.cm-sub{color:var(--muted);font-size:.8rem;margin-top:2px;}
.cm-step{appearance:none;flex:0 0 auto;width:44px;height:44px;border-radius:14px;background:#22303F;border:1px solid var(--line);color:var(--ink);font:inherit;font-size:1.3rem;font-weight:800;line-height:1;cursor:pointer;}
.cm-step:hover:not(:disabled){background:#263646;}
.cm-step:active:not(:disabled){transform:translateY(1px);}
.cm-step:disabled{opacity:.4;cursor:default;}
.cm-step:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.commute{max-width:560px;margin:0 auto;}
.commute[hidden]{display:none;}
.cm-day{display:flex;flex-direction:column;gap:12px;}
.cm-card{padding:16px;}
.cm-card-head{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;}
.cm-state{font-size:.8rem;font-weight:800;color:var(--ok);}
.cm-route{margin-top:4px;font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;}
.cm-route-actual.late{color:var(--bad);}
.cm-route-plan{color:var(--muted);font-size:.8rem;font-weight:400;}
.cm-meta{margin-top:2px;color:var(--muted);font-size:.8rem;}
.cm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;}
.cm-delay{color:var(--bad);font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cm-delay small{font-size:1rem;}
.cm-delay.ok{color:var(--ok);font-size:1.2rem;}
.cm-pill{display:inline-block;margin-right:8px;padding:2px 10px;border:1px solid var(--bad-border);border-radius:999px;color:var(--bad);font-size:.8rem;font-weight:800;vertical-align:middle;}
.btn.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:14px;font-weight:800;}
.btn.cm-btn .icon{width:18px;height:18px;}
.cm-missing{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;color:var(--muted);font-size:.85rem;}
.cm-empty{text-align:center;padding:16px;}
.cm-empty-title{font-weight:700;}
.cm-empty .cm-meta{font-size:.85rem;margin-top:4px;}
.cm-empty-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.cm-sum{text-align:center;color:var(--muted);font-size:.8rem;}
.cm-sum b{color:var(--ink);}
.cm-cal-layer{position:fixed;inset:0;z-index:55;display:flex;justify-content:center;align-items:flex-start;padding:76px 12px 12px;background:rgba(0,0,0,.55);}
.cm-cal-layer[hidden]{display:none;}
.calendar.cm-calendar{position:static;transform:none;}
.cal-day:disabled{opacity:.35;cursor:default;background:none;}
.cal-nav:disabled{opacity:.4;cursor:default;}
.cm-label{margin:12px 0 6px;color:var(--muted);font-size:.8rem;font-weight:700;}
.cm-stepper{display:flex;gap:8px;align-items:center;}
.cm-stepper .btn{flex:0 0 auto;width:56px;min-height:56px;padding:0;font-size:1.4rem;}
.cm-stepper input{flex:1 1 auto;min-width:0;min-height:56px;text-align:center;background:#0F1620;border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;font-size:1.3rem;font-weight:800;}
.cm-trains{display:flex;flex-direction:column;gap:6px;max-height:36vh;overflow-y:auto;overscroll-behavior:contain;}
.cm-train{appearance:none;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;}
.cm-train[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;}
.cm-train:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.cm-train-time{min-width:3.2em;font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;}
.sheet .sheet-btn:disabled{opacity:.45;cursor:default;}
.segmented .segment{flex-wrap:wrap;gap:0 6px;text-align:center;} /* Zusatz „(Standard)“ als ganze Zeile umbrechen */

.cm-sheet .btn.secondary.sheet-cancel{color:var(--bad);border-color:var(--bad-border);}
@media (prefers-reduced-motion:reduce){ .cm-caret,.nav-icon,.nav-ind,.nav-item{transition:none;} }

/* ===== Pendeltag: Kennzeichen, Knopfzeilen und Zeiten der Fahrten (assets/commute.js, assets/search.js) ===== */
.cm-tag{font-weight:800;white-space:nowrap;}
.cm-tag.bad{color:var(--bad);}
.cm-tag.ok{color:var(--ok);}
.cm-row{display:flex;gap:8px;}
.cm-row .cm-btn{flex:1 1 0;min-width:0;padding:0 10px;line-height:1.2;}
.cm-link{appearance:none;background:none;border:0;padding:10px 4px;color:var(--accent);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;}
.cm-link:hover{text-decoration:underline;}
.cm-tp{display:flex;flex-direction:column;line-height:1.15;font-variant-numeric:tabular-nums;}
.cm-tp-main{font-size:1.15rem;font-weight:800;}
.cm-tp-main.late{color:var(--bad);}
.cm-tp-main.gone{color:var(--muted);text-decoration:line-through;}
.cm-tp-plan{color:var(--muted);font-size:.8rem;text-decoration:line-through;}

/* Meine Züge: Häkchen „Automatisch erfassen“ je Zug */
.push-auto{flex:1 1 100%;display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:6px 0 0;font-size:.9rem;font-weight:700;cursor:pointer;}
.push-auto input{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent);}
.push-auto .muted{font-weight:400;font-size:.8rem;}

.cm-sheet .sheet:focus{outline:none;} /* Fokus nur fürs Vorlesen/Tastatur-Navigation, kein sichtbarer Rahmen */

/* ===== Verbindungssuche (Ansicht „Pendeltag“, assets/search.js) ===== */
.cm-search-row{max-width:var(--content-max);margin:0 auto 12px;}
.btn.cm-search-btn{width:100%;}
#view-search{max-width:var(--content-max);margin:0 auto;}
.cs-form{display:flex;flex-direction:column;gap:12px;}
.cs-places{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center;}
.cs-places .cs-field{grid-column:1;}
.cs-places .cs-swap{grid-column:2;grid-row:1 / span 2;}
.cs-field{position:relative;display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.9rem;min-width:0;}
.cs-field input{
  width:100%;box-sizing:border-box;min-height:48px;padding:10px 12px;background:var(--bg-elev);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;font:inherit;font-weight:600;outline:none;color-scheme:dark;
}
.cs-field input:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring);}
.cs-row{
  appearance:none;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px;background:var(--bg-elev);
  border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;
}
.cs-row[hidden]{display:none;}
.cs-row-label{flex:0 0 auto;color:var(--muted);font-weight:700;font-size:.9rem;}
.cs-row-value{flex:1 1 auto;min-width:0;font-weight:700;text-align:right;overflow-wrap:anywhere;}
.cs-row-go{flex:0 0 auto;color:var(--muted);font-size:1.2rem;line-height:1;}
.cs-row:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
/* Auswahlfenster: Kalender ohne eigenen Rahmen, darunter die Uhrzeit */
.cs-sheet .sheet:focus{outline:none;}
.cs-sheet .cs-arrive{margin-bottom:12px;}
.calendar.cs-calendar{position:static;transform:none;width:auto;padding:0;border:0;box-shadow:none;background:none;}
.cs-clock{display:flex;align-items:center;gap:8px;margin-top:12px;}
.cs-clock-label{flex:1 1 auto;font-weight:700;}
.cs-clock select{flex:0 0 auto;min-width:4.2em;text-align:center;font-variant-numeric:tabular-nums;}
.cs-clock-sep{font-weight:800;}
.btn.cs-now{flex:0 0 auto;min-height:48px;padding:0 14px;}
.cs-switches{display:flex;flex-direction:column;}
.cs-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-top:1px solid var(--line);font-weight:700;cursor:pointer;}
.cs-switch-row:first-child{border-top:0;}
.cs-sheet-hint{margin-top:8px;color:var(--bad);}
.cs-sheet-hint[hidden]{display:none;}
.cs-suggest{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;display:flex;flex-direction:column;max-height:50vh;overflow-y:auto;
  background:var(--bg-card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
}
.cs-suggest[hidden]{display:none;}
.cs-suggest-hint{padding:8px 12px 4px;color:var(--muted);font-size:.8rem;font-weight:600;}
.cs-option{
  appearance:none;display:flex;flex-direction:column;gap:2px;min-height:48px;padding:8px 12px;background:none;border:0;border-top:1px solid var(--line);
  color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer;
}
.cs-option:first-child{border-top:0;}
.cs-option:hover,.cs-option[aria-selected="true"]{background:var(--bg-elev);}
.cs-option-modes{color:var(--muted);font-size:.8rem;font-weight:500;}
.cs-journey:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;} /* nach innen: die Karte schneidet über den Rand Hinausragendes ab */
.btn.cs-submit{min-height:52px;font-size:1.05rem;}
.cs-error{margin:0;color:var(--bad);font-weight:700;}
.cs-error[hidden]{display:none;}
.cs-results{margin-top:14px;display:flex;flex-direction:column;gap:18px;}
.cs-list{display:flex;flex-direction:column;gap:8px;}
.cs-list-title{margin:0;font-size:1rem;display:flex;flex-direction:column;gap:2px;}
.cs-list-date{color:var(--muted);font-size:.85rem;font-weight:600;}
.cs-status{margin:0;}
.cs-journeys{display:flex;flex-direction:column;gap:8px;}
.card.cs-item{padding:0;overflow:hidden;}
.cs-journey{
  appearance:none;width:100%;display:grid;grid-template-columns:1fr;gap:4px;padding:12px 14px;background:none;border:0;
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;
}
.cs-journey[aria-expanded="true"]{border-bottom:1px solid var(--line);}
.cs-times{display:flex;align-items:flex-start;gap:8px;}
.cs-time{flex:0 0 auto;}
.cs-dash{font-weight:800;line-height:1.4;}
.cs-nextday{align-self:center;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:.75rem;font-weight:800;}
.cs-info{color:var(--muted);font-size:.9rem;}
.cs-lines{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.cs-sep{color:var(--muted);}
.cs-line{display:inline-block;padding:2px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg-elev);font-weight:800;font-size:.85rem;white-space:nowrap;}
.cs-line.cs-fern{border-color:var(--ink);}
.cs-line.cs-regio,.cs-line.cs-sbahn{border-color:var(--accent);}
.cs-line.gone{color:var(--muted);text-decoration:line-through;}
.cs-legs{list-style:none;margin:0;padding:10px 14px 12px;display:flex;flex-direction:column;gap:8px;}
.cs-leg{display:flex;flex-direction:column;gap:4px;padding-left:10px;border-left:3px solid var(--accent);}
.cs-leg.gone{border-left-color:var(--bad);}
.cs-leg-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.cs-stop{display:flex;align-items:baseline;gap:10px;}
.cs-stop .cs-time{min-width:3.2em;}
.cs-stop-name{flex:1 1 auto;min-width:0;font-weight:700;}
.cs-platform{flex:0 0 auto;color:var(--muted);font-size:.85rem;white-space:nowrap;}
.cs-platform.changed{color:var(--warn);font-weight:800;}
.cs-leg-mid,.cs-walk,.cs-change{color:var(--muted);font-size:.85rem;}
.cs-walk,.cs-change{padding-left:13px;}
.btn.cs-more{min-height:44px;}
.cs-source{margin-top:14px;text-align:center;}

/* Verbindungssuche: Vormerken; vorgemerkte Fahrten im Pendeltag; Kalender-Markierung */
.cs-marked{align-self:center;margin-left:auto;color:var(--ok);font-size:.85rem;font-weight:800;white-space:nowrap;}
.cs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 14px 14px;}
.cs-actions .btn{flex:1 1 140px;}
.cs-actions-note{flex:1 1 100%;color:var(--muted);font-size:.9rem;font-weight:700;}
.card.cm-planned{padding:0;overflow:hidden;}
.cm-planned-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 14px 0;}
/* „Meine Züge“: Kennzeichen neben der Phase, die Strecke rutscht in die nächste Zeile */
.cm-planned-fav{flex:0 0 auto;white-space:nowrap;color:var(--accent);font-size:.8rem;font-weight:800;}
.cm-planned-fav + .cm-planned-route{flex:1 1 100%;}
.cm-planned-tag{flex:0 0 auto;padding:2px 10px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);font-size:.8rem;font-weight:800;}
.cm-planned-route{min-width:0;font-weight:800;overflow-wrap:anywhere;}
.cm-planned .cs-journey{padding-top:8px;}
.cm-planned-actions{padding:0 14px 14px;}
.cm-planned-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:0 14px 12px;}
.cm-planned-warn{flex:1 1 100%;font-weight:800;color:var(--warn);}
.cm-planned-warn.missed{color:var(--bad);}
/* Verlauf am Reisetag: je Zug ein Abschnitt (Breite --g nach der Fahrzeit), dazwischen gestrichelt der Umstieg.
   --i = Lage eines Halts im Abschnitt (0..1), --p = gefüllter Anteil in Prozent; beides setzt commute.js */
.cm-progress{padding:0 14px 12px;}
.cm-prog-row{display:flex;align-items:flex-start;padding:2px 8px;overflow-x:auto;} /* viele Züge auf schmalem Bildschirm: seitlich schieben */
.cm-seg{flex:var(--g,1) 1 0;min-width:min-content;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.cm-seg .cs-line{box-sizing:border-box;height:24px;max-width:100%;padding:2px 6px;overflow:hidden;text-overflow:ellipsis;font-size:.8rem;line-height:18px;}
.cm-track{position:relative;width:100%;min-width:40px;height:14px;}
.cm-track::before{content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line);}
.cm-fill{position:absolute;left:0;top:5px;height:4px;width:calc(var(--p,0) * 1%);border-radius:2px;background:var(--accent);}
.cm-stop{position:absolute;top:50%;left:calc(var(--i,0) * 100%);box-sizing:border-box;width:8px;height:8px;border:2px solid var(--line);border-radius:50%;background:var(--bg-card);transform:translate(-50%,-50%);}
.cm-stop.end{width:12px;height:12px;border-color:var(--muted);}
.cm-stop.on{border-color:var(--accent);background:var(--accent);}
.cm-now,.cm-gap.now .cm-gap-line::after{position:absolute;top:50%;left:calc(var(--p,50) * 1%);box-sizing:border-box;width:16px;height:16px;border:3px solid var(--bg-card);border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--accent);transform:translate(-50%,-50%);}
.cm-seg.gone .cm-track::before{background:var(--bad);}
.cm-seg.gone .cm-stop{border-color:var(--bad);}
.cm-gap{flex:0 0 26px;display:flex;flex-direction:column;align-items:center;padding-top:30px;}
.cm-gap-line{position:relative;width:100%;height:14px;}
.cm-gap-line::before{content:'';position:absolute;left:6px;right:6px;top:6px;border-top:2px dashed var(--line);}
.cm-gap.on .cm-gap-line::before{border-top-color:var(--accent);}
.cm-gap.now .cm-gap-line::after{content:'';}
.cm-gap-label{display:flex;flex-direction:column;align-items:center;margin-top:4px;color:var(--muted);font-size:.75rem;line-height:1.25;white-space:nowrap;}
.cm-gap-name{max-width:6.5em;overflow:hidden;text-overflow:ellipsis;font-weight:700;}
.cm-gap.tight .cm-gap-min{color:var(--warn);font-weight:800;}
.cm-gap.missed .cm-gap-min{color:var(--bad);font-weight:800;}
.cm-gap.missed .cm-gap-line::before{border-top-color:var(--bad);}
.cm-ends{display:flex;justify-content:space-between;gap:10px;margin:2px 0 0;color:var(--muted);font-size:.8rem;}
.cm-prog-note{margin:8px 0 0;font-size:.9rem;font-weight:700;}
.cm-prog-note .cm-meta{display:block;font-weight:400;}
/* Fahrtverlauf je Zug in der aufgeklappten Karte (Stile wie im Overlay: .trip-toggle, .trip, .trip-stops) */
.cm-legtrip{margin-top:6px;}
/* Gespeicherter Eintrag mit Reiseverlauf: Knopf „Fahrt anzeigen“, darunter die Teilstrecken ohne den Rahmen des Fahrtverlaufs */
.cm-entry-toggle[aria-expanded="true"]{border-radius:12px;}
.cm-card:not(.cm-planned) > .cs-legs{padding:12px 0 0;}
.cal-legends{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cal-day.has-trip{box-shadow:0 0 0 2px var(--accent) inset;}
.cal-day.has-trip.selected{box-shadow:0 0 0 2px var(--accent) inset,0 0 0 2px var(--focus);}
.cal-legend.cal-planned i{background:none;box-shadow:0 0 0 2px var(--accent) inset;}

/* Stern „Meine Züge“ oben rechts an jeder Verbindung: leer = nicht gespeichert, gefüllt = Favorit */
.card.cs-item{position:relative;}
.cs-item .cs-journey{padding-right:56px;}
.cs-star{
  appearance:none;position:absolute;top:6px;right:6px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:12px;color:var(--muted);cursor:pointer;
}
.cs-star .icon{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;}
.cs-star[aria-pressed="true"]{color:var(--accent);}
.cs-star[aria-pressed="true"] .icon{fill:currentColor;}
.cs-star:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.cs-star:disabled{opacity:.5;cursor:default;}

/* ===== Ansicht „Bahnhof“ (assets/station.js) ===== */
#view-station{max-width:var(--content-max);margin:0 auto;}
.st-head{display:flex;align-items:center;gap:6px;margin:4px 0 10px;}
.st-pick{
  appearance:none;flex:1;min-width:0;min-height:48px;display:flex;align-items:center;gap:8px;padding:6px 14px;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;font-size:1.15rem;font-weight:800;text-align:left;cursor:pointer;
}
.st-pick .st-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-pick[aria-expanded="true"] .cm-caret{transform:rotate(180deg);}
.st-pick:focus-visible,.st-fav:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.st-fav{
  appearance:none;flex:0 0 48px;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:12px;color:var(--muted);cursor:pointer;
}
.st-fav[hidden]{display:none;}
.st-fav .icon{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;}
.st-fav[aria-pressed="true"]{color:var(--accent);}
.st-fav[aria-pressed="true"] .icon{fill:currentColor;}
.st-fav:disabled{opacity:.5;cursor:default;}
.st-picker{margin-bottom:12px;padding:12px;}
.st-picker[hidden]{display:none;}
.st-search{display:flex;gap:8px;align-items:stretch;}
.st-search .cs-field{flex:1;}
.btn.st-near{flex:0 0 auto;min-height:48px;padding:0 14px;white-space:nowrap;}
.st-pick-msg{margin:12px 2px 2px;color:var(--muted);}
.st-pick-msg[hidden],.st-msg[hidden]{display:none;}
.st-group{display:flex;flex-direction:column;margin-top:10px;}
.st-group-title{margin:0;padding:6px 2px 4px;color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.st-option{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:8px 6px;border-radius:8px;}
.st-option:first-of-type{border-top:0;}
.st-option .cs-option-modes{flex:0 0 auto;}
.st-table .st-col-train{width:36%;}
.st-table .st-col-time{width:22%;}
.st-table .st-col-min{width:20%;}
.st-table th,.st-table td{width:auto;padding-left:4px;padding-right:4px;}
.st-table th{font-size:.78rem;letter-spacing:0;}
.st-min .badge-cancel{padding:2px 6px;font-size:.72rem;}
.st-table th:first-child,.st-table td.st-train{text-align:left;padding-left:12px;}
.st-table tbody tr:last-child td{border-bottom:0;}
.st-train{line-height:1.25;overflow:hidden;}
.st-line{font-weight:800;}
.st-nr{margin-left:6px;color:var(--muted);font-size:.8rem;}
.st-dir,.st-gl{display:block;color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-gl.changed{color:var(--warn);font-weight:700;}
.st-time{line-height:1.25;font-variant-numeric:tabular-nums;}
.st-plan,.st-ist{display:block;}
.st-plan{color:var(--muted);font-size:.85rem;}
.st-plan.changed{text-decoration:line-through;}
.st-ist{font-weight:800;}
.st-ist.late,.st-ist.gone{color:var(--bad);}
.st-ist.gone{font-size:.8rem;}
.st-none{color:var(--muted);}
.st-row.cancelled .st-line,.st-row.cancelled .st-dir{text-decoration:line-through;}
.st-filter-btn{position:relative;}
.st-filter-btn.on{color:var(--accent);border-color:var(--accent);}
.st-filter-btn.on::after{content:'';position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--accent);}
.st-filter-info{margin:0 2px 10px;color:var(--accent);font-size:.85rem;font-weight:700;text-align:center;}
.st-filter-info[hidden]{display:none;}
.st-sheet .sheet:focus{outline:none;}
.st-modes{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px;}
.st-modes .segment{min-height:48px;}
.st-filter-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end;}
.st-filter-fields label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.9rem;min-width:0;}
.st-filter-fields input{
  width:100%;min-height:48px;box-sizing:border-box;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-elev);
  color:var(--ink);font:inherit;font-weight:700;
}
.st-filter-fields input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring);}
.st-filter-hint{margin:10px 0 0;color:var(--muted);font-size:.85rem;}
.st-msg{margin:12px 2px;color:var(--muted);text-align:center;}
.st-msg.error{color:var(--bad);font-weight:700;}
@media (max-width:359px){ .nav-item{font-size:.6rem;} }

/* iPhone/iPad: Safari zoomt beim Antippen in jedes Eingabefeld hinein, dessen Schrift kleiner als 16 px ist (und bleibt
   danach vergrößert). Deshalb dort alle Felder auf mindestens 16 px – nur iOS (@supports), sonst bleibt alles wie es ist.
   Die beiden Felder mit größerer Schrift behalten sie. */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea{font-size:16px !important;}
  .login input{font-size:1.05rem !important;}
  .cm-stepper input{font-size:1.3rem !important;}
}