/*
 * DBMFT-3252 - bahn.de-Redesign (Header / Hero / Footer / Seitenrahmen).
 * VOLLSTAENDIGER NEUAUFBAU - kein Override der Portal-CSS mehr.
 * Pixel-genau an der echten bahn.de vermessen (live in Chrome):
 *   Header   = 1200px zentriert, weiss, box-shadow 0 2px 8px rgba(0,0,0,.3),
 *              z-index 201, eckig (kein border-radius), KEIN Overlap mit dem Hero.
 *   Topbar   = 32px hoch, BG #f0f3f5.
 *   Nav-Leiste = 80px hoch; Nav-Links 16px FETT (700), Farbe #282d37,
 *              roter Hover-/Aktiv-Unterstrich am unteren Leistenrand.
 *   Footer   = graues Vollbreiten-Band #d7dce1 (liegt ausserhalb #doc).
 */

:root {
    --bahn-bg: #f0f3f5;
    --bahn-text: #282d37;
    --bahn-red: #ec0016;
    --bahn-red-dark: #c50014;
    --bahn-footer: #d7dce1;
    --bahn-divider: #d7dce1;
    --bahn-muted: #646973;
    --bahn-container: 1200px;
    --bahn-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --bahn-gutter: 16px;
}

/* ===== Seitenrahmen: grauer Grund, transparente, zentrierte 1200er-Spalte ===== */
html,
body {
    background: var(--bahn-bg) !important;
    color: var(--bahn-text) !important;
    overflow-x: hidden;
}
.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#doc {
    background: transparent !important;
    box-shadow: none !important;
    width: var(--bahn-container) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    flex: 1 0 auto;   /* DBMFT-3252: waechst, damit der Footer unten bleibt */
}

/* ===== Footer immer am unteren Rand (sticky-footer-Pattern, KEIN position:sticky).
   Nur der AEUSSERE Container (body > .container-fluid) - nicht das gleichnamige
   innere #quickfinderContainer. ===== */
body > .container-fluid {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== Aktions-Teaser (gelbes Hinweiskaestchen): gleiche Spaltenbreite wie die
   uebrigen Boxen (#quickfinder/#ticketKonditionen = 840px), zentriert. ===== */
.bahn-teaser {
    max-width: 840px;
    margin: 0 auto 15px;
}

/* ===== Impressum/Datenschutz: Float-Inhalt (Sidebar 250 + Inhalt 710 = 960px)
   zentrieren statt links kleben, plus etwas Abstand nach oben. ===== */
#impressum,
#datenschutz {
    max-width: 980px;
    margin: 32px auto 0;
}

/* Reste des alten bahn.de-Portal-Headers ausblenden (durch .bahn-* ersetzt) */
nav.red,
#tabNav-container,
#mobileLogout,
#service-nav {
    display: none !important;
}

/* ===== Header: 1200px zentriert, weiss, Schatten, eckig - wie bahn.de ===== */
.bahn-header {
    position: relative;
    z-index: 201;
    max-width: 1120px;   /* schmaler als der Hero (1200) -> Bild ragt 40px je Seite heraus */
    margin: 0 auto;
}
.bahn-header-card {
    background: #fff;
    box-shadow: var(--bahn-shadow);
    border-radius: 0;
}

/* Graue Meta-Topbar, 32px, rechtsbuendig */
.bahn-topbar {
    background: var(--bahn-bg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0 24px;
    height: 32px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 14px;
}
.bahn-topbar a {
    color: var(--bahn-text);
    text-decoration: none !important;
    font-family: DBSansRegular, "DB Sans", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
.bahn-topbar a:hover {
    color: var(--bahn-red);
}

/* Weisse Logo-/Navigationszeile, 80px */
.bahn-headrow {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 80px;
    padding: 0 16px;
    box-sizing: border-box;
}
.bahn-logo {
    flex: none;
    display: inline-flex;
    align-items: center;
}
.bahn-logo img {
    display: block;
    height: 40px;
    width: auto;
}
.bahn-bizlogo {
    flex: none;
    height: 24px;
    width: auto;
}

.bahn-nav {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    gap: 0 32px;
    font-size: 16px;
    font-weight: 700;
}
.bahn-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--bahn-text);
    white-space: nowrap;
    /* Portal-CSS draengt den Anker sonst auf Arial 12px/400 - hart ueberschreiben */
    font-family: DBSansBold, "DB Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
/* Nur die obersten Nav-Items bekommen den 3px-Unterstrich - NICHT die
   Flyout-Links darunter (die liegen auch in .bahn-nav). */
.bahn-nav-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #282d37;   /* bahn.de: dunkler Unterstrich, NICHT rot */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.15s ease;
}
.bahn-nav-item > a:hover::after,
.bahn-nav-item > a.active::after {
    transform: scaleX(1);
}

