/* ============================================================
   NordApp Onboarding Klickdummy
   Design-Tokens: hier wird später die Gestaltungslinie gesetzt.
   Aktuell bewusst neutral/graustufig (Wireframe-Niveau).
   ============================================================ */
:root {
  /* Markenfarben (Smarte Grenzregion) */
  --color-primary: #005596;        /* Nordsee-Blau, Markenfarbe */
  --color-primary-dark: #00406f;   /* Blau, Hover/aktiv */
  --color-secondary: #7aafc8;      /* helles Blau */
  --color-magenta: #f535aa;        /* Interaktions-/Link-Akzent */
  --color-gold: #fcc12e;           /* warmer Akzent */

  /* Flächen & Text */
  --color-bg-page: #dfe7ee;        /* Seite hinter dem Gerät */
  --color-bg-app: #ffffff;         /* App-Hintergrund */
  --color-bg-soft: #f2f6f9;        /* sanfte Markenfläche */
  --color-ink: #0a0f14;            /* Primäre Textfarbe */
  --color-ink-soft: #5b6975;       /* Sekundärer Text */
  --color-line: #d4dee6;           /* Linien, Rahmen (blaustichig) */
  --color-fill: #f2f6f9;           /* Flächen, Platzhalter */
  --color-accent: var(--color-primary);
  --color-accent-ink: #ffffff;     /* Text auf Akzent */

  /* Typografie */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Ubuntu", "Open Sans", sans-serif;
  --fs-title: 24px;
  --fs-body: 16px;
  --fs-small: 13px;

  /* Form */
  --radius-app: 14px;
  --radius-ctl: 12px;
  --space: 20px;

  /* Höhe der Such-Steuerelemente auf dem Karten-Screen (Screen 3):
     Eingabefeld, quadratischer Standort-Button und Dropdown-Zeilen teilen sich
     diesen Wert. Nur hier ändern, dann passen sich alle drei gemeinsam an. */
  --search-control-h: 50px;

  /* Gerät: iPhone 17 (6,3"), logische Punkte 402 x 874 @3x */
  --device-w: 402px;
  --device-h: 874px;
  --device-radius: 55px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  /* Wie eine App: der Viewport scrollt nie, nur innere Bereiche (Listen,
     Sheet-Inhalt) tun das. Verhindert auch das iOS-Gummiband am Dokument. */
  overflow: hidden;
  overscroll-behavior: none;
  /* Doppeltipp-Zoom (und den 300ms-Tap-Delay) abschalten; Pinch-Zoom der
     Karten bleibt erhalten, da Leaflet die Geste selbst verarbeitet. */
  touch-action: manipulation;
}

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg-page);
  position: fixed;
  width: 100%;
  height: 100%;
}

/* ---------- Bühne ---------- */
.stage {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}

/* ---------- Smartphone-Rahmen ---------- */
.device {
  position: relative;
  /* Feste iPhone-17-Maße: immer exaktes Seitenverhältnis, nie verzerrt.
     Verkleinerung auf kleinen Screens via transform: scale() (app.js). */
  width: var(--device-w);
  height: var(--device-h);
  flex: 0 0 auto;
  transform-origin: center center;
  background: var(--color-bg-app);
  border-radius: var(--device-radius);
  border: 12px solid #15171a;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Dynamic Island */
.device-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 36px;
  background: #15171a;
  border-radius: 20px;
  z-index: 30;
}

/* ---------- Statusleiste ---------- */
.statusbar {
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  z-index: 20;
}
.statusbar-icons { display: inline-flex; gap: 6px; align-items: center; }
.sb-signal, .sb-wifi, .sb-battery {
  display: inline-block;
  background: var(--color-ink);
  border-radius: 2px;
}
.sb-signal  { width: 17px; height: 11px; clip-path: polygon(0 100%,20% 100%,20% 60%,40% 60%,40% 40%,60% 40%,60% 20%,80% 20%,80% 0,100% 0,100% 100%); }
.sb-wifi    { width: 16px; height: 11px; border-radius: 3px; }
.sb-battery { width: 24px; height: 12px; border-radius: 3px; }

/* ---------- Viewport + Screens ---------- */
.viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.screens {
  position: relative;
  height: 100%;
  z-index: 2;
  /* Container faengt selbst keine Klicks; die Screens (und auf dem Karten-Screen
     nur dessen Bedienelemente) tun das. So bleibt die dahinterliegende Karte bedienbar. */
  pointer-events: none;
  transform-origin: center top;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Page-Sheet: bei geoeffnetem Bottom Sheet faehrt der darunterliegende
   Screen-Stack leicht zurueck (iOS-Card-Praesentation). Der Scrim des Sheets
   (.map-picker) dunkelt ihn zusaetzlich ab. */
/* Dunkler "Fenster"-Grund hinter der zurueckgesetzten Karte, damit die
   Verkleinerung als eigenstaendige Karte sichtbar wird (iOS-Card). */
.device.is-sheet-open .viewport {
  background: #000;
}
.device.is-sheet-open .screens {
  transform: scale(0.92);
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg-app); /* Screen wird zur hellen Karte auf dunklem Grund */
}
/* Statusleiste bleibt beim geoeffneten Sheet hell sichtbar (nicht vom Scrim
   abgedunkelt), wie in iOS: sie liegt ueber dem Overlay. */
.device.is-sheet-open .statusbar {
  position: relative;
  z-index: 25;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: var(--space);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.32s ease, opacity 0.32s ease, visibility 0s linear 0.32s;
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.32s ease, opacity 0.32s ease;
}
.screen.is-prev {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
}

/* Geteilte Wellen-Ebene am unteren Rand, hinter den Screens.
   Das SVG ist breiter als der Viewport (volle 0..3200) und wird
   beim Weiter horizontal verschoben (Reise über das Wasser). */
.waves-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Hoehe = viewBox-Hoehe (718) x Basisverhaeltnis (250/619) -> Wellenform
     unverzerrt; die verlaengerte viewBox-Unterkante fuellt nach unten mit
     Wasserfarbe auf (Pfade reichen bis y=700), daher kein Naht-Streifen. */
  height: 290px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.waves-layer svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3877px; /* sechs Wellenperioden (0..9600) für lange Reise ohne Reset */
  height: 100%;
  transform: translateX(-242px);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.screen-body, .screen-footer { position: relative; z-index: 1; }
.screen-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.screen-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.screen-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--space);
  padding-bottom: 46px; /* hebt Button + Counter höher, mehr Luft zur Unterkante */
}
.screen-footer--center { align-items: center; }

.placeholder-note {
  color: var(--color-ink-soft);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* ---------- Screen-Texte ---------- */
.screen-title {
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--color-primary);
}
.screen-subtitle {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0;
}
.screen-subtitle + .screen-subtitle { margin-top: 14px; }

