/* ============================================================
   MSA® Beraterverzeichnis — Suche, Karte, Trefferliste
   Wird nur auf /berater-finden geladen (siehe $stile in der Seite).
   Nutzt durchgehend die Farb- und Abstandsvariablen aus styles.base.css.
   ============================================================ */

:root {
  /* Wie weit unter dem oberen Fensterrand ein Scrollziel anhaelt. Die
     Kopfzeile ist fixiert und ragt in die Seite hinein; ohne diesen Abstand
     verdeckt sie den Anfang dessen, wohin gesprungen wurde. Die drei Ziele
     auf dieser Seite - Kartenrahmen, Trefferueberschrift und der einzelne
     Eintrag - muessen dieselbe Zahl benutzen, damit sie gleich weit
     darunter anhalten. */
  --scroll-offset: 120px;
}

/* .sr-only steht in styles.base.css - die Klasse gehoert dem Design-System
   und wird nicht nur hier gebraucht. */

/* ---------- Suchleiste ---------- */
.bsuche {
  margin: calc(var(--sp-16) * -1 - var(--sp-8)) 0 var(--sp-12);
  padding: var(--sp-6) var(--sp-8) var(--sp-8);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid rgba(26, 57, 65, 0.1);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 3;
}
.bsuche-felder {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 1.2fr) auto;
  gap: var(--sp-4);
  align-items: end;
}
.bsuche-felder > .btn { height: 2.95rem; }
.bsuche-eingabe { position: relative; display: block; }
.bsuche-eingabe input { padding-right: 2.8rem; }
.bsuche-standort {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted);
  cursor: pointer; transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.bsuche-standort:hover { color: var(--coral); background: rgba(224, 98, 69, 0.09); }
.bsuche-standort[data-laeuft="ja"] { color: var(--coral); animation: bpulse 1s infinite; }
@keyframes bpulse { 50% { opacity: 0.4; } }
.bsuche-zuruecksetzen { margin-top: var(--sp-4); font-size: var(--text-sm); }
.bsuche-zuruecksetzen a { color: var(--text-muted); border-bottom: 1px solid rgba(26, 57, 65, 0.2); }
.bsuche-zuruecksetzen a:hover { color: var(--coral); border-color: var(--coral); }
@media (max-width: 900px) {
  .bsuche { margin-top: var(--sp-8); padding: var(--sp-6); }
  .bsuche-felder { grid-template-columns: 1fr 1fr; }
  .bsuche-ort { grid-column: 1 / -1; }
  .bsuche-felder > .btn { grid-column: 1 / -1; justify-content: center; }
}

/* ---------- Meldungen ---------- */
.bmeldung {
  margin-bottom: var(--sp-8); padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-sm); background: var(--white);
  border: 1px solid rgba(26, 57, 65, 0.12);
  font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.6;
}
.bmeldung a { color: var(--coral); border-bottom: 1px solid currentColor; }
.bmeldung-warnung { border-left: 3px solid var(--coral); background: rgba(224, 98, 69, 0.05); }
.bhinweis-klein { margin-top: var(--sp-6); font-size: var(--text-sm); color: var(--text-muted); text-align: center; }

