/* Impressum und Datenschutz (impressum.html, datenschutz.html). Baut auf css/unterseiten.css auf:
   Kopf .us-kopf, Abschnitte .us-abschnitt mit .us-zwei (Titel links klebt, Text rechts), Fakten .uu-fakten.
   Hier nur, was für lange, ruhige Rechtstexte dazukommt: Inhaltsverzeichnis, Zwischentitel, Listen, Links. */

.recht-kopf .us-titel { max-width: none; }
.recht-kopf .lead { max-width: 38em; }

/* Inhaltsverzeichnis unter dem Kopf: Sprungmarken als Chips */
.recht-inhalt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.recht-inhalt a {
  display: inline-flex; align-items: center; gap: .5em; padding: .55em 1em; border: 1.5px solid var(--blass); border-radius: 999px;
  font: 500 14px/1 var(--text); color: var(--tinte); text-decoration: none; transition: border-color .2s, color .2s;
}
.recht-inhalt a b { font: 500 11px/1 var(--mono); color: var(--pink); }
.recht-inhalt a:hover, .recht-inhalt a:focus-visible { border-color: var(--pink); color: var(--pink); }

/* Abschnitte: die Nummer steht klein über dem Titel, Abstände etwas enger als auf den Leistungsseiten */
.recht .us-abschnitt { padding: clamp(56px, 9vh, 110px) 0; border-top: 1px solid var(--blass); }
.recht .us-abschnitt + .us-abschnitt { padding-top: clamp(56px, 9vh, 110px); }
.recht .us-h2 { font-size: clamp(30px, 3.4vw, 58px); }
.recht-nr { display: block; margin-bottom: 14px; font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--pink); }
[id] { scroll-margin-top: calc(var(--kopf-h) + 24px); }

/* Fließtext */
.recht .us-fliess { max-width: 46rem; }
.recht .us-fliess h3 { margin-top: 2em; font: 700 clamp(19px, 1.5vw, 23px)/1.2 var(--display); letter-spacing: -.01em; text-transform: uppercase; color: var(--tinte); }
.recht .us-fliess h3:first-child { margin-top: 0; }
.recht .us-fliess ul { padding-left: 1.2em; }
.recht .us-fliess li { margin-top: .35em; }
.recht .us-fliess li::marker { color: var(--pink); }
/* Links im Text (nicht Menü, Sprungmarken, Fuß) */
.recht main :is(.us-fliess, .uu-fakten) a { color: inherit; text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
.recht main :is(.us-fliess, .uu-fakten) a:hover { color: var(--pink); }

/* Fakten: eine Spalte, Bezeichnung links, Wert rechts */
.recht .uu-fakten { grid-template-columns: minmax(0, 1fr); }
.recht .uu-fakten div { grid-template-columns: 190px minmax(0, 1fr); }
.recht .uu-fakten dd { overflow-wrap: anywhere; }

/* Kasten „Kurz gesagt“ */
.recht-kurz { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--ice); }
.recht-kurz ul { list-style: none; padding: 0 !important; display: grid; gap: .7em; }
.recht-kurz li { position: relative; padding-left: 1.8em; color: var(--tinte) !important; }
.recht-kurz li::before { content: ""; position: absolute; left: 0; top: .45em; width: .8em; height: .8em; border-radius: 50%; background: var(--pink); }

.recht-stand { margin-top: 2.4em !important; font: 500 12px/1.6 var(--mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--grau) !important; }

@media (max-width: 900px) {
  .recht .uu-fakten div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}