/* ==========================================================================
   BDS Baltmannsweiler , Mitgliedsbetriebe (Suche + Karte + Liste)
   Gehoert zu theme2026. Farben kommen aus den Variablen in theme2026.css,
   die Zweitwerte sind nur Absicherung. Keine abgerundeten Ecken.
   ========================================================================== */

.bds-mitglieder { margin-top: .4rem; }

/* blaue Akzentlinie unter der Ueberschrift, wie bei den Text-Elementen der Seite */
main .content-bds-mitglieder h2::after {
  content: ""; display: block; width: 52px; height: 3px;
  background: var(--blau, #003871); margin-top: .5rem;
}

/* Suche und Karte gibt es nur mit JavaScript , ohne JS bleibt die Liste. */
.bds-mitglieder .bds-suche,
.bds-mitglieder .bds-karte { display: none; }
.bds-mitglieder.js-aktiv .bds-suche { display: flex; }
.bds-mitglieder.js-aktiv .bds-karte { display: block; }

/* --- Suchzeile ------------------------------------------------------------ */
.bds-suche { flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: 0 0 1.5rem; }
.bds-suche__feld {
  flex: 1 1 320px; max-width: 460px; width: auto;
  border: 1px solid var(--grau-linie, #e4e7ea); border-radius: 0;
  padding: .75rem .9rem; font-family: inherit; font-size: 1rem; background: #fff;
}
.bds-suche__feld:focus { outline: 0; border-color: var(--blau, #003871); }
.bds-suche__zaehler { margin: 0; font-size: .95rem; color: var(--text-hell, #6b706f); }

/* --- Karte ---------------------------------------------------------------- */
.bds-karte {
  height: clamp(340px, 52vh, 540px);
  border: 1px solid var(--grau-linie, #e4e7ea);
  background: var(--grau-flaeche, #f4f6f8);
  margin: 0 0 2.4rem;
  z-index: 1;                    /* bleibt unter der sticky Kopfleiste */
}
.leaflet-container { font-family: inherit; font-size: .95rem; }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { border-radius: 0; box-shadow: var(--schatten, 0 6px 24px rgba(0,40,85,.09)); }
.leaflet-popup-content { margin: .9rem 1.1rem; line-height: 1.5; }
.leaflet-popup-content p { margin: 0 0 .5rem; }
.leaflet-popup-content p:last-child { margin-bottom: 0; }
.leaflet-popup-content .bds-popup__name,
.leaflet-popup-content .bds-popup__zusatz { font-weight: 500; color: var(--blau, #003871); }
.leaflet-popup-content .bds-popup__eintrag + .bds-popup__eintrag {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--grau-linie, #e4e7ea);
}
.leaflet-bar a { border-radius: 0 !important; }

/* eigener Kartenstift in BDS-Blau */
.bds-pin { background: none; border: 0; }

/* --- Betriebsliste -------------------------------------------------------- */
.bds-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.bds-betrieb {
  margin: 0; display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--grau-linie, #e4e7ea);
  border-left: 4px solid var(--blau, #003871);
  padding: 1.15rem 1.3rem 1.25rem;
  transition: box-shadow .18s, transform .18s;
}
.bds-betrieb:hover { box-shadow: var(--schatten-klein, 0 2px 10px rgba(0,40,85,.07)); }
.bds-betrieb.is-hervor { box-shadow: var(--schatten, 0 6px 24px rgba(0,40,85,.09)); transform: translateY(-2px); }
.bds-betrieb[hidden] { display: none; }

.bds-betrieb__name { margin: 0 0 .15rem; font-size: 1.06rem; line-height: 1.3; color: var(--blau, #003871); }
/* Firmennamen mit Zusatz hinter dem senkrechten Strich (z. B. DAS KONZEPT |
   Die Agentur fuer Werbung und Kommunikation GmbH) gehoeren optisch zusammen:
   der Zusatz wird wie der Name gesetzt, nicht als kleine graue Unterzeile. */
.bds-betrieb__zusatz { margin: 0 0 .45rem; font-size: 1.06rem; line-height: 1.3;
  font-weight: 500; color: var(--blau, #003871); }
.bds-betrieb__adresse { margin: .45rem 0 .85rem; font-size: .97rem; }

.bds-betrieb__kontakt { list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: .95rem; overflow-wrap: anywhere; }
.bds-betrieb__kontakt li { margin: 0 0 .3rem; padding-left: 1.6rem; position: relative; }
.bds-betrieb__kontakt li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 1.05em; height: 1.05em; background-repeat: no-repeat; background-size: contain; opacity: .8;
}
.bds-kontakt--tel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23003871'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}
.bds-kontakt--mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23003871'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.bds-kontakt--web::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23003871'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z'/%3E%3C/svg%3E");
}

.bds-betrieb__karte {
  margin-top: auto; align-self: flex-start;
  background: none; border: 1px solid var(--blau, #003871); border-radius: 0;
  color: var(--blau, #003871); padding: .45rem .95rem;
  font-family: inherit; font-size: .84rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .03em; cursor: pointer;
  transition: background .18s, color .18s;
}
.bds-betrieb__karte:hover { background: var(--blau, #003871); color: #fff; }

.bds-leer { margin: 1.5rem 0 0; color: var(--text-hell, #6b706f); }
.bds-leer[hidden] { display: none; }

@media (max-width: 600px) {
  .bds-liste { grid-template-columns: 1fr; }
  .bds-karte { height: 320px; }
}