@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("schrift/archivo-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("schrift/archivo-latin-ext.woff2") format("woff2");
  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-weight: 400 700;
  font-display: swap;
  src: url("schrift/caveat-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("schrift/caveat-latin-ext.woff2") format("woff2");
  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: "Martian Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("schrift/martian-mono-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("schrift/martian-mono-latin-ext.woff2") format("woff2");
  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;
}

:root {
  --papier: #eef1f2;
  --blatt: #ffffff;
  --blatt-leise: #f5f7f8;
  --tinte: #15181c;
  --tinte-leise: #5f686f;
  --kuli: #23344e;
  --rot: #cf1f26;
  --rot-wash: #fbeceb;
  --linie: #dee3e6;
  --linie-stark: #b6bfc5;
  --eltern: #1f5c48;
  --schule: #cf1f26;
  --behoerde: #2f5470;
  --mark: #ffe9a8;
  --gelb: #b0821a;
  --auf-mark: #15181c;
  --auf-rot: #ffffff;
  --grotesk: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rand: 16rem;
}

/* Hell ist die Grundeinstellung, fuer alle und unabhaengig vom Betriebssystem.
   Dunkel gilt nur nach ausdruecklicher Wahl im Seitenkopf; thema.js setzt
   dafuer data-thema auf der Wurzel und merkt sich die Wahl lokal.
   Ohne JavaScript bleibt es bei Hell.
   figuren-einfaerben.py nimmt dieselben Werte fuer die Zeichnungen. */
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --papier: #0d0f12;
  --blatt: #171a1f;
  --blatt-leise: #1d2126;
  --tinte: #e7eaed;
  --tinte-leise: #98a1a9;
  --kuli: #a3b8dc;
  --rot: #ff5147;
  --rot-wash: #35191a;
  --linie: #282d33;
  --linie-stark: #3f474f;
  --eltern: #6fb99f;
  --schule: #ff5147;
  --behoerde: #86accb;
  --mark: #4a3d1e;
  --gelb: #e0b24a;
  --auf-mark: #ffe9a8;
  --auf-rot: #15181c;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-variation-settings: "wdth" 100;
  font-size: 1.0125rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--mark);
  color: var(--auf-mark);
}

a {
  color: var(--tinte);
  text-decoration-color: var(--rot);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--rot);
  text-decoration-thickness: 2.5px;
}

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

strong, b {
  font-weight: 600;
}

.shell {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 2rem;
  background: var(--blatt);
  border-left: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--blatt);
  border-bottom: 2.5px solid var(--tinte);
}

.site-head .shell {
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.hauptzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  padding: 0.7rem 0 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Die Marke ist der Schluessel aus dem Wegdiagramm. Sie nimmt ihr Rot ueber
   currentColor aus .wordmark, damit sie im hellen wie im dunklen Blatt sitzt. */
.wordmark .logo-zeichen {
  flex: none;
  width: 1.06rem;
  height: 1.06rem;
  display: block;
  color: var(--rot);
}

.wordmark span {
  color: var(--rot);
}

.site-head nav {
  display: flex;
  flex-wrap: wrap;
}

.site-head nav a {
  text-decoration: none;
}

.site-head nav.haupt {
  flex: 1 1 100%;
  order: 3;
  justify-content: flex-start;
  gap: 0 1.15rem;
  margin-top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.site-head nav.haupt a.tab {
  color: var(--tinte-leise);
  padding: 0.62rem 0;
  border-bottom: 2.5px solid transparent;
}

.site-head nav.haupt a.tab:hover {
  color: var(--tinte);
}

/* Technische Bezeichner im Fliesstext, etwa Namen von Speicherschluesseln. */
.mono {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: 0.02em;
}

/* Nummerierte Antragspunkte im Volltext eines Schreibens. Sie stehen nur dort,
   wo das Original selbst eine Liste enthaelt, etwa im Antrag nach dem HUIG. */
.volltext .antragspunkte {
  margin: 0.8rem 0;
  padding-left: 1.9rem;
}

.volltext .antragspunkte li {
  margin-top: 0.55rem;
  padding-left: 0.35rem;
}

/* Zitate im Abschnitt "Was geschehen ist" stehen frei im Fliesstext, nicht in
   einer Karte. Sie brauchen deshalb die Breite und den Abstand des Fliesstextes. */
#eskalation blockquote {
  max-width: 64ch;
}

#eskalation .beleg {
  margin: 0.4rem 0 1.7rem;
}

/* Standkarte. Sitzt unter dem Einstieg der Startseite und sagt in drei Zeilen,
   was zuletzt geschehen ist. Sie ersetzt den Abschnitt weiter unten nicht,
   sondern zeigt nur, dass es ihn gibt und dass er sich bewegt. */
.geloest {
  max-width: 72ch;
  margin: 0 0 2.4rem;
  padding: 1.35rem 1.6rem 1.5rem;
  border: 2.5px solid var(--eltern);
}

.geloest .marke {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eltern);
}

.geloest h2 {
  margin: 0.45rem 0 0.9rem;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  color: var(--eltern);
}

.geloest p {
  max-width: 64ch;
  margin: 0.75rem 0 0;
  line-height: 1.55;
}

.geloest a {
  font-weight: 600;
}

.standkarte {
  margin: 0 0 2.6rem;
  padding: 1.2rem 0 0;
  border-top: 2.5px solid var(--tinte);
}

.standkarte .marke {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eltern);
}

.standkarte ul {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 70ch;
}

.standkarte li {
  display: flex;
  gap: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.95rem;
  line-height: 1.5;
}

.standkarte li b {
  flex: none;
  padding-top: 0.12rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tinte-leise);
}

.standkarte .ladezeile {
  margin-top: 1.1rem;
}

@media (max-width: 620px) {
  .standkarte li {
    display: block;
  }
  .standkarte li b {
    display: block;
    margin-bottom: 0.15rem;
  }
}

/* Helden des Alltags. Karten, die eine Handlung festhalten, kein Portrait:
   oben die Rolle, dann was getan wurde, unten warum das zaehlt. */
.helden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1.7rem 0 0;
  border-top: 2.5px solid var(--tinte);
}

.helden article {
  padding: 1.4rem 1.6rem 1.5rem 0;
  border-bottom: 1px solid var(--linie);
}

/* Die Trennlinie gehoert an die rechte Spalte. Frueher stand sie an jeder
   Karte ausser der ersten, dadurch war jede zweite Karte links eingerueckt,
   als steckte sie in einem Unterkasten. */
.helden article:nth-child(even) {
  padding-left: 1.6rem;
  border-left: 1px solid var(--linie);
}

.helden .rolle {
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--eltern);
}

.helden .rolle span {
  display: block;
  margin-top: 0.25rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.03em;
  color: var(--tinte-leise);
}

.helden h3 {
  margin: 0.55rem 0 0.6rem;
  font-size: 1.12rem;
  line-height: 1.25;
  max-width: 34ch;
}

.helden p {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.helden .warum {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;
  color: var(--tinte-leise);
}

.helden blockquote {
  margin: 0.9rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--eltern);
}

.helden blockquote p {
  margin: 0;
  color: var(--kuli);
}

.helden blockquote footer {
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--tinte-leise);
}

@media (max-width: 46rem) {
  .helden {
    grid-template-columns: minmax(0, 1fr);
  }
  .helden article,
  .helden article:nth-child(even) {
    padding: 1.3rem 0 1.4rem;
    border-left: 0;
  }
}

@media print {
  .helden {
    grid-template-columns: 1fr;
  }
}

/* Zeichnungen aus dem Flyer, in die Farben der Seite gebracht.
   Sie sind Beiwerk, nie Beleg, und stehen deshalb nur auf den Seiten, die
   erklaeren, nie auf Quellen und Presse. */
.figur {
  display: block;
  flex: none;
}

.figur img {
  display: block;
  width: 100%;
  height: auto;
}

/* Die Zeichnung liegt in zwei Fassungen vor, weil eine Kontur in Tinte auf
   dem dunklen Blatt (#171a1f) unsichtbar waere. figuren-einfaerben.py erzeugt
   beide aus derselben Rohfassung. Ohne ausdrueckliche Wahl entscheidet das
   Betriebssystem, sonst schlaegt data-thema die Systemvorgabe. */
.figur .dunkel {
  display: none;
}

:root[data-thema="dunkel"] .figur .hell { display: none; }
:root[data-thema="dunkel"] .figur .dunkel { display: block; }

/* Die Figur nimmt nie die volle Breite. Sie steht neben dem Text, der Text
   bleibt die Hauptsache. Reisst der Platz ab, faellt sie unter den Text. */
.slogan-reihe,
.hinweis-reihe,
.einstieg-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 2.2rem;
}

.slogan-reihe .figur { width: 12rem; margin-bottom: -0.3rem; }
.hinweis-reihe { align-items: center; margin-top: 1.4rem; }
.hinweis-reihe .hinweis { margin-top: 0; }
.hinweis-reihe .figur { width: 10rem; }

/* Auf der Schuelerseite steht die Figur neben dem gesamten Einstieg,
   nicht neben zwei Saetzen. Sonst bestimmt ihre Hoehe die Zeilenhoehe und
   ueber dem Text entsteht ein leeres Feld. */
