/*
  Prüfpraxis — Stylesheet
  =======================
  Gilt seitenübergreifend (Startseite + Datenschutzseite + Folgeseiten).

  GESTALTUNGSIDEE: "Messprotokoll".
  Die Seite verkauft eine Feststellung mit Beleg. Sie ist deshalb nicht als
  Broschüre gesetzt, sondern wie das Ergebnis eines Messvorgangs: eine feste
  Satzachse, an der jeder Abschnitt beginnt, eine eigene Schriftrolle für alles,
  was gemessen ist (Zahlen, Beträge, Fundstellen, Schrittnummern), und vier
  klar unterschiedene Untergründe statt zehn gleich aussehender Bänder.

  Die drei Schriftrollen (bewusst umgekehrt zur üblichen Aufteilung):
   - ÜBERSCHRIFTEN in der Systemsans, eng gesetzt und schwer. Nicht Serife:
     eine Serifenüberschrift behauptet Behörde, eine eng gesetzte Sans behauptet
     Gerät. Wir sind das Gerät, nicht die Behörde.
   - FLIESSTEXT in der System-Serife. Lange Absätze über Prüfverfahren werden
     gelesen, nicht überflogen; dafür ist die Serife die bessere Wahl, und der
     Wechsel der Schriftart trägt die Hierarchie mit, nicht nur der Schriftgrad.
   - GEMESSENES in der Systemmono. Beträge, Schrittnummern, Feldnamen,
     Fundstellen. Wer die Seite überfliegt, sieht an der Schrift, was eine
     Messgröße ist und was Prosa.

  Weiterhin: keine Web-/Fremdfonts, kein Icon-Font, kein Bild von außen, kein
  JavaScript. Alles unten sind Systemschriften mit Rückfallkette.

  KONTRASTE — gerechnet nach WCAG-2.x-Formel, nicht geschätzt.
  Untergrund #edf0f2 (Papier, kühl):
     ink #12171a ......... 15,77:1     ink-soft #3d454a ...... 8,54:1
     accent #0b4f6c ....... 7,81:1     accent-dark #073347 .. 11,66:1
     signal #7a4106 ....... 7,09:1     rule-strong #6e787e ... 3,94:1 (nur Kanten)
  Untergrund #dde3e7 (Band, Terminabschnitt):
     ink 13,94:1 · ink-soft 7,55:1 · accent 6,90:1 · accent-dark 10,31:1 ·
     signal 6,27:1 · rule-strong 3,49:1 (nur Kanten)
  Untergrund #ffffff (Fläche, Preisabschnitt, Karten, Eingabefelder):
     ink 18,05:1 · ink-soft 9,77:1 · accent 8,94:1 · accent-dark 13,35:1 ·
     signal 8,12:1 · rule-strong 4,52:1 (nur Kanten)
  Untergrund #08222c (dunkle Tafel: Trägerabschnitt und Fußbereich):
     panel-fg #eef3f4 .... 14,71:1     panel-muted #a6bcc4 ... 8,32:1
     panel-accent #7fc4e0 . 8,53:1     #ffffff .............. 16,46:1
  Auf Farbflächen:
     #ffffff auf accent-dark #073347 .... 13,35:1  (Schaltfläche)
     #ffffff auf cta-hover  #04212e ..... 16,64:1  (Schaltfläche, Zeigerkontakt)
  Kein Textwert unter 6,2:1 — die geforderte Schwelle liegt bei 4,5:1
  (WCAG 1.4.3), bedeutungstragende Kanten über 3:1 (WCAG 1.4.11).
  --color-rule (#ccd4d8) ist ausschließlich dekorativ und trägt keine
  Bedeutung; wo eine Linie Struktur trägt (Tabellen, Feldrahmen), steht
  --color-rule-strong.
*/