.bahn-headrow-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex: none;
}
.bahn-search {
    display: inline-flex;
    align-items: center;
    color: var(--bahn-red);
}
.bahn-search:hover {
    color: var(--bahn-red-dark);
}
.bahn-sep {
    width: 1px;
    height: 20px;
    background: var(--bahn-divider);
}
.bahn-userform {
    margin: 0;
    padding: 0;
    display: inline-flex;
}
.bahn-user {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    font-family: DBSansBold, "DB Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--bahn-text);
    text-decoration: none !important;
}
.bahn-user:hover {
    color: var(--bahn-red);
}
.bahn-user-ico {
    display: inline-flex;
    color: var(--bahn-muted);
}

/* ===== Hero: Vollbild-Banner direkt unter dem Header (kein Overlap) ===== */
.bahn-hero {
    position: relative;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: #2b3340;
}
.bahn-hero-img {
    display: block;
    width: 100%;
    height: auto;
}
/* ===== Hero-Karte (bahn.de-Stil): weisse Box mit Titel + CTA, oben rechts im Hero.
   Ersetzt das fruehere .bahn-hero-overlay (Titel direkt aufs Hero-Bild). ===== */
.bahn-hero-card {
    position: absolute;
    /* Vertikal zentriert am rechten Hero-Rand (bahn.de-Look). Im Desktop-Fall mit
       Hero-Pull-up wird top per @media (min-width:901) um die halbe Pull-up-Hoehe
       korrigiert; auf Mobil (<=600) sitzt die Karte stattdessen unten (Cover-Layout). */
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 320px;
    max-width: calc(100% - 32px);
    background: #fff;
    border-radius: 7.5px;
    padding: 28px;
    box-sizing: border-box;
    z-index: 5;
}
.bahn-hero-card-title {
    font-family: DBSansBold, "DB Sans", Arial, sans-serif;
    font-size: 22px;
    line-height: 1.25;
    color: var(--bahn-text);
    margin: 0;
}
.bahn-hero-card-subtitle {
    font-family: DBSansRegular, "DB Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--bahn-text);
    margin: 6px 0 0;
}

/* ===== Aktionsrabatt-Badge: roter Kreis oben LINKS im Hero (gespiegelt zur Karte rechts),
   nach rechts geneigt (rotate +8deg). Aktions-Landingpages. ===== */
.bahn-hero-badge {
    position: absolute;
    top: 24px;
    left: 28px;
    width: 154px;
    height: 154px;
    border-radius: 50%;
    background: var(--bahn-red);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    box-sizing: border-box;
    font-family: DBSansBold, "DB Sans", Arial, sans-serif;
    font-size: 36px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: rotate(8deg);
}
.bahn-hero-badge span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.15;
}

/* ===== Aktions-Reiseauskunft: flache, randlose Optik (nur im Aktions-Flow via .aktion-flat) ===== */
/* Reiseauskunft-Box (#quickfinder): weiss, ohne Schatten/Rahmen/roten Top-Border. */
.aktion-flat #quickfinder {
    background: #fff;
    border: none;
    box-shadow: none;
}
/* Konditionen-Box (#ticketKonditionen + .eingabeflaeche): transparent, ohne Schatten -
   praktisch keine Box mehr erkennbar. */
.aktion-flat #ticketKonditionen {
    background-color: transparent;
    box-shadow: none;
}