.einstieg-reihe { align-items: end; }
.einstieg-text > :first-child { margin-top: 0; }
.einstieg-reihe .figur { width: 10rem; margin-bottom: 0.2rem; }
/* Zwei Figuren nebeneinander brauchen mehr Breite als eine. */
.einstieg-reihe .figur.breit { width: 15rem; }

@media (max-width: 860px) {
  .slogan-reihe .figur { width: 9rem; }
  .hinweis-reihe .figur { width: 7.5rem; }
  .einstieg-reihe .figur { width: 8rem; }
}

@media (max-width: 620px) {
  .slogan-reihe,
  .hinweis-reihe,
  .einstieg-reihe {
    grid-template-columns: minmax(0, 1fr);
  }
  .slogan-reihe .figur,
  .hinweis-reihe .figur,
  .einstieg-reihe .figur {
    width: 6rem;
    margin: 0.6rem 0 0 auto;
  }
  /* Die breite Fassung zeigt zwei Figuren und braucht etwas mehr, darf dem
     Text auf dem Telefon aber trotzdem nicht die Seite wegnehmen. */
  .einstieg-reihe .figur.breit {
    width: 9rem;
  }
}

@media print {
  .figur { display: none; }
}

/* Werkzeuge am rechten Rand: Darstellung umschalten und der Kanal.
   Beides sind keine Seiten dieser Website, deshalb stehen sie abgesetzt
   hinter einer Haarlinie und tragen nur ihr Zeichen. */
.werkzeuge {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.werkzeug {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1.5px solid var(--linie-stark);
  background: none;
  color: var(--tinte-leise);
  cursor: pointer;
}

.werkzeug svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  fill: currentColor;
}

.werkzeug:hover {
  border-color: var(--tinte);
  color: var(--tinte);
}

/* Der Kanal fuehrt von der Seite weg. Das kleine Pfeilzeichen sagt das,
   bevor jemand klickt. */
.werkzeug.kanal {
  border-color: var(--rot);
  color: var(--rot);
}

.werkzeug.kanal:hover {
  background: var(--rot);
  color: var(--auf-rot);
}

.werkzeug.kanal .raus {
  position: absolute;
  right: -0.34rem;
  top: -0.34rem;
  width: 0.62rem;
  height: 0.62rem;
  padding: 0.1rem;
  background: var(--blatt);
  border: 1px solid currentColor;
  fill: none;
}

.werkzeug.thema .sonne { display: none; }
:root[data-thema="dunkel"] .werkzeug.thema .mond { display: none; }
:root[data-thema="dunkel"] .werkzeug.thema .sonne { display: block; }

