.va-arzt-suche-app {
    width: 100%;
    border: 1px solid #123c68;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.va-arzt-suche-app.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* "Suchergebnisse fuer: ..." (nur bei Anreise ueber /arzt-apothekensuche/{begriff}/) */
.va-arzt-suche-search-info {
    padding: 12px 20px;
    font-size: 13px;
    color: #123c68;
    background: #eef2f6;
}

/* !important noetig - siehe .va-arzt-suche-card-address a weiter unten:
   das Theme setzt fuer "a" ohne :hover offenbar eine eigene (weisse)
   Standardfarbe, die staerker/spaeter geladen wird. */
.va-arzt-suche-search-reset {
    margin-left: 12px;
    color: #123c68 !important;
    text-decoration: underline;
}

/* Toolbar: Ergebnis-Anzahl + "Filtern & Sortieren" */
.va-arzt-suche-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 13px;
    color: #123c68;
}

/* Freitextsuche im eingeklappten mobilen Zustand (siehe
   va_arzt_suche_app_shortcode()) - auf Desktop und sobald "Filtern &
   Sortieren" aufgeklappt ist (dort steht der Suchen-Button in der
   Filterleiste bereits zur Verfuegung) ausgeblendet. */
.va-arzt-suche-quick-search {
    display: none;
}

@media (max-width: 767px) {
    .va-arzt-suche-app:not(.is-filters-open) .va-arzt-suche-quick-search {
        display: flex;
        gap: 8px;
        padding: 0 20px 12px;
    }
}

.va-arzt-suche-quick-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    font-size: 14px;
    color: #123c68;
}

.va-arzt-suche-quick-search-submit {
    flex: 0 0 auto;
    padding: 10px 20px;
    border: none;
    border-radius: 999px;
    background: #123c68;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.va-arzt-suche-quick-search-submit:hover {
    background: #0d2c4d;
}

/* "Ort konnte nicht gefunden werden" - siehe va_arzt_suche_ajax_filter()/
   updateOrtWarning() in arzt-suche.js. */
.va-arzt-suche-ort-warning {
    margin: 0 20px 12px;
    padding: 10px 14px;
    border-radius: 6px;
    background: #fdf0e3;
    border: 1px solid #e8b985;
    color: #8a5a1e;
    font-size: 13px;
}

.va-arzt-suche-ort-warning[hidden] {
    display: none;
}

.va-arzt-suche-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #123c68;
    border-radius: 999px;
    background: #fff;
    color: #123c68;
    font-size: 14px;
    cursor: pointer;
}

/* Filterleiste: Schwerpunkt | Ort | Radius | Sprachen | Sortieren | Lupe */
.va-arzt-suche-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 12px;
    border-top: 1px solid #d0d5dd;
    border-bottom: 1px solid #d0d5dd;
    padding: 12px 20px;
    gap: 20px;
}

.va-arzt-suche-filter-field {
    position: relative;
    flex: 1 1 0;
    min-width: 140px;
    padding-left: 20px;
    border-left: 1px solid #d0d5dd;
}

.va-arzt-suche-filter-field:first-child {
    padding-left: 0;
    border-left: none;
}

/*
 * Erweiterte Optionen (Angewendete Filter/Sprachen/Sortieren): nur sichtbar,
 * wenn "Filtern & Sortieren" angeklickt wurde. Auf Desktop als Popover unter
 * der Toolbar (.va-arzt-suche-app hat bereits position:relative - eine exakte
 * Verankerung direkt unter dem Button wuerde eine JS-berechnete Position
 * brauchen, daher hier als Naeherung oben rechts in der App positioniert, wo
 * der Button sitzt). Auf Mobile (Media-Query unten) bleibt es wie bisher
 * inline/gestapelt, da ein Popover auf kleinen Bildschirmen nicht sinnvoll ist.
 */
.va-arzt-suche-advanced-filters {
    position: relative;
    display: none;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.va-arzt-suche-app.is-filters-open .va-arzt-suche-advanced-filters {
    display: flex;
}

/* X oben rechts im Popover - siehe initApp() in arzt-suche.js. */
.va-arzt-suche-advanced-filters-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #123c68;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.va-arzt-suche-advanced-filters-close:hover {
    background: #eef2f6;
}

@media (min-width: 768px) {
    .va-arzt-suche-advanced-filters {
        position: absolute;
        top: 56px;
        right: 20px;
        z-index: 30;
        width: 340px;
        background: #fff;
        border: 1px solid #d0d5dd;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(18, 60, 104, 0.18);
    }
}

/*
 * "Weitere Filter"-Toggle: nur auf Mobile aktiv genutzt (klappt den
 * Inhalt darunter separat auf/zu, verschachtelt unter dem aeusseren
 * "Filtern & Sortieren"). Auf Desktop ist der Popover-Inhalt sofort
 * komplett sichtbar - dort bleibt der Toggle-Button unsichtbar (s. u.).
 */
.va-arzt-suche-advanced-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: #123c68;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.va-arzt-suche-advanced-filters-toggle-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.va-arzt-suche-advanced-filters-toggle[aria-expanded="true"] .va-arzt-suche-advanced-filters-toggle-icon {
    transform: rotate(-135deg);
}

.va-arzt-suche-advanced-filters-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .va-arzt-suche-advanced-filters-toggle {
        display: none;
    }
}

.va-arzt-suche-applied-filters-label {
    font-size: 12px;
    font-weight: 600;
    color: #123c68;
    margin-bottom: 8px;
}

.va-arzt-suche-applied-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.va-arzt-suche-applied-filters-empty {
    font-size: 13px;
    color: #7d92ab;
}

.va-arzt-suche-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: #eef2f6;
    color: #123c68;
    font-size: 13px;
}

.va-arzt-suche-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #123c68;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.va-arzt-suche-filter-chip-remove:hover {
    background: #d0d5dd;
}

