/* ==========================================================================
   Wuddel Quiz — Designsystem
   Richtung "Wuddel fragt". Hell, weil die App draußen bei Sonnenlicht
   benutzt wird: Umgebungslicht legt eine konstante Helligkeit auf Text und
   Fläche, wodurch dunkle Oberflächen im Freien ihren Kontrast verlieren.
   ========================================================================== */

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
}

.wuddel {
  /* --- Farben ---------------------------------------------------------- */
  --bg: oklch(0.975 0.012 150);          /* Off-White, Chroma zur Markengrün-Hue */
  --surface: oklch(1 0 0);
  --ink: oklch(0.3 0.09 258);            /* Wuddel-Dunkelblau, Fließtext */
  --ink-soft: oklch(0.42 0.06 258);      /* Sekundärtext — bewusst nicht heller */
  --green: oklch(0.6 0.15 148);          /* Ringe, Flächen, große Schrift */
  --green-btn: oklch(0.48 0.13 150);     /* gefüllt + weiße Schrift = 4,9:1 */
  --green-deep: oklch(0.44 0.12 150);    /* grüner Text auf hellem Grund */
  --green-wash: oklch(0.94 0.035 150);   /* Auswahl, aktives Ablageziel */
  --sun: oklch(0.8 0.16 85);             /* Honiggelb, Belohnung */
  --berry: oklch(0.47 0.16 27);          /* falsche Antwort — warm, kein Alarmrot */
  --berry-wash: oklch(0.95 0.03 27);     /* Grund der falschen Antwort */
  --line: oklch(0.88 0.02 150);

  /* --- Abstände: bewusst ungleichmäßig für Rhythmus -------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.875rem;
  --s-4: 1.25rem;
  --s-5: 2rem;
  --s-6: 3rem;

  /* --- Radien: Karten maximal 16px ------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- Touchziele: Kinderhände auf Armlänge ---------------------------- */
  --tap: 56px;

  /* --- Bewegung -------------------------------------------------------- */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Semantische z-index-Skala --------------------------------------- */
  --z-base: 0;
  --z-drag: 10;
  --z-sticky: 20;
  --z-overlay: 30;

  /* --- Grundlagen ------------------------------------------------------ */
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px; /* nicht 16px — Sonnenlicht und Kinderaugen */
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;

  /*
   * Alle Umbruchpunkte fragen diesen Behälter ab, nicht das Fenster. Der
   * Shortcode steckt im Inhaltsbereich des Themes, und der ist oft 600–800 px
   * breit, ganz egal wie groß der Bildschirm ist. Nach der Fensterbreite zu
   * schalten heißt: auf einem 1440-px-Monitor greift das Zweispalten-Layout,
   * während in Wahrheit 640 px Platz sind.
   */
  container-type: inline-size;

  /*
   * Ausbruch aus dem Theme-Behälter. Wie weit, messt app.js — es nimmt den
   * kleineren der beiden Abstände zum Seitenrand, damit nichts überhängt und
   * kein Querbalken entsteht, auch bei Themes mit Seitenspalte. Ohne das sitzt
   * das Quiz auf großen Schirmen als schmaler Kasten in der Seitenmitte.
   */
  --bleed: 0px;
  margin-inline: calc(-1 * var(--bleed));
}

/* Gegen fremde Theme-Styles absichern. */
.wuddel *,
.wuddel *::before,
.wuddel *::after {
  box-sizing: border-box;
}

.wuddel :where(p, h1, h2, h3, ul, ol, li, figure) {
  margin: 0;
  padding: 0;
}

.wuddel :where(ul, ol) {
  list-style: none;
}

.wuddel :where(button) {
  font: inherit;
  color: inherit;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wuddel[data-loading]::before {
  content: 'Wuddel kommt gleich …';
  display: block;
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--ink-soft);
}

.wuddel :focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/*
 * Abwehr gegen das WordPress-Theme.
 *
 * Themes färben Buttons auf der Elementebene: `button:hover`, `button:focus`,
 * `button:active`. Das sind Pseudoklassen, und die zählen in der Spezifität wie
 * eine Klasse — `button:focus` ist also (0,1,1) und schlägt jede unserer
 * Ein-Klassen-Regeln wie `.wuddel-choice` (0,1,0). Deshalb tragen die
 * Regeln der Bedienelemente ab hier `#wuddel-quiz`: eine ID schlägt jede
 * Klassenkombination eines Themes, und es braucht kein !important.
 *
 * Diese Regel deckt den Fall ab, den keine unserer Regeln bestreitet: das
 * Theme hängt seinen Fokus-Glow an `:focus`, wir zeichnen aber nur bei
 * `:focus-visible`. Bei Fingerberührung greift `:focus-visible` bewusst nicht —
 * der Ring des Themes stand damit allein da und blieb nach dem Antippen
 * sichtbar, weil `:focus` auf dem Handy nicht von selbst weggeht.
 *
 * `:focus:not(:focus-visible)` trifft genau diesen Zustand: angetippt, aber
 * nicht mit der Tastatur angesteuert. Der grüne Ring für Tastaturbedienung
 * bleibt davon unberührt, weil beide Selektoren sich gegenseitig ausschließen.
 *
 * Diese Regel darf alle Ringe am angetippten Element abräumen, weil das
 * Ergebnis dort inzwischen als Fläche steht (grün oder rot, plus ✓ oder ×) und
 * nicht mehr als Ring. Solange es ein Ring war, brauchte es hier eine Ausnahme
 * für `.wuddel-nudge` — die ist mit dem Farbzustand entfallen.
 */
