/* ==========================================================================
   Hotrod Booking Funnel — Manus "High-Gloss" CI, 1:1 nachgebaut.
   Mobile-first; Desktop: Main + Sticky Booking-Cart-Sidebar.
   Tokens: assets/design-tokens.css
   ========================================================================== */

/* Widget = immer 100% Breite, transparent, ohne Eigen-Padding —
   Breite/Hintergrund/Abstände bestimmt der umgebende Container. */
.hotrod-funnel {
	font-family: var(--hc-font-sans);
	color: var(--hc-black);
	background: transparent;
	width: 100%;
	padding: 0;
	line-height: 1.5;
	box-sizing: border-box;
	position: relative;            /* Anker für den Reset-Button oben rechts */
}

/* Topbar im Panel: Stepper links, Reset-Button rechts (innerhalb des Panels).
   Der Separator (Border) sitzt am Topbar → läuft unter BEIDEN durch, der
   Reset-Button ist vertikal zur Stepper-Zeile zentriert (kein Überhang). */
.hf-topbar {
	display: flex; align-items: center; gap: 14px;
	border-bottom: 1px solid var(--hc-grey-light); padding-bottom: 14px; margin-bottom: 26px;
}
.hf-topbar .hf-stepper { flex: 1 1 auto; margin: 0; border-bottom: 0; padding-bottom: 0; }

/* Reset-Button (oben rechts im Panel) — wischt die gespeicherte Session sofort.
   Theme-proof bg/color (!important), sonst plättet das Theme den Button. */
.hf-reset {
	flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--hc-white) !important; color: var(--hc-black) !important;
	border: 1px solid var(--hc-line) !important; cursor: pointer;
	transition: box-shadow .15s var(--hc-ease), background .15s var(--hc-ease),
		color .15s var(--hc-ease), border-color .15s var(--hc-ease);
}
.hf-reset:hover {
	background: var(--hc-red) !important; color: var(--hc-white) !important;
	border-color: var(--hc-black) !important; box-shadow: var(--hc-shadow-black-sm);
}
.hf-reset svg { display: block; }

/* Resume-Hinweis (fortgesetzte Session) — dezent, im Reservierungs-Amber. */
.hf-resume-note {
	font-family: var(--hc-font-mono); font-size: 11px; line-height: 1.5; letter-spacing: .01em;
	color: var(--hc-amber); background: var(--hc-amber-bg);
	border: 1px solid rgba(184, 134, 11, .3); padding: 8px 12px; margin-bottom: 14px;
}
.hotrod-funnel *, .hotrod-funnel *::before, .hotrod-funnel *::after { box-sizing: inherit; }
.hotrod-funnel button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
.hotrod-funnel button:disabled { cursor: not-allowed; opacity: .45; }

/* ---------- Header ---------- */
.hf-header { text-align: center; margin: 0 0 28px; }
.hf-badge {
	display: inline-block; font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--hc-red);
	border: 1px solid var(--hc-red); padding: 6px 14px; margin-bottom: 18px;
}
.hf-title {
	font-family: var(--hc-font-display); font-weight: 800; letter-spacing: -.04em;
	font-size: clamp(40px, 7vw, 64px); line-height: .95; text-transform: uppercase; margin: 0 0 14px;
}
.hf-intro { color: var(--hc-grey); font-size: 16px; margin: 0; }

/* ---------- Panel: Hauptkarte mit rotem Offset-Schatten ---------- */
.hf-panel {
	width: 100%; background: var(--hc-white);
	border: 2px solid var(--hc-red); box-shadow: var(--hc-shadow-red);
	display: grid; grid-template-columns: 1fr; gap: 0;
	position: relative;            /* Anker für die gestrichelte Oberkante (::before) */
}
/* Gestrichelte orange Oberkante (Mock „High-Gloss") — rein dekorativ. */
.hf-panel::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2;
	background: repeating-linear-gradient(115deg, var(--hc-red, #ff6b00) 0 14px, transparent 14px 26px);
}
@media (min-width: 960px) {
	.hf-panel { grid-template-columns: minmax(0, 1fr) 340px; }
}
.hf-main { padding: 28px clamp(16px, 4vw, 40px) 36px; min-width: 0; }

/* ---------- Stepper ---------- */
.hf-stepper {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--hc-grey);
	border-bottom: 1px solid var(--hc-grey-light); padding-bottom: 16px; margin-bottom: 26px;
}
.hf-step { display: inline-flex; align-items: center; gap: 7px; }
.hf-step-num {
	width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--hc-grey-light); color: var(--hc-grey);
	font-size: 10px; font-weight: 800;
}
.hf-step.current { color: var(--hc-red); }
.hf-step.current .hf-step-num { background: var(--hc-red); color: var(--hc-white); }
.hf-step.done .hf-step-num { background: var(--hc-red-soft); color: var(--hc-red); }
.hf-step-sep { color: var(--hc-grey-light); }
/* Frühere Schritte: klickbar zurück — mit klarer Affordanz */
.hf-step.clickable {
	cursor: pointer; background: none; border: 0; padding: 0;
	font: inherit; letter-spacing: inherit; text-transform: inherit;
	color: var(--hc-grey); text-decoration: none;
}
.hf-step.clickable:hover { color: var(--hc-red); }
.hf-step.clickable:hover .hf-step-num { background: var(--hc-red); color: var(--hc-white); }

/* ---------- Typo der Schritte ---------- */
.hf-h3 {
	font-family: var(--hc-font-sans); font-weight: 700; letter-spacing: -.01em;
	font-size: 22px; text-transform: uppercase; margin: 0 0 6px;
}
.hf-sub { color: var(--hc-grey); font-size: 14px; margin: 0 0 22px; }

/* ---------- Schritt 1: Option (mit Icon-Chip — Erbe des alten Widgets) ---------- */
.hf-options { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .hf-options { grid-template-columns: 1fr 1fr; } }
.hf-option { text-align: left; padding: 22px; }
.hf-option-icon {
	width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
	background: var(--hc-red-soft); font-size: 22px; margin-bottom: 14px;
}
.hf-option-title { display: block; font-weight: 700; text-transform: uppercase; font-size: 16px; margin-bottom: 8px; }
.hf-option-sub { display: block; color: var(--hc-grey); font-size: 13.5px; line-height: 1.5; }

/* ---------- Schritt 2: Tour-Liste (gestapelte Zeilen + Info-Accordion) ----------
   Kompakte Rows statt Grid: skaliert mit beliebig vielen Touren, alle Infos
   per "+ Info" ausklappbar. Layout-Verwandtschaft zu den Add-on-Zeilen. */
