/* =====================================================================
   Goldzeit Kosmetik — Halloween-Special "Night Edition"
   Wird nur geladen, solange $halloween in includes/layout_header.php true
   ist (endet automatisch am 01.11.). Alles ist unter html.halloween
   gescoped: ohne die Klasse greift keine einzige Regel dieser Datei.
   Reine Optik — Markup, Klassen und Buchungslogik bleiben unverändert.
   ===================================================================== */

html.halloween {
  /* Nachtpalette */
  --hw-night: #0B0910;
  --hw-violet: #6B4A9E;
  --hw-violet-light: #C7B3EE;
  --hw-wine: #7A2335;
  --hw-wine-deep: #43121E;
  --hw-surface: rgba(24, 18, 32, 0.78);
  --hw-surface-hi: rgba(38, 29, 50, 0.9);
  --hw-line: rgba(194, 154, 69, 0.24);

  /* Bestehende Marken-Tokens auf Nacht umgebogen — style.css und
     tailwind-lite.css färben sich damit automatisch mit um. */
  --cream: var(--hw-night);
  --cream-dark: #14101A;
  --ink: #F3E7D3;
  --ink-light: #CDBFAD;
  --ink-muted: #978B80;
  --teal: #A88BDA;
  --teal-light: var(--hw-violet-light);
  --teal-deep: #EBDAB6;
  --teal-dark: #2B1D3F;
  --gold-light: #F1DFA8;
  --tw-cream: var(--cream);
  --tw-cream-dark: var(--cream-dark);
  --tw-ink: var(--ink);
  --tw-ink-light: var(--ink-light);
  --tw-ink-muted: var(--ink-muted);
  --tw-teal: var(--teal);
  --tw-teal-light: var(--teal-light);
  --tw-teal-deep: var(--teal-deep);
  --tw-teal-dark: var(--teal-dark);

  color-scheme: dark;
  accent-color: var(--gold);
}

