/* ==========================================================================
   seite.css — die gestaltenden Regeln (SPEC 9.1, 9.1.2, Anhang C S-6)

   Das zweite Stylesheet neben tokens.css. Es entsteht mit S-6, weil
   gestaltende Regeln nirgends sonst hindürfen: in tokens.css bricht die
   Prüfung aus S-5 darauf ab (dort stehen Werte in Variablen, keine Regeln),
   und für die Vorlagen gibt es keine Ausnahme — ein `style`-Attribut ist
   derselbe Verstoß an einer Stelle, an der ihn niemand sucht (D-2). Der Preis
   ist ein zweiter Abruf im Ladepfad; beide Dateien sind klein und kommen von
   derselben Domäne (W-7, B-27).

   ⚠️ **Hier steht kein einziger Gestaltungswert.** Jede Farbe, jeder Grad,
   jeder Abstand kommt als var() aus tokens.css (D-1, D-2, B-25). Zugelassen
   sind allein die Null und die 100 %: Beide sind Aussagen über den
   Bezugsrahmen und keine Stufe auf einer Skala.

   ⚠️ **Keine festen Umbruchpunkte** (W-8, D-10). Spaltenwechsel entstehen
   durch Umbruch, Größen über clamp() in den Tokens. Die einzigen
   Medienabfragen dieser Datei fragen nach der Systemeinstellung zur
   Bewegung (D-8) — das ist ein anderer Gegenstand als eine Breite.

   Abstände zwischen Absätzen sind bewusst nicht gesetzt: 9.1.1 führt dafür
   keine Rolle, und eine erfundene wäre schlechter als die Voreinstellung des
   Browsers.

   Aufbau: 1 Grundlagen · 2 Bausteine · 3 Kopfleiste · 4 Fußzeilen ·
   5 Startseite · 6 Fehlerseite · 7 Rechtstexte · 8 Bewegung
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Grundlagen
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  background-color: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-familie);
  font-size: var(--fs-fliesstext);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilenhoehe-fliesstext);
}

/* 1,2 für alle Überschriften, auch für die Akkordeon-Titelzeile: Deren
   gemessene 1,8 ist ein Fließtextwert und auf einer einzeiligen Überschrift
   falsch; die Höhe des Eintrags hält die Mindesthöhe (K-18).

   ⚠️ Das Gewicht steht seit dem 13.09.2026 hier (9.1.1, festgehalten am
   10.09.2026): **Hero-Überschrift, Abschnittsüberschrift und
   Fußzeilenüberschriften tragen --gewicht-halbfett**, nicht die
   Voreinstellung des Browsers — diese ist 700 und schlägt die 400 vom
   `body`. Beim ersten Vergleich mit der alten Seite war das der
   auffälligste Unterschied im Bild.

   Es steht an den Elementen und nicht an den einzelnen Klassen, weil es
   sonst bei jeder neuen Überschrift wieder fehlte — und **fehlen** ist genau
   das, was die Prüfung aus D-2 nicht finden kann: Sie meldet harte Werte,
   nicht fehlende; ein nicht gesetztes Gewicht hinterlässt nichts, was sie
   sehen könnte. Die Rechtstexte greifen denselben Mechanismus ab: Dort
   überschreiben h2 und h3 mit --gewicht-fett, h4 setzt halbfett selbst. */
h1,
h2,
h3 {
  line-height: var(--zeilenhoehe-ueberschrift);
  font-weight: var(--gewicht-halbfett);
}

img,
svg {
  max-inline-size: 100%;
}

/* --------------------------------------------------------------------------
   2 · Wiederkehrende Bausteine
   -------------------------------------------------------------------------- */

/* Der seitliche Mindestrand aus K-15 sitzt hier und nirgends sonst: Am Rand
   klebender Text ist auf gewölbten Bildschirmen schlecht lesbar. Am Desktop
   ändert sich nichts, weil dort ohnehin --breite-inhalt begrenzt.

   ⚠️ Zwei Berichtigungen vom 10.09.2026, die erste am 14.09.2026
   zurückgenommen.

   **Erstens die Kastenbreite.** Hier stand `max-inline-size: var(--breite-inhalt)`,
   und weil jedes Element dieser Seite `border-box` rechnet, zog der Seitenrand
   nach innen ab: Die Abschnitte liefen am Desktop auf 1136 statt auf die in
   9.1.1 gemessenen 1200 px. Die Antwort war die Summe aus Inhaltsbreite und
   zwei Seitenrändern — und damit lief die Sektion auf 1264 px, also um
   dieselben 64 px zu weit, nur nach außen (SPEC v0.127, 14.09.2026). Sichtbar
   war das allein an der Kopfleiste, weil sie als einziger Abschnitt keinen
   Einzug bekommt: Logo und Kontaktzeile standen an der Kante eines Kastens, den
   es nicht geben soll. **Der Kasten ist jetzt die Sektionsbreite, der Rand
   liegt innen** — und der Einzug in --abstand-block-x ist entsprechend von
   100 auf 68 px gesenkt, damit Rand und Einzug zusammen weiter die gemessenen
   100 px tragen und der Inhaltsblock seine 1000 px behält (D-6). Behoben am
   gemeinsamen Container und nicht an der Kopfleiste: Die Themenseiten in P2
   fänden den Fehler sonst wieder.

   **Zweitens der Inhaltsblock** (D-6, --abstand-block-x). Die Seite hat zwei
   Breitenebenen: die Sektion mit --breite-inhalt und darin einen Inhaltsblock,
   der um rund 5,2 % der Fensterbreite je Seite eingerückt ist. Die zweite
   Ebene fehlte vollständig; an ihr hingen vier Beobachtungen des
   Auftraggebers — Hero-Inhalt und Abschnittsüberschrift am linken Rand, das
   Akkordeon links statt mittig, die Fußzeilen-Trennlinie zu breit. Der Einzug
   sitzt am Randcontainer und nicht an den einzelnen Elementen: Sonst stünde er
   an jeder Stelle neu, und D-6 wäre wieder an vier Orten umgesetzt statt an
   einem. */
.inhaltsbreite {
  inline-size: 100%;
  max-inline-size: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: calc(var(--abstand-rand) + var(--abstand-block-x));
}

/* ⚠️ Die Kopfleiste bekommt den Einzug ausdrücklich nicht (D-6): Sie nutzt die
   volle Sektionsbreite — im Ist-Zustand stehen Logo und Kontaktzeile auf den
   gemessenen 1200 px und nicht auf dem eingerückten Block. Der Seitenrand aus
   K-15 bleibt ihr. */