/* ===== DBMFT-3252: Layout-Korrekturen Buchungsseiten ===== */
/* Titel + Navigations-Button-Leisten auf dieselbe 840px-Spalte wie die Boxen
   (#quickfinder/#ticketKonditionen) - sonst kleben sie am 1200px-Rand von #doc. */
.bahn-page-title {
    display: block !important;
    max-width: 840px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
.navigationRespons {
    max-width: 840px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
/* Fortschrittsanzeige (SVG width:100%) ebenfalls auf die 840px-Spalte begrenzen -
   sonst laeuft sie ueber die zentrierte Inhaltsbreite hinaus (DBMFT-3252). */
#buchungFortschrittsanzeige {
    display: block;
    max-width: 840px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
/* DBMFT-3252: Einloese-Flow (/ticket/, Host buchung_pst.xhtml) auf dieselbe zentrierte
   840px-Spalte wie der Buchungs-Flow. Lief voll auf #doc-Breite: Fortschrittsleiste
   (SVG 100%), Schritt-1-Container (inline-<span>) und Pruefen-Container (margin:0 20px
   ~1160). Buttons + Titel liegen IM Schritt-Container und werden mit-begrenzt.
   display:block fuer den <span>-Container; margin per !important gegen das inline margin:0 20px. */
#ticketContainerFortschrittsanzeige,
#ticketContainerReiseauskunftRen,
#ticketContainerReiseauskunfUebersichtRen {
    display: block;
    max-width: 840px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
/* DBMFT-3252: Gemeinsamer Inhalts-Wrapper (<h:form class="background-normal">) zentral auf
   die 840px-Spalte begrenzen. Deckt die Ticket-Seiten OHNE eigene Breitenregel ab (u.a.
   buendelDetail, fahrtDetail, Uebersicht, Rechnungen, Archiv) sowie Info-/Login-Seiten.
   Buchungs-Flow bleibt optisch identisch (Inhalt dort bereits 840). Tabellen nutzen
   Bootstrap-Grid -> skalieren proportional, kein Ueberlauf. */
.background-normal {
    max-width: 840px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
/* Buchungs-Flow: Inhalt ALLER Schritte auf dieselbe zentrierte 840px-Spalte wie die
   uebrigen Boxen (#quickfinder/#ticketKonditionen). Auswahl/Reisender/Pruefen sind
   inline-<span>-Container (...Ren) -> display:block noetig, damit max-width/margin greifen.
   Sonst liefen die Folgeschritte voll auf #doc-Breite (1200) und damit breiter als
   Suche/Auswahl (DBMFT-3252). */
#buchungContainerAuswahlRen,
#buchungContainerAdresseRen,
#buchungContainerUebersichtRen {
    display: block;
    max-width: 840px;
    margin: 0 auto;
    box-sizing: border-box;
}
/* Bestaetigungsseite (eigene Seite, nicht in buchung.xhtml): #bestaetigung_form umschliesst
   Erfolgs-Banner + Inhalt -> ebenfalls auf 840px, damit der Abschluss konsistent ist.
   Das Banner (#bestaetigung_top_message, width:100%+padding) braucht border-box, sonst ragt
   es um die Paddingbreite ueber die 840px hinaus (DBMFT-3252). */
/* Attribut-Selektor: die h:panelGroup steckt in einem h:form (id="form") OHNE
   prependId="false" -> Client-ID ist "form:bestaetigung_form". Per [id$=...] unabhaengig
   vom Form-Prefix treffen. */
[id$="bestaetigung_form"] {
    max-width: 840px;
    margin: 0 auto;
    box-sizing: border-box;
}
#bestaetigung_top_message {
    box-sizing: border-box;
}
/* ===== DBMFT-3252: Legacy-Modal-Overlay ueber den neuen Header heben =====
   .db-modal (Umfrage-/Legacy-Popups, blueits.css) hat z-index:1 und lag damit UNTER dem
   Redesign-Header (.bahn-header z-index:201) + Flyouts (.bahn-flyout z-index:100): der
   40%-Backdrop dimmte den Header nicht, das Stacking war kaputt. Overlay ueber den Header
   heben (unter dem reinen Test-#debug-panel mit z-index:9999). */
.db-modal {
    z-index: 1000 !important;
}
/* Angebots-Boxen zentrieren: die Portal-CSS gibt ihnen asymmetrische Raender
   (nth-child margin-left:20 / margin-right:0|20 + id-Regel margin-right:20) und
   max-width:940 -> Box klebt links. Symmetrisch + volle Spaltenbreite -> zentriert. */
#multi-strecken-result-container .multifahrt_strecke_box_mehrfahrten,
#multi-strecken-result-container .multifahrt_strecke_box_mehrfahrten:nth-child(odd),
#multi-strecken-result-container .multifahrt_strecke_box_mehrfahrten:nth-child(even) {
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== DBMFT-3252: D-Ticket-Angebotssektion (gerahmt, Badge-Legende) =====
   Eigene Sektion EINE Ebene ueber den Angebotskarten (nur im Aktions-Flow): roter Rahmen mit
   aufgesetztem "D-Ticket"-Badge, Ueberschrift + Konditionstext, darin die einzelnen
   D-Ticket-Angebotskarten (oder der Leerhinweis). margin-top schafft Abstand zur
   Spaltenkopf-Zeile darueber. */
.dticket-section {
    position: relative;
    box-sizing: border-box;
    border: 2px solid #ec0016;
    border-radius: 8px;
    background: #fdf3f3;
    padding: 24px 16px 16px;
    margin: 34px 0 18px;
}
.dticket-section-badge {
    position: absolute;
    top: -12px;
    left: 18px;
    background: #ec0016;
    color: #fff;
    padding: 3px 12px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
}
.dticket-section-title {
    margin-bottom: 3px;
}
.dticket-section-subtitle {
    color: #454c54;
    margin-bottom: 16px;
}
.dticket-section-empty {
    color: #6b727b;
    font-style: italic;
    padding: 4px 0 2px;
}


/* ===== Aktions-Reiseauskunft: Inhalt symmetrisch & zentriert =====
   Die regulaere Reiseauskunft ist auf die Start/Ziel-Felder getunt:
   #quickfinderContainer traegt asymmetrisches Padding (links 30 / rechts 10) plus
   margin-left:5px, und die Bootstrap-Zeilen haben Negativraender bzw. einzelne
   Inline-Paddings (Datum-Zeile: padding:5px 15px 15px 0). Fuer die GCM-Karte wirkt
   das wie nach links geschoben -> rechts bleibt viel Platz. Im Aktions-Scope alles
   auf gleichmaessige, zentrierte Abstaende zuruecksetzen. */
.aktion-flat #quickfinderContainer {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Bootstrap-Row-Negativraender + asymmetrische Inline-Paddings der Zeilen
   neutralisieren -> linke und rechte Kante buendig (vertikale Abstaende bleiben). */
.aktion-flat #quickfinder .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* GCM-Karte: randlos, auf Kartenbreite begrenzt und zentriert im weissen Kasten,
   damit der rechte Leerraum verschwindet. */
.aktion-flat #gcmColumn {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}
.aktion-flat #gcmIframe {
    background: #fff;
    display: block;
    width: 100%;
    max-width: 785px;
    margin: 0 auto;
    border: 0;
}

