/* Lesesicht fuer Rechtstexte (Nutzungsbedingungen, Vereinbarung zur Auftragsverarbeitung, Unterauftragnehmer, Nutzerregeln,
   Sicherheit, Datenschutzerklaerung). Dieselben Tokens wie die Anmeldeseiten (anmelden.css), nur breiter. Die offenen Angaben
   sind sichtbar markiert, bis sie eingetragen sind. Kein Skript, kein Inline-Stil: die Seiten laufen unter der strengen
   Inhaltsrichtlinie. */
main.text { max-width: 760px; margin: 28px auto 48px; padding: 32px 36px; background: var(--karte); border: 1px solid var(--rand); border-radius: 20px; }
main.text h1 { font-size: 28px; margin: 18px 0 4px; color: var(--marke-navy); letter-spacing: -.01em; overflow-wrap: anywhere; }
main.text h2 { font-size: 17px; margin: 26px 0 8px; color: var(--marke-navy); scroll-margin-top: 16px; }
main.text h3 { font-size: 15px; margin: 18px 0 6px; color: var(--marke-navy); }
main.text p, main.text li { font-size: 14.5px; line-height: 1.55; color: var(--text); }
main.text p { margin: 0 0 10px; }
main.text ul, main.text ol { margin: 0 0 12px; padding-left: 22px; }
main.text li { margin-bottom: 6px; }
main.text .stand { font-size: 12.5px; color: var(--leise); margin-bottom: 20px; }
main.text code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
main.text table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 12px; }
main.text th, main.text td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--rand); overflow-wrap: break-word; }
/* Die Spalte "Stand" bleibt so schmal wie ihr Inhalt und bricht nie mitten im Wort um ("Umge/setzt"); die Beschreibung daneben nimmt den Rest.
   Zwischen zwei Woertern darf sie umbrechen ("Teilweise umgesetzt" auf zwei Zeilen), sonst waere die Tabelle bei 320 Pixeln breiter als die Karte. */
main.text table.stand-tab th:last-child, main.text table.stand-tab td:last-child { overflow-wrap: normal; word-break: keep-all; hyphens: none; width: 1%; }
main.text details.technik { margin-top: 6px; }
main.text details.technik summary { cursor: pointer; font-size: 12px; color: var(--leise); }
main.text details.technik p { margin: 6px 0 0; font-size: 12.5px; color: var(--leise); }
main.text th { color: var(--leise); font-weight: 600; font-size: 11.5px; }
main.text .offen { background: rgba(255, 149, 0, .15); color: #c93400; border-radius: 6px; padding: 1px 6px; font-weight: 600; }
main.text .rechtliches { margin-top: 24px; }
main.text .entwurf { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid #c93400; border-radius: 8px; background: rgba(255, 149, 0, .12); font-size: 13.5px; line-height: 1.5; }
main.text .rechtsnav { margin: 0 0 20px; font-size: 13.5px; line-height: 1.9; color: var(--leise); }
main.text .rechtsnav a { color: var(--tint-dunkel); }
main.text .rechtsnav [aria-current="page"] { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  main.text { margin: 12px; padding: 20px 18px; }
  /* Eine Tabelle mit vier Spalten scrollt im eigenen Kasten, nie die ganze Seite. */
  main.text table { display: block; overflow-x: auto; }
  /* Die Tabellen der Schutzmassnahmen haben zwei Spalten und passen: sie bleiben Tabellen. */
  main.text table.stand-tab { display: table; }
  /* Die Verantwortungsmatrix hat drei Spalten und waere am Handy zerhackt: jede Zeile wird eine Karte, die Spalte steht davor. */
  main.text table.matrix, main.text table.matrix tbody, main.text table.matrix tr, main.text table.matrix td { display: block; }
  main.text table.matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  main.text table.matrix tr { padding: 10px 0; border-bottom: 1px solid var(--rand); }
  main.text table.matrix td { border: 0; padding: 2px 0; }
  main.text table.matrix td:first-child { font-weight: 600; color: var(--marke-navy); }
  main.text table.matrix td[data-spalte]::before { content: attr(data-spalte) ": "; color: var(--leise); font-weight: 600; font-size: 12px; }
  /* Am Handy stehen die Verweise ohne Punkte dazwischen: ein Punkt am Zeilenende hinge sonst allein da. */
  main.text .rechtsnav { display: flex; flex-wrap: wrap; column-gap: 14px; }
  main.text .rechtsnav .trenner { display: none; }
  main.text .rechtsnav a, main.text .rechtsnav [aria-current="page"] { display: inline-block; padding: 8px 2px; }
}
@media (max-width: 360px) {
  /* "Nutzungsbedingungen" ist in 28 und noch in 22 Pixeln breiter als die Karte bei 320 Pixeln (230 Pixel Platz) und bräche mitten im Wort um. */
  main.text h1 { font-size: 20px; }
}
@media (pointer: coarse) {
  main.text .rechtsnav a, main.text .rechtsnav [aria-current="page"] { display: inline-block; min-height: 44px; padding: 11px 4px; }
  main.text .rechtliches a { display: inline-block; padding: 12px 4px; }
}