/* ════════════════════════════════════════════════════════════════════
   Black Natter-KI — Druckbogen

   Gebaut nach DESIGN.md vom 20.09.2026, Richtung „Druckbogen":
   ein Plakat in Turmeric, auf dem eine metallisch schimmernde Natter
   liegt, darunter läuft die Seite als ruhiger Bogen auf warmem Papier
   weiter.

   Die drei Sätze, die man am ehesten versehentlich bricht:
   1. #000000 gehört der Natter und dem Schriftzug, sonst nichts (der
      Schriftzug seit Isabelles Entscheidung vom 22.09.2026). Text ist
      Malt #2A2312.
   2. Turmeric #FFBE0B ist niemals Schriftfarbe (1,4 : 1 auf Papier).
      Wo die Farbe als Text gebraucht wird, steht #7A5A00.
   3. Radius ist überall 0. Einzige Ausnahme: der Punkt an der Randnotiz
      (Isabelle, 22.09.2026).

   Kein Dunkelmodus: Schwarz auf Malt ergibt gemessen 1,35 : 1, die
   Natter würde verschwinden. Solange das Logo schwarz ist, ist diese
   Seite hell — das ist ein technischer Ausschluss, keine Geschmacksfrage.

   Zielgerät: Handy zuerst (ab 360 px Breite), sauber bis zur vollen
   Desktop-Breite. Bewusst NICHT das iPad-Maß der Unterrichtsprojekte —
   diese Seite besuchen fremde Menschen, die meisten mit dem Handy.
   ════════════════════════════════════════════════════════════════════ */

/* ── Schriften: liegen auf dem eigenen Server, nicht bei Google ────────
   Wichtig für den Datenschutz: Google Fonts über das Netz nachzuladen
   würde die IP-Adresse jedes Besuchers an Google schicken und die
   Datenschutzerklärung zur Lüge machen.

   Alle drei Familien stehen unter der SIL Open Font License 1.1. Die
   Lizenz verlangt, dass ihr Text mitgeliefert wird; er liegt je Schrift
   in einer eigenen Datei daneben: `OFL-Archivo.txt`, `OFL-Literata.txt`,
   `OFL-IBM-Plex.txt`. Wer eine Schrift austauscht, tauscht die Datei mit.
   ⚠️ Bei IBM Plex ist der Name „Plex" geschützt (Reserved Font Name):
   eine veränderte Fassung darf nicht mehr so heißen.

   Archivo und Literata sind variable Schriften: eine Datei deckt alle
   Gewichte ab, bei Archivo zusätzlich die Breitenachse. Das ist der
   Grund, warum hier drei Familien weniger wiegen als vorher eine. */