/* DBMFT-3252: Iframe-Hoehe zentral als Klasse. Desktop 560px (Karte + Suchzeile).
   Auf Mobile (<=560px) blendet db-library (>=1.0.26) die Karte aus - dort genuegt eine
   reduzierte Hoehe fuer die gestapelten Suchfelder inkl. der nach unten oeffnenden
   Autocomplete-Dropdowns (max. ~272px), ohne den grossen Karten-Leerraum. */
.gcm-iframe {
    display: block;
    width: 100%;
    height: 560px;
    border: 0;
}
@media (max-width: 560px) {
    .gcm-iframe {
        height: 440px;
    }
}

/* Header ueber den oberen Bildrand ziehen (Desktop): Hero (1200) ist breiter als
   der Header (1120) und wird um die Header-Hoehe (112px) hochgezogen, sodass der
   Header drueber liegt und das Bild 40px je Seite herausragt - wie bahn.de.
   DBMFT-3252: Schwelle 901px (= NICHT mobiler Hamburger-Header, der <=900px aktiv
   ist). Sonst wuerde die Hero bei 801-900px um 112px unter den nur 56px hohen
   Mobil-Header gezogen und sich damit ueberlappen. */
@media (min-width: 901px) {
    .bahn-hero {
        margin-top: -112px;
    }
    /* Hero ist um 112px hochgezogen -> Mitte der SICHTBAREN Hero-Flaeche liegt bei
       50% + 56px (halbe Pull-up-Hoehe); translateY(-50%) kommt aus der Basisregel.
       So bleibt die Karte am rechten Rand vertikal mittig wie bei bahn.de. */
    .bahn-hero-card {
        top: calc(50% + 56px);
        right: 40px;
    }
    /* Hero ist um die Header-Hoehe (112px) hochgezogen -> Badge entsprechend nach unten,
       sonst sitzt der rote Kreis hinter dem Header. */
    .bahn-hero-badge {
        top: 170px;
        left: 100px;
    }
}

