/* rechtstext.css — Datenschutzerklärung der IT-Recht Kanzlei (/datenschutz).
 *
 * Der Text kommt bereinigt vom Server (rechtstexte/index.js): Überschriften
 * „1) …“ tragen eine Nummer in <span class="nr">, Absätze „1.1“ ebenso. Die
 * Nummern stehen wie im Beratungsablauf in Plex Mono und Messing. Nur Tokens.
 */

.rechtstext { max-inline-size: 72rem; }

/* Fassung und Quelle über dem Text */
.rechtstext .rechtstext-stand { max-width: var(--breite-text); margin-block: 0 var(--s-6);
  padding-inline-start: var(--s-4); border-inline-start: 2px solid var(--c-gold);
  font-size: var(--t-sm); letter-spacing: var(--ls-sm); line-height: var(--lh-sm);
  color: var(--text-sekund); }

/* Inhaltsverzeichnis: Karte, zwei Spalten ab genug Breite */
.rechtstext-inhalt { background: var(--bg-karte); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin-block-end: var(--s-8); }
.rechtstext-inhalt .marginalie { margin-block: 0 var(--s-4); }
.rechtstext-inhalt ol { list-style: none; margin: 0; padding: 0;
  columns: 2 18rem; column-gap: var(--s-7); }
.rechtstext-inhalt li { break-inside: avoid; margin-block-end: var(--s-2); }
.rechtstext-inhalt a { display: flex; gap: var(--s-3); align-items: baseline;
  color: var(--text-primar); text-decoration: none; min-block-size: 44px; align-content: center;
  padding-block: var(--s-1); }
.rechtstext-inhalt a:hover { text-decoration: underline; text-decoration-color: var(--akzent-hell);
  text-underline-offset: 3px; }
.rechtstext-inhalt a:focus-visible { outline: 3px solid var(--c-messing); outline-offset: 3px;
  border-radius: var(--r-sm); }

/* Nummern: Abschnitte und Absätze */
.rechtstext .nr { font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  color: var(--akzent-hell); font-weight: 400; }
.rechtstext-inhalt .nr { min-inline-size: 2ch; font-size: var(--t-sm); }

/* Text */
/* Überschriften so breit wie der Fließtext: 68ch der Grundschrift ≈ 48rem
   (ch hängt von der Schriftgröße ab und wäre bei Überschriften breiter) */
.rechtstext-text h2 { font-size: var(--t-xl); letter-spacing: var(--ls-xl); line-height: var(--lh-xl);
  max-width: 48rem; margin-block: var(--s-8) 0; padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-linie); scroll-margin-block-start: 6.75rem; }
.rechtstext-text h2:first-child { margin-block-start: 0; }
.rechtstext-text h2 .nr { font-size: var(--t-lg); margin-inline-end: var(--s-2); }
.rechtstext-text h3, .rechtstext-text h4 { font-size: var(--t-lg); letter-spacing: var(--ls-lg);
  line-height: var(--lh-lg); max-width: 48rem; margin-block: var(--s-6) 0;
  scroll-margin-block-start: 6.75rem; }
.rechtstext-text h3 .nr { font-size: var(--t-sm); margin-inline-end: var(--s-1); }
.rechtstext-text p, .rechtstext-text li { overflow-wrap: anywhere; hyphens: auto; }
.rechtstext-text p .nr { font-size: var(--t-sm); margin-inline-end: var(--s-1); }
.rechtstext-text ul, .rechtstext-text ol { max-width: var(--breite-text); margin-block: var(--s-4) 0;
  padding-inline-start: var(--s-5); }
.rechtstext-text li { margin-block: var(--s-2); }
.rechtstext-text li::marker { color: var(--akzent-hell); }
.rechtstext-text li a, .rechtstext-text p a { color: inherit; text-decoration-color: var(--akzent-hell);
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rechtstext-text li a:hover, .rechtstext-text p a:hover { text-decoration-thickness: 2px; }
.rechtstext-text table { border-collapse: collapse; margin-block: var(--s-4); font-size: var(--t-sm); }
.rechtstext-text th, .rechtstext-text td { border: 1px solid var(--c-linie); padding: var(--s-2) var(--s-3);
  text-align: start; vertical-align: top; }

/* Copyright der Kanzlei unter dem Text */
.rechtstext .rechtstext-quelle { margin-block-start: var(--s-8); font-size: var(--t-sm); color: var(--text-sekund); }
.rechtstext-quelle a { color: inherit; }
.rechtstext-quelle img { inline-size: 9rem; block-size: auto; display: block; }

/* Rufnummern und Registrierungsnummer nicht mitten im Wert umbrechen */
.rechtstext .nummer { white-space: nowrap; }
/* Anschriften und Namen nicht silbentrennen */
.rechtstext .anschrift { hyphens: manual; }

/* Entwurf der Erstinformation: fehlende Angaben sichtbar markieren.
   Vor dem Livegang mit den Kästen in erstinformation.html entfernen. */
.rechtstext .luecke { max-width: var(--breite-text); margin-block: var(--s-4) 0;
  padding: var(--s-4) var(--s-5); background: var(--bg-karte);
  border: 1px dashed var(--akzent-hell); border-radius: var(--r-md); }
.rechtstext .luecke > :first-child { margin-block-start: 0; }
.rechtstext .luecke > :last-child { margin-block-end: 0; }
.rechtstext .luecke-titel { font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: var(--ls-xs); line-height: var(--lh-xs); color: var(--akzent-hell);
  margin-block-end: var(--s-2); }
.rechtstext .luecke-liste { margin-block-end: var(--s-8); }
.rechtstext .luecke-liste ol { margin-block: var(--s-3) 0; padding-inline-start: var(--s-5); }
.rechtstext .luecke-liste li { margin-block: var(--s-2); }
.rechtstext .luecke a { color: inherit; text-decoration-color: var(--akzent-hell);
  text-underline-offset: 3px; }

/* Ausweichtext, solange noch keine Fassung vorliegt */
.rechtstext-fehlt { max-width: var(--breite-text); padding: var(--s-5);
  background: var(--bg-karte); border: 1px solid var(--c-linie); border-radius: var(--r-md); }
.rechtstext-fehlt p:first-child { margin-block-start: 0; }