/* halloween-total.de — Stylesheet
   Dunkles Nacht-Thema mit Kürbis-Akzent. Handgeschrieben, keine Builder-
   Signatur, keine externen Requests (Schriften liegen selbst gehostet unter
   /assets/fonts/ — DSGVO, siehe HANDOFF Hard Rule #3).
   Struktur und Klassennamen sind identisch mit dem Schwesterprojekt, damit
   build_site.py unverändert bleiben konnte. */

@import url("/assets/fonts/fonts.css");

:root {
  --nacht: #14121a;
  --nacht-tief: #0d0b12;
  --karte: #1d1a26;
  --karte-hoch: #262232;
  --nebel: #ece8f2;
  --nebel-leise: #b0a9c0;
  --kuerbis: #ff8f42;
  --kuerbis-tief: #d96a20;
  --gift: #8fe08c;
  --linie: #2e2939;
  /* Dieselben Schriften wie auf der Builder-Seite, nur selbst gehostet.
     Junge gibt es nur in 400 — Überschriften nie fetten, sonst rechnet der
     Browser eine künstliche Fettung aus, die matschig aussieht. */
  --kopf-schrift: "Junge", Georgia, "Times New Roman", serif;
  --text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --spalte: 720px;
  --breit: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--nebel);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--kuerbis); text-underline-offset: 3px; }
a:hover { color: #ffb072; }

:focus-visible { outline: 2px solid var(--kuerbis); outline-offset: 2px; }

/* ---------------------------------------------------------------- Kopf */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  min-height: 68px;
  background: rgba(13, 11, 18, .94);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: saturate(140%) blur(6px);
}

.marke {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Der Kürbis bringt seinen eigenen Schein mit (PNG mit Alpha) — deshalb kein
   Rahmen, kein Hintergrund. alt="" ist Absicht: der Markenname steht daneben. */
.marke img { width: 34px; height: 34px; }
.marke-halloween { color: var(--kuerbis); }
.marke-total { color: var(--nebel); margin-left: .32em; font-weight: 400; }

.navschalter { display: none; }
.nav-knopf { display: none; }

.hauptnav { flex: 1 1 auto; min-width: 0; }

.haupt {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.haupt-rechts:empty { display: none; }

.haupt > li { position: relative; }

.haupt > li > a {
  display: block;
  padding: 22px 11px;
  font-family: var(--text);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--nebel);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.haupt > li > a:hover,
.haupt > li > a[aria-current] {
  color: var(--kuerbis);
  border-bottom-color: var(--kuerbis);
}

.subnav {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 246px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--karte-hoch);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.hat-sub:hover .subnav,
.hat-sub:focus-within .subnav {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.subnav a {
  display: block;
  padding: 7px 16px;
  font-size: 15px;
  color: var(--nebel);
  text-decoration: none;
}
.subnav a:hover,
.subnav a[aria-current] { background: rgba(255, 143, 66, .13); color: var(--kuerbis); }

/* Die drei letzten Menügruppen klappen nach LINKS auf, nicht nach rechts.
   Grund: `.subnav` ist 246 px breit und hing mit `left: 0` am rechten
   Rand der Gruppe — bei 1280 px Fenster ragte USA bis 1331 px hinaus.
   `visibility: hidden` nimmt ein Element NICHT aus dem Layout, also
   zählte der Überhang in `scrollWidth` und erzeugte auf jeder
   Unterseite rund 51 px Querscrollung (Befund HANDOFF 14.08., Ursache
   17.08. gefunden). Zweiter Effekt, der wichtiger ist als die
   Scrollleiste: die Gruppe USA hat 16 Einträge und wäre beim Aufklappen
   halb außerhalb des Fensters gelandet.

   Warum DREI und nicht nur die letzte: Bei 1200 px ragte auch Events
   hinaus (1010–1256), bei noch schmaleren Fenstern Grusel. Gemessen von
   960 bis 1920 px — ab 940 px greift ohnehin das Klappmenü. Wer eine
   zehnte Gruppe anhängt, misst hier nach:
   `document.documentElement.scrollWidth === clientWidth` auf jeder Breite. */
.haupt > li:nth-last-child(-n+3) .subnav { left: auto; right: 0; }

/* ---------------------------------------------------------------- Hero */

.hero {
  position: relative;
  max-height: 460px;
  overflow: hidden;
  background: var(--nacht-tief);
}
/* <picture> ist inline und setzt sonst eine Grundlinie unter das Bild — ein paar
   Pixel Spalt zwischen Hero und Inhalt. */
.hero picture { display: block; }
.hero img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  opacity: .55;
}
/* Der Verlauf muss auch unter unruhigen Motiven tragen (Illustrationen mit hellen
   Flächen). Deshalb bis 55 % Höhe fast deckend statt nur am unteren Rand. */
.hero-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 56px 24px 34px;
  background: linear-gradient(to top,
    rgba(13, 11, 18, .97) 0%,
    rgba(13, 11, 18, .92) 45%,
    rgba(13, 11, 18, 0) 100%);
}
.hero-text h1,
.hero-text p {
  max-width: var(--spalte);
  margin: 0 auto;
}
.hero-text h1 { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.18; }
.hero-text p { margin-top: 12px; color: var(--nebel-leise); font-size: 18px; }

/* ---------------------------------------------------------------- Inhalt */

main {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 40px 24px 72px;
}

h1, h2, h3, h4 {
  font-family: var(--kopf-schrift);
  font-weight: 400;          /* Junge hat nur diesen Schnitt */
  line-height: 1.25;
  letter-spacing: 0;
}
h1 { font-size: clamp(30px, 4.6vw, 44px); margin: 0 0 18px; }
h2 {
  font-size: 26px;
  margin: 46px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}
h3 { font-size: 20px; margin: 30px 0 10px; color: var(--kuerbis); }
h4 { font-size: 17px; margin: 22px 0 8px; }

p { margin: 0 0 18px; }

.pfad {
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--nebel-leise);
}
.pfad a { color: var(--nebel-leise); text-decoration: none; }
.pfad a:hover { color: var(--kuerbis); }
.pfad span { margin: 0 7px; opacity: .5; }

