/* =====================================================
   SAISONS (scripts/saison/saison.js, Migration 69)
   -----------------------------------------------------
   html[data-fh-saison] traegt die laufende Saison. Die Paletten
   stehen als Tokens in css/00-basis.css (--fh-halloween-* usw.);
   hier werden sie auf die allgemeinen Tokens umgelegt, damit die
   ganze Seite mitfaerbt. Die Spielfarben (--fh-cold, Parteien,
   Waehrungen) bleiben bewusst stehen - die tragen Bedeutung.

   1. Farben je Saison
   2. Atmosphaere, Effektflaeche, Rail-Logo, Wasserzeichen
   3. Saison-Leiste und Chips
   4. Versteckte Funde und Hinweis
   5. Neujahr: 0-Uhr-Moment
   6. Adventskalender und Tuerchen-Fenster
===================================================== */

/* =====================================================
   1. FARBEN JE SAISON
===================================================== */
html[data-fh-saison="halloween"] {
  --fh-sa-akzent: var(--fh-halloween-akzent);   --fh-sa-akzent-tief: var(--fh-halloween-akzent-tief);
  --fh-sa-alt: var(--fh-halloween-alt);         --fh-sa-alt-tief: var(--fh-halloween-alt-tief);
  --fh-sa-flaeche: var(--fh-halloween-flaeche); --fh-sa-flaeche-tief: var(--fh-halloween-flaeche-tief);
  --fh-sa-rand: var(--fh-halloween-rand);       --fh-sa-rand-stark: var(--fh-halloween-rand-stark);
  --fh-sa-matt: var(--fh-halloween-matt);       --fh-sa-grund: var(--fh-halloween-grund);
  --fh-sa-flamme: var(--fh-halloween-flamme);   --fh-sa-flamme-tief: var(--fh-halloween-flamme-tief);
  --fh-sa-kante: var(--fh-halloween-akzent);
  --fh-sa-atmos:
    radial-gradient(520px 520px at 84% 6%, color-mix(in srgb, var(--fh-halloween-akzent) 22%, transparent), transparent 70%),
    radial-gradient(900px 700px at 18% 95%, color-mix(in srgb, var(--fh-halloween-alt) 20%, transparent), transparent 70%);
}
html[data-fh-saison="weihnachten"] {
  --fh-sa-akzent: var(--fh-weihnachten-akzent);   --fh-sa-akzent-tief: var(--fh-weihnachten-akzent-tief);
  --fh-sa-alt: var(--fh-weihnachten-alt);         --fh-sa-alt-tief: var(--fh-weihnachten-alt-tief);
  --fh-sa-flaeche: var(--fh-weihnachten-flaeche); --fh-sa-flaeche-tief: var(--fh-weihnachten-flaeche-tief);
  --fh-sa-rand: var(--fh-weihnachten-rand);       --fh-sa-rand-stark: var(--fh-weihnachten-rand-stark);
  --fh-sa-matt: var(--fh-weihnachten-matt);       --fh-sa-grund: var(--fh-weihnachten-grund);
  --fh-sa-flamme: var(--fh-weihnachten-flamme);   --fh-sa-flamme-tief: var(--fh-weihnachten-flamme-tief);
  --fh-sa-kante: var(--fh-weihnachten-schnee);
  --fh-sa-atmos:
    radial-gradient(1100px 520px at 50% -10%, color-mix(in srgb, var(--fh-weihnachten-tanne) 20%, transparent), transparent 70%),
    radial-gradient(700px 600px at 92% 100%, color-mix(in srgb, var(--fh-weihnachten-alt) 12%, transparent), transparent 70%);
}
html[data-fh-saison="neujahr"] {
  --fh-sa-akzent: var(--fh-neujahr-akzent);   --fh-sa-akzent-tief: var(--fh-neujahr-akzent-tief);
  --fh-sa-alt: var(--fh-neujahr-alt);         --fh-sa-alt-tief: var(--fh-neujahr-alt-tief);
  --fh-sa-flaeche: var(--fh-neujahr-flaeche); --fh-sa-flaeche-tief: var(--fh-neujahr-flaeche-tief);
  --fh-sa-rand: var(--fh-neujahr-rand);       --fh-sa-rand-stark: var(--fh-neujahr-rand-stark);
  --fh-sa-matt: var(--fh-neujahr-matt);       --fh-sa-grund: var(--fh-neujahr-grund);
  --fh-sa-flamme: var(--fh-neujahr-flamme);   --fh-sa-flamme-tief: var(--fh-neujahr-flamme-tief);
  --fh-sa-kante: var(--fh-neujahr-akzent);
  --fh-sa-atmos:
    radial-gradient(900px 600px at 70% 0%, color-mix(in srgb, var(--fh-neujahr-alt) 26%, transparent), transparent 70%),
    radial-gradient(600px 500px at 8% 100%, color-mix(in srgb, var(--fh-neujahr-akzent) 10%, transparent), transparent 70%);
}
html[data-fh-saison="ostern"] {
  --fh-sa-akzent: var(--fh-ostern-akzent);   --fh-sa-akzent-tief: var(--fh-ostern-akzent-tief);
  --fh-sa-alt: var(--fh-ostern-alt);         --fh-sa-alt-tief: var(--fh-ostern-alt-tief);
  --fh-sa-flaeche: var(--fh-ostern-flaeche); --fh-sa-flaeche-tief: var(--fh-ostern-flaeche-tief);
  --fh-sa-rand: var(--fh-ostern-rand);       --fh-sa-rand-stark: var(--fh-ostern-rand-stark);
  --fh-sa-matt: var(--fh-ostern-matt);       --fh-sa-grund: var(--fh-ostern-grund);
  --fh-sa-flamme: var(--fh-ostern-flamme);   --fh-sa-flamme-tief: var(--fh-ostern-flamme-tief);
  --fh-sa-kante: var(--fh-ostern-alt);
  --fh-sa-atmos:
    radial-gradient(1000px 520px at 50% 110%, color-mix(in srgb, var(--fh-ostern-alt) 20%, transparent), transparent 70%),
    radial-gradient(700px 500px at 0% 0%, color-mix(in srgb, var(--fh-ostern-akzent) 14%, transparent), transparent 70%);
}