#wuddel-quiz :focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ==========================================================================
   Grundgerüst
   ========================================================================== */

/*
 * Seitenrand fließend statt in Stufen: 14px auf einem 320px-Gerät, 24px ab
 * Tablet. Feste 20px kosten auf dem kleinsten Handy 12 % der Textbreite.
 *
 * Höhe: `svh` statt `vh`. Auf dem Handy meint `vh` die Höhe ohne die ein- und
 * ausfahrenden Browserleisten — das Layout springt dann beim Scrollen. `svh` ist
 * die kleine Variante und damit stabil. Auf dem Schreibtisch sind beide gleich.
 */
.wuddel-shell {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: 34rem;
  margin-inline: auto;
  /* Oben und unten gleich viel: sonst sitzt der zentrierte Inhalt sichtbar
     zu hoch. Die alte Asymmetrie stammt daher, dass die Aktionen am unteren
     Rand klebten und dort Luft brauchten. */
  padding: var(--s-4) clamp(0.875rem, 4vw, 1.5rem);
  /* Notbremse für lange Komposita wie "Brennnesselsuppe" auf 320px. */
  overflow-wrap: break-word;
}

/*
 * Der Inhalt steht mittig in der Seitenhöhe.
 *
 * `margin-block: auto` und nicht `justify-content: center`, und das ist der
 * entscheidende Unterschied: ist der Inhalt höher als der Bildschirm — die
 * Zuordnungsfrage auf einem kleinen Handy —, dann schiebt `center` die
 * Oberkante über den Seitenanfang hinaus, und dort kommt man mit Scrollen nicht
 * mehr hin. Automatische Ränder werden in diesem Fall einfach zu null: mittig
 * wenn Platz da ist, oben wenn nicht.
 */
.wuddel-stage {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-block: auto;
  min-width: 0;
}

/*
 * Frage und Antwort als zwei Gruppen. Auf dem Handy sind das nur zwei
 * durchsichtige Behälter mit demselben Abstand wie vorher — sichtbar werden sie
 * erst ab Laptopbreite, wo sie die beiden Spalten bilden.
 */
.wuddel-lead,
.wuddel-work {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

/*
 * Beantwortet heißt abgeschlossen: ein Versuch, danach nimmt die Antwortfläche
 * keine Eingaben mehr an. Ohne das könnte ein Kind weitertippen und bekäme keine
 * Reaktion — die Sperre sitzt schon in `settle()`, aber unsichtbar.
 *
 * Nur `pointer-events`, ausdrücklich KEIN `opacity`: die Frage soll weiter
 * lesbar bleiben, und ein abgedunkelter Block reißt den Kontrast, auf den das
 * ganze Farbsystem ausgelegt ist.
 *
 * `.wuddel-btn` ist ausgenommen, und das ist kein Detail: die Aktionen liegen
 * mit in der Antwortfläche, also traf die Sperre auch "Urkunde holen" — den
 * einzigen Button, der nach dem Antworten überhaupt erscheint. Nach der achten
 * Frage war er sichtbar und tot, der Klick landete auf dem `div` darunter.
 *
 * Gesperrt gehören Antwortelemente, nicht Aktionen. Ein Aktionsbutton trägt
 * immer `.wuddel-btn`, ein Antwortelement niemals.
 */
.wuddel-work[data-locked] :where(button:not(.wuddel-btn), .wuddel-chip, .wuddel-hotspot) {
  pointer-events: none;
}

/*
 * Rückmeldung und Aktionen sind vor dem Antworten leere Hüllen. Sie sind
 * unsichtbar, zählen aber als Kind: mit `gap` und `padding-top` bringen sie
 * Höhe mit. Unsichtbare Kästen bestimmten damit, wo die Mitte liegt, auf die
 * zentriert wird — sowohl in der Seitenhöhe als auch zwischen den Spalten.
 */
.wuddel-work > :empty {
  display: none;
}

/*
 * Rückmeldung und Aktionen schließen direkt an die Antwort an, nicht am unteren
 * Bildschirmrand. Vorher stand hier `margin-top: auto` — das ist mit einem
 * mittig stehenden Inhalt unvereinbar, denn es zieht die Aktionen nach unten und
 * damit den ganzen Block wieder auseinander.
 */
.wuddel-actions {
  padding-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* ==========================================================================
   Fortschrittsband
   Punkte liegen auf einem Pfad, nicht in einer Reihe — das ist die Karte
   von Schild 1, kein generischer Stepper. Ohne Ziffern und ohne Klickziele:
   die Fragen sind nur über die QR-Codes an den Schildern erreichbar. Steht
   nur auf der Startseite.
   ========================================================================== */

.wuddel-map {
  position: relative;
  background: var(--green-wash);
  border-radius: var(--r-lg);
  padding: var(--s-3);
}

.wuddel-map-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: 0.9rem;
  font-weight: 700;
}

.wuddel-map-count {
  color: var(--green-deep);
}

.wuddel-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wuddel-trail {
  fill: none;
  stroke: oklch(0.76 0.06 150);
  stroke-width: 1.4;
  stroke-dasharray: 1.6 3.2;
  stroke-linecap: round;
}

.wuddel-stop circle {
  fill: var(--surface);
  stroke: oklch(0.74 0.06 150);
  stroke-width: 1.4;
  transition: fill 250ms var(--ease-quart), stroke 250ms var(--ease-quart);
}

/* Beantwortet, aber nicht gefunden: gefüllt, doch nicht in der Belohnungsfarbe. */
.wuddel-stop[data-answered] circle {
  fill: var(--ink-soft);
  stroke: var(--ink);
}

.wuddel-stop[data-correct] circle {
  fill: var(--green);
  stroke: var(--green-deep);
}

/* Häkchen bzw. Strich — der Zustand hängt nicht allein an der Farbe. */
.wuddel-stop text {
  font-size: 4.4px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--surface);
  pointer-events: none;
}

