:root {
  color-scheme: light dark;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1a1f24;
  --muted: #5b6670;
  --border: #dde3e8;
  --accent: #0d6ea8;
  --accent-contrast: #ffffff;
  --row-hover: #eaf3fa;
  --row-stripe: #f8fafb;
  --header-bg: #eef2f5;
  --warm: #c94a1c;
  --cold: #1c6cc9;
  /* Höhe der Monats-/Jahresübersicht- und Wettermodell-Charts (.dash-chart-svg) - als CSS-Variable
     statt fest verdrahtet, damit die mobile Media-Query (siehe Dateiende) sie kleiner machen kann,
     ohne dass die per JS berechnete Pixel-Position der Achsenbeschriftung/Tooltip-Overlays
     (renderDashPeriodChartInto/renderWmodChart, Konstante ySvgPx) dabei auseinanderläuft - beide
     Seiten lesen denselben Wert. */
  --dash-chart-height: 150px;
  /* Nur für das Wettermodelle-Chart "Temperatur 2m" (Nutzerwunsch: deutlich größer als alle übrigen
     Charts) - eigene Variable statt --dash-chart-height zu ändern, da diese von JEDEM Chart im
     Programm gemeinsam genutzt wird. Siehe #wmod-chart-t2m .dash-chart-svg weiter unten sowie
     renderWmodChart()s cssHeightVar-Option. */
  --wmod-t2m-chart-height: 260px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1e22;
    --panel: #24282d;
    --text: #e7ebee;
    --muted: #98a3ad;
    --border: #363c42;
    --accent: #4fa8dd;
    --accent-contrast: #10161a;
    --row-hover: #2d3a44;
    --row-stripe: #202429;
    --header-bg: #2a2f34;
  }
}

* { box-sizing: border-box; }

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

.app-header {
  display: flex;
  align-items: center;
  gap: 24px;
  /* padding-top zusätzlich zu env(safe-area-inset-top): auf abgerundeten/ausgeschnittenen Displays
     (Notch, Punch-Hole, abgerundete Ecken) bleibt so auch bei knappem Inset noch Luft, damit der
     Hamburger-Menü-Button nicht zu nah am Rand/unter der Statusleiste sitzt. */
  padding: max(10px, env(safe-area-inset-top)) 20px 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.app-header h1 {
  font-size: 18px;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.app-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Nur auf schmalen Screens sichtbar (siehe mobile Media Query am Dateiende) - auf Desktop bleibt
   die bestehende horizontale Tab-Leiste unverändert, daher hier kein Menü-Button nötig. */
.menu-toggle-btn {
  display: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  margin-bottom: 8px;
  border-radius: 6px;
}

.menu-toggle-btn:hover {
  color: var(--text);
  background: var(--row-stripe);
}

/* Abdunkelndes Overlay hinter der aufklappbaren Menüspalte (siehe .tabs.nav-open in der mobilen
   Media Query) - per [hidden] ausgeblendet, JS entfernt/setzt das Attribut beim Öffnen/Schließen. */
.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2400;
}

.nav-drawer-backdrop[hidden] {
  display: none;
}

.settings-gear-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  margin-bottom: 8px;
  border-radius: 6px;
}

.settings-gear-btn:hover {
  color: var(--text);
  background: var(--row-stripe);
}

.tabs {
  display: flex;
  gap: 4px;
  /* Sicherheitsnetz für die horizontale Tab-Leiste (Desktop/breite Tablet-Ansicht, siehe
     MOBILE_MENU_QUERY-Umschaltung unten): reicht der Platz trotz des breiten Umschalt-Punkts
     ausnahmsweise nicht (z.B. sehr schmales Desktop-Fenster), wird gescrollt statt am Rand
     abgeschnitten/unerreichbar zu werden. */
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tab-panel {
  display: none;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
  padding: 12px 20px;
}

.tab-panel.active {
  display: flex;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.toolbar input[type="search"] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  min-width: 240px;
}

.toolbar select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
}

.toolbar button {
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  font-size: 13px;
}

.toolbar button:hover {
  filter: brightness(1.08);
}

.toolbar button:disabled {
  opacity: 0.6;
  cursor: default;
}

.toolbar input[type="range"] {
  flex: 1;
  min-width: 200px;
  accent-color: var(--accent);
}

.dash-quick-stations {
  display: flex;
  gap: 6px;
}

.toolbar button.dash-quick-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.toolbar button.dash-quick-btn:hover {
  filter: none;
  border-color: var(--accent);
  color: var(--accent);
}