/* Die allgemeinen Tokens folgen der Saison. */
html[data-fh-saison] {
  --fh-bg: var(--fh-sa-grund);
  --fh-gold: var(--fh-sa-akzent-tief);
  --fh-gold-bright: var(--fh-sa-akzent);
  --fh-surface: var(--fh-sa-flaeche-tief);
  --fh-surface-2: var(--fh-sa-flaeche);
  --fh-surface-light: var(--fh-sa-flaeche);
  --fh-border: var(--fh-sa-rand);
  --fh-border-strong: var(--fh-sa-rand-stark);
  --fh-muted-fg: var(--fh-sa-matt);
  --fh-fire: var(--fh-sa-flamme);
  --fh-fire-deep: var(--fh-sa-flamme-tief);
  --fh-glow-gold: 0 0 30px color-mix(in srgb, var(--fh-sa-akzent) 35%, transparent);
  --menu-hex1: var(--fh-sa-akzent);
}

/* Karten und Knoepfe aus dem 1c-Rahmen tragen ihre Farben teils als
   Rohwert - hier ziehen sie mit. */
html[data-fh-saison] .fh-card {
  background: linear-gradient(160deg, var(--fh-sa-flaeche), var(--fh-sa-flaeche-tief));
}
html[data-fh-saison] .fh-card-gold {
  border-color: color-mix(in srgb, var(--fh-sa-akzent-tief) 32%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fh-sa-akzent-tief) 14%, var(--fh-sa-flaeche-tief)), var(--fh-sa-flaeche-tief));
}
html[data-fh-saison] .fh-cta {
  border-color: color-mix(in srgb, var(--fh-sa-akzent-tief) 55%, transparent);
}
html[data-fh-saison] .fh-cta:hover,
html[data-fh-saison] .fh-cta:focus-visible {
  border-color: var(--fh-sa-akzent);
  background: color-mix(in srgb, var(--fh-sa-akzent-tief) 12%, transparent);
}
html[data-fh-saison] .fh-sidebar-flame {
  box-shadow: 0 0 22px -6px var(--fh-sa-flamme);
}

/* =====================================================
   2. ATMOSPHAERE, EFFEKTFLAECHE, RAIL-LOGO, WASSERZEICHEN
===================================================== */
/* Eine Flaeche fuer beides: der Farbschein als Hintergrund, Schnee,
   Glut, Blueten und Feuerwerk auf der Leinwand darueber. Ueber den
   Sternen (-5), unter dem Inhalt. */
