/* ============================================================
   Rechtstext — Impressum, Datenschutz, AGB
   ------------------------------------------------------------
   Eine gemeinsame Lesetypografie fuer die drei langen Textseiten.
   Der Text selbst stammt unveraendert aus den alten Vorlagen; hier
   wird ausschliesslich bestimmt, wie er aussieht. Bewusst schmale
   Zeilen, ruhige Abstaende, keine Effekte: das hier wird gelesen,
   nicht bestaunt.
   ============================================================ */

.rechtstext{
  max-width:74ch;
  font-size:15.6px;
  line-height:1.72;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* Zwischenueberschriften gliedern sehr lange Dokumente — deshalb
   bekommen sie eine eigene Linie und viel Luft davor. */
.rechtstext h2{
  margin:clamp(38px,4vw,58px) 0 14px;
  padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;
  font-weight:700;font-size:clamp(1.16rem,1.7vw,1.42rem);letter-spacing:-.022em;
  color:var(--ink);
  scroll-margin-top:86px;
}
.rechtstext > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.rechtstext h3{
  margin:clamp(24px,2.6vw,34px) 0 10px;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106;
  font-weight:700;font-size:1.04rem;letter-spacing:-.015em;color:var(--ink);
}
.rechtstext h4{
  margin:20px 0 8px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
}

.rechtstext p{margin:0 0 14px}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext strong,.rechtstext b{color:var(--ink);font-weight:600}

.rechtstext ul,.rechtstext ol{margin:0 0 16px;padding-left:20px}
.rechtstext li{margin-bottom:7px}
.rechtstext li:last-child{margin-bottom:0}
.rechtstext ul{list-style:none;padding-left:0}
.rechtstext ul > li{position:relative;padding-left:20px}
.rechtstext ul > li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:7px;height:1px;background:var(--accent);
}
.rechtstext ol > li::marker{color:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:.86em}

.rechtstext a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.rechtstext a:hover{color:var(--accent)}

/* Tabellen kommen in Datenschutz und AGB vor (Verarbeitungszwecke,
   Fristen). Sie duerfen die Seite nicht breiter machen als das
   Fenster — deshalb scrollen sie in sich selbst. */
.rechtstext .tabelle,.rechtstext .table-wrap{overflow-x:auto;margin:0 0 18px}
.rechtstext table{
  width:100%;border-collapse:collapse;font-size:14.2px;
  border:1px solid var(--line);background:var(--surface);
}
.rechtstext th,.rechtstext td{
  padding:10px 13px;border-bottom:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft);text-align:left;vertical-align:top;
}
.rechtstext th:first-child,.rechtstext td:first-child{border-left:0}
.rechtstext thead th{
  background:transparent;border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;white-space:nowrap;
}
.rechtstext tbody tr:last-child td{border-bottom:0}

/* Hervorgehobene Kaesten (z. B. Widerrufsbelehrung) */
.rechtstext .box,.rechtstext .hinweis,.rechtstext blockquote{
  margin:0 0 18px;padding:16px 18px;
  border-left:2px solid var(--accent);background:rgba(255,255,255,.42);
}
.rechtstext .box p:last-child,.rechtstext blockquote p:last-child{margin-bottom:0}

/* Der Stand des Dokuments, meist ganz oben oder ganz unten */
.rechtstext .stand,.rechtstext .legal-date,.rechtstext .updated{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}

/* Lange E-Mail-Adressen und URLs duerfen umbrechen, sonst schieben
   sie auf dem Telefon die ganze Seite auf. */
.rechtstext a,.rechtstext td,.rechtstext p{overflow-wrap:anywhere}

@media (max-width:640px){
  .rechtstext{font-size:15.2px;line-height:1.7}
}