/**
 * Companion-Styles (App-Design, responsiv). Markup-Muster aus app_demo.html (gcard/gdetail/
 * gcart/co-*), fürs Web neu gesetzt: Karten-GRID statt Phone-Rails, Sheets → Modal (Desktop)
 * bzw. Bottom-Sheet (Mobile). Alles über die Tokens; stw-*-Präfix gegen Theme-Kollisionen.
 */

/* ---------- Seitenrahmen (Inhalt + Rechtstexte-Leiste; Header/Footer liefert das Theme) ---------- */
.stw-main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--stw-s-5) var(--stw-page-x); box-sizing: border-box; }
.stw-footer { display: flex; gap: var(--stw-s-4); justify-content: center; padding: var(--stw-s-5) var(--stw-page-x); border-top: 1px solid var(--stw-border); }
.stw-footer a { color: var(--stw-text-subtle); font-size: 13px; text-decoration: none; }
.stw-footer a:hover { color: var(--stw-text); }

/* ---------- Hero / Seitenkopf ---------- */
.stw-hero { margin: var(--stw-s-4) 0 var(--stw-s-5); }
.stw-hero__over { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--stw-gold-text); }
.stw-hero__title { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.6px; }
.stw-hero__sub { margin: var(--stw-s-2) 0 0; font-size: 15px; line-height: 1.5; color: var(--stw-text-muted); max-width: 640px; }
.stw-empty { padding: var(--stw-s-6) 0; color: var(--stw-text-muted); font-size: 15px; }
.stw-crumb { margin: 0 0 var(--stw-s-5); }
.stw-crumb a { color: var(--stw-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.stw-crumb a:hover { color: var(--stw-accent-strong); }

/* ---------- Kategorie-Filter (Chips: Alle + Kategorien) ---------- */
.stw-catfilter { display: flex; flex-wrap: wrap; gap: var(--stw-s-2); margin-bottom: var(--stw-s-4); }
.stw-chip { padding: 8px 16px; border-radius: var(--stw-r-pill); border: 1px solid var(--stw-border-strong); background: var(--stw-surface); color: var(--stw-text-muted); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.stw-chip:hover { color: var(--stw-text); }
.stw-chip.is-active { background: var(--stw-accent); border-color: var(--stw-accent); color: var(--stw-accent-ink); }
/* Abholzeit: eine Zeit = ausformulierter Kasten, mehrere = Chip-Leiste (wie App). */
.stw-timeinfo { padding: 11px 13px; background: var(--stw-surface-2); border-radius: 10px; font-size: 14px; line-height: 1.4; }
/* Abholzeit-Auswahl (mehrere Zeiten / Wunschzeit) in getönter Box wie App-.timepick. */
.stw-timepick { background: var(--stw-surface-2); border-radius: 10px; padding: 12px 14px; }
.stw-timepick__lbl { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 400; color: var(--stw-text); }
/* „Nicht angeboten"-Box im Buchungsformular — wie App (BookingSheet notAvail): Danger-Kasten (danger-soft)
   mit rotem Icon-Kreis (danger) + weißem MapPinOff. [hidden] muss display:none schlagen (sonst sichtbar). */
.stw-notoffer { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--stw-danger-soft); margin-top: var(--stw-s-3); }
.stw-notoffer[hidden] { display: none; }
.stw-regionbrowse { margin-top: var(--stw-s-3); }
.stw-page .stw-regionbrowse[hidden], .stw-overlay .stw-regionbrowse[hidden] { display: none; }
.stw-notoffer__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--stw-r-pill); background: var(--stw-danger); color: var(--stw-accent-ink); }
.stw-notoffer__icon svg { display: block; }
.stw-notoffer__txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--stw-text-body); }
.stw-notoffer__txt strong { font-weight: 700; }
.stw-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Katalog-Steuerleiste (Region-Kontext links · Ansicht + Merken rechts) ---------- */
.stw-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--stw-s-3); margin-bottom: var(--stw-s-4); }
.stw-toolbar__right { display: flex; align-items: center; gap: var(--stw-s-2); flex: 0 0 auto; }
/* Region = getönte Kontext-Pille; der native <select> liegt transparent DARÜBER (Klick/Tap öffnet den
   nativen Dropdown, mobil-freundlich). web.js spiegelt den gewählten Namen in __val. */
.stw-regionpill { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--stw-r-pill); border: 1px solid var(--stw-accent); background: var(--stw-accent-soft); color: var(--stw-accent); cursor: pointer; box-sizing: border-box; }
.stw-regionpill__pin { flex: 0 0 auto; }
.stw-regionpill__txt { display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px; min-width: 0; }
.stw-regionpill__cap { font-size: 13px; font-weight: 600; color: var(--stw-accent); white-space: nowrap; }
.stw-regionpill__cap::after { content: ':'; }
.stw-regionpill__val { font-size: 14px; font-weight: 700; color: var(--stw-accent-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.stw-regionpill__chev { flex: 0 0 auto; opacity: 0.55; }
.stw-page .stw-regionpill__sel { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; font-size: 16px; }
/* Ansicht-Umschalter (Segmented Control) */
.stw-seg { display: inline-flex; height: 40px; border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-pill); overflow: hidden; background: var(--stw-surface); }
.stw-page .stw-seg__btn { display: inline-flex; align-items: center; height: 100%; padding: 0 15px; border: 0; background: transparent; color: var(--stw-text-muted); font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.stw-page .stw-seg__btn + .stw-seg__btn { border-left: 1px solid var(--stw-border-strong); }
.stw-page .stw-seg__btn:hover { color: var(--stw-text); }
.stw-page .stw-seg__btn.is-active { background: var(--stw-accent); color: var(--stw-accent-ink); }
/* „Gemerkte" = Herz-Icon-Button mit dezentem Zähler-Badge */
.stw-page .stw-favbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-pill); background: var(--stw-surface); color: var(--stw-text-muted); cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.stw-favbtn svg { width: 19px; height: 19px; fill: none; }
.stw-page .stw-favbtn:hover { color: var(--stw-text); border-color: var(--stw-text-subtle); }
.stw-page .stw-favbtn.is-active { background: var(--stw-accent); border-color: var(--stw-accent); color: var(--stw-accent-ink); }
.stw-page .stw-favbtn.is-active svg { fill: var(--stw-accent-ink); }
.stw-favbtn__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: var(--stw-r-pill); background: var(--stw-accent-strong); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 15px; text-align: center; border: 1.5px solid var(--stw-paper); font-variant-numeric: tabular-nums; }
.stw-favbtn__label { display: none; } /* Desktop: Herz ist Icon-only; das Label erscheint nur mobil (als Tab). */

/* Mobil (<700px): Region VOLL­BREIT oben, darunter der Ansicht-Umschalter + „Gemerkte" als UNTERSTRICH-TABS
   (Nach Kategorien · Alle Ausflüge · Gemerkte). Gleiche Buttons/Handler wie Desktop — nur Optik: der Segmented-
   Wrapper wird per display:contents aufgelöst, sodass seine Buttons UND der Herz-Button zu Geschwister-Tabs in
   EINER Reihe mit gemeinsamer Unterlinie werden. Bei sehr schmalen Geräten scrollt die Tab-Reihe horizontal. */
@media (max-width: 699.98px) {
  .stw-toolbar { flex-direction: column; align-items: stretch; gap: var(--stw-s-4); }
  .stw-regionpill { width: 100%; }
  .stw-regionpill__chev { margin-left: auto; }
  .stw-toolbar__right { gap: var(--stw-s-4); align-items: flex-end; border-bottom: 1px solid var(--stw-border); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .stw-toolbar__right::-webkit-scrollbar { display: none; }
  .stw-seg { display: contents; }
  .stw-page .stw-seg__btn,
  .stw-page .stw-favbtn { flex: 0 0 auto; height: auto; width: auto; min-width: 0; padding: 0 0 10px; border: 0; border-radius: 0; background: transparent; color: var(--stw-text-muted); font-size: 14.5px; font-weight: 600; white-space: nowrap; box-shadow: none; }
  .stw-page .stw-seg__btn + .stw-seg__btn { border-left: 0; }
  .stw-page .stw-seg__btn.is-active,
  .stw-page .stw-favbtn.is-active { background: transparent; color: var(--stw-accent); box-shadow: inset 0 -2px 0 var(--stw-accent); }
  .stw-favbtn { gap: 5px; }
  .stw-favbtn svg { width: 17px; height: 17px; }
  .stw-favbtn__label { display: inline; }
  .stw-page .stw-favbtn.is-active svg { fill: var(--stw-accent); }
  .stw-favbtn__n { position: static; top: auto; right: auto; margin-left: 3px; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; color: inherit; font-size: 13px; line-height: normal; }
}

/* ---------- Katalog-Grid + Karte (gcard) ---------- */
.stw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--stw-s-4); }
/* [hidden] muss die display:grid-Klassenregel schlagen (sonst bleibt das „Alle Ausflüge"-Raster in der
   Karussell-Ansicht sichtbar). .stw-grid[hidden] (0,2,0) > .stw-grid (0,1,0). */
.stw-grid[hidden] { display: none; }
/* Randlose, bild-forward Kachel (Airbnb/Klook-Stil): kein Rahmen/Schatten, nur Bild + Text; die
   Wertigkeit trägt das Bild. Preis-Fluchtung entsteht rein aus (gleiche Kachelhöhe via Flex/Grid-
   stretch) + (.stw-card__foot margin-top:auto) — kein JS-Equalizer mehr. */
.stw-card { display: flex; flex-direction: column; background: transparent; text-decoration: none; color: inherit; }
/* Gerundetes Titelbild; Hover = dezenter Bild-Zoom INNERHALB des Bildes (overflow:hidden) → kein
   ausladender Schatten, kein Schutzraum am Karussell-Rand nötig. */
.stw-card__img { position: relative; display: block; height: 200px; border-radius: 14px; overflow: hidden; background: var(--stw-surface-2); }
.stw-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.stw-card:hover .stw-card__img img { transform: scale(1.05); }
.stw-card__body { display: flex; flex-direction: column; flex: 1; gap: 2px; padding: 10px 2px 0; }
/* Overline (Tage/Dauer) immer 1 Zeile → keine Höhen-Varianz durch überlange Angaben (Volltext auf der Detailseite). */
.stw-card__over { font-size: 12px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--stw-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Titel auf max. 2 Zeilen klemmen. */
.stw-card__title { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Kurztext: Zeilenzahl je Titellänge (web.js: 1-zeiliger Titel → 3 Zeilen, 2-zeiliger → 2). CSS-Default 2 = Fallback. */
.stw-card__desc { font-size: 14px; line-height: 1.45; color: var(--stw-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Preis unten verankern → „ab X €" sitzt bei allen (gleich hohen) Kacheln auf gleicher Höhe. */
.stw-card__foot { margin-top: auto; padding-top: 6px; }
.stw-card__price { font-size: 16px; font-weight: 800; color: var(--stw-accent); }
.stw-card__price small { font-size: 13px; font-weight: 500; color: var(--stw-text-subtle); }
.stw-card__price--req { color: var(--stw-text-muted); font-weight: 600; font-size: 15px; }

/* ---------- Detailseite (gdetail) ---------- */
.stw-detail { display: grid; grid-template-columns: 1fr; gap: var(--stw-s-5); }
@media (min-width: 900px) { .stw-detail { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } }
.stw-detail__main { min-width: 0; } /* Grid-Overflow-Schutz (lange Wörter/Bilder) */
.stw-detail__media { margin: var(--stw-s-3) 0 var(--stw-s-4); }
/* Einheitliche Bild-Box: festes 16:10-Verhältnis + object-fit:cover → jede Detailseite gleich hoch,
   egal welches Seitenverhältnis das Quellbild hat (Einzelbild UND Karussell-Slides; „kein Bild"-Platzhalter
   nutzt dasselbe Verhältnis). */
.stw-detail__media img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
/* Nur das EINZELBILD rundet sich selbst (Direktkind). Beim Karussell rundet der Container .stw-gal
   einmal per overflow:hidden — sonst bekäme jedes Slide eigene Ecken. */
.stw-detail__media > img { border-radius: var(--stw-r-xl); }
/* Buchungs-Sidebar rechts: Desktop = Karte mit Inline-Formular; Mobil = aus (Floating-Button → Sheet). */
.stw-detail__booking { display: none; }
@media (min-width: 900px) { .stw-detail__booking { display: block; min-width: 0; background: var(--stw-surface); border: 1px solid var(--stw-border); border-radius: var(--stw-r-xl); padding: var(--stw-s-4); box-shadow: 0 2px 6px rgba(28, 28, 25, 0.04), 0 12px 28px -18px rgba(20, 86, 79, 0.14); } }
/* Sticky NUR wenn der Bildschirm hoch genug ist, dass das Formular ganz reinpasst (~76px Topbar + ~900px Formular).
   Ist der Screen niedriger (Laptop), scrollt die Sidebar normal mit — so bleibt der „Weiter"-Button erreichbar. */
@media (min-width: 900px) and (min-height: 1000px) { .stw-detail__booking { position: sticky; top: 76px; } }
/* Region-Warn-Chip links auf Desktop aus — dort sitzen Region-Auswahl + Hinweis in der Sidebar (redundant). Mobil bleibt er. */
@media (min-width: 900px) { .stw-page--detail .stw-detail__main .stw-regionwarn { display: none; } }
.stw-detail__noimg { display: block; aspect-ratio: 16 / 10; background: var(--stw-surface-2); border-radius: var(--stw-r-xl); }

/* Foto-Karussell (Vorschlag C): Wischen; unten RECHTS der Zähler „1 / 5" (keine Punkte), auf Desktop
   von den Pfeilen ‹ › flankiert. touch-action: horizontale Gesten gehören dem Karussell — sonst wertet
   der Browser sie als „Zurück" (iOS-Edge-Swipe) und verlässt die Seite. Vertikal-Scroll + Zoom bleiben. */
.stw-gal { position: relative; overflow: hidden; border-radius: var(--stw-r-xl); touch-action: pan-y pinch-zoom; }
.stw-gal__track { display: flex; transition: transform 0.3s ease; }
.stw-gal__slide { flex: 0 0 100%; }
.stw-gal__slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 0; }
/* Unten RECHTS: ohne left/right:0 schrumpft die Zeile auf ihren Inhalt. Mobil sind die Pfeile aus,
   dadurch steht dort automatisch nur der Zähler rechts unten. */
.stw-gal__nav { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; }
/* Radius bewusst identisch zu .stw-fact (Personentyp-Preise) — dort ein literales 10px, kein Token. */
.stw-gal__count { background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 10px; }
/* Mobil wird gewischt -> keine Pfeile, nur der Zähler. Ab Desktop (Maus) Pfeile links/rechts davon. */
.stw-gal__arrow { display: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.stw-gal__arrow:hover { background: rgba(0, 0, 0, 0.75); }
@media (min-width: 900px) { .stw-gal__arrow { display: inline-flex; } }

/* Lightbox: Bild groß und UNGECROPPT (contain) — anders als die 16:10-Normalansicht. z-index über dem
   Sheet-Overlay (10050). touch-action wie beim Karussell: horizontal = blättern, kein Browser-„Zurück". */
/* Weißer Hintergrund -> Bedienelemente dunkel. touch-action:pinch-zoom = Browser macht KEIN Pan
   (weder horizontal fürs Blättern noch vertikal fürs Schließen) -> unsere Touch-Handler bekommen
   cancelable-Events; Pinch-Zoom des Browsers bleibt erhalten. */
.stw-lbx { position: fixed; inset: 0; z-index: 10060; background: #fff; display: flex; align-items: center; justify-content: center; padding: 56px 16px; box-sizing: border-box; touch-action: pinch-zoom; }
.stw-lbx[hidden] { display: none; }
.stw-lbx__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border: 0; border-radius: 0; box-shadow: none; }
.stw-lbx__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.07); color: #1c1c19; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.stw-lbx__close:hover { background: rgba(0, 0, 0, 0.14); }
.stw-lbx__count { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: rgba(0, 0, 0, 0.6); font-size: 13px; font-weight: 600; }
.stw-lbx__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.07); color: #1c1c19; font-size: 26px; line-height: 1; cursor: pointer; padding: 0; display: none; }
.stw-lbx__arrow:hover { background: rgba(0, 0, 0, 0.14); }
.stw-lbx__arrow--prev { left: 12px; }
.stw-lbx__arrow--next { right: 12px; }
/* Mobil wird gewischt (wie im Karussell); ab Desktop Pfeile für die Maus. */
@media (min-width: 900px) { .stw-lbx__arrow:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; } }
/* Detail-Kopf: Overline + Titel links, Merken-Herz rechts oben (flex-start). Das margin-top ersetzt den
   früheren Over-Top-Margin — sitzt weiterhin in der linken Spalte (Grid-Item-BFC), Buchungsspalte unberührt. */
.stw-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--stw-s-3); margin-top: var(--stw-s-4); }
.stw-detail__headtext { min-width: 0; }
.stw-detail__over { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--stw-text-subtle); }
.stw-detail__title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.stw-detail__mode { margin: var(--stw-s-1) 0 0; font-size: 15px; font-weight: 600; color: var(--stw-accent); }
.stw-detail__note { margin: var(--stw-s-3) 0 0; padding: var(--stw-s-3); background: var(--stw-gold-soft); border-radius: var(--stw-r-md); font-size: 15px; line-height: 1.45; }
/* Warn-Pill „Für {Region} leider nicht verfügbar" (App metaNotOffered) — füllt web.js. */
.stw-regionwarn { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 12px; border-radius: var(--stw-r-pill); background: var(--stw-accent-soft); color: var(--stw-accent); font-size: 12.5px; font-weight: 600; }
.stw-regionwarn[hidden] { display: none; } /* display:inline-flex würde das UA-[hidden] sonst überstimmen */
.stw-facts { display: flex; flex-wrap: wrap; gap: var(--stw-s-2); margin-top: var(--stw-s-4); }
.stw-fact { flex: 1 1 120px; padding: 10px 12px; background: var(--stw-surface-2); border-radius: 10px; }
.stw-fact__lbl { display: block; font-size: 13px; font-weight: 600; color: var(--stw-text-muted); }
/* Mobil die Kurzform („Erw."), ab Desktop die lange („Erwachsene") — sonst brechen die Preisboxen um. */
.stw-fact__lbl-full { display: none; }
.stw-fact__lbl-short { display: inline; }
@media (min-width: 900px) { .stw-fact__lbl-full { display: inline; } .stw-fact__lbl-short { display: none; } }
.stw-fact__age { font-size: 11.5px; font-weight: 400; color: var(--stw-text-subtle); }
.stw-fact__val { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; }
/* Nicht angebotener Personentyp: Kachel bleibt sichtbar, „✕" gedämpft statt Preis. */
.stw-fact--na { opacity: 0.7; }
.stw-fact--na .stw-fact__val { color: var(--stw-text-subtle); }
/* Mobil (<900px): Preisboxen NEBENEINANDER halten statt umzubrechen (sonst rutscht z. B. Kleinkind in die
   nächste Zeile). flex:1 1 0 + min-width:0 → alle Personentyp-Boxen gleich breit, Inhalt bricht bei Bedarf
   INNERHALB der Box um (kein horizontaler Überlauf). Kurz-Labels (Erw./Kind/Kleink.) greifen hier ohnehin. */