.fh-sa-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -4;
  background: var(--fh-sa-atmos, none);
}
.fh-sa-fx[hidden] { display: none; }

.fh-sa-logo {
  width: 22px;
  height: 22px;
  color: var(--fh-fg);
}

/* Wasserzeichen in der Weiterlesen-Karte: das Symbol der Saison,
   als Maske, damit es die Akzentfarbe annimmt. */
html[data-fh-saison] #fh-dash-read { overflow: hidden; }
html[data-fh-saison] #fh-dash-read::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -14px;
  width: 120px;
  height: 120px;
  background: var(--fh-sa-akzent);
  opacity: .07;
  pointer-events: none;
  -webkit-mask: var(--fh-sa-zeichen) center / contain no-repeat;
  mask: var(--fh-sa-zeichen) center / contain no-repeat;
}
html[data-fh-saison="halloween"] { --fh-sa-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 10h.01'/%3E%3Cpath d='M15 10h.01'/%3E%3Cpath d='M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z'/%3E%3C/svg%3E"); }
html[data-fh-saison="weihnachten"] { --fh-sa-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='m20 16-4-4 4-4'/%3E%3Cpath d='m4 8 4 4-4 4'/%3E%3Cpath d='m16 4-4 4-4-4'/%3E%3Cpath d='m8 20 4-4 4 4'/%3E%3C/svg%3E"); }
html[data-fh-saison="neujahr"] { --fh-sa-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E"); }
html[data-fh-saison="ostern"] { --fh-sa-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 16.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 1 1 4.5 4.5 4.5 4.5 0 1 1-4.5 4.5'/%3E%3C/svg%3E"); }

.fh-sa-ic {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* =====================================================
   3. SAISON-LEISTE UND CHIPS
===================================================== */
.fh-sa-leiste {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 16px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--fh-sa-akzent-tief) 32%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fh-sa-akzent-tief) 12%, var(--fh-sa-flaeche-tief)), var(--fh-sa-flaeche-tief));
  overflow: hidden;
  text-align: left;
}
.fh-sa-kante {
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fh-sa-kante, transparent), transparent);
  pointer-events: none;
}
.fh-sa-flamme {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  font-size: 26px;
  color: var(--fh-fg);
  background: linear-gradient(135deg, var(--fh-sa-flamme), var(--fh-sa-flamme-tief));
  box-shadow: 0 0 26px -8px var(--fh-sa-flamme);
}
.fh-sa-flamme.ist-gross {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  font-size: 32px;
}
.fh-sa-text {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fh-sa-kicker {
  margin: 0;
  font-family: var(--fh-font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fh-sa-akzent);
}
.fh-sa-leiste h3,
.fh-sa-fenster-karte h3 {
  margin: 0;
  font-family: var(--fh-font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--fh-fg);
}
.fh-sa-notiz {
  margin: 0;
  font-size: 13px;
  color: var(--fh-sa-matt);
  text-wrap: pretty;
}
.fh-sa-fortschritt {
  flex: 0 1 280px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fh-sa-fortschritt p { margin: 0; font-size: 12px; color: var(--fh-sa-matt); }
.fh-sa-zahl { display: flex; align-items: baseline; gap: 8px; }
.fh-sa-zahl span {
  font-family: var(--fh-font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--fh-fg);
  font-variant-numeric: tabular-nums;
}
.fh-sa-zahl small { font-size: 13px; color: var(--fh-sa-matt); }
.fh-sa-balken {
  height: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fh-fg) 7%, transparent);
  overflow: hidden;
}
.fh-sa-balken div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fh-sa-akzent-tief), var(--fh-sa-akzent));
  transition: width .5s var(--fh-ease);
}
.fh-sa-neujahr { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fh-sa-boxen { display: flex; gap: 8px; }
.fh-sa-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 58px;
  padding: 8px 6px;
  border: 1px solid var(--fh-sa-rand-stark);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fh-sa-flaeche) 80%, transparent);
}
.fh-sa-box span {
  font-family: var(--fh-font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--fh-fg);
  font-variant-numeric: tabular-nums;
}
.fh-sa-box small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fh-sa-matt); }