.kopfleiste .inhaltsbreite {
  padding-inline: var(--abstand-rand);
}

/* Fließtext bleibt auf der Lesbarkeitsgrenze aus K-19. */
.textbreite {
  max-inline-size: var(--breite-text);
}

/* Fokusanzeige (K-9, B-24). Sie wird **nicht** entfernt; sie erscheint nur bei
   Tastaturbedienung. Der Abstand hält sie von der Fläche des Knopfes frei, die
   beim Überfahren die Farbe wechselt (K-6). */
:focus-visible {
  outline: var(--linie-staerke-fokus) solid var(--farbe-fokus);
  outline-offset: var(--abstand-fokus);
}

/* Verweise in Kopfleiste und Fußzeile: ruhend ohne Auszeichnung, beim
   Überfahren und bei Tastaturfokus unterstrichen (K-7). Unterstrichen
   bedeutet auf dieser Seite ausschließlich „anklickbar" (K-2). */
.verweis {
  color: inherit;
  text-decoration: none;
}

.verweis:hover,
.verweis:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: var(--linie-staerke);
  text-underline-offset: var(--abstand-unterstreichung);
}

/* Ein Verweis mit vorangestelltem Symbol (Briefumschlag, K-20). inline-flex,
   damit Symbol und Text auf einer Grundlinie sitzen und gemeinsam umbrechen
   statt einzeln. */
.mit-symbol {
  display: inline-flex;
  gap: var(--abstand-symbol-text);
  align-items: center;
}

/* Eingebettetes SVG (K-8, K-20): nimmt die Textfarbe über currentColor und
   bleibt bei jeder Größe scharf.
   ⚠️ Die Grundregel ist seit dem 13.09.2026 die **mitwachsende** Größe
   (9.1.1, --groesse-symbol): Ein Symbol, das mit dem Text eine Zeile bildet,
   wächst mit ihm. Das trifft hier den Briefumschlag in Kopfleiste und
   Fußzeile. Chevron und Doppelpfeil gehören zur Bedienung und nicht zur
   Zeile; sie greifen weiter unten auf --groesse-symbol-fest zurück. */
.symbol {
  flex: none;
  inline-size: var(--groesse-symbol);
  block-size: var(--groesse-symbol);
}

/* Bildbaustein (M-10, M-11, S-8). Der Rahmen ist der Bezugspunkt: Das Bild
   läuft mit object-fit: cover und wird je nach Fensterbreite beschnitten, die
   Kennzeichnung hängt deshalb am Rahmen und nicht am Bild — sonst wanderte sie
   aus dem Sichtfeld (K-25b). Die Höhe des Rahmens gibt der umgebende Bereich
   vor; der Hero-Bereich selbst entsteht mit S-7. */
.bild {
  position: relative;
}

/* M-11: als <img>, nie als CSS-Hintergrund. Nur so greifen die Formate und
   Größen aus <picture>, und nur ein <img> hat einen Alternativtext. */
.bild img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Kennzeichnung KI-erzeugter Bilder (K-25a bis K-25f) und ihr Eckschleier.

   Das Feld sitzt unten rechts im Rahmen und trägt den Abstand aus K-25b als
   Innenabstand; damit steht die Kennzeichnung auf jeder Breite an derselben
   Stelle. Es umschließt den Text genau — und nur deshalb kann der Schleier
   sich nach ihm richten (siehe unten).

   ⚠️ Die Stapelstufe ist die Umsetzung der getauschten Schichtreihenfolge
   aus K-25e (08.09.2026): Feld und Schleier liegen damit über allem, was die
   Seite sonst auf das Bild legt — auf der Startseite über dem
   Abdunklungsverlauf aus K-10, der als Geschwisterelement ohne eigene Stufe
   davor gezeichnet wird. Unter dem Verlauf erreichte die Kennzeichnung
   1,77:1 auf dem Telefon und war dort mit keiner Wertwahl zu heben, weil die
   Verlaufsstrecke auf schmalen Breiten auf null fällt. Der Wert gehört an
   diese Stelle und nicht an den Verlauf: Er gilt für jedes Bild des
   Bausteins, auch für eines ohne Verlauf darüber. */
.bild-kennzeichnung-feld {
  position: absolute;
  z-index: 1;
  inset-block-end: 0;
  inset-inline-end: 0;
  padding-block-end: var(--abstand-rand);
  padding-inline-end: var(--abstand-rand);
}

/* Weiß mit reduzierter Deckkraft, leicht gesperrt — auffindbar, wenn man
   sucht, nicht auffällig, wenn man nicht sucht (K-25c, K-25d). `relative`
   allein deshalb, damit der Text über dem Schleier liegt; die Deckkraft gilt
   nur für ihn und nie für den Schleier darunter. */
.bild-kennzeichnung {
  position: relative;
  margin: 0;
  color: var(--farbe-text-invers);
  font-size: var(--fs-kennzeichnung);
  letter-spacing: var(--laufweite-kennzeichnung);
  opacity: var(--deckkraft-kennzeichnung);
}

/* Eckschleier (K-25f): sichert den Kontrast unabhängig davon, was der
   Beschnitt unten rechts stehen lässt.

   ⚠️ Anliegende Form, festgelegt am 08.09.2026: Über dem Textkasten liegt der
   Schleier **voll** an und läuft erst von dessen Kanten nach außen bis zum
   Feldrand aus. Die zuvor gebaute Form lief elliptisch vom Eckpunkt nach
   innen aus und trug an der Textstelle fast nichts — gemessen 1,55:1 selbst
   bei 75 %, weil die Kennzeichnung nahe am Rand des Feldes steht.

   Gebaut aus drei Flächen, die zusammen das Feld
   --breite-eckschleier × --hoehe-eckschleier füllen: dieses Element deckt den
   Textkasten samt Abstand bis zur Ecke voll, ::before füllt den Streifen
   links davon, ::after den darüber. Die Bezugsgröße `100 %` ist dabei genau
   das, was in Tokens nicht steht — die Breite des gesetzten Textes; sie
   kommt aus dem umschließenden Feld und muss deshalb nirgends geschätzt
   werden.

   Die Deckkraft steht am Element und nicht im Farbstopp: So bleibt es bei den
   Rollen aus 9.1.1, ohne dass im Stylesheet ein Farbwert entsteht; sie gilt
   für die Pseudoelemente mit, weil Deckkraft die Gruppe erfasst.

   Schichtreihenfolge nach K-25e: Bild, darüber der Abdunklungsverlauf des
   Hero-Bereichs, darüber Schleier und Kennzeichnung. Der Schleier wandert
   mit der Kennzeichnung über den Verlauf — bliebe er darunter, dunkelte der
   Verlauf ihn ab und die Messung in K-25f stimmte nicht mehr. */
