/* ==========================================================================
   KYTH.Kladde: Stil der Rechtstextseiten (Nutzungsvertrag, Auftragsverarbeitung, Datenschutz,
   Impressum). Der Inhalt kommt aus Markdown und trägt keine Klassen, deshalb stehen die Regeln
   auf den Elementen im Hauptbereich. Nur Tokens des CI-Kits, kein Rahmen um Sätze. Die helle
   Darstellung kommt aus hell.css; hier steht nur, was allein diese Seiten brauchen.
   ========================================================================== */

main {
  max-width: 760px;
  overflow-wrap: anywhere;
}

main h1 { margin-bottom: 24px; }
main h2 { margin-top: 40px; margin-bottom: 12px; }
main h3 { margin-top: 24px; margin-bottom: 8px; font-size: 18px; }

main p,
main li {
  color: var(--white-80);
  line-height: 1.7;
}
main p { margin-bottom: 12px; }
main li { margin-bottom: 6px; }
main ul,
main ol { margin: 0 0 16px 24px; }

main a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
main a:hover { color: var(--green-light); }
/* In Hell ist grüne Schrift das Grün des Kits für hellen Grund. */
:root[data-theme="light"] main a:hover { color: var(--green-on-light); }

main strong { color: var(--white); font-weight: 600; }
main code { font-family: var(--font-mono); font-size: 0.9em; color: var(--white); }
main hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

main table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 16px 0 24px;
  border-collapse: collapse;
  font-size: 14px;
}
/* `anywhere` von main ließe eine Zelle bis auf ein Zeichen schmal werden; in Tabellen bleibt ein Wort ganz. */
main th,
main td {
  overflow-wrap: break-word;
  hyphens: manual;
}
main th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-60);
  border-bottom: 1px solid var(--white-20);
}
main td {
  padding: 12px;
  vertical-align: top;
  color: var(--white-80);
  border-bottom: 1px solid var(--border);
}
/* Die Köpfe der Texte beginnen mit „| | |“: ein thead mit leeren th. Ohne Innenabstand und Linie steht über dem
   Dokumentkopf keine leere Zeile mit Strich (Befund G192 vom 14.11.2026). */
main th:empty {
  padding: 0;
  border-bottom: 0;
}
/* Ein langer Pfad in <code> darf umbrechen; sonst machte er seine Spalte so breit, dass die letzte Spalte bei 1280 px
   mitten im Wort abgeschnitten stand (Befund G171 vom 14.11.2026). */
main td code { overflow-wrap: anywhere; }
/* Bis 600 px rücken die Zellen zusammen, damit mehr Spalten in die Breite passen. Lange Wörter trennen, Adressen
   brechen um: Sonst waren bei 390 px drei von vier Tabellen der Datenschutzerklärung breiter als der Platz, und die
   letzte Spalte stand ohne Zeichen abgeschnitten da (Sichtbefund S2-2 vom 14.11.2026). Was dann noch breiter ist,
   bleibt seitlich erreichbar. */
@media (max-width: 600px) {
  main th, main td { padding: 8px 6px; overflow-wrap: anywhere; hyphens: auto; }
  /* Die Zellen einer Zeile stehen untereinander, je mit ihrem Spaltenkopf als Beschriftung (`data-label` aus
     kladde/routes/rechtliches.py), wie die Tabellen der Anwendung. In drei schmalen Spalten trennte „Rolle“
     „Auftragsverarbeiter“ über vier Zeilen (Schlusssicht S3-12 vom 14.11.2026). */
  main thead { display: none; }
  main tbody { display: block; }
  main tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  main td { display: block; padding: 2px 0; border-bottom: 0; }
  main td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white-60);
  }
}

/* Das Verzeichnis der Abschnitte hinter dem Dokumentkopf (Befund G193 vom 14.11.2026): eine schlichte Liste der
   Verweise, ohne Rahmen und Grund, darüber die Statuszeile „Inhalt“ in Mono. */
.inhaltsverzeichnis { margin: 0 0 32px; }
.inhaltsverzeichnis .verzeichnistitel {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-60);
}
.inhaltsverzeichnis ul { margin: 0; list-style: none; }
.inhaltsverzeichnis li { margin-bottom: 4px; line-height: 1.5; }
@media (min-width: 641px) {
  .inhaltsverzeichnis ul { columns: 2; column-gap: 32px; }
  .inhaltsverzeichnis li { break-inside: avoid; }
}