/* Christmas on Deck — Winter-Theme (Phase 2.25).
   REINER UMFÄRB-LAYER über die echten Bausteine aus main.css. Keine eigenen
   Komponenten — die Winter-Seite nutzt 1:1 dieselben Klassen wie die Startseite
   (header.full, content-blocks, masked mask-*, event/panel, button, footer),
   alles nur unter dem Scope .theme-winter umgefärbt. Sommerseite bleibt unberührt. */

.theme-winter {
  --w-red: #9b1e20;
  --w-red-bright: #cd3432;
  --w-tanne: #1f5641;
  --w-gold: #e0a23c;
  --w-cream: #f6ede0;
  --w-night: #10261f;
  /* Zentrale Akzent-Variablen des Funnels von Orange auf Winterrot umbiegen —
     fängt fast alle orangen Stellen (rsv-Cards, Slider, Icons) in einem Schwung. */
  --rsv-orange: #9b1e20;
  --card-accent: #9b1e20;
}

/* ── Restliche harte Orange-Stellen (#ff6633/#f63) → Winterrot ──────────── */
.theme-winter .indicator:not(.small) { background-color: var(--w-red); }
/* Indicator-Text auf rotem Disc lesbar machen (Adresse + Link waren dunkel) */
.theme-winter .indicator:not(.small) p,
.theme-winter .indicator:not(.small) a,
.theme-winter .indicator:not(.small)::after { color: #fff !important; }
.theme-winter .indicator:not(.small)::before { color: var(--w-gold) !important; }
.theme-winter .rsv-chip:focus-visible { border-color: var(--w-red); }
.theme-winter input,
.theme-winter [style*="accent-color"] { accent-color: var(--w-red); }
/* Orange Hover-Wellen auf secondary/tertiary-Buttons raus → sauberer roter Hover */
.theme-winter .button.secondary::before,
.theme-winter .button.tertiary::before { display: none !important; }
.theme-winter .button.secondary:hover,
.theme-winter .button.secondary:focus,
.theme-winter .button.tertiary:hover,
.theme-winter .button.tertiary:focus { background-color: var(--w-red) !important; color: #fff !important; }
/* Verzögerte color-Transition (`.2s ease .2s`) raus → kein Dunkel-Flackern beim
   Hover; Text wird synchron mit dem Hintergrund weiß. */
.theme-winter .button.secondary,
.theme-winter .button.tertiary { transition: background-color .18s ease, color .18s ease, border-color .18s ease !important; }

/* ── Logo: Header ROT (wie gewünscht), Footer weiss (dunkler Grund) ─────── */
/* Header-Logo bleibt unverändert rot (logo-christmas.svg). Footer hat dunklen
   Grund → dort Logo weiss via Inline-Filter im Markup. */

/* ── Primaerfarbe Orange (#f63) → Winterrot auf den ECHTEN Buttons ──────── */
.theme-winter .button:not(.secondary):not(.tertiary) { background-color: var(--w-red); }
.theme-winter .button.secondary { color: var(--w-red); border-color: var(--w-red); }
.theme-winter .button.tertiary { color: var(--w-red); }

/* ── Farbige content-blocks-Sektionen umfaerben ─────────────────────────── */
/* Cream → Winter-Creme */
.theme-winter .content-blocks.location,
.theme-winter .content-blocks.route { background-color: var(--w-cream); }
/* Welle weiß, unterste/oberste 2px hart in Creme → Seam-Linie weg. */
.theme-winter .content-blocks.location::before,
.theme-winter .content-blocks.route::before {
  background: linear-gradient(to bottom, #fff calc(100% - 2px), var(--w-cream) calc(100% - 2px)) !important;
  box-shadow: none !important;
}
.theme-winter .content-blocks.location::after,
.theme-winter .content-blocks.route::after {
  background: linear-gradient(to bottom, var(--w-cream) 2px, #fff 2px) !important;
  box-shadow: none !important;
}

/* Peach/Food → dunkles Tannengruen, Text hell */
.theme-winter .content-blocks.food { background-color: var(--w-night); }
.theme-winter .content-blocks.food .content :is(h1, h2, h3, p, li, span) { color: #fff; }
.theme-winter .content-blocks.food .content h2 { color: var(--w-gold); }

/* ── Footer: peach → Tannennacht ────────────────────────────────────────── */
.theme-winter footer { background-color: var(--w-night) !important; }
.theme-winter footer::before { background-color: var(--w-night) !important; }
.theme-winter footer nav ul li a { color: rgba(255, 255, 255, .8); }
.theme-winter footer nav ul li a:hover { color: var(--w-gold); }

/* ── Sommer-Deko-Icons (Palme, Liegestuhl, Fisch, Muschel …) ausblenden ─── */
/* Diese sitzen als background-image auf den Sektionen bzw. als content:url(icon-*)
   auf inneren Pseudo-Elementen. Die STRUKTUR-Wellen liegen dagegen direkt auf
   .content-blocks.X::before/::after (content:"") und bleiben erhalten. */
.theme-winter .content-blocks,
.theme-winter .event { background-image: none !important; }
.theme-winter .content-blocks .content::before,
.theme-winter .content-blocks .content::after,
.theme-winter .content-blocks .wrapper::before,
.theme-winter .content-blocks .wrapper::after,
.theme-winter .event .wrapper::before,
.theme-winter .event .wrapper::after,
.theme-winter .event .introduction::before,
.theme-winter .event .introduction::after { content: none !important; background-image: none !important; }

/* ── Querverweis zur Sommerseite (Overlay-Pill links, wie der Tour-Indicator) */
/* WICHTIG: absolut positioniert → liegt AUSSERHALB des Header-Flex-Flows, damit
   das Logo (header .wrapper a { margin:auto }) sauber zentriert bleibt. */
.theme-winter header.full .wrapper > .winter-cross {
  position: absolute; top: 50%; left: 1.5rem; transform: translateY(-50%); z-index: 4;
  margin: 0; display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(0, 0, 0, .35); color: #fff; backdrop-filter: blur(4px);
  font-size: .78rem; font-weight: 600; padding: .4rem .75rem; border-radius: 50px;
}
.theme-winter header.full .wrapper > .winter-cross:hover { background: var(--w-red); }
@media (max-width: 900px) { .winter-cross .wc-text { display: none; } }

/* ── Header-Logo zentrieren ─────────────────────────────────────────────── */
/* winter-cross + language-switch liegen absolut → das Logo ist der einzige
   In-Flow-Block und wird mittig gesetzt. */
.theme-winter header.full .wrapper { justify-content: center; }
.theme-winter header.full .brand-logo { margin-left: auto; margin-right: auto; }

/* ── Mehr Luft an farbigen Sektionen ────────────────────────────────────── */
/* Die Wellen (::before/::after) liegen absolut an den Sektionskanten. Bei
   kurzem Inhalt (wenige Listenpunkte) lief das nächste Heading sonst in die
   Welle. Genug Padding gibt den Wellen Raum. */
.theme-winter .content-blocks.location,
.theme-winter .content-blocks.bar,
.theme-winter .content-blocks.food,
.theme-winter .content-blocks.route { padding-top: 8rem; padding-bottom: 8rem; }

/* ── Intro-Deko: Palme → Strich-Schneeflocke (quadratisch, nicht das Palmen-
   Hochformat — sonst wird die Grafik verzerrt/riesig) ───────────────────── */
.theme-winter .header-image + .content-blocks .content::before {
  content: url(/site/icon-schneeflocke.svg) !important;
  width: 7rem !important;
  height: 7rem !important;
  top: 9rem !important;
  left: -1rem !important;
}

/* ── Maskierte Bilder nicht verzerren (Platzhalter haben andere Ratio) ──── */
.theme-winter .masked,
.theme-winter .masked-slider img,
.theme-winter .swiper-slide img { object-fit: cover; }

/* ── Weiße Linie im grünen Food/Eisstock-Feld weg ───────────────────────── */
/* section-mask6/5 machen die Welle oben solide, unten wellig — die weiße Welle
   läuft also crisp aus der weißen Nachbarsektion in eine wellige Kante. Die
   Linie kam vom box-shadow (1px-Kante am Element-Rechteck). Reine weiße Welle
   ohne box-shadow = sauber, exakt wie Sommer. */
/* Welle weiß (crisp, sichtbar). Die unterste 2px-Reihe des Wellen-Elements
   gibt durch Masken-Antialiasing eine weiße Seam-Linie auf dem dunklen Grün.
   Hart-Stop-Verlauf: 100% weiß bis auf die letzten 2px, die hart grün sind →
   deckt den Seam, ohne weichen Schatten. ::after spiegelverkehrt (oben 2px). */
.theme-winter .content-blocks.food::before {
  background: linear-gradient(to bottom, #fff calc(100% - 2px), var(--w-night) calc(100% - 2px)) !important;
  box-shadow: none !important;
}
.theme-winter .content-blocks.food::after {
  background: linear-gradient(to bottom, var(--w-night) 2px, #fff 2px) !important;
  box-shadow: none !important;
}

/* ── Sommer-Deko im Footer winterlich ───────────────────────────────────── */
.theme-winter footer::after { content: none !important; background-image: none !important; }
/* orange Trennlinie → dezentes Gold */
.theme-winter footer nav::before { background-color: rgba(224, 162, 60, .5) !important; }
/* Muschel auf Peach-Quadrat → Schneeflocke, Quadrat in Footer-Grün (unsichtbar) */
.theme-winter footer nav::after {
  content: url(/site/icon-schneeflocke.svg) !important;
  background-color: var(--w-night) !important;
}

/* ── Reservierungs-Button: EXAKT der Sommer-Button (.reservation-cta), nur rot.
   Position/Größe/Abstand kommen 1:1 aus der Sommer-CSS — kein Eigenbau. ───── */
.theme-winter header.full .reservation-cta {
  background: linear-gradient(180deg, #cd3432, #9b1e20);
  box-shadow: 0 6px 16px -6px rgba(155, 30, 32, 0.55);
}
.theme-winter header.full .reservation-cta:hover {
  background: linear-gradient(180deg, #cd3432, #7a1418);
  box-shadow: 0 12px 24px -8px rgba(155, 30, 32, 0.70);
}

/* ── Intro-Titel „Christmas on Deck": Sommer staffelt die Spans diagonal
   (.content-blocks:first-of-type h1 span odd/even). Im Winter beide linksbündig
   gestapelt — sieht mit zwei Wörtern sauberer aus. ──────────────────────── */
@media (min-width: 62em) {
  .theme-winter .content-blocks:first-of-type h1 span:nth-child(odd),
  .theme-winter .content-blocks:first-of-type h1 span:nth-child(2n) { align-self: flex-start; }
}

/* ── Doppelter Scrollbalken weg ─────────────────────────────────────────── */
/* main.css setzt `main{overflow-x:hidden}` → das macht overflow-y automatisch
   `auto` (CSS-Quirk) → main wird zweiter Scroll-Container. `clip` clippt ohne
   eigenen Scroll-Container; gescrollt wird normal über den Body. */
.theme-winter main { overflow: clip; }

/* ── Hub-Raster: 4 Karten als ausgewogenes 2×2 statt gequetschter 4er-Reihe ── */
/* Nur Winter — der Sommer-Hub hat 3 Karten und bleibt unverändert. */
.theme-winter .reservation-hub-grid { max-width: 800px; }
@media (min-width: 720px) {
  .theme-winter .reservation-hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .theme-winter .reservation-hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1400px) {
  .theme-winter .reservation-hub-grid:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; }
}

/* ── FUNNELS KOMPLETT ROT ───────────────────────────────────────────────── */
/* Die Funnel-Container (.reservation-hub/.funnel/.request) setzen --rsv-orange
   SELBST → der nähere Selektor gewinnt gegen .theme-winter. Plus: sehr viele
   rsv-*/rsv-flow-*/rsv-calendar-*-Regeln hardcoden #ff6633 direkt (nicht über
   die Variable). Beides hier sauber rot überschrieben. Rot-Töne:
   #9b1e20 (--w-red) · #cd3432 (--w-red-bright) · #7a1418 (dunkel). */

.theme-winter .reservation-hub,
.theme-winter .reservation-funnel,
.theme-winter .reservation-request {
  --rsv-orange: #9b1e20;
  --rsv-orange-soft: #cd3432;
}

/* Var-basierte Stellen explizit rot (nicht auf die Variablen-Vererbung verlassen) */
.theme-winter .rsv-flow-eyebrow,
.theme-winter .walkin-eyebrow,
.theme-winter .rsv-section-title { color: #9b1e20; }
.theme-winter .rsv-flow-progress-fill { background: #9b1e20; }

/* Gelbes Sommer-Quadrat hinter den Hub-Emojis → weiches Winterrot */
.theme-winter .reservation-card-icon { background: rgba(155, 30, 32, 0.12); }

/* Walk-In-Status: mehr Luft zwischen Eyebrow / Titel / Punkt / Text */
.theme-winter .walkin-status-section { padding: 28px 20px 16px; }
.theme-winter .walkin-eyebrow { margin-bottom: 20px; }
.theme-winter .walkin-status-title { margin-bottom: 20px; }
.theme-winter .walkin-status-pulse { margin: 8px auto 20px; }

/* Textfarben Orange → Rot */
.theme-winter .rsv-step-title,
.theme-winter .rsv-flow-step-title,
.theme-winter .rsv-flow-substep-title,
.theme-winter .rsv-checkout-step-title,
.theme-winter .rsv-stripe-handoff-title,
.theme-winter .rsv-success-title,
.theme-winter .rsv-modal-title,
.theme-winter .rsv-modal-pdf-title,
.theme-winter .rsv-stepper-num,
.theme-winter .rsv-stepper-input,
.theme-winter .rsv-inline-link,
.theme-winter .rsv-pkg-attachment-btn,
.theme-winter .rsv-calendar-nav,
.theme-winter .walkin-bullet { color: #9b1e20; }
.theme-winter .rsv-inline-link:hover { color: #7a1418; }

/* Solide Flächen Orange → Rot */
.theme-winter .rsv-icon-check,
.theme-winter .rsv-chip.selected { background: #9b1e20; }
.theme-winter .rsv-calendar-nav:hover:not(:disabled),
.theme-winter .rsv-calendar-day:hover:not(:disabled) { background: #9b1e20; }

/* Verläufe Orange → Rot */
.theme-winter .rsv-progress-fill { background: linear-gradient(90deg, #cd3432, #9b1e20); }
.theme-winter .rsv-stepper-btn { background: linear-gradient(180deg, #9b1e20, #7a1418); }
.theme-winter .rsv-btn-primary { background: linear-gradient(180deg, #9b1e20, #7a1418); }
.theme-winter .rsv-calendar-day.selected { background: linear-gradient(180deg, #cd3432, #9b1e20); }

/* Rahmen / Auswahl-States Orange → Rot */
.theme-winter .rsv-icon-card.selected,
.theme-winter .rsv-icon-card:focus-visible,
.theme-winter .rsv-chip.selected,
.theme-winter .rsv-chip:focus-visible,
.theme-winter .rsv-radio-card.selected,
.theme-winter .rsv-radio-card:focus-visible,
.theme-winter .rsv-textarea:focus,
.theme-winter .rsv-input:focus,
.theme-winter .rsv-input-small:focus,
.theme-winter .walkin-mini-link:hover { border-color: #9b1e20; }

/* Checkbox-/Accent-Farbe */
.theme-winter .rsv-checkbox-field input[type="checkbox"] { accent-color: #9b1e20; }

/* Stripe-Handoff-Spinner */
.theme-winter .rsv-stripe-handoff-spinner { border-top-color: #9b1e20; }

/* ── Orange-getönte rgba(255,102,51,α) → Rot rgba(155,30,32,α) ───────────── */
/* Rahmen (sonst orange Hairlines am ganzen Funnel) */
.theme-winter .rsv-progress,
.theme-winter .rsv-icon-card,
.theme-winter .rsv-chip,
.theme-winter .rsv-radio-card,
.theme-winter .rsv-pkg-card,
.theme-winter .rsv-pkg-card.disabled:hover,
.theme-winter .rsv-time-card,
.theme-winter .rsv-calendar,
.theme-winter .rsv-input-small,
.theme-winter .rsv-mini-stepper,
.theme-winter .rsv-section,
.theme-winter .reservation-card { border-color: rgba(155, 30, 32, 0.20); }

/* Flächen-Tints (Tracks, Icon-Backgrounds, Pill-Backgrounds) */
.theme-winter .rsv-progress-track { background: rgba(155, 30, 32, 0.12); }
.theme-winter .rsv-calendar-nav { background: rgba(155, 30, 32, 0.10); }
.theme-winter .rsv-pkg-incl-icon,
.theme-winter .rsv-included-icon { background: rgba(155, 30, 32, 0.12); }
.theme-winter .walkin-bullet { background: rgba(155, 30, 32, 0.16); }
.theme-winter .rsv-cal-legend-dot.avail { background: rgba(155, 30, 32, 0.45); }
.theme-winter .rsv-pkg-attachment-btn {
  background: rgba(155, 30, 32, 0.08);
  border-color: rgba(155, 30, 32, 0.20);
}
.theme-winter .rsv-pkg-attachment-btn:hover {
  background: rgba(155, 30, 32, 0.14);
  border-color: rgba(155, 30, 32, 0.35);
}

/* Ausgewählte Karten: warmer Orange/Gelb-Verlauf → weicher Rot-Verlauf */
.theme-winter .rsv-icon-card.selected {
  background: linear-gradient(135deg, rgba(205, 52, 50, 0.22), rgba(155, 30, 32, 0.10));
  box-shadow: 0 8px 24px -8px rgba(155, 30, 32, 0.35);
}
.theme-winter .rsv-radio-card.selected {
  background: linear-gradient(90deg, rgba(205, 52, 50, 0.18), rgba(155, 30, 32, 0.08));
}

/* Schatten / Glows Orange → Rot */
.theme-winter .rsv-stepper-btn { box-shadow: 0 6px 16px -4px rgba(155, 30, 32, 0.50); }
.theme-winter .rsv-stepper-btn:hover { box-shadow: 0 10px 22px -4px rgba(155, 30, 32, 0.65); }
.theme-winter .rsv-btn-primary { box-shadow: 0 8px 24px -8px rgba(155, 30, 32, 0.55); }
.theme-winter .rsv-btn-primary:hover:not(:disabled) { box-shadow: 0 14px 32px -10px rgba(155, 30, 32, 0.70); }
.theme-winter .rsv-btn-primary:disabled { background: rgba(155, 30, 32, 0.35); }
.theme-winter .rsv-pkg-card.selected { box-shadow: 0 14px 30px -14px rgba(155, 30, 32, 0.40); }
.theme-winter .rsv-pkg-badge { box-shadow: 0 4px 10px -4px rgba(155, 30, 32, 0.50); }
.theme-winter .rsv-calendar-day.selected { box-shadow: 0 6px 14px -4px rgba(155, 30, 32, 0.55); }
.theme-winter .rsv-success-mark svg { filter: drop-shadow(0 8px 16px rgba(155, 30, 32, 0.30)); }
.theme-winter .rsv-stripe-handoff-spinner { border-color: rgba(155, 30, 32, 0.18); border-top-color: #9b1e20; }

/* Outlines (Focus + heutiger Kalendertag) */
.theme-winter .rsv-stepper-input:focus { outline-color: rgba(155, 30, 32, 0.30); }
.theme-winter .rsv-calendar-day.today { outline-color: rgba(155, 30, 32, 0.40); }

/* Paket-Karten (Tisch-Funnel) */
.theme-winter .rsv-pkg-price,
.theme-winter .rsv-pkg-incl-icon { color: #9b1e20; }
.theme-winter .rsv-pkg-badge {
  background: linear-gradient(180deg, #cd3432, #9b1e20) !important;
  box-shadow: 0 4px 10px -4px rgba(155, 30, 32, 0.5) !important;
}
.theme-winter .rsv-pkg-card:focus-visible,
.theme-winter .rsv-pkg-card.selected { border-color: #9b1e20; }
.theme-winter .rsv-pkg-card.selected { background: linear-gradient(180deg, #fff, rgba(205, 52, 50, 0.10)); }

/* Uhrzeit-Karten (Tisch-Funnel) */
.theme-winter .rsv-time-card:hover,
.theme-winter .rsv-time-card.selected { border-color: #9b1e20; }
.theme-winter .rsv-time-card.selected { background: linear-gradient(180deg, #cd3432, #9b1e20); }

/* Footer-Summe, Kompakt-Preis, Section-Titel, Rechnungs-Block */
.theme-winter .rsv-foot-total,
.theme-winter .rsv-foot-total-value,
.theme-winter .rsv-compact-price-amount,
.theme-winter .rsv-section-title { color: #9b1e20; }
.theme-winter .rsv-invoice-block { border-color: rgba(155, 30, 32, 0.20); }

/* ── SULU-Buttons (.button) auf Homepage/Hub/Walk-In: orange → rot ──────── */
.theme-winter .button { background-color: #9b1e20; }
.theme-winter .button:hover,
.theme-winter .button:focus { background-color: #7a1418; }
.theme-winter .button.secondary {
  color: #9b1e20;
  border-color: #9b1e20;
  background-color: transparent;
}
.theme-winter .button.secondary:hover,
.theme-winter .button.secondary:focus { background-color: #9b1e20; color: #fff; }
.theme-winter .button.tertiary { color: #9b1e20; background-color: #fff; }
.theme-winter .call-to-action .button { color: #9b1e20; background-color: #fff; }

/* ── Funnel-Inputs: Rahmen rot-getönt statt orange/braun ────────────────── */
.theme-winter .rsv-input,
.theme-winter .rsv-textarea { border-color: rgba(155, 30, 32, 0.22); }

/* ── Mini-Stepper-Buttons (Personen +/−) rot ────────────────────────────── */
.theme-winter .rsv-mini-stepper button { background: #9b1e20; }
.theme-winter .rsv-mini-stepper button:hover { background: #7a1418; }

/* ── Hero-Unterkante: feine dunkle Seam-Linie weg ───────────────────────── */
/* .header-image.small::after ist eine weiße Welle bei bottom:-1px. Auf den
   dunklen Winter-Hero-Fotos blitzt an der Foto-Unterkante ein 1px-Seam durch,
   weil die Welle nur 1px überlappt. Etwas mehr Überlappung (white-on-white
   darunter = unsichtbar) deckt die Kante sauber ab. */
.theme-winter .header-image.small::after {
  bottom: -2px !important;
  width: 102% !important;
}

/* ── Schneefall (einzige Eigen-Komponente, rein dekorativ) ──────────────── */
.winter-snow { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.winter-snow .flake {
  position: absolute; top: -24px; color: #fff; opacity: .7;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  animation: winter-fall linear infinite;
}
@keyframes winter-fall { to { transform: translateY(106vh) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .winter-snow { display: none; } }