/* ==========================================================================
   BLOCK: Händlersuche (Karte + Umkreissuche)
   template-parts/blocks/dealer-search.php → weser_dealer_search()

   GEMESSENE SOLLWERTE — Desktop, aus .figma-ref/haendlersuche/Händlersuche_desktop.png
   (Bildbreite 1728, Werte in Originalpixeln):

   Sektion
     Überschrift „Händlersuche"  rechtsbündig, Tinte 1462–1597 × 1112–1123
                                 → 16px Poppins SemiBold #263864, rechte Kante 1597
                                 = Containerkante (1728 − 130 Randmaß)
     Oberkante Rahmen            y 1146, 1px #e5e5e5, über die volle Breite
     Karte/Sidebar               y 1147–2039  →  893px hoch
     Sidebar                     x 0–502, senkrechte Trennlinie 1px #263864 bei x 503
     Karte                       x 504–1727 (randlos bis zum Fensterrand)

   Sidebar (Randmaß 130 + 24 Innenabstand = Inhalt beginnt bei x 154)
     Trennlinien                 x 130–502 (373px), 1px #e5e5e5, bei y 1258 und 1990
     Beschriftungen              16px Poppins SemiBold #6b6b6b
                                 „PLZ" Tinte 155–183 × 1173–1183
                                 „Produktauswahl" Tinte 155–308 × 1284–1295
     Eingabefeld                 x 154–258 (105) × y 1194–1233 (40)
                                 Grund #e9ecef, Rahmen #d2d4d7, Text #7a7b7c
     Auswahlfeld                 x 263–360 (98) × 40
     Knopf „Suchen"              x 364–483 (120) × 40, #263864, weiße Schrift
     Pillen                      30px hoch, 8px Abstand, erste bei y 1310
                                 aktiv: Grund #263864 / Schrift #6BE381
                                 inaktiv: weiß, 1px Rahmen #263864, Schrift #263864
                                 „Vario-Line" x 154–278 (125), Tinte ab x 168
     Zähler                      Tinte 154–316 × 2009–2024, 16px
                                 Zahl #263864 Bold, Rest #6b6b6b

   Ergebnis-Panel (liegt in der Karte)
     Kasten                      x 1289–1598 (310 breit), y 1147–2039 (volle Kartenhöhe)
                                 → rechter Abstand 130 = Randmaß
     Kopfzeile                   40px hoch, #263864
                                 „Ergebnisse" Tinte 1310–1412 × 1159–1176 → 18px
                                 Innenabstand links 21px
     Karteneintrag               Rasterabstand 195px

   Abstand nach oben: Im Entwurf liegen zwischen der letzten Zeile des
   Einleitungstextes (y 1059) und dem Rahmen (y 1146) 86px. Davon bringt der
   Einleitungstext-Block bereits 80px mit (--sec-bottom), deshalb steht dieser
   Block oben auf 0. Beim gemeinsamen Durchgehen der Abstände nachjustieren.
   ========================================================================== */

.block-dealer-search {
    --ds-line:        #e5e5e5;
    --ds-feld-grund:  #e9ecef;
    --ds-feld-rahmen: #d2d4d7;
    --ds-label:       #6b6b6b;
    --ds-platzhalter: #7a7b7c;
    --ds-panel-breite: 310px;
    --ds-karten-hoehe: 893px;
    --ds-sidebar:     503px;
    --ds-innen:       24px;

    border-top: 1px solid var(--ds-line);
}

/* ── Überschrift über der Karte ─────────────────────────────────────────── */
.ds-headline {
    margin: 0 0 24px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    color: var(--color-dark);
    text-align: right;
}

/* ── Grundgerüst ────────────────────────────────────────────────────────── */
.ds-layout {
    display: flex;
    flex-direction: column;
}

.ds-sidebar {
    padding-left: var(--grid-margin);
}

