/* =========================================================
   Feiertags-Kopfzeile — die Haarlinie unter der Kopfzeile wird zur
   gezeichneten Leine, an der je nach Anlass etwas hängt.

   Nur Schmuck: aria-hidden, keine Klickfläche, ohne Skript nichts.
   Animiert werden nur transform, opacity und stroke-dashoffset.
   Beim Scrollen (data-eng) zieht sich die Leine in die Kante zurück,
   damit nichts über dem Lesetext baumelt.
   ========================================================= */

.fz {
  position: absolute; left: 0; right: 0; top: 100%;
  height: 3.25rem; pointer-events: none; overflow: visible;
  transform-origin: 50% 0;
  transition: opacity 260ms var(--ease-out-soft, ease-out), transform 380ms var(--ease-out-soft, ease-out);
}
.masthead:has(.fz) { border-bottom-color: transparent; }
.masthead[data-eng='true'] .fz { opacity: 0; transform: translateY(-0.75rem) scaleY(0.4); }
.masthead[data-open='true'] .fz { display: none; }

.fz__leine { position: absolute; left: 0; top: -1px; width: 100%; height: 100%; overflow: visible; }
.fz__leine path {
  fill: none; stroke: var(--petrol); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: fz-zeichnen 1200ms var(--ease-out-soft, ease-out) forwards;
}
.fz__leine .fz__kontur { stroke: var(--paper); stroke-width: 4; opacity: 0.85; }
.fz__leine .fz__nadeln { stroke: var(--akzent-smaragd, #2F8466); stroke-width: 1.1; animation-delay: 300ms; }

/* Ein Anhänger: aufgehängt am oberen Mittelpunkt, pendelt um diesen Punkt. */
.fz__h {
  position: absolute; width: 1.75rem; height: 2.5rem; margin-left: -0.875rem;
  transform-origin: 50% 0;
  opacity: 0;
  animation:
    fz-fallen 700ms var(--ease-overshoot, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards,
    fz-pendel var(--fz-takt, 3s) ease-in-out var(--fz-start, 0s) infinite alternate;
  animation-delay: var(--fz-ein, 0s), calc(var(--fz-ein, 0s) + 700ms);
}
.fz__h svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Helle Kontur: Leine und Motive bleiben auch über Fotos und Video lesbar. */
.fz__h svg, .fz__funke svg { filter: drop-shadow(0 0 1px var(--paper)) drop-shadow(0 0 1px var(--paper)); }
.fz__h .s { fill: none; stroke: var(--petrol); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fz__h .v { stroke: none; fill: var(--fz-a, var(--akzent-mimose, #EDC24A)); }

/* Wimpel pendeln nicht, sie flattern. */
.fz--mai .fz__h { animation-name: fz-fallen, fz-flattern; height: 1.75rem; }

/* Herbst: ab und zu löst sich ein Blatt und trudelt nach unten. */
.fz__h.faellt { animation: fz-trudeln 2400ms ease-in forwards; }

/* Silvester: Funken springen aus der Leine. */
.fz__funke {
  position: absolute; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  animation: fz-funke 1300ms var(--ease-out-soft, ease-out) forwards;
}
.fz__funke svg { width: 100%; height: 100%; overflow: visible; }
.fz__funke path { fill: none; stroke: var(--fz-a); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fz-zeichnen 500ms var(--ease-out-soft, ease-out) forwards; }

/* ---------- Logo-Verkleidung ---------- */
.wordmark { position: relative; }
.wordmark img { transition: transform 420ms var(--ease-overshoot, ease-out), opacity 220ms ease-out, width 220ms, height 220ms; }
.fz-logo {
  position: absolute; left: 0; top: 50%;
  width: 2.25rem; height: 2.25rem; margin-top: -1.125rem;
  pointer-events: none;
  transition: width 220ms, height 220ms, margin 220ms, opacity 220ms ease-out;
}
.masthead[data-eng='true'] .fz-logo { width: 1.9rem; height: 1.9rem; margin-top: -0.95rem; }
.fz-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Mütze: wird schräg aufgesetzt, die Spitze wippt. */
.fz-muetze { transform-box: view-box; transform-origin: 18px 8px; animation: fz-aufsetzen 800ms var(--ease-overshoot, ease-out) 300ms both; }
.fz-mf { fill: var(--akzent-zinnober, #D4573B); }
.fz-ml { fill: none; stroke: var(--petrol); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.fz-pb { fill: var(--paper); stroke: var(--petrol); stroke-width: 1.2; }
.fz-spitze { transform-box: view-box; transform-origin: 30px -6px; animation: fz-wippen 2.6s ease-in-out 1.1s infinite alternate; }

/* Kürbis: das Logo duckt sich weg, der Kürbis ploppt auf, innen flackert
   ein Licht. Beim Darüberfahren kommt das echte Logo zurück. */
.wordmark[data-fz-verwandelt] img { transform: scale(0.3); opacity: 0; }
.wordmark[data-fz-verwandelt]:hover img, .wordmark[data-fz-verwandelt]:focus-visible img { transform: none; opacity: 1; }
.wordmark[data-fz-verwandelt]:hover .fz-logo, .wordmark[data-fz-verwandelt]:focus-visible .fz-logo { opacity: 0; }
.fz-kb { transform-box: view-box; transform-origin: 18px 32px; animation: fz-plopp 700ms var(--ease-overshoot, ease-out) 200ms both, fz-wackeln 7s ease-in-out 1.4s infinite; }
.fz-kf { fill: var(--akzent-kuerbis, #E2873A); stroke: var(--petrol); stroke-width: 1.2; }
.fz-stiel { fill: none; stroke: var(--akzent-smaragd, #2F8466); stroke-width: 2; stroke-linecap: round; }
.fz-glut { fill: var(--akzent-mimose, #EDC24A); stroke: var(--petrol-dark); stroke-width: 0.9; stroke-linejoin: round; animation: fz-flackern 1.7s linear infinite; }

/* ---------- Weitere Verkleidungen ---------- */
:where(.fz-logo g) { transform-box: fill-box; }
.fz-c-z, .fz-c-m, .fz-c-s, .fz-c-p, .fz-c-v, .fz-c-b, .fz-c-k, .fz-c-w { stroke: var(--petrol); stroke-width: 1; stroke-linejoin: round; }
.fz-c-z { fill: var(--akzent-zinnober, #D4573B); }
.fz-c-m { fill: var(--akzent-mimose, #EDC24A); }
.fz-c-s { fill: var(--akzent-smaragd, #2F8466); }
.fz-c-p { fill: var(--akzent-pink, #E592AE); }
.fz-c-v { fill: var(--akzent-violett, #8A6BB0); }
.fz-c-b { fill: var(--akzent-blau, #4A78B5); }
.fz-c-k { fill: var(--akzent-kuerbis, #E2873A); }
.fz-c-w { fill: var(--paper); }
.fz-c-sw { fill: var(--ink, #2B2621); stroke: var(--petrol); stroke-width: 1; stroke-linejoin: round; }
.fz-ln { fill: none; stroke: var(--petrol); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.fz-ln--s { stroke: var(--akzent-smaragd, #2F8466); stroke-width: 1.4; }
.fz-ln--d { stroke-width: 1.6; }
.fz-ln--m { stroke: var(--akzent-mimose, #EDC24A); stroke-width: 1.2; }
.fz-glanz { fill: none; stroke: var(--paper); stroke-width: 0.9; stroke-linecap: round; }

/* Aufsetzen von oben (Partyhut, Apfelstiel) */
.fz-aufsetzen { transform-origin: 50% 100%; animation: fz-aufsetzen 800ms var(--ease-overshoot, ease-out) 300ms both; }
/* Silvester: aus der Hutspitze sprühen Funken */
.fz-funken { fill: none; stroke: var(--akzent-mimose, #EDC24A); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; animation: fz-spruehen 2.4s var(--ease-out-soft, ease-out) 1.2s infinite; }
/* Fasching: die Kappe schüttelt sich, die Glöckchen bimmeln nach */
.fz-kopfwackeln { transform-origin: 50% 100%; animation: fz-aufsetzen 800ms var(--ease-overshoot, ease-out) 300ms both, fz-schuetteln 3.2s ease-in-out 1.2s infinite; }
.fz-glocke { transform-origin: 50% 0; animation: fz-bimmeln 0.9s ease-in-out infinite alternate; }
/* Valentinstag: das Logo schlägt wie ein Herz, kleine Herzen steigen auf */
.wordmark[data-fz-logo='valentin'] img { animation: fz-herzschlag 2.4s ease-in-out 600ms infinite; }
.fz-steigt { opacity: 0; animation: fz-steigen 3.2s var(--ease-out-soft, ease-out) infinite; }
/* Frauentag: ein Mimosenzweig hinterm Ohr, wiegt sich */
.fz-zweig { transform-origin: 0 100%; animation: fz-wachsen 900ms var(--ease-overshoot, ease-out) 200ms both, fz-wiegen 3.6s ease-in-out 1.1s infinite alternate; }
/* Ramadan, Zuckerfest, Opferfest: die Mondsichel geht auf, ein Stern funkelt, die Laterne schaukelt */
.fz-mond { animation: fz-aufgehen 1.2s var(--ease-out-soft, ease-out) 200ms both, fz-schweben 4s ease-in-out 1.4s infinite alternate; }
.fz-funkel { transform-origin: 50% 50%; animation: fz-funkeln 2.2s ease-in-out infinite; }
.fz-schaukel { transform-origin: 50% 0; animation: fz-wachsen 700ms var(--ease-overshoot, ease-out) 500ms both, fz-schaukeln 2.8s ease-in-out 1.2s infinite alternate; }
/* Chinesisches Neujahr: das Logo wird zur roten Laterne, die Quaste pendelt nach */
.fz-laterne { animation: fz-plopp 700ms var(--ease-overshoot, ease-out) 200ms both, fz-schaukeln 3.2s ease-in-out 1s infinite alternate; transform-origin: 50% 0; }
.fz-quaste { transform-origin: 50% 0; animation: fz-schaukeln 1.6s ease-in-out infinite alternate-reverse; }
/* Holi: Farbkleckse platzen auf, verblassen, platzen neu */
.fz-klecks { transform-origin: 50% 50%; opacity: 0; animation: fz-klecksen 6s var(--ease-overshoot, ease-out) infinite; }
/* Ostern: Hasenohren schießen hoch, eins klappt ab und zu um */
.fz-ohr { transform-origin: 50% 100%; animation: fz-hochschiessen 700ms var(--ease-overshoot, ease-out) 300ms both; }
.fz-ohr--klapp { animation: fz-hochschiessen 700ms var(--ease-overshoot, ease-out) 380ms both, fz-klappen 5s ease-in-out 1.5s infinite; }
/* Mai & Pfingsten: Blumenkranz, Blüte für Blüte */
.fz-blume { transform-origin: 50% 50%; animation: fz-plopp 600ms var(--ease-overshoot, ease-out) both; }
.fz-kranz { transform-origin: 50% 100%; animation: fz-wiegen 4s ease-in-out 1.4s infinite alternate; }
/* Herrentag: Strohhut, wird zum Gruß gelüftet */
.fz-hut { transform-origin: 50% 100%; animation: fz-aufsetzen 800ms var(--ease-overshoot, ease-out) 300ms both, fz-lueften 4.5s var(--ease-overshoot, ease-out) 1.5s infinite; }
/* Schuleinführung: die Zuckertüte lugt hervor und wackelt */
.fz-tuete { transform-origin: 50% 100%; animation: fz-hochschiessen 800ms var(--ease-overshoot, ease-out) 300ms both, fz-wiegen 2.6s ease-in-out 1.1s infinite alternate; }
/* Weltkindertag: zwei Luftballons am Logo */
.fz-ballon { transform-origin: 50% 100%; animation: fz-schweben 2.8s ease-in-out infinite alternate; }
.fz-schnur { animation: fz-wiegen 2.8s ease-in-out infinite alternate; transform-origin: 30px 8px; transform-box: view-box; }
/* Rosch ha-Schana: das Logo wird zum Apfel, unten tropft Honig */
.fz-tropfen { transform-origin: 50% 0; opacity: 0; animation: fz-tropfen 3.4s ease-in 1.2s infinite; }
/* Herbst: Blätter segeln aufs Logo und bleiben liegen */
.fz-landen { animation: fz-landen 1.8s var(--ease-out-soft, ease-out) 300ms both; }
/* Martinstag: das Logo wird zur Laterne am Stab, glüht und läuft mit */
.wordmark[data-fz-logo='martini'] img { animation: fz-gluehen 2.4s ease-in-out infinite alternate, fz-gehen 0.9s ease-in-out infinite alternate; }
.fz-gehen { animation: fz-gehen 0.9s ease-in-out infinite alternate; }
/* Diwali: Öllämpchen mit flackernder Flamme, Funkeln ringsum */
.fz-diya { animation: fz-plopp 700ms var(--ease-overshoot, ease-out) 200ms both; transform-origin: 50% 100%; }
.fz-flamme { transform-origin: 50% 100%; animation: fz-zuengeln 1.3s ease-in-out infinite alternate; }
.fz-schein { fill: var(--akzent-mimose, #EDC24A); opacity: 0.35; transform-origin: 50% 50%; animation: fz-flackern 1.7s linear infinite; }
/* Chanukka: ein Dreidel dreht sich, wird langsamer und kippt */
.fz-kreisel { transform-origin: 50% 100%; animation: fz-kreiseln 7s linear 400ms infinite; }
/* Tag der Deutschen Einheit: ein Fähnchen wird aufgesteckt und weht */
.fz-wachsen-hoch { transform-origin: 50% 100%; animation: fz-hochschiessen 800ms var(--ease-overshoot, ease-out) 300ms both; }
.fz-fahne { transform-origin: 0 50%; animation: fz-wehen 1.6s ease-in-out 1s infinite alternate; }
/* Jugendweihe: Ansteckblume mit flatterndem Band */
.fz-anstecker { animation: fz-plopp 700ms var(--ease-overshoot, ease-out) 200ms both; }
.fz-band { transform-origin: 50% 0; animation: fz-flattern 1.4s ease-in-out infinite alternate; }

@keyframes fz-wehen      { from { transform: skewY(-4deg) scaleX(1); } to { transform: skewY(5deg) scaleX(0.9); } }
@keyframes fz-spruehen   { 0% { stroke-dashoffset: 1; opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; } 55%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes fz-schuetteln { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-8deg); } 84% { transform: rotate(7deg); } 92% { transform: rotate(-3deg); } }
@keyframes fz-bimmeln    { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes fz-herzschlag { 0%, 40%, 100% { transform: none; } 10% { transform: scale(1.09); } 20% { transform: scale(0.98); } 30% { transform: scale(1.06); } }
@keyframes fz-steigen    { 0% { opacity: 0; transform: translateY(2px) scale(0.4); } 20% { opacity: 1; transform: translateY(-2px) scale(1); } 100% { opacity: 0; transform: translate(3px, -16px) scale(0.8); } }
@keyframes fz-wachsen    { from { opacity: 0; transform: scale(0.1); } to { opacity: 1; transform: none; } }
@keyframes fz-wiegen     { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes fz-aufgehen   { from { opacity: 0; transform: translate(6px, 12px) rotate(30deg); } to { opacity: 1; transform: none; } }
@keyframes fz-schweben   { from { transform: translateY(0); } to { transform: translateY(-2.5px) rotate(3deg); } }
@keyframes fz-funkeln    { 0%, 100% { transform: scale(0.5); opacity: 0.5; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes fz-schaukeln  { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes fz-klecksen   { 0% { opacity: 0; transform: scale(0); } 7% { opacity: 1; transform: scale(1.2); } 12% { transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes fz-hochschiessen { from { opacity: 0; transform: translateY(8px) scaleY(0.2); } to { opacity: 1; transform: none; } }
@keyframes fz-klappen    { 0%, 78%, 100% { transform: none; } 84%, 92% { transform: rotate(38deg) scaleY(0.92); } }
@keyframes fz-lueften    { 0%, 72%, 100% { transform: none; } 80%, 88% { transform: translate(-1px, -6px) rotate(-14deg); } }
@keyframes fz-tropfen    { 0% { opacity: 0; transform: scale(0.2); } 15% { opacity: 1; transform: scale(0.6); } 55% { opacity: 1; transform: scale(1); } 85% { opacity: 0.9; transform: translateY(9px) scale(0.9, 1.1); } 100% { opacity: 0; transform: translateY(13px); } }
@keyframes fz-landen     { 0% { opacity: 0; transform: translate(10px, -26px) rotate(-140deg); } 35% { opacity: 1; transform: translate(-6px, -14px) rotate(-40deg); } 70% { transform: translate(4px, -4px) rotate(20deg); } 100% { opacity: 1; transform: none; } }
@keyframes fz-gluehen    { from { filter: drop-shadow(0 0 2px rgba(237, 194, 74, 0.5)); } to { filter: drop-shadow(0 0 7px rgba(237, 194, 74, 0.95)); } }
@keyframes fz-gehen      { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-1.5px) rotate(1.5deg); } }
@keyframes fz-zuengeln   { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(0.9, 1.12) skewX(-6deg); } 100% { transform: scale(1.05, 0.92) skewX(5deg); } }
@keyframes fz-kreiseln   {
  0%   { transform: scaleX(1); }   4% { transform: scaleX(-1); }  8% { transform: scaleX(1); }  12% { transform: scaleX(-1); }
  16%  { transform: scaleX(1); }  21% { transform: scaleX(-1); } 27% { transform: scaleX(1); }  35% { transform: scaleX(-1); }
  45%  { transform: scaleX(1) rotate(0); } 52% { transform: rotate(-16deg); } 58% { transform: rotate(8deg); } 63%, 92% { transform: rotate(-24deg) translateX(-1px); }
  100% { transform: none; }
}

@keyframes fz-aufsetzen { from { opacity: 0; transform: translate(-4px, -14px) rotate(-28deg); } to { opacity: 1; transform: none; } }
@keyframes fz-wippen    { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes fz-plopp     { from { transform: scale(0.2, 0.1); } 60% { transform: scale(1.08, 0.94); } to { transform: none; } }
@keyframes fz-wackeln   { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-7deg); } 93% { transform: rotate(6deg); } 96% { transform: rotate(-3deg); } }
@keyframes fz-flackern  { 0%, 100% { opacity: 1; } 18% { opacity: 0.72; } 22% { opacity: 0.95; } 47% { opacity: 0.8; } 64% { opacity: 1; } 81% { opacity: 0.68; } }

@keyframes fz-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes fz-fallen   { from { opacity: 0; transform: translateY(-1.5rem) rotate(0); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes fz-pendel   { from { opacity: 1; transform: rotate(calc(var(--fz-weite, 6deg) * -1)); } to { opacity: 1; transform: rotate(var(--fz-weite, 6deg)); } }
@keyframes fz-flattern { from { opacity: 1; transform: skewX(-7deg) scaleY(1); } to { opacity: 1; transform: skewX(6deg) scaleY(0.94); } }
@keyframes fz-trudeln  {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
  40%  { transform: translate(0.9rem, 1.6rem) rotate(70deg); }
  70%  { transform: translate(-0.5rem, 3rem) rotate(150deg); opacity: 0.7; }
  100% { opacity: 0; transform: translate(0.4rem, 4.5rem) rotate(220deg); }
}
@keyframes fz-funke {
  0%   { opacity: 0; transform: translateY(-0.4rem) scale(0.3); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(0.9rem) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .fz__leine path, .fz__funke path { animation: none; stroke-dashoffset: 0; }
  .fz__h { animation: none; opacity: 1; }
  .fz__funke { display: none; }
  .fz-muetze, .fz-spitze, .fz-kb, .fz-glut, .fz-logo g, .wordmark[data-fz-logo] img { animation: none; }
  .fz-funken, .fz-tropfen { display: none; }
  .fz-steigt, .fz-klecks { opacity: 1; }
}