/* "Sortieren nach" als Radiobutton-Liste statt Dropdown */
.va-arzt-suche-sort-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 0;
    border-left: none;
}

.va-arzt-suche-sort-label {
    font-size: 12px;
    font-weight: 600;
    color: #123c68;
}

.va-arzt-suche-sort-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #123c68;
    cursor: pointer;
}

.va-arzt-suche-sort-option input[type="radio"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* "Zertifikat"-Filter: nur 2 feste Optionen, deshalb wie "Sortieren nach"
   als einfache Checkbox-Liste (kein Popover noetig, siehe
   setupZertifikatField() in arzt-suche.js). */
.va-arzt-suche-zertifikat-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #123c68;
    margin-bottom: 4px;
}

.va-arzt-suche-zertifikat-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #123c68;
    cursor: pointer;
}

.va-arzt-suche-zertifikat-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Schwerpunkt-/Sprachen-Feld: Schaltflaeche + Checkbox-Popover statt
   Freitext bzw. Single-Select - beide Filter teilen sich dieselben Regeln
   (comma-selector), nur Feldname/Popover-Inhalt unterscheiden sich. */
.va-arzt-suche-schwerpunkt-toggle,
.va-arzt-suche-sprachen-toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.va-arzt-suche-schwerpunkt-summary,
.va-arzt-suche-sprachen-summary {
    display: block;
    overflow: hidden;
    font-size: 14px;
    color: #123c68;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.va-arzt-suche-schwerpunkt-popover,
.va-arzt-suche-sprachen-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin-top: 4px;
    padding: 16px;
    width: min(420px, 90vw);
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(18, 60, 104, 0.15);
    max-height: 320px;
    overflow-y: auto;
}

.va-arzt-suche-schwerpunkt-popover[hidden],
.va-arzt-suche-sprachen-popover[hidden] {
    display: none;
}

/* columns statt grid: die Optionen sind eine flache, alphabetisch
   sortierte Liste im HTML - "columns" fuellt jede Spalte von oben nach
   unten (Spalte 1 komplett, dann Spalte 2), dadurch bleibt die
   alphabetische Reihenfolge innerhalb jeder Spalte erhalten. Mit
   "display: grid" (vorher) wuerde stattdessen zeilenweise befuellt, was
   die alphabetische Ordnung ueber die zwei Spalten hinweg durcheinanderbringt. */
.va-arzt-suche-schwerpunkt-grid,
.va-arzt-suche-sprachen-grid {
    columns: 2;
    column-gap: 16px;
    /* Ohne "auto" ignorieren manche Browser beim Ausgleichen ("balance",
       Standardwert) die max-height/overflow-y-Begrenzung der umgebenden
       Popover-Box (s.o.) und lassen die Box trotzdem ueber 320px hinaus
       wachsen, statt zu scrollen - wichtig seit dem Alt-Import mit sehr
       vielen Fachgebiete/Schwerpunkte/Leistungen-Begriffen. */
    column-fill: auto;
}

.va-arzt-suche-schwerpunkt-option,
.va-arzt-suche-sprachen-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #123c68;
    cursor: pointer;
    break-inside: avoid;
}

.va-arzt-suche-schwerpunkt-option input[type="checkbox"],
.va-arzt-suche-sprachen-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Live-Vorschlaege (Schwerpunkt/Ort) */
.va-arzt-suche-suggestions {
    position: absolute;
    top: 100%;
    left: 20px;
    right: 0;
    z-index: 20;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(18, 60, 104, 0.15);
    max-height: 220px;
    overflow-y: auto;
}

.va-arzt-suche-filter-field:first-child .va-arzt-suche-suggestions {
    left: 0;
}

.va-arzt-suche-suggestions[hidden] {
    display: none;
}

.va-arzt-suche-suggestion {
    padding: 8px 14px;
    font-size: 14px;
    color: #123c68;
    cursor: pointer;
}

.va-arzt-suche-suggestion:hover,
.va-arzt-suche-suggestion.is-highlighted {
    background: #eef2f6;
}

.va-arzt-suche-filter-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #123c68;
    margin-bottom: 2px;
}

.va-arzt-suche-filter-field input,
.va-arzt-suche-filter-field select {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: #123c68;
    background: transparent;
}

.va-arzt-suche-filter-field input::placeholder {
    color: #7d92ab;
}

/* Ort-Feld: Eingabe + "Standort verwenden"-Button (Bullseye-Icon) */
.va-arzt-suche-ort-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.va-arzt-suche-ort-input-row input {
    flex: 1 1 auto;
}

.va-arzt-suche-locate-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #123c68;
    cursor: pointer;
}

.va-arzt-suche-locate-button:hover {
    background: #eef2f6;
}

.va-arzt-suche-locate-button.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

.va-arzt-suche-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #123c68;
    cursor: pointer;
}

.va-arzt-suche-submit:hover {
    background: #eef2f6;
}

/* Auf Desktop nur die Lupe - Text-Label bleibt unsichtbar (siehe Mobile-Regel
   unten, wo es die Lupe ersetzt). */
.va-arzt-suche-submit-label {
    display: none;
}

/* X oben rechts im Popover (siehe .va-arzt-suche-advanced-filters-close) und
   der Auf-/Zuklapp-Pfeil von "Weitere Filter" (siehe
   .va-arzt-suche-advanced-filters-toggle-icon) landen auf Mobile beide oben
   rechts im selben Container uebereinander - das X wird deshalb hier
   ausgeblendet; Schliessen funktioniert weiterhin ueber erneutes Antippen
   des "Filtern & Sortieren"-Buttons. Ausserdem: Lupe im Suchen-Button der
   Filterleiste durch einen beschrifteten Button ersetzen. */