/* ===== Outline-Button (bahn.de-Sekundaerstil) fuer die Hero-Karte ===== */
.bahn-btn-outline,
.bahn-btn-outline:link,
.bahn-btn-outline:visited {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: transparent;
    color: #16181b;
    border: 1px solid #16181b;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 16px 0 0;
    font-family: DBSansBold, "DB Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
}
.bahn-btn-outline:hover {
    background: var(--bahn-bg);
    color: #16181b;
}
/* Der zzert-Cert-Hook (.zzert_unverbindliche_buchung_button) + Portal-CSS setzen den Button
   absolut, rot (#f01414) und randlos - element-qualifiziert mit !important. In der Hero-Karte
   mit hoeherer Spezifitaet (0,2,0) zurueck auf den Outline-Look zwingen. */
.bahn-hero-card .bahn-btn-outline,
.bahn-hero-card .bahn-btn-outline:link,
.bahn-hero-card .bahn-btn-outline:visited {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    float: none !important;
    background: transparent !important;
    color: #16181b !important;
    border: 1px solid #16181b !important;
    /* DBMFT-3252: Full-width-CTA wie bahn.de. Eine Portal-Desktop-Regel zwingt den
       Button sonst auf Auto-Breite (~174px) + margin-bottom:5px - daher !important. */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 20px 0 0 !important;
    padding: 13px 16px !important;
    text-align: center !important;
}
.bahn-hero-card .bahn-btn-outline:hover {
    background: var(--bahn-bg) !important;
    color: #16181b !important;
}

/* ===== Inhalts-Karte: angeglichen an bahn.des weisse Teaser-Box unter der
   Verbindungssuche (.sld-tsr--single-teaser): volle Spaltenbreite, eckig
   (radius 0), KEIN Schatten, grosszuegiges Padding (bahn.de: 72px). ===== */
.bahn-card {
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    margin: 24px 0 0;
    padding: 40px 72px;
}
@media (max-width: 600px) {
    .bahn-card {
        padding: 24px 16px;
    }
}

/* ===== Footer: graues Vollbreiten-Band (Geschwister von #doc, daher 100%) ===== */
.bahn-footer {
    width: 100%;
    margin: 30px 0 0 0;
    background: var(--bahn-footer);
    padding: 28px 20px;
    box-sizing: border-box;
    flex-shrink: 0;   /* DBMFT-3252: Footer nicht stauchen (sticky-footer-Pattern) */
}
.bahn-footer ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--bahn-container);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
}
.bahn-footer li {
    margin: 0;
    padding: 0;
}
.bahn-footer a {
    color: var(--bahn-text);
    text-decoration: none;
    font-size: 14px;
}
.bahn-footer a:hover {
    text-decoration: underline;
}

