/* Herbstfest 2026 (herbstfest.php): klare Schrift (Manrope), Farben der Seite, Herbst-Akzente aus dem Flyer.
   Bewegung: fallendes Laub, wehende Wimpel, Countdown, Einblenden beim Scrollen. Alles aus bei prefers-reduced-motion. */
.page-herbstfest {
  --hf-gruen: var(--accent-2-strong, #145a2c);
  --hf-rot: var(--accent, #c81c28);
  --hf-amber: var(--accent-3, #f2b24c);
  --hf-kuerbis: #d9681f;
  --hf-schrift: var(--font-sans, "Manrope", "Segoe UI", system-ui, sans-serif);
}
.page-herbstfest h1,
.page-herbstfest h2,
.page-herbstfest h3 { font-family: var(--hf-schrift); letter-spacing: -.02em; }
.hf-defs { position: absolute; }

/* ---------- Kopf ---------- */
.hf-kopf {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(64px, 8vw, 104px) 0 clamp(44px, 6vw, 80px);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(217, 104, 31, .16), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(242, 178, 76, .2), transparent 60%);
}
.hf-wimpel {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; padding: 0 clamp(8px, 3vw, 40px);
  border-top: 3px solid var(--hf-gruen);
}
.hf-wimpel i {
  width: 0; height: 0;
  border-left: clamp(10px, 1.4vw, 18px) solid transparent;
  border-right: clamp(10px, 1.4vw, 18px) solid transparent;
  border-top: clamp(20px, 2.8vw, 34px) solid var(--hf-kuerbis);
  transform-origin: top center;
  animation: hf-wehen 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.3s);
}
.hf-wimpel i:nth-child(4n+2) { border-top-color: var(--hf-rot); animation-duration: 4.1s; }
.hf-wimpel i:nth-child(4n+3) { border-top-color: var(--hf-amber); animation-duration: 3.3s; }
.hf-wimpel i:nth-child(4n) { border-top-color: var(--hf-gruen); animation-duration: 4.5s; }
.hf-wimpel i:nth-child(n+11) { display: none; }
@media (min-width: 720px) { .hf-wimpel i:nth-child(n+11) { display: block; } }
@keyframes hf-wehen { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Fallendes Laub */
.hf-laub { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hf-fall {
  position: absolute; top: -40px; left: var(--x);
  width: calc(28px * var(--s)); height: calc(28px * var(--s));
  color: var(--c); opacity: .75;
  animation: hf-fallen var(--d) linear var(--v) infinite;
}
@keyframes hf-fallen {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0); }
  25%  { transform: translate3d(28px, 25vh, 0) rotate(calc(var(--r) * .25)); }
  50%  { transform: translate3d(-22px, 55vh, 0) rotate(calc(var(--r) * .5)); }
  75%  { transform: translate3d(20px, 85vh, 0) rotate(calc(var(--r) * .75)); }
  100% { transform: translate3d(-10px, 125vh, 0) rotate(var(--r)); }
}

.hf-kopf-raster { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .hf-kopf-raster { grid-template-columns: 1.25fr .75fr; } }

/* Einstieg: Zeile für Zeile von unten */
.hf-auf { animation: hf-rein .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--n, 0) * 90ms + 100ms); }
@keyframes hf-rein { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hf-hinweis {
  background: var(--hf-amber); color: #2a2a24; font-weight: 700;
  padding: 10px 16px; border-radius: 12px; margin-bottom: 18px;
}
.hf-kicker {
  position: relative; overflow: hidden;
  display: inline-block; font-weight: 800; letter-spacing: .03em;
  background: var(--hf-amber); color: #2a2a24;
  padding: 7px 18px; border-radius: 999px; margin: 0 0 16px;
}
.hf-kicker::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%);
  transform: translateX(-120%); animation: hf-glanz 4.5s ease-in-out 1.2s infinite;
}
@keyframes hf-glanz { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

.hf-titel {
  margin: 0; font-weight: 800; line-height: 1;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem); color: var(--hf-gruen);
}
.hf-zeile { display: block; }
.hf-unter {
  display: block; margin-top: .25em;
  font-size: .5em; font-weight: 700; letter-spacing: 0; color: var(--hf-kuerbis);
}
.hf-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 20px 0 0; max-width: 36em; }