/*
 * Wuddel auf der Startseite — rein dekorativ, deshalb alt="". Er steht mit dem
 * Text zusammen auf der Bühne und wird mit ihr zentriert; ein eigenes
 * `margin-top: auto` würde ihn wieder vom Text weg nach unten ziehen.
 */
.wuddel-start-dog {
  align-self: center;
  /* Wuddel ist 450 x 1141 — über die Breite begrenzt wäre er 530 px hoch und
     würde die Startseite in den Scroll schieben. Also über die Höhe begrenzen,
     in svh: damit stimmt es im Querformat von selbst. */
  width: auto;
  height: auto;
  max-height: min(40svh, 340px);
  max-width: 45%;
}

/* ==========================================================================
   Wuddel stellt die Frage
   ========================================================================== */

.wuddel-ask {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/*
 * Kein Kreisbeschnitt und kein eigener Ring: Wuddels Ohren und Nase ragen in der
 * Illustration bewusst über den grünen Kreis hinaus — genau wie im Badge
 * "Wuddel will wissen" auf den Schildern. Rundschneiden würde sie abschneiden.
 * Der grüne Kreis ist Teil des Bildes.
 */
.wuddel-avatar {
  flex: 0 0 auto;
  width: 88px;
  height: auto;
  object-fit: contain;
}

.wuddel-ask-label {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--green-deep);
}

.wuddel-station {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.wuddel-prompt {
  font-size: clamp(1.4rem, 5.5cqi, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em; /* Boden bei -0.03em */
  text-wrap: balance;
}

/*
 * Der Einleitungstext der Startseite. (Der Name stammt aus der Zeit mit
 * Hinweisen pro Frage; die sind mit der Ein-Versuch-Regel entfallen.)
 *
 * 60ch und nicht 34ch: auf dem Handy bindet die Grenze ohnehin nicht, auf dem
 * Tablet brach sie den Text bei 300 px um, während 700 px Platz waren — halbe
 * Seite leer und Zeilen von vier Wörtern. 60ch bleibt im Rahmen der 65–75, die
 * für Lesbarkeit gelten.
 */
.wuddel-hint {
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ==========================================================================
   Antworttyp: choice
   ========================================================================== */

.wuddel-choices {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

#wuddel-quiz .wuddel-choice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%; /* sonst schrumpft der Button auf die Textbreite */
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font-weight: 700;
  color: inherit;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none; /* sonst setzt das Theme hier seinen Fokus-Glow */
  transition:
    border-color 200ms var(--ease-quart),
    background-color 200ms var(--ease-quart),
    transform 200ms var(--ease-quart);
}

.wuddel-choice-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--r-pill);
  background: var(--green-wash);
  color: var(--green-deep);
  font-weight: 800;
}

@media (hover: hover) {
  #wuddel-quiz .wuddel-choice:hover {
    border-color: var(--green);
  }
}

/* ==========================================================================
   Antworttyp: image-choice — Kreis mit grünem Ring, das tragende
   Gestaltungsmittel der Schilder
   ========================================================================== */

/*
 * Zwei Spalten, damit die Bilder groß bleiben — ein Kind muss Steinkauz und
 * Fasan unterscheiden können. Bei drei Optionen zentriert flex-wrap die letzte
 * Reihe von selbst; im Grid stünde sie linksbündig und sähe versehentlich aus.
 */
.wuddel-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}

.wuddel-images > li {
  flex: 0 1 calc(50% - var(--s-3));
  max-width: 11rem;
}

#wuddel-quiz .wuddel-image-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  color: inherit;
  background: none; /* der Button selbst ist unsichtbar — der Ring trägt die Optik */
  border: 0;
  box-shadow: none;
}

.wuddel-ring {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  border: 4px solid var(--green);
  background: var(--surface);
  overflow: hidden;
  transition: transform 250ms var(--ease-quart), border-color 250ms var(--ease-quart);
}

.wuddel-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Der Zustand nach der Antwort steht weiter unten unter „Ergebnis am
   Antwortelement". Die frühere Regel für `data-state='chosen'` ist entfallen:
   nach dem Umbau auf einen Versuch setzte nichts mehr dieses Attribut, die
   Bildoptionen gaben also überhaupt keine Rückmeldung mehr. */

.wuddel-image-label {
  font-size: 0.95rem;
  font-weight: 700;
}

@media (hover: hover) {
  .wuddel-image-choice:hover .wuddel-ring {
    transform: scale(1.03);
  }
}

/* ==========================================================================
   Antworttyp: match — Zuordnung
   Ziehen UND Antippen sind gleichwertig. Viele Kinder können nicht
   zuverlässig ziehen; der Antippen-Weg ist zugleich der Tastatur-Weg.
   ========================================================================== */

/* Erklärt beide Bedienwege. Muss vor den Ablagezielen stehen, nicht danach. */
.wuddel-instruction {
  margin-bottom: var(--s-3);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-deep);
}

.wuddel-match-targets {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.wuddel-target {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-2);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  transition: background-color 200ms var(--ease-quart), border-color 200ms var(--ease-quart);
}

.wuddel-target-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  border: 3px solid var(--green);
  background: var(--green-wash);
  object-fit: contain;
  padding: 3px;
}

