/* FINK Brot Karte – Struktur-Styling.
   Bewusst zurückhaltend: Schrift erbt vom Projekt, Farben über Variablen.

   --fb-map-akzent       Marker, Nummern, Hauptknopf (kommt aus config 'akzent')
   --fb-map-rahmen       Rahmen der Karte
   --fb-map-radius       Eckenradius
   --fb-map-hintergrund  Fläche, solange nichts geladen ist
   --fb-map-knopf        Knopf „Interaktive Karte laden“
   --fb-map-text-leise   Nebentexte (Kategorie, Entfernung)

   Kärtchen und Farben aus der Projektdatei (projekt.css; ohne Paket rechnet das Plugin
   Akzent-Text und Link aus dem Akzent nach, sonst gilt der Standard hier):
   --fb-map-akzent-text        Schrift auf dem Akzent (Knöpfe, Nummern, gewählte Leiste)
   --fb-map-link               Links in der Liste (≥ 4,5:1 auf Weiß)
   --fb-map-marker-rand        Rand um die Nadel (≥ 3:1 gegen die Kartenflächen)
   --fb-map-haupt-hintergrund  Knopf „Route planen“: Fläche …
   --fb-map-haupt-text         … Schrift …
   --fb-map-haupt-rahmen       … Rand (Knopfstil gefüllt/Kontur/Text)
   --fb-map-kaertchen-radius   Ecken der Knöpfe; Kärtchen +4 px, Blatt +8 px
   --fb-map-kaertchen-schrift  Schrift der Kärtchen, des Ortsblatts (auch mobiles Sheet) und des Ortspanels
                               (ohne Wert, Option „erben“: Schrift der Website – in allen Breiten gleich).
                               Bedienelemente stehen immer in system-ui, sans-serif (Regel „Schrift 0.15“ unten).
   --fb-map-zier / -zier-text  Markenfarbe an Nummern und Zierflächen, wenn Knöpfe dunkelgrau sind (Site → Karte, 0.9.16)
*/

.fb-map,
.fb-map__betriebe,
.fb-map__orte,
.fb-karte,
.fb-map__touren {
  --_akzent: var(--fb-map-akzent, #33404d);
  --_akzent-text: var(--fb-map-akzent-text, #fff);
  --_link: var(--fb-map-link, var(--_akzent));
  /* 0.9.16: Zierfarbe – Markenfarbe an Nummern und Flächen ohne Text, wenn Knöpfe dunkelgrau sind (projekt.css) */
  --_zier: var(--fb-map-zier, var(--_akzent));
  --_zier-text: var(--fb-map-zier-text, var(--_akzent-text));
  --_haupt-hg: var(--fb-map-haupt-hintergrund, var(--_akzent));
  --_haupt-text: var(--fb-map-haupt-text, var(--_akzent-text));
  --_haupt-rahmen: var(--fb-map-haupt-rahmen, var(--_akzent));
  --_k-radius: var(--fb-map-kaertchen-radius, 8px);
  /* Barrierefreiheit (WCAG 1.4.11 / 2.4.11): Die Markenfarbe darf hell sein (z. B. Snow-Experts-Grün #85b312,
     nur 2,5:1 auf Weiß) und bleibt Fläche/Füllung. Fokusringe und Zustandsränder brauchen ≥ 3:1 – sie nehmen
     die geprüften abgeleiteten Farben: Link (≥ 4,5:1 auf Weiß), Marker-Rand (≥ 3:1 auf allen Kartenflächen). */
  --_fokus: var(--_link);
  --_kontur: var(--fb-map-marker-rand, var(--_link));
}
/* Karte, Kärtchen und Listen erben nicht die Ausrichtung der Theme-Spalte (z. B. zentrierte Zero-One-Spalten) */
.fb-karte, .fb-map { text-align: start; }

.fb-map {
  --_rahmen: var(--fb-map-rahmen, #d5dbe0);
  --_radius: var(--fb-map-radius, 8px);
  --_bedien-radius: calc(var(--_k-radius) + 4px);
  --_bedien-schatten: 0 1px 3px rgb(16 24 40 / 0.14), 0 3px 10px rgb(16 24 40 / 0.06);
  --_leise: var(--fb-map-text-leise, #5f6b76);
  --_kreuz: 32px;   /* Platz rechts für das Schließen-Kreuz (Popup 32 px, Blatt 44 px) */
  margin: 0;
}

/* --- Grundschutz gegen Theme-CSS (Paket D2) ---------------------------- */
/* Karte, Standort-Leiste und Liste stehen mitten in einer fremden Seite, und deren Theme wirkt hinein:
   button { margin … }, * { box-sizing: content-box }, .text p { margin … }, Regeln für .maplibregl-*.
   Früher hielten sechs !important einzelne Abstände fest. Jetzt tragen die Regeln, die gegen das Theme
   bestehen müssen, eine Wurzel davor (.fb-map, .fb-map__orte, .fb-map__betriebe) und schlagen so Element-
   Regeln und Inhaltsklassen wie „.text p“ (Spezifität 0,1,1) – auch wenn das Theme erst nach karte.css kommt.
   Bewusst KEIN @layer: Eine Regel in einer Ebene verliert gegen JEDE Regel ohne Ebene. Themes stehen fast nie
   in einer Ebene – „button { … }“ oder „p { margin … }“ des Themes schlüge dann jeden Knopf und jede Zeile. */

/* Knöpfe (alle tragen eine Klasse – [class] hebt auf 0,2,1): kein Außenabstand, Box wie der Browser-Standard
   für Knöpfe, auch nach „button { all: unset }“ oder „* { box-sizing: content-box }“ */
:is(.fb-map, .fb-map__orte, .fb-map__betriebe, .fb-karte) button[class] { margin: 0; box-sizing: border-box; }
/* MapLibre-Ecken: Abstände wie in maplibre-gl.css – gegen Theme-Regeln für .maplibregl-* (Seite mit eigener Karte) */
.fb-map .maplibregl-ctrl-top-left .maplibregl-ctrl { margin: 10px 0 0 10px; }
.fb-map .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 10px 10px 0 0; }
.fb-map .maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0 0 10px 10px; }

/* --- Standort-Leiste über der Karte ---------------------------------- */

.fb-map__betriebe {
  position: relative;   /* Bezug für offsetLeft beim Mitscrollen */
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px;
}
/* Handy: eine Wischzeile statt drei umgebrochener Reihen. Läuft sie über, zeigt ein Verlauf am
   Rand „es geht weiter“ – Klassen setzt karte.js (beobachteLeiste), je nach Scrollstand. */
@media (max-width: 640px) {
  .fb-map__betriebe {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 2px 40px 2px 2px; margin-bottom: 10px;
  }
  .fb-map__betriebe--rechts { mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .fb-map__betriebe--links { mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
  .fb-map__betriebe--links.fb-map__betriebe--rechts {
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
  }
  .fb-map__betriebe::-webkit-scrollbar { display: none; }
  .fb-map__betrieb { flex: none; scroll-snap-align: start; }
}
.fb-map__betrieb {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 8px; box-sizing: border-box;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 20px;
  color: #1f2933; background: #fff;
  border: 1px solid var(--fb-map-rahmen, #d5dbe0); border-radius: 999px; cursor: pointer;
}
.fb-map__betrieb .fb-map__nr { width: 24px; height: 24px; font-size: 12px; }
.fb-map__betrieb { transition: border-color 0.15s, background-color 0.15s; }
.fb-map__betrieb:hover { border-color: var(--_kontur); }
.fb-map__betrieb[aria-pressed="true"] { color: var(--_akzent-text); background: var(--_akzent); border-color: var(--_kontur); }
.fb-map__betrieb[aria-pressed="true"] .fb-map__nr { background: var(--_akzent-text); color: var(--_akzent); }
.fb-map__betrieb:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }

/* --- Bühne ------------------------------------------------------------ */

.fb-map__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--_rahmen);
  border-radius: var(--_radius);
  background: var(--fb-map-hintergrund, #eaf0f3);
}
.fb-map--16-9 .fb-map__stage { aspect-ratio: 16 / 9; }
.fb-map--4-3  .fb-map__stage { aspect-ratio: 4 / 3; }
@media (min-width: 960px) { .fb-map--auto .fb-map__stage { aspect-ratio: 16 / 9; } }
/* 21:9 (0.9.8): Breitbild erst ab 640 px – darunter 16:9. Grenze wie <source media="(min-width: 640px)"> im Snippet,
   damit Bild und Bühne immer dasselbe Seitenverhältnis haben. 1:1 überall quadratisch. */
.fb-map--21-9 .fb-map__stage { aspect-ratio: 16 / 9; }
@media (min-width: 640px) { .fb-map--21-9 .fb-map__stage { aspect-ratio: 21 / 9; } }
.fb-map--1-1 .fb-map__stage { aspect-ratio: 1 / 1; }
/* Mobil bleibt die Bühne beim Aktivieren unverändert, unabhängig vom Desktopformat. */
@media (max-width: 640px) {
  .fb-map[class] .fb-map__stage { aspect-ratio: 4 / 3; height: auto; min-height: 0; max-height: 60svh; box-sizing: border-box; }
}
.fb-map__stage:fullscreen { border: 0; border-radius: 0; }
.fb-karte .fb-karte__karte .fb-map__stage:fullscreen { max-height: none; }

.fb-map__still,
.fb-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* gegen „img { height: auto }“ / „.text img { … }“ des Themes – das Standbild füllt die Bühne */
.fb-map img.fb-map__still { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }

/* Noch kein Standbild: ruhige Fläche mit feinem Raster statt leerer Box */
.fb-map__platzhalter {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--_rahmen);
  background:
    linear-gradient(rgb(255 255 255 / 0.5) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgb(255 255 255 / 0.5) 1px, transparent 1px) 0 0 / 32px 32px;
}
.fb-map__platzhalter .fb-map__ui { width: 40px; height: 40px; margin-bottom: 48px; }

.fb-map__activate {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2;
  padding: 0.6em 1.2em; max-width: calc(100% - 32px); white-space: nowrap;
  font: inherit; font-size: 0.875rem; line-height: 1.2; font-weight: 600;
  color: #fff; background: var(--fb-map-knopf, #222);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
}
.fb-map__activate:hover { background: var(--_akzent); color: var(--_akzent-text); }
.fb-map__activate:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 3px; }
.fb-map__activate[disabled] { cursor: progress; opacity: 0.8; }
/* Laden (Paket B): Der Knopf sagt „Karte lädt …“ (karte.js, aria-busy). Die halb aufgebaute Karte bleibt
   unsichtbar, bis sie steht – bis dahin sieht man das Standbild, nie einen leeren Rahmen. */
.fb-map--lade .fb-map__canvas { visibility: hidden; }
/* Fehlerfall: Meldung im Rahmen über dem Standbild; der Knopf darunter bleibt für einen neuen Versuch */
.fb-map .fb-map__fehlermeldung {
  position: absolute; left: 50%; bottom: calc(1rem + 3em); transform: translateX(-50%); z-index: 2;
  width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; box-sizing: border-box;
  font-size: 0.875rem; line-height: 1.4; text-align: center;
  color: #7a2e0e; background: #fff4ed; border: 1px solid #f3c4a8; border-radius: 8px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.15);
}

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

.fb-map__pin {
  display: block; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3));
}
/* Nur das Innere skalieren: MapLibre positioniert den Marker selbst per transform */
.fb-map__pin svg { transition: transform 0.15s; transform-origin: 50% 100%; overflow: visible; }
/* Dunkler Rand um die Nadel (Kind-Element im SVG, nie das Marker-Element selbst) */
.fb-map__pin-rand { stroke: var(--fb-map-marker-rand, #1f2933); }
.fb-map__pin:hover svg, .fb-map__pin:focus-visible svg { transform: scale(1.1); }
.maplibregl-marker.fb-map__pin { z-index: 3; }   /* Hauptorte über der Umgebung */
/* Kärtchen „aus“ (0.9.8): Marker sind nur Bild (role="img") – nicht klickbar, Ziehen geht durch zur Karte */
.fb-map__pin--still, .fb-map__poi--still { pointer-events: none; cursor: default; }
/* Hauptort, dessen Kärtchen das Panel zeigt (0.9.9, marker.js): größer, kräftiger Schatten, über den übrigen Nadeln */
.maplibregl-marker.fb-map__pin--aktiv { z-index: 4; }
.fb-map__pin.fb-map__pin--aktiv { filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.45)); }
.fb-map__pin--aktiv svg, .fb-map__pin--aktiv:hover svg, .fb-map__pin--aktiv:focus-visible svg { transform: scale(1.22); }

/* Pin-Namen (0.9.8): neben der Nadel (Marker) bzw. über dem Standbild (.fb-map__namen). Lage setzt lage.js per
   CSSOM (left/top), ohne JS steht der Name rechts vom Kopf. Eigene Fläche mit Rand und Schatten – lesbar auf hellem
   und dunklem Kartengrund; Thema „dunkel“ (.fb-map--dunkel, karte.js) hell auf dunkel. Nicht klickbar, nicht vorgelesen. */