.bild-eckschleier {
  position: absolute;
  inset: 0;
  background-color: var(--farbe-hero-abdunklung);
  opacity: var(--deckkraft-eckschleier);
  pointer-events: none;
}

/* Streifen links des Textkastens: waagerecht auslaufend, senkrecht mit
   derselben Kurve wie ::after — sonst bekäme der Schleier über der linken
   oberen Ecke eine Kante. Der senkrechte Anteil steht als Maskenverlauf, weil
   sich zwei Verläufe nur so vervielfachen lassen; sein Wendepunkt ist die
   Oberkante des Textkastens, also die Feldhöhe abzüglich Abstand und
   Zeilenhöhe der Kennzeichnung. ⚠️ Die Zeilenhöhe rechnet seit dem 10.09.2026
   mit --fs-kennzeichnung und nicht mehr mit --fs-klein: Die Maske muss
   denselben Grad rechnen wie die Schrift, sonst wandert der Wendepunkt von der
   Oberkante des Textkastens weg und der Schleier liegt nicht mehr an. */
.bild-eckschleier::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 100%;
  inline-size: calc(var(--breite-eckschleier) - 100%);
  block-size: var(--hoehe-eckschleier);
  background-image: linear-gradient(to right, transparent, var(--farbe-hero-abdunklung));
  mask-image: linear-gradient(
    to bottom,
    transparent,
    var(--farbe-hero-abdunklung)
      calc(
        var(--hoehe-eckschleier) - var(--abstand-rand) - var(--fs-kennzeichnung) *
          var(--zeilenhoehe-fliesstext)
      )
  );
}

/* Streifen über dem Textkasten, senkrecht auslaufend. */
.bild-eckschleier::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: calc(var(--hoehe-eckschleier) - 100%);
  background-image: linear-gradient(to bottom, transparent, var(--farbe-hero-abdunklung));
}

/* Knopf nach K-5 und K-6: kein Eckenradius, keine feste Breite, Mindesthöhe
   als Trefferfläche. Der Schriftgrad ist --fs-klein (16 px); ein
   Schriftgewicht wird bewusst nicht gesetzt, 9.1.1 nennt für den Knopf
   keines.

   ⚠️ Der **Ruhezustand** ist seit der Berichtigung vom 10.09.2026 weißer
   Grund mit schwarzem Text (9.1.1, --farbe-knopf-grund). Bis dahin stand hier
   Schwarz auf Weiß, abgeleitet aus K-6 („Text bleibt weiß"), weil der
   Ruhezustand nirgends belegt war; die Messung an der alten Seite widerlegt
   die Ableitung. Der **Hover** bleibt unverändert Petrol mit weißem Text
   (K-6) — damit wechselt beim Überfahren jetzt auch die Textfarbe, Weiß auf
   Petrol hält 5,36:1. */
.knopf {
  display: inline-flex;
  gap: var(--abstand-symbol-text);
  align-items: center;
  justify-content: center;
  min-block-size: var(--hoehe-ziel-min);
  padding-block: var(--abstand-knopf-y);
  padding-inline: var(--abstand-knopf-x);
  border: 0;
  border-radius: 0;
  background-color: var(--farbe-knopf-grund);
  color: var(--farbe-knopf-text);
  font-size: var(--fs-klein);
  text-decoration: none;
  transition:
    background-color var(--dauer-uebergang),
    color var(--dauer-uebergang);
}

/* ⚠️ Für die Beschriftung beim Überfahren führt 9.1.1 keine eigene Rolle —
   die Tabelle beschreibt den Zustand („Petrol mit weißem Text"), benennt ihn
   aber nicht. Genommen wird deshalb --farbe-text-invers, die vorhandene Rolle
   für Text auf dunklem Grund; eine neue Rolle anzulegen wäre nach AC-4 erst
   eine Änderung der SPEC. Gemeldet, nicht still gelöst. */
.knopf:hover {
  background-color: var(--farbe-knopf-grund-hover);
  color: var(--farbe-text-invers);
}

/* Der Doppelpfeil gehört zum Knopf und nicht zur Zeile: feste Größe
   (9.1.1, --groesse-symbol-fest, neu am 13.09.2026). Er wandert beim
   Überfahren leicht nach rechts (K-8). */
.knopf .symbol {
  inline-size: var(--groesse-symbol-fest);
  block-size: var(--groesse-symbol-fest);
  transition: translate var(--dauer-uebergang);
}

.knopf:hover .symbol {
  translate: var(--weg-pfeil-hover);
}

/* --------------------------------------------------------------------------
   3 · Kopfleiste

   100 px hoch in #F0F0F0 (9.1.1), als **Mindest**höhe (D-7).

   ⚠️ **Sie läuft beim Scrollen mit** (K-28, neu am 13.09.2026): in voller
   Höhe und auf allen Breiten, wie im Original. Im ersten Sichtabgleich
   übersehen, weil ein Bildschirmfoto es nicht zeigt. Die beiden Folgen sind in
   K-28 benannt und bewusst hingenommen — die Leiste belegt auf schmalen
   Geräten dauerhaft 100 px, und sie verdeckt Sprungziele innerhalb der Seite,
   die es in P1 noch nicht gibt.

   ⚠️ **Keine Trennlinie nach unten.** K-27 verlangte eine und ist am
   13.09.2026 zurückgenommen: Im Nachbau war sie nicht wahrnehmbar — der
   Grauton von --farbe-trennlinie stammt von der Akkordeonlinie, die auf Weiß
   liegt, und setzt sich gegen den Grauton der Leiste kaum ab. Mit der
   mitlaufenden Leiste ist die Begründung des Eintrags ohnehin entfallen.
   -------------------------------------------------------------------------- */

/* Die Stapelstufe gehört zur mitlaufenden Leiste: Ohne sie liefe der
   Hero-Inhalt beim Scrollen darüber hinweg, weil er später im Markup steht und
   ebenfalls positioniert ist. Sie ist Struktur und kein Gestaltungswert
   (D-2) — die Prüfung aus S-5 führt `z-index` ausdrücklich so. */