.anriss {
  font-size: 19px;
  line-height: 1.6;
  color: var(--nebel-leise);
}

.stand {
  margin: -6px 0 26px;
  font-size: 14px;
  color: var(--nebel-leise);
}

ul, ol { margin: 0 0 20px; padding-left: 22px; }
li { margin-bottom: 8px; }

blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--kuerbis);
  color: var(--nebel-leise);
  font-style: italic;
}

code {
  padding: 1px 5px;
  background: var(--karte);
  border-radius: 4px;
  font-size: .92em;
}

hr { margin: 36px 0; border: 0; border-top: 1px solid var(--linie); }

/* Tabellen tragen hier die konkreten Zahlen (Mengen, Zeiten, FSK, Preise) —
   sie sind der zitierfähige Kern vieler Seiten, nicht Beiwerk. */
.tabelle-scroll { overflow-x: auto; margin: 0 0 24px; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}
th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
th {
  font-family: var(--text);
  font-weight: 600;
  color: var(--kuerbis);
  white-space: nowrap;
}
tbody tr:hover { background: rgba(255, 255, 255, .022); }

figure { margin: 28px 0; }
/* width: 100% erst mit den Rezeptfotos: sie sind 900 px breit, die Spalte ist 672 —
   ohne die Zeile stünden sie in Originalgröße und die Galerie-Vorschauen ebenso. */
figure img { border-radius: 10px; display: block; width: 100%; }
figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--nebel-leise);
}

/* ::: kasten … ::: — Hinweis, Sicherheitshinweis, Kurzantwort */
.kasten {
  margin: 28px 0;
  padding: 20px 22px;
  background: var(--karte);
  border-left: 3px solid var(--kuerbis);
  border-radius: 0 10px 10px 0;
}
.kasten > :last-child { margin-bottom: 0; }
.kasten h3 { margin-top: 0; }

