/* =========================================================
   Feiertags-Hero — der Kopf der Startseite zieht sich um.

   Drei Ebenen je Fläche, alle zwischen Foto und Text:
     .fh-ton    Farbstimmung über dem Foto (mix-blend)
     .fh-szene  gezeichnete Teilchen: Schnee, Blätter, Herzen, Blüten,
                Feuerwerk — nur in der oberen Bildhälfte, nach unten
                ausgeblendet, damit nichts über Schrift und Knöpfe läuft
     .fh-stempel ein gezeichneter Gruss oben rechts
   Text, Knöpfe und der Bewertungs-Ticker bleiben unangetastet.
   ========================================================= */

.held__bild { transition: opacity 420ms var(--ease-out-soft, ease-out); }
.held__bild.fh-wechsel { opacity: 0; }

.fh-ton, .fh-szene {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 700ms var(--ease-out-soft, ease-out);
}
.fh-an .fh-ton, .fh-an .fh-szene { opacity: 1; }
.fh-ton { mix-blend-mode: soft-light; background: var(--fh-ton, transparent); }

.fh-szene {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--fh-frei, 30%), transparent var(--fh-ende, 56%));
          mask-image: linear-gradient(to bottom, #000 0, #000 var(--fh-frei, 30%), transparent var(--fh-ende, 56%));
}
/* Die schmale Fläche trägt ihren Text weiter oben. */
.held--klein .fh-szene { --fh-frei: 18%; --fh-ende: 38%; }

