/* ==========================================================================
   RECHTSSEITEN — Datenschutz (später Impressum)
   ==========================================================================
   Eine Rechtsseite hat genau eine Aufgabe: gelesen werden können. Kein Bild,
   kein Effekt, keine Skalenspitze — die Mittel der Website wären hier eine
   Behauptung von Bedeutung, wo Genauigkeit gefragt ist.

   Was sie trotzdem von einer Textwüste unterscheidet:
     · eine SCHMALE Spalte (68 Zeichen), damit die Augen die Zeile finden,
     · Abschnitte auf Haarlinien statt in Kästen,
     · Fristen als Tabelle, weil eine Frist ein Wert ist und kein Satz.

   Die Seite trägt bewusst KEINEN Seitenrand aus `.kapitel`: Sie ist eine
   einzige Spalte und setzt ihren Rand selbst.
   ========================================================================== */

.recht {
  /* Oben 150/196 px wie in der Vertragsstrecke: Das Wappen im Kopf hängt bis
     130 px (bis 900 px Breite) beziehungsweise 176 px in die Seite hinein. */
  padding: 150px var(--inset) clamp(60px, 8vw, 110px);
  /* Links ausgerichtet, nicht mittig: Asymmetrie ist auf dieser Website der
     Normalfall, und eine zentrierte Spalte wirkt wie ein fremdes Dokument im
     Fenster. Die Breite bleibt bei 74 Zeichen — darüber verliert man die Zeile. */
  max-width: 74ch; margin: 0;
}
@media (min-width: 901px) { .recht { padding-top: 196px; } }

.recht-kopf { margin-bottom: clamp(34px, 5vw, 56px); }
.recht-kicker {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); margin: 0 0 14px;
}
.recht-kopf h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1.02;
  font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -.035em; color: var(--tinte);
  margin: 0 0 20px; text-wrap: balance;
}
.recht-lead {
  font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--sekundaer);
  margin: 0 0 16px;
}
.recht-lead b { font-weight: 600; color: var(--tanne); }
.recht-stand {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0;
}

/* Ein Abschnitt liegt auf einer Haarlinie — die Gliederung entsteht durch die
   Kante, nicht durch einen Rahmen. */