/* Nur fuer Vorleseprogramme, im Bild unsichtbar. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-head nav.haupt a.tab.aktiv {
  color: var(--rot);
  border-bottom-color: var(--rot);
}

.hero {
  padding: 3rem 0 2.8rem;
}

.hero .stand,
.hero-klein .stand {
  display: block;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--linie);
  color: var(--tinte-leise);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: clamp(1.6rem, 5.4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  max-width: 21ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--rot);
}

.durch {
  background-image: linear-gradient(var(--rot), var(--rot));
  background-repeat: no-repeat;
  background-position: 0 0.56em;
  background-size: 100% 0.09em;
}

.hero .durch {
  background-position: 0 0.53em;
  background-size: 100% 0.07em;
}

.hero .slogan {
  margin-top: 1.9rem;
  max-width: 50ch;
  font-size: clamp(1.06rem, 1.7vw, 1.24rem);
  line-height: 1.45;
  font-weight: 500;
  border-left: 3px solid var(--rot);
  padding-left: 1.1rem;
}

.hero > .prose,
.hero-klein > .prose {
  margin-top: 1.6rem;
}

.hero-melden h1 {
  font-size: clamp(1.6rem, 4.6vw, 3rem);
  max-width: 24ch;
}

.hero-unten {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1rem 3.5rem;
  align-items: start;
}

.hero .lede p {
  font-size: 1.06rem;
  line-height: 1.52;
  max-width: 58ch;
}

.hero .lede p + p {
  margin-top: 0.8rem;
}

.hero .fussnote {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--tinte-leise);
  border-top: 1px solid var(--linie);
  padding-top: 0.85rem;
}

main section {
  padding: 2.6rem 0 3.2rem;
  border-top: 2.5px solid var(--tinte);
}

main section > h2 {
  margin-bottom: 1.5rem;
}

h2 {
  font-variation-settings: "wdth" 108, "wght" 800;
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 20ch;
}

h3 {
  font-variation-settings: "wdth" 100, "wght" 650;
  font-size: 1.08rem;
  line-height: 1.32;
  margin: 1.7rem 0 0.5rem;
  letter-spacing: -0.008em;
}

.prose {
  max-width: 64ch;
}

.prose p + p,
p + p {
  margin-top: 0.85rem;
}

.hinweis {
  max-width: 64ch;
  margin: 1.9rem 0 0;
  padding: 1.05rem 1.25rem;
  background: var(--blatt-leise);
  border-left: 3px solid var(--tinte);
  font-size: 0.95rem;
}

.hinweis a {
  font-weight: 600;
}

.lede {
  max-width: 64ch;
}

.kernpunkte {
  list-style: none;
  counter-reset: kern;
  margin-top: 1.6rem;
  border-top: 1px solid var(--linie-stark);
}

.kernpunkte > li {
  counter-increment: kern;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--linie);
}

.kernpunkte > li::before {
  content: counter(kern);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--rot);
}

.kernpunkte strong {
  display: block;
  font-variation-settings: "wght" 650;
  font-size: 1.06rem;
  line-height: 1.32;
  margin-bottom: 0.4rem;
}

.kernpunkte li > div {
  max-width: 68ch;
}

.beleg {
  display: block;
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--linie-stark);
  font-family: var(--mono);
  font-size: 0.63rem;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--tinte-leise);
}

.beleg a {
  color: var(--rot);
}

blockquote {
  margin: 0.9rem 0;
  padding-left: 1.05rem;
  border-left: 2px solid var(--linie-stark);
  color: var(--kuli);
}

blockquote footer {
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.03em;
  color: var(--tinte-leise);
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  margin: 1.3rem 0 1.8rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.legende span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.punkt {
  width: 0.6rem;
  height: 0.6rem;
  display: inline-block;
}

.punkt.eltern { background: var(--eltern); }
.punkt.schule { background: var(--schule); }
.punkt.behoerde { background: var(--behoerde); }

.timeline {
  list-style: none;
  border-top: 1px solid var(--linie-stark);
}

.timeline > li {
  position: relative;
  padding: 1.4rem 0 1.5rem 1.35rem;
  border-bottom: 1px solid var(--linie);
}

.timeline > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.75rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--tinte-leise);
}

.timeline > li.eltern::before { background: var(--eltern); }
.timeline > li.schule::before { background: var(--schule); }
.timeline > li.behoerde::before { background: var(--behoerde); }

.timeline .kopf,
.dokument .kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.timeline .kopf .eid,
.dokument .kopf .eid {
  font-weight: 700;
  color: var(--rot);
}

.timeline h3 {
  margin: 0.4rem 0 0.4rem;
  font-size: 1.1rem;
  max-width: 54ch;
}

.timeline .weg,
.dokument .weg {
  font-family: var(--mono);
  font-size: 0.63rem;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--tinte-leise);
  margin-bottom: 0.55rem;
  max-width: 70ch;
}

.timeline .weg b,
.dokument .weg b {
  color: var(--tinte);
  font-weight: 700;
}

.timeline > li > p:not(.kopf):not(.weg):not(.quelle-link) {
  max-width: 68ch;
}

.quelle-link {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quelle-link a {
  color: var(--rot);
  font-weight: 700;
}

details.mehr {
  margin-top: 1.6rem;
}

details.mehr > summary {
  display: inline-block;
  list-style: none;
  padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--tinte);
  background: var(--blatt);
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}

details.mehr > summary::-webkit-details-marker {
  display: none;
}

details.mehr > summary:hover {
  background: var(--tinte);
  color: var(--blatt);
}

details.mehr[open] {
  margin-top: 0;
}

details.mehr[open] > summary {
  display: none;
}

.dokumente {
  counter-reset: blatt;
  border-top: 1px solid var(--linie-stark);
}

.dokument {
  counter-increment: blatt;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem;
  column-gap: 1.5rem;
  align-items: start;
  padding: 1.5rem 0 1.7rem;
  border-bottom: 1px solid var(--linie);
}

.dokument > * {
  grid-column: 1;
}

.dokument::after {
  content: "Blatt " counter(blatt);
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  text-align: right;
}

.dokument .kopf .eid::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  background: var(--tinte-leise);
}

.dokument.eltern .kopf .eid::before { background: var(--eltern); }
.dokument.schule .kopf .eid::before { background: var(--schule); }
.dokument.behoerde .kopf .eid::before { background: var(--behoerde); }

.dokument h3 {
  margin: 0.4rem 0 0.45rem;
  font-size: 1.1rem;
  max-width: 54ch;
}

.volltext {
  margin-top: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--blatt-leise);
  border-left: 2px solid var(--linie-stark);
  font-size: 0.94rem;
  color: var(--kuli);
  max-width: 70ch;
}

.volltext .redigiert-hinweis {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--tinte-leise);
}

.volltext p + p {
  margin-top: 0.7rem;
}

.volltext ul,
.volltext ol {
  margin: 0.7rem 0 0.7rem 1.2rem;
}

.volltext li + li {
  margin-top: 0.35rem;
}

.register {
  list-style: none;
  margin-top: 1.2rem;
  border-top: 1px solid var(--linie-stark);
  max-width: 70ch;
}

.register li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.93rem;
  color: var(--tinte-leise);
}

.hero-klein {
  padding: 2.6rem 0 2.2rem;
  border-bottom: 1px solid var(--linie);
}

.hero-klein h1 {
  font-variation-settings: "wdth" 110, "wght" 800;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 18ch;
}

.hero-klein h1 em {
  font-style: normal;
  color: var(--rot);
}

.hero-klein .prose {
  margin-top: 1.3rem;
}

.hero-klein .hinweis {
  max-width: 56ch;
}

.widerspruch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  column-gap: 1.5rem;
  margin: 1.5rem 0 0;
  border-top: 2.5px solid var(--tinte);
}

.widerspruch .etikett {
  grid-column: 1 / -1;
  padding: 0.7rem 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.widerspruch .paar {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  align-items: start;
  padding: 0 2rem 1.4rem 0;
  border-right: 2.5px solid var(--rot);
}

.widerspruch .paar > div + div {
  border-left: 1px solid var(--linie);
  padding-left: 2rem;
}

.widerspruch blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--kuli);
  font-size: 1rem;
  line-height: 1.45;
}

.widerspruch .paar .beleg {
  margin-top: 0.55rem;
}

.widerspruch::after {
  content: attr(data-mark);
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-family: var(--hand);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 0.75;
  color: var(--rot);
  transform: rotate(-7deg);
  transform-origin: left top;
}

.widerspruch .notiz {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 1.1rem;
  padding: 0 0 1.2rem 1.1rem;
  border-left: 3px solid var(--rot);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--tinte-leise);
  max-width: 74ch;
}

.widerspruch .notiz a {
  color: var(--rot);
}

.widerspruch .karten-fuss {
  grid-column: 1 / -1;
}

.korrekturzeichen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  margin: 1.6rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
}

.korrekturzeichen span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.korrekturzeichen b {
  font-family: var(--hand);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 0.8;
  color: var(--rot);
}

.gesetze {
  margin-top: 0.5rem;
  border-top: 1px solid var(--linie-stark);
}

.gesetze dt {
  padding-top: 0.95rem;
  font-variation-settings: "wght" 650;
  font-size: 1rem;
}

.gesetze dd {
  padding: 0.3rem 0 0.95rem;
  border-bottom: 1px solid var(--linie);
  color: var(--tinte-leise);
  font-size: 0.94rem;
  max-width: 74ch;
}

.gesetze dd .quelle {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.rollen {
  margin-top: 1.5rem;
  border-top: 1px solid var(--linie-stark);
}

.rollen article {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.2rem 2rem;
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px solid var(--linie);
}

.rollen .amt {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rot);
  padding-top: 0.2rem;
}

.rollen .wer {
  font-variation-settings: "wght" 650;
}

.rollen .kontakt {
  font-family: var(--mono);
  font-size: 0.63rem;
  line-height: 1.65;
  color: var(--tinte-leise);
  overflow-wrap: anywhere;
}

ol.schritte {
  list-style: none;
  counter-reset: schritt;
  margin-top: 1.5rem;
  border-top: 1px solid var(--linie-stark);
}

ol.schritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--linie);
}

ol.schritte li::before {
  content: counter(schritt);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--rot);
}

ol.schritte strong {
  display: block;
  font-variation-settings: "wght" 650;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

ol.schritte p {
  font-size: 0.94rem;
  color: var(--tinte-leise);
  max-width: 68ch;
}

.faelle {
  margin-top: 1.5rem;
  border-top: 1px solid var(--linie-stark);
}

.fall {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--linie);
}

.fall svg {
  width: 2.1rem;
  height: 2.1rem;
  fill: none;
  stroke: var(--rot);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 0.15rem;
}

.fall h3 {
  grid-column: 2;
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  max-width: 46ch;
}

.fall ol {
  grid-column: 2;
  margin: 0 0 0 1.1rem;
  font-size: 0.97rem;
  max-width: 66ch;
}

.fall ol li + li {
  margin-top: 0.5rem;
}

.fall p {
  grid-column: 2;
  margin-top: 0.7rem;
  font-size: 0.92rem;
  color: var(--tinte-leise);
  max-width: 66ch;
}

.redigiert {
  background: var(--mark);
  color: var(--auf-mark);
  padding: 0 0.25em;
  font-style: normal;
}

.schutzliste {
  list-style: none;
  counter-reset: schutz;
  margin: 1.5rem 0 0;
  max-width: 72ch;
  border-top: 1px solid var(--linie-stark);
}

.schutzliste li {
  counter-increment: schutz;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.95rem;
}

.schutzliste li::before {
  content: counter(schutz);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9rem;
  padding-top: 0.15rem;
  color: var(--rot);
}

.schutzliste strong {
  display: block;
  margin-bottom: 0.2rem;
  font-variation-settings: "wght" 650;
  font-size: 1.02rem;
}

.marke {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.14rem 0.4rem;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.12em;
}

.marke.pflicht {
  background: var(--rot);
  color: var(--auf-rot);
}

.marke.frei {
  background: var(--linie);
  color: var(--tinte-leise);
}

.knopf {
  display: inline-block;
  border: 0;
  cursor: pointer;
  margin: 1.5rem 0 0;
  padding: 0.85rem 1.7rem;
  background: var(--rot);
  color: var(--auf-rot);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.knopf:hover {
  background: var(--tinte);
  color: var(--blatt);
}

.knopf.leise {
  margin-top: 0;
  padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--tinte);
  background: none;
  color: var(--tinte);
  font-size: 0.63rem;
}

.knopf.leise:hover {
  background: var(--tinte);
  color: var(--blatt);
}

.knopf-gross {
  margin-top: 0;
  padding: 1rem 2.1rem;
  font-size: 0.78rem;
}

.site-foot {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.4rem 2rem 3rem;
  background: var(--blatt);
  border-left: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  border-top: 2.5px solid var(--tinte);
  font-size: 0.88rem;
  color: var(--tinte-leise);
}

.site-foot h2 {
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 0.68rem;
  font-family: var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rot);
  margin: 1.7rem 0 0.45rem;
  max-width: none;
}

.site-foot h2:first-child {
  margin-top: 0;
}

.site-foot p {
  max-width: 78ch;
}

.site-foot p + p {
  margin-top: 0.55rem;
}

.site-foot .rechtszeile {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-foot .rechtszeile a {
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 1.5px solid var(--rot);
  padding-bottom: 0.15rem;
}

.site-foot .rechtszeile a:hover {
  color: var(--rot);
}

.wegdiagramm {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 0.6rem;
  margin: 1.7rem 0 0;
  counter-reset: weg;
}

.wegdiagramm li {
  counter-increment: weg;
  text-align: center;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.wegdiagramm .station {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 0.7rem;
  border: 1.5px solid var(--tinte);
  background: var(--blatt);
}

.wegdiagramm li:not(:last-child) .station::after {
  content: "";
  position: absolute;
  left: calc(100% + 1px);
  top: 50%;
  width: calc(100% + 0.6rem);
  border-top: 1.5px dashed var(--linie-stark);
}

.wegdiagramm .station::before {
  content: counter(weg);
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rot);
  color: var(--auf-rot);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
}

.wegdiagramm svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--tinte);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wegdiagramm .schritt {
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

.wegdiagramm .beleg {
  border: 0;
  padding: 0;
  margin-top: 0.35rem;
  font-size: 0.6rem;
}

.verhaeltnis {
  display: grid;
  grid-template-columns: minmax(0, 20rem) auto minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 1.4rem 2.5rem;
  margin: 1.8rem 0 0;
  padding: 1.6rem;
  background: var(--blatt-leise);
  border-top: 2.5px solid var(--tinte);
}

.verhaeltnis figure {
  margin: 0;
  max-width: 20rem;
}

.verhaeltnis svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--tinte-leise);
}

.verhaeltnis .zahl {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 0.7rem;
}

.verhaeltnis .zahl.akzent {
  color: var(--rot);
}

.verhaeltnis .gegen {
  align-self: center;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.verhaeltnis .eine {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  margin: 0 auto 0.8rem;
  background: var(--rot);
}

.verhaeltnis .eine svg {
  width: 2.1rem;
  height: 2.1rem;
  fill: none;
  stroke: var(--auf-rot);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.verhaeltnis figcaption {
  font-size: 0.86rem;
  line-height: 1.45;
}

.verhaeltnis figcaption .quelle {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--tinte-leise);
}

.verhaeltnis .rechts {
  text-align: center;
  max-width: 17rem;
}

.verhaeltnis .karten-fuss {
  grid-column: 1 / -1;
}

.minuten {
  margin: 1.8rem 0 0;
  padding: 1.4rem 1.6rem 1.6rem;
  background: var(--blatt-leise);
  border-top: 2.5px solid var(--tinte);
}

.minuten .achse {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.1rem;
  padding-top: 1.9rem;
}

.minuten .achse::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  right: 0;
  border-top: 1.5px solid var(--linie-stark);
}

.minuten .marke {
  position: relative;
  margin: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: baseline;
  display: block;
}

.minuten .marke::before {
  content: "";
  position: absolute;
  top: -1.6rem;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
}

.minuten .marke.behoerde::before { background: var(--behoerde); }
.minuten .marke.schule::before { background: var(--schule); }

.minuten .uhrzeit {
  display: block;
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.minuten blockquote {
  margin: 0.35rem 0 0;
  border: 0;
  padding: 0;
  font-size: 0.94rem;
}

.minuten .beleg {
  margin-top: 0.6rem;
}

.minuten .spanne {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rot);
  font-weight: 700;
}

.karten-fuss {
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: var(--tinte-leise);
}

.kopierblock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  column-gap: 1.5rem;
  align-items: start;
  margin: 1rem 0 0;
  padding: 0.15rem 0 0.2rem 1.3rem;
  border-left: 3px solid var(--tinte);
}

.kopierblock > p {
  grid-column: 1;
  max-width: 66ch;
}

.kopierblock p + p {
  margin-top: 0.65rem;
}

.kopierblock::after {
  content: attr(data-marke);
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  border-top: 2px solid var(--rot);
}

.zitatkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0;
  margin: 1.7rem 0 0;
  border-top: 1px solid var(--linie-stark);
}

.zitat {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.3rem 1.6rem 1.2rem 0;
  border-bottom: 1px solid var(--linie);
  border-left: 3px solid var(--linie-stark);
  padding-left: 1.2rem;
}

.zitat.schule { border-left-color: var(--schule); }
.zitat.behoerde { border-left-color: var(--behoerde); }
.zitat.eltern { border-left-color: var(--eltern); }

.zitat blockquote {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  font-size: 1.04rem;
  line-height: 1.42;
}

.zitat figcaption {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.7;
  color: var(--tinte-leise);
}

.zitat .karten-fuss {
  margin-top: 0.9rem;
}

.bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.7rem;
  margin: 1.7rem 0 0;
}

.bilder figure {
  margin: 0;
}

.bilder img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linie-stark);
  background: var(--blatt);
}

.bilder figcaption {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}

.bilder figcaption b {
  display: block;
  margin-bottom: 0.15rem;
  font-variation-settings: "wght" 650;
  font-size: 0.98rem;
  color: var(--tinte);
}

#zitate .notiz {
  margin-top: 1.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--linie);
  font-size: 0.92rem;
  color: var(--tinte-leise);
  max-width: 68ch;
}

.stand-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 0;
  font-size: 0.92rem;
}

.stand-tabelle th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding: 0 1.2rem 0.5rem 0;
  border-bottom: 2.5px solid var(--tinte);
}

.stand-tabelle td {
  vertical-align: top;
  padding: 0.9rem 1.2rem 0.9rem 0;
  border-bottom: 1px solid var(--linie);
}

.stand-tabelle td:last-child,
.stand-tabelle th:last-child {
  padding-right: 0;
}

.stand-tabelle .ja,
.stand-tabelle .teils,
.stand-tabelle .nein,
.stand-tabelle .spaet {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stand-tabelle .ja { color: var(--eltern); }
.stand-tabelle .teils { color: var(--behoerde); }
.stand-tabelle .spaet { color: var(--rot); }
.stand-tabelle .nein { color: var(--rot); }

.stand-tabelle tr.leer td {
  color: var(--tinte-leise);
}

.tabellen-notiz {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--tinte-leise);
  max-width: 68ch;
}

.zusage {
  max-width: 64ch;
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  background: var(--blatt-leise);
  border-left: 3px solid var(--tinte);
  font-size: 0.95rem;
}

.zusage a {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--rot);
}

.meldeformular {
  max-width: 48rem;
  margin-top: 1.4rem;
}

.formzeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 2rem;
}

.formfeld {
  margin-bottom: 1.5rem;
}

.formfeld label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formfeld input,
.formfeld textarea,
.rohtext {
  display: block;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-bottom: 2px solid var(--linie-stark);
  background: var(--blatt-leise);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: 1rem;
  line-height: 1.5;
}

.formfeld textarea,
.rohtext {
  resize: vertical;
}

.formfeld input:hover,
.formfeld textarea:hover {
  border-bottom-color: var(--tinte-leise);
}

.formfeld input:focus-visible,
.formfeld textarea:focus-visible {
  border-bottom-color: var(--rot);
  outline: 2.5px solid var(--rot);
  outline-offset: 1px;
}

.hilfe {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--tinte-leise);
  font-family: var(--grotesk);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.freigabe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.75rem;
  align-items: start;
  margin-bottom: 1.6rem;
  padding: 1rem 1.15rem;
  background: var(--rot-wash);
  border-left: 3px solid var(--rot);
}

.freigabe input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
  accent-color: var(--rot);
}

.freigabe label {
  margin: 0;
  font-family: var(--grotesk);
  font-size: 0.96rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.absenden {
  margin-bottom: 1.4rem;
}

.knopf-hinweis {
  max-width: 56ch;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--tinte-leise);
}

.sendehinweis {
  max-width: 56ch;
  margin-top: 0.9rem;
  padding: 0.8rem 1rem;
  background: var(--blatt-leise);
  border-left: 3px solid var(--tinte);
  font-size: 0.92rem;
}

.ohne-mail {
  max-width: 48rem;
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
}

.ohne-mail > summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rot);
  list-style: none;
  padding: 0.4rem 0;
}

.ohne-mail > summary::-webkit-details-marker {
  display: none;
}

.ohne-mail > summary::before {
  content: "+ ";
}

.ohne-mail[open] > summary::before {
  content: "– ";
}

.ohne-mail > div {
  margin-top: 0.9rem;
  font-size: 0.92rem;
}

.ohne-mail p {
  max-width: 62ch;
}

.kopierstatus {
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--eltern);
}

.rohtext {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.7;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .durch {
      animation: zug linear both;
      animation-timeline: view();
      animation-range: entry 85% entry 100%;
    }
  }
}

@keyframes zug {
  from { background-size: 0% 0.07em; }
  to { background-size: 100% 0.07em; }
}

@media (max-width: 1000px) {
  :root {
    --rand: 13rem;
  }
}

@media (max-width: 860px) {
  .shell,
  .site-foot {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
  }
  .hero-unten {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  /* Quellen: Das Blattzeichen sass in einer festen 8-rem-Spalte. Auf einem
     375-px-Schirm blieben dem Volltext dadurch 136 px, also 18 Zeichen je
     Zeile. Auf schmalen Geraeten gibt es keinen Rand, in den eine Randnotiz
     gehoert, also wandert die Blattzahl in die Kopfzeile zu Aktenzeichen und
     Datum, und der Text bekommt die ganze Breite. */
  .dokument {
    display: block;
  }
  .dokument::after {
    content: none;
  }
  .dokument .kopf::after {
    content: "Blatt " counter(blatt);
  }
  .volltext {
    padding: 0.9rem 0 0.9rem 0.9rem;
    border-left-width: 3px;
  }

  /* Presse: derselbe Fehler, 13 rem fuer die Beschriftung neben dem Zitat.
     Die Spaltenzahl allein zu aendern genuegt nicht: ::after steht per
     grid-column 2 und wuerde sich sonst eine implizite zweite Spalte
     erzeugen. Auf schmalen Geraeten wandert die Beschriftung deshalb ueber
     den Text, als Zeile statt als Randnotiz. */
  .kopierblock {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 1rem;
  }
  .kopierblock > p {
    max-width: none;
  }
  .kopierblock::after {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0.7rem;
    padding-top: 0.35rem;
  }

  .widerspruch {
    grid-template-columns: minmax(0, 1fr) 3.2rem;
    column-gap: 0.9rem;
  }
  .widerspruch .paar {
    grid-template-columns: 1fr;
    padding-right: 1.2rem;
  }
  .widerspruch .paar > div + div {
    margin-top: 1.1rem;
    padding: 1.1rem 0 0;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--linie);
  }
  .widerspruch::after {
    font-size: 1.9rem;
  }
  .gesetze dd {
    max-width: none;
  }
  .rollen article {
    grid-template-columns: 1fr;
    gap: 0.25rem 0;
  }
  .verhaeltnis {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .verhaeltnis figure {
    max-width: min(20rem, 100%);
  }
  .wegdiagramm {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem 0.6rem;
  }
  .wegdiagramm li:nth-child(3n) .station::after {
    display: none;
  }
  .minuten .achse {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .minuten .achse::before {
    bottom: auto;
  }
  .zitatkarten {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  /* Fuer Schueler: Das Zeichen stand in einer 3,4-rem-Spalte neben dem Text.
     Zusammen mit der Einzugsbreite der Liste blieben dem Satz 240 px, also
     64 Prozent des Blattes. Auf dem Telefon stellt sich das Zeichen ueber die
     Ueberschrift, der Text bekommt die volle Breite. */
  .fall {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .fall svg,
  .fall h3,
  .fall ol,
  .fall p {
    grid-column: 1;
  }
  .fall svg {
    margin-bottom: 0.55rem;
  }
  .fall ol {
    margin-left: 1rem;
  }

  .hauptzeile {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 0.5rem;
    padding-bottom: 0;
  }
  /* Auf dem Telefon laeuft die Navigation von links, und die Werkzeuge
     sitzen neben der Wortmarke. Dort ist die Zeile ohnehin halb leer, und
     der Kopf spart eine ganze Reihe. */
  .site-head nav.haupt {
    justify-content: flex-start;
    gap: 0 1.1rem;
  }
  .werkzeuge {
    position: absolute;
    top: 0.3rem;
    right: 0;
    margin: 0;
    padding: 0;
    border-left: 0;
  }
  .site-head nav.haupt a.tab {
    padding: 0.9rem 0;
  }
  .site-head nav.haupt {
    align-self: stretch;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }
  .site-head nav.haupt::-webkit-scrollbar {
    display: none;
  }
  .site-head nav.haupt a {
    white-space: nowrap;
  }
  .formzeile {
    grid-template-columns: 1fr;
  }
  .kopierstatus {
    display: block;
    margin: 0.6rem 0 0;
  }
  .wegdiagramm {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .wegdiagramm li {
    position: relative;
    grid-template-rows: auto auto;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 0 1rem;
    text-align: left;
    padding-bottom: 1.6rem;
  }
  .wegdiagramm li:last-child {
    padding-bottom: 0;
  }
  .wegdiagramm .station {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
  }
  .wegdiagramm .schritt {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 0.95rem;
    hyphens: manual;
  }
  .wegdiagramm .beleg {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.2rem;
  }
  .wegdiagramm li:not(:last-child) .station::after {
    display: none;
  }
  .wegdiagramm li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.7rem;
    top: 3.8rem;
    bottom: 0.4rem;
    border-left: 1.5px dashed var(--linie-stark);
  }
  .stand-tabelle,
  .stand-tabelle tbody,
  .stand-tabelle tr,
  .stand-tabelle td {
    display: block;
    width: 100%;
  }
  .stand-tabelle thead {
    display: none;
  }
  .stand-tabelle tr {
    padding: 1rem 0;
    border-bottom: 1px solid var(--linie-stark);
  }
  .stand-tabelle td {
    padding: 0;
    border-bottom: 0;
  }
  .stand-tabelle td + td {
    margin-top: 0.7rem;
  }
  .stand-tabelle td[data-spalte]::before {
    content: attr(data-spalte);
    display: block;
    margin-bottom: 0.15rem;
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tinte-leise);
  }
}

@media print {
  :root {
    --papier: #ffffff;
    --blatt: #ffffff;
    --blatt-leise: #f4f6f7;
    --tinte: #101317;
    --tinte-leise: #4a5259;
    --kuli: #1f2d44;
    --rot: #b81a21;
    --rot-wash: #f8eeed;
    --linie: #d5dade;
    --linie-stark: #a8b1b8;
    --mark: #f2e4b8;
  }
  body {
    font-size: 10.5pt;
  }
  .shell,
  .site-foot {
    max-width: none;
    border: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .site-head {
    position: static;
    border-bottom-width: 2pt;
  }
  .site-head nav,
  .werkzeuge {
    display: none;
  }
  .prose,
  .hinweis,
  .gesetze dd,
  .site-foot p,
  .lede {
    max-width: none;
  }
  .hero {
    padding-top: 1.2rem;
  }
  .hero-unten {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .quelle-link,
  details.mehr > summary,
  .karten-fuss,
  .meldeformular,
  .ohne-mail,
  .dokument .kopf a[href^="karte.html"],
  .tafel-vorschau {
    display: none;
  }
  details.mehr {
    margin-top: 0;
  }
  .durch {
    animation: none;
    background-size: 100% 0.07em;
  }
  .anhang,
  #recht,
  #rechtsquellen {
    break-before: page;
  }
  .anhang .dokument {
    break-before: page;
  }
  .timeline h3,
  .timeline .kopf,
  .timeline .weg,
  h2 {
    break-after: avoid-page;
  }
  .widerspruch,
  .kernpunkte li,
  .rollen article,
  ol.schritte li,
  .schutzliste li,
  .fall,
  .zitat,
  .bilder figure,
  .kopierblock,
  .wegdiagramm,
  .verhaeltnis,
  .minuten,
  .stand-tabelle tr {
    break-inside: avoid-page;
  }
  .verhaeltnis,
  .minuten {
    background: none;
  }
  .site-foot {
    break-before: page;
  }
}

.horizont-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 0;
  font-size: 0.95rem;
}

.horizont-tabelle caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rot);
}