.kopfleiste {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background-color: var(--farbe-kopfleiste-grund);
}

/* ⚠️ **Berichtigt am 14.09.2026 mit K-29 in v0.114:** Logo und Kontaktzeile
   stehen an den **Außenkanten der Sektion** — Logo links, Kontaktzeile rechts.
   Die Fassung davor setzte beide mittig in ihre Bildschirmhälfte, weil K-29
   das so beschrieb; die gesicherten Quelldateien der alten Seite widerlegen es.
   Den Seitenrand liefert `--abstand-rand` über `.kopfleiste .inhaltsbreite`
   oben, nicht eine eigene Rolle dieser Regel.

   `space-between` und kein `margin-inline-start: auto` an der Kontaktzeile:
   Auf schmalen Breiten bricht die Leiste um, und dann trägt jede Zeile nur
   noch ein Element. `space-between` stellt beide an dieselbe linke Kante,
   `auto` schöbe die Kontaktzeile allein nach rechts — eine Anordnung, die
   K-29 für die einzeilige Leiste beschreibt und für die umgebrochene nicht. */
.kopfleiste-inhalt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-symbol-text);
  align-items: center;
  min-block-size: var(--hoehe-kopfleiste);
}

/* 9.1.1 misst die Leiste, nicht das Logo; --hoehe-logo lässt oben wie unten
   Luft. */
.kopfleiste-logo {
  display: flex;
}

/* ⚠️ **Ausgleich des Leerraums der Zeichenfläche, 14.09.2026** (9.1.1 zu
   --hoehe-logo). Die gelieferte Datei führt viewBox 0 0 680 200, die Zeichnung
   darin steht aber nur von 13,309 bis 663,104 waagerecht und von 17,846 bis
   182,158 senkrecht — nachgemessen an den Pfaden der Datei, Kurvenextrema
   eingerechnet. Ohne Ausgleich kam die Zeichnung bei 80 px Anzeigehöhe auf
   65,7 px und ließ oben wie unten rund sieben Pixel Luft; das Logo wirkte
   kleiner als im Original.

   ⚠️ **Ausgeglichen wird beim Einpassen, die Datei bleibt unverändert.** Das
   Feld ist so groß wie die Zeichnung, das Bild wird im Verhältnis
   200 / 164,312 darüber hinaus vergrößert und um den Leerraum nach links und
   oben geschoben; was übersteht, schneidet das Feld ab. Der Schnitt liegt
   genau auf der gemessenen Zeichenfläche — es geht nichts von der Zeichnung
   verloren. `max-inline-size: none` hebt die Grundregel für Bilder auf, die
   das Bild sonst auf die Feldbreite zurückstauchte.

   Die Zahlen sind keine Gestaltungswerte und darum keine Rollen (D-1): Sie
   sind Maße der gelieferten Datei, wie die Angaben width und height am Bild.
   Der einzige Gestaltungswert ist --hoehe-logo, und alles andere hängt
   daran. */
.kopfleiste-logo-feld {
  display: block;
  overflow: hidden;
  inline-size: calc(var(--hoehe-logo) * 649.795 / 164.312);
  block-size: var(--hoehe-logo);
}

.kopfleiste-logo img {
  display: block;
  max-inline-size: none;
  inline-size: calc(var(--hoehe-logo) * 680 / 164.312);
  block-size: calc(var(--hoehe-logo) * 200 / 164.312);
  margin-block-start: calc(var(--hoehe-logo) * -17.846 / 164.312);
  margin-inline-start: calc(var(--hoehe-logo) * -13.309 / 164.312);
}

.kopfleiste-kontakt {
  font-size: var(--fs-klein);
}

/* --------------------------------------------------------------------------
   4 · Fußzeilen — zwei Varianten in einer Grundvorlage (K-11)

   `fuss-voll` steht auf Startseite, Impressum und Datenschutz und ist
   **einteilig**: kein abgesetzter unterer Balken, die Copyright-Zeile aus K-12
   steht im selben Block. `fuss-schmal` trägt nur die Fehlerseite (K-14).
   -------------------------------------------------------------------------- */

/* ⚠️ Der Fließtext der Fußzeile läuft seit dem 13.09.2026 auf die **eigene**
   Rolle --fs-fusstext (20 px) und nicht mehr auf --fs-fliesstext. K-19 hat am
   10.09.2026 festgehalten, dass die linke Fußzeilenspalte im Original 20 px
   misst — das war zunächst der Fließtextgrad der Seite. Mit dessen Senkung
   auf 18 px am selben Tag hätte die Fußzeile die Senkung stillschweigend
   mitgemacht, obwohl dort 20 px gemessen sind; 9.1.1 führt dafür jetzt eine
   Rolle statt einer Ausnahme, weil beide Grade nebeneinander bestehen. Die
   Copyright-Zeile bleibt davon ausgenommen, siehe unten. */
.fusszeile {
  background-color: var(--farbe-akzent);
  color: var(--farbe-text-invers);
  font-size: var(--fs-fusstext);
}

/* Auf Petrol ist die weiße Fokusanzeige zwingend, nicht wahlweise: Petrol auf
   Petrol ergibt 1,0:1 (K-9). */
.fusszeile :focus-visible {
  outline-color: var(--farbe-fokus-invers);
}

/* ⚠️ Der untere Innenabstand ist seit dem 13.09.2026 --abstand-copyright
   (32 px) und nicht mehr --abstand-abschnitt-unten (9.1.1). Dort griff bisher
   der Abstand am Abschnittsende mit 64 px, und unter der Copyright-Zeile stand
   sichtbar mehr Raum als über ihr — derselbe Wert gehört auf beide Seiten
   der Zeile. Oben bleibt es beim Abschnittsabstand: Dort grenzt die Fußzeile
   an den Inhalt, nicht an die Zeile. */
.fusszeile-voll {
  padding-block-start: var(--abstand-abschnitt-oben);
  padding-block-end: var(--abstand-copyright);
}