:root {
  /* Flächen */
  --color-paper: #edf0f2;
  --color-band: #dde3e7;
  --color-surface: #ffffff;

  /* Text */
  --color-ink: #12171a;
  --color-ink-soft: #3d454a;
  --color-accent: #0b4f6c;
  --color-accent-dark: #073347;
  --color-cta-hover: #04212e;
  --color-signal: #7a4106;

  /* Kanten */
  --color-rule: #ccd4d8;
  --color-rule-strong: #6e787e;

  /* Dunkle Tafel */
  --color-panel: #08222c;
  --color-panel-fg: #eef3f4;
  --color-panel-muted: #a6bcc4;
  --color-panel-accent: #7fc4e0;

  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-data: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Satzachse: Merkspalte · Steg · Satzspalte. Die Merkspalte bleibt in der
     Regel leer — sie ist der Grund, warum jede Überschrift, jede Tabelle und
     jeder Beleg weiter links beginnt als der Fließtext. Genau diese eine
     Kante gibt der Seite ihren Takt. */
  --spalte-marke: 9rem;
  --spalte-steg: 3.5rem;
  --spalte-satz: 36rem;
  --seite-max: 52rem; /* 9 + 3,5 + 36 + zweimal --space-3 */

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
}

/* Basis ---------------------------------------------------------------- */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Fließtextgrad 21 px, nicht 18. Zwei Gründe, beide nachgemessen:
   1. Die Zielgruppe liest lange Absätze am Bildschirm, oft auf älterem
      Gerät — 21 px in einer 36rem-Spalte ergibt rund 62 Zeichen je Zeile.
   2. Messbar am eigenen Prüfwerkzeug: Modul E1-07 misst den Kontrast aus
      dem gerenderten Bild. Bei 19 px Serifenschrift findet die
      Farbclusterung in vielen Zeilen zu wenig Text-Bildpunkte (Schwelle
      3 % je Kachel) und fällt auf die unsichere Bildstatistik zurück —
      60 Textelemente waren dadurch "nicht abschließend prüfbar" statt
      "erfüllt". Bei 21 px sind es 19, also der Stand vor der Umgestaltung.
      Kein Verstoß in beiden Fällen (der CSS-Wert bleibt 15,77:1), aber
      ein Prüfbetrieb, der seinen eigenen Bericht veröffentlicht, nimmt
      die entscheidbare Variante. */
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.3125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

/* Typografie ----------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  margin-top: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.35rem, 1.45rem + 3.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  max-width: 26ch;
  margin-bottom: var(--space-3);
}

h2 {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 30ch;
  margin-bottom: var(--space-3);
}

h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 34ch;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

p,
ul,
ol,
table {
  margin: 0 0 var(--space-2) 0;
}

ul,
ol {
  padding-left: 1.3em;
}

li + li {
  margin-top: 0.4em;
}

li::marker {
  color: var(--color-signal);
}

strong {
  font-weight: 700;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-accent-dark);
}

/* Sichtbarer Fokus auf ALLEN interaktiven Elementen — bewusst per :focus
   statt nur :focus-visible, damit ältere Browser ohne :focus-visible nie
   ohne Fokusring bleiben. Auf der dunklen Tafel und im Fußbereich wechselt
   die Ringfarbe (siehe unten), sonst stünde Petrol auf Nachtblau. */
a:focus,
button:focus,
input:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* "Gemessenes" — die Datenschrift. Alles, was eine Messgröße, ein Betrag,
   eine Fundstelle oder eine Nummer ist, steht in der Mono. Gewicht bewusst
   500 und nicht fett: die Auszeichnung soll erkennbar sein, ohne den Satz
   zu unterbrechen. */
/* Kein Umbruch innerhalb einer Messgröße. Zwei Gründe:
   1. Der Begriff trägt eine Unterstreichung — über zwei Zeilen gerissen
      zerfällt sie in zwei Striche und der Begriff sieht aus wie zwei.
   2. Messbar: Ein über zwei Zeilen umbrochenes Inline-Element spannt mit
      seinem Umgebungsrechteck beide Zeilen und überlappt dadurch das
      benachbarte. Bei 320 px meldete Modul E1-04 (Reflow) genau das als
      Kandidatenpaar. Ohne Umbruch entsteht die Überlappung nicht. */
.mess {
  font-family: var(--font-data);
  font-size: 0.88em;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-bottom: 2px solid var(--color-signal);
  padding-bottom: 0.05em;
}

/* Layout --------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4.5rem;
  background: var(--color-accent-dark);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.6em 1em;
  z-index: 100;
  transition: top 0.15s ease-in-out;
}

.skip-link:focus {
  top: 0.5rem;
}

.site-header {
  border-bottom: 1px solid var(--color-rule-strong);
  background: var(--color-paper);
}

.site-header__inner {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Wortmarke: der Betriebsname trägt das Gewicht, die Beschreibung läuft
   leichter mit. Solange kein Markenname feststeht, ist die Beschreibung
   die Marke — sie darf deshalb nicht wie Kleingedrucktes aussehen. */