/* ::: quellen … ::: — Belegangaben am Seitenende. Kleiner und ruhiger als der
   Fließtext, aber normaler indexierbarer Inhalt: kein Ausklappen, kein noindex. */
.quellen {
  margin: 44px 0 0;
  padding: 20px 22px;
  background: var(--nacht-tief);
  border: 1px solid var(--linie);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--nebel-leise);
}
.quellen h2,
.quellen h3 {
  font-size: 16px;
  margin: 0 0 10px;
  padding-top: 0;
  border-top: 0;
  color: var(--nebel);
}
.quellen ul { margin: 0; padding-left: 18px; }
.quellen li { margin-bottom: 7px; }
.quellen p:last-child { margin-bottom: 0; }
.quellen a { color: var(--nebel); text-decoration: underline; }
.quellen a:hover { color: var(--kuerbis); }

/* ::: galerie … ::: — mehrere Bilder nebeneinander */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 28px 0;
}
.galerie figure { margin: 0; }

/* Auf den Asset-Seiten ist die Vorschau selbst der Downloadlink. Ohne diese Regel
   erbt sie Unterstreichung und Kürbiston der Fließtextlinks — beides sitzt dann
   sichtbar unter dem Bild. Stattdessen hebt sich das Bild beim Überfahren leicht an,
   damit erkennbar bleibt, dass es anklickbar ist. */
/* Nur der Link, der das Bild direkt umschließt — `figure > a`. Der Link in der
   `<figcaption>` ist Fließtext und behält seine normale Darstellung; ein
   `line-height: 0` darauf würde die Bildunterschrift zusammenfallen lassen. */
.galerie figure > a {
  display: block;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.galerie figure > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(0 0 0 / .45);
}
.galerie figure img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .galerie figure > a { transition: none; }
  .galerie figure > a:hover { transform: none; }
}

/* ---------------------------------------------------------------- Hub-Raster */

.themen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.themen li {
  margin: 0;
  padding: 18px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.themen li:hover { border-color: var(--kuerbis-tief); transform: translateY(-2px); }
.themen a {
  display: block;
  margin-top: 10px;
  font-family: var(--text);
  font-size: 16.5px;
  font-weight: 600;
  text-decoration: none;
}
.themen p {
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--nebel-leise);
}
.ikon { display: block; color: var(--kuerbis); }

/* `.themen.bild` — dasselbe Raster mit Foto statt Ikone (`::: karten`).
   Das Bild sitzt bündig in der Kachelkante, deshalb `padding: 0` auf dem `li` und
   der Innenabstand stattdessen auf Titel und Text. Ohne `overflow: hidden` stünde
   die eckige Bildkante über den abgerundeten Kachelrand hinaus. */
.themen.bild li { padding: 0; overflow: hidden; }
.themen.bild a { margin: 0; }
.themen.bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.themen.bild a span { display: block; padding: 14px 16px 0; }
.themen.bild p { padding: 4px 16px 16px; }

/* ------------------------------------------------- Bildband und Editorial-Split */

/* Beide brechen aus der 720-px-Textspalte aus. Die Breite ist bewusst
   `min(--breit, 100vw - 32px)` und **nicht** `100vw`:

   `100vw` misst inklusive Scrollleiste, Prozentbreiten messen ohne sie. Auf dem
   Desktop sind das rund 15 px Unterschied — genug für eine Querscrollleiste auf
   jeder Seite mit Band. Die 32 px Abzug decken jede übliche Leiste ab und ergeben
   auf schmalen Schirmen zugleich eine schmale Gasse, die wie Absicht aussieht.
   Das ist dieselbe Sorge wie bei DECISIONS #44 (Fledermausebene): kein Effekt
   darf eine Querscrollleiste erzeugen. */
