/* Feuerstellenkarte – Layout und Design
   Aufbau: Topbar, links Panel (Filter + Liste), rechts Karte,
   Detailkarte als Overlay. Mobil wird das Panel zum Bottom-Sheet. */

:root {
  color-scheme: light dark;

  --bg: #f7f5f2;
  --surface: #ffffff;
  --surface-2: #f1eeea;
  --border: #e2ddd6;
  --text: #1c1917;
  --text-muted: #6b625a;

  --accent: #c2410c;
  --accent-strong: #9a3412;
  --accent-soft: #fff1e7;
  /* Farben für Flächen in Akzentfarbe: Der Text muss darauf lesbar bleiben,
     und der Hover-Zustand darf ihn nicht verschlucken. */
  --on-accent: #ffffff;
  --accent-hover: #9a3412;

  --bbq: #d97706;
  --firepit: #b91c1c;
  --picnic: #047857;
  --camping: #6d28d9;
  --ok: #15803d;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgb(28 25 23 / 6%), 0 8px 24px rgb(28 25 23 / 8%);
  --topbar-h: 60px;
  --panel-w: 384px;
  --detail-w: 360px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14110f;
    --surface: #1f1b19;
    --surface-2: #2a2522;
    --border: #38312d;
    --text: #f5f1ed;
    --text-muted: #a89e95;

    --accent: #fb923c;
    --accent-strong: #fdba74;
    --accent-soft: #3a2418;
    /* Im Dunkelmodus ist die Akzentfarbe hell – dort gehört dunkler Text
       darauf, sonst verschwindet die Beschriftung. */
    --on-accent: #1c1917;
    --accent-hover: #fdba74;

    --bbq: #f59e0b;
    --firepit: #ef4444;
    --picnic: #34d399;
    --camping: #a78bfa;
    --ok: #4ade80;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 45%);
  }
}

* { box-sizing: border-box; }

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

/* Auf Mobilgeräten fährt die Browserleiste beim Scrollen ein und aus. 100vh
   rechnet gegen den Viewport ohne Leiste, weshalb der untere Rand der Seite
   unter der Werkzeugleiste verschwindet. 100dvh folgt der tatsächlichen
   Höhe; vh bleibt als Rückfall für ältere Browser stehen. */
