/* =====================================================================
   ende.css — STAND 8: KURBELWELLE, EXPLOSION, NATUR (A.1.40.0)

   Drei Sachen in einer Datei, weil sie ein Vorgang sind: die Kurbel wird
   aufgesteckt, dreimal gedreht, und danach gibt es diese Seite nicht
   mehr. Das Aussehen der Maschine steht weiter in maschine.css — hier
   steht nur, was am 21.09. dazugekommen ist.
   ===================================================================== */

/* =====================================================================
   1. DIE KURBELWELLE
   ===================================================================== */

/* Der Ring um den Vierkant. Er liegt immer da und ist unsichtbar, bis
   die Kurbel im Spiel ist — dieselben drei Stufen wie am Einwurf des
   Automaten (A.1.39.0): `wartet` pulst leise, `sucht` leuchtet, `nimmt`
   leuchtet hell. Eine Sprache fuer „hier gehoert etwas hin", nicht drei. */
.m-welle-ring { transition: opacity 0.25s ease, stroke-width 0.2s ease; }
.m-welle-ring.wartet { opacity: 0.5; animation: welle-puls 1.8s ease-in-out infinite; }
.m-welle-ring.sucht  { opacity: 0.72; }
.m-welle-ring.nimmt  { opacity: 1; stroke-width: 5; filter: drop-shadow(0 0 7px rgba(216, 163, 60, 0.85)); }
@keyframes welle-puls {
  0%, 100% { opacity: 0.26; }
  50%      { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .m-welle-ring.wartet { animation: none; opacity: 0.5; }
}

/* ⚠️⚠️ DER SCHATTENRISS DER KURBEL AUF DER NABE — sein Befund vom 21.09.:
   „nicht wirklich klar wo die Kurbel hinmuss... nur durch raten drauf
   gekommen."
   Dieselbe Sprache wie die Einwurfplatte des Automaten, die genau daran
   repariert wurde: **das Bild dessen, was dort fehlt.** Er ist
   unsichtbar, solange es keine Kurbel gibt (aufgedeckt, nicht
   eingeblendet — es GIBT ja noch nichts zu zeigen), pulst, sobald eine im
   Raum liegt, steht ruhig, wenn sie in der Hand ist, und geht aus, sobald
   sie sitzt: ein Hinweis, der bleibt, nachdem man ihn befolgt hat, ist
   ein Fehler. */
.m-kurbel-ort { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.kurbel-liegt .m-kurbel-ort { opacity: 1; animation: kurbel-ort-puls 1.9s ease-in-out infinite; }
.kurbel-in-der-hand .m-kurbel-ort { opacity: 1; animation: none; }
.kurbel-steckt .m-kurbel-ort { opacity: 0; animation: none; }
@keyframes kurbel-ort-puls {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kurbel-liegt .m-kurbel-ort { animation: none; opacity: 0.75; }
}

/* ⚠️ HIER STAND EIN AUFZUGBOGEN AN EINER SPERRTROMMEL — zurueckgebaut.
   Das Mass fuer „wie weit ist es" ist jetzt der DRUCKZEIGER der Maschine
   selbst: wer kurbelt, haelt das Schwungrad fest, der Dampf kommt nach
   und kann nicht arbeiten, die Nadel geht in die rote Zone und das
   Sicherheitsventil blaest ab (maschine.js, `Z.stau`). Ein zweites Mass
   daneben waere ein zweiter Zustand, der mit dem ersten auseinanderlaeuft
   — und die gruene Zone am Manometer steht seit A.1.36.0 ohnehin da. */

/* Die aufgesteckte Kurbel. Sie ist kein Gegenstand mehr (die Physik hat
   sie hergegeben), aber sie muss greifbar bleiben — `.eingebaut` nimmt
   sonst alle Zeiger weg.
   ⚠️ `transform-origin` sind die zwei Zahlen aus kurbel.js (`NABE`): die
   Nabe im Zeichen `#kurbel` liegt bei 45/62 von 90x110. */
/* ⚠️⚠️ IHRE GROESSE STEHT NICHT HIER, SONDERN IN kurbel.js: die Physik
   schreibt Breite und Hoehe als INLINE-Stil, und der schlaegt jede Regel
   in diesem Blatt. Wer sie hier einstellt, stellt nichts ein — lautlos.
   Gebunden ist sie an das Schwungrad, nicht an eine Pixelzahl. */
.kurbel-ding.steckt {
  pointer-events: auto;
  cursor: grab;
  transform-origin: 50% 56.4%;
  touch-action: none;
  z-index: 3;
  filter: drop-shadow(2px 4px 7px rgba(0, 0, 0, 0.8));
}
.kurbel-ding.steckt.zieht { cursor: grabbing; }
.kurbel-ding.steckt.fest  { cursor: default; pointer-events: none; }
.kurbel-ding.steckt:focus-visible { outline: 2px solid #d8a33c; outline-offset: 3px; }

/* Waehrend aufgezogen wird, zieht die Maschine an: das Bild bebt mit
   `--aufzug` (0..1, kurbel.js) ein Stueck mehr. Nicht mehr als 1,6 px —
   was staerker wackelt, liest sich als Fehler, nicht als Anspannung. */
.kurbel-steckt .wandstelle svg.maschine {
  animation: maschine-zieht calc(0.42s - var(--aufzug, 0) * 0.22s) linear infinite;
}
@keyframes maschine-zieht {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(calc(var(--aufzug, 0) * 1.6px), calc(var(--aufzug, 0) * -0.9px)); }
  75%      { transform: translate(calc(var(--aufzug, 0) * -1.3px), calc(var(--aufzug, 0) * 1.1px)); }
}
/* ⚠️ Sobald es auseinanderfliegt, hoert das Anziehen auf: die Gruppen der
   Zeichnung tragen dann ihren eigenen transform, und ein Elternteil, der
   weiter wackelt, verwackelt den ganzen Flug. */
.alles-fliegt .wandstelle svg.maschine { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .kurbel-steckt .wandstelle svg.maschine { animation: none; }
}

/* =====================================================================
   2. DIE EXPLOSION
   ===================================================================== */

/* Die letzten 900 ms davor: das Licht in der Halle wird unruhig. */
.geht-hoch .licht { animation: halle-flackert 0.16s steps(2, end) infinite; }
@keyframes halle-flackert {
  0%   { opacity: 1; }
  100% { opacity: 0.72; }
}

/* ⚠️⚠️ DREI SCHICHTEN MACHEN DEN WUMS, NICHT EINE. Sein Befund vom
   21.09.: „Beim Explodieren der Maschine fehlt mir noch etwas mehr wums
   und explosion." Ein weisses Vollbild allein ist ein Blitzlicht, keine
   Explosion — es hat keine MITTE und keine RICHTUNG. Dazu gehoeren:
     BLITZ       das Erschrecken (weiss, hart, 90 ms)
     FEUERBALL   die Mitte (dort war die Maschine) und die Farbe
     DRUCKWELLE  die Richtung (ein Ring, der nach aussen laeuft)
   Alle drei liegen ueber allem und fangen nichts. */
.blitz {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.05s linear;
}
.blitz.an  { opacity: 1; }
.blitz.weg { opacity: 0; transition: opacity 0.28s cubic-bezier(.3, 0, .7, 1); }

/* der Feuerball: aus der Mitte auf, heiss innen, russig aussen.
   ⚠️⚠️ DIE HELLE ZONE MUSS DEN GROESSTEN TEIL DES BALLS AUSMACHEN. Im
   ersten Wurf lag der letzte helle Halt bei 34 % und danach kam Russ —
   auf dem dunklen Grund der Halle blieb davon ein brauner Fleck uebrig,
   und der ging hinter dem ersten Truemmerstueck unter. Gesehen auf dem
   Bild beim Massstab 2,4. Jetzt ist er bis 62 % heiss, und er traegt
   seinen eigenen Schein nach aussen (`box-shadow`) — das ist das, was
   ihn ueber allem stehen laesst, was gerade wegfliegt.
   ⚠️ Ebene 93: ueber jedem Stueck (0 bis 10) und ueber dem Rauch (30),
   unter dem Blitz (95). */
.feuerball {
  position: fixed;
  z-index: 93;
  width: 40vh;
  height: 40vh;
  margin: -20vh 0 0 -20vh;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 52%,
    rgba(255, 255, 248, 1) 0%,
    rgba(255, 244, 196, 1) 18%,
    rgba(255, 206, 96, 0.99) 34%,
    rgba(255, 146, 36, 0.97) 50%,
    rgba(226, 88, 20, 0.9) 62%,
    rgba(138, 52, 20, 0.6) 78%,
    rgba(48, 26, 16, 0) 100%);
  box-shadow: 0 0 22vh rgba(255, 168, 60, 0.75);
  opacity: 0;
  transform: scale(0.16);
}
.feuerball.an {
  animation: feuerball 0.55s cubic-bezier(.08, .72, .32, 1) forwards;
}
@keyframes feuerball {
  0%   { opacity: 1; transform: scale(0.16); }
  20%  { opacity: 1; transform: scale(1.9); }
  55%  { opacity: 0.92; transform: scale(3.0); }
  100% { opacity: 0; transform: scale(4.2); }
}

/* die Druckwelle: ein Ring, der nach aussen laeuft und dabei duenner wird.
   ⚠️ Ein RING, keine Scheibe — eine Scheibe waere ein zweiter Feuerball.
   Was eine Druckwelle sichtbar macht, ist ihre KANTE. */
.druckwelle {
  position: fixed;
  z-index: 92;
  width: 20vh;
  height: 20vh;
  margin: -10vh 0 0 -10vh;
  border-radius: 50%;
  pointer-events: none;
  border: 1.6vh solid rgba(255, 244, 214, 0.9);
  box-shadow: 0 0 6vh rgba(255, 210, 130, 0.55), inset 0 0 4vh rgba(255, 210, 130, 0.4);
  opacity: 0;
  transform: scale(0.1);
}
.druckwelle.an { animation: druckwelle 0.40s cubic-bezier(.04, .78, .3, 1) forwards; }
@keyframes druckwelle {
  0%   { opacity: 0.95; transform: scale(0.1); border-width: 1.6vh; }
  70%  { opacity: 0.5;  border-width: 0.5vh; }
  100% { opacity: 0;    transform: scale(9); border-width: 0.1vh; }
}

/* =====================================================================
   DER RAUCH — „Anschließend rauch und wenn der Rauch sich verzieht, dann
   die Außenwelt." (seine Ansage, 21.09.)

   ⚠️⚠️ ER IST AUS BALLEN, NICHT AUS EINEM SCHLEIER. Ein grauer Schleier,
   der auf- und abblendet, ist eine Blende. Rauch QUILLT: viele weiche
   Ballen, jeder mit eigener Groesse, eigenem Weg, eigenem Tempo. Der
   DUNST darunter fuellt die Luecken zwischen ihnen — ohne ihn sieht man
   hindurch, und dann ist es kein Rauch, sondern Konfetti.
   ===================================================================== */
.rauch {
  position: fixed;
  inset: 0;
  z-index: 30;                       /* ueber den Truemmern, unter der Tafel */
  pointer-events: none;
  overflow: hidden;
}
.rauch i { position: absolute; display: block; }

.rauch-dunst {
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 62%,
    rgba(62, 58, 54, 0.96) 0%,
    rgba(78, 74, 70, 0.92) 42%,
    rgba(104, 100, 96, 0.82) 74%,
    rgba(126, 122, 118, 0.6) 100%);
  opacity: 0;
  /* ⚠️ LANGSAM. Bei 0,9 s war das Bild geschluckt, bevor die Truemmer
     draussen waren. */
  transition: opacity 0.95s ease-in;
}
.rauch.quillt .rauch-dunst { opacity: 1; }
.rauch.zieht-ab .rauch-dunst { opacity: 0; transition: opacity 1.25s ease-out; }