/* ===== Mobile-Feinschliff: ersetzt durch den mobilen Hamburger-Header (siehe ganz unten) ===== */
@media (max-width: 600px) {
    /* DBMFT-3252: Mobiler Hero wie bahn.de - hohes Cover-Bild, weisse Karte unten
       rechts ueberlagert, Rabatt-Badge oben links. Das breite Hero-Bild (2.37:1)
       waere bei Handybreite sonst nur ~160px hoch -> object-fit:cover mit fixer
       Hoehe, object-position haelt das Motiv (Person) im Bild. */
    .bahn-hero-img {
        height: 420px;
        object-fit: cover;
        object-position: 40% 35%;
    }
    .bahn-hero-card {
        top: auto;
        left: auto;
        right: 16px;
        bottom: 16px;
        transform: none;   /* Basis-Zentrierung (translateY) im Cover-Layout aufheben */
        width: 62%;
        max-width: 340px;
        padding: 16px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }
    .bahn-hero-card-title {
        font-size: 17px;
    }
    .bahn-hero-card-subtitle {
        font-size: 14px;
    }
    .bahn-hero-badge {
        top: 12px;
        left: 12px;
        width: 100px;
        height: 100px;
        padding: 10px;
        font-size: 23px;
    }
    .bahn-hero-badge span {
        margin-top: 4px;
        font-size: 11px;
    }
}

/* ===== Header-Flyouts: 1:1 nach bahn.de (.nav__list--clustered) live vermessen.
   Vollbreites graues Panel (#f0f3f5) unter dem Header, Drop- + Inset-Schatten,
   25%-Spalten, Links 14px/18px mit 15px-Indent. Inhalt = Original-Header-Links. ===== */
.bahn-header-card {
    position: relative;   /* Positionierungs-Anker fuer die vollbreiten Flyouts */
}
/* .bahn-nav erbt position:relative aus der Portal-CSS und waere sonst der
   offsetParent (Flyout nur nav-breit). Auf static zwingen -> Flyout haengt
   an .bahn-header-card und wird voll header-breit wie bei bahn.de. */
.bahn-nav {
    position: static !important;
}
.bahn-nav-item {
    display: flex;
    align-items: stretch;
}
.bahn-flyout {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    display: none;
    background: #f0f3f5;
    box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.3), inset 0 8px 8px -8px rgba(0, 0, 0, 0.3);
    padding: 32px 32px 8px;
    box-sizing: border-box;
}
.bahn-nav-item:hover > .bahn-flyout {
    display: block;
}
/* Unterstrich des Nav-Items aktiv halten, solange das Flyout offen ist */
.bahn-nav-item:hover > a::after {
    transform: scaleX(1);
}
.bahn-flyout-cols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.bahn-flyout-cols ul {
    flex: 0 1 25%;          /* wie bahn.des Cluster (flex 0 1 25%) */
    list-style: none;
    margin: 0;
    padding: 0 16px 24px 0;
    box-sizing: border-box;
}
.bahn-flyout-cols li {
    display: block !important;   /* Portal-CSS floatet li sonst -> Links laufen zusammen */
    float: none !important;
    width: auto !important;
    margin: 10px 0 !important;   /* bahn.de Sub-Link li: margin 10px 0 */
    padding: 0 !important;
    background: none !important;
}
.bahn-flyout-cols a {
    position: relative !important;
    display: block !important;
    color: #282d37 !important;
    font-family: DBSansRegular, "DB Sans", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    text-decoration: none !important;
    white-space: normal !important;
    padding: 0 0 0 18px !important;   /* Platz fuer den roten Chevron */
}
/* Roter Chevron vor jedem Link - immer sichtbar, wie bei bahn.de */
.bahn-flyout-cols a::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--bahn-red);
    border-top: 2px solid var(--bahn-red);
    transform: rotate(45deg);
}
.bahn-flyout-cols a:hover {
    color: var(--bahn-red) !important;
    text-decoration: underline !important;
}
/* Tipp-Fusszeile im Stil des Original-Headers (Portal: nav ul li>div .footer):
   heller Trennstrich #e7e7e7, "Tipp:" links, Link mit rotem Chevron + #333,
   "Bestpreissuche" hervorgehoben, Hover rot + unterstrichen. */