:root {
  --viewport-h: 100vh;
}
@supports (height: 100dvh) {
  :root { --viewport-h: 100dvh; }
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

/* Die Kartenseite scrollt nie. Ein fest verankertes Dokument ist auf iOS der
   einzige verlässliche Weg, exakt den sichtbaren Bereich zu füllen: Solange
   die Seite scrollbar wirkt, blendet Safari seine Werkzeugleiste über den
   unteren Rand und rechnet sie in keiner Höhenangabe heraus. */
body:not(.has-page) {
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px; left: 8px;
  z-index: 2000;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Topbar ---------- */

.topbar {
  position: relative;
  z-index: 1100;
  /* Nichts darf seitlich hinausragen, auch nicht bei vergrößerter
     Darstellung oder auf sehr schmalen Geräten. */
  max-width: 100%;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand strong { font-weight: 700; }
.brand__mark {
  width: 26px; height: 26px;
  fill: var(--accent);
  flex: none;
}

.search {
  position: relative;
  flex: 1 1 auto;
  /* Ohne min-width:0 schrumpft ein Flex-Element nie unter die Breite seines
     Inhalts – das Suchfeld blieb dadurch stehen und schob die Schaltflächen
     rechts aus dem Bild. */
  min-width: 0;
  max-width: 460px;
  margin-left: 6px;
}
.search__icon {
  position: absolute;
  left: 10px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  fill: var(--text-muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  min-width: 0;
  height: 38px;
  /* Rechts nur so viel Rand, wie das × braucht – und das steht erst da, wenn
     etwas eingegeben ist. Solange das Feld leer ist, gehört der Platz dem
     Platzhalter; in der Kopfzeile eines Telefons sind 22 px spürbar. */
  padding: 0 14px 0 34px;
  font: inherit;
  /* Nicht 15px wie der übrige Text: Safari auf dem iPhone zoomt beim Tippen
     in jedes Eingabefeld heran, dessen Schrift kleiner als 16px ist – und
     zoomt hinterher nicht von selbst zurück. Die Seite bleibt dann zu breit
     im Bild stehen. 16px ist die Schwelle, ab der er es lässt. */
  font-size: 16px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  appearance: none;
}
.search input:focus {
  background: var(--surface);
  border-color: var(--border);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.search:has(.search__clear:not([hidden])) input { padding-right: 34px; }
.search input::-webkit-search-cancel-button { display: none; }
.search__clear {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.search__clear:hover { background: var(--surface-2); color: var(--text); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--border); }
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.btn--primary {
  color: var(--on-accent);
  background: var(--accent);
}
.btn--primary:hover {
  color: var(--on-accent);
  background: var(--accent-hover);
}
.btn[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}
.btn.is-busy { opacity: .6; pointer-events: none; }

.topbar__toggle { display: none; }

/* ---------- Layout ---------- */

.layout {
  position: relative;
  display: grid;
  grid-template-columns: var(--panel-w) 1fr;
  height: calc(var(--viewport-h) - var(--topbar-h));
}

/* Auf breiten Bildschirmen mehr Platz für die Liste: Bei 384 px brechen
   Ortsangaben wie "Kannenburger Schleuse, Hardenbeck" mitten im Wort ab,
   obwohl rechts daneben Karte im Überfluss ist. Die Karte bleibt trotzdem
   das größere Feld. */
@media (min-width: 1280px) {
  :root { --panel-w: 440px; --detail-w: 400px; }
}

@media (min-width: 1680px) {
  :root { --panel-w: 500px; --detail-w: 440px; }
}

.map-wrap {
  position: relative;
  min-width: 0;
}

#map {
  width: 100%;
  height: 100%;
  background: var(--surface-2);
}

/* ---------- Panel ---------- */

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.filters {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}

/* Leise Überschrift: Sie soll die Gliederung erklären, nicht um Aufmerksamkeit
   mit den Filtern selbst konkurrieren. */
.filter-titel {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.filter-block + .filter-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

/* Zwei feste Spalten statt Umbruch nach Textlänge: Bei den vier Art-Chips
   stand "Campingplätze" sonst allein in der zweiten Zeile und sah nach
   Versehen aus statt nach Absicht. Nur dort, wo die Beschriftungen ähnlich
   lang sind – "ausdrücklich öffentlich" würde in einer halben Spalte
   umbrechen und die Zeile unnötig hoch machen. */
.filter-group--raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
/* Die Chips füllen ihre Spalte, damit die Punkte untereinander stehen und der
   Block als Raster lesbar wird. */
.filter-group--raster .chip__body {
  display: flex;
  width: 100%;
  padding-inline: 12px;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.chip__body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 13.5px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
.chip__body:hover { border-color: var(--border); }
.chip input:checked + .chip__body {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  font-weight: 500;
}
.chip input:focus-visible + .chip__body {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chip__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
}
.chip__dot--bbq { background: var(--bbq); }
.chip__dot--firepit { background: var(--firepit); }
.chip__dot--picnic { background: var(--picnic); }
.chip__dot--camping { background: var(--camping); }

.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-row + .filter-row { margin-top: 8px; }

/* Rechtsbündig: Der Knopf ist eine Aktion und keine weitere Einstellung. Er
   steht dauerhaft da, auch ohne abweichende Auswahl – ein Element, das beim
   ersten Filterklick erscheint, schiebt die halbe Seitenleiste nach unten. */
.filter-row__reset { margin-left: auto; }

.btn--klein {
  height: 30px;
  padding: 0 11px;
  font-size: 12.5px;
}
.btn:disabled {
  opacity: .45;
  cursor: default;
}
.btn:disabled:hover { background: var(--surface-2); }

.select select {
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  max-width: 190px;
}
.select--sm select { font-size: 13px; padding: 3px 6px; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
}
.switch input { accent-color: var(--accent); }

.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}
.results-count {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.results {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overscroll-behavior: contain;
}

.result {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  font: inherit;
  color: var(--text);
  cursor: pointer;
}
.result:hover, .result.is-active { background: var(--surface-2); }
.result.is-active { box-shadow: inset 3px 0 0 var(--accent); }

.result__icon {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
}
.result__icon svg { width: 17px; height: 17px; fill: currentColor; }
.result__icon--bbq { color: var(--bbq); }
.result__icon--firepit { color: var(--firepit); }
.result__icon--picnic { color: var(--picnic); }
.result__icon--camping { color: var(--camping); }

.result__main { min-width: 0; flex: 1; }
.result__name {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result__meta {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result__dist {
  font-size: 12.5px;
  color: var(--text-muted);
  flex: none;
  align-self: center;
}

.results-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted);
}
.results-empty p { margin: 0 0 10px; }

.panel__footer {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.panel__footer p { margin: 0 0 6px; }
.panel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Marker ---------- */

.pin {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  background: var(--surface);
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
}
.pin svg {
  width: 16px; height: 16px;
  transform: rotate(45deg);
  fill: currentColor;
}
.pin--bbq { color: var(--bbq); }
.pin--firepit { color: var(--firepit); }
.pin--picnic { color: var(--picnic); }
.pin--camping { color: var(--camping); }

/* ---------- Marker nach Waldbrandgefahr ---------- */

/* Dieselben Farben wie im Hinweis der Detailansicht, damit Karte und Text
   dasselbe sagen.

   Farbe allein wäre für Rot-Grün-Blinde keine Information, und Stufe 1-2
   grün gegen 4-5 rot ist genau diese Achse. Früher trug der Marker deshalb
   die Ziffer der Stufe – nur hieß dieselbe Darstellung an einer Gruppe die
   Anzahl der Plätze, sodass die Zahl beim Hineinzoomen ihre Bedeutung
   wechselte. Die Auskunft steckt jetzt in der Form: Ab Stufe 4 ein
   Warnrand, bei Stufe 5 ein doppelter. Ein Ring ist auch in Graustufen ein
   Ring.

   Zwischen Stufe 1, 2 und 3 unterscheidet weiterhin nur die Farbe. Das ist
   bewusst so: Ein Ring an jeder Stufe wäre wieder Rauschen, und diese drei
   trennt keine Gefahrenschwelle. Wo es darauf ankommt – ab Stufe 4 ist
   offenes Feuer im und am Wald untersagt –, trägt die Form die Aussage. Die
   genaue Stufe steht im Titel des Markers, in der Liste und im Detail. */
.pin--gefahr {
  background: currentColor;
  border-color: currentColor;
}
.pin--gefahr svg { fill: var(--surface); }
.pin--gefahr1, .pin--gefahr2 { color: var(--ok); }
.pin--gefahr3 { color: var(--bbq); }
.pin--gefahr4, .pin--gefahr5 { color: var(--firepit); }
.pin--gefahr4 {
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px currentColor, 0 2px 6px rgb(0 0 0 / 25%);
}
.pin--gefahr5 {
  box-shadow:
    0 0 0 3px var(--surface), 0 0 0 5px currentColor,
    0 0 0 7px var(--surface), 0 0 0 9px currentColor,
    0 2px 6px rgb(0 0 0 / 25%);
}
.pin--gefahr0 { color: var(--text-muted); }

/* Der äußere Ring bleibt – ohne ihn sähe eine Gruppe wie ein einzelner Marker
   aus, und deren Zahlen bedeuten Verschiedenes: an der Gruppe die Anzahl der
   Plätze, am Marker die Gefahrenstufe. */
.marker-cluster--gefahr div {
  color: var(--surface);
  font-weight: 700;
}
.marker-cluster--gefahr1 div, .marker-cluster--gefahr2 div { background: var(--ok); }
.marker-cluster--gefahr3 div { background: var(--bbq); }
.marker-cluster--gefahr4 div, .marker-cluster--gefahr5 div { background: var(--firepit); }
.marker-cluster--gefahr0 div { background: var(--text-muted); }

.marker-cluster--gefahr1, .marker-cluster--gefahr2 {
  background: color-mix(in srgb, var(--ok) 45%, transparent);
}
.marker-cluster--gefahr3 { background: color-mix(in srgb, var(--bbq) 45%, transparent); }
.marker-cluster--gefahr4, .marker-cluster--gefahr5 {
  background: color-mix(in srgb, var(--firepit) 45%, transparent);
}
.marker-cluster--gefahr0 { background: color-mix(in srgb, var(--text-muted) 45%, transparent); }

.legende {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 900;
  max-width: 250px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.legende[hidden] { display: none; }
.legende strong { display: block; margin-bottom: 6px; font-size: 13px; }
.legende ul { list-style: none; margin: 0; padding: 0; }
.legende li { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.legende p {
  margin: 8px 0 0;
  padding-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* Der ganze Kopf ist die Schaltfläche: Die Skala bleibt zugeklappt sichtbar,
   nur die Erklärung darunter verschwindet. Das eigene Dreieck von summary
   ersetzt ein eigenes, damit es rechts neben der Überschrift sitzt und nicht
   links vor der Farbskala. */
.legende summary {
  cursor: pointer;
  list-style: none;
}
.legende summary::-webkit-details-marker { display: none; }
.legende summary strong::after {
  content: '▾';
  float: right;
  margin-left: 10px;
  font-weight: 400;
  color: var(--text-muted);
  transition: transform .15s;
}
.legende[open] summary strong::after { transform: rotate(180deg); display: inline-block; }
.legende summary:hover strong::after,
.legende summary:focus-visible strong::after { color: var(--text); }
.legende__punkt {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: var(--surface);
}
.legende__punkt--s1, .legende__punkt--s2 { background: var(--ok); }
.legende__punkt--s3 { background: var(--bbq); }
.legende__punkt--s4, .legende__punkt--s5 { background: var(--firepit); }

/* Mobil liegt das Panel über der Karte – die Legende hätte dort keinen Platz. */
@media (max-width: 860px) {
  .legende { display: none; }
}
.pin--active {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  z-index: 1000;
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font);
  font-weight: 600;
}

.locate-marker {
  width: 16px; height: 16px;
  background: #2563eb;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(37 99 235 / 35%);
}

/* ---------- Hinweis auf der Karte ---------- */

.map-notice {
  position: absolute;
  z-index: 900;
  left: 12px; right: 62px;
  top: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 560px;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.map-notice p { margin: 0; }
.map-notice[hidden] { display: none; }
/* Bei offener Detailkarte weicht der Hinweis nach rechts aus. */
@media (min-width: 861px) {
  body.detail-open .map-notice {
    left: 400px;
  }
}

.map-notice__close {
  flex: none;
  width: 22px; height: 22px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.map-notice__close:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Detailkarte ---------- */

.detail {
  position: absolute;
  z-index: 1000;
  left: calc(var(--panel-w) + 14px);
  top: 14px;
  /* Wächst mit dem Panel mit: Bei 360 px bricht "Eintrag ansehen oder
     korrigieren" um, obwohl daneben Karte frei ist. */
  width: var(--detail-w);
  max-height: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.detail[hidden] { display: none; }

.detail__close {
  position: absolute;
  right: 8px; top: 8px;
  z-index: 2;
  width: 30px; height: 30px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}
.detail__close:hover { color: var(--text); background: var(--surface-2); }

.detail__body {
  overflow-y: auto;
  /* Nichts darf seitlich ausbrechen – sonst erscheint ein waagerechter
     Scrollbalken, sobald ein Eintrag eine lange URL oder Adresse hat. */
  overflow-x: hidden;
  padding: 16px 16px 18px;
  overscroll-behavior: contain;
}

.detail__body a { overflow-wrap: anywhere; }

.detail__kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.detail__kicker--bbq { color: var(--bbq); }
.detail__kicker--firepit { color: var(--firepit); }
.detail__kicker--picnic { color: var(--picnic); }
.detail__kicker--camping { color: var(--camping); }
.detail__kicker svg {
  width: 16px; height: 16px;
  fill: currentColor;
  flex: none;
}

.detail h2 {
  margin: 0 0 8px;
  padding-right: 32px;
  font-size: 19px;
  line-height: 1.3;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
}
.badge--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.badge--warn { color: var(--accent); background: var(--accent-soft); }

.detail p { margin: 0 0 10px; }

.detail__rules {
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 13.5px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.detail__rules strong { display: block; margin-bottom: 2px; }

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0 0 14px;
  font-size: 13.5px;
}
.facts dt { color: var(--text-muted); }
.facts dd {
  margin: 0;
  min-width: 0;
  /* Lange Namen und Adressen umbrechen, statt das Panel breiter zu machen. */
  overflow-wrap: anywhere;
}

.detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.detail__actions .btn { text-decoration: none; }

.coords {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.coords__copy {
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 1px dashed currentColor;
  padding: 0;
  cursor: pointer;
}
.coords__copy:hover { color: var(--accent-strong); }

.detail__source {
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.detail__source p { margin: 0 0 4px; }

.fire {
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--border);
}
.fire strong { display: block; margin-bottom: 2px; font-size: 13.5px; }
.fire p { margin: 4px 0 0; }
.fire__warnung { font-weight: 500; }
.fire__quelle { color: var(--text-muted); font-size: 12px; }

/* Die Stufen des DWD von sehr gering bis sehr hoch. */
.fire--stufe1, .fire--stufe2 { border-left-color: var(--ok); }
.fire--stufe1 strong, .fire--stufe2 strong { color: var(--ok); }
.fire--stufe3 { border-left-color: var(--bbq); }
.fire--stufe3 strong { color: var(--bbq); }
.fire--stufe4, .fire--stufe5 {
  border-left-color: var(--firepit);
  background: color-mix(in srgb, var(--firepit) 10%, transparent);
}
.fire--stufe4 strong, .fire--stufe5 strong { color: var(--firepit); }
.fire--unbekannt { color: var(--text-muted); }

.disclaimer {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  margin-bottom: 12px;
}

/* ---------- Inhaltsseiten ---------- */

.page {
  overflow: auto;
  height: calc(var(--viewport-h) - var(--topbar-h));
  background: var(--bg);
  /* position: relative wirkt hier nicht kosmetisch, sondern behebt einen
     zweiten Scrollbalken (10.09.2026). .visually-hidden ist absolut
     positioniert; ohne positionierten Vorfahren ist sein Bezug das
     Wurzelelement. Die unsichtbaren Spannen in den "Nach oben"-Verweisen
     lagen damit tausende Pixel tief im Dokument und spannten den Wurzel-
     Scrollbereich auf: plaetze.html kam so auf 639267 px Phantomhöhe,
     sichtbar als zweiter Balken neben dem von .page. Gemessen über das
     DevTools-Protokoll; mit dieser Zeile fällt html.scrollHeight auf die
     Fensterhöhe zurück. */
  position: relative;
}
.page__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.page h1 { font-size: 26px; margin: 0 0 18px; }
.page h2 { font-size: 18px; margin: 28px 0 8px; }
.page p, .page li { color: var(--text); }
.page .muted { color: var(--text-muted); }
.page .note {
  padding: 12px 14px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.page code {
  padding: 1px 5px;
  font-size: 13px;
  background: var(--surface-2);
  border-radius: 4px;
}
.page pre {
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.page pre code { background: none; padding: 0; }

/* ---------- Platzseiten und Übersicht ---------- */

.krumen {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.page .lead {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 18px;
}
/* Die Angabenliste ist dieselbe wie in der Detailansicht, auf einer ganzen
   Seite darf sie aber etwas luftiger stehen. */
.page .facts {
  font-size: 15px;
  gap: 7px 18px;
  margin-bottom: 20px;
}
.page .fire { font-size: 14px; }

.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}
.page__actions .btn { text-decoration: none; }

.page__footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}
.page__footer p { margin: 0 0 4px; color: var(--text-muted); }

/* Übersicht: viele kurze Zeilen, deshalb mehrspaltig, sobald Platz da ist. */
/* Sprungmarken zu den Bundesländern auf der Übersichtsseite.

   Die Seite listet über zehntausend Plätze in sechzehn Abschnitten; ohne
   Leiste ist das zweite Bundesland nur durch langes Wischen erreichbar.
   Umbruch statt waagerechtem Scrollen, damit auf dem Handy alle sechzehn zu
   sehen sind und keines hinter dem Rand verschwindet. */
.sprungmarken {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.sprungmarken a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}
.sprungmarken a:hover,
.sprungmarken a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.sprungmarken__zahl {
  color: var(--text-muted);
  font-size: 13px;
  /* Gleich breite Ziffern: Sonst tanzen die Zahlen in der Reihe. */
  font-variant-numeric: tabular-nums;
}

/* Etwas Luft über der angesprungenen Überschrift – sie soll nicht am oberen
   Rand kleben. Der Fokusrahmen kommt von tabindex="-1" und ist gewollt: Er
   zeigt Tastaturnutzern, wo der Sprung gelandet ist. */
.page h2[id] { scroll-margin-top: 16px; }

/* Der Rückweg am Ende jedes Länderabschnitts. Unauffällig und rechts: Er
   soll da sein, wenn man ihn sucht, und nicht die Liste zerschneiden. */
.nach-oben {
  margin: -8px 0 30px;
  text-align: right;
  font-size: 14px;
}
.nach-oben a {
  color: var(--text-muted);
  text-decoration: none;
}
.nach-oben a:hover,
.nach-oben a:focus-visible { color: var(--accent); }

.orte {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  columns: 2;
  column-gap: 28px;
}
.orte li {
  break-inside: avoid;
  margin-bottom: 5px;
  line-height: 1.4;
}
.orte__meta {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}
.page h3 {
  font-size: 15px;
  margin: 20px 0 8px;
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 620px) {
  .orte { columns: 1; }
}

/* Zwei Verweise am Fuß einer Inhaltsseite, einer links, einer rechts.
   Wird es eng, rutschen sie untereinander statt sich zu quetschen. */
.page__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Der Hinweis auf die Entstehung mit KI stand bis zum 25.08.2026 in einer
   eigenen Zeile mit Kürzel davor. Er sitzt jetzt hinter der Herkunftsangabe im
   selben Absatz: Das spart im Panel zwei Zeilen und stellt ihn noch näher zu
   dem, worauf es ankommt – die Plätze kommen aus OpenStreetMap und sind nicht
   erfunden. Die Kennzeichnung erfolgt ohnehin freiwillig; eine Pflicht nach
   Art. 50 KI-VO besteht hier nicht (siehe Impressum). */

/* Ohne Verbindung: über allem, aber nicht über den Systemleisten. */
.offline-hint {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1200;
  max-width: min(520px, calc(100vw - 24px));
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
}
body.has-page {
  position: static;
  overflow: auto;
}

.noscript {
  padding: 40px 20px;
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Mobil ---------- */

@media (max-width: 860px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .topbar__toggle { display: inline-flex; }
  .btn#locate-btn span { display: none; }
  .btn#locate-btn { padding: 0 11px; }

  /* Bildschirmfüllend statt Blatt mit Karte darüber: Von der Karte blieb bei
     85 % Höhe nur ein Streifen, in dem nichts zu erkennen war, während unten
     die Ergebnisliste auf zwei Einträge zusammenschrumpfte. Die Kopfzeile
     bleibt sichtbar – über ihre Schaltfläche geht es zurück zur Karte. */
  .panel {
    position: absolute;
    z-index: 1200;
    inset: 0;
    /* Platz für Home-Indicator und Systemleiste am unteren Rand. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-right: 0;
    transform: translateY(100%);
    transition: transform .22s ease;
  }
  .panel.is-open { transform: translateY(0); }

  /* Eine durchgehende Spalte statt eines Kastens im Kasten: Auf dem Telefon
     blieben der fest stehenden Liste zwischen Filtern und Fußzeile nur gut
     200 px – drei Einträge. Scrollt stattdessen das ganze Panel, schieben
     sich die Filter beim Weiterlesen aus dem Bild und die Liste hat den
     Bildschirm für sich. */
  .panel {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .results {
    flex: 0 0 auto;
    overflow: visible;
  }
  /* Anzahl und Sortierung bleiben beim Scrollen greifbar. */
  .results-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
  }

  /* Auf schmalen Geräten kompakter, damit die Liste nicht verdrängt wird. */
  .filter-group { gap: 5px; margin-bottom: 6px; }
  .chip__body { padding: 4px 10px; font-size: 13px; }

  .map-wrap { grid-row: 1; }

  .detail {
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto;
    max-height: 78%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 16px 16px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }

  .map-notice {
    left: 8px; right: 52px; top: 8px;
    font-size: 12.5px;
  }
}

/* Der Schriftzug tritt zurück, sobald es eng wird: In der Kopfzeile teilen
   sich Marke, Suchfeld und zwei Schaltflächen eine Zeile, und der Schriftzug
   ist das einzige davon, das nichts tut. Die Flamme bleibt. */
@media (max-width: 760px) {
  .brand span { display: none; }
}

/* Ganz schmale Geräte: Die Lupe kostet 34 px am linken Rand und sagt nichts,
   was der Platzhalter nicht schon sagt. */
@media (max-width: 340px) {
  .search__icon { display: none; }
  .search input { padding-left: 14px; }
}

/* Bei wenig Platz – schmales Gerät oder vergrößerte Darstellung – kürzt die
   Schaltfläche ihre Beschriftung, statt aus dem Bild zu wandern. */
.topbar__toggle .kurz { display: none; }

/* Offenes Panel: Es liegt bildschirmfüllend über der Karte, deshalb heißt die
   Schaltfläche dann nach ihrem Ziel und nicht mehr nach ihrem Inhalt. */
.topbar__toggle-zu { display: none; }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-auf { display: none; }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-zu { display: inline; }

@media (max-width: 560px) {
  .topbar__toggle .lang { display: none; }
  .topbar__toggle .kurz { display: inline; }
}

@media (max-width: 420px) {
  .topbar { gap: 8px; padding: 0 10px; }
}

/* Leaflets Attribution und Maßstab sitzen am unteren Kartenrand – auf
   Geräten mit Home-Indicator sonst direkt darunter. */
@media (max-width: 860px) {
  .leaflet-bottom {
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Installationshinweis ---------- */

/* Ein Verweis im Fuß statt eines Banners über der Karte: Der müsste sich
   merken, dass jemand ihn weggeklickt hat, und dafür bräuchte es Speicher auf
   dem Gerät – den die Filter aus demselben Grund meiden. */
.pwa-hinweis {
  margin: 8px 0 10px;
  font-size: 12px;
}
.pwa-hinweis a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-strong);
  text-decoration: none;
}
.pwa-hinweis a:hover,
.pwa-hinweis a:focus-visible {
  background: var(--accent);
  color: #fff;
}
/* Das Symbol steckt hier und nicht im HTML: Es trägt keine Aussage, die
   Vorlesegeräte wiedergeben müssten. */
.pwa-hinweis a::before {
  content: '';
  flex: none;
  width: 11px; height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

/* Läuft die Seite bereits installiert, ist der Hinweis erledigt. Das ist der
   ganze Grund, warum es hier ohne Skript und ohne Speicher geht. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .pwa-hinweis { display: none; }
}

/* Ein hervorgehobener Absatz auf den Inhaltsseiten. */
.hinweis {
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
}
.hinweis--wichtig {
  background: var(--accent-soft);
}

/* Der Kartenausschnitt auf einer Ortsseite. Ohne Skript bleibt er über das
   hidden-Attribut unsichtbar – die Liste darunter trägt dieselbe Auskunft. */
.ort-karte {
  height: 340px;
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.ort-karte[hidden] { display: none; }
@media (max-width: 600px) {
  .ort-karte { height: 260px; }
}

/* Was nicht umbrechen darf, etwa "M-V" auf den Landesseiten. Eine Klasse statt
   eines geschützten Bindestrichs: Den hat nicht jede Schrift (19.10.2026). */
.nobr { white-space: nowrap; }