/* ====================================================================
   glattt Anfahrt

   Grundsatz: KEINE Schriftart, KEINE Grundfarben. Beides erbt das Element
   vom Theme. Festgelegt sind nur der Akzent (mit Gold als Rueckfall) und die
   Mint-Handlungsfarbe — beide ueber Variablen ueberschreibbar.

   Alle Groessen in em, nicht in px oder rem: glattt.com faehrt eine
   Grundschrift von 22 px. Feste Pixelwerte saehen dort aus wie Kleingedrucktes.

   Zu den !important: Salient setzt `body h3, .row .col h3 { font-size:36px }`
   und `.container-wrap button { … }`. Das sind 0,2,1 bzw. 0,2,1 — eine normale
   Plugin-Regel (0,2,0) verliert dagegen lautlos. Genau daran sind beim
   FAQ-Element die 36-px-Fragen und der graue Kasten um jeden Knopf entstanden.
   Deshalb hier durchgehend laengere Ketten plus !important an den betroffenen
   Eigenschaften — und nur an denen.
   ==================================================================== */

.glattt-anfahrt {
    /* Container-Query statt Media-Query: Es zaehlt die Breite der SPALTE, in
       der das Element steckt, nicht die des Fensters. Dieselbe Lehre wie beim
       Buchungswidget — ein Element in einer halben Spalte ist schmal, egal wie
       breit der Bildschirm ist. */
    container: ganf / inline-size;

    --ganf-akzent: var(--glattt-gold, #E1B520);
    --ganf-akzent-text: #8A6D0F;
    --ganf-mint: #BCEEE2;
    --ganf-mint-dunkel: #14544A;
    /* Verkehrszeichen-Farben. Bewusst NICHT aus dem Theme: Ein Parkschild ist
       blau, ein Haltestellen-Zeichen grün-gelb — daran erkennt man sie. */
    --ganf-schild-blau: #12469B;
    --ganf-schild-gruen: #2E7D4F;
    --ganf-schild-gelb: #F2CE1B;
    --ganf-linie: rgba(26, 23, 18, .12);
    --ganf-leise: rgba(26, 23, 18, .62);
    --ganf-flaeche: rgba(255, 252, 244, .6);

    color: inherit;
}

.glattt-anfahrt *,
.glattt-anfahrt *::before,
.glattt-anfahrt *::after { box-sizing: border-box; }

/* Auf dunklem Grund kippen nur die abgeleiteten Toene. */
.glattt-anfahrt--hell {
    --ganf-linie: rgba(255, 252, 244, .22);
    --ganf-leise: rgba(255, 252, 244, .72);
    --ganf-flaeche: rgba(255, 252, 244, .06);
}

/* --- Kopf ------------------------------------------------------------ */

/* 1,25em statt der Theme-Groesse: Der Bereich steht unter einer echten
   Sektionsueberschrift, seine eigene darf nicht mit ihr konkurrieren. */
.glattt-anfahrt .ganf-titel,
.row .col .glattt-anfahrt .ganf-titel {
    font-size: 1.25em !important;
    line-height: 1.25 !important;
    margin: 0 0 .3em !important;
}

.glattt-anfahrt .ganf-unter {
    font-size: .95em;
    line-height: 1.6;
    color: var(--ganf-leise);
    margin: 0 0 1.2em;
    max-width: 62ch;
}

/* --- Kartenbild ------------------------------------------------------ */

.glattt-anfahrt .ganf-karte {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ganf-linie);
    background: var(--ganf-flaeche);
    text-decoration: none;
    color: inherit;
}
.glattt-anfahrt .ganf-karte:hover { text-decoration: none; }
.glattt-anfahrt .ganf-karte:focus-visible { outline: 2px solid var(--ganf-akzent); outline-offset: 3px; }

/* Zuschnitt statt voller Seitenverhaeltnis-Hoehe: Sonst wird die Karte auf
   breiten Bildschirmen fast bildschirmfuellend hoch. `cover` schneidet oben
   und unten ab — das Institut sitzt in der Bildmitte und bleibt sichtbar.
   cqw statt vw, damit die Spaltenbreite zaehlt. */