@media (max-width: 767px) {
    .va-arzt-suche-advanced-filters-close {
        display: none;
    }

    .va-arzt-suche-submit {
        width: auto;
        height: auto;
        padding: 10px 20px;
        border-radius: 999px;
        background: #123c68;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
    }

    .va-arzt-suche-submit:hover {
        background: #0d2c4d;
    }

    .va-arzt-suche-submit-icon {
        display: none;
    }

    .va-arzt-suche-submit-label {
        display: inline;
    }
}

/* Karte/Liste-Tabs */
.va-arzt-suche-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 20px 0;
}

.va-arzt-suche-tab {
    padding: 8px 20px;
    border: none;
    border-radius: 6px 6px 0 0;
    background: #eef2f6;
    color: #123c68;
    font-size: 14px;
    cursor: pointer;
}

.va-arzt-suche-tab.is-active {
    background: #123c68;
    color: #fff;
}

/* Ohne Ergebnisse gibt es nichts zum Anzeigen in der Liste (siehe
   updateCount() in arzt-suche.js bzw. serverseitig in va_arzt_suche_app_shortcode()). */
.va-arzt-suche-tab.is-disabled,
.va-arzt-suche-tab:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Ergebnisbereich */
.va-arzt-suche-results {
    background: #123c68;
    padding: 20px;
}

.va-arzt-suche-view {
    display: none;
}

.va-arzt-suche-view.is-active {
    display: block;
}

/*
 * Begrenzte Hoehe statt beliebig langer Liste, die die ganze Seite
 * aufblaeht - stattdessen scrollt die Liste in sich selbst. Karten werden
 * dabei erst nach und nach eingeblendet (siehe setupIncrementalList() in
 * arzt-suche.js), nicht alle auf einmal.
 */
.va-arzt-suche-liste-view {
    max-height: 70vh;
    overflow-y: auto;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

/* Chrome/Edge/Safari - kein "scrollbar-width" dort, deshalb eigene Regeln. */
.va-arzt-suche-liste-view::-webkit-scrollbar {
    width: 6px;
}

.va-arzt-suche-liste-view::-webkit-scrollbar-track {
    background: transparent;
}

.va-arzt-suche-liste-view::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 999px;
}

