/* =====================================================================
   SEITEN · Unterseiten der Notizbuch-Site (aus layout.html)
   Ein Blatt aus dem Spiralblock auf dem Tisch. Gelesen wird auf ruhigem Papier in einer Textschrift,
   die Handschrift bleibt für Kicker, Zettel, Bildunterschriften und Randnotizen.
   Ab 1000 px hat das Blatt eine Randspalte rechts: Zettel (.hinweis) und Fotos wandern dorthin.
   Die Startseite nutzt notizbuch.css, der Fuß kommt für beide aus fuss.css.

   1 Tokens · 2 Basis · 3 Tisch und Blatt · 4 Kopfzeile und Menü · 5 Seitenkopf
   6 Fließtext · 7 Bausteine aus dem Inhalts-Vertrag · 8 FAQ, Verwandt, Extern, Stand
   9 Inhaltsverzeichnis · 10 Formular · 11 Bewegung · 12 Einstellungen, Druck
   ===================================================================== */

/* Handschrift Caveat (liegt in /assets/fonts/, wie auf der Startseite) */
@font-face {
  font-family: 'Caveat'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(../fonts/caveat-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(../fonts/caveat-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 1 Tokens ----------
   Grundwerte kommen aus dem Designsystem (designsystem/tokens.css, vom Build nach /assets/css/tokens.css kopiert
   und vor dieser Datei geladen). Hier stehen nur noch die kurzen Namen, die die Unterseiten benutzen.
   Die Stufen bei 760 und 1000 px schaltet tokens.css. */
:root {
  --papier: var(--db-papier);
  --papier-hell: var(--db-papier-hell);
  --tinte: var(--db-tinte);
  --blei: var(--db-blei);              /* 8 : 1 auf Papier */
  --bleistift: var(--db-bleistift);    /* nur für Linien und Rahmen */
  --kuli: var(--db-kuli);              /* Links, Handschrift, 9 : 1 */
  --filz: var(--db-filz);              /* Flächen und Striche, nie kleine Schrift auf Papier */
  --filz-hell: var(--db-filz-hell);
  --filz-text: var(--db-filz-text);    /* Orange als Schrift auf Papier, 5,3 : 1 */
  --gelb: var(--db-gelb);
  --rosa: var(--db-rosa);
  --gruen: var(--db-gruen);
  --postit: var(--db-postit);
  --tisch: var(--db-tisch);
  --rot-fehler: var(--db-fehler);
  --rand-farbe: var(--db-rand);
  --linie: var(--db-linie);
  --karo: var(--db-karo-leise);        /* Karo leise, Lesetext */
  --zeile: var(--db-zeile);

  --hand: var(--db-schrift-hand);
  --serif: var(--db-schrift-serif);
  --text: var(--db-schrift-text);

  --mass: var(--db-mass);              /* Zeilenlänge der Textspalte, rund 70 Zeichen */
  --rand-x: var(--db-rand-x);          /* rote Randlinie */
  --innen-l: var(--db-innen-l);
  --innen-r: var(--db-innen-r);
  --rand-spalte: var(--db-rand-spalte);  /* Randspalte rechts, erst ab 1000 px */
  --rand-luecke: var(--db-rand-luecke);
  --breit: var(--db-breit);            /* Breite für Tabellen, Belege, Karten */
  --karo-groesse: var(--db-karo-groesse);
}

/* ---------- 2 Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: Beim Rückwärts-Tab und bei Ankersprüngen landet das Ziel unter der klebenden Kopfzeile (108 px Desktop, 88 px mobil) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 120px; }
@media (max-width: 759px) { html { scroll-padding-top: 96px; } }
body {
  margin: 0; padding: 14px 0 0;
  background: var(--tisch) url(../img/papierkorn.webp); background-size: 256px 256px;
  color: var(--tinte); font-family: var(--text); font-size: 1.0625rem; line-height: 1.65;
  font-optical-sizing: auto; overflow-x: clip;
}
@media (min-width: 760px) { body { font-size: 1.125rem; padding-top: 30px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--kuli); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-skip-ink: auto; }
a:hover { text-decoration-color: var(--filz); text-decoration-thickness: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--kuli); outline-offset: 4px; border-radius: 3px; }
main:focus { outline: none; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hand { font-family: var(--hand); }
.sprung {
  position: absolute; left: 12px; top: -80px; z-index: 90; padding: 10px 14px;
  background: var(--gelb); color: var(--tinte); font-weight: 700; text-decoration: none;
}
.sprung:focus { top: 12px; }
/* Sprungziele nicht unter der Kopfzeile verstecken */
/* Kein zusätzliches scroll-margin: Es zählte zu scroll-padding-top dazu, Anker landeten 216 px tief statt unter der Kopfzeile */

/* ---------- 3 Tisch und Blatt ---------- */
.kopfzeile, .blatt, .anfrage-fehler {
  position: relative; width: 100%; max-width: 1180px; margin: 0 auto;
  background-color: var(--papier);
  background-image:
    url(../img/papierkorn.webp),
    linear-gradient(var(--karo) 1px, transparent 1px),
    linear-gradient(90deg, var(--karo) 1px, transparent 1px);
  background-size: 256px 256px, var(--karo-groesse) var(--karo-groesse), var(--karo-groesse) var(--karo-groesse);
  background-position: 0 0, -1px -1px, -1px -1px;
}
@media (min-width: 1000px) {
  .kopfzeile, .blatt { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
}
/* rote Randlinie des Hefts */
.blatt::before, .anfrage-fehler::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--rand-x); width: 2px;
  background: var(--rand-farbe); pointer-events: none;
}
/* Kaffeering oben rechts: Das Heft lag schon auf dem Tisch */
.blatt::after {
  content: ''; position: absolute; right: -40px; top: -70px; width: 210px; height: 210px; pointer-events: none;
  background: url(../img/kaffeering.webp) center / contain no-repeat; opacity: 0.55; rotate: 24deg;
}
@media (max-width: 759px) { .blatt::after { width: 130px; height: 130px; right: -66px; top: -58px; } } /* weiter außen: berührt sonst die erste Textzeile */
/* Der gedrehte Kaffeering ragt rund 75 px über die rechte Blattkante: erst ab 1340 px liegt er ganz auf dem Tisch, sonst würde die Seite seitlich scrollen */
@media (max-width: 1339px) { .blatt { overflow-x: clip; } }

.blatt, .anfrage-fehler {
  padding: 26px var(--innen-r) clamp(56px, 8vw, 104px) var(--innen-l);
  overflow-wrap: break-word; text-wrap: pretty;
}
/* Silbentrennung nur schmal, und nie in Überschriften oder Handschrift */
@media (max-width: 759px) {
  .blatt p, .blatt li, .blatt dd, .blatt td, .anfrage-fehler p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}
h1, h2, h3, .hand, .kicker, aside.hinweis, aside.hinweis *, figcaption, blockquote, blockquote * { hyphens: manual; -webkit-hyphens: manual; }
/* Textspalte: alles bleibt in lesbarer Breite, Ausnahmen (breit, Randspalte) stehen bei den Bausteinen */
.blatt > *, .inhalt > *, .anfrage-fehler > * { max-width: var(--mass); }

/* ---------- 4 Kopfzeile und Menü ---------- */
.kopfzeile { z-index: 40; }
/* Spiralbindung oben am Blatt */
.kopfzeile::before {
  content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 40px; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='40' viewBox='0 0 30 40'%3E%3Cellipse cx='15' cy='30' rx='4.6' ry='4.2' fill='%231C1A17'/%3E%3Cpath d='M11.5 30 C 10 10, 20 4, 19.5 30' fill='none' stroke='%237d7871' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M12.6 24 C 12.4 12, 17 8, 18 14' fill='none' stroke='%23d9d4cb' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 6px 0;
}
@media (min-width: 760px) { .kopfzeile::before { background-size: 34px 44px; height: 44px; top: -18px; } }
/* Karo und Korn der Kopfzeile hängen an ihrer Unterkante: Dort beginnt das Blatt, die Linien laufen ohne Versatz
   weiter, egal wie hoch die Kopfzeile ist (eine Zeile, Menü offen, schmal oder breit). */
.kopfzeile { background-position: left 0 bottom 0, left -1px bottom 1px, left -1px bottom 1px; }
.kopfzeile__innen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 30px var(--innen-r) 12px 16px; border-bottom: 2px dashed var(--linie);
}
@media (min-width: 760px) { .kopfzeile__innen { padding: 38px var(--innen-r) 14px 40px; } }
/* Tippfläche mindestens 44 px hoch (Innenabstand, Lage unverändert durch negativen Außenabstand); der Logo-Punkt rückt um --lp mit */
/* Logo in Kopf und Fuß immer gleich groß (gleiche Werte wie auf der Startseite): unter 760 px --db-logo-breite-schmal, darüber 191 px */
.kopfzeile__logo {
  --lw: var(--db-logo-breite-schmal); --lp: max(0px, calc((44px - var(--lw) * 0.19316) / 2));
  flex: none; line-height: 0; border-radius: 4px; padding-block: var(--lp); margin-block: calc(-1 * var(--lp));
}
.kopfzeile__logo img { width: var(--lw); height: auto; }
.kopfzeile__logo .logo-punkt { top: calc(var(--lp) + var(--lw) * 0.05567); }
@media (min-width: 760px) { .kopfzeile__logo { --lw: var(--logo-breite); } }
.kopfzeile__nav { flex: 1 1 100%; order: 3; }
.kopfzeile__nav ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.kopfzeile__nav a {
  display: inline-block; padding: 6px 4px; min-height: 44px;
  font-family: var(--hand); font-size: 25px; font-weight: 600; line-height: 1.3; color: var(--tinte); text-decoration: none; white-space: nowrap;
  background-repeat: no-repeat; background-position: 50% 92%; background-size: 0% 9px;
}
/* aktueller Bereich: mit dem Filzstift eingekringelt */
.kopfzeile__nav a:hover, .kopfzeile__nav a[aria-current] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 25 2, 55 9, 98 4' fill='none' stroke='%23F48418' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 9px;
}
.kopfzeile__nav a[aria-current='page'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50' preserveAspectRatio='none'%3E%3Cpath d='M18 8 C 50 0, 104 4, 114 22 C 122 40, 70 48, 30 44 C 4 40, 0 22, 16 12 C 30 4, 60 3, 76 6' fill='none' stroke='%23F48418' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-position: 50% 50%;
}
.kopfzeile__kontakt a {
  font-family: var(--text); font-size: 16px; font-weight: 800; line-height: 1.2;
  display: inline-flex; align-items: center; padding: 9px 16px; margin-top: 2px;
  background: var(--filz); border: 2.5px solid var(--tinte); border-radius: 12px 9px 13px 8px; box-shadow: 3px 4px 0 var(--tinte);
}
.kopfzeile__kontakt a:hover, .kopfzeile__kontakt a[aria-current] { background-image: none; background-color: var(--filz-hell); }
.kopfzeile__knoepfe { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
@media (max-width: 599px) { .kopfzeile__innen { gap: 10px 6px; } .kopfzeile__knoepfe { gap: 6px; } }
/* Navigation in einer Zeile erst ab 1280 px, wie auf der Startseite; darunter der Menü-Knopf (lieber früher einklappen) */
@media (min-width: 1280px) {
  .kopfzeile__innen { flex-wrap: nowrap; }
  .kopfzeile__nav { order: 0; flex: 1 1 auto; }
  .kopfzeile__nav ul { justify-content: center; align-items: center; gap: 0 14px; }
  .kopfzeile__knoepfe { margin-left: 0; }
}
@media (min-width: 1440px) { .kopfzeile__nav ul { gap: 0 22px; } }

/* Knopf Bewegung (wie auf der Startseite): Zeichen und Text zeigen, was ein Tipp tut. Pause-Zeichen und
   „Bewegung pausieren“, solange sich etwas bewegt; Play-Zeichen und „Bewegung abspielen“, wenn die Bewegung aus ist.
   Zustand über html.bewegung-aus (seiten-vorab.js, vor dem ersten Bild). */
.bewegung-knopf {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 7px 13px 7px 10px;
  font: 700 14px/1.1 var(--text); color: var(--tinte); background: var(--papier-hell);
  border: 2.5px solid var(--tinte); border-radius: 12px 9px 13px 8px; box-shadow: 3px 3px 0 var(--tinte);
  cursor: pointer; white-space: nowrap; text-align: left; flex: none;
}
.bewegung-knopf:hover, .bewegung-aus .bewegung-knopf { background: var(--gelb); }
.bewegung-aus .bewegung-knopf { box-shadow: 1px 1px 0 var(--tinte); translate: 2px 2px; }
.bewegung-aus .bewegung-knopf__an, html:not(.bewegung-aus) .bewegung-knopf__aus { display: none; }
.bewegung-knopf__icon { position: relative; width: 14px; height: 16px; flex: none; }
.bewegung-knopf__icon::before, .bewegung-knopf__icon::after { content: ''; position: absolute; top: 0; width: 4.5px; height: 16px; background: var(--tinte); border-radius: 1px; }
.bewegung-knopf__icon::before { left: 1px; }
.bewegung-knopf__icon::after { right: 1px; }
.bewegung-aus .bewegung-knopf__icon::before { left: 2px; width: 0; height: 0; background: none; border-left: 13px solid var(--tinte); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-radius: 0; }
.bewegung-aus .bewegung-knopf__icon::after { display: none; }
@media (forced-colors: active) { .bewegung-knopf__icon::before, .bewegung-knopf__icon::after { forced-color-adjust: none; background: ButtonText; } .bewegung-aus .bewegung-knopf__icon::before { background: none; border-left-color: ButtonText; } }
/* Im Kopf nur das Zeichen (Pause oder Play), quadratisch 44 px, wie auf der Startseite. Der Text bleibt der Name für
   Screenreader, mit Maus oder Tastatur steht er als Zettel darunter (alt-Text der Pseudo-Inhalte leer, nicht doppelt vorgelesen). */
.bewegung-knopf--kopf { position: relative; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; gap: 0; }
.bewegung-knopf--kopf .bewegung-knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bewegung-knopf--kopf::after {
  content: 'Bewegung pausieren' / ''; position: absolute; top: calc(100% + 8px); right: -6px; z-index: 2;
  padding: 5px 9px; font: 700 13px/1.1 var(--text); white-space: nowrap; color: var(--tinte);
  background: var(--papier-hell); border: 2px solid var(--tinte); border-radius: 8px 6px 9px 6px; box-shadow: 2px 2px 0 var(--tinte);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--db-dauer-reiter) ease, visibility 0s var(--db-dauer-reiter);
}
.bewegung-aus .bewegung-knopf--kopf::after { content: 'Bewegung abspielen' / ''; }
@media (hover: hover) { .bewegung-knopf--kopf:hover::after { opacity: 1; visibility: visible; transition-delay: 0.3s, 0.3s; } }
.bewegung-knopf--kopf:focus-visible::after { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Ohne JavaScript tut der Schalter nichts, also zeigen wir ihn auch nicht */
html:not(.js) [data-bewegung-knopf] { display: none; }

/* Menü-Knopf: nur mit JavaScript und nur schmal. Ohne JavaScript steht die Navigation offen da. */
.menue-knopf { display: none; }
@media (max-width: 1279px) {
  .js .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 6px 10px 6px 8px;
    font: 600 23px/1 var(--hand); color: var(--tinte); background: none; border: 0; cursor: pointer; border-radius: 8px;
  }
  .menue-knopf__icon { width: 26px; height: 20px; overflow: visible; }
  .menue-knopf__icon path { fill: none; stroke: var(--tinte); stroke-width: 2.6; stroke-linecap: round; transition: d var(--db-dauer-drehung) var(--db-stufen-2), opacity 0.1s; }
  .menue-knopf[aria-expanded='true'] .menue-knopf__icon path:nth-child(1) { d: path('M4 3 C 10 8, 16 13, 23 19'); }
  .menue-knopf[aria-expanded='true'] .menue-knopf__icon path:nth-child(2) { opacity: 0; }
  .menue-knopf[aria-expanded='true'] .menue-knopf__icon path:nth-child(3) { d: path('M4 19 C 10 13, 17 8, 24 3'); }
  /* offen: Zettel unter dem Kopf rechts, wie auf der Startseite. Das Blatt darunter bleibt stehen, nichts springt. */
  .js .kopfzeile__nav { display: none; }
  .js .kopfzeile__nav.ist-offen {
    display: block; position: absolute; right: var(--innen-r); top: calc(100% - 4px); z-index: 3; min-width: 230px; padding: 14px 20px 18px;
    background: var(--papier-hell); border: 2.5px solid var(--tinte); border-radius: 12px 9px 13px 8px; box-shadow: 4px 5px 0 var(--tinte); rotate: 0.6deg;
  }
  .js .kopfzeile__nav.ist-offen ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .js .kopfzeile__nav.ist-offen a { font-size: 30px; padding: 4px 2px; }
  .js .kopfzeile__nav.ist-offen .kopfzeile__kontakt a { font-size: 15px; margin-top: 12px; padding: 8px 16px 9px; min-height: 44px; }
}
/* schmal: Menü nur als Zeichen, der Name „Menü“ bleibt für Screenreader */
/* „Menü“ steht auf jeder Breite neben dem Zeichen (Wunsch Mathias, auch für Barrierefreiheit: Zeichen allein ist ein Rätsel).
   Schmal rücken Zeichen und Wort enger zusammen. */
