/* Bottom-Sheet-Basis: nur noch test.html etc. — index lädt dieses File nicht (keine Sheet-Linie auf der Karte). */
:root {
/* Design-Tokens (Mockup) */
--ct24-primary: #1f2a44;
--ct24-accent: #f5b300;
--ct24-page-bg: #f4f6f9;
/* Taxi-UI Referenz (grün / weiß — statisches HTML-Mockup) */
--ct24-taxi-ui-green: #37a800;
--ct24-taxi-ui-green-soft: #edf5eb;
/* Chat-Widget-Palette (Header, Tabs, Primary-Buttons) — Sky → Blau wie #ct24IndexChatPanel */
--ct24-ui-chat-grad-t: #38bdf8;
--ct24-ui-chat-grad-b: #2563eb;
--ct24-ui-chat-grad-press: #1d4ed8;
--ct24-ui-chat-shadow: 0 2px 12px rgba(37, 99, 235, 0.28);
--ct24-ui-chat-border: rgba(15, 23, 42, 0.09);
--ct24-ui-chat-canvas: #eceff3;
/* Dynamischer Primär-Akzent (Senden-Icon, Toolbar): folgt den Chat-Verlauf-Tokens */
--ct24-chat-send: var(--ct24-ui-chat-grad-b);
--ct24-chat-send-hover: var(--ct24-ui-chat-grad-press);
/* Gleicher Akzent wie Chat-Eingabe-Kapsel / Senden — über --ct24-ui-chat-grad-b steuerbar */
--ct24-ui-accent-ring: var(--ct24-ui-chat-grad-b);
--ct24-ui-shell-radius-lg: 20px;
/* Index-Kopfzeile: gleiche Verläufe wie Chat-Avatar / Senden */
--ct24-index-header-grad-t: var(--ct24-ui-chat-grad-t);
--ct24-index-header-grad-b: var(--ct24-ui-chat-grad-b);
--ct24-index-header-grad-press: var(--ct24-ui-chat-grad-press);
--ct24-index-header-on-cta: #ffffff;
--ct24-index-header-on-cta-muted: rgba(255, 255, 255, 0.92);
--ct24-index-header-seg-active-fg: #ffffff;
--ct24-index-header-seg-track: linear-gradient(180deg, rgba(236, 239, 243, 0.98) 0%, rgba(226, 232, 240, 0.99) 100%);
--ct24-index-header-seg-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
--ct24-index-header-cta-shadow: var(--ct24-ui-chat-shadow);
/* Index App-Bar: neutral, leicht kühler — harmoniert mit Chat-Canvas */
--ct24-index-appbar-bg: rgba(255, 255, 255, 0.9);
--ct24-index-appbar-bg-solid: #f1f4f8;
--ct24-index-appbar-edge: rgba(15, 23, 42, 0.08);
--ct24-index-appbar-shadow: 0 6px 24px rgba(15, 23, 42, 0.07);
--ct24-index-appbar-seg-track: rgba(236, 239, 243, 0.94);
--ct24-index-appbar-seg-border: rgba(15, 23, 42, 0.1);
--ct24-index-appbar-text: #0f172a;
--ct24-index-appbar-text-muted: #64748b;
/*
* Index UI-Shell — Orientierung Uber / Bolt / Free Now:
* neutrale Seitenfläche, weiße erhöhte Surfaces, klare Textstufen, dezente Schatten.
*/
--ct24-rh-page-bg: #e8eaed;
--ct24-rh-map-fallback: #c4cad1;
--ct24-rh-surface: #ffffff;
--ct24-rh-surface-elevated: #f8fafc;
--ct24-rh-surface-glass: rgba(255, 255, 255, 0.97);
--ct24-rh-border-subtle: rgba(15, 23, 42, 0.06);
--ct24-rh-border: rgba(15, 23, 42, 0.09);
--ct24-rh-border-strong: rgba(15, 23, 42, 0.12);
--ct24-rh-text: #0f172a;
--ct24-rh-text-secondary: #475569;
--ct24-rh-text-tertiary: #64748b;
--ct24-rh-placeholder: #94a3b8;
--ct24-rh-accent: #37a800;
--ct24-rh-link: #0d9488;
--ct24-rh-shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.05);
--ct24-rh-shadow-md: 0 6px 24px rgba(15, 23, 42, 0.09);
--ct24-rh-shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.11);
--ct24-rh-shadow-sheet-up: 0 -10px 32px rgba(15, 23, 42, 0.1);
--ct24-rh-control-bg: #f1f5f9;
--ct24-rh-control-bg-hover: #e2e8f0;
/*
* Mobile Typo (Zielbild Uber / Bolt / Free Now):
* — Kurz-Labels, Spalten-Titel: 11–12.5px (min. lesbar, nicht „Micro“ auf großen Handys)
* — Status, Nebensätze: 12–13.5px
* — Beträge in der Preiszeile (nicht End-Hero): 15–18px
* — Endbetrag / große Schätzung: 18–24px (fluid)
* iOS empfiehlt ab ~11pt für Nebensätze, Body oft 16–17; Ride-Hail Apps bleiben kompakt,
* skalieren aber per clamp mit vw, damit 320px-Geräte nicht zu klein werden.
*/
--ct24-mob-label: clamp(11px, 2.9vw, 12.5px);
--ct24-mob-body: clamp(12px, 3.1vw, 13.5px);
--ct24-mob-price-col: clamp(15px, 3.9vw, 18px);
--ct24-mob-price-hero: clamp(18px, 4.6vw, 24px);
--ct24-mob-price-placeholder: clamp(13px, 3.4vw, 15px);
--ct24-mob-header-balance: clamp(12px, 3.2vw, 14px);
--ct24-mob-header-guthaben-cap: clamp(9.5px, 2.4vw, 10.5px);
--ct24-taxi-ui-border: #ececec;
--ct24-taxi-ui-shadow: 0 18px 35px rgba(0, 0, 0, 0.12);
--ct24-taxi-ui-shadow-header: 0 8px 18px rgba(0, 0, 0, 0.15);
/* Kopfzeile: Wallet/Burger + Gast-ID — gleiche Flächenfarbe wie aktiver „Jetzt buchen“-Tab */
--ct24-header-cta-bg: var(--navy);
/* Primärfarbe — an Mockup angeglichen */
--navy: #1f2a44;
--navy-dark: #121a2e;
--surface: #ffffff;
--muted: #6b7280;
--muted-tab: #8b94a8;
--border: #e8eaee;
--green: #22c55e;
--red: #ef4444;
--sheet-bg: #ffffff;
--shadow: 0 10px 36px rgba(21, 34, 56, 0.14);
--shadow-soft: 0 4px 18px rgba(21, 34, 56, 0.08);
/* Einheitliche Abstände (kompakt wie native Apps) */
--gap-xs: 4px;
--gap-sm: 6px;
--gap-md: 10px;
/* Abhol- ↔ Zielzeile (Adresskarte); auf dem Index ggf. überschrieben */
--ct24-loc-abhol-ziel-pad: 16px;
/* Burger neben weiteren Header-Icons (falls ergänzt) */
--ct24-header-icon-inline-gap: 10px;
/* „Jetzt buchen“ + Fahrpreis-Platzhalter + Kopfzeilen-Tabs (aktiv wie CTA) */
--ct24-book-now-font-size: 16px;
--ct24-book-now-font-size-active: 18px;
--ct24-book-now-tab-min-h: 50px;
--ct24-book-now-tab-pad-y: 14px;
--ct24-book-now-tab-pad-x: 16px;
/* Header responsive */
--ct24-header-gap: 12px;
--ct24-header-icon-size: 46px;
--ct24-cashback-font-size: 13px;
--ct24-cashback-pad-y: 10px;
--ct24-cashback-pad-x: 14px;
/* Header-Kacheln: wie flaches Wallet — ohne weißen Rand / Außenschatten */
--ct24-header-chip-border: none;
--ct24-header-chip-radius: 12px;
--ct24-header-chip-bg: var(--ct24-header-cta-bg);
--ct24-header-chip-shadow: none;
--ct24-header-chip-font-size: var(--ct24-cashback-font-size);
--ct24-header-chip-font-weight: 600;
/* Index-Kopfzeile: eine Zeile Typo (wie Guthaben-Betrag) */
--ct24-header-text-line-height: 1.2;
--ct24-header-text-tracking: -0.02em;
/* Fahrzeug-Kategorien (Mockup: blau / grau / orange) */
--recenter-above-sheet: 300px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
overscroll-behavior: none;
}
/* /test — gleiche App, nur markierte Buchungen */
body.ct24-booking-test-page::before {
content: 'TEST · keine Live-Buchung';
display: block;
text-align: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
background: #f59e0b;
color: #0f172a;
padding: 5px 8px;
position: relative;
z-index: 25;
}
/* Standard: Browser-Zoom möglich. Index (body[data-index-nav-tab]): nur Karte zoombar — siehe unten. */
body {
touch-action: auto;
}
/*
* Index-Fahrgast: Viewport max-scale=1 — Pinch-Zoom nur in der Map (Mapbox fängt Gesten mit touch-action: none).
* Body pan-x/pan-y: Scroll in Sheets/Listen ohne Seiten-Zoom; UI bleibt „fix“ skaliert.
*/
body[data-index-nav-tab] {
touch-action: pan-x pan-y;
}
body[data-index-nav-tab] .ct24-map-shell #map {
touch-action: none;
}
/* Index: Seitenfläche wie Ride-Hailing-Apps (neutral, Karte dominiert) */
body[data-index-nav-tab]:not(.ct24-is-buchung-page) {
background-color: var(--ct24-rh-page-bg);
/* Karten/Sections auf Index nutzen dieselbe Schatten-/Border-Sprache */
--ct24-taxi-ui-shadow: var(--ct24-rh-shadow-md);
--ct24-taxi-ui-border: rgba(15, 23, 42, 0.09);
}
/* Dev-Modus: IDs als Overlay anzeigen (nur per JS aktivierbar) */
.ct24-dev-ids-layer {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
}
.ct24-dev-ids-tag {
position: fixed;
max-width: 62vw;
padding: 2px 6px;
border-radius: 6px;
font: 700 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
letter-spacing: 0.01em;
color: #0b1220;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.25);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform: translate3d(0, 0, 0);
}
/* Dev-Guides: zeigt Boxen/Padding/Margins (nur wenn body Klasse gesetzt) */
body.ct24-dev-guides * {
outline: 1px dashed rgba(244, 63, 94, 0.35);
outline-offset: -1px;
}
body.ct24-dev-guides .bottom-sheet,
body.ct24-dev-guides .app-header,
body.ct24-dev-guides .location-card,
body.ct24-dev-guides .booking-driver-top-sheet,
body.ct24-dev-guides #sheetBody {
outline: 2px solid rgba(59, 130, 246, 0.55);
outline-offset: -2px;
}
body.ct24-dev-guides .ct24-dev-inspector {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 10000;
pointer-events: none;
display: none;
}
body.ct24-dev-guides .ct24-dev-inspector__panel {
pointer-events: none;
padding: 10px 12px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.92);
color: #fff;
font: 700 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.12);
}
body.ct24-dev-guides .ct24-dev-inspector__k {
opacity: 0.8;
font-weight: 650;
}
body.ct24-dev-guides .ct24-dev-inspector.is-on {
display: block;
}
/* Dev-Control Panel (toggles) */
.ct24-dev-ctrl {
position: fixed;
left: 10px;
top: calc(10px + env(safe-area-inset-top));
z-index: 10001;
pointer-events: auto;
display: none;
}
.ct24-dev-ctrl.is-on {
display: block;
}
.ct24-dev-ctrl__panel {
display: flex;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.88);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ct24-dev-ctrl__btn {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
letter-spacing: 0.04em;
padding: 8px 10px;
border-radius: 12px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ct24-dev-ctrl__btn.is-active {
background: rgba(59, 130, 246, 0.28);
border-color: rgba(59, 130, 246, 0.55);
}
.ct24-dev-ctrl__btn:active {
transform: scale(0.98);
}
/* Karten-Shell: Mapbox-Container + optionales Ambiente-Intro (nur über der Karte) */
.ct24-map-shell {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
.ct24-map-shell #map {
touch-action: pan-x pan-y;
background: var(--ct24-rh-map-fallback, #dce2e9);
}
.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;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
background: var(--ct24-page-bg);
color: #111827;
-webkit-font-smoothing: antialiased;
}
/* Karten-Dimmung bei geöffnetem Sheet (Mockup: opacity skaliert mit Sheet-Höhe) */
.ct24-map-dim {
position: fixed;
inset: 0;
z-index: 2;
background: transparent;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* Nur wenn Sheet merklich auf ist: antippen schließt (JS setzt Klasse) */
.ct24-map-dim.ct24-map-dim--sheet-open {
pointer-events: none;
cursor: default;
-webkit-tap-highlight-color: transparent;
}
body.ct24-is-buchung-page .ct24-map-dim {
opacity: 0 !important;
pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
.ct24-map-dim {
transition: none;
}
}
/* Glass (Mockup: blur 18px, rgba 0.88) */
.ct24-glass {
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}
/* Leicht transparenteres Glas für eingebettete Ablauf-Karten (Fahrt-Stack) */
.ct24-glass--soft {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.62);
box-shadow: 0 10px 36px rgba(15, 23, 42, 0.09);
}
.service-tabs.ct24-glass {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
}
.location-card.ct24-glass {
background: rgba(255, 255, 255, 0.88);
}
/* Buchungsleiste unten: gleicher Blur/Hintergrund wie .ct24-glass, Schatten nach oben */
.bottom-sheet.ct24-glass {
transform: translate3d(-50%, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.65);
box-shadow: none;
}
/* Karte (Mapbox) */
/* Top bar — Fahrtauswahl, Wallet/Guthaben, Burger */
.app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 3;
background: transparent;
padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
/* Wichtig: Header muss klickbar sein (Wallet/Burger). */
pointer-events: auto;
}
.app-header__shell {
position: relative;
max-width: 560px;
margin: 0 auto;
pointer-events: auto;
}
/*
* Index-Kopfzeile: transparenter Hintergrund — Karte/Inhalt darunter sichtbar, kein Blur/Frost.
* Steuerung liegt an den Buttons/Tabs (eigene Flächen); Shell nur Layout + Safe Area.
*/
.app-header.app-header--index-top {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
box-shadow: none;
padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
}
body:not(.ct24-is-buchung-page) .app-header.app-header--index-top {
background: transparent !important;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) .app-header.app-header--index-top::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: max(
0px,
calc(
var(--ct24-index-chat-top, 132px) +
var(--ct24-index-chat-sheet-nudge-y, 0px) +
var(--ct24-index-chat-compose-h, 86px) -
var(--ct24-index-ui-stack-top, 132px)
)
);
background: transparent;
pointer-events: none;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.app-header.app-header--index-top {
background: transparent;
}
}
@media (prefers-reduced-transparency: reduce) {
.app-header.app-header--index-top {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: transparent;
}
}
/* Header top-menu: 1:1 nach Nutzer-Snippet */
.app-header--index-top .top-menu {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
overflow-x: hidden;
padding: 2px 0 0;
}
.app-header--index-top .top-menu .menu-btn {
height: 44px;
border: none;
border-radius: 16px;
color: var(--ct24-index-header-on-cta);
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
cursor: pointer;
white-space: nowrap;
box-shadow: var(--ct24-index-header-cta-shadow), var(--ct24-index-header-seg-inset);
background: linear-gradient(145deg, var(--ct24-index-header-grad-t), var(--ct24-index-header-grad-b));
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-webkit-tap-highlight-color: transparent;
min-width: 0;
transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.app-header--index-top .top-menu .menu-btn:hover {
filter: brightness(1.05);
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.app-header--index-top .top-menu .menu-btn:active {
filter: brightness(0.97);
}
@media (prefers-reduced-motion: reduce) {
.app-header--index-top .top-menu .menu-btn {
transition: none;
}
}
/* Schritt 1: drei Fahrtarten als Segment-Tabs (Stadtfahrt / Zum / Vom Flughafen) */
.app-header--index-top .top-menu .index-header-fahrtart-seg {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 3px;
padding: 3px;
border-radius: 999px;
background: var(--ct24-index-appbar-seg-track);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75);
border: 1px solid var(--ct24-index-appbar-seg-border);
box-sizing: border-box;
height: 44px;
max-height: 44px;
}
.app-header--index-top .top-menu .index-header-fahrtart-seg__tab {
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 6px 5px;
border: none;
border-radius: 999px;
background: transparent;
color: var(--ct24-index-appbar-text-muted);
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: clamp(10px, 2.75vw, 13px);
font-weight: 700;
line-height: 1.12;
letter-spacing: 0.01em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: none;
}
.app-header--index-top .top-menu .index-header-fahrtart-seg__tab:hover {
color: var(--ct24-index-appbar-text);
background: rgba(37, 99, 235, 0.08);
}
.app-header--index-top .top-menu .index-header-fahrtart-seg__tab.is-active {
background: linear-gradient(145deg, var(--ct24-index-header-grad-t), var(--ct24-index-header-grad-b));
color: var(--ct24-index-header-on-cta);
text-shadow: none;
box-shadow: var(--ct24-index-header-cta-shadow), var(--ct24-index-header-seg-inset);
}
.app-header--index-top .top-menu .index-header-fahrtart-seg__tab.is-active:hover {
filter: brightness(1.04);
color: var(--ct24-index-header-on-cta);
background: linear-gradient(145deg, var(--ct24-index-header-grad-t), var(--ct24-index-header-grad-b));
}
.app-header--index-top .top-menu .index-header-fahrtart-seg__tab:focus-visible {
outline: 2px solid rgba(56, 189, 248, 0.95);
outline-offset: 2px;
}
/* index-v2 & Legacy: Ein-Knopf-Toggle */
.app-header--index-top .top-menu .left-btn {
min-width: 230px;
flex: 1 1 auto;
justify-content: space-between;
padding-right: 12px;
}
.app-header--index-top .top-menu .index-trip-type-toggle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 8px;
}
.app-header--index-top .top-menu .left-btn .index-trip-type-toggle__stack {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.05;
min-width: 0;
margin-right: auto;
}
.app-header--index-top .top-menu .left-btn .index-trip-type-toggle__primary,
.app-header--index-top .top-menu .left-btn .index-trip-type-toggle__secondary {
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
.app-header--index-top .top-menu .left-btn .index-trip-type-toggle__secondary {
display: none !important;
}
.app-header--index-top .top-menu .center-btn {
min-width: 176px;
flex: 1.2 1 52%;
justify-content: space-between;
gap: 10px;
}
.app-header--index-top .top-menu .center-btn__left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.app-header--index-top .top-menu .center-btn__left span {
overflow: hidden;
text-overflow: ellipsis;
}
.app-header--index-top .top-menu .phone-btn {
width: 44px;
min-width: 44px;
flex: 0 0 44px;
padding: 0;
}
/* Schritt 3 (aktive Fahrt): Chat-Icon nur Optik — span, kein Fokus, keine Aktion */
.app-header--index-top .top-menu .index-header-chat-decoy {
display: none;
width: 44px;
min-width: 44px;
flex: 0 0 44px;
height: 44px;
box-sizing: border-box;
align-items: center;
justify-content: center;
border-radius: 50%;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
opacity: 0.62;
color: var(--ct24-index-header-on-cta, #fff);
background: linear-gradient(145deg, var(--ct24-index-header-grad-t), var(--ct24-index-header-grad-b));
box-shadow: var(--ct24-index-header-cta-shadow), var(--ct24-index-header-seg-inset);
font-size: 17px;
line-height: 1;
}
/* Index: Telefon-Icon im Header komplett aus (alle UX-Schritte, inkl. Swap-Host). */
body:not(.ct24-is-buchung-page) .app-header--index-top .top-menu .phone-btn,
body:not(.ct24-is-buchung-page) #indexHeaderTelBtn {
display: none !important;
}
/* Schritt 1: Header z-index 60 liegt über #indexUiStack (5) — die volle Header-/Shell-Box (transparent) nimmt Taps weg,
Chat (Nachrichten, Eingabe) darunter ist nicht bedienbar. Klickfläche nur auf echte Controls, Slot bleibt durchlässig. */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) .app-header.app-header--index-top {
pointer-events: none;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header.app-header--index-top
.app-header__shell {
pointer-events: none;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu {
pointer-events: none;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.menu-btn,
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.index-header-chat-decoy {
pointer-events: auto;
}
/* Schritt 1: eine Zeile — Chat-Slot + Burger mittig (wie Senden-Kreis im Flex); kein padding-top:2px / flex-end */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) .app-header--index-top .top-menu {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding-top: 0;
padding-bottom: 0;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.index-header-chat-slot {
display: block !important;
flex: 1 1 auto;
min-width: 0;
width: auto;
box-sizing: border-box;
height: 46px;
min-height: 46px;
pointer-events: none;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn {
position: relative;
z-index: 63;
}
/* Header-Zurück ersetzt Fahrtauswahl in Schritt 2 — kreisrund */
.app-header--index-top .top-menu .index-header-addr-back-btn {
display: none;
width: 44px;
min-width: 44px;
max-width: 44px;
height: 44px;
flex: 0 0 44px;
padding: 0;
justify-content: center;
align-items: center;
border-radius: 50% !important;
box-sizing: border-box;
}
.app-header--index-top .top-menu .index-header-addr-back-btn__icon {
width: 22px;
height: 22px;
display: block;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-index-ux--post-book-trip):not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) .app-header--index-top .top-menu .index-header-addr-back-btn {
display: flex;
}
.app-header--index-top .top-menu .index-header-chat-slot {
display: none;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-index-ux--post-book-trip):not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) .app-header--index-top .top-menu .index-trip-type-toggle {
display: none !important;
}
/* Nach "Jetzt buchen" Header-Zeile stabil halten (kein versehentliches Grid/Hide-Mischen). */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) .app-header--index-top .top-menu {
display: flex;
row-gap: 0;
grid-template-columns: none;
}
/* Schritt 2 (addr-collapsed): Chat-Slot aus; Storno/Buchungsseite ausgenommen. */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) .app-header--index-top .top-menu .index-header-chat-slot,
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) .app-header--index-top .top-menu .index-trip-type-toggle {
display: none !important;
}
/* Guthaben-/Telefon-/Burger in der Index-Kopfzeile: dauerhaft ausgeblendet — Regel „ct24-index-header-strip-remove“ am Dateiende. */
/* Schritt 2: Wallet — ein Zeile (Icon · Betrag · Label), Optik wie Fahrtart-Segment im Header */
.app-header--index-top .top-menu .index-header-wallet-chip {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 100%;
min-height: 44px;
padding: 0 14px;
box-sizing: border-box;
border-radius: 999px;
background: var(--ct24-index-appbar-seg-track);
border: 1px solid var(--ct24-index-appbar-seg-border);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75);
}
.app-header--index-top .top-menu .index-header-wallet-chip__icon {
flex: 0 0 auto;
font-size: 15px;
line-height: 1;
color: var(--ct24-index-header-grad-b);
opacity: 0.95;
}
.app-header--index-top .top-menu .index-header-wallet-chip__amount {
flex: 0 1 auto;
min-width: 0;
font-size: var(--ct24-mob-header-balance);
font-weight: 800;
color: var(--ct24-index-appbar-text);
line-height: 1.2;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: min(9.5rem, 42vw);
font-variant-numeric: tabular-nums;
}
.app-header--index-top .top-menu .index-header-wallet-chip__label {
flex: 0 0 auto;
font-size: var(--ct24-mob-header-guthaben-cap);
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ct24-index-appbar-text-muted);
line-height: 1.1;
white-space: nowrap;
}
/* Wallet/Burger: immer kreisrund (Index) */
body:not(.ct24-is-buchung-page) .app-header--index-top .top-menu .price-btn.index-header-wallet-btn {
min-width: 44px !important;
width: 44px !important;
max-width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
padding: 0 !important;
margin-left: auto;
justify-content: center;
align-items: center;
border-radius: 50% !important;
box-sizing: border-box;
}
body:not(.ct24-is-buchung-page) .app-header--index-top .top-menu .price-btn.index-header-wallet-btn .price-right.index-header-burger-round {
width: 100%;
height: 100%;
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50% !important;
background: transparent;
border-top-right-radius: 50% !important;
border-bottom-right-radius: 50% !important;
cursor: pointer;
}
/* Schritt 2: Burger bleibt rechts (margin-left auto schon am .price-btn) */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) .app-header--index-top .top-menu .price-btn.index-header-wallet-btn {
margin-left: 0;
}
/* Fallback wenn nur Trip sichtbar: Burger ans rechte Ende — Schritt 1: wie Chat-Senden (Farbe, 46px, Schatten) */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) .app-header--index-top .top-menu .price-btn.index-header-wallet-btn {
margin-left: auto !important;
min-width: 46px !important;
width: 46px !important;
max-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
flex: 0 0 46px !important;
border: none !important;
background: #2563eb !important;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22) !important;
/* .menu-btn setzt height:44 / font-size:14 — ohne das sitzt das FA-Icon optisch zu hoch */
line-height: 0 !important;
font-size: 0 !important;
transition:
transform 0.12s ease,
background 0.12s ease,
box-shadow 0.12s ease;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn:hover {
background: #1d4ed8 !important;
box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3) !important;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn:active {
transform: scale(0.94);
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn
.price-right.index-header-burger-round {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
background: transparent !important;
line-height: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn
i {
color: #fff !important;
opacity: 1 !important;
filter: none !important;
font-size: 18px !important;
line-height: 1 !important;
display: block;
/* ~Send-Icon 22px im 46er Kreis: FA-Bars leicht nach unten */
transform: translateY(1px);
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}
.app-header--index-top .top-menu .price-btn {
min-width: 132px;
flex: 0 1 32%;
justify-content: space-between;
padding: 0 0 0 12px;
}
.app-header--index-top .top-menu .menu-btn i {
font-size: 18px;
color: var(--ct24-index-header-on-cta);
opacity: 0.95;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.app-header--index-top .top-menu .price-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.app-header--index-top .top-menu .price-left span {
overflow: hidden;
text-overflow: ellipsis;
}
.app-header--index-top .top-menu .price-right {
background: rgba(0, 0, 0, 0.12);
height: 100%;
width: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
cursor: pointer;
}
@media (max-width: 900px) {
.app-header--index-top .top-menu .menu-btn {
height: 40px;
font-size: 12px;
border-radius: 14px;
}
.app-header--index-top .top-menu .left-btn {
min-width: 180px;
}
.app-header--index-top .top-menu .index-header-fahrtart-seg {
height: 40px;
max-height: 40px;
padding: 2px;
gap: 2px;
}
.app-header--index-top .top-menu .index-header-fahrtart-seg__tab {
font-size: clamp(9px, 2.65vw, 12px);
padding: 5px 3px;
}
.app-header--index-top .top-menu .center-btn {
min-width: 140px;
}
.app-header--index-top .top-menu .price-btn {
min-width: 108px;
}
.app-header--index-top .top-menu .phone-btn {
width: 40px;
min-width: 40px;
flex-basis: 40px;
}
.app-header--index-top .top-menu .menu-btn i {
font-size: 16px;
}
.app-header--index-top .top-menu .price-right {
width: 40px;
min-width: 40px;
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
}
body:not(.ct24-is-buchung-page):not(.ct24-index-ux--addr-only) .app-header--index-top .top-menu .price-btn.index-header-wallet-btn {
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 40px !important;
flex: 0 0 40px !important;
}
.app-header--index-top .top-menu .index-header-addr-back-btn {
width: 40px;
min-width: 40px;
max-width: 40px;
height: 40px;
flex: 0 0 40px;
}
.app-header--index-top .top-menu .index-header-wallet-chip {
min-height: 40px;
padding: 0 12px;
gap: 6px;
}
.app-header--index-top .top-menu .index-header-wallet-chip__icon {
font-size: 14px;
}
}
/* Schritt 1: Burger = gleicher Look/Höhe wie Chat-Senden (46px), mobil nicht auf 40px schrumpfen */
@media (max-width: 900px) {
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.menu-btn.index-header-wallet-btn {
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn {
width: 46px !important;
min-width: 46px !important;
max-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
flex: 0 0 46px !important;
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn
i {
font-size: 18px !important;
}
}
.app-header__top-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: var(--ct24-header-gap);
margin-bottom: 2px;
width: 100%;
}
/* Links: eine Zeile — Hinweis „Fahrtart“ + wählbare Modi (Taxi / Flughafen + Zum|Vom) */
.app-header__top-row-services {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
}
.app-header__top-row-services .airport-switch {
flex: 1 1 0;
width: 100%;
max-width: 100%;
min-width: 0;
}
.app-header__top-row-messages {
flex: 0 0 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.app-header__messages-btn {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 5px;
box-sizing: border-box;
min-height: var(--ct24-header-icon-size);
height: var(--ct24-header-icon-size);
padding: 0 10px;
border: var(--ct24-header-chip-border);
border-radius: var(--ct24-header-chip-radius);
background: var(--ct24-header-chip-bg);
box-shadow: var(--ct24-header-chip-shadow);
color: #fff;
font-family: inherit;
font-size: var(--ct24-header-chip-font-size);
font-weight: var(--ct24-header-chip-font-weight);
letter-spacing: var(--ct24-header-text-tracking);
line-height: var(--ct24-header-text-line-height);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.app-header__messages-btn:active {
filter: brightness(1.06);
}
.app-header__messages-btn__ic {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.app-header__messages-btn__lbl {
white-space: nowrap;
max-width: 6.5rem;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 400px) {
.app-header__messages-btn__lbl {
display: none;
}
.app-header__messages-btn {
width: var(--ct24-header-icon-size);
padding: 0;
}
}
/* Rechts: Telefon (Flex) + Wallet + Burger */
.app-header__top-row-end {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: var(--ct24-header-gap);
flex: 0 0 auto;
min-width: 0;
}
.app-header__quick-actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: var(--ct24-header-icon-inline-gap);
flex: 0 0 auto;
}
.app-header__icon-action {
flex-shrink: 0;
box-sizing: border-box;
width: var(--ct24-header-icon-size);
height: var(--ct24-header-icon-size);
margin: 0;
padding: 0;
border: var(--ct24-header-chip-border);
border-radius: var(--ct24-header-chip-radius);
background: var(--ct24-header-chip-bg);
box-shadow: var(--ct24-header-chip-shadow);
color: #ffffff;
font: inherit;
line-height: 0;
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
transition: background 0.18s ease, filter 0.12s ease;
}
.app-header__icon-action svg {
width: 22px;
height: 22px;
display: block;
}
.app-header__icon-action:hover {
filter: brightness(1.06);
}
.app-header__icon-action:active {
filter: brightness(1.1);
}
.app-header__icon-action:focus-visible {
outline: 2px solid var(--ct24-accent);
outline-offset: 2px;
}
@media (max-width: 360px) {
.app-header__quick-actions {
gap: 6px;
}
}
.app-header__top-row-cashback {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.app-header__cashback-box--index-header {
margin-left: 0 !important;
margin-right: 0;
align-self: center;
min-height: var(--ct24-header-icon-size);
height: var(--ct24-header-icon-size);
box-sizing: border-box;
padding: 0 8px;
border-radius: var(--ct24-header-chip-radius);
border: var(--ct24-header-chip-border);
gap: 4px;
font-family: inherit;
font-size: var(--ct24-header-chip-font-size);
font-weight: var(--ct24-header-chip-font-weight);
line-height: var(--ct24-header-text-line-height);
letter-spacing: var(--ct24-header-text-tracking);
color: #fff;
background: var(--ct24-header-chip-bg);
box-shadow: var(--ct24-header-chip-shadow);
}
/* Index: Betrag, Guthaben, Fahrtauswahl-Hinweis, Flughafen-Zweitzeile — gleiche Schrift wie Wallet-Betrag */
.app-header--index-top .app-header__cashback-box--index-header .app-header__cashback-box-balance,
.app-header--index-top .app-header__cashback-box--index-header .app-header__cashback-box-credit,
.app-header--index-top .index-trip-type-hint__kicker,
.app-header--index-top .index-trip-type-hint__arrow,
.app-header--index-top .index-trip-type-toggle__secondary {
font-family: inherit;
font-size: var(--ct24-header-chip-font-size);
font-weight: var(--ct24-header-chip-font-weight);
letter-spacing: var(--ct24-header-text-tracking);
line-height: var(--ct24-header-text-line-height);
}
.app-header--index-top .app-header__cashback-box--index-header .app-header__cashback-box-balance,
.app-header--index-top .app-header__cashback-box--index-header .app-header__cashback-box-credit,
.app-header--index-top .index-trip-type-hint__kicker,
.app-header--index-top .index-trip-type-hint__arrow {
color: #ffffff;
}
.app-header--index-top .app-header__cashback-box--index-header .app-header__cashback-box-balance {
font-variant-numeric: tabular-nums;
max-width: clamp(2.5rem, 10vw, 4.35rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-header--index-top .app-header__cashback-box--index-header .app-header__cashback-box-credit {
/* Nur Icon + Betrag sichtbar — „Guthaben“ wirkte auf schmalen Höhen wie Text im Buchungs-/Nav-Bereich */
display: none !important;
}
/* Burger: Balken weiß auf Navy; offen/gedrückt: grau, Balken Navy */
.app-header__burger {
flex-shrink: 0;
width: var(--ct24-header-icon-size);
height: var(--ct24-header-icon-size);
border-radius: var(--ct24-header-chip-radius);
border: var(--ct24-header-chip-border);
background: var(--ct24-header-chip-bg);
box-shadow: var(--ct24-header-chip-shadow);
font-family: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0;
margin: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.18s ease, border-color 0.18s ease;
}
.app-header__burger-bar {
display: block;
width: 20px;
height: 3px;
border-radius: 2px;
background: #ffffff;
flex-shrink: 0;
transition: background 0.18s ease;
}
.app-header__burger.is-open,
.app-header__burger:active {
background: #e5e7eb;
border-color: transparent;
}
.app-header__burger.is-open .app-header__burger-bar,
.app-header__burger:active .app-header__burger-bar {
background: var(--navy);
}
.app-header__burger:focus-visible {
outline: 2px solid var(--ct24-accent);
outline-offset: 2px;
}
.app-header > * { pointer-events: auto; }
.icon-btn {
width: 46px;
height: 46px;
border-radius: 12px;
border: none;
background: var(--surface);
box-shadow: var(--shadow);
font-size: 1.15rem;
cursor: pointer;
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-btn svg { width: 20px; height: 20px; }
.app-header__cashback-box {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
/* Rechts ausrichten bis zur Kante der Adressfelder */
margin-left: auto;
padding: var(--ct24-cashback-pad-y) var(--ct24-cashback-pad-x);
min-height: 0;
align-self: stretch;
border: none;
border-radius: 14px;
background: var(--ct24-header-cta-bg);
color: #fff;
font-size: var(--ct24-cashback-font-size);
font-weight: 600;
cursor: pointer;
box-shadow: none;
-webkit-tap-highlight-color: transparent;
}
.booking-footer-cashback-wallet.app-header__cashback-box {
margin-left: 6px;
align-self: center;
min-height: 40px;
padding: 8px 10px;
border-radius: 12px;
font-size: 12px;
gap: 5px;
}
.booking-footer-cashback-wallet .app-header__cashback-box-balance {
max-width: none;
}
.app-header__cashback-box:active {
opacity: 0.92;
transform: scale(0.98);
}
.app-header__cashback-box--index-header:active {
transform: none;
opacity: 1;
filter: brightness(1.06);
}
.app-header__cashback-box:focus-visible {
outline: 2px solid var(--ct24-accent);
outline-offset: 2px;
}
.app-header__cashback-box-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: inherit;
}
.app-header__cashback-box-icon svg {
width: 100%;
height: 100%;
display: block;
}
.app-header__cashback-box--index-header .app-header__cashback-box-icon {
width: 24px;
height: 24px;
}
.app-header__cashback-box-balance {
font-variant-numeric: tabular-nums;
letter-spacing: var(--ct24-header-text-tracking);
white-space: nowrap;
max-width: clamp(3.75rem, 16vw, 6rem);
overflow: hidden;
text-overflow: ellipsis;
}
/* Header: auf kleinen Geräten automatisch kompakter,
damit Tabs + Guthaben + Burger immer sichtbar bleiben */
@media (max-width: 420px) {
:root {
--ct24-header-gap: 8px;
--ct24-header-icon-size: 42px;
--ct24-cashback-font-size: 12px;
--ct24-cashback-pad-y: 9px;
--ct24-cashback-pad-x: 12px;
--ct24-book-now-font-size: 14px;
--ct24-book-now-font-size-active: 16px;
--ct24-book-now-tab-min-h: 44px;
--ct24-book-now-tab-pad-y: 12px;
--ct24-book-now-tab-pad-x: 14px;
}
.airport-switch__taxi-track .tab,
.airport-combo .airport-switch__air-mode-tabs .tab {
padding-left: 8px;
padding-right: 8px;
font-size: 13px;
}
}
@media (max-width: 360px) {
:root {
--ct24-header-gap: 5px;
--ct24-header-icon-size: 40px;
--ct24-cashback-font-size: 11px;
--ct24-cashback-pad-y: 8px;
--ct24-cashback-pad-x: 10px;
--ct24-book-now-font-size: 13px;
--ct24-book-now-font-size-active: 15px;
--ct24-book-now-tab-min-h: 42px;
--ct24-book-now-tab-pad-y: 11px;
--ct24-book-now-tab-pad-x: 12px;
}
.app-header__cashback-box-icon {
width: 21px;
height: 21px;
}
.airport-switch__taxi-track .tab,
.airport-combo .airport-switch__air-mode-tabs .tab {
padding-left: 7px;
padding-right: 7px;
font-size: 12px;
}
}
.index-cashback-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
}
.index-menu-drawer__panel .index-cashback-tabs {
margin-top: 4px;
}
.index-cashback-tab {
flex: 1 1 auto;
min-width: 0;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: #f1f5f9;
color: var(--navy);
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.index-cashback-tab--active {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.index-cashback-pane[hidden] {
display: none !important;
}
.index-cashback-ledger-list--open {
max-height: min(52vh, 420px);
overflow-y: auto;
margin: 10px 0 0;
padding: 0;
list-style: none;
-webkit-overflow-scrolling: touch;
}
.index-cashback-ledger-list--open li {
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 12px;
line-height: 1.35;
color: #334155;
}
/* Menü wieder seitlich von rechts */
.index-menu-drawer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 0;
z-index: 50;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-end;
pointer-events: none;
box-sizing: border-box;
}
.index-menu-drawer:not([hidden]) {
pointer-events: auto;
}
/*
* Burger-Menü: Einheitliche Hoch-Leiter (> Tabbar 25010, ion-modal 20000, Fahrerkarten-Dock 24910).
* Vor dem Nachrichten-Sheet darf optisch/interaktiv nur noch die Kopfzeile (+ gewollter Frost-Hintergrund)
* darüberliegen — nicht Tab/Ionic-Zusatzlayer oder durch pointer-events durchgereichte Menü-Ebene.
* Reihenfolge (unten→oben): Fahrerkarte-Dock < Tabbar < Ionic-Hosts < Drawer < Chat < Kopfzeile.
*/
body.index-menu-open:not(.ct24-is-buchung-page) .index-fahrerkarte-dock:not(.index-fahrerkarte-dock--embedded) {
z-index: 25088 !important;
}
body.index-menu-open:not(.ct24-is-buchung-page) #indexFahrgastBottomNav.index-fahrgast-tabbar {
z-index: 25090 !important;
}
/* Alle ion-modal (nicht nur index-ion-nav-modal); Ionic kann hosts ohne Klasse nachziehen */
body.index-menu-open ion-modal {
z-index: 25095 !important;
}
body.index-menu-open ion-alert,
body.index-menu-open ion-loading,
body.index-menu-open ion-picker,
body.index-menu-open ion-popover,
body.index-menu-open ion-action-sheet,
body.index-menu-open ion-datetime {
z-index: 25096 !important;
}
body.index-menu-open ion-overlay {
z-index: 25096 !important;
}
body.index-menu-open #indexMenuModal.index-menu-drawer {
z-index: 25100 !important;
}
body.index-menu-open.ct24-index-chat-float-layout:not(.ct24-is-buchung-page)
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root {
z-index: 25118 !important;
isolation: isolate;
/* Sonst gehen Events durch transparente Root-Fläche zum Menü-Scrim „darunter“ */
pointer-events: auto !important;
/* Wie ohne Menü: kein zusätzlicher Milchglas-„Apron“ — Sheet bleibt transparent außen */
--ct24-index-chat-sheet-apron: transparent;
}
/* Kopfzeile (Burger, Wallet, …) über Chat + Menü — Hintergrund transparent, kein weißer Balken */
body.index-menu-open:not(.ct24-is-buchung-page) #indexAppHeaderBar.app-header.app-header--index-top {
z-index: 25125 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
@media (prefers-reduced-transparency: reduce) {
body.index-menu-open:not(.ct24-is-buchung-page) #indexAppHeaderBar.app-header.app-header--index-top {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: transparent !important;
box-shadow: none !important;
}
}
/*
* Gast-Chat liegt über dem Menü (z-index). Menü-Inhalt beginnt unter dem Chat —
* Oberkante Menüfläche am unteren Rand des Nachrichten-/Eingabebands (--ct24-index-chat-compose-h aus ct24-index-chat-ui.js),
* nicht erst unter der vollen Peek-Max-Höhe (dadurch wirkt das Menü „etwas höher“ / näher an der Eingabezeile).
*/
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__android-chrome {
display: none !important;
}
/*
* Gast-Chat + Burger: Drawer liegt unter der Kopfzeile — ohne transparente aeussere Schalen wäre dort nur Weiss (Karte soll durchscheinen).
* Nav / Raster (.index-menu-drawer__nav, __recents-strip) bleiben deckend lesbar.
*/
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview {
background-color: transparent;
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__scrim {
background: transparent !important;
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__sheet {
background: transparent !important;
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__inner {
box-sizing: border-box;
background-color: transparent !important;
padding-top: calc(
var(--ct24-index-chat-top, calc(max(10px, env(safe-area-inset-top)) + var(--ct24-index-top-bar-inner-h, 56px))) +
var(--ct24-index-chat-sheet-nudge-y, 12px) + var(--ct24-index-chat-compose-h, 86px) + 10px
);
}
/* Gleiche Kanten wie Header / Chat-Karte: 12px je Seite + Safe Area */
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__nav-head {
padding-left: max(12px, env(safe-area-inset-left, 0px));
padding-right: max(12px, env(safe-area-inset-right, 0px));
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__recents-strip {
padding-left: max(12px, env(safe-area-inset-left, 0px));
padding-right: max(12px, env(safe-area-inset-right, 0px));
}
/* Bottom-Sheet JS setzt ct24MapDim opacity inline — sonst grauer Vorhang bis unter den Header */
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
#ct24MapDim.ct24-map-dim {
opacity: 0 !important;
pointer-events: none !important;
}
/*
* Chat-Oberkante bei offenem Burger wie „erste Seite“ (ohne zusaetzlichen 12px-Nudge unter der Kopfkante).
*/
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout {
--ct24-index-chat-sheet-nudge-y: 0px;
}
/*
* Menue-Spalte: gleiche effektive Breite/Raender wie Chat (#ct24IndexChatSheetRoot: min(560px, 100vw - safe - 24px)).
* .index-menu-drawer--simple-nav setzt max-width: none !important — gesondert ueberschreiben.
*/
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__nav {
max-width: min(560px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px));
margin-left: auto;
margin-right: auto;
width: 100%;
box-sizing: border-box;
border-radius: var(--ct24-ui-shell-radius-lg);
border: 1.5px solid var(--ct24-ui-accent-ring);
overflow: hidden;
box-shadow: 0 10px 32px rgba(15, 23, 42, 0.12);
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav
.index-menu-drawer__nav {
max-width: min(560px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px)) !important;
margin-left: auto !important;
margin-right: auto !important;
border-radius: var(--ct24-ui-shell-radius-lg) !important;
border: 1.5px solid var(--ct24-ui-accent-ring) !important;
overflow: hidden !important;
box-shadow: 0 10px 32px rgba(15, 23, 42, 0.12) !important;
}
/* Simple-Nav: Gradient auf dem Inner sonst auch in der durchsichtigen Zone sichtbar */
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav
.index-menu-drawer__inner {
background: transparent !important;
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav
.index-menu-drawer__nav-head {
margin-left: 0 !important;
margin-right: 0 !important;
padding: 14px max(12px, env(safe-area-inset-left, 0px)) 14px max(12px, env(safe-area-inset-right, 0px)) !important;
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav
.index-menu-drawer__recents-strip {
padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
}
@media (max-width: 360px) {
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__recents-strip {
padding-left: max(12px, env(safe-area-inset-left, 0px));
padding-right: max(12px, env(safe-area-inset-right, 0px));
}
}
@media (prefers-reduced-transparency: reduce) {
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview {
background-color: #ffffff;
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__scrim {
background: #ffffff !important;
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__sheet {
background: #ffffff !important;
}
body.index-menu-open:not(.ct24-is-buchung-page).ct24-index-chat-float-layout
.index-menu-drawer--android-overview
.index-menu-drawer__inner {
background: #ffffff !important;
}
}
.index-menu-drawer[hidden] {
display: none !important;
}
.index-menu-drawer__scrim {
flex: 1;
min-width: 0;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
/* Voll deckendes Weiss statt halbtransparentem Dunkel-Scrim —
so verschwindet beim Oeffnen des Burger-Panels die Map komplett
aus dem Hintergrund und es bleibt ein sauberer weisser Flaechen-
hintergrund neben dem Drawer. */
background: rgba(15, 23, 42, 0.28);
align-self: stretch;
}
.index-menu-drawer__sheet {
flex: 0 0 auto;
height: 100%;
max-height: 100%;
width: 100vw;
min-width: 0;
max-width: 100vw;
transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
background: var(--ct24-rh-surface, var(--surface));
box-shadow: -14px 0 28px rgba(15, 23, 42, 0.16);
border-top: none;
border-left: 1px solid var(--ct24-rh-border, var(--border));
border-right: none;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
overflow: hidden;
box-sizing: border-box;
margin-left: auto;
}
@keyframes index-menu-sheet-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.index-menu-drawer:not([hidden]) .index-menu-drawer__sheet {
animation: index-menu-sheet-in 0.26s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.index-menu-drawer:not([hidden]) .index-menu-drawer__sheet {
animation: none;
}
}
/* Burger-Menü: Vollbild hell (weiß / Material Light), Raster „Alle Apps“ */
.index-menu-drawer--android-overview {
display: block;
background-color: #ffffff;
color-scheme: light;
}
.index-menu-drawer--android-overview .index-menu-drawer__scrim {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
flex: none;
align-self: auto;
background: #ffffff;
z-index: 0;
}
.index-menu-drawer--android-overview .index-menu-drawer__sheet {
position: absolute;
inset: 0;
left: 0;
right: 0;
width: 100%;
max-width: none;
min-width: 0;
height: 100%;
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
background: #ffffff;
z-index: 1;
pointer-events: none;
transition: none;
animation: none;
}
.index-menu-drawer--android-overview .index-menu-drawer__inner {
pointer-events: auto;
display: flex;
flex-direction: column;
align-items: stretch;
height: 100%;
max-height: 100%;
min-height: 0;
width: 100%;
background-color: #ffffff;
}
.index-menu-drawer--android-overview .index-menu-drawer__android-chrome {
flex-shrink: 0;
}
.index-menu-drawer--android-overview .index-menu-drawer__status-bar {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: calc(4px + env(safe-area-inset-top, 0px)) 16px 4px;
font-family: Roboto, "Segoe UI", system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.03em;
color: #202124;
}
.index-menu-drawer--android-overview .index-menu-drawer__status-trailing {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
opacity: 0.72;
}
.index-menu-drawer--android-overview .index-menu-drawer__gesture-bar {
flex-shrink: 0;
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 16px;
padding-top: 8px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
}
.index-menu-drawer--android-overview .index-menu-drawer__gesture-bar::before {
content: '';
width: 72px;
height: 4px;
border-radius: 999px;
background: rgba(32, 33, 36, 0.26);
}
.index-menu-drawer--android-overview.index-menu-drawer--has-panel .index-menu-drawer__gesture-bar::before {
background: rgba(32, 33, 36, 0.22);
}
.index-menu-drawer--android-overview .index-menu-drawer__nav {
width: 100%;
max-width: none;
min-width: 0;
flex: 1 1 0%;
min-height: 0;
padding: 0;
background: #ffffff;
color: #202124;
overflow-x: hidden;
/* Scroll nur im Recents-Strip — sonst frisst die Nav das Wischen / kein klares scrollTarget */
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
font-family: Roboto, "Segoe UI", system-ui, sans-serif;
}
.index-menu-drawer--android-overview .index-menu-drawer__nav-head {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
min-height: 56px;
padding: 8px 8px 8px 16px;
margin: 0;
border-bottom: none;
}
.index-menu-drawer--android-overview .index-menu-drawer__title {
margin: 0;
color: #202124;
font-size: 22px;
font-weight: 400;
line-height: 28px;
letter-spacing: 0;
}
.index-menu-drawer--android-overview .index-menu-drawer__nav-close {
flex-shrink: 0;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border: none;
border-radius: 24px;
background: transparent;
box-shadow: none;
color: #202124;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.index-menu-drawer--android-overview .index-menu-drawer__nav-close:hover {
background: rgba(32, 33, 36, 0.06);
}
.index-menu-drawer--android-overview .index-menu-drawer__nav-close:active {
background: rgba(32, 33, 36, 0.1);
}
.index-menu-drawer--android-overview .index-menu-push-row {
background: transparent;
border: none;
box-shadow: none;
padding: 8px 0;
}
.index-menu-drawer--android-overview .index-menu-push-row__label {
color: #5f6368;
font-size: 12px;
font-weight: 400;
}
.index-menu-drawer--android-overview .index-menu-push-row__status {
color: #202124;
font-size: 14px;
}
.index-menu-drawer--android-overview .index-menu-push-row__btn {
box-shadow: none !important;
border-radius: 20px;
font-family: inherit;
font-weight: 500;
}
/* App-Bereich: eine Ebene wie Android — kein „Rahmen“, kein Schlagschatten */
.index-menu-drawer--android-overview .index-menu-drawer__recents-book {
display: flex;
flex-direction: column;
flex: 1 1 0%;
min-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
background: #ffffff;
border: none;
box-shadow: none;
}
/* „Alle Apps“: runde Launcher-Icons; 16 px Keyline + Raster wie Pixel */
.index-menu-drawer--android-overview .index-menu-drawer__recents-arrow {
display: none !important;
}
.index-menu-drawer--android-overview .index-menu-drawer__recents-strip {
flex: 1 1 0%;
min-height: 0;
max-height: 100%;
overscroll-behavior-y: contain;
perspective: none;
transform-style: flat;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
row-gap: 32px;
align-items: start;
justify-items: stretch;
padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
scroll-snap-type: none;
touch-action: pan-y;
background: #ffffff;
}
@media (max-width: 360px) {
.index-menu-drawer--android-overview .index-menu-drawer__recents-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 16px;
row-gap: 28px;
padding-inline: 16px;
}
}
.index-menu-drawer--android-overview .index-menu-recents-slide {
scroll-snap-align: none;
scroll-snap-stop: normal;
width: 100%;
max-width: none;
justify-self: stretch;
padding: 0;
margin: 0;
}
.index-menu-drawer--android-overview .index-menu-recents-slide--group:has(.index-menu-nav-group.is-open) {
grid-column: 1 / -1;
}
.index-menu-drawer--android-overview .index-menu-recents-preview {
display: none !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide__page {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
align-items: center;
transform: none !important;
opacity: 1 !important;
}
/* Unterpunkte nach Ordner-Öffnung — Listenzeilen wie Material */
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn--sub {
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
max-width: none;
min-height: 48px;
padding: 0 16px;
margin: 0;
border-radius: 24px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #202124 !important;
font-family: inherit;
font-size: 14px;
font-weight: 400;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn--sub:active {
background: rgba(32, 33, 36, 0.08) !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn--sub.is-active {
background: rgba(32, 33, 36, 0.06) !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn--sub .index-menu-nav-btn__label {
flex: none !important;
color: inherit !important;
font-size: inherit !important;
text-align: left !important;
font-weight: 400 !important;
}
/* App-Zellen: rundes Launcher-Icon + Beschriftung */
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub) {
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
width: 100%;
max-width: none;
min-height: 0 !important;
margin: 0;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
color: #202124 !important;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub):focus-visible {
outline: 2px solid #1967d2;
outline-offset: 2px;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub):active {
background: rgba(32, 33, 36, 0.06) !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub).is-active {
background: rgba(32, 33, 36, 0.04) !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub) .index-menu-nav-btn__caret {
display: none !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub) .index-menu-nav-btn__icon {
flex-shrink: 0 !important;
box-sizing: border-box !important;
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
overflow: hidden !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 28px !important;
line-height: 1 !important;
font-family: inherit !important;
background: #5f6368 !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub) .index-menu-nav-btn__icon > i {
color: #fff;
font-size: 0.82em;
line-height: 1;
}
/* Launcher-Kacheln: flache App-Farben (ohne Rand/Schatten — nativer Look) */
.index-menu-drawer--android-overview .index-menu-nav-btn--app-booking .index-menu-nav-btn__icon {
background: #188038 !important;
}
.index-menu-drawer--android-overview .index-menu-nav-btn--app-wallet .index-menu-nav-btn__icon {
background: #7c2cbf !important;
}
.index-menu-drawer--android-overview .index-menu-nav-btn--app-profil .index-menu-nav-btn__icon {
background: #1967d2 !important;
}
.index-menu-drawer--android-overview .index-menu-nav-btn--app-ticket .index-menu-nav-btn__icon {
background: #e8710a !important;
}
.index-menu-drawer--android-overview .index-menu-nav-btn--app-fahrten .index-menu-nav-btn__icon {
background: #0f766e !important;
}
.index-menu-drawer--android-overview .index-menu-nav-btn--app-logout .index-menu-nav-btn__icon {
background: #c5221f !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub) .index-menu-nav-btn__label,
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-group__label {
flex: none !important;
width: 100% !important;
margin: 10px 0 0 !important;
padding: 0 4px !important;
display: block !important;
text-align: center !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
letter-spacing: 0.02em !important;
color: #3c4043 !important;
text-shadow: none !important;
overflow-wrap: break-word;
word-break: break-word;
-webkit-font-smoothing: antialiased;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-group__toggle {
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
width: 100%;
max-width: none;
margin: 0;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
color: #202124 !important;
font-family: inherit;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-group__toggle:active {
background: rgba(32, 33, 36, 0.06) !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-group__icon {
flex-shrink: 0 !important;
box-sizing: border-box !important;
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
margin: 0 auto !important;
padding: 0 !important;
border-radius: 50% !important;
overflow: hidden !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 28px !important;
line-height: 1 !important;
font-family: inherit !important;
background: #5f6368 !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-group__icon > i {
color: #fff;
font-size: 0.82em;
line-height: 1;
}
.index-menu-drawer--android-overview .index-menu-nav-group--app-settings .index-menu-nav-group__icon {
background: #80868b !important;
}
.index-menu-drawer--android-overview .index-menu-nav-group--app-help .index-menu-nav-group__icon {
background: #1290c0 !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-group.is-open .index-menu-nav-group__toggle {
background: rgba(32, 33, 36, 0.04) !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-group__chev {
display: none !important;
}
.index-menu-drawer--android-overview .index-menu-recents-slide .index-menu-nav-group__body:not([hidden]) {
margin-top: 12px;
width: 100%;
max-width: min(400px, 100%);
margin-left: auto;
margin-right: auto;
padding: 0;
border: none;
gap: 4px;
display: flex;
flex-direction: column;
}
/* Burger-Menü: moderne Liste (Karten-Zeilen, weiches Licht-UI) */
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__inner {
background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 48%, #eef2f7 100%);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__nav {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
display: flex !important;
flex-direction: column !important;
flex: 1 1 0% !important;
min-height: 0 !important;
width: 100% !important;
max-width: none !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__android-chrome,
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__gesture-bar {
display: none !important;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__nav-head {
padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
margin: 0 12px 4px;
flex-shrink: 0 !important;
border-bottom: none;
background: #ffffff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 16px;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__title {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.035em;
color: #0f172a;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__nav-close {
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.06);
color: #334155;
font-size: 1.35rem;
transition: background 0.18s ease, transform 0.15s ease;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__nav-close:hover {
background: rgba(15, 23, 42, 0.1);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__nav-close:active {
transform: scale(0.96);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__recents-book {
flex: 1 1 0% !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
padding-top: 6px;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-drawer__recents-strip {
display: flex;
flex-direction: column;
flex: 1 1 0% !important;
min-height: 0 !important;
grid-template-columns: none;
row-gap: 10px;
column-gap: 0;
padding: 8px 14px calc(20px + env(safe-area-inset-bottom, 0px));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Launcher-Zeilen als Klapp-Karten (einheitlich mit Fahrten / Wallet / …) */
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-launcher-folder {
flex-shrink: 0;
align-self: stretch;
width: 100%;
max-width: none;
box-sizing: border-box;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
overflow: hidden;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-launcher-folder .index-menu-recents-slide {
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
align-self: stretch !important;
width: 100% !important;
align-items: stretch !important;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-launcher-fold {
border-top: 1px solid rgba(15, 23, 42, 0.08);
max-height: min(62vh, 560px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: rgba(248, 250, 252, 0.72);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-launcher-fold__pad {
padding: 12px 14px 16px;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-fold-lead {
margin: 0 0 12px;
font-size: 0.9rem;
line-height: 1.45;
color: #64748b;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav
.index-menu-launcher-fold--panel
.index-menu-drawer__panel.index-menu-drawer__panel--launcher-fold {
padding: 12px 14px 18px;
margin: 0;
border-radius: 0;
box-shadow: none;
border: none;
background: transparent;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-launcher-folder.is-open .index-menu-nav-btn__caret .fa-caret-down {
transform: rotate(180deg);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-nav-btn__caret .fa-caret-down {
transition: transform 0.22s ease;
}
/* Burger-Menü: Fahrten-Rail (aktiv / weitere offen / Archiv) */
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail {
flex-shrink: 0;
margin: 0 0 10px;
padding: 14px 14px 16px;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}
/* Fahrten-Inhalt innerhalb aufklappbarem Bereich */
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail.index-menu-trips-rail--in-fold {
margin: 0;
border-radius: 0;
border: none;
box-shadow: none;
background: transparent;
padding: 12px 14px 16px;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail__block {
margin-bottom: 14px;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail__block:last-child {
margin-bottom: 0;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail__block--secondary {
padding-top: 12px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail__heading {
margin: 0 0 10px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail__empty {
margin: 0;
font-size: 0.9rem;
line-height: 1.45;
color: #64748b;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail__hint {
margin: 10px 0 0;
font-size: 0.82rem;
line-height: 1.35;
color: #94a3b8;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-item {
width: 100%;
margin: 0;
padding: 12px 14px;
border: none;
border-radius: 12px;
text-align: left;
font: inherit;
cursor: pointer;
background: rgba(241, 245, 249, 0.85);
color: #0f172a;
transition: background 0.18s ease, transform 0.15s ease;
box-sizing: border-box;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-item:active {
transform: scale(0.99);
background: rgba(226, 232, 240, 0.95);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-item--hero {
background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
border: 1px solid rgba(59, 130, 246, 0.22);
box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-item--muted {
opacity: 0.94;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-item__status {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #2563eb;
margin-bottom: 6px;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-item--muted .index-menu-trips-item__title {
font-weight: 600;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-item__title {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #0f172a;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-item__meta {
margin-top: 4px;
font-size: 0.82rem;
line-height: 1.35;
color: #475569;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-item__cta {
margin-top: 8px;
font-size: 0.78rem;
font-weight: 600;
color: #2563eb;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-trips-rail--flash {
animation: ct24-index-menu-trips-rail-flash 1.25s ease-out;
}
@keyframes ct24-index-menu-trips-rail-flash {
0% {
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}
35% {
box-shadow:
0 0 0 3px rgba(13, 148, 136, 0.35),
0 8px 28px rgba(15, 23, 42, 0.12);
}
100% {
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide {
width: 100%;
max-width: none;
align-self: stretch !important;
align-items: stretch !important;
flex-shrink: 0;
border-bottom: none;
border-radius: 16px;
overflow-x: hidden;
overflow-y: visible;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide__page {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
flex-direction: row;
align-items: stretch;
justify-content: stretch;
min-height: 0;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide--group:has(.index-menu-nav-group.is-open) {
grid-column: unset;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub) {
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 14px !important;
width: 100%;
min-height: 54px !important;
padding: 12px 16px !important;
border-radius: 0 !important;
transition: background 0.18s ease;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub):active {
background: rgba(0, 0, 0, 0.045) !important;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub) .index-menu-nav-btn__icon {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
border-radius: 12px !important;
font-size: 18px !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub) .index-menu-nav-btn__label {
flex: 1 1 auto !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: -0.02em;
text-align: left !important;
line-height: 1.25 !important;
color: #0f172a !important;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-btn:not(.index-menu-nav-btn--sub) .index-menu-nav-btn__caret {
display: flex !important;
align-items: center;
opacity: 0.38;
margin-left: 4px;
color: #64748b;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-group__toggle {
flex-direction: row !important;
align-items: center !important;
width: 100%;
min-height: 54px !important;
padding: 12px 16px !important;
gap: 14px !important;
margin: 0 !important;
border-radius: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
transition: background 0.18s ease;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-group__toggle:active {
background: rgba(0, 0, 0, 0.045) !important;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-group__icon {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
border-radius: 12px !important;
font-size: 18px !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-group__label {
flex: 1 1 auto !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: -0.02em;
text-align: left !important;
color: #0f172a !important;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-group__chev {
display: flex !important;
align-items: center;
justify-content: center;
margin-left: auto;
opacity: 0.55;
color: #8e8e93;
transition: transform 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-group.is-open .index-menu-nav-group__chev {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-group__chev {
transition: none;
}
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-group__body:not([hidden]) {
margin-top: 0;
margin-left: 0;
margin-right: 0;
max-width: none;
padding: 0;
gap: 0;
border-top: 0.5px solid rgba(60, 60, 67, 0.29);
background: #efeff4;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-btn--sub {
min-height: 44px !important;
padding: 11px 16px 11px 56px !important;
border-radius: 0 !important;
margin: 0 !important;
font-weight: 400 !important;
font-size: 17px !important;
letter-spacing: -0.022em;
color: #000 !important;
border-bottom: 0.5px solid rgba(60, 60, 67, 0.29);
background: transparent !important;
transition: background 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-btn--sub:last-child {
border-bottom: none;
}
.index-menu-drawer--android-overview.index-menu-drawer--simple-nav .index-menu-recents-slide .index-menu-nav-btn--sub:active {
background: rgba(0, 0, 0, 0.06) !important;
}
/* Detail: volle Fläche, Nav ausblenden */
.index-menu-drawer--android-overview.index-menu-drawer--has-panel .index-menu-drawer__nav {
display: none;
}
.index-menu-drawer--android-overview.index-menu-drawer--has-panel .index-menu-drawer__content {
position: relative;
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: none;
min-width: 0;
border: none;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
background: #ffffff;
color: var(--ct24-rh-text, #0f172a);
}
.index-menu-drawer__panel-topbar {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
padding: calc(8px + env(safe-area-inset-top)) 12px 12px 8px;
background: rgba(248, 250, 252, 0.98);
border-bottom: 1px solid rgba(15, 23, 42, 0.1);
box-sizing: border-box;
}
.index-menu-drawer__panel-topbar[hidden] {
display: none !important;
}
.index-menu-drawer__panel-back {
flex-shrink: 0;
width: 44px;
height: 44px;
border: none;
border-radius: 999px;
background: transparent;
color: #0f172a;
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
}
.index-menu-drawer__panel-back:hover {
background: rgba(15, 23, 42, 0.06);
}
.index-menu-drawer__panel-back:active {
opacity: 0.88;
}
.index-menu-drawer__panel-topbar-title {
flex: 1 1 auto;
margin: 0;
min-width: 0;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ct24-rh-text, #0f172a);
line-height: 1.2;
padding-right: 44px;
box-sizing: border-box;
}
.index-menu-drawer--android-overview.index-menu-drawer--has-panel .index-menu-drawer__panel {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 14px 14px max(22px, env(safe-area-inset-bottom));
box-sizing: border-box;
border-radius: var(--ct24-ui-shell-radius-lg);
border: 1.5px solid var(--ct24-ui-accent-ring);
background: var(--ct24-rh-surface, #fff);
}
.index-menu-drawer--android-overview.index-menu-drawer--has-panel
.index-menu-drawer__panel
> .index-menu-drawer__panel-title:first-child {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.index-menu-drawer--has-panel .index-menu-drawer__sheet {
max-width: 100vw;
}
.index-menu-drawer__inner {
display: flex;
flex-direction: row-reverse;
align-items: stretch;
height: auto;
max-height: 100%;
min-height: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.index-menu-drawer__nav {
flex: 0 0 auto;
/* Nav-Spalte: genug Breite + Zeilenumbruch in Labels, damit lange
deutsche Menütexte nicht mit … abgeschnitten werden. */
width: clamp(15.5rem, 58vw, 26rem);
min-width: 14.5rem;
max-width: min(26rem, 92vw);
display: flex;
flex-direction: column;
gap: 10px;
padding: max(18px, env(safe-area-inset-top)) 12px max(22px, env(safe-area-inset-bottom));
background: var(--ct24-rh-surface, #ffffff);
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Menü: offenes „Buch“ + Mini-Screen-Vorschau pro Seite + Recent-Apps-3D beim Wischen */
.index-menu-drawer__recents-book {
flex: 1 1 auto;
min-height: 0;
margin: 6px 0 0;
padding: 16px 12px 20px;
border-radius: 22px;
background: linear-gradient(165deg, #f3e9d7 0%, #e8dcc8 42%, #dccfaf 100%);
box-shadow:
inset 0 2px 16px rgba(90, 70, 40, 0.12),
inset 0 -1px 0 rgba(255, 255, 255, 0.45),
0 8px 24px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(120, 95, 60, 0.18);
box-sizing: border-box;
position: relative;
}
/* Kein zweites ::after-Overlay: wirkte optisch wie doppelter Hintergrund über dem Buch-Gradient. */
.index-menu-drawer__recents-book::after {
content: none;
display: none;
}
.index-menu-drawer__recents-arrow {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.18);
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 3;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
cursor: pointer;
transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.index-menu-drawer__recents-arrow--up {
top: 10px;
}
.index-menu-drawer__recents-arrow--down {
bottom: 10px;
}
.index-menu-drawer__recents-arrow:hover {
background: #ffffff;
}
.index-menu-drawer__recents-arrow:active {
transform: translateX(-50%) scale(0.95);
}
.index-menu-drawer__recents-arrow:disabled {
opacity: 0.34;
cursor: default;
}
.index-menu-drawer__recents-arrow i {
font-size: 13px;
}
.index-menu-drawer__recents-strip {
flex: 1 1 auto;
min-height: min(280px, 46vh);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-type: y mandatory;
scroll-padding-block: 12px;
padding: 44px 10px;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
scrollbar-width: none;
-ms-overflow-style: none;
position: relative;
z-index: 1;
transform-style: preserve-3d;
perspective: 1100px;
perspective-origin: 50% 45%;
}
.index-menu-drawer__recents-strip::-webkit-scrollbar {
display: none;
height: 0;
}
.index-menu-recents-slide {
flex: 0 0 auto;
width: 100%;
max-width: none;
scroll-snap-align: start;
scroll-snap-stop: always;
box-sizing: border-box;
padding: 0 0 4px;
display: flex;
flex-direction: column;
align-items: center;
background: transparent;
border: none;
box-shadow: none;
}
.index-menu-recents-slide__page {
width: min(300px, calc(100% - 8px));
border-radius: 20px;
padding: 11px 10px 12px;
background: linear-gradient(180deg, #fffefc 0%, #f4f6f9 48%, #eceff3 100%);
box-shadow:
0 12px 32px rgba(15, 23, 42, 0.16),
0 2px 10px rgba(15, 23, 42, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border: 1px solid rgba(15, 23, 42, 0.09);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
transform-style: preserve-3d;
backface-visibility: hidden;
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
will-change: transform, opacity;
}
/* Mini-Screen-Vorschau (wie App-Thumbnails) */
.index-menu-recents-preview {
margin-bottom: 10px;
flex-shrink: 0;
}
.index-menu-recents-preview__screen {
position: relative;
aspect-ratio: 10 / 15;
max-height: 168px;
margin: 0 auto;
border-radius: 14px;
overflow: hidden;
background: #0f172a;
border: 1px solid rgba(15, 23, 42, 0.2);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.2);
}
.index-menu-recents-preview__chrome {
height: 13%;
min-height: 22px;
background: linear-gradient(90deg, rgba(55, 168, 0, 0.95), rgba(14, 165, 233, 0.88));
}
.index-menu-recents-preview__chrome--wash {
background: linear-gradient(90deg, #64748b, #94a3b8);
}
.index-menu-recents-preview__map {
position: absolute;
left: 8%;
right: 8%;
top: 22%;
bottom: 22%;
border-radius: 10px;
background:
linear-gradient(145deg, rgba(34, 197, 94, 0.35) 0%, transparent 50%),
linear-gradient(210deg, rgba(14, 165, 233, 0.3) 30%, rgba(15, 23, 42, 0.5) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.index-menu-recents-preview__pin {
position: absolute;
left: 52%;
top: 44%;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.index-menu-recents-preview__footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 16%;
background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.85));
}
.index-menu-recents-preview__screen--wallet .index-menu-recents-preview__chrome {
background: linear-gradient(90deg, #15803d, #37a800);
}
.index-menu-recents-preview__wallet-card {
position: absolute;
left: 9%;
right: 9%;
top: 22%;
bottom: 28%;
border-radius: 12px;
background: linear-gradient(160deg, #f8fafc, #e2e8f0);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid rgba(15, 23, 42, 0.1);
}
.index-menu-recents-preview__eur {
font-size: 1.75rem;
font-weight: 900;
color: #15803d;
line-height: 1;
}
.index-menu-recents-preview__lines {
display: block;
width: 64%;
height: 5px;
border-radius: 3px;
background: rgba(15, 23, 42, 0.12);
}
.index-menu-recents-preview__screen--profil .index-menu-recents-preview__chrome {
background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
.index-menu-recents-preview__avatar {
position: absolute;
left: 50%;
top: 26%;
width: 26%;
aspect-ratio: 1;
border-radius: 50%;
transform: translateX(-50%);
background: linear-gradient(145deg, #c4b5fd, #7c3aed);
border: 2px solid rgba(255, 255, 255, 0.35);
}
.index-menu-recents-preview__line {
position: absolute;
left: 10%;
height: 5px;
border-radius: 3px;
background: rgba(248, 250, 252, 0.35);
}
.index-menu-recents-preview__line--w55 {
width: 55%;
bottom: 18%;
}
.index-menu-recents-preview__line--w60 {
width: 60%;
bottom: 26%;
}
.index-menu-recents-preview__screen--ticket .index-menu-recents-preview__line--w70 {
width: 70%;
top: auto;
bottom: 14%;
}
.index-menu-recents-preview__line--w80 {
width: 80%;
top: 60%;
}
.index-menu-recents-preview__line--w85 {
width: 85%;
bottom: 30%;
}
.index-menu-recents-preview__line--w90 {
width: 90%;
top: 68%;
}
.index-menu-recents-preview__screen--ticket .index-menu-recents-preview__chrome {
background: linear-gradient(90deg, #b45309, #ea580c);
}
.index-menu-recents-preview__screen--fahrten .index-menu-recents-preview__chrome {
background: linear-gradient(90deg, #0f766e, #14b8a6);
}
.index-menu-recents-preview__screen--fahrten .index-menu-recents-preview__line--w80 {
top: 42%;
}
.index-menu-recents-preview__screen--fahrten .index-menu-recents-preview__line--w55 {
bottom: auto;
top: 54%;
}
.index-menu-recents-preview__screen--fahrten .index-menu-recents-preview__line--w85 {
bottom: 14%;
top: auto;
}
.index-menu-recents-preview__ticket-stub {
position: absolute;
left: 10%;
right: 10%;
top: 26%;
height: 38%;
border-radius: 8px;
border: 2px dashed rgba(251, 191, 36, 0.6);
background: rgba(254, 243, 199, 0.15);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 12%;
}
.index-menu-recents-preview__ticket-hole {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.5);
}
.index-menu-recents-preview__screen--settings .index-menu-recents-preview__chrome {
background: linear-gradient(90deg, #475569, #64748b);
}
.index-menu-recents-preview__screen--settings .index-menu-recents-preview__row-toggle:nth-child(2) {
top: 22%;
}
.index-menu-recents-preview__screen--settings .index-menu-recents-preview__row-toggle:nth-child(3) {
top: 36%;
}
.index-menu-recents-preview__screen--settings .index-menu-recents-preview__row-toggle:nth-child(4) {
top: 50%;
}
.index-menu-recents-preview__screen--help .index-menu-recents-preview__chrome {
background: linear-gradient(90deg, #0369a1, #0ea5e9);
}
.index-menu-recents-preview__help-bubble {
position: absolute;
left: 50%;
top: 28%;
transform: translateX(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: #0369a1;
font-weight: 900;
font-size: 1.15rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.index-menu-recents-preview__screen--help .index-menu-recents-preview__line--w85 {
top: auto;
bottom: 22%;
}
.index-menu-recents-preview__screen--help .index-menu-recents-preview__line--w55 {
top: auto;
bottom: 13%;
}
.index-menu-recents-preview__screen--logout .index-menu-recents-preview__door {
position: absolute;
left: 22%;
right: 22%;
top: 26%;
bottom: 22%;
border-radius: 8px 8px 4px 4px;
border: 3px solid rgba(248, 250, 252, 0.45);
background: linear-gradient(180deg, rgba(185, 28, 28, 0.35), rgba(15, 23, 42, 0.5));
box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.25);
}
.index-menu-recents-slide--group {
align-self: flex-start;
}
.index-menu-recents-slide .index-menu-nav-group {
width: 100%;
margin: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.index-menu-recents-slide .index-menu-nav-group__toggle {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
min-height: 76px;
padding: 10px 10px;
border-radius: 14px;
gap: 6px;
}
.index-menu-recents-slide .index-menu-nav-group__icon {
margin-right: 0 !important;
margin-bottom: 4px;
font-size: 1.45rem;
width: auto;
}
.index-menu-recents-slide .index-menu-nav-group__label {
text-align: center;
line-height: 1.25;
font-size: 0.9rem;
}
.index-menu-recents-slide .index-menu-nav-group__chev {
margin: 2px 0 0;
}
.index-menu-recents-slide .index-menu-nav-group__body {
margin-top: 8px;
flex: 1 1 auto;
overflow-y: auto;
max-height: 140px;
-webkit-overflow-scrolling: touch;
}
.index-menu-recents-slide .index-menu-nav-btn {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
min-height: 76px;
height: auto;
padding: 10px 10px 12px;
border-radius: 14px;
}
.index-menu-recents-slide .index-menu-nav-btn__icon {
margin-right: 0 !important;
margin-bottom: 8px;
font-size: 1.45rem;
width: auto;
}
.index-menu-recents-slide .index-menu-nav-btn__label {
text-align: center;
line-height: 1.3;
font-size: 0.88rem;
}
.index-menu-recents-slide .index-menu-nav-btn__caret {
transform: none;
margin: 6px 0 0;
align-self: center;
}
.index-menu-recents-slide .index-menu-nav-btn--sub {
flex-direction: row;
justify-content: flex-start;
text-align: left;
min-height: 44px;
padding: 8px 10px;
border-radius: 12px;
font-size: 0.85rem;
}
.index-menu-recents-slide .index-menu-nav-btn--sub .index-menu-nav-btn__label {
text-align: left;
}
@media (prefers-reduced-motion: reduce) {
.index-menu-drawer__recents-strip {
scroll-snap-type: none;
}
.index-menu-recents-slide__page {
transition: none;
}
}
.index-menu-drawer__nav-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--ct24-rh-border-subtle, var(--border));
}
.index-menu-drawer__title {
margin: 0;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ct24-rh-text, var(--navy));
line-height: 1.2;
}
.index-menu-drawer__nav-close {
flex-shrink: 0;
width: 40px;
height: 40px;
border: none;
border-radius: 999px;
background: var(--ct24-rh-control-bg, #e2e8f0);
color: var(--ct24-rh-text-secondary, var(--navy));
font-size: 22px;
font-weight: 500;
line-height: 1;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.index-menu-drawer__nav-close:hover {
background: var(--ct24-rh-control-bg-hover, #e2e8f0);
}
.index-menu-drawer__nav-close:active {
opacity: 0.92;
}
.index-menu-push-row {
margin: 0 0 10px;
padding: 12px 12px 12px;
border-radius: 14px;
background: var(--ct24-rh-surface-elevated, #f8fafc);
border: 1px solid var(--ct24-rh-border-subtle, var(--border));
box-shadow: var(--ct24-rh-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.index-menu-push-row__head {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 8px;
}
.index-menu-push-row__label {
font-size: 11px;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.index-menu-push-row__status {
font-size: 12px;
font-weight: 800;
color: var(--ct24-rh-text, var(--navy));
line-height: 1.35;
word-break: break-word;
}
.index-menu-push-row__btn {
width: 100%;
padding: 11px 14px;
border-radius: 999px;
border: none;
background: var(--ct24-rh-accent, #37a800);
font-size: 13px;
font-weight: 700;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 14px rgba(55, 168, 0, 0.28);
-webkit-tap-highlight-color: transparent;
transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.index-menu-push-row__btn:hover {
filter: brightness(1.04);
}
.index-menu-push-row__btn:disabled {
opacity: 0.65;
cursor: wait;
}
.index-fahrgast-push-alert-select {
width: 100%;
margin-top: 4px;
margin-bottom: 2px;
padding: 9px 10px;
border-radius: 10px;
border: 1px solid var(--border);
font: inherit;
font-size: 12px;
font-weight: 800;
color: var(--navy);
background: #fff;
box-sizing: border-box;
cursor: pointer;
}
.index-fahrgast-push-alert-select:focus-visible {
outline: 2px solid var(--ct24-accent);
outline-offset: 2px;
}
/* Kurzer Hinweis bei Web-Push (Index), über Karte/Menü */
.ct24-fahrgast-push-overlay {
position: fixed;
inset: 0;
z-index: 58;
display: flex;
align-items: flex-start;
justify-content: center;
padding: max(76px, env(safe-area-inset-top)) 16px 24px;
pointer-events: auto;
background: rgba(15, 23, 42, 0.42);
box-sizing: border-box;
animation: ct24-fahrgast-push-overlay-in 0.22s ease-out;
}
@keyframes ct24-fahrgast-push-overlay-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.ct24-fahrgast-push-overlay__card {
position: relative;
width: 100%;
max-width: min(420px, calc(100vw - 32px));
padding: 16px 40px 16px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
box-sizing: border-box;
}
.ct24-fahrgast-push-overlay__close {
position: absolute;
top: 8px;
right: 8px;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border: none;
border-radius: 10px;
background: rgba(241, 245, 249, 0.95);
color: var(--navy);
font-size: 22px;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.ct24-fahrgast-push-overlay__close:hover {
background: #e2e8f0;
}
.ct24-fahrgast-push-overlay__title {
margin: 0 0 8px;
font-size: 1.05rem;
font-weight: 800;
color: var(--navy);
line-height: 1.25;
padding-right: 4px;
}
.ct24-fahrgast-push-overlay__body {
margin: 0;
font-size: 0.92rem;
font-weight: 600;
color: #334155;
line-height: 1.45;
word-break: break-word;
}
/* Menü-Nav: Uber / Bolt / Free Now — neutrale Zeilen, Icon links, Label, dezenter Chevron */
.index-menu-drawer__nav .index-menu-nav-btn {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-width: 0;
min-height: 52px;
height: auto;
border: 1px solid var(--ct24-rh-border-subtle, rgba(15, 23, 42, 0.06));
border-radius: 12px;
color: var(--ct24-rh-text, #0f172a);
background: var(--ct24-rh-surface-elevated, #f8fafc);
font-size: 15px;
font-weight: 600;
box-shadow: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
line-height: 1.25;
text-align: left;
padding: 11px 12px 11px 12px;
gap: 0;
box-sizing: border-box;
transition: background 0.15s ease, border-color 0.15s ease;
}
.index-menu-drawer__nav .index-menu-nav-btn:hover {
background: var(--ct24-rh-control-bg-hover, #e2e8f0);
border-color: var(--ct24-rh-border, rgba(15, 23, 42, 0.09));
}
.index-menu-drawer__nav .index-menu-nav-btn:active {
background: var(--ct24-rh-control-bg, #f1f5f9);
}
.index-menu-drawer__nav .index-menu-nav-btn.is-active {
background: rgba(55, 168, 0, 0.09);
border-color: rgba(55, 168, 0, 0.22);
color: var(--ct24-rh-text, #0f172a);
}
.index-menu-drawer__nav .index-menu-nav-btn.is-active .index-menu-nav-btn__icon {
color: var(--ct24-rh-accent, #37a800);
}
.index-menu-drawer__nav .index-menu-nav-btn__icon {
flex-shrink: 0;
width: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
line-height: 1;
margin-right: 12px;
margin-top: 0;
color: var(--ct24-rh-text-secondary, #475569);
}
.index-menu-drawer__nav .index-menu-nav-btn__icon i {
pointer-events: none;
}
.index-menu-drawer__nav .index-menu-nav-btn__label {
flex: 1 1 auto;
min-width: 0;
text-align: left;
font-weight: 600;
white-space: normal;
overflow: visible;
text-overflow: unset;
line-height: 1.3;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
.index-menu-drawer__nav .index-menu-nav-btn__caret {
flex-shrink: 0;
align-self: center;
margin-left: 8px;
margin-right: 0;
font-size: 0.75rem;
line-height: 1;
color: var(--ct24-rh-text-tertiary, #64748b);
opacity: 0.85;
transform: rotate(-90deg);
}
.index-menu-drawer__nav .index-menu-nav-btn__caret i {
pointer-events: none;
}
.index-menu-drawer__nav .index-menu-nav-btn--danger {
background: rgba(185, 28, 28, 0.06);
border-color: rgba(185, 28, 28, 0.15);
color: #b91c1c;
}
.index-menu-drawer__nav .index-menu-nav-btn--danger .index-menu-nav-btn__icon {
color: #b91c1c;
}
.index-menu-drawer__nav .index-menu-nav-btn--danger:hover {
background: rgba(185, 28, 28, 0.1);
border-color: rgba(185, 28, 28, 0.22);
}
.index-menu-drawer__nav .index-menu-nav-btn--danger.is-active {
background: rgba(185, 28, 28, 0.12);
border-color: rgba(185, 28, 28, 0.28);
color: #991b1b;
}
@media (prefers-reduced-motion: reduce) {
.index-menu-drawer__nav .index-menu-nav-btn,
.index-menu-drawer__nav-close {
transition: none;
}
}
.index-menu-drawer__nav .index-menu-nav-btn:focus-visible {
outline: 2px solid var(--ct24-rh-accent, #37a800);
outline-offset: 2px;
}
.index-menu-drawer__nav .index-menu-nav-btn--danger:focus-visible {
outline-color: #b91c1c;
}
/* Aufklapp-Gruppen (Einstellungen / Hilfe) — Dropdown in der linken Menüspalte */
.index-menu-drawer__nav .index-menu-nav-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.index-menu-drawer__nav .index-menu-nav-group__toggle {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 52px;
padding: 11px 12px;
gap: 0;
box-sizing: border-box;
border: 1px solid var(--ct24-rh-border-subtle, rgba(15, 23, 42, 0.06));
border-radius: 12px;
background: var(--ct24-rh-surface-elevated, #f8fafc);
color: var(--ct24-rh-text, #0f172a);
font-size: 15px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, border-color 0.15s ease;
}
.index-menu-drawer__nav .index-menu-nav-group__toggle:hover {
background: var(--ct24-rh-control-bg-hover, #e2e8f0);
border-color: var(--ct24-rh-border, rgba(15, 23, 42, 0.09));
}
.index-menu-drawer__nav .index-menu-nav-group__icon {
flex-shrink: 0;
width: 2rem;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 1.1rem;
color: var(--ct24-rh-text-secondary, #475569);
}
.index-menu-drawer__nav .index-menu-nav-group__label {
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
.index-menu-drawer__nav .index-menu-nav-group__chev {
flex-shrink: 0;
margin-left: 8px;
font-size: 0.7rem;
color: var(--ct24-rh-text-tertiary, #64748b);
opacity: 0.85;
transition: transform 0.2s ease;
}
.index-menu-drawer__nav .index-menu-nav-group.is-open .index-menu-nav-group__chev {
transform: rotate(180deg);
}
/* hidden-Attribut muss gewinnen: sonst überschreibt display:flex die UA-Regel und die Gruppe wirkt immer offen */
.index-menu-drawer__nav .index-menu-nav-group__body[hidden] {
display: none !important;
}
.index-menu-drawer__nav .index-menu-nav-group__body:not([hidden]) {
display: flex;
flex-direction: column;
gap: 4px;
padding: 2px 0 4px 0.35rem;
margin-left: 0.5rem;
border-left: 2px solid var(--ct24-rh-border-subtle, rgba(15, 23, 42, 0.08));
}
.index-menu-drawer__nav .index-menu-nav-btn--sub {
min-height: 44px !important;
padding: 10px 12px 10px 14px !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.index-menu-drawer__nav .index-menu-nav-btn--sub .index-menu-nav-btn__label {
font-weight: 600 !important;
}
@media (prefers-reduced-motion: reduce) {
.index-menu-drawer__nav .index-menu-nav-group__chev {
transition: none;
}
}
.index-menu-payment-methods {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
width: 100%;
margin-top: 4px;
box-sizing: border-box;
background: #e5e7eb;
border-radius: 14px;
padding: 0;
overflow: hidden;
}
.index-menu-payment-methods .booking-payment-btn {
width: 100%;
min-width: 0;
border-radius: 0;
}
.index-menu-payment-methods .booking-payment-btn:first-child {
border-radius: 14px 0 0 14px;
}
.index-menu-payment-methods .booking-payment-btn:last-child {
border-radius: 0 14px 14px 0;
}
.index-menu-item--logout {
margin-top: 16px;
background: #b91c1c;
color: #fff;
}
.index-menu-item--logout:hover {
filter: brightness(1.03);
}
.index-menu-item--logout:active {
opacity: 0.94;
}
.index-menu-drawer__content {
flex: 1 1 auto;
min-width: min(13rem, 52vw);
max-width: min(28rem, calc(100vw - 10.25rem));
overflow-y: auto;
overflow-x: hidden;
padding: 14px 14px 20px;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
border-left: 1px solid var(--ct24-rh-border-subtle, var(--border));
border-right: none;
background: var(--ct24-rh-surface, var(--surface));
}
.index-menu-drawer--has-panel .index-menu-drawer__content {
min-width: min(15rem, 58vw);
}
@media (max-width: 360px) {
.index-menu-drawer__nav {
min-width: 12.5rem;
width: clamp(12.5rem, 78vw, 18rem);
max-width: min(18rem, 92vw);
}
.index-menu-drawer__content {
min-width: 0;
max-width: none;
flex: 1 1 0;
}
}
.index-menu-drawer__content[hidden] {
display: none !important;
}
.index-menu-drawer__panel-title {
margin: 0 0 12px;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ct24-rh-text, var(--navy));
}
/* Alle rechten Inhalte (Wallet, Ticket, Profil, …) gleiche nutzbare Breite bis zur Panel-Kante */
.index-menu-drawer__panel {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.index-menu-panel-ticket .index-menu-ticket-lead {
margin-top: 0;
}
.index-menu-impressum--compact .index-menu-static-block {
display: flex;
flex-direction: column;
gap: 0;
}
.index-menu-impressum--compact .index-menu-impressum__lead {
margin: 0 0 12px !important;
font-size: 11px;
font-weight: 800;
color: var(--ct24-rh-text-tertiary, #64748b);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.index-menu-impressum--compact .index-menu-impressum__section {
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--ct24-rh-border-subtle, rgba(15, 23, 42, 0.08));
}
.index-menu-impressum--compact .index-menu-impressum__section:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.index-menu-impressum--compact .index-menu-impressum__dd-note {
display: block;
margin-top: 3px;
font-size: 10px;
font-weight: 600;
color: var(--ct24-rh-text-tertiary, #64748b);
line-height: 1.3;
}
.index-menu-impressum--compact.index-menu-static-panel .index-menu-impressum__label {
margin: 0 0 6px;
padding: 0;
font-size: 11px;
font-weight: 800;
color: var(--ct24-rh-text-secondary, #475569);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.index-menu-impressum--compact.index-menu-static-panel .index-menu-impressum__text {
margin: 0 0 6px;
font-size: 12px;
line-height: 1.45;
color: var(--ct24-rh-text, var(--navy));
}
.index-menu-impressum--compact.index-menu-static-panel .index-menu-impressum__text:last-child {
margin-bottom: 0;
}
.index-menu-impressum--compact.index-menu-static-panel .index-menu-impressum__hint {
margin: 0 0 8px;
font-size: 11px;
line-height: 1.35;
color: var(--ct24-rh-text-tertiary, #64748b);
}
.index-menu-impressum--compact.index-menu-static-panel .index-menu-impressum__meta {
margin: 8px 0 0;
font-size: 11px;
line-height: 1.4;
color: var(--ct24-rh-text-tertiary, #64748b);
}
.index-menu-impressum--compact .index-menu-impressum__dt {
display: block;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ct24-rh-text-tertiary, #64748b);
margin-bottom: 2px;
}
.index-menu-impressum--compact .index-menu-impressum__dl {
margin: 0;
display: grid;
grid-template-columns: minmax(4.5rem, 28%) 1fr;
gap: 6px 10px;
font-size: 12px;
line-height: 1.4;
align-items: baseline;
}
.index-menu-impressum--compact .index-menu-impressum__dl dt {
margin: 0;
font-weight: 700;
color: var(--ct24-rh-text-secondary, #475569);
}
.index-menu-impressum--compact .index-menu-impressum__dl dd {
margin: 0;
min-width: 0;
word-break: break-word;
}
.index-menu-drawer__panel .index-menu-item {
margin-top: 12px;
}
.index-menu-static-panel .index-menu-static-block {
font-size: 12px;
line-height: 1.45;
color: var(--navy);
}
.index-menu-static-panel .index-menu-static-block p {
margin: 0 0 10px;
}
.index-menu-static-panel h4 {
margin: 14px 0 6px;
font-size: 11px;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.index-menu-static-panel h4:first-of-type {
margin-top: 4px;
}
.index-menu-contact-link {
color: #0f766e;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 2px;
}
.index-menu-contact-link:active {
opacity: 0.88;
}
.index-menu-faq details {
margin-bottom: 8px;
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px 10px;
background: #f8fafc;
box-sizing: border-box;
}
.index-menu-faq summary {
font-size: 12px;
font-weight: 800;
color: var(--navy);
cursor: pointer;
list-style-position: outside;
}
.index-menu-faq-a {
margin: 8px 0 2px;
font-size: 11px;
line-height: 1.45;
color: #334155;
}
.index-menu-item {
width: 100%;
margin-top: 14px;
height: 48px;
border: none;
border-radius: 14px;
background: var(--navy);
color: #fff;
font-weight: 800;
font-size: 14px;
cursor: pointer;
}
.index-menu-item:active { opacity: 0.92; }
.index-menu-item--secondary {
margin-top: 10px;
background: #334155;
font-size: 13px;
height: 44px;
}
.index-profile-card {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.index-profile-avatar {
width: 44px;
height: 44px;
border-radius: 12px;
background: #e8ecf3;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.index-profile-name {
font-size: 16px;
font-weight: 900;
color: var(--navy);
line-height: 1.2;
}
.index-profile-tagline {
margin: 4px 0 0;
font-size: 11px;
font-weight: 700;
color: var(--muted);
line-height: 1.35;
}
.index-profile-dl {
margin: 0;
font-size: 12px;
}
.index-profile-dl-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--border);
}
.index-profile-dl-row:first-of-type {
border-top: 1px solid var(--border);
padding-top: 8px;
}
.index-profile-dl dt {
margin: 0;
font-weight: 700;
color: var(--muted);
flex-shrink: 0;
}
.index-profile-dl dd {
margin: 0;
text-align: right;
font-weight: 800;
color: var(--navy);
}
.index-profile-code {
font-size: 12px;
background: #eef2f7;
padding: 2px 6px;
border-radius: 6px;
}
.index-profile-db-status {
font-size: 11px;
font-weight: 800;
}
.index-profile-push {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.index-fahrgast-push-status {
min-height: 1.35em;
font-weight: 700;
}
.index-profile-db-status.index-profile-db--warn {
color: #b45309;
}
.index-profile-cashback-cta {
margin-top: 12px;
padding-top: 4px;
border-top: 1px solid var(--border);
}
.index-profile-cashback-teaser {
margin: 8px 0 0;
font-size: 11px;
font-weight: 700;
color: var(--muted);
text-align: center;
line-height: 1.35;
}
.index-menu-item--cashback {
margin-top: 0;
background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
}
.index-cashback-hero--popup {
font-size: clamp(28px, 8vw, 40px);
margin-bottom: 16px;
}
.index-cashback-hero--drawer {
font-size: clamp(24px, 7vw, 34px);
margin-bottom: 14px;
}
.index-cashback-hero-label {
margin: 0 0 4px;
font-size: 11px;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.index-cashback-hero {
margin: 0 0 14px;
font-size: 26px;
font-weight: 900;
color: var(--navy);
letter-spacing: -0.02em;
}
.index-menu-hint--tight {
margin-top: 0;
margin-bottom: 10px;
}
.index-cashback-label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--muted);
margin-bottom: 4px;
}
.index-cashback-fare-apply {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.index-cashback-fare-breakdown {
margin: 0 0 12px;
}
.index-cashback-fare-breakdown__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin: 6px 0;
font-size: 14px;
}
.index-cashback-fare-breakdown__row dt {
margin: 0;
font-weight: 600;
color: var(--muted);
}
.index-cashback-fare-breakdown__row dd {
margin: 0;
font-weight: 800;
color: var(--navy);
font-variant-numeric: tabular-nums;
}
.index-cashback-fare-breakdown__row--final {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.index-cashback-fare-breakdown__row--final dt {
color: var(--navy);
}
.index-cashback-fare-apply .index-menu-item {
margin-top: 8px;
}
.index-cashback-input {
width: 100%;
height: 44px;
border-radius: 12px;
border: 1px solid var(--border);
padding: 0 12px;
font-size: 16px;
color: var(--navy);
}
.index-menu-hint {
margin: 6px 0 8px;
font-size: 11px;
line-height: 1.4;
color: var(--muted);
}
.index-cashback-ledger {
margin-top: 10px;
font-size: 12px;
color: var(--navy);
}
.index-cashback-ledger-list {
margin: 6px 0 0;
padding-left: 1.1rem;
max-height: 160px;
overflow: auto;
}
.index-cashback-ledger-list li {
margin: 4px 0;
}
/* Segment-Tabs: eine Zeile mit Wallet — grauer Track, innen abgerundete aktive Pill */
.service-tabs {
flex: 1 1 0;
display: flex;
align-items: stretch;
justify-content: flex-start;
min-width: 0;
min-height: 0;
box-sizing: border-box;
background: #e5e7eb;
border-radius: 14px;
padding: 4px;
overflow: hidden;
box-shadow: none;
margin-bottom: 0;
}
.service-tabs .tab {
flex: 1 1 0;
min-width: 0;
border: none;
background: transparent;
color: #6b7280;
font-size: var(--ct24-book-now-font-size);
font-weight: 700;
line-height: 1.2;
min-height: var(--ct24-book-now-tab-min-h);
padding: var(--ct24-book-now-tab-pad-y) var(--ct24-book-now-tab-pad-x);
border-radius: 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: background 0.2s ease, color 0.2s ease;
}
.service-tabs .tab.active {
background: #1f2a44;
color: #fff;
box-shadow: none;
font-size: var(--ct24-book-now-font-size-active);
}
.service-tabs .tab:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Eine Zeile: [Fahrtauswahl-Hinweis] | ein Umschalter (wie Zahlungsart) — Zustand per Tap wechseln */
.airport-switch {
flex: 1 1 0;
width: 100%;
max-width: 100%;
min-width: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 4px;
background: transparent;
border-radius: 0;
padding: 0;
overflow: visible;
}
.index-trip-type-hint {
flex: 0 1 auto;
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 3px;
box-sizing: border-box;
min-height: var(--ct24-header-icon-size);
height: var(--ct24-header-icon-size);
padding: 0 8px 0 9px;
margin: 0;
max-width: min(10.5rem, 48vw);
min-width: 0;
border: var(--ct24-header-chip-border);
border-radius: var(--ct24-header-chip-radius);
background: var(--ct24-header-chip-bg);
box-shadow: var(--ct24-header-chip-shadow);
pointer-events: none;
user-select: none;
-webkit-user-select: none;
}
.index-trip-type-hint__kicker {
flex: 1 1 auto;
min-width: 0;
text-transform: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.index-trip-type-hint__arrow {
flex: 0 0 auto;
margin-top: -1px;
}
/* Kachel wie Wallet: füllt die freie Breite zwischen Hinweis „Fahrtauswahl“ und rechter Header-Gruppe */
.index-trip-type-picker {
flex: 1 1 0;
width: auto;
max-width: 100%;
min-width: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
box-sizing: border-box;
min-height: var(--ct24-header-icon-size);
height: var(--ct24-header-icon-size);
padding: 0;
border: var(--ct24-header-chip-border);
border-radius: var(--ct24-header-chip-radius);
background: var(--ct24-header-chip-bg);
box-shadow: var(--ct24-header-chip-shadow);
overflow: hidden;
}
.index-trip-type-toggle {
flex: 1 1 0;
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 0;
align-self: stretch;
height: auto;
padding: 0 8px;
border: none;
border-radius: var(--ct24-header-chip-radius);
cursor: pointer;
font-family: inherit;
font-size: var(--ct24-header-chip-font-size);
font-weight: var(--ct24-header-chip-font-weight);
line-height: var(--ct24-header-text-line-height);
letter-spacing: var(--ct24-header-text-tracking);
color: #fff;
background: transparent;
box-shadow: none;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, color 0.15s ease, filter 0.12s ease;
}
.index-trip-type-toggle:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.index-trip-type-toggle:active {
filter: brightness(1.07);
}
.index-trip-type-toggle:focus-visible {
outline: 2px solid var(--ct24-accent);
outline-offset: 2px;
}
.index-trip-type-toggle span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.index-trip-type-toggle .index-trip-type-toggle__stack {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
width: 100%;
max-width: 100%;
line-height: 1.2;
}
/* Flughafen: waagrecht, Richtung vor „Flughafen“, kompakter Abstand */
.index-trip-type-toggle--airport .index-trip-type-toggle__stack {
width: 100%;
}
.index-trip-type-toggle--airport .index-trip-type-toggle__secondary {
order: 0;
flex: 0 1 auto;
max-width: none;
}
.index-trip-type-toggle--airport .index-trip-type-toggle__primary {
flex: 0 1 auto;
min-width: 0;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.index-trip-type-toggle__primary {
font-size: inherit;
font-weight: inherit;
}
.index-trip-type-toggle__secondary {
text-transform: none;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.95;
}
.index-trip-type-toggle--airport {
padding-left: 7px;
padding-right: 7px;
}
.index-trip-type-toggle--air-to .index-trip-type-toggle__secondary {
color: #bae6fd;
}
.index-trip-type-toggle--air-from .index-trip-type-toggle__secondary {
color: #bbf7d0;
}
.index-trip-type-toggle--air-to,
.index-trip-type-toggle--air-from {
box-shadow: none;
}
/* Flughafen „Zum“: Zielzeile; „Vom“: Abholzeile — optisch zur Header-Richtung */
body[data-index-service-mode="airport"][data-air-dir="to"] .location-card .loc-row.drop .loc-field {
border-radius: 10px;
background: rgba(240, 249, 255, 0.65);
box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.28);
}
body[data-index-service-mode="airport"][data-air-dir="from"] .location-card .loc-row.pickup .loc-field {
border-radius: 10px;
background: rgba(240, 253, 244, 0.65);
box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.28);
}
.loc-dest-switch__icon--plane {
width: 20px;
height: 20px;
display: block;
}
@media (max-width: 360px) {
.index-trip-type-hint {
padding-left: 6px;
padding-right: 6px;
max-width: min(9.25rem, 88vw);
}
.index-trip-type-toggle {
padding-left: 6px;
padding-right: 6px;
}
.index-trip-type-toggle--airport {
padding-left: 5px;
padding-right: 5px;
}
}
.airport-switch__taxi-track {
flex: 0 0 auto;
display: flex;
align-items: center;
min-width: 0;
margin-bottom: 0;
}
.airport-switch__taxi-track .tab {
flex: 0 0 auto;
min-width: 0;
}
.airport-switch__air-block {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
flex: 1 1 0;
min-width: 0;
box-sizing: border-box;
min-height: var(--ct24-header-icon-size);
height: var(--ct24-header-icon-size);
padding: 2px;
gap: 2px;
background: var(--ct24-header-chip-bg);
border: var(--ct24-header-chip-border);
border-radius: var(--ct24-header-chip-radius);
box-shadow: var(--ct24-header-chip-shadow);
overflow: hidden;
}
body[data-index-service-mode="taxi"] .airport-switch__air-block .airport-dir__btn,
body[data-index-service-mode="taxi"] .airport-switch__air-block .airport-combo__mid {
display: none !important;
}
.airport-combo {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
background: transparent;
border-radius: 0;
padding: 0;
overflow: hidden;
gap: 0;
}
/* Flughafen-Zeile: keine grauen service-tabs mehr — gleiche Typo/Höhe wie Wallet-Zeile */
.airport-switch__air-block .airport-combo > .service-tabs {
flex: 1 1 auto;
min-width: 0;
margin-bottom: 0;
background: transparent;
padding: 0;
border-radius: 0;
min-height: calc(var(--ct24-header-icon-size) - 8px);
align-items: center;
justify-content: center;
gap: 2px;
box-shadow: none;
}
.airport-switch__air-block .airport-combo > .service-tabs .tab {
flex: 0 1 auto;
min-width: 0;
min-height: calc(var(--ct24-header-icon-size) - 8px);
padding: 4px 9px;
font-family: inherit;
font-size: var(--ct24-header-chip-font-size);
font-weight: var(--ct24-header-chip-font-weight);
letter-spacing: var(--ct24-header-text-tracking);
line-height: var(--ct24-header-text-line-height);
color: rgba(255, 255, 255, 0.55);
border-radius: 8px;
background: transparent;
}
.airport-switch__air-block .airport-combo > .service-tabs .tab.active {
background: #ffffff;
color: var(--navy);
font-size: var(--ct24-header-chip-font-size);
box-shadow: none;
}
.airport-combo .airport-switch__air-mode-tabs {
flex: 0 0 auto;
width: auto;
min-width: 0;
margin-bottom: 0;
margin-left: -4px;
flex-wrap: nowrap;
background: transparent;
padding: 0;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
.airport-combo .airport-switch__air-mode-tabs.ct24-glass {
border: 0;
box-shadow: none;
background: transparent;
}
.airport-combo .airport-switch__air-mode-tabs .tab {
flex: 0 0 auto;
min-width: 0;
width: auto;
padding-left: 9px;
padding-right: 9px;
}
.airport-combo .airport-switch__air-mode-tabs .tab.active {
border-radius: 8px;
}
.airport-combo__mid {
flex: 1 1 auto;
min-width: 6px;
min-height: 0;
align-self: stretch;
pointer-events: none;
}
.airport-dir__btn {
flex: 0 0 auto;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.55);
font-family: inherit;
font-size: var(--ct24-header-chip-font-size);
font-weight: var(--ct24-header-chip-font-weight);
line-height: var(--ct24-header-text-line-height);
letter-spacing: var(--ct24-header-text-tracking);
min-height: calc(var(--ct24-header-icon-size) - 8px);
padding: 4px 10px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: background 0.2s ease, color 0.2s ease;
}
.airport-combo .airport-dir__btn {
background: transparent;
border-radius: 8px;
padding-right: 8px;
padding-left: 8px;
align-self: stretch;
}
.airport-switch__air-block > .airport-dir__btn {
border-radius: 8px;
flex: 0 0 auto;
width: auto;
min-height: 0;
align-self: stretch;
padding-left: 10px;
padding-right: 10px;
}
.airport-dir__btn.is-active {
background: #ffffff;
color: var(--navy);
font-size: var(--ct24-header-chip-font-size);
}
.airport-dir__btn:focus-visible {
outline: 2px solid var(--ct24-accent);
outline-offset: 2px;
}
/* Ticket-UI: nur noch im Menü-Drawer (.index-menu-panel-ticket), nicht als Bottom-Sheet */
.ticket-sheet-lead {
font-size: 12px;
color: #475569;
line-height: 1.45;
margin: 0 0 10px;
}
.ticket-sheet-input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
font-size: 18px;
font-weight: 800;
letter-spacing: 0.06em;
text-align: center;
color: #0f172a;
background: #f8fafc;
}
.ticket-sheet-input::placeholder {
color: #94a3b8;
font-weight: 600;
letter-spacing: normal;
}
.ticket-sheet-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.ticket-sheet-actions button {
height: 46px;
border-radius: 12px;
font-size: 14px;
font-weight: 800;
border: none;
cursor: pointer;
}
.ticket-sheet-load {
background: var(--navy);
color: #fff;
}
.ticket-sheet-share {
background: #e2e8f0;
color: #0f172a;
}
.ticket-sheet-msg {
margin-top: 8px;
font-size: 12px;
font-weight: 700;
color: #b91c1c;
min-height: 1.2em;
}
.index-ticket-history-list {
list-style: none;
margin: 10px 0 0;
padding: 0;
max-height: min(42vh, 340px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.index-ticket-history-list li {
margin: 0 0 8px;
}
.index-ticket-history-item {
width: 100%;
text-align: left;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: #f8fafc;
cursor: pointer;
font: inherit;
box-sizing: border-box;
}
.index-ticket-history-item:hover {
background: #f1f5f9;
}
.index-ticket-history-item__code {
font-weight: 800;
color: var(--navy);
}
.index-ticket-history-item__meta {
font-size: 12px;
color: #64748b;
margin-top: 3px;
line-height: 1.35;
}
/* Adressbereich: weiße Karte zentriert.
Auf der Startseite: .index-loc-shell in #indexUiStack mit position: static (siehe #indexUiStack .index-loc-shell).
Die feste top-Position gilt nur, wo die Shell nicht im Stack hängt. */
.index-loc-shell {
position: fixed;
top: calc(max(10px, env(safe-area-inset-top)) + 76px);
left: 12px;
right: 12px;
z-index: 5;
pointer-events: none;
}
.index-loc-shell > .location-card {
pointer-events: auto;
max-width: 560px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Index: Service-Leiste (Tabs/Burger) oben fix; darunter Adresskarte + #bottomSheet im Stack */
:root {
/* Höhe unter .app-header padding-top bis untere Kante der Leiste (Tabs + unteres Padding) */
--ct24-index-top-bar-inner-h: 56px;
/* Unterer Bereich: nur Tabbar + kleiner Abstand — für #indexUiStack & Buchungs-Sheet */
--ct24-fahrgast-tabbar-h: 54px;
--ct24-index-bottom-tab-gap: 8px;
/* Keine untere Tabbar mehr: nur Safe-Area + kleiner Rand */
--ct24-index-bottom-reserve: calc(env(safe-area-inset-bottom) + 12px);
--ct24-fahrgast-nav-dock-px: calc(12px + env(safe-area-inset-bottom));
/* --ct24-index-booking-dock-inset-x: kommt auf Index von body (Shell-Pad + Kartenrand), siehe Kommentar nach :root */
/* Hotline-Popup über der fixen Buchungsleiste — verhindert weiße Sheet-Kante „hinter“ dem Dialog */
}
/* Index: horizontal wie Adresscontainer — Shell (#indexUiStack) + Karteninnenrand; Buchungszeile übernimmt dieselbe Summe */
body:not(.ct24-is-buchung-page) {
--ct24-index-addr-shell-pad-x: 12px;
--ct24-index-addr-card-pad-x: 10px;
--ct24-index-booking-dock-inset-x: calc(
var(--ct24-index-addr-shell-pad-x) + var(--ct24-index-addr-card-pad-x)
);
/* Buchungsleiste / Pay-Taste: gleicher Akzent wie Chat-Senden — überschreibbar ohne Hex zu duplizieren */
--ct24-booking-toolbar-accent: var(--ct24-chat-send);
--ct24-booking-toolbar-accent-hover: var(--ct24-chat-send-hover);
/* Nur Toolbar (nicht Chat): z.B. --ct24-booking-toolbar-accent: var(--ct24-taxi-ui-green); */
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) {
--ct24-index-addr-card-pad-x: 14px;
}
.app-header.app-header--index-top {
z-index: 60;
box-shadow: none;
}
/* Taxi-Mockup: grüne CTA-Kacheln (#37a800), abgerundet, leichter Schlagschatten */
body:not(.ct24-is-buchung-page) .app-header.app-header--index-top {
--ct24-header-cta-bg: var(--ct24-taxi-ui-green);
--ct24-header-chip-bg: var(--ct24-taxi-ui-green);
--ct24-header-chip-radius: 18px;
--ct24-header-chip-shadow: var(--ct24-taxi-ui-shadow-header);
box-shadow: none;
}
body:not(.ct24-is-buchung-page) .app-header.app-header--index-top .app-header__cashback-box {
border-radius: 18px;
box-shadow: var(--ct24-taxi-ui-shadow-header);
}
.app-header.app-header--index-top .app-header__top-row {
margin-bottom: 0;
}
.app-header.app-header--index-top .app-header__shell {
padding-bottom: 2px;
}
/* Fahrerkarte nicht im normalen Fluss unter dem fixen Header, bis sie in #indexFahrerkarteHome oder #indexSheetFahrerkartePlatz hängt */
body:not(.ct24-is-buchung-page):not(:has(#indexFahrerkarteHome #fahrerkarte)):not(:has(#indexSheetFahrerkartePlatz #fahrerkarte))
#fahrerkarte {
position: fixed !important;
inset: 0 auto auto 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
opacity: 0 !important;
pointer-events: none !important;
border: 0 !important;
}
#indexUiStack {
position: fixed;
z-index: 5;
top: calc(max(10px, env(safe-area-inset-top)) + var(--ct24-index-top-bar-inner-h) - 8px);
left: 0;
right: 0;
bottom: var(--ct24-index-bottom-reserve);
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 8px;
min-height: 0;
pointer-events: none;
max-width: none;
margin-left: auto;
margin-right: auto;
width: 100%;
padding-left: var(--ct24-index-addr-shell-pad-x, 12px);
padding-right: var(--ct24-index-addr-shell-pad-x, 12px);
box-sizing: border-box;
}
#indexUiStack > * {
pointer-events: auto;
}
/*
* Gast-Chat (#ct24IndexChatSheetRoot, z-index 70) wird neben dem Header aus dem Stack gehängt —
* liegt sonst über dem gesamten #indexUiStack (z-index 5); das Panel hat pointer-events:auto → Adressfelder wirken „tot“ / Laden hängt gefühlt.
* Bei offenem Burger-Menü greifen eigene Layer (Chat bis 25118).
*/
body.ct24-index-chat-float-layout:not(.index-menu-open) #indexUiStack {
z-index: 71 !important;
}
/* Startseite: Adresse oben; Buchungsfuß fix unten — Padding verhindert Überdeckung der Karte */
body:not(.ct24-is-buchung-page) #indexUiStack {
justify-content: flex-start;
gap: 8px;
/* Luft unter dem App-Header, damit Hero/Preiszeile nicht „anpickt“ */
padding-top: 10px;
padding-bottom: min(168px, 34vh);
--ct24-loc-abhol-ziel-pad: 3px;
}
body:not(.ct24-is-buchung-page).ct24-cal-open #indexUiStack {
padding-bottom: min(300px, 52vh);
}
/* Schritt 1: Adress-Chrome im Hero (unter Header), nicht fix am Viewport-Boden */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) #indexUiStack {
/* Echte Headerhöhe nach Ausblenden der Tabs — sonst bleibt eine „Leerzone“ (alter 56px-Offset) */
top: var(
--ct24-index-ui-stack-top,
calc(max(10px, env(safe-area-inset-top)) + var(--ct24-index-top-bar-inner-h) - 8px)
);
padding-top: 2px;
/* Nur Höhe des fixierten Buchungsblocks (--ct24-index-step2-stack-h): Tabbar-Höhe nicht nochmal addieren — wirkte wie zusätzlicher Abstand/Doppel-Reserve */
padding-bottom: calc(8px + var(--ct24-index-step2-stack-h, 160px));
/* KB-Inset nicht hier addieren — nur Tabbar-/Safe-Reserve; sonst wirkte der Bereich unter der Buchungszeile unnötig hoch */
bottom: var(--ct24-index-bottom-reserve);
}
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) #indexUiStack > #indexBottomChromeStack {
flex: 1 1 auto;
min-height: 0;
}
/* Fahrt-Segment (Tabs) liegt nur noch im versteckten .index-fahrtart-status-host — kein display:none im sichtbaren Header nötig. */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page).ct24-cal-open #indexUiStack {
padding-bottom: min(300px, 52vh);
}
body:not(.ct24-is-buchung-page) #indexUiStack .index-loc-shell {
/* Kein „Doppel-Offset“: nur Stack-Padding + Kartenabstand */
margin-top: 0;
}
body:not(.ct24-is-buchung-page) #indexUiStack .location-card {
--ct24-loc-pad-x: var(--ct24-index-addr-card-pad-x, 10px);
--ct24-loc-pad-y: 8px;
/* Kein unteres Card-Padding: die Zieladresse soll bündig mit der unteren
Kartenkante abschließen (keine weiße Lücke zwischen Trennlinie und Rand). */
padding: 8px var(--ct24-loc-pad-x) 0;
/* overflow: visible, damit die Autocomplete-Vorschlagsliste (.ct24-mbx-ac-list)
unter dem Pickup-Input nach unten aufklappen kann und nicht von der Karte geclippt
oder von der Zieladresse überdeckt wird. */
overflow: visible;
background: var(--ct24-rh-surface);
border-radius: var(--ct24-ui-shell-radius-lg);
box-shadow: 0 10px 32px rgba(15, 23, 42, 0.1);
border: 1.5px solid var(--ct24-ui-accent-ring);
}
/* Reservierung (Termin, pickupScheduledAt): Bestätigung im Hero bis Fahrerzuweisung */
#indexUiStack > #indexReservationReceivedHero.index-reservation-received-hero {
flex: 0 0 auto;
align-self: center;
width: 100%;
max-width: 560px;
margin: 8px auto 0;
padding: 14px 16px;
border-radius: 18px;
box-sizing: border-box;
box-shadow: var(--ct24-rh-shadow-md);
background: var(--ct24-rh-surface-glass);
border: 1px solid var(--ct24-rh-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.index-reservation-received-hero__title {
margin: 0 0 8px;
font-size: 1.05rem;
font-weight: 700;
color: var(--ct24-rh-text);
}
.index-reservation-received-hero__lead {
margin: 0 0 10px;
font-size: 0.95rem;
line-height: 1.45;
color: var(--ct24-rh-text-secondary);
}
.index-reservation-received-hero__contact {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--ct24-rh-text-secondary);
}
.index-reservation-received-hero__link {
color: var(--ct24-rh-link);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Index-UX:
Step 1: Adressen + Bottom-Dock (Fahrerkarte/Zahlung/Jetzt/Später), aber ohne Preiszeile.
Step 2: ohne Adressfelder (addr-collapsed), Preiszeile im Hero wie gehabt. */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) #indexUiStack > #bookingFooterPriceRow {
display: none !important;
visibility: hidden !important;
max-height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* Schritt 1/2: Adresskarten-Rundung/ Rand — siehe #indexBottomChromeStack > .index-loc-shell.location-card unten */
/* Schritt 2: keine Adresskarte — nur Header-Zurück, Preiszeile, unten Sheet (Fahrer + Buchungsleiste) */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) #indexBottomChromeStack > .index-loc-shell.location-card {
display: none !important;
}
/* Schritt 2: Bottom-Chrome bündig unten (kein Spalt, Karte scheint nicht durch) */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) #indexBottomChromeStack {
top: auto !important;
bottom: var(--ct24-fahrgast-nav-dock-px, 72px) !important;
padding-top: 0;
padding-bottom: 0 !important;
padding-left: env(safe-area-inset-left, 0px) !important;
padding-right: env(safe-area-inset-right, 0px) !important;
box-sizing: border-box;
justify-content: flex-end;
/* Transparent: sonst füllen die „Ecken“ des Parent-Rechtecks die Rundung des Sheets (#ct24IndexStep2Sheet) mit eckigem Flächenfarbe */
background: transparent !important;
overflow: visible;
}
/* Kein --ct24-kb-inset hier: fixed-Bottom ist am Visual Viewport verankert (Android Chrome); Inset + Dock hätte doppelt angehoben */
/* Schritt 2: Preis im Hero; drei Zeilen übereinander (kein 3-Spalten-Raster) */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion {
flex: 0 0 auto;
align-self: center;
width: 100%;
max-width: 560px;
margin: 4px auto 0;
border-radius: 18px;
overflow: hidden;
box-shadow: var(--ct24-rh-shadow-md);
background: var(--ct24-rh-surface-glass);
border: 1px solid var(--ct24-rh-border);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion
.index-loc-price-grid {
display: flex;
flex-direction: column;
grid-template-columns: none;
border-radius: 18px;
border-left: 1px solid var(--ct24-rh-border);
border-right: 1px solid var(--ct24-rh-border);
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion
.index-loc-price-col {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 10px;
text-align: left;
min-width: 0;
width: 100%;
box-sizing: border-box;
padding: 8px 12px;
border-left: none;
border-bottom: 1px solid var(--ct24-rh-border);
border-radius: 0;
align-content: center;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion
.index-loc-price-col:last-child {
border-bottom: none;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion
.index-loc-price-col
+ .index-loc-price-col {
border-left: none;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion
.index-loc-price-col__label {
text-align: left;
margin-right: auto;
flex: 0 1 auto;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion
.index-loc-price-col--guthaben
.index-loc-price-col__label {
flex: 1 1 8rem;
min-width: 0;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion
.index-loc-price-col--guthaben
.index-loc-price-col__amount-row {
flex: 0 0 auto;
margin-left: auto;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion
.index-loc-price-col--guthaben
.index-loc-price-col__sub {
flex: 0 0 100%;
text-align: right;
padding-top: 2px;
margin: 0;
}
/* Ohne Guthaben-Einlösung: Fixpreis hero + Guthaben-Zeile, „Zu zahlen“ aus; mit Einlösung: Fahrpreis → Guthaben → Zu zahlen */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion:not(.ct24-index-price--breakdown)
.index-loc-price-col--end {
display: none !important;
}
/* Anfang / Standard: Fixpreis wie Ride-Hailing (Bolt/Uber): Kicker, großer Betrag zentriert */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion:not(.ct24-index-price--breakdown)
.index-loc-price-col--fix {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px 20px 16px;
border-bottom: 1px solid var(--ct24-rh-border);
border-radius: 16px 16px 0 0;
background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
gap: 6px 0;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion:not(.ct24-index-price--breakdown)
.index-loc-price-col--fix
.index-loc-price-col__label {
margin: 0;
width: 100%;
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
order: 0;
flex: none;
line-height: 1.35;
max-width: 100%;
hyphens: auto;
padding: 0 4px;
box-sizing: border-box;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion:not(.ct24-index-price--breakdown)
.index-loc-price-col--fix
.index-loc-price-col__value#indexPriceColFixValue {
font-size: clamp(1.8rem, 6.2vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.1;
color: #0f172a;
margin: 0;
flex: none;
}
/* Guthaben vor Einlösen: wieder kompakt (eine Zeile, keine Hero-Größe) */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion:not(.ct24-index-price--breakdown)
.index-loc-price-col--guthaben {
background: rgba(22, 163, 74, 0.06);
border-bottom: none;
border-radius: 0 0 16px 16px;
padding: 9px 14px 12px;
}
/* Mit Guthaben-Breakdown: Fahrpreis + Guthaben = Kassenzeilen; „Zu zahlen“ = Fokus wie Fixpreis-Start */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion.ct24-index-price--breakdown
.index-loc-price-col--fix {
order: 1;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
text-align: left;
padding: 8px 12px;
gap: 6px 10px;
background: rgba(15, 23, 42, 0.035);
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion.ct24-index-price--breakdown
.index-loc-price-col--fix
.index-loc-price-col__label {
text-align: left;
font-size: var(--ct24-mob-label);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--ct24-rh-text-secondary);
margin-right: auto;
flex: 0 1 auto;
width: auto;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion.ct24-index-price--breakdown
.index-loc-price-col--fix
.index-loc-price-col__value#indexPriceColFixValue {
font-size: var(--ct24-mob-price-col);
font-weight: 750;
letter-spacing: normal;
line-height: 1.2;
color: var(--ct24-rh-text, #0f172a);
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion.ct24-index-price--breakdown
.index-loc-price-col--guthaben {
order: 2;
background: rgba(22, 163, 74, 0.09);
}
/* Zahlbetrag-Zeile: Kicker als lesbarer Satz (Fixpreis + Guthaben), großer Betrag darunter */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion.ct24-index-price--breakdown
.index-loc-price-col--end {
order: 3;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px 20px 16px;
border-bottom: none;
border-radius: 0 0 16px 16px;
border-top: 1px solid var(--ct24-rh-border);
background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
gap: 6px 0;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion.ct24-index-price--breakdown
.index-loc-price-col--end
.index-loc-price-col__label#indexPriceColPayLabel {
margin: 0;
width: 100%;
text-align: center;
font-size: 12px;
font-weight: 650;
letter-spacing: 0.01em;
text-transform: none;
line-height: 1.4;
color: #475569;
flex: none;
padding: 0 8px;
box-sizing: border-box;
hyphens: auto;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion.ct24-index-price--breakdown
.index-loc-price-col--end
.price-val#priceEstimate {
font-size: clamp(1.8rem, 6.2vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.1;
color: #0f172a;
margin: 0;
}
/* Flughafen (Tabs Zum/Vom): Schritt 2 — ein klarer Pauschal-Block, keine Guthaben-Zeile; Header ohne Wallet-Betrag */
body[data-index-service-mode="airport"].ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.index-header-cashback-center {
display: none !important;
}
body[data-index-service-mode="airport"].ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn {
margin-left: auto;
}
body[data-index-service-mode="airport"].ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion
.index-loc-price-col--guthaben {
display: none !important;
}
/* Ein Block: großer Pauschal, abgerundete Karte ohne zweite „Zeile“ */
body[data-index-service-mode="airport"].ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion:not(.ct24-index-price--breakdown)
.index-loc-price-col--fix {
border-bottom: none !important;
border-radius: 18px !important;
padding: 22px 20px 20px !important;
background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
}
/* Falls doch Breakdown-Klasse: Guthaben trotzdem ausblenden, kompaktere Folgezeilen */
body[data-index-service-mode="airport"].ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion.ct24-index-price--breakdown
.index-loc-price-col--fix {
border-radius: 18px 18px 0 0 !important;
}
body[data-index-service-mode="airport"].ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion.ct24-index-price--breakdown
.index-loc-price-col--end {
border-radius: 0 0 18px 18px !important;
}
/* Flughafen Schritt 1: Burger nur als „Menü“ wahrnehmbar (kein Wallet-Wording im Header) */
body[data-index-service-mode="airport"].ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
.app-header--index-top
.top-menu
.price-btn.index-header-wallet-btn {
margin-left: auto;
}
/* Preiszeile im Hero: keine negativen Seitenränder (Location-Card) */
#indexUiStack > #bookingFooterPriceRow.index-loc-price-ion {
margin-left: 0;
margin-right: 0;
}
#indexUiStack > #bookingFooterPriceRow.index-loc-price-ion .index-loc-price-grid {
border-left: none;
border-right: none;
}
/* Index Buchungsfooter unter Toolbar: keine opake Fläche */
body:not(.ct24-is-buchung-page) #indexUiStack #ct24IndexStep2Sheet footer.booking-footer.ct24-index-step2-book-footer {
background: transparent !important;
border-top: none !important;
box-shadow: none !important;
}
/* Bottom-Sheet-Block: nur schwebende Controls — keine eigene Panel-Fläche/Schatten */
body:not(.ct24-is-buchung-page) #indexBottomChromeStack #ct24IndexStep2Sheet.ct24-index-step2-sheet {
box-shadow: none !important;
border-top: none !important;
}
/* Bottom-Sheet-Block: Fahrerkarte, Zahlung + Tabs — am unteren Rand verankert (Preis im Hero) */
#indexBottomChromeStack #ct24IndexStep2Sheet.ct24-index-step2-sheet {
--ct24-card-col-pay: clamp(5.5rem, 27vw, 8.75rem);
--ct24-card-col-mid: 1fr;
--ct24-card-col-end: 1fr;
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
min-width: 0;
align-self: stretch;
flex: 0 0 auto;
margin-top: auto;
border-top-left-radius: 22px !important;
border-top-right-radius: 22px !important;
/* Unten wie Toolbar: beide Außenecken 28px */
border-bottom-left-radius: 28px !important;
border-bottom-right-radius: 28px !important;
/* Griff (#indexFahrerkarteSheetHandle) steht mit top:-10px über dem Dock — nicht beschneiden */
overflow: visible;
box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.06);
/* Volle Transparenz: kein weißes/opakes Sheet unter Fahrerkarte — Toolbar (#eef2f7) bleibt eigenständig */
background: transparent !important;
border: none;
border-top: 1px solid rgba(15, 23, 42, 0.08);
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Adress-„Karte“: ein Element (index-loc-shell + location-card) — oben bündig zur Karte, keine abgerundete Kante zum Map-Hintergrund */
#indexBottomChromeStack > .index-loc-shell.location-card {
max-width: none;
width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
border-radius: var(--ct24-ui-shell-radius-lg);
box-shadow: 0 10px 32px rgba(15, 23, 42, 0.1);
border: 1.5px solid var(--ct24-ui-accent-ring);
background: var(--ct24-rh-surface, #fff);
}
/* Index: Chat-Widget (Crisp / LiveChat / Zendesk Messenger — natives CSS) */
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root > .ct24-index-chat-sheet__panel > .ct24-index-chat-panel {
--ct24-chat-tick: #8696a0;
--ct24-chat-tick-read: #53bdeb;
--ct24-chat-surface: #ffffff;
--ct24-chat-canvas: #eceff3;
--ct24-chat-border: rgba(15, 23, 42, 0.09);
--ct24-chat-text: #0f172a;
--ct24-chat-muted: #64748b;
--ct24-chat-agent-bubble: #ffffff;
--ct24-chat-user-bubble-start: #0ea5e9;
--ct24-chat-user-bubble-end: var(--ct24-ui-chat-grad-b);
--ct24-chat-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 20px rgba(15, 23, 42, 0.08);
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
flex: 0 1 auto;
min-height: 0;
margin: 0;
padding: 0;
border-top: 1px solid var(--ct24-chat-border);
background: var(--ct24-chat-surface);
border-radius: 0;
overflow: hidden;
box-shadow: none;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-index-ux--addr-only)
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel
> .ct24-index-chat-panel {
--ct24-chat-tick: #8696a0;
--ct24-chat-tick-read: #53bdeb;
--ct24-chat-surface: #0f1419;
--ct24-chat-canvas: #1a1f26;
--ct24-chat-border: rgba(248, 250, 252, 0.1);
--ct24-chat-text: #f1f5f9;
--ct24-chat-muted: #94a3b8;
--ct24-chat-agent-bubble: #252b36;
--ct24-chat-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 24px rgba(0, 0, 0, 0.35);
}
}
.ct24-index-chat-panel__head {
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-bottom: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, var(--ct24-chat-surface) 100%);
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-index-ux--addr-only) .ct24-index-chat-panel__head {
background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, var(--ct24-chat-surface) 100%);
}
}
.ct24-index-chat-panel__head-main {
display: flex;
flex-direction: row;
align-items: center;
gap: 11px;
min-width: 0;
}
.ct24-index-chat-panel__avatar {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(145deg, #38bdf8, #2563eb);
color: #fff;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.ct24-index-chat-panel__avatar-icon {
width: 22px;
height: 22px;
}
.ct24-index-chat-panel__head-text {
min-width: 0;
}
.ct24-index-chat-panel__title {
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
color: var(--ct24-chat-text);
}
.ct24-index-chat-panel__subtitle {
margin: 2px 0 0;
font-size: 0.75rem;
font-weight: 500;
color: var(--ct24-chat-muted);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ct24-index-chat-panel__typing {
margin: 4px 0 0;
font-size: 0.72rem;
font-weight: 600;
color: var(--ct24-chat-muted);
font-style: italic;
line-height: 1.25;
}
.ct24-index-chat-panel__typing[hidden] {
display: none !important;
}
/* Tippen: im Verlauf wie eingehende Bubble, mit animierten Punkten */
.ct24-index-chat-panel__bubble--typing {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 8px;
font-size: 0.9rem;
font-style: italic;
font-weight: 500;
color: var(--ct24-chat-muted);
}
.ct24-chat-typing-label {
white-space: nowrap;
}
.ct24-chat-typing-dots {
display: inline-flex;
align-items: flex-end;
gap: 1px;
height: 1em;
padding-bottom: 2px;
}
.ct24-chat-typing-dot {
display: inline-block;
font-weight: 900;
line-height: 1;
font-size: 1.35em;
opacity: 0.28;
animation: ct24-chat-typing-dot 1.05s ease-in-out infinite;
}
.ct24-chat-typing-dot:nth-child(1) {
animation-delay: 0ms;
}
.ct24-chat-typing-dot:nth-child(2) {
animation-delay: 140ms;
}
.ct24-chat-typing-dot:nth-child(3) {
animation-delay: 280ms;
}
@keyframes ct24-chat-typing-dot {
0%,
70%,
100% {
opacity: 0.22;
transform: translateY(0);
}
30% {
opacity: 1;
transform: translateY(-3px);
}
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__thread {
padding: 14px 12px 16px;
background: var(--ct24-chat-canvas);
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__date {
margin: 2px 0 12px;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__date-pill {
padding: 5px 12px;
border-radius: 8px;
letter-spacing: 0.02em;
text-transform: none;
border: none;
box-shadow: var(--ct24-chat-shadow);
color: var(--ct24-chat-muted);
background: rgba(255, 255, 255, 0.92);
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-index-ux--addr-only) #ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__date-pill {
background: rgba(30, 41, 59, 0.92);
}
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__msg {
margin-bottom: 10px;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__bubble-wrap {
max-width: min(90%, 340px);
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__msg--user .ct24-index-chat-panel__bubble-wrap {
margin-left: auto;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__msg--notice {
align-self: center;
max-width: 100%;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__msg--notice .ct24-index-chat-panel__bubble-wrap {
margin-left: auto;
margin-right: auto;
max-width: min(92%, 360px);
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__bubble--notice {
background: rgba(14, 165, 233, 0.12);
color: var(--ct24-chat-text);
border: 1px dashed rgba(14, 165, 233, 0.45);
border-radius: 14px;
font-weight: 600;
font-size: 0.875rem;
}
/* Gast WebRTC Support-Anruf — ct24-index-webrtc-voice.js */
.ct24-index-voice-modal {
position: fixed;
inset: 0;
z-index: 300100;
display: grid;
place-items: center;
padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(28px, env(safe-area-inset-bottom, 0px));
pointer-events: auto;
}
.ct24-index-voice-modal[hidden] {
display: none !important;
}
.ct24-index-voice-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.48);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.ct24-index-voice-modal__card {
position: relative;
width: min(360px, 100%);
padding: 22px 18px 18px;
border-radius: 18px;
background: rgba(248, 250, 252, 0.98);
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 20px 44px rgba(15, 23, 42, 0.28);
text-align: center;
}
.ct24-index-voice-modal__icon {
font-size: 36px;
line-height: 1;
margin-bottom: 8px;
}
.ct24-index-voice-modal__title {
margin: 0 0 8px;
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
}
.ct24-index-voice-modal__sub {
margin: 0 0 18px;
font-size: 0.875rem;
line-height: 1.45;
color: #475569;
}
.ct24-index-voice-modal__actions--active {
margin-top: 4px;
}
.ct24-index-voice-modal__actions {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: stretch;
}
.ct24-index-voice-modal__btn {
flex: 1;
border: none;
border-radius: 12px;
padding: 12px 14px;
font-size: 0.9375rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s ease;
}
.ct24-index-voice-modal__btn:active {
transform: scale(0.97);
}
.ct24-index-voice-modal__btn--decline {
background: #f1f5f9;
color: #475569;
border: 1px solid rgba(148, 163, 184, 0.55);
}
.ct24-index-voice-modal__btn--hangup {
background: linear-gradient(145deg, #dc2626 0%, #b91c1c 100%);
color: #fff;
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__bubble {
padding: 8px 11px 9px;
font-size: 0.9375rem;
line-height: 1.42;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__bubble--agent {
border-radius: 16px 16px 16px 4px;
border: none;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__bubble--user {
border-radius: 16px 16px 4px 16px;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__meta {
margin-top: 3px;
padding: 0 6px;
font-size: 0.68rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-meta-row {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 5px;
max-width: min(90%, 340px);
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__msg--user .ct24-index-chat-meta-row {
align-self: flex-end;
justify-content: flex-end;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__msg--agent .ct24-index-chat-meta-row {
align-self: flex-start;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-meta-time {
font-size: inherit;
font-weight: inherit;
color: inherit;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-ticks {
display: inline-block;
font-size: 0.75rem;
line-height: 1;
letter-spacing: -0.2em;
margin-left: 1px;
color: var(--ct24-chat-tick);
user-select: none;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-ticks--read {
color: var(--ct24-chat-tick-read);
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-ticks--incoming {
color: var(--ct24-chat-tick);
opacity: 0.92;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__compose {
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
background: var(--ct24-chat-canvas);
border-top: 1px solid var(--ct24-chat-border);
}
/* Eingabe oben, Verlauf darunter; Platz oben für Griff (top:-10px) auf blauer Kapsel */
#ct24IndexChatPanel.ct24-index-chat-panel--compose-first .ct24-index-chat-panel__compose {
flex: 0 0 auto;
border-top: none;
border-bottom: 1px solid var(--ct24-chat-border);
padding: 18px 12px 10px;
overflow: visible;
}
#ct24IndexChatPanel.ct24-index-chat-panel--compose-first .ct24-index-chat-panel__thread--newest-top {
display: flex;
flex-direction: column-reverse;
align-items: stretch;
gap: 10px;
flex: 1 1 auto;
min-height: 0;
}
#ct24IndexChatPanel.ct24-index-chat-panel--compose-first .ct24-index-chat-panel__thread--newest-top .ct24-index-chat-panel__msg {
margin-bottom: 0;
}
#ct24IndexChatPanel.ct24-index-chat-panel--compose-first .ct24-index-chat-panel__thread--newest-top .ct24-index-chat-panel__date {
margin: 0;
}
/* Eingabe: außen transparent (Sheet durchscheinen); Kapsel innen weiß/dunkel, nur Rand blau */
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__compose {
background: transparent !important;
border-top: none !important;
}
#ct24IndexChatPanel.ct24-index-chat-panel--compose-first .ct24-index-chat-panel__compose {
border-bottom: none !important;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__compose-cap {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: visible;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__compose-inner {
background: #ffffff !important;
box-shadow: none !important;
border: 1.5px solid var(--ct24-chat-send, #2563eb) !important;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__input {
-webkit-appearance: none;
appearance: none;
border: 0;
background-clip: padding-box;
background: transparent !important;
color: #0f172a !important;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__input::placeholder {
color: #64748b !important;
opacity: 1 !important;
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-index-ux--addr-only) #ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__compose-inner {
background: var(--ct24-chat-surface, #0f1419) !important;
}
body:not(.ct24-index-ux--addr-only) #ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__input {
background: transparent !important;
color: #ffffff !important;
}
body:not(.ct24-index-ux--addr-only) #ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__input::placeholder {
color: rgba(255, 255, 255, 0.88) !important;
}
}
/* Fokus: kein blasses Innen-Leuchten — klarer Blaurand an der Kapsel; Textfeld-Schatten aus */
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__compose-inner:focus-within {
border-width: 2px !important;
border-color: var(--ct24-chat-send, #2563eb) !important;
box-shadow: none !important;
}
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner
.ct24-index-chat-panel__field:focus-within
.ct24-index-chat-panel__input,
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__input:focus {
box-shadow: none !important;
outline: none !important;
}
/* Schritt 1: Eingabe-Kapsel deckend weiß — blauer Rand klar gegen die Karte */
body.ct24-index-chat-float-layout
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner {
background: #ffffff !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
body.ct24-index-chat-float-layout
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: #ffffff !important;
}
}
.ct24-index-chat-panel__status {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
color: var(--ct24-chat-muted);
background: var(--ct24-chat-canvas);
border: 1px solid var(--ct24-chat-border);
}
.ct24-index-chat-panel__status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.ct24-index-chat-panel__status--connected .ct24-index-chat-panel__status-dot {
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
animation: ct24-chat-pulse 2.4s ease-in-out infinite;
}
.ct24-index-chat-panel__status--connecting .ct24-index-chat-panel__status-dot {
background: #ca8a04;
box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.35);
animation: ct24-chat-pulse 2.4s ease-in-out infinite;
}
.ct24-index-chat-panel__status--disconnected .ct24-index-chat-panel__status-dot {
background: #94a3b8;
box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.35);
animation: none;
opacity: 0.95;
}
.ct24-index-chat-delivery-hint {
margin: 8px 4px 0;
padding: 0 2px;
font-size: 0.72rem;
font-weight: 600;
line-height: 1.35;
}
.ct24-index-chat-delivery-hint--warn {
color: #b45309;
}
.ct24-index-chat-delivery-hint--info {
color: #1d4ed8;
}
.ct24-index-chat-delivery-hint--err {
color: #b91c1c;
}
@keyframes ct24-chat-pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.85;
transform: scale(0.92);
}
}
.ct24-index-chat-panel__thread {
flex: 1 1 auto;
min-height: 200px;
max-height: min(52vh, 440px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 14px 12px 16px;
background: var(--ct24-chat-canvas);
border-bottom: none;
box-shadow: none;
scroll-behavior: smooth;
}
.ct24-index-chat-panel__thread::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.ct24-index-chat-panel__date {
display: flex;
justify-content: center;
margin: 4px 0 14px;
}
.ct24-index-chat-panel__date-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ct24-chat-muted);
background: rgba(255, 255, 255, 0.75);
border: 1px solid var(--ct24-chat-border);
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-index-ux--addr-only) .ct24-index-chat-panel__date-pill {
background: rgba(30, 41, 59, 0.85);
}
}
.ct24-index-chat-panel__msg {
display: flex;
flex-direction: column;
max-width: 100%;
margin-bottom: 14px;
}
.ct24-index-chat-panel__msg--agent {
align-items: flex-start;
}
.ct24-index-chat-panel__msg--user {
align-items: flex-end;
}
.ct24-index-chat-panel__bubble-wrap {
max-width: min(88%, 320px);
}
.ct24-index-chat-panel__msg--user .ct24-index-chat-panel__bubble-wrap {
margin-left: auto;
}
.ct24-index-chat-panel__bubble {
position: relative;
padding: 11px 14px 12px;
font-size: 0.9375rem;
line-height: 1.45;
word-wrap: break-word;
overflow-wrap: anywhere;
box-shadow: var(--ct24-chat-shadow);
}
.ct24-index-chat-panel__bubble--agent {
background: var(--ct24-chat-agent-bubble);
color: var(--ct24-chat-text);
border-radius: 18px 18px 18px 5px;
border: 1px solid var(--ct24-chat-border);
}
.ct24-index-chat-panel__bubble--user {
color: #fff;
border: none;
border-radius: 18px 18px 5px 18px;
background: linear-gradient(
145deg,
var(--ct24-chat-user-bubble-start),
var(--ct24-chat-user-bubble-end)
);
}
.ct24-index-chat-panel__meta {
margin-top: 5px;
padding: 0 4px;
font-size: 0.68rem;
font-weight: 500;
color: var(--ct24-chat-muted);
font-variant-numeric: tabular-nums;
}
.ct24-index-chat-panel__msg--user .ct24-index-chat-panel__meta {
text-align: right;
}
.ct24-index-chat-panel__compose {
flex: 0 0 auto;
display: block;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
border: none;
outline: none;
background: var(--ct24-chat-canvas);
}
/*
* Eingabezeile: weiße „Kapsel“ (Surface); sichtbares Feld = Canvas-Pill im Textarea.
* Abstand Feld↔Senden = Surface (weiß), nicht Thread-Grau — kein grauer Streifen.
*/
.ct24-index-chat-panel__compose-inner {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
padding: 0 8px 2px 10px;
border-radius: 28px;
background: var(--ct24-chat-surface);
border: none;
outline: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
isolation: isolate;
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-index-ux--addr-only) .ct24-index-chat-panel__compose-inner {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
}
.ct24-index-chat-panel__field {
flex: 1 1 auto;
display: flex;
align-items: center;
min-width: 0;
height: 38px;
border-radius: 20px;
transform: translateY(2px);
border: none;
outline: none;
background: var(--ct24-chat-surface);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
transition: box-shadow 0.15s ease;
}
.ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__field {
margin: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.ct24-index-chat-panel__field:focus-within {
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.28), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__field:focus-within {
box-shadow: none;
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-index-ux--addr-only) .ct24-index-chat-panel__field {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
body:not(.ct24-index-ux--addr-only) .ct24-index-chat-panel__field:focus-within {
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35), 0 1px 3px rgba(0, 0, 0, 0.35);
}
body:not(.ct24-index-ux--addr-only) .ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__field:focus-within {
box-shadow: none;
}
}
.ct24-index-chat-panel__input {
display: block;
width: 100%;
box-sizing: border-box;
height: 38px;
min-height: 38px;
max-height: 38px;
border: none;
border-radius: 20px;
padding: 0 14px;
margin: 0;
font-size: 16px;
line-height: 38px;
font-family: inherit;
color: var(--ct24-chat-text);
background: transparent;
-webkit-appearance: none;
appearance: none;
resize: none;
overflow: hidden;
}
.ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__input {
background: var(--ct24-chat-canvas);
transition: box-shadow 0.15s ease;
}
.ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__field:focus-within .ct24-index-chat-panel__input {
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.32);
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-index-ux--addr-only) .ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__field:focus-within .ct24-index-chat-panel__input {
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
}
}
@supports not (field-sizing: content) {
.ct24-index-chat-panel__input {
min-height: 38px;
}
}
.ct24-index-chat-panel__input::placeholder {
color: var(--ct24-chat-muted);
opacity: 0.85;
}
.ct24-index-chat-panel__input:focus {
outline: none;
}
.ct24-index-chat-panel__send {
flex: 0 0 auto;
width: 38px;
height: 38px;
padding: 0;
border: none;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background: var(--ct24-chat-send);
cursor: pointer;
box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.ct24-index-chat-panel__send:hover {
background: var(--ct24-chat-send-hover);
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.ct24-index-chat-panel__send:active {
transform: scale(0.94);
}
.ct24-index-chat-panel__send-icon {
width: 19px;
height: 19px;
}
.ct24-index-chat-panel__send:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}
.ct24-index-chat-panel__call {
flex: 0 0 auto;
width: 38px;
height: 38px;
padding: 0;
border: none;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background: var(--ct24-chat-send);
cursor: pointer;
box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.ct24-index-chat-panel__call:hover {
background: var(--ct24-chat-send-hover);
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.ct24-index-chat-panel__call:active {
transform: scale(0.94);
}
.ct24-index-chat-panel__call-icon {
width: 18px;
height: 18px;
}
.ct24-index-chat-panel__call:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}
.ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__call {
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22);
}
/* Kein grauer Schatten-Rand Richtung Eingabe (sonst wirkt wie Linie) */
.ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__send {
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22);
}
.ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__send:hover {
box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}
.ct24-index-chat-panel__compose-inner .ct24-index-chat-panel__call:hover {
box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}
.ct24-index-chat-panel__menu {
flex: 0 0 auto;
width: 38px;
height: 38px;
padding: 0;
border: none;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background: #2563eb;
cursor: pointer;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22);
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.ct24-index-chat-panel__menu:hover {
background: #1d4ed8;
box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}
.ct24-index-chat-panel__menu:active {
transform: scale(0.94);
}
.ct24-index-chat-panel__menu i {
color: #fff;
font-size: 15px;
line-height: 1;
transform: translateY(1px);
}
.ct24-index-chat-panel__menu:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}
/*
* ct24-driver-card-sheet.css: Schritt 1 setzt transform auf #indexBottomChromeStack → Vorfahr mit
* transform = Containing Block für position:fixed. Der Chat-Peek hing damit am Stack unter der Karte,
* nicht am Viewport. Schritt 1: Transform am Stack abschalten (Drag nutzt hier i. d. R. ohnehin offset 0).
*/
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page).ct24-driver-sheet-v2 #indexBottomChromeStack {
transform: none !important;
will-change: auto !important;
}
/*
* Index-Gast-Chat: standardmäßig aus — „an“ wenn Body `ct24-index-chat-float-layout` (Schritt 1 oder Trip/Storno), siehe ct24-index-chat-ui.js.
*/
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Nach „Jetzt buchen“ ohne Chat: Sheet aus — Race mit geschlossenem guest-chat-band. Mit aktiver Fahrt + Chat: float-layout zeigt dasselbe Sheet wie auf der Startseite (spezifischere Regeln darunter). */
body.ct24-index-ux--addr-collapsed:not(.ct24-addr-fs-open):not(.ct24-is-buchung-page):not(.ct24-index-chat-float-layout)
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/*
* Index-Chat-Sheet: gleiches schwebendes Layout wie Startseite (`ct24-index-chat-float-layout`),
* auch nach Buchung bei aktiver Fahrt (Trip/Storno). Ionic-Reset: Panel flex + apron.
*/
body:not(.ct24-is-buchung-page)
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel {
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
background-color: var(--ct24-index-chat-sheet-apron, #ffffff) !important;
color: #0f172a;
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-is-buchung-page):not(.ct24-trip-storno-card):not(.ct24-index-chat-float-layout)
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel {
color: #f1f5f9;
}
}
/*
* Chat Schritt 1: gleiche horizontale Logik wie Buchungs-Dock (#ct24IndexStep2Sheet):
* --ct24-index-booking-dock-inset-x (= Shell-Pad + Karteninnenrand), max. 560px wie #indexUiStack.
* (--ct24-index-chat-align-left / -inset-right: Legacy-Variablen aus ct24-index-chat-ui.js, für Breite ohne Effekt.)
*/
body.ct24-index-chat-float-layout {
--ct24-index-chat-sheet-nudge-y: 12px;
--ct24-index-chat-to-driver-gap: 10px;
}
body.ct24-index-chat-float-layout #ct24IndexChatSheetRoot.ct24-index-chat-sheet-root {
display: block !important;
visibility: visible !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
width: min(
560px,
calc(
100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) -
2 * var(--ct24-index-booking-dock-inset-x, 22px)
)
) !important;
max-width: min(
560px,
calc(
100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) -
2 * var(--ct24-index-booking-dock-inset-x, 22px)
)
) !important;
margin-left: auto !important;
margin-right: auto !important;
top: calc(var(--ct24-index-chat-top, 132px) + var(--ct24-index-chat-sheet-nudge-y, 0px)) !important;
bottom: auto !important;
z-index: 70 !important;
padding: 0;
pointer-events: none;
box-sizing: border-box;
/* Äußeres Sheet transparent — Karte durchscheinen; innen weiße Kapsel + blauer Rand sichtbar */
--ct24-index-chat-sheet-apron: transparent;
--ct24-index-chat-sheet-open-max: min(46dvh, 420px);
/* Peek: nur Pille + Eingabe (Thread aus); kompakte Höhe für Drag/Tap-Threshold */
--ct24-index-chat-peek-h: min(140px, 35dvh);
}
@media (prefers-reduced-transparency: reduce) {
body.ct24-index-chat-float-layout #ct24IndexChatSheetRoot.ct24-index-chat-sheet-root {
--ct24-index-chat-sheet-apron: transparent;
}
}
/* Schritt 1: Chat immer hell (unabhängig von prefers-color-scheme) */
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel
> .ct24-index-chat-panel {
background: transparent !important;
color: #0f172a;
--ct24-chat-tick: #8696a0;
--ct24-chat-tick-read: #53bdeb;
--ct24-chat-surface: transparent;
--ct24-chat-canvas: #ffffff;
--ct24-chat-border: rgba(15, 23, 42, 0.09);
--ct24-chat-text: #0f172a;
--ct24-chat-muted: #64748b;
--ct24-chat-agent-bubble: #ffffff;
--ct24-chat-user-bubble-start: #0ea5e9;
--ct24-chat-user-bubble-end: var(--ct24-ui-chat-grad-b);
--ct24-chat-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 20px rgba(15, 23, 42, 0.08);
}
@media (prefers-reduced-transparency: reduce) {
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel
> .ct24-index-chat-panel {
background: #ffffff !important;
--ct24-chat-surface: #ffffff;
--ct24-chat-canvas: #eceff3;
--ct24-chat-agent-bubble: #ffffff;
--ct24-chat-border: rgba(15, 23, 42, 0.09);
--ct24-chat-text: #0f172a;
--ct24-chat-muted: #64748b;
}
}
/* Kopf + Thread: horizontal derselbe Rhythmus wie Adresskarte / Buchungszeile */
body.ct24-index-chat-float-layout #ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__head {
padding: 12px var(--ct24-index-addr-card-pad-x, 12px);
}
body.ct24-index-chat-float-layout #ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__thread {
padding: 14px var(--ct24-index-addr-card-pad-x, 12px) 16px;
}
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
.ct24-index-chat-sheet__panel {
pointer-events: auto;
}
/* Kein Overlay: Karte soll bei offenem Chat normal hell und bedienbar bleiben */
body.ct24-index-chat-float-layout .ct24-index-chat-sheet__backdrop {
display: none !important;
}
body.ct24-index-chat-float-layout .ct24-index-chat-sheet__dock {
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: 0;
min-height: 40px;
padding: 8px var(--ct24-index-addr-card-pad-x, 12px) 10px;
border: none;
border-top: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 0;
/* Keine zweite deckende Fläche — Grifffläche nutzt dasselbe Milchglas wie .panel */
background: transparent !important;
background-color: transparent !important;
cursor: ns-resize;
touch-action: none;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
body.ct24-index-chat-float-layout .ct24-index-chat-sheet__handle-btn {
display: flex !important;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 28px;
margin: 0;
padding: 2px 8px;
border: none;
border-radius: 0;
background: transparent !important;
cursor: ns-resize;
touch-action: none;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
flex-shrink: 1;
}
body.ct24-index-chat-float-layout .ct24-index-chat-sheet__handle-btn:active {
filter: brightness(0.98);
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__handle-btn
.ct24-index-chat-sheet__ws-status {
flex: 0 1 auto;
max-width: 100%;
margin: 0;
padding: 4px 10px;
font-size: 0.72rem;
pointer-events: none;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__handle-btn
.ct24-index-chat-panel__status-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.ct24-index-chat-float-layout .ct24-index-chat-sheet__panel {
position: relative;
z-index: auto;
display: flex;
flex-direction: column;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
/* Obere Außenrundung wie Step-2-Buchungsblock (#ct24IndexStep2Sheet, 22px) */
border-radius: 22px;
box-shadow: none;
border: none;
background: transparent !important;
background-color: transparent !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
overflow: hidden;
box-sizing: border-box;
transition: max-height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease;
max-height: var(--ct24-index-chat-peek-h, 140px);
}
@media (prefers-reduced-transparency: reduce) {
body.ct24-index-chat-float-layout .ct24-index-chat-sheet__panel {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: transparent !important;
background-color: transparent !important;
}
}
/* Pille sitzt translateY(-50%) auf der Kapsel-Oberkante — Panel-overflow:hidden hätte sie oben abgeschnitten */
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel {
overflow: visible !important;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--open {
max-height: min(var(--ct24-index-chat-sheet-open-max, min(46dvh, 420px)), 720px);
box-shadow: none;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--dragging {
transition: none !important;
/* Während Zug: kein Browser-Scroll (Chrome/Android, iOS WKWebView) neben Sheet-Resize */
touch-action: none;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel:not(.ct24-index-chat-sheet__panel--open):not(.ct24-index-chat-sheet__panel--dragging)
.ct24-index-chat-panel__thread {
/* Peek: kein Thread-Streifen — verhindert column-reverse/Clip-Fehler in minimaler Höhe */
flex: 0 0 auto !important;
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
border: none !important;
touch-action: none;
}
/* Pille: wie Griff an Adresskarte unten — hier mittig auf der blauen Oberkante der Nachrichten-Kapsel */
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead {
display: none;
box-sizing: border-box;
min-width: 44px;
width: max-content;
max-width: min(280px, calc(100vw - 36px));
min-height: 28px;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 999px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.08);
color: #0a0a0a;
padding: 5px 10px 5px 9px;
cursor: pointer;
touch-action: manipulation;
user-select: none;
-webkit-tap-highlight-color: transparent;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
appearance: none;
-webkit-appearance: none;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead:focus {
outline: none;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead:focus-visible {
outline: 2px solid rgba(0, 0, 0, 0.35);
outline-offset: 2px;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead:active {
opacity: 0.92;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead-ic {
pointer-events: none;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: currentColor;
line-height: 0;
padding: 0;
margin: 0;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead-ic svg {
width: 16px;
height: 16px;
display: block;
}
#ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead-lbl {
pointer-events: none;
flex: 1 1 auto;
min-width: 0;
max-width: 13rem;
font-family: inherit;
font-size: clamp(12px, 3.2vw, 14px);
font-weight: 600;
letter-spacing: -0.02em;
color: #0a0a0a;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Pille jetzt in der Verbindungszeile statt Status-Text ("Verbunden"). */
#ct24IndexChatWsStatus .ct24-index-chat-panel__status-pill-slot {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0 !important;
pointer-events: auto;
max-width: 100%;
flex: 0 1 auto;
min-width: 0;
}
#ct24IndexChatWsStatus .ct24-index-chat-panel__sheet-lead {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
margin: 0 !important;
display: inline-flex !important;
vertical-align: middle;
min-height: 27px;
height: auto;
width: max-content;
max-width: min(280px, calc(100vw - 44px));
padding: 4px 9px 4px 8px;
border: 1.5px solid var(--ct24-chat-send, #2563eb) !important;
background: #ffffff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.08);
z-index: auto;
border-radius: 999px;
cursor: pointer;
}
#ct24IndexChatWsStatus .ct24-index-chat-panel__sheet-lead-ic {
color: var(--ct24-chat-send, #2563eb);
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
#ct24IndexChatWsStatus .ct24-index-chat-panel__sheet-lead-lbl {
font-size: clamp(11px, 2.9vw, 13px);
font-weight: 600;
letter-spacing: -0.02em;
color: #0a0a0a;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) {
body:not(.ct24-index-ux--addr-only) #ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead {
background: #1a1f26;
border-color: rgba(255, 255, 255, 0.12);
color: #f1f5f9;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
body:not(.ct24-index-ux--addr-only) #ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead-lbl {
color: #f1f5f9;
}
body:not(.ct24-index-ux--addr-only) #ct24IndexChatPanel.ct24-index-chat-panel .ct24-index-chat-panel__sheet-lead:focus-visible {
outline-color: rgba(255, 255, 255, 0.45);
}
}
/* Schritt 1 Chat: Griff auf Oberkante der blauen Eingabe-Kapsel — gleiche Zahlen wie #indexFahrerkarteSheetHandle (top:-10px, translateX(-50%)) */
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose {
padding: 9px var(--ct24-index-addr-card-pad-x, 12px) calc(11px + env(safe-area-inset-bottom, 0px)) !important;
}
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner {
position: static;
/* Mehr Padding oben, weniger unten → Zeile optisch nach unten (kein zusätzliches translateY nach oben) */
padding: 9px var(--ct24-index-addr-card-pad-x, 12px) 3px var(--ct24-index-addr-card-pad-x, 12px) !important;
}
/* Nur Senden + Burger etwas nach oben zum Textfeld ausrichten */
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner
.ct24-index-chat-panel__send,
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner
.ct24-index-chat-panel__call,
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner
.ct24-index-chat-panel__menu {
transform: translateY(-2px);
}
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner
.ct24-index-chat-panel__send:active,
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner
.ct24-index-chat-panel__call:active,
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner
.ct24-index-chat-panel__menu:active {
transform: translateY(-2px) scale(0.94);
}
/* Zugeklappt: Verlauf aus, Pille + Eingabe + blauer Kapselrand + Senden; Kapsel-Innenmaße unverändert */
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel:not(.ct24-index-chat-sheet__panel--open):not(.ct24-index-chat-sheet__panel--dragging)
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
flex: 0 0 auto !important;
padding: 9px var(--ct24-index-addr-card-pad-x, 12px) 10px !important;
overflow: visible;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel:not(.ct24-index-chat-sheet__panel--open):not(.ct24-index-chat-sheet__panel--dragging)
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose
.ct24-index-chat-panel__input {
max-height: 44px !important;
overflow-y: auto !important;
}
/* Gast-Chat: Position nur noch über --ct24-index-chat-top unter dem Header (keine KB-Anker-/compose-fs-Zweige mehr). */
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel:not(.ct24-index-chat-sheet__panel--open):not(.ct24-index-chat-sheet__panel--dragging)
> .ct24-index-chat-panel {
border-top: none !important;
box-shadow: none !important;
}
/* Dock-Pille darf über den Thread-Rand überstehen; Thread selbst clippt horizontal */
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel
> #ct24IndexChatPanel.ct24-index-chat-panel {
overflow: visible !important;
min-height: 0;
}
/* Pille im Eingabebereich — Peek, offen & Ziehen: mittig auf oberer blauer Randlinie von .compose-inner (Tastatur-Sonderfall überschreibt position) */
body.ct24-index-chat-float-layout
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-cap
> .ct24-index-chat-sheet__dock {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 2px 10px 6px !important;
min-height: 0 !important;
border-top: none !important;
justify-content: center !important;
align-items: center !important;
z-index: 5 !important;
background: transparent !important;
cursor: ns-resize !important;
touch-action: none !important;
}
body.ct24-index-chat-float-layout
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-cap
> .ct24-index-chat-sheet__dock
.ct24-index-chat-sheet__handle-btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--open
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-cap
> .ct24-index-chat-sheet__dock
#ct24IndexChatWsStatus.ct24-index-chat-panel__status,
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--dragging
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-cap
> .ct24-index-chat-sheet__dock
#ct24IndexChatWsStatus.ct24-index-chat-panel__status {
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
gap: 0 !important;
}
body.ct24-index-chat-float-layout
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-cap
> .ct24-index-chat-sheet__dock
#ct24IndexChatWsStatus
.ct24-index-chat-panel__status-dot {
display: none !important;
}
body.ct24-index-chat-float-layout
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-cap
> .ct24-index-chat-sheet__dock
#ct24IndexChatSheetLead.ct24-index-chat-panel__sheet-lead {
box-sizing: border-box !important;
}
body.ct24-index-chat-float-layout
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-cap
> .ct24-index-chat-sheet__dock
#ct24IndexChatWsStatus.ct24-index-chat-sheet__ws-status {
padding: 0 !important;
}
/* Kapsel: deckend weiß — Eingabezeile im Peek; kein zusätzlicher Schatten (Rand bleibt sichtbar) */
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel:not(.ct24-index-chat-sheet__panel--open):not(.ct24-index-chat-sheet__panel--dragging)
#ct24IndexChatPanel.ct24-index-chat-panel
.ct24-index-chat-panel__compose-inner {
background: #ffffff !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--open
#ct24IndexChatThread,
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--dragging
#ct24IndexChatThread {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
box-sizing: border-box !important;
padding: 14px 12px 16px !important;
margin: 0 10px 12px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
border-radius: 16px !important;
visibility: visible !important;
pointer-events: auto !important;
touch-action: pan-y;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--dragging
.ct24-index-chat-panel__compose {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--dragging
> .ct24-index-chat-panel {
flex: 1 1 auto;
min-height: 0;
}
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--open
> .ct24-index-chat-panel {
flex: 1 1 auto;
min-height: 0;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--open
.ct24-index-chat-panel__compose {
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Unter dem Verlauf: Griff-Balken + Hinweis zum Höhenziehen (Peek ausgeblendet) */
.ct24-index-chat-sheet__thread-foot-affordance {
display: none;
box-sizing: border-box;
flex: 0 0 auto;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel:not(.ct24-index-chat-sheet__panel--open):not(.ct24-index-chat-sheet__panel--dragging)
.ct24-index-chat-sheet__thread-foot-affordance {
display: none !important;
}
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--open
.ct24-index-chat-sheet__thread-foot-affordance,
body.ct24-index-chat-float-layout
.ct24-index-chat-sheet__panel.ct24-index-chat-sheet__panel--dragging
.ct24-index-chat-sheet__thread-foot-affordance {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 6px 14px calc(10px + env(safe-area-inset-bottom, 0px));
margin: 2px 10px 0;
cursor: ns-resize;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.ct24-index-chat-sheet__thread-foot-affordance-bar {
width: 42px;
height: 5px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.28);
}
.ct24-index-chat-sheet__thread-foot-affordance-lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
color: rgba(15, 23, 42, 0.52);
text-align: center;
line-height: 1.3;
max-width: 14rem;
}
@media (prefers-reduced-motion: reduce) {
body.ct24-index-chat-float-layout .ct24-index-chat-sheet__panel {
transition: none;
}
}
/* Schritt 1: nur Adress-Block: freischwebend, Rundung/Rand wie Chat-Sheet-Kapsel */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
#indexBottomChromeStack
> .index-loc-shell.location-card {
border-radius: var(--ct24-ui-shell-radius-lg);
box-shadow: 0 10px 32px rgba(15, 23, 42, 0.1);
border: 1.5px solid var(--ct24-ui-accent-ring);
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) #indexBottomChromeStack #ct24IndexStep2Sheet.ct24-index-step2-sheet {
margin-top: auto;
border-top-left-radius: 22px !important;
border-top-right-radius: 22px !important;
isolation: isolate;
}
/* Step 1: Step-2-Sheet bleibt sichtbar (Fahrerkarte/Zahlung/Jetzt/Später). */
/* Schritt 1 (nur Adressen): Chrome im normalen Fluss des Hero-Stacks (#indexUiStack), nicht bottom:fixed */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) #indexBottomChromeStack {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100%;
max-width: 560px;
margin-left: auto;
margin-right: auto;
flex: 1 1 auto;
min-height: 0;
justify-content: flex-end;
align-self: center;
z-index: auto;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
box-sizing: border-box;
background: transparent;
transition: none;
}
/* Schritt 1: Fahrerkarte + Zahlart/Jetzt/Später als eigenes Bottom-Dock am unteren Rand. */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
#indexBottomChromeStack
#ct24IndexStep2Sheet.ct24-index-step2-sheet {
position: fixed !important;
left: calc(env(safe-area-inset-left, 0px) + var(--ct24-index-booking-dock-inset-x, 22px)) !important;
right: calc(env(safe-area-inset-right, 0px) + var(--ct24-index-booking-dock-inset-x, 22px)) !important;
bottom: var(--ct24-fahrgast-nav-dock-px, 72px) !important;
top: auto !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
border-top-left-radius: 22px !important;
border-top-right-radius: 22px !important;
border-bottom-left-radius: 28px !important;
border-bottom-right-radius: 28px !important;
z-index: 55 !important;
}
/* Float-Chat: Fahrerkarte separat unter Chat — Buchungsfuß bleibt am Dock (addr-only/trip wie zuvor); siehe ct24-driver-card-sheet.css (#indexFahrerkarteHome). */
/* Kein zusätzliches KB-Inset — siehe addr-collapsed Chrome-Kommentar */
/* Adress-„Karte“: innen etwas Luft, nicht zu straff */
body.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page) #indexBottomChromeStack > .index-loc-shell.location-card {
display: block !important;
--ct24-loc-abhol-ziel-pad: 5px;
max-width: 560px;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
/* Über dem Chat-Band (z-index 1), Chat-Griff z-50 bleibt bedienbar */
z-index: 2;
/* unten mehr Luft: Griff liegt wie Fahrerkarten-Handle halb ausserhalb (bottom:-10px) */
padding: 8px var(--ct24-index-addr-card-pad-x, 14px) 26px;
box-sizing: border-box;
}
/* Schritt 1: Chat-Band zwischen Adresskarte und Buchungsdock — Panel ohne extra Karten-Rahmen oben. */
body.ct24-index-chat-float-layout
#ct24IndexChatSheetRoot.ct24-index-chat-sheet-root
> .ct24-index-chat-sheet__panel
> .ct24-index-chat-panel {
border-top: none;
border-radius: 0;
box-shadow: none;
}
body:not(.ct24-is-buchung-page) #indexUiStack .loc-row {
padding-top: 6px;
padding-bottom: 6px;
border-bottom-color: var(--ct24-taxi-ui-border);
}
body:not(.ct24-is-buchung-page) #indexUiStack .index-loc-price-grid {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-color: transparent;
border-left: none;
border-right: none;
}
body:not(.ct24-is-buchung-page) #indexUiStack .index-loc-price-col + .index-loc-price-col {
border-left: 1px solid rgba(15, 23, 42, 0.07);
}
body:not(.ct24-is-buchung-page) #indexUiStack .index-loc-price-col__label {
font-size: var(--ct24-mob-label);
color: var(--ct24-rh-text-secondary);
}
body:not(.ct24-is-buchung-page) #indexUiStack .index-loc-price-col__value {
font-size: var(--ct24-mob-price-col);
color: var(--ct24-rh-text);
}
body:not(.ct24-is-buchung-page) #indexUiStack .index-loc-price-col__sub {
color: var(--ct24-rh-text-tertiary);
}
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row.pickup,
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row.drop {
padding-top: 3px;
padding-bottom: 3px;
min-height: 38px;
}
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row:first-child {
padding-top: 0;
}
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row:last-child {
padding-bottom: 0;
}
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row.pickup {
padding-bottom: 0;
border-bottom: none;
}
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row.drop {
padding-top: 0;
padding-bottom: 0;
align-items: center;
}
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row.drop .loc-field input[type="text"] {
height: 36px;
min-height: 36px;
line-height: 1.3;
padding: 0;
box-sizing: border-box;
}
/* Chat-Griff: Sichtbarkeit/Layout kommt aus ct24-driver-card-sheet.css (wie Fahrerkarten-Handle) */
#indexDestChatGriff.index-loc-sheet-handle--chat {
display: none;
}
/* Schritt 1: gleiche Pille liegt oberhalb der Chat-Kapsel — Griff an der Karte aus */
body.ct24-driver-sheet-v2.ct24-index-ux--addr-only:not(.ct24-trip-storno-card):not(.ct24-is-buchung-page)
#indexBottomChromeStack
> .index-loc-shell.location-card
#indexDestChatGriff.index-loc-sheet-handle--chat {
display: none !important;
}
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row.pickup .loc-field input[type="text"] {
height: 36px;
min-height: 36px;
line-height: 1.3;
padding: 0;
box-sizing: border-box;
}
body:not(.ct24-is-buchung-page) #indexUiStack .index-waypoints-mount .loc-row.waypoint {
padding-top: 3px;
padding-bottom: 3px;
min-height: 38px;
}
body:not(.ct24-is-buchung-page) #indexUiStack .index-waypoints-mount .loc-row.waypoint .loc-field input[type="text"] {
height: 36px;
min-height: 36px;
line-height: 1.3;
padding: 0;
box-sizing: border-box;
}
#indexUiStack .index-loc-shell {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
flex: 0 0 auto;
width: 100%;
}
#indexBottomSheetMount {
/* Fragment kurz im DOM, danach leer — Buchungs-UI liegt in Hosts */
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-self: stretch;
width: 100%;
}
/*
* Ohne ct24-index-bottom-sheet.css am Index: kein fixes Sheet / Enter-Animation / Aufwärts-Schatten
* (sonst kurz eine helle Kante über der Karte), bis ct24RelocateBookingChromeFromBottomSheet() #bottomSheet entfernt.
*/
#indexBottomSheetMount .bottom-sheet:not(ion-modal) {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
max-height: none !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
overflow: visible !important;
animation: none !important;
box-shadow: none !important;
border: none !important;
z-index: auto !important;
}
/* Nach Entfernen von #bottomSheet: Mount nicht mehr im Layout; kein Sheet-Platzhalter */
body.ct24-index-no-ion-bottom-sheet #indexBottomSheetMount {
display: none !important;
}
/*
* Index ohne Bottom-Sheet: #sheetBody ist nur noch DOM-Wrapper; Inhalt ist per CSS auf Buchung ausgeblendet —
* ohne display:none bleibt eine leere „Sheet“-Fläche (alte .sheet-body max-height/flex).
*/
body.ct24-is-buchung-page.ct24-index-no-ion-bottom-sheet #sheetBody {
display: none !important;
}
body.ct24-index-no-ion-bottom-sheet #sheetBody.sheet-body {
flex: none !important;
max-height: none !important;
min-height: 0;
overflow: visible !important;
-webkit-overflow-scrolling: auto;
transition: none;
}
/* Index: fixierter Block unten — volle Breite; über unterer Tabbar (--ct24-fahrgast-nav-dock-px, ct24-index-fahrgast-nav.js) */
.index-bottom-chrome-stack {
--ct24-index-chrome-inner-max: 100%;
position: fixed !important;
/* Nur Tabbar-Offset (JS misst ggfl. Visual Viewport); kein --ct24-kb-inset — Android: fixed sitzt schon am sichtbaren Boden */
bottom: var(--ct24-fahrgast-nav-dock-px, 72px) !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
z-index: 48;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
/* Keine Lücke/Filmstreifen: volle opake Fläche bis zur Kante */
background: var(--ct24-rh-surface, #f1f5f9);
/* Sanfter Übergang, wenn Tastatur auf-/zugeht. */
transition: bottom 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
max-width: none;
margin: 0;
padding-left: calc(env(safe-area-inset-left, 0px) + var(--ct24-index-booking-dock-inset-x, 22px));
padding-right: calc(env(safe-area-inset-right, 0px) + var(--ct24-index-booking-dock-inset-x, 22px));
/* Kein padding-bottom: Safe Area steckt in --ct24-fahrgast-nav-dock-px (Tabbar-Höhe) + .booking-footer-Padding — sonst Lücke über der Tabbar */
padding-bottom: 0;
box-sizing: border-box;
pointer-events: none;
transform: none;
}
/* Index: kein weißlicher/grauer Filmstreifen um Dock-Inset — Karte scheint durch */
body:not(.ct24-is-buchung-page) #indexBottomChromeStack.index-bottom-chrome-stack {
background: transparent;
}
.index-bottom-chrome-stack > * {
pointer-events: auto;
}
/* Buchungsdock über Karten-Hotspots; bei offenem Menü unter dem Drawer (z-index 50) bleiben */
body:not(.ct24-is-buchung-page):not(.index-menu-open) #indexBottomChromeStack.index-bottom-chrome-stack {
z-index: 55 !important;
}
body.ct24-index-chat-float-layout:not(.index-menu-open)
#indexBottomChromeStack.index-bottom-chrome-stack {
z-index: 72 !important;
}
body.index-menu-open:not(.ct24-is-buchung-page) #indexBottomChromeStack.index-bottom-chrome-stack {
z-index: 44 !important;
}
body:not(.ct24-is-buchung-page) #ct24IndexStep2Sheet #bookingModeSegmentWrap.booking-mode-toolbar {
position: relative;
z-index: 3;
pointer-events: auto;
}
.index-booking-footer-host {
width: 100%;
max-width: var(--ct24-index-chrome-inner-max, 560px) !important;
flex: 0 0 auto;
align-self: center;
pointer-events: auto;
box-sizing: border-box;
position: static !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Initial-load Flicker vermeiden: auf Index standardmäßig versteckt, JS blendet bei echtem Status ein. */
body:not(.ct24-is-buchung-page) .index-booking-footer-host {
display: none;
}
body:not(.ct24-is-buchung-page) .index-booking-footer-host.index-booking-footer-host--show {
display: block;
}
.index-booking-footer-host.index-booking-footer-host--ghost-hidden {
display: none !important;
}
#indexBookingFooterHost {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
}
/* Handle immer aus dem Flex-Flow nehmen — verhindert Layout-Einfluss vor Script-Load */
#indexBookingFooterHandle {
position: absolute;
pointer-events: none;
}
body.ct24-booking-footer-drag-v1 #indexBookingFooterHandle {
pointer-events: auto;
}
body:not(.ct24-is-buchung-page) #indexUiStack .index-loc-shell {
display: none !important;
}
/* Griff auch ohne Status sichtbar lassen (Host kann trotzdem per JS ausgeblendet werden). */
/* ID nötig: globales .booking-footer (weiter unten) setzt border-top / margin-top — sonst bleibt die Sheet-Linie */
#indexBookingFooterHost .booking-footer {
margin: 0 !important;
/* Dock liegt über Tabbar; volle Safe-Area hier erzeugte eine hohe „Leerzone“ unter den Tabs — Tabbar hat eigenes Inset */
padding: 0 var(--ct24-sheet-pad-x, 12px) 12px !important;
border: none !important;
outline: none;
background: var(--ct24-rh-surface);
box-shadow: none;
position: relative;
flex-shrink: 0;
}
#indexBookingFooterHost #bookingFooterPriceRow {
margin: 0;
width: 100%;
min-height: 0;
flex-shrink: 0;
/* Kein interner Gap: verhindert Lücke wenn PriceLabel eingeblendet wird */
gap: 0 !important;
}
/* Im Host ist das PriceLabel visuell redundant (Info steht schon im Grid-Kopf).
Wenn es sichtbar wird (syncBookingFooterPriceRowLabel), entsteht sonst eine ~20px-Lücke. */
#indexBookingFooterHost #bookingFooterPriceLabel {
display: none !important;
}
/* Hint und Guthaben-Toggle ebenfalls im Host-Kontext nicht anzeigen → kein Höhensprung */
#indexBookingFooterHost #indexPriceHint {
display: none !important;
}
/* Unterer Rahmen des Preisgrids entfernen → nahtloser Übergang zur Buchungsleiste */
#indexBookingFooterHost .index-loc-price-grid {
border-bottom: none;
}
#indexBookingFooterHost #indexBookingRouteHost {
width: 100%;
margin: 0;
}
#indexBookingFooterHost #indexBookingRouteHost .loc-row {
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 0;
padding: 8px 10px;
margin: 0;
}
#indexBookingFooterHost #indexBookingRouteHost .loc-row.pickup {
padding-bottom: 0;
border-bottom: none;
}
#indexBookingFooterHost #indexBookingRouteHost .loc-row.drop {
padding-top: 0;
border-top: none;
}
#indexBookingFooterHost #indexBookingRouteHost #indexWaypointsMount {
margin: 0;
}
#indexBookingFooterHost #indexBookingRouteHost .loc-waypoint-row {
display: flex;
justify-content: center;
margin: -1px 0 0;
padding: 0;
height: 0;
border-top: 1px solid rgba(15, 23, 42, 0.08);
border-bottom: none;
}
#indexBookingFooterHost #indexBookingRouteHost .loc-row:last-child {
margin-bottom: 0;
}
#indexBookingFooterHost #indexBookingRouteHost .loc-row:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-top: none;
}
#indexBookingFooterHost #indexBookingRouteHost .loc-row:last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#indexBookingFooterHost .booking-tabs::after {
content: none;
}
#indexBookingFooterHost .booking-footer::after { content: none; }
#indexBookingFooterHost #bookingBoxLater {
border-top: none !important;
box-shadow: none;
}
#indexBookingFooterHost .booking-tabs {
row-gap: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Index: booking-tabs als Grid hat Phantom-Zeilen für leere Areas (tablater/tabnow sind
innerhalb #bookingModeSegmentWrap, nicht direkte Grid-Kinder) → auf flex umschalten */
body:not(.ct24-is-buchung-page) #indexBookingFooterHost .booking-tabs {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
grid-template-areas: none !important;
grid-template-rows: none !important;
grid-template-columns: none !important;
}
body:not(.ct24-is-buchung-page) #indexBookingFooterHost #bookingModeSegmentWrap.booking-mode-toolbar {
margin-top: 0 !important;
}
.index-buchung-fahrer-host {
width: 100%;
max-width: 560px;
margin: 0 auto;
box-sizing: border-box;
}
/* —— Fahrgast-Index: untere Tabbar, Preis unter Footer, Karte-only Fahrerzeile —— */
#indexFahrgastBottomNav.index-fahrgast-tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
/* Über Ionic-Modal/Backdrop (typ. ~20xxx), damit Tabs beim offenen Sheet erreichbar bleiben */
z-index: 25010;
display: flex;
align-items: stretch;
justify-content: space-around;
gap: 4px;
min-height: var(--ct24-fahrgast-tabbar-h);
padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
box-sizing: border-box;
max-width: none;
margin: 0 auto;
width: 100%;
background: var(--ct24-rh-surface-glass);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border-top: 1px solid var(--ct24-rh-border);
box-shadow: var(--ct24-rh-shadow-sheet-up);
pointer-events: auto;
}
.index-fahrgast-tabbar__btn {
flex: 1 1 0;
min-width: 0;
max-width: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
margin: 0;
padding: 4px 2px;
border: none;
border-radius: 12px;
background: transparent;
color: var(--ct24-rh-text-tertiary);
font: inherit;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color 0.15s ease, background 0.15s ease;
}
.index-fahrgast-tabbar__btn .index-fahrgast-tabbar__ic {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.88;
}
.index-fahrgast-tabbar__btn.is-active {
color: var(--ct24-index-appbar-text);
background: rgba(37, 99, 235, 0.12);
}
.index-fahrgast-tabbar__btn.is-active .index-fahrgast-tabbar__ic {
color: var(--ct24-ui-chat-grad-b);
opacity: 1;
}
.index-fahrgast-tabbar__lbl {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.index-fahrgast-tabbar__lbl--twoline {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
white-space: normal;
line-height: 1.05;
font-size: 9px;
max-width: 4.8rem;
text-align: center;
overflow: visible;
text-overflow: clip;
}
.index-fahrgast-tabbar__lbl-line {
display: block;
max-width: 100%;
}
ion-modal.index-ion-nav-modal {
--border-radius: 16px 16px 0 0;
--box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
--width: 100%;
--max-width: 100%;
/* Sheet darf nicht unter die Tabbar rutschen (Breakpoint-Höhen beziehen sich aufs Modal) */
--height: calc(min(100vh, 100dvh) - var(--ct24-fahrgast-nav-dock-px, 72px));
--max-height: calc(min(100vh, 100dvh) - var(--ct24-fahrgast-nav-dock-px, 72px));
z-index: 20000;
}
/* Backdrop endet oberhalb der Tabbar — Bereich der Navigation bleibt sichtbar/tappbar */
ion-modal.index-ion-nav-modal::part(backdrop) {
bottom: var(--ct24-fahrgast-nav-dock-px, 72px);
}
/* Scrollbereich nicht über die reservierte Tabbar hinaus (ohne extra margin-bottom — das erledigt --height) */
ion-modal.index-ion-nav-modal::part(content) {
max-height: calc(min(100vh, 100dvh) - var(--ct24-fahrgast-nav-dock-px, 72px)) !important;
}
.index-ion-mount {
min-height: 40vh;
}
/* Location card — Mockup: weiße Karte, weicher Schatten */
.location-card {
position: static;
width: 100%;
min-width: 0;
background: var(--surface);
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
/* Muss zu padding-left/right passen — für randbündige Kinder (Preiszeile, Toolbar) */
--ct24-loc-pad-x: 12px;
padding: 10px var(--ct24-loc-pad-x);
overflow: visible;
}
/* Fahrerkarte: Dock direkt im Chrome-Stack (kein äußerer Content-Container) */
.index-fahrerkarte-dock:not(.index-fahrerkarte-dock--embedded) {
position: fixed;
left: 50%;
right: auto;
transform: translateX(-50%);
bottom: max(10px, calc(var(--ct24-fahrgast-nav-dock-px, 72px) + 8px));
width: min(560px, calc(100vw - 24px));
max-width: 560px;
box-sizing: border-box;
margin: 0;
padding: 0;
z-index: 24910;
pointer-events: none;
}
.index-fahrerkarte-dock:not(:has(#fahrerkarte:not([hidden]))) {
display: none;
}
body.ct24-is-buchung-page .index-fahrerkarte-dock {
display: none !important;
}
.index-fahrerkarte-dock #fahrerkarte:not([hidden]) {
pointer-events: auto;
}
.index-fahrerkarte-dock .fahrerkarte.fahrerkarte--haupt.fahrerkarte--leiste-kompakt.fahrerkarte--einzeile {
margin: 0;
box-shadow: var(--ct24-rh-shadow-md);
border: 1px solid var(--ct24-rh-border-subtle);
}
/* Index-Sheet: Fahrerzeile nur anzeigen, wenn Karte im Sheet hängt (bei Buchung) */
.index-sheet-fahrerkarte-leiste:not(:has(#fahrerkarte:not([hidden]))) {
display: none !important;
border-bottom: none !important;
}
/* map-error-banner entfernt */
.loc-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--ct24-rh-border-subtle);
min-width: 0;
}
/* Erste/letzte Zeile direkt an den Card-Rand ziehen */
.location-card .loc-row:first-child { padding-top: 0; }
.location-card .loc-row:last-child { padding-bottom: 0; }
/* Sichtbarer Abstand zwischen Abhol- und Zielzeile (Zwischenstopps bleiben eigene Zeilen dazwischen) */
.location-card .loc-row.pickup { padding-bottom: var(--ct24-loc-abhol-ziel-pad); }
.location-card .loc-row.drop { padding-top: var(--ct24-loc-abhol-ziel-pad); }
/* Zwischenstopps: Zeilen werden per JS eingefügt, Wrapper soll das Karten-Layout nicht stören */
.index-waypoints-mount {
display: block;
}
.index-waypoints-mount:empty {
display: none;
}
.index-waypoints-mount .loc-row.waypoint {
padding-top: 4px;
padding-bottom: 4px;
min-height: 42px;
border-bottom: none;
}
/* Geschätzter Fahrpreis: Ionic/iOS-inspiriert (Inset-„Item“, Icon-Slot, Titel + Hint, Betrag rechts) */
.index-loc-price-row.index-loc-price-ion {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
width: auto;
min-width: 0;
margin-top: 0;
margin-left: calc(-1 * var(--ct24-loc-pad-x, 12px));
margin-right: calc(-1 * var(--ct24-loc-pad-x, 12px));
padding: 0;
box-sizing: border-box;
min-height: 64px;
border-radius: 0;
background: transparent;
border: none;
-webkit-tap-highlight-color: transparent;
}
/* ─── Shared Grid Template für Preiszeile + Button‑Zeile ──────────────
Beide Zeilen der Buchungskarte teilen das gleiche 3-Spalten-Template:
Spalte 1 (pay) ↔ Fixpreis | Bar/Karte-Button
Spalte 2 (mid) ↔ Guthaben (verw.) | Jetzt buchen
Spalte 3 (end) ↔ Zu zahlen | Später
Dadurch fluchten die 2 Spalten-Trennlinien exakt mit den 2 Button-Kanten.
*/
.location-card,
.index-loc-shell.location-card {
--ct24-card-col-pay: clamp(5.5rem, 27vw, 8.75rem);
--ct24-card-col-mid: 1fr;
--ct24-card-col-end: 1fr;
}
.index-loc-price-grid {
display: grid;
grid-template-columns: var(--ct24-card-col-pay, clamp(5.5rem, 27vw, 8.75rem)) var(--ct24-card-col-mid, 1fr) var(--ct24-card-col-end, 1fr);
gap: 0;
width: 100%;
min-width: 0;
box-sizing: border-box;
border-radius: 0;
background: var(--ct24-rh-surface);
border: 1px solid var(--ct24-rh-border);
border-left: none;
border-right: none;
overflow: hidden;
}
.index-loc-price-col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
justify-content: flex-start;
align-items: center;
text-align: center;
padding: 8px 7px;
box-sizing: border-box;
}
.index-loc-price-col + .index-loc-price-col {
border-left: 1px solid var(--ct24-rh-border);
}
.index-loc-price-col--guthaben {
align-items: stretch;
text-align: left;
justify-content: center;
}
/* Eine Zeile: Titel Guthaben | Status | verwenden + Toggle (mittlere Spalte). */
.index-loc-cashback-primer--oneLine {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 5px 6px;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.index-loc-cashback-primer__h {
flex: 0 0 auto;
font-size: var(--ct24-mob-label);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--ct24-rh-text-secondary);
white-space: nowrap;
}
.index-loc-cashback-primer--oneLine .index-loc-cashback-primer__trip {
display: block;
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 0;
font-size: var(--ct24-mob-body);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f766e;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: unset;
line-clamp: unset;
-webkit-box-orient: initial;
}
.index-loc-cashback-primer__trip--muted {
color: #64748b;
font-weight: 600;
}
.index-loc-cashback-primer--oneLine .index-loc-cashback-primer__use {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 4px 6px;
flex: 0 0 auto;
min-width: 0;
box-sizing: border-box;
}
/* Fallback wenn Modul .oneLine nicht gesetzt (andere Einstiege) */
.index-loc-cashback-primer:not(.index-loc-cashback-primer--oneLine) {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
width: 100%;
}
.index-loc-cashback-primer:not(.index-loc-cashback-primer--oneLine) .index-loc-cashback-primer__trip {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.index-loc-cashback-primer__use {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
box-sizing: border-box;
}
.index-loc-cashback-primer:not(.index-loc-cashback-primer--oneLine) .index-loc-cashback-primer__use {
width: 100%;
}
.index-loc-cashback-primer__use[hidden] {
display: none !important;
}
.index-loc-cashback-primer__use-label {
font-size: var(--ct24-mob-body);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ct24-rh-text-secondary);
line-height: 1.2;
white-space: nowrap;
flex: 0 0 auto;
}
.index-loc-cashback-primer__toggle {
margin: 0;
flex: 0 0 auto;
}
.index-loc-price-col--guthaben .index-loc-price-col__amount-row {
display: none;
}
/* Anwendbar-Zeile: Sichtbarkeit per hidden-Attribut (syncBookingPriceMeta), nicht per fixem display:none. */
.index-loc-price-col--guthaben #indexPriceColRedeemValue[hidden],
.index-loc-price-col--guthaben .index-loc-price-col__sub#indexPriceColRedeemValue[hidden] {
display: none !important;
}
.index-loc-price-col--guthaben #indexPriceColRedeemValue:not([hidden]),
.index-loc-price-col--guthaben .index-loc-price-col__sub#indexPriceColRedeemValue:not([hidden]) {
display: block !important;
}
.index-loc-price-col--end {
align-items: center;
text-align: center;
}
.index-loc-price-col__label {
font-size: var(--ct24-mob-label);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ct24-rh-text-secondary);
line-height: 1.15;
}
.index-loc-price-col__value {
font-size: var(--ct24-mob-price-col);
font-weight: 800;
line-height: 1.08;
color: var(--ct24-rh-text);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.index-loc-price-col__sub {
font-size: var(--ct24-mob-label);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ct24-rh-text-tertiary);
max-width: 100%;
}
.index-loc-price-col--guthaben .index-loc-price-col__sub {
color: #0f766e;
}
.index-loc-price-col--end .index-loc-price-col__sub {
color: #475569;
}
.index-loc-price-col--end #indexPriceColMinusValue {
color: #0f766e;
}
.index-loc-price-ion__toggle {
display: none;
align-items: center;
gap: 0;
margin-top: 1px;
cursor: pointer;
user-select: none;
}
.index-loc-price-ion__toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.index-loc-price-ion__toggle-track {
position: relative;
width: 34px;
height: 20px;
border-radius: 999px;
background: #cbd5e1;
transition: background 0.18s ease;
flex: 0 0 auto;
}
.index-loc-price-ion__toggle-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.24);
transition: transform 0.18s ease;
}
.index-loc-price-ion__toggle input:checked + .index-loc-price-ion__toggle-track {
background: #10b981;
}
.index-loc-price-ion__toggle input:checked + .index-loc-price-ion__toggle-track::after {
transform: translateX(14px);
}
.index-loc-price-ion__toggle.is-disabled {
opacity: 0.55;
cursor: default;
}
.index-loc-price-ion__hint {
display: none;
font-size: 12px;
font-weight: 500;
line-height: 1.22;
letter-spacing: -0.01em;
color: #64748b;
text-align: center;
padding: 6px 7px 0;
box-sizing: border-box;
}
.index-loc-price-ion__hint:not([hidden]) {
display: block;
}
.index-loc-price-row.index-loc-price-ion:has(#priceEstimate.price-val--placeholder) .index-loc-price-ion__hint { display: none; }
.index-loc-price-row.index-loc-price-ion:has(#indexLocGuthabenUseRow:not([hidden])) .index-loc-price-ion__toggle {
display: inline-flex;
}
.location-card .index-loc-price-ion .booking-footer-price-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.location-card .index-loc-price-ion .booking-footer-price-label[hidden] {
display: none !important;
}
.location-card .price-val--loc-card {
display: inline-block;
font-size: var(--ct24-mob-price-hero);
font-weight: 800;
line-height: 1.08;
color: var(--ct24-rh-text);
letter-spacing: -0.028em;
font-variant-numeric: tabular-nums;
text-align: center;
}
.location-card .price-val--loc-card.price-val--flash {
animation: ct24-price-flash 0.22s ease;
}
.location-card .price-val--loc-card.price-val--placeholder {
font-size: var(--ct24-mob-price-placeholder);
font-weight: 600;
color: var(--ct24-rh-placeholder);
letter-spacing: -0.01em;
}
@keyframes ct24-price-flash {
0% { transform: translateY(1px); opacity: 0.72; }
100% { transform: translateY(0); opacity: 1; }
}
.loc-row:last-of-type { border-bottom: none; }
.loc-field {
flex: 1 1 0;
min-width: 0;
}
.loc-field input[type="text"] {
width: 100%;
height: 38px;
margin-bottom: 0;
border: 0;
background: transparent;
border-radius: 0;
padding: 0;
font-size: 15px;
color: var(--ct24-rh-text);
}
.loc-field input[type="text"]::placeholder {
color: var(--ct24-rh-placeholder);
}
.loc-field input[type="text"].ct24-field-input--error {
background: #fff1f2;
box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.82);
border-radius: 10px;
padding: 0 10px;
}
.ct24-inline-error {
margin-top: 4px;
font-size: 12px;
line-height: 1.3;
font-weight: 600;
color: #b91c1c;
}
.ct24-inline-error[hidden] {
display: none !important;
}
.loc-gps {
width: 40px;
height: 40px;
flex-shrink: 0;
border: none;
border-radius: 10px;
background: var(--ct24-taxi-ui-green-soft);
color: var(--ct24-rh-accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.loc-gps svg { width: 20px; height: 20px; }
.loc-gps:active { opacity: 0.88; }
/* Ziel: Stadt / Flughafen — kompakte Icon-Buttons wie Mockup */
.loc-dest-switch {
display: flex;
flex-direction: row;
flex-shrink: 0;
align-items: center;
gap: 6px;
border: none;
background: transparent;
box-sizing: border-box;
}
.loc-pickup-actions {
gap: 0;
}
.loc-dest-switch__btn {
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: none;
border-radius: 10px;
background: var(--ct24-rh-control-bg);
color: var(--ct24-rh-text-tertiary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transition: background 0.15s ease, color 0.15s ease;
}
.loc-dest-switch__btn + .loc-dest-switch__btn {
box-shadow: none;
}
.loc-dest-switch__btn:hover {
background: var(--ct24-rh-control-bg-hover);
}
.loc-dest-switch__btn:active {
opacity: 0.88;
transform: scale(0.97);
}
.loc-dest-switch__btn--active {
background: var(--ct24-rh-control-bg-hover);
color: var(--ct24-rh-text);
}
/* Abholung: nur GPS-Icon, kein Kachel-Hintergrund */
.loc-dest-switch__btn--gps-pickup {
background: transparent;
color: var(--ct24-taxi-ui-green, #37a800);
box-shadow: none;
}
.loc-dest-switch__btn--gps-pickup:hover {
background: transparent;
color: #2c8a00;
}
.loc-dest-switch__btn--gps-pickup:active {
background: transparent;
}
/* GPS-Icon füllt rechts bündig die volle Zeilenhöhe + rechte obere Kartenrundung */
/* Pickup-/Drop-Zeile bekommen einen eigenen Stacking-Kontext, damit die
Autocomplete-Vorschlagsliste (.ct24-mbx-ac-list) im Pickup-Feld IMMER über
der Zielzeile liegt — auch wenn die Zeilen optisch überlappen. */
.loc-row.pickup { position: relative; z-index: 20; }
.loc-row.drop { position: relative; z-index: 1; }
.loc-row.pickup .loc-pickup-actions {
align-self: stretch;
display: flex;
}
.loc-row.pickup .loc-dest-switch__btn--gps-pickup {
width: 52px;
height: auto;
min-height: 100%;
align-self: stretch;
border-radius: 0;
/* Nur rechts über das Row-Padding bis zur Kartenkante ziehen. Oben KEIN negatives
Margin mehr — sonst ragt das GPS-Icon über die Pickup-Zeile hinaus und lässt die
Abholzeile optisch höher wirken als die Zielzeile. */
margin: 0 calc(-1 * var(--ct24-loc-pad-x, 12px)) 0 0;
}
/* Obere rechte Ecke: Radius der Karte übernehmen, damit Icon den Rundkorpus der Kartenkante fortführt */
#indexBookingFooterHost #indexBookingRouteHost .loc-row.pickup .loc-dest-switch__btn--gps-pickup {
margin: -8px -10px 0 0;
border-top-right-radius: 12px;
}
#pickupGpsBtn[aria-busy='true'] {
opacity: 0.68;
pointer-events: none;
}
.loc-dest-switch__icon {
width: 20px;
height: 20px;
display: block;
}
.loc-dest-switch__btn:disabled,
.loc-dest-switch__btn.loc-dest-switch__btn--disabled {
opacity: 0.38;
cursor: not-allowed;
}
.loc-clear-hidden {
display: none !important;
}
.loc-waypoint-row {
margin: 0;
padding: 0 0 0 0;
height: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
border-top: 1px solid #eee;
border-bottom: none;
position: relative;
}
.loc-waypoint-row--inline {
border-top: 1px solid #eee !important;
border-bottom: none !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 100%;
}
.loc-waypoint-add-btn {
width: 14px;
height: 14px;
appearance: none;
border: none;
border-radius: 0;
background: transparent;
color: #64748b;
font-size: 15px;
font-weight: 800;
line-height: 1;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
top: -7px;
transform: none;
}
.loc-waypoint-add-btn:hover {
color: #334155;
}
.loc-waypoint-add-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.loc-dest-switch--mode {
gap: 0;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 10px;
overflow: hidden;
background: #eef1f5;
}
.loc-dest-switch--mode .loc-dest-switch__btn {
width: auto;
min-width: 74px;
height: 34px;
padding: 0 10px;
border-radius: 0;
background: transparent;
color: #475569;
font-size: 12px;
font-weight: 700;
}
.loc-dest-switch--mode .loc-dest-switch__btn + .loc-dest-switch__btn {
border-left: 1px solid rgba(15, 23, 42, 0.1);
}
.loc-dest-switch--mode .loc-dest-switch__btn--active {
background: #ffffff;
color: #0f172a;
}
.location-card .loc-field input.loc-field-input--locked {
background: #f8fafc;
color: #334155;
cursor: default;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
align-self: center;
}
.dot.green { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.dot.red { background: var(--red); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
.dot.orange { background: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22); }
.loc-main {
flex: 1;
min-width: 0;
}
.loc-text {
font-size: 14px;
font-weight: 600;
color: #111827;
line-height: 1.35;
word-break: break-word;
}
.loc-actions {
margin-top: var(--gap-xs);
display: flex;
align-items: center;
gap: var(--gap-md);
flex-wrap: wrap;
}
.link {
background: none;
border: none;
padding: 0;
font-size: 13px;
font-weight: 600;
color: var(--navy);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.icon-x {
width: 32px;
height: 32px;
border: none;
border-radius: 10px;
background: #f3f4f6;
color: #374151;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
input[type="text"], select {
width: 100%;
height: 44px;
border-radius: 12px;
border: 1px solid var(--border);
background: #fff;
padding: 0 12px;
font-size: 15px;
outline: none;
margin-bottom: var(--gap-md);
}
select { cursor: pointer; }
.mini-row {
display: flex;
gap: var(--gap-md);
flex-wrap: wrap;
}
.mini-row button {
flex: 1;
min-width: 120px;
height: 40px;
border-radius: 12px;
border: 1px solid var(--border);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.mini-row .secondary {
background: #f3f4f6;
color: #374151;
}
.mini-row .primary {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
/* Recenter */
/* recenter-btn entfernt (keine Karte) */
@keyframes ct24-bottom-sheet-enter {
from {
transform: translate3d(-50%, 60px, 0);
opacity: 0;
}
to {
transform: translate3d(-50%, 0, 0);
opacity: 1;
}
}
/* Footer: Tabs unten fixiert */
.booking-footer{
flex-shrink: 0;
min-width: 0;
padding: var(--ct24-sheet-pad-y) var(--ct24-sheet-pad-x) 8px;
margin-top: var(--gap-xs);
border-top: 1px solid rgba(0,0,0,0.06);
background: #ffffff;
}
/* Index: siehe #indexBookingFooterHost .booking-footer oben — überschreibt diese Zeile vollständig */
/* Fahrerkarte — Uber/Bolt: links Name+Status, Mitte Fahrzeug+Kennzeichen, rechts ETA + Aktionen */
.fahrerkarte {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
background: #ffffff;
border-radius: var(--ct24-ui-shell-radius-lg);
border: 1.5px solid var(--ct24-ui-accent-ring);
margin-bottom: 0;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.1);
position: relative;
}
.fahrerkarte--haupt .fahrerkarte__rahmen {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
width: 100%;
padding: 10px 12px;
box-sizing: border-box;
}
.fahrerkarte--haupt .fahrerkarte__links {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.fahrerkarte--haupt .fahrerkarte__info {
min-width: 0;
flex: 1 1 auto;
}
.fahrerkarte__name {
font-size: 15px;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fahrerkarte__badge-zeile {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
margin-top: 3px;
min-width: 0;
}
.fahrerkarte__status-punkt {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: #94a3b8;
}
.fahrerkarte--mit-fahrer .fahrerkarte__status-punkt {
background: #16a34a;
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22);
}
.fahrerkarte--haupt .fahrer-avatar {
width: 48px;
height: 48px;
position: relative;
overflow: hidden;
}
.fahrerkarte__avatar-bild {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
z-index: 2;
}
.fahrerkarte__avatar-bild[hidden] {
display: none !important;
}
.fahrerkarte__avatar-initialen {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 900;
letter-spacing: -0.03em;
color: #fff;
background: linear-gradient(145deg, #1e3a5f 0%, #0f172a 100%);
border-radius: 50%;
line-height: 1;
pointer-events: none;
}
.fahrerkarte__avatar-initialen[hidden] {
display: none !important;
}
.fahrer-avatar__ersatz {
position: relative;
z-index: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.fahrer-avatar--foto .fahrer-avatar__ersatz,
.fahrer-avatar--initialen .fahrer-avatar__ersatz {
visibility: hidden;
}
.fahrerkarte--haupt .fahrer-avatar svg {
width: 24px;
height: 24px;
}
.fahrerkarte--haupt .fahrerkarte__mitte {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
max-width: 38%;
text-align: center;
}
.fahrerkarte--haupt .fahrerkarte__rechts {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 6px;
min-width: 76px;
}
.fahrerkarte__eta {
font-size: 13px;
font-weight: 800;
color: #0f172a;
text-align: right;
line-height: 1.25;
max-width: 104px;
word-break: break-word;
}
.fahrerkarte__eta[hidden] {
display: none !important;
}
.fahrerkarte__hinweis {
margin-top: 4px;
font-size: 11px;
font-weight: 600;
color: #64748b;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fahrerkarte__hinweis[hidden] {
display: none !important;
}
.fahrerkarte__meta {
margin: 0 12px 10px;
font-size: 11px;
font-weight: 600;
color: #64748b;
line-height: 1.35;
}
.fahrerkarte__meta[hidden] {
display: none !important;
}
.fahrerkarte__schnellaktionen {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.fahrerkarte__kreis-knopf {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
background: #eef1f5;
user-select: none;
border: none;
padding: 0;
color: var(--navy, #1a2744);
}
.fahrerkarte__kreis-knopf--aktion {
cursor: pointer;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
}
.fahrerkarte__kreis-knopf--aktion:disabled {
opacity: 0.42;
cursor: default;
pointer-events: none;
}
.fahrerkarte__kreis-knopf--aktion:not(:disabled):active {
transform: scale(0.96);
}
.fahrerkarte__kreis-knopf--aktion:focus-visible {
outline: 2px solid var(--navy, #1a2744);
outline-offset: 2px;
}
.fahrerkarte__kennzeichen-box.fahrerkarte__kennzeichen-box {
position: relative;
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
text-align: center;
line-height: 1.15;
margin-top: 0;
padding: 5px 8px;
border-radius: 8px;
background: #1f2a44;
border: none;
}
.fahrerkarte--haupt .fahrerkarte__kennzeichen-box {
max-width: 120px;
}
.fahrerkarte__kennzeichen-beschriftung {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.fahrerkarte__schild {
display: block;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fahrer-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(145deg, #eef2f8, #dbe4f0);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--navy);
box-shadow: inset 0 0 0 1px rgba(26, 39, 68, 0.08);
position: relative;
overflow: hidden;
}
.fahrer-avatar svg { width: 24px; height: 24px; }
.fahrerkarte-beschriftung {
font-size: 12px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: #475569;
margin-bottom: 0;
line-height: 1.25;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* CT24_SYNC:FAHRERZEILE_CSS_START */
.fahrerkarte--leiste-kompakt {
gap: 0;
border-radius: 12px;
box-shadow: none;
border: none;
background: transparent;
}
/* Karten-Look (Snippet-Vorschau / kompakte weiße Zeile im Sheet) */
.fahrerkarte.fahrerkarte--haupt.fahrerkarte--leiste-kompakt.fahrerkarte--einzeile {
background: #fff;
border-radius: var(--ct24-ui-shell-radius-lg);
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.1);
padding: 8px 14px 9px;
border: 1.5px solid var(--ct24-ui-accent-ring);
}
.fahrerkarte--leiste-kompakt .fahrerkarte__rahmen--kompakt {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
padding: 0;
box-sizing: border-box;
border: none;
box-shadow: none;
background: transparent;
}
/* Drei Spalten: Avatar | Kennzeichen + Status/ETA | Stornieren */
.fahrerkarte--einzeile .fahrerkarte__rahmen--kompakt {
gap: 8px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
}
.fahrerkarte__einzeile-rechts {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 0;
}
.fahrerkarte__storno {
margin: 0;
padding: 8px 12px;
border: none;
border-radius: 12px;
font: inherit;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
color: #fff;
background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
white-space: nowrap;
max-width: 34vw;
overflow: hidden;
text-overflow: ellipsis;
}
.fahrerkarte__storno:disabled,
.fahrerkarte__storno[disabled] {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
}
.fahrerkarte__storno[hidden] {
display: none !important;
}
.fahrerkarte--einzeile .fahrerkarte__einzeile-links {
flex-shrink: 0;
min-width: 0;
}
.fahrerkarte--einzeile .fahrerkarte__einzeile-mitte {
min-width: 0;
text-align: center;
padding: 0 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
}
/* Phasen-Badge: komplett ausgeblendet — die Telefonnummer übernimmt diese Position. */
.fahrerkarte__phase-pill,
#fahrerkartePhasePill,
.fahrerkarte__phase-pill--mock {
display: none !important;
}
.fahrerkarte__phase-pill--DEPRECATED-keep-for-JS-refs {
display: inline-block;
align-self: center;
max-width: 100%;
padding: 3px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
}
.fahrerkarte__phase-pill[hidden] {
display: none !important;
}
.fahrerkarte--phase-idle .fahrerkarte__phase-pill {
display: none !important;
}
.fahrerkarte--phase-suche .fahrerkarte__phase-pill {
color: #9a3412;
background: rgba(251, 191, 36, 0.35);
border: 1px solid rgba(217, 119, 6, 0.35);
}
.fahrerkarte--phase-vorschau .fahrerkarte__phase-pill {
color: #1e3a5f;
background: rgba(59, 130, 246, 0.18);
border: 1px solid rgba(37, 99, 235, 0.28);
}
.fahrerkarte--phase-fahrer .fahrerkarte__phase-pill {
color: #14532d;
background: rgba(34, 197, 94, 0.22);
border: 1px solid rgba(22, 163, 74, 0.35);
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--phase-suche #fahrerkarteKennzeichenCar,
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--phase-suche #fahrerkarteKennzeichenPhone,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--phase-suche #fahrerkarteKennzeichenCar,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--phase-suche #fahrerkarteKennzeichenPhone {
color: #9a3412;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--phase-fahrer #fahrerkarteKennzeichenCar,
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--phase-fahrer #fahrerkarteKennzeichenPhone,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--phase-fahrer #fahrerkarteKennzeichenCar,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--phase-fahrer #fahrerkarteKennzeichenPhone {
color: #0f172a;
}
.fahrerkarte--einzeile .fahrerkarte__kennzeichen-zeile {
display: block;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.1;
margin: 0;
}
.fahrerkarte--einzeile .fahrerkarte__eta-zeile {
display: block;
font-size: 11px;
font-weight: 600;
color: #475569;
white-space: normal;
line-height: 1.25;
overflow: hidden;
max-width: 100%;
text-align: center;
margin: 1px 0 0;
}
.fahrerkarte--leiste-kompakt .fahrerkarte__avatar-fach {
flex-shrink: 0;
}
.fahrerkarte--leiste-kompakt .fahrer-avatar {
width: 42px;
height: 42px;
}
.fahrerkarte--leiste-kompakt .fahrer-avatar svg {
width: 21px;
height: 21px;
}
.fahrerkarte__nur-screenreader {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.fahrerkarte__nur-screenreader button {
display: none;
}
.fahrerkarte--leiste-kompakt .fahrerkarte__nur-screenreader {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.fahrerkarte--leiste-kompakt .fahrerkarte__nur-screenreader button {
display: none;
}
.fahrerkarte--einzeile.fahrerkarte--mit-fahrer .fahrerkarte__kennzeichen-zeile {
color: #0f172a;
}
/* Aktive Buchung: Ticket, Detailblock und Hinweise im Sheet ausblenden — nur Fahrerkarte + Jetzt-Buchen-Leiste */
body.ct24-is-buchung-page #sheetBody #bookingTripHeroHead,
body.ct24-is-buchung-page #sheetBody #tripFlowDetails,
body.ct24-is-buchung-page #sheetBody #bookingSheetBlockHead,
body.ct24-is-buchung-page #sheetBody #indexSheetNeueAnfrage,
body.ct24-is-buchung-page #sheetBody #bookingSheetStatus {
display: none !important;
}
/* Nur auf echter Buchungsseite ausblenden; auf Index nach "Jetzt buchen" sichtbar lassen
(unten: links Stornierung, rechts Status). */
body.ct24-is-buchung-page.ct24-trip-storno-card #indexBookingFooterHost .booking-footer .booking-tabs {
display: none !important;
}
/* CT24_SYNC:FAHRERZEILE_CSS_END */
/*
* Taxi-UI-Mockup (vom Nutzer): #fahrerkarte.driver — nur im Index-Popup + Sheet-Slot.
* Klassennamen: .driver-top .avatar .info .info-near-phone .near .car-stack … .phone.phone--inline .call.call--inline
*/
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte {
--ct24-driver-card-gap: clamp(8px, 2.6vw, 13px);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
width: 100%;
max-width: none;
padding: var(--ct24-driver-card-gap);
font-family: Arial, Helvetica, sans-serif;
background: #fff;
border: none;
border-radius: 20px 20px 0 0;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
position: relative;
}
#indexFahrerkarteHome #fahrerkarte.driver .driver__storno,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .driver__storno {
position: absolute;
top: 6px;
right: 6px;
z-index: 3;
margin: 0;
padding: 6px 10px;
font-size: 11px;
border-radius: 10px;
}
#indexFahrerkarteHome #fahrerkarte.driver .driver-top,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .driver-top {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
column-gap: var(--ct24-driver-card-gap);
align-items: center;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
#indexFahrerkarteHome #fahrerkarte.driver .driver-top > .avatar,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .driver-top > .avatar {
grid-column: 2;
grid-row: 1;
}
#indexFahrerkarteHome #fahrerkarte.driver .driver-top > .info,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .driver-top > .info {
grid-column: 3;
grid-row: 1;
}
#indexFahrerkarteHome #fahrerkarte.driver .driver-top > .car-stack,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .driver-top > .car-stack {
grid-column: 1;
grid-row: 1;
}
#indexFahrerkarteHome #fahrerkarte.driver .avatar,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .avatar {
flex-shrink: 0;
width: clamp(46px, 12vw, 54px);
height: clamp(46px, 12vw, 54px);
border-radius: 50%;
border: 2px solid #eee;
box-sizing: border-box;
overflow: hidden;
background: #f1f5f9 center / cover no-repeat;
}
#indexFahrerkarteHome #fahrerkarte.driver .avatar .fahrer-avatar,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .avatar .fahrer-avatar {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
position: relative;
border-radius: 50%;
overflow: hidden;
}
#indexFahrerkarteHome #fahrerkarte.driver .fahrerkarte__avatar-bild,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .fahrerkarte__avatar-bild {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
z-index: 2;
}
#indexFahrerkarteHome #fahrerkarte.driver .fahrerkarte__avatar-initialen,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .fahrerkarte__avatar-initialen {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 900;
color: #fff;
background: linear-gradient(145deg, #1e3a5f 0%, #0f172a 100%);
border-radius: 50%;
}
#indexFahrerkarteHome #fahrerkarte.driver .fahrer-avatar__ersatz,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .fahrer-avatar__ersatz {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
background: #f1f5f9;
border-radius: 50%;
z-index: 0;
}
#indexFahrerkarteHome #fahrerkarte.driver .fahrer-avatar--foto .fahrer-avatar__ersatz,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .fahrer-avatar--foto .fahrer-avatar__ersatz {
display: none;
}
#indexFahrerkarteHome #fahrerkarte.driver .fahrer-avatar svg,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .fahrer-avatar svg {
width: 28px;
height: 28px;
}
#indexFahrerkarteHome #fahrerkarte.driver .info,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .info {
flex: 1;
min-width: 0;
text-align: right;
}
#indexFahrerkarteHome #fahrerkarte.driver .info-near-phone,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .info-near-phone {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: clamp(3px, 1vw, 6px);
width: 100%;
min-width: 0;
margin-top: 1px;
}
#indexFahrerkarteHome #fahrerkarte.driver .info-near-phone .near,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .info-near-phone .near {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
#indexFahrerkarteHome #fahrerkarte.driver .info-phone-inline,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .info-phone-inline {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 3px;
max-width: 44%;
min-width: 0;
}
#indexFahrerkarteHome #fahrerkarte.driver .fahrerkarte__phase-pill--mock,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .fahrerkarte__phase-pill--mock {
display: inline-block;
margin-bottom: 4px;
max-width: 100%;
}
#indexFahrerkarteHome #fahrerkarte.driver .fahrerkarte__driver-name.name,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .fahrerkarte__driver-name.name {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: clamp(16px, 3.9vw, 18px);
font-weight: 650;
letter-spacing: -0.02em;
color: #0a0a0a;
line-height: 1.2;
margin: 0 0 4px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#indexFahrerkarteHome #fahrerkarte.driver .rating,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .rating {
font-size: 13px;
color: #ffb800;
font-weight: 700;
margin-bottom: 4px;
}
#indexFahrerkarteHome #fahrerkarte.driver .near,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .near {
font-size: 12px;
color: #37a800;
font-weight: 700;
line-height: 1.2;
white-space: normal;
text-align: right;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--phase-idle .near,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--phase-idle .near {
color: #475569;
font-weight: 600;
font-size: 11px;
}
/* Vor Buchung: links statt Fahrerprofil nur Fahrpreis (Uber/Bolt-ähnlich), rechts Auto-Details bleiben. */
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .rating,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .rating,
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .fahrerkarte__phase-pill--mock,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .fahrerkarte__phase-pill--mock {
display: none !important;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top {
grid-template-columns: max-content minmax(0, 1fr) max-content;
column-gap: clamp(6px, 1.8vw, 12px);
justify-content: stretch;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .avatar,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .avatar {
display: block !important;
grid-column: 1;
grid-row: 1;
justify-self: start;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .info,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .info {
grid-column: 3;
justify-self: end;
width: auto;
text-align: right;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .car-stack,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .car-stack {
grid-column: 2;
justify-self: stretch;
width: 100%;
max-width: none;
margin-left: 0;
align-items: center;
text-align: center;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .car-under,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .car-under {
justify-content: center;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .fahrerkarte__driver-name.name,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .fahrerkarte__driver-name.name {
display: none !important;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .info-phone-inline,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .info-phone-inline {
display: none !important;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .car-under > *:not([hidden]) + *:not([hidden]),
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .car-under > *:not([hidden]) + *:not([hidden]) {
margin-left: 6px;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .car-under > *:not([hidden]) + *:not([hidden])::before,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .car-under > *:not([hidden]) + *:not([hidden])::before {
content: none;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .near,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .near {
font-size: clamp(20px, 5.3vw, 26px);
line-height: 1.15;
color: #0f172a;
font-weight: 800;
letter-spacing: -0.01em;
text-align: right;
margin-right: 0;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .info-near-phone,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .info-near-phone {
width: auto;
justify-content: flex-end;
gap: 0;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .info-near-phone .near,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .info-near-phone .near {
flex: 0 0 auto;
min-width: 0;
}
/* Fahrspalte: nur Mock-Auto ausblenden (s. unten .car) — .car-under (Kennzeichen) sichtbar */
#indexFahrerkarteHome #fahrerkarte.driver .car-stack,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-stack {
flex-shrink: 0;
width: auto;
min-width: 0;
max-width: clamp(9rem, 42vw, 14rem);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(2px, 0.8vw, 5px);
box-sizing: border-box;
text-align: left;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-stack .car,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-stack .car {
display: none !important;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-under,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-under {
width: 100%;
display: flex;
flex-direction: row;
gap: 0;
align-items: center;
justify-content: flex-start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-model,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-model {
font-size: clamp(13px, 3.2vw, 15px);
font-weight: 700;
color: #444;
line-height: 1.2;
max-width: 100%;
min-width: 0;
flex: 0 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-color,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-color {
font-size: clamp(13px, 3.2vw, 15px);
font-weight: 600;
color: #64748b;
line-height: 1.2;
min-width: 0;
flex: 0 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-plate,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-plate {
font-size: clamp(13px, 3.2vw, 15px);
font-weight: 800;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
color: #0f172a;
margin-top: 0;
flex: 0 0 auto;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-under > *:not([hidden]) + *:not([hidden]),
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-under > *:not([hidden]) + *:not([hidden]) {
position: relative;
margin-left: clamp(4px, 1.1vw, 6px);
}
#indexFahrerkarteHome #fahrerkarte.driver .car-under > *:not([hidden]) + *:not([hidden])::before,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-under > *:not([hidden]) + *:not([hidden])::before {
content: '·';
position: absolute;
left: calc(clamp(4px, 1.1vw, 6px) * -0.7);
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-weight: 700;
}
/* Zwischen Farbe und Kennzeichen etwas mehr Luft für bessere Lesbarkeit */
#indexFahrerkarteHome #fahrerkarte.driver .car-under > .car-plate:not([hidden]),
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-under > .car-plate:not([hidden]) {
margin-left: clamp(11px, 2.8vw, 16px);
}
#indexFahrerkarteHome #fahrerkarte.driver .car__img,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car__img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
}
/* Telefon kompakt in einer Zeile mit Status (.near), kein eigener Footer mehr */
#indexFahrerkarteHome #fahrerkarte.driver .phone.phone--inline:not(.fahrerkarte__phone-link),
#indexSheetFahrerkartePlatz #fahrerkarte.driver .phone.phone--inline:not(.fahrerkarte__phone-link) {
font-size: 11px;
font-weight: 700;
color: #1f1f1f;
text-decoration: none;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 6.8rem;
min-width: 0;
letter-spacing: 0.01em;
}
#indexFahrerkarteHome #fahrerkarte.driver .call.call--inline,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .call.call--inline {
width: 26px;
height: 26px;
border-radius: 50%;
background: #37a800;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
color: #fff;
text-decoration: none;
box-shadow: 0 2px 6px rgba(55, 168, 0, 0.32);
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
#indexFahrerkarteHome #fahrerkarte.driver .call.call--inline:active,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .call.call--inline:active {
filter: brightness(0.95);
transform: scale(0.96);
}
/* Schmale Displays: NICHT stapeln — Auto links, Fahrer/Preis rechts bleiben nebeneinander.
Overriden die früheren Regeln, die .car-stack auf eine neue Zeile gelegt haben. */
@media (max-width: 400px) {
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte,
#bottomSheet .index-sheet-fahrerkarte-leiste__platz #fahrerkarte.driver.fahrerkarte {
--ct24-driver-card-gap: clamp(6px, 2.2vw, 9px);
}
#indexFahrerkarteHome #fahrerkarte.driver .driver-top,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .driver-top {
grid-template-columns: auto auto minmax(0, 1fr) !important;
grid-auto-rows: auto !important;
row-gap: 0 !important;
column-gap: var(--ct24-driver-card-gap) !important;
}
#indexFahrerkarteHome #fahrerkarte.driver .driver-top > .avatar,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .driver-top > .avatar {
grid-column: 2 !important;
grid-row: 1 !important;
}
#indexFahrerkarteHome #fahrerkarte.driver .driver-top > .info,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .driver-top > .info {
grid-column: 3 !important;
grid-row: 1 !important;
min-width: 0 !important;
}
#indexFahrerkarteHome #fahrerkarte.driver .driver-top > .car-stack,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .driver-top > .car-stack {
grid-column: 1 !important;
grid-row: 1 !important;
width: auto !important;
max-width: clamp(8rem, 36vw, 10.5rem) !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-stack,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-stack {
max-width: clamp(8rem, 36vw, 10.5rem) !important;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-stack .car,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-stack .car {
display: none !important;
}
#indexFahrerkarteHome #fahrerkarte.driver .info-phone-inline,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .info-phone-inline {
max-width: 100%;
}
#indexFahrerkarteHome #fahrerkarte.driver .phone.phone--inline:not(.fahrerkarte__phone-link),
#indexSheetFahrerkartePlatz #fahrerkarte.driver .phone.phone--inline:not(.fahrerkarte__phone-link) {
max-width: 7rem;
font-size: 11px;
}
/* Prebook auf schmalen Geräten fix halten: Avatar links, Auto mittig, Preis rechts. */
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top {
grid-template-columns: max-content minmax(0, 1fr) max-content !important;
column-gap: clamp(4px, 1.5vw, 8px) !important;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .avatar,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .avatar {
grid-column: 1 !important;
justify-self: start !important;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .car-stack,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .car-stack {
grid-column: 2 !important;
justify-self: stretch !important;
width: 100% !important;
max-width: none !important;
}
#indexFahrerkarteHome #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .info,
#indexSheetFahrerkartePlatz #fahrerkarte.driver.fahrerkarte--prebook-price .driver-top > .info {
grid-column: 3 !important;
justify-self: end !important;
text-align: right !important;
}
}
/* Sehr schmale Displays: Spalte für Kennzeichen enger, Mock-Auto bleibt ausgeblendet */
@media (max-width: 340px) {
#indexFahrerkarteHome #fahrerkarte.driver .car-stack,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-stack {
max-width: clamp(7rem, 34vw, 8.25rem) !important;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-stack .car,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-stack .car {
display: none !important;
}
}
/* Sehr enge Handys: Kennzeichen priorisieren, Farbe bei Bedarf ausblenden */
@media (max-width: 360px) {
#indexFahrerkarteHome #fahrerkarte.driver .car-color,
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-color {
display: none;
}
#indexFahrerkarteHome #fahrerkarte.driver .car-under > .car-plate:not([hidden]),
#indexSheetFahrerkartePlatz #fahrerkarte.driver .car-under > .car-plate:not([hidden]) {
margin-left: 6px;
}
}
/* Sheet: bündig — spezifischer als #indexSheetFahrerkartePlatz #fahrerkarte.driver (Parent #bottomSheet). */
#bottomSheet .index-sheet-fahrerkarte-leiste__platz #fahrerkarte.driver.fahrerkarte {
--ct24-driver-card-gap: clamp(8px, 2.6vw, 13px);
margin: 0;
border-radius: 0;
border: none;
border-bottom: 1px solid #ececec;
box-shadow: none;
padding: var(--ct24-driver-card-gap);
}
.driver-meta-ioniq-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-top: 0;
min-width: 0;
}
.driver-ioniq-preview {
flex-shrink: 0;
width: auto;
height: 48px;
max-width: 78px;
object-fit: contain;
object-position: center;
display: block;
pointer-events: none;
background: transparent;
border-radius: 0;
padding: 0;
/*
* i. V. m. JPEG (keine echte Transparenz im Asset) entfernen wir den weißen
* Hintergrund visuell per Blend-Modus: Weiß wird mit dem Hintergrund „ausgemalt“.
*/
mix-blend-mode: multiply;
}
.driver-ioniq-preview[hidden] {
display: none !important;
}
.driver-ioniq-preview-wrap {
flex-shrink: 0;
height: 48px;
width: auto;
max-width: 78px;
background: transparent;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* #status / #routeStatus / #status2: Klassen am Element (Fahrerkarte v2) */
.fahrerkarte-seite {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--gap-sm);
flex-shrink: 0;
}
/* Fahrzeug: PNG — kompakte Vorschau; in der Fahrerkarte heller Mockup-Look */
.booking-vehicle-graphic {
width: 88px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #000;
border-radius: 10px;
}
.fahrerkarte .booking-vehicle-graphic {
width: 72px;
height: 44px;
background: transparent;
border-radius: 8px;
}
.booking-vehicle-graphic__img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
pointer-events: none;
}
.price-val { font-size: 15px; font-weight: 800; color: var(--navy); }
.info-i {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid var(--border);
background: #fff;
font-size: 14px;
font-weight: 700;
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Fahrt-Ablauf unter Ticket/Fahrer: gleiche Zeilenlogik wie Adresskarte (Meta | Adressen mit Punkten) */
.booking-trip-flow {
width: 100%;
max-width: 440px;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
}
.booking-trip-flow[hidden] {
display: none !important;
}
/* Auftragsblock: Meta + Adresszeilen wie Fahrer-Sheet (Punkte, Abholung inkl. geplant, Ziel) */
.booking-trip-flow .trip-context-summary.booking-trip-context-card {
margin: 0;
padding: 4px 12px 8px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 16px;
box-sizing: border-box;
}
.booking-trip-flow .booking-trip-context-card .trip-context-row--meta {
padding-top: 8px;
}
.booking-trip-flow .booking-trip-context-card .trip-context-row--loc .dot.red {
background: #0f172a;
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}
.trip-context-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
box-sizing: border-box;
}
.trip-context-row:last-child {
border-bottom: none;
}
.trip-context-row--meta {
align-items: baseline;
}
.trip-context-row__k {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
flex-shrink: 0;
}
.trip-context-row__v {
font-size: 13px;
font-weight: 650;
color: #0f172a;
text-align: right;
word-break: break-word;
min-width: 0;
line-height: 1.35;
}
.trip-context-row--loc {
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
}
.trip-context-row--loc .dot {
margin-top: 5px;
}
.trip-context-row__main {
flex: 1;
min-width: 0;
}
.trip-context-row__label {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
margin-bottom: 3px;
}
.trip-context-row__text {
display: block;
font-size: 14px;
font-weight: 600;
color: #111827;
line-height: 1.4;
word-break: break-word;
}
.trip-context-row__sched {
display: block;
margin-top: 4px;
font-size: 11px;
font-weight: 600;
color: var(--muted);
line-height: 1.35;
}
.trip-context-row__sched--planned {
display: inline-block;
margin-top: 6px;
max-width: 100%;
padding: 5px 10px;
border-radius: 10px;
font-size: 12px;
font-weight: 700;
color: #1e3a8a;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(99, 102, 241, 0.1));
border: 1px solid rgba(59, 130, 246, 0.28);
line-height: 1.35;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.cancel-link--trip-flow {
margin-top: 0;
padding: 10px 12px 12px;
border-top: 1px solid rgba(15, 23, 42, 0.07);
background: rgba(255, 255, 255, 0.4);
}
.payment-row {
margin-top: var(--gap-sm);
display: flex;
justify-content: flex-end;
width: 100%;
}
.booking-ticket-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: var(--gap-md);
padding: 10px 12px;
background: rgba(29, 78, 216, 0.06);
border: 1px solid rgba(29, 78, 216, 0.14);
border-radius: 14px;
}
.booking-ticket-row[hidden] {
display: none !important;
}
.booking-ticket-label {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 8px;
min-width: 0;
font-size: 13px;
font-weight: 700;
color: #334155;
line-height: 1.3;
}
.booking-ticket-k {
font-weight: 600;
color: #64748b;
}
.booking-ticket-num {
font-size: 17px;
font-weight: 900;
letter-spacing: 0.08em;
color: var(--navy);
}
.booking-ticket-share {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(29, 78, 216, 0.25);
background: #fff;
color: #1d4ed8;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.booking-ticket-share:active {
opacity: 0.88;
}
.booking-ticket-share svg {
width: 22px;
height: 22px;
}
.booking-footer .booking-ticket-row {
margin-top: 6px;
margin-bottom: var(--gap-sm);
}
/* Footer: Grid Bar | Karte (gleiche Spaltenbreite) | Fahrpreis/Guthaben */
#bookingFooterPayRow.booking-footer-pay-row {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
min-width: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
overflow: visible;
}
#bookingFooterPayRow[hidden],
body.ct24-is-buchung-page #bookingFooterPayRow {
display: none !important;
}
.booking-footer-payment-title {
font-size: 13px;
font-weight: 600;
color: #888888;
margin: 0;
padding: 0 2px;
line-height: 1.2;
}
.booking-footer-payment-methods {
display: grid;
grid-template-columns: auto minmax(0, 1.2fr);
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 2px;
}
.booking-footer-payment-methods > .booking-payment-btn {
width: 100%;
min-width: 0;
flex: none;
}
.booking-payment-segment {
display: grid;
grid-template-columns: auto auto;
background: var(--ct24-ui-chat-canvas);
border-radius: 14px;
padding: 0;
gap: 0;
overflow: hidden;
width: fit-content;
justify-self: start;
}
/* Zahlungs-Umschalter in der Modus-Leiste (vor Jetzt/Später), optisch mit Tabs verbunden */
.booking-payment-single-wrap {
width: 100%;
min-width: 0;
}
.booking-mode-toolbar__pay {
display: flex;
align-items: stretch;
min-width: 0;
box-sizing: border-box;
}
/* [hidden] muss gewinnen: sonst überschreibt display:flex die Sichtbarkeit (Karte/Bar bleibt im Sheet). */
.booking-mode-toolbar__pay[hidden],
#bookingFooterPayMethodWrap[hidden] {
display: none !important;
}
body.ct24-is-buchung-page #bookingFooterPayMethodWrap,
body.ct24-is-buchung-page .booking-mode-toolbar__pay {
display: none !important;
}
.booking-payment-btn.booking-payment-btn--toolbar {
flex: 1 1 auto;
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
justify-content: center;
gap: 5px;
min-height: 44px;
height: 100%;
padding: 8px 8px;
margin: 0;
border: none;
border-radius: 0;
background: var(--ct24-ui-chat-canvas);
color: #475569;
font-size: var(--ct24-book-now-font-size);
font-weight: 700;
box-shadow: inset 0 -2px 0 0 rgba(37, 99, 235, 0.22);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.booking-payment-btn.booking-payment-btn--toolbar:hover {
background: #e2e8f0;
color: #0f172a;
}
.booking-payment-btn.booking-payment-btn--toolbar:active {
opacity: 0.94;
}
/* Index Modus-Leiste: Zahlungs-Taste wie Chat-Senden — volles Blau, weiße Schrift */
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar
.booking-payment-btn.booking-payment-btn--toolbar {
border-radius: 28px 0 0 28px;
border: 1px solid rgba(255, 255, 255, 0.38);
box-shadow:
var(--ct24-ui-chat-shadow),
0 2px 12px rgba(15, 23, 42, 0.18);
background: var(--ct24-booking-toolbar-accent);
color: #fff;
min-height: 46px;
font-size: 14px;
transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar
.booking-payment-btn.booking-payment-btn--toolbar:hover {
background: var(--ct24-booking-toolbar-accent-hover);
color: #fff;
box-shadow:
0 4px 14px rgba(37, 99, 235, 0.38),
0 2px 12px rgba(15, 23, 42, 0.16);
}
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar
.booking-payment-btn.booking-payment-btn--toolbar:active {
transform: scale(0.98);
}
.booking-payment-segment .booking-payment-btn {
border-radius: 0;
}
.booking-payment-segment .booking-payment-btn:first-child {
border-radius: 14px 0 0 14px;
}
.booking-payment-segment .booking-payment-btn:last-child {
border-radius: 0 14px 14px 0;
}
.booking-footer-payment-methods .booking-footer-price-hero.booking-footer-price--beside-card {
margin: 0;
min-width: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.booking-footer-payment-methods .booking-footer-price--beside-card .booking-footer-price-hero-line {
justify-content: center;
width: 100%;
}
.booking-footer-payment-methods .booking-footer-price--beside-card .booking-footer-price-main {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-align: center;
}
.booking-footer-payment-methods .booking-footer-price--beside-card .booking-footer-cashback-inline {
display: block;
width: auto;
max-width: 100%;
text-align: center;
line-height: 1.25;
}
.booking-footer-payment-methods .booking-footer-price--beside-card .price-val--hero {
font-size: clamp(17px, 4.2vw, 22px);
line-height: 1.1;
}
/* Platzhalter „Fahrpreis ab …“: gleiche Schriftgröße wie aktiver „Jetzt buchen“-Tab */
.bottom-sheet .price-val--hero.price-val--placeholder {
font-size: var(--ct24-book-now-font-size);
font-weight: 700;
letter-spacing: normal;
line-height: 1.2;
}
.bottom-sheet .booking-footer-payment-methods {
margin: 4px 0;
}
.booking-payment-btn {
flex: 0 0 auto;
min-width: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 42px;
padding: 8px 10px;
border-radius: 0;
border: none;
background: var(--ct24-ui-chat-canvas);
font-size: var(--ct24-book-now-font-size);
font-weight: 700;
color: #64748b;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.booking-payment-btn > span:last-child {
display: inline-block;
line-height: 1;
font-size: 15px;
font-weight: 700;
}
.booking-payment-btn[aria-pressed="true"] {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b));
color: #fff;
font-size: var(--ct24-book-now-font-size-active);
box-shadow: var(--ct24-ui-chat-shadow);
}
.booking-payment-btn:hover {
background: #e2e8f0;
}
.booking-payment-btn[aria-pressed="true"]:hover {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b));
filter: brightness(1.03);
}
.booking-payment-btn:active {
opacity: 0.94;
transform: scale(0.99);
}
.booking-payment-btn-emoji {
font-size: 20px;
line-height: 1;
transform: translateY(-3px);
}
.booking-payment-btn-emoji--cash {
font-size: 20px;
}
.booking-footer-price-hero {
text-align: center;
margin: 10px 0 6px;
}
.booking-footer-price-row.booking-footer-price-hero {
margin-top: 4px;
margin-bottom: 4px;
}
.booking-footer-price-hero-line {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
max-width: 100%;
}
.booking-footer-price-main {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 6px 8px;
text-align: center;
}
.booking-footer-price-label {
font-size: 14px;
font-weight: 700;
color: var(--navy);
letter-spacing: 0.01em;
white-space: nowrap;
}
.price-val--hero {
font-size: clamp(22px, 6.5vw, 26px);
font-weight: 800;
line-height: 1.15;
color: var(--navy);
letter-spacing: -0.02em;
}
.booking-footer-cashback-inline {
font-size: 13px;
font-weight: 500;
color: #16a34a;
max-width: 100%;
}
.booking-footer-cashback-inline[hidden] {
display: none !important;
}
.cta-row {
display: flex;
gap: var(--gap-md);
margin-top: var(--gap-sm);
}
.cta-row button {
flex: 1;
height: 50px;
border-radius: 14px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
border: none;
}
.booking-footer-leading {
grid-area: lead;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.booking-tabs:not(.booking-tabs--has-status) .booking-footer-leading {
display: none;
}
.booking-footer-leading .booking-footer-status {
text-align: left;
padding: 0 2px;
}
/* Footer: Zeile 1 = Bar | Fahrpreis | Karte; Modus-Zeile = Jetzt | Später (Index außerhalb .booking-tabs) */
.booking-tabs {
display: grid;
grid-template-columns: 1fr;
column-gap: var(--gap-sm);
row-gap: var(--gap-md);
margin-top: var(--gap-sm);
align-items: stretch;
min-width: 0;
}
.booking-tabs:not(.booking-tabs--has-status) {
grid-template-areas:
"tablater"
"box"
"tabnow";
}
.booking-tabs.booking-tabs--has-status {
grid-template-areas:
"lead"
"tablater"
"box"
"tabnow";
}
.booking-tabs #bookingTabLater {
grid-area: tablater;
width: 100%;
align-self: stretch;
}
.booking-tabs #bookingTabNow {
grid-area: tabnow;
width: 100%;
align-self: stretch;
}
#bookingBoxLater {
grid-area: box;
margin-top: 0;
padding-top: 8px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
/* Später planen: kompakte Zeile (native date/time + Schnellwahlen), kein Monats-Kalender */
.ct24-later-compact {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
width: 100%;
box-sizing: border-box;
padding: 2px 0;
}
.ct24-later-compact__fields {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 8px 10px;
min-width: 0;
}
.ct24-later-compact__lbl {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
white-space: nowrap;
}
.ct24-later-compact__input {
min-width: 0;
min-height: 46px;
height: 46px;
padding: 0 13px;
border: 1.5px solid rgba(37, 99, 235, 0.2);
border-radius: 13px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
font: 700 15px/1.25 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
color: #0f172a;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
accent-color: #1d4ed8;
color-scheme: light;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ct24-later-compact__input:focus {
outline: none;
border-color: rgba(29, 78, 216, 0.72);
background: #fff;
box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18), 0 3px 10px rgba(30, 64, 175, 0.12);
}
.ct24-later-compact__input::-webkit-calendar-picker-indicator {
opacity: 0.78;
cursor: pointer;
}
.ct24-later-compact__input:hover {
border-color: rgba(37, 99, 235, 0.34);
}
@media (max-width: 380px) {
.ct24-later-compact__fields {
grid-template-columns: 1fr 1fr;
grid-template-areas:
'ld ld'
'd d'
'lt lt'
't t';
}
.ct24-later-compact__lbl--date {
grid-area: ld;
}
.ct24-later-compact__date {
grid-area: d;
}
.ct24-later-compact__lbl--time {
grid-area: lt;
}
.ct24-later-compact__time {
grid-area: t;
}
}
/* Wenn Kalender offen: Fokus auf Reservierung (nur Datum/Uhrzeit + Kalender + Button) */
body.ct24-cal-open #bookingFooterPayRow,
body.ct24-cal-open #bookingTabLater,
body.ct24-cal-open .booking-footer-leading {
display: none !important;
}
body.ct24-cal-open #indexBookingFooterHost .booking-footer {
order: 1;
}
body.ct24-cal-open .booking-tabs {
grid-template-areas:
"box" !important;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tabs .booking-footer-leading {
justify-content: center;
}
/* Aktive Fahrt mit Storno: eine Zeile = #bookingModeSegmentWrap (Tabs sind darin verschachtelt, nicht direkte Grid-Kinder). */
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tabs {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tabs.booking-tabs--has-status {
grid-template-areas:
"lead"
"modeseg";
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tabs:not(.booking-tabs--has-status) {
grid-template-areas:
"modeseg";
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tabs #bookingModeSegmentWrap {
grid-area: modeseg;
width: 100%;
max-width: 100%;
min-width: 0;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger #bookingTabNow {
width: auto;
min-width: 112px;
align-self: center;
}
.booking-tab {
flex: 1;
min-width: 0;
min-height: 50px;
padding: 14px 16px;
border-radius: 14px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
border: 2px solid #e5e7eb;
background: var(--surface);
color: var(--navy);
}
.booking-tab--later {
border: none;
background: transparent;
color: #666666;
font-size: 14px;
font-weight: 600;
min-height: 0;
padding: 10px 8px;
margin-bottom: 4px;
border-radius: 0;
transition: color 0.2s ease, opacity 0.2s ease;
}
.bottom-sheet .booking-tab--later {
color: #777777;
font-weight: 500;
text-align: center;
}
/* „Warte auf Annahme“: wie ein eigener Status-Button (Rand + Fläche), gut von Storno unterscheidbar */
.booking-tab--later.booking-tab--waiting-accept {
border: 2px solid rgba(29, 78, 216, 0.42) !important;
background: linear-gradient(
180deg,
rgba(29, 78, 216, 0.14) 0%,
rgba(29, 78, 216, 0.07) 100%
) !important;
color: #1e3a8a !important;
font-weight: 750 !important;
font-size: 14px !important;
min-height: 44px !important;
padding: 10px 14px !important;
border-radius: 12px !important;
margin-bottom: 2px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 1px 2px rgba(15, 23, 42, 0.06);
text-align: center;
}
.booking-tab--later.booking-tab--waiting-accept:hover {
color: #172554 !important;
border-color: rgba(29, 78, 216, 0.55) !important;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tab--later.booking-tab--waiting-accept {
justify-self: stretch;
}
/* Aktive Fahrt: Status-Kachel links (nicht nur „Warte auf Annahme“) — einheitlich lesbar, nicht mit Storno überlappend. */
.booking-tab--later.booking-tab--footer-trip:not(.booking-tab--waiting-accept) {
border: 2px solid rgba(15, 23, 42, 0.12) !important;
background: rgba(248, 250, 252, 0.98) !important;
color: #0f172a !important;
font-weight: 650 !important;
font-size: 14px !important;
min-height: 44px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
margin-bottom: 0 !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
text-align: left !important;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tab--later.booking-tab--footer-trip .booking-tab-inner {
justify-content: flex-start;
width: 100%;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tab--later.booking-tab--waiting-accept {
text-align: left !important;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tab--later.booking-tab--waiting-accept .booking-tab-inner {
justify-content: flex-start;
}
.booking-tab--later.booking-tab--footer-trip .booking-tab-emoji {
display: none;
}
.booking-tab--later:hover {
color: #334155;
}
.booking-tab--later.active {
border: none;
background: transparent;
color: #1f2a44;
opacity: 1;
}
.booking-tab--now {
border-width: 2px;
}
.booking-tab--now:not(.active) {
background: #fff;
color: var(--ct24-index-appbar-text);
border-color: rgba(37, 99, 235, 0.18);
}
.booking-tab--now.active {
border: none;
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b));
color: #fff;
box-shadow: var(--ct24-ui-chat-shadow);
font-size: var(--ct24-book-now-font-size-active);
font-weight: 700;
min-height: 52px;
transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.bottom-sheet .booking-tab--now.active {
padding-top: 12px;
padding-bottom: 12px;
min-height: 44px;
height: auto;
}
.booking-tab--now.active:active {
transform: scale(0.96);
}
.booking-tab--now.booking-tab--danger.active {
background: #b91c1c !important;
color: #fff !important;
}
.booking-tab-inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-width: 0;
}
.booking-tab--loading .booking-tab-inner::before {
content: '';
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
border-top-color: #ffffff;
animation: ct24-booking-spin 0.8s linear infinite;
flex: 0 0 auto;
}
@keyframes ct24-booking-spin {
to { transform: rotate(360deg); }
}
.booking-tab--with-sub .booking-tab-inner {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
line-height: 1.1;
}
.booking-tab-emoji {
flex-shrink: 0;
font-size: 18px;
line-height: 1;
pointer-events: none;
}
.booking-tab-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.booking-tab-sub-label {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
font-weight: 600;
opacity: 0.9;
}
.booking-tab-sub-label[hidden] {
display: none !important;
}
.booking-tab--with-sub.active {
padding-top: 6px;
padding-bottom: 6px;
height: 52px;
}
.bottom-sheet .booking-tab--now.booking-tab--with-sub.active {
min-height: 44px;
height: 44px;
}
.booking-tab.active:not(.booking-tab--now):not(.booking-tab--later) {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b));
color: #fff;
border-color: transparent;
box-shadow: var(--ct24-ui-chat-shadow);
}
.booking-tab--danger {
background: #b91c1c !important;
color: #fff !important;
border-color: #991b1b !important;
}
.booking-tab:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.booking-tab.booking-tab--readonly:disabled {
opacity: 1;
cursor: default;
pointer-events: none;
background: #f1f5f9;
color: #0f172a;
border-color: #e2e8f0;
font-weight: 750;
}
.booking-footer-status {
font-size: 12px;
font-weight: 750;
color: #0f172a;
text-align: left;
padding: 0 2px 0;
line-height: 1.3;
min-height: 1.15em;
}
.booking-footer-status[hidden] {
display: none !important;
}
.rating-modal-stars {
display: flex;
justify-content: center;
gap: 10px;
margin: 14px 0;
}
.rating-star-btn {
width: 44px;
height: 44px;
border-radius: 12px;
border: 2px solid #e5e7eb;
background: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
color: #cbd5e1;
}
.rating-star-btn.is-on {
color: #f59e0b;
border-color: #fbbf24;
background: #fffbeb;
}
.rating-star-btn:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.rating-comment {
width: 100%;
min-height: 88px;
border-radius: 12px;
border: 1px solid #e5e7eb;
padding: 10px 12px;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
}
.booking-box { margin-top: var(--gap-sm); }
.booking-box--footer {
margin-top: 0;
}
/* Kompakte Datum/Uhrzeit-Auswahlzeile unter Modus „Später“ */
.when-pill {
width: 100%;
height: 50px;
border-radius: 14px;
border: 2px solid #ffffff;
background: #ffffff;
color: var(--navy);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.02em;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.when-pill:active { opacity: 0.92; }
.when-pill:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
.when-pill .muted {
color: #64748b;
font-weight: 700;
letter-spacing: 0.01em;
}
.when-pill .when-sep {
margin: 0 10px;
color: #94a3b8;
font-weight: 800;
}
/* Kalender (Monat) – kompakt, klar, mobile-friendly */
.ct24-cal {
width: 100%;
margin-top: 10px;
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
}
/* Inline (im Footer-Grid) statt Popup */
.ct24-cal-inline[hidden] { display: none !important; }
.ct24-cal-inline {
margin-top: 10px;
width: 100%;
max-width: 100%;
}
/* Im Popup soll der Kalender bündig sein (keine doppelte Kante / kein Versatz) */
.ct24-cal-modal-panel .ct24-cal {
margin-top: 0;
border: 0;
border-radius: 18px;
}
/* Calendar Popup */
.ct24-cal-modal {
position: fixed;
inset: 0;
z-index: 56;
display: flex;
align-items: center;
justify-content: center;
padding: 18px 16px;
background: rgba(15, 23, 42, 0.45);
}
.ct24-cal-modal[hidden] { display: none !important; }
.ct24-cal-modal-panel {
width: min(520px, 96vw);
background: #fff;
border-radius: 18px;
border: 1px solid rgba(26, 39, 68, 0.12);
box-shadow: 0 18px 55px rgba(15, 23, 42, 0.28);
overflow: hidden;
position: relative;
}
.ct24-cal-modal-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ct24-cal-modal-title {
font-size: 13px;
font-weight: 900;
color: #0f172a;
letter-spacing: 0.02em;
}
.ct24-cal-close {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(26,39,68,0.12);
background: #fff;
cursor: pointer;
font-weight: 900;
color: #0f172a;
line-height: 1;
display: grid;
place-items: center;
padding: 0;
}
.ct24-cal-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.ct24-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ct24-cal-head .m {
font-size: 13px;
font-weight: 900;
color: #0f172a;
letter-spacing: 0.02em;
}
.ct24-cal-nav {
width: 38px;
height: 38px;
border-radius: 10px;
border: 1px solid rgba(26,39,68,0.12);
background: #fff;
color: #0f172a;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
line-height: 1;
font-size: 18px;
}
.ct24-cal-nav:active { opacity: 0.9; }
.ct24-cal-wd, .ct24-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
padding: 8px 10px;
}
.ct24-cal-wd {
padding-bottom: 6px;
}
.ct24-cal-wd div {
text-align: center;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
}
.ct24-day {
height: 34px;
border-radius: 12px;
border: 1px solid rgba(26,39,68,0.10);
background: #fff;
color: #0f172a;
font-weight: 900;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.ct24-day.is-off { opacity: 0.35; }
.ct24-day.is-today { border-color: rgba(29, 78, 216, 0.35); }
.ct24-day.is-sel {
background: rgba(29, 78, 216, 0.12);
border-color: rgba(29, 78, 216, 0.28);
color: #1d4ed8;
}
.ct24-cal-time {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px 10px;
border-top: 1px solid rgba(0,0,0,0.06);
}
.ct24-cal-footer {
padding: 0 10px 12px;
border-top: 1px solid rgba(0,0,0,0.04);
}
.ct24-cal-apply {
width: 100%;
margin-top: 10px;
min-height: 46px;
border-radius: 14px;
border: 1px solid rgba(29, 78, 216, 0.35);
background: linear-gradient(180deg, rgba(29, 78, 216, 0.14), rgba(29, 78, 216, 0.08));
color: #1d4ed8;
font-weight: 900;
font-size: 15px;
letter-spacing: 0.02em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ct24-cal-apply:active {
opacity: 0.92;
}
.ct24-time-input {
flex: 0 0 auto;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(26,39,68,0.14);
background: #fff;
padding: 0 12px;
font-weight: 900;
font-size: 14px;
color: #0f172a;
}
.ct24-time-chips {
display: flex;
gap: 6px;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.ct24-chip {
flex: 0 0 auto;
height: 36px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(26,39,68,0.14);
background: #fff;
font-weight: 900;
font-size: 12px;
color: #0f172a;
cursor: pointer;
}
.ct24-chip:active { opacity: 0.9; }
.res-datetime {
width: 100%;
height: 50px;
border-radius: 14px;
border: 1px solid #e5e7eb;
background: #fff;
padding: 0 12px;
font-size: 15px;
outline: none;
}
.plan-head {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 0;
margin-bottom: var(--gap-xs);
}
.plan-title { font-weight: 900; color: #0f172a; font-size: 15px; letter-spacing: -0.01em; }
.plan-sub { font-weight: 650; color: var(--muted); font-size: 12px; }
.plan-chips {
display: flex;
flex-wrap: wrap;
gap: var(--gap-sm);
margin-top: var(--gap-sm);
}
.plan-dt-card{
margin-top: var(--gap-xs);
padding: 8px 10px 10px;
border: 1px solid #e5e7eb;
border-radius: 14px;
background: #fff;
}
.plan-dt-card .res-datetime{
border: 0;
border-radius: 10px;
padding: 0;
height: 46px;
margin: 0;
}
.plan-inline{
margin-top: var(--gap-md);
display: grid;
gap: var(--gap-xs);
}
.plan-inline-row{
display:flex;
justify-content: space-between;
gap: var(--gap-md);
font-size: 12px;
line-height: 1.35;
}
.plan-inline-row .k{ color: #64748b; font-weight: 850; }
.plan-inline-row .v{ color: #0f172a; font-weight: 850; text-align: right; max-width: 68%; }
.chip-btn{
border: 1px solid #e5e7eb;
background: #fff;
color: #0f172a;
border-radius: 999px;
padding: 7px 10px;
font-weight: 800;
font-size: 12px;
cursor: pointer;
}
.chip-btn:active{ opacity: .9; }
/* (Summary wurde in den Kalender-Bereich integriert) */
.btn-later-primary{
background: var(--navy);
color: #fff;
border: 0;
height: 50px;
border-radius: 14px;
font-weight: 900;
width: 100%;
cursor: pointer;
}
.btn-outline {
background: var(--surface);
color: var(--navy);
border: 2px solid #e5e7eb !important;
}
.btn-primary {
background: var(--navy);
color: #fff;
}
.btn-primary:disabled, .btn-outline:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.cancel-link {
display: block;
width: 100%;
margin-top: var(--gap-md);
padding: 8px;
background: none;
border: none;
color: #b91c1c;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
}
.cancel-link:disabled {
color: #9ca3af;
cursor: not-allowed;
}
/* Modal */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 57;
background: rgba(15, 22, 40, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.modal-backdrop[hidden] { display: none !important; }
.modal-panel {
background: var(--surface);
border-radius: 18px;
max-width: 360px;
width: 100%;
padding: 22px 20px 18px;
box-shadow: var(--shadow);
}
.modal-panel h2 {
margin: 0 0 16px;
font-size: 18px;
text-align: center;
color: #111827;
}
.fare-lines { list-style: none; margin: 0; padding: 0; }
.fare-lines li {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #f3f4f6;
font-size: 14px;
}
.fare-lines li:last-child { border-bottom: none; }
.fare-disclaimer {
font-size: 12px;
color: var(--muted);
line-height: 1.45;
margin: 14px 0 16px;
}
.modal-gotit {
width: 100%;
height: 48px;
border: none;
border-radius: 12px;
background: var(--navy-dark);
color: #fff;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.04em;
cursor: pointer;
}
/* pay-icon Styles sind weiter oben zentral definiert */
/* Web-Karte Mapbox (interaktiv) */
.ct24-map-shell #map {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
background: #dce2e9;
pointer-events: auto;
}
/* Keine leere Ticket-Zeile im Auftrags-Block */
#bookingTripHeroHead:not(:has(#bookingTicketRow:not([hidden]))) {
display: none !important;
}
/* Breite: min(560px, 100vw - 24px) — bereits in .bottom-sheet; kein extra Breakpoint nötig */
/* ---- Aktive Fahrt (body.ct24-is-buchung-page, gesetzt per JS bei laufender Buchung) ---- */
body.ct24-is-buchung-page .location-card,
body.ct24-is-buchung-page .index-loc-shell {
display: none !important;
}
/* Nach „Jetzt buchen“: links Status, rechts „Stornieren“ */
body.ct24-is-buchung-page #bookingTabNow:not(.booking-tab--danger) {
display: none !important;
}
/* Vor Storno-Button: Statuszeile, darunter linker Tab (Status) — Pay-Zeile ausgeblendet */
body.ct24-is-buchung-page #indexBookingFooterHost:not(.index-booking-footer-host--danger) .booking-tabs.booking-tabs--has-status {
grid-template-columns: 1fr;
grid-template-areas:
"lead"
"tablater";
}
body.ct24-is-buchung-page #indexBookingFooterHost:not(.index-booking-footer-host--danger) .booking-tabs:not(.booking-tabs--has-status) {
grid-template-columns: 1fr;
grid-template-areas:
"tablater";
}
/* Während aktiver Buchung: Menüleiste (Burger, Tabs, Guthaben) aus — mehr Karte sichtbar */
body.ct24-is-buchung-page .app-header {
display: none !important;
}
/* Nach Buchung: nur Fahrer-Top-Sheet (Auftrag unten im Bottom-Sheet) */
.booking-top-stack {
position: fixed;
top: max(12px, env(safe-area-inset-top));
left: 0;
right: 0;
z-index: 6;
padding: 0 12px;
display: flex;
flex-direction: column;
gap: var(--gap-sm);
pointer-events: none;
}
.booking-top-stack > * { pointer-events: auto; }
.booking-top-stack[hidden] { display: none !important; }
body.ct24-is-buchung-page .booking-top-stack {
display: flex;
top: 0;
padding-top: max(8px, env(safe-area-inset-top, 0px));
gap: 0;
}
/* Fahrer-Panel: Inhalt oben, Griff unten (nach unten aufklappbar) */
.booking-driver-top-sheet {
display: flex;
flex-direction: column;
width: 100%;
max-width: 440px;
margin: 0 auto;
pointer-events: auto;
border-radius: 18px;
border: 1px solid var(--border);
box-shadow: var(--shadow);
overflow: hidden;
transition: box-shadow 0.22s ease, opacity 0.22s ease;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
body.ct24-is-buchung-page .booking-driver-top-sheet.ct24-glass {
border: 1px solid rgba(255, 255, 255, 0.68);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.11);
}
.booking-driver-top-sheet.is-collapsed .booking-driver-top-sheet__inner {
display: none !important;
}
.booking-driver-top-sheet.is-collapsed .booking-driver-top-sheet__chrome {
border-top: none;
border-radius: 18px;
}
.booking-driver-top-sheet__chrome {
position: relative;
flex-shrink: 0;
margin-top: auto;
border-top: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.55);
border-radius: 0 0 16px 16px;
}
.booking-driver-top-sheet__drag {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0 6px;
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.booking-driver-top-sheet__drag:active {
cursor: grabbing;
}
.booking-driver-top-sheet__handle-bar {
width: 40px;
height: 5px;
background: #bbbbbb;
border-radius: 10px;
}
.booking-driver-top-sheet__hit {
position: absolute;
inset: 0;
margin: 0;
border: none;
padding: 0;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.booking-driver-top-sheet__hit:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
.booking-driver-top-sheet__inner {
flex: 1 1 auto;
min-height: 0;
max-height: min(46vh, 380px);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.booking-trip-hero--driver-only {
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
}
.booking-trip-hero--driver-only .booking-trip-hero__driver-slot .fahrerkarte {
margin: 0;
}
.booking-trip-hero--driver-only .booking-trip-hero__driver-slot .fahrerkarte--haupt {
border-radius: 16px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
/* ——— Bottom-Sheet „Auftrag“ während Fahrt (Status + Ticket + Details) ——— */
.booking-sheet-block-head {
display: none;
margin: 0;
padding: 0;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast:not(.is-collapsed) #sheetBody .booking-sheet-block-head {
display: block;
}
.booking-sheet-block-title {
margin: 0 0 2px;
padding: 0 2px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
}
.booking-sheet-status-banner {
display: block;
margin: 0 0 2px;
padding: 10px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: #0f172a;
background: linear-gradient(180deg, rgba(29, 78, 216, 0.1) 0%, rgba(29, 78, 216, 0.04) 100%);
border: 1px solid rgba(29, 78, 216, 0.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
.booking-sheet-status-banner[hidden] {
display: none !important;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast:not(.is-collapsed) #sheetBody.sheet-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: var(--ct24-sheet-pad-y) var(--ct24-sheet-pad-x);
box-sizing: border-box;
background: rgba(248, 250, 252, 0.65);
}
body.ct24-is-buchung-page #sheetBody .booking-trip-hero__head {
margin: 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
#sheetBody .booking-trip-hero__head {
border-radius: 14px;
overflow: hidden;
}
body.ct24-is-buchung-page #sheetBody .booking-trip-flow {
margin: 0;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
background: rgba(255, 255, 255, 0.95);
overflow: hidden;
}
body.ct24-is-buchung-page #sheetBody .booking-trip-flow .booking-trip-context-card {
padding: 8px 12px 10px;
}
body.ct24-is-buchung-page #sheetBody .cancel-link--trip-flow {
margin: 0;
padding: 10px 12px 12px;
border-radius: 0 0 12px 12px;
background: rgba(248, 250, 252, 0.9);
}
#sheetBody .booking-trip-flow {
margin-top: 0;
border-radius: 14px;
}
/* Eine Karte: Ticket-Zeile + Fahrer (Uber-/Bolt-ähnlich) */
.booking-trip-hero {
width: 100%;
max-width: 440px;
margin: 0 auto;
background: var(--surface);
border-radius: 18px;
border: 1px solid var(--border);
box-shadow: var(--shadow);
overflow: hidden;
}
.booking-trip-hero__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 100%);
border-bottom: 1px solid var(--border);
}
/* Aktive Fahrt: volle Helden-Karte; Ausnahme: nur-Fahrer-Karte im Top-Sheet (Glas am äußeren Top-Sheet) */
body.ct24-is-buchung-page .booking-trip-hero:not(.booking-trip-hero--driver-only) {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.68);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.11);
}
body.ct24-is-buchung-page .booking-trip-hero__head {
background: rgba(241, 245, 249, 0.55);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body.ct24-is-buchung-page .booking-trip-hero--driver-only .fahrerkarte--haupt {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.75);
}
.booking-trip-hero__ticket {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
background: var(--navy);
color: #fff;
box-shadow: var(--shadow-soft);
}
.booking-trip-hero__ticket[hidden] {
display: none !important;
}
.booking-trip-hero__ticket-k {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.85;
}
.booking-trip-hero__ticket-num {
font-size: 18px;
font-weight: 900;
letter-spacing: 0.12em;
}
.booking-trip-hero__share {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid var(--border);
background: #fff;
color: var(--navy);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
box-shadow: var(--shadow-soft);
}
.booking-trip-hero__share[hidden] {
display: none !important;
}
.booking-trip-hero__share:active {
opacity: 0.9;
}
.booking-trip-hero__share svg {
width: 22px;
height: 22px;
}
.booking-trip-hero__driver-slot .fahrerkarte {
margin: 0;
}
.booking-trip-hero__driver-slot .fahrerkarte--haupt {
border-radius: 16px;
}
body.ct24-is-buchung-page .booking-trip-hero__driver-slot .booking-vehicle-graphic {
width: 100px;
height: 50px;
}
body.ct24-is-buchung-page .booking-trip-hero__driver-slot .fahrerkarte--haupt .booking-vehicle-graphic {
width: 72px;
height: 40px;
}
/* Sheet-Body nur im echten Bottom-Sheet (z. B. test.html); nicht für losgelöstes #sheetBody am Index */
.bottom-sheet .sheet-body.sheet-body--booking-only {
min-height: 0;
}
/* Während Fahrt: Höhe am Inhalt orientiert (kein leerer Glas-Block bis zum Footer) */
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast .sheet-body.sheet-body--booking-only {
flex: 0 1 auto;
flex-grow: 0;
min-height: 0;
max-height: min(52vh, calc(100vh - 140px));
max-height: min(52vh, calc(100dvh - 140px));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Nach Buchung: volle Viewport-Breite wie Index-Stack / Ionic-Nav — kein schmales „Schwimmkarten“-Sheet */
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet {
max-height: none;
padding-top: 0;
padding-bottom: env(safe-area-inset-bottom);
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: none;
margin: 0;
border-radius: 16px 16px 0 0;
border-bottom: none;
box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.1);
transform: none;
}
/* Buchungsfuß: fixed unten (früher #bottomSheet) */
body.ct24-is-buchung-page #indexUiStack {
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: auto;
max-width: none;
margin: 0;
display: block;
pointer-events: none;
}
body.ct24-is-buchung-page #indexBottomSheetMount {
display: contents;
}
/*
* Alt: reine Buchungsseite ohne Fahrgast-Bottom-Sheet — Griff + Sheet-Inhalt aus.
* Index mit aktiver Fahrt: .ct24-sheet--fahrgast braucht Griff und #sheetBody sichtbar.
*/
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet:not(.ct24-sheet--fahrgast) .sheet-toggle {
display: none !important;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet:not(.ct24-sheet--fahrgast) .sheet-body {
display: none !important;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast .sheet-toggle {
display: flex !important;
flex-direction: column;
min-height: 14px;
padding-top: 0;
gap: 0;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast .ct24-sheet-drag-handle {
padding-top: 0;
padding-bottom: 0;
min-height: 14px;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast .sheet-toggle__hint {
display: none !important;
min-height: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast:not(.is-collapsed) .sheet-body.sheet-body--booking-only {
display: flex !important;
flex-direction: column;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast .booking-footer {
margin-top: 0 !important;
padding: var(--ct24-sheet-pad-y) var(--ct24-sheet-pad-x) max(10px, env(safe-area-inset-bottom));
border-top: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.96);
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast .booking-tabs {
row-gap: 6px;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast.is-collapsed .sheet-body,
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast.is-collapsed #sheetBody.sheet-body {
display: none !important;
visibility: hidden !important;
height: 0 !important;
max-height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
background: transparent !important;
border: none !important;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast:not(.is-collapsed) #sheetBody.sheet-body {
visibility: visible;
pointer-events: auto;
opacity: 1;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast.is-collapsed .ct24-sheet-drag-handle {
padding-top: 0;
padding-bottom: 0;
min-height: 14px;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast.is-collapsed .sheet-handle {
opacity: 1;
background: #94a3b8;
}
body.ct24-is-buchung-page:not(.ct24-index-no-ion-bottom-sheet) .bottom-sheet.ct24-sheet--fahrgast.is-collapsed {
overflow: hidden !important;
}
.ct24-buchung-neu-wrap {
padding: 10px 14px 12px;
border-top: 1px solid var(--border);
}
a.ct24-buchung-neu-fahrt {
display: block;
width: 100%;
text-align: center;
padding: 12px;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--navy);
font-weight: 800;
font-size: 14px;
text-decoration: none;
box-shadow: var(--shadow-soft);
}
a.ct24-buchung-neu-fahrt:active {
opacity: 0.92;
}
/* Wallet-Popup (Kopfzeile): zentriert, über dem Menü-Drawer */
.index-cashback-popup {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
pointer-events: none;
}
.index-cashback-popup:not([hidden]) {
pointer-events: auto;
}
.index-cashback-popup[hidden] {
display: none !important;
}
.index-cashback-popup__scrim {
position: absolute;
inset: 0;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
background: rgba(26, 39, 68, 0.45);
backdrop-filter: blur(4px);
}
.index-cashback-popup__dialog {
position: relative;
z-index: 1;
width: min(400px, 100%);
max-height: min(88vh, 580px);
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--surface);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(21, 34, 56, 0.22);
border: 1px solid rgba(26, 39, 68, 0.08);
box-sizing: border-box;
}
.index-cashback-popup__head {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 14px 10px;
border-bottom: 1px solid var(--border);
}
.index-cashback-popup__title {
margin: 0;
font-size: 17px;
font-weight: 900;
color: var(--navy);
line-height: 1.2;
}
.index-cashback-popup__close {
flex-shrink: 0;
width: 36px;
height: 36px;
border: none;
border-radius: 10px;
background: #e2e8f0;
color: var(--navy);
font-size: 20px;
font-weight: 700;
line-height: 1;
cursor: pointer;
padding: 0;
}
.index-cashback-popup__close:active {
opacity: 0.9;
}
.index-cashback-popup__mount {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 16px 18px;
box-sizing: border-box;
}
.index-cashback-popup__mount .index-menu-drawer__panel {
margin: 0;
padding: 0;
}
.index-cashback-popup__mount .index-menu-drawer__panel-title {
display: none;
}
.index-cashback-popup__mount .index-cashback-ledger-list {
max-height: min(240px, 38vh);
}
/* QR-Gutschrift: Erfolgs-Popup über Menü/Karte */
.index-cbqr-overlay {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
pointer-events: none;
}
.index-cbqr-overlay:not([hidden]) {
pointer-events: auto;
}
.index-cbqr-overlay[hidden] {
display: none !important;
}
.ct24-guest-blocked-overlay {
z-index: 65;
}
.index-cbqr-scrim {
position: absolute;
inset: 0;
background: rgba(26, 39, 68, 0.45);
backdrop-filter: blur(4px);
}
.index-cbqr-dialog {
position: relative;
width: min(360px, 100%);
max-height: min(85vh, 520px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--surface);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(21, 34, 56, 0.22);
border: 1px solid rgba(26, 39, 68, 0.08);
padding: 22px 20px 18px;
text-align: center;
}
.index-cbqr-icon {
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 900;
line-height: 1;
}
.index-cbqr-icon--success {
background: linear-gradient(145deg, #dcfce7 0%, #bbf7d0 100%);
color: #15803d;
border: 2px solid rgba(34, 197, 94, 0.35);
}
.index-cbqr-icon--warn {
background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
color: #b45309;
border: 2px solid rgba(245, 158, 11, 0.4);
}
.index-cbqr-title {
margin: 0 0 10px;
font-size: 1.2rem;
font-weight: 900;
color: var(--navy);
line-height: 1.25;
}
.index-cbqr-body {
margin: 0 0 12px;
font-size: 0.95rem;
font-weight: 650;
color: #374151;
line-height: 1.45;
}
.index-cbqr-sub {
margin: 0 0 18px;
font-size: 0.82rem;
font-weight: 600;
color: var(--muted);
line-height: 1.45;
}
.index-cbqr-btn {
width: 100%;
height: 48px;
border: none;
border-radius: 14px;
background: var(--navy);
color: #fff;
font-weight: 900;
font-size: 15px;
cursor: pointer;
box-shadow: var(--shadow-soft);
}
.index-cbqr-btn:active {
opacity: 0.92;
transform: scale(0.99);
}
/* Mapbox: Geocoding-Vorschläge unter Adressfeldern */
.ct24-mbx-ac-list {
position: absolute;
left: 0;
right: 0;
top: 100%;
/* Hoher z-index, damit die Vorschlagsliste garantiert über der Zielzeile,
der Waypoint-Zeile und dem Kartenhintergrund liegt. */
z-index: 1000;
margin: 4px 0 0;
max-height: 220px;
overflow-y: auto;
border-radius: 12px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.ct24-mbx-ac-item {
display: block;
width: 100%;
text-align: left;
padding: 10px 12px;
border: none;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
background: #fff;
font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
color: #0f172a;
cursor: pointer;
}
.ct24-mbx-ac-item:last-child {
border-bottom: none;
}
.ct24-mbx-ac-item:active,
.ct24-mbx-ac-item:hover {
background: rgba(15, 118, 110, 0.08);
}
/* Index: Termin (#bookingBoxLater) in Toolbar; Footer-.booking-tabs nur bei sichtbarem Status */
body:not(.ct24-is-buchung-page) .booking-tabs:not(.booking-tabs--has-status):not(:has(#bookingModeSegmentWrap)) {
display: none;
}
body:not(.ct24-is-buchung-page) #indexBookingFooterHost:not(.index-booking-footer-host--has-status) .booking-footer:not(:has(#bookingModeSegmentWrap)) {
display: none;
}
body:not(.ct24-is-buchung-page) .booking-tabs.booking-tabs--has-status {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"lead";
column-gap: 0;
row-gap: 0;
margin-top: 0;
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) .booking-cashback-minus {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 6px;
font-size: 18px;
font-weight: 800;
color: #475569;
line-height: 1;
}
body:not(.ct24-is-buchung-page) #bookingModeSegmentWrap.booking-mode-toolbar {
flex: 0 0 auto;
/* Grid mit demselben 3-Spalten-Template wie .index-loc-price-grid */
display: grid;
grid-template-columns: var(--ct24-card-col-pay, clamp(5.5rem, 27vw, 8.75rem)) var(--ct24-card-col-mid, 1fr) var(--ct24-card-col-end, 1fr);
align-items: stretch;
width: auto;
max-width: none;
/* Kein Negativ-Margin: soll wie bei ct24-cal-open bündig zum Adress-Karteninnenrand wirken */
margin: 0;
box-sizing: border-box;
padding: 0;
border-top: none;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
/* Außen gleichmäßig 28px — wie Pay-Pille links / „Später“ rechts */
border-radius: 28px;
overflow: hidden;
align-self: stretch;
isolation: isolate;
}
/* Falls der Button-Block in .index-loc-booking-toolbar verpackt: keine Außen-Margins; untere Rundung zur Adresskarte */
body:not(.ct24-is-buchung-page) .index-loc-booking-toolbar #bookingModeSegmentWrap.booking-mode-toolbar {
margin: 0 !important;
border-top: none;
/* Rechts wie links: 28px zur Pay-Pille / zum „Später“-Pill */
border-radius: 28px 28px 24px 28px;
}
/* Pay-Wrap hält Bar/Karte in Spalte 1. */
body:not(.ct24-is-buchung-page) #bookingModeSegmentWrap.booking-mode-toolbar .booking-mode-toolbar__pay {
grid-column: 1 / 2;
grid-row: 1;
flex: none !important;
width: 100%;
min-width: 0;
max-width: none;
align-self: stretch;
border-radius: 28px 0 0 28px;
overflow: hidden;
background: transparent;
}
/* Tabs-Block spannt Spalten 2 + 3 — innerer Grid spiegelt mid + end 1:1. */
body:not(.ct24-is-buchung-page) #bookingModeSegmentWrap.booking-mode-toolbar .booking-mode-toolbar__tabs {
grid-column: 2 / 4;
grid-row: 1;
display: grid;
grid-template-columns: var(--ct24-card-col-mid, 1fr) var(--ct24-card-col-end, 1fr);
align-items: stretch;
width: 100%;
min-width: 0;
}
/* „Jetzt buchen“ inaktiv: eigene Pillenfläche (ohne Toolbar-Hintergrund) */
body:not(.ct24-is-buchung-page)
#indexUiStack
#bookingModeSegmentWrap.booking-mode-toolbar
.booking-tab--now:not(.active) {
background: #ffffff !important;
box-shadow:
0 2px 10px rgba(15, 23, 42, 0.14),
inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}
/* Wenn Pay verborgen ist, übernehmen die Tabs die gesamte Breite. */
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap:has(#bookingFooterPayMethodWrap[hidden]) .booking-mode-toolbar__tabs {
grid-column: 1 / 4;
}
/* „Später planen" Datum/Uhrzeit-Box sitzt als eigene, volle Zeile unter
den Tabs — nur sichtbar, wenn der Nutzer „Später" wählt. */
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar #bookingBoxLater {
grid-column: 1 / 4;
grid-row: 2;
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 10px var(--ct24-loc-pad-x, 12px) 12px;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-top: none;
}
/* Termin-Zeile: nur diese Zeile deckend — Toolbar drumherum bleibt transparent */
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar
#bookingBoxLater:not([hidden]) {
background: rgba(255, 255, 255, 0.96) !important;
border-radius: 0 0 22px 22px;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar #bookingBoxLater[hidden] {
display: none !important;
}
/* CT24_INDEX_STAY_2:
Auf dem Index (also solange `ct24-is-buchung-page` NICHT gesetzt ist)
sollen Header/Ticket-Nr./Fahrtdetails-Block nicht erscheinen — auch
wenn JS-Routinen sie via `element.hidden = false` aktivieren wollen.
So bleibt die Hauptseite nach "Jetzt buchen" unveraendert sichtbar. */
body:not(.ct24-is-buchung-page) #bookingTopStack,
body:not(.ct24-is-buchung-page) #bookingTripHeroHead,
body:not(.ct24-is-buchung-page) #bookingTicketRow,
body:not(.ct24-is-buchung-page) #bookingTicketShareBtn,
body:not(.ct24-is-buchung-page) #tripFlowDetails,
body:not(.ct24-is-buchung-page) #bookingSheetBlockHead {
display: none !important;
}
/* CT24_INDEX_STAY_3:
Sobald eine Buchung aktiv ist (Klasse `ct24-trip-storno-card` wird in
refreshBookingFooterCTA parallel zu tripAllowsCancel() gesetzt), …
Preiszeile + Adress-Felder ausblenden — Fokus auf Storno/Status.
Kopfzeile (#indexAppHeaderBar) bleibt sichtbar (Burger, Tel, Wallet, Chat-Slot). */
body.ct24-trip-storno-card #bookingFooterPriceRow,
body.ct24-trip-storno-card .index-loc-shell .loc-row,
body.ct24-trip-storno-card .index-loc-shell .loc-waypoint-row,
body.ct24-trip-storno-card #indexWaypointsMount,
body.ct24-trip-storno-card #clearPickupBtn,
body.ct24-trip-storno-card #bookingFooterPayMethodWrap,
body.ct24-trip-storno-card .booking-mode-toolbar__pay {
display: none !important;
}
/* CT24_INDEX_STAY_3b: Kopfzeile über Dock (#indexBottomChromeStack bis z-index 55) — Burger nicht durch addr-only verstecken,
* Layer stabil wenn Disclosure/Chat-Sync zwischen Zuständen wechselt. */
body.ct24-trip-storno-card:not(.ct24-is-buchung-page) #indexAppHeaderBar.app-header.app-header--index-top {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
z-index: 80 !important;
}
body.ct24-trip-storno-card:not(.ct24-is-buchung-page) #indexAppHeaderBar .app-header__shell,
body.ct24-trip-storno-card:not(.ct24-is-buchung-page) #indexAppHeaderBar .top-menu {
pointer-events: auto !important;
}
/* Storno: Menü-Burger liegt nicht mehr in #indexAppHeaderBar (strip-remove). */
/* CT24_INDEX_STAY_4 / CT24_INDEX_STAY_5 / CT24_INDEX_STAY_6:
Wenn nur noch die Tab-Toolbar (#bookingModeSegmentWrap) in der
Buchungskarte sichtbar ist, soll sie dieselbe 16px-Rundung wie die
Fahrerkarte bekommen und die drei Buttons (Zahlung | Status | Storno)
sollen die Flaeche randlos, ohne eigene Radien/Schatten/Margins
ausfuellen. Wir heben die Specificity durch #indexUiStack an, damit
wir die breit greifenden Grund-Regeln (Zeile ~2220 und ~6205)
sicher ueberschreiben — und setzen die zentralen Werte !important. */
/* Karte: keine Innenpolsterung, hartes Clippen.
WICHTIG: Die Fahrerkarte (`#indexFahrerkarteHome #fahrerkarte`) hat
`border-radius: 18px 18px 0 0` — sie ist designt, nach unten flach
gegen die Buchungskarte zu laufen, sodass beide zusammen EINE durch-
gehende Karte bilden. Deshalb im Trip-/Storno-Modus: **oben flach,
unten 18 px** rund — und kein oberer Schatten/Border, damit der
Übergang zur Fahrerkarte nahtlos wirkt. */
body.ct24-trip-storno-card #indexUiStack .index-loc-shell.location-card {
padding: 0 !important;
overflow: hidden !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 18px !important;
border-bottom-right-radius: 18px !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
margin-top: 0 !important;
}
/* Toolbar: keine eigene Fläche — nur die Tabs sind farbige Klickflächen */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap.booking-mode-toolbar {
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
overflow: hidden !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
align-items: stretch !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Tabs-Wrap: fuellt die gesamte Kartenbreite, inneres Grid ohne Gap —
2 gleiche Zellen (Status | Storno). */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__tabs {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
align-items: stretch !important;
width: 100% !important;
min-width: 0 !important;
box-shadow: 0 6px 22px rgba(15, 23, 42, 0.2) !important;
}
/* Status/Storno stabil: Status immer links, Stornieren immer rechts (auch wenn DOM-Reihenfolge anders ist). */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__tabs > #bookingTabLater {
grid-column: 1 !important;
grid-row: 1 !important;
order: 1 !important;
}
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__tabs > #bookingTabNow {
grid-column: 2 !important;
grid-row: 1 !important;
order: 2 !important;
}
/* Alle Buttons: fuellen ihre Zelle zu 100%, keine eigenen Ra_nder/
Schatten/Margins, einheitliche Mindesthoehe. Die Eck-Buttons tragen
explizit die Kartenrundung an ihren Aussenecken, damit Rand auf Rand
sitzt — unabhaengig vom overflow:hidden-Clipping der Karte. */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-tab,
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-payment-btn {
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
min-height: 56px !important;
height: 100% !important;
width: 100% !important;
padding: 10px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* Links unten: erster Tab (#bookingTabNow → Storno) traegt die
linke UNTERE Kartenrundung (18 px). Oben flach, weil die Fahrerkarte
darueber die obere Rundung uebernimmt. IDs + Kombi-Klassen maximieren
die Specificity, damit `.booking-tab--later.booking-tab--waiting-accept
{ border-radius: 12px !important }` (Zeile ~4860) nicht per Shorthand
die einzelnen Eck-Properties zurueckstellt. */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__tabs > #bookingTabLater,
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__tabs > .booking-tab.booking-tab--later.booking-tab--waiting-accept,
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__tabs > .booking-tab.booking-tab--later.booking-tab--footer-trip {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 18px !important;
border-bottom-right-radius: 0 !important;
}
/* Rechts unten: letzter Tab (#bookingTabLater → Warte auf Annahme) traegt
die rechte UNTERE Kartenrundung (18 px). */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__tabs > #bookingTabNow,
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__tabs > .booking-tab.booking-tab--now.booking-tab--danger {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 18px !important;
}
/* Die inneren Label-Container zentrieren. */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-tab .booking-tab-inner {
width: 100% !important;
justify-content: center !important;
align-items: center !important;
}
/* Dezente Haarlinien zwischen den Segmenten. */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__pay {
border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
}
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-mode-toolbar__tabs > .booking-tab + .booking-tab {
border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
}
/* „Warte auf Annahme"-Segment (links der Tabs): weicher blauer Tint. */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-tab--later.booking-tab--waiting-accept {
background: linear-gradient(180deg, rgba(219, 234, 254, 0.98) 0%, rgba(191, 219, 254, 0.92) 100%) !important;
color: #1e3a8a !important;
font-weight: 700 !important;
font-size: 14px !important;
}
/* Generelle Status-Kachel (ohne waiting-accept): neutrale Info-Flaeche. */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-tab--later.booking-tab--footer-trip:not(.booking-tab--waiting-accept) {
background: rgba(248, 250, 252, 1) !important;
color: #0f172a !important;
font-weight: 650 !important;
font-size: 14px !important;
}
/* Storno rechts: gleiche Primärfarbe / Verlauf wie Schritt 1 („Jetzt buchen“). */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-tab--now.booking-tab--danger {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b)) !important;
color: #fff !important;
font-weight: 750 !important;
font-size: 16px !important;
box-shadow: var(--ct24-ui-chat-shadow) !important;
}
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-tab--now.booking-tab--danger:hover {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b)) !important;
filter: brightness(1.06);
}
/* Gleiche Ziel-Taste wie oben, per ID — überschreibt z. B. `.booking-tab--danger` / `.booking-tab--now.booking-tab--danger.active` (Rot) sicher. */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap #bookingTabNow.booking-tab--danger,
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap #bookingTabNow.booking-tab--danger.active {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b)) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: var(--ct24-ui-chat-shadow) !important;
}
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap #bookingTabNow.booking-tab--danger:hover {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b)) !important;
filter: brightness(1.06);
}
/* Zahlungs-Button: hellgraues Segment, keine harte Umrandung. */
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-payment-btn {
background: #f1f5f9 !important;
color: #334155 !important;
font-weight: 700 !important;
}
body.ct24-trip-storno-card #indexUiStack #bookingModeSegmentWrap .booking-payment-btn[aria-pressed="true"] {
background: #1f2a44 !important;
color: #fff !important;
}
/* Zahlung + Jetzt/Später unter Zieladresse — gleiche horizontale Einrückung wie bei offenem Kalender (kein Negativ-Margin) */
body:not(.ct24-is-buchung-page) .index-loc-booking-toolbar {
display: flex;
flex-direction: column;
width: auto;
margin: 0;
margin-top: 0;
padding: 0;
box-sizing: border-box;
border-top: none;
flex-shrink: 0;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
overflow: hidden;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) #ct24IndexStep2Sheet #bookingModeSegmentWrap.booking-mode-toolbar {
margin: 0 !important;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
border-top: none !important;
column-gap: 10px !important;
overflow: hidden;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page):not(.ct24-cal-open)
#ct24IndexStep2Sheet
#bookingModeSegmentWrap.booking-mode-toolbar
.booking-mode-toolbar__pay {
padding-right: 0;
border-radius: 28px 0 0 28px;
overflow: hidden;
background: transparent;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page):not(.ct24-cal-open)
#ct24IndexStep2Sheet
#bookingModeSegmentWrap.booking-mode-toolbar
.booking-mode-toolbar__tabs {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 28px;
overflow: hidden;
gap: 0;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page):not(.ct24-cal-open)
#ct24IndexStep2Sheet
#bookingModeSegmentWrap
.booking-tab--now:not(.active) {
background: #ffffff !important;
color: #0f172a !important;
box-shadow:
0 2px 10px rgba(15, 23, 42, 0.14),
inset 0 0 0 1px rgba(37, 99, 235, 0.18) !important;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page):not(.ct24-cal-open)
#ct24IndexStep2Sheet
#bookingModeSegmentWrap
.booking-tab--later:not(.active) {
background: #ffffff !important;
color: #334155 !important;
font-weight: 700 !important;
box-shadow:
0 2px 10px rgba(15, 23, 42, 0.14),
inset 0 0 0 1px rgba(15, 23, 42, 0.12) !important;
}
/* ─── Progressive Disclosure DEAKTIVIERT ───────────────────────────
Alle Bereiche (Fahrerkarte, Preiszeile, Zahlungsbar) sind immer sichtbar.
Die frühere Ein-/Ausblende-Logik ist bewusst entfernt. */
/* ─── Reihenfolge in der Buchungskarte (wenn Preis im gleichen Block wie Leiste) ─
Index-Live: Preiszeile liegt im #indexUiStack (Hero), nicht in .location-card.
Von oben nach unten in .location-card:
1) Zahlung + Jetzt buchen + Später planen (#bookingModeSegmentWrap)
2) Preiszeile (nur in Host-Layouts mit Footer)
3) Abholadresse … */
body:not(.ct24-is-buchung-page) #indexUiStack .location-card,
body:not(.ct24-is-buchung-page) #indexBookingFooterHost,
body:not(.ct24-is-buchung-page) #indexBookingRouteHost {
display: flex !important;
flex-direction: column !important;
}
body:not(.ct24-is-buchung-page) #indexUiStack .location-card #bookingModeSegmentWrap,
body:not(.ct24-is-buchung-page) #indexBookingFooterHost #bookingModeSegmentWrap { order: 1 !important; }
body:not(.ct24-is-buchung-page) #indexUiStack .location-card #bookingFooterPriceRow,
body:not(.ct24-is-buchung-page) #indexBookingFooterHost #bookingFooterPriceRow { order: 2 !important; }
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row.pickup,
body:not(.ct24-is-buchung-page) #indexBookingFooterHost .loc-row.pickup,
body:not(.ct24-is-buchung-page) #indexBookingRouteHost .loc-row.pickup { order: 3 !important; }
body:not(.ct24-is-buchung-page) #indexUiStack .location-card #indexWaypointsMount,
body:not(.ct24-is-buchung-page) #indexBookingFooterHost #indexWaypointsMount,
body:not(.ct24-is-buchung-page) #indexBookingRouteHost #indexWaypointsMount { order: 4 !important; }
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-waypoint-row,
body:not(.ct24-is-buchung-page) #indexBookingFooterHost .loc-waypoint-row,
body:not(.ct24-is-buchung-page) #indexBookingRouteHost .loc-waypoint-row { order: 5 !important; }
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-row.drop,
body:not(.ct24-is-buchung-page) #indexBookingFooterHost .loc-row.drop,
body:not(.ct24-is-buchung-page) #indexBookingRouteHost .loc-row.drop { order: 6 !important; }
/* Versteckte Pickup-Clear-Button etc. hinten */
body:not(.ct24-is-buchung-page) #indexUiStack .location-card .loc-clear-hidden { order: 99 !important; }
body.ct24-show-area-labels [data-ct24-area-label] {
position: relative;
}
body.ct24-show-area-labels [data-ct24-area-label]::before {
content: attr(data-ct24-area-label);
position: absolute;
left: 8px;
top: -18px;
z-index: 9999;
pointer-events: none;
font: 800 11px/1.2 "Segoe UI", Arial, sans-serif;
letter-spacing: 0.02em;
color: #fff;
background: rgba(15, 23, 42, 0.92);
padding: 3px 7px;
border-radius: 7px;
text-transform: none;
}
body:not(.ct24-is-buchung-page) #bookingModeSegmentWrap .booking-mode-toolbar__pay:not([hidden]) {
flex: 0 0 clamp(5.5rem, 27vw, 8.75rem);
max-width: 100%;
border-right: none;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#ct24IndexStep2Sheet
#bookingModeSegmentWrap
.booking-payment-btn.booking-payment-btn--toolbar {
border-radius: 28px 0 0 28px;
min-height: 46px;
box-sizing: border-box;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page):not(.ct24-cal-open)
#ct24IndexStep2Sheet
#bookingModeSegmentWrap
.booking-mode-toolbar__tabs
> .booking-tab:first-child {
border-radius: 28px 0 0 28px !important;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page):not(.ct24-cal-open)
#ct24IndexStep2Sheet
#bookingModeSegmentWrap
.booking-mode-toolbar__tabs
> .booking-tab:last-child {
border-radius: 0 28px 28px 0 !important;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page):not(.ct24-cal-open)
#ct24IndexStep2Sheet
#bookingModeSegmentWrap.booking-mode-toolbar--later
.booking-mode-toolbar__tabs
> #bookingTabLater {
border-radius: 28px 0 0 28px !important;
}
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page):not(.ct24-cal-open)
#ct24IndexStep2Sheet
#bookingModeSegmentWrap.booking-mode-toolbar--later
.booking-mode-toolbar__tabs
> #bookingTabNow {
border-radius: 0 28px 28px 0 !important;
}
body:not(.ct24-is-buchung-page) #bookingModeSegmentWrap .booking-tab--now:not(.active) {
background: #fff;
color: var(--ct24-index-appbar-text);
border: none;
box-shadow:
0 2px 10px rgba(15, 23, 42, 0.14),
inset 0 0 0 1px rgba(37, 99, 235, 0.16);
}
body:not(.ct24-is-buchung-page) #bookingModeSegmentWrap .booking-tab--now.active {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b));
color: #fff;
border: none;
box-shadow: var(--ct24-ui-chat-shadow);
}
body:not(.ct24-is-buchung-page) #bookingModeSegmentWrap .booking-tab--later:not(.active) {
background: #ffffff;
color: #334155;
font-weight: 700;
border: none;
box-shadow:
0 2px 10px rgba(15, 23, 42, 0.14),
inset 0 0 0 1px rgba(15, 23, 42, 0.11);
}
body:not(.ct24-is-buchung-page) #bookingModeSegmentWrap .booking-tab--later.active {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b));
color: #fff !important;
font-weight: 700;
opacity: 1;
box-shadow: var(--ct24-ui-chat-shadow);
}
/* Später-Modus: CTA-Reihenfolge tauschen (links Später planen, rechts Jetzt reservieren). */
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar--later
.booking-mode-toolbar__tabs
> #bookingTabLater {
grid-column: 1;
grid-row: 1;
}
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar--later
.booking-mode-toolbar__tabs
> #bookingTabNow {
grid-column: 2;
grid-row: 1;
}
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar--later
.booking-mode-toolbar__tabs {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-auto-flow: column;
grid-auto-rows: 44px;
align-items: stretch;
}
/* Später-Modus: blauer Effekt auf "Jetzt reservieren" (rechter, nächster Klick). */
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar--later
#bookingTabNow {
background: linear-gradient(145deg, var(--ct24-ui-chat-grad-t), var(--ct24-ui-chat-grad-b)) !important;
color: #fff !important;
border: none !important;
box-shadow: var(--ct24-ui-chat-shadow) !important;
}
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar:not(.booking-mode-toolbar--later)
.booking-mode-toolbar__tabs
> #bookingTabLater {
border-radius: 0 28px 28px 0;
}
/* Später-Modus: „Jetzt reservieren“ rechts — Spiegel zur Pay-Pille */
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar--later
.booking-mode-toolbar__tabs
> #bookingTabNow {
border-radius: 0 28px 28px 0 !important;
}
/* Pay ausgeblendet: beide Tabs als äußere Pillen */
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap:has(#bookingFooterPayMethodWrap[hidden]):not(.booking-mode-toolbar--later)
.booking-mode-toolbar__tabs
> #bookingTabNow {
border-radius: 28px 0 0 28px;
}
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap:has(#bookingFooterPayMethodWrap[hidden]):not(.booking-mode-toolbar--later)
.booking-mode-toolbar__tabs
> #bookingTabLater {
border-radius: 0 28px 28px 0;
}
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap.booking-mode-toolbar--later
#bookingTabLater {
/* Geometrie exakt wie normaler Slot: verhindert Zeilenbruch/Versatz nach dem Tausch. */
min-height: 44px !important;
height: 44px !important;
margin-bottom: 0 !important;
padding: 8px 8px !important;
border-radius: 28px 0 0 28px !important;
background: #fff !important;
color: var(--ct24-index-appbar-text) !important;
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.16) !important;
font-size: var(--ct24-book-now-font-size) !important;
font-weight: 700 !important;
border: none !important;
opacity: 1 !important;
}
body:not(.ct24-is-buchung-page) #bookingModeSegmentWrap .booking-mode-toolbar__tabs {
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
gap: 0;
}
body:not(.ct24-is-buchung-page)
#bookingModeSegmentWrap:has(#bookingFooterPayMethodWrap[hidden])
.booking-mode-toolbar__tabs {
grid-column: 1 / -1;
}
body.ct24-is-buchung-page #bookingModeSegmentWrap.booking-mode-toolbar {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
background: #e5e7eb;
border-radius: 14px;
overflow: hidden;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger #bookingModeSegmentWrap.booking-mode-toolbar {
background: transparent;
border-radius: 0;
overflow: visible;
}
body.ct24-is-buchung-page #bookingModeSegmentWrap .booking-mode-toolbar__tabs {
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Aktive Buchung: nur Status (links) + Stornieren (rechts), kein Zahlungsblock im Flex.
* Flex statt Grid: sonst wirkt grid-area: tablater/tabnow von .booking-tabs #bookingTab* im inneren Grid
* falsch → „Warte auf Annahme“ und Storno überlappen sich vertikal. */
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger #bookingModeSegmentWrap .booking-mode-toolbar__tabs {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger #bookingModeSegmentWrap #bookingTabLater {
flex: 1 1 auto;
min-width: 0;
width: auto;
max-width: none;
grid-area: unset;
align-self: center;
margin-bottom: 0;
order: 1;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger #bookingModeSegmentWrap #bookingTabNow {
flex: 0 0 auto;
grid-area: unset;
align-self: center;
margin-bottom: 0;
order: 2;
}
body.ct24-is-buchung-page #indexBookingFooterHost.index-booking-footer-host--danger .booking-tab--later.booking-tab--waiting-accept {
margin-bottom: 0;
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabNow {
width: 100%;
min-width: 0;
justify-self: stretch;
align-self: stretch;
grid-area: auto;
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabLater {
width: 100%;
min-width: 0;
justify-self: stretch;
align-self: stretch;
grid-area: auto;
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabNow,
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabLater {
border: none;
border-radius: 0;
min-height: 44px !important;
height: 44px;
padding: 8px 8px !important;
margin: 0;
background: var(--ct24-rh-control-bg);
color: var(--ct24-rh-text-tertiary);
font-size: var(--ct24-book-now-font-size);
font-weight: 700;
box-sizing: border-box;
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabNow {
border-radius: 0;
box-shadow: none;
border-right: 1px solid var(--ct24-rh-border);
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabLater {
border-radius: 0;
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabNow.active,
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabLater.active {
background: linear-gradient(to bottom, var(--ct24-index-header-grad-t), var(--ct24-index-header-grad-b));
color: #fff;
font-size: var(--ct24-book-now-font-size-active);
box-shadow: var(--ct24-index-header-cta-shadow);
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabNow.active {
border-right: 1px solid rgba(255, 255, 255, 0.2);
min-height: 44px !important;
height: 44px;
font-weight: 800;
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabLater.active {
border-right: none;
}
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabNow .booking-tab-inner,
body:not(.ct24-is-buchung-page):not(.ct24-cal-open) #bookingTabLater .booking-tab-inner {
height: 100%;
align-items: center;
}
/* ── Index: Menü-Drawer — Ride-Hailing: gedimmter Rest der Karte (wie Uber/Bolt) ── */
body[data-index-nav-tab]:not(.ct24-is-buchung-page) .index-menu-drawer__scrim {
background: rgba(15, 23, 42, 0.28);
}
body[data-index-nav-tab]:not(.ct24-is-buchung-page) .index-menu-drawer__nav {
background: var(--ct24-rh-surface, #ffffff);
border-left-color: var(--ct24-rh-border);
}
body[data-index-nav-tab]:not(.ct24-is-buchung-page) .index-menu-drawer__sheet {
background: var(--ct24-rh-surface, #ffffff);
border-left-color: var(--ct24-rh-border);
box-shadow: -14px 0 28px rgba(15, 23, 42, 0.16);
}
@media (prefers-reduced-transparency: reduce) {
body[data-index-nav-tab]:not(.ct24-is-buchung-page) #indexUiStack > #indexReservationReceivedHero.index-reservation-received-hero,
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page)
#indexUiStack
> #bookingFooterPriceRow.index-loc-price-ion,
#indexFahrgastBottomNav.index-fahrgast-tabbar {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--ct24-rh-surface);
}
}
body #indexHeaderChatDecoy.index-header-chat-decoy,
.index-header-chat-decoy {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: absolute !important;
clip: rect(0, 0, 0, 0) !important;
}
/* Header/Bottom-Swap (Index): Booking-Bar oben, Header-Menü unten */
body:not(.ct24-is-buchung-page).ct24-index-header-bottom-swap #indexHeaderSwapTopSlot {
width: 100%;
position: relative;
z-index: 2;
pointer-events: auto;
}
body:not(.ct24-is-buchung-page).ct24-index-header-bottom-swap #indexAppHeaderBar .app-header__shell {
display: flex;
flex-direction: column;
gap: 8px;
}
body:not(.ct24-is-buchung-page).ct24-index-header-bottom-swap #indexHeaderSwapTopSlot > #bookingModeSegmentWrap.booking-mode-toolbar {
width: 100%;
margin: 0;
pointer-events: auto;
}
body:not(.ct24-is-buchung-page).ct24-index-header-bottom-swap #ct24IndexStep2Sheet > #indexBottomHeaderSwapHost.app-header {
position: relative;
top: auto;
left: auto;
right: auto;
z-index: 2;
padding: 8px 0;
}
/* Post-Book / collapsed: verschobenen Header-Host unten immer ausblenden */
body.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) #indexBottomHeaderSwapHost,
body.ct24-index-ux--post-book-trip.ct24-index-ux--addr-collapsed:not(.ct24-is-buchung-page) #indexBottomHeaderSwapHost {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* —— Fahrgast-Anmeldung (Firebase Phone / Google) —— */
@keyframes ct24-phone-gate-panel-in {
from {
opacity: 0;
transform: translateY(14px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ct24-phone-gate {
position: fixed;
inset: 0;
/* Über Dev-Inspector-Shell (2147483001), damit Anmeldung klickbar bleibt */
z-index: 2147483647;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
isolation: isolate;
padding: max(12px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px))
max(12px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
box-sizing: border-box;
background: linear-gradient(155deg, rgba(15, 23, 42, 0.94) 0%, rgba(13, 148, 136, 0.42) 55%, rgba(15, 118, 110, 0.25) 100%);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.ct24-phone-gate[hidden] {
display: none !important;
}
body.ct24-phone-gate--open {
overflow: hidden;
}
.ct24-phone-gate__panel {
position: relative;
width: 100%;
max-width: min(440px, 100%);
max-height: min(92vh, 900px);
max-height: min(92dvh, 900px);
display: flex;
flex-direction: column;
pointer-events: auto;
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
color: #334155;
border-radius: clamp(16px, 4vw, 22px);
padding: 0;
box-shadow:
0 4px 6px rgba(15, 23, 42, 0.06),
0 28px 56px rgba(15, 23, 42, 0.22);
border: 1px solid rgba(148, 163, 184, 0.4);
overflow: hidden;
animation: ct24-phone-gate-panel-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.ct24-phone-gate__panel {
animation: none;
}
}
.ct24-phone-gate__scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
pointer-events: auto;
padding: clamp(18px, 4.5vw, 26px) clamp(16px, 4vw, 24px) clamp(16px, 3.5vw, 22px);
}
.ct24-phone-gate__head {
margin-bottom: 4px;
}
.ct24-phone-gate__section {
margin: 0;
}
.ct24-phone-gate__section--actions {
margin-top: 4px;
position: relative;
z-index: 3;
}
.ct24-phone-gate__section--sms {
position: relative;
z-index: 1;
margin-top: 2px;
padding: 14px 14px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(203, 213, 225, 0.85);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.ct24-phone-gate__recaptcha-host {
min-height: 0;
position: relative;
z-index: 0;
overflow: hidden;
contain: content;
}
.ct24-phone-gate__brand {
margin: 0 0 6px;
font-size: clamp(0.65rem, 2.6vw, 0.7rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #94a3b8;
}
.ct24-phone-gate__title {
margin: 0 0 clamp(12px, 3vw, 16px);
font-size: clamp(1.2rem, 4.5vw, 1.45rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: #475569;
}
.ct24-phone-gate__trust {
list-style: none;
margin: 0 0 clamp(14px, 3.5vw, 18px);
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
@media (min-width: 380px) {
.ct24-phone-gate__trust {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
}
.ct24-phone-gate__trust-item {
position: relative;
padding: 8px 10px 8px 26px;
font-size: clamp(0.74rem, 2.8vw, 0.8rem);
line-height: 1.4;
color: #64748b;
font-weight: 500;
background: rgba(248, 250, 252, 0.75);
border-radius: 10px;
border: 1px solid rgba(226, 232, 240, 0.7);
}
.ct24-phone-gate__trust-item::before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #94a3b8;
box-shadow: none;
}
.ct24-phone-gate__offer {
position: relative;
margin: 0 0 clamp(14px, 3vw, 18px);
padding: clamp(12px, 3vw, 16px);
border-radius: 14px;
background: linear-gradient(135deg, rgba(13, 148, 136, 0.14) 0%, rgba(251, 191, 36, 0.14) 100%);
border: 1px solid rgba(13, 148, 136, 0.32);
}
.ct24-phone-gate__offer-badge {
display: inline-block;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
background: rgba(255, 255, 255, 0.65);
padding: 3px 8px;
border-radius: 999px;
margin-bottom: 6px;
box-shadow: none;
}
.ct24-phone-gate__offer-title {
margin: 0 0 8px;
font-size: clamp(0.8rem, 2.9vw, 0.88rem);
font-weight: 600;
color: #64748b;
}
.ct24-phone-gate__offer-prices {
display: flex;
flex-direction: column;
gap: 6px;
}
.ct24-phone-gate__offer-label {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
}
.ct24-phone-gate__offer-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
font-size: 0.98rem;
font-weight: 600;
}
.ct24-phone-gate__offer-was {
text-decoration: line-through;
color: #cbd5e1;
font-weight: 500;
font-size: clamp(0.88rem, 3.2vw, 0.98rem);
}
.ct24-phone-gate__offer-arrow {
color: #94a3b8;
font-weight: 600;
font-size: 1rem;
}
.ct24-phone-gate__offer-now {
font-size: clamp(1.05rem, 4vw, 1.28rem);
color: #0d9488;
font-weight: 600;
letter-spacing: -0.01em;
}
.ct24-phone-gate__offer-note {
margin: 8px 0 0;
font-size: clamp(0.68rem, 2.6vw, 0.74rem);
line-height: 1.45;
color: #94a3b8;
}
.ct24-phone-gate__lead {
position: relative;
z-index: 2;
margin: 0 0 12px;
font-size: clamp(0.78rem, 3vw, 0.84rem);
line-height: 1.5;
color: #94a3b8;
font-weight: 400;
}
.ct24-phone-gate__lead strong {
color: #64748b;
font-weight: 600;
}
.ct24-phone-gate__label {
display: block;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
margin: 14px 0 6px;
}
.ct24-phone-gate__label:first-of-type {
margin-top: 4px;
}
.ct24-phone-gate__input {
width: 100%;
box-sizing: border-box;
padding: 13px 15px;
font-size: 1rem;
border: 1px solid #cbd5e1;
border-radius: 12px;
background: #fff;
color: #0f172a;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ct24-phone-gate__input::placeholder {
color: #94a3b8;
}
.ct24-phone-gate__input:hover {
border-color: #94a3b8;
}
.ct24-phone-gate__input:focus {
outline: none;
border-color: #0d9488;
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
}
.ct24-phone-gate__input--code {
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
font-weight: 600;
}
.ct24-phone-gate__btn {
width: 100%;
margin-top: 12px;
padding: 13px 18px;
font-size: 1rem;
font-weight: 700;
border: none;
border-radius: 12px;
background: #e2e8f0;
color: #0f172a;
cursor: pointer;
transition:
background 0.15s ease,
transform 0.12s ease,
box-shadow 0.15s ease;
}
.ct24-phone-gate__btn:not(:disabled):active {
transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
.ct24-phone-gate__btn {
transition: none;
}
.ct24-phone-gate__btn:not(:disabled):active {
transform: none;
}
}
.ct24-phone-gate__btn:focus-visible {
outline: 2px solid #0d9488;
outline-offset: 2px;
}
.ct24-phone-gate__btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.ct24-phone-gate__btn--secondary {
background: #f1f5f9;
border: 1px solid #cbd5e1;
}
.ct24-phone-gate__btn--secondary:not(:disabled):hover {
background: #e2e8f0;
}
.ct24-phone-gate__btn--primary {
background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
}
.ct24-phone-gate__btn--primary:not(:disabled):hover {
background: linear-gradient(180deg, #2dd4bf 0%, #0f766e 100%);
}
.ct24-phone-gate__btn--google {
position: relative;
z-index: 1;
margin-top: 0;
background: #fff;
color: #1f1f1f;
border: 1px solid #dadce0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.ct24-phone-gate__btn--google:not(:disabled):hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.ct24-phone-gate__btn--google::before {
content: '';
flex-shrink: 0;
width: 18px;
height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.81 7.18l7.73 6c4.51-4.18 7.12-10.36 7.12-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3Cpath fill='none' d='M0 0h48v48H0z'/%3E%3C/svg%3E")
center/contain no-repeat;
}
.ct24-phone-gate__divider {
position: relative;
z-index: 2;
display: flex;
align-items: center;
text-align: center;
margin: clamp(14px, 3vw, 20px) 0 10px;
font-size: 0.72rem;
color: #94a3b8;
font-weight: 500;
letter-spacing: 0.02em;
}
.ct24-phone-gate__divider::before,
.ct24-phone-gate__divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #e2e8f0;
}
.ct24-phone-gate__divider span {
padding: 0 14px;
max-width: 70%;
}
.ct24-phone-gate__err {
margin: 16px 0 4px;
padding: 10px 12px;
font-size: clamp(0.8rem, 2.9vw, 0.86rem);
line-height: 1.45;
font-weight: 500;
color: #b45353;
background: rgba(254, 242, 242, 0.85);
border: 1px solid #fecdd3;
border-radius: 12px;
}
.ct24-phone-gate__err[hidden] {
display: none !important;
}
@media (max-height: 520px) {
.ct24-phone-gate__panel {
max-height: 96vh;
max-height: 96dvh;
}
.ct24-phone-gate__scroll {
padding-top: 14px;
padding-bottom: 14px;
}
.ct24-phone-gate__title {
margin-bottom: 8px;
}
.ct24-phone-gate__trust {
margin-bottom: 10px;
gap: 6px;
}
.ct24-phone-gate__offer {
margin-bottom: 10px;
padding: 10px 12px;
}
}
/*
* ct24-index-header-strip-remove — Index (#indexAppHeaderBar): kein Telefon, kein Guthaben/Betrag/Wallet-Chip,
* kein Burger-Menü (Markup bleibt für bestehendes JS).
*/
body:not(.ct24-is-buchung-page) #indexAppHeaderBar.app-header--index-top .top-menu #indexHeaderTelBtn,
body:not(.ct24-is-buchung-page) #indexAppHeaderBar.app-header--index-top .top-menu #indexHeaderCashbackCenter,
body:not(.ct24-is-buchung-page) #indexAppHeaderBar.app-header--index-top .top-menu #menuBtn.menu-btn.index-header-wallet-btn {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 !important;
width: 1px !important;
min-width: 0 !important;
max-width: 1px !important;
height: 1px !important;
min-height: 0 !important;
overflow: hidden !important;
flex: 0 0 0 !important;
border: none !important;
box-shadow: none !important;
clip-path: inset(50%) !important;
clip: rect(0, 0, 0, 0) !important;
position: absolute !important;
white-space: nowrap !important;
}