/**
 * GUT Ergebnis-Karte — Anordnung und Marker.
 *
 * Farben ausschliesslich ueber die vorhandenen Variablen mit Rueckfallwert
 * (var(--x, #hex)). Die Rueckfallwerte bleiben stehen: sie haben die Marke
 * gerettet, als tokens.css einmal leer ausgeliefert wurde (Stoerung 11.08.).
 *
 * Kein !important in dieser Datei. Die Karte steht in einem eigenen Container,
 * mit dem keine Theme-Regel um dieselben Eigenschaften streitet.
 */

.gut-karte-layout {
    --gut-karte-hoehe: 520px;
    font-family: 'DM Sans', sans-serif;

    /* Dieselbe Geometrie wie Suchfeld und Trefferliste: mittig, hoechstens so
       breit wie der Inhaltsbereich. Ohne das laeuft die Karte als direktes Kind
       von .entry-content ueber die volle Fensterbreite, waehrend alles darueber
       bei 1200px endet — auf einem breiten Bildschirm sieht das aus, als waere
       sie aus der Seite gefallen.
       Der Gegenspieler ist Astra:
       .ast-page-builder-template .entry-content[data-ast-blocks-layout] > *
       setzt max-width auf none, mit drei Klassen. Dagegen kommt eine einklassige
       Regel nur mit !important an — dieselbe Stelle, an der auch
       .gut-search-wrap und .gut-results ihres tragen. */
    max-width: var(--ast-container-width, 1200px) !important;
    margin: 24px auto 0 !important;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ── Umschalter Liste | Karte ────────────────────────────────────────────
   Nur auf schmalen Bildschirmen. Ab 900px stehen Liste und Karte
   nebeneinander — dann waere ein Umschalter eine Auswahl ohne Gegenstand. */
.gut-karte-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
}
.gut-karte-tab {
    flex: 1 1 0;
    padding: 10px 14px;
    border: 1px solid var(--gut-border, #c0d4a0);
    border-radius: 10px;
    background: var(--gut-field-bg, #fbfcf7);
    font: 500 14px/1.2 'DM Sans', sans-serif;
    color: var(--gut-accent-ink, #5c7a3e);
    cursor: pointer;
}
.gut-karte-tab.is-active {
    background: var(--gut-accent, #5c7a3e);
    border-color: var(--gut-accent, #5c7a3e);
    color: var(--gut-on-accent, #ffffff);
}

.gut-karte-spalten { display: block; }

.gut-karte-feld { position: relative; }

.gut-karte {
    height: var(--gut-karte-hoehe);
    border-radius: 14px;
    overflow: hidden;
    background: var(--gut-tint, #f0f7e8);
    border: 1px solid var(--gut-border, #c0d4a0);
}

.gut-karte-hinweis {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--text-soft, #6a7060);
    text-align: center;
}

/* ── Schmale Bildschirme: eine Sache zur Zeit ─────────────────────────── */
@media (max-width: 899px) {
    .gut-karte-layout[data-ansicht="liste"] .gut-karte-feld { display: none; }
    .gut-karte-layout[data-ansicht="karte"] .gut-karte-liste { display: none; }
    /* Ohne Trefferliste gibt es nichts umzuschalten. */
    .gut-karte-layout.ohne-liste .gut-karte-tabs { display: none; }
    .gut-karte-layout.ohne-liste .gut-karte-feld { display: block; }
}

/* ── Ab 900px: Liste links, Karte rechts, mitlaufend ──────────────────── */
@media (min-width: 900px) {
    .gut-karte-tabs { display: none; }
    .gut-karte-spalten {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
    .gut-karte-layout.ohne-liste .gut-karte-spalten { grid-template-columns: minmax(0, 1fr); }
    .gut-karte-feld {
        position: sticky;
        top: 92px;   /* Platz fuer die mitlaufende Kopfzeile von Astra */
    }
    .gut-karte { height: calc(100vh - 160px); max-height: 760px; }
    /* ── Die Trefferliste in der halben Breite ──────────────────────────
       Der Gegenspieler ist hier ausnahmsweise KEINE Theme-Regel, sondern der
       eigene .gut-results-Block in frontend.css. Der traegt sein !important
       zu Recht: Astra setzt mit drei Klassen
       (.ast-page-builder-template .entry-content[data-ast-blocks-layout] > *)
       max-width auf none, und dagegen kommt eine einklassige Regel nicht an.
       Im Browser nachgeprueft: keine fremde Regel setzt grid-template-columns
       oder max-width auf .gut-results — nur unsere vier.
       Deshalb wird das !important hier nicht entfernt, sondern mit derselben
       Waffe und hoeherer Spezifitaet ueberschrieben. Es gilt ausschliesslich
       INNERHALB der linken Spalte; die Liste ohne Karte bleibt unberuehrt.

       Warum ueberhaupt: .gut-results traegt die Geometrie einer ganzen Seite
       (max-width 1200, mittige Raender, 20px Innenabstand) und vier feste
       Spalten. In einer halben Bildschirmbreite ergibt beides keinen Sinn —
       die Liste waere breiter als ihre Spalte und die Kacheln so schmal, dass
       vom Namen zwei Woerter uebrig bleiben.                                 */
    .gut-karte-liste .gut-results {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 12px;
    }
    .gut-karte-liste .gut-pagination {
        max-width: none !important;
        width: auto !important;
        margin: 20px 0 0 !important;
        padding: 0 !important;
    }

    /* Neben einer Karte liest sich eine Zeile besser als eine Kachel: Bild
       links, Text rechts. Dadurch passen doppelt so viele Treffer ins Bild,
       und die leere Bildflaeche der Anbieter ohne Foto faellt nicht mehr ins
       Gewicht. Dieselben Bausteine, nur andere Richtung — kein zweites Markup. */
    .gut-karte-liste .gut-result-card a { flex-direction: row; align-items: stretch; }
    .gut-karte-liste .gut-card-img { width: 108px; flex: 0 0 108px; aspect-ratio: 1 / 1; }
    .gut-karte-liste .gut-no-img { font-size: 30px; }
    .gut-karte-liste .gut-card-body { padding: 12px 14px; justify-content: center; }
    .gut-karte-liste .gut-card-name { min-height: 0; margin-bottom: 4px; }
    .gut-karte-liste .gut-card-addr { min-height: 0; }
    .gut-karte-liste .gut-card-dist { margin-top: 8px; }
}

/* ── Marker ──────────────────────────────────────────────────────────────
   Gruppenpunkt: gefuellter Kreis mit Anzahl. Einzelpunkt: dieselbe Nadel wie
   auf der Anbieter-Profilseite, nur kleiner — damit die Karte auf der Suche
   und die Karte auf dem Profil erkennbar dasselbe Ding sind.               */
.gut-karte-gruppe { background: none; border: 0; }
.gut-karte-gruppe span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #f6f8f0;
    font: 600 13px/1 'DM Sans', sans-serif;
    box-shadow: 0 0 0 4px rgba(246, 248, 240, .75), 0 2px 10px rgba(44, 74, 30, .28);
    cursor: pointer;
}
.gut-karte-pin { background: none; border: 0; }

.gut-karte-popup-link {
    font: 600 14px/1.35 'DM Sans', sans-serif;
    color: var(--gut-accent-ink, #5c7a3e);
    text-decoration: none;
}

/* Leaflet setzt seine eigene Schrift; die Karte soll aber wie der Rest der
   Seite aussehen. Nur die Schrift, keine Farben — Leaflets Kontraste sind
   geprueft und werden nicht angefasst. */
.gut-karte .leaflet-container { font-family: 'DM Sans', sans-serif; }