/* Spaltenwechsel per Umbruch, ohne festen Umbruchpunkt (W-8). Der
   Spaltenabstand entscheidet zugleich, bei welcher Breite umgebrochen wird
   (Q-137).

   ⚠️ **Einzug der Spalten, 14.09.2026.** Die beiden Spalten standen auf den
   Kanten des Inhaltsblocks. Am Desktop erreichte die linke dort ihre
   Obergrenze aus K-19, und `space-between` schob den Rest des Raumes in die
   Lücke: bei 1920 px 101,4 statt der 64 px aus --abstand-fuss-spalten. Der
   Einzug nimmt beiden Spalten je einen Seitenrand ab, die linke bleibt damit
   unter ihrer Obergrenze, und der Spaltenabstand ist wieder der, der in der
   Rolle steht.

   Es ist **--abstand-rand** und keine eigene Rolle: Der Einzug soll derselbe
   Wert sein, den die Kopfleiste als Seitenrand trägt, und nicht nur heute
   zufällig gleich groß. Wer den einen ändert, ändert den anderen mit.

   Er sitzt an den Spalten und nicht am Randcontainer: Die Trennlinie über der
   Copyright-Zeile bleibt auf der Breite des Inhaltsblocks und steht danach je
   Seite um einen Seitenrand über die Spalten hinaus — so steht sie im
   Original. */
.fusszeile-spalten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-fuss-spalten);
  justify-content: space-between;
  padding-inline: var(--abstand-rand);
}

.fusszeile-spalte {
  flex: 1 1 var(--breite-text);
  max-inline-size: var(--breite-text);
}

/* Die zweite Spalte fasst nur Anschrift und Verweise; sie nimmt die Breite
   ihres Inhalts und streitet nicht mit der ersten darum. Der Umbruch tritt
   ein, sobald beide nebeneinander nicht mehr auf ihre Ausgangsbreite kommen —
   ohne festen Umbruchpunkt.
   ⚠️ Sie läuft seit dem 13.09.2026 auf --fs-klein (16 px, 9.1.1):
   Anschrift, Rufnummer und die drei Verweise messen im Original 16 px und
   nicht die 20 px des Fußzeilen-Fließtextes aus --fs-fusstext. Der Grad
   steht an der Spalte und nicht an jedem der drei Elemente; die Überschrift
   hebt ihn mit --fs-nebentitel weiter unten wieder an. */
.fusszeile-spalte-schmal {
  flex: 0 1 auto;
  font-size: var(--fs-klein);
}

/* ⚠️ **Berichtigt am 14.09.2026: Die beiden Spalten brachen auf jeder Breite
   um.** Die Ausgangsbreite der linken Spalte war --breite-text und damit
   728,5 px bei 20 px Schrift; zusammen mit 64 px Spaltenabstand und den
   212,7 px, die die rechte Spalte damals für ihre längste Zeile brauchte,
   sind das 1005,2 px. Der Inhaltsblock war nach D-6 aber höchstens 1000 px
   breit — es fehlten fünf Pixel, und "Übersicht" rutschte unter "Optimale
   Förderung".
   Sichtbar wurde es erst mit --fs-fusstext: Bei 18 px ergaben dieselben 58ch
   nur 655,6 px und die Rechnung ging auf.

   **Die Ausgangsbreite ist jetzt --breite-fuss-text**, die Breite des
   Textblocks, der tatsächlich in dieser Spalte steht (9.1.1). --breite-text
   war dort von Anfang an die falsche Rolle: K-19 ist eine **Obergrenze** für
   die Zeilenlänge und keine Ausgangsbreite für eine Spalte. Als Obergrenze
   steht sie unverändert an .fusszeile-spalte. Die Spalte wächst mit flex-grow
   weiter über den Textblock hinaus und füllt die Zeile wie zuvor; verändert
   ist allein, ab wann sie umbricht — bei 943 px Fensterbreite statt immer.
   Kein fester Umbruchpunkt (W-8): Der Wechsel ergibt sich aus Rollenwerten,
   nicht aus einer Media Query.

   ⚠️ **Beide Zahlen sind am 14.09.2026 nachgemessen**, weil die
   ursprünglichen für einen Schriftgrad galten, den die rechte Spalte nicht
   mehr trägt: Sie läuft seit dem 13.09.2026 auf --fs-klein, und ihre
   längste Zeile — die Rufnummer — misst dort **170,1 px** statt der 212,7 px
   bei 20 px Schrift. Die daraus abgeleitete Umbruchbreite von 987 px ist
   damit ebenfalls hinfällig, und zweimal hat sich seither auch der Raum
   geändert, um den es geht: Die Spalten rücken um je einen Seitenrand ein,
   und der Randcontainer trägt den Seitenrand seit SPEC v0.127 innerhalb der
   Sektion. Am Desktop bleiben den Spalten damit 936 statt 1000 px. Gerechnet
   gegen 502,4 px Ausgangsbreite (40ch bei 20 px Schrift), 64 px
   Spaltenabstand und die 170,1 px der rechten Spalte brechen sie unterhalb
   von **943 px Fensterbreite** um; bei 1920 px bleiben 199,5 px Reserve. */
.fusszeile-spalte-breit {
  flex-basis: var(--breite-fuss-text);
}

/* ⚠️ Der Textblock der linken Spalte ist seit dem 13.09.2026 eigens begrenzt
   (--breite-fuss-text, rund 503 px bei 20 px Schrift). Am Original gemessen;
   die Spalte selbst ist mit 651,7 px breiter, der Text darin steht schmaler.
   Ohne eigene Breite füllte er die ganze Spalte. Begrenzt wird der **Text**
   und nicht die Spalte: An deren Breite hängt der Umbruch der Fußzeile
   (Q-137), und der soll sich dadurch nicht verschieben. */
.fusszeile-spalte-breit p {
  max-inline-size: var(--breite-fuss-text);
}

/* ⚠️ Zwei Überschriftengrade, seit dem 13.09.2026 (9.1.1, --fs-nebentitel).
   Die alte Seite führt in der Fußzeile 37 px links und 28 px rechts, und der
   Unterschied trägt dort die Hierarchie; bis dahin standen beide auf
   --fs-panel-titel. Das Gewicht kommt aus der Grundregel für h1 bis h3. */
.fusszeile-titel {
  margin-block: 0 var(--abstand-titel-inhalt);
  font-size: var(--fs-abschnittstitel);
}

.fusszeile-nebentitel {
  font-size: var(--fs-nebentitel);
}

/* Die E-Mail-Adresse ist der auffälligste Text der Fußzeile, und das ist
   Absicht: der einzige Kontaktweg der Seite (W-13). Gemessen 26 px, auf der
   Skala 25 (9.1.1, --fs-kontaktzeile, neu am 10.09.2026). */
.fusszeile-kontaktzeile {
  font-size: var(--fs-kontaktzeile);
}

