/**
 * VGP Fahrplansuche – Styles
 * Variablen auf .vgp-fahrplansuche-widget beschränkt,
 * damit sie die Abfahrtstafel-Variablen des Plugins nicht überschreiben.
 */

/* ---- Scoped CSS Custom Properties ---- */
.vgp-fahrplansuche-widget {
    --vgp-primary:   #3a6578;
    --vgp-primary-d: #2d5060;
    --vgp-accent:    #bec832;
    --vgp-bg:        #f2f6f8;
    --vgp-border:    #c5d5dc;
    --vgp-text:      #18181b;
    --vgp-radius:    8px;
    --vgp-shadow:    0 4px 20px rgba(0,0,0,.10);
}

/* ── Wrapper ── */
.vgp-fahrplansuche-widget {
    font-family: "Bricolage Grotesque", sans-serif;
    color: var(--vgp-text);
    margin: 1.5rem 0;
}

/* ── Formular-Container ── */
.vgp-form-container {
    background: var(--vgp-bg);
    border: 1px solid var(--vgp-border);
    border-radius: var(--vgp-radius);
    padding: 1.8rem 2rem;
    box-shadow: var(--vgp-shadow);
}

.vgp-widget-title {
    margin: 0 0 1.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--vgp-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.vgp-widget-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.2em;
    background: var(--vgp-primary);
    border-radius: 2px;
}

/* ── Start / Ziel Gruppe ── */
.vgp-field-group {
    display:       flex;
    flex-direction: column;
    gap:           .5rem;
    margin-bottom: 1rem;
}

/* Einzelnes Feld (Start oder Ziel) */
.vgp-field {
    display:       flex;
    flex-direction: column;
    gap:           .3rem;
}

/* Swap-Button neben dem Start-Label (Textlink-Stil, rechte Kante) */
.vgp-field-label-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   .3rem;
}

.vgp-field-label-row .vgp-field-label {
    margin-bottom: 0;
}

/* Textlink-Stil überschreibt den Kreis-Stil des Swap-Buttons */
.vgp-field-label-row .vgp-swap-btn {
    width:         auto;
    height:        auto;
    border-radius: 20px;
    padding:       .18rem .55rem;
    font-size:     .78rem;
    font-weight:   600;
    font-family:   inherit;
    display:       flex;
    align-items:   center;
    gap:           .3rem;
    background:    transparent;
    border:        1px solid var(--vgp-border);
    color:         var(--vgp-primary);
    letter-spacing: .01em;
}

.vgp-field-label-row .vgp-swap-btn:hover {
    background:   #e8f1f5;
    border-color: var(--vgp-primary);
    color:        var(--vgp-primary);
}

/* Swap-Button */
.vgp-swap-btn {
    width:         36px;
    height:        36px;
    border:        1.5px solid var(--vgp-border);
    border-radius: 50%;
    background:    #fff;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--vgp-primary);
    transition:    background .2s, color .2s, border-color .2s;
    padding:       0;
    flex-shrink:   0;
}

.vgp-swap-btn:hover {
    background:   var(--vgp-primary);
    border-color: var(--vgp-primary);
    color:        #fff;
}