/* ---------- Screen 1: Willkommen ---------- */
.welcome {
  display: flex;
  flex-direction: column;
}
.welcome-illu {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 4px;
}
.welcome-illu img {
  /* Höhenbasiert: alle Illustrationen erscheinen gleich hoch, unabhängig
     vom Seitenverhältnis (Assets werden auf gleiche Höhe zugeschnitten). */
  height: 258px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.welcome-text {
  flex: 1 1 auto;
  text-align: center;
  padding: 38px 20px 0;
}

/* ---------- Screen 3: Formular / Ort wählen ---------- */
.form-screen { padding-top: 24px; }
.screen-title--left { text-align: left; }
.form-screen .screen-title { font-size: 26px; margin-bottom: 22px; }

/* Eingabefeld */
.field {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-ink);
  background: #eaeef2;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 16px 18px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field::placeholder { color: #9aa6b1; }
.field:focus { background: #fff; border-color: var(--color-primary); }

/* Autocomplete-Dropdown */
.autocomplete { position: relative; }
.autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0; /* kein Innenabstand: eine Ergebniszeile ist exakt so hoch wie das Feld */
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 40, 80, 0.14);
  z-index: 5;
  max-height: 260px;
  overflow: hidden auto; /* Zeilen-Ecken werden am Container-Radius geclippt */
}
.autocomplete-list li {
  height: var(--search-control-h);
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 16px;
  color: var(--color-ink);
  cursor: pointer;
}
.autocomplete-list li:hover {
  background: var(--color-bg-soft);
  color: var(--color-primary);
}

/* Text-Links (Standort erkennen / Auf Karte wählen) */
.form-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s ease;
}
.text-link:hover { color: var(--color-magenta); }
.text-link .link-arrow { width: 16px; height: 16px; flex: 0 0 auto; }

/* größerer Abstand über den Links, wenn sie einem Textblock folgen */
.form-links--spaced { margin-top: 40px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  padding: 16px 20px;
  border-radius: var(--radius-ctl);
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:active { transform: translateY(0); filter: brightness(0.97); }

.btn-primary {
  background: #ffffff;
  color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(0, 40, 80, 0.18);
}
.btn-primary:hover {
  color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 40, 80, 0.26);
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-line);
}
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.btn-text { background: transparent; color: var(--color-magenta); border: none; padding: 8px; }
.btn-text:hover { color: var(--color-primary); }

/* Sekundäre Aktion rechts neben dem primären Button (Konvention).
   Der primäre Button bleibt zentriert; der sekundäre Text-Link liegt absolut
   rechts daneben, vertikal mittig, weiß (steht auf den dunklen Wellen). */
.footer-actions { position: relative; display: inline-flex; }
.btn-secondary {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  padding: 6px 4px;
  transition: opacity 0.15s ease;
}
.btn-secondary:hover { opacity: 0.78; }

/* Pill-Button (kompakt, Breite = Inhalt, mit Pfeil) */
.btn-pill {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 28px;
  font-size: 16px;
  border-radius: 999px;
}
.btn-pill .arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* ---------- Fortschritts-Indikator ---------- */
.progress {
  position: absolute;
  bottom: 44px;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.25s ease, transform 0.25s ease;
}
.progress-dot.is-active {
  background: #ffffff;
  transform: scale(1.18);
}

/* ---------- Entwickler-Navigation ---------- */
.devnav { position: fixed; top: 16px; right: 16px; z-index: 100; }
.devnav-toggle {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
  border-radius: 10px;
  border: 1px solid var(--color-line);
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.devnav-panel {
  position: absolute;
  top: 48px;
  right: 0;
  width: 240px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  padding: 12px;
}
.devnav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.devnav-restart {
  font-size: var(--fs-small);
  border: 1px solid var(--color-line);
  background: var(--color-fill);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
}
.devnav-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.devnav-list li {
  font-size: var(--fs-small);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-ink-soft);
  display: flex;
  gap: 8px;
}
.devnav-list li:hover { background: var(--color-fill); }
.devnav-list li.is-active { background: var(--color-accent); color: var(--color-accent-ink); }
.devnav-list li .num { opacity: 0.6; }
.devnav-hint { font-size: 11px; color: var(--color-ink-soft); margin: 10px 2px 2px; }

/* ---------- Screen 3: Karte ---------- */
/* Der transparente Screen liegt ueber der Karte. Damit die Karte zieh- und
   zoombar bleibt, faengt der Screen selbst keine Klicks; nur die Bedienelemente. */
.screen--map { padding: 0; pointer-events: none; }
.screen--map .map-header,
.screen--map .map-searchbar,
.screen--map .radius-panel,
.screen--map .map-footer .btn { pointer-events: auto; }
.map-canvas {
  position: absolute;
  /* Nach oben verschoben: Container-Mitte (= map.getCenter, der Auswahlpunkt)
     liegt damit in der optischen Mitte zwischen Header (~58px) und Wellen (250px).
     Verschiebung = Wellenhoehe - Headerhoehe = 250 - 58 = 192px. */
  top: -192px;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: #e8eef2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.map-canvas.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease;
}
/* Leaflet-Attribution dezent halten (Karte liegt jetzt im Viewport, nicht im Screen) */
.map-canvas .leaflet-control-attribution {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.7);
}

/* Weißer Titel-Header mit Abgrenzung, liegt über der Karte */
.map-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  background: var(--color-bg-app);
  padding: 36px var(--space) 14px;
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 4px 14px rgba(0, 40, 80, 0.06);
}
.map-header .screen-title { margin: 0; font-size: 22px; }