.wordmark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink-soft);
  text-decoration: none;
}

.wordmark__name {
  font-weight: 700;
  color: var(--color-ink);
}

.wordmark:hover {
  color: var(--color-accent-dark);
}

.wordmark:hover .wordmark__name {
  color: var(--color-accent-dark);
}

.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  padding: 0.25em 0;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  border-bottom-color: var(--color-signal);
}

main {
  display: block;
}

/* Die Satzachse.
   Merkspalte | Steg | Satzspalte. Überschriften, Tabellen, Belege und der
   Merksatz spannen über beide Spalten und beginnen dadurch links AUSSERHALB
   des Fließtextes. Fließtext steht in der schmalen Spalte (rund 72 Zeichen
   je Zeile) — der wichtigste einzelne Hebel gegen "wirkt billig". */
.spalte {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: clamp(3.25rem, 6vw, 5.5rem) var(--space-3);
  display: grid;
  grid-template-columns: var(--spalte-marke) minmax(0, var(--spalte-satz));
  column-gap: var(--spalte-steg);
  align-content: start;
}

.spalte > * {
  grid-column: 2;
}

.spalte > h1,
.spalte > h2,
.spalte > table,
.spalte > .teile,
.spalte > .beleg,
.spalte > .merksatz {
  grid-column: 1 / -1;
}

/* Die Registermarke: ein kurzer Strich in der Merkspalte, dort wo ein
   Abschnitt beginnt. Er ersetzt die zehn gleich aussehenden Trennlinien
   quer über die Seite — eine Marke am Rand markiert einen Anfang, eine
   Linie quer durchs Blatt trennt nur. Rein dekorativ, kein Bedeutungsträger. */
.spalte::before {
  content: "";
  grid-column: 1;
  height: 4px;
  background: var(--color-signal);
  margin-bottom: var(--space-3);
  align-self: start;
}

/* Textspalte auf Dokumentseiten (Datenschutzhinweis): keine Merkspalte,
   die Seite ist ein Fließdokument und kein Verkaufstext. */
.prose {
  max-width: calc(var(--spalte-satz) + 2 * var(--space-3));
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

/* Der Titel eines Rechtsdokuments ist kein Aufmacher. Er steht kleiner als
   die H1 der Startseite — sechs Zeilen 56-Punkt-Schrift über einem
   Datenschutzhinweis wirken wie eine Werbeaussage, und das ist er nicht. */
.prose h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  max-width: none;
}

.prose h2 {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule-strong);
}

.prose h2:first-of-type {
  margin-top: var(--space-3);
  padding-top: 0;
  border-top: none;
}

/* Abschnitte und ihre Untergründe -------------------------------------- */

/* Vier Untergründe, jeder mit einer Bedeutung:
   Papier  = Prosa · Fläche = Zahlenwerk · Band = Handlung · Tafel = Vorbehalt. */
.abschnitt--preise {
  background: var(--color-surface);
}

.abschnitt--termin {
  background: var(--color-band);
}

/* Sprungziel des Handlungsaufrufs. Der Fokusring bleibt sichtbar — er ist
   die einzige Rückmeldung, dass der Sprung stattgefunden hat. */
.abschnitt--termin:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

/* Der Abschnitt mit den Selbstbeschränkungen steht auf der dunklen Tafel.
   Das ist Absicht: die unbequemste Stelle der Seite bekommt die
   selbstbewussteste Gestaltung, nicht die kleinste Schrift. */
.abschnitt--traeger {
  background: var(--color-panel);
  color: var(--color-panel-fg);
}

.abschnitt--traeger h2,
.abschnitt--traeger h3,
.abschnitt--traeger strong {
  color: #ffffff;
}

.abschnitt--traeger a {
  color: var(--color-panel-accent);
}

.abschnitt--traeger a:hover {
  color: #ffffff;
}

.abschnitt--traeger a:focus,
.site-footer a:focus {
  outline-color: var(--color-panel-accent);
}

.abschnitt--traeger .spalte::before {
  background: var(--color-panel-accent);
}

.abschnitt--auftakt .spalte {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
}

/* Der Vorspann trägt das Versprechen der Seite und ist deshalb der zweite
   Blickfang nach der Überschrift, nicht bloß größerer Fließtext. */