.horizont-tabelle th[scope="col"] {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding: 0 1rem 0.5rem 0;
  border-bottom: 2.5px solid var(--tinte);
}

.horizont-tabelle th[scope="row"] {
  text-align: left;
  font-variation-settings: "wght" 600;
  font-weight: 400;
  padding: 0.95rem 1.5rem 0.95rem 0;
  border-bottom: 1px solid var(--linie);
  max-width: 40ch;
}

.horizont-tabelle .norm {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-variation-settings: "wght" 400;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--tinte-leise);
}

.horizont-tabelle .norm a {
  color: var(--rot);
}

.horizont-tabelle th.stufe,
.horizont-tabelle td.stufe {
  width: 6.5rem;
  text-align: center;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

.kasten {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--linie-stark);
  position: relative;
  vertical-align: middle;
}

.kasten.ja {
  border-color: var(--tinte);
  background: var(--tinte);
}

.kasten.halb {
  border-color: var(--tinte);
  background: linear-gradient(135deg, var(--tinte) 0 50%, transparent 50% 100%);
}

.kasten.nein {
  border-color: var(--rot);
  background: var(--rot);
}

.kasten.nein::before,
.kasten.nein::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 2px;
  margin-left: -1px;
  background: var(--auf-rot);
}

.kasten.nein::before {
  transform: rotate(45deg);
}