/* ---------- Karte ---------- */
.bkarte-rahmen {
  position: relative; height: clamp(380px, 56vh, 620px);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow);
  margin-bottom: var(--sp-16);
  scroll-margin-top: var(--scroll-offset);
  /* Leaflet stapelt seine Ebenen und Bedienelemente bis z-index 1000. Ohne
     eigenen Stapelkontext gelten diese Werte gegen die ganze Seite, und die
     Karte schiebt sich beim Scrollen ueber die fixierte Kopfzeile (z-index
     100). Der Rahmen bekommt deshalb einen: innen darf Leaflet stapeln wie
     es will, nach aussen zaehlt nur diese eine 0. */
  z-index: 0;
}
.bkarte-leinwand { position: absolute; inset: 0; background: var(--sand); }
.bkarte-vorschau {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; padding: var(--sp-8);
  background:
    radial-gradient(circle at 30% 30%, rgba(224, 98, 69, 0.22) 0%, rgba(224, 98, 69, 0) 60%),
    linear-gradient(150deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: var(--text-on-dark); text-align: center;
}
.bkarte-vorschau-inhalt { max-width: 46ch; display: grid; justify-items: center; gap: var(--sp-4); }
.bkarte-vorschau .eyebrow { color: #f0a893; }
.bkarte-vorschau .eyebrow::before { background: #f0a893; }
.bkarte-vorschau h3 { color: var(--text-on-dark); }
.bkarte-vorschau p { color: var(--text-on-dark-muted); font-size: var(--text-sm); line-height: 1.65; }
.bkarte-merken {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); color: var(--text-on-dark-muted); cursor: pointer;
}

/* Leaflet an die Gestaltung der Seite angleichen */
.bkarte-leinwand .leaflet-container { font-family: var(--font-body); background: #e8e3da; }
.bkarte-leinwand .leaflet-control-zoom a {
  color: var(--ink); border-color: rgba(26, 57, 65, 0.12);
  width: 32px; height: 32px; line-height: 30px; font-weight: 400;
}
.bkarte-leinwand .leaflet-control-zoom a:hover { background: var(--cream); color: var(--coral); }
.bkarte-leinwand .leaflet-bar { border: 0; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); overflow: hidden; }
.bkarte-leinwand .leaflet-control-attribution {
  background: rgba(252, 249, 245, 0.85); font-size: 10px; color: var(--text-muted);
  padding: 2px 8px; border-radius: var(--radius-sm) 0 0 0;
}
.bkarte-leinwand .leaflet-control-attribution a { color: var(--ink-soft); }

/* Nadel */
.bnadel { display: block; filter: drop-shadow(0 3px 5px rgba(26, 57, 65, 0.35)); }
.bnadel svg { display: block; }
.bnadel .koerper { fill: var(--coral); }
.bnadel .kern { fill: var(--cream); }
.bnadel-aktiv .koerper { fill: var(--ink); }
.bnadel-aktiv .kern { fill: #f0a893; }
.bmitte {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(26, 57, 65, 0.18);
}
.bmitte::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--cream); }

/* Bündel mehrerer Nadeln */
.bbuendel {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--coral); color: #fff;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.01em;
  box-shadow: 0 0 0 6px rgba(224, 98, 69, 0.22), 0 4px 12px rgba(26, 57, 65, 0.25);
}
.bbuendel-gross { width: 52px; height: 52px; font-size: var(--text-base); }

/* Sprechblase */
.bkarte-leinwand .leaflet-popup-content-wrapper {
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 0;
  background: var(--white);
}
.bkarte-leinwand .leaflet-popup-content { margin: 0; padding: var(--sp-6); width: 260px !important; line-height: 1.55; }
.bkarte-leinwand .leaflet-popup-tip { background: var(--white); }
.bblase-name { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--ink); }
.bblase-adresse { margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--text-muted); }
.bblase-themen { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: 4px; }
.bblase-themen span {
  font-size: 0.68rem; letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(143, 174, 155, 0.18); color: var(--ink-soft);
}
.bblase-hinweis { margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--text-muted); }
.bblase-links { margin-top: var(--sp-4); display: grid; gap: 4px; font-size: var(--text-sm); }
.bblase-links a { color: var(--coral); }
.bblase-links a:hover { text-decoration: underline; }

/* ---------- Trefferliste ---------- */
.btreffer-kopf {
  margin-bottom: var(--sp-8);
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--sp-4) var(--sp-6);
  scroll-margin-top: var(--scroll-offset);
}
.btreffer-titel { flex: 1 1 22rem; }
.btreffer-kopf .muted { margin-top: var(--sp-2); }

/* Die aktiven Filter ueber der Liste. Klein und zurueckgenommen wie
   .bhinweis-klein; die Bausteine brechen auf schmalen Fenstern um, ohne die
   Ueberschrift zu verschieben. Die Klasse "muted" ist hier bewusst nicht
   vergeben - siehe die Erklaerung in berater-finder.php. */
