/* ============================================================
   recht.css — Impressum und Datenschutzerklärung

   Diese beiden Seiten sind Nachschlagewerke. Wer sie öffnet,
   sucht einen bestimmten Absatz — er will nicht unterhalten
   werden. Deshalb KEIN Hero über die volle Höhe und keine
   gebaute Szene: ein ruhiger Kopf, und dafür ein Verzeichnis,
   das mitläuft und den gesuchten Abschnitt in einem Griff
   erreichbar macht.

   Das ist keine Nachlässigkeit, sondern die richtige Antwort auf
   den Zweck. Eine Datenschutzerklärung, vor der erst eine
   Animation abläuft, ist eine schlechte Datenschutzerklärung.
   ============================================================ */

/* ---------- Der Kopf ---------------------------------------
   Statt einer Bühne: Luft, die Krume, das Label, der Titel —
   und darunter dasselbe blau-rote Lichtband, das auf allen
   anderen Seiten die Abschnitte trennt. Damit ist die Seite
   erkennbar Teil derselben Website, ohne Aufwand zu treiben. */
.rkopf {
  position: relative;
  /* Gleich viel Luft über der Krume wie unter der Überschrift.

     Vorher standen dort zwei voneinander unabhängige Masse, und
     gemessen kamen 81 px oben gegen 42 px unten heraus — fast
     2 : 1. Jetzt gibt EIN Wert beide Seiten vor.

     Zwei Zuschläge sind nötig, damit aus gleichen Zahlen auch
     gleiche Abstände werden:
     · oben die Höhe der Menüleiste, die über dem Kopf liegt und
       ihre 72 px vom Innenabstand wegnimmt;
     · unten rund 12 px, weil die Zeilenbox der Überschrift bei
       line-height 0.94 unter der Schriftkante noch Platz hat.
       Ohne diesen Ausgleich sässe die Schrift optisch tiefer,
       obwohl die Zahlen stimmen. */
  --luft: clamp(46px, 6.9vh, 80px);
  padding: calc(var(--nav-h, 72px) + var(--luft)) 0 calc(var(--luft) + 12px);
  background: var(--grund);
}
.rkopf .lcrumb { margin-bottom: clamp(26px, 4vh, 44px); }
.rkopf .mono { display: block; margin-bottom: 14px; }
.rkopf h1 {
  margin: 0;
  font-family: var(--f-display);
  /* Untermass 30 statt 38 und ein Wachstum, das an die Breite
     gekoppelt ist: „DATENSCHUTZERKLÄRUNG" ist 20 Zeichen lang und
     passte bei 38 px nicht mehr in 335 px Textbreite. Der
     Zeilenumbruch fiel dann mitten ins Wort — „DATENSCHUTZERKLÄRUN"
     und darunter ein einzelnes „G". */
  font-size: clamp(30px, 8.6vw, 92px);
  font-weight: 700;
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  /* Kein `hyphens: auto`: der Trennalgorithmus hat auf dieser
     Website schon „STRASSENBAU-ER" produziert. break-word bleibt
     als Notnagel, greift bei dieser Grösse aber nicht mehr. */
  hyphens: manual;
  overflow-wrap: break-word;
}
.rkopf::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(46, 111, 224, 0) 0%,
    var(--blue-lift) 18%,
    var(--grund) 52%,
    var(--red) 86%,
    rgba(210, 32, 28, 0) 100%);
  opacity: 0.55;
}

/* ---------- Verzeichnis links, Text rechts ------------------ */
.rraster {
  display: grid;
  grid-template-columns: minmax(0, 27fr) minmax(0, 73fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}

/* Das Verzeichnis klebt: bei einer Datenschutzerklärung von
   dieser Länge ist der Weg zurück nach oben sonst der längste
   Teil der Bedienung. */
.rverz {
  position: sticky;
  top: calc(var(--nav-h, 72px) + 24px);
}
.rverz > .mono { display: block; margin-bottom: 14px; }
.rverz ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--grey-line-2);
}
.rverz li { border-bottom: 1px solid var(--grey-line-2); }
.rverz a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  padding: 11px 0 11px 3px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text-mute);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .2s, border-color .2s, padding-left .2s;
}
.rverz a:hover,
.rverz a:focus-visible { color: var(--tinte); border-left-color: var(--red); padding-left: 9px; }
.rverz a.is-an { color: var(--tinte); border-left-color: var(--blue); padding-left: 9px; }
.rv-nr {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-text);
}
.rverz a.is-an .rv-nr { color: var(--blue); }

/* ---------- Der Text ---------------------------------------
   Ein Rechtstext wird gelesen, nicht überflogen. Zeilenmass um
   68 Zeichen, grosszügiger Durchschuss, klare Stufen zwischen
   den drei Ebenen. Sonst nichts. */
.rtext { max-width: 70ch; }
.rtext h2 {
  margin: clamp(38px, 5.4vh, 62px) 0 clamp(14px, 2vh, 20px);
  padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid var(--grey-line-2);
  font-family: var(--f-display);
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.008em;
  /* Der Abstand zur festen Menüleiste steht jetzt als
     scroll-padding-top am Dokument in base.css und gilt damit für
     alle Seiten. Hier stünde er ein zweites Mal und würde sich
     addieren — die Überschrift landete dann viel zu tief. */
}
.rtext h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rtext h3 {
  margin: clamp(24px, 3.4vh, 34px) 0 9px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.rtext p {
  margin: 0 0 clamp(13px, 1.8vh, 18px);
  font-size: 0.96rem;
  line-height: 1.72;
  color: var(--text-mute);
}
/* In diesen Texten steht <strong> als Zwischenfrage („Wie
   erfassen wir Ihre Daten?"). Sie steht NICHT allein im Absatz —
   eine erste Fassung dieser Regel hing an `:only-child` und griff
   deshalb nie. Kein Mono, keine Versalien: die Frage soll sich
   vom Fliesstext abheben, nicht wie eine Überschrift wirken. */
.rtext p > strong {
  font-weight: 600;
  color: var(--tinte);
}
.rtext ul {
  margin: 0 0 clamp(13px, 1.8vh, 18px);
  padding: 0;
  list-style: none;
}
.rtext li {
  position: relative;
  padding-left: 19px;
  margin-bottom: 9px;
  font-size: 0.96rem;
  line-height: 1.66;
  color: var(--text-mute);
}
.rtext li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 9px; height: 1px;
  background: var(--red);
}
.rtext a {
  color: var(--blue-text);
  text-decoration: none;
  border-bottom: 1px solid var(--grey-line-2);
  overflow-wrap: break-word;
  transition: border-color .18s;
}
.rtext a:hover { border-color: var(--blue); }

@media (max-width: 900px) {
  /* Untereinander, und das Verzeichnis hört auf zu kleben —
     als waagerechter Block über dem Text wäre ein klebendes
     Verzeichnis nur ein Deckel auf dem halben Bildschirm. */
  .rraster { grid-template-columns: minmax(0, 1fr); }
  .rverz { position: static; margin-bottom: clamp(28px, 4vh, 40px); }
  .rtext { max-width: none; }
}