.hf-tourlist { display: flex; flex-direction: column; gap: 14px; }
.hf-trow { cursor: pointer; }
.hf-trow-main { display: flex; align-items: stretch; gap: 0; }
.hf-trow-img {
	position: relative; flex: 0 0 132px; min-height: 96px;
	background-size: cover; background-position: center;
	border-right: 2px solid var(--hc-line);
}
.hf-trow.sel .hf-trow-img { border-right-color: var(--hc-red); }
.hf-trow-img-empty { background: var(--hc-grey-light); }
.hf-trow-badge {
	position: absolute; left: 0; bottom: 0; background: rgba(20,20,20,.88); color: var(--hc-white);
	font-family: var(--hc-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; padding: 4px 8px;
}
.hf-trow-body {
	flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
	justify-content: center; gap: 7px; padding: 14px 16px;
}
.hf-trow-title { font-weight: 700; font-size: 15px; text-transform: uppercase; line-height: 1.2; }
.hf-trow-meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hf-trow-price { color: var(--hc-red); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.hf-trow-fact { font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hc-grey); }
.hf-trow-price i {
	font-style: normal; font-family: var(--hc-font-mono); font-weight: 700; font-size: 10px;
	letter-spacing: .08em; text-transform: uppercase; color: var(--hc-grey); margin-right: 2px;
}
.hf-duration { font-family: var(--hc-font-mono); font-size: 11px; color: var(--hc-grey); }
/* Experience Vibes: drei farbige Erlebnis-Wörter (keine Pills) unter dem Preis. */
.hf-trow-vibes { display: flex; flex-wrap: wrap; align-items: center; margin-top: 1px; }
.hf-trow-vibes .hf-vibe {
	font-family: var(--hc-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--hc-red); line-height: 1.3;
}
.hf-trow-vibes .hf-vibe:not(:last-child)::after {
	content: "·"; margin: 0 .6em; color: var(--hc-line); font-weight: 400; letter-spacing: 0;
}
.hf-trow-actions {
	display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
	padding: 12px 14px; gap: 8px;
}
.hf-trow-check { color: var(--hc-red); font-size: 18px; font-weight: 800; min-height: 22px; }
/* Expliziter "Choose"-Button: sichtbare Auswahl-Aufforderung (Reihe ist zwar
   komplett klickbar, aber nicht jeder erkennt das). Theme-proof !important auf
   bg/color, sonst plättet das Theme den Button (wiederkehrender Bug). */
.hf-trow-choose {
	font-family: var(--hc-font-mono); font-size: 11px; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: #fff !important; background: var(--hc-red) !important;
	border: 1px solid var(--hc-black) !important; padding: 8px 14px; cursor: pointer;
	white-space: nowrap; line-height: 1; border-radius: 0;
	transition: transform .15s var(--hc-ease), box-shadow .15s var(--hc-ease), background .15s var(--hc-ease);
}
.hf-trow-choose:hover { background: var(--hc-red-dark) !important; box-shadow: var(--hc-shadow-black-sm); }
.hf-trow-choose.sel { background: var(--hc-black) !important; color: #fff !important; }
.hf-trow-choose.sel:hover { background: var(--hc-black) !important; box-shadow: var(--hc-shadow-black-sm); }
.hf-trow-info {
	font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--hc-grey); border: 1px solid var(--hc-line) !important;
	padding: 6px 10px; background: var(--hc-white); white-space: nowrap;
}
.hf-trow-info:hover { color: var(--hc-black); border-color: var(--hc-black) !important; }
.hf-trow-desc {
	color: var(--hc-grey); font-size: 13.5px; line-height: 1.55;
	padding: 0 16px 16px; border-top: 1px dashed var(--hc-line);
	margin: 0 14px; padding-top: 12px; margin-bottom: 0; padding-bottom: 14px;
}
.hf-trow.sel .hf-trow-desc { border-top-color: rgba(226,18,44,.25); }
@media (max-width: 560px) {
	.hf-trow-img { flex-basis: 96px; }
	.hf-trow-meta { gap: 10px; }
	.hf-trow-actions { padding: 10px 10px; }
}

/* ---------- Schritt 3: Drivers + Kalender + Slots ---------- */
.hf-drivers {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	border: 1px solid var(--hc-grey-light); background: var(--hc-red-soft);
	padding: 16px 18px; margin-bottom: 22px; flex-wrap: wrap;
}
.hf-drivers-info { display: flex; align-items: center; gap: 14px; }
.hf-drivers-icon {
	width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--hc-white); border: 1px solid var(--hc-red); color: var(--hc-red); font-size: 18px;
}
.hf-drivers-title { font-weight: 700; text-transform: uppercase; font-size: 14px; }
.hf-drivers-sub { color: var(--hc-grey); font-size: 12.5px; }
.hf-counter { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--hc-black); background: var(--hc-white); }
.hf-counter-btn { width: 40px; height: 40px; font-size: 18px; font-weight: 700; }
.hf-counter-btn:hover:not(:disabled) { background: var(--hc-black); color: var(--hc-white); }
.hf-counter-val { min-width: 44px; text-align: center; font-weight: 700; font-size: 16px; }
.hf-counter-sm .hf-counter-btn { width: 32px; height: 32px; font-size: 15px; }
.hf-counter-sm .hf-counter-val { min-width: 34px; font-size: 14px; }

.hf-dt-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 860px) { .hf-dt-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); } }