.fb-map .fb-map__pin-name {
  position: absolute; left: 38px; top: 19px; z-index: 1;
  display: block; box-sizing: border-box; max-inline-size: min(11rem, 38vw);
  padding: 2px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 600 12px/16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--fb-map-kaertchen-schrift, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: #1f2933; background: rgb(255 255 255 / 0.94);
  border: 1px solid rgb(31 41 51 / 0.22); border-radius: 4px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  pointer-events: none; text-align: start;
}
.fb-map--dunkel .fb-map__pin-name { color: #f4f6f8; background: rgb(31 41 51 / 0.94); border-color: rgb(255 255 255 / 0.3); box-shadow: 0 1px 3px rgb(0 0 0 / 0.5); }
.fb-map__pin-name[hidden] { display: none; }
.fb-map__namen { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fb-map__namen[hidden] { display: none; }
@media (prefers-reduced-transparency: reduce) {
  .fb-map .fb-map__pin-name { background: #fff; }
  .fb-map--dunkel .fb-map__pin-name { background: #1f2933; }
}
.maplibregl-marker.fb-map__poi { z-index: 2; }
.maplibregl-marker.fb-map__buendel { z-index: 4; }   /* Bündel über Nadeln: sonst unter einer Nadel nicht erreichbar */
.maplibregl-marker.fb-map__poi--vorn { z-index: 4; }  /* einzelnes Symbol, das eine Nadel berührt (ohne Bündel in der Nähe) */
.fb-map .maplibregl-popup { z-index: 6; }        /* Infokarte über allen Markern und über der Legende (5) */

.fb-map__poi {
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--farbe, #495057); cursor: pointer;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}
.fb-map__poi svg { transition: transform 0.15s; }
.fb-map__poi:hover svg, .fb-map__poi:focus-visible svg { transform: scale(1.2); }
.fb-map__poi[hidden] { display: none; }
.fb-map__poi.fb-map__poi--gebuendelt { visibility: hidden; pointer-events: none; }

/* Bündel: weißer Kreis mit dunkler Zahl, Ring aus den Kategoriefarben (--ring, per JS) –
   bewusst anders als die grünen Nadeln mit Nummer */
.fb-map__buendel {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2933;
  background: radial-gradient(circle, #fff 0 10px, transparent 10.5px), var(--ring, #1f2933);
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); cursor: pointer;
}
/* KEIN transform am Marker selbst – MapLibre positioniert ihn darüber */
.fb-map__buendel:hover { box-shadow: 0 0 0 3px rgb(255 255 255 / 0.6), 0 2px 8px rgb(0 0 0 / 0.4); }
.fb-map__buendel::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }   /* 44 px Tippfläche */
.fb-map__buendel:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
/* Tippfläche 44 px, auch wenn das Symbol nur 26 px groß ist. Bezugsrahmen für ::before
   ist der Marker selbst (position: absolute von MapLibre) – NIE position: relative setzen,
   sonst rutscht jedes Symbol um die Höhe der vorherigen nach unten (Fehler in 0.7.0). */
.fb-map__poi::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
/* Schutz: MapLibre positioniert Marker per transform ab 0/0 – darf kein CSS überschreiben */
.fb-map .maplibregl-marker { position: absolute; top: 0; left: 0; }

/* Kompass nur, wenn gedreht oder geneigt (karte.js setzt .fb-map--gedreht; Paket B) – sonst nur Rauschen */
.fb-map:not(.fb-map--gedreht) .maplibregl-ctrl-compass { display: none; }
/* „Ausschnitt zurücksetzen“ (Lucide rotate-ccw) im Stil der MapLibre-Knöpfe */
.fb-map .maplibregl-ctrl-group .fb-map__zuruecksetzen { display: grid; place-items: center; color: #333; }

.fb-map__pin:focus-visible,
.fb-map__poi:focus-visible,
.fb-map .maplibregl-ctrl-group button:focus-visible,
.fb-map .maplibregl-canvas:focus-visible {
  outline: 3px solid var(--_fokus); outline-offset: 2px;
}

/* --- Filtergruppe „In der Nähe“ (oben rechts; am Handy Wischzeile über der Karte) --- */
/* Eine Gruppe: Beschriftung, Filterchips mit Zähler, Schalter „Wege“/„3D“. Zustand über aria-pressed:
   an = Akzent gefüllt, aus = weiß mit Rand (kein Durchstreichen mehr). */

.fb-map .maplibregl-ctrl-top-right { max-width: calc(100% - 64px); }   /* links bleiben die Knöpfe frei */
/* Bedienelemente stehen im DOM vor den Markern (Tab-Reihenfolge, karte.js). Stapelung: MapLibres Ecken haben
   z-index 2 – gleich hoch wie Umgebungssymbole (2) und unter Nadeln/Bündeln (3/4). Weil die Marker im DOM danach
   kommen, lagen Geschäftssymbole ÜBER Zoom, Zurücksetzen und Filterchips und fingen deren Klicks ab (Nachtest 30.9.).
   Stapelung von unten nach oben: Marker 2–4 · Legende und Quellen 5 · Infokarte 6 · obere Ecken 7 ·
   Handy-Blatt 8. Pflichtquellen bleiben wie die Legende oberhalb aller Marker. */
.fb-map .maplibregl-ctrl-top-left, .fb-map .maplibregl-ctrl-top-right { z-index: 7; }
.fb-map .maplibregl-ctrl-bottom-left, .fb-map .maplibregl-ctrl-bottom-right { z-index: 5; }
.fb-map__leiste { pointer-events: auto; }
.fb-map__leiste[hidden], .fb-map__leiste:empty { display: none; }
.fb-map .maplibregl-ctrl-group {
  border-radius: var(--_k-radius);
  box-shadow: var(--_bedien-schatten);
}
.fb-map__filter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 4px; border-radius: var(--_bedien-radius);
  background: rgb(255 255 255 / 0.95); box-shadow: var(--_bedien-schatten);
}
.fb-map__filter-titel {
  padding: 0 4px 0 8px;
  font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--_leise);
}
.fb-map__chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; box-sizing: border-box;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: #3b4652; background: #fff;
  border: 1px solid #c4ccd3; border-radius: 999px;
  cursor: pointer;
}
/* doppelte Klasse: MapLibre setzt für .maplibregl-ctrl button:hover eine eigene Hintergrundfarbe */
.fb-map .fb-map__filter .fb-map__chip:hover { background: #f4f6f8; border-color: #9aa5b1; }
.fb-map .fb-map__filter .fb-map__chip[aria-pressed="true"] { color: var(--_akzent-text); background: var(--_akzent); border-color: var(--_kontur); }
.fb-map .fb-map__filter .fb-map__chip[aria-pressed="true"]:hover { box-shadow: 0 0 0 2px var(--_kontur); }   /* kein brightness: Kontrast bleibt */
.fb-map__chip:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
.fb-map__zahl {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: #eef1f3; color: #3b4652;
}
.fb-map__chip[aria-pressed="true"] .fb-map__zahl { background: rgb(255 255 255 / 0.25); color: inherit; }
.fb-map .fb-map__filter .fb-map__chip--schalter:first-of-type { margin-left: 4px; }
/* Reine Kartenwerkzeuge: kompakte Bedienfläche statt leerer Mobilzeile.
   44 px auch mit Maus; Tastaturfokus und sichtbarer Schalterzustand bleiben erhalten. */
.fb-map .fb-map__filter--werkzeuge { flex-wrap: nowrap; gap: 4px; }
.fb-map .fb-map__filter--werkzeuge .fb-map__chip {
  min-width: 44px; height: 44px; padding-inline: 10px;
  border-radius: var(--_k-radius); margin-left: 0;
}

/* Handy / schmale Karte: Wischzeile zwischen Standort-Leiste und Karte (karte.js, wie beobachteLeiste) */
.fb-map__filter--zeile {
  flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 0 10px; padding: 2px 40px 2px 2px; border-radius: 0; background: none; box-shadow: none;
}
.fb-map__filter--zeile::-webkit-scrollbar { display: none; }
.fb-map__filter--zeile > * { flex: none; scroll-snap-align: start; }
.fb-map__filter--zeile .fb-map__filter-titel { padding-left: 0; }
.fb-map__filter--zeile .fb-map__chip { height: 40px; padding: 0 14px; font-size: 14px; }
.fb-map__filter--zeile.fb-map__filter--rechts { mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.fb-map__filter--zeile.fb-map__filter--links { mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.fb-map__filter--zeile.fb-map__filter--links.fb-map__filter--rechts {
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
}
/* 0.9.17: breite Karte mit vielen Chips – über der Karte linksbündig umbrechen, nichts verschwindet am Rand */
.fb-map__filter--zeile.fb-map__filter--umbruch { flex-wrap: wrap; overflow: visible; padding-right: 2px; row-gap: 8px; }
.fb-map__filter--zeile.fb-map__filter--umbruch.fb-map__filter--links,
.fb-map__filter--zeile.fb-map__filter--umbruch.fb-map__filter--rechts { mask-image: none; }
.fb-map__filter--zeile.fb-map__filter--umbruch .fb-map__chip { height: 36px; padding: 0 14px; font-size: 14px; }

/* --- Legende ---------------------------------------------------------- */

/* Abstand zum Rand: MapLibre-Ecke unten links (Grundschutz oben) – früher !important */
.fb-map__legende {
  padding: 0.4rem 0.6rem; border: 0; border-radius: var(--_k-radius);
  background: rgb(255 255 255 / 0.95); box-shadow: var(--_bedien-schatten);
  font-size: 0.75rem; line-height: 1.3; color: #1f2933;
  pointer-events: auto;
}
/* Milchglas (0.9.3): Symbole hinter der Legende bleiben als Farbfleck erkennbar. 80 % Weiß + 8 px Unschärfe –
   der Text (#1f2933) hat darauf auch über einem roten Symbol noch > 9:1 (WCAG 1.4.3 verlangt 4,5:1).
   Ohne backdrop-filter (alte Browser) und bei „Transparenz reduzieren“ bleibt sie fast deckend. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fb-map__legende {
    background: rgb(255 255 255 / 0.8);
    -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .fb-map__legende { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.fb-map .fb-map__legende > summary { cursor: pointer; padding: 0; font-size: inherit; font-weight: 700; list-style: none; min-height: 24px; display: flex; align-items: center; }
.fb-map__legende > summary::-webkit-details-marker { display: none; }
.fb-map__legende > summary::after { content: " +"; font-weight: 400; }
.fb-map__legende[open] > summary::after { content: " –"; }
/* 0.15: Griff und Pillensymbol gibt es nur auf schmalen Karten (siehe unten). */
.fb-map__legende-griff, .fb-map__legende-symbol { display: none; }
.fb-map .fb-map__legende ul { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.fb-map .fb-map__legende li { display: flex; align-items: center; gap: 0.3rem; margin: 0; white-space: nowrap; }
.fb-map__punkt { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--farbe); }

/* --- Infokarte (Popup) ------------------------------------------------ */

/* 300 px fest (Paket B): „Route planen“ + zwei Symbolknöpfe (40 px) in einer Zeile, nichts bricht um */
.fb-map .maplibregl-popup-content {
  width: 300px; box-sizing: border-box;
  padding: 16px; border-radius: calc(var(--_k-radius) + 4px);
  box-shadow: 0 12px 32px rgb(16 24 40 / 0.16), 0 2px 6px rgb(16 24 40 / 0.08);
  font: inherit; font-family: var(--fb-map-kaertchen-schrift, inherit); font-size: 14px; line-height: 20px; color: #1f2933;
}
.fb-map .maplibregl-popup-close-button {
  top: 8px; right: 8px; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1; color: var(--_leise);
  border-radius: 50%; transition: background-color 0.15s;
}
.fb-map .maplibregl-popup-close-button:hover { background: #f1f3f5; color: #1f2933; }
.fb-map .maplibregl-popup-close-button:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 0; }
/* Zeilen im Popup/Blatt ohne Außenabstand (Theme: p, .text p); Name und Hinweis setzen ihren eigenen – eine Stufe spezifischer */
.fb-map .fb-map__karte p { margin: 0; }
.fb-map__karte-kat {
  display: flex; align-items: center; gap: 6px; min-height: 20px; padding-right: 32px;
  font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--farbe, var(--_leise));
  /* Kategoriefarbe als SCHRIFT (12 px) braucht 4,5:1 – einige Kategorie- und Pistenfarben schaffen auf Weiß nur
     3,0–4,4:1 (Treffpunkt, Gastro, Unterkunft, Übungshang …). Darum im Ton abgedunkelt (72 % Farbe + Schwarz,
     alle Kategorien ≥ 5:1); der Punkt davor behält die Originalfarbe. Ohne color-mix: Zeile darüber. */
  color: color-mix(in srgb, var(--farbe, var(--_leise)) 72%, #000);
}
.fb-map .fb-map__karte .fb-map__karte-name { margin: 4px var(--_kreuz) 8px 0; font-size: 16px; font-weight: 700; line-height: 22px; }
.fb-map__karte .fb-map__aktionen { margin-top: 12px; padding-top: 0; }
.fb-map__karte .fb-map__status { margin: 0 0 8px; }
.fb-map__karte-mass { color: var(--_leise); font-variant-numeric: tabular-nums; }
/* Wege-Infokärtchen (0.9.21): Beschreibung aus OSM, Quellenhinweis klein und leise */
.fb-map .fb-map__karte .fb-map__karte-text { margin-bottom: 6px; font-size: 14px; line-height: 20px; }
.fb-map .fb-map__karte .fb-map__karte-quelle { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--_leise); }
.fb-map__karte .fb-map__punkt { flex: none; width: 10px; height: 10px; }

/* Kärtchen eines Orts im Popup/Blatt (Vorlage snippets/karte/kaertchen.php, wie in der Liste):
   Kategorie in ihrer Farbe (--farbe aus .fb-map__kat--… in projekt.css), Platz für das Kreuz */
.fb-map__karte .fb-map__ort-kopf { min-height: 20px; padding-right: 32px; }
.fb-map__karte .fb-map__ort-kat { color: var(--farbe, var(--_leise)); color: color-mix(in srgb, var(--farbe, var(--_leise)) 72%, #000); }
.fb-map__karte .fb-map__nr { width: 20px; height: 20px; font-size: 11px; }
.fb-map .fb-map__karte .fb-map__ort-name { margin: 4px var(--_kreuz) 8px 0; font-size: 16px; font-weight: 700; line-height: 22px; }
/* Kompakte Variante: Adresse als eigene leise Zeile (Paket B) */
.fb-map__ort-adresse { margin: 0; font-size: 13px; line-height: 20px; color: var(--_leise); }
.fb-map__karte .fb-map__status + .fb-map__ort-adresse { margin-top: -2px; }

/* --- Infozeilen und Hinweis (Popup und Liste) ---------------------------- */

:is(.fb-map, .fb-map__orte, .fb-karte) .fb-map__infos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
:is(.fb-map, .fb-map__orte, .fb-karte) .fb-map__infos li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; margin: 0; }
.fb-map__infos .fb-map__ui { margin-top: 2px; color: var(--_leise); }
.fb-map__infos li + li { color: var(--_leise); }
.fb-map__hinweis {
  display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start;
  padding: 8px 12px; border-radius: 8px;
  background: #fff6e5; color: #7a4a00; font-size: 14px; line-height: 20px;
}
.fb-map__hinweis .fb-map__ui { margin-top: 2px; }
/* Abstand nur im Popup/Blatt (in der Liste trennt der Abstand des Kärtchens) – früher zweimal !important */
.fb-map .fb-map__karte .fb-map__hinweis { margin-top: 8px; }
.fb-map__ui { flex: none; display: block; }

/* --- Schild „Jetzt geöffnet“ ------------------------------------------- */

.fb-map__status {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  min-height: 24px; padding: 0 10px; box-sizing: border-box; border-radius: 12px;
  font-size: 13px; font-weight: 600; line-height: 16px; white-space: nowrap;
  color: #495057; background: #f1f3f5;
}
.fb-map__status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fb-map__status[data-art="offen"] { color: #1e6b34; background: #e7f5ea; }
.fb-map__status[data-art="bald"]  { color: #8a4b00; background: #fff1db; }
/* Fallback-Kommentar aus den Öffnungszeiten („Notdienst; siehe Aushang …“) kann lang sein:
   umbrechen statt überlaufen, nie breiter als Blatt/Kärtchen (Punkt bleibt oben in der ersten Zeile) */
.fb-map__status[data-art="hinweis"] {
  white-space: normal; overflow-wrap: anywhere; max-width: 100%;
  align-items: baseline; padding-top: 4px; padding-bottom: 4px; border-radius: 12px;
}
.fb-map__status[data-art="hinweis"]::before { align-self: flex-start; margin-top: 4px; }
/* Platz ist reserviert, bis das Skript den Text setzt – nichts springt */
.fb-map__status:empty { visibility: hidden; }
.fb-map__status--klein { min-height: 20px; padding: 0 8px; font-size: 12px; }
.fb-map__status--klein:empty { display: none; }   /* in der Umgebungsliste lieber nichts als eine Lücke */
/* Nur Saison, in der Saison: nichts zu sagen (karte.js setzt hidden) */
.fb-map__status[hidden] { display: none; }

/* --- Infoblatt auf schmalen Karten (von unten) ----------------------- */

.fb-map__blatt {
  --_kreuz: 44px;   /* Name hält Abstand zum größeren Kreuz (früher margin-right … !important) */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  max-height: 72%; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 16px 16px; box-sizing: border-box;
  font-family: var(--fb-map-kaertchen-schrift, inherit);
  background: #fff; border-radius: calc(var(--_k-radius) + 8px) calc(var(--_k-radius) + 8px) 0 0;
  box-shadow: 0 -8px 24px rgb(16 24 40 / 0.16);
  font-size: 14px; line-height: 20px; color: #1f2933;
  transform: translateY(100%); transition: transform 0.22s ease-out;
}
.fb-map__blatt--offen { transform: none; }
.fb-map__blatt-griff {
  position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
  border-radius: 2px; background: #d5dbe0;
}
.fb-map__blatt-zu {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #f1f3f5; color: #1f2933; cursor: pointer;
}
.fb-map__blatt-zu:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
.fb-map__blatt .fb-map__karte-kat, .fb-map__blatt .fb-map__ort-kopf { padding-right: 44px; }

/* 0.15: Ortsblatt bleibt innerhalb der Bühne; nur der Inhalt scrollt. */
.fb-map .fb-map__blatt--sheet {
  display: flex; flex-direction: column; padding: 0 12px 4px;
  max-height: 50%; overflow: hidden;
  font-family: var(--fb-map-kaertchen-schrift, inherit);
}
.fb-map .fb-map__blatt--sheet .fb-map__blatt-griff {
  position: static; display: grid; place-items: center; flex: 0 0 44px;
  width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; background: transparent; cursor: ns-resize; touch-action: none;
}
.fb-map__blatt-griff-strich { width: 36px; height: 4px; border-radius: 3px; background: #9da8b2; }
.fb-map .fb-map__blatt-kopf { display: flex; align-items: center; gap: 8px; min-height: 44px; flex: none; touch-action: none; }
.fb-map .fb-map__blatt-kopf :is(.fb-map__ort-kopf,.fb-map__karte-kat) { flex: 1; padding: 0; min-width: 0; margin: 0; }
.fb-map .fb-map__blatt--sheet .fb-map__blatt-zu { position: static; flex: 0 0 44px; width: 44px; height: 44px; }
.fb-map__blatt-inhalt { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fb-map .fb-map__blatt--sheet .fb-map__karte { display: flex; flex-direction: column; padding: 0; }
.fb-map .fb-map__blatt--sheet .fb-map__karte :is(.fb-map__ort-name,.fb-map__karte-name) { margin-right: 0; order: -3; }
.fb-map .fb-map__blatt--sheet .fb-map__karte > .fb-map__status { order: -2; }
.fb-map .fb-map__blatt--sheet .fb-map__aktionen { flex-wrap: nowrap; gap: 6px; max-width: 100%; margin: 4px 0 0; overflow: visible; flex: none; }
.fb-map .fb-map__blatt--sheet .fb-map__knopf { min-width: 44px; height: 44px; min-height: 44px; white-space: nowrap; }
.fb-map .fb-map__blatt--sheet .fb-map__knopf--haupt { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.fb-map .fb-map__blatt--sheet .fb-map__knopf--symbol { width: 44px; }
.fb-map .fb-map__blatt--sheet .fb-map__knopf--haupt > svg { display: none; }
.fb-map .fb-map__blatt--sheet .fb-map__karte-foto { order: 2; margin: 10px 0 0; }
.fb-map .fb-map__blatt--sheet .fb-map__status { max-width: 100%; white-space: normal; }
/* 0.15 (Beraterprüfung Punkt 2): Aktionszeile auch im Ortspanel einzeilig – derselbe Weg wie im Ortsblatt.
   Route flexibel, Symbolknöpfe fest (Maus 40, Finger 44 px). Reicht der Platz nicht, blendet infoblatt.js
   (kuerzeRoute) zuerst die Symbole im Routenknopf aus (.fb-map__knopf--kurz), dann kürzt es auf „Route“ –
   der zugängliche Name bleibt vollständig (aria-label). Die Ellipse ist nur letzte Sicherung. Desktop-Maße
   (Panel 340 px, Knöpfe 40 px, Abstand 8 px) bleiben; früher rutschten Symbolknöpfe in eine zweite Zeile.
   Innenabstand der Route im Panel 12 statt 16 px: So passt „Route planen“ mit Symbolen auch in WebKit (SF-Schrift)
   neben drei 40-px-Knöpfe in die 308 px Inhaltsbreite. */
.fb-map .fb-map__blatt--seite .fb-map__aktionen { flex-wrap: nowrap; }
.fb-map .fb-map__blatt--seite .fb-map__knopf--haupt { flex: 1 1 auto; min-width: 0; padding-inline: 12px; }
.fb-map .fb-map__blatt .fb-map__knopf--haupt > span:not(.fb-map__vh) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fb-map .fb-map__blatt .fb-map__knopf--kurz > svg { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fb-map .fb-map__blatt { transition: none; }
}

/* --- Seitenpanel auf breiten Karten (0.9.5, ersetzt das Popup am Ort) ------------------------------
   Rechts in der Karte zwischen Filtergruppe (oben) und Quellenangabe (unten) – top/bottom/width setzt
   infoblatt.js (passeEin). Wird der Inhalt länger als die Karte hoch ist, scrollt das Panel; abgeschnitten
   wird nichts. Fährt von rechts herein; die Karte rückt den Ort links daneben in die Mitte. */
.fb-map__blatt--seite {
  left: auto; right: 12px; top: 12px; bottom: auto; width: 340px; max-width: calc(100% - 24px);
  max-height: none; height: auto; z-index: 6;
  padding: 16px 16px 16px; border-radius: calc(var(--_k-radius) + 4px);
  box-shadow: 0 6px 24px rgb(16 24 40 / 0.18), 0 1px 3px rgb(16 24 40 / 0.12);
  transform: translateX(calc(100% + 24px)); opacity: 0;
  transition: transform 0.22s ease-out, opacity 0.16s ease-out;
}
/* Inhalt bestimmt die Höhe; nur wenn er nicht passt, reicht das Panel bis unten und scrollt */
.fb-map__blatt--seite { max-height: calc(100% - 24px); }
.fb-map__blatt--seite.fb-map__blatt--offen { transform: none; opacity: 1; }
.fb-map__blatt--seite .fb-map__blatt-zu { top: 10px; right: 10px; }

/* Foto oben in der Infokarte (0.9.13): randlos bis an die Kante des Blatts/Panels, feste Box – nichts springt.
   Seitenpanel 3 : 2, Blatt am Handy flacher (2 : 1), damit Name und Knöpfe sichtbar bleiben. */
.fb-map__karte-foto {
  margin: -16px -16px 14px; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--fb-map-hintergrund, #eaf0f3);
  border-radius: calc(var(--_k-radius) + 4px) calc(var(--_k-radius) + 4px) 0 0;
}
.fb-map__blatt:not(.fb-map__blatt--seite) .fb-map__karte-foto {
  margin: -20px -16px 14px; aspect-ratio: 2 / 1;
  border-radius: calc(var(--_k-radius) + 8px) calc(var(--_k-radius) + 8px) 0 0;
}
.fb-map__karte-foto picture { display: block; height: 100%; }
.fb-map .fb-map__karte-foto img.fb-map__karte-bild {
  display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover;
  opacity: 0; transition: opacity 0.25s ease-out;
}
.fb-map .fb-map__karte-foto--da img.fb-map__karte-bild { opacity: 1; }
/* Kreuz und Griff liegen über dem Foto: heller Grund, leichter Schatten */
.fb-map__blatt:has(.fb-map__karte-foto) .fb-map__blatt-zu { background: rgb(255 255 255 / 0.94); box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }
.fb-map__blatt:has(.fb-map__karte-foto) .fb-map__blatt-griff { z-index: 1; background: rgb(255 255 255 / 0.85); }
.fb-map__blatt:has(.fb-map__karte-foto) .fb-map__blatt-zu { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .fb-map .fb-map__karte-foto img.fb-map__karte-bild { opacity: 1; transition: none; }
}

/* --- Knöpfe (Popup und Liste) --------------------------------------- */

/* Knöpfe umbrechen statt kürzen: „Route planen“ bleibt immer ganz lesbar (Entscheidung Nutzer 27.9.) –
   reicht der Platz nicht, rutschen die Symbolknöpfe in die nächste Zeile */
.fb-map__aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-map__knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; box-sizing: border-box;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap;
  color: #1f2933; background: #fff; border: 1px solid var(--_rahmen);
  border-radius: var(--_k-radius); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, filter 0.15s;
}
.fb-map__knopf:hover { background: #f4f6f8; border-color: #c3ccd4; }
.fb-map__knopf--haupt { flex: 1 0 auto; max-width: 100%; color: var(--_haupt-text); background: var(--_haupt-hg); border-color: var(--_haupt-rahmen); }
/* Hover ohne Farbänderung (0.9.5): früher filter: brightness(0.9) – dunkle Schrift auf abgedunkeltem Grün verlor
   Kontrast. Jetzt Schatten + Unterstreichung, Farben und Kontrast bleiben wie im Ruhezustand. */
.fb-map__knopf--haupt:hover { background: var(--_haupt-hg); border-color: var(--_haupt-rahmen); box-shadow: 0 2px 8px rgb(16 24 40 / 0.22); }
.fb-map__knopf--haupt:hover > span:not(.fb-map__vh) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.fb-map__knopf--symbol { flex: none; width: 40px; padding: 0; }
/* Gegen Link-Farben von MapLibre UND Theme (Zero One/UIkit: „a:hover { color: … }“ färbte die Schrift im
   Routenknopf dunkelgrün – schlecht lesbar, snow-experts.at 2.10.2026). Gilt auch für Leiste und Liste
   außerhalb der Karte (.fb-map__betriebe, .fb-map__orte). */
:is(.fb-map, .fb-map__orte, .fb-map__betriebe, .fb-karte) a.fb-map__knopf, :is(.fb-map, .fb-map__orte, .fb-map__betriebe, .fb-karte) a.fb-map__knopf:hover { text-decoration: none; }
:is(.fb-map, .fb-map__orte, .fb-map__betriebe, .fb-karte) a.fb-map__knopf--haupt,
:is(.fb-map, .fb-map__orte, .fb-map__betriebe, .fb-karte) a.fb-map__knopf--haupt:hover { color: var(--_haupt-text); }
:is(.fb-map, .fb-map__orte, .fb-map__betriebe, .fb-karte) a.fb-map__knopf:not(.fb-map__knopf--haupt),
:is(.fb-map, .fb-map__orte, .fb-map__betriebe, .fb-karte) a.fb-map__knopf:not(.fb-map__knopf--haupt):hover { color: #1f2933; }
.fb-map__knopf:focus-visible, .fb-map__link:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
.fb-map__knopf[hidden], .fb-map__link[hidden] { display: none; }

/* --- Quellenangabe in der Kartenecke (Paket L) ---------------------- */
/* Deckend weiß statt MapLibres halbtransparentem Grund: Kontrast hängt nicht von der Karte ab
   (#1f2933 auf #fff = 14,9:1), Schrift 12 px (≥ 11 px), Links unterstrichen. */
.fb-map .maplibregl-ctrl-attrib.maplibregl-compact { margin: 10px; border: 0; background-color: #fff; color: #1f2933; font-size: 12px; line-height: 18px; }
.fb-map .maplibregl-ctrl-attrib a { padding: 0; color: #1f2933; text-decoration: underline; text-underline-offset: 0.15em; }
.fb-map .maplibregl-ctrl-attrib-button:focus-visible { outline: 3px solid #1f2933; outline-offset: 1px; }
.fb-map .maplibregl-ctrl-bottom-right { max-width: calc(100% - 10px); }

/* --- Bildunterschrift ------------------------------------------------- */

.fb-map__caption { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.5; }
.fb-map__adresse { display: block; font-size: 0.875rem; }
.fb-map__route { display: inline-block; margin-top: 0.15rem; font-weight: 600; font-size: 0.875rem; }
.fb-map__quellzeile { display: block; margin-top: 0.15rem; color: var(--_leise); }
.fb-map__credit { color: var(--_leise); }
/* Agentur (Option „agentur“): hinter der Quellenangabe, bleibt stehen, wenn die Kartenecke die Quellen übernimmt */
.fb-map__agentur { color: var(--_leise); white-space: nowrap; }
.fb-map__credit + .fb-map__agentur::before { content: " · "; }
.fb-map__agentur a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.fb-map__agentur a:focus-visible { outline: 3px solid var(--_fokus, currentColor); outline-offset: 2px; }
.fb-map--quelle-in-karte .fb-map__credit + .fb-map__agentur::before { visibility: hidden; }
/* Quellenangabe einmal (Paket B, OSMF): Sind alle Karten der Seite geladen, trägt die Kartenecke sie –
   die Bildunterschrift wird unsichtbar. Ihr Layoutplatz einschließlich Theme-Abständen bleibt
   erhalten, damit weder Figur noch Folgeinhalt springen. Vor dem Laden bleibt sie sichtbar. */
.fb-map--quelle-in-karte .fb-map__credit,
.fb-map--quelle-in-karte .fb-map__caption--nur-quelle { visibility: hidden; }

/* --- Liste unter der Karte ------------------------------------------- */

.fb-map__orte {
  --_rahmen: var(--fb-map-rahmen, #dde3e8);
  --_leise: var(--fb-map-text-leise, #5f6b76);
  margin: 16px 0 0;
  font-family: var(--fb-map-kaertchen-schrift, inherit);
  font-size: 15px; line-height: 22px; color: #1f2933;
}
.fb-map__orte .fb-map__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  /* Mindestbreite 320 px: „Route planen“ + zwei Symbolknöpfe passen in eine Zeile – auch am Finger (44 px) */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.fb-map__ort {
  position: relative;   /* Bezug für „Auf der Karte zeigen“ in der Ecke */
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; box-sizing: border-box;
  border: 1px solid var(--_rahmen); border-radius: calc(var(--_k-radius) + 4px);
  background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
  scroll-margin-top: 6rem;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.fb-map__orte .fb-map__ort { margin: 0; }   /* Theme: li { margin … } */
.fb-map__orte .fb-map__ort p { margin: 0; }   /* Zeilen ohne Außenabstand (Theme: p, .text p) – auch der Hinweis, früher !important */
.fb-map__ort:hover { box-shadow: 0 4px 16px rgb(16 24 40 / 0.08); }
/* Hervorhebung ohne dickeren Rahmen – nichts verschiebt sich */
.fb-map__ort--fokus { border-color: var(--_kontur); box-shadow: 0 0 0 1px var(--_kontur); }
.fb-map__ort--fokus:hover { box-shadow: 0 0 0 1px var(--_kontur), 0 4px 16px rgb(16 24 40 / 0.08); }
.fb-map__ort:target, .fb-map__ort--gewaehlt { box-shadow: 0 0 0 3px var(--_kontur); }   /* gewählt: Popup offen (karte.js) */
.fb-map__ort-kopf { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.fb-map__nr {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--_zier, var(--fb-map-akzent, #33404d)); color: var(--_zier-text, #fff);
  font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.fb-map__ort-kat {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--_leise);
}
.fb-map__ort-name { font-size: 17px; font-weight: 700; line-height: 24px; }
.fb-map__ort .fb-map__infos .fb-map__ui { margin-top: 3px; }
.fb-map__ort .fb-map__aktionen { margin-top: auto; padding-top: 8px; }
/* „Auf der Karte zeigen“ steht oben rechts auf Höhe der Kopfzeile statt als vierter Knopf in der Aktionsleiste –
   sonst bricht die Leiste in schmalen Kärtchen um (Nacharbeit Paket B). Nur per CSS: Im DOM bleibt der Knopf
   hinter „Route planen“ (Tab-Reihenfolge, Vorlagen im Projekt), und er erscheint erst mit JS (hidden). */
/* 0.9.5: beschriftet („Auf der Karte“) mit Rahmen in der Linkfarbe – als reines Symbol wurde er übersehen. */
.fb-map__ort .fb-map__ort-kopf { padding-right: 132px; }
.fb-map__ort .fb-map__aktionen [data-zeige] {
  position: absolute; top: 10px; right: 10px;
  height: 32px; padding: 0 12px 0 10px; gap: 6px; font-size: 13px;
  color: var(--_link); background: #fff; border-color: currentColor;
}
.fb-map__ort .fb-map__aktionen [data-zeige]:hover { color: var(--_akzent-text); background: var(--_akzent); border-color: var(--_akzent); }
.fb-map__ort .fb-map__aktionen [data-zeige] .fb-map__ui { flex: none; }
/* Die Liste misst ihre eigene Breite, auch in einer schmalen Desktopspalte. */
.fb-map__orte { container-type: inline-size; container-name: fb-orte; }
@container fb-orte (max-width: 640px) {
  .fb-map__ort .fb-map__ort-kopf { padding-right: 0; }
  .fb-map__ort .fb-map__aktionen [data-zeige] { position: static; height: 44px; min-width: 44px; }
}
/* Route verlässt die Website: kleines ↗ hinter dem Text */
.fb-map__extern { flex: none; margin-left: -2px; opacity: 0.85; }

.fb-map__symbol { flex: none; vertical-align: -0.15em; }
.fb-map__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }   /* SVG-Sprite (0.9.7): nicht display:none – sonst zeichnen manche Browser die <use> nicht */
.fb-map__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- In der Nähe ------------------------------------------------------ */

.fb-map__naehe {
  margin: 0.75rem 0 0; padding: 0.75rem 1rem;
  border: 1px solid var(--_rahmen); border-radius: var(--fb-map-radius, 8px); background: #fff;
}
.fb-map__naehe > summary { cursor: pointer; padding: 0; font-size: inherit; font-weight: 700; min-height: 24px; }
.fb-map__anzahl { font-weight: 400; color: var(--_leise); }
.fb-map__naehe[open] > summary { margin-bottom: 0.25rem; }

/* Filter der Liste (0.9.7): dieselben Chips wie auf der Karte, umbrechend statt Wischzeile – alles im Blick */
.fb-map__naehe-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.6rem 0 0.25rem; }
.fb-map__naehe-filter[hidden] { display: none; }
.fb-map__naehe-filter .fb-map__chip:hover { background: #f4f6f8; border-color: #9aa5b1; }
.fb-map__naehe-filter .fb-map__chip[aria-pressed="true"] { color: var(--_akzent-text); background: var(--_akzent); border-color: var(--_kontur); }
.fb-map__naehe-filter .fb-map__chip[aria-pressed="true"]:hover { box-shadow: 0 0 0 2px var(--_kontur); }
/* „Jetzt geöffnet“: Schalter mit grünem Punkt (wie das Schild „Geöffnet“) – aus = weiß, an = Fläche */
/* 0.9.21: nur im Schalter – vorher galt die Regel für jeden .fb-map__punkt (Punkt in Pisten-/Wege-Kärtchen war grün statt in der Linienfarbe) */
.fb-map__chip--offen .fb-map__punkt { width: 8px; height: 8px; border-radius: 50%; background: #2b8a3e; flex: none; }
.fb-map__chip--offen[aria-pressed="true"] .fb-map__punkt { background: currentColor; }
.fb-map .fb-map__filter .fb-map__chip--offen:first-of-type { margin-left: 4px; }

/* Abschnitte je Gegend bzw. Filtergruppe */
.fb-map__abschnitt { margin: 1rem 0 0; }
/* Breite Liste (0.9.9): Abschnitte (Gegenden) in Spalten – gemessen an der Liste selbst (Container), nicht am Fenster;
   gilt gestapelt wie mit Panel. Filter, „Alle n anzeigen“ und Sortierung bleiben unverändert (Hülle .fb-map__abschnitte). */
.fb-map__naehe { container: fb-naehe / inline-size; }
@container fb-naehe (min-width: 900px) {
  .fb-map__abschnitte { columns: 2; column-gap: 40px; margin-top: 1rem; }
  .fb-map__abschnitte > .fb-map__abschnitt { margin: 0; padding-bottom: 1rem; break-inside: avoid; }
}
@container fb-naehe (min-width: 1340px) { .fb-map__abschnitte { columns: 3; } }
.fb-map__abschnitt[hidden] { display: none; }
:is(.fb-map__orte, .fb-karte__naehe) .fb-map__abschnitt-titel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  margin: 0 0 0.25rem; padding: 0 0 0.35rem; border-bottom: 1px solid var(--_rahmen);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #3b4652;
}
.fb-map__abschnitt-weg {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--_leise);
}
.fb-map__abschnitt-weg[hidden] { display: none; }
.fb-map__abschnitt-zahl {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; box-sizing: border-box;
  background: #eef1f3; color: #3b4652; font-size: 11px; line-height: 18px; text-align: center; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.fb-map__naehe-symbol {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; background: var(--farbe, #495057); color: #fff;
}
.fb-map__naehe-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px;
  color: var(--_leise); font-size: 13px; line-height: 20px;
}
/* Zeile: Kopf (Symbol, Name, Kategorie · Wegzeit · Schild) zum Aufklappen, rechts „Auf der Karte“ und „Route“ */
:is(.fb-map__orte, .fb-karte__naehe) .fb-map__naehe-liste { list-style: none; margin: 0; padding: 0; }
:is(.fb-map__orte, .fb-karte__naehe) .fb-map__naehe-liste .fb-map__nah {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  margin: 0; padding: 0; border-top: 1px solid #eef1f3; border-radius: 6px;
  transition: background-color 0.15s;
}
:is(.fb-map__orte, .fb-karte__naehe) .fb-map__naehe-liste .fb-map__nah:first-child { border-top: 0; }
:is(.fb-map__orte, .fb-karte__naehe) .fb-map__naehe-liste .fb-map__nah:is([hidden], .fb-map__nah--weiter) { display: none; }
.fb-map__nah:hover, .fb-map__nah.fb-map__nah--gewaehlt { background: #f6f8f9; }
.fb-map__nah.fb-map__nah--gewaehlt { box-shadow: inset 3px 0 0 var(--_kontur); }
.fb-map__nah-details { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.fb-map__nah-kopf {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.5rem var(--_aktionen, 13.5rem) 0.5rem 0.25rem;
  list-style: none; cursor: pointer; border-radius: 6px;
}
.fb-map__nah-kopf::-webkit-details-marker { display: none; }
.fb-map__nah-kopf:focus-visible { outline: 3px solid var(--_fokus); outline-offset: -3px; }
.fb-map__nah-details[data-leer] > .fb-map__nah-kopf { cursor: default; }
.fb-map__nah-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fb-map__nah-name { font-weight: 600; line-height: 1.35; }
.fb-map__nah-pfeil { flex: none; margin-top: 3px; color: var(--_leise); transition: transform 0.15s; }
.fb-map__nah-details[open] .fb-map__nah-pfeil { transform: rotate(180deg); }
.fb-map__nah-mehr { padding: 0 0.25rem 0.75rem calc(24px + 0.85rem); }
.fb-map__nah-mehr .fb-map__infos { margin: 0.25rem 0 0; }
.fb-map__nah-mehr .fb-map__hinweis { margin: 0.5rem 0 0; }
.fb-map__nah-kontakt { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0.5rem 0 0; font-size: 14px; }
.fb-map__nah-kontakt a { display: inline-flex; align-items: center; gap: 6px; color: var(--_link); font-weight: 600; text-underline-offset: 2px; }
.fb-map__nah-aktionen {
  grid-column: 2; grid-row: 1; z-index: 1; display: flex; gap: 6px; padding: 0.45rem 0.25rem 0 0;
}
.fb-map__nah-knopf {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid #c4ccd3; border-radius: 999px; background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--_link); text-decoration: none; cursor: pointer;
}
.fb-map__nah-knopf[hidden] { display: none; }
:is(.fb-map__orte, .fb-karte__naehe) a.fb-map__nah-knopf:is(:link, :visited, :hover, :focus) { color: var(--_link); text-decoration: none; }
.fb-map__nah-knopf:hover { border-color: var(--_kontur); box-shadow: 0 0 0 1px var(--_kontur); }
.fb-map__nah-knopf:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
.fb-map__mehr { display: block; margin: 0.4rem 0 0 calc(24px + 0.85rem); padding: 6px 0; min-height: 24px; }   /* Ziel ≥ 24 px (WCAG 2.5.8) */
.fb-map__mehr[hidden] { display: none; }
.fb-map__naehe-leer { margin: 1rem 0 0.25rem; color: var(--_leise); }
.fb-map__naehe-leer[hidden] { display: none; }
.fb-map__naehe-leer p { margin: 0 0 0.25rem; }

.fb-map__weg { display: inline-flex; align-items: center; gap: 4px; }
.fb-map__weg[hidden], .fb-map__weg-ab[hidden] { display: none; }
:is(.fb-map__orte, .fb-karte__naehe) .fb-map__weg-ab { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--_leise); }
.fb-map__link {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--_link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
/* Marker, über dessen Zeile die Maus steht: größer, mit Ring, obenauf */
.maplibregl-marker.fb-map__poi--hervor { z-index: 5; }
.fb-map__poi--hervor svg { transform: scale(1.25); }
.fb-map__poi.fb-map__poi--hervor { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--_kontur); }

/* Schmal (Handy): Knöpfe nur als Symbol (Name für Screenreader/Tooltip), Kopf rückt nach */
@media (max-width: 640px) {
  .fb-map__nah-kopf { --_aktionen: 6.25rem; }
  .fb-map__nah-knopf { width: 40px; padding: 0; justify-content: center; }
  .fb-map__nah-knopf > span[aria-hidden] { display: none; }
  .fb-map__naehe { padding: 0.75rem 0.75rem; }
  .fb-map__nah-mehr { padding-left: calc(24px + 0.85rem); }
}
@media (min-width: 641px) { .fb-map__nah-kopf { --_aktionen: 14rem; } }

/* Finger statt Maus: 44 px Tippflächen (Apple HIG, WCAG 2.2 AAA) */
@media (pointer: coarse) {
  .fb-map__knopf, .fb-map__betrieb { height: 44px; }
  .fb-map__knopf--symbol { width: 44px; }
  .fb-map__ort .fb-map__aktionen [data-zeige] { top: 6px; right: 6px; height: 44px; }   /* Die anklickbare Fläche selbst ist 44 px hoch. */
  .fb-map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .fb-map .fb-map__blatt--seite .fb-map__blatt-zu { width: 44px; height: 44px; }   /* 0.15: Ortspanel im Querformat am Handy */
  .fb-map__chip, .fb-map__filter--zeile .fb-map__chip { height: 44px; padding: 0 16px; }
  .fb-map__nah-knopf { height: 44px; min-width: 44px; }
  .fb-map__nah-kopf { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .fb-map__nah-aktionen { padding-top: 0.4rem; }
  .fb-map__naehe-filter .fb-map__chip { height: 44px; padding: 0 16px; }
  .fb-map__mehr { padding: 12px 0; }
}

/* --- Anordnung mit Kärtchen-Panel (0.9.9) ------------------------------------------------------------
   Nur bei Anordnung kaertchen-rechts/-links/eigene (Snippet: <div class="fb-karte fb-karte--panel …">); „gestapelt“
   hat keinen solchen Rahmen und sieht exakt aus wie 0.9.8. Nebeneinander hängt an der Breite des Blocks, nicht des
   Fensters (Container Queries): mittel 640–959 px, breit ab 960 px (wie die Umbrüche von UIkit/Zero One). Darunter –
   und in Browsern ohne Container Queries – untereinander in DOM-Reihenfolge (= Reihenfolge am Handy, kein order). */
.fb-karte {
  container: fb-karte / inline-size;
  --_rahmen: var(--fb-map-rahmen, #dde3e8);
  --_leise: var(--fb-map-text-leise, #5f6b76);
  --_abstand: var(--fb-karte-abstand, 16px);
  width: 100%; box-sizing: border-box;
}
.fb-karte .fb-map { margin: 0; }   /* Theme: figure { margin … } */
.fb-karte__reihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--_abstand); }
.fb-karte__karte, .fb-karte__panel, .fb-karte__naehe { min-width: 0; }
.fb-karte__panel { container: fb-panel / inline-size; }
.fb-karte > .fb-karte__naehe { margin-top: var(--_abstand); }
.fb-karte .fb-map__naehe { margin: 0; }   /* Abstand kommt vom Raster */
/* Kärtchen-Panel und „In der Nähe“ stehen außerhalb von .fb-map__orte: dieselbe Schrift wie die Liste */
:is(.fb-map__panel, .fb-karte__naehe) {
  font-family: var(--fb-map-kaertchen-schrift, inherit);
  font-size: 15px; line-height: 22px; color: #1f2933;
}
/* Spalten je Seite und Verhältnis – wirken erst, wenn eine Container-Abfrage unten nebeneinander schaltet */
/* Quellenzeile (.fb-karte--quellen, nur erste Karte der Seite) als eigene Zeile über die volle Breite */
.fb-karte--seite-rechts > .fb-karte__reihe { --_spalten: minmax(0, var(--_kf, 1fr)) minmax(0, var(--_pf, 1fr)); --_flaechen: "karte panel"; }
.fb-karte--seite-links > .fb-karte__reihe { --_spalten: minmax(0, var(--_pf, 1fr)) minmax(0, var(--_kf, 1fr)); --_flaechen: "panel karte"; }
.fb-karte--seite-rechts.fb-karte--naehe-seitenspalte > .fb-karte__reihe { --_flaechen: "karte panel" ". naehe"; }
.fb-karte--seite-links.fb-karte--naehe-seitenspalte > .fb-karte__reihe { --_flaechen: "panel karte" "naehe ."; }
.fb-karte--quellen.fb-karte--seite-rechts > .fb-karte__reihe { --_flaechen: "karte panel" "quellen quellen"; }
.fb-karte--quellen.fb-karte--seite-links > .fb-karte__reihe { --_flaechen: "panel karte" "quellen quellen"; }
.fb-karte--quellen.fb-karte--seite-rechts.fb-karte--naehe-seitenspalte > .fb-karte__reihe { --_flaechen: "karte panel" "quellen quellen" ". naehe"; }
.fb-karte--quellen.fb-karte--seite-links.fb-karte--naehe-seitenspalte > .fb-karte__reihe { --_flaechen: "panel karte" "quellen quellen" "naehe ."; }
/* Format „auto“ neben dem Panel: immer 4:3 (das Snippet liefert nur das 4:3-Bild) – auch über 960 px Fensterbreite */
.fb-karte--panel .fb-map--auto .fb-map__stage { aspect-ratio: 4 / 3; }

/* Nebeneinander (mittel 1-1 bzw. breit 2-1 / 1-1 / 3-2). Gleiche Höhe: Die Karte füllt die Zeile – die Bühne wächst
   über ihr Format hinaus, wenn das Kärtchen höher ist (Format = Mindestmaß; Standbild mit object-fit: cover, die
   Pin-Namen rechnet lage.js mit), höchstens bis Hochformat 3:4 (100cqi = Breite der Kartenspalte, die dafür Container
   ist); ist das Kärtchen noch höher, bleibt die Karte oben stehen. Alle Orte des Panels liegen in derselben Zelle; die verborgenen nur unsichtbar
   (visibility: hidden – nicht vorgelesen, nicht erreichbar), so bleibt die Höhe beim Umschalten gleich, nichts springt. */
@container fb-karte (min-width: 640px) and (max-width: 959.98px) {
  .fb-karte--mittel-1-1 > .fb-karte__reihe { grid-template-columns: var(--_spalten); grid-template-areas: var(--_flaechen); }
  .fb-karte--mittel-1-1 > .fb-karte__reihe > .fb-karte__karte { grid-area: karte; display: flex; flex-direction: column; container-type: inline-size; }
  .fb-karte--mittel-1-1 > .fb-karte__reihe > .fb-karte__panel { grid-area: panel; display: flex; flex-direction: column; }
  .fb-karte--mittel-1-1 > .fb-karte__reihe > .fb-karte__naehe { grid-area: naehe; }
  .fb-karte--mittel-1-1 > .fb-karte__reihe > .fb-karte__quellen { grid-area: quellen; }
  .fb-karte--mittel-1-1 .fb-karte__karte > .fb-map { flex: 1 0 auto; display: flex; flex-direction: column; }
  .fb-karte--mittel-1-1 .fb-karte__karte .fb-map__stage { flex: 1 0 auto; max-height: calc(100cqi * 4 / 3); }
  .fb-karte--mittel-1-1 .fb-map__panel { flex: 1 0 auto; display: grid; }
  .fb-karte--mittel-1-1 .fb-map__panel > .fb-map__panel-ort { grid-area: 1 / 1; }
  .fb-karte--mittel-1-1 .fb-map__panel > .fb-map__panel-ort[hidden] { display: flex; visibility: hidden; }
  /* Kärtchen kürzer als die Karte: Kopf und Angaben oben, Aktionen (Knopfzeile aus kaertchen.php, kurze Wege, Panel-Knopf) unten */
  .fb-karte--mittel-1-1 .fb-map__panel-inhalt { flex: 1 0 auto; }
  .fb-karte--mittel-1-1 .fb-map__panel .fb-map__panel-inhalt > .fb-map__aktionen { margin-top: auto; padding-top: 6px; }
}
@container fb-karte (min-width: 960px) {
  .fb-karte__reihe { --_abstand: var(--fb-karte-abstand, 24px); }
  .fb-karte > .fb-karte__naehe { margin-top: var(--fb-karte-abstand, 24px); }
  .fb-karte--breit-2-1 > .fb-karte__reihe { --_kf: 2fr; --_pf: 1fr; }
  .fb-karte--breit-3-2 > .fb-karte__reihe { --_kf: 3fr; --_pf: 2fr; }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) > .fb-karte__reihe { grid-template-columns: var(--_spalten); grid-template-areas: var(--_flaechen); }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) > .fb-karte__reihe > .fb-karte__karte { grid-area: karte; display: flex; flex-direction: column; container-type: inline-size; }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) > .fb-karte__reihe > .fb-karte__panel { grid-area: panel; display: flex; flex-direction: column; }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) > .fb-karte__reihe > .fb-karte__naehe { grid-area: naehe; }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) > .fb-karte__reihe > .fb-karte__quellen { grid-area: quellen; }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) .fb-karte__karte > .fb-map { flex: 1 0 auto; display: flex; flex-direction: column; }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) .fb-karte__karte .fb-map__stage { flex: 1 0 auto; max-height: calc(100cqi * 4 / 3); }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) .fb-map__panel { flex: 1 0 auto; display: grid; }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) .fb-map__panel > .fb-map__panel-ort { grid-area: 1 / 1; }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) .fb-map__panel > .fb-map__panel-ort[hidden] { display: flex; visibility: hidden; }
  /* Kärtchen kürzer als die Karte: Kopf und Angaben oben, Aktionen (Knopfzeile aus kaertchen.php, kurze Wege, Panel-Knopf) unten */
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) .fb-map__panel-inhalt { flex: 1 0 auto; }
  :is(.fb-karte--breit-2-1, .fb-karte--breit-1-1, .fb-karte--breit-3-2) .fb-map__panel .fb-map__panel-inhalt > .fb-map__aktionen { margin-top: auto; padding-top: 6px; }
}
/* Quellenangabe mit Panel: eigener Absatz unter Karte und Kärtchen. Einmal-Regel wie in der Bildunterschrift – sind
   alle Karten geladen (.fb-map--quelle-in-karte an der Figur), trägt die Kartenecke sie; „Karte: FINK Brot“ bleibt.
   Ohne :has() bleibt sie zusätzlich stehen (doppelt, aber nie fehlend). */
/* Abstand wie die Bildunterschrift (8 px) statt der Rasterlücke */
.fb-karte__reihe > .fb-karte__quellen { margin: calc(8px - var(--_abstand)) 0 0; }
.fb-karte:has(.fb-map--quelle-in-karte) .fb-karte__quellen .fb-map__credit,
.fb-karte:has(.fb-map--quelle-in-karte) .fb-karte__quellen.fb-map__caption--nur-quelle { visibility: hidden; }
.fb-karte:has(.fb-map--quelle-in-karte) .fb-karte__quellen .fb-map__credit + .fb-map__agentur::before { visibility: hidden; }
/* Schmaler Block in breitem Fenster: Standort-Leiste als Wischzeile wie am Handy (@media oben gilt nur fürs Fenster) */
@container fb-karte (max-width: 639.98px) {
  .fb-karte > .fb-map__betriebe {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 40px 2px 2px; margin-bottom: 10px;
  }
  .fb-karte > .fb-map__betriebe--rechts { mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .fb-karte > .fb-map__betriebe--links { mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
  .fb-karte > .fb-map__betriebe--links.fb-map__betriebe--rechts { mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
  .fb-karte > .fb-map__betriebe .fb-map__betrieb { flex: none; scroll-snap-align: start; }
}
/* „In der Nähe“ in schmaler Spalte (Seitenspalte, schmaler Block): Knöpfe nur als Symbol wie am Handy */
@container fb-naehe (max-width: 600px) {
  .fb-karte__naehe .fb-map__nah-kopf { --_aktionen: 6.25rem; }
  .fb-karte__naehe .fb-map__nah-knopf { width: 40px; padding: 0; justify-content: center; }
  .fb-karte__naehe .fb-map__nah-knopf > span[aria-hidden] { display: none; }
  .fb-karte__naehe .fb-map__naehe { padding: 0.75rem; }
}

/* Das Kärtchen im Panel: dieselbe Vorlage wie in der Liste (kaertchen.php), aber als ruhige, große Karte –
   Rahmen, weicher Schatten, 20–24 px Innenabstand, größerer Name. Ohne Foto trägt ein Akzentstreifen oben die
   Marke; mit Foto steht es randlos oben (3:2-Box, nichts springt). Verborgene Orte: hidden (panel.js). */
.fb-karte .fb-map__panel { margin: 0; }
.fb-map__panel .fb-map__panel-ort {
  margin: 0; padding: 0; gap: 0; overflow: hidden;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 8px 24px rgb(16 24 40 / 0.06);
}
.fb-map__panel .fb-map__panel-ort:hover { box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 8px 24px rgb(16 24 40 / 0.06); }
.fb-map__panel-ort[hidden] { display: none; }
.fb-map__panel-ort:not(.fb-map__panel-ort--mit-foto):not(.fb-map__panel-ort--ohne-foto)::before {   /* eigene panel.php ohne Kopf */
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--_zier);
}
.fb-map__panel-ort:focus { outline: none; }
.fb-map__panel-ort:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
.fb-map__panel .fb-map__ort p { margin: 0; }   /* Theme: p, .text p */
.fb-map__panel-foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--fb-map-hintergrund, #eaf0f3); }
.fb-map__panel-foto picture { display: block; height: 100%; }
.fb-map__panel img.fb-map__panel-bild { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; }
.fb-map__panel-inhalt { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; }
@container fb-panel (min-width: 400px) { .fb-map__panel-inhalt { padding: 24px; } }
/* „Auf der Karte“ (karte.js zeigt ihn) in der Ecke des Inhalts, nicht über dem Foto */
.fb-map__panel .fb-map__ort .fb-map__aktionen [data-zeige] { top: 14px; right: 14px; }
.fb-map__panel .fb-map__ort-name { font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: -0.01em; text-wrap: balance; }
.fb-map__panel .fb-map__ort .fb-map__aktionen { margin-top: 6px; padding-top: 0; }
.fb-map__panel-wege { padding-top: 14px; border-top: 1px solid var(--_rahmen); }
.fb-map__panel .fb-map__panel-titel {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--_leise);
}
.fb-map__panel .fb-map__panel-wegliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fb-map__panel .fb-map__panel-weg {
  display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; margin: 0;
  font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums;
}
.fb-map__panel-weg .fb-map__ui { margin-top: 2px; color: var(--_leise); }
/* Eigener Knopf (z. B. „Jetzt buchen“): der eine primäre Knopf – volle Breite, ≥ 44 px, Text darf umbrechen.
   Farben: --fb-map-panel-knopf-hintergrund / -text, sonst wie „Route planen“ (Hauptknopf-Variablen). */
.fb-map__panel .fb-map__knopf--panel {
  width: 100%; height: auto; min-height: 44px; margin-top: 4px; padding: 10px 18px;
  font-size: 15px; line-height: 22px; white-space: normal; text-align: center;
  background: var(--fb-map-panel-knopf-hintergrund, var(--_haupt-hg));
  border-color: var(--fb-map-panel-knopf-hintergrund, var(--_haupt-rahmen));
}
:is(.fb-karte, .fb-map__panel) a.fb-map__knopf.fb-map__knopf--panel,
:is(.fb-karte, .fb-map__panel) a.fb-map__knopf.fb-map__knopf--panel:hover { color: var(--fb-map-panel-knopf-text, var(--_haupt-text)); }
.fb-map__panel .fb-map__knopf--panel:hover {
  background: var(--fb-map-panel-knopf-hintergrund, var(--_haupt-hg));
  border-color: var(--fb-map-panel-knopf-hintergrund, var(--_haupt-rahmen));
  box-shadow: 0 2px 8px rgb(16 24 40 / 0.22); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
/* Mit eigenem Knopf wird „Route planen“ zur Kontur – nur ein primärer Knopf je Kärtchen */
.fb-map__panel-ort--mit-knopf a.fb-map__knopf.fb-map__knopf--haupt,
.fb-map__panel-ort--mit-knopf a.fb-map__knopf.fb-map__knopf--haupt:hover { color: var(--_link); background: #fff; border-color: currentColor; }
.fb-map__panel-ort--mit-knopf a.fb-map__knopf.fb-map__knopf--haupt:hover { box-shadow: 0 0 0 1px currentColor; }

/* --- 0.9.12: Kärtchen ohne Foto, „So findest du uns“, „Link teilen“ ------------------------------------------- */

/* Ohne Foto: ruhiger Kopf statt leerer Fläche – Höhenlinien in der Akzentfarbe (nur Verläufe, kein Bild, CSP-tauglich),
   darauf das Kategorie-Symbol wie der Marker auf der Karte. Ohne color-mix(): schlichte helle Fläche. */
.fb-map__panel-kopf {
  position: relative; height: 88px;
  background: #eef2f0;
  background:
    repeating-radial-gradient(circle at 82% 135%, transparent 0 15px, color-mix(in srgb, var(--_zier) 15%, transparent) 15px 16px),
    repeating-radial-gradient(circle at 8% -60%, transparent 0 21px, color-mix(in srgb, var(--_zier) 9%, transparent) 21px 22px),
    linear-gradient(135deg, color-mix(in srgb, var(--_zier) 13%, #fff), color-mix(in srgb, var(--_zier) 4%, #fff));
}
@container fb-panel (min-width: 400px) { .fb-map__panel-kopf { height: 104px; } }
.fb-map__panel-kopf-symbol {
  position: absolute; left: 20px; bottom: 16px;
  display: grid; place-items: center; width: 48px; height: 48px; box-sizing: border-box;
  color: #fff; background: var(--farbe, var(--_akzent));
  border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 2px 8px rgb(16 24 40 / 0.18);
}
@container fb-panel (min-width: 400px) { .fb-map__panel-kopf-symbol { left: 24px; bottom: 20px; } }
.fb-map__panel-kopf-symbol svg { display: block; }

/* „So findest du uns“: die letzten Meter, ruhig abgesetzt vor den Knöpfen */
.fb-map__finden {
  margin: 4px 0 0; padding: 12px 14px;
  background: #f3f6f5; background: color-mix(in srgb, var(--_zier) 6%, #fff);
  border-left: 3px solid var(--_zier); border-radius: 0 var(--_k-radius) var(--_k-radius) 0;
}
.fb-map__ort .fb-map__finden p { margin: 0; }   /* Theme: p, .text p */
.fb-map__ort .fb-map__finden-titel {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--_leise); color: color-mix(in srgb, var(--_zier) 55%, #1f2933);   /* 55 %: auch helle Markenfarben ≥ 4,5 : 1 */
}
.fb-map__finden-titel .fb-map__ui { flex: none; }
.fb-map__ort .fb-map__finden-text { font-size: 15px; line-height: 22px; white-space: pre-line; overflow-wrap: anywhere; }

/* „Link teilen“: Symbolknopf in der Knopfzeile; nach dem Kopieren kurz „Link kopiert“ darüber */
.fb-map__knopf[data-teilen] { position: relative; }
.fb-map__knopf[data-teilen].fb-map__knopf--kopiert::after {
  content: attr(data-kopiert);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 2;
  padding: 4px 8px; white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 600; line-height: 16px; color: #fff; background: #1f2933; border-radius: 4px;
  animation: fb-map-blase 0.18s ease-out;
}
@keyframes fb-map-blase { from { opacity: 0; transform: translate(-50%, 4px); } }

/* --- 0.9.12: gewählter Ort auf der Karte – etwas größer, Ring in seiner Farbe, ein sanfter Puls ------------------- */
/* Größe über width/height (nie transform am Marker – den setzt MapLibre); Anker „center“ bleibt mittig */
.fb-map__poi { transition: width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease; }
.maplibregl-marker.fb-map__poi--offen { z-index: 5; }
.fb-map__poi.fb-map__poi--offen {
  width: 34px; height: 34px;
  box-shadow: 0 0 0 2px var(--farbe, #495057), 0 3px 10px rgb(0 0 0 / 0.35);
}
.fb-map__poi--offen svg { transform: scale(1.2); }
/* Puls: zweimal, dann Ruhe. ::before ist die Tippfläche – der Puls nimmt ::after */
.fb-map__poi--offen::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--farbe, #495057); opacity: 0;
  animation: fb-map-puls 1.6s ease-out 2;
}
@keyframes fb-map-puls { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
/* Nadeln: gewählt (Infokarte offen) wie im Panel aktiv – dazu ein kleiner Hüpfer beim Wechsel */
.maplibregl-marker.fb-map__pin--offen { z-index: 4; }
.fb-map__pin.fb-map__pin--offen { filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.45)); }
.fb-map__pin--offen svg, .fb-map__pin--offen:hover svg, .fb-map__pin--offen:focus-visible svg { transform: scale(1.22); }
.fb-map__pin:is(.fb-map__pin--aktiv, .fb-map__pin--offen) svg { animation: fb-map-hupf 0.45s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes fb-map-hupf {
  0% { transform: scale(1.1) translateY(0); }
  45% { transform: scale(1.22) translateY(-6px); }
  100% { transform: scale(1.22) translateY(0); }
}

/* --- 0.9.15: Premium-Einträge ------------------------------------------------------------------------------ */
/* Etikett „Partner“/„Anzeige“/„Empfohlen“: klein, ruhig, gut lesbar – neben dem Namen bzw. in der Kopfzeile */
.fb-map .fb-map__premium-etikett, .fb-map__premium-etikett {
  display: inline-flex; align-items: center; vertical-align: 2px; margin-left: 6px; padding: 0 6px; height: 18px;
  font-size: 11px; font-weight: 600; line-height: 18px; letter-spacing: 0.02em; text-transform: none; white-space: nowrap;
  color: var(--_leise); background: #f1f3f5; border: 1px solid #e3e7eb; border-radius: 4px;
}
.fb-map__ort-kopf .fb-map__premium-etikett { margin-left: 0; vertical-align: middle; }
/* Liste: Foto statt Symbol, feiner Rand in der Kategoriefarbe */
.fb-map__nah-vorschau {
  flex: none; display: block; width: 48px; height: 48px; margin-top: 1px; overflow: hidden;
  border-radius: 8px; background: var(--fb-map-hintergrund, #eaf0f3);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--farbe, #d5dbe0);
}
.fb-map .fb-map__nah-vorschau img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; }
:is(.fb-map__orte, .fb-karte__naehe) .fb-map__naehe-liste .fb-map__nah--premium { background: linear-gradient(90deg, rgb(241 243 245 / 0.7), transparent 60%); }
/* Karte: etwas größer, kräftiger Rand – und nie im Zahlenkreis (marker.js) */
.maplibregl-marker.fb-map__poi--premium { z-index: 3; }
.fb-map__poi.fb-map__poi--premium { width: 30px; height: 30px; border-width: 2.5px; box-shadow: 0 0 0 1.5px var(--farbe, #495057), 0 2px 6px rgb(0 0 0 / 0.35); }
.fb-map__poi.fb-map__poi--premium.fb-map__poi--offen { width: 36px; height: 36px; }

/* Weniger Bewegung: keine Übergänge und Animationen in Karte, Standort-Leiste und Liste – auch nicht die des Themes
   („* { transition: all … }“) oder von MapLibre (Marker, Warte-Kreisel des Standort-Knopfs, Spezifität bis 0,5,1).
   :not(#fb-map-ruhig) trifft jedes Element und zählt wie eine ID (1,1,0): stärker als jede Klassen-Regel – dafür
   stand früher !important. */
@media (prefers-reduced-motion: reduce) {
  :is(.fb-map, .fb-map__orte, .fb-map__betriebe, .fb-karte) :not(#fb-map-ruhig) { transition: none; animation: none; }
  /* Pseudo-Elemente trifft die Regel oben nicht (0.9.12): Puls aus, „Link kopiert“ ohne Einblenden */
  .fb-map__poi--offen::after, .fb-map__knopf[data-teilen].fb-map__knopf--kopiert::after { animation: none; }
}

/* --- Touren & Wanderwege (0.9.21, snippets/karte/touren.php) ---------------------------------------
   Kopf mit Filter, Gruppen aufklappbar wie „In der Nähe“, Kärtchen im Raster (Container Query: 1–3 Spalten),
   Stufe als Farbband wie die Wanderwege (blau/rot/schwarz). Im Kärtchen der Karte (.fb-map__karte--tour)
   derselbe Inhalt ohne Rahmen. */
.fb-map__touren {
  --_rahmen: var(--fb-map-rahmen, #dde3e8);
  --_leise: var(--fb-map-text-leise, #5f6b76);
  container: fb-touren / inline-size;
  margin: 1.5rem 0 0; font-family: var(--fb-map-kaertchen-schrift, inherit);
  font-size: 15px; line-height: 22px; color: #1f2933;
}
.fb-map__touren-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 0.75rem; }
.fb-map__touren .fb-map__touren-titel { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.fb-map__touren-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-map__touren-filter[hidden] { display: none; }
.fb-map__touren-filter .fb-map__chip:hover { background: #f4f6f8; border-color: #9aa5b1; }
.fb-map__touren-filter .fb-map__chip[aria-pressed="true"] { color: var(--_akzent-text); background: var(--_akzent); border-color: var(--_kontur); }
.fb-map__touren-filter .fb-map__chip:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
.fb-map__stufe-punkt { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--farbe, #c0392b); box-shadow: 0 0 0 1.5px #fff; }
.fb-map__touren-filter .fb-map__chip[aria-pressed="true"] .fb-map__stufe-punkt { box-shadow: 0 0 0 1.5px #fff; }

.fb-map__tourgruppe { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--_rahmen); border-radius: var(--fb-map-radius, 8px); background: #fff; }
.fb-map__tourgruppe[hidden] { display: none; }
.fb-map__tourgruppe > summary { cursor: pointer; font-weight: 700; }
.fb-map__tourgruppe > summary:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; border-radius: 4px; }
.fb-map__tourgruppe[open] > summary { margin-bottom: 0.75rem; }
.fb-map__tourgruppe .fb-map__anzahl { font-weight: 400; color: var(--_leise); }

.fb-map__touren .fb-map__tourliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@container fb-touren (min-width: 640px) { .fb-map__touren .fb-map__tourliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fb-touren (min-width: 960px) { .fb-map__touren .fb-map__tourliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fb-map__touren .fb-map__tour {
  display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px;
  background: #fff; border: 1px solid var(--_rahmen); border-top: 4px solid var(--farbe); border-radius: var(--_k-radius);
}
.fb-map__touren .fb-map__tour[hidden], .fb-map__wegzeile[hidden] { display: none; }
.fb-map__tour--leicht, .fb-map__stufe--leicht { --farbe: #1f6fb2; }
.fb-map__tour--mittel, .fb-map__stufe--mittel { --farbe: #c0392b; }
.fb-map__tour--schwer, .fb-map__stufe--schwer { --farbe: #24292e; }
.fb-map__tour-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--_leise); }
.fb-map__stufe { padding: 1px 8px; border-radius: 999px; background: var(--farbe, #c0392b); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; letter-spacing: 0.04em; }
:is(.fb-map__touren, .fb-map__karte) .fb-map__tour-name { margin: 0; font-size: 17px; line-height: 23px; font-weight: 700; }
:is(.fb-map__touren, .fb-map__karte) .fb-map__tour-werte { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.fb-map__tour-werte div { margin: 0; }
.fb-map__tour-werte dt { margin: 0; font-size: 12px; line-height: 16px; color: var(--_leise); }
.fb-map__tour-werte dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Höhenprofil: Fläche in Stufenfarbe; im Kärtchen der Karte zum Darüberfahren (Linie, Wert, Punkt auf der Karte) */
.fb-map__profil-box { position: relative; }
.fb-map__profil { display: block; width: 100%; height: 44px; overflow: visible; touch-action: pan-y; }
.fb-map__profil path { fill: color-mix(in srgb, var(--farbe, #c0392b) 22%, #fff); stroke: var(--farbe, #c0392b); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fb-map__profil--aktiv { cursor: crosshair; height: 64px; }
.fb-map__profil--aktiv:focus-visible { outline: 3px solid var(--_fokus, #1f5f99); outline-offset: 2px; border-radius: 2px; }
.fb-map__profil-linie { stroke: #1f2933; stroke-width: 1.5; }
.fb-map__profil-wert {
  position: absolute; top: 2px; left: clamp(0px, calc(var(--x, 0%) - 5.5em), calc(100% - 11em)); width: 11em; text-align: center; white-space: nowrap;
  padding: 1px 6px; border-radius: 4px; background: #1f2933; color: #fff; font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.fb-map__profil-wert[hidden] { display: none; }
/* Profil als Schieber (0.9.23): runder Griff auf der Linie, beim ersten Mal mit Hinweis „Ziehen“ */
.fb-map__profil-griff {
  position: absolute; left: var(--x, 0%); top: var(--y, 50%); width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: #fff; border: 3px solid #1f2933; box-sizing: border-box;
  box-shadow: 0 1px 3px rgb(31 41 51 / 0.35); pointer-events: none; transition: transform 0.12s ease;
}
.fb-map__profil-box--aktiv .fb-map__profil-griff { transform: scale(1.2); }
.fb-map__profil-hinweis {
  position: absolute; left: 22px; top: var(--y, 50%); transform: translateY(-50%); pointer-events: none;
  padding: 1px 8px; border-radius: 999px; background: #1f2933; color: #fff; font-size: 12px; line-height: 18px; white-space: nowrap;
}
.fb-map__profil-hinweis::before { content: "↔ "; }
@media (pointer: coarse) { .fb-map__profil-griff { width: 24px; height: 24px; margin: -12px 0 0 -12px; } }
@media (prefers-reduced-motion: reduce) { .fb-map__profil-griff { transition: none; } }

:is(.fb-map__touren, .fb-map__karte) .fb-map__tour-text { margin: 0; font-size: 14px; line-height: 20px; }
:is(.fb-map__touren, .fb-map__karte) .fb-map__tour-einkehr { margin: 0; font-size: 14px; line-height: 22px; color: var(--_leise); }
.fb-map__tour-halt { white-space: nowrap; }
.fb-map__tour-halt .fb-map__status { vertical-align: 1px; }
.fb-map__tour-ort { padding: 0; border: 0; background: none; font: inherit; color: var(--_link, #1f5f99); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: normal; }
.fb-map__tour-ort:disabled { color: inherit; text-decoration: none; cursor: default; }

/* Einstieg bei Touren mit Anreise: wo, wie weit, Parken/Bus, „Anfahrt planen“ */
.fb-map__tour-einstieg { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: #f4f6f8; font-size: 14px; line-height: 20px; }
.fb-map__tour-einstieg p { margin: 0; }
.fb-map__tour-anreise { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--_leise); }
.fb-map__tour-anreise > span { display: inline-flex; align-items: center; gap: 4px; }
.fb-map__tour-einstieg .fb-map__knopf { justify-self: start; }

.fb-map__tour-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.fb-map__tour-aktionen .fb-map__knopf[hidden] { display: none; }
.fb-map__knopf--leise { height: 40px; padding: 0 12px; font-weight: 500; color: var(--_leise); }
.fb-map__knopf--klein { height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; }

/* Markierte Wanderwege: kompakte Zeilen */
.fb-map__wegliste { list-style: none; margin: 0; padding: 0; }
.fb-map__wegzeile { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--_rahmen); }
.fb-map__wegzeile:first-child { border-top: 0; }
.fb-map__wegzeile-text { display: grid; min-width: 0; }
.fb-map__wegzeile-name { font-weight: 600; }
.fb-map__wegzeile-meta { font-size: 13px; line-height: 18px; color: var(--_leise); font-variant-numeric: tabular-nums; }
.fb-map__wegzeile .fb-map__knopf[hidden] { display: none; }
.fb-map__touren .fb-map__mehr { margin: 0.5rem 0 0; padding: 6px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--_link); cursor: pointer; }
.fb-map__touren .fb-map__mehr[hidden] { display: none; }

.fb-map__touren .fb-map__touren-leer { margin: 0.5rem 0; color: var(--_leise); }
.fb-map__touren .fb-map__tour-hinweis { margin: 0.75rem 0 0; font-size: 12px; line-height: 17px; color: var(--_leise); }

/* Kärtchen in der Karte */
.fb-map__karte--tour { display: flex; flex-direction: column; gap: 8px; }
.fb-map__karte--tour .fb-map__tour-kopf { padding-right: 36px; }
.fb-map__karte--tour .fb-map__tour-aktionen { padding-top: 8px; }
/* Wege-Kärtchen: gestrichelter Strich statt Punkt – wie die Hervorhebung auf der Karte (keine Verwechslung mit Touren) */
.fb-map__karte .fb-map__punkt--strich { width: 18px; height: 0; border-radius: 0; background: none; border-top: 3px dashed var(--farbe); }

/* --- Wetter (0.9.21): eine ruhige Zeile je Tour und am Kopf der Touren – Symbol, Tag, Spanne, Zustand ------- */
.fb-map__touren-titelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.fb-map__wetter { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0; font-size: 13px; line-height: 20px; color: #1f2933; }
.fb-map__wetter[hidden] { display: none; }
.fb-map__wetter-titel { flex-basis: 100%; font-size: 12px; line-height: 16px; color: var(--_leise); }
.fb-map__wetter--ort .fb-map__wetter-titel { flex-basis: auto; }
.fb-map__wetter-tage { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.fb-map__wetter-tag { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-map__wetter-tag strong { font-weight: 600; }
.fb-map__wetter-zustand { color: var(--_leise); }
.fb-map__wetter-symbol { flex: none; color: #3b4652; }
.fb-map__wetter-warnung { flex-basis: 100%; color: #8a4b00; font-weight: 600; }
.fb-map__tour-hinweis a { color: inherit; }
.fb-map__wetter-hinweis { flex-basis: 100%; color: #1f4f7a; }

/* --- Wetterleiste (0.9.21): ruhige Fläche unter den Kärtchen der Orte. Je Ort eine Zeile – Name, drei Tage
   (Symbol, Tiefst-/Höchstwert), Schneefallgrenze. Breit (ab 720 px): Name | Tage | Grenze nebeneinander; schmaler:
   Name darüber, Tage in drei Spalten, Grenze darunter. Farben über Variablen anpassbar (projekt.css). */
.fb-map__wetterrahmen { container: fb-wetter / inline-size; }
.fb-map__wetterleiste {
  --_leise: var(--fb-map-text-leise, #66727d);
  --_flaeche: var(--fb-map-wetter-flaeche, #f6f8f9);
  --_linie: var(--fb-map-wetter-linie, rgb(0 0 0 / 0.06));
  display: grid; margin: 1rem 0 0; padding: 12px 16px 6px; border-radius: 14px; background: var(--_flaeche);
  font-family: var(--fb-map-kaertchen-schrift, inherit); font-size: 13px; line-height: 18px; color: #26313b;
}
.fb-map__wetterleiste[hidden] { display: none; }
.fb-map__wetterleiste-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding-bottom: 6px; }
.fb-map__wetterleiste .fb-map__wetterleiste-titel { margin: 0; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--_leise); }
.fb-map__wetterleiste-quelle { margin: 0; font-size: 11px; line-height: 16px; color: var(--_leise); }
.fb-map__wetterleiste-quelle a { color: inherit; }
.fb-map__wetter--zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; border-top: 1px solid var(--_linie); font-size: 13px; }
.fb-map__wetter--zeile[hidden] { display: none; }
.fb-map__wetter--zeile .fb-map__wetter-titel { flex-basis: auto; font-size: 13px; line-height: 18px; font-weight: 600; color: inherit; }
.fb-map__wetter-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fb-map__wetter-kachel { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; }
.fb-map__wetter-kachel .fb-map__wetter-symbol { flex: none; width: 24px; height: 24px; margin-top: 2px; color: #4a5763; }
.fb-map__wetter-kachel--sonnig .fb-map__wetter-symbol, .fb-map__wetter-kachel--heiter .fb-map__wetter-symbol { color: #c08a2d; }
.fb-map__wetter-kachel--schnee .fb-map__wetter-symbol, .fb-map__wetter-kachel--schauer .fb-map__wetter-symbol,
.fb-map__wetter-kachel--regen .fb-map__wetter-symbol { color: #3b73a8; }
.fb-map__wetter-kachel--gewitter .fb-map__wetter-symbol { color: #a35a00; }
.fb-map__wetter-text { display: flex; flex-direction: column; min-width: 0; }
.fb-map__wetter-tagname { font-size: 11px; line-height: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--_leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-map__wetter-temp { font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-map__wetter-min { color: var(--_leise); }
.fb-map__wetter-strich { margin: 0 3px; color: var(--_leise); opacity: 0.6; }
.fb-map__wetter-max { font-weight: 600; }
.fb-map__wetter-extra { font-size: 11px; line-height: 15px; color: var(--_leise); }
.fb-map__wetter-extra--schnee { color: #2f5f8f; font-weight: 600; }
.fb-map__wetter-extra--warnung { color: #a35a00; font-weight: 600; }
.fb-map__wetter-grenze { font-size: 12px; line-height: 16px; color: var(--_leise); }
/* Gemeinsame Schneefallgrenze im Kopf neben „Wetter“; die Quelle rechts (schmal: eigene Zeile) */
.fb-map__wetterleiste-kopf { justify-content: flex-start; column-gap: 12px; }
.fb-map__wetterleiste-kopf .fb-map__wetter-grenze--gemeinsam { padding: 2px 10px 2px 8px; border: 1px solid var(--fb-map-eis-rand, #cfe2f2); border-radius: 999px;
  background: var(--fb-map-eis, #eaf4fb); color: var(--fb-map-eis-text, #1d4f7c); font-weight: 500; }
.fb-map__wetter-grenze { display: inline-flex; align-items: center; gap: 5px; }
.fb-map__wetter-grenzsymbol { flex: none; color: #3b78ad; }
.fb-map__wetterleiste-kopf .fb-map__wetterleiste-quelle { flex-basis: 100%; }
.fb-map__wetterleiste--grenze-gemeinsam .fb-map__wetter--zeile .fb-map__wetter-grenze { display: none; }
@container fb-wetter (min-width: 720px) {
  .fb-map__wetterleiste-kopf .fb-map__wetterleiste-quelle { flex-basis: auto; margin-left: auto; }
  .fb-map__wetterleiste--grenze-gemeinsam .fb-map__wetter--zeile { grid-template-columns: 12em minmax(0, 1fr); }
  .fb-map__wetter--zeile { grid-template-columns: 12em minmax(0, 1fr) 14rem; column-gap: 20px; align-items: center; }
  .fb-map__wetter-grenze { justify-self: end; white-space: nowrap; }
}
@container fb-wetter (max-width: 419px) {
  .fb-map__wetterleiste { padding-inline: 12px; }
  .fb-map__wetter-kacheln { gap: 4px; }
  .fb-map__wetter-kachel { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .fb-map__wetter-text { align-items: center; }
  .fb-map__wetter-kachel .fb-map__wetter-symbol { width: 22px; height: 22px; }
}

/* --- Pisten & Lifte (0.9.22) -------------------------------------------
   Kärtchen: Werte wie bei den Touren, Höhenprofil eingefärbt nach Gefälle (pisten.js);
   Liste unter „In der Nähe“: gleiche Hülle (.fb-map__naehe), Zeilen mit Farbpunkt, Kurzangaben und „Auf der Karte“. */
.fb-map__karte .fb-map__pisten-werte { margin: 2px 0 8px; }
.fb-map__karte--piste .fb-map__karte-text { color: var(--_leise); }
/* Gefälle-Stufen: < 20 % · 20–30 % · 30–40 % · > 40 % – hell bis dunkel, unabhängig von den Pistenfarben */
.fb-map__profil--piste path { stroke: none; }
.fb-map__profil--piste .fb-map__gefaelle--1, .fb-map__gefaelle-farbe.fb-map__gefaelle--1 { fill: #b9d3ea; background: #b9d3ea; }
.fb-map__profil--piste .fb-map__gefaelle--2, .fb-map__gefaelle-farbe.fb-map__gefaelle--2 { fill: #f2c464; background: #f2c464; }
.fb-map__profil--piste .fb-map__gefaelle--3, .fb-map__gefaelle-farbe.fb-map__gefaelle--3 { fill: #e07b39; background: #e07b39; }
.fb-map__profil--piste .fb-map__gefaelle--4, .fb-map__gefaelle-farbe.fb-map__gefaelle--4 { fill: #a3271f; background: #a3271f; }
.fb-map__profil--piste .fb-map__profil-kante { fill: none; stroke: #1f2933; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.fb-map__gefaelle-legende { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--_leise); font-variant-numeric: tabular-nums; }
.fb-map__gefaelle-stufe { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fb-map__gefaelle-farbe { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* Teilen im Kärtchen (0.9.27): rundes Symbol oben rechts neben dem Kreuz, gleiche Form wie das Kreuz */
.fb-map__blatt-teilen {
  position: absolute; top: 8px; right: 50px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #f1f3f5; color: #1f2933; cursor: pointer;
}
.fb-map__blatt--seite .fb-map__blatt-teilen { top: 10px; right: 52px; }
.fb-map__blatt-teilen:hover, .fb-map__blatt-zu:hover { background: #e4e8ec; }
.fb-map__blatt-teilen:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
.fb-map__teilen-meldung {
  position: absolute; top: 50px; right: 10px; padding: 2px 10px; border-radius: 999px; background: #1f2933; color: #fff;
  font-size: 12px; line-height: 20px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.fb-map__teilen-meldung--da { opacity: 1; }
.fb-map__blatt--seite .fb-map__teilen-meldung { top: 52px; }
/* Platz für zwei runde Knöpfe neben Art und Name */
.fb-map__blatt .fb-map__karte--teilbar .fb-map__karte-kat { padding-right: 90px; }
.fb-map .fb-map__blatt .fb-map__karte--teilbar .fb-map__karte-name { margin-right: 90px; }
@media (prefers-reduced-motion: reduce) { .fb-map__teilen-meldung { transition: none; } }

.fb-map__pistenliste[hidden] { display: none; }
.fb-map__pistenliste-inhalt > .fb-map__leer { margin: 0.5rem 0 0.25rem; color: var(--_leise); }
.fb-map__einsteiger { margin: 0.6rem 0 0.75rem; padding: 0.6rem 0.75rem; border-radius: 8px; background: #f3f8fc; }
:is(.fb-map__orte, .fb-karte__naehe) .fb-map__einsteiger-titel { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.fb-map__einsteiger-text { margin: 2px 0 0.25rem; font-size: 13px; line-height: 18px; color: var(--_leise); }
.fb-map__einsteiger .fb-map__pistenzeile:first-child { border-top: 0; }
:is(.fb-map__orte, .fb-karte__naehe) .fb-map__pistenliste-zeilen { list-style: none; margin: 0; padding: 0; }
.fb-map__pistenliste { container: fb-pisten / inline-size; }
@container fb-pisten (min-width: 760px) {
  .fb-map__pistenliste > .fb-map__pistenliste-inhalt > .fb-map__pistenliste-zeilen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
.fb-map__pistenzeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  margin: 0; padding: 8px 0; border-top: 1px solid #eef1f3;
}
.fb-map__pisten-punkt { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--farbe, #c0392b); box-shadow: 0 0 0 1.5px #fff; }
.fb-map__pistenfarbe--leicht { --farbe: #1f6fb2; }
.fb-map__pistenfarbe--mittel { --farbe: #c0392b; }
.fb-map__pistenfarbe--schwer { --farbe: #24292e; }
.fb-map__pistenfarbe--route { --farbe: #e67e22; }
.fb-map__pistenfarbe--unbekannt { --farbe: #5b6670; }
.fb-map__pistenfarbe--lift { --farbe: #5b6670; }
.fb-map__pistenfarbe--lift .fb-map__pisten-punkt, .fb-map__pisten-punkt.fb-map__pistenfarbe--lift { border-radius: 2px; }
.fb-map__pisten-text { display: flex; flex-direction: column; min-width: 0; }
.fb-map__pisten-name { font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.fb-map__pisten-mass { font-size: 13px; line-height: 18px; color: var(--_leise); font-variant-numeric: tabular-nums; }
.fb-map__pisten-zeigen { width: auto; max-width: none; flex: none; }
/* Schmal: nur das Symbol (Name steht im aria-label) – sonst drückt der Knopf den Namen weg */
@container fb-pisten (max-width: 480px) {
  .fb-map__pisten-zeigen { padding: 0 9px; }
  .fb-map__pisten-zeigen span { display: none; }
}
.fb-map__pisten-filter .fb-map__chip { gap: 6px; }
.fb-map__pisten-filter .fb-map__pisten-punkt { width: 10px; height: 10px; }
.fb-map__pistenliste .fb-map__mehr { margin: 0.5rem 0 0; padding: 6px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--_link); cursor: pointer; }
.fb-map__pistenliste .fb-map__mehr[hidden] { display: none; }
.fb-map__pisten-hinweis { margin: 0.5rem 0 0; font-size: 12px; line-height: 16px; color: var(--_leise); }

/* Die Filterzeile gehört im Vollbild zur Bühne; links bleiben Zoom und Vollbild erreichbar. */
.fb-map__filter--vollbild {
  position: absolute; z-index: 6; top: 8px; left: 48px; right: 8px;
  margin: 0; background: rgb(255 255 255 / 0.96); border-radius: 8px;
}

/* 0.13: mobile Treffpunktkarte. Rechts bleibt ebenfalls Platz für feste Theme-Knöpfe,
   auch wenn sie beim Scrollen auf halber Kartenhöhe stehen. */
.fb-map { --_unten-frei: 0px; }
/* Optionsrahmen gegen allgemeine details-/summary-Regeln des Kundenthemes schützen. */
.fb-map__optionen { padding: 0; border: 0; }
.fb-map__optionen[hidden] { display: none; }
.fb-map__optionen > summary { margin: 0; padding: 0; min-height: 44px; display: flex; align-items: center; cursor: pointer; font: inherit; font-weight: 600; }
.fb-map__optionen > summary:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
@media (max-width: 640px) {
  .fb-map { --_unten-frei: var(--fb-map-unten-frei, 224px); }
  .fb-map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .fb-map .maplibregl-ctrl-top-left { display: flex; flex-wrap: wrap; gap: 6px; left: 8px; top: 8px; max-width: calc(100% - var(--_unten-frei) - 16px); }
  .fb-map .maplibregl-ctrl-top-left .maplibregl-ctrl { margin: 0; }
  .fb-map .maplibregl-ctrl-top-left .maplibregl-ctrl-group { display: flex; }
  .fb-map .maplibregl-ctrl-top-left .maplibregl-ctrl-group button + button { border-top: 0; border-left: 1px solid #ddd; }
  .fb-map .maplibregl-ctrl-bottom-left { bottom: 0; max-width: calc(100% - var(--_unten-frei)); }
  .fb-map .maplibregl-ctrl-bottom-left .fb-map__legende { max-width: calc(100% - 10px); max-height: 90px; box-sizing: border-box; overflow: auto; }
  .fb-map .fb-map__legende > summary { min-height: 44px; }
  .fb-map .fb-map__legende li { white-space: normal; overflow-wrap: anywhere; }
  .fb-map .fb-map__stage--vollbild .fb-map__legende { max-height: 40svh; }
  .fb-map .maplibregl-ctrl-bottom-right { right: var(--_unten-frei); max-width: calc(100% - var(--_unten-frei) - 10px); }
  .fb-map__optionen { margin: 8px var(--_unten-frei) 8px 0; }
  .fb-map__optionen .fb-map__filter { display: flex; flex-wrap: wrap; margin: 0; }
  .fb-map__blatt.fb-map__blatt--fluss { position: relative; inset: auto; width: auto; max-width: none; max-height: none; margin-top: 8px; padding: 72px 16px 16px; transform: none; border-radius: var(--_k-radius); overflow: visible; box-shadow: 0 1px 5px rgb(16 24 40 / .14); }
  .fb-map__blatt--fluss .fb-map__blatt-griff { display: none; }
  .fb-map__blatt-zu, .fb-map__blatt-teilen { width: 44px; height: 44px; }
  .fb-map__blatt--fluss .fb-map__blatt-zu { top: 16px; left: 16px; right: auto; }
  .fb-map__blatt--fluss .fb-map__blatt-teilen { top: 16px; left: 68px; right: auto; }
  .fb-map__blatt--fluss .fb-map__karte-foto { margin-right: 0; }
  .fb-map__blatt--fluss .fb-map__knopf { min-height: 44px; white-space: normal; }
  .fb-map__blatt--fluss :is(a,button) { scroll-margin-bottom: calc(24px + var(--_unten-frei)); }
  .fb-map__stage--vollbild { --_unten-frei: env(safe-area-inset-bottom, 0px); }
  .fb-map[class] .fb-map__stage--vollbild { height: 100%; max-height: none; aspect-ratio: auto; }
  .fb-map__stage--vollbild .fb-map__optionen { position: absolute; top: 60px; right: 8px; max-width: calc(100% - 16px); max-height: 35%; overflow: auto; z-index: 8; background: white; padding: 0 10px; border-radius: 8px; }
}

@media (max-width: 640px) {
  /* Quellen stehen unmittelbar an der Karte, ohne den Hauptmarker zu überdecken. */
  .fb-map .maplibregl-ctrl-bottom-right.fb-map__quellen-fuss { position: relative; inset: auto; max-width: none; margin-right: var(--_unten-frei); }
  .fb-map__quellen-fuss .maplibregl-ctrl { float: none; }
  .fb-map .fb-map__quellen-fuss .maplibregl-ctrl-attrib { margin: 6px 0; width: auto; }
}

/* Bereits im Server-HTML reserviert: Laden und automatisches Einklappen der Quellen
   verschieben weder die Figur noch nachfolgende Inhalte. */
.fb-map__mobil-ablage { display: none; }
@media (max-width: 640px) {
  .fb-map__mobil-ablage { display: block; }
  .fb-map__quellenplatz { height: 96px; box-sizing: border-box; padding-top: 4px; padding-right: var(--_unten-frei); overflow: auto; }
  .fb-map__quellen-vorab { display: block; font-size: 12px; line-height: 18px; padding: 6px 0; }
  .fb-map__optionenplatz { min-height: 44px; padding-right: var(--_unten-frei); box-sizing: border-box; }
  .fb-map__optionenplatz > .fb-map__optionen { margin: 0; }
  .fb-map .fb-map__quellenplatz .maplibregl-ctrl-bottom-right.fb-map__quellen-fuss { margin-right: 0; }
}
@media (max-width: 640px) {
  /* Mobil übernimmt die feste Quellenzeile schon vor Aktivierung die Lizenzangabe. */
  .fb-map .fb-map__credit, .fb-map .fb-map__caption--nur-quelle,
  .fb-karte .fb-karte__quellen .fb-map__credit,
  .fb-karte .fb-karte__quellen.fb-map__caption--nur-quelle { display: none; }
  .fb-map .fb-map__credit + .fb-map__agentur::before,
  .fb-karte .fb-karte__quellen .fb-map__credit + .fb-map__agentur::before { content: none; }
}

.fb-map__optionenplatz.fb-map__optionenplatz--leer { min-height: 0; }
@media (max-width: 640px) {
  .fb-map .fb-map__quellen-fuss .maplibregl-ctrl-attrib { min-height: 44px; padding-right: 48px; box-sizing: border-box; }
  .fb-map .fb-map__quellen-fuss .maplibregl-ctrl-attrib-button { width: 44px; height: 44px; top: 0; right: 0; background-position: center; background-repeat: no-repeat; }
}

/* Auch am Desktop kann der feste Theme-Knopf beim Scrollen die Kartenecke erreichen.
   Die konstante Reserve verhindert Layoutwechsel beim Ein-/Ausblenden des Themes. */
@media (min-width: 641px) {
  .fb-map .maplibregl-ctrl-bottom-right { right: var(--fb-map-unten-frei, 224px); max-width: calc(100% - var(--fb-map-unten-frei, 224px) - 10px); }
  .fb-map .fb-map__stage--vollbild .maplibregl-ctrl-bottom-right { right: 0; max-width: calc(100% - 10px); }
}

@media (max-width: 640px) {
  /* Nur Aktionen brauchen die freie Spalte; Namen und Adressen bleiben lesbar. */
  .fb-map__blatt--fluss .fb-map__aktionen { max-width: calc(100% - var(--_unten-frei)); }
  .fb-map .fb-map__blatt--fluss .fb-map__karte :is(.fb-map__karte-name,.fb-map__ort-name) { margin-right: 0; }
}
.fb-map__blatt--seite { right: calc(12px + var(--fb-map-unten-frei, 224px)); }
.fb-map__stage--vollbild .fb-map__blatt--seite { right: 12px; }

@media (max-width: 640px) {
  .fb-map .fb-map__optionen .fb-map__chip {
    max-width: 100%; min-width: 44px; min-height: 44px; height: auto;
    padding: 6px 10px; white-space: normal; overflow-wrap: anywhere; line-height: 18px;
  }
}

@media (max-width: 640px) {
  /* Quellen bleiben auch neben dem breiten Theme-Knopf vollständig scrollbar;
     lange Quellenbegriffe dürfen nicht in den eigenen Infoknopf hineinragen. */
  .fb-map .fb-map__quellen-fuss .maplibregl-ctrl-attrib-inner,
  .fb-map__quellen-vorab { overflow-wrap: anywhere; }
}

/* Ladeantwort reserviert: Frühklick verändert die Dokumenthöhe nicht. */
.fb-map__pisten-status { min-height: 16px; }
.fb-map__pisten-status[hidden] { display: block; visibility: hidden; }

/* 0.15: Schmale Karten richten sich nach ihrem Container. untenFrei bleibt als
   akzeptierte Altoption erhalten, beeinflusst die mobile Kartenfläche nicht mehr. */
.fb-map { container: fb-karte / inline-size; }
.fb-map.fb-map--schmal { --_unten-frei: 0px; }
@container fb-karte (max-width: 640px) {
  .fb-map[class] .fb-map__stage { aspect-ratio: 4 / 5; height: auto; min-height: 0; max-height: 62svh; box-sizing: border-box; }
  .fb-map .fb-map__quellenplatz { display: block; position: absolute; z-index: 7; bottom: 8px; left: 8px; right: 8px; height: auto; padding: 0; overflow: visible; }
  .fb-map .fb-map__quellen-vorab { display: block; padding: 4px 8px; background: white; border-radius: 8px; font: 11px/15px system-ui, sans-serif; }
  .fb-map .fb-map__optionenplatz { min-height: 54px; padding: 0; }
  .fb-map .fb-map__optionenplatz--leer { min-height: 0; }
  .fb-map .fb-map__mobil-ablage { display: contents; }
  .fb-map .fb-map__credit, .fb-map .fb-map__caption--nur-quelle { display: none; }
}
.fb-map--aktiv .fb-map__quellenplatz { visibility: hidden; }
.fb-map__quellenplatz { display: none; }
.fb-map.fb-map--schmal .fb-map__quellenplatz { display: block; }
.fb-map.fb-map--schmal :is(.fb-map__filter,.fb-map__legende,.maplibregl-ctrl-attrib) {
  font-family: system-ui, sans-serif;
}
/* Schrift 0.15 (Beraterprüfung 24.10.2026, korrigiert nach Nachtrag PO/Berater 25.10.2026):
   EINE Regel für alle Breiten und Ausrichtungen, zwei Gruppen.
   1. Bedienelemente – immer system-ui, sans-serif, unabhängig von „erben“ und auch bei gesetztem Projektwert
      (--fb-map-kaertchen-schrift gilt hier bewusst NICHT: Bedienelemente sehen in jeder Website gleich aus,
      Maße und Umbrüche der Chips, Pille und Quellen hängen nicht von der Kundenschrift ab).
      Filter mit Chips und „In der Nähe“, Optionen, Kartenecken (Kartenknöpfe, Legende und Pille, Quellen),
      Quellenplatz, Vollbildkopf, Standort-Leiste. Vorher galt das nur an schmalen Karten (Regel darüber); im
      Querformat und breit erbten sie die Website-Schrift bzw. MapLibres Helvetica.
   2. Kärtchen, Ortsblatt (auch das mobile Sheet), Ortspanel, Liste, „In der Nähe“-Liste, Touren, Wetter –
      var(--fb-map-kaertchen-schrift, inherit) an der jeweiligen Fläche oben. Ohne Projektwert (Option „erben“:
      Snow Experts, Lasaco) die Website-Schrift wie in 0.14. Hier bewusst KEIN Schutz gegen Theme-Elementregeln:
      Die Website-Schrift schließt die Überschriftenschrift des Themes ein, und die Kärtchenliste am Desktop
      bleibt so pixelgleich zu 0.14 (Beleg doku/0.15.0/p7-schrift-korrektur). */
:is(.fb-map, .fb-map__betriebe) :is(.fb-map__filter, .fb-map__optionen, .maplibregl-control-container, .fb-map__quellenplatz, .fb-map__vollbild-kopf),
:is(.fb-map__betriebe, .fb-map__betrieb, .fb-map__chip) {
  font-family: system-ui, sans-serif;
}
/* Schutz der Bedienelemente gegen Theme-Regeln für Elemente (a, button, summary, details, h*, p, li { font-family: … }):
   Sie träfen das Element selbst und schlügen die Vererbung. Wurzel davor (0,2,1 bzw. 0,1,1) – wie der Grundschutz oben. */
.fb-map :is(.fb-map__filter, .fb-map__optionen, .maplibregl-control-container, .fb-map__quellenplatz, .fb-map__vollbild-kopf) :is(a, button, summary, details, h1, h2, h3, h4, h5, h6, p, li),
.fb-map__betriebe :is(a, button, summary, details, h1, h2, h3, h4, h5, h6, p, li) {
  font-family: inherit;
}
.fb-map.fb-map--schmal .maplibregl-ctrl-top-left { display: flex; flex-direction: column; flex-wrap: nowrap; left: 8px; top: 8px; max-width: 44px; gap: 8px; }
.fb-map.fb-map--schmal .maplibregl-ctrl-top-right { display: flex; flex-direction: column; right: 8px; top: 8px; max-width: 44px; gap: 8px; }
.fb-map.fb-map--schmal :is(.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right) .maplibregl-ctrl { margin: 0; }
.fb-map.fb-map--schmal .maplibregl-ctrl-top-left .maplibregl-ctrl-group { display: flex; flex-direction: column; }
.fb-map.fb-map--schmal .maplibregl-ctrl-group button { width: 44px; height: 44px; }
.fb-map.fb-map--schmal .maplibregl-ctrl-group button + button { border-left: 0; border-top: 1px solid #ddd; }
.fb-map.fb-map--schmal:not(.fb-map--bewegt) .maplibregl-ctrl-group:has(.fb-map__zuruecksetzen) { display: none; }
.fb-map.fb-map--schmal .fb-map__filter--zeile { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 0; }
.fb-map.fb-map--schmal .fb-map__filter--zeile .fb-map__chip { flex: none; min-height: 44px; min-width: 44px; white-space: nowrap; }
.fb-map.fb-map--schmal .fb-map__filter-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fb-map.fb-map--schmal .maplibregl-ctrl-bottom-left { bottom: 0; max-width: calc(100% - 60px); }
.fb-map.fb-map--schmal .maplibregl-ctrl-bottom-left .fb-map__legende { max-width: none; max-height: none; margin: 0 0 8px 8px; padding: 0 12px; overflow: visible; border-radius: 22px; background: #fff; }
.fb-map.fb-map--schmal .fb-map__legende > summary { min-height: 44px; gap: 8px; font: 600 14px/20px system-ui, sans-serif; }
.fb-map.fb-map--schmal .fb-map__legende li { white-space: normal; overflow-wrap: anywhere; }
.fb-map.fb-map--schmal .maplibregl-ctrl-bottom-right { right: 0; max-width: calc(100% - 16px); }
.fb-map.fb-map--schmal .maplibregl-ctrl-attrib { background: #fff; font-size: 11px; line-height: 15px; min-height: 44px; padding: 5px 48px 5px 8px; box-sizing: border-box; }
.fb-map.fb-map--schmal .maplibregl-ctrl-attrib-button { width: 44px; height: 44px; top: 0; right: 0; background-position: center; background-repeat: no-repeat; }
.fb-map.fb-map--schmal .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { width: 44px; padding: 0; }
.fb-map.fb-map--schmal.fb-map--blatt-offen .maplibregl-ctrl-bottom-left { visibility: hidden; }
.fb-map .fb-map__vollbild-kopf[hidden] { display: none; }
.fb-map .fb-map__vollbild-kopf { position: absolute; z-index: 10; top: 0; left: 0; right: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; background: white; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 8px; }
.fb-map .fb-map__vollbild-kopf .fb-map__filter { grid-column: 1 / -1; }
.fb-map .fb-map__vollbild-kopf .fb-map__betriebe { margin: 0; flex-wrap: nowrap; overflow-x: auto; min-width: 0; }
.fb-map .fb-map__vollbild-zu { width: 44px; height: 44px; border: 0; border-radius: 8px; background: #fff; color: #1f2933; font: 28px/1 system-ui; }
.fb-map[class] .fb-map__stage--pseudo { position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: none; aspect-ratio: auto; z-index: 2147483647; border-radius: 0; overflow: hidden; }
.fb-map .fb-map__stage--pseudo :is(.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right) { top: calc(128px + env(safe-area-inset-top, 0px)); }
.fb-map .fb-map__stage--pseudo :is(.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right) { margin-bottom: env(safe-area-inset-bottom, 0px); }
.fb-map .fb-map__stage--pseudo .maplibregl-ctrl-group:has(.maplibregl-ctrl-fullscreen) { display: none; }
.fb-map.fb-map--pseudo { container-type: normal; position: fixed; inset: 0; z-index: 2147483647; margin: 0; }
.fb-map.fb-map--schmal .fb-map__betrieb { min-height: 44px; font-family: system-ui, sans-serif; }

/* 0.15 Legende auf schmalen Karten (Beraterprüfung 24.10., Punkt 1+3):
   geschlossen eine Pille „Symbol + Legende“ ohne +/–-Suffix; offen ein Sheet nach dem Muster des
   Ortsblatts – Griff und Titel in einer Kopfzeile, rechts daneben dasselbe ✕ (44 px), darunter scrollt
   der Inhalt; solange er weiterscrollt, blendet unten ein Verlauf aus. Höhe höchstens die Hälfte der
   Karte (leiste.js setzt --fb-map-legende-max, sonst halbe Kartenhöhe). Desktop bleibt unverändert. */
.fb-map__legende-zu { display: none; }
.fb-map.fb-map--schmal .fb-map__legende > summary::after { content: none; }
.fb-map.fb-map--schmal .fb-map__legende-symbol { display: block; flex: none; }
.fb-map.fb-map--schmal .fb-map__legende :is(summary, ul, li, span) { font-family: inherit; letter-spacing: normal; text-transform: none; }
.fb-map.fb-map--schmal .maplibregl-ctrl-bottom-left .fb-map__legende[open] {
  --_legende-max: var(--fb-map-legende-max, calc(var(--fb-map-hoehe, 100vh) * .5));
  position: absolute; left: 0; bottom: 0; z-index: 3; margin: 0;
  width: var(--fb-map-breite, 100cqw); max-width: none; max-height: var(--_legende-max);
  box-sizing: border-box; padding: 4px 12px 8px; overflow: hidden;
  background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgb(16 24 40 / 0.16);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.fb-map.fb-map--schmal .fb-map__legende[open] > summary { min-height: 44px; margin: 0; padding: 0 52px 0 0; font-size: 16px; line-height: 22px; touch-action: none; cursor: ns-resize; }
.fb-map.fb-map--schmal .fb-map__legende[open] .fb-map__legende-symbol { display: none; }
.fb-map.fb-map--schmal .fb-map__legende[open] .fb-map__legende-griff { display: block; flex: none; margin: 0 4px; }
.fb-map.fb-map--schmal .fb-map__legende[open] .fb-map__legende-zu {
  position: absolute; top: 4px; right: 12px; display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: #f1f3f5; color: #1f2933; cursor: pointer;
}
.fb-map.fb-map--schmal .fb-map__legende-zu:hover { background: #e4e8ec; }
.fb-map.fb-map--schmal .fb-map__legende-zu:focus-visible { outline: 3px solid var(--_fokus); outline-offset: 2px; }
.fb-map.fb-map--schmal .fb-map__legende[open] .fb-map__legende-inhalt {
  max-height: calc(var(--_legende-max) - 56px); overflow-y: auto; overscroll-behavior: contain;
}
.fb-map.fb-map--schmal .fb-map__legende-inhalt:focus-visible { outline: 3px solid var(--_fokus); outline-offset: -3px; }
.fb-map.fb-map--schmal .fb-map__legende-inhalt--mehr {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.fb-map.fb-map--schmal .fb-map__legende[open] ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px;
  margin: 0; padding: 4px 0 8px; font-size: 14px; line-height: 20px;
}
.fb-map.fb-map--schmal .fb-map__legende[open] li { gap: 8px; }

@container fb-karte (max-width: 640px) {
  /* Quellen bleiben unten sichtbar, der Aktivierungsknopf liegt frei in der Mitte. */
  .fb-map .fb-map__activate { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
}
@container fb-karte (max-width: 640px) {
  .fb-map .fb-map__quellenplatz { left: 4px; right: 4px; }
  .fb-map .fb-map__quellen-vorab { padding: 4px; }
}
.fb-map.fb-map--schmal .maplibregl-ctrl-bottom-right { max-width: calc(100% - 8px); }
.fb-map.fb-map--schmal .maplibregl-ctrl-attrib.maplibregl-compact-show {
  width: calc(var(--fb-map-breite, 100vw) - 10px); max-width: 100%; padding: 4px; margin-right: 4px;
}
/* Der aufgeklappte Wortlaut nutzt die volle Breite; sein Schalter bleibt darüber frei. */
.fb-map.fb-map--schmal .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button { top: -44px; background-color: #fff; border-radius: 22px; }

/* Bereits vor dem ersten Paint reserviert, auch bevor die Pistenlegende ankommt. */
.fb-map.fb-map--legende-erwartet .maplibregl-ctrl-bottom-right { bottom: 56px; }

/* Offene mobile Blätter und ihre Quellen bilden eine gemeinsame zugängliche Ebene. */
.fb-map.fb-map--schmal:is(.fb-map--legende-offen, .fb-map--blatt-offen) .maplibregl-ctrl-bottom-right { z-index: 10; }