.kasten.nein::after {
  transform: rotate(-45deg);
}

.stufenlegende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.stufenlegende span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 720px) {
  .horizont-tabelle,
  .horizont-tabelle tbody,
  .horizont-tabelle tr,
  .horizont-tabelle th[scope="row"],
  .horizont-tabelle td.stufe {
    display: block;
    width: 100%;
  }
  .horizont-tabelle thead {
    display: none;
  }
  .horizont-tabelle tr {
    padding: 1rem 0;
    border-bottom: 1px solid var(--linie-stark);
  }
  .horizont-tabelle th[scope="row"] {
    max-width: none;
    padding: 0 0 0.7rem;
    border-bottom: 0;
  }
  .horizont-tabelle td.stufe {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    margin-right: 1.4rem;
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }
  .horizont-tabelle td.stufe::after {
    content: attr(data-spalte);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinte-leise);
  }
}

@media print {
  .horizont-tabelle tr,
  .horizont-tabelle {
    break-inside: avoid-page;
  }
}

/* Zwei Druckseiten nebeneinander, jede als Blatt mit Haarlinie.
   Bricht auf schmalen Geraeten untereinander. */
.blattpaar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin: 1.6rem 0 0;
  max-width: 46rem;
}

.blattpaar figure {
  margin: 0;
}

.blattpaar figure > a {
  display: block;
  border: 1.5px solid var(--linie-stark);
}

.blattpaar img {
  display: block;
  width: 100%;
  height: auto;
}

.blattpaar figure > a:hover {
  border-color: var(--rot);
}

.blattpaar figcaption {
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blattpaar figcaption .quelle {
  display: block;
  margin-top: 0.2rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--tinte-leise);
}

/* Reihe aus Ladeknoepfen. Der erste traegt Flaeche, die uebrigen sind leise. */
.ladezeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
}

.ladezeile .knopf {
  margin: 0;
}

@media (max-width: 620px) {
  .blattpaar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Podcast: eigener Abspieler des Browsers, keine fremde Einbettung.
   Die Datei liegt unter medien/ auf demselben Server wie die Seite. */
/* Einordnungskasten. Steht dort, wo etwas auf dieser Seite nicht Beleg ist,
   sondern Kommentar, und sagt das vor dem Inhalt statt danach. */
.einordnung {
  margin: 1.6rem 0 0;
  max-width: 46rem;
  padding: 1.1rem 1.3rem;
  border-left: 5px solid var(--rot);
  background: var(--blatt-leise);
}

.einordnung p {
  margin: 0 0 0.6rem;
  line-height: 1.6;
}

.einordnung p:last-child {
  margin-bottom: 0;
}

.hoerblock {
  margin: 1.6rem 0 0;
  max-width: 46rem;
  border: 1.5px solid var(--linie-stark);
  background: var(--blatt);
}

.hoerblock .kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.2rem;
  padding: 1rem 1.2rem 0.7rem;
}

.hoerblock .folge {
  font-variation-settings: "wght" 650;
  font-size: 1.05rem;
}