.hf-cal { border: 1px solid var(--hc-grey-light); padding: 16px; position: relative; }
.hf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hf-cal-label { font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hc-red); }
.hf-cal-nav { display: inline-flex; align-items: center; gap: 10px; }
.hf-cal-month { font-family: var(--hc-font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.hf-cal-arrow { width: 28px; height: 28px; border: 1px solid var(--hc-grey-light); font-size: 15px; }
.hf-cal-arrow:hover { border-color: var(--hc-black); }
.hf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hf-cal-dow {
	text-align: center; font-family: var(--hc-font-mono); font-size: 10px; font-weight: 700;
	letter-spacing: .08em; color: var(--hc-grey); padding: 6px 0; text-transform: uppercase;
}
.hf-cal-cell {
	position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	font-size: 13.5px; font-weight: 500; border: 1px solid transparent;
}
.hf-cal-cell.ok { font-weight: 700; border-color: var(--hc-grey-light); }
.hf-cal-cell.ok:hover { border-color: var(--hc-black); }
.hf-cal-cell.ok.sel { background: var(--hc-red); color: var(--hc-white); box-shadow: var(--hc-shadow-black-sm); border-color: var(--hc-red); }
.hf-cal-cell.off { color: #c9c9c9; }
.hf-cal-cell.empty { border: 0; }
.hf-cal-dot {
	position: absolute; right: 5px; top: 5px; width: 5px; height: 5px; border-radius: 999px; background: var(--hc-green);
}
.hf-cal-cell.sel .hf-cal-dot { background: var(--hc-white); }

.hf-slots { border: 1px dashed var(--hc-grey-light); padding: 16px; min-height: 240px; }
.hf-slots-label {
	font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--hc-red); margin-bottom: 12px;
}
.hf-slots-empty { text-align: center; color: var(--hc-grey); font-size: 13.5px; padding: 60px 16px; }
.hf-slot {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	text-align: left; border: 1px solid var(--hc-grey-light); padding: 12px 14px; margin-bottom: 10px;
	background: var(--hc-white);
}
.hf-slot:hover { border-color: var(--hc-black); }
.hf-slot.sel { border: 2px solid var(--hc-red); background: var(--hc-red-soft); box-shadow: var(--hc-shadow-black-sm); }
.hf-slot.off { opacity: .5; }
.hf-slot-time { display: block; font-weight: 700; font-size: 15px; }
.hf-slot-flavor { display: block; font-family: var(--hc-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--hc-red); margin-top: 2px; }
.hf-slot-right { text-align: right; }
.hf-slot-price { display: block; font-weight: 700; font-size: 14px; }
.hf-slot-left { display: block; font-family: var(--hc-font-mono); font-size: 10.5px; color: var(--hc-grey); margin-top: 2px; }
.hf-slot.sel .hf-slot-left { color: var(--hc-red); }

/* ---------- Schritt 4: Add-ons (kompakte Zeilen, Langtext per "+ Info") ---------- */
.hf-addons { display: flex; flex-direction: column; gap: 12px; }
.hf-addon { padding: 0; }
.hf-addon-main { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; }
.hf-addon-img {
	width: 56px; height: 56px; flex: 0 0 auto;
	background-size: cover; background-position: center;
	border: 2px solid var(--hc-line);
}
.hf-addon.sel .hf-addon-img { border-color: var(--hc-red); }
.hf-addon-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hf-addon-title { font-weight: 700; text-transform: uppercase; font-size: 13.5px; line-height: 1.25; }
.hf-addon-meta { display: flex; align-items: center; gap: 12px; }
.hf-addon-price { color: var(--hc-red); font-weight: 800; font-size: 15px; }
.hf-addon .hf-trow-desc { margin: 0 12px; }
/* Versicherungs-Unterdeckungs-Hinweis (legal, ruhig) */
.hf-ins-disclaim {
	margin-top: 16px; border: 1px solid var(--hc-line); border-left: 4px solid var(--hc-amber);
	background: var(--hc-amber-bg); color: #7a5b00;
	font-size: 12.5px; line-height: 1.55; padding: 12px 14px;
}

/* ---------- Gift: Beträge ---------- */
.hf-amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 720px) { .hf-amounts { grid-template-columns: repeat(4, 1fr); } }
.hf-amount {
	border: 1px solid var(--hc-grey-light); padding: 22px 10px; font-weight: 700; font-size: 20px;
	background: var(--hc-white);
}
.hf-amount:hover { border-color: var(--hc-black); }
.hf-amount.sel { border: 2px solid var(--hc-red); background: var(--hc-red-soft); box-shadow: var(--hc-shadow-black-sm); }

/* ---------- Footer-Navigation ---------- */
.hf-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	border-top: 1px solid var(--hc-grey-light); margin-top: 28px; padding-top: 20px;
}
.hf-back {
	font-family: var(--hc-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--hc-black); padding: 12px 8px;
}
.hf-back:hover { color: var(--hc-red); }
.hf-next {
	background: var(--hc-red); color: var(--hc-white);
	font-family: var(--hc-font-mono); font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; padding: 15px 26px; box-shadow: var(--hc-shadow-black);
	transition: transform .12s var(--hc-ease), box-shadow .12s var(--hc-ease);
}
.hf-next:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hc-black); background: var(--hc-red-dark); }
.hf-next:disabled { background: #5a4632; color: #a98a6a; box-shadow: none; }

/* ---------- Sidebar: Booking Cart ---------- */
.hf-sidebar { border-top: 2px solid var(--hc-red); padding: 24px; background: var(--hc-white); }
@media (min-width: 960px) {
	.hf-sidebar { border-top: 0; border-left: 1px solid var(--hc-grey-light); }
	.hf-sidebar .hf-cart { position: sticky; top: 96px; }
}
.hf-cart { border: 1px solid var(--hc-grey-light); padding: 20px; }
.hf-cart-head {
	font-family: var(--hc-font-mono); font-size: 12px; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--hc-red);
	border-bottom: 1px solid var(--hc-grey-light); padding-bottom: 12px; margin-bottom: 14px;
}
.hf-cart-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hf-cart-label { font-weight: 700; font-size: 13px; text-transform: uppercase; }
.hf-cart-sub { font-family: var(--hc-font-mono); font-size: 10.5px; color: var(--hc-grey); margin-top: 3px; }
.hf-cart-val { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.hf-cart-qty .hf-cart-label { font-weight: 500; text-transform: none; }
.hf-cart-empty { color: var(--hc-grey); text-align: center; padding: 18px 0; }
.hf-cart-total {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	border-top: 1px solid var(--hc-grey-light); margin-top: 16px; padding-top: 14px;
}
.hf-cart-total span { font-weight: 700; font-size: 13px; text-transform: uppercase; }
.hf-cart-total strong { color: var(--hc-red); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.hf-cart-note {
	border: 1px solid var(--hc-grey-light); background: var(--hc-bg);
	font-family: var(--hc-font-mono); font-size: 10.5px; color: var(--hc-grey);
	padding: 12px; margin-top: 16px; line-height: 1.6;
}
.hf-cart-note-head { color: var(--hc-black); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }

/* ---------- "In demand"-Teaser auf Tour-Produktseiten ---------- */
.hf-popular { display: block; margin: 18px 0 4px; }
.hf-popular-label {
	display: block; font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--hc-grey); margin-bottom: 10px;
}
.hf-popular-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-popular-chip {
	display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
	background: var(--hc-white); border: 2px solid var(--hc-line); border-radius: 0;
	font-family: var(--hc-font-sans); font-size: 13px; font-weight: 700;
	padding: 9px 13px; color: var(--hc-black);
	transition: border-color .14s var(--hc-ease), box-shadow .14s var(--hc-ease), transform .14s var(--hc-ease);
}
.hf-popular-chip em {
	font-style: normal; font-family: var(--hc-font-mono); font-size: 10px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--hc-red);
}
.hf-popular-chip:hover {
	border-color: var(--hc-red); transform: none;
	box-shadow: 2px 2px 0 0 rgba(226, 18, 44, .4); color: var(--hc-black);
}

/* ---------- Produktseiten-CTA (öffnet das Funnel-Modal) ---------- */
.hf-product-cta {
	display: inline-block; margin: 14px 0 4px; background: var(--hc-red); color: var(--hc-white);
	font-family: var(--hc-font-mono); font-size: 13px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; padding: 14px 24px; border: 0; border-radius: 0; cursor: pointer;
	box-shadow: var(--hc-shadow-black); text-decoration: none;
	transition: transform .12s var(--hc-ease), box-shadow .12s var(--hc-ease);
}
.hf-product-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hc-black); background: var(--hc-red-dark); color: var(--hc-white); }

/* ---------- Modal (Produktseiten — Same-Page-Overlay, kein iframe) ---------- */
body.hf-modal-open { overflow: hidden; }
.hf-modal { position: fixed; inset: 0; z-index: 99999; }
.hf-modal[hidden] { display: none; }
.hf-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 6, 8, .88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hf-modal-dialog {
	position: relative; max-width: 1240px; margin: 3vh auto; height: 94vh;
	overflow-y: auto; background: var(--hc-white); border: 2px solid var(--hc-red);
	box-shadow: var(--hc-shadow-red);
	padding: 0 20px 28px; /* Widget selbst ist padding-frei — das Modal liefert den Innenabstand */
}
/* Close: sticky oben-RECHTS (Block + margin-left:auto rechtsbündig im Flow),
   bündig zur Dialog-Kante. Vorher left:100% → hing daneben (Bug). */
.hf-modal-close {
	position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; margin: 0 -20px 0 auto; line-height: 1;
	background: var(--hc-black); color: var(--hc-white); font-size: 22px; font-weight: 700;
}
.hf-modal-close:hover { background: var(--hc-red); }
.hotrod-funnel-in-modal { padding-top: 0; }
.hotrod-funnel-in-modal .hf-panel { box-shadow: none; border-width: 0; }