@media (max-width: 899.98px) {
  .stw-facts { flex-wrap: nowrap; }
  .stw-fact { flex: 1 1 0; min-width: 0; padding: 10px 10px; }
}
.stw-sec { margin-top: var(--stw-s-5); }
.stw-sec__title { margin: 0 0 var(--stw-s-2); font-size: 19px; font-weight: 700; }
.stw-sec__body, .stw-acc__body { font-size: 16px; line-height: 1.55; color: var(--stw-text); }
.stw-sec__body p, .stw-acc__body p { margin: 0 0 0.7em; }
.stw-acc { margin-top: var(--stw-s-3); border: 1px solid var(--stw-border); border-radius: var(--stw-r-lg); overflow: hidden; }
.stw-acc__head { padding: 12px 14px; font-size: 16.5px; font-weight: 700; cursor: pointer; list-style: none; position: relative; }
.stw-acc__head::-webkit-details-marker { display: none; }
.stw-acc__head::after { content: '+'; position: absolute; right: 14px; color: var(--stw-text-subtle); font-weight: 600; }
.stw-acc[open] .stw-acc__head::after { content: '–'; }
.stw-acc__body { padding: 0 14px 12px; }

/* ---------- Buy-Box (Detail-Mobil: schwebender „Ausflug buchen"-Button → Sheet. Desktop ≥900px: aus — dort die Inline-Sidebar) ---------- */
.stw-buybox { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--stw-page-x); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--stw-paper); border-top: 1px solid var(--stw-border); box-shadow: 0 -4px 16px rgba(28, 28, 25, 0.06); box-sizing: border-box; }
.stw-page--detail { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } /* Platz, damit die fixe Leiste den letzten Inhalt nicht verdeckt (Mobil) */
@media (min-width: 900px) { .stw-buybox { display: none; } .stw-page--detail { padding-bottom: 0; } }

/* ---------- Buttons / Felder (ui-*) ---------- */
.stw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--stw-r-md); border: 1px solid transparent; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.12s ease; }
.stw-btn--primary { background: var(--stw-accent); color: var(--stw-accent-ink); }
.stw-btn--primary:hover { background: var(--stw-accent-strong); }
.stw-btn--primary:disabled { opacity: 0.55; cursor: default; }
.stw-btn--ghost { background: transparent; color: var(--stw-text-muted); border-color: var(--stw-border-strong); }
.stw-btn--ghost:hover { color: var(--stw-text); }
.stw-btn--soft { background: var(--stw-accent-soft); color: var(--stw-accent); }
.stw-btn--soft:hover { color: var(--stw-accent-strong); box-shadow: inset 0 0 0 1px var(--stw-accent); }
.stw-btn--block { width: 100%; }
.stw-field { display: block; margin-top: var(--stw-s-3); }
.stw-field__lbl { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--stw-text-muted); }
.stw-input, .stw-select { width: 100%; padding: 11px 12px; border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-md); background: var(--stw-surface); color: var(--stw-text); font-family: inherit; font-size: 16px; box-sizing: border-box; } /* >=16px: verhindert iOS-Safari-Auto-Zoom beim Fokussieren */
.stw-input:focus, .stw-select:focus { outline: 2px solid var(--stw-accent-soft); border-color: var(--stw-accent); }
.stw-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--stw-text-subtle); }

/* ---------- Inline-Validierung (klassisch: rotes Feld + roter Hinweistext, KEINE Toasts) ---------- */
.stw-input.is-invalid, .stw-select.is-invalid { border-color: var(--stw-danger); }
.stw-input.is-invalid:focus, .stw-select.is-invalid:focus { outline-color: var(--stw-danger-soft); border-color: var(--stw-danger); }
.stw-field__err { margin: 5px 0 0; font-size: 13px; font-weight: 600; color: var(--stw-danger); }

/* ---------- THEME-HÄRTUNG (Shortcode-Einbettung: das Theme-CSS bleibt aktiv!) ----------
   Auf den /ausfluege/-Routen entfernt die eigene Shell das Theme-CSS — Shortcodes stecken aber in
   normalen Theme-Seiten. Dort schlagen typische Theme-Selektoren (.entry-content h2/p/ul,
   input[type=text], .site-content label, .elementor-widget-container p …, Spezifität 0,1,1)
   unsere Einzelklassen (0,1,0). Diese Sektion re-deklariert die verwundbaren Regeln WERTGLEICH
   mit .stw-page-/.stw-overlay-Präfix (0,2,0+) — sie steht BEWUSST früh in der Datei, damit
   spätere eigene Overrides (z. B. .stw-twizard .stw-field__lbl) Gleichstände gewinnen.
   Beim Ändern einer Basis-Regel die Kopie hier mitziehen! (Rest-Risiko: Themes mit !important.) */
.stw-page.stw-page, .stw-overlay.stw-overlay { font-family: var(--stw-font); color: var(--stw-text); }
.stw-page.stw-page { font-size: 16px; line-height: 1.55; }
/* Formular-Steuerelemente und Text-Elemente erben die Widget-Schrift (nie die Theme-Schrift) —
   Themes setzen font-family gern DIREKT auf h1/h2/p (dagegen hilft keine vererbte Root-Schrift) */
.stw-page.stw-page :is(button, input, select, textarea), .stw-overlay.stw-overlay :is(button, input, select, textarea) { font-family: inherit; text-transform: none; letter-spacing: normal; }
.stw-page.stw-page :is(h1, h2, h3, h4, p, ul, ol, li, label, table, th, td, a), .stw-overlay.stw-overlay :is(h1, h2, h3, h4, p, ul, ol, li, label, table, th, td, a) { font-family: inherit; }
/* strong bleibt fett (vs. Themes, die .entry-content strong umdefinieren — live gesehener Bug) */
.stw-page.stw-page :is(strong, b), .stw-overlay.stw-overlay :is(strong, b) { font-weight: 700; color: inherit; }
/* Eingaben/Selects (vs. input[type=…]-Theme-Regeln) */
.stw-page .stw-input, .stw-overlay .stw-input, .stw-page .stw-select, .stw-overlay .stw-select { width: 100%; padding: 11px 12px; border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-md); background: var(--stw-surface); color: var(--stw-text); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.4; box-sizing: border-box; box-shadow: none; text-transform: none; letter-spacing: normal; }
.stw-page .stw-input:focus, .stw-overlay .stw-input:focus, .stw-page .stw-select:focus, .stw-overlay .stw-select:focus { outline: 2px solid var(--stw-accent-soft); border-color: var(--stw-accent); }
.stw-page .stw-input.is-invalid, .stw-overlay .stw-input.is-invalid, .stw-page .stw-select.is-invalid, .stw-overlay .stw-select.is-invalid { border-color: var(--stw-danger); }
.stw-page .stw-input.is-invalid:focus, .stw-overlay .stw-input.is-invalid:focus, .stw-page .stw-select.is-invalid:focus, .stw-overlay .stw-select.is-invalid:focus { outline-color: var(--stw-danger-soft); border-color: var(--stw-danger); }
/* Buttons (vs. .entry-content button / Theme-Button-Styles) — inkl. Zustände: die Basis-Zustands-
   Regeln stehen weiter OBEN und würden sonst den Gleichstand gegen diese späteren Kopien verlieren */