@media (max-width: 459px) { .js .menue-knopf { padding: 6px 4px 6px 6px; gap: 5px; font-size: 21px; } }

/* Kopfzeile klebt oben, verschwindet beim Runterscrollen und kommt beim Hochscrollen (seiten.js).
   Kompakter, sobald sie klebt: Sie klebt einige Pixel über dem Bildrand (top negativ), so verschwindet der obere Rand
   ohne Änderung ihrer Höhe. Vorher schrumpfte der Innenabstand, das ganze Blatt sprang dabei um 8 bis 16 px. */
/* Kommen und Gehen gleiten weich (Werkzeug, keine Zeichnung): Ausnahme von steps(), siehe designsystem/BEWEGUNG.md */
.js .kopfzeile { position: sticky; top: -8px; transition: translate var(--db-dauer-gleiten) var(--db-kurve-gleiten), opacity var(--db-dauer-blenden) ease; }
@media (min-width: 760px) { .js .kopfzeile { top: -16px; } }
.js .kopfzeile.ist-weg { translate: 0 -112%; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .kopfzeile { transition: opacity var(--db-dauer-blenden) ease; } }
.bewegung-aus .kopfzeile { transition: opacity var(--db-dauer-blenden) ease; }
.js .kopfzeile.ist-geloest { box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.55); }