.bfilterzeile {
  margin-top: var(--sp-2);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm); color: var(--text-muted);
}
.bfilterzeile-vorspann { font-size: var(--text-xs); letter-spacing: 0.02em; }
.bfilter {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  max-width: 100%;
  padding: 2px var(--sp-2) 2px var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgba(143, 174, 155, 0.18);
  color: var(--ink-soft);
}
.bfilter-name { min-width: 0; overflow-wrap: anywhere; }
.bfilter-weg {
  flex: none; line-height: 1; font-size: var(--text-base);
  color: var(--text-muted); text-decoration: none;
}
.bfilter-weg:hover, .bfilter-weg:focus-visible { color: var(--coral); }

/* Schalter und Auswahlfeld ueber der Liste. Beide ergeben nur mit
   JavaScript einen Sinn und kommen deshalb mit hidden vom Server. */
.btreffer-steuerung {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  font-size: var(--text-sm);
}
.btreffer-steuerung[hidden] { display: none; }
.bausschnitt {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.bausschnitt[hidden] { display: none; }
.bsortierung[hidden] { display: none; }
.bsortierung select {
  padding: 0.45rem 0.8rem; font-size: var(--text-sm);
  border-radius: var(--radius-sm); background: var(--white);
  border: 1px solid rgba(26, 57, 65, 0.16); color: var(--ink-soft);
  cursor: pointer;
}
.bsortierung select:hover { border-color: var(--coral); }

/* Leere Liste: Die Meldung steht im Raster und nimmt die ganze Zeile ein. */
.bmeldung-leer { grid-column: 1 / -1; margin: 0; }

/* Die Auswege darunter: nebeneinander, umbrechend, klar voneinander
   abgesetzt - sie sind der eigentliche Inhalt der Meldung. */
.bmeldung-wege {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-3);
}
.bmeldung-wege a { white-space: nowrap; }

/* Ladezustand: Die alte Liste bleibt stehen, tritt aber zurueck. */
.btreffer[data-laedt] { opacity: 0.55; transition: opacity 0.2s var(--ease); pointer-events: none; }

/* Blätter-Link unter der Liste. Ohne JavaScript ein gewoehnlicher Link
   auf ?seite=<n+1>, mit JavaScript laedt er die Seite nach. */
.bmehr { margin-top: var(--sp-8); display: flex; justify-content: center; }
.bmehr-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.75rem var(--sp-8); border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid rgba(26, 57, 65, 0.16);
  box-shadow: var(--shadow-sm); color: var(--ink-soft);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.bmehr-link:hover { color: var(--coral); border-color: var(--coral); transform: translateY(-2px); }
.bmehr-link[aria-disabled="true"] { opacity: 0.6; cursor: default; transform: none; }
.btreffer { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 980px) { .btreffer { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .btreffer { grid-template-columns: 1fr; } }

.beintrag {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border-radius: var(--radius);
  background: var(--white); border: 1px solid rgba(26, 57, 65, 0.1);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  scroll-margin-top: var(--scroll-offset);
}
.beintrag:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.beintrag.hervor { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(224, 98, 69, 0.16), var(--shadow); }
.bname { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.badresse { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
.bentfernung {
  align-self: flex-start; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral);
}
.bthemen { display: flex; flex-wrap: wrap; gap: 5px; }
.bthemen span {
  font-size: 0.7rem; letter-spacing: 0.02em; padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(143, 174, 155, 0.16); color: var(--ink-soft);
}
.bkontakt {
  margin-top: auto; padding-top: var(--sp-4); display: grid; gap: var(--sp-2);
  border-top: 1px solid rgba(26, 57, 65, 0.08); font-size: var(--text-sm);
}
.bkontakt a, .bkontakt button {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--ink-soft); text-align: left; word-break: break-word;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.bkontakt a svg, .bkontakt button svg { flex: none; color: var(--sage-deep); }
.bkontakt a:hover, .bkontakt button:hover { color: var(--coral); }
.bkontakt a:hover svg, .bkontakt button:hover svg { color: var(--coral); }
.bepost-klar { color: var(--text-muted); font-size: var(--text-sm); }