.vorspann {
  font-size: 1.25em;
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

/* Handlungsaufforderung ------------------------------------------------- */

/* Dreimal auf der Seite, immer im identischen Wortlaut, immer dasselbe
   Ziel: gleicher Name, gleiche Rolle, gleiche Gestalt. */
.cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: #ffffff;
  background: var(--color-accent-dark);
  border: 2px solid var(--color-accent-dark);
  padding: 0.85em 2rem;
  min-height: 3rem;
  text-decoration: none;
  cursor: pointer;
}

.cta:hover {
  color: #ffffff;
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}

.cta-block {
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}

.cta-zeile {
  font-family: var(--font-display);
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 28rem;
}

/* Beleg — jede Tatsachenbehauptung über Dritte trägt ihre Herkunft sichtbar
   mit, in derselben Form, in der ein Prüfbericht eine Fundstelle notiert.
   Zweimal auf der Seite, nicht öfter. */
.beleg {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  border-left: 4px solid var(--color-signal);
  padding: 0.2em 0 0.2em var(--space-2);
  margin: var(--space-3) 0;
  max-width: calc(var(--spalte-marke) + var(--spalte-steg) + var(--spalte-satz));
}

.beleg__adresse {
  font-family: var(--font-data);
  font-size: 0.92em;
  word-break: break-word;
}

/* Die vier Lieferteile ------------------------------------------------- */

/* Kein Fließtext, sondern vier Felder: Der Abschnitt beschreibt vier Dinge,
   die nebeneinander liegen und keine Reihenfolge haben. Der Ein-Pixel-Steg
   zwischen den Feldern ist die Kante eines Formularrasters, nicht ein
   Schattenwurf. */
.teile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule-strong);
  border: 1px solid var(--color-rule-strong);
  margin: var(--space-2) 0 var(--space-4) 0;
}

.teil {
  background: var(--color-surface);
  padding: var(--space-3);
}

/* Die Überschrift eines Feldes ist ein Feldname: klein, in der Datenschrift,
   in Versalien. Sie bleibt eine echte h3 und damit in der
   Überschriftennavigation. */
.teil h3 {
  font-family: var(--font-data);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-signal);
  margin: 0 0 var(--space-2) 0;
  max-width: none;
}

.teil p {
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0;
}

/* Ablauf: der einzige echte Ablauf auf der Seite -------------------------- */

/* Nummern stehen hier, weil der Inhalt tatsächlich eine Reihenfolge hat —
   nicht als Zierrat. Sie hängen links außerhalb des Textes und stehen in
   der Datenschrift, wie eine Schrittnummer im Prüfprotokoll. */
.ablauf {
  list-style: none;
  padding-left: 0;
  margin: var(--space-3) 0;
}

/* Bewusst KEIN Grid auf dem Listenpunkt: Der Punkt beginnt mit einem
   <strong> und läuft dann als reiner Text weiter. Ein Grid macht aus dem
   Text ein eigenes, anonymes Rasterfeld und schiebt ihn in die Zahlenspalte —
   jedes Wort landet auf einer eigenen Zeile. Deshalb hängt die Nummer
   absolut positioniert im Freiraum links, und der Punkt bleibt ein
   normaler Textblock. */
.ablauf > li {
  position: relative;
  padding-left: 4rem;
  margin: 0 0 var(--space-3) 0;
}

/* Die Ziffern stehen als Zeichenkette und nicht als counter().
   Das ist am eigenen Werkzeug gemessen, nicht Geschmack: Modul E1-09A
   (Dokumentsprache, SC 3.1.1) liest den BERECHNETEN Wert von `content`.
   Bei einer Zählerfunktion liefert der Browser dort nicht die gerenderte
   Ziffer, sondern den Funktionsausdruck — die Buchstabenfolge "counter"
   selbst. Das Modul zählt sie als erzeugtes Wort, der Fluchtweg F-05 geht
   auf "offen", und die Seite verliert ihren Erfüllungsbeleg für die
   Dokumentsprache (Status fällt von "erfüllt" auf
   "technisch_ok_ungeprueft"). Gerendert steht in beiden Fällen dasselbe
   da: 01 bis 05. Wir nehmen die Form, die unser eigenes Werkzeug lesen
   kann, und melden den Fehlbefund ans Schwesterprojekt.
   Fünf Schritte, weil das Textdokument fünf festlegt — kommt ein sechster
   dazu, gehört hier eine Zeile ergänzt. */