/* Suchleiste: schwebt über der Karte, direkt unter dem Header */
.map-searchbar {
  position: absolute;
  top: 90px; left: var(--space); right: var(--space);
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.map-searchbar .autocomplete { flex: 1 1 auto; }
.map-searchbar .field {
  box-shadow: 0 6px 18px rgba(0, 40, 80, 0.14);
  background: #fff;
  height: var(--search-control-h);
  padding-top: 0;
  padding-bottom: 0;
}

/* Quadratischer Standort-Button neben dem Suchfeld (teilt die Höhe mit Feld + Dropdown) */
.locate-btn {
  flex: 0 0 auto;
  width: var(--search-control-h);
  height: var(--search-control-h);
  border: none;
  border-radius: var(--radius-app);
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 40, 80, 0.14);
  transition: color 0.15s ease, transform 0.15s ease;
}
.locate-btn svg { width: 24px; height: 24px; }
.locate-btn:hover { color: var(--color-primary-dark); transform: translateY(-1px); }
.locate-btn.is-loading { color: var(--color-ink-soft); }
.locate-btn.is-loading svg { animation: locate-spin 0.9s linear infinite; }
@keyframes locate-spin { to { transform: rotate(360deg); } }
/* Pin liegt auf dem eigenen Standort: Icon ausgefuellt */
.locate-btn.is-at-location { color: #007aff; }
.locate-btn.is-at-location svg circle { fill: currentColor; }

/* Fester Pin in der Mitte des Kartenbereichs */
.map-pin {
  position: absolute;
  top: calc(50% - 96px); left: 50%;
  z-index: 2;
  transform: translate(-50%, -100%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-pin-icon {
  width: 30px; height: 45px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}

/* Status-Label am Pin */
.map-status {
  margin-bottom: 8px;
  padding: 6px 12px;
  background: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 40, 80, 0.18);
}
.map-status:empty { display: none; }
.map-status.is-unavailable { color: var(--color-ink-soft); }

/* Footer-Button über den Wellen, auf gleicher Höhe wie die übrigen Screens
   (20px Screen-Padding + 46px Footer-Padding wie im Standard-Footer). */
.map-footer {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  z-index: 3;
  background: transparent;
}

/* Deaktivierter Weiter-Button */
.btn-primary:disabled,
.btn-primary[disabled] {
  background: rgba(255, 255, 255, 0.55);
  color: var(--color-ink-soft);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Karten-Geste-Umschalter in der Devnav */
.devnav-modes { margin-bottom: 10px; }
.devnav-modes-label { display: block; font-size: 11px; color: var(--color-ink-soft); margin: 0 2px 6px; }
.devnav-modes-btns { display: flex; gap: 6px; }
.devnav-mode {
  flex: 1 1 0;
  font-size: var(--fs-small);
  padding: 6px 8px;
  border: 1px solid var(--color-line);
  background: var(--color-fill);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-ink-soft);
}
.devnav-mode.is-active { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.devnav-mode.is-disabled { opacity: 0.4; } /* Dorffest ohne Ort: wirkungslos */

/* Simulierter iOS-Standort-Dialog (liegt ueber dem App-Inhalt im Geraet) */
.geo-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(0, 0, 0, 0.35);
}
.geo-modal[hidden] { display: none; }
.geo-modal-box {
  width: 272px;
  background: rgba(248, 248, 248, 0.96);
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
}
.geo-modal-text { padding: 18px 16px 14px; }
.geo-modal-text strong { display: block; font-size: 15px; color: var(--color-ink); margin-bottom: 6px; }
.geo-modal-text p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--color-ink-soft); }
.geo-modal-actions { display: flex; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.geo-modal-btn {
  flex: 1 1 0;
  padding: 11px 6px;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 15px;
  color: #007aff;
  cursor: pointer;
}
.geo-modal-btn + .geo-modal-btn { border-left: 1px solid rgba(0, 0, 0, 0.12); }
.geo-modal-btn--primary { font-weight: 700; }

/* Rosa Pin als Karten-Marker (Modus B). Leaflet-Default-Kasten ueberschreiben. */
.map-pin-marker { background: transparent; border: none; }
.map-pin-marker-inner { position: relative; width: 30px; height: 45px; }
.map-pin-marker-inner .map-pin-icon {
  width: 30px; height: 45px; display: block;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}
/* Label sitzt mittig ueber dem Marker-Pin (nutzt die bestehende .map-status-Pille). */
.map-pin-marker-inner .map-status {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

/* ---------- Screen 5: Umkreis-Karte ---------- */
/* Slider-Panel: schwebt wie die Suchleiste direkt unter dem Header. */
.radius-panel {
  position: absolute;
  top: 90px; left: var(--space); right: var(--space);
  z-index: 3;
  background: #fff;
  border-radius: var(--radius-app);
  box-shadow: 0 6px 18px rgba(0, 40, 80, 0.14);
  padding: 13px 16px 18px;
}
.radius-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.radius-label { font-weight: 700; color: var(--color-primary); font-size: 15px; }
.radius-value { font-weight: 600; color: var(--color-ink); font-size: 15px; }
.radius-head-left { display: inline-flex; align-items: center; gap: 6px; }
/* ⓘ am Umkreis-Slider: oeffnet das Erklaerungs-Sheet. */
.radius-info {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; padding: 0;
  border: none; background: none;
  color: var(--color-primary); cursor: pointer; opacity: 0.75;
}
.radius-info:hover { opacity: 1; color: var(--color-magenta); }

/* Slider: gefüllter Track bis zum Daumen über --fill (in % aus JS, Default 5%). */
.radius-slider {
  --fill: 5%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) left center no-repeat,
    var(--color-line);
  background-size: var(--fill) 100%;
  cursor: pointer;
  /* Platz rechts für die abgetrennte Schluss-Raste */
  margin-right: 30px;
  position: relative;
}
.radius-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 40, 80, 0.3);
  cursor: pointer;
}
.radius-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 40, 80, 0.3);
  cursor: pointer;
}

/* Abgetrennte Schluss-Raste "Ganz SH": kleines Feld rechts neben dem Track,
   optisch durch eine Lücke (margin-right am Slider) und einen eigenen Punkt
   getrennt. Der Slider-Wert 101 rastet hier ein (siehe radius.js). */
.radius-track-wrap { position: relative; }
.radius-snap {
  position: absolute;
  top: 50%; right: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-line);
  background: var(--color-fill);
  transform: translateY(-50%);
  pointer-events: none;
}
.radius-snap.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

/* ============================================================
   Homescreen (Startseite / Tab 1) - eigene App-Ansicht
   Klassen mit Prefix "home-", damit nichts mit dem Wizard kollidiert.
   Keine Wellen, kein Punkte-Counter (per app.js ausgeblendet).
   ============================================================ */

/* Ganze Ansicht fuellt den Viewport, kein Screen-Padding, weisser Grund. */
.screen--home {
  padding: 0;
  background: var(--color-bg-app);
}