.stw-page .stw-btn, .stw-overlay .stw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--stw-r-md); border: 1px solid transparent; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.4; text-transform: none; letter-spacing: normal; text-decoration: none; box-shadow: none; cursor: pointer; transition: background 0.12s ease; }
.stw-page .stw-btn--primary, .stw-overlay .stw-btn--primary { background: var(--stw-accent); color: var(--stw-accent-ink); }
.stw-page .stw-btn--primary:hover, .stw-overlay .stw-btn--primary:hover { background: var(--stw-accent-strong); }
.stw-page .stw-btn--primary:disabled, .stw-overlay .stw-btn--primary:disabled { opacity: 0.55; cursor: default; }
.stw-page .stw-btn--ghost, .stw-overlay .stw-btn--ghost { background: transparent; color: var(--stw-text-muted); border-color: var(--stw-border-strong); }
.stw-page .stw-btn--ghost:hover, .stw-overlay .stw-btn--ghost:hover { color: var(--stw-text); }
.stw-page .stw-btn--soft, .stw-overlay .stw-btn--soft { background: var(--stw-accent-soft); color: var(--stw-accent); }
.stw-page .stw-btn--soft:hover, .stw-overlay .stw-btn--soft:hover { color: var(--stw-accent-strong); box-shadow: inset 0 0 0 1px var(--stw-accent); }
.stw-page .stw-step__btn, .stw-overlay .stw-step__btn { width: 34px; height: 34px; padding: 0; border-radius: var(--stw-r-pill); border: 1px solid var(--stw-border-strong); background: var(--stw-surface); font-size: 18px; font-weight: 700; color: var(--stw-text); box-shadow: none; cursor: pointer; }
.stw-page .stw-cal__nav, .stw-overlay .stw-cal__nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--stw-r-pill); background: var(--stw-surface-2); color: var(--stw-text); box-shadow: none; cursor: pointer; }
.stw-page .stw-cal__day, .stw-overlay .stw-cal__day { height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--stw-text-subtle); font-family: inherit; font-size: 14px; font-weight: 400; padding: 0; box-shadow: none; cursor: default; }
.stw-page .stw-cal__day.is-bookable, .stw-overlay .stw-cal__day.is-bookable { background: var(--stw-accent-soft); color: var(--stw-accent); font-weight: 700; cursor: pointer; }
.stw-page .stw-cal__day.is-selected, .stw-overlay .stw-cal__day.is-selected { background: var(--stw-accent); color: var(--stw-accent-ink); font-weight: 700; cursor: pointer; }
/* Text-Bausteine (vs. .entry-content p/label/li) — Margins UND Typo re-deklarieren */
.stw-page .stw-field, .stw-overlay .stw-field { display: block; margin: var(--stw-s-3) 0 0; color: inherit; font-weight: 400; text-transform: none; letter-spacing: normal; }
.stw-page .stw-field__lbl, .stw-overlay .stw-field__lbl { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--stw-text-muted); text-transform: none; letter-spacing: normal; }
.stw-page .stw-field__lbl-sub, .stw-overlay .stw-field__lbl-sub { font-weight: 400; color: var(--stw-text-subtle); }
.stw-page .stw-hint, .stw-overlay .stw-hint { margin: 6px 0 0; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--stw-text-subtle); }
.stw-page .stw-hint--warn, .stw-overlay .stw-hint--warn { margin: 8px 0 0; padding: 10px 12px; background: var(--stw-gold-soft); border-radius: var(--stw-r-md); color: var(--stw-gold-text); font-size: 13px; font-weight: 600; line-height: 1.45; }
.stw-page .stw-field__err, .stw-overlay .stw-field__err { margin: 5px 0 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--stw-danger); }
.stw-page .stw-formerr, .stw-overlay .stw-formerr { margin: var(--stw-s-3) 0 0; padding: var(--stw-s-3); background: var(--stw-danger-soft); border: 1px solid var(--stw-danger); border-radius: var(--stw-r-md); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--stw-danger); }
.stw-page .stw-consent, .stw-overlay .stw-consent { display: flex; align-items: flex-start; gap: 10px; margin: var(--stw-s-3) 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: inherit; text-transform: none; letter-spacing: normal; cursor: pointer; }
.stw-page .stw-step__lbl, .stw-overlay .stw-step__lbl { font-size: 15px; font-weight: 600; color: inherit; }
.stw-page .stw-step__sub, .stw-overlay .stw-step__sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--stw-text-subtle); }
.stw-page .stw-cal__month, .stw-overlay .stw-cal__month { font-size: 14.5px; font-weight: 700; color: inherit; }
/* Überschriften (vs. .entry-content h1/h2) */
.stw-overlay .stw-sheet__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.3; text-transform: none; color: inherit; }
/* Kopf wie App: kleine Overline über dem (konstanten) Ausflug-Namen. */
.stw-overlay .stw-sheet__over { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--stw-text-subtle); }
.stw-page .stw-detail__title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.25; text-transform: none; color: inherit; }
.stw-page .stw-sec__title { margin: 0 0 var(--stw-s-2); font-size: 19px; font-weight: 700; line-height: 1.3; text-transform: none; color: inherit; }
.stw-page .stw-card__title { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.35; color: inherit; }
/* Transfer-Wizard-Texte */
.stw-page .stw-tstep__title { margin: 0 0 var(--stw-s-1); font-size: 20px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.3; text-transform: none; color: inherit; }
.stw-page .stw-tstep__sub { margin: 0 0 var(--stw-s-2); font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--stw-text-muted); }
.stw-page .stw-tstep__lead { margin: var(--stw-s-4) 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: inherit; }
.stw-page .stw-notice { margin: var(--stw-s-3) 0 0; padding: var(--stw-s-4); background: #fff3cd; border: 1px solid #ffeaa7; border-radius: var(--stw-r-md); font-size: 14px; font-weight: 400; line-height: 1.55; color: #856404; }
.stw-page .stw-notice ul { margin: 0; padding-left: 18px; list-style: disc; }
.stw-page .stw-notice li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
/* Ausflug-Prosa-Listen (Detail-Beschreibung/Akkordeon, Rich-Text): Block-Themes (TT5) setzen ul/ol auf
   padding-left:0 → Aufzählungspunkte rutschen an den Rand. Einrückung + Abstände wertgleich zur Prosa
   erzwingen (0,2,1 schlägt auch klassisches .entry-content ul/li). Detail-Bild gegen Theme-Deko sichern. */
.stw-page .stw-sec__body ul, .stw-page .stw-sec__body ol, .stw-page .stw-acc__body ul, .stw-page .stw-acc__body ol { margin: 0 0 0.7em; padding-left: 20px; }
.stw-page .stw-sec__body li, .stw-page .stw-acc__body li { margin: 0 0 0.25em; padding: 0; font-size: inherit; line-height: 1.55; }
.stw-page .stw-detail__media img { border: 0; box-shadow: none; } /* Theme-Härtung: gilt für ALLE Bilder inkl. Karussell-Slides */
.stw-page .stw-detail__media > img { border-radius: var(--stw-r-xl); } /* Radius nur aufs Einzelbild (Karussell rundet der Container) */
.stw-page .stw-tchoice__title { font-size: 16px; font-weight: 700; letter-spacing: -0.1px; white-space: pre-line; color: inherit; }
.stw-page .stw-tsum__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: inherit; }
.stw-page .stw-premium__toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: var(--stw-s-2); padding: 12px 18px; border-radius: var(--stw-r-md); border: 1.5px solid var(--stw-gold-full); background: transparent; color: var(--stw-gold-full); font-family: inherit; font-size: 14.5px; font-weight: 700; box-shadow: none; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.stw-page .stw-premium__toggle.is-active { background: var(--stw-gold-full); color: #fff; }
.stw-page .stw-tlink { display: block; width: 100%; margin-top: 10px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--stw-text-muted); font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; text-align: center; }
/* Weitere Text-Elemente (p/h1/h2/label) mit 0,1,0-Basisregeln */
.stw-page .stw-hero__over { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--stw-gold-text); }
.stw-page .stw-hero__title { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.2; text-transform: none; color: inherit; }
.stw-page .stw-hero__sub { margin: var(--stw-s-2) 0 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--stw-text-muted); max-width: 640px; }
.stw-page .stw-empty, .stw-overlay .stw-empty { margin: 0; padding: var(--stw-s-6) 0; color: var(--stw-text-muted); font-size: 15px; font-weight: 400; }
.stw-page .stw-error, .stw-overlay .stw-error { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--stw-danger); }
.stw-page .stw-crumb { margin: 0 0 var(--stw-s-5); font-size: 14px; }
.stw-page .stw-crumb a { color: var(--stw-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.stw-page .stw-crumb a:hover { color: var(--stw-accent-strong); }
.stw-page .stw-detail__over { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--stw-text-subtle); }
.stw-page .stw-detail__mode { margin: var(--stw-s-1) 0 0; font-size: 15px; font-weight: 600; color: var(--stw-accent); }
.stw-page .stw-detail__note { margin: var(--stw-s-3) 0 0; padding: var(--stw-s-3); background: var(--stw-gold-soft); border-radius: var(--stw-r-md); font-size: 15px; font-weight: 400; line-height: 1.45; }
.stw-page .stw-regionwarn, .stw-overlay .stw-regionwarn { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 12px; border-radius: var(--stw-r-pill); background: var(--stw-accent-soft); color: var(--stw-accent); font-size: 12.5px; font-weight: 600; }
.stw-page .stw-regionwarn[hidden], .stw-overlay .stw-regionwarn[hidden] { display: none; }
.stw-page .stw-cogroup__title, .stw-overlay .stw-cogroup__title { margin: 0 0 var(--stw-s-2); font-size: 14px; font-weight: 700; color: inherit; }
.stw-page .stw-premium__lead { margin: var(--stw-s-2) 0 6px; font-size: 15px; font-weight: 700; color: inherit; }
.stw-page .stw-premium__price { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--stw-gold-text); }
/* Preistabelle (vs. .entry-content table/th/td: Streifen, Rahmen, Paddings) */
.stw-page .stw-pricetable { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 13.5px; background: transparent; }
.stw-page .stw-pricetable th, .stw-page .stw-pricetable td { padding: 8px 10px; border: 0; border-bottom: 1px solid var(--stw-border); text-align: right; background: transparent; font-size: inherit; }
.stw-page .stw-pricetable th:first-child, .stw-page .stw-pricetable td:first-child { text-align: left; }
.stw-page .stw-pricetable th:not(:first-child), .stw-page .stw-pricetable td:not(:first-child) { white-space: nowrap; }
.stw-page .stw-pricetable thead th { background: var(--stw-hero-bar); color: #fff; font-size: 12.5px; font-weight: 700; border-bottom: 0; }
.stw-page .stw-pricetable td { color: var(--stw-text-muted); }
.stw-page .stw-pricetable td:first-child { font-weight: 600; color: var(--stw-text); }
.stw-page .stw-pricetable tbody tr { background: transparent; }
.stw-page .stw-pricetable tbody tr:last-child td { border-bottom: 0; }
/* Weitere Buttons (vs. .entry-content button): wertgleiche Kopien der Basis-Regeln */
.stw-page .stw-tchoice { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--stw-s-2); padding: var(--stw-s-5) var(--stw-s-3); min-height: 132px; border: 1px solid var(--stw-border); border-radius: var(--stw-r-lg); background: var(--stw-surface); font-family: inherit; font-size: 16px; letter-spacing: normal; text-transform: none; box-shadow: none; color: var(--stw-text); cursor: pointer; text-align: center; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.stw-page .stw-chip { padding: 8px 16px; border-radius: var(--stw-r-pill); border: 1px solid var(--stw-border-strong); background: var(--stw-surface); color: var(--stw-text-muted); font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: normal; text-transform: none; box-shadow: none; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.stw-page .stw-chip:hover { color: var(--stw-text); }
.stw-page .stw-chip.is-active { background: var(--stw-accent); border-color: var(--stw-accent); color: var(--stw-accent-ink); }
/* Zwei-Zeilen-Chip (Saison-Umschalter der Preistabelle): Name + kleine Gültigkeit darunter.
   Nur Chips mit --2line betroffen; Untertitel erbt currentColor (aktiv=weiß / inaktiv=grau) via opacity. */
.stw-chip.stw-chip--2line { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding-top: 6px; padding-bottom: 6px; line-height: 1.2; text-align: left; }
.stw-chip__sub { font-size: 11px; font-weight: 500; opacity: 0.7; }
.stw-page .stw-dial, .stw-overlay .stw-dial { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 11px 12px; border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-md); background: var(--stw-surface); color: var(--stw-text); font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: normal; text-transform: none; box-shadow: none; cursor: pointer; }
.stw-page .stw-dial__opt, .stw-overlay .stw-dial__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--stw-r-sm); background: transparent; font-family: inherit; font-size: 14px; letter-spacing: normal; text-transform: none; box-shadow: none; color: var(--stw-text); cursor: pointer; text-align: left; }
.stw-overlay .stw-sheet__close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--stw-r-pill); background: var(--stw-surface-2); color: var(--stw-text-muted); box-shadow: none; cursor: pointer; }
.stw-page .stw-sperr-del { flex: 0 0 auto; width: 40px; height: 44px; padding: 0; border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-md); background: var(--stw-surface); color: var(--stw-danger); font-size: 16px; box-shadow: none; cursor: pointer; }
/* Karten-Links (vs. .entry-content a {underline/Farbe}) */
.stw-page .stw-card, .stw-page .stw-card:hover { text-decoration: none; color: inherit; }
.stw-consent.is-invalid, .stw-consent.is-invalid a { color: var(--stw-danger); }
.stw-formerr { margin: var(--stw-s-3) 0 0; padding: var(--stw-s-3); background: var(--stw-danger-soft); border: 1px solid var(--stw-danger); border-radius: var(--stw-r-md); font-size: 14px; font-weight: 600; color: var(--stw-danger); }

/* ---------- Telefon mit Länder-Vorwahl (Port App PhoneField) ---------- */
.stw-phone { position: relative; display: flex; gap: 8px; }
.stw-phone .stw-input { flex: 1; min-width: 0; }
.stw-dial { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 11px 12px; border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-md); background: var(--stw-surface); color: var(--stw-text); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.stw-dial:hover { border-color: var(--stw-accent); }
.stw-dial__flag { font-size: 17px; line-height: 1; }
.stw-dial__panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: var(--stw-surface); border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); padding: 8px; }
.stw-dial__search { margin-bottom: 6px; }
.stw-dial__list { max-height: 240px; overflow-y: auto; }
.stw-dial__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--stw-r-sm); background: transparent; font-family: inherit; font-size: 14px; color: var(--stw-text); cursor: pointer; text-align: left; }
.stw-dial__opt:hover { background: var(--stw-surface-2); }
.stw-dial__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stw-dial__code { color: var(--stw-text-muted); flex: 0 0 auto; }
.stw-dial__check { color: var(--stw-accent); font-weight: 700; flex: 0 0 auto; }

/* ---------- Custom-Kalender (Port App BookingCalendar: Mo–So, buchbare Tage hervorgehoben) ----------
   Kompakte Picker-Breite (max 340px) + FESTE Zellhöhe statt aspect-ratio — sonst wachsen die
   Tageszellen auf breiten Containern zu riesigen Quadraten (der Container ist im Web beliebig
   breit, anders als das Phone-Sheet der App). */
.stw-cal { margin: 6px auto 0; max-width: 340px; } /* Basis: mittig + begrenzt (Buchung-ändern-Modal) */
/* Transfer-Wizard: Breitenlimit aufgehoben → Kalender füllt seinen Container (mobil/Tablet volle Breite,
   Desktop = die linke Spalte des Zweispalters, die ihn ohnehin begrenzt). */
.stw-cal[data-t-cal] { max-width: none; margin-left: 0; margin-right: 0; }
/* Ausflug-Buchungs-Sheet: linksbündig statt mittig — Breitenlimit (340px aus der Basis) bleibt. */
.stw-cal[data-b="cal"] { margin-left: 0; margin-right: 0; max-width: none; } /* Buchung: Kalender volle Breite (wie App) */
.stw-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.stw-cal__nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--stw-r-pill); background: var(--stw-surface-2); color: var(--stw-text); cursor: pointer; }
.stw-cal__nav:disabled { opacity: 0.4; cursor: default; }
.stw-cal__month { font-size: 14.5px; font-weight: 700; }
.stw-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.stw-cal__wd { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--stw-text-subtle); padding: 3px 0; }
.stw-cal__cell { height: 38px; }
.stw-cal__day { position: relative; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--stw-text-subtle); font-family: inherit; font-size: 14px; font-weight: 400; padding: 0; cursor: default; }
.stw-cal__day.is-bookable { background: var(--stw-accent-soft); color: var(--stw-accent); font-weight: 700; cursor: pointer; }
.stw-cal__day.is-bookable:hover { border-color: var(--stw-accent); }
.stw-cal__day.is-selected { background: var(--stw-accent); color: var(--stw-accent-ink); font-weight: 700; cursor: pointer; }
/* „Heute"-Unterstrich (wie App todayBar): kurzer Balken unter der Zahl; Farbe = Tagesfarbe (currentColor:
   accent wenn buchbar, accent-ink wenn gewählt, sonst gedämpft) — greift in beiden Kalendern (calHtml). */
.stw-cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 14px; height: 2.5px; border-radius: 2px; background: currentColor; }
.stw-hint--warn { margin: 8px 0 0; padding: 10px 12px; background: var(--stw-gold-soft); border-radius: var(--stw-r-md); color: var(--stw-gold-text); font-size: 13px; font-weight: 600; line-height: 1.45; }
.stw-error { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--stw-danger); }

/* ---------- Stepper ---------- */
.stw-step { display: flex; align-items: center; justify-content: space-between; gap: var(--stw-s-3); padding: 10px 0; }
.stw-step__lbl { font-size: 15px; font-weight: 600; }
.stw-step__sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--stw-text-subtle); }
.stw-step__ctl { display: flex; align-items: center; gap: var(--stw-s-3); }
.stw-step__btn { width: 34px; height: 34px; border-radius: var(--stw-r-pill); border: 1px solid var(--stw-border-strong); background: var(--stw-surface); font-size: 18px; font-weight: 700; color: var(--stw-text); cursor: pointer; }
.stw-step__btn:disabled { opacity: 0.35; cursor: default; }
.stw-step__val { min-width: 22px; text-align: center; font-size: 16px; font-weight: 700; }
/* Nicht angebotener Personentyp: Zeile sichtbar, aber statt Zähler ein gedämpfter Hinweis. */
.stw-step--na { opacity: 0.75; }
.stw-step__na { font-size: 13px; font-weight: 600; color: var(--stw-text-subtle); white-space: nowrap; }