.hoerblock .dauer {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.hoerblock audio {
  display: block;
  width: calc(100% - 2.4rem);
  margin: 0 1.2rem 1rem;
}

.hoerblock .knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0 1.2rem 1.2rem;
}

.hoerblock .knoepfe .knopf {
  margin: 0;
}

/* Transkript: Sprecherwechsel als Rasterzeile, damit man den Wortwechsel
   sieht, ohne dass Namen erfunden werden muessen. */
.transkript {
  margin-top: 1.4rem;
  max-width: 46rem;
}

.transkript p {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0 1rem;
  margin: 0 0 0.9rem;
  line-height: 1.55;
}

.transkript p .zeit {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--tinte-leise);
  padding-top: 0.3em;
}

@media (max-width: 620px) {
  .transkript p {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}

.medienplatz {
  margin: 1.6rem 0 0;
  max-width: 46rem;
  border: 1.5px solid var(--linie-stark);
}

/* Das Videofeld ist ein Link auf YouTube, kein eingebetteter Player.
   Eingebettet entstuende schon beim Aufruf der Seite eine Verbindung zu
   YouTube; so entsteht sie erst beim Klick. Standbild und Ton liegen lokal. */
.videofeld {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--blatt-leise);
  border-bottom: 1.5px solid var(--linie-stark);
  text-decoration: none;
}

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

/* Abspielzeichen: Dreieck im Quadrat, ohne Rundung wie alles hier.
   Es sitzt unten rechts und nicht in der Mitte, weil die Schlagzeile des
   Standbilds links steht und dort verdeckt wuerde. */
.videofeld .abspielen {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3.9rem;
  height: 3.9rem;
  background: var(--rot);
}

.videofeld .abspielen::before {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.85rem 0 0.85rem 1.4rem;
  border-color: transparent transparent transparent var(--auf-rot);
}

.videofeld .videomarke {
  position: absolute;
  right: 3.9rem;
  bottom: 0;
  height: 3.9rem;
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  background: var(--tinte);
  color: var(--blatt);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.videofeld:hover .abspielen {
  background: var(--tinte);
}

.videofeld:hover .videomarke {
  background: var(--rot);
  color: var(--auf-rot);
}

.medienfuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--blatt);
}

.medientitel {
  display: block;
  font-variation-settings: "wght" 650;
  font-size: 1.05rem;
}

.medienmeta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.medienknoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.medienknoepfe .knopf {
  margin: 0;
}


@media print {
  .medienplatz {
    display: none;
  }
}

.wartung-seite {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
}

.wartung-seite .shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.wartung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding: 1.1rem 0 0.9rem;
  border-bottom: 2.5px solid var(--tinte);
}