.band, .split {
  width: min(var(--breit), calc(100vw - 32px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 44px 0;
}

.band { border-radius: 14px; overflow: hidden; }
.band img { display: block; width: 100%; height: auto; }

/* Die Zeile liegt im Bild, deshalb der Verlauf darunter: ohne ihn steht heller
   Text auf hellen Bildstellen. Auf Telefonen rückt sie näher an die Kante und
   wird kleiner, sonst frisst sie das halbe Bild. */
.band p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 64px 28px 22px;
  background: linear-gradient(to top, rgb(10 10 12 / .92) 12%, rgb(10 10 12 / 0));
  font-size: 17px;
  line-height: 1.5;
}
/* Der Verlauf muss über die volle Breite laufen, die Zeile darin nicht: ohne
   Begrenzung wären das rund 120 Zeichen, gut doppelt so lang wie der Fließtext
   daneben. Deshalb trägt das `<p>` den Verlauf und das `<span>` die Zeilenlänge. */
.band p span { display: block; max-width: 62ch; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  /* `start`, nicht `center`: Der Text ist fast immer höher als das Bild. Zentriert
     stünde das Bild dann in der Mitte einer langen Spalte und die Überschrift
     schwebte allein — oben bündig liest es sich als Doppelseite. */
  align-items: start;
}
.split img { display: block; width: 100%; height: auto; border-radius: 12px; }
.split > div > :first-child { margin-top: 0; }
.split > div > :last-child { margin-bottom: 0; }
/* `order` statt zweitem Markup: dieselbe Reihenfolge im HTML, gedreht nur optisch. */
.split.rechts img { order: 2; }

@media (max-width: 760px) {
  .band, .split { margin: 32px 0; border-radius: 10px; }
  .band p { padding: 48px 18px 16px; font-size: 15.5px; }
  /* Ein 21:9-Band ist auf 343 px nur noch 147 px hoch — die Zeile deckt es dann
     fast vollständig zu, und das Band liest sich als Textkasten mit Hintergrund
     statt als Bild. Auf dem Telefon wird deshalb höher zugeschnitten (mittig,
     `object-fit: cover`), damit über der Zeile echtes Bild stehen bleibt. */
  .band img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
  .split { grid-template-columns: 1fr; gap: 18px; }
  .split.rechts img { order: 0; }
}

/* ---------------------------------------------------------------- Weiterlesen */

.weiter {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 24px 72px;
}
.weiter h2 {
  font-size: 20px;
  margin: 0 0 14px;
  padding-top: 24px;
}
.weiter ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  padding: 0;
  list-style: none;
}
.weiter li { margin: 0; }
.weiter a {
  display: block;
  padding: 13px 16px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
  font-size: 15.5px;
  text-decoration: none;
}
.weiter a:hover { border-color: var(--kuerbis-tief); }

/* ---------------------------------------------------------------- Fuß */

.fuss {
  background: var(--nacht-tief);
  border-top: 1px solid var(--linie);
  padding: 40px 24px;
  font-size: 15px;
}
.fuss-innen {
  max-width: var(--breit);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}
.fuss p { margin: 0; color: var(--nebel-leise); }
.fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fuss li { margin: 0; }
.fuss a { color: var(--nebel-leise); text-decoration: none; }
.fuss a:hover { color: var(--kuerbis); }
.fuss-beliebt { flex: 1 1 340px; }

/* ------------------------------------------------------- Fledermäuse */
/* Sechs Silhouetten ziehen über die Seite. Kein JavaScript und keine
   Bilddatei: zwei SVG-Formen (Flügel unten / Flügel oben) liegen einmal
   pro Seite in <defs>, jede Fledermaus zeigt per <use> auf beide und
   blendet sie im Wechsel — Zweibild-Trickfilm statt verformter Pfade.

   Zufall gibt es in CSS nicht. Er entsteht hier aus drei ineinander
   laufenden Bewegungen mit teilerfremden Dauern: die Bahn von links nach
   rechts (28–62 s), das Auf und Ab samt Schräglage (6–11 s, drei
   verschiedene Kurven) und der Flügelschlag (0,36–0,6 s). Weil sich die
   Perioden nicht wiederholen, sieht jede Überquerung anders aus.

   Der Schwarm liegt auf z-index -1, also HINTER dem Text und vor dem
   Seitenhintergrund. Kopf, Hero und Fuß haben eigene Hintergründe und
   verdecken ihn — die Tiere sind nur in den Rändern und hinter dem
   Fließtext zu sehen. Das ist Absicht: Diese Site verkauft Platzierungen,
   und ein Effekt, der über der Schrift flattert, kostet Vertrauen.

   Animiert werden ausschließlich transform und opacity (Compositor,
   kein Layout). pointer-events: none, damit nichts anklickbar ist,
   overflow: hidden gegen die Querscrollleiste. */