/* ── Horizontales Layout (Standalone [vgp_fahrplansuche]) ── */
.vgp-fg-labels {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

.vgp-fg-labels .vgp-field-label {
    flex:   1;
    margin: 0;
}

/* Swap-Button in der Label-Zeile (Ausrichtungs-Spacer für Inputs unten) */
.vgp-fg-labels-gap {
    flex:    0 0 36px;
    display: block;
}

/* Tauschen-Button: nur mobil sichtbar (Text-Link-Stil, neben Start-Label) */
.vgp-swap--mobile {
    display:        none;   /* Desktop: ausgeblendet */
    flex:           0 0 auto;
    align-items:    center;
    gap:            .3rem;
    width:          auto;
    height:         auto;
    border-radius:  20px;
    padding:        .25rem .65rem;
    font-size:      .82rem;
    font-weight:    600;
    font-family:    inherit;
    background:     transparent;
    border:         1.5px solid var(--vgp-border);
    color:          var(--vgp-primary);
    letter-spacing: .01em;
    cursor:         pointer;
    transition:     background .15s, border-color .15s;
    white-space:    nowrap;
}
.vgp-swap--mobile:hover {
    background:   #e8f1f5;
    border-color: var(--vgp-primary);
    color:        var(--vgp-primary);
}

/* Swap-Button Desktop (Kreis-Icon zwischen den Inputs) */
.vgp-fg-inputs .vgp-swap-btn {
    flex:       0 0 auto;
    align-self: flex-start;
    margin-top: .4rem;
}

.vgp-fg-inputs {
    display:     flex;
    align-items: flex-start;
    gap:         .5rem;
}

.vgp-fg-inputs .vgp-input-wrapper {
    flex:           1;
    position:       relative;
    display:        flex;
    flex-direction: column;
}

.vgp-bottom-row {
    display:       flex;
    align-items:   stretch;
    gap:           .5rem;
    margin-top:    .6rem;
    margin-bottom: 1.2rem;
}

.vgp-bottom-left {
    flex:           1;
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            0;
    flex-wrap:      nowrap;
    min-width:      0;
}

.vgp-bottom-gap {
    flex:    0 0 36px;
    display: block;
}

.vgp-bottom-right {
    flex:            1;
    display:         flex;
    align-items:     flex-end;
    justify-content: stretch;
}

/* Radios-Abstand im horizontalen Layout */
.vgp-type-toggle--h {
    margin-right: 1.2rem;
}

/* Suchen-Button im horizontalen Layout: normale Höhe, kein margin-bottom */
.vgp-bottom-right .vgp-search-btn {
    padding:       .57rem 1rem;
    margin-bottom: 0;
}

/* Quick-Buttons-Reihe (unter den Inputs) */
.vgp-fg-quick {
    display: flex;
    gap:     .5rem;
}

.vgp-fg-quick-spacer {
    width: 36px; /* gleiche Breite wie Swap-Button */
    flex-shrink: 0;
}

.vgp-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    position: relative;
}

.vgp-field label,
.vgp-field .vgp-field-label {
    font-size: .8rem;
    font-weight: 600;
    color: #325562;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.vgp-input-wrapper {
    position: relative;
}