/* Ablagefläche bleibt sichtbar leer, damit klar ist wohin. */
.wuddel-slot {
  flex: 1 1 auto;
  min-height: 2.6rem;
  display: grid;
  place-items: center;
  border: 2px dashed oklch(0.84 0.03 150);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.wuddel-target[data-over] {
  background: var(--green-wash);
  border-color: var(--green);
}

.wuddel-target[data-over] .wuddel-slot {
  border-color: var(--green);
}

.wuddel-target[data-filled] .wuddel-slot {
  border-style: solid;
  border-color: transparent;
  background: var(--green-wash);
}

/*
 * Die Chip-Ablage haftet am unteren Rand. Ohne das liegen die Chips bei
 * 5 Ablagezielen unter dem Bildschirmrand, und ein Kind müsste während des
 * Ziehens scrollen — für eine Zuordnungsaufgabe unbrauchbar. So sind Ziele
 * und Chips immer gleichzeitig sichtbar.
 */
.wuddel-chips {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-2);
  background: var(--bg);
  border-top: 2px solid var(--line);
  /* Verläuft nach unten aus dem Sichtfeld, damit klar ist, dass es eine Leiste ist. */
  box-shadow: 0 -8px 12px -8px oklch(0.3 0.09 258 / 0.18);

  /*
   * Feste Mindesthöhe, damit die Leiste nicht zusammenfällt, wenn der letzte
   * Chip zum Ziehen auf position:fixed gehoben wird. Ohne das wird das Dokument
   * kürzer, der Scroll klemmt und der Inhalt verrutscht mitten im Ziehen — das
   * Ablageziel wandert dem Finger weg.
   */
  min-height: calc(48px + var(--s-3) * 2);
}

/*
 * Sind alle Chips platziert, klappt die Leiste ein — ein leeres Band mit
 * Trennlinie sieht nach Fehler aus. Gesetzt wird das erst, wenn die Leiste
 * wirklich kein Kind mehr hat; ein gezogener Chip bleibt bis zum Ablegen ihr
 * Kind, deshalb kann das nicht mitten im Ziehen auslösen.
 */
.wuddel-chips[data-empty] {
  min-height: 0;
  padding-block: 0;
  border-top: 0;
  box-shadow: none;
}

#wuddel-quiz .wuddel-chip {
  min-height: 48px; /* Trefferradius beim Ziehen */
  padding: var(--s-2) var(--s-4);
  font-weight: 800;
  background: var(--surface);
  border: 2px solid var(--green);
  border-radius: var(--r-pill);
  color: var(--green-deep);
  box-shadow: none; /* der Schatten kommt beim Ziehen, nicht vom Theme */
  touch-action: none; /* sonst scrollt die Seite beim Ziehen weg */
  transition: transform 250ms var(--ease-expo), box-shadow 250ms var(--ease-expo);
}

#wuddel-quiz .wuddel-chip[data-selected] {
  background: var(--green-btn);
  border-color: var(--green-btn);
  color: var(--surface);
}

#wuddel-quiz .wuddel-chip[data-dragging] {
  position: fixed;
  z-index: var(--z-drag);
  transform: scale(1.06);
  box-shadow: 0 6px 14px oklch(0.3 0.09 258 / 0.28);
  pointer-events: none;
}

#wuddel-quiz .wuddel-chip[data-placed] {
  border-style: none;
  background: var(--green-btn);
  color: var(--surface);
}

/* ==========================================================================
   Antworttyp: hotspot
   ========================================================================== */

/*
 * Begrenzt wird die Breite, nicht die Höhe des Bildes: `--ratio` setzt app.js
 * nach dem Laden aus den echten Bildmaßen, `--hotspot-h` steht nur im
 * Querformat. So bleibt das Bild 100 % breit und die Prozentwerte des Markers
 * stimmen. 200svh als Vorgabe heißt "keine Begrenzung".
 */
.wuddel-hotspot {
  --ratio: 1.2;
  position: relative;
  max-width: min(100%, calc(var(--hotspot-h, 200svh) * var(--ratio)));
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--line);
  touch-action: manipulation;
}

.wuddel-hotspot img {
  display: block;
  width: 100%;
  height: auto;
}

.wuddel-pin {
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  margin: -1.1rem 0 0 -1.1rem;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--surface);
  /*
   * Rot beim Fehltipp, grün beim Treffer — dieselbe Sprache wie an den anderen
   * drei Fragetypen. `setData(pin, { hit })` entfernt das Attribut bei false,
   * deshalb ist der Grundzustand hier der Fehltipp und `[data-hit]` der Treffer.
   * Unterscheidbar bleibt es zusätzlich über das Zeichen (× / ✓).
   */
  background: var(--berry);
  animation: wuddel-pop 300ms var(--ease-expo);
}

.wuddel-pin[data-hit] {
  background: var(--green-deep);
}

/* ==========================================================================
   Ergebnis am Antwortelement

   Grün bei richtig, Rot bei falsch — an der Stelle, auf die das Kind gerade
   gezeigt hat, nicht nur im Kasten darunter.

   Rot ist hier richtig, seit es nur einen Versuch gibt. Solange wiederholt
   werden durfte, war eine falsche Antwort ein Zwischenschritt und Rot dafür zu
   laut; jetzt kostet sie den Punkt endgültig, ist also ein Ergebnis. Die alte
   Begründung "das Kind verliert nichts dabei" stimmt seit dieser Änderung nicht
   mehr, stand aber noch im CSS.

   Beide Zustände bleiben helle Flächen mit dunkler Schrift — kein satter
   roter Block. Das ist dieselbe Entscheidung wie beim ganzen Farbsystem: die
   App wird draußen bei Sonnenlicht benutzt.

   Gemessen, nicht geschätzt (siehe tools/contrast-check.py):
     --green-deep auf --green-wash  6,24:1
     --berry      auf --berry-wash  6,30:1
     Weiß         auf --green-deep  7,35:1
     Weiß         auf --berry       7,41:1

   Und nie nur über Farbe: jedes Element trägt zusätzlich ✓ oder ×.
   ========================================================================== */