.fh-sa-chips { display: flex; align-items: center; gap: 10px; }
.fh-sa-chips[hidden] { display: none; }
.fh-sa-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fh-sa-akzent-tief) 35%, transparent);
  background: color-mix(in srgb, var(--fh-sa-akzent-tief) 8%, transparent);
  color: var(--fh-sa-akzent);
  font-family: var(--fh-font-display);
  font-size: 14px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fh-sa-chip .fh-sa-ic { font-size: 16px; }
.fh-sa-chip.ist-alt {
  border-color: color-mix(in srgb, var(--fh-sa-alt) 45%, transparent);
  background: color-mix(in srgb, var(--fh-sa-alt) 12%, transparent);
  color: color-mix(in srgb, var(--fh-sa-alt) 55%, var(--fh-fg));
}
button.fh-sa-chip { cursor: pointer; transition: background var(--fh-dauer) var(--fh-ease); }
button.fh-sa-chip:hover,
button.fh-sa-chip:focus-visible { background: color-mix(in srgb, var(--fh-sa-alt) 22%, transparent); }

/* =====================================================
   4. VERSTECKTE FUNDE UND HINWEIS
===================================================== */
.fh-sa-fund {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-left: -16px;
  border: 0;
  background: none;
  color: var(--fh-sa-akzent);
  font-size: 22px;
  cursor: pointer;
  opacity: .55;
  transform: rotate(var(--fh-sa-dreh, 0deg));
  transition: opacity var(--fh-dauer) var(--fh-ease), transform var(--fh-dauer) var(--fh-ease);
}
.fh-sa-fund:hover,
.fh-sa-fund:focus-visible {
  opacity: 1;
  transform: rotate(0deg) scale(1.25);
  filter: drop-shadow(0 0 8px var(--fh-sa-akzent));
}
.fh-sa-fund.ist-weg {
  animation: fhSaFundWeg .42s var(--fh-ease) both;
  pointer-events: none;
}
@keyframes fhSaFundWeg {
  from { opacity: 1; transform: scale(1.25); }
  to   { opacity: 0; transform: translateY(-24px) scale(1.8); }
}

.fh-sa-hinweis {
  position: fixed;
  top: 72px;
  right: 22px;
  z-index: var(--fh-z-toast);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--fh-sa-akzent-tief, var(--fh-gold)) 40%, transparent);
  background: color-mix(in srgb, var(--fh-sa-flaeche-tief, var(--fh-surface)) 94%, transparent);
  box-shadow: var(--fh-shadow-sm);
  font-size: 13px;
  color: var(--fh-fg);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--fh-dauer) var(--fh-ease), transform var(--fh-dauer) var(--fh-ease);
}
.fh-sa-hinweis.ist-da { opacity: 1; transform: none; }
.fh-sa-hinweis .fh-sa-ic { font-size: 18px; color: var(--fh-sa-akzent, var(--fh-gold-bright)); }
@media (max-width: 1023px) {
  .fh-sa-hinweis { top: 16px; right: 16px; }
}

/* =====================================================
   5. NEUJAHR: 0-UHR-MOMENT
===================================================== */
.fh-sa-mitternacht {
  position: fixed;
  inset: 0;
  z-index: var(--fh-z-modal);
  cursor: pointer;
}
.fh-sa-schleier {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--fh-sa-grund) 80%, transparent), color-mix(in srgb, var(--fh-sa-grund) 92%, transparent) 75%);
  animation: fhSaVeil .6s ease both;
}
.ist-zaehlen .fh-sa-schleier {
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--fh-sa-grund) 35%, transparent), color-mix(in srgb, var(--fh-sa-grund) 90%, transparent) 72%);
}
.fh-sa-mitternacht.ist-aus { animation: fhSaFade .8s ease forwards; }
.fh-sa-buehne {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  text-align: center;
}
.fh-sa-mk {
  margin: 0;
  font-family: var(--fh-font-display);
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--fh-sa-akzent);
  animation: fhSaVeil .6s ease both;
}
.fh-sa-mz {
  font-family: var(--fh-font-display);
  font-size: clamp(8rem, 22vw, 15rem);
  font-weight: 500;
  line-height: 1;
  color: var(--fh-fg);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 80px color-mix(in srgb, var(--fh-sa-akzent) 40%, transparent);
  animation: fhSaNum 1s var(--fh-ease) both;
}
.fh-sa-mbalken {
  width: min(320px, 60vw);
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--fh-fg) 8%, transparent);
  overflow: hidden;
}
.fh-sa-mbalken div {
  height: 100%;
  background: linear-gradient(90deg, var(--fh-sa-alt), var(--fh-sa-akzent));
  transition: width 1s linear;
}
.fh-sa-blitz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--fh-fg) 90%, transparent), color-mix(in srgb, var(--fh-sa-akzent) 25%, transparent) 38%, transparent 70%);
  animation: fhSaFlash 1.1s ease-out forwards;
}
.fh-sa-steigt { animation: fhSaRise .8s var(--fh-ease) both; }
.fh-sa-wunsch {
  margin: 0;
  font-family: var(--fh-font-display);
  font-size: clamp(2.6rem, 8vw, 6.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--fh-fg);
  white-space: pre-wrap;
  animation: fhSaGlow 3.2s ease-in-out 1.6s infinite;
}
/* 00-basis.css setzt die Schrift ueber "*" an jedes Element - die
   einzelnen Buchstaben erben sie deshalb nicht von selbst. */