.va-arzt-suche-liste-view::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Kartenansicht */
.va-arzt-suche-karte-layout {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/*
 * Laender ausserhalb DACH (kein eigenes Kartenfeld vorhanden) - siehe
 * va_arzt_suche_get_other_countries() in va-arzt-suche.php. Zwei Varianten,
 * je nach Seitenbreite (siehe Media Queries unten):
 * - "--overlay": ab 1041px absolut ueber der Karte, am linken Rand,
 *   alphabetisch (A-Z) per column-reverse "von unten nach oben wachsend"
 *   gestapelt. Bewusst absolut am LINKEN RAND des gesamten Layouts
 *   positioniert (nicht als Flex-Geschwister der Karte) - sonst wuerde
 *   "justify-content: center" oben die Liste+Karte als GRUPPE zentrieren,
 *   wodurch die Liste nicht am echten Rand, sondern nur links neben der
 *   (dadurch nicht mehr echt zentrierten) Karte landet.
 * - "--tab": bis 1040px stattdessen als eigener Tab-Inhalt "Weitere
 *   Länder" (normaler Fluss, keine Ueberlappung mit Kartenbild/Pins, die
 *   bei schmalerer Karte sonst unter der Laenderliste liegen wuerden).
 */
.va-arzt-suche-other-countries--overlay {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 5;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 4px;
}

.va-arzt-suche-other-countries--tab {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

@media (max-width: 1040px) {
    .va-arzt-suche-other-countries--overlay {
        display: none;
    }
}

@media (min-width: 1041px) {
    .va-arzt-suche-tab-laender {
        display: none;
    }
}

.va-arzt-suche-other-country {
    background: none;
    border: none;
    padding: 2px 4px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.va-arzt-suche-other-country:hover,
.va-arzt-suche-other-country.active {
    text-decoration: underline;
    font-weight: 700;
}

.va-arzt-suche-map-inner {
    position: relative;
    max-width: 480px;
    /* Zentrierung uebernimmt jetzt ".va-arzt-suche-karte-layout" (Flex-Row,
       damit links Platz fuer ".va-arzt-suche-other-countries" bleibt) -
       "margin:0 auto" wuerde als Flex-Item den gesamten freien Platz der
       Zeile beanspruchen und die Laenderliste dadurch weit nach links
       abdraengen. */
    flex: 0 1 480px;
}

.va-arzt-suche-map-image {
    width: 100%;
    display: block;
    /* Die Kartengrafik ist fuer einen WEISSEN Hintergrund gezeichnet
       (dunkelblaues Land) - hier liegt sie aber auf dunkelblauem Grund und
       wuerde sonst fast verschwinden. brightness(0) macht jede Farbe zu
       reinem Schwarz, invert(1) dreht das zu reinem Weiss - unabhaengig von
       der Original-Farbe der Datei. */
    filter: brightness(0) invert(1);
}

.va-arzt-suche-map-missing {
    color: #fff;
    text-align: center;
    padding: 40px 0;
}

/*
 * Interaktive PLZ-Karte (siehe va_arzt_suche_render_plz_map_svg() in
 * va-arzt-suche.php) - ersetzt bei konfigurierter SVG die einfache
 * Kartengrafik (.va-arzt-suche-map-image). Aussehen/Hover/Aktiv-Zustand
 * werden bewusst komplett HIER definiert statt in der SVG-Datei selbst
 * (deren eigenes <style> wird beim Einbetten entfernt) - so funktioniert es
 * unabhaengig davon, mit welchem Tool die Datei re-exportiert wird. Jede
 * Zone ist entweder eine <g data-zone="..."> mit mehreren Kindelementen
 * (mehrteilige Zone) oder ein einzelnes <path data-zone="..."> - deshalb je
 * Regel zwei Selektoren (Klasse auf dem Element selbst bzw. auf einem
 * Nachfahren).
 */
.va-arzt-suche-plz-map {
    width: 100%;
}

.va-arzt-suche-plz-map-svg {
    width: 100%;
    height: auto;
    display: block;
}

.va-arzt-suche-plz-map-svg [data-zone] {
    cursor: pointer;
}

/*
 * Zonen ohne jegliche Praxis/Apotheke (siehe data-zone-counts auf
 * .va-arzt-suche-plz-map bzw. va_arzt_suche_get_plz_zone_counts() in
 * va-arzt-suche.php) - weder Hover noch Klick, damit nicht "leere"
 * Ergebnisse angeboten werden. pointer-events:none unterbindet dabei auch
 * :hover (rein CSS-basiert), initPlzMap() in arzt-suche.js haengt fuer
 * diese Zonen erst gar keinen Klick-Handler an.
 */
.va-arzt-suche-plz-map-svg [data-zone].is-empty {
    cursor: default;
    pointer-events: none;
}

.va-arzt-suche-plz-map-svg [data-zone].va-arzt-suche-plz-shape,
.va-arzt-suche-plz-map-svg [data-zone] .va-arzt-suche-plz-shape {
    fill: #ffffff;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linejoin: round;
    transition: fill 0.15s ease-in-out;
}

.va-arzt-suche-plz-map-svg [data-zone].va-arzt-suche-plz-shape:hover,
.va-arzt-suche-plz-map-svg [data-zone]:hover .va-arzt-suche-plz-shape,
.va-arzt-suche-plz-map-svg [data-zone].hover.va-arzt-suche-plz-shape,
.va-arzt-suche-plz-map-svg [data-zone].hover .va-arzt-suche-plz-shape {
    fill: #2f6fb0;
}

.va-arzt-suche-plz-map-svg [data-zone].active.va-arzt-suche-plz-shape,
.va-arzt-suche-plz-map-svg [data-zone].active .va-arzt-suche-plz-shape {
    fill: #e2542a;
}

/*
 * "--pin-z-index" (je Pin per Inline-Style gesetzt auf seinen "top"-Prozentwert
 * - siehe va_arzt_suche_app_shortcode() bzw. updatePins() in arzt-suche.js)
 * statt direkt "z-index" inline: ein WEITER UNTEN liegender Pin (groesserer
 * "top"-Wert) soll wie bei einer echten Landkarte VOR einem weiter oben
 * liegenden Pin erscheinen (naeher am Betrachter), nicht dahinter versteckt
 * werden. Als CSS-Variable statt direkt als Inline-"z-index", weil eine
 * INLINE gesetzte Eigenschaft sich per :hover/.is-open (s. u.) nicht mehr per
 * Stylesheet uebersteuern liesse - die Variable dagegen schon, da die
 * eigentliche "z-index"-Deklaration weiterhin im Stylesheet steht.
 */
.va-arzt-suche-pin {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    transform: translate(-50%, -100%);
    z-index: var(--pin-z-index, 1);
}

/*
 * Ohne dies gewinnt bei sich beruehrenden/nahen Pins rein die DOM-
 * Reihenfolge: ".transform" oben macht aus jedem Pin (samt seinem
 * z-index:10-Tooltip, s.u.) eine EIGENE Stacking-Context-Einheit - ein
 * spaeter im DOM stehender Nachbar-Pin liegt dadurch trotzdem ueber der
 * kompletten Tooltip-Liste eines FRueheren Pins (genau das Problem im
 * Screenshot: Pins verdecken die eigene, eigentlich weiter oben liegende
 * Popover-Liste). Beim Hover/offenen Zustand die gesamte Pin-Einheit
 * (inkl. Tooltip) ueber ALLE anderen Pins heben - deutlich ueber dem
 * hoechstmoeglichen "--pin-z-index" (0-100, ein Prozentwert), damit das
 * IMMER gewinnt, unabhaengig von der eigenen/fremden Position.
 */
.va-arzt-suche-pin:hover,
.va-arzt-suche-pin.is-open {
    z-index: 1000;
}

/*
 * drop-shadow(...) auf einem maskierten Element (siehe unten) zeigte in der
 * Praxis auf dem Live-Server GAR KEINEN sichtbaren Effekt (weder als duenne
 * Linie noch als Glow, unabhaengig vom Versatz/Blur) - offenbar eine
 * Faelle, in der der eingesetzte Browser/Renderer "filter" auf einem
 * "mask-image"-Element nicht wie erwartet kombiniert. Zurueck zur zuvor
 * bereits nachweislich funktionierenden Loesung: ein echtes, separates
 * weisses Duplikat der Pin-Silhouette (::before) GENAU hinter dem Icon -
 * kein Filter, funktioniert daher unabhaengig von dieser Einschraenkung.
 * ::before wird vor .va-arzt-suche-pin-icon im DOM eingefuegt und malt
 * daher zuerst (also darunter) - waere der Halo stattdessen ::before des
 * Icons SELBST, wuerde dessen EIGENER Hintergrund als Element immer zuerst
 * gemalt und der Halo faelschlich darueber liegen.
 */
.va-arzt-suche-pin::before {
    content: '';
    position: absolute;
    /*
     * Der innere Kreis in der Pin-Grafik ist deutlich kleiner als die
     * gesamte Silhouette - eine gleichmaessige Vergroesserung (mask-size:
     * contain skaliert den GESAMTEN Halo um denselben Faktor) macht seinen
     * Ring dadurch automatisch duenner als den aeusseren Rand. -2px war
     * dafuer noch zu wenig (kaum wahrnehmbar), -3px macht ihn jetzt auch am
     * kleinen inneren Kreis sichtbar - auf Kosten eines insgesamt sichtbar
     * dickeren Rands am Aussenumriss (das ist der Kompromiss dieser
     * Technik: EIN Wert fuer beide Ringe zugleich).
     */
    inset: -3px;
    background-color: #fff;
    -webkit-mask-image: var(--va-pin-mask);
    mask-image: var(--va-pin-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
}

/*
 * Pin als CSS-Maske statt <img>: damit laesst sich eine exakte Zielfarbe
 * (unser Markenblau) erzwingen, egal welche Farbe die Original-Pin-Grafik
 * hat - ein reiner Filter (wie bei der Karte) kann nur nach Schwarz/Weiss
 * umfaerben, nicht praezise nach Blau. "position: relative" (ohne eigenen
 * z-index) sorgt dafuer, dass dieses Icon im selben Mal-Schritt wie der
 * ::before-Halo des Elternelements einsortiert wird, dort aber SPAETER im
 * DOM steht - malt also ueber dem Halo (siehe Kommentar dort). Der Pin ist
 * im selben Markenblau wie der Kartenhintergrund (#123c68) - je nach
 * Position (auf dem dunklen Kartengrund statt auf der weissen
 * Laendersilhouette) wuerde er sonst quasi unsichtbar verschmelzen.
 */
.va-arzt-suche-pin-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 38px;
    background-color: #123c68;
    -webkit-mask-image: var(--va-pin-mask);
    mask-image: var(--va-pin-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
}

.va-arzt-suche-pin-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 10;
}

/*
 * Zusaetzlich zu :hover auch bei .is-open sichtbar (per Klick gesetzt, s.
 * arzt-suche.js) - reines Hover reicht bei Cluster-Pins mit anklickbarer
 * Liste nicht: die Maus verliert beim Hinüberbewegen vom kleinen Pin-Icon
 * zum (leicht versetzten) Tooltip sofort den Hover-Status, bevor ein
 * Listeneintrag angeklickt werden kann. Klick-Toggle loest das zuverlaessig
 * und funktioniert zusaetzlich auf Touch-Geraeten ohne Hover.
 */
.va-arzt-suche-pin:hover .va-arzt-suche-pin-tooltip,
.va-arzt-suche-pin.is-open .va-arzt-suche-pin-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Bei ueberlappenden Pins (<30px Abstand, per JS ermittelt) bleibt nur der
   erste Pin sichtbar, die anderen sind ueber dessen Tooltip-Liste erreichbar. */
.va-arzt-suche-pin.is-cluster-hidden {
    display: none;
}

/*
 * "Sie sind hier"-Pin (siehe arzt-suche.js initUserLocation()): eigene
 * Klasse statt ".va-arzt-suche-pin", damit Clustering/Klick-Handler ihn
 * nicht anfassen (er hat kein data-praxis-id). Reines CSS-Dreieck+Kreis in
 * Signalrot, damit er sich klar vom Praxis-Pin abhebt. Liegt per DOM-
 * Reihenfolge (siehe JS) IMMER unter den echten Praxis-Pins.
 */
.va-arzt-suche-user-pin {
    position: absolute;
    display: inline-block;
    transform: translate(-50%, -100%);
    cursor: default;
}

/*
 * Nutzt dieselbe hochgeladene Pin-Grafik wie die Praxis-Pins (--va-user-
 * pin-mask, per JS aus data-pin-image gesetzt), nur rot statt in der
 * Originalfarbe - per CSS-Maske (gleiche Technik wie ".va-arzt-suche-pin-
 * icon" fuers Kartenbild). Deshalb bewusst KEINE eigene Rotation/Form, die
 * die (i. d. R. bereits aufrechte) Original-Tropfenform verzerren wuerde.
 * Ohne Pin-Grafik faellt mask-image auf "none" zurueck - dann bleibt ein
 * einfacher roter Kreis als Fallback.
 */
.va-arzt-suche-user-pin-marker {
    display: block;
    width: 30px;
    height: 38px;
    background-color: #e11d2e;
    border-radius: 50%;
    -webkit-mask-image: var(--va-user-pin-mask);
    mask-image: var(--va-user-pin-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.va-arzt-suche-user-pin:hover .va-arzt-suche-pin-tooltip {
    opacity: 1;
    visibility: visible;
}

.va-arzt-suche-pin-tooltip.has-list {
    white-space: normal;
    text-align: left;
    padding: 4px;
    pointer-events: auto;
}

.va-arzt-suche-pin-tooltip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 180px;
}

.va-arzt-suche-pin-tooltip-list li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.va-arzt-suche-pin-tooltip-list button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    text-align: left;
    padding: 6px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.va-arzt-suche-pin-tooltip-list button:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* "+N weitere anzeigen" - fuehrt zur Listenansicht statt zu einer
   einzelnen Praxis, daher optisch leicht abgesetzt vom Rest der Liste. */
.va-arzt-suche-pin-tooltip-list button.va-arzt-suche-pin-tooltip-more {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* Listenansicht */
.va-arzt-suche-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.va-arzt-suche-no-results {
    color: #fff;
    text-align: center;
    padding: 40px 0;
}

/*
 * Platzhalter waehrend eine Suche laeuft (siehe showListSkeleton() in
 * arzt-suche.js) - ersetzt sofort die (sonst kurz veraltet wirkende)
 * vorherige Liste, bis die eigentliche Antwort da ist. Masse/Radien lehnen
 * sich bewusst an ".va-arzt-suche-card"/"-card-photo" an, damit der
 * Uebergang zum echten Inhalt nicht ruckt.
 */
.va-arzt-suche-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.va-arzt-suche-skeleton-card {
    display: flex;
    gap: 28px;
    align-items: center;
    padding: 24px 28px;
    border-radius: 12px;
    background: #fff;
}

.va-arzt-suche-skeleton-photo {
    flex: 0 0 190px;
    width: 190px;
    height: 190px;
    border-radius: 12px;
}

.va-arzt-suche-skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
}

.va-arzt-suche-skeleton-line {
    height: 14px;
    width: 70%;
    border-radius: 4px;
}

.va-arzt-suche-skeleton-line-title {
    height: 20px;
    width: 45%;
}

.va-arzt-suche-skeleton-photo,
.va-arzt-suche-skeleton-line {
    background: linear-gradient(90deg, #eef2f6 25%, #e2e8f0 37%, #eef2f6 63%);
    background-size: 400% 100%;
    animation: va-arzt-suche-skeleton-pulse 1.4s ease infinite;
}

@keyframes va-arzt-suche-skeleton-pulse {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@media (max-width: 767px) {
    .va-arzt-suche-skeleton-card {
        gap: 14px;
        padding: 20px;
    }

    .va-arzt-suche-skeleton-photo {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }
}

/* Kein Padding mehr an der Karte selbst - das Foto soll randlos (links,
   oben, unten buendig) sitzen. Der Innenabstand fuer Text/Button liegt
   stattdessen auf .va-arzt-suche-card-body (siehe unten). align-items:
   stretch laesst das Foto automatisch die volle Kartenhoehe einnehmen. */
/*
 * "display:flex" unten wuerde sonst das Standardverhalten von [hidden]
 * ueberstimmen (Autoren-Regeln gewinnen immer gegen die UA-Stylesheet-Regel
 * "[hidden]{display:none}", auch bei gleicher Spezifitaet) - siehe
 * setupIncrementalList() in arzt-suche.js, das noch nicht sichtbare Karten
 * per "hidden"-Attribut ausblendet.
 */
.va-arzt-suche-card[hidden] {
    display: none;
}

.va-arzt-suche-card {
    position: relative;
    display: flex;
    gap: 28px;
    align-items: stretch;
    border-radius: 12px;
    padding: 0;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(18, 60, 104, 0.5);
    transition: box-shadow 0.3s ease;
}

/* Kurzes Hervorheben, wenn ueber einen Karten-Pin (bzw. dessen
   Cluster-Tooltip) zu dieser Karte in der Listenansicht gesprungen wird. */
.va-arzt-suche-card.is-highlighted {
    box-shadow: 0 0 0 3px rgba(18, 60, 104, 0.5);
}

/* Zertifizierungs-Badges oben rechts auf der Karte - Popup per Hover
   (Maus) UND per Klick/Tastatur (.is-open, siehe arzt-suche.js), damit es
   auch auf Touch-Geraeten ohne Hover funktioniert. */
.va-arzt-suche-card-badges {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    gap: 6px;
}

.va-arzt-suche-card-badge {
    position: relative;
    cursor: pointer;
}

.va-arzt-suche-card-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(18, 60, 104, 0.25);
    object-fit: contain;
}

.va-arzt-suche-card-badge-fallback {
    font-size: 10px;
    font-weight: 700;
    color: #123c68;
    text-align: center;
    line-height: 1.1;
    padding: 2px;
}

/* Sichtbarkeit/Position werden komplett per JS gesteuert (siehe
   showCardBadgePopover()/hideCardBadgePopover() in arzt-suche.js) - das
   Popup wird beim Oeffnen an <body> gehaengt ("Portal"), damit weder die
   Kartenliste noch ein Seitenheader (beide oft mit "overflow: hidden") es
   abschneiden. "position"/"top"/"left" hier sind daher nur Startwerte, bis
   JS sie beim ersten Oeffnen ueberschreibt. */
.va-arzt-suche-card-badge-popover {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    margin-top: 8px;
    width: min(300px, 80vw);
    padding: 16px;
    background: #eef2f6;
    color: #123c68;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(18, 60, 104, 0.2);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.va-arzt-suche-card-badge-popover p:last-child {
    margin-bottom: 0;
}

/* Shortcode "[va_arzt_suche_zertifikate]" fuer den Seitenkopf (siehe
   va_arzt_suche_zertifikate_header_shortcode()) - nutzt dieselben
   ".va-arzt-suche-card-badge"-Klassen wie die Ergebniskarte (Oeffnen/
   Schliessen/Positionieren der Legende siehe showCardBadgePopover() in
   arzt-suche.js), zeigt zusaetzlich den Namen neben dem Icon. */
.va-arzt-suche-zertifikate-header {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.va-arzt-suche-zertifikate-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.va-arzt-suche-zertifikate-header-name {
    font-size: 14px;
    font-weight: 600;
    color: #123c68;
}

.va-arzt-suche-zertifikate-header-filter-button {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #123c68;
    color: #fff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.va-arzt-suche-zertifikate-header-filter-button:hover {
    background: #1359a6;
}

/* Quadratisch und am unteren Rand der linken Spalte verankert (align-self:
   flex-end durchbricht bewusst das stretch der Karte) - bei kurzem
   Textinhalt bleibt so oben Luft statt das Foto zu einem hohen Rechteck
   zu strecken. Da das Foto dadurch nicht mehr ueberall an der Kartenkante
   anliegt, bekommt es rundum denselben Radius wie die Karte. */
.va-arzt-suche-card-photo {
    display: flex;
    align-self: center;
    flex: 0 0 190px;
    width: 190px;
    height: 190px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f6;
}

.va-arzt-suche-card-photo img {
    align-self: flex-end;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bei nicht-quadratischen Fotos schneidet object-fit:cover mit dem
       Standard-object-position (center) oben UND unten gleich viel ab - bei
       Portraitfotos mit Kopffreiraum oben bleibt dadurch zu viel Luft ueber
       dem Kopf, waehrend unten (Schultern/Koerper) abgeschnitten wird. Mit
       "bottom" wird stattdessen der untere Bildrand beibehalten und nur oben
       abgeschnitten - Kopf/Schultern bleiben so unabhaengig vom Seitenverhaeltnis
       des Originalfotos immer sichtbar. */
    object-position: center bottom;
}

.va-arzt-suche-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 28px 24px 0;
}

.va-arzt-suche-card-name {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 700;
    color: #123c68;
}

.va-arzt-suche-card-fachrichtung {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    text-transform: none;
}

.va-arzt-suche-card-distance {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #123c68;
    border-radius: 999px;
    padding: 2px 10px;
    vertical-align: middle;
}

/* Mobile Variante (bei "Name der Praxis" statt beim Namen, siehe unten) -
   auf Desktop unsichtbar, dort zeigt ".va-arzt-suche-card-distance-header"
   beim Namen. */
.va-arzt-suche-card-distance-praxisname {
    display: none;
}

/* Trennlinie zwischen Adress-/Kontaktspalte wie in der Vorlage - siehe
   mobile Ueberschreibung weiter unten (Linie ergibt bei gestapelten
   Spalten keinen Sinn mehr, wird dort durch eine obere Trennlinie ersetzt). */
.va-arzt-suche-card-columns {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #123c68;
}

.va-arzt-suche-card-address,
.va-arzt-suche-card-contact {
    flex: 1 1 200px;
}

/* Theme-/Breakdance-Standardlink-Farbe gewinnt sonst gegen die hier per
   Vererbung gesetzte dunkle Textfarbe - vermutlich, weil das Theme-Stylesheet
   NACH diesem hier geladen wird und bei gleicher Spezifitaet die zuletzt
   geladene Regel gewinnt. !important erzwingt hier bewusst den Vorrang,
   weil Ladereihenfolge/Selektor des Themes nicht kontrollierbar sind - ohne
   das waren Telefon-/E-Mail-Link kaum lesbar (sehr helle/weisse Schrift auf
   weissem Hintergrund, nur beim Hover sichtbar). */
.va-arzt-suche-card-address a,
.va-arzt-suche-card-contact a {
    color: #123c68 !important;
    text-decoration: none;
}

.va-arzt-suche-card-address a:hover,
.va-arzt-suche-card-contact a:hover {
    text-decoration: underline;
}

.va-arzt-suche-card-contact {
    padding-left: 32px;
    border-left: 1px solid #d0d5dd;
}

/* Feldlabels ("Telefon:", "E-Mail:" usw.) sind auf Desktop ganz normale
   Inline-Spans vor dem Wert (unveraendertes Erscheinungsbild). Das
   "Name der Praxis"-Label gibt es auf Desktop bisher gar nicht (der fett
   gedruckte Praxisname allein reicht dort) - nur mobil sichtbar (s. u.). */
.va-arzt-suche-card-field-label-praxisname {
    display: none;
}

/* Tages-/Zeiten-Tabelle unter "Öffnungszeiten:" - zwei Spalten, ohne
   Trennlinien (nur per Grid ausgerichtet), alle Zeiten in der 2. Spalte. */
.va-arzt-suche-hours-table {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 2px;
    margin-top: 2px;
}

.va-arzt-suche-hours-day {
    font-weight: 600;
}

/* !important auf color noetig - Text war sonst im Normalzustand (nicht nur
   beim Hover) unsichtbar, weil das Theme fuer "a" offenbar eine eigene
   Farbe mit gleicher/hoeherer Spezifitaet setzt, egal ob mit oder ohne
   :hover. */
.va-arzt-suche-card-button {
    align-self: flex-end;
    margin-top: auto;
    display: inline-block;
    padding: 10px 24px;
    border-radius: 999px;
    background: #123c68;
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

/* !important noetig - siehe .va-arzt-suche-card-address a / -card-contact a
   weiter oben: das Theme gewinnt sonst mit einer eigenen (spaeter geladenen)
   Hover-Regel gegen dieselbe Spezifitaet. */
.va-arzt-suche-card-button:hover {
    background: #1359a6 !important;
    color: #fff !important;
}

/* "Details anzeigen"-Button: nur auf Mobil sichtbar (s. u.) - auf Desktop
   bleiben ohnehin immer alle Felder sichtbar, kein Toggle noetig. */
.va-arzt-suche-card-details-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: transparent;
    color: #123c68;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.va-arzt-suche-card-details-toggle-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.va-arzt-suche-card-details-toggle[aria-expanded="true"] .va-arzt-suche-card-details-toggle-icon {
    transform: rotate(-135deg);
}

@media (max-width: 767px) {
    .va-arzt-suche-toolbar {
        padding: 12px 16px;
    }

    .va-arzt-suche-filters {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .va-arzt-suche-app.is-filters-open .va-arzt-suche-filters {
        display: flex;
    }

    .va-arzt-suche-advanced-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
        border-top: 1px solid #d0d5dd;
    }

    /* Verschachtelt: Inhalt startet eingeklappt, auch wenn "Filtern &
       Sortieren" bereits offen ist - erst der "Weitere Filter"-Toggle
       klappt Angewendete Filter/Sprachen/Sortieren zusaetzlich auf. */
    .va-arzt-suche-advanced-filters-content {
        display: none;
        margin-top: 12px;
    }

    .va-arzt-suche-advanced-filters.is-open .va-arzt-suche-advanced-filters-content {
        display: flex;
    }

    .va-arzt-suche-filter-field {
        padding-left: 0;
        border-left: none;
        padding-top: 12px;
        border-top: 1px solid #d0d5dd;
    }

    .va-arzt-suche-filter-field:first-child {
        padding-top: 0;
        border-top: none;
    }

    .va-arzt-suche-suggestions {
        left: 0;
    }

    /*
     * Mobile Kartenaufteilung als CSS-Grid statt Flex-Spalte: Kopfzeile
     * (kleines Foto | Name+Fachrichtung, darunter Zum-Profil-Button) ueber
     * die volle Breite, darunter eine einzige durchgehende Feldliste mit
     * Trennlinien (statt zweier nebeneinander-/untereinanderliegender
     * Spalten). Das DOM bleibt dabei fast unveraendert - ".va-arzt-suche-
     * card-body" bzw. "-address"/"-contact" werden per display:contents
     * "aufgeloest", damit ihre Kinder direkt als Grid-Items der Karte
     * greifen. Einzige Ausnahme: die Distanz-Badge wird zweimal ausgegeben
     * (siehe render_card() in va-arzt-suche.php) - beim Namen fuer Desktop,
     * bei "Name der Praxis" fuer Mobil (mehr Platz dort) -, jeweils per
     * display:none/-block ein- bzw. ausgeblendet.
     */
    .va-arzt-suche-card {
        display: grid;
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "photo name"
            "photo button"
            "columns columns"
            "details details";
        column-gap: 14px;
        row-gap: 0;
        padding: 20px;
    }

    .va-arzt-suche-card-photo {
        grid-area: photo;
        align-self: start;
        width: 72px;
        height: 72px;
        flex-basis: auto;
        border-radius: 12px;
    }

    .va-arzt-suche-card-body {
        display: contents;
    }

    .va-arzt-suche-card-name {
        grid-area: name;
        align-self: end;
        margin: 0;
        /* !important noetig - eine Theme-/Breakdance-Ueberschriftenregel
           gewinnt hier sonst trotz gleicher Klassen-Spezifitaet (vermutlich
           spaeter geladen), der Name wirkte dadurch auf schmalen Bildschirmen
           ueberladen gross. Deutlich groesser als der Fliesstext der Karte
           (14px, siehe .va-arzt-suche-card-columns), aber bewusst nicht mehr
           extrem gross. */
        font-size: 18px !important;
        line-height: 1.25;
    }

    .va-arzt-suche-card-fachrichtung {
        display: block;
        margin-left: 0;
        margin-top: 2px;
    }

    /* Auf Mobil steht die Distanz stattdessen bei "Name der Praxis"
       (".va-arzt-suche-card-distance-praxisname" weiter unten). */
    .va-arzt-suche-card-distance-header {
        display: none;
    }

    .va-arzt-suche-card-distance-praxisname {
        display: inline-block;
        margin-left: 0;
        flex-shrink: 0;
    }

    .va-arzt-suche-card-button {
        grid-area: button;
        justify-self: start;
        align-self: start;
        margin-top: 4px;
        padding: 6px 16px;
        font-size: 13px;
    }

    .va-arzt-suche-card-columns {
        grid-area: columns;
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #d0d5dd;
    }

    /* Beide Spalten "aufloesen" - ihre Felder werden zu EINER durchgehenden
       Liste (Reihenfolge: erst Adress-Feld, dann Kontakt-Feld-Kinder). */
    .va-arzt-suche-card-address,
    .va-arzt-suche-card-contact {
        display: contents;
    }

    .va-arzt-suche-card-field {
        border-top: 1px solid #d0d5dd;
        padding-top: 8px;
        margin-top: 8px;
    }

    .va-arzt-suche-card-field:first-child {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }

    .va-arzt-suche-card-field-label {
        display: block;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .va-arzt-suche-card-field-label-praxisname {
        display: block;
    }

    /* "Name der Praxis"-Feld als Zeile: Text links, Distanz-Badge rechts
       daneben (align-items: flex-start, damit die Badge oben bleibt, auch
       wenn Name/Adresse mehrzeilig ist). */
    .va-arzt-suche-card-field-praxisname {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
    }

    /* Textblock (Label+Name+Adresse) darf schrumpfen/umbrechen, statt die
       Distanz-Badge durch feste Inhaltsbreite aus dem Rahmen zu druecken. */
    .va-arzt-suche-card-field-praxisname > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Zertifikats-Badges (Desktop: oben rechts) wandern mobil nach unten
       rechts - unten links wuerde den letzten Feld-Eintrag (z. B.
       Oeffnungszeiten) ueberdecken, da die Feldliste jetzt die volle Breite
       einnimmt. */
    .va-arzt-suche-card-badges {
        top: auto;
        left: auto;
        bottom: 12px;
        right: 12px;
    }

    /* Eingeklappter Zustand: nur "Name der Praxis"/Adresse und
       Oeffnungszeiten sichtbar, der Rest erst nach Klick auf "Details
       anzeigen" (siehe .va-arzt-suche-card-details-toggle weiter oben und
       initApp() in arzt-suche.js). max-height statt display:none, damit das
       Auf-/Zuklappen animiert werden kann (display laesst sich nicht
       transitionieren, und ein Uebergang zu/von "none" auch nicht - deshalb
       im offenen Zustand ein konkreter, grosszuegig bemessener Wert statt
       einfach "none"). "Name der Praxis"/Oeffnungszeiten bleiben bewusst
       aussen vor (kein max-height/overflow), damit ihr Inhalt (z. B. eine
       lange Wochentabelle) nie abgeschnitten werden kann.
       Rand/Abstand werden mit-animiert, sonst bliebe im eingeklappten
       Zustand eine Luecke durch die Trennlinie stehen. */
    .va-arzt-suche-card-field:not(.va-arzt-suche-card-field-praxisname):not(.va-arzt-suche-card-field-oeffnungszeiten) {
        overflow: hidden;
        max-height: 200px;
        opacity: 1;
        transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease, padding-top 0.3s ease, border-top-width 0.3s ease;
    }

    .va-arzt-suche-card:not(.is-details-open) .va-arzt-suche-card-field:not(.va-arzt-suche-card-field-praxisname):not(.va-arzt-suche-card-field-oeffnungszeiten) {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        padding-top: 0;
        border-top-width: 0;
    }

    /* Ohne festen grid-area waere der Button per Grid-Auto-Placement
       gelandet, wo gerade eine Luecke war - z. B. in der "button"-Zelle,
       sobald "Zum Profil" fehlte (kein oeffentliches Profil). Mit fester
       Zuweisung liegt er unabhaengig davon immer unten, nach den Spalten. */
    .va-arzt-suche-card-details-toggle {
        grid-area: details;
        display: inline-flex;
    }
}