#wuddel-quiz :is(.wuddel-choice, .wuddel-target)[data-answer='right'] {
  background: var(--green-wash);
  border-color: var(--green-deep);
  color: var(--green-deep);
}

#wuddel-quiz :is(.wuddel-choice, .wuddel-target)[data-answer='wrong'] {
  background: var(--berry-wash);
  border-color: var(--berry);
  color: var(--berry);
}

/*
 * `margin-inline-start: auto` schiebt das Zeichen an die abschließende Kante,
 * ohne dass die Beschriftung ihre Breite verliert.
 */
#wuddel-quiz :is(.wuddel-choice, .wuddel-target)[data-answer]::after {
  margin-inline-start: auto;
  padding-inline-start: var(--s-2);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

#wuddel-quiz :is(.wuddel-choice, .wuddel-target)[data-answer='right']::after {
  content: '✓';
}

#wuddel-quiz :is(.wuddel-choice, .wuddel-target)[data-answer='wrong']::after {
  content: '×';
}

/*
 * Der abgelegte Chip nimmt die Farbe seiner Zeile an. Sonst stünde in einer
 * roten Zeile ein grüner Chip — und der Chip IST die Antwort des Kindes.
 */
#wuddel-quiz .wuddel-target[data-answer='right'] .wuddel-chip[data-placed] {
  background: var(--green-deep);
}

#wuddel-quiz .wuddel-target[data-answer='wrong'] .wuddel-chip[data-placed] {
  background: var(--berry);
}

/*
 * Das Ablagefeld tritt zurück, sobald die Zeile ihr Ergebnis trägt. Es ist im
 * gefüllten Zustand grün eingefärbt — in einer roten Zeile stand damit eine
 * grüne Fläche, also genau die Farbe der Gegenaussage.
 */
#wuddel-quiz .wuddel-target[data-answer] .wuddel-slot {
  background: none;
}

/* Bildoptionen: der Ring färbt sich, das Zeichen sitzt als Plakette darauf. */
#wuddel-quiz .wuddel-image-choice[data-answer='right'] .wuddel-ring {
  border-color: var(--green-deep);
}

#wuddel-quiz .wuddel-image-choice[data-answer='wrong'] .wuddel-ring {
  border-color: var(--berry);
}

/*
 * Die nicht gewählten Kreise nehmen ihren Markengrün-Ring ab, sobald die Station
 * zu ist. Sonst tragen sie weiter Grün — und Grün heißt hier jetzt "richtig".
 * Auf einem Bild mit drei Optionen sah damit jede nicht angetippte Option nach
 * einer richtigen Antwort aus, obwohl nur eine es ist.
 *
 * Beim Fragetyp `choice` gibt es das Problem nicht: dort ist der Grundrahmen
 * schon `--line`, also neutral.
 */
#wuddel-quiz .wuddel-work[data-locked] .wuddel-image-choice:not([data-answer]) .wuddel-ring {
  border-color: var(--line);
}

/*
 * Die Plakette sitzt am Button, NICHT am Ring. Der Ring ist ein Kreis mit
 * `overflow: hidden`; ein Zeichen in seiner Ecke liegt fast vollständig
 * außerhalb der Kreisfläche und wurde abgeschnitten. Am Button liegt dieselbe
 * Ecke frei, und die Plakette überlappt den Kreisrand sichtbar.
 */
#wuddel-quiz .wuddel-image-choice {
  position: relative;
}

#wuddel-quiz .wuddel-image-choice[data-answer]::after {
  position: absolute;
  inset-block-start: -0.25rem;
  inset-inline-end: -0.25rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 3px solid var(--bg);
  color: var(--surface);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

#wuddel-quiz .wuddel-image-choice[data-answer='right']::after {
  content: '✓';
  background: var(--green-deep);
}

#wuddel-quiz .wuddel-image-choice[data-answer='wrong']::after {
  content: '×';
  background: var(--berry);
}

/* Bienenfoto: der Rahmen färbt sich, das Zeichen trägt schon der Marker. */
#wuddel-quiz .wuddel-hotspot[data-answer='right'] {
  border-color: var(--green-deep);
}

#wuddel-quiz .wuddel-hotspot[data-answer='wrong'] {
  border-color: var(--berry);
}

/* ==========================================================================
   Rückmeldung — nie nur über Farbe: immer Symbol + Text + Bewegung
   ========================================================================== */

/*
 * Der Kasten ist eine Spalte: Text, darunter das Bild zur Auflösung. Ab
 * Tabletbreite werden daraus zwei Spalten — siehe die Stufen weiter unten.
 */
.wuddel-feedback {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  font-weight: 700;
}

.wuddel-feedback-text {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-width: 0;
}

/*
 * Auf dem Handy ein Streifen: `aspect-ratio` plus `object-fit: cover` statt
 * freier Höhe, sonst bestimmt das Seitenverhältnis der Vorlage, wie weit die
 * Aktionen nach unten rutschen — und `wuddel-ganz.png` ist mit 450 x 1141 fast
 * dreimal so hoch wie breit.
 */
.wuddel-answer-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}

/*
 * Freigestellte Illustrationen ganz zeigen, nicht beschneiden: Wuddel ist
 * 450 x 1141, formatfüllend beschnitten wäre ihm der Kopf ab. Welches Bild
 * welches ist, entscheidet app.js über `data-fit` — am Dateinamen im CSS zu
 * hängen wäre dieselbe Regel, nur versteckt.
 */
