/* Nur die klassische Frontend-Fahrtauswahl, nicht Backend oder Ticketing. */
#reservierung_div_comp[data-booking-a11y="true"] #fahrt_suchen #cal_hinfahrt_datum,
#reservierung_div_comp[data-booking-a11y="true"] #fahrt_suchen select {
    box-sizing: border-box;
    min-height: 2.75rem;
    border: 1px solid #cacaca;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, .1);
    font-family: inherit;
    font-size: 1rem;
}
#reservierung_div_comp[data-booking-a11y="true"] #fahrt_suchen #cal_hinfahrt_datum:focus,
#reservierung_div_comp[data-booking-a11y="true"] #fahrt_suchen select:focus {
    border-color: #8a8a8a;
}
#reservierung_div_comp[data-booking-a11y="true"] #fahrt_suchen .buchung-station-name {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 639px) {
    #reservierung_div_comp[data-booking-a11y="true"] > .buchung-hauptbereich > a:has(> img:only-child) {
        display: flex;
        justify-content: center;
    }
    #reservierung_div_comp[data-booking-a11y="true"] > .buchung-hauptbereich > img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #reservierung_div_comp[data-booking-a11y="true"] #fahrt_suchen #buttonFinden {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-height: 2.75rem;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/* Sichtbare Schritte bleiben von den bestehenden Zuständen und Klicks gesteuert. */
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte {
    margin: 16px 0 24px;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte > ul {
    display: flex;
    gap: 8px;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    list-style: none;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte li:not(.hide) {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    float: none;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 12px 6px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f1f5f7;
    color: #637b8a;
    text-align: center;
    opacity: 1;
    filter: none;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte li.allowed {
    border-color: currentColor;
    background: #fff;
    color: inherit;
    box-shadow: 0 3px 12px rgba(0, 35, 55, .06);
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte li.buchung-schritt-abgeschlossen {
    color: inherit;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte span {
    position: static;
    top: auto;
    color: inherit;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte .marker {
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: #e2ebf0;
    font-size: 1rem;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte li.allowed .marker {
    background: currentColor;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte li.allowed .marker > i {
    color: #fff;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte .caption {
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte .caption[role="button"] {
    cursor: pointer;
}
#reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte .caption:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 3px;
}
@media (min-width: 640px) {
    #reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte li:not(.hide) {
        flex-direction: row;
        gap: 10px;
        padding: 14px 12px;
    }
    #reservierung_div_comp[data-booking-a11y="true"] #zeitstrahl_buchungsschritte .caption {
        font-size: .9375rem;
    }
}

#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] {
    position: relative;
    margin: 8px 0;
    padding: 12px 14px;
    border: 1px solid #ccd8df;
    border-radius: 12px;
    background: #fff !important;
    color: #16364a !important;
    box-shadow: 0 3px 12px rgba(0, 35, 55, .04);
    line-height: 1.35;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"].active {
    border-color: #16364a;
    background: #f0f6f9 !important;
    box-shadow: inset 4px 0 #16364a;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"]:focus-visible {
    outline: 3px solid #16364a;
    outline-offset: 3px;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 6px 12px;
    align-items: start;
    margin: 0;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row::before,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row::after {
    content: none;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row > .column {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
    color: #16364a !important;
    overflow-wrap: anywhere;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .suchergebnis_auswahl {
    display: none;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .suchergebnis_datum {
    grid-column: 1 / -1;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .suchergebnis_abfahrt {
    grid-column: 1;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .buchung-fahrt-richtung {
    align-self: center;
    grid-column: 2;
    text-align: center;
    color: #637b8a;
    font-size: 1rem;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .suchergebnis_ankunft {
    display: block !important;
    grid-column: 3;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"][keine_ankunft_zeigen="1"] .suchergebnis_ankunft {
    display: none !important;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .suchergebnis_abfahrt > .show-for-small-only,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row > .suchergebnis_linie > .SchiffBezeichnung {
    display: none !important;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .buchung-fahrt-label {
    display: block;
    margin-bottom: 2px;
    color: #536e7e !important;
    font-size: .8125rem;
    font-weight: 400;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .uhrzeit,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .buchung-fahrt-name {
    font-family: inherit;
    font-size: 1.25rem !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #16364a !important;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .zeitanzeige,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .SchiffBezeichnungLabel,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .buchung-fahrt-name {
    color: #16364a !important;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] sub,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .SchiffBezeichnungLabel {
    display: block;
    position: static;
    margin: 2px 0 0;
    font-family: inherit;
    font-size: .9375rem !important;
    font-weight: 400;
    line-height: 1.35;
    color: #16364a !important;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row > .suchergebnis_linie {
    grid-column: 1 / -1;
    padding-top: 6px;
    border-top: 1px solid #dbe4e9;
    font-size: .9375rem;
    font-weight: 600;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .SchiffBezeichnungLabel {
    margin: 0;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row > .suchergebnis_schiff {
    display: flex !important;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .875rem;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 #cal_rueckfahrt_datum {
    width: 14rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .buchung-fahrt-schiff-icon {
    margin-right: 6px;
    color: #637b8a;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .suchergebnis_kapazitaet {
    grid-column: 1 / -1;
    justify-self: end;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .kapazitaet_ok,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .capacityicon.fa-check-circle,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .capacityicon.fa-check-double,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .capacityicon.fa-circle-check {
    display: none !important;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .WarnungOrange,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .capacityicon.fa-exclamation-circle {
    color: #a65c00 !important;
}
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .kapazitaet_notok,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"][soldout="true"] .capacityicon,
#reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .capacityicon.fa-minus-circle {
    color: #b42318 !important;
}
@media (min-width: 640px) {
    #reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row {
        grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) minmax(0, 1.3fr);
        row-gap: 2px;
    }
    #reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row > .suchergebnis_linie {
        grid-column: 4;
        border-top: 0;
        padding: 0 0 0 12px;
        border-left: 1px solid #dbe4e9;
        font-size: 1.25rem;
    }
    #reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row:not(:has(> .suchergebnis_schiff)) > .suchergebnis_linie {
        grid-row: span 2;
        align-self: center;
    }
    #reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .suchergebnis_abfahrt,
    #reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .suchergebnis_ankunft,
    #reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] .buchung-fahrt-richtung {
        grid-row: span 2;
    }
    #reservierung_div_comp[data-booking-a11y="true"] #seite1 li[data-booking-fahrtkarte="true"] > .row > .suchergebnis_schiff {
        grid-column: 4;
        padding-left: 12px;
        border-left: 1px solid #dbe4e9;
        flex-wrap: wrap;
        gap: 4px 8px;
    }
}