.ablauf > li:nth-child(1)::before { content: "01"; }
.ablauf > li:nth-child(2)::before { content: "02"; }
.ablauf > li:nth-child(3)::before { content: "03"; }
.ablauf > li:nth-child(4)::before { content: "04"; }
.ablauf > li:nth-child(5)::before { content: "05"; }

.ablauf > li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.75rem;
  font-family: var(--font-data);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-signal);
  border-top: 3px solid var(--color-signal);
  padding-top: 0.35em;
}

/* Der Auftakt eines Schrittes bleibt INLINE. Er ist der erste Satz des
   Punktes, keine eigene Überschrift — er darf hervorstechen, aber nicht
   allein auf seiner Zeile stehen. */
.ablauf > li > strong {
  font-family: var(--font-display);
  font-size: 1.02em;
  letter-spacing: -0.01em;
}

.zusatzliste li {
  margin-top: var(--space-2);
}

/* Merksatz: der eine Satz, der über den Preis entscheidet ---------------- */

/* Nicht fett gesetzt, sondern groß: eine Fettung im Fließtext betont, eine
   eigene Zeile in Überschriftengröße stellt fest. Das <strong> bleibt im
   Quelltext stehen (die Aussage IST hervorgehoben), erbt aber Gewicht und
   Grad des Absatzes — sonst stünde eine Fettung in einer Fettung. */
.merksatz {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-ink);
  border-top: 3px solid var(--color-signal);
  border-bottom: 1px solid var(--color-rule-strong);
  padding: var(--space-2) 0;
  margin: var(--space-4) 0;
}

.merksatz strong {
  font-weight: inherit;
  font-size: inherit;
}

/* Preistabellen --------------------------------------------------------- */

/* Keine Preisstaffel-Optik: keine hervorgehobene Spalte, keine Markierung
   einer Zeile, keine "Beliebt"-Fahne. Der Regelfall wird im Fließtext
   benannt, nicht grafisch. Was die Tabelle stattdessen bekommt, ist Luft,
   eine Zahlenspalte in der Datenschrift und Linien nur waagerecht — die
   Tabelle wird ausgedruckt und in eine Vergabeakte gelegt. */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 1rem;
}

caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: 0.5em;
}

th,
td {
  text-align: left;
  vertical-align: baseline;
  padding: 0.9em 1.2em 0.9em 0;
  border: 0;
  border-bottom: 1px solid var(--color-rule-strong);
}

.preisliste {
  margin: var(--space-2) 0 var(--space-4) 0;
}

/* Die Überschrift einer Tabelle teilt die Satzkante der Tabelle, nicht die
   des Fließtextes — sonst steht die Beschriftung eingerückt über ihrem
   eigenen Gegenstand. */
.abschnitt--preise .spalte > h3 {
  grid-column: 1 / -1;
  max-width: none;
}

.preisliste thead th {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-signal);
  border-bottom-width: 2px;
  padding-bottom: 0.6em;
}

.preisliste th[scope="row"] {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  width: 32%;
}

.preisliste td {
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.preisliste .betrag {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-align: right;
  white-space: nowrap;
  padding-right: 0;
}

.preisliste thead .betrag {
  font-size: 0.75rem;
}

/* Terminwunsch: der Vordruck an Stelle des Formulars --------------------- */

/* Hier stand ein Formular mit sieben Feldern und einer Absendeschaltfläche.
   Es ist ersatzlos entfallen, und das ist keine Sparmaßnahme: Der Server
   liefert ausschließlich Dateien aus und nimmt nichts entgegen. Eine
   Schaltfläche "absenden" auf einer Seite, die nichts entgegennehmen kann,
   ist ein Versprechen zu viel — und ein eingekaufter Formulardienst würde
   die Angaben des Besuchers an einen Dritten übertragen und damit genau die
   Datenschutzaussage aufheben, mit der diese Seite wirbt.

   An seiner Stelle steht der E-MAIL-ENTWURF SELBST, sichtbar gesetzt: An,
   Betreff, sieben Zeilen. Er ist zugleich die Vorschau auf das, was die
   Schaltfläche im E-Mail-Programm öffnet, UND der Rückfallweg für die
   Rechner, auf denen kein Programm mit "mailto:" verknüpft ist — dort
   passiert beim Klick nichts, und wer den Entwurf nur als Verweis hätte,
   stünde wieder vor einer toten Schaltfläche. Lesbar heißt hier
   abschreibbar.

   Untergrund Weiß = Zahlenwerk, wie bei Preistabelle und Lieferteilen; die
   Datenschrift trägt, was im Postfach landet. Keine neue Farbe: ink 18,05:1,
   ink-soft 9,77:1, signal 8,12:1 und rule-strong 4,52:1 auf #ffffff sind im
   Kopf dieser Datei bereits gerechnet. */
.vordruck {
  background: var(--color-surface);
  border: 1px solid var(--color-rule-strong);
  border-top: 4px solid var(--color-signal);
  padding: var(--space-3);
  margin-top: var(--space-4);
  max-width: 34rem;
}

.vordruck__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em var(--space-2);
  align-items: baseline;
  margin: 0 0 0.7em 0;
  padding-bottom: 0.7em;
  border-bottom: 1px solid var(--color-rule);
}