@font-face {
  font-family: "Archivo Variable";
  src: url("schrift/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Literata Variable";
  src: url("schrift/literata-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("schrift/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("schrift/plexmono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ── Die Palette ──────────────────────────────────────────────────────
   Turmeric und Malt hat Isabelle gewählt. Papier und die gedämpften
   Töne sind daraus abgeleitet, nicht frei dazugewählt — die ganze Seite
   liegt damit in derselben Wärmefamilie.

   Gemessene Paarungen (WCAG 2.1: 4,5 : 1 für Text, 3 : 1 für Rahmen):
     Malt auf Papier ................ 13,25 : 1
     Malt auf Turmeric .............. 9,37 : 1
     Papier auf Malt ................ 13,25 : 1
     #6A614E gedämpft auf Papier .... 5,20 : 1
     #6A614E gedämpft auf Fläche .... 4,61 : 1 (Fußzeile; vorher
             #6E6551 mit 4,35 : 1 zu blass, Befund B2, 22.09.2026)
     #5C4600 gedämpft auf Turmeric .. 5,41 : 1
     #7A5A00 Akzent auf Papier ...... 5,43 : 1
     #7A5A00 Fokusring auf Turmeric . 3,84 : 1
     Natter #000000 auf Turmeric .... 12,62 : 1                        */
:root {
  --turmeric: #FFBE0B;        /* Knallfarbe, NUR als Fläche */
  --turmeric-tief: #7A5A00;   /* dieselbe Farbe, dunkel genug für Text */
  --malt: #2A2312;            /* Haupttext und dunkle Flächen */
  --malt-leise: #6A614E;      /* gedämpfter Text auf Papier */
  --malt-leise-invers: #A79C84; /* gedämpft auf Malt-Grund */
  --auf-turmeric-leise: #5C4600; /* gedämpft auf Turmeric */
  --papier: #F2ECE0;          /* der Grund unterhalb des Plakats */
  --flaeche: #E7DFCD;         /* eingesenkte Zone auf Papier */
  --linie: #C9BFA6;           /* Rahmen, aus Papier abgedunkelt */
  --natter: #000000;          /* AUSSCHLIESSLICH das Logo */

  --text-breite: 38rem;
  --bogen: 1180px;
  --seitenluft: max(4vw, 20px);
}

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

/* Die Natter ragt absichtlich über den rechten Rand hinaus. Ohne diese
   Zeile erzeugt sie eine waagerechte Bildlaufleiste.

   ⚠️ Gemessen am 20.09.2026: `overflow-x: clip` am `body` allein reicht
   NICHT — die Seite war bei 375 px Fenster 394 px breit. Die Regel muss
   am `html` stehen; am `body` wird sie in dieser Lage nicht auf den
   sichtbaren Bereich durchgereicht.

   `clip` statt `hidden`, damit `position: sticky` nicht mit
   abgeschaltet wird, falls später etwas kleben soll. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--papier);
  color: var(--malt);
  font: 400 1.1875rem/1.6 "Literata Variable", Georgia, serif;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Der Satzspiegel ──────────────────────────────────────────────────
   Asymmetrisch, nie zentriert: links die Textspalte, rechts davon Luft.
   Die frühere Randspalte mit einem Wort in Mono ist seit 22.09.2026 weg
   (Isabelle: Randwörter gestrichen, Text rückt nach links). */
.bogen {
  display: grid;
  grid-template-columns:
    [text] minmax(0, var(--text-breite))
    [luft] 1fr;
  column-gap: 2rem;
  max-inline-size: var(--bogen);
  margin-inline: auto;
  padding-inline: var(--seitenluft);
}
.spalte { grid-column: text; }
/* Eine Überschrift mitten in der Spalte (Kontakt unter „Warum“, seit
   22.09.2026) braucht Luft nach oben; sonst klebt sie am Absatz. */
.spalte > h2:not(:first-child) { margin-block-start: 2rem; }

@media (max-width: 820px) {
  .bogen { grid-template-columns: minmax(0, 1fr); }
  .spalte { grid-column: 1; }
}

/* ── Schrift ──────────────────────────────────────────────────────────
   Archivo für Überschriften: breitlaufende Grotesk, weil der gezeichnete
   Schriftzug 1183 × 93 misst (12,7 : 1) und alles Schmalere daneben wie
   ein Fremdkörper wirkt.
   Literata für den Fließtext: KI-Seiten sind praktisch durchgehend
   serifenlos — die Serife ist hier eine Behauptung, kein Nostalgiegriff.
   Plex Mono NUR für Gezähltes und Datiertes, nie als Deko.            */
h1, h2, h3 {
  font-family: "Archivo Variable", system-ui, sans-serif;
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 {
  margin: 0.4rem 0 0;
  /* Die Größe hängt an der Breite UND an der Höhe. Ohne den
     `8.5vh`-Deckel war das Plakat auf einem flachen Fenster
     (1280 × 600) 749 px hoch — gemessen am 20.09.2026 — und der
     Schriftzug, also der Markenname, stand erst nach dem Scrollen da.
     Das trifft Isabelles eigenen Bildschirm: 1920 × 1080 bei 150 %
     Skalierung sind rund 1280 × 553 CSS-Pixel. */
  font-size: min(clamp(2.1rem, 7.5vw, 4.2rem), 8.5vh);
  line-height: 0.94;
  /* 16ch statt 14ch: Mit 14 Zeichen brach die Überschrift am Desktop in
     fünf Zeilen und schob den Schriftzug aus dem ersten Sichtfeld.
     Deutsche Komposita („Pflegeausbildung") brauchen mehr Lauflänge als
     englische Schlagzeilen. */
  max-inline-size: 16ch;
  /* Bei 200 % Schriftgröße auf einem 360-px-Fenster wird die
     Überschrift rund 66 px groß und passt nicht mehr in die Spalte:
     „ausbildung" lief 87 px über den Rand und wurde vom
     `overflow-x: clip` weggeschnitten — gemessen und im Bild bestätigt
     am 20.09.2026, ein Verstoß gegen WCAG 1.4.4.
     `hyphens` trennt deutsche Wörter richtig, weil die Seite
     `lang="de"` trägt; `overflow-wrap` fängt ab, was selbst dann nicht
     passt. */
  hyphens: auto;
  overflow-wrap: break-word;
}
h2 {
  margin: 0 0 0.6rem;
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1.2rem, 3.2vw, 1.55rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h3 {
  margin: 1.6rem 0 0.4rem;
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  /* Gleiche Groesse wie der Fliesstext, nicht kleiner: eine
     Zwischenueberschrift unter 17 px dreht die Hierarchie um und
     unterschreitet die Projektregel (Fliesstext nie unter 17-18 px).
     Der Unterschied traegt hier ueber Archivo und Gewicht 700. */
  font-size: 1.1875rem;
}
/* `overflow-wrap` statt `hyphens`: es greift nur im Notfall, wenn ein
   Wort sonst über den Rand liefe, und streut keine Trennstriche in den
   Fließtext. Bei 200 % Schrift auf 360 px ragten sonst ein Absatz und
   ein Listenpunkt über den Rand. */
p, li { max-inline-size: 62ch; overflow-wrap: break-word; }
p { margin-block: 0 1rem; }
ul, ol { padding-inline-start: 1.15rem; }
li { margin-block-end: 0.4rem; }
strong { font-weight: 700; }

a {
  color: var(--malt);
  text-decoration-color: var(--turmeric-tief);
  text-underline-offset: 0.2em;
  /* Lange E-Mail- und Webadressen dürfen umbrechen. Ohne diese Zeile
     schob der Kontakt-Link die Seite bei 200 % Schriftvergrößerung auf
     505 px hinaus, während das Fenster nur 360 px breit war — gemessen
     im Barrierefreiheits-Durchgang am 20.09.2026 (WCAG 1.4.10). */
  overflow-wrap: anywhere;
}
a:hover { text-decoration-thickness: 2px; }

/* Fokusring: muss sichtbar sein, wenn jemand mit der Tastatur bedient.
   #7A5A00 trägt auf beiden Gründen (5,43 : 1 auf Papier, 3,84 : 1 auf
   Turmeric). Radius 0, wie alles auf dieser Seite.
   ⚠️ MIT DER TASTATUR messen, nicht per Skript — ein per Skript
   gesetzter Fokus löst :focus-visible gar nicht aus. */
:focus-visible {
  outline: 3px solid var(--turmeric-tief);
  outline-offset: 3px;
  border-radius: 0;
}
/* Auf Malt-Grund ist #7A5A00 zu dunkel, dort leuchtet Turmeric selbst. */
.invers :focus-visible { outline-color: var(--turmeric); }

/* Fokus als Schnittmarken (Runde „verspielt-2"): vier Eckwinkel statt
   eines geschlossenen Rahmens — abgeschrieben von den Schnittmarken am
   Bildschirmfoto (`.abzug::before`), nur kräftiger: 3 px dick wie der
   bisherige Ring, 12 px lang, damit er als Fokus trägt.
   Gemessen (WCAG 1.4.11, gefordert 3 : 1), Farbe gegen den Grund, auf
   dem die Winkel stehen:
     #7A5A00 auf Papier .... 5,43 : 1
     #7A5A00 auf Turmeric .. 3,84 : 1 (Plakat)
     #7A5A00 auf Fläche .... 4,81 : 1 (Fußzeile)
     Turmeric auf Malt ..... 9,37 : 1 (invertierter Block)
   NUR für Links, die eine eigene Box haben (block, inline-block,
   inline-flex). Links mitten im Fließtext behalten den Rahmen oben: Bricht
   ein Inline-Link um, spannt ein Pseudo-Element nur ein Rechteck über
   beide Zeilen, die Winkel stünden dann neben fremdem Text.
   `--schnitt` ist der Abstand nach außen. Der Rückweg-Link der Unterseiten
   ist so breit wie das Fenster; außen lägen seine rechten Winkel hinter
   der Fensterkante (html: overflow-x: clip), deshalb dort nach innen.
   Bei „1 Werkzeug öffentlich" sitzen die Winkel an der Markierung selbst,
   nicht am Link: dessen Polsterung ragt 0,8 rem in die Zeilen darüber und
   darunter, die unteren Winkel lagen dort auf „Stand 22.09.2026" (gesehen
   bei 375 px). */
.handlung, .stand mark, .nojs-foot a, .rueckweg { position: relative; }
.rueckweg { --schnitt: 4px; }
.invers { --fokus: var(--turmeric); }
:is(.handlung, .zum-werkzeug, .nojs-foot a, .rueckweg):focus-visible { outline: none; }
:is(.handlung, .nojs-foot a, .rueckweg):focus-visible::after,
.zum-werkzeug:focus-visible mark::after {
  content: "";
  position: absolute;
  inset: var(--schnitt, -6px);
  pointer-events: none;
  --m: var(--fokus, var(--turmeric-tief));
  background:
    linear-gradient(var(--m), var(--m)) left top / 12px 3px,
    linear-gradient(var(--m), var(--m)) left top / 3px 12px,
    linear-gradient(var(--m), var(--m)) right top / 12px 3px,
    linear-gradient(var(--m), var(--m)) right top / 3px 12px,
    linear-gradient(var(--m), var(--m)) left bottom / 12px 3px,
    linear-gradient(var(--m), var(--m)) left bottom / 3px 12px,
    linear-gradient(var(--m), var(--m)) right bottom / 12px 3px,
    linear-gradient(var(--m), var(--m)) right bottom / 3px 12px;
  background-repeat: no-repeat;
}
/* Am Rückweg sitzen die Winkel am Schriftzug, nicht an der Bogenbreite
   (V7, Isabelle 22.09.2026: „nachher“). Vorher spannten sie am Rechner
   1172 px, der Schriftzug endet nach gut 400. Links und rechts 10 px Luft;
   die Breite ist die des Bildes (`.rueckweg img`: höchstens 26rem, sonst
   Linkbreite minus Polsterung). `a.` davor, weil die Regel darüber
   durch `.nojs-foot a` im :is() schwerer wiegt und ihr `inset` sonst den
   linken Rand überschreibt; gleich schwer gewinnt die spätere. */
a.rueckweg:focus-visible::after {
  inset-inline-start: calc(var(--seitenluft) - 10px);
  inset-inline-end: auto;
  inline-size: calc(min(26rem, 100% - 2 * var(--seitenluft)) + 20px);
}

/* „Hier bist du" (Runde „verspielt-2"): Springt man über einen Anker in
   einen Abschnitt — vor allem über „1 Werkzeug öffentlich ↓" zu
   #toolfinder —, zieht sich unter seiner Überschrift einmal ein
   Tintenstrich von links nach rechts. Er bleibt danach stehen, wie die
   Tinte in den Handlungslinks: Tinte trocknet, sie verblasst nicht.
   Dieselbe Tinte wie dort: Turmeric, 5 px. Auf Papier trägt der Strich
   als Farbfläche (1,41 : 1) und ist Schmuck, keine Information — der
   Sprung selbst zeigt schon, wo man ist; auf Malt 9,37 : 1.
   `fit-content`: der Strich ist so lang wie die Überschrift, nicht wie
   die Spalte. Die Zeilenumbrüche ändern sich dadurch nicht.
   Mit „Bewegung reduzieren" steht der Strich sofort da (Block unten). */
:target h2 { position: relative; inline-size: fit-content; }
:target h2::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.4rem;
  block-size: 5px;
  background: var(--turmeric);
  transform-origin: left;
  animation: hier-bist-du 600ms ease-out both;
}
@keyframes hier-bist-du { from { scale: 0 1; } }

/* Markierter Text (Runde „verspielt-2"): Turmeric wie ein Textmarker.
   Gemessen:
     Papier-Grund:  Malt auf Turmeric 9,37 : 1 (Text). Die Markierung
                    selbst hebt sich über den Farbton ab (1,41 : 1 zu
                    Papier, 1,25 : 1 zur Fußzeilen-Fläche), wie `mark`.
     Invertierter Block: dieselbe Regel — Turmeric auf Malt-Grund 9,37 : 1,
                    Malt-Text darauf 9,37 : 1.
     Plakat (Turmeric-Grund): umgedreht wie `.stand mark`, Turmeric auf
                    Malt 9,37 : 1; die Markierung hebt sich 9,37 : 1 vom
                    Grund ab.
     „1 Werkzeug öffentlich" ist selbst schon Malt: dort Malt auf Papier,
                    13,25 : 1, und 13,25 : 1 zur Malt-Fläche. */
::selection { background: var(--turmeric); color: var(--malt); }
.plakat ::selection {
  background: var(--malt);
  color: var(--turmeric);
}
.plakat mark::selection, .plakat mark ::selection {
  background: var(--papier);
  color: var(--malt);
}

/* ── Das Plakat ───────────────────────────────────────────────────────
   Das erste Sichtfeld ist ein Plakat, kein Dokument: Turmeric als ganzer
   Grund (Isabelles Fassung D), die Natter angeschnitten über den rechten
   Rand hinausgeschoben, darunter die Überschrift und eine Standzeile.
   Darunter endet das Gelb und die Seite läuft auf Papier weiter.      */
.plakat {
  background: var(--turmeric);
  color: var(--malt);
  padding-block: 2.5rem 1.6rem;
}
/* Auf flachen Fenstern zieht sich das Plakat zusammen, statt den
   Schriftzug hinauszuschieben. Betrifft halbhohe Browserfenster und
   Bildschirme mit hoher Skalierung. */
@media (max-height: 700px) {
  .plakat { padding-block: 1.2rem 0.8rem; }
  .plakat .schriftzug { margin-block-start: 1.2rem; }
  .stand { margin-block-start: 0.9rem; }
}

/* Die Natter ist das einzige echte Objekt auf der Seite: echter
   SVG-Lichtfilter, Lichteinfall von links oben. Alles andere ist flaches
   Papier — das ist der Grund, warum sie wirkt.

   Sie steht ZENTRAL im Plakat (Isabelle, 20.09.2026). Das löst die
   frühere Festlegung ab, sie rechts über den Seitenrand
   hinauszuschieben: angeschnitten war sie nur auf schmalen Geräten,
   am Desktop hing sie in der Luftspalte.

   Die Bühne ist ein eigenes Element über die volle Plakatbreite, nicht
   Teil des Satzspiegels — in der linksbündigen Textspalte stünde sie
   sonst in der Mitte der Spalte statt in der Mitte des Plakats. */
.natter-buehne {
  display: flex;
  justify-content: center;
  padding-inline: var(--seitenluft);
}
/* Über die HÖHE begrenzt, nicht über die Breite. Grund, gemessen am
   20.09.2026: mit `inline-size: min(52vw, 400px)` war das Plakat bei
   einem 900 px hohen Fenster 912 px hoch — der Schriftzug fiel als
   Horizont unten heraus, und genau er soll die Kante des ersten
   Sichtfeldes sein. Über `vh` schrumpft die Natter auf flachen
   Fenstern mit, statt die Seite nach unten zu schieben.
   `max-inline-size` fängt den Fall ab, dass ein sehr hohes, sehr
   schmales Fenster sie seitlich herausdrückt. */
.natter {
  display: block;
  block-size: clamp(150px, 30vh, 330px);
  inline-size: auto;
  max-inline-size: 72vw;
  color: var(--natter);
}

/* Auf flachen Fenstern gibt auch die Natter nach. Diese Regel MUSS
   hinter der Basisregel stehen: beide haben dieselbe Spezifität, also
   gewinnt die spätere. Stand sie weiter oben bei den anderen
   Flachfenster-Regeln, blieb sie wirkungslos - gemessen am 20.09.2026,
   das Plakat blieb unveraendert bei 563 px. */
@media (max-height: 700px) {
  .natter { block-size: clamp(120px, 26vh, 330px); }
}

/* Die Standzeile. Mono, weil hier tatsächlich Gezähltes und Datiertes
   steht — ein Werkzeug, ein Datum, ein Ort. */
.stand {
  margin: 1.4rem 0 0;
  max-inline-size: none;
  font: 600 0.8125rem/1.8 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--auf-turmeric-leise);
}
/* Die Markierung trägt GENAU EINE Sache: „1 Werkzeug öffentlich".
   Auf dem Plakat ist sie umgedreht — Malt-Fläche, Turmeric-Text. */
.stand mark {
  background: var(--malt);
  color: var(--turmeric);
  padding: 0.18rem 0.5rem;
  margin-inline-end: 0.35rem;
}
/* Die Markierung ist zugleich der Sprung zum Tool-Finder (seit
   21.09.2026). Keine Unterstreichung — die Malt-Fläche selbst ist das
   Zeichen, der Pfeil sagt, wohin es geht. Die Polsterung macht aus der
   Markierung eine mindestens 44 px hohe Trefferfläche (0,5 rem ergab am
   Rechner nur 39 px, gemessen 21.09.2026); der
   negative Rand nimmt sie aus dem Zeilenabstand wieder heraus. */
.zum-werkzeug {
  display: inline-block;
  padding-block: 0.8rem;
  margin-block: -0.8rem;
  text-decoration: none;
}
.zum-werkzeug:hover mark { text-decoration: underline 2px; text-underline-offset: 3px; }

/* Auf schmalen Geräten bekommt die Markierung eine eigene Zeile.
   Sonst bricht die Standzeile mitten in der Datumsangabe um: neben der
   Markierung blieb „Stand" allein stehen, „20.09.2026 · Hamburg" rutschte
   darunter — gesehen im Bild bei 375 px am 20.09.2026. */
@media (max-width: 520px) {
  /* Seit die Markierung in einem Link steckt, muss auch der Link eine
     eigene Zeile bekommen — sonst lief „Stand" wieder neben ihr her
     (gesehen bei 375 px am 21.09.2026, derselbe Fehler wie am 20.09.). */
  /* `fit-content` statt `max-content`: so breit wie der Inhalt, aber nie
     breiter als die Spalte. Mit `max-content` ragte die Markierung bei
     200 % Schrift auf 360 px um 105 px über den Rand und wurde
     abgeschnitten (WCAG 1.4.4, gemessen am 21.09.2026). */
  .zum-werkzeug { display: block; inline-size: fit-content; max-inline-size: 100%; }
  .stand mark {
    display: block;
    inline-size: fit-content;
    margin-inline-end: 0;
    margin-block-end: 0.45rem;
  }
}

/* ── Der Schriftzug als Horizont ──────────────────────────────────────
   Er läuft randlos über die volle Fensterbreite und ist gleichzeitig
   Logo, Trennlinie und Scroll-Horizont. Deshalb braucht diese Seite
   weder eine Kopfleiste noch einen einzigen dekorativen Trennstrich.

   Er sitzt UNTER dem Plakat, nicht darüber: eine Kopfleiste würde bei
   einer einzelnen Seite sagen „hier könnte mehr sein". */
.schriftzug {
  display: block;
  inline-size: 100%;
  block-size: auto;
  color: var(--malt);
}
.plakat .schriftzug { margin-block-start: 2.2rem; }

/* Schnittmarken am Bildschirmfoto (ebenfalls Nr. 3): vier feine Winkel
   knapp außerhalb der Ecken, wie auf einem Probeabzug. Sie hängen an
   `.abzug`, dem Rahmen direkt um das Bild — nicht an der ganzen Figur,
   sonst stünden die unteren Marken unter der Bildunterschrift. */
.abzug { position: relative; display: block; }
.abzug::before {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: none;
  --m: var(--malt-leise-invers);
  background:
    linear-gradient(var(--m), var(--m)) left top / 7px 1px,
    linear-gradient(var(--m), var(--m)) left top / 1px 7px,
    linear-gradient(var(--m), var(--m)) right top / 7px 1px,
    linear-gradient(var(--m), var(--m)) right top / 1px 7px,
    linear-gradient(var(--m), var(--m)) left bottom / 7px 1px,
    linear-gradient(var(--m), var(--m)) left bottom / 1px 7px,
    linear-gradient(var(--m), var(--m)) right bottom / 7px 1px,
    linear-gradient(var(--m), var(--m)) right bottom / 1px 7px;
  background-repeat: no-repeat;
}

/* ── Der invertierte Block ────────────────────────────────────────────
   Malt-Fläche, Papier-Text, randlos über die volle Breite.
   GENAU EINER pro Seite — sobald es zwei gäbe, wäre er keine Hierarchie
   mehr, sondern ein Muster. Er gehört dem KI-Tool-Finder, weil das das
   eine Werkzeug ist, das heute schon trägt. Kommen später weitere
   Projekte dazu, ist nur das neueste invertiert. */
.invers {
  background: var(--malt);
  color: var(--papier);
  padding-block: 2.4rem 2.6rem;
  margin-block: 3rem;
}
.invers a { color: var(--turmeric); text-decoration-color: var(--turmeric); }
/* Endet die Seite mit dem dunklen Block, schließt die Fußzeile direkt an
   (Isabelle, 22.09.2026) — kein heller Streifen dazwischen. */
main > .invers:last-child { margin-block-end: 0; }
main:has(> .invers:last-child) + .nojs-foot { margin-block-start: 0; }

/* Der Ablauf des Tool-Finders (seit 21.09.2026): vier Stationen an einer
   Linie. Die Linie ist die obere Kante jeder Station in Turmeric — nebeneinander
   ergibt das einen durchgehenden Strich, der von 01 nach 04 läuft. Die
   Nummer ist Gezähltes, also Mono. Am Handy läuft die Linie senkrecht
   links. Turmeric als Schrift ist hier erlaubt: die Regel „niemals
   Schriftfarbe" gilt für Papier (1,4 : 1); auf Malt sind es 9,37 : 1. */
.ablauf {
  list-style: none;
  counter-reset: station;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
}
.ablauf li {
  counter-increment: station;
  margin: 0;
  padding: 0.7rem 0.9rem 0 0;
  border-block-start: 3px solid var(--turmeric);
  font-size: 1.0625rem;
  line-height: 1.4;
  /* Keine automatische Silbentrennung: bei 768 px trennte sie „Fä-higkeiten"
     und „Vor-gaben" (Befund B10, 22.09.2026). Die Wörter passen auch am
     Handy ganz; im Notfall bricht `overflow-wrap` von p, li. */
  hyphens: manual;
}
.ablauf li::before {
  content: counter(station, decimal-leading-zero);
  display: block;
  margin-block-end: 0.3rem;
  font: 600 0.8125rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.09em;
  color: var(--turmeric);
}
@media (max-width: 600px) {
  .ablauf { grid-template-columns: minmax(0, 1fr); }
  .ablauf li {
    border-block-start: 0;
    border-inline-start: 3px solid var(--turmeric);
    padding: 0.2rem 0 0.9rem 1rem;
  }
}

/* Der Ablauf spielt sich vor (Nr. 2 der Runde „verspielt", 22.09.2026).
   Ein kleiner Zettel — der Link — läuft auf der gelben Linie von 01 nach
   04, hält an jeder Station, die dabei kurz aufleuchtet, und fällt am Ende
   in eine Schublade: eingesortiert. Genau das macht der Tool-Finder.
   Läuft einmal, sobald der Block ins Bild kommt; Antippen spielt ihn neu
   (bewegung.js setzt die Klasse `spielt`). Ohne Skript oder mit „Bewegung
   reduzieren" bleibt die Liste, wie sie ist — Zettel und Schublade sind
   dann unsichtbar. Die Zeiten der Stationen (0,1 / 0,75 / 1,4 / 2,05 s)
   gehören zu den Prozentwerten im Zettel-Takt (3,2 s). */
.ablauf { position: relative; }
.ablauf::after {               /* der Zettel */
  content: "";
  position: absolute;
  inset-block-start: -9px;
  inset-inline-start: 0;
  inline-size: 22px;
  block-size: 15px;
  background:
    linear-gradient(var(--malt-leise-invers), var(--malt-leise-invers)) 4px 4px / 12px 1.5px no-repeat,
    linear-gradient(var(--malt-leise-invers), var(--malt-leise-invers)) 4px 8px / 9px 1.5px no-repeat,
    var(--papier);
  opacity: 0;
  pointer-events: none;
}
.ablauf::before {              /* die Schublade: offen nach oben */
  content: "";
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: calc(100% + 4px);
  inline-size: 34px;
  block-size: 18px;
  border: 3px solid var(--turmeric);
  border-block-start: 0;
  opacity: 0;
  pointer-events: none;
}
.ablauf.spielt::after  { animation: zettel 3200ms cubic-bezier(.45, 0, .55, 1) both; }
.ablauf.spielt::before { animation: schublade 3200ms ease-out both; }
.ablauf.spielt li::before { animation: aufleuchten 700ms ease-out both; }
.ablauf.spielt li:nth-child(2)::before { animation-delay: 750ms; }
.ablauf.spielt li:nth-child(3)::before { animation-delay: 1400ms; }
.ablauf.spielt li:nth-child(4)::before { animation-delay: 2050ms; }
.ablauf.spielt li:nth-child(1)::before { animation-delay: 100ms; }
.ablauf li::before { inline-size: fit-content; padding-inline: 0.25rem; margin-inline-start: -0.25rem; }
@keyframes zettel {
  0%   { inset-inline-start: 0;   inset-block-start: -9px; opacity: 0; }
  4%   { opacity: 1; }
  14%  { inset-inline-start: 0; }
  22%  { inset-inline-start: 25%; }
  34%  { inset-inline-start: 25%; }
  42%  { inset-inline-start: 50%; }
  54%  { inset-inline-start: 50%; }
  62%  { inset-inline-start: 75%; }
  74%  { inset-inline-start: 75%; inset-block-start: -9px; }
  84%  { inset-inline-start: calc(100% + 10px); inset-block-start: -9px; opacity: 1; }
  94%  { inset-inline-start: calc(100% + 10px); inset-block-start: 3px; opacity: 1; }
  100% { inset-inline-start: calc(100% + 10px); inset-block-start: 3px; opacity: 0; }
}
@keyframes schublade {
  0%, 60% { opacity: 0; }
  72%, 94% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes aufleuchten {
  0%   { background: transparent; color: var(--turmeric); }
  25%  { background: var(--turmeric); color: var(--malt); }
  100% { background: transparent; color: var(--turmeric); }
}
/* Zwischen 601 und 820 px füllt die Spalte die ganze Breite; die
   Schublade rechts neben der Linie ragte bei 768 px 7 px aus dem Fenster
   (gemessen am 22.09.2026). Die Liste lässt ihr dort Platz. */
@media (min-width: 601px) and (max-width: 820px) {
  .ablauf { margin-inline-end: 44px; }
}
/* Am Handy steht die Linie senkrecht links: Der Zettel läuft von oben
   nach unten, die Schublade sitzt unter dem Ende der Linie. */
@media (max-width: 600px) {
  .ablauf::after { inset-inline-start: -10px; }
  .ablauf::before { inset-block-start: calc(100% + 2px); inset-inline-start: -16px; }
  .ablauf.spielt::after { animation-name: zettel-senkrecht; }
  @keyframes zettel-senkrecht {
    0%   { inset-block-start: 0;   inset-inline-start: -10px; opacity: 0; }
    4%   { opacity: 1; }
    14%  { inset-block-start: 0; }
    22%  { inset-block-start: 25%; }
    34%  { inset-block-start: 25%; }
    42%  { inset-block-start: 50%; }
    54%  { inset-block-start: 50%; }
    62%  { inset-block-start: 75%; }
    74%  { inset-block-start: 75%; }
    84%  { inset-block-start: calc(100% - 12px); opacity: 1; }
    94%  { inset-block-start: calc(100% + 4px); opacity: 1; }
    100% { inset-block-start: calc(100% + 4px); opacity: 0; }
  }
}

/* Das Bildschirmfoto des Tool-Finders (seit 21.09.2026). Ein Rahmen in
   Papier, Radius 0 — das Foto liegt auf dem Bogen wie ein eingeklebter
   Abzug, ohne Schatten. Die Unterschrift ist Datiertes, also Mono. */
.bildschirm { position: relative; margin: 1.4rem 0 1.2rem; }
.bildschirm img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 2px solid var(--papier);
}
/* Die Randnotiz „Nr. 1" (Isabelles Wahl, 22.09.2026; löst den Stempel
   ab, der ihr „zu billig" war). Eine feine Linie in Turmeric mit einem
   Punkt am Foto, daneben drei Zeilen: „NR. 1" in Mono, dann zwei Sätze.
   Wie eine Anmerkung auf einem Probeabzug — passt zu den Schnittmarken.

   Ab 1100 px steht sie RECHTS neben dem Foto in der Luftspalte. Darunter
   ist dort kein Platz (bei 900 px bleiben rund 12 px), dann steht sie
   UNTER dem Foto, rechtsbündig, die Linie zeigt nach oben aufs Foto.
   Sie steht deshalb neben `.abzug`, nicht darin — sonst lägen die
   Schnittmarken um Foto UND Notiz (gesehen bei 375 px, 22.09.2026).

   Auftritt (bewegung.js setzt `wartet`, dann `an`): Linie zieht sich,
   dann „NR. 1", dann Zeile für Zeile. Ohne Skript steht alles da. */
.notiz {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-block: 0.9rem 0.2rem;
  font: 400 0.875rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.03em;
  color: var(--papier);
}
.notiz i {
  position: relative;
  flex: none;
  inline-size: 1.5px;
  block-size: 2.2rem;
  margin-block-start: 0.3rem;
  background: var(--turmeric);
  order: 2;
  transform-origin: top;
}
.notiz i::after {                /* der Punkt, der aufs Foto zeigt */
  content: "";
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: -3px;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--turmeric);
}
.notiz-text { text-align: end; }
.notiz-text > * { display: block; }
.notiz-text b {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turmeric);
  margin-block-end: 0.15rem;
}
@media (min-width: 1100px) {
  .notiz {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: calc(100% + 6px);
    inline-size: 15rem;
    justify-content: flex-start;
    margin: 0;
  }
  .notiz i {
    order: 0;
    inline-size: 2.4rem;
    block-size: 1.5px;
    margin-block-start: 0.6rem;
    transform-origin: left;
  }
  .notiz i::after { inset-block-start: -3px; inset-inline-start: -4px; }
  .notiz-text { text-align: start; }
}
.notiz.wartet i { scale: 1 0; }
.notiz.wartet .notiz-text > * { opacity: 0; }
@media (min-width: 1100px) { .notiz.wartet i { scale: 0 1; } }
.notiz.an i { animation: notiz-linie 550ms cubic-bezier(.22, .61, .36, 1) both; }
.notiz.an .notiz-text > * { animation: notiz-zeile 450ms ease-out both; }
.notiz.an .notiz-text > :nth-child(1) { animation-delay: 450ms; }
.notiz.an .notiz-text > :nth-child(2) { animation-delay: 750ms; }
.notiz.an .notiz-text > :nth-child(3) { animation-delay: 1050ms; }
@keyframes notiz-linie { from { scale: 1 0; } to { scale: 1 1; } }
@media (min-width: 1100px) {
  @keyframes notiz-linie { from { scale: 0 1; } to { scale: 1 1; } }
}
@keyframes notiz-zeile {
  from { opacity: 0; translate: 0 4px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ── Abschnitte auf Papier ───────────────────────────────────────────── */
.abschnitt { padding-block: 1.6rem; }
/* 3,5 rem: seit der Aufbau-Kasten unter dem Plakat weg ist (21.09.2026),
   folgt die erste Überschrift direkt dem Schriftzug; mit 2,4 rem stand sie
   38 px darunter, enger als jeder Abschnitt zum nächsten. */
.abschnitt:first-of-type { padding-block-start: 3.5rem; }

/* Eingesenkte Zone: die einzige Flächenabstufung auf Papier. Kein
   Schatten, keine Rundung — der Unterschied trägt über den Ton. */
.gesenkt { background: var(--flaeche); padding-block: 2rem; }

/* Das Schlusszeichen (Nr. 4 der Runde „verspielt", 22.09.2026): die
   Natter klein und flach. Seit 22.09.2026 (Isabelle) steht sie nicht mehr
   unter dem Bogen, sondern ganz klein rechts in der Fußzeile — Regeln
   dort unter `.fuss-natter`. Schwarz, weil sie die Natter ist. */
.endzeichen { cursor: pointer; }

/* ── Handlungslinks ───────────────────────────────────────────────────
   Die beiden Links, auf die es ankommt: zum KI-Tool-Finder und zur
   E-Mail-Adresse. Kein Knopf, keine Pille — Archivo mit einer 5 px
   dicken Unterstreichung in Turmeric. Die Adresse ist hier die
   Handlung, nicht ein Wort auf einem Rechteck.

   EIN Name für beide (`.handlung`), damit nicht dieselbe Bauart unter
   zwei Namen weiterlebt und beim nächsten Umbau auseinanderdriftet.

   ⚠️ Die Größe ist bewusst kleiner als in DESIGN.md skizziert
   (dort clamp(1.15rem, 3.6vw, 2rem)): bei 375 px brach die Adresse
   mitten im Wort um (gmail.co / m). Zusätzlich steht im HTML ein <wbr>
   vor dem @, damit sie — wenn sie umbricht — an der sinnvollen Stelle
   umbricht. */
.handlung {
  display: inline-block;
  font-family: "Archivo Variable", system-ui, sans-serif;
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1rem, 2.9vw, 1.6rem);
  line-height: 1.3;
  color: var(--malt);
  text-decoration: none;
  overflow-wrap: anywhere;
  /* Trefferfläche: die Polsterung macht aus der Textzeile 44 px Höhe,
     ohne die Schrift größer zu machen. */
  padding-block: 0.55rem;
  min-block-size: 44px;
  /* Die Tinte im Link (Nr. 1 der Runde „verspielt", 22.09.2026): Der
     Strich ist keine Unterstreichung mehr, sondern eine Fläche von 5 px
     am Fuß der Textzeile. Beim Überfahren, Antippen oder Tabben steigt
     sie hoch, bis sie hinter dem ganzen Wort steht — dieselbe Bewegung
     wie die Tinte, die beim Laden in die Natter läuft.
     `content-box`: Die Fläche sitzt in der Textzeile, nicht in der
     Polsterung, sonst stünde der Strich 9 px unter der Schrift.
     Einschränkung: Bricht der Link um (E-Mail bei 200 % Schrift), liegt
     der Strich nur unter der letzten Zeile. */
  background: linear-gradient(var(--turmeric), var(--turmeric)) no-repeat left bottom / 100% 5px;
  background-origin: content-box;
  background-clip: content-box;
  transition: background-size 260ms cubic-bezier(.22, .61, .36, 1),
              color 260ms ease-out;
}
.handlung:hover, .handlung:focus-visible, .handlung:active {
  background-size: 100% 100%;
  color: var(--malt);
}
.invers .handlung { color: var(--papier); }
/* Auf Malt wechselt die Schrift beim Füllen zu Malt: Papier auf Turmeric
   hätte kaum Kontrast. Malt auf Turmeric: 9,37 : 1. */
.invers .handlung:hover, .invers .handlung:focus-visible, .invers .handlung:active { color: var(--malt); }

/* Text nur für Vorlesesoftware: unsichtbar, aber nicht versteckt
   (display: none würde ihn auch dort stummschalten). */
.nur-vorlesen {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Hinweise und Marken ─────────────────────────────────────────────── */
/* Sichtbare Markierung für Texte, die Isabelle noch nicht freigegeben
   hat. Fällt weg, sobald sie freigegeben sind — nie stillschweigend. */
.entwurf-marke {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.2rem 0.6rem;
  background: var(--turmeric);
  color: var(--malt);
  font: 600 0.72rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Rechtstexte und Unterseiten ──────────────────────────────────────
   Ein Pflichttext wird am Stück gelesen, nicht überflogen: schmalere
   Spalte, mehr Luft. Sie laufen auf Papier, ohne Plakat — dort ist
   nichts zu bewerben.

   `.wrap` ist der Satzspiegel der Unterseiten: dieselbe Bogenbreite und
   dieselbe Seitenluft wie `.bogen`, aber einspaltig. Die Randspalte
   entfällt hier bewusst — ein Rechtstext hat keine Kapitelwörter, und
   eine leere 9-rem-Spalte neben jedem Absatz wäre Dekoration. Der Text
   bleibt trotzdem links, nicht zentriert: die Asymmetrie der Startseite
   setzt sich fort. */
.wrap {
  max-inline-size: var(--bogen);
  margin-inline: auto;
  padding-inline: var(--seitenluft);
}
.rechtstext { padding-block: 2.5rem 1rem; }
/* Auf der 404-Seite folgt der Absatz direkt der Überschrift; ohne diese
   Zeile lagen 0 px dazwischen (Befund B9, 22.09.2026). */
.rechtstext h1 + p { margin-block-start: 0.8rem; }
.rechtstext .imp { max-inline-size: 60ch; }
.rechtstext .imp h2 { margin-block-start: 2rem; }
.rechtstext p, .rechtstext li { max-inline-size: 60ch; }

/* Die Randbeschriftung der Unterseiten (früher „eyebrow"). */
.eyebrow {
  margin: 0 0 0.35rem;
  font: 600 0.72rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--malt-leise);
}

.imp-hinweis {
  padding: 1rem 1.1rem;
  border: 2px solid var(--malt);
  background: var(--flaeche);
}

/* Der Kopf der Unterseiten: der Schriftzug allein als Rückweg zur
   Startseite. Keine Navigationsleiste — es gibt nichts zu navigieren.
   Die Polsterung macht daraus eine 44 px hohe Trefferfläche.

   Anders als auf der Startseite läuft er hier NICHT randlos: dort ist er
   der Horizont unter dem Plakat, hier nur ein Weg zurück. Bei 1920 px
   Fensterbreite wäre ein randloser Schriftzug 151 px hoch und stünde
   über einem Pflichttext wie eine Überschrift, die er nicht ist. */
.rueckweg {
  display: block;
  max-inline-size: var(--bogen);
  margin-inline: auto;
  padding: 0.9rem var(--seitenluft);
  line-height: 0;
}
.rueckweg img {
  display: block;
  inline-size: 100%;
  max-inline-size: 26rem;
  block-size: auto;
  color: var(--malt);
}

/* ── Fußzeile ─────────────────────────────────────────────────────────
   Steht fest im HTML, kein Skript fasst sie an. Damit sind Impressum und
   Datenschutzerklärung auch ohne JavaScript erreichbar, wie es § 5
   Abs. 1 DDG verlangt („ständig verfügbar").

   BEWUSST NICHT FIXIERT (gemessen am 20.09.2026): Die fixierte Fassung
   war bei 533 px Fensterbreite 133 px hoch, weil fünf Links mit je
   44 px Trefferfläche in drei Zeilen umbrechen. Bei 304 px Fensterhöhe
   sind das 44 % der Sichtfläche. Am Seitenende kostet sie nichts.

   Links ausgerichtet, nicht zentriert: der Satzspiegel der ganzen Seite
   ist asymmetrisch, eine zentrierte Fußzeile bräche ihn als einziges. */
.nojs-foot {
  margin-block-start: 3rem;
  border-block-start: 2px solid var(--malt);
  background: var(--flaeche);
  /* Die Polsterung hält den Inhalt auf Bogenbreite, der Grund läuft
     trotzdem randlos. */
  /* Von links nach rechts (Isabelle, 22.09.2026): Natter, Kontakt,
     Quellen, Impressum, Datenschutzerklärung, Stand. Wird es zu schmal,
     brechen die Links in ihrer Reihe um und der Stand rutscht darunter. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  padding-block: 0.75rem;
  padding-inline: max(var(--seitenluft), calc((100% - var(--bogen)) / 2 + var(--seitenluft)));
}
.nojs-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}
/* Schmal: Die Links bleiben neben der Natter und brechen dort um, statt
   als ganze Gruppe unter sie zu rutschen; der Stand bekommt eine eigene
   Zeile darunter. Als Raster, weil der Umbruch per Flexbox bei 820 px den
   Stand in derselben Zeile ließ (gemessen 22.09.2026). */
@media (max-width: 820px) {
  .nojs-foot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .fuss-stand { grid-column: 1 / -1; }
}
/* Der Stand ist immer der letzte Deploy: `npm run hochladen` schreibt
   das Datum vor dem Hochladen hinein (skripte/hochladen.mjs). */
.fuss-stand {
  margin: 0;
  font: 400 0.8125rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--malt-leise);
}
.nojs-foot .fuss-natter {
  display: grid;
  place-items: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  color: var(--natter);
}
.fuss-natter :is(svg, img) {
  display: block;
  block-size: 28px;
  inline-size: auto;
  aspect-ratio: 843 / 723;
}
.nojs-foot a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font: 600 0.8125rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--malt-leise);
  text-decoration-color: var(--linie);
}
.nojs-foot a:hover { color: var(--malt); }
.nojs-foot a[aria-current="page"] {
  color: var(--malt);
  text-decoration: none;
}

/* ── Bewegung ─────────────────────────────────────────────────────────
   Stand 21.09.2026. Vier Vorschau-Runden, jede Zahl hier ist Isabelles
   Entscheidung oder eine Messung — Einzelheiten in ENTSCHEIDUNGEN.md.

   Das frühere `natter-auf` (700 ms Einblenden) ist abgelöst.

   Drei Bewegungen, in dieser Reihenfolge beim Laden:
     1. Der Umriss zeichnet sich selbst, dann läuft die Tinte ein.
     2. Danach wechseln sich Zunge und Schwanzspitze ab, alle 9 s.
     3. Der Kopf folgt dem Mauszeiger (nur am Rechner, siehe
        bewegung.js — ohne Zeiger passiert nichts).

   ⚠️ Die Drehpunkte sind gemessen, nicht gewählt. Wer sie verschiebt,
   reißt Körperteile auseinander:
     149/166   der Hals — hier sitzt der Kopf an
     43/300    die Mundspitze — hier sitzt die Zunge an
     724,5/260 die Stelle, an der die Schwanzspitze abgetrennt ist */

/* ── 1. Der Kopf folgt dem Zeiger ──────────────────────────────────── */
.natter { --grad: 35; --nachlauf: 260ms; }

/* Nur der Kopf bewegt sich (Isabelle, 21.09.2026). Eine Fassung, in der
   das ganze Zeichen driftete und kippte, hat sie verworfen.
   35 Grad ist zugleich die Obergrenze: Ab etwa 40 Grad schnürt sich der
   Hals sichtbar ein, bei 50 reißt er fast durch. Verschoben wird der
   Kopf fast gar nicht — eine Fassung mit 45 Einheiten Weg löste ihn vom
   Körper. */
.folgt {
  transform-origin: 149px 166px;
  transform: rotate(var(--dreh, 0deg))
             translate(var(--seit, 0px), var(--hub, 0px));
  transition: transform var(--nachlauf) cubic-bezier(.22, .61, .36, 1);
}
/* Die Zunge gehört zum Kopf und dreht träge nach. */
.nach {
  transform-origin: 43px 300px;
  rotate: calc(var(--dreh, 0deg) * -.3);
  transition: rotate calc(var(--nachlauf) * 2.4) cubic-bezier(.22, .61, .36, 1);
}

/* ── 2. Zunge und Schwanzspitze im Wechsel ─────────────────────────────
   Nie beide zugleich: die Zunge bei 0–1,1 s, die Spitze bei 4,5–5,9 s
   eines 9-Sekunden-Takts. */
.zuengelt { transform-origin: 43px 300px; }
.wackelt  { transform-origin: 724.5px 260px; }
@keyframes zuengeln {
  0%, 12%, 100% { rotate: 0deg; }
  4%  { rotate: -14deg; }
  8%  { rotate: 11deg; }
  10% { rotate: -5deg; }
}
@keyframes wackeln {
  0%, 50%, 66%, 100% { rotate: 0deg; }
  55% { rotate: 7deg; }
  60% { rotate: -5deg; }
  63% { rotate: 2deg; }
}
/* Erst nach dem Auftritt, sonst zuckt es mitten im Einlaufen. */
.plakat .zuengelt { animation: zuengeln 9s ease-in-out 3s infinite; }
.plakat .wackelt  { animation: wackeln  9s ease-in-out 3s infinite; }
/* Antippen (seit 21.09.2026, bewegung.js setzt die Klasse): einmal
   züngeln, sofort. Dieselben Ausschläge wie oben, nur ohne die Pause
   des 9-Sekunden-Takts. Danach beginnt der Takt von vorn. */
.zuengelt-jetzt .zuengelt { animation: zuengeln-kurz 1100ms ease-in-out; }

/* Dösen (B2, Runde „verspielt-2"): Nach 20 s ohne Eingabe setzt
   bewegung.js die Klasse .doest und --dreh auf -22 Grad — derselbe
   Drehpunkt (Hals) und dieselbe Variable wie das Kopfsenken am Handy.
   Hier steht nur, WIE LANGSAM der Kopf sinkt: 1,8 s, weich an beiden
   Enden. Beim Aufwachen fällt die Klasse weg, dann gilt wieder der
   Nachlauf von .folgt (260 ms) — zügig. Zunge und Schwanzspitze ruhen,
   solange sie döst. */
.natter.doest .folgt { transition: transform 1800ms cubic-bezier(.45, 0, .55, 1); }
.natter.doest .nach  { transition: rotate 1800ms cubic-bezier(.45, 0, .55, 1); }
.natter.doest .zuengelt, .natter.doest .wackelt { animation: none; }
/* Beim Dösen fallen die Augen zu (Isabelle, Runde „verspielt-2"): Jedes
   Auge wird um seine eigene Mitte flachgedrückt, bis nur ein Strich
   bleibt. Die Mitten sind gemessen (getBBox im Browser, 22.09.2026):
   links 49,7–60,7 × 231,3–245,1, rechts 87,3–98,7 × 243,5–255,7.
   Die Lider sinken später an als der Kopf und sind mit ihm fertig
   (400 ms Verzögerung + 1400 ms = 1800 ms). Beim Aufwachen gehen sie
   schneller auf, als der Kopf hochkommt (200 ms gegen 260 ms).
   Die Regel greift nur in der großen Natter: Die kleine Schlusszeichen-
   Natter holt ihre Augen per <use>, und Selektoren mit .natter reichen
   nicht in diese Kopien hinein. */
.natter #natter-auge-links-bn  { transform-origin: 55.2px 238.19px; }
.natter #natter-auge-rechts-bn { transform-origin: 93.01px 249.63px; }
.natter .blick path { transition: transform 200ms cubic-bezier(.2, 0, 0, 1); }
.natter.doest .blick path {
  transform: scaleY(.16);
  transition: transform 1400ms cubic-bezier(.45, 0, .55, 1) 400ms;
}
/* Nachtmütze (B3, Runde „verspielt-2"): Zwischen 22 und 6 Uhr
   Gerätezeit setzt bewegung.js die Klasse .nachts an <html>, dann trägt
   die große Natter eine Zipfelmütze. Sie liegt in einer eigenen Gruppe
   .folgt außerhalb der Lichtfilter (Stoff, kein Metall) und dreht
   deshalb mit dem Kopf — Einzelheiten in vorschau/_natter.py.
   Sie fällt einmal aus kurzer Höhe auf den Kopf: 520 ms, erst nach dem
   Auftritt (die Tinte ist bei 2,65 s voll). Beschleunigend im Fall,
   ein kleiner Nachfederer von 4 Einheiten — Stoff plumpst, er prallt
   nicht. „Oben" ist dabei die Richtung weg vom Scheitel, weil die
   Bewegung im gedrehten Koordinatensystem der Mütze läuft. */
.muetze { display: none; }
.nachts .muetze { display: inline; }
.nachts .plakat .muetze-faellt { animation: muetze-auf 520ms linear 2800ms both; }
@keyframes muetze-auf {
  0%   { transform: translateY(-70px); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  12%  { opacity: 1; }
  70%  { transform: translateY(0);     animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  84%  { transform: translateY(-4px);  animation-timing-function: cubic-bezier(.6, 0, .8, .6); }
  100% { transform: translateY(0);     opacity: 1; }
}
@keyframes zuengeln-kurz {
  0%, 100% { rotate: 0deg; }
  33% { rotate: -14deg; }
  67% { rotate: 11deg; }
  83% { rotate: -5deg; }
}

/* ── 3. Der Auftritt: gezeichnet, dann eingekippt ──────────────────────
   Die Gruppe .umriss ist eine zweite, ungefüllte Fassung derselben
   Pfade. Jeder trägt seine eigene Umrisslänge als `--strich` im
   style-Attribut (gemessen mit getTotalLength: Körper 7360, Kopf 830,
   Zunge 191, Augen 39 und 38). Ohne die eigene Länge zeichnen sie
   unterschiedlich weit. */
.umriss path.strich {
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--strich, 1000);
  stroke-dashoffset: var(--strich, 1000);
  animation: strich 1200ms cubic-bezier(.42, .02, .4, 1) both;
}
@keyframes strich { to { stroke-dashoffset: 0; } }

/* Die Tinte. Drei Gruppen in der Maske „fuellung-bn": was die Maske
   weiß färbt, wird sichtbar — „unterhalb der Wellenlinie" heißt also
   „schon voll". Fassung „Tinte 2", die kräftige (Isabelle, 21.09.2026).

   a) Der Pegel steigt, mit zwei Stockern. Bei 30 % und 64 % geht er
      kurz zurück — das ist das Zurückschwappen beim Eingießen. */
.pegel { transform: translateY(880px); }
.plakat .pegel { animation: pegel 1700ms cubic-bezier(.35, .03, .45, 1) 950ms both; }
@keyframes pegel {
  0%   { transform: translateY(880px); }
  18%  { transform: translateY(620px); }
  30%  { transform: translateY(640px); }
  52%  { transform: translateY(320px); }
  64%  { transform: translateY(345px); }
  100% { transform: translateY(-95px); }
}
/* b) Das Schwappen: die ganze Flüssigkeit neigt sich und schwingt
      gedämpft aus. */
.schwappt { transform-origin: 421px 361px; }
.plakat .schwappt { animation: schwappen 2900ms cubic-bezier(.32, .08, .3, 1) 950ms both; }
@keyframes schwappen {
  0%   { rotate: 0deg; }
  9%   { rotate: 6.5deg; }
  25%  { rotate: -4.8deg; }
  41%  { rotate: 3.2deg; }
  57%  { rotate: -2deg; }
  73%  { rotate: 1.1deg; }
  88%  { rotate: -.45deg; }
  100% { rotate: 0deg; }
}
/* c) Zwei Wellenzüge wandern quer. Die Zahlen sind die Wellenlängen aus
      den Pfaden (190 und 121 Einheiten): Jeder wandert um genau EINE
      Wellenlänge je Durchgang, deshalb ist der Übergang nahtlos.
      Werden die Pfade geändert, müssen diese Zahlen mitgehen. */
.plakat .w1 { animation: wandern1 1050ms linear 950ms 6 both; }
.plakat .w2 { animation: wandern2 780ms  linear 950ms 7 both; }
@keyframes wandern1 { to { transform: translateX(-190px); } }
@keyframes wandern2 { to { transform: translateX(121px); } }

/* Zum Schluss verblasst die gezeichnete Linie — erst dann sieht das
   Standbild genau so aus wie das Logo sonst, mit Glanz und Schatten. */
.plakat .umriss { animation: umriss-weg 450ms ease-out 2400ms both; }
@keyframes umriss-weg { to { opacity: 0; } }

/* Der Schriftzug läuft von links auf, während die Natter vollläuft. */
.plakat .schriftzug { animation: zug-strich 850ms cubic-bezier(.22, .61, .36, 1) 1650ms both; }
@keyframes zug-strich {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ── Blättern zwischen den Seiten (Runde „verspielt-2", A4) ────────────
   Wechselt man zwischen den eigenen fünf Seiten, gleitet der neue Bogen
   über den alten wie ein aufgelegtes Blatt: 360 ms, von rechts 3 rem
   heran, dabei einblendend. Der alte Bogen bleibt liegen, bis der neue
   ihn zudeckt — er schiebt sich nicht weg. Das ist die einzige Stelle, an
   der sich das Papier selbst bewegt (Isabelle, Auftrag A4).
   Kurve: dieselbe wie Tinte und Kopf (cubic-bezier(.22, .61, .36, 1)),
   abbremsend, ohne Überschwingen — Papier federt nicht.
   Der Schriftzug der Unterseiten (`.rueckweg img`) steht zwischen den
   Unterseiten an derselben Stelle und bleibt deshalb stehen. Auf der
   Startseite steht er unter dem Plakat, woanders und größer — dort trägt
   er absichtlich keinen Namen, sonst flöge er quer über den Bildschirm.
   Ohne Unterstützung im Browser: gewöhnlicher Seitenwechsel.
   Mit „Bewegung reduzieren" gibt es gar keinen Übergang — die Regel
   steht deshalb nur in `no-preference`. Läuft nicht unter file://. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.rueckweg img { view-transition-name: kopf; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) {
  animation: blatt-auflegen 360ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes blatt-auflegen {
  from { translate: 3rem 0; opacity: 0; }
  40%  { opacity: 1; }
  to   { translate: 0 0; opacity: 1; }
}

/* ── Passer beim Laden (Runde „verspielt-2", A5) ───────────────────────
   Die Überschrift auf dem Plakat kommt einmal aus der Druckmaschine, wie
   ein Bogen, dessen Farben noch nicht in Deckung stehen: eine Schicht
   Turmeric-dunkel nach links unten, eine Schicht Malt nach rechts oben,
   je wenige Pixel. Dann rastet der Passer ein.
   Die Schichten sind SCHATTEN (`text-shadow`), keine Textkopie: Der Text
   steht nur einmal im DOM, Vorlesesoftware liest ihn einmal, und die
   Malt-Schrift selbst liegt die ganze Zeit ruhig obenauf — lesbar ab dem
   ersten Bild (Malt auf Turmeric 9,37 : 1).
   800 ms ohne Verzögerung: läuft, während sich der Umriss der Natter
   zeichnet (0–1,2 s), und ist fertig, bevor die Tinte einläuft (ab
   0,95 s kaum noch sichtbar) und der Schriftzug aufläuft (ab 1,65 s).
   Kurve: schnell heran, sanft eingerastet, ohne Überschwingen.
   Mit „Bewegung reduzieren" steht die Schrift sofort in Deckung (unten). */
.plakat h1 { animation: passer 800ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes passer {
  from {
    text-shadow: -4px 3px 0 var(--turmeric-tief), 3px -2px 0 var(--malt);
  }
  to {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent;
  }
}

/* ── Quellen: angesprungener Eintrag leuchtet auf (verspielt-2, A7) ────
   Springt man über einen Anker (quellen.html#nachweis-archivo usw.) zu
   einem Eintrag, liegt er einmal kurz unter frischer Tinte: Turmeric,
   0,3 s satt, dann verblasst es über gut eine Sekunde. Anders als der
   Strich unter h2 bleibt hier nichts stehen — ein Eintrag ist keine
   Überschrift, die Markierung würde sonst wie Hervorhebung gelesen.
   Die Umrandung (`outline`) verbreitert die Fläche, ohne den Text zu
   verschieben. Malt auf Turmeric 9,37 : 1, auch für die Links darin.
   Mit „Bewegung reduzieren" leuchtet nichts (Block unten). */
.imp li { scroll-margin-block-start: 1.5rem; }
.imp li:target {
  outline: 0.4rem solid transparent;
  animation: quelle-aufleuchten 1500ms ease-out both;
}
@keyframes quelle-aufleuchten {
  0%, 20% { background-color: var(--turmeric); outline-color: var(--turmeric); }
  100%    { background-color: transparent;     outline-color: transparent; }
}

/* ── C1: Korrektur wie auf einer Druckfahne (Runde „verspielt-2") ─────
   Isabelles Vorgabe, einmal, sobald der Satz ins Bild kommt:
   „… Alltag von Lehrkräften nur digitaler?" — ein Tintenstrich geht durch
   „nur digitaler", daneben wird „leichter" hingeschrieben, dann schiebt
   sich „besser" herein, die beiden alten Fassungen fallen Buchstabe für
   Buchstabe aus dem Satz, und es bleibt: „… Alltag von Lehrkräften
   besser?" — normal gesetzt wie der übrige Absatz, nicht hervorgehoben.

   Im HTML steht nur der Endsatz. bewegung.js baut die Zwischenstufen als
   aria-hidden-Spans davor und räumt sie am Ende restlos wieder ab; Takt
   und Reihenfolge stehen dort, hier nur das Aussehen und die Kurven.
   Bewegt werden nur `transform`, `translate` und `opacity`.
   Ohne Skript und bei „Bewegung reduzieren" greift nichts davon — das
   Skript läuft dann gar nicht bis hierher, der Endsatz steht einfach da. */
.korrigiert.c1-an { position: relative; }
/* inline-block, weil `transform`/`translate` an reinen Inline-Boxen
   nicht greifen — „besser" und das Fragezeichen müssen gleiten können. */
.c1-an .korrektur, .c1-frage { display: inline-block; }
/* „besser" wartet unsichtbar, bleibt aber für Vorlesesoftware da. */
.korrektur.c1-versteckt {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.korrektur.c1-kommt { opacity: 0; transform: translateX(-0.4em); }
/* Herzschlag am Ende (Isabelle, 22.09.2026): „besser" wird zweimal kurz
   größer, zwei Schläge in 700 ms, der zweite etwas schwächer. */
.korrektur.c1-puls {
  display: inline-block;
  transform-origin: 50% 65%;
  animation: herzschlag 700ms cubic-bezier(.2, 0, 0, 1);
}
@keyframes herzschlag {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.22); }
  32%      { transform: scale(1); }
  46%      { transform: scale(1.14); }
  66%      { transform: scale(1); }
}
.korrektur.c1-da {
  opacity: 1; transform: none;
  transition: opacity 450ms cubic-bezier(.2, 0, 0, 1),
              transform 450ms cubic-bezier(.2, 0, 0, 1);
}
.c1-wort { display: inline-block; position: relative; white-space: nowrap; }
.c1-z { display: inline-block; }
.c1-hand { display: none; }
.c1-schreibt .c1-hand { display: inline; }
/* Die Handschrift: Literata kursiv in Tinte (#7A5A00, 5,43 : 1 auf
   Papier). Literata liegt nur aufrecht vor; das Kursiv schrägt der
   Browser an. Jedes Zeichen setzt einzeln auf, wie mit der Feder. */
.c1-hz {
  font-style: italic;
  color: var(--turmeric-tief);
  opacity: 0;
  transform: translateY(0.12em) rotate(-4deg);
}
.c1-schreibt .c1-hz {
  opacity: 1;
  transform: none;
  transition: opacity 160ms ease-out, transform 220ms cubic-bezier(.2, 0, 0, 1);
}
/* Der Korrekturstrich: leicht schräg, von links nach rechts gezogen. */
.c1-strich {
  position: absolute;
  inset-inline: -0.1em;
  inset-block-start: 55%;
  block-size: max(2px, 0.09em);
  background: var(--turmeric-tief);
  transform-origin: 0 50%;
  transform: rotate(-3deg) scaleX(0);
  transition: transform 260ms cubic-bezier(.3, 0, .2, 1);
}
.c1-streicht .c1-strich { transform: rotate(-3deg) scaleX(1); }
/* Die Fall-Ebene: Die fallenden Buchstaben liegen hier absolut, damit
   sich die Lücke im Satz schließen kann, während sie noch fallen.
   Waagerecht schneidet `html { overflow-x: clip }` ab, was über den
   Rand kippt — keine Bildlaufleiste. */
.c1-fall { position: absolute; inset: 0; pointer-events: none; }
.c1-fall > * { position: absolute; margin: 0; }
.c1-fall .c1-faellt {
  opacity: 0;
  transition: transform 760ms cubic-bezier(.5, 0, .9, .5),
              opacity 760ms cubic-bezier(.6, 0, 1, .6);
}

/* ── 4. Die suchende Natter auf der 404-Seite ─────────────────────────
   Nr. 9 der Runde „verspielt", 22.09.2026. Kein Auftritt: Tinte voll,
   Umriss aus. Der Kopf schaut sich um — links, rechts, zurück —, höchstens
   22 Grad, also unter der 35-Grad-Grenze. Zunge im gewohnten Takt. */
.suchend { block-size: clamp(130px, 22vh, 190px); margin-block-end: 1.2rem; }
.suchend .umriss { display: none; }
.suchend .pegel { transform: translateY(-95px); }
/* Dreimal umschauen, dann ruht der Kopf. Das Züngeln läuft dagegen
   endlos weiter, wie auf der Startseite — Isabelles Entscheidung vom
   22.09.2026 (Befund B4): Sie nimmt die strenge Lesart von WCAG 2.2.2
   (höchstens 5 s Bewegung ohne Anhalten) für das Züngeln bewusst nicht an.
   Wer „Bewegung reduzieren" eingestellt hat, sieht gar keine Bewegung. */
.suchend .folgt { animation: umschauen 6s ease-in-out 0.6s 3; }
.suchend .zuengelt { animation: zuengeln 9s ease-in-out 2s infinite; }
@keyframes umschauen {
  0%, 12%, 100% { transform: rotate(0deg); }
  28%, 40% { transform: rotate(-22deg); }
  58%, 72% { transform: rotate(16deg); }
}

/* Wer keine Bewegung möchte, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* ⚠️ Die Regel darüber allein genügt hier NICHT, und das sieht man
     ihr nicht an. Sie kürzt die DAUER auf 0,01 ms, rührt die
     VERZÖGERUNG aber nicht an — und der Auftritt der Natter hat
     Verzögerungen von 950 ms (Tinte) und 1650 ms (Schriftzug). Solange
     die laufen, gilt wegen `both` der Anfangswert: Pegel ganz unten,
     Schriftzug auf Breite null.

     Gemessen am 21.09.2026 an einer Kopie der Seite: Das Plakat war
     damit die ersten 1,6 Sekunden LEER und sprang dann hin — also
     genau das Gegenteil dessen, was „Bewegung reduzieren" verspricht.

     Deshalb werden die Animationen hier ganz abgeschaltet und die
     Endzustände ausdrücklich gesetzt. Ohne das `animation: none`
     nützen die Werte darunter nichts: Eine laufende Animation schlägt
     jede normale Angabe. */
  .umriss, .umriss path.strich, .pegel, .schwappt, .welle,
  .zuengelt, .wackelt, .plakat .schriftzug {
    animation: none !important;
  }
  .suchend .folgt, .suchend .zuengelt { animation: none !important; }
  .notiz i { scale: 1 !important; }
  .notiz .notiz-text > * { opacity: 1 !important; }
  .notiz.an i, .notiz.an .notiz-text > * { animation: none !important; }
  .ablauf.spielt::after, .ablauf.spielt::before, .ablauf.spielt li::before {
    animation: none !important;
  }
  :target h2::after { animation: none !important; }
  .korrektur.c1-puls { animation: none !important; }
  .plakat h1 { animation: none !important; text-shadow: none; }
  .imp li:target { animation: none !important; }
  /* Die Nachtmütze erscheint trotzdem (sie ist keine Bewegung), nur
     ohne Herabfallen — sonst bliebe sie 2,8 s unsichtbar. */
  .muetze-faellt { animation: none !important; transform: none; opacity: 1; }
  .umriss { display: none; }
  .pegel { transform: translateY(-95px); }
  .schwappt { rotate: none; }
  .plakat .schriftzug { clip-path: none; }
  .folgt, .nach {
    transform: none !important;
    rotate: none !important;
  }
}

/* ── Druckansicht (Runde „verspielt-2", A6) ────────────────────────────
   Gedruckt wird ein sauberer Druckbogen: Schnittmarken an den vier Ecken
   des Satzspiegels, keine Fußzeilen-Navigation, keine Bewegung, und
   hinter jedem Link nach außen steht die Adresse ausgeschrieben.

   Entscheidung Plakat: Das Turmeric fällt im Druck WEG. Grund: Browser
   drucken Hintergrundfarben von sich aus nicht. Erzwänge man sie
   (`print-color-adjust: exact`), käme ein Drittel Seite Vollton-Gelb aus
   dem Drucker — teuer, auf Bürodruckern streifig, und Turmeric auf
   Weiß trägt als Fläche ohnehin nur 1,66 : 1. Ohne Gelb steht die
   Natter schwarz auf Weiß mit 21 : 1 so klar da wie nirgends sonst.
   Dasselbe gilt für den invertierten Block: ohne seine Malt-Fläche wäre
   Papier-Schrift auf weißem Blatt unsichtbar, deshalb wird er im Druck
   zu Malt auf Weiß, abgesetzt durch eine Malt-Linie wie die Fußzeile.

   Gemessen gegen Weiß (das Blatt):
     Malt #2A2312 ........ 15,58 : 1
     gedämpft #6A614E .... 6,12 : 1
     Akzent #7A5A00 ...... 6,38 : 1
     Natter #000000 ...... 21 : 1

   mailto-Links: Auf allen Seiten steht die Adresse schon als Linktext da
   (Kontakt, Impressum, Datenschutz); der einzige mailto-Link mit anderem
   Text („Kontakt") sitzt in der Fußzeile, die im Druck wegfällt. Eine
   angehängte Adresse stünde also überall doppelt.

   Die Schnittmarken sind Rahmenlinien der Seitenrand-Ecken (@page),
   keine Hintergründe — Rahmen druckt der Browser immer. Farbe als Wert,
   weil Variablen in @page nicht ankommen: #2A2312 ist Malt. */
@media print {
  @page {
    margin: 18mm 16mm;
    @top-left-corner     { content: ""; margin: 0 3mm 3mm 0; border-right: 0.6pt solid #2A2312; border-bottom: 0.6pt solid #2A2312; }
    @top-right-corner    { content: ""; margin: 0 0 3mm 3mm; border-left: 0.6pt solid #2A2312;  border-bottom: 0.6pt solid #2A2312; }
    @bottom-left-corner  { content: ""; margin: 3mm 3mm 0 0; border-right: 0.6pt solid #2A2312; border-top: 0.6pt solid #2A2312; }
    @bottom-right-corner { content: ""; margin: 3mm 0 0 3mm; border-left: 0.6pt solid #2A2312;  border-top: 0.6pt solid #2A2312; }
  }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Endzustände, die sonst erst die Animation herstellt (wie im Block
     „Bewegung reduzieren"): Tinte voll, Umriss weg, Schriftzug ganz. */
  .umriss { display: none; }
  .pegel { transform: translateY(-95px); }
  .schwappt { rotate: none; }
  .plakat .schriftzug { clip-path: none; }
  .folgt, .nach { transform: none !important; rotate: none !important; }
  .notiz .notiz-text > * { opacity: 1 !important; }
  .plakat h1 { text-shadow: none; }
  /* C1: gedruckt wird immer der Endsatz. */
  .c1-weg, .c1-hand, .c1-fall { display: none !important; }
  .korrektur { position: static !important; inline-size: auto !important; block-size: auto !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }
  /* Wird gedruckt, bevor C1 gespielt hat: „besser“ und das Fragezeichen
     wieder als normaler Text in der Zeile (inline-block mit overflow:hidden
     setzte das Wort hoch), und die festgehaltene Spielhöhe gilt nicht. */
  .korrektur, .c1-frage { display: inline !important; overflow: visible !important; translate: none !important; }
  .korrigiert { min-height: 0 !important; }

  html, body { background: none; }
  body { font-size: 11.5pt; }

  .nojs-foot { display: none; }

  .plakat { background: none; padding-block: 0 1rem; }
  .natter { block-size: 55mm; }
  .stand mark {
    background: none;
    color: var(--malt);
    border: 1.5px solid var(--malt);
  }

  .invers {
    background: none;
    color: var(--malt);
    border-block-start: 2px solid var(--malt);
    padding-block: 1.2rem 0;
    margin-block: 1.5rem;
  }
  .notiz { color: var(--malt); }
  .notiz i { display: none; }
  .notiz-text b, .ablauf li::before { color: var(--turmeric-tief); }
  .invers a, .invers .handlung { color: var(--malt); }

  .handlung {
    background: none;
    padding-block: 0;
    min-block-size: 0;
    text-decoration: underline 2px var(--turmeric-tief);
    text-underline-offset: 0.2em;
  }
  .imp-hinweis, .entwurf-marke { background: none; }
  .entwurf-marke { border: 1.5px solid var(--malt); }

  /* Die Adresse hinter jedem Link nach außen. */
  a[href^="http"]::after {
    content: "(" attr(href) ")";
    /* inline-block, sonst erbt die Adresse die Unterstreichung des Links */
    display: inline-block;
    margin-inline-start: 0.3em;
    text-decoration: none;
    font: 400 0.8125rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0;
    color: var(--malt-leise);
    overflow-wrap: anywhere;
  }

  h1, h2, h3 { break-after: avoid; }
  figure, .ablauf, .imp-hinweis, li { break-inside: avoid; }
}