/* Statusleiste auf dem Homescreen blau + weisse Icons (Header laeuft bis oben). */
.device.is-app-view .statusbar { background: var(--color-primary); color: #fff; }
.device.is-app-view .sb-signal,
.device.is-app-view .sb-wifi,
.device.is-app-view .sb-battery { background: #fff; }

/* ---------- Header ---------- */
.home-header {
  flex: 0 0 auto;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 12px;
}
.home-icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none; border: none; padding: 0;
  color: #fff; cursor: pointer;
}
/* Ort + Umkreis mittig im Header, antippbar (ersetzt die fruehere Wortmarke
   und die separate Scope-Leiste). Chevron signalisiert "zum Aendern tippen". */
.home-loc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 78%;
  padding: 3px 4px;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--font-head);
  cursor: pointer;
}
.home-loc-place {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-loc-radius {
  font-weight: 400;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.home-loc-caret { flex: 0 0 auto; color: rgba(255, 255, 255, 0.92); margin-left: -1px; }

/* ---------- Scrollbarer Body ---------- */
.home-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  background: #f4f6f8; /* fast weisser Grund; die weissen Karten heben sich per Schatten ab */
}
.home-scroll-pad { height: 18px; }

/* ---------- Bilderslider ---------- */
.home-slider {
  position: relative;
  width: 100%;
  height: 196px;
  overflow: hidden;
  background: #cbd9e6;
}
.home-slider svg { display: block; width: 100%; height: 100%; }
.home-slider-pause {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.home-slider-dots {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  display: flex; gap: 7px;
}
.home-slider-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.home-slider-dots span.on { background: #fff; width: 20px; border-radius: 4px; }

/* ---------- Widget-Leiste ---------- */
.home-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 16px 6px;
  margin: 14px 12px 0;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 40, 80, 0.06);
}
.home-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Widgets mit/ohne Wert bleiben vertikal ausgewogen */
  gap: 5px;
  padding: 4px 2px;
  background: none; border: none;
  font-family: var(--font-sans);
  cursor: pointer;
}
.home-widget-icon { color: var(--color-primary); height: 26px; display: grid; place-items: center; }
.home-widget-val {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.home-widget-label { font-size: 11.5px; color: var(--color-ink-soft); text-align: center; line-height: 1.2; }

/* ---------- Störer ---------- */
.home-stoerer-wrap { margin: 14px 12px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.home-stoerer-wrap.is-empty { display: none; } /* kein aktiver Störer: Bereich weg */
.home-stoerer.is-off { display: none; } /* einzelner Störer aus (state.stoerer) */
.home-stoerer {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 40, 80, 0.06);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.home-stoerer-stripe { width: 5px; flex: 0 0 auto; background: var(--color-gold); }
.home-stoerer-img {
  width: 84px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ffd873, #f0a52e);
  color: #7a5200;
}
.home-stoerer-body {
  flex: 1 1 auto; /* fuellt die Zeile, damit der Chevron immer rechts sitzt (unabh. von der Textlaenge) */
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  min-width: 0;
}
.home-stoerer-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: #a9720a;
}
.home-stoerer-title { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--color-ink); }
.home-stoerer-sub { font-size: 12.5px; color: var(--color-ink-soft); }
/* Chevron wie bei den Listeneintraegen (.home-chev): 20px-Icon, rechte Kante
   auf 28px Innenabstand (Kartenrand 12px + 16px), damit Stoerer und Eintraege
   auf dem Homescreen dieselbe Chevron-Linie zeigen. */
.home-stoerer-arrow { display: grid; place-items: center; padding-right: 16px; color: var(--color-ink-soft); }

/* Warn-Variante (Unwetter, überregional): warmer Warnton statt Gold. */
.home-stoerer--warning .home-stoerer-stripe { background: #e4572e; }
.home-stoerer--warning .home-stoerer-img {
  background: linear-gradient(135deg, #ff8a5b, #e4572e);
  color: #fff;
}
.home-stoerer--warning .home-stoerer-eyebrow { color: #b23a10; }

/* ---------- Sichtbarkeit nach Ort-Zustand (Kein-Ort-Modus) ---------- */
/* only-ort: nur mit gewähltem Ort. only-region: nur ohne Ort. Es wird jeweils
   nur die falsche Variante versteckt, damit die sichtbare ihren natürlichen
   Anzeigetyp (grid/section/inline) behält. */
.screen--home:not(.is-no-ort) .only-region { display: none; }
.screen--home.is-no-ort .only-ort { display: none; }

/* Region-Widgets (kein Ort): drei statt vier Spalten. */
.home-widgets--region { grid-template-columns: repeat(3, 1fr); }

/* ---------- Mein Ort: Kachelraster (weiße Karten, blaues Icon) ---------- */
.meinort-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* gleiche Spalten, kein Überlauf */
  gap: 12px;
  padding: 16px 12px 0;
}
.meinort-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 98px;
  padding: 14px 8px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 40, 80, 0.06);
  font-family: var(--font-sans);
  cursor: pointer;
}
.meinort-tile:active { transform: translateY(1px); }
.meinort-tile-icon { color: var(--color-primary); display: grid; place-items: center; height: 26px; }
.meinort-tile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto; /* lange Wörter (z.B. Veranstaltungen) sauber trennen, lang=de */
}

/* Leerzustand ohne Ort */
.meinort-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 56px 32px 24px;
}
.meinort-empty-icon { color: var(--color-primary); opacity: 0.85; }
.meinort-empty-text {
  font-size: 15px; line-height: 1.5;
  color: var(--color-ink-soft);
  margin: 0; max-width: 250px;
}

/* ---------- Inhalts-Sektionen (Nachrichten, Veranstaltungen) als Karten ---------- */
.home-section {
  margin: 14px 12px 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden; /* klippt die randlosen Trennlinien an den runden Ecken */
  box-shadow: 0 1px 2px rgba(6, 40, 66, 0.05), 0 8px 22px rgba(6, 40, 66, 0.07);
}
/* Titel-Zone: kompakt, per Linie abgetrennt, komplett tappbar -> Detailliste.
   Hierarchie exakt nach Mail-App-Referenz: nacktes Stroke-Icon (kein Chip),
   Titel 17px Semibold in der Fliesstext-Schrift, nicht in Ubuntu. */