html.halloween body {
  color: var(--ink);
  background:
    radial-gradient(ellipse 110% 70% at 50% -12%, #2A1A3D 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(122, 35, 53, 0.22), transparent 65%),
    var(--hw-night);
  background-attachment: fixed;
}

html.halloween ::selection { background: rgba(194, 154, 69, 0.35); color: #fff; }

/* ---------- Lichtstimmung (vorhandene Glows umgefärbt) ---------- */

/* closest-side: läuft bei jedem Seitenverhältnis bis zum Rand aus (sonst harte Kante auf Hochformat) */
html.halloween .ambient-teal-glow {
  background: radial-gradient(closest-side, rgba(107, 74, 158, 0.3), rgba(107, 74, 158, 0.1) 60%, transparent);
}
html.halloween .ambient-gold-glow {
  background: radial-gradient(closest-side, rgba(194, 154, 69, 0.16), rgba(122, 35, 53, 0.12) 60%, transparent);
}

/* ---------- Tailwind-Farbklassen (das CDN schreibt feste Hex-Werte) ---------- */

html.halloween .text-teal-deep { color: var(--teal-deep); }
html.halloween .text-teal { color: var(--teal); }
html.halloween .text-ink { color: var(--ink); }
html.halloween .text-ink-light { color: var(--ink-light); }
html.halloween .text-ink-muted { color: var(--ink-muted); }
html.halloween .text-gold-dark { color: var(--gold); }
html.halloween .text-red-600,
html.halloween .text-red-700 { color: #F2A3AF; }
/* Hover-Varianten müssen gegen die Überschreibungen oben gewinnen */
html.halloween .hover\:text-gold:hover,
html.halloween .group:hover .group-hover\:text-gold { color: var(--gold-light); }
html.halloween .hover\:text-teal-deep:hover { color: var(--teal-deep); }

html.halloween .bg-white,
html.halloween .bg-white\/80,
html.halloween .bg-white\/70 { background-color: var(--hw-surface); }
html.halloween .hover\:bg-white:hover { background-color: var(--hw-surface-hi); }
html.halloween .hover\:bg-gold\/5:hover { background-color: rgba(194, 154, 69, 0.1); }
html.halloween .bg-cream,
html.halloween .bg-cream\/70,
html.halloween .bg-cream\/90 { background-color: rgba(11, 9, 16, 0.55); }
html.halloween .bg-cream-dark { background-color: var(--cream-dark); }
html.halloween .bg-cream-dark\/60 { background-color: rgba(20, 16, 26, 0.6); }
html.halloween .bg-teal\/10 { background-color: rgba(168, 139, 218, 0.13); }
html.halloween .bg-teal\/15 { background-color: rgba(168, 139, 218, 0.17); }
html.halloween .border-teal\/20 { border-color: rgba(168, 139, 218, 0.28); }
html.halloween .bg-red-50,
html.halloween .bg-red-100 { background-color: rgba(122, 35, 53, 0.3); }
html.halloween .border-red-200 { border-color: rgba(242, 163, 175, 0.3); }
html.halloween .bg-amber-50 { background-color: rgba(194, 154, 69, 0.1); }

/* Dunkle Akzent-Buttons/Chips (Erfolg- & Stornoseite) → Bordeaux mit Gold */
html.halloween .bg-teal-deep {
  background: linear-gradient(135deg, var(--hw-wine), var(--hw-wine-deep));
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1px rgba(194, 154, 69, 0.45);
}
html.halloween .from-teal-deep { background-image: linear-gradient(to top right, var(--hw-wine), var(--hw-violet)); }
html.halloween .shadow-teal-glow { box-shadow: 0 0 30px rgba(107, 74, 158, 0.55); }

/* ---------- Header, Footer, Cookie-Hinweis ---------- */

/* Logo (weißer Hintergrund) als rundes Emblem */
html.halloween header img[src$="logo.webp"] {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(194, 154, 69, 0.45), 0 0 18px rgba(194, 154, 69, 0.22);
}

html.halloween .glass-header {
  background: rgba(11, 9, 16, 0.72);
  border-bottom-color: rgba(194, 154, 69, 0.18);
}
html.halloween footer { border-top-color: rgba(194, 154, 69, 0.35); }
html.halloween footer .border-gold { border-color: rgba(194, 154, 69, 0.25); }

html.halloween .cookie-notice {
  background: rgba(20, 15, 27, 0.96);
  border-color: rgba(194, 154, 69, 0.3);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html.halloween .cookie-notice__button {
  background: linear-gradient(135deg, var(--hw-wine), var(--hw-wine-deep));
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1px rgba(194, 154, 69, 0.45);
}

/* ---------- Dark-Luxury-Cards ---------- */

html.halloween .glass-card,
html.halloween .booking-card {
  background: linear-gradient(160deg, rgba(31, 23, 42, 0.74), rgba(15, 11, 21, 0.66));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hw-line);
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(239, 220, 162, 0.07);
}
html.halloween .glass-card:hover {
  border-color: rgba(194, 154, 69, 0.5);
  box-shadow: 0 26px 54px -20px rgba(107, 74, 158, 0.55), 0 0 0 1px rgba(194, 154, 69, 0.12), inset 0 1px 0 rgba(239, 220, 162, 0.1);
}

/* Überschriften mit leichtem Goldschein */
html.halloween h1 > .font-display,
html.halloween .brand .word { text-shadow: 0 0 34px rgba(194, 154, 69, 0.28); }

html.halloween .gold-divider,
html.halloween .divider {
  box-shadow: 0 0 12px rgba(239, 220, 162, 0.45);
  animation: hw-glow 5s ease-in-out infinite;
}

/* ---------- Buttons: Bordeaux & Gold ---------- */

/* Selektorlänge = style.css (@media min-width 640px), damit wir dort gewinnen */
html.halloween .bg-gradient-to-r.from-gold.to-gold-dark,
html.halloween #bookingApp .primary,
html.halloween #expiryModal .primary,
html.halloween main > .booking-card .primary {
  background: linear-gradient(135deg, var(--hw-wine) 0%, #5A1828 55%, var(--hw-wine-deep) 100%);
  color: var(--gold-light);
  border: 1px solid rgba(194, 154, 69, 0.55);
  box-shadow: 0 10px 26px -12px rgba(122, 35, 53, 0.9), inset 0 1px 0 rgba(239, 220, 162, 0.18);
  transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s cubic-bezier(.16,1,.3,1), border-color 0.45s cubic-bezier(.16,1,.3,1);
}
html.halloween .bg-gradient-to-r.from-gold.to-gold-dark:hover,
html.halloween #bookingApp .primary:hover:not(:disabled),
html.halloween #expiryModal .primary:hover,
html.halloween main > .booking-card .primary:hover {
  background: linear-gradient(135deg, #8A2A3D 0%, #651B2D 55%, #4C1522 100%);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(239, 220, 162, 0.25), 0 0 26px rgba(194, 154, 69, 0.38), 0 12px 28px -12px rgba(122, 35, 53, 0.9);
}
html.halloween .btn-shimmer::after {
  background: linear-gradient(120deg, transparent, rgba(239, 220, 162, 0.35), transparent);
}

html.halloween #bookingApp .secondary {
  background: transparent;
  color: var(--teal-deep);
  border-color: rgba(194, 154, 69, 0.4);
}
html.halloween #bookingApp .secondary:hover:not(:disabled) {
  background: rgba(194, 154, 69, 0.08);
  border-color: var(--gold);
}

/* ---------- Buchungs-Wizard (termin-buchen) ---------- */

html.halloween .booking-progress { background: rgba(255, 255, 255, 0.06); }
html.halloween .booking-progress span {
  background: linear-gradient(90deg, var(--hw-violet), var(--gold));
  box-shadow: 0 0 12px rgba(194, 154, 69, 0.45);
}
html.halloween .countdown {
  background: rgba(168, 139, 218, 0.14);
  color: var(--hw-violet-light);
  box-shadow: inset 0 0 0 1px rgba(168, 139, 218, 0.25);
}

html.halloween .choice,
html.halloween .slot,
html.halloween .date-choice {
  background: var(--hw-surface);
  border-color: var(--hw-line);
  color: var(--ink);
}
html.halloween .choice:hover,
html.halloween .slot:not(:disabled):hover,
html.halloween .date-choice:not(:disabled):hover {
  border-color: var(--gold);
  background: var(--hw-surface-hi);
  box-shadow: 0 0 22px -4px rgba(194, 154, 69, 0.35);
}
html.halloween .choice.is-selected,
html.halloween .slot.is-selected,
html.halloween .date-choice.is-selected {
  border-color: var(--gold);
  background: linear-gradient(150deg, rgba(107, 74, 158, 0.34), rgba(122, 35, 53, 0.22));
  box-shadow: 0 0 0 1px rgba(194, 154, 69, 0.4), 0 0 26px rgba(107, 74, 158, 0.45);
}
html.halloween .slot:disabled,
html.halloween .date-choice:disabled { background: rgba(255, 255, 255, 0.025); }

/* Karten eines Schritts blenden nacheinander ein (translate statt transform,
   damit der Hover-Lift der Karten erhalten bleibt) */
html.halloween .choice-grid > *,
html.halloween .date-row > * { animation: hw-card-in 0.7s cubic-bezier(.16,1,.3,1) both; }
html.halloween .choice-grid > :nth-child(2), html.halloween .date-row > :nth-child(2) { animation-delay: .06s; }
html.halloween .choice-grid > :nth-child(3), html.halloween .date-row > :nth-child(3) { animation-delay: .12s; }
html.halloween .choice-grid > :nth-child(4), html.halloween .date-row > :nth-child(4) { animation-delay: .18s; }
html.halloween .choice-grid > :nth-child(5), html.halloween .date-row > :nth-child(5) { animation-delay: .24s; }
html.halloween .choice-grid > :nth-child(6), html.halloween .date-row > :nth-child(6) { animation-delay: .3s; }
html.halloween .choice-grid > :nth-child(n+7), html.halloween .date-row > :nth-child(n+7) { animation-delay: .36s; }

html.halloween .field input,
html.halloween .field textarea {
  background: rgba(11, 9, 16, 0.6);
  border-color: rgba(194, 154, 69, 0.28);
  color: var(--ink);
  transition: border-color .3s, box-shadow .3s;
}
html.halloween .field input:focus,
html.halloween .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(194, 154, 69, 0.18);
}
html.halloween .field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #17111E inset;
  -webkit-text-fill-color: var(--ink);
}
html.halloween .summary {
  background: rgba(11, 9, 16, 0.55);
  box-shadow: inset 0 0 0 1px var(--hw-line);
}
html.halloween .notice.error { color: #F7B9C3; background: rgba(122, 35, 53, 0.35); }
html.halloween .notice.warn { color: var(--gold-light); background: rgba(194, 154, 69, 0.14); }

/* ---------- Vorher/Nachher-Kürbis (includes/halloween_pumpkin.php) ---------- */

/* --p kommt vom Regler (0..1); --edge ist die Vorderkante des goldenen Wischs */
.hw-pumpkin { --p: 0; --edge: calc(var(--p) * 130%); }

.hw-pumpkin__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 380px;
  margin: 0.75rem auto 0.5rem;
}
.hw-pumpkin__layer { position: absolute; inset: 0; }
.hw-pumpkin__layer svg { width: 100%; height: 100%; max-width: none; }
.hw-pumpkin__before {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--edge) - 30%), #000 var(--edge));
  mask-image: linear-gradient(90deg, transparent calc(var(--edge) - 30%), #000 var(--edge));
}
.hw-pumpkin__after {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--edge) - 30%), transparent var(--edge));
  mask-image: linear-gradient(90deg, #000 calc(var(--edge) - 30%), transparent var(--edge));
}
/* Lichtband an der Wischkante, nur sichtbar während der Verwandlung */
.hw-pumpkin__sweep {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: calc(var(--edge) - 15%);
  width: 16%;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(255, 226, 160, 0.6), transparent);
  opacity: calc(min(var(--p), 1 - var(--p)) * 5);
  mix-blend-mode: screen;
  pointer-events: none;
}
.hw-pk-halo { animation: hw-glow 4s ease-in-out infinite; }
.hw-pk-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: hw-twinkle 2.8s ease-in-out infinite;
}
.hw-pumpkin__after g > g:nth-child(2n) .hw-pk-spark { animation-delay: -1.1s; }
.hw-pumpkin__after g > g:nth-child(3n) .hw-pk-spark { animation-delay: -2s; }