/* Auf Mobil und Tablet sitzt der Inhalt direkt am Randmaß; den zusätzlichen
   Einzug gibt es erst auf Desktop (dort: 130 Randmaß + 24 = 154, gemessen). */
.ds-pad {
    padding: 0;
}

.ds-form {
    display: flex;
    flex-direction: column;
    padding-top: 24px;
}

.ds-sep {
    height: 1px;
    background: var(--ds-line);
}

/* ── Beschriftungen ─────────────────────────────────────────────────────── */
.ds-label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    color: var(--ds-label);
}

/* ── Suchzeile ──────────────────────────────────────────────────────────
   Auf Mobil UND Tablet stehen die drei Felder untereinander – so zeigen es
   beide Entwürfe. Nebeneinander stehen sie erst auf Desktop, wo die Sidebar
   breit genug dafür ist. */
.ds-fields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ds-input,
.ds-select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ds-feld-rahmen);
    border-radius: var(--radius-sm);
    background: var(--ds-feld-grund);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-text);
}

.ds-input {
    width: 105px;
    min-width: 0;
}

.ds-input::placeholder {
    color: var(--ds-platzhalter);
    opacity: 1;
}

/* Der eigene Pfeil ersetzt den des Betriebssystems – sonst sieht das Feld auf
   jeder Plattform anders aus als im Entwurf. */
.ds-select {
    width: 98px;
    padding-right: 28px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M5 1 8.5 5H1.5z' fill='%23495057'/%3E%3Cpath d='M5 13 1.5 9h7z' fill='%23495057'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.ds-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 119px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-dark);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--color-white);
    cursor: pointer;
    transition: background var(--transition);
}

.ds-submit:hover,
.ds-submit:focus-visible {
    background: #1b294a;
}

.ds-icon-lupe {
    flex: none;
}

/* ── Produktauswahl ─────────────────────────────────────────────────────── */
.ds-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Die Pille IST das Label des Kontrollkästchens. Das Kästchen selbst bleibt
   bedienbar und für Screenreader vorhanden, ist aber optisch ausgeblendet –
   deshalb kein display:none. */
/* Innenabstand 16px statt der im Entwurf gemessenen 15 links / 23 rechts.
   Die Pille wird dadurch 119 statt 125px breit. Die Asymmetrie im Entwurf
   sieht nach einem Textrahmen mit fester Breite aus, nicht nach Absicht –
   und eine gleichmäßige Pille verträgt sich besser mit Produktnamen, die
   die Redaktion später ergänzt. */
.ds-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 16px;
    border: 1px solid var(--color-dark);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--color-dark);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.ds-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.ds-pill:hover {
    background: #f2f4f8;
}

.ds-pill.is-active {
    background: var(--color-dark);
    color: var(--color-primary);
}

.ds-pill:focus-within {
    outline: 2px solid var(--color-dark);
    outline-offset: 2px;
}

/* ── Abstände zwischen den Abschnitten ──────────────────────────────────
   Gemessen: Feldunterkante → Trennlinie 25px, Trennlinie → „Produktauswahl"
   26px, letzte Pille → Trennlinie unten, Trennlinie → Zähler 15px. */
.ds-pad + .ds-sep {
    margin-top: 24px;
}

.ds-sep + .ds-pad {
    padding-top: 22px;
}

/* ── Zähler ─────────────────────────────────────────────────────────────── */
.ds-foot {
    margin-top: 24px;
}

/* Steht bewusst NACH `.ds-sep + .ds-pad`: gleiche Spezifität, spätere Regel
   gewinnt. Der Zähler sitzt enger an seiner Trennlinie als die Produktauswahl. */
.ds-foot .ds-pad {
    padding-top: 15px;
    padding-bottom: 11px;
}

.ds-count {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.4;
    color: var(--ds-label);
}

.ds-count strong {
    font-weight: var(--fw-bold);
    color: var(--color-dark);
}

.ds-count-fehler {
    color: #b32d2e;
}

/* ── Karte ──────────────────────────────────────────────────────────────── */
.ds-map-wrap {
    position: relative;
}