/* ---------- Overlay: Modal (Desktop) / Bottom-Sheet (Mobile) ---------- */
.stw-overlay { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); padding: var(--stw-s-4); box-sizing: border-box; }
.stw-overlay[hidden] { display: none; }
.stw-sheet { width: 100%; max-width: 520px; max-height: min(86vh, 780px); display: flex; flex-direction: column; background: var(--stw-surface); border-radius: var(--stw-r-xl); overflow: hidden; }
.stw-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--stw-s-3); padding: var(--stw-s-4) var(--stw-s-4) var(--stw-s-2); }
.stw-sheet__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.stw-sheet__close { width: 30px; height: 30px; border: 0; border-radius: var(--stw-r-pill); background: var(--stw-surface-2); color: var(--stw-text-muted); font-size: 16px; cursor: pointer; }
.stw-sheet__body { flex: 1; overflow-y: auto; padding: 0 var(--stw-s-4) var(--stw-s-4); }
.stw-sheet__foot { padding: var(--stw-s-3) var(--stw-s-4); padding-bottom: calc(var(--stw-s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--stw-border); background: var(--stw-surface); }
@media (max-width: 640px) {
	.stw-overlay { align-items: flex-end; padding: 0; }
	.stw-sheet { max-width: none; border-radius: var(--stw-r-xl) var(--stw-r-xl) 0 0; max-height: 92vh; }
}

/* Rückfrage-Sheet (variant: 'ask') — dieselbe Hülle wie beim Buchen, aber auf EINEN Satz
   zugeschnitten. Mit der Formular-Polsterung stand um die Frage herum mehr Weißraum als
   Text: Der Titel ist auf ein Formular ausgelegt, der Fuß trennt Eingabefelder von der
   Aktion, und die Breite hält eine ganze Buchungsstrecke. Für eine Ja/Nein-Frage ist das
   ein halbleerer Raum. */
.stw-overlay--ask .stw-sheet { max-width: 400px; }
.stw-overlay--ask .stw-sheet__title { font-size: 18px; }
.stw-overlay--ask .stw-sheet__body { padding-bottom: var(--stw-s-4); }
/* Trennlinie raus: Sie gliedert ein Formular sinnvoll, über zwei Knöpfen wirkt sie wie eine Naht. */
.stw-overlay--ask .stw-sheet__foot { border-top: 0; padding-top: 0; }
/* Das X oben rechts entfällt — es gibt einen ausgeschriebenen Rückweg. Escape und der Klick
   daneben bleiben als Ausgang erhalten. */
.stw-overlay--ask .stw-sheet__close { display: none; }
.stw-askmsg { margin: 0; font-size: 15px; line-height: 1.55; color: var(--stw-text); }
/* Die beiden Wege UNTEREINANDER, nicht nebeneinander: Auf dem Handy sitzt das Blatt am
   unteren Rand — dort wären zwei halbbreite Knöpfe die schmalsten Ziele genau da, wo der
   Daumen am ungenauesten ist. */
.stw-askacts { display: flex; flex-direction: column; gap: 8px; }

/* Namens-Chips (Buchen): Autofill-Vorschläge unter jedem Namensfeld. */
.stw-namechips { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 8px; padding-right: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.stw-namechips::-webkit-scrollbar { display: none; }
.stw-namechips:empty { display: none; }
.stw-namechip { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--stw-border); background: var(--stw-surface-2); color: var(--stw-text); border-radius: var(--stw-r-pill); padding: 7px 14px; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; font-family: inherit; }
.stw-namechip:hover { border-color: var(--stw-accent); color: var(--stw-accent); background: var(--stw-accent-soft); }
/* Fuß-Zeile: kleiner Zurück-Button (Pfeil) neben dem Haupt-Button. */
.stw-foot-row { display: flex; gap: 8px; align-items: stretch; }
.stw-page .stw-foot-back, .stw-overlay .stw-foot-back { flex: 0 0 auto; aspect-ratio: 1; padding: 0; line-height: 1; }

/* Gesamt-Zeile (Ausflug-Buchen, Schritt 1) */
.stw-cart__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--stw-s-3); font-size: 15px; font-weight: 600; color: var(--stw-text-muted); }
.stw-cart__total [data-b="total"] { font-size: 22px; font-weight: 800; color: var(--stw-text); }

/* ---------- Buchen (Namen · Kontakt · Bestätigung) ---------- */
.stw-cogroup { margin-top: var(--stw-s-4); padding: var(--stw-s-3); border: 1px solid var(--stw-border); border-radius: var(--stw-r-lg); }
.stw-cogroup__title { margin: 0 0 var(--stw-s-2); font-size: 14px; font-weight: 700; }
.stw-corow { display: flex; justify-content: space-between; gap: var(--stw-s-3); padding: 8px 0; border-bottom: 1px solid var(--stw-border); font-size: 14px; }
.stw-corow:last-child { border-bottom: 0; }
.stw-corow__lbl { color: var(--stw-text-muted); }
/* „Ihre Buchung"-Zusammenfassung wie in der App: gefüllte surface2-Kärtchen statt umrandeter Gruppe/Zeilen. */
.stw-cosum { border: 0; padding: 0; }
.stw-cosum .stw-corow { background: var(--stw-surface-2); border: 0; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.stw-cosum .stw-corow:last-child { margin-bottom: 0; }
/* Zusammenfassungs-Zeile wie App-SummaryRow: gefülltes Kärtchen; inline „Label <b>Wert</b>" oder gestapelt. */
.stw-sum { background: var(--stw-surface-2); border-radius: 10px; padding: 13px 14px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.4; color: var(--stw-text); }
.stw-sum strong, .stw-sum__val { font-weight: 700; }
.stw-sum--stacked { display: flex; flex-direction: column; gap: 4px; }
/* Namen-Schritt: Kopf je Teilnehmer (Rolle links · Preis rechts), wie App nameHead. */
.stw-namehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.stw-namehead__role { font-size: 15px; font-weight: 600; }
.stw-namehead__price { font-size: 15px; font-weight: 700; }
.stw-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--stw-s-3); font-size: 13.5px; line-height: 1.45; cursor: pointer; }
/* Geboxte Buchungsdaten-Bestätigung (App confirmedThis): Kasten hebt sie von den Rechts-Consents ab. */
.stw-consent--boxed { background: var(--stw-surface-2); border-radius: var(--stw-r-md); padding: 12px 14px; }
.stw-consent input { margin-top: 2px; }
.stw-consent a { color: var(--stw-accent); }

/* ---------- Erfolg / Buchungen ---------- */
.stw-success { text-align: center; padding: var(--stw-s-5) 0; }
.stw-success__badge { width: 64px; height: 64px; margin: 0 auto var(--stw-s-3); border-radius: var(--stw-r-pill); background: var(--stw-accent); color: var(--stw-accent-ink); display: flex; align-items: center; justify-content: center; font-size: 30px; }
/* Kopier-Feld (App-Parität CopyField): Box mit Label + großem Wert + Copy-Icon; ganze Box klickt →
   kopiert (web.js). Der Button ist wie .stw-btn gescoped (.stw-page/.stw-overlay), damit Host-Theme-
   Button-Styles die Box nicht verunstalten (Theme-CSS ist auf diesen Seiten geladen). */
.stw-copygroup { max-width: 360px; margin: var(--stw-s-3) auto 0; text-align: left; }
.stw-copygroup--sep { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--stw-border); }
.stw-page .stw-copyfield, .stw-overlay .stw-copyfield { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 8px 0 0; padding: 12px 16px; border: 0; border-radius: var(--stw-r-md); background: var(--stw-surface-2); color: var(--stw-text); font-family: inherit; text-align: left; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; transition: box-shadow 0.12s ease; }
.stw-copygroup > .stw-copyfield:first-child { margin-top: 0; }
.stw-page .stw-copyfield:hover, .stw-overlay .stw-copyfield:hover { box-shadow: inset 0 0 0 1px var(--stw-border-strong); }
.stw-page .stw-copyfield:focus-visible, .stw-overlay .stw-copyfield:focus-visible { outline: 2px solid var(--stw-accent-soft); outline-offset: 2px; }
.stw-copyfield__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stw-copyfield__lbl { font-size: 12px; font-weight: 400; color: var(--stw-text-muted); }
.stw-copyfield__val { font-size: 18px; font-weight: 800; letter-spacing: 0.5px; color: var(--stw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stw-copyfield__icon { flex: 0 0 auto; display: flex; color: var(--stw-text-muted); transition: color 0.12s ease; }
.stw-copyfield.is-copied { box-shadow: inset 0 0 0 1px var(--stw-accent); }
.stw-copyfield.is-copied .stw-copyfield__icon { color: var(--stw-accent); }
.stw-copyhint { margin: 12px auto 0; max-width: 360px; }
.stw-bk { padding: var(--stw-s-3); border: 1px solid var(--stw-border); border-radius: var(--stw-r-lg); margin-top: var(--stw-s-3); }
.stw-bk__code { font-size: 13px; font-weight: 700; color: var(--stw-text-muted); }
.stw-bk__item { display: flex; justify-content: space-between; align-items: center; gap: var(--stw-s-3); padding: 8px 0; }
.stw-bk__title { font-size: 14.5px; font-weight: 700; }
.stw-bk__meta { font-size: 12.5px; color: var(--stw-text-muted); }
.stw-badge { display: inline-block; padding: 3px 10px; border-radius: var(--stw-r-pill); font-size: 12px; font-weight: 700; background: var(--stw-surface-2); color: var(--stw-text-muted); }
.stw-badge--ok { background: var(--stw-ok-soft); color: var(--stw-ok); }
.stw-badge--danger { background: var(--stw-danger-soft); color: var(--stw-danger); }


/* ---------- Transfer-Buchung (8-Schritte-Wizard, [st_transfer_buchung]) ----------
   Lesbarkeit an die Referenz angehoben (Labels 15px dunkel, Body/Hints 14px) — Designsprache
   bleibt die der Ausflüge/App (Farben, Lucide-Icon-Badges, Karten-Hover). Anhebungen der
   Shared-Klassen (Label/Hint/Stepper/Consent) sind auf .stw-twizard GESCOPET, damit die
   freigegebenen Ausflug-Screens (kompaktere Sheet-Optik) unverändert bleiben. */
.stw-transfer { max-width: 650px; margin-left: auto; margin-right: auto; scroll-margin-top: 15vh; }
.stw-twizard { background: var(--stw-surface); border: 1px solid var(--stw-border); border-radius: var(--stw-r-lg); padding: var(--stw-s-5); }
/* Ab 720px: Transfer-Schritt 2 zeigt Datum + Flugdaten NEBENEINANDER, mit EINEM Zurück/Weiter unter
   beiden Spalten (.stw-tnav steht als Geschwister nach .stw-tsplit → volle Breite darunter). Darunter
   bleiben es zwei getrennte Schritte. Die Box ist 650px breit (keine Desktop-Verbreiterung); die
   Kalenderspalte ist mit 300px FIX (statt 360), zusätzliche Boxbreite geht via 1fr an die Flugspalte
   (~278px). Die 650px-Box ist ab ~682px Fensterbreite voll da; der Breakpoint (720px) liegt darüber,
   die Spalten stehen also stets in der vollen 650px-Box. */
@media (min-width: 720px) {
	.stw-tsplit { display: grid; grid-template-columns: 300px 1fr; gap: var(--stw-s-5); align-items: start; margin-top: var(--stw-s-2); }
	.stw-tsplit__col { min-width: 0; } /* verhindert Grid-Overflow bei langen Feldinhalten */
	.stw-tsplit .stw-tcenter { text-align: left; } /* Datumslabel/-hinweis/-fehler linksbündig zur Spalte */
}
.stw-tstep__title { margin: 0 0 var(--stw-s-1); font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
.stw-tstep__sub { margin: 0 0 var(--stw-s-2); font-size: 14px; line-height: 1.5; color: var(--stw-text-muted); }
.stw-tstep__lead { margin: var(--stw-s-4) 0 0; font-size: 15px; font-weight: 700; }
.stw-tcenter { text-align: center; } /* Intro-Block (Schritt 1) + Preistabellen-Fußnote mittig */
.stw-lucide { display: block; flex: 0 0 auto; }
/* Theme-fest: manche Themes setzen <strong> auf normal → im Wizard immer fett erzwingen */
.stw-twizard strong { font-weight: 700; }
/* App-Angleichung: Formular-Komponenten im Wizard auf die App-Specs (theme/tokens.ts + ui/*) bringen,
   damit sich Web + App „aus einem Guss" anfühlen — Label 12/600 muted, Button 54px/16px, Input 48px +
   leichterer Rahmen (border statt border-strong). Streng auf .stw-twizard gescopet → Ausflug-Screens
   bleiben unberührt. */
.stw-twizard .stw-field__lbl { font-size: 12px; }
.stw-twizard .stw-hint { font-size: 13px; color: var(--stw-text-muted); }
.stw-twizard .stw-btn { min-height: 54px; font-size: 16px; }
.stw-twizard .stw-input, .stw-twizard .stw-select { min-height: 48px; border-color: var(--stw-border); }

/* --- Web-Politur (Feedback „zu clunky/schwarz-weiß, wenig einladende UI-Elemente außer dem Kalender"):
   die flache 1:1-App-Übertragung bekommt Tiefe, Wärme und mehr Akzentfarbe. Der Kalender wirkt lebendig,
   weil er rund + getönt + farbig ist — diese Qualität wird auf Felder/Stepper/Karten übertragen. Nur
   .stw-twizard (Ausflüge unberührt). --- */
.stw-transfer .stw-twizard { border-radius: 18px; box-shadow: 0 14px 44px -18px rgba(20, 86, 79, 0.20), 0 2px 6px rgba(28, 28, 25, 0.04); }
/* Eingabefelder: weißer Hintergrund + grauer Rand (optisch wie die Kindersitz-Kachel, aber eigenständig
   gestylt — keine geteilte Klasse). Fokus (nächste Zeile) bleibt UNVERÄNDERT = weiß + Akzentrahmen + Ring. */
.stw-twizard .stw-input, .stw-twizard .stw-select { border-radius: 10px; background: var(--stw-surface); border-color: var(--stw-border-strong); transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; }
.stw-twizard .stw-input:focus, .stw-twizard .stw-select:focus { background-color: var(--stw-surface); outline: none; border-color: var(--stw-accent); box-shadow: 0 0 0 3px var(--stw-accent-soft); } /* background-COLOR (nicht Kurzform): sonst löscht der Fokus den eigenen Select-Pfeil (background-image) */
/* Telefon-Vorwahl an die übrigen Wizard-Felder angleichen (Radius/Höhe/Fläche + weiß/grauer Rand). */
.stw-twizard .stw-dial { min-height: 48px; border-radius: 10px; background: var(--stw-surface); border-color: var(--stw-border-strong); }
/* Vorwahl-Dropdown im Wizard ans 10px-Feldsystem angleichen (Basis .stw-dial__panel/__opt = 6px/4px
   bleibt für den Ausflug-Checkout mit 6px-Feldern korrekt, daher hier twizard-scoped). */
.stw-twizard .stw-dial__panel { border-radius: 10px; }
.stw-twizard .stw-dial__opt { border-radius: 8px; }
/* Flugnummer-Feld hat text-transform:uppercase (getippter Wert = XQ123) — der Platzhalter soll aber
   klein bleiben („z. B. XQ123", nicht „Z. B. XQ123"). */
.stw-twizard [data-t="flightNumber"]::placeholder { text-transform: none; }
/* ±-Stepper wie die Kalender-Navigation: rund, Akzent-getönt, Hover füllt */
.stw-twizard .stw-step__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 40px; height: 40px; background: var(--stw-accent-soft); border-color: transparent; color: var(--stw-accent); transition: background 0.12s ease, color 0.12s ease; }
.stw-twizard .stw-step__btn:hover:not(:disabled) { background: var(--stw-accent); color: #fff; }
.stw-twizard .stw-step__btn svg { width: 20px; height: 20px; } /* Lucide plus/minus, farbig via currentColor */
.stw-twizard .stw-btn { border-radius: 10px; }
/* Zusammenfassungs-Karte: mehr Luft, weicher, Preis prominent in Akzentfarbe */
.stw-twizard .stw-tsum { border-radius: 14px; padding: var(--stw-s-4) var(--stw-s-5); }
.stw-twizard .stw-tsum__price span:last-child { color: var(--stw-accent); font-size: 20px; }
.stw-twizard .stw-checktile { border-radius: 10px; }
/* Abschnitts-Überschriften mit kleinem Akzent-Icon davor (weniger Text-Wand, „lebendiger") */
.stw-twizard .stw-tstep__title--icon, .stw-detail__booking .stw-tstep__title--icon { display: flex; align-items: center; gap: 10px; }
.stw-twizard .stw-secicon, .stw-detail__booking .stw-secicon { flex: 0 0 auto; color: var(--stw-accent); }
/* Kontext-Badge (Richtung/Strecke) oben auf jedem Schritt — kleines teal Pill. */
.stw-twizard .stw-legbadge { display: inline-flex; align-items: center; margin-bottom: var(--stw-s-3); padding: 5px 12px; border-radius: var(--stw-r-pill); background: var(--stw-accent-soft); color: var(--stw-accent); font-size: 12.5px; font-weight: 700; }
/* Übersicht: Bento-Kacheln (wie App) — kleine Kacheln, teils voll, teils 2-spaltig. */
.stw-twizard .stw-bento { display: flex; flex-direction: column; gap: 8px; margin-top: var(--stw-s-3); }
.stw-twizard .stw-bento__row { display: flex; gap: 8px; }
.stw-twizard .stw-bento__tile { background: var(--stw-surface-2); border-radius: 10px; padding: 11px 14px; }
.stw-twizard .stw-bento__row .stw-bento__tile { flex: 1; min-width: 0; }
.stw-twizard .stw-bento__lbl { display: block; font-size: 12px; font-weight: 600; color: var(--stw-text-muted); }
.stw-twizard .stw-bento__val { display: block; font-size: 15px; font-weight: 700; margin-top: 3px; line-height: 1.35; color: var(--stw-text); overflow-wrap: anywhere; }
/* Flugnummer fett im Zeit-Label („Landung (XQ123)"). */
.stw-twizard .stw-bento__lblnr { font-weight: 700; color: var(--stw-text); }
/* Hotel-Kachel: Hotel/Region links, Gepäck (Koffer + Anzahl) rechtsbündig. */
.stw-twizard .stw-bento__tile--hotel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stw-twizard .stw-bento__hotelmain { min-width: 0; }
.stw-twizard .stw-bento__lug { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; color: var(--stw-text-muted); }
.stw-twizard .stw-bento__lug svg { width: 18px; height: 18px; }
.stw-twizard .stw-bento__lug span { font-size: 15px; font-weight: 700; }
/* Übersicht: Preisbox (wie App) — Aufschlüsselung + Gesamt in Akzentfarbe. */
.stw-twizard .stw-pricebox { background: var(--stw-surface-2); border-radius: 12px; padding: 16px; margin-top: var(--stw-s-4); }
.stw-twizard .stw-pricebox__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 3px 0; }
.stw-twizard .stw-pricebox__row > span:first-child { color: var(--stw-text-muted); }
.stw-twizard .stw-pricebox__row > span:last-child { color: var(--stw-text); font-weight: 600; }
.stw-twizard .stw-pricebox__div { border-top: 1px solid var(--stw-border); margin: 8px 0; }
.stw-twizard .stw-pricebox__total { font-size: 16px; }
.stw-twizard .stw-pricebox__total > span:first-child { color: var(--stw-text); font-weight: 800; }
.stw-twizard .stw-pricebox__total > span:last-child { color: var(--stw-accent); font-weight: 800; font-size: 19px; }
.stw-twizard .stw-pricebox__note { font-size: 12.5px; color: var(--stw-text-subtle); margin: 8px 0 0; }
/* Premium-Upsell wie in der App: Badge = reiner Gold-Text (kein Pill), Benefits mit goldenem Häkchen
   (kein Bullet), große Preiszeile in Textfarbe + „pro Fahrt" muted, Pill-Toggle mit 2px-Rand. */
.stw-twizard .stw-premium__badge { padding: 0; background: none; border-radius: 0; color: var(--stw-gold-full); font-size: 12px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; }
.stw-twizard .stw-premium__lead { margin: 6px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--stw-text); }
.stw-twizard .stw-premium__benefits { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.stw-twizard .stw-premium__benefits li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--stw-text); }
.stw-twizard .stw-premium__benefits li svg { flex: 0 0 auto; color: var(--stw-gold-full); }
.stw-twizard .stw-premium__price { margin: 16px 0 0; font-size: 22px; font-weight: 800; color: var(--stw-text); }
.stw-twizard .stw-premium__per { font-size: 14px; font-weight: 500; color: var(--stw-text-muted); }
.stw-twizard .stw-premium__toggle { margin-top: 16px; border-width: 2px; border-radius: var(--stw-r-pill); }