.rauch-ballen {
  left: var(--x0, 50%);
  top: var(--y0, 50%);
  width: var(--gr, 40vh);
  height: var(--gr, 40vh);
  margin-left: calc(var(--gr, 40vh) / -2);
  margin-top: calc(var(--gr, 40vh) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%,
    rgba(150, 146, 142, 0.95) 0%,
    rgba(110, 106, 102, 0.9) 38%,
    rgba(72, 68, 64, 0.72) 68%,
    rgba(52, 48, 46, 0) 100%);
  filter: blur(var(--weich, 1.2vh));
  opacity: 0;
  transform: scale(0.24);
}
.rauch.quillt .rauch-ballen {
  animation: rauch-quillt 1.0s cubic-bezier(.12, .7, .35, 1) var(--warte, 0s) forwards;
}
@keyframes rauch-quillt {
  0%   { opacity: 0; transform: scale(0.24) rotate(0deg); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1.5) rotate(calc(var(--dreh, 0deg) * 0.3)); }
}
/* ⚠️ Beim Abziehen laeuft JEDER Ballen woandershin (`--x1`/`--y1`): Rauch,
   der als Block wegfaehrt, ist ein Vorhang. */
.rauch.zieht-ab .rauch-ballen {
  animation: rauch-zieht-ab 1.35s cubic-bezier(.3, .1, .5, 1) var(--warte, 0s) forwards;
}
@keyframes rauch-zieht-ab {
  0%   { opacity: 1; transform: scale(1.5) translate(0, 0) rotate(calc(var(--dreh, 0deg) * 0.3)); }
  100% { opacity: 0; transform: scale(3.4) translate(var(--x1, 0), var(--y1, -40vh)) rotate(var(--dreh, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .feuerball.an, .druckwelle.an { animation: none; opacity: 0; }
  .rauch.quillt .rauch-ballen, .rauch.zieht-ab .rauch-ballen { animation: none; opacity: 0; }
}

/* Jedes Stueck fliegt fuer sich. Richtung, Weite, Drall und ein bisschen
   Verzug stehen als vier Variablen am Element (ende.js) — hier steht nur,
   WIE es fliegt: schnell weg, dabei kleiner und durchsichtig, und es
   kommt nie wieder. */
.fliegt {
  /* ⚠️⚠️ ERST FLIEGEN, DANN VERSCHWINDEN. Der erste Wurf liess die
     Deckkraft ueber 1,25 s mitlaufen — dann war nach 400 ms schon alles
     blass, und vom Auseinanderfliegen blieb ein Verblassen uebrig
     (gesehen, nicht gerechnet). Jetzt bleibt jedes Stueck VOLL sichtbar,
     solange es fliegt, und geht erst in den letzten 0,45 s aus, wenn es
     ohnehin draussen ist. Ein Trummerstueck wird nicht durchsichtig, es
     ist weg. */
  transition:
    transform 0.75s cubic-bezier(.22, .78, .42, 1) var(--fv, 0s),
    opacity 0.26s ease-in calc(var(--fv, 0s) + 0.50s);
  transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fa, 0deg)) scale(0.62);
  opacity: 0;
  pointer-events: none;
}
/* ⚠️ Ein `transform` an einem Vorfahren macht ihn zum Bezugsrahmen fuer
   `position: fixed` darin (die Lehre aus platte.js). Beim Fliegen ist das
   genau richtig — alles soll mit seinem Stueck mitgehen —, aber Impressum
   und Datenschutz duerfen davon nichts abbekommen: sie liegen ausserhalb
   und fliegen nicht mit (index.html). */
.alles-fliegt .rechtlich { z-index: 95; position: fixed; }
/* ⚠️ Das Fadenkreuz geht beim Riss weg — aber DRAUSSEN kommt es zurueck:
   dort liegt die Flinte im Busch (A.1.44.0, Stand 9), und sie zielt mit
   DEMSELBEN Fadenkreuz wie das Bolzenschussgeraet. Ein zweites zu bauen
   hiesse, zwei Dinge dasselbe sagen zu lassen. */
.alles-fliegt:not(.ist-draussen) .fadenkreuz,
.alles-fliegt .stromaus,
.alles-fliegt .koernung { display: none; }
.ist-draussen .licht { display: none; }
/* ⚠️⚠️⚠️ DER GRUND DER HALLE BLEIBT DUNKEL, BIS DIE WIESE DA IST. Im
   ersten Wurf wurde er im selben Augenblick blau, in dem der Blitz
   aufriss — und dann fand die ganze Explosion vor HIMMELBLAU statt:
   Feuerball, Truemmer und Rauch standen vor einer hellen Flaeche, und
   der Rauch las sich als graue Kugeln auf Blau. Gesehen auf dem Bild bei
   240 ms.
   Er wechselt jetzt erst mit `natur-steht` (natur.js setzt die Klasse,
   wenn die Wiese gebaut ist) — und dann liegt die Wiese ohnehin
   darueber; der Grund fuellt nur noch die Raender. */
.natur-steht body, body.natur-steht { background: #79b2d8; }
/* die zwei Wandfugen liegen auf −1 und wuerden von der Wiese verdeckt,
   bevor sie wegfliegen koennen — sie kommen nach vorn */
.alles-fliegt .wandfugen { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .fliegt { transition: opacity 0.6s ease; transform: none; }
  .geht-hoch .licht { animation: none; }
}

/* =====================================================================
   3. DIE NATUR
   ===================================================================== */

/* ⚠️⚠️ SIE STEIGT HINTER DEN TRUEMMERN AUF, nicht davor. Der erste Wurf
   hatte `z-index: 20` — die Wiese lag damit ueber allem, was gerade
   auseinanderflog, und vom Auseinanderfliegen war NICHTS zu sehen: 400 ms
   nach dem Riss stand die Wiese da, als waere die Werkstatt nie
   dagewesen. Jetzt liegt sie auf Ebene −2, also hinter jedem Stueck, das
   fliegt (die Werkstatt liegt auf −1 bis 10), und der weisse Blitz (90)
   deckt den Augenblick, in dem sie erscheint. */
.natur {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.85s ease, transform 1.8s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
.natur.da { opacity: 1; transform: scale(1); }

/* die zwei Wolkenbaender. Jedes ist ZWEIMAL gebaut, um eine Breite
   versetzt (natur.js) — es wandert also genau eine Breite und faengt
   dann wieder von vorn an, ohne Sprung. */
.n-zug { animation: wolkenzug linear infinite; }
.n-zug-fern { animation-duration: 240s; }
.n-zug-nah  { animation-duration: 150s; }
@keyframes wolkenzug {
  from { transform: translateX(-1600px); }
  to   { transform: translateX(0); }
}

/* ⚠️⚠️⚠️ DIE VOEGEL, FALTER, SCHWAERME UND HASEN STEHEN SEIT A.1.44.0 IN
   `css/wiese.css` — und zwar mit ihrer Bewegung auf einer ANDEREN Ebene
   als ihrer Lage. Hier stand bis A.1.43.2:
     .n-vogel { animation: vogelflug ... }
   waehrend dasselbe Element sein `transform`-ATTRIBUT (Lage und Groesse)
   trug. Die Animation gewinnt und nimmt beides mit: gemessen lagen zwei
   der vier Hasen bei −13/−30, also ausserhalb des Bildes in der linken
   oberen Ecke, in Massstab 1 — sobald ihre `--warte` abgelaufen war.
   Lautlos. **Lage und Bewegung duerfen nie auf demselben Element
   stehen.** */

/* das Gras im Wind. Jeder Halm hat seine eigene Dauer, seinen eigenen
   Versatz und seinen eigenen Ausschlag (natur.js) — gleiche Halme wiegen
   sich im Gleichschritt, und das sieht nach Maschine aus, nicht nach
   Wind. */
.n-halm {
  transform-box: view-box;
  animation: halm-wiegt var(--dauer, 5s) ease-in-out var(--warte, 0s) infinite alternate;
}
@keyframes halm-wiegt {
  from { transform: rotate(calc(var(--weit, 3deg) * -0.35)); }
  to   { transform: rotate(var(--weit, 3deg)); }
}

/* =====================================================================
   WAS DIE WIESE LEBENDIG MACHT (A.1.42.0) — seine Ansage vom 21.09.:
   „...die Außenwelt. Die noch deutlich belebter werden muss."

   ⚠️⚠️ LEBEN IST BEWEGUNG IN STUFEN, nicht viel Bewegung. Ein Bild, in
   dem sich alles gleich schnell und gleich stark ruehrt, ist unruhig und
   wirkt trotzdem tot. Hier sind es fuenf Tempi: Wolkenschatten (zwei
   Minuten) · Schwarm (eine Minute) · Falter (zwanzig Sekunden) · Pollen
   (zwanzig Sekunden, aber kaum sichtbar) · Gras (vier Sekunden).
   ===================================================================== */

/* die Wolkenschatten ziehen ueber das Land — langsamer als die Wolken
   selbst, sie liegen ja weiter weg */
.n-wolkenschatten ellipse {
  transform-box: view-box;
  filter: blur(26px);
  animation: schattenzug var(--dauer, 110s) linear var(--warte, 0s) infinite;
}
@keyframes schattenzug {
  from { transform: translateX(-900px); }
  to   { transform: translateX(1900px); }
}

/* der SCHWARM zieht quer durchs Bild (wiese.css), jeder Vogel schlaegt
   dabei im eigenen Takt — und DAS steht hier, weil es an einem Kind
   haengt und keiner Lage im Weg ist. */
.n-schlag { transform-box: fill-box; transform-origin: 50% 50%; animation: fluegelschlag var(--takt, .5s) ease-in-out infinite alternate; }
@keyframes fluegelschlag {
  from { transform: scaleY(0.55) translateY(1px); }
  to   { transform: scaleY(1.25) translateY(-1px); }
}

/* die FALTER: eine Acht, kein Kreis — Falter fliegen nicht rund. Sie
   liegt seit A.1.44.0 auf `.n-eigen` und der lange Zug quer durchs Bild
   auf `.n-zug` (wiese.css): „fliegt behutsam durchs Bild" (21.09.). */
@keyframes falterbahn {
  0%   { transform: translate(0, 0); }
  14%  { transform: translate(70px, -46px); }
  30%  { transform: translate(148px, -8px); }
  46%  { transform: translate(206px, -58px); }
  60%  { transform: translate(140px, -92px); }
  76%  { transform: translate(52px, -52px); }
  88%  { transform: translate(-30px, -24px); }
  100% { transform: translate(0, 0); }
}
/* die Fluegel klappen auf und zu — um die LAENGSACHSE, also `scaleX` */
.n-falter-koerper { transform-box: fill-box; transform-origin: 50% 50%; }
.n-fluegel { transform-box: fill-box; animation: fluegelklapp 0.17s ease-in-out infinite alternate; }
.n-fluegel-l { transform-origin: 100% 40%; }
.n-fluegel-r { transform-origin: 0% 40%; }
@keyframes fluegelklapp {
  from { transform: scaleX(0.22); }
  to   { transform: scaleX(1); }
}

/* POLLEN in der Sonne: fast unsichtbar, sehr langsam, nach oben */
.n-pollen circle {
  transform-box: view-box;
  animation: pollenflug var(--dauer, 20s) linear var(--warte, 0s) infinite;
}
@keyframes pollenflug {
  0%   { opacity: 0; transform: translate(0, 0); }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--quer, 120px), var(--hoch, -160px)); }
}