/* ---------- 4b Leiste unten (seiten.js, unter 1000 px) ----------
   Wie das Register der Startseite: feste Leiste im Daumenbereich, links das Inhaltsverzeichnis zum Aufklappen
   (Stand „2/6“, Stempel „Inhalt“) oder ein zweiter Weg, rechts der Weg zum Formular. Ab 1000 px steht das
   Verzeichnis in der Randspalte, die Leiste gibt es dort nicht. Ohne JavaScript gibt es sie nicht. */
.leiste { display: none; }
@media (max-width: 999px) {
  :root { --leiste-h: 64px; }
  .leiste {
    display: flex; align-items: center; gap: 10px;
    position: fixed; z-index: var(--db-ebene-leiste); left: 0; right: 0; bottom: 0;
    padding: 7px max(12px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background-color: var(--papier);
    background-image: url(../img/papierkorn.webp), linear-gradient(var(--karo) 1px, transparent 1px), linear-gradient(90deg, var(--karo) 1px, transparent 1px);
    background-size: 256px 256px, var(--karo-groesse) var(--karo-groesse), var(--karo-groesse) var(--karo-groesse);
    border-top: 2px dashed var(--db-linie); box-shadow: 0 -10px 22px -14px rgba(0, 0, 0, 0.55);
    translate: 0 calc(100% + 16px); opacity: 0; visibility: hidden;
    transition: translate var(--db-dauer-gleiten) var(--db-kurve-gleiten), opacity var(--db-dauer-blenden) ease, visibility 0s var(--db-dauer-gleiten);
  }
  .leiste.da { translate: 0 0; opacity: 1; visibility: visible; transition: translate var(--db-dauer-gleiten) var(--db-kurve-gleiten), opacity var(--db-dauer-blenden) ease, visibility 0s; }
  .bewegung-aus .leiste, .bewegung-aus .leiste.da { translate: 0 0; transition: opacity var(--db-dauer-blenden) ease, visibility 0s var(--db-dauer-blenden); }
  /* Der Fuß bekommt unten Platz, damit die Leiste nie den letzten Link verdeckt */
  html.hat-leiste { scroll-padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + 12px); }
  html.hat-leiste .fuss { padding-bottom: calc(84px + var(--leiste-h) + env(safe-area-inset-bottom)); }

  .leiste__knopf, .leiste__weg {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 4px 12px 4px 10px;
    font: inherit; color: var(--tinte); text-decoration: none; cursor: pointer;
    background: var(--papier-hell); border: 2.5px solid var(--tinte); border-radius: 12px 9px 13px 8px; box-shadow: 3px 3px 0 var(--tinte);
  }
  .leiste__weg { font: 700 26px/1 var(--hand); color: var(--kuli); padding: 4px 16px; }
  .leiste__knopf:hover, .leiste__weg:hover, .leiste__knopf[aria-expanded='true'] { background: var(--gelb); }
  .leiste__knopf[aria-expanded='true'] { box-shadow: 1px 1px 0 var(--tinte); translate: 2px 2px; }
  .leiste__punkt { width: var(--punkt-groesse); height: var(--punkt-groesse); border-radius: 50%; background: var(--filz); flex: none; }
  .leiste__stand { font-size: 24px; font-weight: 700; line-height: 1; white-space: nowrap; }
  .leiste__stempel {
    display: inline-block; font: 800 12px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--filz-text); border: 2px solid currentColor; border-radius: 4px; padding: 4px 6px 3px; rotate: -4deg; background: rgba(255, 253, 247, 0.9);
  }
  .leiste__pfeil { width: 18px; height: 13px; flex: none; overflow: visible; }
  .leiste__pfeil path { fill: none; stroke: var(--tinte); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .leiste__knopf[aria-expanded='true'] .leiste__pfeil { rotate: 180deg; }
  .leiste__cta {
    display: inline-flex; align-items: center; min-height: 48px; padding: 6px 14px; margin-left: auto;
    font: 800 15px/1.1 var(--text); color: var(--tinte); text-decoration: none; white-space: nowrap;
    background: var(--filz); border: 2.5px solid var(--tinte); border-radius: 10px 8px 11px 7px; box-shadow: 3px 3px 0 var(--tinte);
  }
  .leiste__cta:hover { background: var(--filz-hell); }
  :is(.leiste__knopf, .leiste__weg, .leiste__cta, .leiste__reiter):focus-visible { outline: 3px solid var(--kuli); outline-offset: 3px; }

  /* aufgeklappt: Zettel über der Leiste */
  .leiste__inhalt {
    display: none; position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: calc(100% + 10px);
    width: min(calc(100vw - 20px), 520px); max-height: calc(100svh - var(--leiste-h) - 96px); overflow-y: auto; overscroll-behavior: contain;
    padding: 14px 14px 16px;
    background: var(--papier-hell); border: 2.5px solid var(--tinte); border-radius: 12px 9px 13px 8px; box-shadow: 4px 5px 0 var(--tinte);
  }
  .leiste.ist-offen .leiste__inhalt { display: block; }
  .leiste__titel { margin: 0 0 8px 4px; font-size: 24px; font-weight: 700; line-height: 1.05; color: var(--kuli); rotate: -1.5deg; }
  .leiste__liste { list-style: none; margin: 0; padding: 0 0 10px; border-bottom: 2px dashed var(--db-linie); display: grid; gap: 2px; }
  .leiste__liste li { margin: 0; padding: 0; }
  .leiste__liste li::before { content: none; }
  .leiste__reiter {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px 4px 4px;
    font: 600 15px/1.2 var(--text); color: var(--tinte); text-decoration: none; border-radius: 8px;
  }
  .leiste__reiter:hover { background: var(--gelb); }
  .leiste__nr {
    flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px;
    font: 700 23px/1 var(--hand); border: 2px solid var(--tinte); border-radius: 50% 46% 52% 48%; background: var(--papier);
  }
  .leiste__reiter.erledigt { color: var(--blei); }
  .leiste__reiter.erledigt .leiste__nr { background: var(--db-station-erledigt); border-color: var(--db-metall); }
  .leiste__reiter[aria-current] { background: rgba(244, 132, 24, 0.16); font-weight: 800; }
  .leiste__reiter[aria-current] .leiste__nr { background: var(--filz); border-color: var(--tinte); }
  .bewegung-knopf--leiste { margin-top: 12px; }
}
@media (max-width: 429px) { .leiste__stempel { font-size: 11px; letter-spacing: 0.08em; } .leiste__cta { padding: 6px 12px; font-size: 14px; } }
@media (max-width: 359px) { .leiste__stempel { display: none; } }
@media print { .leiste { display: none !important; } }