.vgp-input-wrapper input[type="text"] {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid var(--vgp-border);
    border-radius: var(--vgp-radius);
    font-size: 1rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.vgp-input-wrapper input[type="text"]:focus {
    outline: none;
    border-color: var(--vgp-primary);
    box-shadow: 0 0 0 3px rgba(72,125,144,.15);
}

/* Richtungsicons in den Labels */
.vgp-field-label {
    display:     flex;
    align-items: center;
    gap:         .35rem;
    font-size:   .8rem;
    font-weight: 600;
    color:       #325562;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .3rem;
}

.vgp-dir-icon {
    color:       var(--vgp-primary);
    flex-shrink: 0;
}

/* Quick-Button als Icon: direkt rechts am Eingabefeld */
.vgp-quick-btn--icon {
    flex-shrink:     0;
    align-self:      stretch;    /* dehnt sich auf die Höhe des Input aus */
    box-sizing:      border-box;
    width:           38px;
    margin:          0;
    padding:         0;
    border-radius:   0;
    border:          1.5px solid var(--vgp-border);
    border-left:     none;
    font-size:       1rem;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #fff;
    color:           var(--vgp-primary);
    cursor:          pointer;
    transition:      background .15s, border-color .15s;
}

.vgp-quick-btn--icon:hover {
    background:   #e8f1f5;
    border-color: var(--vgp-primary);
}

/* Letzter Quick-Button: rechte Ecken abrunden */
.vgp-input-wrapper .vgp-quick-btn--icon:last-child {
    border-radius: 0 var(--vgp-radius) var(--vgp-radius) 0;
}

/* Input-Wrapper als Flex-Zeile, kein Abstand zum Button */
.vgp-input-wrapper:has(.vgp-quick-btn--icon) {
    display:        flex;
    flex-direction: row;
    align-items:    stretch;
    gap:            0;
}

/* Input: rechte Ecken gerade, Button schließt nahtlos an */
.vgp-input-wrapper:has(.vgp-quick-btn--icon) input[type="text"] {
    flex:          1;
    border-radius: var(--vgp-radius) 0 0 var(--vgp-radius);
    box-sizing:    border-box;
}

/* Quick-Button (Text-Variante, Fallback) 
.vgp-quick-btn {
    display:    inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: .3rem;
    margin-top: .4rem;
    padding: .25rem .65rem;
    font-size: .78rem;
    color: var(--vgp-primary);
    background: transparent;
    border: 1px solid var(--vgp-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
*/
.vgp-geo-btn {
    border-radius: 0 var(--vgp-radius) var(--vgp-radius) 0;
}
.vgp-quick-btn:hover {
    background: #e8f1f5;
    border-color: var(--vgp-primary);
}

/* Geolocation-Button: Lade-Animation */
.vgp-geo-btn.vgp-geo-loading {
    opacity: .65;
    cursor:  wait;
}
.vgp-geo-btn.vgp-geo-loading svg {
    animation: vgp-spin .8s linear infinite;
}

/* Schnellauswahl-Panel */
.vgp-quick-panel {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 1.5px solid var(--vgp-primary);
    border-radius: var(--vgp-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    z-index: 10000;
    overflow: hidden;
}

.vgp-quick-header {
    padding: .5rem .9rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    background: var(--vgp-primary);
}

.vgp-quick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.vgp-quick-list li {
    padding: .5rem .9rem;
    font-size: .9rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background .12s;
}

.vgp-quick-list li:last-child { border-bottom: none; }
.vgp-quick-list li:hover { background: #e8f1f5; }

/* Stadtgruppen-Überschrift im Haltestellensuche Quick-Panel */
.vgp-quick-city-head {
    padding: .3rem .9rem .2rem !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vgp-primary, #487d90);
    background: #f5f9fb !important;
    border-bottom: 1px solid #e0ecf2 !important;
    cursor: default !important;
    pointer-events: none;
}
.vgp-quick-city-head:hover { background: #f5f9fb !important; }

/* Autocomplete-Liste */
.vgp-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1.5px solid var(--vgp-primary);
    border-radius: 0 0 var(--vgp-radius) var(--vgp-radius);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    z-index: 9999;
    display: none;
    max-height: 240px;
    overflow-y: auto;
}

.vgp-suggestions li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    cursor: pointer;
    font-size: .92rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background .12s;
}

.vgp-suggestions li:last-child { border-bottom: none; }

.vgp-suggestions li:hover,
.vgp-suggestions li.vgp-active {
    background: #e8f1f5;
}

.vgp-ac-icon { font-size: 1rem; flex-shrink: 0; }
.vgp-ac-name { flex: 1; }

.vgp-ac-loading {
    color: #888;
    font-style: italic;
    font-size: .88rem !important;
    cursor: default !important;
}

.vgp-ac-loading:hover { background: transparent !important; }

.vgp-ac-error,
.vgp-ac-no-result {
    color: #888;
    font-size: .88rem !important;
    cursor: default !important;
}

.vgp-ac-error:hover,
.vgp-ac-no-result:hover { background: transparent !important; }

/* Kleiner Spinner im Autocomplete */
.vgp-ac-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-top-color: var(--vgp-primary);
    border-radius: 50%;
    animation: vgp-spin .6s linear infinite;
    vertical-align: middle;
    margin-right: .3rem;
}

/* ── Optionen-Zeile: Typ + Datum + Zeit ── */
.vgp-options-row {
    display:     flex;
    align-items: center;
    gap:         .8rem;
    flex-wrap:   wrap;
    margin-top:  .2rem;
    margin-bottom: 1rem;
}

.vgp-type-toggle {
    display:     flex;
    gap:         .5rem;
    flex-shrink: 0;
}

.vgp-radio-label {
    display:     flex;
    align-items: center;
    gap:         .3rem;
    font-size:   .9rem;
    cursor:      pointer;
    white-space: nowrap;
}

.vgp-radio-label input[type="radio"] {
    accent-color: var(--vgp-primary);
    width:  16px;
    height: 16px;
    cursor: pointer;
}

/* Screen-reader-only utility */
.vgp-sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}