.toolbar button.dash-quick-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.toolbar button.dash-quick-btn.active:hover {
  color: var(--accent-contrast);
}

#btn-timeline-play {
  min-width: 40px;
}

#timeline-label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 150px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input {
  cursor: pointer;
}

.spacer { flex: 1; }

.status-text {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.status-text.error {
  color: var(--warm);
  font-weight: 600;
}

.dash-rec-status-name {
  overflow-wrap: anywhere;
}

.dash-rec-status-meta {
  font-size: 11px;
  opacity: 0.8;
  overflow-wrap: anywhere;
}

.table-wrap {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--header-bg);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

thead th:hover {
  color: var(--accent);
}

thead th .unit {
  color: var(--muted);
  font-weight: 400;
  font-size: 11px;
}

thead th .sort-arrow {
  font-size: 10px;
  margin-left: 4px;
  color: var(--accent);
}

tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr:nth-child(even) {
  background: var(--row-stripe);
}

tbody tr:hover {
  background: var(--row-hover);
}

td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.station-name-link {
  cursor: pointer;
}

.station-name-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

td.na {
  color: var(--muted);
  text-align: right;
}

td.stale {
  color: var(--muted);
  font-style: italic;
}

/* Private Wetterstationen (z.B. AWEKAS) - immer blau, zur Unterscheidung von amtlichen Stationen. */
tr.private-station-row td {
  color: #1d6fd8;
}

@media (prefers-color-scheme: dark) {
  tr.private-station-row td {
    color: #6cabff;
  }
}

/* Historie: Stationen ohne co-lokalisierte Klimastation, für die GeoSphere's eigenes TAWES-Archiv
   vor TAWES_ARCHIVE_GAP_END (siehe renderer.js) keine Daten hat - dezente Kennzeichnung + Tooltip,
   damit "-" nicht wie ein unerklärter Fehler wirkt. */
tr.historie-gap-row td.na {
  font-style: italic;
}

.app-footer {
  padding: 8px 20px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.app-footer a {
  color: var(--accent);
}

.mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

/* ".toolbar .mode-btn" statt nur ".mode-btn": ".toolbar button" (1 Klasse + 1 Element) ist
   sonst SPEZIFISCHER als ein reines ".mode-btn" (nur 1 Klasse) und würde dessen blassen
   Standard-Hintergrund überschreiben - alle Mode-Toggle-Buttons (Modell/Lauf bei Wettermodelle,
   Zeitraum/Modus anderswo) erschienen dadurch unabhängig von ".active" durchgehend blau, die
   Auswahl war nicht mehr erkennbar. Der zusätzliche Klassen-Qualifier hebt die Spezifität über
   die von ".toolbar button", damit nur der tatsächlich aktive Button blau bleibt. */
.toolbar .mode-btn {
  border: none;
  background: var(--panel);
  color: var(--text);
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.toolbar .mode-btn + .mode-btn {
  border-left: 1px solid var(--border);
}

.toolbar .mode-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.map-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}

#leaflet-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.leaflet-div-icon.station-marker {
  background: transparent;
  border: none;
}

.radar-overlay-img {
  image-rendering: pixelated;
}

.station-marker svg {
  overflow: visible;
  cursor: pointer;
}

.station-marker.no-data svg circle.dot {
  fill: #b0bac2 !important;
  opacity: 0.6;
}

.leaflet-tooltip.station-tooltip {
  font-size: 12px;
  font-family: inherit;
}

.map-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 650;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text);
  min-width: 180px;
  pointer-events: none;
}

.map-legend .legend-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.map-legend .legend-bar {
  height: 10px;
  border-radius: 3px;
  margin-bottom: 2px;
}

.map-legend .legend-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Muss über Leaflets eigenen Steuerelementen liegen (.leaflet-top/.leaflet-bottom: z-index 1000). */
  z-index: 2000;
}

.modal-overlay[hidden] { display: none; }

.modal-card {
  position: relative;
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  padding: 20px 24px;
  min-width: 320px;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-card h2 {
  margin: 0 0 4px 0;
  font-size: 16px;
}

.modal-title-link {
  cursor: pointer;
}

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

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}

.modal-close:hover { color: var(--text); }

.settings-section {
  min-width: 380px;
  max-width: 460px;
}

.settings-section h3 {
  font-size: 14px;
  margin: 4px 0 6px;
}

.settings-hint {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 10px;
}

.settings-current-value {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.settings-remove-btn {
  margin-bottom: 14px;
}

#settings-place-result-row {
  align-items: center;
}

.modal-subtitle {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 12px;
}