/* --- Startscreen (Schritt 1) neu: Intro-Hero · Auswahl als horizontale Option-Cards (Icon-Badge +
   Beschreibung + Chevron) · Info-Card statt gelber Text-Wand · weiche Preistabelle. --- */
.stw-twizard .stw-tintro { text-align: center; padding: var(--stw-s-2) 0; }
.stw-twizard .stw-tintro__badge { display: inline-block; width: 60px; height: 60px; background: url('../images/emblem.png') center / contain no-repeat; margin-bottom: var(--stw-s-3); } /* Schwarzwald-Toni-Herz-Emblem (wie Splash-Mitte) statt Auto-Icon */
.stw-twizard .stw-tintro__title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 6px; }
.stw-twizard .stw-tintro__sub { font-size: 14px; line-height: 1.5; color: var(--stw-text-muted); margin: 0 auto; max-width: 440px; }
.stw-twizard .stw-tchoices__lead { text-align: center; font-size: 15px; font-weight: 700; margin: var(--stw-s-5) 0 var(--stw-s-3); }
.stw-twizard .stw-tchoices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 0; }
/* Die Sonderfahrt gehoert nicht zum Flughafen — das zeigt ihr Symbol: helles Teal mit dunklem
   Zeichen statt der gefuellten Akzentfarbe. Gleiche Farbfamilie, andere Gewichtung (grau wirkte
   wie „deaktiviert"). --stw-accent-soft wird ausserhalb des Wizards genau dafuer schon genutzt.
   Kein zusaetzlicher Abstand, kein Zusatztext; die Kachel reiht sich normal ein. Auch angewaehlt
   bleibt das Symbol hell, sonst waere die Unterscheidung genau dann weg, wenn sie zaehlt. */
.stw-twizard .stw-tchoice[data-type="sonderfahrt"] .stw-tchoice__icon,
.stw-twizard .stw-tchoice[data-type="sonderfahrt"].is-active .stw-tchoice__icon { background: var(--stw-accent-soft); color: var(--stw-accent); }
/* box-sizing MUSS hier stehen: Der Companion setzt es pro Element, es gibt keine globale Regel.
   Ohne sie rechnet der Browser bei einem <button> Padding (2x16px) und Rahmen (2x1px) ZUSAETZLICH
   zur Spaltenbreite — die Kachel ragte 34px ueber den Wizard-Rahmen hinaus.
   min-width: 0 dazu, damit ein langer Text die Grid-Spalte nicht doch aufdrueckt (1fr hat
   min-width: auto). */
.stw-twizard .stw-tchoice { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; text-align: left; min-height: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--stw-border); background: var(--stw-surface); box-sizing: border-box; min-width: 0; max-width: 100%; }
.stw-twizard .stw-tchoice:hover { border-color: var(--stw-accent); background: var(--stw-accent-soft); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(20, 86, 79, 0.28); }
.stw-twizard .stw-tchoice.is-active { border-color: var(--stw-accent); background: var(--stw-accent-soft); box-shadow: inset 0 0 0 1px var(--stw-accent); }
.stw-twizard .stw-tchoice__icon { width: 46px; height: 46px; flex: 0 0 auto; background: var(--stw-accent); color: var(--stw-accent-ink); }
.stw-twizard .stw-tchoice__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.stw-twizard .stw-tchoice__title { font-size: 16px; font-weight: 700; white-space: normal; }
.stw-twizard .stw-tchoice__sub { font-size: 13px; font-weight: 400; color: var(--stw-text-muted); }
.stw-twizard .stw-tchoice__chev { flex: 0 0 auto; display: inline-flex; color: var(--stw-text-subtle); }
.stw-twizard .stw-tchoice__chev svg { width: 20px; height: 20px; }
.stw-twizard .stw-tchoice:hover .stw-tchoice__chev, .stw-twizard .stw-tchoice.is-active .stw-tchoice__chev { color: var(--stw-accent); }
/* Auf schmalem Schirm nimmt die 46er-Scheibe zu viel Raum: Sie steht neben einer 16px-Titelzeile
   (Verhaeltnis 2,9:1) und das 22px-Symbol fuellt nur 48% von ihr — der Kreis wirkt halb leer und
   dadurch zu gross. 40px bringt beides zusammen: 2,5:1 zur Zeile, 55% Fuellung, und das Symbol
   behaelt genug Rand. Ab 640px bleibt es bei 46 — dort traegt die breitere Kachel die groessere
   Scheibe. Nur die Scheibe schrumpft, nicht das Symbol: Es ist mit 22px die kleinste Groesse,
   bei der die duennen Lucide-Linien noch sauber stehen. */
@media (max-width: 640px) {
	.stw-twizard .stw-tchoice__icon { width: 40px; height: 40px; }
	.stw-twizard .stw-tchoice { padding: 12px 14px; }
	.stw-twizard .stw-tchoice__title { font-size: 15px; }
	/* Der Untertitel geht mit runter, obwohl nur der Titel gemeint war: Bliebe er bei 13px,
	   stuende er dem kleineren Titel fast gleich und die Rangfolge zwischen beiden waere dahin.
	   12 zu 15 haelt denselben Abstand wie 13 zu 16 auf dem Desktop. */
	.stw-twizard .stw-tchoice__sub { font-size: 12px; }
	/* Enger an die Subline. NUR ueber den gap — die Zeilenhoehe bleibt unangetastet: Sie ist
	   geerbt und mit Faktor 1,17 bereits sehr eng; ein eigener Wert (1,25) haette den Abstand
	   VERGROESSERT. Gemessene Luecke zwischen den Zeilen: 4,3 -> 3,3px. */
	.stw-twizard .stw-tchoice__body { gap: 1px; }
}
.stw-twizard .stw-infocard { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--stw-s-4); padding: 14px 16px; background: var(--stw-surface-2); border-radius: 12px; }
.stw-twizard .stw-infocard__icon { flex: 0 0 auto; color: var(--stw-accent); display: inline-flex; margin-top: 1px; }
.stw-twizard .stw-infocard__icon svg { width: 20px; height: 20px; }
.stw-twizard .stw-infocard__title { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.stw-twizard .stw-infocard__body ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.55; color: var(--stw-text-muted); }
.stw-twizard .stw-infocard__body li { margin: 0; }
.stw-twizard .stw-infocard__body p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--stw-text-muted); }
/* Infobox als Regel-Liste (Icon + Text je Zeile): zählt / zählt nicht / Sperriges. */
.stw-twizard .stw-infocard--rules { flex-direction: column; gap: 10px; }
.stw-twizard .stw-infocard--rules .stw-infocard__title { margin: 0; color: var(--stw-text); }
.stw-twizard .stw-infocard__rule { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--stw-text); } /* wie Consent-Box: 14px/1.5 + EXPLIZIT 400 (sonst erbt der Text das dünne body-Gewicht 300 des Host-Themes) */
.stw-twizard .stw-infocard__rule b { color: var(--stw-text); font-weight: 700; }
/* Hervorgehobene Zeile (derzeit die Verkehrslage am Flughafen): halbfett statt der 700 der
   Ueberschrift — auffaellig, ohne die Box zu einer Warnung zu machen. Muss das explizite 400
   der Grundregel ueberschreiben, das dort gegen das duenne Body-Gewicht des Themes steht. */