/* Feldname eines Vordrucks: klein, Datenschrift, Versalien — dieselbe Rolle
   und dieselbe Gestalt wie die Feldnamen der vier Lieferteile. */
.vordruck__marke {
  flex: 0 0 auto;
  min-width: 5.5rem;
  font-family: var(--font-data);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-signal);
}

.vordruck__wert {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--font-data);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

/* Die Beschriftung des Nachrichtenblocks ist eine echte h3 (siehe Kommentar
   im Markup) und sieht nur aus wie ein Feldname — genau wie bei den vier
   Lieferteilen. Sie bleibt damit in der Überschriftennavigation. */
.vordruck__marke--block {
  display: block;
  max-width: none;
  margin: var(--space-3) 0 var(--space-2) 0;
}

/* role="list" steht im Markup, weil manche Vorleseprogramme die
   Listensemantik fallen lassen, sobald das Listenpunktzeichen entfernt ist —
   dieselbe Vorsichtsmaßnahme wie beim Ablauf. Der Freiraum unter jeder Zeile
   ist die Schreibzeile: er bildet die Leerzeile ab, die der mailto-Rumpf
   zwischen den sieben Zeilen mitgibt. */
.vordruck__felder {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}

.vordruck__felder li {
  margin: 0 0 0.8em 0;
  padding: 0 0 1.5em 0;
  border-bottom: 1px solid var(--color-rule);
}

.vordruck__felder li:last-child {
  margin-bottom: 0;
}

.formular-hinweis {
  font-family: var(--font-display);
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 34rem;
}

/* E-Mail-Anschrift und Rufnummer brechen nicht um.
   Zwei Gruende, beide belegt:
   1. Eine ueber zwei Zeilen zerrissene Anschrift ist schwerer abzuschreiben
      und vorzulesen.
   2. Messbar: Bei den normativen Textabstaenden aus WCAG 1.4.12
      (Zeilenhoehe 1,5 / Buchstabe 0,12em / Wort 0,16em) umbrach die Anschrift
      in zwei Zeilen. Das Umgebungsrechteck eines so umbrochenen Inline-Links
      spannt beide Zeilen und schliesst den folgenden Rufnummern-Link zu 89 %
      ein — der Pruefkatalog wertet das als Ueberlappung (Modul E1-05,
      EN 9.1.4.12). Ohne Umbruch entsteht die Ueberlappung nicht.

   AUSGENOMMEN ist der Handlungsaufruf (.cta). Das ist nachgemessen, nicht
   vorsichtshalber: Seit der Aufruf selbst ein mailto-Verweis ist, griff diese
   Regel auch auf ihn. Bei 320 px wird der Aufruf zur vollbreiten Schaltflaeche
   (siehe unten), und "Terminwunsch als E-Mail schreiben" passt dort nicht in
   eine Zeile — mit nowrap ragte er 16 px ueber den Rand hinaus und die ganze
   Seite bekam waagerechtes Scrollen (Modul E1-04, Reflow: scrollWidth 336
   gegen clientWidth 320). Eine Schaltflaechenbeschriftung darf und muss
   umbrechen; die Begruendung oben gilt fuer Anschriften und Rufnummern im
   Fliesstext, nicht fuer sie. */
a[href^="mailto:"]:not(.cta),
a[href^="tel:"]:not(.cta) {
  white-space: nowrap;
}

/* Dokumentseiten (Datenschutzhinweis) ----------------------------------- */

.rechtstext address {
  font-style: normal;
  background: var(--color-surface);
  border-left: 4px solid var(--color-signal);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3) 0;
}