.fh-sa-wunsch span,
.fh-sa-jahr span,
.fh-sa-chip span { font-family: inherit; }
.fh-sa-wunsch span {
  display: inline-block;
  white-space: pre;
  animation: fhSaRise .9s var(--fh-ease) both;
}
.fh-sa-jahr {
  display: flex;
  gap: .08em;
  font-family: var(--fh-font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--fh-neujahr-alt-hell);
}
.fh-sa-jahr span {
  display: inline-block;
  animation: fhSaDrop .7s cubic-bezier(.34, 1.4, .5, 1) both;
}
@keyframes fhSaVeil { from { opacity: 0; } to { opacity: 1; } }
@keyframes fhSaFade { to { opacity: 0; } }
@keyframes fhSaNum {
  0%   { opacity: 0; transform: scale(1.5); filter: blur(10px); }
  25%  { opacity: 1; transform: scale(1); filter: blur(0); }
  80%  { opacity: 1; transform: scale(.96); }
  100% { opacity: 0; transform: scale(.88); filter: blur(4px); }
}
@keyframes fhSaFlash { from { opacity: 1; } to { opacity: 0; } }
@keyframes fhSaRise {
  from { opacity: 0; transform: translateY(.6em); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fhSaDrop {
  from { opacity: 0; transform: translateY(-.8em) rotateX(80deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes fhSaGlow {
  0%, 100% { text-shadow: 0 0 50px color-mix(in srgb, var(--fh-sa-akzent) 40%, transparent); }
  50%      { text-shadow: 0 0 90px color-mix(in srgb, var(--fh-sa-akzent) 40%, transparent), 0 0 24px color-mix(in srgb, var(--fh-sa-akzent) 35%, transparent); }
}

/* =====================================================
   6. ADVENTSKALENDER UND TUERCHEN-FENSTER
===================================================== */
/* Kopf links, Zahlen rechts daneben - wie im Entwurf. */
.fh-advent-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
}
.fh-advent-kopf .fh-page-lead { margin-left: 0; max-width: 54ch; }
.fh-advent-zahlen { display: flex; gap: 24px; }
.fh-advent-zahlen > div { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.fh-advent-zahlen small {
  font-family: var(--fh-font-display);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fh-sa-matt, var(--fh-muted-fg));
}
.fh-advent-zahlen span {
  font-family: var(--fh-font-display);
  font-size: 24px;
  color: var(--fh-fg);
  font-variant-numeric: tabular-nums;
}
.fh-advent-zahlen .ist-offen { color: var(--fh-sa-akzent, var(--fh-gold-bright)); }
.fh-advent-zahlen .ist-verfallen { color: var(--fh-saison-verfallen); }

.fh-sa-tueren {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 30px;
}
.fh-sa-tuer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 150px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--fh-sa-rand, var(--fh-border));
  background: linear-gradient(160deg, var(--fh-sa-flaeche, var(--fh-surface-light)), var(--fh-sa-flaeche-tief, var(--fh-surface)));
  text-align: left;
  color: var(--fh-fg);
  font-family: inherit;
  overflow: hidden;
}
.fh-sa-tuer .fh-sa-kante { opacity: .7; }
.fh-sa-tuer-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fh-sa-tuer-kopf .fh-sa-ic { font-size: 18px; color: var(--fh-sa-matt); }
.fh-sa-tuer-nr {
  font-family: var(--fh-font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fh-sa-tuer-fuss { display: flex; flex-direction: column; gap: 4px; }
.fh-sa-tuer-meta {
  font-family: var(--fh-font-display);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fh-sa-matt);
}
.fh-sa-tuer-text { font-size: 13px; line-height: 1.35; color: var(--fh-sa-matt); text-wrap: pretty; overflow-wrap: anywhere; }

.fh-sa-tuer.ist-a { background: linear-gradient(160deg, color-mix(in srgb, var(--fh-sa-alt) 12%, var(--fh-sa-flaeche)), var(--fh-sa-flaeche-tief)); }
.fh-sa-tuer.ist-b { background: linear-gradient(160deg, color-mix(in srgb, var(--fh-weihnachten-tanne) 12%, var(--fh-sa-flaeche)), var(--fh-sa-flaeche-tief)); }
.fh-sa-tuer.ist-c { background: linear-gradient(160deg, color-mix(in srgb, var(--fh-sa-akzent-tief) 12%, var(--fh-sa-flaeche)), var(--fh-sa-flaeche-tief)); }
.fh-sa-tuer.ist-24 { border-color: color-mix(in srgb, var(--fh-sa-akzent-tief) 45%, transparent); }
.fh-sa-tuer.ist-24 .fh-sa-tuer-nr { font-size: 44px; }
.fh-sa-tuer.ist-24 .fh-sa-ic { color: var(--fh-sa-akzent); }

.fh-sa-tuer.ist-offen .fh-sa-tuer-nr,
.fh-sa-tuer.ist-verfallen .fh-sa-tuer-nr { font-size: 22px; color: var(--fh-sa-matt); }
.fh-sa-tuer.ist-offen .fh-sa-ic { color: var(--fh-sa-akzent); }
.fh-sa-tuer.ist-offen .fh-sa-tuer-text { color: var(--fh-fg); }
.fh-sa-tuer.ist-offen.ist-heute {
  border-color: color-mix(in srgb, var(--fh-sa-akzent-tief) 50%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fh-sa-akzent-tief) 14%, var(--fh-sa-flaeche-tief)), var(--fh-sa-flaeche-tief));
}
.fh-sa-tuer.ist-offen.ist-heute .fh-sa-tuer-nr,
.fh-sa-tuer.ist-offen.ist-heute .fh-sa-tuer-meta { color: var(--fh-sa-akzent); }

.fh-sa-tuer.ist-verfallen {
  opacity: .5;
  border-style: dashed;
  border-color: var(--fh-sa-rand-stark);
  background: var(--fh-sa-flaeche-tief);
}
.fh-sa-tuer.ist-verfallen .fh-sa-ic,
.fh-sa-tuer.ist-verfallen .fh-sa-tuer-meta { color: var(--fh-saison-verfallen); }

.fh-sa-tuer.ist-jetzt {
  cursor: pointer;
  border-color: var(--fh-sa-akzent);
  box-shadow: 0 0 34px -8px var(--fh-sa-akzent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fh-sa-akzent-tief) 22%, var(--fh-sa-flaeche-tief)), var(--fh-sa-flaeche-tief));
  transition: transform var(--fh-dauer) var(--fh-ease), box-shadow var(--fh-dauer) var(--fh-ease);
}
.fh-sa-tuer.ist-jetzt:hover,
.fh-sa-tuer.ist-jetzt:focus-visible { transform: translateY(-2px); box-shadow: 0 0 44px -6px var(--fh-sa-akzent); }
.fh-sa-tuer.ist-jetzt .fh-sa-tuer-nr { font-size: 44px; color: var(--fh-sa-akzent); }
.fh-sa-tuer.ist-jetzt .fh-sa-ic,
.fh-sa-tuer.ist-jetzt .fh-sa-tuer-meta { color: var(--fh-sa-akzent); }
.fh-sa-tuer.ist-jetzt .fh-sa-tuer-text { color: var(--fh-fg); }
.fh-sa-tuer.ist-jetzt:disabled { cursor: progress; opacity: .7; }