.stw-twizard .stw-infocard__rule--strong { font-weight: 600; }
.stw-twizard .stw-infocard__ico { flex: 0 0 auto; margin-top: 1px; display: inline-flex; }
.stw-twizard .stw-infocard__ico svg { width: 17px; height: 17px; }
.stw-twizard .stw-infocard__ico--ok, .stw-twizard .stw-infocard__ico--down { color: var(--stw-accent); }
.stw-twizard .stw-infocard__ico--gold { color: var(--stw-gold-full); } /* Premium: Flieger-Icon gold statt teal */
.stw-twizard .stw-infocard__ico--no { color: var(--stw-text-muted); }
.stw-twizard .stw-tressum { margin-top: 10px; } /* Confirm-Infobox: Abstand zum Untertitel bzw. zwischen Hin-/Rück-Box (statt infocard-Default) */
.stw-twizard .stw-hl { font-weight: 500; } /* Buchungswerte im Confirm-Fließtext hervorgehoben (Bindetext bleibt 400) */
/* Sondergepäck wie in der App: gerundete Kachel-Zeile (Typ-Text/Freitext + ±-Stepper + ✕) + gestrichelter Add-Button. */
.stw-twizard .stw-sperr-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 0 6px 0 14px; height: 52px; border: 1px solid var(--stw-border); border-radius: 10px; background: var(--stw-surface); }
.stw-twizard .stw-sperr-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--stw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stw-twizard input.stw-sperr-name--input { min-height: 0; height: auto; border: 0; border-radius: 0; background: none; padding: 0; }
.stw-twizard input.stw-sperr-name--input:focus { outline: none; box-shadow: none; border: 0; background: none; }
.stw-twizard .stw-sperr-qty { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.stw-twizard .stw-sperr-qbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--stw-border); border-radius: var(--stw-r-pill); background: var(--stw-surface); color: var(--stw-text); cursor: pointer; }
.stw-twizard .stw-sperr-qbtn svg { width: 15px; height: 15px; }
.stw-twizard .stw-sperr-qbtn:disabled { opacity: 0.4; cursor: default; }
.stw-twizard .stw-sperr-qn { min-width: 16px; text-align: center; font-size: 15px; font-weight: 700; color: var(--stw-text); }
.stw-twizard .stw-sperr-del { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--stw-text-muted); cursor: pointer; }
.stw-twizard .stw-sperr-del svg { width: 18px; height: 18px; }
.stw-twizard .stw-sperr-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; height: 48px; padding: 0; border: 1px dashed var(--stw-border-strong); border-radius: 10px; background: none; color: var(--stw-accent); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.stw-twizard .stw-sperr-add svg { width: 18px; height: 18px; }
/* Typ-Picker-Sheet: volle Zeilen mit Trennlinie; „Etwas anderes" in Akzentfarbe. */
/* Sondergepäck-Typ-Dropdown (wie Telefonvorwahl-Panel, ohne Suche): Panel unter dem Add-Button. */
.stw-twizard .stw-xtra { position: relative; }
.stw-twizard .stw-xtra__panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; padding: 6px; background: var(--stw-surface); border: 1px solid var(--stw-border-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); max-height: 300px; overflow-y: auto; }
.stw-twizard .stw-xtra__opt { display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px; background: none; color: var(--stw-text); font-family: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.stw-twizard .stw-xtra__opt:hover { background: var(--stw-surface-2); }
.stw-twizard .stw-xtra__opt--accent { color: var(--stw-accent); }
.stw-twizard .stw-pricetable-wrap { margin-top: var(--stw-s-4); border-radius: 12px; }
.stw-twizard .stw-pricetable thead th { background: var(--stw-accent); }
.stw-twizard .stw-pricetable tbody tr:nth-child(even) td { background: var(--stw-surface-2); }
/* Preisspalten schmaler halten (weniger Seiten-Padding) → alle Beträge passen auch auf schmalen Screens. */
.stw-twizard .stw-pricetable th:not(:first-child), .stw-twizard .stw-pricetable td:not(:first-child) { padding-left: 6px; padding-right: 6px; }
.stw-twizard .stw-pricetable td.stw-pricetable__p { font-weight: 700; } /* Preise nur gefettet; Farbe bleibt text-muted */
/* Warn-/Infoboxen (Großraum, „kein Preis" usw.) gelb wie die Referenz — NICHT Marken-Gold
   (das bleibt allein dem Premium-Upgrade vorbehalten). */
.stw-twizard .stw-hint--warn { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
.stw-twizard .stw-step__lbl { font-size: 16px; }
.stw-twizard .stw-step__sub { font-size: 13px; color: var(--stw-text-muted); }
/* Gepäck-Hinweis: direkt unterm Label, begrenzte Breite + Luft nach rechts zum Stepper */
.stw-twizard [data-stw-step="tlug"] .stw-step__sub { max-width: 500px; margin-top: 3px; line-height: 1.45; padding-right: 12px; }
.stw-twizard .stw-consent { font-size: 14px; line-height: 1.5; }
/* Micro-Labels in der Sondergepäck-Zeile bewusst klein halten (sonst wirken sie riesig) */
.stw-twizard .stw-sperr-row .stw-field__lbl { font-size: 12.5px; color: var(--stw-text-muted); }
/* Transferart-Kacheln (Schritt 1) — Icon im runden Akzent-Badge, Karten-Hover-Lift wie gcard */
.stw-tchoices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stw-s-2); margin-top: var(--stw-s-3); }
@media (min-width: 560px) { .stw-tchoices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stw-tchoice { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--stw-s-2); padding: var(--stw-s-5) var(--stw-s-3); min-height: 132px; border: 1px solid var(--stw-border); border-radius: var(--stw-r-lg); background: var(--stw-surface); font-family: inherit; color: var(--stw-text); cursor: pointer; text-align: center; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.stw-tchoice:hover { border-color: var(--stw-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.stw-tchoice.is-active { border-color: var(--stw-accent); background: var(--stw-accent-soft); }
.stw-tchoice__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--stw-r-pill); background: var(--stw-accent-soft); color: var(--stw-accent); }
.stw-tchoice.is-active .stw-tchoice__icon { background: var(--stw-accent); color: var(--stw-accent-ink); }
.stw-tchoice__title { font-size: 16px; font-weight: 700; letter-spacing: -0.1px; white-space: pre-line; } /* pre-line: erzwungene Umbrüche (\n) im Titel, z. B. „Hin- und / Rücktransfer" */
.stw-tchoice__sub { font-size: 13px; font-weight: 500; color: var(--stw-text-muted); }
/* Hinweisbox: klassisches Warn-Gelb wie die Referenz-HTML (.sws-booking-info) — bewusst NICHT das
   Marken-Gold, damit der „Bitte beachten"-Hinweis als Warnhinweis erkennbar ist. */
.stw-notice { margin: var(--stw-s-3) 0 0; padding: var(--stw-s-4); background: #fff3cd; border: 1px solid #ffeaa7; border-radius: var(--stw-r-md); font-size: 14px; line-height: 1.55; color: #856404; }
.stw-notice strong { display: block; margin-bottom: var(--stw-s-1); font-weight: 700; }
.stw-notice ul { margin: 0; padding-left: 18px; }
/* Preistabelle (Schritt 1, aus /transfers/pricing) */
/* Wrapper mit Rahmen + overflow:hidden = gerundete Ecken für die farbige Kopfzeile; KEIN
   overflow-x:auto → nicht horizontal scrollbar. Die Regionsspalte darf umbrechen, damit die
   Tabelle immer in die Box passt; nur die schmalen Preisspalten bleiben einzeilig. */
.stw-pricetable-wrap { margin-top: var(--stw-s-3); border: 1px solid var(--stw-border); border-radius: var(--stw-r-md); overflow: hidden; }
.stw-pricetable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.stw-pricetable th, .stw-pricetable td { padding: 8px 10px; border-bottom: 1px solid var(--stw-border); text-align: right; }
.stw-pricetable th:first-child, .stw-pricetable td:first-child { text-align: left; }
.stw-pricetable th:not(:first-child), .stw-pricetable td:not(:first-child) { white-space: nowrap; }
.stw-pricetable thead th { background: var(--stw-hero-bar); color: #fff; font-size: 12.5px; font-weight: 700; border-bottom: 0; }
.stw-pricetable td { color: var(--stw-text-muted); }
.stw-pricetable td:first-child { font-weight: 600; color: var(--stw-text); }
.stw-pricetable tbody tr:last-child td { border-bottom: 0; }
/* Kindersitz-/Sitzerhöhungs-Kacheln + Sondergepäck-Zeilen */
.stw-checktile { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--stw-border); border-radius: var(--stw-r-md); margin-top: var(--stw-s-2); cursor: pointer; font-size: 15px; font-weight: 600; transition: border-color 0.12s ease, background 0.12s ease; }
.stw-checktile:hover { border-color: var(--stw-accent); }
.stw-checktile.is-active { border-color: var(--stw-accent); background: var(--stw-accent-soft); }
.stw-sperr-row { display: flex; gap: 8px; align-items: flex-end; margin-top: var(--stw-s-2); }
.stw-sperr-row .stw-field { margin-bottom: 0; }
.stw-sperr-del { flex: 0 0 auto; width: 40px; height: 44px; border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-md); background: var(--stw-surface); color: var(--stw-danger); font-size: 16px; cursor: pointer; }
/* Premium-Karte (Gold, wie App) */
.stw-premium { margin-top: var(--stw-s-3); padding: var(--stw-s-4); border: 1px solid var(--stw-gold-full); border-radius: var(--stw-r-lg); background: var(--stw-gold-soft); }
.stw-premium__badge { display: inline-block; padding: 3px 10px; border-radius: var(--stw-r-pill); background: var(--stw-gold-full); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.stw-premium__lead { margin: var(--stw-s-2) 0 6px; font-size: 15px; font-weight: 700; }
.stw-premium ul { margin: 0 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--stw-text-muted); }
.stw-premium__price { font-size: 15px; font-weight: 800; color: var(--stw-gold-text); margin-bottom: 6px; }
/* Premium-Auswahl als Toggle-BUTTON (nicht als klassische Checkbox): Gold-Outline → gefüllt bei Auswahl */
.stw-premium__toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: var(--stw-s-2); padding: 12px 18px; border-radius: var(--stw-r-md); border: 1.5px solid var(--stw-gold-full); background: transparent; color: var(--stw-gold-full); font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.stw-premium__toggle:hover { background: rgba(154, 116, 44, 0.08); }
.stw-premium__toggle.is-active, .stw-premium__toggle.is-active:hover { background: var(--stw-gold-full); color: #fff; }
/* Übersichtskarte + Preiszeilen */
.stw-tsum { margin-top: var(--stw-s-3); padding: var(--stw-s-4); background: var(--stw-surface-2); border-radius: var(--stw-r-md); }
.stw-tsum__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.stw-tsum__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.stw-tsum__row span:first-child { color: var(--stw-text-muted); flex: 0 0 auto; }
.stw-tsum__row span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; color: var(--stw-text); }
.stw-tsum__price { border-top: 1px solid var(--stw-border); margin-top: 6px; padding-top: 10px; font-weight: 800; font-size: 15.5px; display: flex; justify-content: space-between; }
/* Wizard-Fußzeile (Zurück/Weiter) */
/* Nav-Buttons: mobil gestapelt mit Primär OBEN (column-reverse dreht die DOM-Reihenfolge Zurück→Primär,
   volle Breite via align-items:stretch). Ab 720px (Formular-Desktop-Modus) Row mit Primär 75% / Zurück 25%. */
.stw-tnav { display: flex; flex-direction: column-reverse; gap: 10px; margin-top: var(--stw-s-6); }
@media (min-width: 720px) {
	.stw-tnav { flex-direction: row; }
	.stw-tnav .stw-btn { box-sizing: border-box; flex: 0 0 auto; min-width: 0; } /* feste Breiten (10px Gap hälftig abgezogen) → primär 75% / zurück 25% */
	.stw-tnav .stw-btn--ghost { width: calc(25% - 5px); }
	.stw-tnav .stw-btn--primary { width: calc(75% - 5px); }
}
.stw-tlink { display: block; width: 100%; margin-top: 10px; border: 0; background: none; color: var(--stw-text-muted); font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; text-align: center; }

/* ---------- FAQ (Shortcode [st_faq], rein serverseitig — App-FAQ-Optik) ----------
   BEWUSST komplett mit .stw-page-Präfix (0,2,x): FAQ läuft NUR als Shortcode in Theme-Seiten,
   die Präfix-Spezifität schlägt Theme-Regeln (.entry-content h2/p, summary …) von Haus aus —
   keine wertgleichen Härtungs-Kopien nötig (vgl. THEME-HÄRTUNG oben). */
.stw-page .stw-faq { display: grid; gap: 10px; }
.stw-page .stw-faq__section { margin: 10px 0 2px; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none; color: inherit; }
.stw-page .stw-faq__item { margin: 0; border: 1px solid var(--stw-border); border-radius: var(--stw-r-md); background: var(--stw-surface); overflow: hidden; }
.stw-page .stw-faq__q { display: flex; align-items: center; gap: 10px; padding: 15px 16px; list-style: none; cursor: pointer; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--stw-text); text-transform: none; letter-spacing: normal; }
.stw-page .stw-faq__q::-webkit-details-marker { display: none; } /* Safari: nativen Dreieck-Marker aus */
.stw-page .stw-faq__q::marker { content: ''; }
.stw-page .stw-faq__q:focus-visible { outline: 2px solid var(--stw-accent); outline-offset: -2px; }
.stw-page .stw-faq__qicon { flex: 0 0 auto; color: var(--stw-accent); }
.stw-page .stw-faq__qtxt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.stw-page .stw-faq__chev { flex: 0 0 auto; color: var(--stw-text-muted); transition: transform 0.15s ease; }
.stw-page .stw-faq__item[open] .stw-faq__chev { transform: rotate(180deg); }
.stw-page .stw-faq__a { margin: 0 16px 0 44px; padding: 12px 0 15px; border-top: 1px solid var(--stw-border); font-size: 14.5px; line-height: 1.6; color: var(--stw-text-muted); overflow-wrap: anywhere; }
.stw-page .stw-faq__a p { margin: 0 0 10px; font-size: inherit; line-height: inherit; color: inherit; }
.stw-page .stw-faq__a p:last-child { margin-bottom: 0; }
.stw-page .stw-faq__a ul { margin: 0 0 10px; padding-left: 20px; list-style: disc; }
.stw-page .stw-faq__a ol { margin: 0 0 10px; padding-left: 20px; list-style: decimal; }
.stw-page .stw-faq__a li { margin: 2px 0; padding: 0; font-size: inherit; line-height: inherit; }
.stw-page .stw-faq__a a { color: var(--stw-accent); text-decoration: underline; }