/* Der Kasten übernimmt das Seitenverhältnis des ERZEUGTEN Bildes. Dadurch
   wird im Normalfall nichts abgeschnitten — die Marker liegen also nicht nur
   richtig, sie sind auch alle zu sehen. max-height fängt sehr breite Spalten
   ab, min-height sehr schmale Handys; nur dort greift `cover` überhaupt. */
/* Die Buehne ist exakt so hoch wie das Bild — sie ist der Bezug fuer die
   Markerebene darueber. */
.glattt-anfahrt .ganf-karte-buehne { position: relative; display: block; }

.glattt-anfahrt .ganf-karte-bild {
    display: block;
    width: 100%;
    /* `height: auto` ist PFLICHT: Ohne sie gilt das HTML-Attribut height="420"
       als feste Hoehe, und `aspect-ratio` kommt gar nicht zum Zug — der Kasten
       war dann bei jeder Spaltenbreite 420 px hoch und schnitt oben und unten
       ab, obwohl es nichts abzuschneiden gab. */
    height: auto;
    aspect-ratio: var(--ganf-karte-verhaeltnis, 940 / 420);
    /* Deckel gegen eine bildschirmfüllende Karte. Er wächst mit dem gewählten
       Format mit (940 × 420 → 560 px), sonst schnitte ein bewusst höheres Bild
       stärker ab als das flache — und die Bandwerte in projektion.php, die den
       weggeschnittenen Anteil abbilden, stimmten nicht mehr. */
    max-height: var(--ganf-karte-deckel, 560px);
    min-height: 200px;
    object-fit: cover;
    object-position: center;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Die Marker liegen als SVG UEBER dem Bild, nicht darin. Derselbe Zuschnitt
   wie `object-fit: cover` (xMidYMid slice) — nur deshalb sitzt jede Nummer
   auch nach dem Beschneiden noch auf ihrem Gebaeude.
   pointer-events: none, sonst schluckt die Ebene den Klick auf die Karte. */
/* Die Markerebene bekommt KEINE eigene Höhe, sie wird über den Kasten
   gespannt (`inset: 0`) — und der Kasten ist genau so hoch wie das Bild.
   Damit können Bild und Marker gar nicht mehr unterschiedlich zugeschnitten
   werden; vorher standen zwei Höhenangaben nebeneinander, die auseinander-
   laufen konnten. */
.glattt-anfahrt .ganf-karte-punkte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Die EBENE bleibt durchlässig, sonst käme der Klick auf „Route öffnen"
       nie an. Nur die Schilder selbst nehmen den Zeiger an — dadurch lassen
       sie sich überfahren, und ein Klick darauf öffnet trotzdem die Route. */
    pointer-events: none;
}
.glattt-anfahrt .ganf-marker[data-punkt] { pointer-events: auto; }

/* Zwei Bilder, zwei Markerebenen: Der Rechner sieht das breite, das Telefon
   das hohe. Standardmäßig liegt die hohe Ebene still.

   Ausnahmsweise eine FENSTER-Abfrage und keine Container-Abfrage: Das Bild
   wird über <picture media="…"> gewählt, und ein <source> kennt nur das
   Fenster. Liefen Bild und Ebene auf verschiedenen Abfragen, säßen die Marker
   irgendwann auf dem falschen Bild — dagegen hilft nur dieselbe Bedingung an
   beiden Stellen. Die 520 steht deshalb auch in render.php. */
.glattt-anfahrt .ganf-karte-punkte--hoch { display: none; }

@media (max-width: 520px) {
    /* Nur bei Standorten MIT Hochformat — sonst verlöre die Karte am Handy
       ihr Seitenverhältnis. */
    .glattt-anfahrt .ganf-karte--zweiformat .ganf-karte-bild {
        aspect-ratio: var(--ganf-karte-hoch-verhaeltnis, 640 / 800);
        /* Kein Deckel: Der Kasten hat das Verhältnis des Bildes, ein Deckel
           würde also nur beschneiden — und zwar genau das Hochformat, das
           dafür gebaut wurde. */
        max-height: none;
    }
    .glattt-anfahrt .ganf-karte--zweiformat .ganf-karte-punkte--breit { display: none; }
    .glattt-anfahrt .ganf-karte--zweiformat .ganf-karte-punkte--hoch  { display: block; }
}
.glattt-anfahrt .ganf-marker--institut { pointer-events: none; }