.ds-map {
    height: 420px;
    background: #e8eaed;
    /* Bezugsrahmen für den Zustimmungs-Platzhalter (assets/css/consent.css).
       Google Maps selbst positioniert innen ohnehin absolut.

       `isolation` ist hier kein Beiwerk: Der Platzhalter trägt z-index 2, damit
       er über der Kartenfläche liegt. Ohne eigenen Stapelkontext gilt dieser
       Wert aber gegenüber ALLEN positionierten Elementen der Seite – und
       `.ds-panel` liegt auf Desktop absolut über der rechten Kartenhälfte.
       Der Platzhalter deckte damit die Ergebnisliste zu, also genau das, was
       auch ohne Karte funktionieren soll. */
    position: relative;
    isolation: isolate;
}

.ds-map-hinweis {
    margin: 0;
    padding: 24px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Googles eigene Steuerelemente sollen nicht unter dem Ergebnis-Panel liegen. */
.ds-map .gm-style img {
    max-width: none;
}

/* ── Ergebnis-Panel ─────────────────────────────────────────────────────── */
.ds-panel {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    /* Auf Mobil steht das Panel unter der Karte. Ohne Deckel wären das bei 26
       Treffern über 6000px Seitenhöhe – die Liste scrollt deshalb in sich. */
    max-height: 480px;
}

/* flex: none, sonst quetscht die scrollende Liste die Kopfzeile zusammen –
   sie stand dadurch auf 18 statt 40px. */
.ds-panel-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 40px;
    padding: 0 20px;
    background: var(--color-dark);
    font-family: var(--font-body);
    line-height: 1;
    color: var(--color-white);
}

.ds-panel-titel {
    font-size: 18px;
    font-weight: var(--fw-semibold);
}

.ds-panel-zahl {
    font-size: 14px;
    color: #b9c1d4;
}

.ds-results {
    flex: 1 1 auto;
    min-height: 0; /* ohne das wächst der Flex-Kasten über seinen Deckel hinaus */
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ds-panel-leer {
    margin: 0;
    padding: 20px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ds-label);
}

/* ── Ergebniskarte ──────────────────────────────────────────────────────── */
.ds-result {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-line);
}

.ds-result:last-child {
    border-bottom: 0;
}

.ds-result-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ds-result-nr {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 3px;
    background: var(--color-primary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--color-dark);
}

.ds-result-name {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: var(--color-dark);
}

.ds-result-distanz {
    margin: 4px 0 0 26px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ds-label);
}

.ds-result-adresse {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text);
}

.ds-icon-pin {
    flex: none;
    margin-top: 3px;
    color: var(--ds-label);
}

.ds-result-telefon,
.ds-result-merkmal {
    margin: 6px 0 0 20px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
}

.ds-result-telefon a {
    color: var(--color-dark);
    text-decoration: none;
}

.ds-result-telefon a:hover {
    text-decoration: underline;
}

.ds-result-merkmal {
    color: var(--ds-label);
}

.ds-result-route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin-top: 12px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    background: var(--color-dark);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--color-white);
    text-decoration: none;
    transition: background var(--transition);
}

.ds-result-route:hover,
.ds-result-route:focus-visible {
    background: #1b294a;
    color: var(--color-white);
}

/* Der zur Karte gehörende Eintrag, wenn der Marker angeklickt wurde. */
.ds-result.is-aktiv {
    background: #f2f4f8;
}