.bahn-flyout-tipp {
    clear: left;
    margin: 0;
    padding: 16px 10px 4px 0;
    border-top: 1px solid #e7e7e7;
    font-family: DBSansRegular, "DB Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}
.bahn-flyout-tipp b {
    margin-right: 28px;
    color: #333;
}
.bahn-flyout-tipp a {
    position: relative;
    color: #333;
    text-decoration: none;
    padding-left: 15px;
}
.bahn-flyout-tipp a::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 4px;
    width: 5px;
    height: 5px;
    border-right: 2px solid var(--bahn-red);
    border-top: 2px solid var(--bahn-red);
    transform: rotate(45deg);
}
.bahn-flyout-tipp a:hover {
    color: var(--bahn-red);
    text-decoration: underline;
}
.bahn-flyout-tipp em {
    font-style: normal;
    font-weight: 700;
}
/* (Mobile-Flyout-Verhalten jetzt im mobilen Hamburger-Header unten geregelt) */

/* ============================================================================
   DBMFT-3252: Mobiler Header - Hamburger + Off-Canvas-Drawer (<= 900px)
   ----------------------------------------------------------------------------
   Bei der Header-Uebernahme wurde nur die DESKTOP-Variante portiert; mobil lief
   die Nav nur ueber/abgeschnitten und die Flyout-Unterlinks waren unerreichbar.
   Hier wird die bestehende Desktop-Nav (.bahn-nav) unter 900px zum Drawer
   umfunktioniert und die Hover-Flyouts werden zu Tap-Akkordeons - KEINE
   Duplizierung der Navigationslinks. Hamburger, Backdrop, Drawer-Kopf und
   Meta-Block sind reine Mobil-Elemente (Desktop: display:none). Rein additiv,
   Desktop bleibt unveraendert.
   ============================================================================ */
.bahn-burger,
.bahn-backdrop,
.bahn-drawer-head,
.bahn-nav-meta {
    display: none;   /* Desktop: alle Mobil-Only-Elemente aus */
}
.bahn-burger {
    border: 0;
    padding: 10px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    flex: none;
    color: var(--bahn-text);
    /* Drei Balken per background-image direkt am Button gezeichnet - bewusst NICHT
       ueber die <span>: eine spezifischere Legacy-Portal-!important-Regel zwingt
       leere <span> auf height:0, sodass selbst .bahn-burger span{height..!important}
       nicht durchkommt (live verifiziert). Der Button-Hintergrund ist davon frei.
       Siehe portal-css-override. */
    background-color: transparent;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-size: 22px 2px;
    background-repeat: no-repeat;
    background-position: center 15px, center 21px, center 27px;
}
.bahn-burger span {
    display: none;   /* Markup-Balken bleiben fuer einfaches Markup, gezeichnet wird per background-image */
}