.wuddel-answer-image[data-fit='contain'] {
  object-fit: contain;
}

/* Wuddel auf der Ergebnisseite erscheint erst ab Tabletbreite — siehe dort. */
.wuddel-result-dog {
  display: none;
}

.wuddel-feedback[data-tone='yes'] {
  background: var(--green-wash);
  color: var(--green-deep);
}

.wuddel-feedback[data-tone='again'] {
  background: var(--berry-wash);
  color: var(--berry);
}

/*
 * Die Erklärung nach einer falschen Antwort. Honiggelb-Wash mit Dunkelblau,
 * nicht rot: es ist keine Fehlermeldung, sondern die Auflösung. Rot gehört dem
 * Ton "again", und der bleibt für echte Warnungen (kein Speicher verfügbar).
 * Unterscheidbar bleibt es zusätzlich am Zeichen — ✓ gegen !.
 */
.wuddel-feedback[data-tone='note'] {
  background: oklch(0.96 0.045 85);
  color: var(--ink);
}

.wuddel-feedback-mark {
  flex: 0 0 auto;
  font-size: 1.3rem;
  line-height: 1;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

#wuddel-quiz .wuddel-btn {
  min-height: var(--tap);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  text-decoration: none;
  display: grid;
  place-items: center;
  border: 0;
  box-shadow: none;
  transition: transform 200ms var(--ease-quart), background-color 200ms var(--ease-quart);
}

/* Weiß auf --green-btn = 4,9:1. Auf dem helleren --green wäre es nur 3,1:1. */
#wuddel-quiz .wuddel-btn[data-variant='primary'] {
  background: var(--green-btn);
  color: var(--surface);
}

#wuddel-quiz .wuddel-btn[data-variant='quiet'] {
  background: transparent;
  color: var(--green-deep);
  border: 2px solid var(--green);
}

#wuddel-quiz .wuddel-btn:active {
  transform: scale(0.98);
}

#wuddel-quiz .wuddel-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   Abschluss und Urkunde
   ========================================================================== */

.wuddel-result {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: center;
}

.wuddel-seal {
  width: 8rem;
  height: 8rem;
  border-radius: var(--r-pill);
  background: var(--sun);
  color: var(--ink); /* Dunkelblau auf Honiggelb = 5,5:1. Weiß wäre 1,8:1. */
  display: grid;
  place-items: center;
  align-content: center;
  font-weight: 900;
  line-height: 1;
  animation: wuddel-pop 420ms var(--ease-expo);
}

.wuddel-seal-score {
  font-size: 2.6rem;
}

.wuddel-seal-of {
  font-size: 0.8rem;
  font-weight: 700;
}

.wuddel-title {
  font-size: clamp(1.5rem, 6cqi, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.wuddel-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  text-align: left;
  width: 100%;
}

.wuddel-field label {
  font-weight: 700;
  font-size: 0.95rem;
}

#wuddel-quiz .wuddel-field input {
  font: inherit;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none; /* Themes legen bei :focus einen farbigen Glow darüber */
}

#wuddel-quiz .wuddel-field input::placeholder {
  color: var(--ink-soft); /* gleiche 4,5:1-Anforderung wie Fließtext */
  opacity: 1;
}

.wuddel-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 40ch;
}

/*
 * Der Weg zur nächsten Frage. Absichtlich Text und kein Button — die nächste
 * Frage steht am Schild. Dafür sichtbar hervorgehoben, weil es die eigentliche
 * Handlungsanweisung ist.
 *
 * Weiß mit grünem Rand, nicht grün gefüllt: direkt darüber steht die
 * Erfolgsmeldung auf --green-wash, und zwei gleich aussehende grüne Blöcke
 * übereinander lesen sich als ein Block. Die Anweisung ist etwas anderes als
 * die Bewertung und darf nicht wie deren Fortsetzung aussehen.
 */
.wuddel-onward {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 2px solid var(--green);
  color: var(--green-deep);
  font-weight: 700;
  text-wrap: pretty;
}

.wuddel-preview {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
}

/* ==========================================================================
   Responsiv
   Die fließende Grundskala (clamp, cqi, %) trägt den Normalfall. Stufen gibt es
   nur für die Fälle, in denen sie nicht reicht.

   Gemessen wird der Behälter (@container), nicht das Fenster. Grund steht oben
   an `.wuddel`: in WordPress sagt die Fensterbreite nichts darüber, wie viel
   Platz der Shortcode wirklich hat. Einzige Ausnahme sind die drei Regeln unten,
   die von der Fenster-HÖHE abhängen — Höhe kann eine Container-Abfrage bei
   `inline-size` nicht beantworten.

   In Pixeln, nicht in em: in einer Container-Abfrage bezieht sich em auf die
   Schriftgröße des Behälters, und die ändert sich hier selbst je Stufe.
   ========================================================================== */

/*
 * 1. Sehr wenig Platz (schmales Handy, oder eine enge Theme-Spalte).
 * Feste Pixelgrößen fressen hier den Rest: Wuddels Kopf mit 88 px und ein
 * 52-px-Spurensymbol lassen für die Ablagefläche daneben zu wenig übrig.
 * Die Touchziele bleiben trotzdem über 44 px — kleiner wird nichts.
 */
