/* ═══ CruiseCars Buchungsflow – neues Design (Schicht über den Seiten-Styles) ═══ */
:root{ --lgf-ink:#222326; --lgf-gray:#747679; --lgf-cloud:#ebf0f8; --lgf-cloud2:#dfe7f3; --lgf-div:#e3e8f0; --lgf-navy:#1E3A5F; --lgf-navy-d:#0E2240; --lgf-gold:#FFD54F; --lgf-gold-h:#FFC107; --lgf-green:#1d8a00;
  --lgf-font:'Inter','Open Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif }
body.lgf{font-family:var(--lgf-font)!important; color:var(--lgf-ink); -webkit-font-smoothing:antialiased; background:#fff!important}
body.lgf, body.lgf button, body.lgf input, body.lgf select, body.lgf textarea{font-family:var(--lgf-font)!important}
body.lgf h1, body.lgf h2, body.lgf h3{letter-spacing:-.02em}

/* Kopfzeile */
body.lgf .selector-header{background:rgba(255,255,255,.94)!important; -webkit-backdrop-filter:blur(14px)!important; backdrop-filter:blur(14px)!important; border-bottom:1px solid #eef1f5!important; box-shadow:none!important}
body.lgf .back-btn{background:#fff!important; border:1px solid var(--lgf-div)!important; box-shadow:none!important; color:var(--lgf-ink)!important; border-radius:14px!important; transition:background .2s, transform .15s}
body.lgf .back-btn:hover{background:var(--lgf-cloud)!important}
body.lgf .back-btn:active{transform:scale(.95)}
body.lgf .harbor-title{font:700 17px/1.2 var(--lgf-font)!important; color:var(--lgf-ink)!important; letter-spacing:-.01em}
body.lgf .harbor-meta-line{font:500 12.5px/1.3 var(--lgf-font)!important; color:var(--lgf-gray)!important}
body.lgf .cc-logo--nav{border-radius:50%}
/* Fortschritt: Punkte → Segmentleiste */
body.lgf .process-nav{display:flex!important; flex-direction:column!important; align-items:center!important; gap:5px!important}
body.lgf .process-steps{display:flex!important; gap:4px!important; width:150px; max-width:46vw}
body.lgf .process-dot{flex:1; height:5px!important; width:auto!important; min-width:0!important; border-radius:9999px!important; background:var(--lgf-cloud)!important; border:0!important; box-shadow:none!important; position:relative; overflow:hidden; transform:none!important}
body.lgf .process-dot.is-done{background:var(--lgf-navy)!important}
body.lgf .process-dot.is-active{background:var(--lgf-cloud2)!important}
body.lgf .process-dot.is-active::after{content:""; position:absolute; inset:0; background:var(--lgf-gold); border-radius:9999px; transform-origin:left; animation:lgfGrow .9s cubic-bezier(.3,1,.4,1) forwards}
@keyframes lgfGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
body.lgf .process-label{font:600 12px/1 var(--lgf-font)!important; color:var(--lgf-ink)!important; background:var(--lgf-cloud); border-radius:9999px; padding:5px 10px!important}

/* Primäre Aktionen: Gold-Pille */
body.lgf .selex-bottombar__cta, body.lgf .summary-bottombar__cta, body.lgf #confirmBtn, body.lgf .ux-cruise-sheet__cta, body.lgf .ux-inline-cta__btn,
body.lgf .harbor-cta, body.lgf .harbor-card__cta, body.lgf .btn-primary, body.lgf .cta-primary, body.lgf .ux-btn-primary, body.lgf .auth-btn-primary, body.lgf .booking-cta{
  background:var(--lgf-gold)!important; color:var(--lgf-navy-d)!important; border:0!important; border-radius:9999px!important; box-shadow:none!important; font-weight:700!important; letter-spacing:0!important; transition:background .2s, transform .15s, opacity .2s!important}
body.lgf .selex-bottombar__cta:hover, body.lgf .summary-bottombar__cta:hover, body.lgf #confirmBtn:hover, body.lgf .ux-cruise-sheet__cta:hover, body.lgf .ux-inline-cta__btn:hover{background:var(--lgf-gold-h)!important}
body.lgf .selex-bottombar__cta:active, body.lgf .summary-bottombar__cta:active, body.lgf #confirmBtn:active, body.lgf .ux-cruise-sheet__cta:active, body.lgf .ux-inline-cta__btn:active{transform:scale(.97)}
body.lgf #confirmBtn.is-disabled, body.lgf button:disabled.selex-bottombar__cta, body.lgf .summary-bottombar__cta:disabled{background:#ededed!important; color:#a3a6ab!important}
body.lgf .lgf-pulse{animation:lgfPulse 1.6s ease-out 2}
@keyframes lgfPulse{0%{box-shadow:0 0 0 0 rgba(255,213,79,.75)}100%{box-shadow:0 0 0 16px rgba(255,213,79,0)}}

/* Untere Leisten */
body.lgf .selex-bottombar, body.lgf .summary-bottombar, body.lgf .overview-bottombar, body.lgf .bottombar, body.lgf .ux-bottombar{background:rgba(255,255,255,.96)!important; -webkit-backdrop-filter:blur(14px)!important; backdrop-filter:blur(14px)!important; border-top:1px solid #eef1f5!important; box-shadow:none!important}

/* Karten */
body.lgf .cruise-card, body.lgf .insurance-card, body.lgf .extra-card, body.lgf .summary-card, body.lgf .selex-car, body.lgf .harbor-card, body.lgf .ov-card, body.lgf .overview-card, body.lgf .pos-card{border-radius:24px!important; border:1px solid var(--lgf-div)!important; box-shadow:none!important; transition:border-color .2s, box-shadow .25s, transform .2s!important}
body.lgf .cruise-card:active, body.lgf .harbor-card:active{transform:scale(.985)}
body.lgf .insurance-card.is-selected, body.lgf .extra-card.is-selected, body.lgf .extra-card.is-active{border-color:var(--lgf-navy)!important; box-shadow:inset 0 0 0 1px var(--lgf-navy)!important; background:#fff!important}
body.lgf .insurance-card.is-selected{animation:lgfSel .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes lgfSel{50%{transform:scale(1.015)}}
body.lgf .insurance-card__radio-icon, body.lgf .extra-toggle{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
body.lgf .selex-section-title, body.lgf .section-title, body.lgf .summary-section-title{font:700 20px/1.2 var(--lgf-font)!important; color:var(--lgf-ink)!important; letter-spacing:-.02em}

/* Chips / Badges */
body.lgf .chip, body.lgf .results-iconbtn{border-radius:9999px!important; border:1px solid var(--lgf-div)!important; background:#fff!important; color:var(--lgf-ink)!important; box-shadow:none!important; font-weight:600!important}
body.lgf .chip.is-active, body.lgf .chip.active{background:var(--lgf-navy-d)!important; color:#fff!important; border-color:var(--lgf-navy-d)!important}

/* Formulare */
body.lgf input[type=text], body.lgf input[type=email], body.lgf input[type=tel], body.lgf input[type=password], body.lgf input[type=time], body.lgf input[type=date], body.lgf select, body.lgf textarea{border-radius:14px!important; border:1px solid var(--lgf-div)!important; box-shadow:none!important; transition:border-color .2s, box-shadow .2s!important}
body.lgf input:focus, body.lgf select:focus, body.lgf textarea:focus{border-color:var(--lgf-navy)!important; box-shadow:0 0 0 3px rgba(30,58,95,.12)!important; outline:none!important}

/* Modale */
body.lgf .selex-modal__box, body.lgf .summary-modal__box, body.lgf .ux-modal-content, body.lgf .route-info-modal__box{border-radius:24px!important}

/* Tages-Navigation (Hafen) */
body.lgf .harbor-daynav__day.is-active{color:var(--lgf-ink)!important}

/* Erscheinen */
body.lgf .lgf-in{animation:lgfIn .45s cubic-bezier(.3,1,.4,1) both}
@keyframes lgfIn{from{opacity:0; transform:translateY(10px)}}
body.lgf .lgf-bump{animation:lgfBump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes lgfBump{40%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){ body.lgf *{animation:none!important} }

/* Login / Registrierung */
body.lgf .auth-method-btn--primary{background:var(--lgf-gold)!important; color:var(--lgf-navy-d)!important; border:0!important; border-radius:9999px!important; box-shadow:none!important; font-weight:700!important}
body.lgf .auth-method-btn--primary:hover{background:var(--lgf-gold-h)!important}
body.lgf .auth-method-btn{border-radius:9999px!important}
body.lgf .auth-tabs{border-radius:9999px!important; background:var(--lgf-cloud)!important; padding:4px!important}
body.lgf .auth-tab{border-radius:9999px!important; transition:background .25s, color .25s!important}
body.lgf .auth-tab.is-active{background:#fff!important; color:var(--lgf-ink)!important; box-shadow:none!important}
body.lgf .auth-tab-content.is-active{animation:lgfIn .35s ease both}
body.lgf .auth-card, body.lgf .auth-container, body.lgf .auth-box{border-radius:28px!important}

/* Bestätigung */
body.lgf .booking-success__cta{background:var(--lgf-gold)!important; color:var(--lgf-navy-d)!important; border-radius:9999px!important; box-shadow:none!important; border:0!important}
body.lgf .booking-success__cta:hover{background:var(--lgf-gold-h)!important}
body.lgf .booking-success__icon{animation:lgfPop .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes lgfPop{from{transform:scale(.3); opacity:0}}
body.lgf .booking-success__check path, body.lgf .booking-success__check polyline{stroke-dasharray:60; stroke-dashoffset:60; animation:lgfDraw .6s ease .35s forwards}
@keyframes lgfDraw{to{stroke-dashoffset:0}}
body.lgf .booking-success, body.lgf .booking-success__summary, body.lgf .booking-success__positions{border-radius:24px!important}
body.lgf .booking-success__info{border-radius:18px!important}
.lgf-confetti{position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden}
.lgf-confetti i{position:absolute; top:-12px; width:8px; height:14px; border-radius:2px; animation:lgfFall 1.8s cubic-bezier(.3,.6,.5,1) forwards}
@keyframes lgfFall{to{transform:translate(var(--dx),110vh) rotate(var(--r)); opacity:.9}}

/* Fortschritt etwas feiner */
body.lgf .process-dot{height:5px!important; max-height:5px!important}
body.lgf .harbor-daynav__day.is-available .harbor-daynav__dot, body.lgf .harbor-daynav__day.is-available::before{border-color:var(--lgf-navy)!important}

/* Hafenkarte: Buttons mit freier Höhe, Gold = Mietwagen, Weiß = Zusatz */
body.lgf .harbor-card{overflow:hidden!important; height:auto!important}
body.lgf .harbor-card__body, body.lgf .harbor-card__info{height:auto!important; max-height:none!important; overflow:visible!important}
body.lgf .harbor-card__btnrow{display:flex!important; gap:8px!important; flex-wrap:wrap!important; margin-top:12px!important}
body.lgf .harbor-card__btn, body.lgf .harbor-exp__btn{flex:1 1 140px!important; height:auto!important; min-height:46px!important; padding:12px 14px!important; line-height:1.2!important; white-space:normal!important; border-radius:9999px!important; box-shadow:none!important; font-weight:700!important; transition:background .2s, transform .15s!important}
body.lgf .harbor-card__btn{background:var(--lgf-gold)!important; color:var(--lgf-navy-d)!important; border:0!important}
body.lgf .harbor-card__btn:hover{background:var(--lgf-gold-h)!important}
body.lgf .harbor-exp__btn{background:#fff!important; color:var(--lgf-ink)!important; border:1px solid var(--lgf-div)!important}
body.lgf .harbor-exp__btn:hover{background:var(--lgf-cloud)!important}
body.lgf .harbor-card__btn:active, body.lgf .harbor-exp__btn:active{transform:scale(.97)}
body.lgf .harbor-card__name{font-weight:700!important; letter-spacing:-.01em}
body.lgf .harbor-card:not(.harbor-card--configured) .harbor-card__btn, body.lgf .harbor-card .harbor-card__btn, body.lgf .harbor-card .harbor-exp__btn{height:auto!important; min-height:46px!important; width:auto!important}
body.lgf .ux-cruise-sheet__cta, body.lgf .ux-cruise-sheet__cta *, body.lgf .ux-inline-cta__btn, body.lgf .ux-inline-cta__btn *, body.lgf #ctaBtn, body.lgf #ctaBtn *, body.lgf #confirmBtn:not(.is-disabled), body.lgf #confirmBtn:not(.is-disabled) *, body.lgf .harbor-card__btn, body.lgf .harbor-card__btn *, body.lgf .booking-success__cta, body.lgf .booking-success__cta *, body.lgf .auth-method-btn--primary, body.lgf .auth-method-btn--primary *{color:var(--lgf-navy-d)!important}
/* Gold-Buttons: dunkle Schrift (auch gegen -webkit-text-fill-color der Desktop-Styles) */
html body.lgf .ux-cruise-sheet__cta, html body.lgf .ux-inline-cta__btn, html.ux-sheet-open body.lgf .ux-cruise-sheet__footer .ux-cruise-sheet__cta, html.ux-sheet-open body.lgf .ux-cruise-sheet-overlay .ux-inline-cta__btn, html.ux-sheet-open body.lgf .ux-cruise-sheet-overlay .ux-inline-cta .ux-cruise-sheet__cta, html.ux-sheet-open body.lgf .ux-cruise-sheet__cta:focus, html.ux-sheet-open body.lgf .ux-cruise-sheet__cta:active,
body.lgf #ctaBtn, body.lgf #confirmBtn:not(.is-disabled), body.lgf .harbor-card__btn, body.lgf .booking-success__cta, body.lgf .auth-method-btn--primary{color:#0E2240!important; -webkit-text-fill-color:#0E2240!important}

/* Harbor „Route abschließen“ = Gold */
body.lgf .harbor-bottombar__cta{background:var(--lgf-gold)!important; color:#0E2240!important; -webkit-text-fill-color:#0E2240!important; border:0!important; border-radius:9999px!important; box-shadow:none!important; font-weight:700!important}
body.lgf .harbor-bottombar__cta:hover:not(:disabled){background:var(--lgf-gold-h)!important}
body.lgf .harbor-bottombar__cta:disabled{background:#ededed!important; color:#a3a6ab!important; -webkit-text-fill-color:#a3a6ab!important}
body.lgf .harbor-bottombar{background:rgba(255,255,255,.96)!important; -webkit-backdrop-filter:blur(14px)!important; backdrop-filter:blur(14px)!important; border-top:1px solid #eef1f5!important; box-shadow:none!important}

/* Toast */
.lgf-toast{position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom,0px)); z-index:100000; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#0E2240; color:#fff; border-radius:9999px; padding:11px 18px; font:500 14px/1.25 'Inter',system-ui,sans-serif; display:flex; gap:8px; align-items:center; white-space:nowrap; max-width:calc(100vw - 32px); transition:opacity .25s, transform .3s cubic-bezier(.3,1.4,.5,1)}
.lgf-toast b{font-weight:700} .lgf-toast span{opacity:.85; overflow:hidden; text-overflow:ellipsis}
.lgf-toast.on{opacity:1; transform:translate(-50%,0)}
.lgf-toast--ok b{color:#FFD54F}

/* Selector */
.lgf-best{position:absolute; top:10px; left:10px; z-index:3; background:#FFD54F; color:#0E2240; border-radius:9999px; padding:6px 10px; font:700 11.5px/1 'Inter',system-ui,sans-serif; animation:lgfPop .5s cubic-bezier(.3,1.6,.5,1) both}
.lgf-count{display:inline-flex; align-items:center; margin-right:8px; background:#ebf0f8; color:#222326; border-radius:9999px; padding:8px 12px; font:600 13px/1 'Inter',system-ui,sans-serif}

/* Selex */
body.lgf .extra-card.lgf-on{border-color:var(--lgf-navy)!important; box-shadow:inset 0 0 0 1px var(--lgf-navy)!important}
body.lgf .extra-card{cursor:pointer}

/* Overview Tagesplan */
.lgf-day{margin:14px 0 6px; background:#f6f8fb; border-radius:18px; padding:14px; font-family:'Inter',system-ui,sans-serif; transition:background .3s}
.lgf-day.warn{background:#fff4ec} .lgf-day.ok{background:#f0f9ec}
.lgf-day__head{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:13px; margin-bottom:10px}
.lgf-day__head b{color:#222326} .lgf-day__head span{color:#5b5e63; font-weight:600}
.lgf-day.warn .lgf-day__head span{color:#c2410c} .lgf-day.ok .lgf-day__head span{color:#1d8a00}
.lgf-day__bar{position:relative; height:26px; border-radius:9999px; background:#fff; box-shadow:inset 0 0 0 1px #e3e8f0}
.lgf-day__bar i{position:absolute; border-radius:9999px; transition:left .35s, width .35s, opacity .3s; opacity:0}
.lgf-day__bar i.ship{top:3px; bottom:3px; background:#dfe7f3}
.lgf-day__bar i.car{top:7px; bottom:7px; background:#FFD54F}
.lgf-day__bar .mk{position:absolute; top:-4px; width:2px; height:34px; background:#1E3A5F; margin-left:-1px; opacity:0; transition:left .35s}
.lgf-day__ticks{display:flex; justify-content:space-between; font:600 10.5px/1 'Inter',system-ui,sans-serif; color:#9aa0a6; margin-top:6px}
.lgf-day__leg{display:flex; gap:14px; margin-top:8px; font:500 12px/1 'Inter',system-ui,sans-serif; color:#5b5e63}
.lgf-day__leg i{display:inline-block; width:12px; height:8px; border-radius:4px; margin-right:5px; vertical-align:0}
.lgf-day__leg i.car{background:#FFD54F} .lgf-day__leg i.ship{background:#dfe7f3}

/* Summary */
body.lgf .lgf-step{animation:lgfIn .5s cubic-bezier(.3,1,.4,1) both}
body.lgf .route-flow__icon{transition:background .3s}
body.lgf .summary-bottombar__cta.lgf-sending{pointer-events:none; position:relative; color:transparent!important; -webkit-text-fill-color:transparent!important}
body.lgf .summary-bottombar__cta.lgf-sending::after{content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; border:3px solid rgba(14,34,64,.25); border-top-color:#0E2240; animation:lgfSpin .7s linear infinite}
@keyframes lgfSpin{to{transform:rotate(360deg)}}
.lgf-day.noship .lgf-day__leg span:last-child{display:none} .lgf-count{white-space:nowrap}

/* ═══ Desktop: Hafen-Foto als Bühne hinter dem Ablauf ═══ */
@media (min-width:1024px){
  html body.lgf{background:#f4f6fa!important; background-image:none!important}
  body.lgf::before{display:none!important}
  body.lgf::after{display:none!important}
  body.lgf .selector-layout, body.lgf .selector-content, body.lgf main, body.lgf .harbor-body, body.lgf .selector-main, body.lgf .results-area, body.lgf .results-list, body.lgf .harbor-content{background:transparent!important}
  /* Seitenpaneele + Karten als Glas */
  body.lgf .filter-panel, body.lgf .map-panel, body.lgf aside[class*="filter"], body.lgf aside[class*="map"], body.lgf .selector-sidebar, body.lgf .selector-map{background:rgba(255,255,255,.86)!important; -webkit-backdrop-filter:blur(18px)!important; backdrop-filter:blur(18px)!important; border:1px solid rgba(255,255,255,.7)!important; border-radius:28px!important; box-shadow:0 20px 50px -30px rgba(14,34,64,.45)!important}
  body.lgf .cruise-card{background:rgba(255,255,255,.95)!important; box-shadow:0 18px 40px -28px rgba(14,34,64,.5)!important; border-color:rgba(255,255,255,.8)!important}
  body.lgf .cruise-card:hover{transform:translateY(-4px)!important; box-shadow:0 26px 50px -26px rgba(14,34,64,.55)!important}
  body.lgf .lgf-count, body.lgf #sortToggleBtn, body.lgf .selector-trust, body.lgf [class*="trustbar"], body.lgf [class*="ux-trust"]{background:rgba(255,255,255,.9)!important; -webkit-backdrop-filter:blur(10px)!important; backdrop-filter:blur(10px)!important}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){ body.lgf::before{animation:none} }

/* Desktop: Zählerzeile auf dem Foto lesbar, Inhalt auf ruhiger Fläche */
@media (min-width:1024px){
  html body.lgf{background:#f4f6fa!important}
  body.lgf .lgf-count, body.lgf #sortToggleBtn{box-shadow:0 8px 20px -12px rgba(14,34,64,.6)!important}
  body.lgf .cruise-card{border:0!important}
}
@media (min-width:1024px){ html body.lgf{position:relative} }
@media (min-width:1024px){
  html body.lgf.ux-selector .filter-panel, html body.lgf.ux-selector .map-panel, html body.lgf.ux-selector aside.filter-panel, html body.lgf.ux-selector aside[class*="map"]{background:rgba(255,255,255,.94)!important; -webkit-backdrop-filter:blur(18px)!important; backdrop-filter:blur(18px)!important; border:0!important; border-radius:28px!important; box-shadow:0 24px 50px -30px rgba(14,34,64,.55)!important; padding:14px!important}
  html body.lgf.ux-selector .filter-panel > *, html body.lgf.ux-selector aside[class*="map"] > *{box-shadow:none!important}
}
@media (min-width:1024px){ html body.lgf.ux-selector #filterPanel{background:rgba(255,255,255,.95)!important; border:0!important; border-radius:28px!important; box-shadow:0 24px 50px -30px rgba(14,34,64,.55)!important} }



/* ═══ Seitenübergänge (eigene, ohne View-Transitions-API) ═══ */
@keyframes lgPgIn{from{opacity:0; transform:translateY(14px)}}
body.lg-leaving .lg-pg{opacity:0!important; transform:translateY(-10px)!important; transition:opacity .18s ease, transform .18s ease!important}
@media (prefers-reduced-motion:reduce){ body.lg-leaving .lg-pg{transition:none!important} }
body.lgf .selector-content, body.lgf .harbor-body, body.lgf .booking-success, body.lgf .auth-card, body.lgf main > section{animation:lgPgIn .45s cubic-bezier(.3,1,.4,1) both}
body.lgf.lg-leaving .selector-content, body.lgf.lg-leaving .harbor-body, body.lgf.lg-leaving main > section, body.lgf.lg-leaving .selex-bottombar, body.lgf.lg-leaving .summary-bottombar, body.lgf.lg-leaving .harbor-bottombar{opacity:0; transform:translateY(-10px); transition:opacity .18s ease, transform .18s ease}

/* ═══ Übergang per Vorhang (funktioniert auch auf dem Handy) ═══ */
body.lgf::after{content:""!important; display:block!important; position:fixed!important; inset:0!important; z-index:2147483000!important; pointer-events:none!important; background:#fff url('/bilder/final2.png') center/64px no-repeat!important; opacity:0; animation:lgVeilOut .55s ease .05s both}
body.lgf.lg-leaving::after{animation:lgVeilIn .22s ease both!important}
@keyframes lgVeilOut{from{opacity:1}to{opacity:0}}
@keyframes lgVeilIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ body.lgf::after{animation:none!important; opacity:0} }
@media (min-width:1024px){ html body.lgf{background:#f4f6fa!important} }
/* Lade-Screen Selector/Selex: weiß wie der Seitenwechsel-Schleier (statt Navy-Verlauf) */
html body.lgf #selector-loader-overlay{background:#fff!important}
/* Overview: Preisleiste genau wie Selex/Summary (Vollbreite, „Gesamtpreis“ klein grau, Preis groß, Gold-Button) */
html body.lgf .bottombar{left:0!important; right:0!important; bottom:0!important; max-width:none!important; margin:0!important; border:0!important; border-radius:0!important; box-shadow:0 -4px 20px rgba(15,23,42,.1)!important; background:#fff!important; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))!important; min-height:72px; gap:16px; box-sizing:border-box}
html body.lgf .bottombar .lbl{font:400 13px/1.3 Inter,system-ui,sans-serif!important; text-transform:none!important; letter-spacing:0!important; color:#747679!important}
html body.lgf .bottombar .val{font:800 22px/1.2 Inter,system-ui,sans-serif!important; color:#222326!important; letter-spacing:-.01em}
html body.lgf .bottombar #confirmBtn{flex-shrink:0; min-width:120px; height:48px; padding:0 24px!important; border-radius:9999px!important; font-size:16px!important; min-height:0!important; white-space:nowrap}
html body.lgf:has(.bottombar){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
@media (min-width:1024px){
  html body.lgf .bottombar{justify-content:flex-end!important; gap:24px; padding:12px 32px!important}
  html body.lgf .bottombar > div:first-child{display:flex; align-items:baseline; gap:24px}
}
/* Login-Modal „Fast geschafft!“ (ux-auth-inline.js) im neuen Design: Vollflächen-Overlay, Karte mittig, Gold-CTA */
html body.lgf .uxai-overlay{position:fixed!important; top:0!important; left:0!important; right:0!important; bottom:0!important; width:100vw!important; height:100vh!important; height:100dvh!important; z-index:2147482000!important; background:rgba(14,34,64,.5)!important; -webkit-backdrop-filter:blur(6px)!important; backdrop-filter:blur(6px)!important; align-items:center!important; justify-content:center!important; padding:16px!important; box-sizing:border-box!important; animation:uxaiFade .2s ease both}
@keyframes uxaiFade{from{opacity:0}}
@keyframes uxaiPop{from{opacity:0; transform:translateY(14px) scale(.98)}}
html body.lgf .uxai-card{border-radius:28px!important; max-width:420px!important; padding:26px 22px 22px!important; box-shadow:0 30px 70px -20px rgba(14,34,64,.55)!important; font-family:Inter,system-ui,sans-serif!important; max-height:calc(100dvh - 32px)!important; animation:uxaiPop .3s cubic-bezier(.3,1.3,.5,1) both}
html body.lgf .uxai-card::before{content:""; display:block; width:52px; height:52px; margin:0 0 14px; border-radius:50%; background:url('/bilder/final2.png') center/contain no-repeat}
html body.lgf .uxai-title{font:700 22px/1.2 Inter,system-ui,sans-serif!important; letter-spacing:-.02em; color:#0E2240!important}
html body.lgf .uxai-sub, html body.lgf .uxai-waitnote{color:#5b6472!important; font-size:15px!important}
html body.lgf .uxai-card{position:relative!important}
html body.lgf .uxai-close{position:absolute!important; top:18px!important; right:18px!important; background:#f1f4f8!important; color:#0E2240!important; width:36px!important; height:36px!important}
html body.lgf .uxai-label{color:#0E2240!important; font-weight:600!important}
html body.lgf .uxai-input{border:1.5px solid #dfe4ec!important; border-radius:14px!important; padding:14px 16px!important; background:#f7f9fc!important; transition:border-color .2s, background .2s}
html body.lgf .uxai-input:focus{border-color:#0E2240!important; background:#fff!important}
html body.lgf .uxai-input.uxai-invalid{border-color:#dc2626!important}
html body.lgf .uxai-btn{background:var(--lgf-gold)!important; color:#0E2240!important; -webkit-text-fill-color:#0E2240!important; border-radius:9999px!important; font-weight:700!important; padding:15px 18px!important; transition:background .2s, transform .15s!important}
html body.lgf .uxai-btn:hover:not(:disabled){background:var(--lgf-gold-h)!important}
html body.lgf .uxai-btn:active:not(:disabled){transform:scale(.98)}
html body.lgf .uxai-btn--ghost{background:#f1f4f8!important; color:#0E2240!important; -webkit-text-fill-color:#0E2240!important}
html body.lgf .uxai-switch{color:#0E2240!important; text-decoration:underline; text-underline-offset:3px}
html body.lgf .uxai-alt{color:#5b6472!important}
html body.lgf .uxai-spinner{border-top-color:#0E2240!important}
html body.lgf .uxai-trust{color:#8a93a1!important}
/* ═══ Ladescreen „Hafentag“ (Szene aus ux-lg-flow.js) ═══ */
html body.lgf #selector-loader-overlay > div:not(.lgl){visibility:hidden}
html body.lgf #selector-loader-overlay.lgl-host{background:#fff!important; padding:20px; box-sizing:border-box}
.lgl{width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; text-align:center; font-family:Inter,system-ui,sans-serif; color:#0E2240; animation:lglIn .45s cubic-bezier(.3,1.2,.5,1) both}
@keyframes lglIn{from{opacity:0; transform:translateY(12px) scale(.97)}}
.lgl-stage{position:relative; width:100%; aspect-ratio:320/170; border-radius:26px; box-shadow:0 24px 50px -28px rgba(14,34,64,.45); margin-bottom:22px}
.lgl-svg{display:block; width:100%; height:100%}
.lgl-sun{transform-origin:268px 38px; animation:lglSun 3.2s ease-in-out infinite}
@keyframes lglSun{50%{transform:scale(1.08)}}
.lgl-cloud{animation:lglCloud 14s linear infinite}
@keyframes lglCloud{from{transform:translateX(-120px)}to{transform:translateX(340px)}}
.lgl-sea path{animation:lglWave 3s linear infinite}
.lgl-sea .lgl-w2{animation-duration:2.2s; animation-direction:reverse}
@keyframes lglWave{to{transform:translateX(40px)}}
.lgl-ship{cursor:pointer; outline:none; animation:lglDock 3.4s cubic-bezier(.25,.8,.3,1) both}
@keyframes lglDock{from{transform:translate(-110px,106px)}to{transform:translate(52px,106px)}}
.lgl-shipb{animation:lglBob 2.4s ease-in-out infinite}
@keyframes lglBob{50%{transform:translateY(2px) rotate(-1deg)}}
.lgl-shipb.hop{animation:lglHorn .6s ease, lglBob 2.4s ease-in-out .6s infinite}
@keyframes lglHorn{30%{transform:translateY(-6px) rotate(-3deg)}60%{transform:translateY(1px) rotate(2deg)}}
.lgl-smoke circle{animation:lglSmoke 2.4s ease-out infinite; transform-box:fill-box; transform-origin:center}
.lgl-smoke circle:nth-child(2){animation-delay:1.2s}
@keyframes lglSmoke{from{opacity:.9; transform:translate(0,0) scale(.6)}to{opacity:0; transform:translate(10px,-16px) scale(1.6)}}
.lgl-car{cursor:pointer; outline:none}
.lgl-carb.hop{animation:lglHop .5s ease}
@keyframes lglHop{40%{transform:translateY(-7px)}}
.lgl-bub{position:absolute; padding:6px 11px; border-radius:9999px; background:#FFD54F; color:#0E2240; font:700 13px/1 Inter,system-ui,sans-serif; opacity:0; pointer-events:none; transform:translateY(6px) scale(.8); white-space:nowrap}
.lgl-bub.on{animation:lglBub 1.4s ease both}
.lgl-bub--ship{left:28%; top:22%}
.lgl-bub--car{right:8%; top:18%}
@keyframes lglBub{15%{opacity:1; transform:none}80%{opacity:1; transform:none}100%{opacity:0; transform:translateY(-8px)}}
.lgl-title{font:700 19px/1.3 Inter,system-ui,sans-serif; letter-spacing:-.01em; min-height:1.3em; margin-bottom:16px; transition:opacity .3s}
.lgl-steps{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; text-align:left; width:100%; max-width:290px}
.lgl-steps li{display:flex; align-items:center; gap:12px; font:500 15px/1.3 Inter,system-ui,sans-serif; color:#a3acb9; transition:color .3s}
.lgl-steps li i{flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #dfe4ec; position:relative; transition:background .3s, border-color .3s}
.lgl-steps li.run{color:#0E2240}
.lgl-steps li.run i{border-color:#e6ebf2; border-top-color:#0E2240; animation:lgfSpin .8s linear infinite}
.lgl-steps li.done i{animation:none; border-color:#1d8a00; background:#1d8a00}
.lgl-steps li.done i::after{content:""; position:absolute; left:6px; top:2.5px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); animation:lglTick .3s ease both}
@keyframes lglTick{from{opacity:0; transform:rotate(45deg) scale(.4)}}
.lgl-bar{width:100%; max-width:290px; height:6px; border-radius:9999px; background:#eef2f7; overflow:hidden}
.lgl-bar i{display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg,#FFD54F,#FFC107); transform-origin:left; animation:lglBar 7s cubic-bezier(.2,.7,.3,1) both}
@keyframes lglBar{from{transform:scaleX(.04)}to{transform:scaleX(.92)}}
.lgl-hint{margin:14px 0 0; font:500 13px/1.3 Inter,system-ui,sans-serif; color:#8a93a1; transition:opacity .4s}
.lgl-hint::before{content:"👆 "}
.lgl-hint.gone{opacity:0}
@media (prefers-reduced-motion:reduce){ .lgl *, .lgl{animation-duration:.01ms!important; animation-iteration-count:1!important} }
/* Overview Mietzeiten: Abhol- und Rückgabezeit auf einer Höhe, auch wenn ein Label zweizeilig ist (Rückgabe am …) */
@media (min-width:521px){
  html body.lgf .row2{display:grid!important; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; column-gap:12px; row-gap:0}
  html body.lgf .row2 > .fld{display:grid; grid-row:span 3; grid-template-rows:subgrid; align-content:start}
  html body.lgf .row2 > .fld > label{align-self:end}
  html body.lgf .row2 > .fld > .warn{margin-top:8px}
}
/* ═══ Popups einheitlich im neuen Design (Selex, Overview-AGB, Summary-Details/Info, Konto) ═══ */
html body.lgf .selex-modal-overlay, html body.lgf .cc-legal-overlay, html body.lgf .m-overlay, html body.lgf .route-info-overlay, html body.lgf .password-modal-overlay, html body.lgf .position-modal-overlay, html body.lgf #deleteAccountOverlay{background:rgba(14,34,64,.45)!important; -webkit-backdrop-filter:blur(5px)!important; backdrop-filter:blur(5px)!important}
html body.lgf .selex-modal, html body.lgf .cc-legal-popup, html body.lgf .m-box, html body.lgf .password-modal, html body.lgf .position-modal{border-radius:24px!important; box-shadow:0 30px 70px -24px rgba(14,34,64,.55)!important; font-family:Inter,system-ui,sans-serif}
html body.lgf .selex-modal__title{font-family:Inter,system-ui,sans-serif!important; font-weight:700!important; color:#0E2240!important; letter-spacing:-.01em}
html body.lgf .selex-modal__close, html body.lgf .m-close, html body.lgf .password-modal__close, html body.lgf .position-modal__close{border-radius:50%!important}
html body.lgf .selex-modal__close{background:#f1f4f8!important; width:36px!important; height:36px!important; display:grid!important; place-items:center; border:0!important}
/* Kopfzeilen: Navy statt Schwarz */
html body.lgf .m-head{background:#0E2240!important; border-radius:24px 24px 0 0!important}
html body.lgf .cc-legal-header{background:#0E2240!important}
/* Bestätigen in den Vertragsbedingungen: Gold wie alle Haupt-Buttons */
html body.lgf .cc-legal-accept__btn{background:var(--lgf-gold)!important; color:#0E2240!important; -webkit-text-fill-color:#0E2240!important; border-radius:9999px!important; font-weight:700!important}
html body.lgf .cc-legal-accept__btn:hover{background:var(--lgf-gold-h)!important}
html body.lgf .cc-legal-accept__btn svg{stroke:#0E2240!important; color:#0E2240!important}
/* Details-Popup (Summary/Selector): über allem, scrollbar (kein overflow:hidden!) */
html body.lgf .m-overlay{z-index:2147481000!important}
html body.lgf .m-box{overflow-y:auto!important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
@media (max-width:900px){
  /* Handy: Blatt von unten mit Abstand oben, Inhalt scrollt im Blatt */
  html body.lgf .m-overlay{display:flex!important; align-items:flex-end!important; padding:0!important; background:rgba(14,34,64,.45)!important; overflow:hidden!important}
  html body.lgf .m-box{border-radius:24px 24px 0 0!important; min-height:0!important; max-height:calc(100dvh - 28px)!important; height:calc(100dvh - 28px)!important; width:100%!important; animation:lgSheetUp .32s cubic-bezier(.3,1,.4,1) backwards!important; padding-bottom:env(safe-area-inset-bottom,0px)}
  html body.lgf .m-head{border-radius:24px 24px 0 0!important}
  html body.lgf .m-close-fixed{top:42px!important; right:14px!important; width:36px!important; height:36px!important; background:rgba(14,34,64,.88)!important; border:1px solid rgba(255,255,255,.35)!important; color:#fff!important; box-shadow:none!important; z-index:2147481500!important}
  html body.lgf .selex-modal--sheet{border-radius:24px 24px 0 0!important}
}
html body.lgf .route-info-modal{border-radius:24px 24px 0 0!important; font-family:Inter,system-ui,sans-serif}
@media (min-width:901px){ html body.lgf .route-info-overlay{align-items:center!important} html body.lgf .route-info-modal{border-radius:24px!important} }
html body.lgf .ux-fs-btn--primary{background:var(--lgf-gold)!important; color:#0E2240!important; -webkit-text-fill-color:#0E2240!important; border:0!important; border-radius:9999px!important; font-weight:700!important}
html body.lgf .ux-fs-btn--primary:hover{background:var(--lgf-gold-h)!important}
@keyframes lgSheetUp{from{transform:translateY(40px); opacity:0}}
/* Popups über dem Seitenkopf (Kopf wird mit abgedunkelt, wie beim Details-Popup) */
html body.lgf .selex-modal-overlay, html body.lgf .cc-legal-overlay, html body.lgf .route-info-overlay, html body.lgf #ovw-info-modal{z-index:2147480000!important}
html body.lgf .password-modal__btn--submit{background:var(--lgf-gold)!important; color:#0E2240!important; -webkit-text-fill-color:#0E2240!important; border-radius:9999px!important; font-weight:700!important}
html body.lgf .password-modal__btn--cancel{border-radius:9999px!important}
/* ═══ Summary: „Adresse bestätigen“ + „Fast geschafft!“ (Nutzungsbedingungen) im neuen Design ═══ */
html body.lgf #addressPopupOverlay, html body.lgf .agb-popup-overlay{background:rgba(14,34,64,.45)!important; -webkit-backdrop-filter:blur(5px)!important; backdrop-filter:blur(5px)!important; z-index:2147480000!important}
html body.lgf #addressPopupOverlay .address-popup, html body.lgf .agb-popup{border-radius:24px!important; box-shadow:0 30px 70px -24px rgba(14,34,64,.55)!important; font-family:Inter,system-ui,sans-serif!important}
html body.lgf #addressPopupOverlay h2, html body.lgf .agb-popup__title{font-family:Inter,system-ui,sans-serif!important; font-weight:700!important; color:#0E2240!important; letter-spacing:-.01em}
html body.lgf #addressPopupSubmit, html body.lgf .agb-popup__submit{background:var(--lgf-gold)!important; color:#0E2240!important; -webkit-text-fill-color:#0E2240!important; border:0!important; border-radius:9999px!important; font-weight:700!important}
html body.lgf #addressPopupSubmit:hover, html body.lgf .agb-popup__submit:hover:not(:disabled){background:var(--lgf-gold-h)!important}
html body.lgf .agb-popup__submit:disabled{background:#ededed!important; color:#a3a6ab!important; -webkit-text-fill-color:#a3a6ab!important; opacity:1!important}
html body.lgf #addressPopupCancel, html body.lgf .agb-popup__cancel{border-radius:9999px!important; border:1px solid #dfe4ec!important; background:#fff!important; color:#0E2240!important; font-weight:600!important}
html body.lgf #addressPopupClose, html body.lgf .agb-popup__close{border-radius:50%!important; background:#f1f4f8!important; color:#0E2240!important}
html body.lgf .agb-popup__checkbox-box{border-radius:7px!important}
html body.lgf .agb-popup__checkbox input:checked + .agb-popup__checkbox-box{background:#0E2240!important; border-color:#0E2240!important}
@media (max-width:600px){
  html body.lgf #addressPopupOverlay, html body.lgf .agb-popup-overlay{align-items:flex-end!important; padding:0!important}
  html body.lgf #addressPopupOverlay .address-popup, html body.lgf .agb-popup{border-radius:24px 24px 0 0!important; max-width:none!important; width:100%!important; padding-bottom:env(safe-area-inset-bottom,0px); animation:lgSheetUp .32s cubic-bezier(.3,1,.4,1) backwards}
}
/* Untere Leisten (Selex/Summary/Overview): massiv weiß, Safe-Area-Abstand, weiße Verlängerung nach unten (iOS-Safari zeigt sonst Inhalt unter der Leiste) */
html body.lgf .selex-bottombar, html body.lgf .summary-bottombar, html body.lgf .bottombar{background:#fff!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important}
html body.lgf .summary-bottombar, html body.lgf .bottombar{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important}
html body.lgf .selex-bottombar::after, html body.lgf .summary-bottombar::after, html body.lgf .bottombar::after{content:""; position:absolute; left:0; right:0; top:100%; height:140px; background:#fff; pointer-events:none}