/* „Ändern oder stornieren"-Textlink in den Buchungskarten (Meine Buchungen → Edit-Sheet) */
.stw-page .stw-bk__ask { display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--stw-accent); font-family: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Buchung ändern/stornieren (Edit-Sheet aus „Meine Buchungen") */
.stw-page .stw-be__banner, .stw-overlay .stw-be__banner { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--stw-r-md); background: var(--stw-gold-soft, #b8860b1a); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.stw-page .stw-be__banner--muted, .stw-overlay .stw-be__banner--muted { background: var(--stw-surface-2); color: var(--stw-text-muted); }
.stw-overlay .stw-be__title { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.stw-overlay .stw-be__extra { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.stw-overlay .stw-be__extra .stw-select { flex: 1; min-width: 0; }
.stw-overlay .stw-be__extra .stw-input { flex: 1.2; min-width: 0; }
.stw-overlay .stw-be__part { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.stw-overlay .stw-be__part .stw-input { flex: 1; min-width: 0; }
.stw-overlay .stw-be__part .stw-select { flex: 0 0 128px; }
.stw-overlay .stw-be__age { flex: 0 0 64px !important; }
.stw-overlay .stw-be__x { flex: 0 0 auto; border: 0; background: none; color: var(--stw-text-muted); font-size: 15px; cursor: pointer; padding: 6px; }
.stw-overlay .stw-be__x:hover { color: var(--stw-danger); }
.stw-overlay .stw-be__tiles { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.stw-overlay .stw-be__price { margin-top: 14px; padding: 12px 14px; border-radius: var(--stw-r-md); background: var(--stw-surface-2); }
.stw-overlay .stw-be__prow { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--stw-text-muted); }
.stw-overlay .stw-be__prow--big { font-size: 15px; color: var(--stw-text); }
.stw-overlay .stw-be__prow--big strong { font-size: 19px; font-weight: 800; }
.stw-overlay .stw-be__danger { color: var(--stw-danger); border-color: var(--stw-danger); }
.stw-overlay .stw-be__danger:hover { color: var(--stw-danger); background: var(--stw-danger-soft); }
.stw-overlay .stw-be__dangerbtn { background: var(--stw-danger); color: #fff; }
.stw-overlay .stw-be__dangerbtn:hover { background: var(--stw-danger); opacity: 0.9; }

/* ===========================================================================
   Formular-Controls browserübergreifend vereinheitlichen (Safari ↔ Chrome).
   Native <select>/<input type=checkbox> zeichnet jeder Browser mit eigener
   „Chrome" (WebKit ≠ Blink): Pfeil, Rundung, Häkchen weichen ab. Wir entfernen
   die native Darstellung (appearance:none) und bauen Pfeil/Häkchen selbst →
   identisches Bild in jedem Browser. Font-Smoothing liegt zusätzlich direkt auf
   Wizard, Ausflug-Seiten + Sheets, damit die eingebettete Box (Katalog/Detail und die
   virtuellen Ansichten laufen im Host-Theme) unabhängig vom Theme gleich
   rastert (die Eigenschaften wirken nur auf macOS).
   =========================================================================== */
.stw-transfer, .stw-page, .stw-overlay { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* --- <select>: native Chrome entfernen, eigenen Chevron rechts setzen. --- */
.stw-select { -webkit-appearance: none; appearance: none; }
.stw-twizard .stw-select, .stw-page .stw-select, .stw-overlay .stw-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 16px;
	padding-right: 38px;
}
.stw-select:disabled { opacity: 0.55; cursor: default; }

/* --- <input type=checkbox>: native Häkchen entfernen, eigene Box + Haken.
   Gilt für Consents (Transfer + Ausflug-Checkout) und die Kindersitz-/
   Sitzerhöhung-Kacheln. --- */
.stw-consent input[type="checkbox"], .stw-checktile input[type="checkbox"] {
	-webkit-appearance: none; appearance: none;
	flex: 0 0 auto;
	width: 18px; height: 18px; margin: 0;
	border: 1.5px solid var(--stw-border-strong);
	border-radius: 5px;
	background-color: var(--stw-surface);
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}
.stw-consent input[type="checkbox"] { margin-top: 2px; }
.stw-consent input[type="checkbox"]:checked, .stw-checktile input[type="checkbox"]:checked {
	background-color: var(--stw-accent);
	border-color: var(--stw-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
}
.stw-consent input[type="checkbox"]:focus-visible, .stw-checktile input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--stw-accent-soft);
	outline-offset: 1px;
}

/* ---------- Ausflug-Politur (Angleichung an den Transfer-Look) ----------
   Der Transfer-Wizard bekam weiße 10px-Felder + Fokus-Ring, größere Touch-Targets und einen runden
   Vorwahl-Dropdown — bewusst nur auf .stw-twizard. Diese Sektion bringt DENSELBEN Look auf die
   Ausflug-Screens, streng Ausflug-gescopet: das Sheet ist body-level (.stw-overlay > .stw-sheet) →
   .stw-twizard wird NIE getroffen, Basis + Transfer-Wizard bleiben unberührt. Steht am Dateiende →
   gewinnt Spezifitäts-Gleichstände (0,2,0) gegen Basis/Härtung. --- */
/* Formular-Felder: 10px-Radius, 48px hoch, Fokus-Ring (weiß + border-strong kommen schon aus der
   Basis/Härtung — hier nur Höhe/Radius/Fokus ergänzen). Buchungs-Sheet (Direktbuchung) + Region-Select. */
.stw-sheet .stw-input, .stw-sheet .stw-select, .stw-detail__booking .stw-input, .stw-detail__booking .stw-select {
	min-height: 48px;
	border-radius: 10px;
	transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.stw-sheet .stw-input:focus, .stw-sheet .stw-select:focus, .stw-detail__booking .stw-input:focus, .stw-detail__booking .stw-select:focus {
	outline: none;
	border-color: var(--stw-accent);
	box-shadow: 0 0 0 3px var(--stw-accent-soft); /* Ring via box-shadow (nicht background): löscht den Select-Pfeil nicht */
}
/* Wunsch-Abholzeit: natives <input type="time"> (öffnet am Handy das OS-Zeit-Rad) app-nah gestylt —
   Uhr-Icon links (wie App), native Spinner/Indicator ausgeblendet, damit es aussieht wie ein Feld. */
.stw-timefield { position: relative; }
.stw-timefield__ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--stw-text-subtle); pointer-events: none; }
.stw-sheet .stw-timeinput, .stw-detail__booking .stw-timeinput { padding-left: 38px; }
.stw-timeinput::-webkit-calendar-picker-indicator,
.stw-timeinput::-webkit-inner-spin-button,
.stw-timeinput::-webkit-clear-button { -webkit-appearance: none; appearance: none; display: none; margin: 0; }
/* Buttons: größere Touch-Targets wie im Transfer (Radius bleibt --stw-r-md). Sheet-Aktionen + Buy-Box + Inline-Sidebar. */
.stw-sheet .stw-btn, .stw-buybox .stw-btn, .stw-detail__booking .stw-btn {
	min-height: 54px;
	font-size: 16px;
}
/* Zweiteiliger Buchen-Button (wie App): Haupt- + kleinere Bar-Zeile IM Button, gestapelt. */
.stw-page .stw-btn--stack, .stw-overlay .stw-btn--stack { flex-direction: column; gap: 1px; line-height: 1.25; }
.stw-btn__main { font-size: 16px; font-weight: 700; }
.stw-btn__sub { font-size: 11.5px; font-weight: 400; opacity: 0.9; }
/* Telefon-Vorwahl im Sheet ans 10px-Feldsystem angleichen (nur Höhe/Radius; Fläche/Rahmen = Basis). */
.stw-sheet .stw-dial {
	min-height: 48px;
	border-radius: 10px;
}
.stw-sheet .stw-dial__panel { border-radius: 10px; }
.stw-sheet .stw-dial__opt { border-radius: 8px; }
/* Buchen/Erfolg-Feinschliff: Radien ans neue System angleichen (kleine Insets = 10px wie
   Felder/Fact-Kacheln, mittlere Boxen = 12px). Sheet-gescopet → Transfer-Gegenstücke (inline in
   .stw-twizard) bleiben unberührt. */
.stw-sheet .stw-consent--boxed { border-radius: 10px; }
.stw-sheet .stw-cogroup { border-radius: 12px; }
.stw-sheet .stw-bk { border-radius: 12px; }

/* ---------------- Merken (Favoriten): Herz auf Karte/Detail + „Gemerkte"-Umschalter ----------------
   Am Dateiende, damit der Aktiv-Override den gescopten .stw-page .stw-chip.is-active (Akzent) schlägt. */
.stw-card__img, .stw-detail__media { position: relative; }
/* Herz-Overlay oben rechts im Bild. Weißer Kreis = auf jedem Foto sichtbar; aktiv = rot gefüllt (danger). */
.stw-fav { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--stw-text); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease; }
.stw-fav svg { width: 19px; height: 19px; fill: none; display: block; }
.stw-fav:hover { transform: scale(1.08); background: #fff; }
/* Merken-Herz: KEIN Fokus-Ring. Auf dem aktiven (roten) Herz fiel die Outline in manchen Browsern
   auf currentColor (= rot) zurück; sie ist hier entbehrlich (Füll-Zustand + Pop geben Rückmeldung).
   Scoped + unscoped, um etwaige Theme-/Browser-Fokus-Outlines sicher zu überschreiben. */
.stw-fav:focus, .stw-fav:focus-visible,
.stw-page .stw-fav:focus, .stw-page .stw-fav:focus-visible,
.stw-overlay .stw-fav:focus, .stw-overlay .stw-fav:focus-visible { outline: none; }
.stw-fav.is-active { color: var(--stw-danger); }
.stw-fav.is-active svg { fill: var(--stw-danger); }
/* Detail-Merken-Herz sitzt jetzt im Kopf (nicht im Bild): statisch positioniert, umrandeter Kreis auf Weiß. */
.stw-fav--detail { position: static; top: auto; right: auto; z-index: auto; flex: 0 0 auto; width: 42px; height: 42px; background: var(--stw-surface); border: 1px solid var(--stw-border-strong); box-shadow: none; }
.stw-fav--detail:hover { transform: none; background: var(--stw-surface-2); border-color: var(--stw-text-subtle); }
.stw-fav--detail svg { width: 22px; height: 22px; }
/* Merken-Pop (App-FavHeart-Parität): beim Aktivieren skaliert NUR das Herz-Icon kurz hoch und federt
   zurück (Kreis bleibt); web.js setzt .stw-fav--pop beim Merken. Kein reduced-motion (Projekt-Entscheidung). */
@keyframes stw-fav-pop {
	0% { transform: scale(1); }
	30% { transform: scale(1.32); }
	55% { transform: scale(0.9); }
	75% { transform: scale(1.08); }
	100% { transform: scale(1); }
}
.stw-fav--pop svg { animation: stw-fav-pop 0.42s ease-out; transform-origin: center; transform-box: fill-box; }

/* ---------------- Kategorie-Karussells (Katalog wie App-Home) ---------------- */
/* Mehr Abstand zwischen den Kategorien — gibt zugleich dem Hover-Schatten unten (~24px) Luft zur nächsten Sektion. */
.stw-catsec { margin-bottom: var(--stw-s-7); }
.stw-catsec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--stw-s-3); margin: 0 0 var(--stw-s-3); }
.stw-catsec__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; min-width: 0; }
.stw-carnav { display: flex; gap: var(--stw-s-2); flex: 0 0 auto; }
/* Reiner Scroll-Wrapper — KEIN overflow (die Kacheln laufen mobil bewusst über den Rand, s. Full-Bleed). */
.stw-carwrap { position: relative; }
/* Horizontaler Scroll-Container. (Kein vertikaler Puffer mehr nötig — die Kacheln sind randlos und der
   Hover-Zoom bleibt INNERHALB des Bildes, ragt also nicht über die Kachel hinaus.) So ist die Wrapper-Höhe
   exakt die Kachelhöhe → der Rand-Fade (top/bottom:0) deckt genau die Kachel ab. */
.stw-carousel { display: flex; gap: var(--stw-s-3); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.stw-carousel::-webkit-scrollbar { display: none; }
.stw-carousel .stw-card { flex: 0 0 270px; width: 270px; scroll-snap-align: start; }
/* Blätter-Pfeile im Sektionskopf oben rechts (Airbnb-Muster). web.js blendet sie mobil/ohne Overflow ganz aus
   ([hidden]) und DEAKTIVIERT den nicht möglichen Rand (:disabled → ausgegraut) statt ihn zu verstecken. */
.stw-carnav__btn { width: 36px; height: 36px; padding: 0; border: 1px solid var(--stw-border-strong); border-radius: var(--stw-r-pill); background: var(--stw-surface); color: var(--stw-text); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease; }
.stw-carnav__btn:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; }
.stw-carnav__btn svg { width: 22px; height: 22px; }
.stw-carnav__btn:hover:not(:disabled) { background: var(--stw-surface-2); border-color: var(--stw-text-subtle); }
.stw-carnav__btn:disabled { opacity: 0.3; cursor: default; }
/* Leichter Rand-Fade über eine ANGESCHNITTENE Kachel: die Klassen setzt web.js geometriebasiert — nur wenn an
   der Seite wirklich eine Kachel über die Kante ragt (Desktop). Liegt über den Kacheln (z-index 2),
   pointer-events:none, damit Klick/Hover durchgehen. 48px = dezent. */
.stw-carwrap::before, .stw-carwrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; }
.stw-carwrap::before { left: 0; background: linear-gradient(to right, var(--stw-paper), rgba(255, 255, 255, 0)); }
.stw-carwrap::after { right: 0; background: linear-gradient(to left, var(--stw-paper), rgba(255, 255, 255, 0)); }
.stw-carwrap.is-fadeleft::before { opacity: 1; }
.stw-carwrap.is-faderight::after { opacity: 1; }
@media (min-width: 700px) {
  /* Desktop: ~3,25 Kacheln sichtbar (3 volle + leichter ¼-Peek). 30,8 % ≈ 1/3,25; −8px = Gap-Korrektur (g·(1−1/v), g=12px). */
  .stw-carousel .stw-card { flex-basis: calc(30.8% - 8px); width: calc(30.8% - 8px); }
}
/* Mobil (<700px): Scroller FULL-BLEED bis zur echten Bildschirmkante (Muster wie App/iOS: erste Kachel am
   Gutter, letzte Kachel läuft über den echten Rand hinaus — statt Anschnitt „mitten im weißen Innenrand").
   Der Scroller sitzt unter 1080px exakt --stw-page-x vom Viewport-Rand (.stw-main-Padding, voll-breit) → der
   Ausbruch ist genau --stw-page-x pro Seite. BEWUSST kein 50vw/100vw (überschösse um die Scrollbalkenbreite
   und würde auf Desktop bleeden): aufgelöste Breite == clientWidth → nie ein horizontaler Seiten-Scrollbalken.
   padding-inline holt die erste Kachel auf den Gutter zurück (echtes Padding → scrollCarousel bleibt gültig);
   scroll-padding-inline legt die Snap-Ruhelage auf den Gutter statt auf x=0. Pfeile+Fade sind hier ohnehin aus
   (refreshCarNav: !isDesktop). Grenze 699.98px spiegelt den JS-Gate min-width:700px ohne 1px-Lücke. */