/* Regler: 6px Spur, aber 28px Trefferfläche für Finger */
.hw-pumpkin__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: min(100%, 320px);
  height: 28px;
  margin: 0 auto;
  background: linear-gradient(90deg, #5A4A3A, var(--gold) 60%, var(--gold-light)) center / 100% 6px no-repeat;
  border-radius: 99px;
  cursor: pointer;
}
.hw-pumpkin__range:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.hw-pumpkin__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF1C9, var(--gold) 60%, #8A6626);
  border: 2px solid #1A1320;
  box-shadow: 0 0 0 1px rgba(239, 220, 162, 0.6), 0 0 18px rgba(194, 154, 69, 0.6);
  cursor: grab;
  animation: hw-thumb 2.4s ease-in-out infinite;
}
.hw-pumpkin__range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF1C9, var(--gold) 60%, #8A6626);
  border: 2px solid #1A1320;
  box-shadow: 0 0 0 1px rgba(239, 220, 162, 0.6), 0 0 18px rgba(194, 154, 69, 0.6);
  cursor: grab;
}
.hw-pumpkin__range::-moz-range-track { background: transparent; }
.hw-pumpkin__range:active::-webkit-slider-thumb { cursor: grabbing; }

.hw-pumpkin__labels {
  display: flex;
  justify-content: space-between;
  width: min(100%, 320px);
  margin: 0.5rem auto 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hw-pumpkin__labels span:last-child { color: var(--gold); }

/* "Hol es dir jetzt" blendet erst bei Regler ganz rechts ein (Klasse is-done per oninput);
   visibility hält den Button bis dahin aus Tab-Reihenfolge und Klicks heraus */
.hw-pumpkin__cta {
  margin-top: 1rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1), translate 0.6s cubic-bezier(.16,1,.3,1), visibility 0.6s;
}
.hw-pumpkin.is-done .hw-pumpkin__cta { opacity: 1; visibility: visible; translate: 0 0; }