/* ---------- 5 Seitenkopf ---------- */
.brotkrumen { font-size: 0.92rem; line-height: 1.4; color: var(--blei); margin: 6px 0 30px; position: relative; z-index: 1; }
.brotkrumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.brotkrumen li { display: inline-flex; align-items: center; }
.brotkrumen li + li::before {
  content: ''; display: inline-block; width: 22px; height: 12px; margin: 0 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 7 C 7 5, 13 8, 19 6 M15 2 L 20 6 L 15 10' fill='none' stroke='%234A4845' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.brotkrumen a { color: var(--blei); padding: 6px 0; }
.brotkrumen [aria-current] { font-weight: 700; color: var(--tinte); }

.seitenkopf { position: relative; margin-bottom: clamp(40px, 6vw, 64px); }
.blatt > .seitenkopf { max-width: var(--breit); }
.kicker {
  display: inline-block; font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.05rem); font-weight: 600; line-height: 1.1;
  color: var(--kuli); margin: 0 0 10px; rotate: -1.5deg; transform-origin: 0 50%; max-width: 30em;
}
.kicker:empty { display: none; }
.seitenkopf h1 {
  margin: 0; max-width: 21ch;
  font-family: var(--serif); font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1;
  font-weight: 640; font-size: clamp(2.15rem, 1.2rem + 3.6vw, 3.7rem); line-height: 1.04; letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Filzstift-Unterstrich unter der H1, daneben liegt der Stift */
.seitenkopf__strich { position: relative; width: min(78%, 420px); aspect-ratio: 400 / 26; margin: 8px 0 30px; }
.seitenkopf__linie { display: block; width: 100%; height: 100%; overflow: visible; }
.seitenkopf__linie path { fill: none; stroke: var(--filz); stroke-width: 5; stroke-linecap: round; }
.seitenkopf__linie path + path { stroke-width: 3.4; }
.seitenkopf__stift { position: absolute; right: -46px; top: -40px; width: 22px; height: 86px; rotate: 58deg; transform-origin: 50% 100%; filter: drop-shadow(3px 4px 0 rgba(21, 23, 31, 0.18)); }
@media (max-width: 759px) { .seitenkopf__stift { right: -34px; top: -30px; width: 17px; height: 66px; } }

/* Antwortblock als Karteikarte, wie der Steckbrief auf der Startseite */
.steckbrief, .seitenkopf > .antwort {
  position: relative; max-width: 40rem; padding: 34px clamp(18px, 3vw, 28px) 18px;
  font-size: 1.12rem; line-height: 1.6;
  background-color: var(--db-karton);
  background-image: linear-gradient(rgba(214, 72, 62, 0.5), rgba(214, 72, 62, 0.5)), linear-gradient(transparent calc(1.6em - 1px), var(--zeile) calc(1.6em - 1px));
  background-size: 100% 2px, 100% 1.6em; background-position: 0 24px, 0 calc(34px - 0.28em); background-repeat: no-repeat, repeat-y;
  rotate: -0.6deg;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 18px 30px -18px rgba(40, 25, 5, 0.5);
}
.steckbrief:not(:has(.antwort)) { display: none; }
@media (max-width: 759px) {
  /* einzeilig, Schrift wächst mit der Breite: zweizeilig lag das Etikett auf 320 px über der ersten Textzeile */
  .steckbrief__etikett { font-size: min(1.02em, 4.9vw) !important; white-space: nowrap; overflow: visible; }
}
.steckbrief .antwort { margin: 0; font-size: inherit; line-height: inherit; }
.seitenkopf > .antwort { margin: 18px 0 0; }
/* Autorzeile der Ratgeber (build.mjs setzt sie nur bei schema.typ Article), unten entfällt dann die zweite Autorzeile */
.byline { margin: 22px 0 0; font-size: 0.95rem; color: var(--blei); }
.byline a { font-weight: 700; }
.seitenkopf:has(> .byline) ~ .stand .stand__autor { display: none; }
.steckbrief__etikett {
  position: absolute; top: -18px; left: 14px; margin: 0; padding: 3px 12px 4px;
  font-size: 1.18em; font-weight: 700; line-height: 1.1; color: var(--tinte);
  background: var(--gelb); rotate: -2.5deg; box-shadow: 1px 2px 0 rgba(21, 23, 31, 0.25);
}

/* ---------- 6 Fließtext ---------- */
.inhalt { position: relative; }
.inhalt::after { content: ''; display: block; clear: both; }
.abschnitt { margin: 0 0 clamp(56px, 7vw, 88px); }
.abschnitt > :last-child { margin-bottom: 0; }
p, ul, ol, dl, figure, table, blockquote { margin: 0 0 1.15em; }
.inhalt h2, .faq h2, .formular h2 {
  position: relative; margin: 0 0 0.75em; padding-bottom: 0.32em; max-width: 24ch;
  font-family: var(--serif); font-variation-settings: 'opsz' 72, 'SOFT' 70, 'WONK' 1;
  font-weight: var(--db-gewicht-serif); font-size: clamp(1.65rem, 1.15rem + 1.7vw, 2.35rem); line-height: 1.1; letter-spacing: -0.01em;
  text-wrap: balance;
}
.inhalt h3 {
  margin: 1.7em 0 0.45em;
  font-family: var(--serif); font-variation-settings: 'opsz' 36, 'SOFT' 50;
  font-weight: 640; font-size: 1.3rem; line-height: 1.2; text-wrap: balance;
}
.inhalt h2 + h3 { margin-top: 0.4em; }
/* der Unterstrich, den seiten.js unter jede Abschnittsüberschrift zeichnet */
.kritzel { position: absolute; left: -2px; bottom: -4px; width: var(--kritzel-b, 40%); max-width: 100%; height: 14px; overflow: visible; pointer-events: none; }
.kritzel path { fill: none; stroke: var(--filz); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
strong { font-weight: 720; }
.inhalt ul, .faq ul { list-style: none; padding: 0; }
.inhalt ul > li, .faq ul > li { position: relative; padding-left: 1.5em; }
/* Aufzählungspunkt: der orange Punkt aus dem Logo, feste Größe (--punkt-groesse aus fuss.css), mittig auf der ersten Zeile */
.inhalt ul > li::before, .faq ul > li::before {
  content: ''; position: absolute; left: 0.5em; top: 0.7em; top: calc(0.5lh + 0.08em - var(--punkt-groesse) / 2);
  width: var(--punkt-groesse); height: var(--punkt-groesse); background: var(--filz); border-radius: 50%;
}
li + li { margin-top: 0.45em; }
.inhalt ol:not([class]) { padding-left: 1.6em; }
.inhalt ol:not([class]) > li::marker { font-family: var(--hand); font-weight: 700; font-size: 1.3em; color: var(--filz-text); }
.inhalt ol:not([class]) > li { padding-left: 0.2em; }
blockquote p { margin: 0; }
time { font-variant-numeric: tabular-nums; }

/* ---------- 7 Bausteine aus dem Inhalts-Vertrag ---------- */

/* 7.1 Schritte: handgeschriebene Nummern im Kreis, ein Faden verbindet sie */
ol.schritte { position: relative; list-style: none; padding: 0; counter-reset: schritt; margin-top: 1.4em; }
ol.schritte::before {
  content: ''; position: absolute; left: calc(1.25rem - 1.5px); top: 1.4rem; bottom: 1.6rem; width: 3px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--filz) 0 14px, rgba(244, 132, 24, 0.7) 14px 16px, var(--filz) 16px 30px);
  transform-origin: 50% 0; scale: 1 var(--faden, 1);
}
ol.schritte > li { counter-increment: schritt; position: relative; margin: 0; padding: 0 0 1.25rem 3.6rem; }
ol.schritte > li::before {
  content: counter(schritt); position: absolute; left: 0; top: -0.15rem; width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center; font: 700 1.75rem/1 var(--hand); color: var(--tinte);
  background: var(--papier-hell); border: 3px solid var(--filz); border-radius: 50% 44% 54% 46% / 46% 54% 44% 52%;
  rotate: -4deg;
}
ol.schritte > li:nth-child(even)::before { rotate: 5deg; border-radius: 46% 54% 48% 52% / 54% 44% 56% 46%; }
ol.schritte > li:last-child { padding-bottom: 0; }

