/* ══════════════════════════════════════════════════════════════
   Rechtliches · Impressum und Datenschutz. Baut auf styles.css auf.
   Lange Texte in Monospace: deshalb schmale Bahn (660 px, rund 73 Zeichen), etwas mehr
   Zeilenhöhe und hellerer Fließtext als --text-2 (55 %), damit sich
   auch zehn Abschnitte am Stück lesen lassen.
   ══════════════════════════════════════════════════════════════ */

.recht {
  /* Platz für die fixierte Kopf-Kapsel (top 12px + Höhe), wie .otp */
  padding: calc(var(--kopf-hoehe) + 56px) var(--rand) 96px;
  --recht-text: #f0f0f8c7;   /* 78 %, rund 10:1 auf #171717 */
}
@media (min-width: 640px) {
  .recht { padding-top: calc(var(--kopf-hoehe) + 96px); padding-bottom: 128px; }
}

/* Bahn = Textbreite (rund 73 Zeichen), damit Hairlines und Text an derselben Kante enden. */
.bahn--recht { max-width: 660px; gap: 56px; }

.recht__kopf { display: flex; flex-direction: column; gap: 14px; }
.recht .h2--klein { font-size: clamp(34px, 4.2vw, 44px); }
.recht__kopf .hinweis { font-size: 12px; color: var(--text-2); }
/* Einleitung nicht dunkler als der Fließtext */
.recht__kopf .lead { color: var(--recht-text); }

/* Kopf plus Abschnitte (Datenschutz): eine Spalte wie das Impressum */
.recht__raster,
.recht__text { display: flex; flex-direction: column; gap: 56px; }

/* ── Abschnitte ─────────────────────────────────────────────── */
.recht__abschnitt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
  border-top: .5px solid var(--linie);
  /* Sprungziele aus dem Inhaltsverzeichnis nicht unter der Kopf-Kapsel verstecken */
  scroll-margin-top: calc(var(--kopf-hoehe) + 32px);
}
.recht__abschnitt:first-of-type { padding-top: 0; border-top: 0; }

.recht__titel {
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--anzeige);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.recht__nr {
  flex: none;
  font-family: var(--fliess);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.recht__unter {
  margin: 0;
  font-family: var(--anzeige);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

/* :where() hält die Spezifität bei 0,0,1: Klassen aus dem Design-System (.label, .lead,
   .hinweis, .recht__stand) behalten ihren eigenen Ton und ihre Breite. */
:where(.recht) :is(p, li, dd) { color: var(--recht-text); overflow-wrap: break-word; }
:where(.recht) p { margin: 0; max-width: none; text-wrap: pretty; }
/* 48 % läge bei 11 px knapp unter AA (4,48:1) */
.recht .label { color: var(--text-2); }
.recht strong { color: var(--text); font-weight: 600; }

/* Lange Adressen (Mail, URLs) dürfen am Handy umbrechen */
.recht a { overflow-wrap: anywhere; }
.recht a[href^="mailto:"] { white-space: nowrap; }
/* Fließtext ist hier heller (78 %) als sonst, deshalb trägt der Unterstrich das Link-Merkmal:
   --text-2 statt --linie-stark, 5,5:1 gegen den Grund. */
main.recht .textlink {
  font-size: inherit;
  background-image: none;
  text-decoration: underline 1px var(--text-2);
  text-underline-offset: 4px;
}
main.recht .textlink:hover { text-decoration-color: var(--text); }

.recht ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recht ul li { position: relative; padding-left: 20px; }
.recht ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .8em;
  width: 8px;
  height: .5px;
  background: var(--text-2);
}

/* Anschrift und Angaben-Liste */
.recht address { font-style: normal; color: var(--text); line-height: 1.8; }

.recht__angaben {
  margin: 0;
  display: grid;
  gap: 18px;
}
.recht__angaben > div { display: flex; flex-direction: column; gap: 4px; }
.recht__angaben dt {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.recht__angaben dd { margin: 0; }

/* Dienstleister: kompakte Karten statt Tabelle (am Handy lesbar) */
.recht__dienste { display: grid; gap: 12px; }
.recht__dienst {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: .5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche-1);
}
.recht__dienst p { font-size: 13px; line-height: 1.6; }
/* Externe Links: je Zeile eine Tippfläche von 44 px, ↗ zeigt „fremde Seite“ */
.recht__extern { display: flex; flex-direction: column; margin-top: 4px; }
.recht__extern a { display: inline-flex; align-items: center; gap: .5ch; align-self: flex-start; min-height: 44px; }

/* Hervorgehobener Kasten: Widerspruchsrecht (Art. 21 Abs. 4 DSGVO verlangt,
   dass es getrennt von anderen Informationen erkennbar ist). Gleiches Muster
   wie die Meldung im OTP-Werkzeug: Hairline statt Farbfläche. */
.recht__kasten {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  border: .5px solid var(--jade);
  border-radius: 12px;
  background: var(--flaeche-2);
}
.recht__kasten p { color: var(--text); }


/* ── Druck ──────────────────────────────────────────────────── */
/* Rechtstexte werden gedruckt oder als PDF abgelegt: schwarz auf weiß, ohne Kopf-Kapsel,
   Raster, Fuß und Rückwege, externe Adressen ausgeschrieben. */
@media print {
  .kopf, .raster, .skip, .fuss { display: none !important; }
  html, body, .js body { background: #fff !important; color: #171717; }
  .recht { padding: 0; --recht-text: #171717; }
  .recht, .recht p, .recht li, .recht dd, .recht address, .recht strong,
  .recht__titel, .recht__unter, .recht h1, .recht__kasten p, .recht a { color: #171717 !important; }
  .recht .label, .recht .hinweis, .recht__nr { color: #555 !important; }
  .bahn--recht { max-width: none; }
  .recht__abschnitt { border-top-color: #999; padding-top: 20px; margin-top: 20px; }
  .recht__titel { break-after: avoid; }
  .recht__kasten, .recht__dienst { break-inside: avoid; border-color: #999; background: none; }
  main.recht .textlink { text-decoration-color: #999; }
  .recht__text a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
  .recht__extern a span { display: none; }
}