/* ═══════════════════════════════════════════════════════════════════════
   vhc.de — DATENSCHUTZSEITE
   Nur was ausschließlich diese Seite braucht. Die Kästen kommen aus
   rechtstext.css, das vorher geladen wird.
   ═══════════════════════════════════════════════════════════════════════

   Diese Datei regelt allein die Darstellung; der Text der Seite ist
   Rechtstext und wird nicht eigenmächtig geändert. Berührt eine technische
   Änderung den INHALT der Erklärung (neue Datenkategorie, Aufbewahrungs-
   frist, externe Verbindung), ist der Text mit anzupassen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Raumbild ──────────────────────────────────────────────────────────
   Anders als das Fensterbild des Impressums: kein Band am Seitenfuß, sondern
   ein FESTER Rahmen am Sichtfenster. Grund ist die Bildkomposition —
   Schränke links und rechts, offene Mitte. Über die ganze Dokumenthöhe
   gezogen (die Seite ist ein Vielfaches höher als breit) bliebe von dem
   Korridor nur ein schmaler senkrechter Ausschnitt übrig. Fest am Fenster
   bleibt die Perspektive erhalten und der Text zieht hindurch.

   `cover` füllt das Fenster, `center` hält den Fluchtpunkt mittig, damit
   die Schränke links und rechts gleich stehen.
   Die Mitte des Bildes ist transparent — dort scheint das Netzwerk weiter durch.
   Stellschraube der Helligkeit: kleiner = dunkler. */
.raumbild {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url(../datenschutz-hg.webp) center center / cover no-repeat;
  filter: brightness(.85);
}
/* Der Boden im unteren Bilddrittel ist deutlich heller als der Rest —
   genau dort laufen die Textkästen durch. Ein Schleier von unten nimmt die
   Spitzen, ohne die Schränke oben zu dämpfen. */
.raumbild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,15,28,0) 45%, rgba(8,15,28,.55) 100%);
}

/* Kästen hier dunkler als im Impressum (dort .70). Bewusst NUR auf dieser
   Seite: Im Impressum liegen sie überwiegend auf dem ruhigen Netzwerk,
   hier auf einem Foto mit Schrankreihen und Bodenspiegelung. Dieselbe Zahl
   hätte also ungleiche Wirkung ergeben — was zählt, ist der Lesegrund,
   nicht der Zahlenwert. */
#datenschutz .imp-block { background: rgba(8,15,28,.84); }

/* ── Eigene Textbausteine ────────────────────────────────────────────── */
/* Standzeile unter dem Paragrafenhinweis. Dieselbe Schrift wie dieser, nur
   eine Spur kleiner und gedämpfter, damit die Rangfolge stimmt ohne Bruch. */
.ds-stand { font-size: 15px; color: var(--tx-dim); opacity: .8; margin-top: 6px; }

/* Zwischenüberschrift innerhalb eines Abschnitts — Abschnitt 06 hat zwei
   Kontaktwege. Kleiner als die Abschnittsüberschrift und in Silber statt
   Grün, damit die Rangfolge Abschnitt > Zwischenteil auf einen Blick
   stimmt. */
.ds-unter { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--grey); margin: 20px 0 10px; }
.ds-unter:first-of-type { margin-top: 4px; }

/* Hervorgehobene Rechtsgrundlage: abgesetzt durch eine grüne Kante, ohne
   eigenen Kasten. */
.ds-grundlage { border-left: 2px solid rgba(34,197,94,.35); padding-left: 14px; }

/* Liste der Betroffenenrechte. Eigene Punkte statt der Standardaufzählung,
   damit sie zum Grün der Seite passen. */
.ds-rechte { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ds-rechte li { position: relative; padding-left: 22px; color: var(--tx-dim2); font-size: 16px; line-height: 1.5; }
.ds-rechte li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: rgba(34,197,94,.75); }