.wartung-kopf .wortmarke {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wartung-kopf .wortmarke span {
  color: var(--rot);
}

.wartung-kopf .blattzeile {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.wartung {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0;
  max-width: 52rem;
}

.fristmarke {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 1.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--rot);
  color: var(--auf-rot);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wartung h1 {
  font-variation-settings: "wdth" 110, "wght" 800;
  font-size: clamp(1.6rem, 4.6vw, 3rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 20ch;
}

.uhr {
  margin: 2.4rem 0 2.6rem;
  padding: 1.6rem 0;
  border-top: 2.5px solid var(--rot);
  border-bottom: 1px solid var(--linie);
}

.uhr-werk {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.6rem;
}

.uhr-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.uhr-zahl {
  font-family: var(--mono);
  font-size: clamp(2.2rem, 8vw, 4.2rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--rot);
}

.uhr-name {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.uhr-statisch {
  font-family: var(--mono);
  font-size: 0.98rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.uhr-statisch.uhr-klein {
  margin-top: 1.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.uhr-zone {
  color: var(--tinte-leise);
}

.uhr-aus .uhr-statisch {
  font-size: 1.15rem;
  color: var(--rot);
}

.wartung-text {
  max-width: 62ch;
  font-size: 1.02rem;
}

.wartung-text p + p {
  margin-top: 0.85rem;
}

.wartung-notiz {
  margin-top: 1.8rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--tinte);
  max-width: 62ch;
  font-size: 0.94rem;
  color: var(--tinte-leise);
}

.wartung-kontakt {
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  font-size: 0.94rem;
}

.wartung-kontakt .lab {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 0.25rem;
}

.wartung-kontakt a {
  color: var(--rot);
}

.wartung-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding: 1.1rem 0 1.6rem;
  border-top: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wartung-fuss span {
  color: var(--tinte-leise);
}

.eltern { --farbe: var(--eltern); }
.schule { --farbe: var(--schule); }
.behoerde { --farbe: var(--behoerde); }
html:not(.js) #pinnwand { display: none; }
html:not(.js) .nur-js { display: none; }
#register details.mehr > summary { margin-bottom: 1rem; }
#register h2 { margin-top: 1.6rem; }
#register .inhalt { padding-top: 0.4rem; max-width: 68ch; }
#register details.stelle, #register details.widerspruch-eintrag { border-top: 1px solid var(--linie); padding: 0.8rem 0; }
#register details.stelle > summary, #register details.widerspruch-eintrag > summary, #register details.schreiben > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; cursor: pointer; list-style: none; }
#register summary::-webkit-details-marker { display: none; }
#register details.stelle > summary::before, #register details.widerspruch-eintrag > summary::before, #register details.schreiben > summary::before { content: "+"; font-family: var(--mono); font-weight: 700; color: var(--tinte-leise); width: 1rem; }
#register details[open] > summary::before { content: "–"; }
#register .amt, #register .datum, #register .anzahl { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-leise); }
#register .name, #register .wer { font-variation-settings: "wght" 650; font-weight: 650; }
#register .eid { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; color: var(--farbe); }
#register details.schreiben { border-left: 3px solid var(--farbe); padding: 0.35rem 0 0.35rem 0.8rem; margin: 0.5rem 0; }
#register .schreiben-liste, #register .verweise { list-style: none; }
#register .verweise { font-family: var(--mono); font-size: 0.62rem; line-height: 1.9; }
#register h3 { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinte-leise); }
#register .kontakt, #register .beleg { font-family: var(--mono); font-size: 0.62rem; color: var(--tinte-leise); overflow-wrap: anywhere; }
#register blockquote { border-left: 3px solid var(--farbe, var(--kuli)); padding: 0.1rem 0 0.1rem 0.8rem; color: var(--kuli); margin: 0.5rem 0; }
#register blockquote footer { font-family: var(--mono); font-size: 0.6rem; color: var(--tinte-leise); margin-top: 0.3rem; }
#register .paar { display: grid; gap: 0.8rem; }
#register .notiz { border-left: 3px solid var(--rot); padding-left: 0.8rem; margin-top: 0.6rem; }
#register .mark-zeichen { font-family: var(--hand); font-weight: 700; font-size: 1.4rem; color: var(--rot); line-height: 1; }


/* Die Tafel (karte.html). tafel.js baut sie aus der Liste in #register,
   ohne JavaScript bleibt die Liste selbst. Rot nur an Widerspruch und
   primaerem Knopf, Schnuere in Tinte. */

.tafel-werkzeuge { display: none; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0.9rem; }
html.js .tafel-werkzeuge { display: flex; }
.tafel-werkzeuge .tafel-knopf,
.tafel-blatt .tafel-knopf {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.6rem 1rem; border: 1.5px solid var(--tinte); background: var(--blatt); color: var(--tinte); cursor: pointer;
}
.tafel-werkzeuge .tafel-knopf:hover, .tafel-blatt .tafel-knopf:hover, .tafel-werkzeuge .tafel-knopf.an { background: var(--tinte); color: var(--blatt); }
.tafel-werkzeuge .tafel-knopf.rot, .tafel-blatt .tafel-knopf.rot { border-color: var(--rot); color: var(--rot); }
.tafel-werkzeuge .tafel-knopf.rot:hover, .tafel-blatt .tafel-knopf.rot:hover, .tafel-werkzeuge .tafel-knopf.rot.an { background: var(--rot); color: var(--auf-rot); }

.tafel-rahmen { position: relative; width: 100%; border: 2.5px solid var(--tinte); background: var(--blatt); overflow: hidden; user-select: none; }
.tafel-rahmen .raster { position: absolute; inset: 0; width: 100%; height: 100%; }
.tafel-buehne { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tafel-buehne svg { position: absolute; left: 0; top: 0; overflow: visible; }
.tafel-buehne svg.oben { pointer-events: none; }
.tafel-buehne svg.oben .knoten, .tafel-buehne svg.oben .zeichen { pointer-events: auto; cursor: pointer; }
.tafel-karten { position: absolute; inset: 0; }
.tafel-karte, .tafel-fall { position: absolute; text-align: left; color: var(--tinte); font: inherit; line-height: 1.4; cursor: pointer; transition: opacity 0.25s, border-color 0.2s; }
.tafel-karte { background: var(--blatt); border: 1px solid var(--linie-stark); border-left: 3px solid var(--farbe); padding: 0.45rem 0.6rem 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; }
.tafel-karte:hover, .tafel-karte.gewaehlt { border-color: var(--tinte); border-left-color: var(--farbe); }
.tafel-karte .amt, .tafel-karte .anzahl, .tafel-fall .mono-etikett, .tafel-fall .klein { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinte-leise); }
.tafel-karte .name { font-variation-settings: "wght" 650; font-weight: 650; font-size: 0.84rem; line-height: 1.2; }
.tafel-fall { background: var(--blatt); border: 2px solid var(--tinte); padding: 0.55rem 0.7rem 0.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.tafel-fall:hover, .tafel-fall.gewaehlt { outline: 2px solid var(--tinte); outline-offset: 2px; }
.tafel-fall .figur { align-self: center; margin-bottom: 0.2rem; }
.tafel-fall .figur img { height: 84px; width: auto; }
.tafel-fall strong { font-variation-settings: "wdth" 110, "wght" 800; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.05rem; line-height: 1.05; }
.tafel-fall .klein { text-transform: none; letter-spacing: 0.04em; line-height: 1.5; margin-top: 0.15rem; }
.tafel-zettel { position: absolute; background: var(--mark); color: var(--auf-mark); font-family: var(--hand); font-size: 1.15rem; line-height: 1.22; padding: 0.75rem 0.85rem 0.8rem; transform: rotate(-2deg); transition: opacity 0.25s; }

.tafel-rahmen .schnur { fill: none; stroke: var(--tinte); stroke-width: 2.2; stroke-linecap: round; transition: opacity 0.25s; }
.tafel-rahmen .zu { fill: none; stroke: var(--tinte-leise); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity 0.25s; }
.tafel-rahmen .zu-schild { transition: opacity 0.25s; }
.tafel-rahmen .zu-schild rect { fill: var(--blatt); stroke: var(--linie-stark); }
.tafel-rahmen .zu-schild text { font-family: var(--mono); font-size: 8px; letter-spacing: 0.5px; text-transform: uppercase; fill: var(--tinte-leise); }
.tafel-rahmen .nadel { fill: var(--tinte); stroke: var(--blatt); stroke-width: 1.5; transition: opacity 0.25s; }
.tafel-rahmen .knoten { transition: opacity 0.25s; outline: none; }
.tafel-rahmen .knoten rect { fill: var(--farbe); stroke: var(--blatt); stroke-width: 1.5; }
.tafel-rahmen .knoten text { font-family: var(--mono); font-size: 9px; font-weight: 700; fill: var(--tinte); paint-order: stroke; stroke: var(--blatt); stroke-width: 3px; stroke-linejoin: round; }
.tafel-rahmen .knoten:hover rect, .tafel-rahmen .knoten.gewaehlt rect, .tafel-rahmen .knoten:focus-visible rect { stroke: var(--tinte); stroke-width: 2.5; }
.tafel-rahmen .faden { fill: none; stroke: var(--rot); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tafel-ziehen 0.9s ease-out forwards; }
@keyframes tafel-ziehen { to { stroke-dashoffset: 0; } }
.tafel-rahmen .zeichen { outline: none; }
.tafel-rahmen .zeichen rect { fill: var(--blatt); stroke: var(--rot); stroke-width: 1.5; }
.tafel-rahmen .zeichen text { font-family: var(--hand); font-weight: 700; font-size: 22px; fill: var(--rot); }
.tafel-rahmen .zeichen:hover rect, .tafel-rahmen .zeichen.gewaehlt rect, .tafel-rahmen .zeichen:focus-visible rect { fill: var(--rot-wash); stroke-width: 2.5; }
.tafel-rahmen.dim .tafel-karte:not(.hell), .tafel-rahmen.dim .tafel-fall:not(.hell), .tafel-rahmen.dim .tafel-zettel,
.tafel-rahmen.dim .schnur:not(.hell), .tafel-rahmen.dim .zu:not(.hell), .tafel-rahmen.dim .zu-schild:not(.hell),
.tafel-rahmen.dim .nadel:not(.hell), .tafel-rahmen.dim .knoten:not(.hell) { opacity: 0.13; }

.tafel-rahmen.klein .tafel-zettel, .tafel-rahmen.klein .zu-schild, .tafel-rahmen.klein .tafel-fall .klein { display: none; }
.tafel-rahmen.klein .knoten text { font-size: 8px; }
.tafel-rahmen.klein .tafel-karte { padding: 0.35rem 0.45rem 0.4rem; }
.tafel-rahmen.klein .tafel-karte .name { font-size: 0.72rem; }
.tafel-rahmen.klein .tafel-karte .amt, .tafel-rahmen.klein .tafel-karte .anzahl { font-size: 0.5rem; }
.tafel-rahmen.klein .tafel-fall .figur img { height: 56px; }
.tafel-rahmen.klein .tafel-fall strong { font-size: 0.85rem; }

.tafel-blatt { position: absolute; z-index: 8; top: 0; right: 0; bottom: 0; width: 340px; overflow: auto; background: var(--blatt); border-left: 1px solid var(--tinte); padding: 0.85rem 1rem 1rem; font-size: 0.82rem; line-height: 1.5; user-select: text; display: flex; flex-direction: column; gap: 0.5rem; color: var(--tinte); animation: tafel-herein 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes tafel-herein { from { transform: translateX(100%); } }
.tafel-blatt[hidden] { display: none; }
.tafel-blatt:focus { outline: none; }
.tafel-rahmen.bogen .tafel-blatt { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 62%; border-left: 0; border-top: 2px solid var(--tinte); animation: tafel-hoch 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes tafel-hoch { from { transform: translateY(100%); } }
.tafel-blatt .kopf { display: flex; justify-content: space-between; gap: 0.6rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinte-leise); padding-right: 1.4rem; }
.tafel-blatt .eid { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--tinte); }
.tafel-blatt .eid.eltern::before, .tafel-blatt .eid.schule::before, .tafel-blatt .eid.behoerde::before { content: ""; width: 8px; height: 8px; background: var(--farbe); }
.tafel-blatt h3 { font-variation-settings: "wdth" 104, "wght" 700; font-weight: 700; font-size: 1rem; line-height: 1.25; letter-spacing: -0.01em; }
.tafel-blatt .weg { font-family: var(--mono); font-size: 0.56rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--tinte-leise); }
.tafel-blatt .weg b { color: var(--tinte); }
.tafel-blatt .wer { font-variation-settings: "wght" 650; font-weight: 650; }
.tafel-blatt .kontakt { font-family: var(--mono); font-size: 0.56rem; line-height: 1.6; color: var(--tinte-leise); overflow-wrap: anywhere; }
.tafel-blatt blockquote { border-left: 3px solid var(--farbe, var(--kuli)); padding: 0.1rem 0 0.1rem 0.7rem; color: var(--kuli); }
.tafel-blatt blockquote footer, .tafel-blatt .beleg { font-family: var(--mono); font-size: 0.55rem; color: var(--tinte-leise); margin-top: 0.25rem; }
.tafel-blatt .notiz { border-left: 3px solid var(--rot); padding-left: 0.7rem; }
.tafel-blatt .quelle-link { margin-top: 0.2rem; }
.tafel-blatt .paar { display: flex; flex-direction: column; gap: 0.6rem; }
.tafel-blatt .mark-zeichen { font-family: var(--hand); font-weight: 700; font-size: 1.6rem; color: var(--rot); line-height: 1; display: inline-block; transform: rotate(-7deg); margin-right: 0.2rem; }
.tafel-blatt .tafel-marken { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; padding-top: 0.5rem; border-top: 1px solid var(--linie); }
.tafel-blatt .tafel-marken-etikett { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinte-leise); margin-right: 0.2rem; }
.tafel-blatt .tafel-marke { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.5rem; border: 1px solid var(--linie-stark); background: none; color: inherit; cursor: pointer; }
.tafel-blatt .tafel-marke::before { content: ""; width: 6px; height: 6px; background: var(--farbe); }
.tafel-blatt .tafel-marke:hover { border-color: var(--tinte); }
.tafel-blatt .liste-schreiben { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.tafel-blatt .liste-schreiben li { border-bottom: 1px solid var(--linie); }
.tafel-blatt .liste-schreiben button { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; padding: 0.45rem 0; font: inherit; font-size: 0.78rem; line-height: 1.35; background: none; border: 0; color: inherit; cursor: pointer; }
.tafel-blatt .liste-schreiben button:hover { color: var(--rot); }
.tafel-blatt .liste-schreiben .eid { font-family: var(--mono); font-size: 0.58rem; padding-top: 0.15rem; }
.tafel-blatt .schliessen { position: absolute; top: 0.35rem; right: 0.5rem; font-size: 1.15rem; line-height: 1; padding: 0.2rem 0.4rem; color: var(--tinte-leise); background: none; border: 0; cursor: pointer; }
.tafel-blatt .schliessen:hover { color: var(--rot); }
.tafel-blatt .weiter { display: flex; gap: 0.5rem; padding-top: 0.4rem; }

.tafel-legende { margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.04em; color: var(--tinte-leise); }
.tafel-legende span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tafel-legende i { width: 9px; height: 9px; background: var(--farbe); }
.tafel-legende i.schnur-l { width: 22px; height: 2px; background: var(--tinte); }
.tafel-legende i.zu-l { width: 22px; height: 0; border-top: 1.5px dashed var(--tinte-leise); background: none; }
.tafel-legende i.zeichen-l { width: auto; height: auto; background: none; font-family: var(--hand); font-weight: 700; font-size: 1rem; font-style: normal; color: var(--rot); }

html.standbild .site-head, html.standbild .hero, html.standbild .tafel-werkzeuge, html.standbild .tafel-legende, html.standbild #register, html.standbild .site-foot { display: none; }
html.standbild body { background: var(--blatt); }
html.standbild .shell { max-width: none; border: 0; padding: 0; min-height: 0; }
html.standbild #pinnwand { border: 0; margin: 0; padding: 0; }
html.standbild .tafel-rahmen { border: 0; }

@media (prefers-reduced-motion: reduce) {
  .tafel-buehne, .tafel-karte, .tafel-fall, .tafel-blatt { transition: none; animation: none; }
  .tafel-rahmen .faden { animation: none; stroke-dashoffset: 0; }
}

@media print {
  html.js .tafel-werkzeuge, .tafel-rahmen, .tafel-legende { display: none; }
  #pinnwand { display: none; }
  .nur-js { display: none; }
  #register details.mehr > summary { display: none; }
}

.tafel-vorschau { display: block; margin-top: 1.5rem; border: 1px solid var(--linie-stark); }
.tafel-vorschau .figur img { width: 100%; height: auto; }

/* Der Artikel: ein Zeitungstext Satz fuer Satz neben der Akte (hna.html).
   Das Wort traegt den Befund, die Farbe verstaerkt nur. */
.pruef-legende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem;
  margin-top: 1.3rem;
  max-width: 72ch;
}

.pruef-legende div {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--linie-stark);
  background: var(--blatt-leise);
  font-size: 0.9rem;
  line-height: 1.5;
}

.pruef-legende b,
.satz .befund > b:first-child {
  display: block;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.pruef-legende .gruen { border-left-color: var(--eltern); }
.pruef-legende .gelb { border-left-color: var(--gelb); }
.pruef-legende .rot { border-left-color: var(--rot); }
.pruef-legende .gruen b { color: var(--eltern); }
.pruef-legende .gelb b { color: var(--gelb); }
.pruef-legende .rot b { color: var(--rot); }
.pruef-legende .grau b { color: var(--tinte-leise); }

.pruefung {
  max-width: 76ch;
  margin-top: 1.4rem;
  border-top: 2.5px solid var(--tinte);
}

.pruefung .kopfzeile {
  margin: 0;
  padding: 0.7rem 0 0.8rem;
  border-bottom: 1px solid var(--linie-stark);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.03em;
  line-height: 1.65;
  color: var(--tinte-leise);
}

.satz {
  padding: 1.05rem 1.2rem 1.1rem 1.25rem;
  border-left: 3px solid var(--linie-stark);
  border-bottom: 1px solid var(--linie);
}

.satz .zeile {
  margin: 0;
  color: var(--kuli);
  font-size: 1.04rem;
  line-height: 1.5;
}

.satz h3.zeile {
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: 1.18rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.satz .befund {
  margin: 0.65rem 0 0;
  max-width: 64ch;
  font-size: 0.93rem;
  line-height: 1.52;
}

.satz .befund > b:first-child {
  display: inline-block;
  margin: 0 0.6rem 0 0;
}

.satz.gruen { border-left-color: var(--eltern); }
.satz.gelb { border-left-color: var(--gelb); }
.satz.rot { border-left-color: var(--rot); }
.satz.gruen .befund > b:first-child { color: var(--eltern); }
.satz.gelb .befund > b:first-child { color: var(--gelb); }
.satz.rot .befund > b:first-child { color: var(--rot); }
.satz.grau .befund > b:first-child { color: var(--tinte-leise); }
.satz.grau .zeile { color: var(--tinte-leise); }

@supports (background: color-mix(in srgb, red 10%, white)) {
  .satz.gruen { background: color-mix(in srgb, var(--eltern) 7%, var(--blatt)); }
  .satz.gelb { background: color-mix(in srgb, var(--gelb) 9%, var(--blatt)); }
  .satz.rot { background: color-mix(in srgb, var(--rot) 7%, var(--blatt)); }
}

.satz .durch {
  background-position: 0 0.6em;
  background-size: 100% 0.1em;
}

.bildzitat figure {
  margin: 1.4rem 0 0;
  max-width: 76ch;
}

.bildzitat + .prose {
  margin-top: 1.4rem;
}

.bildzitat img,
.ausschnitte img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linie-stark);
}

.bildzitat figcaption,
.ausschnitte figcaption {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.63rem;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--tinte-leise);
}

.ausschnitte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
  margin-top: 1.4rem;
  max-width: 76ch;
}

.ausschnitte figure {
  margin: 0;
}

.befunde {
  list-style: none;
  counter-reset: bef;
  margin-top: 1.2rem;
  max-width: 72ch;
  border-top: 1px solid var(--linie-stark);
}

.befunde li {
  counter-increment: bef;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.95rem;
  line-height: 1.5;
}

.befunde li::before {
  content: counter(bef);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}

.befunde b {
  display: block;
  font-variation-settings: "wght" 650;
}

.quellenliste {
  list-style: none;
  margin-top: 1.2rem;
  max-width: 72ch;
  border-top: 1px solid var(--linie-stark);
}

.quellenliste li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
}