/* 7.2 Fakten: bis vier Paare als Belegzettel (seiten.js setzt je Paar eine Hülle), sonst als Steckbrief-Liste */
dl.fakten { margin: 1.6em 0 1.8em; }
dl.fakten dt { font: 700 clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--hand); color: var(--filz-text); font-variant-numeric: tabular-nums; }
dl.fakten dd { margin: 0.3rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--tinte); }
dl.fakten dd + dt { margin-top: 1.2rem; }
/* Belegzettel */
dl.fakten--zettel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.fakten__paar {
  position: relative; padding: 26px 20px 16px; margin: 0;
  background-color: var(--papier-hell);
  rotate: var(--dreh, -0.8deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 14px 26px -14px rgba(40, 25, 5, 0.45);
}
.fakten__paar:nth-child(2) { --dreh: 0.9deg; }
.fakten__paar:nth-child(3) { --dreh: -0.4deg; }
.fakten__paar:nth-child(4) { --dreh: 1.2deg; }
.fakten__paar::before {
  content: ''; position: absolute; top: -12px; left: 22px; width: 76px; height: 24px; rotate: -5deg;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 6px, rgba(255, 255, 255, 0) 6px 12px), rgba(232, 214, 170, 0.85);
}
.fakten__paar dt { margin: 0 0 6px; }
.fakten__paar dd { margin: 0; color: var(--blei); }
@media (min-width: 640px) { dl.fakten--zettel { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
@media (min-width: 1000px) {
  /* Belegzettel dürfen in die Randspalte hinein, Zettel und Fotos dort weichen nach unten */
  .abschnitt > dl.fakten--zettel { clear: right; width: var(--breit); max-width: none; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 26px; }
}
/* lange Listen (ab fünf Paaren, etwa Impressum oder Über mich): zweispaltig auf einer Karteikarte */
dl.fakten:has(> dt:nth-of-type(5)), .unterseite--impressum dl.fakten {
  display: grid; grid-template-columns: minmax(0, 1fr); padding: 18px clamp(16px, 3vw, 26px);
  background: var(--db-karton); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 18px 30px -20px rgba(40, 25, 5, 0.5); rotate: 0.3deg;
}
dl.fakten:has(> dt:nth-of-type(5)) dt, .unterseite--impressum dl.fakten dt {
  font: 600 1.4rem/1.15 var(--hand); color: var(--kuli); margin: 0; padding-top: 12px; hyphens: auto; -webkit-hyphens: auto;
}
dl.fakten:has(> dt:nth-of-type(5)) dd, .unterseite--impressum dl.fakten dd {
  margin: 2px 0 0; padding-bottom: 12px; border-bottom: 1.5px dashed var(--linie); font-size: 1rem;
}
dl.fakten:has(> dt:nth-of-type(5)) dd:last-of-type, .unterseite--impressum dl.fakten dd:last-of-type { border-bottom: 0; }
/* Zwei Spalten erst, wenn die Karte selbst breit genug ist (Container-Abfrage, Hülle setzt seiten.js):
   Neben einem Foto in der Randspalte ist sie auch auf großen Bildschirmen schmal, dort steht das Etikett über dem Text.
   Vorher entschied die Bildschirmbreite (640 px), und die Werte quetschten sich in eine Spalte von drei Wörtern. */
.fakten-huelle { display: flow-root; container: fakten / inline-size; }
@container fakten (min-width: 36rem) {
  dl.fakten:has(> dt:nth-of-type(5)), .unterseite--impressum dl.fakten { grid-template-columns: minmax(10.5rem, 0.4fr) minmax(0, 1fr); column-gap: 22px; }
  dl.fakten:has(> dt:nth-of-type(5)) dt, .unterseite--impressum dl.fakten dt { padding: 12px 0; border-bottom: 1.5px dashed var(--linie); }
  dl.fakten:has(> dt:nth-of-type(5)) dd, .unterseite--impressum dl.fakten dd { padding: 14px 0 12px; margin: 0; }
  dl.fakten:has(> dt:nth-of-type(5)) dt:last-of-type, .unterseite--impressum dl.fakten dt:last-of-type { border-bottom: 0; }
}

/* 7.3 Fotos: Polaroid. Freistehende Bilder bekommen den Rahmen direkt, figure zusätzlich Klebeband und Handschrift */
.inhalt img {
  width: min(78vw, 300px); margin: 1.6em auto 2em; padding: 9px 9px 38px; background: var(--db-karton);
  rotate: var(--dreh, -1.6deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 16px 30px -14px rgba(40, 25, 5, 0.5);
}
.inhalt figure:not(.zitat) {
  position: relative; width: min(78vw, 300px); margin: 1.8em auto 2em; padding: 9px 9px 0; background: var(--db-karton);
  rotate: var(--dreh, 1.4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 16px 30px -14px rgba(40, 25, 5, 0.5);
}
.inhalt figure:not(.zitat) img { width: 100%; margin: 0; padding: 0; rotate: none; box-shadow: none; }
.inhalt figure:not(.zitat)::before {
  content: ''; position: absolute; z-index: 2; top: -13px; left: calc(50% - 46px); width: 92px; height: 26px; rotate: -4deg;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 6px, rgba(255, 255, 255, 0) 6px 12px), rgba(232, 214, 170, 0.85);
  clip-path: polygon(0 10%, 4% 0, 8% 12%, 12% 2%, 88% 4%, 92% 14%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 88%, 88% 98%, 12% 96%, 8% 86%, 4% 100%, 0 90%);
}
.inhalt figure:not(.zitat) figcaption { font: 600 1.35rem/1.12 var(--hand); color: var(--kuli); padding: 10px 4px 14px; }
.inhalt img:nth-of-type(even), .inhalt figure:not(.zitat):nth-of-type(even) { --dreh: -1.2deg; }
@media (min-width: 760px) and (max-width: 999px) {
  /* Tablet: das Foto steht rechts im Text, der Text fließt drumherum */
  .inhalt img, .inhalt figure:not(.zitat) { float: right; clear: right; width: 236px; margin: 0.3em -12px 1.4em 30px; }
}
@media (min-width: 1000px) {
  /* Desktop: Fotos wandern in die Randspalte */
  .inhalt img, .inhalt figure:not(.zitat) {
    float: right; clear: right; width: calc(var(--rand-spalte) - 34px);
    margin: 0.2em calc(-1 * (var(--rand-luecke) + var(--rand-spalte) - 20px)) 2.2em 0;
  }
}

/* 7.4 Zitat: in Handschrift, mit dem Filzstift am Rand */
figure.zitat { position: relative; margin: 2.2em 0 2.4em; padding: 4px 0 4px 1.3rem; border-left: 4px solid var(--filz); }
.inhalt > figure.zitat { margin-bottom: clamp(56px, 7vw, 88px); }
figure.zitat blockquote { margin: 0; font: 600 clamp(1.65rem, 1.3rem + 1.1vw, 2.15rem)/1.18 var(--hand); color: var(--kuli); }
figure.zitat blockquote > p:first-child::before, figure.zitat blockquote:not(:has(p))::before { content: '„'; content: '„' / ''; }
figure.zitat blockquote > p:last-child::after, figure.zitat blockquote:not(:has(p))::after { content: '“'; content: '“' / ''; }
figure.zitat figcaption { margin-top: 0.6em; font-size: 0.95rem; line-height: 1.45; color: var(--blei); }
/* Platzhalter-Stimme: Bleistift, gestrichelt, deutlich als leerer Platz erkennbar */
figure.zitat[data-platzhalter] {
  border: 2px dashed var(--bleistift); border-radius: 10px 6px 12px 7px; padding: 18px 20px 16px; background: rgba(255, 253, 247, 0.6);
}
figure.zitat[data-platzhalter] blockquote { color: var(--blei); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); }
figure.zitat[data-platzhalter] blockquote::before, figure.zitat[data-platzhalter] blockquote::after,
figure.zitat[data-platzhalter] blockquote p::before, figure.zitat[data-platzhalter] blockquote p::after { content: none; }
figure.zitat[data-platzhalter] figcaption { font-weight: 700; color: var(--tinte); }
figure.zitat[data-platzhalter]::before {
  content: 'reserviert'; content: 'reserviert' / '';
  position: absolute; right: 14px; top: -15px; padding: 4px 9px 3px;
  font: 800 0.72rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--filz-text); border: 2px solid currentColor; border-radius: 5px; background: var(--papier); rotate: 4deg;
}

/* 7.5 Hinweis: Zettel. Ab 1000 px in der Randspalte, sonst schräg im Text */
aside.hinweis {
  position: relative; margin: 2em 0 2.2em 0.6rem; padding: 22px 20px 16px; max-width: 32rem;
  background: var(--postit); color: var(--tinte);
  font: 600 1.42rem/1.24 var(--hand);
  rotate: var(--dreh, 0.8deg);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08), 0 16px 22px -14px rgba(60, 40, 0, 0.5);
}
aside.hinweis::before {
  content: ''; position: absolute; top: -11px; left: calc(50% - 34px); width: 68px; height: 22px; rotate: 3deg;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 6px, rgba(255, 255, 255, 0) 6px 12px), rgba(232, 214, 170, 0.8);
}
aside.hinweis > :last-child { margin-bottom: 0; }
aside.hinweis p { margin: 0 0 0.5em; }
aside.hinweis a { color: var(--kuli); }
.inhalt aside.hinweis:nth-of-type(even) { --dreh: -1deg; background: var(--db-postit-2); }
@media (min-width: 1000px) {
  .inhalt aside.hinweis {
    float: right; clear: right; width: var(--rand-spalte); max-width: none;
    margin: 0.2em calc(-1 * (var(--rand-luecke) + var(--rand-spalte))) 1.8em 0;
    font-size: 1.36rem;
  }
}

/* 7.6 Tabelle: Karteikarte mit Filzstift-Linie unter dem Kopf */
.tabelle {
  clear: right; margin: 1.8em 0 2.2em; max-width: var(--breit); width: auto;
  background: var(--db-karton); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 18px 30px -20px rgba(40, 25, 5, 0.5);
  overflow-x: auto;
}
@media (min-width: 1000px) { .inhalt .tabelle { width: var(--breit); max-width: none; } }
.tabelle table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.98rem; line-height: 1.5; }
.tabelle caption {
  caption-side: top; text-align: left; padding: 16px 18px 6px;
  font: 700 1.55rem/1.15 var(--hand); color: var(--kuli);
}
.tabelle th, .tabelle td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1.5px dashed var(--linie); }
.tabelle thead th {
  font-weight: 800; font-size: 0.92rem; letter-spacing: 0.02em; border-bottom: 0; padding-bottom: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C 50 2, 120 7, 199 3' fill='none' stroke='%23F48418' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% 7px no-repeat;
}
.tabelle tbody th { font-weight: 720; }
.tabelle tbody tr:last-child > * { border-bottom: 0; }
.tabelle tbody tr:nth-child(even) { background: rgba(245, 239, 226, 0.55); }
/* schmal und mit JavaScript (data-label): jede Zeile wird eine eigene kleine Karte */
@media (max-width: 759px) {
  .tabelle--karten { overflow: visible; background: none; box-shadow: none; }
  .tabelle--karten table, .tabelle--karten tbody, .tabelle--karten tr, .tabelle--karten th, .tabelle--karten td { display: block; width: auto; }
  .tabelle--karten caption { display: block; padding: 0 0 10px; }
  .tabelle--karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle--karten tbody tr {
    margin: 0 0 16px; padding: 12px 16px 6px; background: var(--db-karton);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 14px 24px -18px rgba(40, 25, 5, 0.5);
  }
  .tabelle--karten tbody tr:nth-child(even) { background: var(--db-karton); rotate: 0.4deg; }
  .tabelle--karten tbody th { padding: 4px 0 8px; border-bottom: 2px solid var(--filz); font-size: 1.05rem; }
  .tabelle--karten td { padding: 8px 0; border-bottom: 1.5px dashed var(--linie); }
  .tabelle--karten td:last-child { border-bottom: 0; }
  .tabelle--karten td[data-label]::before {
    content: attr(data-label); display: block; font: 600 1.15rem/1.1 var(--hand); color: var(--kuli); margin-bottom: 2px;
  }
}

