/* ============================================================
   text.css — lange Fliesstexte (Rechtsseiten, spaeter Kontakt)

   Bis 06.09.2026 trug jede der vier Rechtsseiten ihr eigenes
   Inline-Stylesheet mit denselben zwanzig Zeilen — und mit drei
   Abweichungen, die dort niemandem auffielen, weil die Seiten nie
   neben dem Rest standen:

     --bg: #08090a     statt #0a0a0b (der Grund des Favicons)
     --accent: #818cf8 Violett — brand.css schliesst Violett aus,
                       und es gibt ueberhaupt keine Markenfarbe
     "Sora"            eine Schrift, die nirgends geladen wird; die
                       Seiten rendern deshalb in der Systemschrift,
                       waehrend der Rest Instrument Sans traegt

   Setzt brand.css (Tokens) und layout.css (Rahmen) voraus.

   Kein Kasten. Die Ueberschrift sitzt auf einer Haarlinie und stanzt
   sie aus — dieselbe Sprache wie die Abschnitte der Startseite.
   ============================================================ */

.text-seite {
  max-width: 72ch;
  margin: 0 auto;
  padding: var(--s-8) var(--s-5) var(--s-9);
}

.text-seite h1 {
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.text-seite .stand {
  color: var(--faint);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  margin-top: var(--s-3);
  margin-bottom: var(--s-8);
}

/* Die Haarlinie traegt die Ueberschrift, statt sie zu umrahmen. */
.text-seite h2 {
  position: relative;
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-5);
}
.text-seite h2::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: var(--line);
}

.text-seite h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--muted);
  margin: var(--s-5) 0 var(--s-2);
}

.text-seite p,
.text-seite li {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.75;
}
.text-seite p + p { margin-top: var(--s-3); }

.text-seite ul,
.text-seite ol { margin: var(--s-3) 0 var(--s-3) var(--s-5); }
.text-seite li + li { margin-top: 6px; }

.text-seite a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.42);
}
.text-seite a:hover { text-decoration-color: var(--brand); }

.text-seite strong { color: var(--text); }

/* Adressbloecke und Ähnliches: Zeilenumbrueche gelten. */
.text-seite address {
  font-style: normal;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.75;
}

/* Lange Woerter (Paragraphenketten, URLs) duerfen umbrechen, statt die
   Zeile ueber den Rand zu schieben. */
.text-seite h1,
.text-seite h2,
.text-seite h3,
.text-seite p,
.text-seite li { overflow-wrap: break-word; }

/* ---- Tabellen und Hinweise in Rechtstexten ----
   Standen bis 07.09.2026 im Inline-Stylesheet der Datenschutzseite und
   gingen beim Umzug auf brand.css mit. Aufgefallen ist es
   scripts/pruefe-stile.js, nicht dem Auge. */
.text-seite .tabelle {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: var(--s-4) 0;
}
.text-seite table {
  width: 100%; min-width: 420px; border-collapse: collapse;
  font-size: var(--t-sm);
}
.text-seite th,
.text-seite td {
  text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--muted);
}
.text-seite th { color: var(--text); font-weight: 600; }

/* Der Hinweis traegt links eine Kante, keinen Rahmen: Hervorhebung
   laeuft ueber Licht und Linien. */
.text-seite .warn {
  border-left: 2px solid var(--brand);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  margin: var(--s-5) 0;
}
.text-seite .warn strong { color: var(--text); }

.text-seite code {
  font-family: var(--mono); font-size: 0.88em;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px; border-radius: 5px;
}