.home-section-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-section-head:active { background: #f2f6f9; }
.home-section-icon { flex: 0 0 auto; display: inline-flex; }
.home-section-icon svg { width: 20px; height: 20px; }
.home-section-head h3 {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14.5px; /* 11pt */
  margin: 0;
  color: var(--color-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Eintraege: kleine Quellen-Zeile mit Logo-Badge (versal), fetter Titel
   (max. 2 Zeilen), einzeilige Vorschau, Zeitpunkt grau an der rechten
   Kante. Groessen als pt-Vorgabe: Quelle 7pt, Titel 12pt, Vorschau 11pt. */
.home-item {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: none; border: none;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-item:active { background: #f6f9fb; }
.home-item .home-chev { align-self: center; flex: 0 0 auto; color: var(--color-ink-soft); display: inline-flex; }
.home-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.home-item-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.home-item-src { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px; }
.home-item-src .qf-logo { min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; font-size: 6.5px; }
.home-item-src-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; /* 8pt */ font-weight: 400; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--color-ink-soft);
}
.home-item-when {
  flex: 0 0 auto; font-size: 12px; color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.home-item-title {
  font-size: 16px; /* 12pt */ font-weight: 700; color: var(--color-ink); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-item-preview {
  margin-top: 4px;
  font-size: 14.5px; /* 11pt */ font-weight: 400; color: var(--color-ink-soft); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Datums-Block fuer Veranstaltungen/Events: grosse Tageszahl (fett), darunter
   die Monatsabkuerzung klein und regular. Feste Breite haelt die Titel buendig. */
.home-item--date { align-items: center; }
.home-item-date {
  flex: 0 0 auto; width: 42px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.home-item-date-day {
  font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--color-primary); font-variant-numeric: tabular-nums;
}
.home-item-date-mon {
  margin-top: 3px;
  font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--color-ink-soft);
}

/* Zurueckhaltender Text-Link (kein Fill), Trennlinie darueber wie in der Mail-App. */
.home-btn-all {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  background: none;
  color: var(--color-primary);
  border: none;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-sans);
  font-size: 14.5px; /* 11pt */
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.home-btn-all:active { background: #f2f6f9; }

/* ---------- Tab-Bar ---------- */
.home-tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid var(--color-line);
  padding: 8px 4px 18px;
}
.home-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.home-tab.is-active { color: var(--color-primary); font-weight: 700; }

/* ============================================================
   Overlay "Mein Ort und Umkreis" (Ort- + Umkreiswahl vom Homescreen)
   Kombiniert Suche (Screen 3) und Umkreis-Slider (Screen 5) in einer
   Karte. Faehrt von unten ein. Keine Wellen, kein Counter.
   ============================================================ */
.map-picker {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(10, 34, 53, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.map-picker.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease;
}
.picker-sheet {
  position: absolute;
  top: 14px;               /* schmaler Peek: die zurueckgesetzte Karte lugt oben hervor */
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-app);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.map-picker.is-open .picker-sheet {
  transform: translateY(0);
}
.sheet-handle {
  flex: 0 0 auto;
  width: 40px; height: 4px;
  margin: 8px auto 2px;
  border-radius: 2px;
  background: var(--color-line);
}

/* Kopf: Abbrechen links, Titel exakt mittig (Grid mit balancierten 1fr-Seiten). */
.picker-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-bg-app);
  border-bottom: 1px solid var(--color-line);
}
.picker-cancel {
  justify-self: start;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: none; padding: 0;
  color: var(--color-primary);
  cursor: pointer;
}
.picker-cancel:hover { color: var(--color-primary-dark); }
.picker-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-primary);
}

/* Koerper: Karte als Hintergrund, Bedienelemente schweben oben drueber. */
.picker-body { flex: 1 1 auto; position: relative; overflow: hidden; }
.picker-map { position: absolute; inset: 0; z-index: 0; background: #e8eef2; }
.picker-map .leaflet-control-attribution { font-size: 9px; background: rgba(255, 255, 255, 0.7); }

.picker-controls {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  padding: 12px var(--space) 0;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; /* Luecken lassen Klicks zur Karte durch */
}
.picker-controls > * { pointer-events: auto; }

/* Suchzeile: Feld + Standort-Button (gleiche Optik wie im Wizard). */
.picker-searchbar { display: flex; gap: 10px; align-items: stretch; }
.picker-searchbar .autocomplete { flex: 1 1 auto; }
.picker-searchbar .field {
  box-shadow: 0 6px 18px rgba(0, 40, 80, 0.14);
  background: #fff;
  height: var(--search-control-h);
  padding-top: 0;
  padding-bottom: 0;
}

/* Umkreis-Panel schwebt direkt unter der Suchzeile (statt fix positioniert). */
.picker-controls .radius-panel { position: static; }

/* Fuss: vollbreiter Uebernehmen-Button (wie die "Alle anzeigen"-Buttons). */
.picker-footer {
  flex: 0 0 auto;
  padding: 12px 16px 16px;
  background: var(--color-bg-app);
  border-top: 1px solid var(--color-line);
}
.picker-submit {
  display: block;
  width: 100%;
  padding: 15px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-ctl);
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.picker-submit:hover { background: var(--color-primary-dark); }
.picker-submit:disabled { background: var(--color-line); color: #f2f6f9; cursor: default; }
/* Sekundärer Weg im Picker: ganze Region ohne Ortsfokus. */
.picker-noort {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
}
.picker-noort:hover { color: var(--color-magenta); }

/* Standort-Button vorerst ausgeblendet (Logik in picker.js bleibt erhalten,
   damit er sich spaeter ohne Neubau reaktivieren laesst). */
.picker-searchbar .locate-btn { display: none; }

/* Sheet-Modi: welche Bedienelemente sichtbar sind. */
.map-picker--ort .radius-panel { display: none; }
.map-picker--umkreis .picker-searchbar { display: none; }
.map-picker--umkreis .picker-noort { display: none; } /* nur bei Ortswahl sinnvoll */

/* ============================================================
   Unterseiten "Nachrichten" / "Veranstaltungen" (Listen-Overlay)
   und gemeinsames Filter-Sheet (nachgebaut nach der echten App).
   ============================================================ */
/* Section-Ueberschrift auf dem Home ist antippbar (oeffnet die Liste). */
.home-section-head[data-action] { cursor: pointer; }

.list-page {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  background: var(--color-bg-app);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.list-page.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease;
}
/* Blauer Header (durchgehend mit der Statusleiste), Zurueck-Pfeil + Titel. */
.list-page-header {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--color-primary); color: #fff;
  padding: 10px 12px 12px;
}
.list-page-back {
  justify-self: start;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: none; padding: 0;
  color: #fff; cursor: pointer;
}
.list-page-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #fff; }
/* Filter (Sheet-Variante): kompakter Text-Button rechts in der Scope-Zeile. */
.list-page-filter {
  display: inline-flex; align-items: center; gap: 8px;
  width: auto; padding: 0;
  background: none; border: none;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--color-ink);
  cursor: pointer;
}
.list-page-filter svg { color: var(--color-ink); flex: 0 0 auto; }
.list-page-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px 20px;
  background: #f4f6f8; /* fast weiss, damit die Cards per Schatten schweben */
}

/* Featured-Card exakt nach Fichtel-News-Referenz: Quelle klein versal mit
   Sperrung, grosser fetter Titel, fast schwarzer Auszug, graue Fusszeile
   mit farbigem Icon. Grosszuegiges Karten-Padding. */
.news-card {
  display: block; width: 100%; text-align: left;
  background: #fff; border: none; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(6, 40, 66, 0.05), 0 8px 22px rgba(6, 40, 66, 0.07);
  padding: 18px; margin-bottom: 12px;
  font-family: var(--font-sans); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease;
}
.news-card:active { transform: scale(0.992); }
.news-card-source { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.news-card-source .qf-logo { min-width: 24px; height: 24px; border-radius: 12px; font-size: 10.5px; }
.news-card-source-name {
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--color-ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-card-title {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 19px;
  line-height: 1.28; color: var(--color-ink);
}
.news-card-excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: #333e48;
}
.news-card-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 13px; color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.news-card-foot svg { color: var(--color-primary); opacity: 0.9; flex: 0 0 auto; }

/* Abtrennung + kompakte Liste der aelteren/vergangenen Eintraege. */
.list-older-label {
  margin: 22px 6px 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--color-ink-soft);
}
.list-older-items {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(6, 40, 66, 0.05), 0 8px 22px rgba(6, 40, 66, 0.07);
}

/* ---------- Filter-Sheet ---------- */
.filter-sheet {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(0, 0, 0, 0.35);
  visibility: hidden; opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.filter-sheet.is-open { visibility: visible; opacity: 1; transition: opacity 0.25s ease; }
.filter-sheet-panel {
  background: #fff;
  border-radius: 20px 20px 0 0;
  height: 92%;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.filter-sheet.is-open .filter-sheet-panel { transform: translateY(0); }
.filter-sheet-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-line);
}
.filter-sheet-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--color-ink); }
.filter-sheet-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: none; padding: 0;
  color: var(--color-ink); cursor: pointer;
}
.filter-sheet-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 24px;
}
.filter-group { display: flex; flex-direction: column; gap: 10px; }
.filter-label { font-size: 15px; color: var(--color-ink); }
.filter-sub { font-size: 15px; font-weight: 700; color: var(--color-ink); }
.filter-select,
.filter-date {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 15px 16px;
  color: #9aa6b1; font-size: 16px;
  background: #fff;
}
.filter-select svg, .filter-date svg { color: var(--color-primary); flex: 0 0 auto; }
.filter-daterow { display: flex; gap: 12px; }
.filter-date { flex: 1 1 0; }
.filter-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.filter-toggle-row > span { font-size: 16px; color: var(--color-ink); }
/* iOS-Toggle aus einer Checkbox (funktioniert nativ). */
.filter-toggle {
  position: relative; flex: 0 0 auto;
  width: 51px; height: 31px;
  -webkit-appearance: none; appearance: none;
  background: #e3e8ed; border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.filter-toggle::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.filter-toggle:checked { background: var(--color-primary); }
.filter-toggle:checked::after { transform: translateX(20px); }
.filter-sheet-foot {
  flex: 0 0 auto;
  display: flex; gap: 12px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--color-line);
}
.filter-btn-reset, .filter-btn-apply {
  flex: 1 1 0;
  padding: 15px;
  border-radius: var(--radius-ctl);
  font-family: var(--font-sans); font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.filter-btn-reset { background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); }