/* Die zweite Aufforderungszeile trägt Gewicht 500 (9.1.1, Schriftgewichte). */
.hervorgehoben {
  font-weight: var(--gewicht-halbfett);
}

.fusszeile-verweise {
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}

/* Die Trennlinie geht auf die Breite des **Inhaltsblocks** — auf
   --breite-inhalt abzüglich --abstand-block-x je Seite (K-11, berichtigt am
   10.09.2026). Sie braucht dafür keine eigene Breite: Die Zeile steht im
   Randcontainer, und dessen Innenabstand ist genau dieser Einzug. Hier stand
   bis zum 13.09.2026, die Linie gehe auf die **volle** Inhaltsbreite, weil
   eine eigene Breite die gestrichenen 1000 px zurückgeholt hätte; das
   Argument ist entfallen — 1000 px sind keine Sonderbreite für eine Linie,
   sondern die Breite des Inhaltsblocks, an dem auch Hero, Akkordeon und
   Fußzeilenstapel hängen (D-6). Sie sitzt am Kopf der Copyright-Zeile, weil
   `fuss-voll` einteilig ist.

   ⚠️ Unter der Linie steht --abstand-copyright (32 px) und nicht ein zweites
   Mal --abstand-fuss-trennlinie (9.1.1, neu am 10.09.2026): Bei deren damaligen
   64 px ergaben die beiden zusammen 128 px und stellten die Zeile zu hoch; jene
   Rolle ist der Abstand **zur** Linie, nicht auf beiden Seiten.

   Die Zeile ist mittig gesetzt und läuft auf --fs-klein — beides steht in
   der Herleitung von --abstand-copyright: 90 px Balkenhöhe, mittig gesetzte
   Zeile, 16 px Schrift bei Faktor 1,6. */
.fusszeile-copyright {
  margin-block-end: 0;
  margin-block-start: var(--abstand-fuss-trennlinie);
  padding-block-start: var(--abstand-copyright);
  border-block-start: var(--linie-staerke) solid var(--farbe-trennlinie);
  font-size: var(--fs-klein);
  text-align: center;
}

/* K-14: ausschließlich Impressum und Datenschutz, ohne Kontaktaufforderung
   und ohne Textblock. 90 px als Mindesthöhe (D-7). */
.fusszeile-schmal .inhaltsbreite {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-fuss-spalten);
  align-items: center;
  justify-content: center;
  min-block-size: var(--hoehe-fuss-schmal);
}

/* --------------------------------------------------------------------------
   5 · Startseite (9.1, 9.1.2)

   Hero nach K-10 und K-16, Abschnitt „Services" mit dem Akkordeon nach K-3,
   K-4 und K-22, Hinweisblock nach K-21.
   -------------------------------------------------------------------------- */

/* Der Inhalt sitzt senkrecht mittig in einer Mindesthöhe von 550 px; die
   Asymmetrie des Ist-Zustands (64 px oben, 45 px unten) ist ein Nebenprodukt
   der festen Höhe und keine Gestaltungsabsicht (K-16, D-7). Der Innenabstand
   ist die Untergrenze, nicht die Setzung: Bei längerem Text oder größerer
   Grundschrift wächst der Bereich mit.

   Weißer Text auf dem abgedunkelten Bild (9.1.1); der Kontrast ist gemessen
   und wird bei jedem Lauf nachgerechnet (K-26, tools/kontrast-pruefen.py). */
/* ⚠️ `isolation` schließt den Stapelraum des Hero ab (seit K-28, 13.09.2026):
   Die Kennzeichnung trägt nach K-25e eine eigene Stufe, und ohne diesen
   Abschluss läge sie im Stapelraum der Seite auf derselben Höhe wie die
   mitlaufende Kopfleiste und stünde beim Scrollen darüber. Innerhalb des Hero
   ändert sich dadurch nichts — die Schichtfolge aus K-25e bleibt, wie sie
   ist. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-block-size: var(--hoehe-hero);
  padding-block: var(--abstand-hero-y);
  color: var(--farbe-text-invers);
}

/* Der Bildrahmen füllt den Hero-Bereich; das Bild darin läuft mit
   object-fit: cover und wird je nach Fensterbreite beschnitten. Die
   Kennzeichnung hängt am Rahmen und wandert deshalb nicht mit dem Beschnitt
   aus dem Sichtfeld (K-25b, M-11). */
.hero .bild {
  position: absolute;
  inset: 0;
}

/* Abdunklungsverlauf nach K-10: am rechten Rand schwach, über
   --breite-hero-verlauf nach links auf den starken Wert ansteigend, links
   davon konstant stark. Waagerecht, nicht schräg: Ein schräger Verlauf
   dunkelte ausgerechnet die Ecke der Kennzeichnung am wenigsten ab. Nicht in
   Prozent, weil ein fester Anteil auf schmalen Breiten mitten durch die
   Textspalte liefe; auf schmalen Breiten wird die Strecke 0 und der Hero ist
   gleichmäßig stark abgedunkelt — ohne festen Umbruchpunkt (W-8).

   ⚠️ Er liegt über dem Bild, seit dem Tausch der Schichtreihenfolge am
   08.09.2026 aber **unter** Kennzeichnung und Eckschleier (K-25e): Diese
   tragen eine Stapelstufe, er bewusst keine. Eine Stufe hier hobe ihn wieder
   darüber und nähme den Tausch zurück. Er senkt damit nur noch den
   Hero-Fließtext, dessen Untergrund er abdunkelt. Wird er geändert, ist die
   Messung nach K-25d und K-26 zu wiederholen (B-28) — die Prüfung im
   Lint-Job erzwingt das. */
.hero-verlauf {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to left,
    var(--farbe-hero-verlauf-schwach),
    var(--farbe-hero-verlauf-stark) var(--breite-hero-verlauf)
  );
  pointer-events: none;
}

/* `relative` allein, damit der Inhalt über dem Verlauf liegt. */
.hero-inhalt {
  position: relative;
}

.hero-titel {
  margin-block: 0 var(--abstand-titel-inhalt);
  font-size: var(--fs-hero);
}

/* ⚠️ Der Hero-Absatz hat seit dem 13.09.2026 eine **eigene** Breite und
   folgt nicht mehr --breite-text (9.1.1, --breite-hero-text; K-19, zweite
   Ausnahme). Er muss sich sichtbar vom Titel absetzen: Der längste
   Titelsatz misst rund 550 px, und mit der auf 70 Zeichen begrenzten
   Fließtextbreite bliebe bei 18 px kaum ein Unterschied — im Original sind
   es rund 160 px. Die Zeile trägt damit etwa 76 Zeichen; die
   Lesbarkeitsgrenze aus K-19 gilt unverändert für die Rechtstexte und die
   Fußzeile, wo sie gemeint ist. */
