/* ===========================================================================
   rechtstext.css — Benker WP-Theme
   HANDGESCHRIEBEN. Wird NACH components.css geladen.

   Layout fuer Rechtstexte (Impressum, Datenschutz, Betroffenenrechte). Diese
   Seiten bestehen aus dem Seiten-Hero und EINER Gruppe mit der Klasse
   .rechtstext, in der ganz normale Gutenberg-Bloecke stehen. Damit bleiben die
   Texte im Editor bearbeitbar (wichtig: Rechtstexte aendern sich, und der
   Datenschutzbeauftragte muss sie anpassen koennen, ohne ins Theme zu greifen).

   Warum eine eigene Breite: Die Seiten-Vorlage gibt Bloecke ohne Rahmen aus,
   weil die Benker-Bloecke ihre Breite selbst mitbringen. Kernbloecke tun das
   nicht — ohne diese Regel liefen die Absaetze ueber die volle Fensterbreite.
   720px entsprechen etwa 90 Zeichen pro Zeile und damit dem gut lesbaren
   Bereich fuer lange Fliesstexte.

   ABSTAENDE ALS MARGIN, NICHT ALS FLEX-GAP (korrigiert 22.07.2026):
   Der erste Versuch setzte die Gruppe auf display:flex und regelte die
   Absaetze ueber gap. Das griff nicht: WordPress rendert je nach Blockversion
   einen Container zwischen Gruppe und Inhalt, und dann hat die Flex-Box nur
   EIN Kind — die Luecke laeuft ins Leere. Sichtbar war das nur an den langen
   Absatzstrecken (Seite Betroffenenrechte), weil weiter unten die
   Ueberschriften mit eigenem margin fuer Struktur sorgten.
   Margins auf den Elementen selbst wirken dagegen unabhaengig davon, wie tief
   sie verschachtelt sind. Die :first-child/:last-child-Regeln decken beide
   Faelle ab (mit und ohne Zwischencontainer).
   =========================================================================== */

.rechtstext {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* Absatzabstand bewusst grosszuegig (24px): Rechtstexte bestehen aus langen,
   dicht gesetzten Absaetzen und wuerden sonst zu einer Textwand verschwimmen. */
.rechtstext p,
.rechtstext ul,
.rechtstext ol {
  margin-block: 0 var(--space-5);
}

.rechtstext h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-2xs);
  line-height: var(--lh-heading-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-block: var(--space-7) var(--space-4);
}

.rechtstext h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-3xs);
  line-height: var(--lh-heading-3xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-block: var(--space-6) var(--space-4);
}

/* Aussenabstand am Anfang und Ende abraeumen — der Rahmen kommt aus dem
   padding der Gruppe. Die zweite Zeile greift, wenn WordPress einen
   Zwischencontainer rendert. */
.rechtstext > :first-child,
.rechtstext > * > :first-child {
  margin-top: 0;
}

.rechtstext > :last-child,
.rechtstext > * > :last-child {
  margin-bottom: 0;
}

.rechtstext ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.rechtstext li + li {
  margin-top: var(--space-3);
}

.rechtstext a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rechtstext a:hover {
  text-decoration: none;
}