/* 7.7 Case: eine Akte mit Reiter und Büroklammer */
.inhalt { counter-reset: akte; }
article.case {
  counter-increment: akte; clear: both; position: relative;
  margin: clamp(64px, 8vw, 96px) 0 clamp(64px, 8vw, 96px); padding: 40px clamp(18px, 3.4vw, 40px) 30px;
  background-color: var(--papier-hell);
  border-left: 7px solid var(--db-aktendeckel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 24px 40px -22px rgba(40, 25, 5, 0.55);
}
@media (min-width: 1000px) { .inhalt article.case { width: var(--breit); max-width: none; } }
/* Reiter oben links */
article.case::before {
  content: 'Akte ' counter(akte); content: 'Akte ' counter(akte) / '';
  position: absolute; left: -7px; top: -34px; height: 36px; padding: 6px 18px 0 16px;
  font: 700 1.3rem/1 var(--hand); color: var(--tinte); background: var(--db-aktendeckel); border-radius: 10px 14px 0 0;
}
/* Büroklammer */
article.case::after {
  content: ''; position: absolute; right: 18%; top: -18px; width: 22px; height: 56px; z-index: 3;
  border: 3px solid var(--db-metall); border-radius: 12px; rotate: 6deg;
  background: linear-gradient(var(--db-metall), var(--db-metall)) 50% 70% / 3px 60% no-repeat;
}
article.case > * { max-width: var(--mass); }
article.case > h2 { margin-top: 0; max-width: 26ch; }
article.case > h3 {
  margin: 1.5em 0 0.3em; font: 700 1.6rem/1 var(--hand); color: var(--kuli); letter-spacing: 0.01em;
}
article.case > h2 + h3 { margin-top: 0.6em; }
article.case figure.zitat[data-platzhalter] { margin-bottom: 0.4em; }
article.case > :last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
  /* Belege und Foto stehen in der Akte rechts neben dem Text */
  article.case dl.fakten--zettel {
    float: right; clear: right; width: calc(var(--rand-spalte) - 12px); grid-template-columns: minmax(0, 1fr);
    margin: 0.4em -0.5rem 1.6em 1.8rem; max-width: none;
  }
  article.case figure:not(.zitat), article.case img { margin-right: 0; width: calc(var(--rand-spalte) - 34px); margin-left: 1.8rem; }
}

/* 7.8 Handlungsaufforderung: Knopf, eingekreist mit dem Filzstift */
.cta { position: relative; margin: 2.2em 0 0.6em; padding: 12px 0 12px 6px; }
.knopf {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px 13px;
  background: var(--filz); color: var(--tinte); font: 800 1.05rem/1.25 var(--text); text-decoration: none; text-align: center;
  border: 2.5px solid var(--tinte); border-radius: 14px 10px 16px 9px / 10px 15px 9px 14px;
  box-shadow: 4px 5px 0 var(--tinte); rotate: -0.8deg; cursor: pointer;
  transition: translate var(--db-dauer-druck) var(--db-stufen-2), box-shadow var(--db-dauer-druck) var(--db-stufen-2), rotate var(--db-dauer-drehung) var(--db-stufen-2);
}
.knopf:hover { translate: -2px -2px; box-shadow: 6px 7px 0 var(--tinte); rotate: 0.4deg; text-decoration: none; background-color: var(--filz); }
.knopf:active { translate: 3px 4px; box-shadow: 1px 1px 0 var(--tinte); }
.knopf:disabled { cursor: progress; opacity: 0.75; translate: none; }
.cta__kringel { position: absolute; left: -12px; top: -4px; overflow: visible; pointer-events: none; }
.cta__kringel path { fill: none; stroke: var(--filz); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }

/* ---------- 8 FAQ, Verwandt, Extern, Stand ---------- */
.faq, .verwandt, .extern, .stand { clear: both; }
.faq { margin: clamp(56px, 8vw, 96px) 0 0; }
.faq > h2 { margin-bottom: 1.1em; }
/* Karteikarte: Zeilenabstand von Frage und Antwort ist genau eine Linie, damit die Schrift auf den Linien steht */
.faq__eintrag {
  --z: 1.75rem; --rand-l: clamp(30px, 5vw, 48px);
  position: relative; margin: 0 0 26px; padding: calc(var(--z) * 0.75) clamp(18px, 3vw, 26px) calc(var(--z) * 0.6) var(--rand-l);
  background-color: var(--db-karton);
  background-image: linear-gradient(90deg, transparent calc(var(--rand-l) - 12px), rgba(214, 72, 62, 0.45) calc(var(--rand-l) - 12px) calc(var(--rand-l) - 10px), transparent 0), linear-gradient(transparent calc(var(--z) - 1px), var(--zeile) calc(var(--z) - 1px));
  background-size: 100% 100%, 100% var(--z); background-position: 0 0, 0 calc(var(--z) * 0.75 - 6px);
  rotate: var(--dreh, -0.5deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 14px 26px -16px rgba(40, 25, 5, 0.45);
}
.faq__eintrag:nth-child(odd) { --dreh: 0.6deg; margin-left: 0.8rem; }
.faq__eintrag h3 { margin: 0; font: 650 1.7rem/var(--z) var(--hand); color: var(--kuli); }
.faq__antwort > :last-child { margin-bottom: 0; }
.faq__antwort p { font-size: 1rem; line-height: var(--z); margin: 0; }

.verwandt { margin-top: clamp(56px, 8vw, 88px); }
.blatt > .verwandt { max-width: var(--breit); }
.verwandt h2, .extern h2 { margin: 0 0 18px; font: 650 2.1rem/1.1 var(--hand); color: var(--kuli); rotate: -1deg; transform-origin: 0 50%; }
.verwandt ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 760px) { .verwandt ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verwandt li {
  position: relative; margin: 0; padding: 22px 20px 16px;
  background: var(--papier-hell); border-top: 6px solid var(--m, var(--gelb));
  rotate: var(--dreh, 0.5deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 12px 22px -14px rgba(40, 25, 5, 0.5);
  transition: translate var(--db-dauer-druck) var(--db-stufen-2), box-shadow var(--db-dauer-druck) var(--db-stufen-2);
}
.verwandt li:nth-child(3n+2) { --m: var(--rosa); --dreh: -0.7deg; }
.verwandt li:nth-child(3n) { --m: var(--gruen); --dreh: 0.3deg; }
.verwandt li:hover, .verwandt li:focus-within { translate: -2px -3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 4px 18px 26px -14px rgba(40, 25, 5, 0.55); }
.verwandt a {
  display: block; font-family: var(--serif); font-variation-settings: 'opsz' 36, 'SOFT' 60; font-weight: var(--db-gewicht-serif); font-size: 1.2rem; line-height: 1.2;
  color: var(--tinte); text-decoration: none; padding-right: 30px;
}
.verwandt a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.verwandt a::before {
  content: ''; position: absolute; right: 16px; top: 24px; width: 26px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M1 8 C 8 6, 15 9, 23 7 M18 2 L 24 7 L 18 12' fill='none' stroke='%23F48418' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.verwandt a:hover { text-decoration: underline; text-decoration-color: var(--filz); }
.verwandt a:focus-visible { outline: none; }
.verwandt li:has(a:focus-visible) { outline: 3px solid var(--kuli); outline-offset: 4px; }
.verwandt span { display: block; margin-top: 8px; font-size: 0.94rem; line-height: 1.5; color: var(--blei); }

.extern {
  position: relative; margin-top: 48px; padding: 22px 22px 16px; max-width: 30rem;
  background: var(--postit); rotate: -0.8deg;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08), 0 16px 22px -14px rgba(60, 40, 0, 0.5);
}
.extern h2 { font-size: 1.75rem; margin-bottom: 8px; color: var(--tinte); }
.extern ul { list-style: none; margin: 0; padding: 0; }
.extern li { margin: 0; }
/* Zeichen für den externen Link setzt build.mjs an jeden Link, der die Site verlässt (fuss.css) */
.extern a { display: inline-block; padding: 8px 0; min-height: 40px; font-weight: 700; }

.stand { margin: 56px 0 0; text-align: right; max-width: var(--breit); }
.stand__stempel {
  display: inline-block; padding: 7px 12px 6px; rotate: -4deg;
  font: 800 0.8rem/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--filz-text); border: 2.5px solid currentColor; border-radius: 6px; background: rgba(255, 253, 247, 0.7);
}
.stand__stempel time { letter-spacing: 0.06em; }
.stand__autor { display: block; margin-top: 12px; font-size: 0.95rem; color: var(--blei); }
.stand__autor a { font-weight: 700; }
.unterseite--fehler-404 .stand { display: none; }
/* Autorzeile nur, wo jemand etwas geschrieben hat, nicht unter Pflichtseiten und Danke */
:is(.unterseite--impressum, .unterseite--datenschutz, .unterseite--kontakt--danke) .stand__autor { display: none; }

/* ---------- 9 Inhaltsverzeichnis (seiten.js, nur mit Randspalte, steht neben dem Antwortblock) ---------- */
.seiteninhalt { display: none; }
@media (min-width: 1000px) {
  .seitenkopf { display: grid; grid-template-columns: minmax(0, var(--mass)) var(--rand-luecke) var(--rand-spalte); align-items: start; }
  .seitenkopf > * { grid-column: 1 / -1; justify-self: start; }
  .seitenkopf > .kicker { grid-row: 1; }
  .seitenkopf > h1 { grid-row: 2; }
  .seitenkopf > .seitenkopf__strich { grid-row: 3; }
  .seitenkopf > .steckbrief, .seitenkopf > .antwort { grid-row: 4; grid-column: 1; }
  .seitenkopf > .byline { grid-row: 5; grid-column: 1; }
  .seitenkopf:has(.seiteninhalt) h1 { max-width: min(21ch, calc(var(--mass) + var(--rand-luecke) - 16px)); }
  .seiteninhalt {
    display: block; grid-row: 2 / span 3; grid-column: 3; justify-self: stretch; margin: 10px 0 0; padding: 18px 18px 12px 34px;
    background-color: var(--db-karton);
    background-image: linear-gradient(90deg, transparent 22px, rgba(214, 72, 62, 0.45) 22px 24px, transparent 0), linear-gradient(var(--zeile) 1px, transparent 1px);
    background-size: 100% 100%, 100% 1.75em; background-position: 0 0, 0 0.9em;
    rotate: 0.6deg; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 16px 26px -18px rgba(40, 25, 5, 0.5);
    font-size: 0.9rem; line-height: 1.32;
  }
  .seiteninhalt__titel { margin: 0 0 8px; font: 700 1.45rem/1 var(--hand); color: var(--kuli); }
  .seiteninhalt ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
  .seiteninhalt li { counter-increment: toc; position: relative; margin: 0; padding: 3px 0 3px 1.6em; }
  .seiteninhalt li::before { content: counter(toc); position: absolute; left: 0; top: 2px; font: 700 1.2rem/1.2 var(--hand); color: var(--filz-text); }
  .seiteninhalt a { color: var(--tinte); text-decoration-color: rgba(30, 58, 138, 0.35); }
  .seiteninhalt a[aria-current] { font-weight: 750; text-decoration-color: var(--filz); text-decoration-thickness: 3px; }
}

/* ---------- 10 Formular ---------- */
.formular {
  position: relative; margin: clamp(48px, 7vw, 80px) 0; padding: 42px clamp(18px, 4vw, 40px) 30px;
  background-color: var(--db-karton);
  background-image: linear-gradient(rgba(214, 72, 62, 0.5), rgba(214, 72, 62, 0.5)); background-size: 100% 2px; background-position: 0 30px; background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 24px 40px -22px rgba(40, 25, 5, 0.55);
  rotate: -0.3deg;
}
.formular::before {
  content: ''; position: absolute; top: -13px; left: 36px; width: 96px; height: 26px; rotate: -5deg;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 6px, rgba(255, 255, 255, 0) 6px 12px), rgba(244, 132, 24, 0.75);
}
.formular__kicker { margin: 0 0 4px; font-size: 1.45rem; font-weight: 700; color: var(--filz-text); rotate: -2deg; transform-origin: 0 50%; }
.formular h2 { margin-bottom: 0.4em; }
.formular__einleitung { font-size: 1.08rem; }
.formular__pflicht { font-size: 0.95rem; color: var(--blei); }
.feld { margin: 0 0 1.35rem; }
.feld label { display: block; font-weight: 800; font-size: 1rem; margin-bottom: 2px; }
.feld__pflicht { color: var(--filz-text); font-weight: 800; }
.feld__hilfe { font-size: 0.92rem; line-height: 1.45; color: var(--blei); margin: 0 0 6px; }
.feld input, .feld select, .feld textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--papier-hell); color: var(--tinte); font-size: 1.05rem;
  border: 2px solid var(--tinte); border-radius: 9px 6px 10px 6px;
  box-shadow: inset 0 2px 0 rgba(21, 23, 31, 0.06);
}
.feld select { appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--papier-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2 C 6 6, 8 8, 10 10 C 12 8, 15 5, 18 2' fill='none' stroke='%2315171F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 18px 11px no-repeat;
}
.feld textarea { resize: vertical; min-height: 11rem; line-height: 1.55;
  background-image: linear-gradient(var(--zeile) 1px, transparent 1px); background-size: 100% 1.55em; background-attachment: local; background-position: 0 calc(10px + 1.5em);
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--kuli); outline-offset: 2px; }
.feld [aria-invalid='true'] { border-color: var(--rot-fehler); border-width: 3px; background-color: var(--db-fehler-grund); }
.feld__fehler {
  display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; color: var(--rot-fehler); font-weight: 750; font-size: 0.98rem; line-height: 1.4;
}
.feld__fehler::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.5' fill='none' stroke='%23A3261A' stroke-width='2'/%3E%3Cpath d='M9 4.5 L 9 10' stroke='%23A3261A' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='13.2' r='1.3' fill='%23A3261A'/%3E%3C/svg%3E") center / contain no-repeat;
}
.feld__fehler[hidden] { display: none; }
.feld--falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__meldung {
  margin: 0 0 1.6rem; padding: 16px 18px; border: 3px solid var(--rot-fehler); border-radius: 10px 7px 12px 8px;
  background: var(--db-meldung-grund); color: var(--db-meldung-text);
}
.formular__meldung:focus { outline: 3px solid var(--kuli); outline-offset: 3px; }
.formular__meldung-titel { margin: 0 0 4px; font: 700 1.5rem/1.1 var(--hand); color: var(--rot-fehler); }
.formular__meldung p { margin: 0 0 6px; font-weight: 650; }
.formular__meldung ul { margin: 6px 0 0; padding-left: 1.2em; }
.formular__meldung a { color: var(--db-meldung-text); font-weight: 700; }
.formular__liste { color: var(--rot-fehler); font-weight: 750; padding-left: 1.2em; margin-top: 12px; }
.formular__datenschutz { font-size: 0.94rem; line-height: 1.5; color: var(--blei); }
.formular__absenden { margin: 1.4rem 0 0.4rem; }
.formular__absenden .knopf { min-width: 14rem; }

/* Matomo-Opt-out auf /datenschutz/ (Markup erzeugt Matomo per JavaScript: p, input#trackVisits, label > strong > span).
   Kasten wie ein Formularfeld, Häkchen von Hand gezeichnet, Fokus wie überall, Fehlermeldung von Matomo in AA-Rot. */
#matomo-opt-out:not(:empty) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start;
  max-width: var(--mass); margin: 1.2rem 0 1.4rem; padding: 18px 18px 16px;
  background: var(--papier-hell); color: var(--tinte);
  border: 2px solid var(--tinte); border-radius: 10px 7px 12px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 14px 24px -18px rgba(40, 25, 5, 0.45);
}
#matomo-opt-out p { grid-column: 1 / -1; margin: 0 0 10px; font-size: 0.98rem; line-height: 1.5; color: var(--blei); }
#matomo-opt-out p[style] { color: var(--rot-fehler) !important; }
#matomo-opt-out input[type='checkbox'] {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center;
  width: 30px; height: 30px; margin: 1px 0 0; cursor: pointer;
  background: var(--papier-hell); border: 2px solid var(--tinte); border-radius: 7px 5px 8px 5px;
}
#matomo-opt-out input[type='checkbox']::before {
  content: ''; width: 20px; height: 16px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 8.5 C 4 10, 6 12, 7.5 14 C 10 9, 13.5 5, 18.5 2' fill='none' stroke='%231E3A8A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#matomo-opt-out input[type='checkbox']:checked { background: var(--gelb); }