@media (max-width: 900px) {
    /* Meta-Topbar wandert in den Drawer -> in der Kopfzeile ausblenden */
    .bahn-topbar { display: none; }

    /* Kopfzeile: Hamburger | Logo | (Spacer) | Icons */
    .bahn-headrow {
        height: 56px;
        gap: 10px;
        padding: 0 10px;
        flex-wrap: nowrap;
    }
    .bahn-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
    }
    .bahn-logo img { height: 28px; }
    .bahn-headrow-right { gap: 6px; }
    /* Login/Logout mobil als reines Icon (Text einklappen; SVG hat feste Groesse) */
    .bahn-user { font-size: 0; padding: 8px; }

    /* .bahn-nav -> Off-Canvas-Drawer von links.
       !important schlaegt die Desktop-Regel .bahn-nav{position:static!important}. */
    .bahn-nav {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        /* height:auto !important noetig: eine spezifischere Legacy-Portal-Regel setzt
           sonst eine feste Hoehe (~54px) auf .bahn-nav und der Drawer waere nicht
           voll hoch (top/bottom greifen nur bei height:auto). Siehe portal-css-override. */
        height: auto !important;
        width: 86%;
        max-width: 320px;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        z-index: 1002;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    }
    .bahn-nav.is-open { transform: translateX(0); }

    /* Abdunkelnder Hintergrund hinter dem Drawer */
    .bahn-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
        z-index: 1001;
    }
    .bahn-backdrop.is-open { opacity: 1; visibility: visible; }
    body.bahn-nav-open { overflow: hidden; }

    /* Drawer-Kopf: Logo + Schliessen-X */
    .bahn-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 12px;
        border-bottom: 1px solid var(--bahn-divider, #e2e5ea);
        flex: none;
    }
    .bahn-drawer-head img { height: 26px; width: auto; }
    .bahn-drawer-close {
        border: 0;
        background: none;
        cursor: pointer;
        width: 40px;
        height: 40px;
        font-size: 26px;
        line-height: 1;
        color: var(--bahn-text);
    }

    /* Direkte Nav-Links ohne Flyout (Business-Template) als Drawer-Zeilen */
    .bahn-nav > a {
        display: block;
        padding: 15px 14px;
        border-bottom: 1px solid var(--bahn-divider, #e2e5ea);
    }

    /* Nav-Items -> Akkordeon-Reihen */
    .bahn-nav-item {
        display: block;
        border-bottom: 1px solid var(--bahn-divider, #e2e5ea);
    }
    .bahn-nav-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: auto;
        padding: 15px 14px;
    }
    /* Desktop-Unterstrich (::after) im Drawer abschalten */
    .bahn-nav-item > a::after { display: none; }
    /* Auf-/Zu-Chevron rechts am Nav-Item */
    .bahn-nav-item > a::before {
        content: "";
        order: 2;
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--bahn-red);
        border-bottom: 2px solid var(--bahn-red);
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        flex: none;
        margin-left: 12px;
    }
    .bahn-nav-item.is-open > a::before { transform: rotate(-135deg); }

    /* Flyout -> statischer Akkordeon-Body, nur bei .is-open sichtbar
       (schlaegt die Desktop-Hover-/Absolut-Regeln per !important). */
    .bahn-flyout {
        position: static !important;
        display: none !important;
        box-shadow: none;
        background: #f7f8fa;
        padding: 0 0 8px;
    }
    .bahn-nav-item.is-open > .bahn-flyout { display: block !important; }
    .bahn-flyout-cols { flex-direction: column; }
    .bahn-flyout-cols ul { flex: 1 1 auto; padding: 0; }
    .bahn-flyout-tipp { padding: 12px 14px 4px; }

    /* Meta-Links unten im Drawer */
    .bahn-nav-meta {
        display: block;
        margin-top: auto;
        background: var(--bahn-bg);
        padding: 8px 0;
    }
    .bahn-nav-meta a {
        display: block;
        padding: 11px 14px;
        color: var(--bahn-text);
        text-decoration: none;
        font-family: DBSansRegular, "DB Sans", Arial, sans-serif;
        font-size: 13px;
    }

    /* Footer: vertikal gestapelt mit grossen Tap-Targets */
    .bahn-footer ul {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    .bahn-footer li { border-bottom: 1px solid #c7ccd3; }
    .bahn-footer li:last-child { border-bottom: 0; }
    .bahn-footer a {
        display: block;
        padding: 13px 4px;
        font-size: 15px;
    }
}

/* ===== DBMFT-3282: Login-Link-Button auf der Auswahl-Seite (mobil) =====
   "Einloggen oder registrieren um fortzufahren" brach auf schmalen Screens INNERHALB
   des Buttons um (beobachtet in den Aktions-Buchungsstrecken). Auf Mobil: Button auf
   volle Breite, Text zentriert und einzeilig (nowrap); Padding reduziert, damit der
   Text bei ueblichen Viewports (>= 360px) einzeilig passt. Auf sehr schmalen Geraeten
   (< 360px) lieber kleinere Schrift als ein Umbruch im Button. Id-Selektor schlaegt
   die .button-db-Basisregeln (styleguide.css) in der Spezifitaet. */
@media (max-width: 767px) {
    a#ticketsAnmeldenMitBahnID {
        display: block;
        float: none;
        width: 100% !important;
        box-sizing: border-box;
        text-align: center;
        white-space: nowrap;
        padding: 6px 5px 5px !important;
        margin: 20px 0 0 !important;
    }
}
@media (max-width: 359px) {
    a#ticketsAnmeldenMitBahnID {
        font-size: 12px !important;
    }
}