@media (max-width: 699.98px) {
  .stw-carousel { margin-inline: calc(-1 * var(--stw-page-x)); padding-inline: var(--stw-page-x); scroll-padding-inline: var(--stw-page-x); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SCHUTZ GEGEN THEME-ZUSTANDSREGELN  (hinzugefügt 04.08.2026)

   Themes färben oft JEDEN Button bei :hover UND :focus ein. Konkret gefunden
   auf schwarzwaldreisenside.com (hello-elementor/assets/css/reset.css):

       [type=button],[type=submit],button      { border:1px solid #c36; color:#c36 }
       [type=button]:focus,…,button:hover,…    { background-color:#c36; color:#fff }

   Zwei Lücken machten das sichtbar:
   1. Unsere Zustandsregeln nannten teils NUR die Textfarbe (z. B. --ghost:hover).
      Beim Hintergrund hatten wir dann nichts zu sagen → die Theme-Farbe griff durch.
   2. :focus war NIRGENDS belegt → nach dem Anklicken blieb ein Button rosa stehen,
      bis man woanders hin klickte. Das war der auffälligste Effekt.

   Deshalb: Hintergrund UND Textfarbe in jedem Zustand ausdrücklich nennen.
   Dieser Block füllt nur Lücken — absichtliche Hover-Effekte stehen weiter oben
   und bleiben gültig, wo sie hier nicht wiederholt werden.

   MERKSATZ: Ändert sich der Grundzustand eines Buttons, die Werte hier mitziehen.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Hauptvarianten ---------------------------------------------------- */
.stw-page .stw-btn--primary:is(:focus, :focus-visible, :active),
.stw-overlay .stw-btn--primary:is(:focus, :focus-visible, :active) { background: var(--stw-accent); color: var(--stw-accent-ink); }
.stw-page .stw-btn--primary:hover,
.stw-overlay .stw-btn--primary:hover { background: var(--stw-accent-strong); color: var(--stw-accent-ink); }

.stw-page .stw-btn--ghost:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-btn--ghost:is(:hover, :focus, :focus-visible, :active) { background: transparent; color: var(--stw-text); border-color: var(--stw-border-strong); }

.stw-page .stw-btn--soft:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-btn--soft:is(:hover, :focus, :focus-visible, :active) { background: var(--stw-accent-soft); color: var(--stw-accent-strong); }

/* --- Sonder-Buttons: Grundwerte in den Zuständen halten ---------------- */
.stw-page .stw-bk__ask:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-bk__ask:is(:hover, :focus, :focus-visible, :active) { background: none; color: var(--stw-accent); }

.stw-page .stw-tlink:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-tlink:is(:hover, :focus, :focus-visible, :active) { background: none; color: var(--stw-text-muted); }

.stw-page .stw-sperr-qbtn:is(:focus, :focus-visible, :active),
.stw-overlay .stw-sperr-qbtn:is(:focus, :focus-visible, :active) { background: var(--stw-surface); color: var(--stw-text); }

.stw-page .stw-cal__nav:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-cal__nav:is(:hover, :focus, :focus-visible, :active) { background: var(--stw-surface-2); color: var(--stw-text); }

.stw-page .stw-be__x:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-be__x:is(:hover, :focus, :focus-visible, :active) { background: none; color: var(--stw-text); }

.stw-page .stw-favbtn:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-favbtn:is(:hover, :focus, :focus-visible, :active) { background: transparent; color: var(--stw-text); }

.stw-page .stw-step__btn:is(:focus, :focus-visible, :active),
.stw-overlay .stw-step__btn:is(:focus, :focus-visible, :active) { background: var(--stw-accent-soft); color: var(--stw-accent); }

.stw-page .stw-lbx__arrow:is(:focus, :focus-visible, :active),
.stw-overlay .stw-lbx__arrow:is(:focus, :focus-visible, :active) { background: rgba(0, 0, 0, 0.07); color: #1c1c19; }

.stw-page .stw-namechip:is(:focus, :focus-visible, :active),
.stw-overlay .stw-namechip:is(:focus, :focus-visible, :active) { background: var(--stw-surface-2); color: var(--stw-text); }

.stw-page .stw-xtra__opt:is(:focus, :focus-visible, :active),
.stw-overlay .stw-xtra__opt:is(:focus, :focus-visible, :active) { background: none; color: var(--stw-text); }

.stw-page .stw-tchoice:is(:focus, :focus-visible, :active),
.stw-overlay .stw-tchoice:is(:focus, :focus-visible, :active) { background: var(--stw-surface); color: var(--stw-text); }

.stw-page .stw-regionbrowse:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-regionbrowse:is(:hover, :focus, :focus-visible, :active) { background: none; color: inherit; }

/* --- Eigener Fokusring -------------------------------------------------
   Der Theme-Reset ersetzte die Fokus-Anzeige durch seine Einfärbung. Die nehmen
   wir ihm weg — also braucht es einen sichtbaren Ersatz, sonst verschlechtert
   dieser Block die Tastaturbedienung. :focus-visible zeigt ihn nur bei
   Tastaturnutzung, nicht nach einem Mausklick. */
.stw-page :is(button, .stw-btn):focus-visible,
.stw-overlay :is(button, .stw-btn):focus-visible { outline: 2px solid var(--stw-accent); outline-offset: 2px; }

/* --- Links im Widget ---------------------------------------------------
   hello-elementor setzt `a { color:#c36 }` und `a:hover { color:#336 }`.
   Betrifft u. a. die Rechtstexte-Links im Buchungsabschluss, die keine eigene
   Klasse tragen. */
.stw-page a:not([class]),
.stw-overlay a:not([class]) { color: var(--stw-accent); text-decoration: underline; }
.stw-page a:not([class]):is(:hover, :focus),
.stw-overlay a:not([class]):is(:hover, :focus) { color: var(--stw-accent-strong); }

/* --- Nachtrag 04.08.2026: Textfarbe im Hover -----------------------------
   Erster Anlauf hatte nur geprüft, ob eine Hover-Regel den HINTERGRUND setzt.
   Das reicht nicht: `button:hover` des Themes setzt AUCH `color:#fff`. Wo unsere
   Hover-Regel die Textfarbe nicht nennt, färbt das Theme sie weiß — sichtbar
   geworden an der Transfer-Auswahl, deren Titel (`color: inherit`) die Farbe vom
   Button erbt und dadurch weiß auf hellem Grund stand.

   MERKSATZ für neue Zustandsregeln: Hintergrund UND Textfarbe nennen. Wer nur
   eines setzt, überlässt das andere dem Theme. */
.stw-page .stw-tchoice:hover, .stw-overlay .stw-tchoice:hover,
.stw-twizard .stw-tchoice:hover { color: var(--stw-text); }

.stw-page .stw-xtra__opt:hover, .stw-overlay .stw-xtra__opt:hover,
.stw-twizard .stw-xtra__opt:hover { color: var(--stw-text); }

.stw-page .stw-dial__opt:hover, .stw-overlay .stw-dial__opt:hover { color: var(--stw-text); }
.stw-page .stw-lbx__arrow:hover, .stw-overlay .stw-lbx__arrow:hover { color: #1c1c19; }
.stw-page .stw-lbx__close:hover, .stw-overlay .stw-lbx__close:hover { color: #1c1c19; }
.stw-page .stw-gal__arrow:hover, .stw-overlay .stw-gal__arrow:hover { color: #fff; }
.stw-page .stw-premium__toggle:hover, .stw-overlay .stw-premium__toggle:hover { color: var(--stw-gold-full); }
.stw-page .stw-be__dangerbtn:hover, .stw-overlay .stw-be__dangerbtn:hover { color: #fff; }
.stw-page .stw-fav:hover, .stw-overlay .stw-fav:hover { color: var(--stw-text); }
.stw-page .stw-carnav__btn:hover:not(:disabled),
.stw-overlay .stw-carnav__btn:hover:not(:disabled) { color: var(--stw-text); }

/* --- Nachtrag 2, 04.08.2026: vollstaendige Zustandsabdeckung ---------------
   Dritter Anlauf am selben Problem — die ersten beiden erfassten nur einen Teil
   der Buttons. Diesmal automatisiert aus dem erzeugten HTML gesammelt: 28
   Button-Klassen statt der 12, die eine Handsuche gefunden hatte. Aufgefallen
   war es am Knopf "Sondergepaeck hinzufuegen" (.stw-sperr-add), der gar keine
   Zustandsregel hatte und deshalb voll in der Theme-Farbe #c36 stand.

   Regel fuer alle kuenftigen Buttons: Wer eine neue Button-Klasse anlegt, gibt
   ihr :hover UND :focus mit background UND color — sonst bestimmt das Theme,
   was es nicht soll. */
.stw-page .stw-be__danger:is(:focus, :focus-visible, :active), .stw-overlay .stw-be__danger:is(:focus, :focus-visible, :active) { background: transparent; color: var(--stw-danger); }
.stw-page .stw-be__dangerbtn:is(:focus, :focus-visible, :active), .stw-overlay .stw-be__dangerbtn:is(:focus, :focus-visible, :active) { background: var(--stw-danger); color: #fff; }
.stw-page .stw-copyfield:is(:focus, :focus-visible, :active), .stw-overlay .stw-copyfield:is(:focus, :focus-visible, :active) { background: var(--stw-surface-2); color: var(--stw-text); }
.stw-page .stw-copyfield:hover, .stw-overlay .stw-copyfield:hover { background: var(--stw-surface-2); color: var(--stw-text); }
.stw-page .stw-dial:is(:focus, :focus-visible, :active), .stw-overlay .stw-dial:is(:focus, :focus-visible, :active) { background: var(--stw-surface); color: var(--stw-text); }
.stw-page .stw-dial:hover, .stw-overlay .stw-dial:hover { background: var(--stw-surface); color: var(--stw-text); }
.stw-page .stw-dial__opt:is(:focus, :focus-visible, :active), .stw-overlay .stw-dial__opt:is(:focus, :focus-visible, :active) { background: transparent; color: var(--stw-text); }
.stw-page .stw-foot-back:is(:focus, :focus-visible, :active), .stw-overlay .stw-foot-back:is(:focus, :focus-visible, :active) { background: transparent; color: inherit; }
.stw-page .stw-foot-back:hover, .stw-overlay .stw-foot-back:hover { background: transparent; color: inherit; }
.stw-page .stw-lbx__close:is(:focus, :focus-visible, :active), .stw-overlay .stw-lbx__close:is(:focus, :focus-visible, :active) { background: rgba(0, 0, 0, 0.07); color: #1c1c19; }
.stw-page .stw-premium__toggle:is(:focus, :focus-visible, :active), .stw-overlay .stw-premium__toggle:is(:focus, :focus-visible, :active) { background: transparent; color: var(--stw-gold-full); }
.stw-page .stw-sheet__close:is(:focus, :focus-visible, :active), .stw-overlay .stw-sheet__close:is(:focus, :focus-visible, :active) { background: var(--stw-surface-2); color: var(--stw-text-muted); }
.stw-page .stw-sheet__close:hover, .stw-overlay .stw-sheet__close:hover { background: var(--stw-surface-2); color: var(--stw-text-muted); }
.stw-page .stw-sperr-add:is(:focus, :focus-visible, :active), .stw-overlay .stw-sperr-add:is(:focus, :focus-visible, :active) { background: none; color: var(--stw-accent); }
.stw-page .stw-sperr-add:hover, .stw-overlay .stw-sperr-add:hover { background: none; color: var(--stw-accent); }
.stw-page .stw-sperr-del:is(:focus, :focus-visible, :active), .stw-overlay .stw-sperr-del:is(:focus, :focus-visible, :active) { background: var(--stw-surface); color: var(--stw-danger); }
.stw-page .stw-sperr-del:hover, .stw-overlay .stw-sperr-del:hover { background: var(--stw-surface); color: var(--stw-danger); }
.stw-page .stw-sperr-qbtn:hover, .stw-overlay .stw-sperr-qbtn:hover { background: var(--stw-surface); color: var(--stw-text); }
.stw-page .stw-timechip:is(:focus, :focus-visible, :active), .stw-overlay .stw-timechip:is(:focus, :focus-visible, :active) { background: transparent; color: inherit; }
.stw-page .stw-timechip:hover, .stw-overlay .stw-timechip:hover { background: transparent; color: inherit; }

/* Klassen mit Zustandsvarianten: Die Variante muss ihren Hintergrund behalten,
   deshalb hier einzeln statt pauschal — eine pauschale Regel auf .stw-cal__day
   haette buchbaren Tagen im Hover die Farbe genommen. */
.stw-page .stw-cal__day:is(:hover, :focus, :focus-visible), .stw-overlay .stw-cal__day:is(:hover, :focus, :focus-visible) { background: transparent; color: var(--stw-text-subtle); }
.stw-page .stw-cal__day.is-bookable:is(:hover, :focus, :focus-visible), .stw-overlay .stw-cal__day.is-bookable:is(:hover, :focus, :focus-visible) { background: var(--stw-accent-soft); color: var(--stw-accent); }
.stw-page .stw-cal__day.is-selected:is(:hover, :focus, :focus-visible), .stw-overlay .stw-cal__day.is-selected:is(:hover, :focus, :focus-visible) { background: var(--stw-accent); color: var(--stw-accent-ink); }

.stw-page .stw-tchoice:is(:focus, :focus-visible), .stw-overlay .stw-tchoice:is(:focus, :focus-visible) { color: var(--stw-text); }
.stw-page .stw-tchoice.is-active:is(:hover, :focus, :focus-visible), .stw-overlay .stw-tchoice.is-active:is(:hover, :focus, :focus-visible) { background: var(--stw-accent-soft); color: var(--stw-text); }

.stw-page .stw-chip:is(:hover, :focus, :focus-visible), .stw-overlay .stw-chip:is(:hover, :focus, :focus-visible) { background: var(--stw-surface); color: var(--stw-text-muted); }
.stw-page .stw-chip.is-active:is(:hover, :focus, :focus-visible), .stw-overlay .stw-chip.is-active:is(:hover, :focus, :focus-visible) { background: var(--stw-accent); color: var(--stw-accent-ink); }

/* Nachtrag 06.08.2026: Der Premium-Knopf fehlte in dieser Reihe. Seine Zustandsregel weiter
   oben setzt im Hover NUR die Textfarbe (Gold) — die goldene Flaeche des gewaehlten Zustands
   bleibt dabei stehen, und die Schrift verschwindet darin: gemessener Kontrast 1,0, also
   exakt dieselbe Farbe. Am Telefon dauerhaft sichtbar, weil der Hover-Zustand dort nach dem
   Antippen am Element haengen bleibt. `:active` gehoert mit in die Liste, weil die pauschale
   Regel oben es ebenfalls fuehrt. */
.stw-page .stw-premium__toggle.is-active:is(:hover, :focus, :focus-visible, :active), .stw-overlay .stw-premium__toggle.is-active:is(:hover, :focus, :focus-visible, :active) { background: var(--stw-gold-full); color: #fff; }

/* ---- Preisblock (Startscreen) ------------------------------------------------------------
   EIN Rahmen um alles, die Reiter sitzen darin (Karteireiter). Die Tabelle bringt darin
   keinen eigenen Kasten und keine dunkle Kopfleiste mehr mit: Bei 13 aufklappbaren Regionen
   wiederholte sich der dunkle Balken staendig und wirkte schwer. */
.stw-pblock { margin: 0 0 var(--stw-s-6); border: 1px solid var(--stw-border); border-radius: var(--stw-r-lg); overflow: hidden; background: var(--stw-paper); }
.stw-pblock__tabs { display: flex; border-bottom: 1px solid var(--stw-border); }
/* border-radius: 0 ist Absicht: Ein inset-Schatten folgt der Rundung SEINES Elements. Rundet
   das Theme Buttons (hello-elementor tut das), wird aus der Unterstreichung ein Bogen statt
   eines Strichs. Deshalb hier hart auf 0 — in jedem Zustand, s. Theme-Abwehr unten. */
.stw-pblock__tab { box-sizing: border-box; flex: 1 1 0; padding: 12px 8px; border: 0; border-radius: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--stw-text-muted); }
.stw-pblock__tab.is-active { color: var(--stw-accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--stw-accent); }
/* Theme-Zustandsregeln abwehren (s. Block „SCHUTZ GEGEN THEME-ZUSTANDSREGELN"): hello-elementor
   faerbt JEDEN Button bei :hover UND :focus ein und gibt ihm einen Rahmen. Deshalb Hintergrund,
   Rahmen und Textfarbe in JEDEM Zustand ausdruecklich nennen — sonst blieb nach dem Anklicken
   ein fremder Rahmen am Reiter stehen. Die aktive Unterstreichung bleibt dabei erhalten. */
.stw-page .stw-pblock__tab:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-pblock__tab:is(:hover, :focus, :focus-visible, :active) { background: transparent; border: 0; border-radius: 0; outline: none; color: var(--stw-text); box-shadow: none; }
.stw-page .stw-pblock__tab.is-active:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-pblock__tab.is-active:is(:hover, :focus, :focus-visible, :active) { background: transparent; border: 0; border-radius: 0; outline: none; color: var(--stw-accent); box-shadow: inset 0 -2px 0 var(--stw-accent); }
/* Tastaturbedienung bleibt sichtbar — nur eben in unserer Farbe statt der des Themes. */
.stw-page .stw-pblock__tab:focus-visible,
.stw-overlay .stw-pblock__tab:focus-visible { outline: 2px solid var(--stw-accent); outline-offset: -2px; }
.stw-pblock__seasons { padding: 12px 14px 0; margin: 0; }
/* Eigener Bereich statt schwebender Absatz: ohne Trennlinie las sich die Zeile wie eine
   angeschnittene Tabellenzeile, und oben/unten waren die Abstaende ungleich. */
.stw-pblock__note { margin: 0; padding: 12px 14px; border-top: 1px solid var(--stw-border); text-align: center; }

/* Tabelle im Block: randlos, heller Kopf mit kleinen grauen Spaltentiteln. */
.stw-pblock .stw-pricetable-wrap { margin-top: 0; border: 0; border-radius: 0; }
.stw-twizard .stw-pblock .stw-pricetable thead th,
.stw-pblock .stw-pricetable thead th { background: transparent; color: var(--stw-text-muted); font-size: 11.5px; font-weight: 600; border-bottom: 1px solid var(--stw-border); }
.stw-pblock .stw-pricetable th:first-child, .stw-pblock .stw-pricetable td:first-child { padding-left: 14px; }
.stw-pblock .stw-pricetable th:last-child, .stw-pblock .stw-pricetable td:last-child { padding-right: 14px; }
.stw-pblock .stw-pricetable tbody tr:nth-child(even) td { background: transparent; }
.stw-pblock .stw-pricetable td { padding-top: 10px; padding-bottom: 10px; }

/* Sonderfahrt-Preise: eine aufklappbare Zeile je Abholregion. 146 Strecken am Stueck waeren
   unlesbar; offen ist immer nur eine Region. Der Block liefert den Rahmen, die Liste nicht. */
.stw-pacc { margin: 0; border: 0; border-radius: 0; overflow: hidden; }
.stw-pacc__item + .stw-pacc__item { border-top: 1px solid var(--stw-border); }
.stw-pacc__head { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
/* Auch hier Theme-Abwehr: Der Regions-Kopf ist ein Button und wird staendig angeklickt —
   ohne ausdrueckliche :focus-Regel bliebe nach jedem Aufklappen die Theme-Farbe stehen. */
.stw-page .stw-pacc__head:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-pacc__head:is(:hover, :focus, :focus-visible, :active) { background: var(--stw-surface-2); border: 0; outline: none; color: var(--stw-text); }
.stw-page .stw-pacc__item.is-open > .stw-pacc__head:is(:hover, :focus, :focus-visible, :active),
.stw-overlay .stw-pacc__item.is-open > .stw-pacc__head:is(:hover, :focus, :focus-visible, :active) { background: var(--stw-surface-2); color: var(--stw-text); }
.stw-page .stw-pacc__head:focus-visible,
.stw-overlay .stw-pacc__head:focus-visible { outline: 2px solid var(--stw-accent); outline-offset: -2px; }
/* Offene Region: getoente Kopfzeile — bei 13 Regionen sieht man sonst nicht, wozu die
   aufgeklappte Tabelle gehoert. */
.stw-pacc__item.is-open > .stw-pacc__head { background: var(--stw-surface-2); font-weight: 600; }
.stw-pacc__name { flex: 1 1 auto; font-size: 14.5px; }
.stw-pacc__meta { flex: 0 0 auto; font-size: 12.5px; font-weight: 400; color: var(--stw-text-muted); }
/* Das gemeinsame Chevron zeigt nach RECHTS (Listen-Pfeil). Fuer ein Accordion gehoert es nach
   unten bzw. offen nach oben — sonst klappt die Zeile auf und der Pfeil zeigt nach links. */
.stw-pacc__chev { flex: 0 0 auto; display: inline-flex; color: var(--stw-text-muted); transform: rotate(90deg); transition: transform .15s ease; }
/* Kind-Selektor: ohne ">" drehte sich jedes Chevron in der aufgeklappten Tabelle mit. */
.stw-pacc__item.is-open > .stw-pacc__head .stw-pacc__chev { transform: rotate(-90deg); }
/* Gleicher Ton wie der aufgeklappte Kopf: Kopf und Tabelle bilden so EINEN abgesetzten Block,
   statt dass die Tabelle wieder auf Weiss zurueckfaellt. */
.stw-pacc__body { padding: 0; background: var(--stw-surface-2); }
.stw-pacc__body .stw-pricetable-wrap { margin-top: 0; border: 0; border-radius: 0; border-top: 1px solid var(--stw-border); }