@container (max-width: 360px) {
  .wuddel {
    font-size: 17px;
  }

  .wuddel-avatar {
    width: 66px;
  }

  .wuddel-target-icon {
    width: 46px;
    height: 46px;
  }

  #wuddel-quiz .wuddel-chip {
    padding-inline: var(--s-3);
  }

  .wuddel-seal {
    width: 7rem;
    height: 7rem;
  }

  .wuddel-seal-score {
    font-size: 2.2rem;
  }
}

/*
 * 2. Ab 700 px Behälterbreite: Tablet hochkant, Handy quer, breite Theme-Spalte.
 *
 * Noch eine Spalte für die Frage — zwei wären hier je rund 330 px, zu schmal für
 * zwei Bildkreise nebeneinander, und die Bildfragen sind der Kern des Quiz.
 *
 * Die ZUORDNUNG wird hier aber schon zweispaltig, aus zwei Richtungen dieselbe
 * Lösung: quer gehalten fehlt die Höhe (fünf Ablageziele à 56 px plus Chip-Leiste
 * brauchen gut 380 px, ein quer gehaltenes Handy hat 390 px insgesamt), und
 * hochkant ist eine Ablagefläche von 500 px mit dem Wort "Hierhin" darin ein
 * Loch. Beides löst: Ziele links, Chips als Spalte rechts. Weil ein quer
 * gehaltenes Handy rund 844 px breit ist, deckt diese eine Schwelle beide Fälle
 * ab — es braucht keine zweite Regel für das Querformat.
 */
@container (min-width: 700px) {
  .wuddel {
    font-size: 19px;
  }

  .wuddel-shell {
    max-width: 44rem;
    padding-block: var(--s-5);
  }

  .wuddel-stage {
    gap: var(--s-5);
  }

  /*
   * Der Avatar wächst mit. Er stand auf dem Tablet mit 88 px neben einer 1,9 rem
   * großen Frage in sehr viel leerem Platz — Wuddel stellt die Fragen, das darf
   * man auch sehen. Die Zeile daneben bekommt dieselbe Stufe, sonst kippt das
   * Verhältnis von Bild zu Text.
   */
  .wuddel-avatar {
    width: 116px;
  }

  .wuddel-ask-label,
  .wuddel-station {
    font-size: 0.95rem;
  }

  /*
   * Die Bildoptionen sind der eigentliche Gewinn auf dem Tablet: bei Steinkauz
   * gegen Fasan muss ein Kind Federn unterscheiden, und 200 px sind dafür knapp.
   * Zwei Spalten bleiben es trotzdem — drei nebeneinander wären wieder kleiner.
   */
  .wuddel-images > li {
    max-width: 15rem;
  }

  /*
   * Der Erklärkasten wird zweispaltig: Text links, Bild rechts. Auf dem Handy
   * liegt das Bild als Streifen darunter und schiebt die Aktionen nach unten;
   * hier ist die Breite da, also kostet es keine Höhe mehr.
   */
  .wuddel-feedback[data-with-image] {
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
  }

  .wuddel-feedback[data-with-image] .wuddel-feedback-text {
    flex: 1 1 auto;
  }

  .wuddel-feedback[data-with-image] .wuddel-answer-image {
    flex: 0 0 auto;
    width: 11rem;
    aspect-ratio: 1;
  }

  .wuddel-target-icon {
    width: 60px;
    height: 60px;
  }

  /*
   * Startseite schon hier zweispaltig, nicht erst bei 950 px: hochkant auf dem
   * Tablet stand Wuddel unter dem Text, und weil der Text nur 34ch breit war,
   * blieb rechts die halbe Seite leer. Die Fragen bleiben bis 950 px einspaltig —
   * dort teilt sich die Breite auf Frage und Antwortelemente auf, und die
   * brauchen sie ganz (fünf Ablageziele, Bildkreise).
   */
  .wuddel-shell[data-view='start'] .wuddel-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: center;
  }

  .wuddel-start-dog {
    max-height: min(52svh, 400px);
    max-width: 100%;
  }

  /*
   * Wuddel steht auch am Ziel. Die Ergebnisseite ist die leerste im ganzen
   * Quiz — Siegel, Titel, eine Zeile, Namensfeld —, und `wuddel-ganz.png` lag
   * bisher nur auf der Urkunde. Auf dem Handy bleibt er weg: dort soll das
   * Namensfeld ohne Scrollen erreichbar sein.
   */
  .wuddel-result-dog {
    display: block;
    width: auto;
    max-height: min(34svh, 260px);
    margin-inline: auto;
  }

  .wuddel-match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'anleitung anleitung'
      'ziele     chips';
    column-gap: var(--s-4);
    align-items: start;
  }

  .wuddel-instruction {
    grid-area: anleitung;
  }

  .wuddel-match-targets {
    grid-area: ziele;
  }

  .wuddel-chips {
    grid-area: chips;
    position: static;
    flex-direction: column;
    flex-wrap: nowrap;
    /* Feste Mindestbreite aus demselben Grund, aus dem die Leiste im Hochformat
       eine Mindesthöhe hat: der zum Ziehen angehobene Chip verlässt den Fluss,
       und eine schrumpfende Spalte würde das Ziel unter dem Finger verschieben. */
    min-width: 7.5rem;
    min-height: 0;
    margin-top: 0;
    padding: 0;
    background: none;
    border-top: 0;
    box-shadow: none;
  }
}

/*
 * 3. Ab 950 px Behälterbreite: Tablet quer, Laptop, Schreibtisch.
 *
 * Eine einzelne Spalte trägt hier nicht mehr — 540 px Inhalt in 1280 px Fenster
 * sieht aus wie die Handyansicht, die jemand im Browser offen hat. Also zwei
 * Spalten: links was gefragt wird, rechts woran gearbeitet wird. Die Frage
 * bleibt beim Antworten sichtbar, und keine Spalte wird so breit, dass Text-
 * oder Buttonzeilen unlesbar lang werden.
 */