@keyframes hw-twinkle { 0%, 100% { opacity: 0.3; scale: 0.6; } 50% { opacity: 1; scale: 1; } }
@keyframes hw-thumb {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239, 220, 162, 0.6), 0 0 14px rgba(194, 154, 69, 0.45); }
  50% { box-shadow: 0 0 0 1px rgba(239, 220, 162, 0.9), 0 0 26px rgba(194, 154, 69, 0.85); }
}

/* =====================================================================
   Hintergrund-Deko (includes/halloween_decor.php)
   z-index -1: liegt hinter allen Inhalten, Glas-Karten blurren sie.
   Animiert wird nur transform/opacity (GPU), nichts davon ist klickbar.
   ===================================================================== */

.hw-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hw-decor svg { max-width: none; } /* tailwind-lite setzt svg{max-width:100%} */

.hw-fog {
  position: absolute;
  left: 0;
  width: 200%;
  background:
    radial-gradient(ellipse 18% 45% at 8% 60%, rgba(160, 140, 200, 0.16), transparent 70%),
    radial-gradient(ellipse 22% 50% at 27% 70%, rgba(125, 105, 165, 0.13), transparent 70%),
    radial-gradient(ellipse 16% 40% at 50% 55%, rgba(175, 155, 205, 0.12), transparent 70%),
    radial-gradient(ellipse 20% 48% at 71% 66%, rgba(135, 115, 175, 0.14), transparent 70%),
    radial-gradient(ellipse 18% 45% at 92% 58%, rgba(160, 140, 200, 0.12), transparent 70%);
  animation: hw-fog 90s linear infinite alternate;
  will-change: transform;
}
.hw-fog--low { bottom: -10vh; height: 60vh; opacity: 0.9; }
.hw-fog--high { top: 0; height: 50vh; opacity: 0.35; animation-duration: 130s; animation-direction: alternate-reverse; }