.quellenliste li a {
  font-weight: 600;
}

.quellenliste li span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--tinte-leise);
}

.fussnote-quelle {
  max-width: 64ch;
  margin-top: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--tinte-leise);
}

/* Film auf der Startseite: Einstieg für neue Besucher. */
.film {
  max-width: 72ch;
  margin: 0 0 2.4rem;
}

.film .marke {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.film .medienplatz {
  margin: 0;
  max-width: none;
  border: 2.5px solid var(--tinte);
}

.film .videofeld {
  border-bottom: 0;
}

/* Erst nach dem Klick eingesetzt (film.js) */
.film .videorahmen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--tinte);
}

.film .hinweis {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--tinte-leise);
}

/* Zweite Runde: die Karte auf der Startseite, die auf den Artikel zeigt. */
.runde {
  max-width: 72ch;
  margin: 0 0 2.4rem;
  padding: 1.35rem 1.6rem 1.5rem;
  border: 2.5px solid var(--tinte);
}

.runde .marke {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rot);
}

.runde h2 {
  margin: 0.45rem 0 0.9rem;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.1;
}

.runde h2 em {
  font-style: normal;
  color: var(--rot);
}

.runde p {
  max-width: 64ch;
  margin: 0.75rem 0 0;
  line-height: 1.55;
}

.runde .ladezeile {
  margin-top: 1.2rem;
}

@media print {
  .satz.gruen,
  .satz.gelb,
  .satz.rot {
    background: none;
  }
  .ausschnitte {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Presse-Zeile: die drei Presse-Seiten unter dem Kopf ------------ */

.presse-zeile {
  display: flex;
  gap: 0 1.3rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linie);
  margin-top: 0.2rem;
}

.presse-zeile a {
  color: var(--tinte-leise);
  padding: 0.62rem 0;
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
}

.presse-zeile a.aktiv { color: var(--rot); border-bottom-color: var(--rot); }
.presse-zeile a:hover { color: var(--tinte); }

/* Nummer des Befunds in der Liste, dieselbe wie im Blatt. */
.satz .zeile .nr {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  margin-right: 0.6em;
  color: var(--tinte-leise);
}

/* ---- Abschluss. Am 22. Oktober 2026 zieht sich die Initiative zurück. ----
   .abschluss ist die große Karte auf der Startseite, vor allem anderen.
   .abschlussband ist die schmale Zeile, die jede Unterseite oben trägt.
   Rot, weil es das Letzte ist, was die Seite fordert: in Ruhe gelassen zu werden. */
.abschluss {
  max-width: 72ch;
  margin: 0 0 2.4rem;
  padding: 1.5rem 1.7rem 1.7rem;
  border: 4px solid var(--rot);
}

.abschluss .marke {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rot);
}

.abschluss h2 {
  margin: 0.45rem 0 0.9rem;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  color: var(--rot);
  font-variation-settings: "wght" 800;
}

.abschluss p {
  max-width: 64ch;
  margin: 0.75rem 0 0;
  line-height: 1.55;
}

.abschluss p.gross {
  font-size: 1.15rem;
  font-variation-settings: "wght" 600;
}

.abschluss a {
  font-weight: 600;
}

.abschlussband {
  margin: 1.2rem 0 0;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--rot);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--tinte);
}

.abschlussband a {
  font-weight: 600;
  white-space: nowrap;
}

/* Antworten des Landkreises, die er „in Rot im Text" zwischen die Punkte eines
   Elternschreibens gesetzt hat (E48, E50). Sie stehen eingerückt und mit der
   Behördenfarbe am Rand, damit beide Stimmen im selben Dokument unterscheidbar bleiben. */
.volltext .amt {
  margin: 0.5rem 0 0.9rem;
  padding: 0.45rem 0 0.45rem 0.9rem;
  border-left: 3px solid var(--behoerde);
  color: var(--tinte);
}

.volltext .amt::before {
  content: "Landkreis";
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--behoerde);
  margin-bottom: 0.15rem;
}

@media print {
  .abschlussband { display: none; }
}