.fh-advent-legende-titel {
  margin: 28px 0 12px;
  font-family: var(--fh-font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fh-sa-matt, var(--fh-muted-fg));
}
.fh-advent-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: var(--fh-sa-matt, var(--fh-muted-fg));
}
.fh-advent-legende span { display: inline-flex; align-items: center; gap: 8px; }
.fh-advent-legende .fh-sa-ic { font-size: 16px; color: var(--fh-sa-akzent, var(--fh-gold-bright)); }

.fh-sa-fenster {
  position: fixed;
  inset: 0;
  z-index: var(--fh-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--fh-sa-grund, var(--fh-bg)) 72%, transparent);
  backdrop-filter: blur(4px);
}
.fh-sa-fenster-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: min(100%, 380px);
  padding: 24px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--fh-sa-akzent-tief) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fh-sa-akzent-tief) 14%, var(--fh-sa-flaeche-tief)), var(--fh-sa-flaeche-tief));
  box-shadow: var(--fh-shadow), 0 0 60px -10px color-mix(in srgb, var(--fh-sa-akzent) 30%, transparent);
  text-align: left;
  animation: fhSaRise .5s var(--fh-ease) both;
}
.fh-sa-fenster-karte h3 { font-size: 28px; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .fh-sa-leiste { padding: 16px; gap: 14px; }
  .fh-sa-fortschritt { min-width: 0; flex-basis: 100%; }
  .fh-sa-boxen { flex-wrap: wrap; }
  .fh-sa-box { min-width: 52px; }
  .fh-sa-tueren { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .fh-sa-tuer { min-height: 118px; padding: 10px; }
  .fh-sa-tuer-nr { font-size: 26px; }
  .fh-advent-zahlen { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fh-sa-fund,
  .fh-sa-hinweis,
  .fh-sa-tuer.ist-jetzt { transition: none; }
  .fh-sa-mitternacht *,
  .fh-sa-fenster-karte { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* Der Adventskalender steht nur in der Weihnachtssaison in der
   Navigation - .fh-nav-item setzt display und ueberstimmt sonst
   das hidden-Attribut. */
.fh-nav-item[hidden] { display: none; }

/* =====================================================
   7. GATEWAY -> SEITE -> SAISONS (scripts/saison/saison-admin.js)
   Baut auf den Formularen des Gateways auf (.gw-feld, .gw-live-knopf).
===================================================== */
.fh-sa-adm { display: flex; flex-direction: column; gap: 12px; }
.fh-sa-adm-kopf,
.fh-sa-adm-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.fh-sa-adm-kopf { justify-content: space-between; }
.fh-sa-adm-kopf .gw-feld { width: auto; }
.fh-sa-adm-titel {
  margin: 18px 0 0;
  font-family: var(--fh-font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}
.fh-sa-adm-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 12px;
}
.fh-sa-adm-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--fh-border);
  background: linear-gradient(160deg, var(--fh-surface-light), var(--fh-surface));
}
.fh-sa-adm-karte.ist-aktiv { border-color: color-mix(in srgb, var(--fh-gold) 45%, transparent); }
.fh-sa-adm-karte .fh-sa-adm-zeile { justify-content: space-between; align-items: center; }
.fh-sa-adm-karte .gw-feld { width: 110px; }
.fh-sa-adm-marke {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--fh-border-strong);
  font-family: var(--fh-font-display);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}
.fh-sa-adm-karte.ist-aktiv .fh-sa-adm-marke { color: var(--fh-gold-bright); border-color: color-mix(in srgb, var(--fh-gold) 55%, transparent); }
.fh-sa-adm-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 6px 16px;
}
.fh-sa-adm-reihe {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--fh-border);
}
.fh-sa-adm-reihe.ist-advent { grid-template-columns: 28px 140px minmax(0, 1fr) auto; }
.fh-sa-adm-reihe .gw-feld { width: auto; min-width: 0; }
.fh-sa-adm-reihe .fh-sa-adm-zahl { width: 80px; }
.fh-sa-adm-nr {
  font-family: var(--fh-font-display);
  font-size: 14px;
  color: var(--fh-gold-bright);
  font-variant-numeric: tabular-nums;
}
.fh-sa-adm .gw-live-knopf.ist-aktiv {
  color: var(--fh-gold-bright);
  border-color: color-mix(in srgb, var(--fh-gold) 55%, transparent);
  background: color-mix(in srgb, var(--fh-gold) 16%, transparent);
}
@media (max-width: 640px) {
  .fh-sa-adm-reihe.ist-advent { grid-template-columns: 28px minmax(0, 1fr); }
  .fh-sa-adm-reihe.ist-advent > :nth-child(n+3) { grid-column: 2; }
}