.rechtstext address p {
  margin: 0 0 0.9em 0;
}

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

.hinweis-kasten {
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
}

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

/* Aktenvermerk: Datums- und Zitationsangaben stehen in der Datenschrift,
   wie ein Eingangsstempel auf einem Vorgang. */
.stempel {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-signal);
  border: 1px solid var(--color-rule-strong);
  padding: 0.15em 0.6em;
  background: var(--color-surface);
}

.doc-meta {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fußbereich ------------------------------------------------------------ */

.site-footer {
  background: var(--color-panel);
  color: var(--color-panel-fg);
}

.site-footer__inner {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.site-footer__inner p {
  margin: 0;
}

.site-footer a {
  color: var(--color-panel-accent);
}

.site-footer a:hover {
  color: #ffffff;
}

.site-footer small {
  color: var(--color-panel-muted);
}

/* Reduzierte Bewegung wird respektiert — die Seite verwendet ohnehin keine
   Animation außer der Einblendung der Sprungmarke. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Schmale Fenster und starke Vergrößerung -------------------------------- */

/* Ab hier fällt die Merkspalte weg: Bei 200 % Vergrößerung auf einem
   1280er Fenster stehen 40rem zur Verfügung — dann gehört die Breite dem
   Text und nicht der Achse. */
@media (max-width: 54rem) {
  .spalte {
    grid-template-columns: minmax(0, 1fr);
  }

  .spalte > *,
  .spalte > h1,
  .spalte > h2,
  .spalte > table,
  .spalte > .teile,
  .spalte > .beleg,
  .spalte > .merksatz {
    grid-column: 1;
  }

  .spalte::before {
    grid-column: 1;
    width: var(--spalte-marke);
    margin-bottom: var(--space-2);
  }

  .beleg {
    max-width: none;
  }
}

@media (max-width: 46rem) {
  .teile {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  body {
    font-size: 1.1875rem;
  }

  .spalte,
  .prose {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .site-header__inner,
  .site-footer__inner {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  /* Schmale Fenster: Die Tabelle bleibt eine Tabelle und bekommt keinen
     waagerechten Scrollbereich — ein solcher Bereich wäre mit der Tastatur
     nicht erreichbar. Stattdessen darf jede Zelle umbrechen. */
  .preisliste {
    font-size: 0.9rem;
  }

  /* Textzellen duerfen bis auf ein Zeichen schrumpfen — nur so bleibt die
     Tabelle bei 320 px ohne waagerechten Scrollbereich, und ein solcher
     Bereich waere mit der Tastatur nicht erreichbar (Modul E1-04, Reflow).
     Die BETRAGSZELLE ist davon ausgenommen: dort erzeugt dasselbe
     Verhalten "3.9 / 00 / €" — eine Zahl, die in drei Zeilen zerfaellt,
     ist keine Zahl mehr. Ausgenommen wird nur `td.betrag`; die
     Spaltenueberschrift (`th`) darf und muss umbrechen, sonst sprengt
     "Preis je weiterer Nachpruefung" die Zeile. */
  .preisliste th,
  .preisliste td {
    padding: 0.6em 0.5em 0.6em 0;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Bei 320 px kostet die Versalien-Mono zu viel Breite: "UMFANG DER
     STICHPROBE" zwingt die mittlere Spalte auf Silbenreste herunter. Die
     Spaltenüberschrift wechselt deshalb auf die schmalere Sans in
     Grundschreibung — dieselbe Farbe, dieselbe Rolle, weniger Anspruch. */
  .preisliste thead th {
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .preisliste td.betrag {
    width: 28%;
    font-size: 0.9rem;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* Feste Spaltenanteile statt Verteilung nach Inhalt. Ohne sie zieht die
     längste Zeilenbeschriftung ("Webanwendung oder angemeldeter Bereich")
     die erste Spalte auf die Hälfte der Tabelle und lässt der mittleren
     Spalte 49 px — dort steht dann jedes Wort in Silbenresten. Gemessen,
     nicht geschätzt: die Spaltenbreiten werden unten nachgewiesen. */
  .preisliste th[scope="row"] {
    width: 30%;
    font-size: 0.95rem;
  }

  .ablauf > li {
    padding-left: 3rem;
  }

  .ablauf > li::before {
    width: 2.25rem;
  }

  .cta {
    display: block;
    text-align: center;
    width: 100%;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}