.filter-btn-apply { background: var(--color-primary); color: #fff; border: none; }

/* ---------- Info-Sheet (Erklärung, legt sich über den Picker) ----------
   Bottom-Sheet mit Inhaltshöhe (nicht bildschirmfüllend). z-index über dem
   Picker (20). Wiederverwendbares Muster für kurze Erklärungen. */
.info-sheet {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(0, 0, 0, 0.4);
  visibility: hidden; opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.info-sheet.is-open { visibility: visible; opacity: 1; transition: opacity 0.25s ease; }
.info-sheet-panel {
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 88%;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.info-sheet.is-open .info-sheet-panel { transform: translateY(0); }
.info-sheet-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-line);
}
.info-sheet-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--color-primary); }
.info-sheet-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: none; padding: 0;
  color: var(--color-ink); cursor: pointer;
}
.info-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 26px; }
.info-sheet-illu { display: grid; place-items: center; margin-bottom: 14px; }
.info-sheet-illu img { height: 150px; width: auto; }
.info-sheet-body p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.5; color: var(--color-ink); }
.info-sheet-body p:last-child { margin-bottom: 0; }

/* ===================== Karte (Tab 3) ===================== */
.karte-title { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #fff; }
.karte-body { position: relative; flex: 1 1 auto; overflow: hidden; }
.karte-map { position: absolute; inset: 0; background: #e8eef2; z-index: 0; }

/* Runder Standort-Button oben rechts */
.karte-locate {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: none;
  display: grid; place-items: center;
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
/* Filter-FAB unten rechts (Markenblau) */
.karte-fab {
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--color-primary); border: none;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

/* POI-Marker (Kategorie-Kreis mit weissem Icon) */
.poi-marker-dot {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.poi-marker-dot svg { width: 18px; height: 18px; }

/* Cluster (Blau, Groessenstufen) */
/* Inneres Element bildet den Kreis (das aeussere .poi-cluster ist ein
   .leaflet-marker-icon und bleibt display:block), so zentriert die Zahl sauber. */
.poi-cluster-dot {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; box-sizing: border-box; line-height: 1;
  border-radius: 50%; border: 2px solid #fff;
  color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}
.poi-cluster-dot--s { background: #2f7fd1; }
.poi-cluster-dot--m { background: #005596; }
.poi-cluster-dot--l { background: #00406f; }

/* POI-Detail-Sheet: Bottom-Sheet, kein Dimmen im Halb-Zustand */
.poi-sheet {
  position: absolute; inset: 0; z-index: 25;
  pointer-events: none; /* Halb: Karte darueber bleibt bedienbar */
  visibility: hidden; background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease, visibility 0s linear 0.25s;
}
.poi-sheet.is-open { visibility: visible; transition: background 0.25s ease; }
.poi-sheet.is-full { pointer-events: auto; background: rgba(0, 0, 0, 0.35); }
.poi-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  pointer-events: auto;
  background: #fff; border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
  height: calc(100% - 14px); /* voll = fast Fullscreen, schmaler Peek oben wie der Picker */
  transform: translateY(100%); /* zu; Halb/Voll steuert karte.js per translateY */
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex; flex-direction: column;
  /* Wisch-/Scroll-Gesten steuert karte.js manuell (Sheet ziehen vs. Inhalt scrollen). */
  touch-action: none;
}
.poi-sheet-handle {
  flex: 0 0 auto; display: grid; place-items: center;
  padding: 12px 0 8px; background: none; border: none; cursor: grab;
  touch-action: none; /* vertikale Wisch-Geste geht ans Sheet, nicht an den Scroll */
}
.poi-sheet-handle span { width: 40px; height: 5px; border-radius: 3px; background: #cfd8e0; }
/* Halb-Zustand ist Vorschau (nicht scrollbar), erst voll wird scrollbar. */
.poi-sheet-scroll { flex: 1 1 auto; overflow-y: hidden; }
.poi-sheet.is-full .poi-sheet-scroll { overflow-y: auto; }

.poi-img { position: relative; height: 150px; display: grid; place-items: center; }
.poi-img-icon svg { width: 54px; height: 54px; opacity: 0.9; }
.poi-detail { padding: 16px 20px 28px; }
.poi-title { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--color-ink); margin: 0 0 6px; }
.poi-hours { font-size: 14px; color: var(--color-ink-soft); margin: 0 0 12px; }
.poi-cat-chip {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--color-ink);
  background: var(--color-fill, #eef2f6); padding: 6px 12px; border-radius: 8px;
}
.poi-fav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--color-gold); margin-top: 14px; }
.poi-fav span { font-size: 15px; color: var(--color-ink-soft); }
.poi-sep { height: 1px; background: var(--color-line); margin: 16px 0; }
.poi-kontakt { display: flex; align-items: center; justify-content: space-between; }
.poi-kontakt h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; margin: 0; color: var(--color-ink); }
.poi-kontakt-icons { display: flex; gap: 10px; }
.poi-round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line); display: grid; place-items: center; color: var(--color-ink); }
.poi-desc { font-size: 15px; line-height: 1.55; color: var(--color-ink); margin: 0 0 12px; }
.poi-tags { font-size: 14px; color: var(--color-primary); font-weight: 600; margin: 0; }

/* Kategorie-Filter-Sheet */
.poi-filter {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(0, 0, 0, 0.35);
  visibility: hidden; opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.poi-filter.is-open { visibility: visible; opacity: 1; transition: opacity 0.25s ease; }
.poi-filter-panel {
  background: #fff; border-radius: 20px 20px 0 0;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  max-height: 80%; display: flex; flex-direction: column;
}
.poi-filter.is-open .poi-filter-panel { transform: translateY(0); }
.poi-filter-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--color-line); }
.poi-filter-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--color-primary); }
.poi-filter-close { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: none; color: var(--color-ink); cursor: pointer; }
.poi-filter-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px 22px; }
.poi-filter-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-line); cursor: pointer; }
.poi-filter-row:last-child { border-bottom: none; }
.poi-filter-dot { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-line); }
.poi-filter-name { flex: 1 1 auto; font-size: 15px; color: var(--color-ink); }