.vgp-date-time {
    display:  flex;
    gap:      .4rem;
    flex:     1;
    min-width: 120px;
}

.vgp-date-time input[type="date"] {
    flex:          1.4;
    padding:       .55rem .6rem;
    border:        1.5px solid var(--vgp-border);
    border-radius: var(--vgp-radius);
    font-size:     .88rem;
    background:    #fff;
    cursor:        pointer;
    box-sizing:    border-box;
    min-width:     0;
}

.vgp-date-time input[type="time"] {
    flex:          1;
    padding:       .55rem .5rem;
    border:        1.5px solid var(--vgp-border);
    border-radius: var(--vgp-radius);
    font-size:     .88rem;
    background:    #fff;
    cursor:        pointer;
    box-sizing:    border-box;
    min-width:     0;
}

.vgp-date-time input:focus {
    outline:      none;
    border-color: var(--vgp-primary);
}

/* ── Such-Button (volle Breite) ── */
.vgp-search-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .45rem;
    width:           100%;
    padding:         .65rem 1rem;
    background:    var(--vgp-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--vgp-radius);
    font-size:     1rem;
    font-weight:   700;
    font-family:   inherit;
    cursor:        pointer;
    transition:    background .2s, transform .1s;
    letter-spacing: .03em;
    white-space:   nowrap;
    margin-bottom: 1.2rem;
}

.vgp-search-btn:hover  { background: var(--vgp-primary-d); }
.vgp-search-btn:active { transform: scale(.98); }

/* Reset-Modus: Primärfarbe (dunkler) signalisiert Zurücksetzen */
.vgp-search-btn.vgp-btn--reset {
    background: var(--vgp-primary-d, #3a6578);
    color:      #fff;
}
.vgp-search-btn.vgp-btn--reset:hover {
    background: #2e5060;
}

/* ── Ergebnis-Container ── */
.vgp-results-container {
    margin-top: 1.5rem;
}

/* Laden / Fehler */
.vgp-loading {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--vgp-border);
    border-radius: var(--vgp-radius);
    color: var(--vgp-primary);
    font-size: .95rem;
}

.vgp-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--vgp-border);
    border-top-color: var(--vgp-primary);
    border-radius: 50%;
    animation: vgp-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes vgp-spin { to { transform: rotate(360deg); } }

.vgp-error {
    padding: .9rem 1.2rem;
    background: #fff3f3;
    border: 1px solid #f5c6c6;
    border-radius: var(--vgp-radius);
    color: #c0392b;
    font-size: .95rem;
}

.vgp-no-results {
    padding: 1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--vgp-border);
    border-radius: var(--vgp-radius);
    color: #666;
    font-size: .95rem;
}

/* Ergebnis-Header */
.vgp-results-header {
    font-size: .95rem;
    color: #555;
    margin-bottom: .8rem;
    padding: .5rem .2rem;
}

.vgp-results-header .vgp-res-from,
.vgp-results-header .vgp-res-to {
    font-weight: 700;
    color: var(--vgp-text);
}

.vgp-results-header .vgp-arrow {
    color: var(--vgp-primary);
    font-size: 1.1em;
}