/* ---------- Embedded Checkout (Schritt 5: echter Woo-Checkout im Widget) ---------- */
.hf-checkout-back {
	display: inline-block; font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--hc-grey);
	margin: -10px 0 18px; text-decoration: none;
}
.hf-checkout-back:hover { color: var(--hc-red); }
.hf-panel-single { grid-template-columns: 1fr; }
.hf-checkout h3, .hf-checkout h2 {
	font-family: var(--hc-font-sans); font-weight: 700; text-transform: uppercase;
	font-size: 18px; letter-spacing: -.01em;
}
.hf-checkout .woocommerce form .form-row input.input-text,
.hf-checkout .woocommerce form .form-row select,
.hf-checkout .woocommerce form .form-row textarea {
	border: 1px solid var(--hc-grey-light); border-radius: 0; padding: 12px 14px;
	font-family: var(--hc-font-sans); background: var(--hc-white);
}
.hf-checkout .woocommerce form .form-row input.input-text:focus,
.hf-checkout .woocommerce form .form-row select:focus { border-color: var(--hc-red); outline: none; }
.hf-checkout .woocommerce form .form-row label { font-weight: 700; font-size: 12.5px; text-transform: uppercase; }
.hf-checkout .woocommerce table.shop_table {
	border: 1px solid var(--hc-grey-light); border-radius: 0; border-collapse: collapse;
}
.hf-checkout .woocommerce table.shop_table th,
.hf-checkout .woocommerce table.shop_table td { border-bottom: 1px solid var(--hc-grey-light); }
.hf-checkout .woocommerce .order-total .amount { color: var(--hc-red); font-size: 20px; }
.hf-checkout #place_order,
.hf-checkout .woocommerce #payment #place_order {
	background: var(--hc-red); color: var(--hc-white); border: 0; border-radius: 0;
	font-family: var(--hc-font-mono); font-size: 13px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; padding: 16px 30px; box-shadow: var(--hc-shadow-black);
	float: none; width: 100%;
}
.hf-checkout #place_order:hover { background: var(--hc-red-dark); transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--hc-black); }
/* Bestellübersicht ("Your order"): vom Woo-Grau zur CI-Tabelle */
.hf-checkout .woocommerce-checkout-review-order,
.hf-checkout #payment { background: var(--hc-white); border-radius: 0; }
.hf-checkout table.shop_table {
	background: var(--hc-white);
	border: 2px solid var(--hc-line) !important;
	border-radius: 0;
}
.hf-checkout table.shop_table thead th {
	font-family: var(--hc-font-mono); font-size: 11px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase; color: var(--hc-grey);
	background: var(--hc-white); border-bottom: 2px solid var(--hc-black);
	padding: 12px 14px;
}
.hf-checkout table.shop_table tbody td {
	background: var(--hc-white); border-bottom: 1px solid var(--hc-grey-light);
	padding: 16px 14px; vertical-align: top; font-size: 14px;
}
.hf-checkout table.shop_table td.product-name {
	font-weight: 700; font-size: 13.5px; text-transform: uppercase; line-height: 1.35;
}
.hf-checkout table.shop_table .product-quantity { color: var(--hc-red); white-space: nowrap; }
.hf-checkout table.shop_table img {
	width: 56px; height: 56px; object-fit: cover;
	border: 2px solid var(--hc-line); border-radius: 0; float: left; margin-right: 12px;
}
.hf-checkout table.shop_table dl.variation,
.hf-checkout table.shop_table .wc-booking-summary,
.hf-checkout table.shop_table .wc-item-meta {
	font-family: var(--hc-font-mono); font-size: 11px; font-weight: 400;
	letter-spacing: .02em; text-transform: none; color: var(--hc-grey);
	margin: 8px 0 0; clear: both;
}
.hf-checkout table.shop_table tfoot th,
.hf-checkout table.shop_table tfoot td {
	background: var(--hc-white); border-top: 1px solid var(--hc-grey-light);
	padding: 12px 14px; font-size: 13px;
}
.hf-checkout table.shop_table tfoot th {
	font-family: var(--hc-font-mono); font-size: 11px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--hc-grey);
}
.hf-checkout table.shop_table tr.order-total th,
.hf-checkout table.shop_table tr.order-total td {
	border-top: 2px solid var(--hc-black); padding: 16px 14px;
}
.hf-checkout table.shop_table tr.order-total th { color: var(--hc-black); font-size: 12.5px; }
.hf-checkout #payment { border: 2px solid var(--hc-line); }
.hf-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--hc-grey-light); padding: 16px 14px; }
.hf-checkout #payment ul.payment_methods label { font-weight: 700; text-transform: uppercase; font-size: 13px; }
.hf-checkout #payment .payment_box { background: var(--hc-bg); border-radius: 0; font-size: 13px; }
.hf-checkout #payment .place-order { padding: 16px 14px; }

/* Mollie Components (Karten-iFrames): die Wrapper-Boxen sind normales DOM und
   stylebar — die transparente iFrame-Eingabe sitzt darin. Eckig + CI statt
   Mollies runder Defaults. (Text-Font/-Farbe lebt IM iFrame = Mollie-Config.) */
.hf-checkout .mollie-components { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hf-checkout .mollie-component { margin-bottom: 8px; }
.hf-checkout .mollie-component-label {
	display: block; font-family: var(--hc-font-sans); font-weight: 700; font-size: 12px;
	letter-spacing: .02em; text-transform: uppercase; color: var(--hc-black); margin: 0 0 6px;
}
.hf-checkout .mollie-component {
	border: 2px solid var(--hc-line) !important; border-radius: 0 !important;
	background: var(--hc-white) !important; padding: 13px 14px !important;
	box-shadow: none !important; transition: border-color .14s var(--hc-ease);
}
.hf-checkout .mollie-component.is-focused,
.hf-checkout .mollie-component--focused { border-color: var(--hc-red) !important; }
.hf-checkout .mollie-component.has-error,
.hf-checkout .mollie-component--invalid { border-color: var(--hc-red-dark) !important; }
.hf-checkout .mollie-components__error,
.hf-checkout .mollie-error { color: var(--hc-red-dark); font-size: 12px; font-family: var(--hc-font-mono); margin-top: 4px; }
.hf-checkout form.checkout_coupon {
	border: 2px solid var(--hc-line) !important; border-radius: 0; padding: 16px;
}

/* ---------- Checkout-Rework: E-Mail oben, Adresse 70/30, Privat/Business, Gift Card ---------- */

/* E-Mail ganz oben + "Create an account" direkt darunter (per checkout.js verschoben). */
.hf-checkout #billing_email_field.hf-email-top { margin-bottom: 14px; }
.hf-checkout p.create-account { margin: 2px 0 18px; }
.hf-checkout p.create-account label {
	text-transform: none; font-weight: 600; font-size: 13.5px;
	display: inline-flex; align-items: center; gap: 8px;
}
.hf-checkout p.create-account input.input-checkbox { margin: 0; }

/* Straße 70 % + Apartment 30 % nebeneinander (Float-Modell wie WC form-row-first/last). */
.hf-checkout #billing_address_1_field.hf-addr-street { float: left; width: 68%; clear: both; margin-right: 2%; box-sizing: border-box; }
.hf-checkout #billing_address_2_field.hf-addr-apt { float: right; width: 30%; clear: none; box-sizing: border-box; }
.hf-checkout #billing_address_2_field.hf-addr-apt label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Postcode (klein) + Town/City (groß) nebeneinander. */
.hf-checkout #billing_postcode_field.hf-zip { float: left; width: 32%; clear: both; margin-right: 2%; box-sizing: border-box; }
.hf-checkout #billing_city_field.hf-city { float: right; width: 66%; clear: none; box-sizing: border-box; }
.hf-checkout #billing_phone_field { clear: both; }

/* Responsive: ab schmal alles untereinander — Floats aus, kein Überlappen. */
@media (max-width: 600px) {
	.hf-checkout #billing_address_1_field.hf-addr-street,
	.hf-checkout #billing_address_2_field.hf-addr-apt,
	.hf-checkout #billing_postcode_field.hf-zip,
	.hf-checkout #billing_city_field.hf-city {
		float: none; width: 100%; margin-right: 0;
	}
}

/* Privat / Business-Tabs (eigene UI, oben im Billing-Formular).
   Abstand nach oben → nicht direkt an der "Billing details"-Überschrift kleben. */
.hf-checkout .hf-ctype { display: flex; margin: 18px 0 22px; border: 2px solid var(--hc-black); width: fit-content; }
.hf-checkout .hf-ctype-tab {
	font-family: var(--hc-font-mono); font-size: 12px; font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; padding: 10px 22px; cursor: pointer; line-height: 1; border: 0;
	background: var(--hc-white) !important; color: var(--hc-black) !important;
	transition: background .14s var(--hc-ease), color .14s var(--hc-ease);
}
.hf-checkout .hf-ctype-tab + .hf-ctype-tab { border-left: 2px solid var(--hc-black); }
.hf-checkout .hf-ctype-tab.sel { background: var(--hc-red) !important; color: var(--hc-white) !important; }

/* Business-Felder (Firma + USt-IdNr.): nur bei "Business" sichtbar.
   Klassengesteuert → überlebt WooCommerce-AJAX-Re-Renders. */
.hf-checkout .hf-biz-only { display: none; }
.hf-checkout.hf-ct-business .hf-biz-only { display: block; }

/* PW Gift Card → saubere Input-Group (Feld + Button in EINER Zeile), klar
   abgesetzt (Top-Border + Abstand) und mit Luft zum Bezahl-Button darunter.
   Wichtig: Feld flex-basis 0 → Button bleibt in derselben Zeile (kein Umbruch). */