#matomo-opt-out input[type='checkbox']:checked::before { opacity: 1; }
#matomo-opt-out input[type='checkbox']:focus-visible { outline: 3px solid var(--kuli); outline-offset: 3px; }
#matomo-opt-out label { cursor: pointer; font-size: 1rem; line-height: 1.45; padding-top: 4px; }
#matomo-opt-out label strong { font-weight: 750; }
@media (forced-colors: active) {
  #matomo-opt-out:not(:empty) { border-color: CanvasText; }
  #matomo-opt-out input[type='checkbox'] { appearance: auto; -webkit-appearance: auto; }
  #matomo-opt-out input[type='checkbox']::before { display: none; }
}
.formular__direkt { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 2px dashed var(--linie); }
.formular__direkt .hand { font-size: 1.45rem; font-weight: 700; color: var(--kuli); margin-right: 6px; }
@media (min-width: 1000px) { .inhalt .formular { width: calc(var(--mass) + min(2rem, var(--rand-luecke) - 12px)); max-width: none; } }
/* Fehlerseite des PHP-Skripts (ohne Kopf und Fuß, ohne JavaScript) */
.anfrage-fehler { padding-top: 48px; margin-top: 10px; }
.anfrage-fehler h1 { font-family: var(--serif); font-weight: 640; font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.05; margin: 0 0 0.4em; }
.anfrage-fehler .kicker { display: block; }

/* ---------- 11 Bewegung ---------- */
/* Grundsatz: Fließtext bewegt sich nie. Es bewegen sich Striche, Zettel, Fotos und Nummern,
   jeweils einmal beim Erscheinen, kurz und in Stufen wie Stop-Motion. Danach ist Ruhe.
   Vorzustände (.kommt-noch) setzt nur seiten.js und nur in der bewegten Fassung. */

/* Seitenkopf beim Laden: Kicker wird geschrieben, der Stift zieht den Strich und legt sich daneben */
/* Ende leicht über den Rand hinaus: Handschrift ragt mit Schwung und Neigung über ihre Box (sonst fehlt das letzte l) */
@keyframes schreiben { from { clip-path: inset(-30% 100% -30% -3%); } to { clip-path: inset(-30% -8% -30% -3%); } }
@keyframes zeichnen { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }
@keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }
@keyframes stift-legen {
  0% { opacity: 0; translate: -200px 18px; rotate: 30deg; }
  30% { opacity: 1; translate: -120px 10px; rotate: 34deg; }
  60% { translate: -40px 4px; rotate: 40deg; }
  85% { translate: 0 -3px; rotate: 62deg; }
  100% { opacity: 1; translate: 0 0; rotate: 58deg; }
}
@keyframes zettel-landen {
  0% { opacity: 0; translate: 24px -30px; rotate: calc(var(--dreh, 0deg) + 9deg); }
  20% { opacity: 1; translate: 16px -18px; rotate: calc(var(--dreh, 0deg) + 6deg); }
  45% { translate: 6px -6px; rotate: calc(var(--dreh, 0deg) + 2.5deg); }
  70% { translate: -1px 2px; rotate: calc(var(--dreh, 0deg) - 0.9deg); }
  85% { translate: 0.6px -0.5px; rotate: calc(var(--dreh, 0deg) + 0.35deg); }
  100% { opacity: 1; translate: 0 0; rotate: var(--dreh, 0deg); }
}
@keyframes foto-landen {
  0% { opacity: 0; translate: 40px -60px; rotate: calc(var(--dreh, 0deg) + 14deg); scale: 1.12; }
  20% { opacity: 1; translate: 26px -38px; rotate: calc(var(--dreh, 0deg) + 9deg); scale: 1.08; }
  45% { translate: 10px -12px; rotate: calc(var(--dreh, 0deg) + 3deg); scale: 1.02; }
  70% { translate: -2px 3px; rotate: calc(var(--dreh, 0deg) - 1.2deg); scale: 1; }
  86% { translate: 1px -1px; rotate: calc(var(--dreh, 0deg) + 0.4deg); }
  100% { opacity: 1; translate: 0 0; rotate: var(--dreh, 0deg); scale: 1; }
}
@keyframes stempeln {
  0% { opacity: 0; scale: 1.7; }
  34% { opacity: 1; scale: 1.3; }
  67% { scale: 0.94; }
  100% { opacity: 1; scale: 1; }
}

.bewegung-an .kicker:not(:empty) { animation: schreiben var(--db-dauer-schreiben) var(--db-stufen-schreiben) 0.08s both; }
.bewegung-an .seitenkopf__linie path { stroke-dasharray: 1 2; animation: zeichnen 0.5s steps(9, end) 0.42s both; }
.bewegung-an .seitenkopf__linie path + path { animation-delay: 0.9s; animation-duration: 0.3s; }
.bewegung-an .seitenkopf__stift { animation: stift-legen var(--db-dauer-landen) var(--db-stufen-1) 0.2s both; }
.bewegung-an .steckbrief { animation: zettel-landen 0.5s steps(1, end) 0.25s both; }
.bewegung-an .steckbrief__etikett { animation: schreiben 0.45s steps(10, end) 0.7s both; }

/* beim Scrollen, einmal (seiten.js setzt .kommt-noch und tauscht beim Erscheinen gegen .kommt) */
.bewegung-an h2.kommt-noch .kritzel path, .bewegung-an .cta.kommt-noch .cta__kringel path { stroke-dashoffset: 1.01; }
.bewegung-an h2.kommt .kritzel path { animation: zeichnen 0.48s steps(8, end) 0.1s both; }
.bewegung-an .cta.kommt .cta__kringel path { animation: zeichnen 0.6s steps(10, end) 0.15s both; }
.bewegung-an .kommt-noch:is(aside.hinweis, .fakten__paar, .faq__eintrag, .verwandt li, .seiteninhalt, .extern) { opacity: 0; }
.bewegung-an .kommt:is(aside.hinweis, .fakten__paar, .faq__eintrag, .verwandt li, .seiteninhalt, .extern) { animation: zettel-landen 0.56s steps(1, end) var(--verz, 0s) both; }
/* Wer per Tastatur ankommt, bevor der Zettel gelandet ist, sieht ihn sofort (kein unsichtbarer Fokus) */
html.bewegung-an :is(aside.hinweis, .fakten__paar, .faq__eintrag, .verwandt li, .seiteninhalt, .extern):focus-within { opacity: 1; animation: none; }
.bewegung-an .kommt-noch:is(.inhalt img, .inhalt figure:not(.zitat)) { opacity: 0; }
.bewegung-an .kommt:is(.inhalt img, .inhalt figure:not(.zitat)) { animation: foto-landen var(--db-dauer-landen) var(--db-stufen-1) var(--verz, 0s) both; }
.bewegung-an .fakten__paar.kommt dt { animation: schreiben 0.5s steps(10, end) calc(var(--verz, 0s) + 0.3s) both; }
.bewegung-an ol.schritte.kommt-noch > li::before { opacity: 0; }
.bewegung-an ol.schritte.kommt > li::before { animation: stempeln 0.3s steps(1, end) calc(var(--i, 0) * 0.16s) both; }
.bewegung-an article.case.kommt-noch::after { opacity: 0; }
.bewegung-an article.case.kommt::after { animation: stempeln 0.28s steps(1, end) 0.15s both; }

/* ---------- 12 Ruhige Fassung, Einstellungen, Druck ---------- */
/* Schalter oder Systemeinstellung: gleicher Inhalt, alles im Endzustand, nichts schief */
.bewegung-aus *, .bewegung-aus *::before, .bewegung-aus *::after { animation: none !important; transition: none !important; }
.bewegung-aus .kicker, .bewegung-aus .steckbrief, .bewegung-aus .steckbrief__etikett,
.bewegung-aus .inhalt img, .bewegung-aus .inhalt figure:not(.zitat), .bewegung-aus aside.hinweis, .bewegung-aus .fakten__paar,
.bewegung-aus .faq__eintrag, .bewegung-aus .verwandt li, .bewegung-aus .extern, .bewegung-aus .formular, .bewegung-aus .knopf,
.bewegung-aus .seiteninhalt, .bewegung-aus .stand__stempel, .bewegung-aus .verwandt h2 { rotate: none; }
.bewegung-aus .seitenkopf__stift { rotate: 58deg; }
@media (prefers-reduced-motion: reduce) {
  html:not(.bewegung-an) *, html:not(.bewegung-an) *::before, html:not(.bewegung-an) *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .knopf, .bewegung-knopf, .steckbrief, aside.hinweis, .fakten__paar, .faq__eintrag, .verwandt li, article.case, .formular { border: 2px solid CanvasText; }
  ul > li::before { background: CanvasText; }
}
@media print {
  .kopfzeile, .fuss, .formular, .sprung, .seiteninhalt, .seitenkopf__strich, .blatt::after, .kritzel, .cta__kringel { display: none !important; }
  body, .blatt { background: #fff; box-shadow: none; padding: 0; }
  .blatt::before { display: none; }
  * { rotate: none !important; }
  a { color: inherit; }
  /* Was beim Scrollen noch erscheinen sollte, gehört aufs Papier */
  .kommt-noch, .kommt { opacity: 1 !important; animation: none !important; }
  ol.schritte.kommt-noch > li::before, article.case.kommt-noch::after, ol.schritte.kommt > li::before, article.case.kommt::after { opacity: 1 !important; animation: none !important; }
}