/* ══ Verbindungskarte ══ */
.vgp-journey-card {
    background: #fff;
    border: 1px solid var(--vgp-border);
    border-radius: var(--vgp-radius);
    margin-bottom: .6rem;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .2s, border-color .2s;
}

.vgp-journey-card:hover {
    box-shadow: 0 2px 14px rgba(0,0,0,.10);
    border-color: var(--vgp-primary);
}

.vgp-journey-card.vgp-selected {
    border-color: var(--vgp-primary);
    box-shadow:   0 0 0 2px var(--vgp-primary);
}

/* ── Zusammenfassung ── */
.vgp-journey-summary {
    padding: .9rem 1.1rem .7rem;
}

/* Obere Zeile: Zeiten + Reisebalken */
.vgp-summary-top {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    margin-bottom: .45rem;
}

.vgp-dep, .vgp-arr {
    font-size:   1.2rem;
    font-weight: 800;
    color:       var(--vgp-text);
    white-space: nowrap;
    min-width:   3.4ch;
}

.vgp-arr { text-align: right; }

/* ── Reise-Balken (horizontal) ── */
.vgp-journey-bar {
    flex:        1;
    display:     flex;
    align-items: center;
    min-width:   0;
    height:      28px;
    overflow:    visible;
}

.vgp-jb-segment {
    display:     flex;
    align-items: center;
    flex:        1;
    min-width:   0;
}

.vgp-jb-dot {
    flex-shrink:   0;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    border:        2.5px solid #488;
    display:       flex;
    align-items:   center;
    justify-content: center;
    z-index:       1;
}

.vgp-jb-dot-end {
    flex-shrink: 0;
    width:       20px;
    height:      20px;
    border-radius: 50%;
    border:      2.5px solid #488;
}

.vgp-jb-icon {
    font-size:   .55rem;
    font-weight: 700;
    color:       #fff;
    line-height: 1;
}

.vgp-jb-line {
    flex:        1;
    height:      3px;
    min-width:   8px;
    background:  var(--vgp-primary);
}

/* ── Linien-Badges (Reihe) ── */
.vgp-line-badges {
    display:   flex;
    flex-wrap: wrap;
    gap:       .3rem;
    margin-bottom: .45rem;
}

/* ── Meta-Zeile: Dauer / Umstiege / Toggle ── */
.vgp-summary-meta {
    display:     flex;
    align-items: center;
    gap:         .8rem;
    font-size:   .82rem;
    color:       #666;
}

.vgp-meta-item {
    display:     inline-flex;
    align-items: center;
    gap:         .25rem;
}

.vgp-toggle-arrow {
    margin-left: auto;
    color:       #666;
    line-height: 1;
    transition:  transform .25s;
}

.vgp-journey-card.vgp-open .vgp-toggle-arrow {
    transform: rotate(180deg);
}

/* ── Detail-Bereich ── */
.vgp-journey-detail {
    display:    none;
    border-top: 1px solid var(--vgp-border);
    padding:    1rem 1.1rem;
    background: #f7fafb;
}

.vgp-journey-card.vgp-open .vgp-journey-detail {
    display: block;
}

/* ── Transit-Abschnitt ── */
.vgp-leg-transit {
    position:      relative;
    padding-left:  2.2rem;
    margin-bottom: .2rem;
}

/* Vertikale Zeitlinie */
.vgp-leg-transit::before {
    content:    '';
    position:   absolute;
    left:       .72rem;
    top:        1.4rem;
    bottom:     1.4rem;
    width:      3px;
    background: var(--leg-color, var(--vgp-primary));
    border-radius: 2px;
}

/* ── Haltepunkt (Dep / Arr) ── */
.vgp-detail-stop {
    display:     flex;
    align-items: flex-start;
    gap:         .6rem;
    position:    relative;
    padding:     .3rem 0;
}