.hf-checkout #pwgc-redeem-gift-card-form {
	width: 100%; margin: 24px 0 28px; padding-top: 20px; border-top: 1px solid var(--hc-grey-light);
}
.hf-checkout #pwgc-redeem-form { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.hf-checkout #pwgc-redeem-form > label {
	display: block; flex: 0 0 100%; order: 0; margin: 0 0 8px;
	font-family: var(--hc-font-mono); font-weight: 700; font-size: 11px;
	letter-spacing: .08em; text-transform: uppercase; color: var(--hc-grey);
}
.hf-checkout #pwgc-redeem-error { flex: 0 0 100%; order: 3; margin: 8px 0 0 !important; font-size: 12px; }
.hf-checkout #pwgc-redeem-gift-card-number {
	flex: 1 1 0%; min-width: 0; width: auto !important; margin: 0 !important; height: 50px;
	border: 2px solid var(--hc-line) !important; border-right: 0 !important; border-radius: 0 !important;
}
.hf-checkout #pwgc-redeem-button {
	flex: 0 0 auto; width: auto !important; white-space: nowrap; height: 50px;
	display: inline-flex !important; align-items: center;
	margin: 0 !important; border-radius: 0 !important; padding: 0 22px !important;
	background: var(--hc-black) !important; color: var(--hc-white) !important;
	border: 2px solid var(--hc-black) !important;
	font-family: var(--hc-font-mono); font-weight: 800; text-transform: uppercase;
	font-size: 12px; letter-spacing: .06em;
}
.hf-checkout #pwgc-redeem-button:hover { background: var(--hc-red) !important; border-color: var(--hc-red) !important; }

/* ==========================================================================
   POLISH-LAYER — sichtbare Struktur für unselektierte Elemente.
   Bewusst spät in der Datei + .hotrod-funnel-Scope (schlägt Theme-Resets).
   ========================================================================== */

/* Zeilen, Optionen, Beträge, Slots, Add-ons: klarer Rahmen + weiße Fläche.
   Hover/Auswahl mit ROTEM Offset-Schatten + Lift — die Signatur des alten Widgets. */
.hotrod-funnel .hf-option,
.hotrod-funnel .hf-trow,
.hotrod-funnel .hf-amount,
.hotrod-funnel .hf-slot,
.hotrod-funnel .hf-addon {
	background: var(--hc-white);
	border: 2px solid var(--hc-line);
	border-radius: 0;
	transition: border-color .14s var(--hc-ease), transform .14s var(--hc-ease),
		box-shadow .14s var(--hc-ease), background .14s var(--hc-ease);
}
/* Hover = dezenter Zwischenzustand: roter Rahmen + zarter Offset, KEIN Lift.
   Bewusst schwächer als die Auswahl (.sel) unten — Hover darf nie stärker
   wirken oder weiter „rausspringen" als der gewählte Zustand. */
.hotrod-funnel .hf-option:hover,
.hotrod-funnel .hf-trow:hover,
.hotrod-funnel .hf-amount:hover,
.hotrod-funnel .hf-slot:not(.off):hover {
	border-color: var(--hc-red);
	transform: none;
	box-shadow: 2px 2px 0 0 rgba(226, 18, 44, .4);
}
.hotrod-funnel .hf-option.sel,
.hotrod-funnel .hf-trow.sel,
.hotrod-funnel .hf-amount.sel,
.hotrod-funnel .hf-slot.sel,
.hotrod-funnel .hf-addon.sel {
	border: 2px solid var(--hc-red);
	background: var(--hc-red-soft);
	box-shadow: 4px 4px 0 0 var(--hc-red);
	transform: none;
}
.hotrod-funnel .hf-trow.sel { background: var(--hc-white); }
.hotrod-funnel .hf-trow.sel .hf-trow-body { background: var(--hc-red-soft); }

/* Gutschein-Beträge: mono, satt, fühlbar klickbar */
.hotrod-funnel .hf-amount {
	font-family: var(--hc-font-mono);
	font-weight: 800;
	font-size: 22px;
	padding: 26px 10px;
	letter-spacing: -.02em;
}

/* Kalender-Zellen: buchbare Tage klar gerahmt */
.hotrod-funnel .hf-cal-cell.ok { border: 1px solid var(--hc-line); background: var(--hc-white); }
.hotrod-funnel .hf-cal-cell.ok:hover { border-color: var(--hc-red); }
.hotrod-funnel .hf-cal { border-color: var(--hc-line); }
.hotrod-funnel .hf-slots { border: 2px dashed var(--hc-line); }
.hotrod-funnel .hf-drivers { border: 2px solid var(--hc-line); }
.hotrod-funnel .hf-cart { border: 2px solid var(--hc-line); }

/* Counter: Glyphen exakt zentriert (Theme-line-height neutralisiert),
   Wert mittig, Buttons quadratisch mit klarer Hover-Reaktion. */
.hotrod-funnel .hf-counter {
	display: inline-flex; align-items: stretch; border: 2px solid var(--hc-black);
	background: var(--hc-white);
}
.hotrod-funnel .hf-counter-btn {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0; margin: 0;
	font-family: var(--hc-font-sans); font-size: 20px; font-weight: 700; line-height: 1;
	border: 0; border-radius: 0; background: var(--hc-white); color: var(--hc-black);
}
.hotrod-funnel .hf-counter-btn:first-child { border-right: 2px solid var(--hc-black); }
.hotrod-funnel .hf-counter-btn:last-child { border-left: 2px solid var(--hc-black); }
.hotrod-funnel .hf-counter-btn:hover:not(:disabled) { background: var(--hc-red); color: var(--hc-white); }
.hotrod-funnel .hf-counter-val {
	display: flex; align-items: center; justify-content: center;
	min-width: 52px; font-weight: 800; font-size: 17px; line-height: 1;
}
.hotrod-funnel .hf-counter-sm .hf-counter-btn { width: 34px; height: 34px; font-size: 16px; }
.hotrod-funnel .hf-counter-sm .hf-counter-val { min-width: 40px; font-size: 14px; }

/* ---------- Checkout-Brand-Pass: Woo-Notices, Coupon-Banner, PW-Gift-Card ---------- */
.hf-checkout .woocommerce-info,
.hf-checkout .woocommerce-message,
.hf-checkout .woocommerce-error {
	background: var(--hc-white);
	border: 2px solid var(--hc-line);
	border-left: 6px solid var(--hc-red);
	border-radius: 0;
	color: var(--hc-black);
	font-family: var(--hc-font-mono);
	font-size: 12.5px;
	padding: 14px 18px;
}
.hf-checkout .woocommerce-info::before,
.hf-checkout .woocommerce-message::before,
.hf-checkout .woocommerce-error::before { color: var(--hc-red); }
.hf-checkout .woocommerce-info a,
.hf-checkout .showcoupon { color: var(--hc-red); font-weight: 700; text-decoration: underline; }
.hf-checkout .woocommerce-error { border-left-color: var(--hc-red-dark); }