/* ===================== Mehr (Tab 4) ===================== */
/* Zurueck-Pfeil auf dieselbe X-Position wie auf der Listen-Seite (.list-page-back):
   gleiches Header-Padding links (12px) und dieselbe Button-Box (34px). */
.mehr-header { padding-left: 12px; }
.mehr-back {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin: -2px 0; /* -2px haelt die Header-Hoehe wie die anderen Tabs */
  background: none; border: none; padding: 0; color: #fff; cursor: pointer;
}
.screen--mehr .home-scroll { background: #fff; }
.mehr-body { min-height: 100%; }

.mehr-list { display: flex; flex-direction: column; }
.mehr-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 18px 20px;
  background: none; border: none; border-bottom: 1px solid var(--color-line);
  font-family: var(--font-sans); font-size: 17px; color: var(--color-ink);
  text-align: left; cursor: pointer;
}
.mehr-row > span:first-child { flex: 1 1 auto; }
.mehr-chev { color: var(--color-ink-soft); display: inline-flex; flex: 0 0 auto; }
.mehr-version { text-align: center; color: var(--color-ink-soft); font-size: 15px; margin: 26px 0 0; }

.mehr-text { padding: 20px; }
.mehr-text p { font-size: 15px; line-height: 1.55; color: var(--color-ink); margin: 0 0 14px; }

/* Feedback-Formular */
.mehr-form { padding: 20px 20px 28px; display: flex; flex-direction: column; }
.mehr-label { font-size: 16px; font-weight: 700; color: var(--color-ink); margin: 0 0 8px; }
.mehr-label:not(:first-child) { margin-top: 20px; }
.mehr-input {
  width: 100%; box-sizing: border-box;
  padding: 14px 16px; border: 1px solid var(--color-line); border-radius: 12px;
  background: #fff; font-family: var(--font-sans); font-size: 16px; color: var(--color-ink);
}
.mehr-input:focus { outline: none; border-color: var(--color-primary); }
.mehr-textarea { min-height: 120px; resize: vertical; }
.mehr-consent { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 0; font-size: 15px; color: var(--color-ink); cursor: pointer; }
.mehr-consent input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--color-primary); }
.mehr-submit {
  width: 100%; margin-top: 20px; padding: 15px;
  background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-ctl);
  font-family: var(--font-sans); font-size: 16px; font-weight: 700; cursor: pointer;
}
.mehr-hint { font-size: 14px; color: var(--color-ink-soft); margin: 14px 0 0; }

/* ---------- Datenquellen-Seite (App-Einstellungen) ---------- */
/* Standort/Umkreis-Steuerung oben (unter dem Header) */
.dq-loc {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 18px; background: var(--color-fill, #eef2f6);
  border: none; border-bottom: 1px solid var(--color-line);
  font-family: var(--font-sans); text-align: left; cursor: pointer;
}
.dq-loc-pin { flex: 0 0 auto; color: var(--color-primary); display: grid; place-items: center; }
.dq-loc-pin svg { width: 22px; height: 22px; }
.dq-loc-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dq-loc-text strong { font-size: 16px; color: var(--color-ink); }
.dq-loc-text span { font-size: 13px; color: var(--color-ink-soft); }
.dq-loc .mehr-chev { color: var(--color-ink-soft); flex: 0 0 auto; }

/* Kategorie-Überschrift + kompakte Quellen-Zeilen (mehr passen auf eine Seite) */
.dq-cat {
  padding: 26px 18px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--color-ink-soft);
}
.dq-cat:first-child { padding-top: 12px; } /* erste Kategorie dichter am Standort-Feld */
.dq-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 18px; border-bottom: 1px solid var(--color-line); cursor: pointer;
}
/* Letzter Eintrag einer Kategorie (vor der naechsten Kategorie) und ganz unten: keine Trennlinie. */
.dq-row:last-child,
.dq-row:has(+ .dq-cat) { border-bottom: none; }
.dq-name { flex: 1 1 auto; font-size: 15px; color: var(--color-ink); }
.dq-logo {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  color: #fff; font-size: 11px; font-weight: 700;
}
/* Kompakter Toggle fuer schmale Zeilen */
.filter-toggle--sm { width: 42px; height: 25px; }
.filter-toggle--sm::after { width: 21px; height: 21px; }
.filter-toggle--sm:checked::after { transform: translateX(17px); }

/* Ladeanimation beim Standortwechsel */
.dq-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 24px; color: var(--color-ink-soft); font-size: 14px; }
.dq-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--color-line); border-top-color: var(--color-primary); animation: dq-spin 0.8s linear infinite; }
@keyframes dq-spin { to { transform: rotate(360deg); } }

/* ---------- News-Filter: Datenquellenauswahl ---------- */
.filter-select { width: 100%; font-family: var(--font-sans); font-size: 16px; cursor: pointer; }
.filter-sources {
  margin-top: 8px; display: none; /* erst sichtbar, wenn das Dropdown geoeffnet wird */
  border: 1px solid var(--color-line); border-radius: 12px;
  max-height: 216px; overflow-y: auto;
}
.filter-sources.is-open { display: flex; flex-direction: column; } /* kompaktes Dropdown mit Scroll */
.filter-src {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--color-line);
  font-size: 15px; color: var(--color-ink); cursor: pointer;
}
.filter-src:last-child { border-bottom: none; }
.filter-src-check { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--color-primary); cursor: pointer; }
.list-empty { text-align: center; color: var(--color-ink-soft); font-size: 15px; padding: 44px 24px; }