.nachtflug {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Die Formvorlage selbst wird nie gezeigt, nur referenziert. */
.fl-quelle { position: absolute; width: 0; height: 0; overflow: hidden; }

.fledermaus {
  position: absolute;
  left: 0;
  animation: fl-quer linear infinite;
  will-change: transform;
}
.fl-flug {
  display: block;
  animation: fl-hoehe-a 8s ease-in-out infinite alternate;
}
.fledermaus svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--nebel-leise);
}
.fledermaus use { animation: fl-schlag-a .45s infinite; }
.fledermaus use + use { animation-name: fl-schlag-b; }

/* Bahn: vom linken Rand komplett hinaus. Die Tiere, die nach links
   fliegen, laufen dieselbe Kurve rückwärts und werden gespiegelt. */
@keyframes fl-quer {
  from { transform: translate3d(-14vw, 0, 0); }
  to   { transform: translate3d(114vw, 0, 0); }
}

/* Drei Höhenkurven, bewusst unregelmäßig gesetzt — eine saubere Sinuswelle
   sieht nach Maschine aus. Die Schräglage kippt mit der Richtung, wie beim
   Kurvenflug. */
@keyframes fl-hoehe-a {
  0%   { transform: translateY(0)     rotate(-6deg); }
  28%  { transform: translateY(-7vh)  rotate(5deg); }
  55%  { transform: translateY(3vh)   rotate(-4deg); }
  78%  { transform: translateY(-5vh)  rotate(7deg); }
  100% { transform: translateY(1vh)   rotate(-5deg); }
}
@keyframes fl-hoehe-b {
  0%   { transform: translateY(2vh)   rotate(4deg); }
  35%  { transform: translateY(-4vh)  rotate(-7deg); }
  62%  { transform: translateY(6vh)   rotate(6deg); }
  100% { transform: translateY(-2vh)  rotate(-3deg); }
}
@keyframes fl-hoehe-c {
  0%   { transform: translateY(-3vh)  rotate(7deg); }
  22%  { transform: translateY(4vh)   rotate(-5deg); }
  48%  { transform: translateY(-6vh)  rotate(8deg); }
  71%  { transform: translateY(2vh)   rotate(-6deg); }
  100% { transform: translateY(5vh)   rotate(3deg); }
}

/* Flügelschlag: die beiden Formen tauschen sich hart ab. Die 2 % Übergang
   sind bei 0,45 s neun Millisekunden und damit unsichtbar. */