/* PW Gift Card ("Have a gift card?") + alle Sekundär-Buttons im Checkout */
.hf-checkout input[type="text"],
.hf-checkout input[type="email"],
.hf-checkout input[type="tel"],
.hf-checkout input[type="number"] {
	border: 2px solid var(--hc-line); border-radius: 0; padding: 12px 14px;
	font-family: var(--hc-font-sans); background: var(--hc-white); box-shadow: none;
}
.hf-checkout input[type="text"]:focus,
.hf-checkout input[type="email"]:focus,
.hf-checkout input[type="tel"]:focus { border-color: var(--hc-red); outline: none; }
.hf-checkout .button:not(#place_order),
.hf-checkout button.button:not(#place_order),
.hf-checkout input[type="submit"]:not(#place_order) {
	background: var(--hc-white); color: var(--hc-black);
	border: 2px solid var(--hc-black); border-radius: 0;
	font-family: var(--hc-font-mono); font-size: 12px; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase; padding: 12px 20px;
	box-shadow: none; text-shadow: none;
	transition: background .14s var(--hc-ease), color .14s var(--hc-ease);
}
.hf-checkout .button:not(#place_order):hover {
	background: var(--hc-black); color: var(--hc-white);
}

/* ==========================================================================
   ZUSTANDS-INTEGRITÄT — jeder interaktive Zustand explizit definiert,
   damit kein Theme-Reset einen State kippen kann. (Vollaudit 2026-06-11)
   ========================================================================== */

/* Kalender: gewählter Tag IMMER rot mit weißer Ziffer (Fix: Polish-Layer
   hatte .ok-weiß nach .sel-rot gewonnen → unsichtbare Zahl). */
.hotrod-funnel .hf-cal-cell.ok.sel,
.hotrod-funnel .hf-cal-cell.ok.sel:hover {
	background: var(--hc-red);
	border-color: var(--hc-red);
	color: var(--hc-white);
	box-shadow: var(--hc-shadow-black-sm);
	transform: none;
}
.hotrod-funnel .hf-cal-cell.ok.sel .hf-cal-dot { background: var(--hc-white); }
.hotrod-funnel .hf-cal-arrow:hover { border-color: var(--hc-red); color: var(--hc-red); background: var(--hc-white); }

/* Primär-CTA: Schrift in JEDEM Zustand weiß (Theme färbte Hover dunkel). */
.hotrod-funnel .hf-next,
.hotrod-funnel .hf-next:hover,
.hotrod-funnel .hf-next:focus,
.hotrod-funnel .hf-next:active,
.hotrod-funnel .hf-next:disabled { color: var(--hc-white); }
.hotrod-funnel .hf-product-cta,
.hotrod-funnel .hf-product-cta:hover,
.hf-product-cta, .hf-product-cta:hover, .hf-product-cta:focus { color: var(--hc-white); }

/* Fokus sichtbar (Tastatur): einheitlicher roter Outline statt Theme-Blau. */
.hotrod-funnel button:focus-visible,
.hotrod-funnel [role="button"]:focus-visible {
	outline: 2px solid var(--hc-red);
	outline-offset: 2px;
}
.hotrod-funnel .hf-next:focus-visible { outline-color: var(--hc-black); }

/* Slot-Tags (Knappheit/Beliebtheit statt nackter Zahlen) */
.hotrod-funnel .hf-slot-tag {
	display: block; margin-top: 3px;
	font-family: var(--hc-font-mono); font-size: 10.5px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
.hotrod-funnel .hf-slot-tag.hot { color: var(--hc-red); }
.hotrod-funnel .hf-slot-tag.warn { color: var(--hc-amber); }
.hotrod-funnel .hf-slot-tag.pop { color: var(--hc-grey); }
.hotrod-funnel .hf-slot-tag.off { color: var(--hc-grey); }
.hotrod-funnel .hf-slot.sel .hf-slot-tag.hot { color: var(--hc-red-dark); }

/* Options-Icon-Chip: SVG im CI-Rot, sauber zentriert. */
.hotrod-funnel .hf-option-icon { color: var(--hc-red); }
.hotrod-funnel .hf-option-icon svg { display: block; }

/* Back-Link & Info-Toggle: Hover-Zustände eindeutig. */
.hotrod-funnel .hf-back:hover,
.hotrod-funnel .hf-back:focus { color: var(--hc-red); background: transparent; }
.hotrod-funnel .hf-trow-info:focus-visible { outline-offset: 1px; }

/* ==========================================================================
   THEME-PROOF — Hintergrund/Farbe der Funnel-Controls sind Markenentscheidungen,
   keine Theme-Entscheidungen. !important beendet die Klasse "unsichtbarer
   Button durch Theme-/Woo-Button-Reset in bestimmten Seitenkontexten" endgültig.
   ========================================================================== */
.hotrod-funnel .hf-next,
.hf-modal .hf-next {
	background: var(--hc-red) !important;
	color: var(--hc-white) !important;
	border: 0 !important;
}
.hotrod-funnel .hf-next:hover:not(:disabled),
.hf-modal .hf-next:hover:not(:disabled) { background: var(--hc-red-dark) !important; }
.hotrod-funnel .hf-next:disabled,
.hf-modal .hf-next:disabled { background: #5a4632 !important; color: #a98a6a !important; }

.hf-product-cta,
.hf-product-cta:hover,
.hf-product-cta:focus {
	background: var(--hc-red) !important;
	color: var(--hc-white) !important;
	border: 0 !important;
}
.hf-product-cta:hover { background: var(--hc-red-dark) !important; }

.hotrod-funnel .hf-counter-btn,
.hf-modal .hf-counter-btn { background: var(--hc-white) !important; color: var(--hc-black) !important; }
.hotrod-funnel .hf-counter-btn:hover:not(:disabled),
.hf-modal .hf-counter-btn:hover:not(:disabled) { background: var(--hc-red) !important; color: var(--hc-white) !important; }

.hf-popular-chip { background: var(--hc-white) !important; color: var(--hc-black) !important; }
.hotrod-funnel .hf-prompt-yes,
.hf-prompt .hf-prompt-yes {
	background: var(--hc-red) !important; color: var(--hc-white) !important; border: 0 !important;
}
.hotrod-funnel .hf-prompt-yes:hover,
.hf-prompt .hf-prompt-yes:hover { background: var(--hc-red-dark) !important; color: var(--hc-white) !important; }
.hotrod-funnel .hf-prompt-no,
.hf-prompt .hf-prompt-no { background: var(--hc-white) !important; color: var(--hc-black) !important; }
.hotrod-funnel .hf-back { background: transparent !important; color: var(--hc-black) !important; border: 0 !important; }
.hotrod-funnel .hf-back:hover { color: var(--hc-red) !important; }
.hotrod-funnel .hf-trow-info { background: var(--hc-white) !important; color: var(--hc-grey) !important; }
.hotrod-funnel .hf-modal-close,
.hf-modal .hf-modal-close { background: var(--hc-black) !important; color: var(--hc-white) !important; }
.hf-modal .hf-modal-close:hover { background: var(--hc-red) !important; }

/* ---------- Builder-Vorschau (Bricks-Canvas) ---------- */
.hf-builder-note {
	font-family: var(--hc-font-mono); font-size: 10.5px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--hc-grey);
	border: 1px dashed var(--hc-grey-light); padding: 6px 10px; margin-bottom: 14px;
	text-align: center;
}

/* ---------- Versicherungs-Empfehlung (Schritt-4-Prompt) ---------- */
.hf-prompt {
	position: fixed; inset: 0; z-index: 100001;
	display: flex; align-items: center; justify-content: center; padding: 16px;
}
.hf-prompt-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .62); }
.hf-prompt-box {
	position: relative; width: 100%; max-width: 470px; background: var(--hc-white);
	border: 2px solid var(--hc-red); box-shadow: var(--hc-shadow-red);
	padding: 30px 28px; text-align: center;
}
.hf-prompt-icon { font-size: 34px; line-height: 1; margin-bottom: 12px; }
.hf-prompt-title { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 12px; }
.hf-prompt-text { color: var(--hc-grey); font-size: 13.5px; line-height: 1.6; text-align: left; margin: 0 0 24px; }
.hf-prompt-actions { display: flex; flex-direction: column; gap: 10px; }
.hf-prompt-yes {
	background: var(--hc-red); color: var(--hc-white); border: 0; border-radius: 0;
	font-family: var(--hc-font-mono); font-size: 13px; font-weight: 800; letter-spacing: .06em;
	text-transform: uppercase; padding: 15px 18px; box-shadow: var(--hc-shadow-black); cursor: pointer;
	transition: transform .12s var(--hc-ease), box-shadow .12s var(--hc-ease), background .12s var(--hc-ease);
}
.hf-prompt-yes:hover { background: var(--hc-red-dark); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hc-black); }
.hf-prompt-no {
	background: var(--hc-white); color: var(--hc-black); border: 2px solid var(--hc-line); border-radius: 0;
	font-family: var(--hc-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; padding: 13px 18px; cursor: pointer;
	transition: border-color .12s var(--hc-ease), color .12s var(--hc-ease);
}
.hf-prompt-no:hover { border-color: var(--hc-black); color: var(--hc-red); }

/* ---------- Zustände ---------- */
.hf-loading { text-align: center; color: var(--hc-grey); padding: 28px 0; font-family: var(--hc-font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.hf-redirect { padding: 80px 0; }
.hf-error {
	border: 1px solid var(--hc-red); background: var(--hc-red-soft); color: var(--hc-red-dark);
	padding: 12px 16px; font-size: 13.5px; margin-bottom: 18px;
}

/* ---------- Tour Route / Stops (Teaser + Toggle + Panel; Route selbst in route.css) ---------- */
.hf-trow-stops-teaser {
	display: block; margin-top: 4px;
	font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em;
	color: var(--hc-grey);
}
.hf-trow-route-toggle {
	font-family: var(--hc-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--hc-grey); border: 1px solid var(--hc-line) !important;
	padding: 6px 10px; background: var(--hc-white); white-space: nowrap; cursor: pointer;
}
.hf-trow-route-toggle:hover { color: var(--hc-black); border-color: var(--hc-black) !important; }
.hf-trow-route {
	padding: 12px 16px 16px; border-top: 1px dashed var(--hc-line); margin: 0 14px;
}
.hf-trow.sel .hf-trow-route { border-top-color: rgba(226,18,44,.25); }
/* route.css nutzt dunkle Textfarben (für helle Seiten/Shortcode); im dunklen Funnel-Panel
   die Stop-Liste auf helle Farben umstellen, sonst sind die Namen unlesbar. */
.hotrod-funnel .hf-trow-route .hotrod-route-list li { color: var(--hc-white); }
.hotrod-funnel .hf-trow-route .hotrod-route-name { color: var(--hc-white); }
.hotrod-funnel .hf-trow-route .hotrod-route-note { color: var(--hc-grey-light); }

/* ==========================================================================
   Großgruppen-Konfigurator, Ape-Zubuchung & Gruppen-Anfrage (Handoff v1.1)

   THEME-STRATEGIE: Das v3-Skin (funnel-v3-pass.css, per mu-plugin geladen)
   macht den Funnel standardmäßig DUNKEL und re-pointet bei html.theme-light
   seine lokalen --hf-*-Variablen auf hell. Alle neuen Komponenten hängen an
   GENAU diesen Variablen (mit hellen Fallbacks für den Skin-losen Fall) und
   folgen damit beiden Modi automatisch. Semantische Töne (Hinweis/Fehler/
   Info/Erfolg) sind hell definiert und werden unter html.theme-dark umgefärbt.
   ========================================================================== */

.hotrod-funnel {
	--hf-tint-warn-bg:   #fff7ed; --hf-tint-warn-line: #fed7aa; --hf-tint-warn-fg: #9a3412;
	--hf-tint-err-bg:    #fef2f2; --hf-tint-err-line:  #fecaca; --hf-tint-err-fg:  #991b1b;
	--hf-tint-info-bg:   #eff6ff; --hf-tint-info-line: #bfdbfe; --hf-tint-info-fg: #1e3a8a;
	--hf-tint-ok-bg:     #f0fdf4; --hf-tint-ok-line:   #bbf7d0; --hf-tint-ok-fg:   #14532d;
}
html.theme-dark .hotrod-funnel {
	--hf-tint-warn-bg:   rgba(255, 107, 0, .10);  --hf-tint-warn-line: rgba(255, 107, 0, .35);  --hf-tint-warn-fg: #ffb27a;
	--hf-tint-err-bg:    rgba(226, 60, 50, .12);  --hf-tint-err-line:  rgba(226, 60, 50, .40);  --hf-tint-err-fg:  #ff9e97;
	--hf-tint-info-bg:   rgba(96, 165, 250, .10); --hf-tint-info-line: rgba(96, 165, 250, .35); --hf-tint-info-fg: #9ec5ff;
	--hf-tint-ok-bg:     rgba(74, 222, 128, .10); --hf-tint-ok-line:   rgba(74, 222, 128, .35); --hf-tint-ok-fg:   #86efac;
}

/* Upsell-Hinweis kurz vor der Gruppen-Schwelle */
.hf-grp-upsell {
	margin: 10px 0 0; padding: 10px 14px; font-size: 13px;
	background: var(--hf-tint-warn-bg); border: 1px solid var(--hf-tint-warn-line);
	color: var(--hf-tint-warn-fg); border-radius: var(--hc-radius, 10px);
}

/* ---- Options-Karten (Spec 2.2) ---- */
.hf-slots-group { display: flex; flex-direction: column; gap: 14px; }
.hf-grp-card {
	border: 1px solid var(--hf-line, var(--hc-line, #e7e2da));
	border-radius: var(--hc-radius, 12px);
	padding: 16px;
	background: var(--hf-asphalt-2, var(--hc-white, #fff));
	color: var(--hf-on, inherit);
	transition: border-color .15s var(--hc-ease, ease), box-shadow .15s var(--hc-ease, ease);
}
.hf-grp-card.sel { border-color: var(--hc-red, #e2231a); box-shadow: inset 0 0 0 1px var(--hc-red, #e2231a); }
.hf-grp-card.off { opacity: .62; }
.hf-grp-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.hf-grp-card-title {
	font-family: var(--hc-font-display, "Oswald", sans-serif); font-weight: 600; font-size: 16px;
	text-transform: uppercase; letter-spacing: .04em; color: var(--hf-on-strong, var(--hc-black, #17140f));
}
.hf-grp-badge {
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	background: var(--hc-red, #e2231a); color: #fff; padding: 3px 8px; border-radius: 0;
}
/* Invertiert je Modus: dunkel → helle Plakette, hell → dunkle Plakette. */
.hf-grp-badge.alt { background: var(--hf-on-strong, var(--hc-black, #17140f)); color: var(--hf-asphalt, #fff); }
.hf-grp-card-sub { font-size: 13px; color: var(--hf-on-muted, var(--hc-grey, #6b645a)); margin: 0 0 10px; line-height: 1.5; }

/* Aufteilungs-Stepper + Live-Validierung (Spec 2.1/2.8) */
.hf-grp-split { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.hf-grp-split-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--hf-on, inherit); }
.hf-grp-split-ape { font-weight: 700; min-width: 34px; text-align: center; color: var(--hf-on-strong, inherit); }
.hf-grp-error {
	margin-top: 8px; padding: 8px 12px; font-size: 12.5px;
	background: var(--hf-tint-err-bg); border: 1px solid var(--hf-tint-err-line);
	color: var(--hf-tint-err-fg); border-radius: 0;
}

/* Sitzplatz-/Fahrzeuggrafik (Spec 2.7) — Stroke-Icons statt Emoji, erben CI-Orange */
.hf-grp-fleet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; line-height: 1; color: var(--hc-red, #e2231a); margin: 2px 0 4px; }
.hf-grp-car { display: inline-flex; }
.hf-grp-ape { display: inline-flex; align-items: center; white-space: nowrap; }
.hf-grp-ape i { font-style: normal; font-size: 8px; color: var(--hc-red, #e2231a); vertical-align: middle; margin-left: 1px; letter-spacing: 1px; }
.hf-grp-fleet .hf-ic { display: block; }
/* Wellen-Tausch: umbruchfähige Icon-Zeile statt Monospace-Kasten mit Overflow */
.hf-grp-swap {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
	font-size: 12px; color: var(--hf-on-muted, var(--hc-grey, #6b645a));
	background: var(--hf-ink, var(--hc-bg, #faf8f5));
	border: 1px dashed var(--hf-line, var(--hc-line, #e7e2da));
	border-radius: 0; padding: 9px 12px; margin-bottom: 10px;
}
.hf-grp-swap-leg { display: inline-flex; align-items: center; gap: 5px; color: var(--hc-red, #e2231a); }
.hf-grp-swap-mid { display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: 11px; }
.hf-grp-swap-mid .hf-ic { color: var(--hc-red, #e2231a); }
.hf-grp-legs { font-family: var(--hc-font-display, "Oswald", sans-serif); font-size: 15px; font-weight: 600; margin: 6px 0 10px; color: var(--hf-on-strong, inherit); }

/* Zeit-Chips je Karte */
.hf-grp-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hf-grp-times-label {
	font-size: 12px; font-weight: 600; color: var(--hf-on-muted, var(--hc-grey, #6b645a));
	text-transform: uppercase; letter-spacing: .06em; width: 100%;
}
.hf-grp-time {
	border: 1px solid var(--hf-line, var(--hc-line, #e7e2da));
	background: var(--hf-asphalt, var(--hc-white, #fff));
	color: var(--hf-on, inherit);
	border-radius: 0; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.hf-grp-time:hover { border-color: var(--hc-red, #e2231a); }
.hf-grp-time.sel { background: var(--hc-red, #e2231a); border-color: var(--hc-red, #e2231a); color: #fff; }
.hf-grp-time.off { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
/* Inline-Icons (Uhr/Glühbirne) sauber auf die Textzeile setzen */
.hf-grp-time .hf-ic, .hf-slot-time .hf-ic, .hf-grp-upsell .hf-ic { vertical-align: -2px; }
.hf-grp-time .hf-ic { margin-right: 1px; }
.hf-grp-upsell .hf-ic { margin-right: 3px; color: var(--hc-red, #e2231a); }
.hf-grp-stage { font-size: 13px; margin-top: 6px; color: var(--hf-on, inherit); }

/* Anfrage-Karte + "Stattdessen anfragen" + Zu-groß-Hinweis */
.hf-grp-inquiry { background: var(--hf-ink, var(--hc-bg, #faf8f5)); }
.hf-grp-inquiry-btn { margin-top: 4px; }
.hf-grp-toobig {
	padding: 12px 14px; margin-bottom: 4px; font-size: 13.5px; line-height: 1.5;
	background: var(--hf-tint-info-bg); border: 1px solid var(--hf-tint-info-line);
	color: var(--hf-tint-info-fg); border-radius: var(--hc-radius, 10px);
}
.hf-foot-right { display: inline-flex; align-items: center; gap: 12px; }
.hf-grp-ask {
	background: none; border: none; cursor: pointer; font-size: 13px;
	color: var(--hf-on-muted, var(--hc-grey, #6b645a)); text-decoration: underline; padding: 6px 2px;
}
.hf-grp-ask:hover { color: var(--hc-red, #e2231a); }

/* ---- Anfrage-Overlay (Formular im Prompt) ---- */
.hf-inquiry .hf-prompt-box { max-width: 460px; width: calc(100% - 32px); }
.hf-inq-summary {
	font-size: 12.5px; color: var(--hf-on-muted, var(--hc-grey, #6b645a));
	background: var(--hf-ink, var(--hc-bg, #faf8f5));
	border: 1px solid var(--hf-line, var(--hc-line, #e7e2da));
	border-radius: 8px; padding: 8px 12px; margin: 10px 0;
}
.hf-inq-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.hf-inq-form input, .hf-inq-form textarea,
.hf-gi-field input, .hf-gi-field select, .hf-gi-field textarea {
	border: 1px solid var(--hf-line-2, var(--hc-line, #c9c9c9));
	background: var(--hf-asphalt-2, var(--hc-white, #fff));
	color: var(--hf-on, var(--hc-black, #17140f));
	border-radius: 0; padding: 10px 12px;
	font: inherit; font-size: 14px; font-weight: 400; width: 100%; box-sizing: border-box;
}
.hf-inq-form input::placeholder, .hf-inq-form textarea::placeholder,
.hf-gi-field input::placeholder, .hf-gi-field textarea::placeholder { color: var(--hf-on-muted, #9a958d); }
.hf-inq-form input:focus, .hf-inq-form textarea:focus,
.hf-gi-field input:focus, .hf-gi-field select:focus, .hf-gi-field textarea:focus {
	outline: none; border-color: var(--hc-red, #e2231a);
}
/* Native Date/Select-Controls im Dunkeln dunkel rendern (Picker-Icons etc.) */
html.theme-dark .hf-gi-field input, html.theme-dark .hf-gi-field select, html.theme-dark .hf-gi-field textarea,
html.theme-dark .hf-inq-form input, html.theme-dark .hf-inq-form textarea { color-scheme: dark; }

/* ---- Feature B: Ape-Zubuchung (Add-on-Block) ---- */
.hf-ape {
	border: 1px solid var(--hf-line, var(--hc-line, #e7e2da));
	border-radius: var(--hc-radius, 12px);
	padding: 14px 16px; margin-bottom: 16px;
	background: var(--hf-asphalt-2, var(--hc-white, #fff));
	color: var(--hf-on, inherit);
}
.hf-ape.sel { border-color: var(--hc-red, #e2231a); box-shadow: inset 0 0 0 1px var(--hc-red, #e2231a); }
.hf-ape-head { display: flex; gap: 12px; align-items: flex-start; }
.hf-ape-icon {
	flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	background: var(--hf-asphalt, var(--hc-white, #fff)); border: 1px solid var(--hc-red, #e2231a); color: var(--hc-red, #e2231a);
}
.hf-ape-title {
	font-family: var(--hc-font-display, "Oswald", sans-serif); font-weight: 600; font-size: 15px;
	text-transform: uppercase; letter-spacing: .03em; color: var(--hf-on-strong, var(--hc-black, #17140f));
}
.hf-ape-text { font-size: 13px; color: var(--hf-on-muted, var(--hc-grey, #6b645a)); margin-top: 2px; line-height: 1.5; }
.hf-ape-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hf-ape-btn {
	border: 1px solid var(--hf-line, var(--hc-line, #e7e2da));
	background: var(--hf-asphalt, var(--hc-white, #fff));
	color: var(--hf-on, inherit);
	border-radius: 0; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.hf-ape-btn:hover:not(.on) { border-color: var(--hc-red, #e2231a); }
.hf-ape-btn.on { background: var(--hc-red, #e2231a); border-color: var(--hc-red, #e2231a); color: #fff; }
.hf-ape-config { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.hf-ape-price { font-size: 13.5px; font-weight: 600; color: var(--hf-on-strong, inherit); }
.hf-ape-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; color: var(--hf-on, inherit); }
.hf-ape-check input { width: 16px; height: 16px; accent-color: var(--hc-red, #e2231a); flex: none; }
.hf-ape-why { cursor: help; color: var(--hf-on-muted, var(--hc-grey, #6b645a)); }
.hf-ape-none {
	margin-top: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
	background: var(--hf-ink, var(--hc-bg, #faf8f5));
	border: 1px dashed var(--hf-line, var(--hc-line, #e7e2da));
	border-radius: 8px; color: var(--hf-on-muted, var(--hc-grey, #6b645a));
}

/* Sidebar: Info-Zeile ohne Betrag */
.hf-cart-info .hf-cart-label { color: var(--hf-on-muted, var(--hc-grey, #6b645a)); font-size: 12.5px; }

/* ---- Option 3: Gruppen-Anfrage (eigener Schritt-2-Flow) ---- */
@media (min-width: 960px) { .hf-options-3 { grid-template-columns: 1fr 1fr 1fr; } }
.hf-gi { display: flex; flex-direction: column; gap: 16px; }
.hf-gi-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .hf-gi-grid { grid-template-columns: 1fr 1fr; } }
.hf-gi-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--hf-on-muted, var(--hc-grey, #6b645a)); }
.hf-gi-wide { grid-column: 1 / -1; }
.hf-gi-done {
	padding: 22px; font-size: 15px; line-height: 1.6;
	background: var(--hf-tint-ok-bg); border: 1px solid var(--hf-tint-ok-line);
	color: var(--hf-tint-ok-fg); border-radius: var(--hc-radius, 12px);
}