@container (min-width: 950px) {
  .wuddel-shell {
    max-width: 62rem;
  }

  /* Das Raster sitzt auf der Bühne, nicht auf der Hülle — die Hülle behält
     ihre Flex-Spalte, damit `margin-block: auto` weiter zentriert. */
  .wuddel-shell[data-view='question'] .wuddel-stage,
  .wuddel-shell[data-view='start'] .wuddel-stage {
    display: grid;
    /* Antwortseite etwas breiter: dort stehen Bildkreise und Ablageziele. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: var(--s-6);
  }

  /*
   * Beide Spalten auf gemeinsamer Mitte, auf der Startseite wie bei der Frage.
   * Oben ausgerichtet wirken sie wie zwei Sachen, die nur zufällig nebeneinander
   * stehen: der Fragetext endet nach drei Zeilen, das Bienenfoto daneben läuft
   * 200 px weiter. Zentriert bekommen sie eine gemeinsame Achse.
   *
   * Zentriert wird immer das KÜRZERE — welche Spalte das ist, wechselt je Frage.
   * Bei der Zuordnung ist es die Frage, bei einer Textfrage mit drei Antworten
   * die Antwortseite.
   */
  .wuddel-shell[data-view='start'] .wuddel-stage,
  .wuddel-shell[data-view='question'] .wuddel-stage {
    align-items: center;
  }

  .wuddel-start-dog {
    justify-self: center;
    margin-top: 0;
    max-width: 100%;
    max-height: min(62svh, 480px);
  }

  /* Das Pollenhöschen ist klein — hier ist Platz, das Foto größer zu zeigen.
     Begrenzt bleibt es trotzdem, sonst schiebt es die Rückmeldung aus dem Bild. */
  .wuddel-hotspot {
    --hotspot-h: 68svh;
  }

  .wuddel-avatar {
    width: 132px;
  }

  .wuddel-images > li {
    max-width: 17rem;
  }

  .wuddel-target-icon {
    width: 68px;
    height: 68px;
  }

  /*
   * Der Erklärkasten steht hier in der rechten Spalte, ist also nur halb so
   * breit wie die Seite. Das Bild bleibt deshalb bei 12 rem — mit der Stufe der
   * Bildoptionen mitzuwachsen würde den Text auf vier Wörter pro Zeile drücken.
   */
  .wuddel-feedback[data-with-image] .wuddel-answer-image {
    width: 12rem;
  }

  /* Urkunde bleibt einspaltig: ein Namensfeld über 900 px wäre albern. */
  .wuddel-shell[data-view='result'] {
    max-width: 44rem;
  }
}

/*
 * 4. Wenig HÖHE — praktisch immer ein quer gehaltenes Handy.
 *
 * Das kann keine Container-Abfrage sein: `container-type: inline-size` kennt nur
 * die Breite, und `size` bräuchte eine feste Höhe, die eine Quizseite nicht hat.
 *
 * Steht bewusst als letzte Stufe: die Blöcke davor haben bei 844 px Breite schon
 * gegriffen und mehr Luft oben und unten gesetzt — genau die fehlt hier.
 */
@media (orientation: landscape) and (max-height: 34em) {
  .wuddel-shell {
    padding-block: var(--s-2);
  }

  .wuddel-stage {
    gap: var(--s-3);
  }

  .wuddel-avatar {
    width: 64px;
  }

  /* Sonst liegt die Trefferfläche der Biene unter dem Bildschirmrand. */
  .wuddel-hotspot {
    --hotspot-h: 62svh;
  }

  .wuddel-result {
    gap: var(--s-2);
  }

  .wuddel-seal {
    width: 6rem;
    height: 6rem;
  }

  .wuddel-seal-score {
    font-size: 2rem;
  }
}

/* ==========================================================================
   Bewegung
   ========================================================================== */

@keyframes wuddel-pop {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes wuddel-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/*
 * Das Wackeln ist nur noch die Zugabe, nicht mehr die Aussage: die trägt der
 * Farbzustand am Element. Deshalb steht hier kein Ring mehr, und deshalb darf
 * die Klasse nach 500 ms wieder abfallen, ohne dass etwas fehlt.
 */
.wuddel-nudge {
  animation: wuddel-nudge 200ms var(--ease-quart) 2;
}

/* Der grüne Ring zeichnet sich selbst. */
@keyframes wuddel-draw {
  from { stroke-dashoffset: var(--len); }
  to { stroke-dashoffset: 0; }
}

.wuddel-ring-draw {
  fill: none;
  stroke: var(--green);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  animation: wuddel-draw 350ms var(--ease-quart) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .wuddel *,
  .wuddel *::before,
  .wuddel *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  /*
   * Kein Ersatzring mehr für das Wackeln.
   *
   * Solange die falsche Antwort nur ein Wackeln war, brauchte es hier etwas
   * Sichtbares, und dieser Ring war zweimal falsch: erst rot (las sich als
   * Dauerfehler), dann dunkelblau und dauerhaft stehen geblieben.
   *
   * Jetzt trägt das Element selbst das Ergebnis — rote Fläche mit × bei falsch,
   * grüne mit ✓ bei richtig, und das bleibt sichtbar, statt nach 500 ms zu
   * verschwinden. Das ist auch die bessere Antwort auf "Bewegung reduzieren":
   * eine Zustandsänderung statt einer Bewegung, genau das, was die Einstellung
   * verlangt.
   */
  .wuddel-nudge {
    animation: none;
  }
}