.modal-section-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.modal-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.modal-row .modal-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --- Startseite: Stations-Dashboard --------------------------------------- */

.dash-wrap {
  flex: 1;
  overflow-y: auto;
}

/* Startseite soll als GANZES scrollen (Ortssuche/Vorhersage + Stationssuche + Kacheln/Charts
   gemeinsam), nicht mit "Aktuelle Werte" als eigenem, separat scrollendem Innenbereich - daher
   hier gezielt überschrieben (nur für #panel-startseite, andere Tabs mit .dash-wrap wie
   "Wettermodelle" behalten ihr eigenes internes Scrollen unverändert). */
#panel-startseite {
  overflow-y: auto;
}

#panel-startseite #dash-wrap {
  flex: none;
  overflow-y: visible;
}

/* Zweispaltiges Layout der Startseite: schmale "Meine Orte"-Spalte links, der bisherige Inhalt
   (Ortssuche/Vorhersage/Messwerte/Charts) unverändert rechts in .dash-page-main. Beide Spalten
   wachsen frei in der Höhe - das Scrollen übernimmt weiterhin #panel-startseite als Ganzes (siehe
   oben), keine eigene innere Scrollbox nötig. */
.dash-page-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dash-places-sidebar {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

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

.dash-places-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-places-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 4px 2px;
}

.dash-place-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}

.dash-place-item:hover {
  border-color: var(--accent);
}

.dash-place-item.default .dash-place-item-name {
  font-weight: 600;
}

.dash-place-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.dash-place-item-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  flex-shrink: 0;
}

.dash-place-item-remove:hover {
  color: var(--warm);
}

.dash-places-add-btn {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.dash-places-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dash-empty {
  color: var(--muted);
  text-align: center;
  padding: 80px 20px;
  font-size: 14px;
}

.dash-content {
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

.dash-content[hidden] {
  display: none;
}

.dash-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 4px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  min-width: 0;
}

/* Stationsnamen wie "KLAGENFURT/HTL1-LASTENSTRASSE" enthalten keine Leerzeichen - ohne
   overflow-wrap wird so ein Name nie umgebrochen (Browser brechen standardmäßig nur an
   Leerzeichen/Bindestrichen, "/" zählt nicht als Umbruchstelle) und zwingt dadurch die GESAMTE
   Seite in die Breite (der umgebende Flex-Header/-Content wächst auf die Textbreite mit), was auf
   schmalen Screens horizontales Scrollen der kompletten Startseite erzwang - betraf nicht nur
   dieses Element sichtbar, sondern machte auch andere eigentlich responsive Layouts (z.B. das
   Messwerte-Grid) nutzlos, weil deren Container plötzlich viel breiter war als der Viewport. */
.dash-header-name {
  font-size: 24px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.dash-header.private .dash-header-name {
  color: #1d6fd8;
}

@media (prefers-color-scheme: dark) {
  .dash-header.private .dash-header-name {
    color: #6cabff;
  }
}

.dash-header-meta {
  color: var(--muted);
  font-size: 13px;
}

.dash-header-updated {
  color: var(--muted);
  font-size: 12px;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.dash-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px 16px 22px;
  overflow: hidden;
}

.dash-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--card-accent, var(--accent));
}

.dash-card-label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-card-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 6px;
}

.dash-card-now {
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-card-now .dash-card-unit {
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 3px;
}

.dash-card.na .dash-card-now {
  color: var(--muted);
  font-weight: 400;
}

.dash-card-extra {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.dash-extra-item {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.dash-extra-label {
  color: var(--muted);
}

.dash-extra-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dash-extra-time {
  margin-left: 5px;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}

.dash-wind-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 15px;
}

.dash-incomplete {
  color: var(--warm);
  cursor: help;
  margin-left: 2px;
}

.dash-chart-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px 10px 18px;
  margin-bottom: 12px;
}

.dash-chart-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.dash-chart-container {
  width: 100%;
  position: relative;
}

.dash-chart-svg {
  width: 100%;
  height: var(--dash-chart-height);
  display: block;
  overflow: visible;
  cursor: crosshair;
}

/* Wettermodelle "Temperatur 2m" - eigene, größere Höhe (Nutzerwunsch), siehe --wmod-t2m-chart-height
   in :root und cssHeightVar in renderWmodChart()/dashChartCssHeight(). ID-Selektor nötig für höhere
   Spezifität gegenüber der allgemeinen .dash-chart-svg-Regel oben. */
#wmod-chart-t2m .dash-chart-svg {
  height: var(--wmod-t2m-chart-height);
}

