/* Rechtstexte (Impressum, Datenschutz, Nutzungsbedingungen).
 *
 * Eigene Datei statt Inline-<style> in drei Seiten: die drei Dokumente sehen
 * gleich aus und sollen es auch bleiben, wenn eines davon angefasst wird.
 *
 * Ausschliesslich Tokens aus pages.css — keine eigenen Farbwerte. Die erste
 * Fassung dieser Seiten hatte #0066cc auf Weiss hartkodiert und sah neben dem
 * Deep-Water-System aus wie eine fremde Website. Wer hier eine Farbe braucht,
 * die es noch nicht gibt, legt sie in pages.css an, nicht hier.
 */

.doc-wrap { max-width: 760px; }

.head .sp { flex: 1; }

/* Lesetext: etwas grosszuegiger als der Rest der Seiten. Rechtstexte werden
 * am Stueck gelesen, nicht ueberflogen. */
.doc { line-height: 1.7; }
.doc[hidden] { display: none; }

/* Verbindlichkeitshinweis ueber der Uebersetzung. Nicht als Warnung gestylt —
 * es ist kein Fehler, sondern eine Einordnung: der englische Text ist eine
 * Lesehilfe, verbindlich bleibt der deutsche. */
.binding-note {
  margin: 0 0 var(--space-3);
  padding: 10px 14px;
  border-left: 3px solid var(--tide);
  background: var(--surface-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}
.binding-note[hidden] { display: none; }

.doc h1 {
  font-family: var(--display);
  font-weight: 560;
  color: var(--ink);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}

.doc h2 {
  font-family: var(--display);
  font-weight: 560;
  color: var(--ink);
  font-size: 1.1rem;
  margin: var(--space-5) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}

.doc h3 {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  margin: var(--space-3) 0 var(--space-1);
}

.doc p { margin: 0 0 var(--space-2); color: var(--ink); }
.doc ul, .doc ol { margin: 0 0 var(--space-2); padding-left: 22px; color: var(--ink); }
.doc li { margin-bottom: 6px; }

.doc a { color: var(--tide); text-decoration: none; }
.doc a:hover { color: var(--tide-soft); text-decoration: underline; }

.doc .muted { color: var(--ink-soft); font-size: 13.5px; }

.doc code {
  background: var(--wash-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--ink-soft);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}

/* Cookie-Tabelle in der Datenschutzerklaerung. Auf dem Telefon scrollt sie in
 * ihrem eigenen Kasten, statt die ganze Seite breit zu machen. */
.doc .table-scroll { overflow-x: auto; margin: 0 0 var(--space-3); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.doc th, .doc td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--ink);
}
.doc th { background: var(--wash-deep); font-weight: 600; color: var(--ink-soft); }

/* Hinweiskasten fuer die Stellen, an denen der Text den Sollzustand
 * beschreibt und die Umsetzung noch aussteht. */
.doc .note {
  border-left: 3px solid var(--marker);
  background: var(--surface-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-2);
  margin: 0 0 var(--space-3);
}
.doc .note p:last-child { margin-bottom: 0; }

.doc .stand {
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 13px;
}

/* Fusszeile mit den Rechtslinks — steht auf JEDER Seite, nicht nur hier.
 * Deshalb hier und nicht in den einzelnen Dokumenten. */
/* Eigene Breite statt der von .wrap: die Fusszeile steht auf den meisten
 * Seiten AUSSERHALB des Containers und wuerde sonst ueber die volle
 * Fensterbreite laufen — auf der Anmeldeseite waeren das 1265px Trennlinie
 * ueber einem 440px breiten Formular. */
.site-footer {
  max-width: 760px;
  margin: var(--space-6) auto 0;
  padding: var(--space-3) 20px var(--space-4);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13.5px;
}
.site-footer p { margin: 0 0 var(--space-1); }
.site-footer a { color: var(--ink-soft); text-decoration: none; margin: 0 10px; }
.site-footer a:hover { color: var(--tide); }
.site-footer .muted { color: var(--ink-soft); font-size: 12.5px; }