/* Countdown */
.hf-countdown { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hf-countdown[hidden] { display: none; }
.hf-countdown-titel { margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--hf-kuerbis); }
.hf-uhr { display: flex; gap: 8px; }
.hf-uhr span {
  display: grid; justify-items: center; min-width: 64px; padding: 8px 6px 6px;
  border-radius: 14px; background: var(--hf-gruen); color: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
}
.hf-uhr b { font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; }
.hf-uhr b.hf-tick { animation: hf-tick .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hf-tick { from { transform: translateY(-40%) scale(.85); opacity: .2; } to { transform: none; opacity: 1; } }
.hf-uhr small { font-size: .72rem; font-weight: 700; opacity: .85; margin-top: 3px; }

.hf-fakten { display: grid; gap: 4px; margin: 24px 0 0; }
.hf-fakten div {
  display: grid; grid-template-columns: 5.5em 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed rgba(127, 127, 127, .35);
}
.hf-fakten dt { font-weight: 800; color: var(--hf-kuerbis); text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; padding-top: .15em; }
.hf-fakten dd { margin: 0; font-weight: 600; }

.hf-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hf-knoepfe .button { transition: transform .2s ease, box-shadow .2s ease; }
.hf-knoepfe .button:hover { transform: translateY(-2px); }

/* Video schwebt leicht */
.hf-video { margin: 0; justify-self: center; width: min(100%, 340px); }
.hf-video-rahmen { position: relative; animation: hf-schweben 6s ease-in-out infinite; }
.hf-video video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  border-radius: 22px; background: #1a1030;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}
@keyframes hf-schweben { 0%, 100% { transform: rotate(1.5deg) translateY(0); } 50% { transform: rotate(-.5deg) translateY(-10px); } }
.hf-live {
  position: absolute; left: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hf-gruen); color: #fff; font-weight: 800; font-size: .8rem;
  padding: 6px 12px; border-radius: 8px; letter-spacing: .02em;
}
.hf-live i { width: 9px; height: 9px; border-radius: 50%; background: #ff4b4b; animation: hf-puls 1.4s ease-in-out infinite; }
@keyframes hf-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 75, 75, .7); } 60% { box-shadow: 0 0 0 7px rgba(255, 75, 75, 0); } }
.hf-video figcaption { text-align: center; font-size: .85rem; opacity: .7; margin-top: 14px; }

/* Laufband */
.hf-band { overflow: hidden; background: var(--hf-gruen); color: #fff; padding: 14px 0; transform: rotate(-1.2deg); margin: -8px -10px 0; }
.hf-band-spur { display: flex; width: max-content; animation: hf-laufen 32s linear infinite; }
.hf-band span { font-weight: 800; font-size: clamp(1rem, 2vw, 1.3rem); padding: 0 22px; white-space: nowrap; }
.hf-band span::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 44px; border-radius: 50%; background: var(--hf-amber); vertical-align: middle; }
@keyframes hf-laufen { to { transform: translateX(-50%); } }

/* Einblenden beim Scrollen (nur wenn JS läuft) */
.hf-js .hf-zeigen { opacity: 0; transform: translateY(34px) scale(.98); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--n, 0) * 110ms); }
.hf-js .hf-zeigen.ist-da { opacity: 1; transform: none; }

/* Karten */
.hf-karten { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .hf-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hf-karten { grid-template-columns: repeat(4, 1fr); } }
.hf-karte {
  position: relative; overflow: hidden;
  padding: 24px 22px 56px; border-radius: 20px; color: #fff;
  background-color: var(--hf-kuerbis);
  background-image: repeating-conic-gradient(from 0deg at 50% 130%, rgba(255, 255, 255, .07) 0 6deg, transparent 6deg 12deg);
  background-size: 100% 100%;
}
.hf-js .hf-karte.ist-da { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.hf-karte:hover, .hf-js .hf-karte.ist-da:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 18px 36px rgba(0, 0, 0, .18); }
.hf-karte--musik { background-color: #3a1f5c; }
.hf-karte--kuchen { background-color: var(--hf-gruen); }
.hf-karte--getraenke { background-color: var(--hf-rot); }
.hf-karte h3, .hf-karte p { position: relative; }
.hf-karte h3 { color: #fff; margin: 14px 0 8px; font-size: 1.35rem; font-weight: 800; }
.hf-karte p { margin: 0; color: rgba(255, 255, 255, .92); }
.hf-icon { width: 46px; height: 46px; color: #fff; display: block; }
.hf-icon-wipp { transform-origin: 50% 90%; animation: hf-wippen 2.4s ease-in-out infinite; }
@keyframes hf-wippen { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.hf-dampf { stroke-dasharray: 14; animation: hf-dampf 2.2s ease-in-out infinite; }
@keyframes hf-dampf { 0% { stroke-dashoffset: 14; opacity: 0; } 40% { opacity: 1; } 100% { stroke-dashoffset: -14; opacity: 0; } }
.hf-blase { animation: hf-blase 1.8s ease-in infinite; }
@keyframes hf-blase { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-12px); opacity: 0; } }
.hf-nr {
  position: absolute; right: 10px; bottom: -8px;
  font-size: 4.6rem; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3);
}

/* Flyer */
.hf-flyer-raster { display: grid; gap: clamp(24px, 5vw, 56px); align-items: center; }
@media (min-width: 860px) { .hf-flyer-raster { grid-template-columns: .8fr 1.2fr; } }
.hf-flyer-bild { display: block; justify-self: center; width: min(100%, 420px); perspective: 900px; }
.hf-flyer-bild img {
  display: block; width: 100%; height: auto; border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
  transform: rotate(-1.5deg) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .25s ease;
}
.hf-flyer-bild:hover img, .hf-flyer-bild:focus-visible img { transform: rotate(0) scale(1.02) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.hf-downloads { padding-left: 1.2em; display: grid; gap: 8px; }
.hf-weiter { margin-top: 18px; }
.hf-foerderer { display: block; width: min(100%, 420px); height: auto; margin-top: 24px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .page-herbstfest *, .page-herbstfest *::before, .page-herbstfest *::after { animation: none !important; transition: none !important; }
  .hf-laub { display: none; }
  .hf-js .hf-zeigen { opacity: 1; transform: none; }
}