.glattt-anfahrt .ganf-karte-leer {
    display: grid;
    place-items: center;
    height: clamp(150px, 22cqw, 220px);
    opacity: .35;
}
.glattt-anfahrt .ganf-karte-leer .ganf-pikto { width: 2.4em; height: 2.4em; }

.glattt-anfahrt .ganf-karte-quelle {
    position: absolute;
    right: 0; top: 0;
    /* Pflichtangabe, aber Kleingedrucktes — auf einer 22-px-Grundschrift
       waeren .6em schon 13 px und damit lauter als der Kartenausschnitt.
       Nach unten bei 9 px begrenzt, damit sie lesbar bleibt. */
    font-size: clamp(9px, .5em, 12px);
    line-height: 1;
    padding: .5em .7em;
    color: rgba(26, 23, 18, .6);
    background: rgba(255, 255, 255, .78);
    border-bottom-left-radius: 8px;
}

.glattt-anfahrt .ganf-karte-fuss {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75em;
    padding: .7em .9em;
    /* Oben schnell durchsichtig: Der Verlauf soll die Adresse tragen, nicht
       einen Marker am unteren Bildrand zudecken. */
    background: linear-gradient(to top, rgba(255, 252, 244, .97) 0, rgba(255, 252, 244, .88) 45%, rgba(255, 252, 244, 0) 100%);
    color: #1A1712;
}
.glattt-anfahrt .ganf-karte-text { display: block; min-width: 0; }
.glattt-anfahrt .ganf-karte-adresse { display: block; font-weight: 700; font-size: .9em; line-height: 1.3; }
.glattt-anfahrt .ganf-karte-hinweis { display: block; font-size: .72em; line-height: 1.35; color: rgba(26, 23, 18, .62); }

/* Karte ohne Bild: Der Verlauf braucht dann keinen Aufsatzpunkt. */
.glattt-anfahrt .ganf-karte--ohne-ziel .ganf-karte-fuss,
.glattt-anfahrt .ganf-karte:not(:has(.ganf-karte-bild)) .ganf-karte-fuss {
    position: static;
    background: none;
    border-top: 1px solid var(--ganf-linie);
    color: inherit;
}

