/* ==========================================================================
   HausChat.de — Rechtsseiten (Impressum, Datenschutz, Nutzungsbedingungen)
   Wird nur von diesen drei Seiten nach styles.css geladen. Bewusst ruhig:
   ein kurzer heller Kopf, links das Inhaltsverzeichnis, rechts der Text in
   einer Spalte. Keine Farbflächen im Text — hier soll nur gelesen werden.

   Die Seiten werden aus den Markdown-Dateien erzeugt:
   Rechtstexte/zu-html.py. Nicht von Hand ändern, sonst läuft es auseinander.
   ========================================================================== */

/* ── Kopf — heller Grund, ein weicher Petrolfleck ─────────────────────── */
.rhero{--t-500:var(--teal-500);--t-700:var(--teal-700);position:relative;overflow:hidden;
  padding:calc(72px + var(--nav-height)) 0 56px;
  background:
    linear-gradient(to top,var(--page) 0,rgba(250,249,247,0) 340px),
    radial-gradient(60% 60% at 14% 0%,rgba(201,227,174,.85),rgba(201,227,174,0) 70%),
    var(--page)}
/* Gleiche Breite wie der Text darunter, sonst stehen Überschrift und
   Fließtext nicht auf derselben Kante. */
.rhero__inner{max-width:1100px;margin:0 auto}
.rhero .eyebrow{color:var(--teal-700)}
.rhero h1{font-size:clamp(34px,4.4vw,52px);line-height:1.08;letter-spacing:var(--ls-display);
  color:var(--ink);margin:12px 0 16px}
.rhero__lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--teal-700);
  max-width:var(--measure-prose)}
.rhero__meta{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}

/* ── Zwei Spalten: Inhalt links, Text rechts ──────────────────────────── */
.recht{background:var(--page);padding:56px 0 var(--section-py-web)}
.recht__inner{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;
  max-width:1100px;margin:0 auto}

/* Das Verzeichnis läuft mit. Der Abstand nach oben ist die Kopfleiste. */
.toc{position:sticky;top:calc(var(--nav-height) + 24px);align-self:start;
  padding:22px 24px;background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--radius-card)}
.toc__title{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:12px;
  line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:none}
.toc li+li{margin-top:2px}
.toc a{display:block;padding:6px 0;font-size:14px;line-height:1.4;color:var(--body)}
.toc a:hover{color:var(--teal-500)}

/* ── Der Text ─────────────────────────────────────────────────────────── */
.prose{max-width:var(--measure-prose);color:var(--body);font-size:17px;line-height:1.7}
.prose h2{font-size:26px;line-height:1.25;letter-spacing:var(--ls-heading);color:var(--ink);
  margin:44px 0 14px;
  /* Sonst verschwindet die Überschrift beim Sprung unter der Kopfleiste. */
  scroll-margin-top:calc(var(--nav-height) + 24px)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px}
.prose strong{color:var(--ink)}
.prose ul{margin:0 0 18px}
.prose li{position:relative;padding-left:20px;margin-bottom:8px}
/* Punkt als Aufzählungszeichen, in der Abschnittsfarbe. */
.prose li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--teal-300)}
.prose hr{height:1px;border:0;background:var(--hairline);margin:36px 0}

/* Nummerierte Ziffern der Nutzungsbedingungen: die Nummer führt den Absatz an. */
.prose .klausel b{color:var(--ink)}

/* „Zweck / Rechtsgrundlage / Speicherdauer" — dieselbe Faktenliste wie im
   Produkt: Bezeichnung klein und in Großbuchstaben, Wert daneben. */
.prose dl{display:grid;grid-template-columns:170px minmax(0,1fr);gap:0 20px;
  margin:0 0 20px;padding:18px 22px;background:var(--card);
  border:1px solid var(--hairline);border-radius:var(--radius-card);font-size:16px}
.prose dt{padding:8px 0;font-weight:var(--fw-bold);font-size:12px;line-height:var(--lh-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.prose dd{margin:0;padding:6px 0;line-height:1.6}
.prose dt+dd{}
.prose dt:not(:first-child),.prose dt:not(:first-child)+dd{border-top:1px solid var(--hairline)}

/* Tabellen: auf schmalen Fenstern in der eigenen Fläche scrollen. */
.prose .tabelle{margin:0 0 22px;border:1px solid var(--hairline);border-radius:var(--radius-card);
  background:var(--card);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.prose table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose th,.prose td{padding:12px 16px;text-align:left;vertical-align:top}
.prose thead th{font-weight:var(--fw-bold);font-size:12px;line-height:var(--lh-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);
  background:var(--teal-50)}
.prose tbody tr+tr>*{border-top:1px solid var(--hairline)}
.prose td strong{font-weight:var(--fw-bold)}

/* ── Breiten ──────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .recht__inner{grid-template-columns:1fr;gap:32px}
  .toc{position:static}
  /* Auf einer Spalte ist das Verzeichnis eine flache Liste über dem Text. */
  .toc ol{columns:2;column-gap:24px}
  .prose{max-width:none}
}
@media (max-width:640px){
  .rhero{padding-top:calc(56px + var(--nav-height))}
  .rhero__lead{font-size:17px}
  .prose{font-size:16px}
  .prose h2{font-size:22px;margin-top:36px}
  .toc ol{columns:1}
  .prose dl{grid-template-columns:1fr;gap:0;padding:16px 18px}
  .prose dt{padding-bottom:2px}
  .prose dd{padding-top:0;padding-bottom:12px}
  .prose dt:not(:first-child){border-top:1px solid var(--hairline);padding-top:12px}
  .prose dt:not(:first-child)+dd{border-top:0}
}