.recht-teil { padding-top: clamp(26px, 3.4vw, 40px); border-top: 1px solid var(--hairline); margin-top: clamp(26px, 3.4vw, 40px); }
.recht-teil h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -.02em; line-height: 1.15;
  color: var(--tinte); margin: 0 0 14px;
}
.recht-teil h3 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gruen);
  margin: 26px 0 8px;
}
.recht-teil p { font-size: 16.5px; line-height: 1.65; color: var(--text, #43504a); margin: 0 0 12px; }
.recht-teil p b { color: var(--tinte); font-weight: 600; }
/* Ein Absatz, der noch nicht abgenommen ist, sagt das — und sieht auch so aus.
   Kein Warnrot: Es ist kein Fehler, sondern ein Stand. Die Kante links reicht,
   um ihn vom geprüften Text zu unterscheiden. */
.recht-vorbehalt {
  border-left: 3px solid var(--gruen); padding: 12px 0 12px 16px;
  background: var(--mint); border-radius: 0 6px 6px 0;
}
.recht-teil code {
  font-family: ui-monospace, Menlo, monospace; font-size: 14.5px;
  background: var(--mint); padding: 1px 6px; border-radius: 4px; color: var(--tanne);
}
.recht-liste { list-style: none; margin: 0 0 14px; padding: 0; }
.recht-liste li {
  font-size: 16.5px; line-height: 1.6; color: var(--text, #43504a);
  padding: 10px 0 10px 22px; border-top: 1px solid var(--hairline); position: relative;
}
.recht-liste li:first-child { border-top: 0; }
/* Ein Strich statt eines Punktes — dasselbe Zeichen wie in den Aufzählungen der
   Vertragsseite. */
.recht-liste li::before {
  content: "—"; position: absolute; left: 0; top: 10px; color: var(--gruen);
}
.recht-liste li b { color: var(--tinte); font-weight: 600; }

.recht-tabelle { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.recht-tabelle th, .recht-tabelle td {
  text-align: left; vertical-align: top; padding: 11px 0;
  border-top: 1px solid var(--hairline); font-size: 16px; line-height: 1.5;
}
.recht-tabelle th {
  font-weight: 600; color: var(--tinte); padding-right: 24px; width: 42%;
}
.recht-tabelle td { color: var(--text, #43504a); }
@media (max-width: 560px) {
  /* Auf dem Handy untereinander: Zwei Spalten mit langen Fristen brechen sonst
     in Einzelwörter. */
  .recht-tabelle th, .recht-tabelle td { display: block; width: auto; padding: 0; }
  .recht-tabelle th { padding-top: 12px; border-top: 1px solid var(--hairline); }
  .recht-tabelle td { padding-bottom: 12px; border-top: 0; }
}

.recht-fuss {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: clamp(34px, 5vw, 56px) 0 0; padding-top: clamp(26px, 3.4vw, 40px);
  border-top: 1px solid var(--hairline);
}

/* `.sr-only` steht in seite.css NICHT — jede Seite, die es braucht, bringt es
   selbst mit. Ohne das stünde die Tabellenbeschriftung sichtbar da. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media print {
  .kopf, .header, .fuss, footer, .schnell, .recht-fuss { display: none !important; }
  .recht { padding: 0; max-width: none; }
  .recht-teil { break-inside: avoid; }
}

/* ==========================================================================
   IMPRESSUM — die Pflichtangaben als Liste
   ==========================================================================
   Ein Impressum wird nicht gelesen, sondern DURCHSUCHT: Wer es öffnet, will
   die Anschrift, die Registernummer oder den Namen des Vorstands — eine
   einzelne Angabe, möglichst schnell. Deshalb eine Beschreibungsliste mit
   Haarlinien statt Fließtext, und deshalb steht der Begriff links und die
   Angabe rechts, wo das Auge sie ohne Suchen findet.

   Auf schmalen Fenstern stapeln sich beide (Hausregel: kein H-Scroll).
   ========================================================================== */
.imp-liste { margin: 0; }
.imp-zeile {
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 4px 26px; padding: 13px 0;
  border-bottom: 1px solid var(--hairline-dunkel, rgba(11, 65, 43, .14));
}
.imp-zeile:first-child { border-top: 1px solid var(--hairline-dunkel, rgba(11, 65, 43, .14)); }
.imp-zeile dt {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #6b7a71);
  padding-top: 3px;
}
/* Die Norm gehört zur Beschriftung, aber nicht in dieselbe Zeile: Sie erklärt,
   warum die Angabe dasteht — und ist für den Suchenden Nebensache. */
.imp-zeile dt .imp-norm {
  display: block; font-size: 10px; font-weight: 400; letter-spacing: .06em;
  text-transform: none; opacity: .75; margin-top: 3px;
}
.imp-zeile dd { margin: 0; line-height: 1.65; }
.imp-zeile dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Jede vertretungsberechtigte Person auf ihrer eigenen Zeile — bei zwei
   Vorsitzenden nebeneinander sähe es aus, als verträten sie nur gemeinsam. */
.imp-person { display: block; }
.imp-person + .imp-person { margin-top: 8px; }
.imp-amt { display: block; font-size: 13.5px; color: var(--muted, #6b7a71); }
.imp-dazu { display: block; font-size: 13.5px; color: var(--muted, #6b7a71); margin-top: 6px; }
@media (max-width: 620px) {
  .imp-zeile { grid-template-columns: 1fr; gap: 6px; }
}
/* Der Gruß vor dem Namen des Verantwortlichen: leiser als der Name, in einer
   Zeile mit ihm — er ist eine Beifügung, keine eigene Angabe. */
.imp-gruss { color: var(--muted, #6b7a71); }