/* ══ TABLET ab 768px ══════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .ds-layout {
        flex-direction: row;
        align-items: stretch;
    }

    /* Gemessen im Tablet-Entwurf: Karte beginnt bei x 242. */
    .ds-sidebar {
        flex: none;
        width: 242px;
        border-right: 1px solid var(--color-dark);
    }

    .ds-form {
        height: 100%;
    }

    .ds-map-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ds-map {
        height: var(--ds-karten-hoehe);
    }

    /* Der Zustimmungs-Platzhalter füllt die ganze Karte, das Panel liegt aber
       darüber. Ohne diesen Ausgleich liefe sein Text unter die Ergebnisliste –
       er zentriert sich sonst in der vollen Kartenbreite.

       Auf Tablet bleiben dadurch nur rund 190px übrig: Das Panel ist mit 319
       von 526px die breitere Hälfte. Deshalb dort die Schriftstufen des
       Mobil-Layouts – dieselbe Spaltenbreite, dieselbe Lesbarkeit. */
    .ds-map .weser-consent {
        padding-right: 319px;
    }

    .ds-map .weser-consent-titel {
        font-size: 16px;
        line-height: 22px;
    }

    .ds-map .weser-consent-text {
        font-size: 13px;
    }

    /* Ab hier liegt das Panel IN der Karte und füllt sie in voller Höhe. */
    .ds-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        /* Auf Tablet sitzt das Panel bündig am rechten Rand und ist etwas
           breiter als auf Desktop – so im Entwurf gemessen (449–768). */
        width: 319px;
        max-width: 70%;
        max-height: none;
    }

    .ds-foot {
        margin-top: auto;
    }
}

/* ══ DESKTOP ab 1200px ════════════════════════════════════════════════════ */
@media (min-width: 1200px) {

    .ds-sidebar {
        width: var(--ds-sidebar);
    }

    /* 130 Randmaß + 24 links + 330 Suchzeile + 18 rechts + 1 Trennlinie = 503
       = die im Entwurf gemessene Sidebar-Breite. Mit beidseitig 24 bleiben nur
       324 übrig, die Zeile schrumpft und der Knopf bricht um. */
    .ds-pad {
        padding-left: var(--ds-innen);
        padding-right: 18px;
    }

    /* Nur auf Desktop stehen die drei Felder nebeneinander:
       105 + 4 + 98 + 4 + 119 = 330. */
    .ds-fields {
        flex-direction: row;
        align-items: center;
    }

    /* Bis zum rechten Fensterrand (Chris 2026-09-18): Rechts neben der Liste
       blieb ein 130 px schmaler Streifen Karte stehen, der nichts zeigte.
       Die linke Kante bleibt, wo sie war – die Liste wird um das Randmaß
       breiter. Tablet war schon bündig (right: 0 oben). */
    .ds-panel {
        width: calc(var(--ds-panel-breite) + var(--grid-margin));
        right: 0;
    }

    /* Auf Desktop bleiben neben dem Panel gut 780px – dort gelten wieder die
       vollen Schriftstufen aus assets/css/consent.css. */
    .ds-map .weser-consent {
        padding-right: calc(var(--ds-panel-breite) + var(--grid-margin));
    }

    .ds-map .weser-consent-titel {
        font-size: 18px;
        line-height: 24px;
    }

    .ds-map .weser-consent-text {
        font-size: var(--fs-copy-xs);          /* 14px */
    }
}

/* ══ Mobil – Figma-Werte vom User, 2026-09-16 ══════════════════════════════
   Kundenfeedback 01, Mobil 34: „Zu große Abstände, zu lange zum Scrollen."
     Einleitung → Suchbereich            16px (Regel in section-spacing.css)
     Suche unten 16 + Filter oben 16   = 32px um die Trennlinie
     Filter → Zähler („12 Händler …")    16px
     Ergebnisse je 16px oben und unten   (steht schon so, .ds-result)
   Vorher 24/24/22/24/15. Die Überschrift über der Karte bekommt denselben
   16er-Rhythmus. */
@media (max-width: 767.98px) {
    .ds-headline {
        margin: 0;
        padding-top: 16px;
    }

    .ds-form {
        padding-top: 16px;
    }

    .ds-pad + .ds-sep {
        margin-top: 16px;
    }

    .ds-sep + .ds-pad {
        padding-top: 16px;
    }

    .ds-foot {
        margin-top: 16px;
    }

    .ds-foot .ds-pad {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}