/* Die Rechtsseiten (Impressum, Datenschutz) in den Flächen der Landingpage.
   Seit dem 2026-10-25: vorher eingefroren im Schiefer. Die Kanäle sind
   wörtlich die aus landing.html (`--lp-page`/`--lp-band`, Nacht) – wer dort
   umfärbt, zieht hier nach. Seit dem 2026-10-26 immer dunkel: `data-theme`
   steht fest im <html>, ohne Umschalter. Eigene Datei statt <style> je Seite,
   weil alle vier dasselbe brauchen; ohne Modul und ohne JS lesbar. */
:root { --lp-page: 18 17 15; --lp-band: 28 26 23; }
body { background: rgb(var(--lp-page)); text-wrap: pretty; }
.lp-band { background: rgb(var(--lp-band)); }

.lp-tile { display: inline-flex; overflow: hidden; border-radius: 12.5%; background: rgb(28 26 23); flex: none; }
.lp-tile img { width: 100%; height: 100%; display: block; }
.lp-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--c-accent-ink)); }
.lp-h1 { font-size: 38px; line-height: 1.05; letter-spacing: -0.033em; font-weight: 800; text-wrap: balance; }
@media (min-width: 640px) { .lp-h1 { font-size: 52px; } }
@media (min-width: 1024px) { .lp-h1 { font-size: 64px; } }

/* Die vier Rechtsdokumente als Pillen unter dem Titel; die aktuelle gefüllt. */
.r-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.r-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 9999px; border: 1px solid rgb(var(--c-border-strong)); background: rgb(var(--lp-page)); font-size: 14px; font-weight: 600; color: rgb(var(--c-text)); }
.r-tabs a:hover { border-color: rgb(var(--c-accent-ink)); }
.r-tabs a[aria-current='page'] { background: rgb(var(--c-text)); border-color: rgb(var(--c-text)); color: rgb(var(--lp-page)); }

/* Inhaltsverzeichnis: am Desktop klebt es links neben dem Text. */
.r-toc ol { counter-reset: r; display: flex; flex-direction: column; gap: 2px; }
.r-toc li { counter-increment: r; }
.r-toc a { display: flex; gap: 10px; padding: 6px 10px; border-radius: 10px; font-size: 14px; line-height: 1.35; color: rgb(var(--c-text-muted)); }
.r-toc a::before { content: counter(r, decimal-leading-zero); flex: none; width: 20px; font-size: 12px; font-weight: 700; line-height: 1.6; color: rgb(var(--c-accent-ink)); font-variant-numeric: tabular-nums; }
.r-toc a:hover { background: rgb(var(--c-surface-2)); color: rgb(var(--c-text)); }

/* Ein Abschnitt: Linie oben, Nummer im Akzent, darunter Fliesstext. */
.r-doc { counter-reset: r; }
.r-sec { counter-increment: r; position: relative; padding-top: 28px; border-top: 1px solid rgb(var(--c-border)); scroll-margin-top: 24px; }
.r-sec + .r-sec { margin-top: 40px; }
.r-sec > h2 { display: flex; align-items: baseline; gap: 12px; font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 800; color: rgb(var(--c-text)); }
.r-doc .r-sec > h2::before { content: counter(r, decimal-leading-zero); flex: none; font-size: 14px; font-weight: 800; letter-spacing: 0; color: rgb(var(--c-accent-ink)); font-variant-numeric: tabular-nums; }
.r-sec h3 { margin-top: 22px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: rgb(var(--c-text)); }

.r-prose { font-size: 15px; line-height: 1.65; color: rgb(var(--c-text-muted)); }
.r-prose p, .r-prose ul, .r-prose ol, .r-prose dl, .r-prose .r-box { margin-top: 12px; }
.r-prose ul { list-style: disc; padding-left: 20px; }
.r-prose ol { list-style: decimal; padding-left: 20px; }
.r-prose li + li { margin-top: 6px; }
.r-prose li::marker { color: rgb(var(--c-accent-ink)); }
.r-prose strong { font-weight: 600; color: rgb(var(--c-text)); }
.r-prose a { font-weight: 600; color: rgb(var(--c-accent-ink)); text-decoration: underline; text-underline-offset: 2px; }
.r-prose code { border-radius: 6px; padding: 1px 6px; background: rgb(var(--c-surface-2)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: rgb(var(--c-text)); }

/* Kurzfassung und Hinweiskästen: Karte in der Fläche der App. */
.r-box { border-radius: 18px; border: 1px solid rgb(var(--c-border)); background: rgb(var(--c-surface)); padding: 18px 20px; }

/* Begriff · Beschreibung, z. B. Cookies und Anbieter. */
.r-prose dl { display: grid; gap: 0; border-top: 1px solid rgb(var(--c-border)); }
.r-prose dl > div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid rgb(var(--c-border)); }
@media (min-width: 640px) { .r-prose dl > div { grid-template-columns: 200px 1fr; gap: 16px; } }
.r-prose dt { font-weight: 600; color: rgb(var(--c-text)); }

/* Offene Angabe, bis sie eingetragen ist – fällt bewusst auf. */
.r-ph { border-radius: 6px; padding: 1px 6px; background: rgb(var(--c-warn) / 0.2); box-shadow: inset 0 0 0 1px rgb(var(--c-warn) / 0.4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; color: rgb(var(--c-warn)); }