.vgp-detail-stop::before {
    content:       '';
    position:      absolute;
    left:          -1.53rem;
    top:           .55rem;
    width:         11px;
    height:        11px;
    border-radius: 50%;
    background:    var(--leg-color, var(--vgp-primary));
    border:        2px solid #fff;
    box-shadow:    0 0 0 2px var(--leg-color, var(--vgp-primary));
    flex-shrink:   0;
}

.vgp-ds-time {
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--vgp-text);
    min-width:   3.2ch;
    white-space: nowrap;
}

.vgp-ds-info {
    display:     flex;
    align-items: baseline;
    gap:         .5rem;
    flex-wrap:   wrap;
}

.vgp-ds-name {
    font-size:   .95rem;
    font-weight: 600;
    color:       var(--vgp-text);
}

.vgp-ds-platform {
    font-size:  .78rem;
    color:      #888;
    background: #f0f0f0;
    padding:    .05rem .35rem;
    border-radius: 3px;
}

/* ── Linien-Info-Reihe (zwischen Dep und Arr) ── */
.vgp-leg-info-row {
    display:     flex;
    align-items: flex-start;
    gap:         .5rem;
    padding:     .4rem 0 .4rem .1rem;
}

.vgp-leg-mode-dot {
    flex-shrink:   0;
    width:         11px;
    height:        11px;
    border-radius: 50%;
    margin-top:    .3rem;
    position:      relative;
    left:          -1.55rem;
}

.vgp-leg-info-body {
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    gap:        .35rem;
}

/* Fußnoten / Rufbus-Hinweise */
.vgp-leg-notes {
    width:       100%;
    margin-top:  .45rem;
    display:     flex;
    flex-direction: column;
    gap:         .25rem;
}

.vgp-leg-note {
    font-size:   .8rem;
    color:       #555;
    background:  #f8f8f8;
    border-left: 3px solid #ccc;
    padding:     .3rem .55rem;
    border-radius: 0 3px 3px 0;
    line-height: 1.4;
}

.vgp-leg-note.vgp-note-rufbus {
    background:  #fff8e1;
    border-color: #f59e0b;
    color:       #5c4400;
    font-weight: 500;
}

.vgp-direction {
    font-size: .85rem;
    color:     #555;
}

.vgp-leg-stats {
    width:      100%;
    font-size:  .8rem;
    color:      #888;
    display:    flex;
    align-items: center;
    gap:        .3rem;
    margin-top: .15rem;
}