/* Route-Knopf. Mint ist auf glattt.com die Handlungsfarbe. */
.glattt-anfahrt .ganf-knopf {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    flex: none;
    background: var(--ganf-mint);
    color: var(--ganf-mint-dunkel);
    border: 1.5px solid var(--ganf-mint-dunkel);
    border-radius: 999px;
    padding: .5em 1em;
    font-weight: 700;
    font-size: .8em;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .2s ease, transform .2s ease;
}
.glattt-anfahrt .ganf-karte:hover .ganf-knopf { background: #CDF3EA; transform: translateY(-1px); }
.glattt-anfahrt .ganf-knopf .ganf-pfeil { width: .95em; height: .95em; flex: none; stroke: currentColor; stroke-width: 2.2; fill: none; }

/* Am Handy steht die Adresse UNTER der Karte, nicht darauf: Auf schmalem
   Schirm bricht sie sonst um, und der Knopf deckt genau die Punkte zu, um die
   es geht. */
@container ganf (max-width: 520px) {
    .glattt-anfahrt .ganf-karte-bild { min-height: 210px; max-height: var(--ganf-karte-deckel-mobil, 320px); }

    .glattt-anfahrt .ganf-karte-fuss {
        position: static;
        background: var(--ganf-flaeche);
        border-top: 1px solid var(--ganf-linie);
        color: inherit;
        flex-direction: column;
        align-items: stretch;
        gap: .7em;
        padding: .85em;
    }
    .glattt-anfahrt .ganf-karte-hinweis { color: var(--ganf-leise); }
    .glattt-anfahrt .ganf-knopf { justify-content: center; }
}

/* --- Marker ---------------------------------------------------------- */

/* Das äußere <g> trägt die Verschiebung an den Ort — als SVG-Attribut.
   Deshalb darf hier NIE `transform` in CSS stehen: Die CSS-Eigenschaft ersetzt
   das Präsentationsattribut vollständig, der Marker spränge in die linke obere
   Ecke der Karte. Hervorgehoben wird die innere Gruppe. */
.glattt-anfahrt .ganf-marker { transition: opacity .25s ease; }
.glattt-anfahrt .ganf-marker.ist-schwach { opacity: .28; }

.glattt-anfahrt .ganf-marker-koerper {
    transition: transform .25s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.glattt-anfahrt .ganf-marker.ist-aktiv .ganf-marker-koerper { transform: scale(1.28); }
/* Die Nadel wird nicht vergrößert: Ihr Bezugspunkt ist die Spitze, nicht die
   Mitte — sie würde beim Skalieren von ihrem Ort wegrutschen. */
.glattt-anfahrt .ganf-marker--institut .ganf-marker-koerper { transform: none; }

/* --- Fussweg und Fahne: beide erscheinen erst beim Überfahren --- */

.glattt-anfahrt .ganf-weg-linie,
.glattt-anfahrt .ganf-fahne {
    opacity: 0;
    transition: opacity .2s ease;
}
.glattt-anfahrt .ganf-weg-linie.ist-aktiv,
.glattt-anfahrt .ganf-fahne.ist-aktiv { opacity: 1; }

/* Zwei Pfade übereinander: heller Rand, darauf die Linie. Ohne den Rand
   verschwindet sie auf dunklen Flächen der Karte. */
.glattt-anfahrt .ganf-weg-rand {
    fill: none;
    stroke: #FFFCF4;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .9;
}
.glattt-anfahrt .ganf-weg-strich {
    fill: none;
    stroke: var(--ganf-akzent-text);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 7;
}

/* Kein Kasten hinter dem Text, sondern ein heller Rand um die Buchstaben:
   Ein Kasten müsste in der Breite zum Text passen, und die lässt sich in SVG
   nicht messen, ohne den Browser zu fragen. */
.glattt-anfahrt .ganf-fahne-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    fill: #1A1712;
    paint-order: stroke;
    stroke: #FFFCF4;
    stroke-width: 4.5;
    stroke-linejoin: round;
}
.glattt-anfahrt .ganf-fahne-linie text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
}
.glattt-anfahrt .ganf-fahne-linie--bahn rect { fill: var(--ganf-schild-blau); }
.glattt-anfahrt .ganf-fahne-linie--bahn text { fill: #fff; }
.glattt-anfahrt .ganf-fahne-linie--bus rect { fill: var(--ganf-schild-gelb); }
.glattt-anfahrt .ganf-fahne-linie--bus text { fill: #2A2A16; }

/* Die Zeichen selbst — dieselben Klassen auf der Karte wie in der Liste,
   damit ein geänderter Farbton gar nicht erst auseinanderlaufen kann. */
.glattt-anfahrt .ganf-schild-blau { fill: var(--ganf-schild-blau); }
.glattt-anfahrt .ganf-schild-rand { fill: none; stroke: #fff; stroke-width: 2.2; }
.glattt-anfahrt .ganf-schild-gruen { fill: var(--ganf-schild-gruen); }
.glattt-anfahrt .ganf-schild-gelb { fill: var(--ganf-schild-gelb); }
.glattt-anfahrt .ganf-schild-text {
    fill: #fff;
    font-weight: 700;
    /* Die Schrift der SCHILDER kommt bewusst NICHT vom Theme: Ein Serifen-
       oder Schreibschrift-Theme würde das P im Parkschild unkenntlich machen.
       Alles andere im Element erbt weiter. */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.glattt-anfahrt .ganf-schild-text--gruen { fill: var(--ganf-schild-gruen); }

/* Nummernplakette am Schild — sie hält Karte und Liste zusammen. */
.glattt-anfahrt .ganf-plakette { fill: #FFFCF4; stroke: #1A1712; stroke-width: 1.4; }
.glattt-anfahrt .ganf-plakette-zahl {
    font-size: 10px; font-weight: 700; fill: #1A1712;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Nur das Institut bekommt eine Nadel — es ist das Ziel, nicht ein Punkt
   auf dem Weg. Der Kopf ist cremefarben, sonst wäre das goldene Zeichen
   darin nicht zu sehen. */
.glattt-anfahrt .ganf-nadel { fill: var(--ganf-akzent); stroke: var(--ganf-akzent-text); stroke-width: 1.8; }
.glattt-anfahrt .ganf-nadel-kopf { fill: #FFFCF4; }
.glattt-anfahrt .ganf-nadel-schatten { fill: rgba(26, 23, 18, .22); }

/* --- Eintragsliste --------------------------------------------------- */

.glattt-anfahrt .ganf-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.glattt-anfahrt .ganf-liste li {
    border-bottom: 1px solid var(--ganf-linie);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Salient haengt Listen in Inhaltsbereichen eigene Aufzaehlungspunkte an. */
.glattt-anfahrt .ganf-liste li::before,
.glattt-anfahrt .ganf-liste li::marker { content: none; }
.glattt-anfahrt .ganf-liste li:first-child { border-top: 1px solid var(--ganf-linie); }

.glattt-anfahrt .ganf-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8em;
    width: 100%;
    padding: .7em .2em !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left;
    color: inherit;
    cursor: pointer;
    min-height: 0;
}
.glattt-anfahrt .ganf-zeile--still { cursor: default; }
.glattt-anfahrt button.ganf-zeile:hover { background: none !important; }
.glattt-anfahrt button.ganf-zeile:hover .ganf-name { color: var(--ganf-akzent-text); }
.glattt-anfahrt button.ganf-zeile:focus-visible { outline: 2px solid var(--ganf-akzent); outline-offset: 2px; }
.glattt-anfahrt button.ganf-zeile[aria-pressed="true"] .ganf-zeichen { transform: scale(1.1); }

/* Zeile und Navi-Knopf teilen sich die Reihe. Der Zeilenknopf hebt hervor und
   zeigt den Fußweg, der Navi-Knopf führt zum Punkt selbst — zwei Ziele, die
   sich nicht in einen Klick pressen lassen. */
.glattt-anfahrt .ganf-zeile-paar {
    display: flex;
    align-items: center;
    gap: .3em;
}
.glattt-anfahrt .ganf-zeile-paar .ganf-zeile { flex: 1 1 auto; min-width: 0; }

.glattt-anfahrt .ganf-navi {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1em;
    height: 2.1em;
    border-radius: 999px;
    background: var(--ganf-mint);
    color: var(--ganf-mint-dunkel);
    border: 1.5px solid var(--ganf-mint-dunkel);
    /* Salient unterstreicht Links im Inhalt und färbt sie um. */
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background .2s ease, transform .2s ease;
}
.glattt-anfahrt .ganf-navi:hover,
.glattt-anfahrt .ganf-navi:focus-visible { background: #CDF3EA; color: var(--ganf-mint-dunkel); transform: translateY(-1px); }
.glattt-anfahrt .ganf-navi:focus-visible { outline: 2px solid var(--ganf-akzent); outline-offset: 2px; }
/* Im Knopf keine zweite Scheibe: Der Knopf IST schon die runde Fläche. */
.glattt-anfahrt .ganf-navi .ganf-pikto { width: auto; height: auto; background: none; border-radius: 0; }
.glattt-anfahrt .ganf-navi .ganf-pikto svg { width: 1.05em; height: 1.05em; fill: currentColor; stroke: none; }

/* Zeichen plus Nummer — dasselbe Bild wie auf der Karte. */
.glattt-anfahrt .ganf-zeichen {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    transition: transform .2s ease;
}
.glattt-anfahrt .ganf-schild { width: 1.5em; height: 1.5em; flex: none; display: block; }
.glattt-anfahrt .ganf-schild--breit { width: 2.1em; }
.glattt-anfahrt .ganf-nr {
    font-size: .74em;
    font-weight: 700;
    line-height: 1;
    color: var(--ganf-leise);
    font-variant-numeric: tabular-nums;
    min-width: .9em;
}

.glattt-anfahrt .ganf-daten { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1em; }
.glattt-anfahrt .ganf-name {
    font-weight: 700;
    font-size: .92em;
    line-height: 1.3;
    /* `anywhere`, nicht `break-word`: Nur das senkt auch die min-content-Breite.
       Sonst schiebt ein Name wie „Markthalle/Landtag" die Entfernung daneben
       aus der Zeile — und weil daneben `min-width: 0` steht, laeuft er ihr
       sichtbar in den Text hinein. */
    overflow-wrap: anywhere;
}
.glattt-anfahrt .ganf-zusatz { font-size: .8em; line-height: 1.35; color: var(--ganf-leise); overflow-wrap: anywhere; }
.glattt-anfahrt .ganf-weite {
    flex: none;
    font-size: .8em;
    color: var(--ganf-leise);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
}

/* Linien in gewohnter Form: Stadtbahn weiß auf Blau, Bus dunkel auf Gelb —
   dieselben Farben wie die Schilder. Deshalb braucht keine Zeile das Wort
   „Bus" oder „Stadtbahn". */
.glattt-anfahrt .ganf-linien { display: flex; gap: .25em; flex-wrap: wrap; margin-top: .15em; }
.glattt-anfahrt .ganf-linie {
    font-size: .68em;
    font-weight: 700;
    line-height: 1.45;
    border-radius: 4px;
    padding: .12em .4em;
    min-width: 1.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.glattt-anfahrt .ganf-linie--bahn { background: var(--ganf-schild-blau); color: #fff; }
.glattt-anfahrt .ganf-linie--bus { background: var(--ganf-schild-gelb); color: #2A2A16; }

/* --- Wegbeschreibungen ----------------------------------------------- */

.glattt-anfahrt .ganf-weg { border-bottom: 1px solid var(--ganf-linie); }
.glattt-anfahrt .ganf-weg:first-child { border-top: 1px solid var(--ganf-linie); }

.glattt-anfahrt .ganf-weg-knopf {
    display: flex;
    align-items: center;
    gap: .7em;
    width: 100%;
    padding: .75em .2em !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: inherit !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left;
    color: inherit;
    cursor: pointer;
    min-height: 0;
}
.glattt-anfahrt .ganf-weg-knopf:hover { background: none !important; }
.glattt-anfahrt .ganf-weg-knopf:focus-visible { outline: 2px solid var(--ganf-akzent); outline-offset: 2px; }
.glattt-anfahrt .ganf-weg-titel { flex: 1; min-width: 0; font-size: .92em; line-height: 1.35; }

.glattt-anfahrt .ganf-weg-knopf .ganf-chev {
    flex: none;
    width: .85em;
    height: .85em;
    stroke: var(--ganf-akzent);
    stroke-width: 2.2;
    fill: none;
    transition: transform .3s ease;
}
.glattt-anfahrt .ganf-weg.ist-offen .ganf-chev { transform: rotate(180deg); }

/* Aufklappen ohne gemessene Hoehe: 0fr → 1fr laesst sich animieren und
   braucht kein JavaScript, das den Inhalt ausmisst. */
.glattt-anfahrt .ganf-weg-inhalt {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
}
.glattt-anfahrt .ganf-weg.ist-offen .ganf-weg-inhalt { grid-template-rows: 1fr; }
.glattt-anfahrt .ganf-weg-inhalt > div { overflow: hidden; }

.glattt-anfahrt .ganf-weg-text {
    list-style: none;
    margin: 0;
    padding: 0 0 1em 2.4em;
    font-size: .88em;
    line-height: 1.6;
    color: var(--ganf-leise);
    counter-reset: ganf-schritt;
}
.glattt-anfahrt .ganf-weg-text li {
    position: relative;
    margin: 0;
    padding: .15em 0 .15em 1.2em;
    list-style: none;
    counter-increment: ganf-schritt;
}
.glattt-anfahrt .ganf-weg-text li::marker { content: none; }
.glattt-anfahrt .ganf-weg-text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ganf-akzent);
}

/* --- Piktogramme ----------------------------------------------------- */

.glattt-anfahrt .ganf-pikto {
    flex: none;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
    background: #FBF3D9;
    display: grid;
    place-items: center;
}
.glattt-anfahrt .ganf-pikto svg {
    width: .9em;
    height: .9em;
    stroke: var(--ganf-akzent-text);
    stroke-width: 1.8;
    fill: none;
}

/* ====================================================================
   Darstellung „Reiter“
   ==================================================================== */

.glattt-anfahrt .ganf-reiter {
    display: flex;
    gap: .4em;
    margin: 1.2em 0 1em;
    overflow-x: auto;
    padding-bottom: .2em;
    scrollbar-width: thin;
}
.glattt-anfahrt .ganf-reiter button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font: inherit !important;
    font-size: .85em !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    background: none !important;
    border: 1px solid var(--ganf-linie) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding: .5em .95em !important;
    color: var(--ganf-leise);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
    min-height: 0;
}
.glattt-anfahrt .ganf-reiter button:hover { color: inherit; border-color: var(--ganf-akzent) !important; }
.glattt-anfahrt .ganf-reiter button[aria-selected="true"] {
    background: var(--ganf-akzent) !important;
    border-color: var(--ganf-akzent) !important;
    color: #1A1712;
    font-weight: 700 !important;
}
.glattt-anfahrt .ganf-reiter button:focus-visible { outline: 2px solid var(--ganf-akzent); outline-offset: 2px; }
.glattt-anfahrt .ganf-reiter button .ganf-pikto { width: 1.3em; height: 1.3em; background: none; }
.glattt-anfahrt .ganf-reiter button .ganf-pikto svg { stroke: currentColor; width: 1em; height: 1em; }

.glattt-anfahrt .ganf-tafel[hidden] { display: none; }

/* ====================================================================
   Darstellung „Ankunftskarten“
   ==================================================================== */

.glattt-anfahrt .ganf-karten {
    display: grid;
    gap: 1em;
    /* min(100%, …) statt einer festen Mindestbreite: Sonst erzeugt auto-fit
       auch in einer 358 px schmalen Spalte eine 300-px-Spalte. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    margin-top: 1.2em;
}
.glattt-anfahrt .ganf-karte-block {
    /* Eigener, BENANNTER Container: In der schmalen Karte muss die Zeile
       anders brechen als im breiten Bereich. */
    container: ganf-block / inline-size;
    background: var(--ganf-flaeche);
    border: 1px solid var(--ganf-linie);
    border-radius: 14px;
    padding: 1.1em 1.15em;
    display: flex;
    flex-direction: column;
    gap: .6em;
    min-width: 0;
}
.glattt-anfahrt .ganf-block-kopf { display: flex; align-items: center; gap: .7em; }
.glattt-anfahrt .ganf-block-kopf h4,
.row .col .glattt-anfahrt .ganf-block-kopf h4 {
    font-size: 1em !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}
.glattt-anfahrt .ganf-kern { font-size: .88em; line-height: 1.5; color: var(--ganf-leise); margin: 0; }
.glattt-anfahrt .ganf-kern b { color: inherit; }
.glattt-anfahrt .ganf-karte-block .ganf-liste li:first-child { border-top: 0; }
.glattt-anfahrt .ganf-karte-block .ganf-liste li:last-child { border-bottom: 0; }
.glattt-anfahrt .ganf-karte-block .ganf-weg:first-child { border-top: 0; }
.glattt-anfahrt .ganf-karte-block .ganf-weg:last-child { border-bottom: 0; }

/* In einer schmalen Ankunftskarte steht die Entfernung unter dem Namen statt
   daneben — nebeneinander bliebe fuer keines von beiden genug Platz. */
@container ganf-block (max-width: 340px) {
    .glattt-anfahrt .ganf-weite { flex-basis: 100%; margin-left: 0; text-align: left; padding-left: 2.5em; }
    .glattt-anfahrt .ganf-weg-knopf .ganf-weite { flex-basis: auto; margin-left: auto; text-align: right; padding-left: 0; }
}

/* ====================================================================
   Darstellung „Liste und Karte“
   ==================================================================== */

.glattt-anfahrt .ganf-raster {
    display: grid;
    gap: 2em;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    margin-top: 1.2em;
}
.glattt-anfahrt .ganf-karte-spalte { position: sticky; top: 1rem; }
.glattt-anfahrt .ganf-gruppe { margin-bottom: 1.5em; }
.glattt-anfahrt .ganf-gruppe:last-child { margin-bottom: 0; }
.glattt-anfahrt .ganf-gruppe > h4,
.row .col .glattt-anfahrt .ganf-gruppe > h4 {
    font-size: .72em !important;
    line-height: 1.3 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ganf-leise);
    font-weight: 700;
    margin: 0 0 .5em !important;
}

@container ganf (max-width: 780px) {
    .glattt-anfahrt .ganf-raster { grid-template-columns: 1fr; gap: 1.25em; }
    /* Ueber der Liste waere die Karte weg, sobald man scrollt — unter ihr
       bleibt sie stehen, wo sie gebraucht wird. */
    .glattt-anfahrt .ganf-karte-spalte { position: static; order: 2; }
    .glattt-anfahrt .ganf-spalte { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .glattt-anfahrt *,
    .glattt-anfahrt *::before,
    .glattt-anfahrt *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}