/* ⚠️ Der Abstand zum Knopf ist seit dem 13.09.2026 gesetzt
   (--abstand-hero-knopf, 40 px). Vorher stand dort die Voreinstellung des
   Browsers mit 18 px — eine fehlende Angabe, die durchlief, weil die Prüfung
   aus D-2 harte Werte meldet und keine fehlenden. Gesetzt wird allein der
   Abstand **nach unten**: nach oben führt 9.1.1 für den Hero-Absatz keine
   Rolle. */
.hero-absatz {
  max-inline-size: var(--breite-hero-text);
  margin-block-end: var(--abstand-hero-knopf);
}

/* Auf dem Bild ist die weiße Fokusanzeige zwingend, nicht wahlweise (K-9). */
.hero :focus-visible {
  outline-color: var(--farbe-fokus-invers);
}

.abschnitt {
  padding-block: var(--abstand-abschnitt-oben) var(--abstand-abschnitt-unten);
}

/* ⚠️ **Mittig in ihrem Feld** (K-29, neu am 13.09.2026). Im Original steht
   die Überschrift linksbündig zum Akkordeon, das dort 1014 px breit war; im
   Nachbau ist das Akkordeon mit --breite-akkordeon 800 px breit und mittig im
   Inhaltsblock gesetzt, sodass eine linksbündige Überschrift links darüber
   hinausragte. Mittig gesetzt liegen ihre Kanten wieder symmetrisch zum
   Akkordeon.

   ⚠️ Der Abstand nach unten ist --abstand-titel-akkordeon (48 px) und nicht
   --abstand-titel-inhalt (32 px), 9.1.1 in der Fassung vom 13.09.2026. Der
   hier zuvor vermerkte Widerspruch zu K-17 ist mit v0.113 entschieden: Die
   Rolle stand auf 64 px, und mit 64 px oben wie unten schwebte die Überschrift
   wieder zwischen zwei gleichen Abständen — dem Zustand, den K-17 abschaffen
   will. Seine 32 px wirkten im Nachbau gedrängt, sein unterer Wert ist deshalb
   auf 48 px angehoben; die Absicht des Eintrags bleibt. */
.abschnittstitel {
  margin-block: 0 var(--abstand-titel-akkordeon);
  font-size: var(--fs-abschnittstitel);
  text-align: center;
}

/* K-22: Das Akkordeon ist mit 800 px weiterhin schmaler als die gemessenen
   1014 px — die waren gesetzt, um die Seite zu strecken.
   ⚠️ Es geht seit dem 13.09.2026 auf --breite-akkordeon und nicht mehr auf
   --breite-text (9.1.1, K-19 zweite Ausnahme). An der Fließtextbreite
   hängend brach die Titelzeile des zweiten Eintrags um; **eine Titelzeile ist
   kein Fließtext**, und mit dem Fließtext auf 18 px wäre die Spalte noch
   schmaler geworden.
   ⚠️ Es steht **mittig im Inhaltsblock** (K-22). Bis zum 10.09.2026 stand es
   links: Ohne den automatischen Außenabstand hängt die begrenzte Spalte an der
   linken Kante, und das war einer der vier Funde des Auftraggebers. */
.akkordeon {
  max-inline-size: var(--breite-akkordeon);
  margin-inline: auto;
}

/* K-3: Linie oben an jedem Eintrag, zusätzlich unten am letzten. Eine Linie
   trennt Einträge, niemals innerhalb eines Eintrags; beim Öffnen ändert sich
   an den Linien nichts. */
.akkordeon-eintrag {
  border-block-start: var(--linie-staerke) solid var(--farbe-trennlinie);
}

.akkordeon-eintrag:last-child {
  border-block-end: var(--linie-staerke) solid var(--farbe-trennlinie);
}

/* Titelzeile: 22 px bei Gewicht 500, Zeilenhöhe über die Mindesthöhe
   gehalten (K-18, K-22). Die Standardmarkierung von <summary> entfällt
   zugunsten des Chevrons.
   ⚠️ Der Grad ist am 13.09.2026 auf den gemessenen Wert zurückgeführt
   worden; die Verdichtung leistet die Zeilenhöhe, nicht der Grad. Die 72 px
   aus K-22 sind weiterhin ein Rechenergebnis und kein Tokenwert — sie stehen
   nirgends als Zahl. */
.akkordeon-kopf {
  display: flex;
  gap: var(--abstand-symbol-text);
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--hoehe-akkordeonzeile);
  padding-block: var(--abstand-akkordeon-y);
  padding-inline: var(--abstand-akkordeon-x);
  list-style: none;
  cursor: pointer;
}

.akkordeon-kopf::-webkit-details-marker {
  display: none;
}

.akkordeon-titel {
  margin: 0;
  font-size: var(--fs-panel-titel);
  font-weight: var(--gewicht-halbfett);
}

/* Die Nummer der Titelzeile ist seit dem 13.09.2026 ein **eigenes Element**
   mit fester Breite (9.1.1, --breite-nummer). Ohne sie beginnt der Titeltext
   bei jedem Eintrag anders — gemessen zwischen 42 und 47 px —, weil die
   Ziffern in einer Proportionalschrift verschieden breit sind; mit fester
   Breite beginnen alle Titel an derselben Stelle, und der Inhalt richtet
   sich mit **einem** Wert daran aus statt mit sieben.

   `inline-block`, damit die Breite überhaupt greift: An einem reinen
   Inline-Element hat sie keine Wirkung. Der Wortlaut ändert sich nicht, nur
   seine Auszeichnung (B-16) — das Leerzeichen hinter dem Punkt steht **im**
   Element und fällt dort als abschließender Leerraum weg, damit der Titeltext
   genau auf --breite-nummer beginnt und nicht um eine Wortbreite daneben. */
.akkordeon-nummer {
  display: inline-block;
  inline-size: var(--breite-nummer);
}

/* Der Chevron dreht sich beim Öffnen um --drehung-pfeil-offen; die Drehung
   steht als Rolle, weil die Prüfung aus D-2 `rotate` nicht erfasst. */
.akkordeon-pfeil {
  inline-size: var(--groesse-symbol-fest);
  block-size: var(--groesse-symbol-fest);
  color: var(--farbe-pfeil);
  transition: rotate var(--dauer-uebergang);
}