.vgp-dot-sep { color: #ccc; }

/* Zwischenstationen-Toggle */
.vgp-inter-toggle {
    background:  transparent;
    border:      none;
    color:       var(--vgp-primary);
    font-size:   .8rem;
    font-family: inherit;
    font-weight: 600;
    cursor:      pointer;
    padding:     0;
    display:     inline-flex;
    align-items: center;
    gap:         .15rem;
}

.vgp-inter-chevron {
    display:    inline-block;
    font-size:  .7rem;
    transition: transform .2s;
}

/* Zwischenstationen-Liste */
.vgp-inter-stops {
    margin-top: .3rem;
    padding:    .3rem .5rem;
    background: rgba(72,125,144,.06);
    border-radius: 4px;
    width:      100%;
}

.vgp-inter-stop {
    display:   flex;
    gap:       .7rem;
    padding:   .15rem 0;
    font-size: .82rem;
}

.vgp-inter-time {
    color:      #888;
    min-width:  3.2ch;
    font-weight: 500;
}

.vgp-inter-name { color: #444; }

/* ── Fußweg / Umstieg ── */
.vgp-leg-walk {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    padding:     .5rem 0 .5rem 2.2rem;
    font-size:   .85rem;
    color:       #666;
    position:    relative;
}

.vgp-leg-walk::before {
    content:   '';
    position:  absolute;
    left:      .72rem;
    top:       0;
    bottom:    0;
    width:     3px;
    background: repeating-linear-gradient(
        to bottom, #ccc 0 4px, transparent 4px 8px);
}

.vgp-leg-walk-icon {
    position:  absolute;
    left:      .25rem;
    color:     #888;
}

.vgp-leg-walk-label strong { color: var(--vgp-text); }

/* ── Linien-Badges ── */
.vgp-badge {
    display:       inline-block;
    padding:       .15rem .5rem;
    border-radius: 4px;
    font-size:     .8rem;
    font-weight:   700;
    letter-spacing: .04em;
    white-space:   nowrap;
}

.vgp-badge-bus     { background: #3a6578; color: #fff; }
.vgp-badge-re      { background: #3a6578; color: #fff; }
.vgp-badge-sbahn   { background: #007a33; color: #fff; }
.vgp-badge-ubahn   { background: #003da5; color: #fff; }
.vgp-badge-tram    { background: #c0001a; color: #fff; }
.vgp-badge-default { background: #555;    color: #fff; }

/* ── Responsive (Mobile ≤ 640 px) ── */
@media (max-width: 640px) {

    /* Formular-Padding verringern */
    .vgp-form-container { padding: 1.2rem 1rem; }

    /* ─── Horizontales Layout → vertikal ─── */
    /* Ziel-Label + Gap in der Label-Zeile ausblenden */
    .vgp-fg-labels label[for="vgp-ziel"] { display: none; }
    .vgp-fg-labels-gap                   { display: none; }
    /* Mobilen Tauschen-Button einblenden, Desktop-Button ausblenden */
    .vgp-swap--mobile            { display: flex; }
    .vgp-fg-inputs .vgp-swap-btn { display: none; }

    .vgp-fg-inputs {
        flex-direction: column;
        align-items:    stretch;
        gap:            .5rem;
    }

    /* Ziel-Label als Pseudo-Element vor dem Ziel-Input */
    .vgp-fg-inputs .vgp-input-wrapper:has(.vgp-quick-btn--icon) {
        flex-wrap: wrap;   /* ::before nimmt volle Breite → Input + Button in Zeile 2 */
    }
    .vgp-fg-inputs .vgp-input-ziel::before {
        content:        'Ziel';
        flex:           0 0 100%;
        font-size:      .8rem;
        font-weight:    600;
        color:          var(--vgp-primary, #487d90);
        text-transform: uppercase;
        letter-spacing: .05em;
        padding-bottom: .3rem;
        align-self:     flex-start;
    }

    /* ─── Bottom-Row stacken ─── */
    .vgp-bottom-row {
        flex-direction: column;
        gap:            .5rem;
    }
    .vgp-bottom-gap  { display: none; }
    .vgp-bottom-left {
        flex-direction: column;
        align-items:    stretch;
        gap:            .4rem;
        width:          100%;
    }
    .vgp-type-toggle--h { margin-right: 0; }
    .vgp-bottom-right   { width: 100%; }
    .vgp-bottom-right .vgp-search-btn {
        width:         100%;
        margin-bottom: 0;
    }

    /* ─── Optionen-Zeile (vertikales Layout) ─── */
    .vgp-options-row {
        gap:       .5rem;
    }
    .vgp-type-toggle  { flex-basis: 100%; }   /* eigene Zeile */
    .vgp-date-time    { width: 100%; }

    /* ─── Größere Touch-Ziele ─── */
    .vgp-quick-btn--icon {
        width:      44px;
        min-height: 44px;
    }

    /* ─── Quick-Panel: Breite auf Viewport beschränken ─── */
    .vgp-quick-panel {
        min-width: 0;
        max-width: calc(100vw - 2rem);
        width:     100%;
        left:      0;
        right:     0;
    }

    /* ─── Ergebnis-Karten ─── */
    .vgp-dep, .vgp-arr   { font-size: 1.05rem; }
    .vgp-journey-summary { padding: .75rem .9rem .6rem; }
    .vgp-journey-detail  { padding: .8rem .9rem; }
}