/* ==========================================================================
   Baustein: Fließtext der Rechtsseiten
   Datei: css/bausteine/legal-text.css
   Gebraucht auf: impressum.html, datenschutz.html, agb.html
   Bauvorschrift: DESIGN.md, Baustein "Fließtext der Rechtsseiten" (seit 2026-11-05, DEV-1673)
   Regeln: docs/entwicklung.md. Tokens und Rollen kommen aus css/style.css und werden hier
   nicht neu definiert.
   ========================================================================== */

/* Präfix: .legal-*
   Eine weiße Fläche ohne Hero: Titel als display-2 wie ein Sektionskopf, darunter der Text
   in einer Spalte von höchstens 1200 px. Breiter als die übliche Grenze von 760 px
   (DESIGN.md), auf Weisung vom 2026-11-05: Die Rechtstexte sind lang und werden
   nachgeschlagen, nicht durchgelesen.
   Ohne Floating Button und ohne CTA, die Rechtsseiten sind Pflichtseiten
   (docs/site-architecture.md, impressum.html, datenschutz.html, agb.html). */

.legal-meta {
  margin-top: 24px;
  color: var(--muted);
}

.legal-text {
  max-width: 1200px;
  margin-top: 72px;
  color: var(--body);
}

/* Abschnitt: Haarlinie oben wie die Trennung der FAQ, Titel heading-m in --ink */
.legal-text h2 {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.legal-text h2:first-child { margin-top: 0; }

/* Unterabschnitt: heading-xs in 500, damit er sich vom Fließtext absetzt */
.legal-text h3 {
  margin-top: 32px;
  color: var(--ink);
  font-weight: 500;
}

.legal-text p,
.legal-text ul,
.legal-text address { margin-top: 14px; }
.legal-text h2 + p,
.legal-text h3 + p,
.legal-text h2 + .legal-clause { margin-top: 18px; }

.legal-text address { font-style: normal; }

.legal-text ul {
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

/* Links im Text unterstrichen, damit sie nicht nur an der Farbe hängen (WCAG 1.4.1).
   Lange Adressen dürfen umbrechen, sonst laufen sie bei 375 px über den Rand. */
.legal-text a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-text a:hover { color: var(--ink); }

/* Nummerierte Klausel der AGB: Nummer links in fester Spalte, Text daneben */
.legal-clause {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 8px;
}
.legal-clause-num {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.legal-clause > p { margin-top: 0; }
.legal-clause ul { grid-column: 2; }

/* Offener Inhalt: der Platzhalter steht sichtbar auf der Seite (CLAUDE.md), hier mit
   gestricheltem Rahmen, damit er beim Durchsehen nicht als fertiger Text durchgeht */
.legal-open {
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
}

/* Schalter "Arbeitsweise aus" (Klasse ff-arbeitsweise-aus am <html>): Die Regel steht in
   css/bausteine/prozess-raster.css, das die Rechtsseiten nicht laden. Ohne diese Zeile
   stünde der Link in Kopfzeile und Mobil-Menü. Fällt mit dem Schalter dort weg. */
.ff-arbeitsweise-aus a[href$="#arbeitsweise"] { display: none; }

@media (max-width: 640px) {
  .legal-text { margin-top: 48px; }
  .legal-text h2 { margin-top: 44px; padding-top: 24px; }
  .legal-clause { grid-template-columns: 40px minmax(0, 1fr); }
}