.akkordeon-eintrag[open] .akkordeon-pfeil {
  rotate: var(--drehung-pfeil-offen);
}

/* Der Inhalt beginnt auf Höhe der **Textkante** der Titelzeile und nicht auf
   der Kante ihrer Nummer (9.1.1, --einzug-panel-inhalt, neu am 10.09.2026).
   ⚠️ Seit dem 13.09.2026 ist der Einzug gleichlautend mit --breite-nummer:
   Der Inhalt beginnt damit genau dort, wo der Titeltext hinter der Nummer
   beginnt. Die frühere Herleitung aus der Breite von „1. " traf nur den
   ersten Eintrag — die Nummern sind in einer Proportionalschrift verschieden
   breit, und genau deshalb hat die Nummer jetzt eine feste Breite. Der achte
   Eintrag trägt keine Nummer und bekommt den Einzug mit — der Preis einer
   Rolle statt einer Ausnahme. */
.akkordeon-inhalt {
  padding-block-end: var(--abstand-akkordeon-y);
  padding-inline-start: calc(var(--abstand-akkordeon-x) + var(--einzug-panel-inhalt));
  padding-inline-end: var(--abstand-akkordeon-x);
}

/* Die Inhaltsüberschrift steht als Absatz in Gewicht 700, wie im
   Ist-Zustand ausgezeichnet (9.1.1, Schriftgewichte). */
.akkordeon-inhaltstitel {
  font-weight: var(--gewicht-fett);
}

/* Achter Eintrag: ohne Inhaltsüberschrift, mittig gesetzt. */
.akkordeon-inhalt-mittig {
  text-align: center;
}

/* Hinweisblock nach K-21: normale Schriftlage statt kursiv über drei Zeilen,
   16 px, linke Kante in Petrol, leicht abgesetzte Fläche. Kursiv über
   mehrere Zeilen ist in einer Groteske wie Poppins mühsam. Aus dem Einzelfall
   wird eine Rolle: Förderhinweise dieser Bauart kommen ab P2 reihenweise vor. */
.hinweis {
  border-inline-start: var(--linie-staerke-hinweis) solid var(--farbe-akzent);
  padding-block: var(--abstand-hinweis-y);
  padding-inline: var(--abstand-hinweis-x);
  background-color: var(--farbe-hinweis-grund);
  font-size: var(--fs-klein);
}

/* --------------------------------------------------------------------------
   6 · Fehlerseite (K-14, W-9)

   Hauptbereich weiß mit mittig gesetztem Inhalt. Die Mindesthöhe ist die des
   Hero: Der Bereich soll die Seite tragen, ohne dass die schmale Fußzeile in
   die Bildmitte rutscht.
   -------------------------------------------------------------------------- */

.fehlerseite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--hoehe-hero);
  padding-block: var(--abstand-abschnitt-oben) var(--abstand-abschnitt-unten);
  text-align: center;
}

.fehlerseite h1 {
  margin-block-start: 0;
  font-size: var(--fs-abschnittstitel);
}

/* Der Absatz bleibt auf der Lesbarkeitsgrenze (K-19) und sitzt trotzdem
   mittig: Ohne den automatischen Außenabstand stünde die begrenzte Spalte
   links, während ihr Text mittig läuft. */
.fehlerseite .textbreite {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   7 · Rechtstexte (K-1, K-19, K-7)

   K-1: Der Rechtstext steht nicht mehr in einem iFrame ohne Stylesheet,
   sondern in einem abgegrenzten Container im Seitendokument. Er erbt damit
   Schriftart, Farben und Grundschriftgrad vom `body`; hier steht nur, was
   darüber hinaus nötig ist.

   ⚠️ Die Gliederung h1 bis h4 kommt aus der eRecht24-Fassung und wird nicht
   verändert (RT-1, RT-7). Sie braucht vier unterscheidbare Stufen, 9.1.1
   nennt dafür keine eigenen Rollen — und eine erfundene Rolle wäre ein
   erfundener Wert. Die Stufen kommen deshalb aus **vorhandenen** Rollen, und
   ab h3 trägt sie das Schriftgewicht statt des Grades: Dieselbe Begründung
   wie in 9.1.1 zur Akkordeon-Titelzeile — die Unterscheidung zum Fließtext
   leistet das Gewicht.

   Abstände zwischen Überschriften und Absätzen sind wie im übrigen
   Stylesheet bewusst nicht gesetzt: 9.1.1 führt dafür keine Rolle.
   -------------------------------------------------------------------------- */

/* K-19: Der längste Fließtext der Seite, bisher ohne jede Begrenzung. */
.rechtstext {
  max-inline-size: var(--breite-text);
  /* Die Verweise sind vollständige Adressen und länger als jedes Wort; ohne
     dies liefe die Seite auf schmalen Breiten waagerecht über (W-8). Kein
     Gestaltungswert, sondern das Umbruchverhalten selbst. */
  overflow-wrap: break-word;
}

.rechtstext h1 {
  font-size: var(--fs-abschnittstitel);
}

.rechtstext h2 {
  font-size: var(--fs-panel-titel);
  font-weight: var(--gewicht-fett);
}

.rechtstext h3 {
  font-size: var(--fs-fliesstext);
  font-weight: var(--gewicht-fett);
}

.rechtstext h4 {
  font-size: var(--fs-fliesstext);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeilenhoehe-ueberschrift);
}

/* ⚠️ K-7, ergänzt am 07.09.2026: Verweise im Fließtext der Rechtstexte sind
   **ruhend** unterstrichen, nicht erst beim Überfahren. Hier trägt kein
   Kontext die Erkennbarkeit — anders als in Kopfleiste und Fußzeile, wo K-7
   die Unterstreichung dem Hover vorbehält. Unterstrichen bedeutet auf dieser
   Seite ausschließlich „anklickbar" (K-2). */
.rechtstext a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--linie-staerke);
  text-underline-offset: var(--abstand-unterstreichung);
}

/* --------------------------------------------------------------------------
   8 · Bewegung (D-8)

   Bei gesetzter Systemeinstellung entfallen Übergang und Pfeilverschiebung.
   Der Farbwechsel des Knopfes bleibt — er ist die Rückmeldung, nicht die
   Bewegung.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .knopf,
  .knopf .symbol,
  .akkordeon-pfeil {
    transition: none;
  }

  .knopf:hover .symbol {
    translate: none;
  }
}