.dash-chart-grid {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.5;
}

/* Gefrierpunkt (0°) als kräftigere Referenzlinie hervorgehoben - Kombi-Selektor statt reiner
   Klassenreihenfolge, damit die Regel unabhängig von der Deklarationsreihenfolge im Stylesheet
   sicher gegen .dash-chart-grid gewinnt (gleiche Spezifität sonst reihenfolgeabhängig). */
.dash-chart-grid.dash-chart-grid-zero {
  stroke: var(--muted);
  stroke-width: 1.6;
  opacity: 0.85;
}

.dash-chart-ygrid-label {
  position: absolute;
  /* Etwas negativ statt 0: die reservierte SVG-Spalte links (padding.left in renderDashChartInto)
     ist in SVG-internen Einheiten fest, schrumpft beim Skalieren auf schmale Kartenbreiten aber
     proportional mit - die Beschriftung selbst (normales HTML, nicht mitskaliert) blieb dabei
     gleich breit und ragte dadurch auf schmalen Screens teils in die Wertelinie hinein. Der
     negative Versatz nutzt stattdessen das Padding von .dash-chart-block (18px) links der Karte. */
  left: -8px;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* Achsenbeschriftungen sind bewusst normales HTML statt SVG-<text>: <text> innerhalb eines mit
   preserveAspectRatio="none" gestreckten viewBox wird nicht gleichmäßig skaliert und wirkt
   "zerquetscht" (horizontal gestaucht), sobald die reale Breite von der viewBox-Breite abweicht. */
.dash-chart-yaxis-max,
.dash-chart-yaxis-min {
  position: absolute;
  left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}

.dash-chart-yaxis-max {
  top: 4px;
}

.dash-chart-yaxis-min {
  bottom: 24px;
}

.dash-chart-xaxis {
  position: relative;
  height: 16px;
  margin-top: 4px;
}

.dash-chart-xaxis span {
  position: absolute;
  top: 0;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Wettermodelle-Charts: etwas kleinere Achsenbeschriftung als die übrigen Charts (Startseite/
   Historie etc. bleiben unverändert) - Nutzerwunsch, gilt für x- (nur Tag, kein Monat, siehe
   isoDayOnlyTick) und y-Achse gleichermaßen. */
#wmod-wrap .dash-chart-xaxis span,
#wmod-wrap .dash-chart-ygrid-label {
  font-size: 8.5px;
}


.dash-chart-hover-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3,3;
  pointer-events: none;
}

.dash-chart-hover-dot {
  stroke: var(--panel);
  stroke-width: 1.5;
  pointer-events: none;
}

.dash-chart-tooltip {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.dash-chart-tooltip-time {
  color: var(--muted);
  margin-bottom: 2px;
}

.dash-chart-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 50px 0;
  text-align: center;
}

.dash-month-total {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.dash-month-stats {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.dash-month-stats[hidden] {
  display: none;
}

.dash-month-stat-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.dash-month-stat-label {
  color: var(--muted);
}

.dash-month-stat-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dash-month-daycount-table {
  margin-top: 12px;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dash-month-daycount-table td {
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--border);
}

.dash-month-daycount-table td.num {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}

.dash-month-daycount-condition {
  color: var(--muted);
  font-size: 11px;
}

.dash-year-temp-mode-row[hidden] {
  display: none;
}

.dash-chart-legend {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.dash-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dash-chart-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.own-stations {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.own-station-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
}

.own-station-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.own-station-name {
  font-size: 20px;
  font-weight: 700;
}

.own-station-meta {
  color: var(--muted);
  font-size: 13px;
}

.own-station-status {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--row-stripe);
  color: var(--muted);
}

.own-station-status-ok {
  background: rgba(46, 160, 67, 0.15);
  color: #2ea043;
}

.own-station-status-error {
  background: rgba(229, 57, 53, 0.12);
  color: var(--warm);
}

.own-station-status-loading {
  color: var(--muted);
}

.own-station-device-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

.own-station-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.own-station-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.own-station-field-label {
  font-size: 12px;
  color: var(--muted);
}

.own-station-field-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.own-station-field-extra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.own-station-field-extra .dash-extra-item {
  justify-content: flex-start;
  font-size: 12px;
}

.own-station-updated {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

/* Wetterwarnungen (GeoSphere/ZAMG Warn API) */
.warn-map-wrap {
  position: relative;
  height: 380px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}

#warn-leaflet-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.warn-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.warn-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.warn-container {
  flex: 1;
  padding: 20px 0 20px;
  margin-top: 14px;
  overflow-y: auto;
}

.warn-section-label {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 4px 0 10px;
}

.warn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warn-day-header {
  font-size: 15px;
  font-weight: 700;
  margin: 14px 0 2px;
}

.warn-day-header:first-child {
  margin-top: 0;
}

.warn-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px 14px 20px;
  margin-bottom: 10px;
  overflow: hidden;
}

.warn-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--warn-accent, var(--accent));
}