.hw-moon {
  position: absolute;
  top: 7.5rem;
  right: 7vw;
  width: 88px;
  height: 88px;
  opacity: 0.6;
}
.hw-moon::before {
  content: "";
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 220, 162, 0.2), transparent 62%);
  animation: hw-glow 7s ease-in-out infinite;
}
.hw-moon svg { position: relative; width: 100%; height: 100%; }

.hw-web {
  position: absolute;
  width: 230px;
  height: 230px;
  fill: none;
  stroke: rgba(239, 220, 162, 0.11);
  stroke-width: 0.8;
}
.hw-web--tl { top: 5rem; left: 0; }
.hw-web--br { bottom: 0; right: 0; transform: rotate(180deg); }

.hw-spider {
  position: absolute;
  top: 0;
  left: 132px;
  width: 1px;
  height: 11rem;
  background: linear-gradient(rgba(239, 220, 162, 0.08), rgba(239, 220, 162, 0.3));
  animation: hw-spider 11s ease-in-out infinite;
  will-change: transform;
}
.hw-spider svg {
  position: absolute;
  bottom: -15px;
  left: -9px;
  width: 19px;
  height: 19px;
  color: var(--gold);
  opacity: 0.75;
  filter: drop-shadow(0 0 4px rgba(194, 154, 69, 0.5));
}

.hw-bat {
  position: absolute;
  left: 0;
  top: var(--y);
  width: var(--s);
  color: #CDBFE8;
  opacity: 0.17;
  transform: translate3d(-15vw, 0, 0);
  animation: hw-fly var(--t) linear var(--d) infinite;
  will-change: transform;
}
.hw-bat svg {
  width: 100%;
  height: auto;
  transform-origin: 50% 35%;
  animation: hw-flap 0.34s ease-in-out infinite alternate;
}

.hw-dust {
  position: absolute;
  bottom: -12px;
  left: var(--x);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 6px 1px rgba(239, 220, 162, 0.7);
  opacity: 0;
  animation: hw-rise var(--t) linear var(--d) infinite;
  will-change: transform, opacity;
}
.hw-dust:nth-of-type(3n) { background: var(--hw-violet-light); box-shadow: 0 0 6px 1px rgba(199, 179, 238, 0.6); }

@keyframes hw-fog { to { transform: translate3d(-50%, 0, 0); } }
@keyframes hw-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes hw-spider { 0%, 100% { transform: translate3d(0, -2.5rem, 0); } 50% { transform: translate3d(0, 0, 0); } }
@keyframes hw-flap { to { transform: scaleY(0.45); } }
@keyframes hw-fly {
  0%   { transform: translate3d(-15vw, 0, 0); }
  15%  { transform: translate3d(20vw, -4vh, 0); }
  30%  { transform: translate3d(55vw, 2vh, 0); }
  45%  { transform: translate3d(90vw, -3vh, 0); }
  55%, 100% { transform: translate3d(115vw, -1vh, 0); }
}
@keyframes hw-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 0.75; }
  85%  { opacity: 0.45; }
  100% { transform: translate3d(var(--dx), -105vh, 0); opacity: 0; }
}
@keyframes hw-card-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* Mobil: Hintergrund reduzieren, damit die Buchung schnell & ruhig bleibt */
@media (max-width: 640px) {
  .hw-bat,
  .hw-spider,
  .hw-fog--high,
  .hw-web--br,
  .hw-dust:nth-of-type(2n) { display: none; }
  .hw-moon { top: 6rem; right: -12px; width: 46px; height: 46px; opacity: 0.5; } /* am Rand, nicht über dem Hero-Text */
  .hw-web { width: 150px; height: 150px; }
  html.halloween body { background-attachment: scroll; }
}