@keyframes fl-schlag-a { 0%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fl-schlag-b { 0%, 48% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* Sechs Tiere, jedes mit eigener Höhe, Größe, Deckkraft und eigenem Tempo.
   Die negativen Verzögerungen verteilen sie sofort über die Breite, statt
   sie nacheinander von links einfliegen zu lassen. */
.f1 { top: 11vh; width: 34px; opacity: .30; animation-duration: 34s; animation-delay: -6s; }
.f2 { top: 29vh; width: 26px; opacity: .26; animation-duration: 46s; animation-delay: -22s; animation-direction: reverse; }
.f3 { top: 57vh; width: 44px; opacity: .34; animation-duration: 28s; animation-delay: -14s; }
.f4 { top: 73vh; width: 30px; opacity: .28; animation-duration: 52s; animation-delay: -35s; animation-direction: reverse; }
.f5 { top: 43vh; width: 22px; opacity: .22; animation-duration: 62s; animation-delay: -48s; }
.f6 { top: 85vh; width: 38px; opacity: .28; animation-duration: 38s; animation-delay: -9s; animation-direction: reverse; }

/* Wer nach links fliegt, schaut auch nach links. */
.f2 svg, .f4 svg, .f6 svg { transform: scaleX(-1); }

.f1 .fl-flug { animation-duration: 7s; }
.f2 .fl-flug { animation-name: fl-hoehe-b; animation-duration: 9s; }
.f3 .fl-flug { animation-name: fl-hoehe-c; animation-duration: 6s; }
.f4 .fl-flug { animation-duration: 8.5s; }
.f5 .fl-flug { animation-name: fl-hoehe-b; animation-duration: 11s; }
.f6 .fl-flug { animation-name: fl-hoehe-c; animation-duration: 7.5s; }

.f1 use { animation-duration: .42s; }
.f2 use { animation-duration: .55s; }
.f3 use { animation-duration: .36s; }
.f4 use { animation-duration: .48s; }
.f5 use { animation-duration: .60s; }
.f6 use { animation-duration: .44s; }

/* ------------------------------------------------- Klappmenü ab 1100 px */

/* Das Klappmenü kommt FRÜHER als die übrige Handy-Optik, und zwar aus
   einem gemessenen Grund: Die Leiste hat zehn Gruppen. Wird das Fenster
   schmaler als ~1100 px, bricht `.haupt` (flex-wrap) in zwei Zeilen um,
   und dann steht irgendeine Gruppe aus der Mitte am rechten Rand — bei
   1024 px war es „Bräuche", dessen 246 px breites Untermenü bis 1095 px
   reichte. Welche Gruppe es trifft, hängt vom Umbruch ab, deshalb lässt
   sich das NICHT über `:nth-last-child` lösen (bei 1280 px ist es USA,
   bei 1200 px Events, bei 1024 px Bräuche).

   Unterhalb von 1100 px übernimmt daher das Klappmenü, das ohnehin
   gebaut, geprüft und überlaufsicher ist. Die eigentliche Handy-Optik
   (Hero-Höhe, h2, drei statt sechs Fledermäuse) bleibt bei 940 px —
   ein 1024-px-Fenster ist kein Telefon. */
@media (max-width: 1100px) {
  .nav-knopf {
    display: block;
    order: -1;
    padding: 8px 12px;
    font-family: var(--text);
    font-size: 15px;
    font-weight: 500;
    color: var(--nebel);
    border: 1px solid var(--linie);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
  }

  .hauptnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 78vh;
    overflow-y: auto;
    padding: 8px 16px 20px;
    background: var(--nacht-tief);
    border-bottom: 1px solid var(--linie);
    display: none;
  }
  .navschalter:checked ~ .hauptnav { display: block; }

  .haupt { display: block; }
  .haupt > li > a { padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .haupt > li > a[aria-current] { border-bottom-color: var(--kuerbis); }

  /* Auf dem Handy klappen die Untermenüs nicht auf — sie stehen offen da.
     Ein Hover-Dropdown ohne Maus wäre eine Sackgasse. */
  .subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 4px 0 10px 14px;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .subnav a { padding: 6px 0; font-size: 15px; color: var(--nebel-leise); }
}

/* ---------------------------------------------------------------- Mobil */

@media (max-width: 940px) {
  .kopf { gap: 14px; padding: 0 16px; min-height: 58px; }

  .hero img, .hero { max-height: 300px; height: 300px; }
  main { padding: 28px 18px 56px; }
  .weiter { padding: 0 18px 56px; }
  h2 { font-size: 23px; }

  /* Auf dem Telefon fliegen die Tiere zwangsläufig hinter der Schrift statt
     im Rand. Drei statt sechs, kleiner und blasser. */
  .f2, .f5, .f6 { display: none; }
  .f1 { width: 26px; opacity: .26; }
  .f3 { width: 32px; opacity: .24; }
  .f4 { width: 24px; opacity: .22; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  /* Bewegung ist der ganze Zweck des Schwarms — stillgestellt bliebe eine
     Reihe grauer Flecken hinter dem Text. Also ganz weg. */
  .nachtflug { display: none; }
}

@media print {
  .kopf, .weiter, .fuss, .hero, .nachtflug { display: none; }
  body { background: #fff; color: #000; }
}