/* Scope-Zeile auf der Detailseite: aus welchem Ort + Umkreis die Inhalte kommen.
   Scope (links) und Filter (rechts) teilen sich eine Zeile; die Trennlinie sitzt
   am Wrapper. */
.list-page-scoperow {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 12px 18px; gap: 8px 12px;
  border-bottom: 1px solid var(--color-line);
}
.list-page-scope {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--color-ink-soft);
}
.list-page-scope svg { width: 16px; height: 16px; color: var(--color-primary); flex: 0 0 auto; }
.list-page-scope:empty { display: none; }

/* ---------- Schnellfilter-Varianten (Detailseite) ---------- */
.list-page-filterbar { flex: 0 0 auto; margin-left: auto; }
/* Dropdown/Chips brauchen die volle Breite und stehen unter dem Scope. */
.list-page-filterbar.is-wide { flex-basis: 100%; margin-left: 0; }

/* Mini-Logo je Quelle (Platzhalter-Kürzel) */
.qf-logo {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px;
  color: #fff; font-size: 10.5px; font-weight: 700;
}
/* Echtes Wappen/Logo (source-logos/): unbeschnitten, Hoehe je Kontext.
   Breite Wortmarken (NDR, shz) duerfen breiter laufen; nur in den
   Filterlisten bleibt das Logo quadratisch, damit die Namen fluchten. */
.qf-logo-img { flex: 0 0 auto; height: 24px; width: auto; max-width: 44px; object-fit: contain; }
.qf-dd-row .qf-logo-img, .qf-chip .qf-logo-img { width: 24px; max-width: 24px; }
.home-item-src .qf-logo-img { height: 16px; max-width: 34px; }
.news-card-source .qf-logo-img { height: 26px; max-width: 44px; }

/* Variante 1: Dropdown im Kopf */
.qf-dd { padding: 12px 16px; border-bottom: 1px solid var(--color-line); }
.qf-dd-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 12px;
  background: #fff; font-family: var(--font-sans); font-size: 16px; color: var(--color-ink); cursor: pointer;
}
.qf-dd-btn .qf-chev { color: var(--color-primary); transition: transform 0.2s ease; }
.qf-dd-btn.is-open .qf-chev { transform: rotate(180deg); }
.qf-dd-menu {
  display: none; margin-top: 8px;
  border: 1px solid var(--color-line); border-radius: 12px; max-height: 260px; overflow-y: auto;
}
.qf-dd-menu.is-open { display: block; }
.qf-dd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--color-line);
  font-size: 15px; color: var(--color-ink); cursor: pointer;
}
.qf-dd-row:last-child { border-bottom: none; }
.qf-dd-row > span:not(.qf-logo) { flex: 1 1 auto; }
.qf-src-check { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--color-primary); cursor: pointer; }

/* Variante 2: Chip-Leiste (umbrechend, auf-/zuklappbar) */
.qf-chips { border-bottom: 1px solid var(--color-line); }
.qf-chips-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: none; border: none;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--color-ink); cursor: pointer;
}
.qf-chips-head .qf-chev { color: var(--color-primary); transition: transform 0.2s ease; }
.qf-chips:not(.is-open) .qf-chev { transform: rotate(-90deg); }
.qf-chips-list { display: none; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.qf-chips.is-open .qf-chips-list { display: flex; }
.qf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 6px; border: 1px solid var(--color-line); border-radius: 999px;
  background: #fff; font-family: var(--font-sans); font-size: 13.5px; color: var(--color-ink); cursor: pointer;
}
.qf-chip--all { padding: 6px 14px; }
.qf-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ============================================================
   Vollbild auf echten Handys (installierte PWA / schmaler Screen)
   ------------------------------------------------------------
   Am Desktop bleibt der iPhone-Mockup-Rahmen. Auf schmalen Screens
   faellt der Rahmen weg und der Prototyp fuellt die ganze Flaeche,
   so als waere es eine echte App. Die gezeichnete Statusleiste
   entfaellt, weil das Betriebssystem seine eigene einblendet; ueber
   die safe-area-Insets bleibt der Inhalt frei von Notch/Dynamic
   Island (oben) und Home-Indikator (unten).
   ============================================================ */
@media (max-width: 480px) {
  /* Seitenhintergrund (scheint in Rand-/Ueberscroll-Bereiche durch) folgt der
     Chrome-Farbe: Wizard weiss, App blau, Sheet schwarz (gesetzt in app.js). */
  body { background: var(--chrome-bg, var(--color-bg-page)); }
  .stage {
    padding: 0;
    height: 100dvh;
    align-items: flex-start; /* Screen liegt oben fest an */
  }
  .device {
    width: 100vw;
    height: calc(100dvh + 20px); /* 20px Puffer unten, ragt unter den Rand */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top);
    /* Oben Notch freihalten; die obere safe-area zeigt den Seitenhintergrund. */
    background-clip: content-box;
  }
  .device-notch { display: none; }
  .statusbar { display: none; }
  /* Die 20px Puffer bei allen unteren Elementen kompensieren, damit sie sichtbar
     an der gleichen Stelle wie bisher bleiben (nur der Hintergrund reicht tiefer). */
  .screen-footer { padding-bottom: calc(46px + 20px + 5px); }
  .progress { bottom: calc(44px + 20px); }
  /* Tab-Bar zusaetzlich ~10px hoeher. */
  .home-tabbar { padding-bottom: calc(18px + 20px + 10px); }
  /* Wellen brauchen hier keine Sonderregel mehr: die verlaengerte viewBox
     (siehe .waves-layer) fuellt als eine durchgehende Flaeche bis zum Boden,
     ohne Naht und ohne Streckung. */
  /* Sheets reichen bis zum Geraeteboden: ihre Aktionsleisten/Inhalte bekommen
     Abstand vom Home-Indikator (20px Puffer + safe-area), sonst kleben sie unten. */
  .picker-footer { padding-bottom: calc(16px + 20px + env(safe-area-inset-bottom)); }
  .filter-sheet-foot { padding-bottom: calc(18px + 20px + env(safe-area-inset-bottom)); }
  .poi-filter-body { padding-bottom: calc(22px + 20px + env(safe-area-inset-bottom)); }
  .info-sheet-body { padding-bottom: calc(26px + 20px + env(safe-area-inset-bottom)); }
  .poi-sheet-scroll { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* Nur Desktop-Mockup (fester 402x874-Rahmen): Dort wirken die 290px-Wellen zu
   hoch, weil das Mockup kuerzer ist als ein echtes Handy-Display (Safe-Area
   und der 20px-Puffer schieben die Wellen am echten Geraet tiefer). Die Wellen
   hier etwas nach unten schieben; der Rahmen klippt unten weg. Gleiche
   Wellenform, nur tieferer Wasserstand, naeher am echten Geraet. Der
   Fullscreen-Modus (<=480px) bleibt unveraendert. */
@media (min-width: 481px) {
  .waves-layer { bottom: -40px; }
}