.warn-card.warn-card-inactive {
  opacity: 0.6;
}

.warn-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.warn-card-badge {
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}

.warn-card-type {
  font-size: 16px;
  font-weight: 700;
}

.warn-card-status {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.warn-card-time {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.warn-card-text {
  margin-top: 8px;
  font-size: 14px;
}

.warn-card-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* Startseite: Ortssuche + Vorhersage-Platzhalter */
.dash-place-search {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.forecast-location {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}

.forecast-status {
  margin-bottom: 6px;
}

.forecast-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 48h-Stundenstreifen */
.forecast-hourly {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.forecast-hour-cell {
  flex: 0 0 auto;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.forecast-hour-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.forecast-hour-icon {
  font-size: 20px;
  line-height: 1;
}

.forecast-hour-temp {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.forecast-hour-wind {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 2px;
}

.forecast-hour-precip {
  font-size: 10px;
  color: #2f7fd6;
}

/* 14-Tage-Übersicht - Kacheln nebeneinander (horizontal scrollbar), analog zum Stundenstreifen,
   damit der gesamte Vorhersage-Bereich kompakt/begrenzt hoch bleibt statt den Rest der Startseite
   nach unten zu verdrängen. */
.forecast-daily {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.forecast-day-tile {
  flex: 0 0 auto;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.forecast-day-date {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.forecast-day-date-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.forecast-day-icon {
  position: relative;
  font-size: 22px;
  line-height: 1;
}

.forecast-thunder-badge {
  position: absolute;
  right: -6px;
  bottom: -4px;
  font-size: 12px;
}

/* Höchsttemperatur über der Tiefsttemperatur, nicht nebeneinander (Nutzerwunsch). */
.forecast-day-temps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.forecast-day-max {
  font-weight: 700;
}

.forecast-day-min {
  color: var(--muted);
  font-size: 12px;
}

.forecast-day-precip {
  font-size: 12px;
  color: #2f7fd6;
}

.forecast-day-wind {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Wettermodelle: Legende für Hauptlauf/Kontrolllauf/Mittel/Ensemble-Mitglieder */
.wmod-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.wmod-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wmod-legend-line {
  display: inline-block;
  width: 22px;
  height: 0;
  border-top: 1px solid var(--accent);
}

.wmod-legend-line-main {
  border-top-width: 1.4px;
  border-top-color: #2ea043;
}

.wmod-legend-line-control {
  border-top-width: 1.2px;
  border-top-color: #3b6fd6;
}

.wmod-legend-line-mean {
  border-top-width: 2px;
  border-top-color: #000000;
  border-top-style: dashed;
}

.wmod-legend-line-members {
  border-top-width: 0.6px;
  border-top-color: var(--accent);
  opacity: 0.5;
}

/* Schmale Ansicht (Android-App via Capacitor - nur Hochformat, siehe orientation:portrait unten -,
   aber auch schmale Fenster generell). Rein additiv - überschreibt nur Layout-Eigenschaften (Richtung/
   Breite/Scrollverhalten), keine Farben/Inhalte, daher am Ende der Datei mit höherer Regel-Reihenfolge
   statt vieler verstreuter Einzel-Overrides.
   960px statt vormals 640px: die horizontale Tab-Leiste (9 Reiter + Logo/Titel/Zahnrad) passt erst ab
   ca. 1700px bequem in eine Zeile - bei typischen Tablets im Hochformat (oft 760-900dp Breite) wurde
   sie sonst am rechten Rand abgeschnitten (einzelne Reiter nicht mehr erreichbar), obwohl der
   restliche Seiteninhalt bereits die volle Breite nutzte. Mit 960px bekommen Hochformat-Tablets/-Handys
   die Drawer-Navigation (siehe .menu-toggle-btn/.tabs.nav-open).
   UND (orientation: portrait): im Querformat (Handy gedreht, Tablet quer) soll die klassische
   horizontale Tab-Leiste oben IMMER sichtbar bleiben, auch wenn die Breite unter 960px liegt (z.B. ein
   quergedrehtes Handy) - explizit so gewünscht. Reicht der Platz dafür ausnahmsweise nicht, greift das
   Scroll-Sicherheitsnetz von .tabs (overflow-x: auto) statt eines Menüs. */
@media (max-width: 960px) and (orientation: portrait) {
  .app-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 12px 0 12px;
  }

  .app-header h1 {
    font-size: 16px;
  }

  /* Tab-Leiste (9 Reiter) - auf Handy-Breite statt einer (auch horizontal wischbar immer noch
     vollen) Zeile jetzt als klassisches Menü: Hamburger-Button links oben öffnet eine seitliche
     Spalte mit den Reitern untereinander (siehe .menu-toggle-btn/.nav-drawer-backdrop weiter oben
     und den Toggle-Code in renderer.js). Dieselben <button class="tab">-Elemente wie auf Desktop
     werden nur per CSS umpositioniert/umgestylt - keine zweite, duplizierte Navigation im DOM,
     daher bleiben die bestehenden Klick-Handler/aktive-Klasse-Logik unverändert gültig. */
  .menu-toggle-btn {
    display: inline-flex;
    align-items: center;
  }

  .tabs {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2500;
    width: 78vw;
    max-width: 300px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--panel);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
    padding: 16px 0;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
  }

  .tabs.nav-open {
    transform: translateX(0);
  }

  .tab {
    flex: 0 0 auto;
    width: 100%;
    text-align: left;
    padding: 14px 20px;
    font-size: 15px;
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .tab.active {
    border-bottom-color: transparent;
    border-left-color: var(--accent);
    background: var(--row-stripe);
  }

  .tab-panel {
    padding: 10px 12px;
  }

  /* "Meine Orte" und Einstellungen werden per JS (applyMobileMenuLayout in renderer.js) ganz oben
     ins Menü verschoben statt fix auf der Startseite/im Header zu stehen - auf Nutzerwunsch beide
     von JEDEM Reiter aus erreichbar (nicht nur von der Startseite): einen gespeicherten Ort
     auszuwählen springt automatisch zur Startseite (siehe Klick-Handler in buildDashPlaceRow),
     Einstellungen ebenso unabhängig vom aktiven Reiter. */
  #tabs > .dash-places-sidebar {
    width: 100%;
    flex: none;
    padding: 4px 16px 12px;
    border: none;
    background: transparent;
    margin-bottom: 4px;
  }

  #tabs > .settings-gear-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    text-align: left;
  }

  /* Fußzeile (Quellenangaben) wandert per JS (applyMobileMenuLayout) ans Ende von #tabs - anders als
     Desktop (fixe Leiste unten am Bildschirmrand) hier ganz unten IM Menü, da auf Handy-Breite kein
     Platz für eine zusätzliche fixe Leiste unter dem Seiteninhalt ist. */
  .tabs > .app-footer {
    border-top: 1px solid var(--border);
    background: transparent;
    padding: 12px 16px 20px;
    font-size: 11px;
    margin-top: 8px;
  }

  /* "Meine Orte"-Spalte (siehe .dash-page-layout weiter oben) neben dem Hauptinhalt hätte auf
     Handy-Breite kaum noch Platz für den eigentlichen Inhalt - stattdessen übereinander stapeln. */
  .dash-page-layout {
    flex-direction: column;
  }

  .dash-places-sidebar {
    width: 100%;
    flex: 1 1 auto;
  }

  /* .dash-page-main ist für die ROW-Variante von .dash-page-layout gebaut (flex:1 verteilt
     horizontalen Restplatz neben der Sidebar). Sobald .dash-page-layout hier auf Spalten umgestellt
     wird, bedeutet flex:1 stattdessen "volle Höhe verteilen" - die Breite wird zum Cross-Axis-Wert
     und folgt dann NICHT mehr automatisch der Spaltenbreite, wenn der Inhalt (Toolbar/Grid/Charts)
     breiter sein will. min-width:0 allein reichte hier nicht aus (verhindert nur, dass es NOCH
     breiter wird, erzwingt aber keine 100%-Breite) - erst explizites width:100% verhindert
     zuverlässig, dass .dash-page-main (und alles darin) über die Bildschirmbreite hinauswächst. */
  .dash-page-main {
    width: 100%;
    min-width: 0;
  }

  /* Schnellauswahl-Buttons für Stationen in der Nähe (siehe findNearbyStations) hatten kein
     flex-wrap - bei mehreren/langen Stationsnamen nebeneinander sprengte das die Toolbar-Breite. */
  .dash-quick-stations {
    flex-wrap: wrap;
    min-width: 0;
  }

  .toolbar {
    min-width: 0;
  }

  /* Toolbars (Stationssuche, Ortssuche, Filter) sind für breite Desktop-Fenster ausgelegt
     (min-width: 240px pro Suchfeld) - auf schmalen Screens stattdessen frei mitwachsen/schrumpfen. */
  .toolbar input[type="search"] {
    min-width: 0;
    flex: 1 1 140px;
  }

  .toolbar {
    gap: 8px;
  }

  /* Status-/Ergebnistexte (z.B. "Nächste Station zu 'X': Y (Z km entfernt)") sind auf Desktop
     bewusst einzeilig (weil die Toolbar bei Bedarf umbricht) - auf Handy-Breite ist eine einzelne
     lange Zeile aber selbst schon breiter als der Bildschirm und würde die ganze Seite aufweiten. */
  .status-text {
    white-space: normal;
  }

  /* Modale (Stationsdetails, Einstellungen) sind für Desktop-Breite ausgelegt (.settings-section hat
     z.B. ein festes min-width: 380px) - auf schmalen Screens (viele Handys sind nur 360-393px breit)
     würde das Overflow/horizontales Scrollen im Modal erzwingen. Stattdessen an die Viewport-Breite
     anpassen. */
  .modal-card {
    min-width: 0;
    width: 92vw;
    padding: 16px 18px;
  }

  .settings-section {
    min-width: 0;
    max-width: none;
  }

  /* Messwerte-Kacheln (.dash-grid/.dash-card): auf Desktop per auto-fill/minmax(260px,1fr) gedacht,
     auf Handy-Breite reicht das aber oft nur für 1 Spalte und wirkt sehr groß. Nutzerwunsch: exakt
     3 Kacheln pro Zeile, dafür Inhalt (großer Messwert + Max/Min-Zusatzzeile) deutlich verkleinert
     und von nebeneinander auf untereinander umgestellt (sonst passt "Max 23,7°C 09:30" etc. bei
     Kartenbreite ~110-125px nicht mehr). */
  .dash-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    min-width: 0;
  }

  /* min-width:0 ist hier entscheidend: Grid-Items bekommen ohne das eine implizite
     min-width:auto (= Inhalts-Mindestbreite), z.B. durch lange nowrap-Labels wie
     "Windgeschwindigkeit"/"Niederschlag (10min)" (.dash-card-label) - das hätte die 1fr-Spalten
     trotz repeat(3,1fr) auf die jeweilige Textbreite aufgeblasen und dadurch NICHT nur die Kachel,
     sondern die komplette Seite (.dash-content/.dash-header stretchen im umgebenden Column-Flex
     mit) horizontal zum Scrollen gezwungen - das eigentliche, nicht offensichtliche Ziel dieses
     Nutzerwunsches. */
  .dash-card {
    min-width: 0;
    padding: 8px 8px 8px 10px;
    border-radius: 8px;
  }

  .dash-card-label {
    font-size: 9.5px;
  }

  .dash-card-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin-top: 3px;
  }

  .dash-card-now {
    font-size: 18px;
  }

  .dash-card-now .dash-card-unit {
    font-size: 10px;
  }

  .dash-card-extra {
    align-items: flex-start;
  }

  .dash-extra-item {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 3px;
    font-size: 9px;
  }

  /* Uhrzeit des Max/Min-Zeitpunkts wurde hier bisher wegen Platzmangel bei 3 Kacheln/Zeile komplett
     ausgeblendet, dann probeweise auf eine eigene Zeile verlegt - auf Nutzerwunsch jetzt aber wieder
     rechts NEBEN dem Wert (ihr normaler Platz in dashPlainAt(), siehe renderer.js). white-space:normal
     auf .dash-extra-value ist hier das Sicherheitsnetz: die Basisregel .dash-extra-item weiter oben
     erzwingt white-space:nowrap (wird vererbt) - ohne die Umkehr hier würde "27.7 °C 11:20" als EIN
     nicht umbrechbarer Textlauf auf sehr schmalen Kacheln die Karte in die Breite drücken statt bei
     Bedarf einfach zweizeilig zu werden (derselbe Fehlermuster-Typ wie schon bei den Stationsnamen).
  */
  .dash-extra-value {
    white-space: normal;
    text-align: right;
  }

  .dash-extra-time {
    margin-left: 3px;
    font-size: 7.5px;
  }

  /* Monats-/Jahresübersicht-, Verlauf(7-Tage)- und Wettermodell-Charts (.dash-chart-svg) - Höhe über
     die CSS-Variable gesteuert (siehe :root weiter oben), NICHT direkt an .dash-chart-svg, damit die
     per JS berechnete Overlay-Position (dashChartCssHeight() in renderer.js) automatisch mitzieht.
     Bewusst NICHT vergrößert (Klarstellung des Nutzers: "stretch" bezog sich nicht auf die
     Container-Fläche, sondern darauf, dass die Wertelinie den vorhandenen Bereich gut ausfüllt - das
     steuert die Y-Achsen-Skalierung in renderDashChartInto/hGridStep, nicht die Pixel-Höhe hier). */
  :root {
    --dash-chart-height: 90px;
    /* Verhältnis zur normalen mobilen Chart-Höhe beibehalten (90px statt 150px = Faktor ~0.6) - das
       Temperatur-2m-Chart bleibt damit auch auf schmalen Screens spürbar größer als die übrigen
       Wettermodell-Charts, ohne bei 260px*0.6 unnötig viel vertikalen Platz zu beanspruchen. */
    --wmod-t2m-chart-height: 155px;
  }

  /* Datumsbeschriftung der X-Achse bei den 7-Tage-Charts (z.B. "Sa 18.07.") - etwas kleiner. */
  .dash-chart-xaxis span {
    font-size: 8.5px;
  }

  /* Stationsname-Titel (z.B. "KLAGENFURT/HTL1-LASTENSTRASSE") - auf Desktop groß/prominent gedacht,
     auf Handy-Breite wirkt 24px zusammen mit dem Zeilenumbruch (siehe overflow-wrap oben) zu wuchtig. */
  .dash-header-name {
    font-size: 17px;
  }

  .dash-header-meta,
  .dash-header-updated {
    font-size: 12px;
  }

  /* Schnellauswahl-Buttons (nächstgelegene Station + Stationen in der Nähe) - etwas kleinere
     Schrift auf Handy-Breite, wie gewünscht ("wenig kleinere Schrift"). Selektor exakt wie die
     Desktop-Regel (.toolbar button.dash-quick-btn, siehe weiter oben) - eine einfache .dash-quick-btn
     hier hätte wegen geringerer Spezifität (0,0,1,0 vs. 0,0,2,1) trotz Media Query NICHT gewonnen,
     exakt derselbe Spezifitäts-Stolperstein wie beim .mode-btn-Fix an anderer Stelle. */
  .toolbar button.dash-quick-btn {
    font-size: 11.5px;
    padding: 5px 9px;
  }

  /* Tabellen bei Aktuelle Werte/Hitliste/Historie/Rekorde (alle .table-wrap > table) haben auf
     Desktop recht großzügiges Padding pro Spalte (8-10px je Zelle) - bei 8-10 Spalten summiert
     sich das schnell zu deutlichem horizontalem Scrollen auf Handy-Breite. Schrift und
     Zell-Padding verkleinert, damit mehr Spalten ohne Scrollen sichtbar sind. */
  .table-wrap table {
    font-size: 11px;
  }

  .table-wrap thead th {
    padding: 5px 6px;
  }

  .table-wrap thead th .unit {
    font-size: 9.5px;
  }

  .table-wrap thead th .sort-arrow {
    font-size: 8px;
    margin-left: 2px;
  }

  .table-wrap tbody td {
    padding: 4px 6px;
  }

  /* Karte-Tab: die Toolbar hat sehr viele Steuerelemente (Modus-Umschalter, 2 Selects, 3 Checkboxen,
     Aktualisieren-Button, 2 Statustexte) - auf Handy-Breite bricht das in viele Zeilen um. Da
     .map-wrap normalerweise per flex:1 nur den REST der (fixen, nicht scrollenden) Panel-Höhe bekommt
     (siehe .tab-panel weiter oben, overflow:hidden), quetschte eine hohe Toolbar die Karte auf einen
     winzigen Rest zusammen. Feste Mindesthöhe statt "was übrig bleibt", und das Panel selbst
     scrollbar (wie schon bei #panel-startseite) - bei Bedarf zu den Filtern hochscrollen, die Karte
     selbst bleibt aber immer ausreichend groß. Zusätzlich die Steuerelemente selbst kompakter, damit
     die Toolbar von vornherein weniger Zeilen braucht. */
  #panel-karte {
    overflow-y: auto;
  }

  #panel-karte .map-wrap {
    flex: none;
    min-height: 55vh;
  }

  .toolbar select,
  .toolbar button {
    font-size: 12px;
    padding: 5px 8px;
  }

  .toolbar .mode-btn {
    padding: 5px 10px;
    font-size: 12px;
  }

  .checkbox-label {
    font-size: 12px;
    gap: 4px;
  }
}