/* Farbstimmungen */
.hero--doppel[data-anlass='advent']    { --fh-ton: radial-gradient(120% 80% at 70% 10%, #F2B35C 0%, #7A2E24 60%, #1D4E49 100%); }
.hero--doppel[data-anlass='silvester'] { --fh-ton: linear-gradient(160deg, #3A2E6B 0%, #14213D 55%, #0E1A2B 100%); }
.hero--doppel[data-anlass='valentin']  { --fh-ton: radial-gradient(110% 90% at 30% 0%, #F4B5C8 0%, #C2475E 70%); }
.hero--doppel[data-anlass='ostern']    { --fh-ton: linear-gradient(170deg, #F6DE8A 0%, #BFE0C6 60%, #E9B9CE 100%); }
.hero--doppel[data-anlass='mai']       { --fh-ton: linear-gradient(170deg, #FFE7A3 0%, #9ED3A8 100%); }
.hero--doppel[data-anlass='halloween'] { --fh-ton: radial-gradient(110% 90% at 65% 0%, #F08A3A 0%, #5B2E6B 60%, #1A1328 100%); }
.hero--doppel[data-anlass='nikolaus']   { --fh-ton: radial-gradient(120% 80% at 70% 10%, #F2B35C 0%, #7A2E24 60%, #1D4E49 100%); }
.hero--doppel[data-anlass='martini']    { --fh-ton: radial-gradient(120% 90% at 50% 0%, #F2B35C 0%, #4A3550 55%, #1C1830 100%); }
.hero--doppel[data-anlass='weltkindertag'] { --fh-ton: linear-gradient(160deg, #FFE08A 0%, #F2A9C4 50%, #8CC7E8 100%); }
.hero--doppel[data-anlass='frauentag']  { --fh-ton: linear-gradient(165deg, #FBE58A 0%, #E9B44C 100%); }
.hero--doppel[data-anlass='herrentag']  { --fh-ton: linear-gradient(180deg, #BFE3F2 0%, #8FC48A 100%); }
.hero--doppel[data-anlass='chanukka']   { --fh-ton: radial-gradient(120% 90% at 50% 0%, #B8D2F2 0%, #3B5C9E 55%, #18264D 100%); }
.hero--doppel[data-anlass='cny']        { --fh-ton: radial-gradient(120% 90% at 60% 0%, #F0B84A 0%, #B3262E 55%, #3A0F12 100%); }
.hero--doppel[data-anlass='zuckerfest'] { --fh-ton: radial-gradient(120% 90% at 70% 0%, #F3D27A 0%, #3B4C8A 60%, #141C3A 100%); }
.hero--doppel[data-anlass='opferfest']  { --fh-ton: radial-gradient(120% 90% at 70% 0%, #F2D9A0 0%, #3B6B58 60%, #142A22 100%); }
.hero--doppel[data-anlass='ramadan']    { --fh-ton: linear-gradient(170deg, #3A3F7A 0%, #141A3A 100%); }
.hero--doppel[data-anlass='roschhaschana'] { --fh-ton: radial-gradient(120% 90% at 40% 0%, #F3C063 0%, #B23A3A 70%); }
.hero--doppel[data-anlass='diwali']     { --fh-ton: radial-gradient(120% 90% at 50% 0%, #FFC24A 0%, #B5451B 55%, #2A0F1A 100%); }
.hero--doppel[data-anlass='holi']       { --fh-ton: linear-gradient(120deg, #F2A0C0 0%, #F6D35A 35%, #6FB8E0 70%, #A98BD0 100%); }
.hero--doppel[data-anlass='fasching']   { --fh-ton: linear-gradient(120deg, #F6D35A 0%, #F2A0C0 50%, #7CC4A0 100%); }
.hero--doppel[data-anlass='jugendweihe'] { --fh-ton: linear-gradient(165deg, #F6D7E4 0%, #A98BD0 100%); }
.hero--doppel[data-anlass='schulstart'] { --fh-ton: linear-gradient(165deg, #FFE08A 0%, #8CC7E8 100%); }
.hero--doppel[data-anlass='einheit']   { --fh-ton: linear-gradient(180deg, #F6D77E 0%, #E07A55 55%, #4A3A36 100%); }
.hero--doppel[data-anlass='herbst']    { --fh-ton: radial-gradient(120% 90% at 60% 0%, #F0B04A 0%, #B4532F 65%, #4A2A1C 100%); }

/* ---------- Teilchen ---------- */
.fh-t {
  position: absolute; top: 0; left: 0;
  width: var(--g, 1.6rem); height: var(--g, 1.6rem);
  opacity: var(--o, 0.9);
  will-change: transform;
}
.fh-t svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fh-t .s { fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fh-t .v { stroke: none; fill: var(--fh-a, var(--akzent-mimose, #EDC24A)); opacity: 0.9; }

/* Fallen: Schnee, Blätter, Blüten. Die Seitwärtsbewegung liegt auf einem
   inneren Element, damit sich beide Bögen überlagern statt zu ersetzen. */
.fh-t--fall { animation: fh-fall var(--d, 12s) linear var(--v, 0s) infinite; }
.fh-t--fall > svg { animation: fh-wiegen var(--w, 3.4s) ease-in-out var(--v, 0s) infinite alternate; }
/* Herzen steigen auf wie kleine Ballons. */
.fh-t--steig { animation: fh-steig var(--d, 11s) linear var(--v, 0s) infinite; }
.fh-t--steig > svg { animation: fh-wiegen var(--w, 3s) ease-in-out var(--v, 0s) infinite alternate; }

@keyframes fh-fall {
  from { transform: translate(var(--x), -12%) rotate(0); }
  to   { transform: translate(calc(var(--x) + var(--dx, 2rem)), var(--h, 70vh)) rotate(var(--r, 240deg)); }
}
@keyframes fh-steig {
  from { transform: translate(var(--x), var(--h, 60vh)) scale(0.85); }
  to   { transform: translate(calc(var(--x) + var(--dx, 1rem)), -15%) scale(1.05); }
}
/* Funkeln: steht still und glimmt. Vorbeiziehen: von links nach rechts
   durchs Bild, wie ein Laternenumzug. */
.fh-t .a { fill: none; stroke: var(--fh-a); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fh-t--funkeln { transform: translate(var(--x), var(--y)); }
.fh-t--funkeln > svg { animation: fh-funkeln var(--d, 3s) ease-in-out var(--v, 0s) infinite alternate; }
.fh-t--flug { animation: fh-flug var(--d, 22s) linear var(--v, 0s) infinite; }
.fh-t--flug > svg { animation: fh-wiegen var(--w, 3s) ease-in-out var(--v, 0s) infinite alternate; }
@keyframes fh-funkeln { from { opacity: 0.25; transform: scale(0.55) rotate(-10deg); } to { opacity: 1; transform: scale(1.05) rotate(8deg); } }
@keyframes fh-flug { from { transform: translate(-4rem, var(--y)); } to { transform: translate(var(--b), calc(var(--y) + var(--dy, 0px))); } }

.fh-wolke {
  position: absolute; width: var(--g); height: var(--g); margin: calc(var(--g) / -2);
  border-radius: 50%; background: radial-gradient(circle, var(--fh-a) 0%, transparent 68%);
  animation: fh-puff 2800ms var(--ease-out-soft, ease-out) forwards;
}
@keyframes fh-puff { 0% { opacity: 0; transform: scale(0.2); } 30% { opacity: 0.75; } 100% { opacity: 0; transform: scale(1.5); } }

@keyframes fh-wiegen { from { transform: translateX(-0.6rem) rotate(-8deg); } to { transform: translateX(0.6rem) rotate(8deg); } }

/* Feuerwerk: Strahlen zeichnen sich nach aussen, dann verglühen sie. */
.fh-feuer { position: absolute; width: var(--g, 7rem); height: var(--g, 7rem); margin: calc(var(--g, 7rem) / -2); animation: fh-gluehen 1900ms var(--ease-out-soft, ease-out) forwards; }
.fh-feuer svg { width: 100%; height: 100%; overflow: visible; }
.fh-feuer path { fill: none; stroke: var(--fh-a); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fh-strahl 900ms var(--ease-out-soft, ease-out) forwards; }
.fh-feuer path.s { stroke: var(--paper); stroke-width: 1.1; animation-delay: 120ms; }
@keyframes fh-strahl { to { stroke-dashoffset: 0; } }
@keyframes fh-gluehen { 0% { opacity: 0; transform: scale(0.4); } 15% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12) translateY(0.8rem); } }

/* ---------- Stempel ---------- */
.fh-stempel {
  position: absolute; z-index: 2; width: 9rem; aspect-ratio: 1; container-type: size;
  display: grid; place-items: center; text-align: center;
  color: var(--paper); pointer-events: none;
  transform: rotate(-9deg) scale(0.6); opacity: 0;
  transition: transform 700ms var(--ease-overshoot, cubic-bezier(0.34, 1.56, 0.64, 1)) 500ms, opacity 300ms ease-out 500ms;
}
.fh-an .fh-stempel { transform: rotate(-9deg) scale(1); opacity: 1; }
.fh-stempel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fh-stempel .v { fill: var(--fh-a, var(--akzent-mimose)); opacity: 0.92; transform: translate(5px, 5px); }
.fh-stempel .s { fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease-out-soft, ease-out) 700ms; }
.fh-an .fh-stempel .s { stroke-dashoffset: 0; }
.fh-stempel span {
  position: relative; max-width: 76%;
  font-family: var(--font-display); font-weight: var(--w-display, 600);
  font-size: 10cqw; line-height: 1.05;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--petrol-dark);
}
.fh-stempel--hell span { color: var(--paper); }

/* Chanukka: im Stempel steht der Leuchter. */
.fh-stempel svg.fh-leuchter { position: relative; inset: auto; display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.fh-arm { fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; }
.fh-flamme {
  fill: var(--akzent-mimose, #EDC24A); stroke: var(--paper); stroke-width: 0.6;
  transform-box: fill-box; transform-origin: 50% 100%;
  opacity: 0;
  animation: fh-zuenden 500ms var(--ease-overshoot, ease-out) forwards, fh-flackern 1.4s ease-in-out infinite alternate;
}
@keyframes fh-zuenden  { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes fh-flackern { from { opacity: 1; transform: scale(1) skewX(-4deg); } to { opacity: 0.85; transform: scale(0.92, 1.06) skewX(5deg); } }
.fh-stempel small { display: block; margin-top: 0.35rem; font-family: var(--font-text); font-weight: 500; font-size: 6.4cqw; letter-spacing: 0.18em; }

/* Die Leine unter der Kopfzeile hängt am Handy in den Text der grossen
   Fläche hinein — dort bekommt er oben Luft, solange ein Anlass läuft. */
@media (max-width: 860px) {
  .hero--doppel[data-anlass]:not([data-anlass='']) .held--gross .held__text { padding-top: 4.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fh-szene { display: none; }
  .fh-stempel, .fh-stempel .s, .held__bild { transition: none; }
  .fh-flamme { animation: none; opacity: 1; }
}

/* Der Stempel sitzt im Kopf als Ganzem — seine Stelle misst feiertage-held.js. */
.hero--doppel { position: relative; }