/* die Bluemchen wiegen sich mit, eine Spur langsamer als das Gras */
.n-blumen circle {
  transform-box: view-box;
  animation: bluemchen 4.6s ease-in-out infinite alternate;
}
@keyframes bluemchen {
  from { transform: translate(-1.6px, 0.4px); }
  to   { transform: translate(1.8px, -0.6px); }
}

@media (prefers-reduced-motion: reduce) {
  .n-wolkenschatten ellipse, .n-schwarm, .n-schlag,
  .n-falter, .n-fluegel, .n-pollen circle, .n-blumen circle { animation: none; }
}

/* ---- DIE TIERE (A.1.43.0) ----
   ⚠️ Tiere stehen die meiste Zeit STILL und bewegen sich dann kurz. Eine
   Dauerbewegung liest sich als Spielzeug; die Pause dazwischen ist das,
   was sie lebendig macht. Darum lange Takte mit kurzen Ausschlaegen. */
.n-reh-aest { transform-box: fill-box; transform-origin: 90% 90%; animation: reh-aest 11s ease-in-out var(--warte, 0s) infinite; }
@keyframes reh-aest {
  0%, 44%   { transform: rotate(14deg); }   /* Kopf unten, es aest */
  52%, 72%  { transform: rotate(-4deg); }   /* hebt den Kopf, sichert */
  80%, 100% { transform: rotate(14deg); }
}
.n-reh-sichert { transform-box: fill-box; transform-origin: 90% 90%; animation: reh-sichert 9s ease-in-out var(--warte, 0s) infinite; }
@keyframes reh-sichert {
  0%, 62%   { transform: rotate(0deg); }
  70%, 78%  { transform: rotate(-7deg); }
  86%, 100% { transform: rotate(0deg); }
}
/* ⚠️ Der Satz des Hasen stand hier als feste Bahn von 37 px und lief
   immer weiter — seit A.1.44.0 huepft er dorthin, wohin er WANDERT
   (natur.js), und das Huepfen steht in wiese.css. */
@media (prefers-reduced-motion: reduce) {
  .n-reh-aest, .n-reh-sichert { animation: none; }
}

/* die Krone atmet ganz leise mit */
.n-krone { transform-box: fill-box; transform-origin: 50% 100%; animation: krone-atmet 9s ease-in-out infinite alternate; }
@keyframes krone-atmet {
  from { transform: rotate(-0.5deg); }
  to   { transform: rotate(0.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .natur { transition: opacity 0.9s ease; transform: none; }
  .natur.da { transform: none; }
  .n-zug, .n-vogel, .n-halm, .n-krone { animation: none; }
}

/* Die Beschreibung des letzten Bildes — vorgelesen, nicht gezeigt. */
.natur-text {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}