/* vfb.jesd.tech — die rechtlichen Angaben zur App.
 *
 * WOFUER DIESE SEITE DA IST
 *
 * Zwei Dinge, und beide sind Pflicht: Apple braucht eine oeffentlich erreichbare
 * Datenschutzerklaerung, um die App zu veroeffentlichen, und die App selbst verlinkt
 * hierher. Sie wird also von einer Pruefstelle und von Fans geoeffnet, teils auf dem
 * Telefon, teils am Rechner.
 *
 * Deshalb ist sie NICHT so schmucklos wie der Verwaltungsbereich: das ist ein Werkzeug
 * fuer eine Person, das hier ist die Aussenseite des Vereins. Aber auch nicht mehr als
 * angemessen — es sind Rechtstexte, und die Aufgabe der Gestaltung ist, dass man sie
 * liest.
 *
 * LANGE TEXTE, ALSO EINE SPALTE
 *
 * 33.000 Zeichen in drei Dokumenten. Die Zeile bleibt bei etwa 68 Zeichen: breiter
 * findet das Auge beim Umbruch den Anfang der naechsten Zeile nicht mehr zuverlaessig.
 * Die Nummern der Abschnitte stehen im Text selbst ("## 1. Anbieter"), es gibt hier also
 * keine erzeugte Zaehlung, die mit dem Anwaltstext auseinanderlaufen koennte.
 *
 * BEIDE ERSCHEINUNGSBILDER
 *
 * Die Farben stehen als Werte auf :root und werden im Dunkelmodus nur umgesetzt. Eine
 * Farbe, die es ausschliesslich in einem der beiden Bloecke gibt, waere der uebliche
 * Fehler: dann steht heller Text auf hellem Grund.
 */

:root {
  --papier: #ffffff;
  --tinte: #14161c;
  --leise: #5a6172;
  --linie: #e3e5ea;
  --navy: #0b1024;
  /* Das Gold des Vereins ist auf Weiss zu hell fuer Text. Dieselbe Farbe, dunkler
     gesetzt: erkennbar dasselbe, aber lesbar. */
  --akzent: #8a5c00;
  --flaeche: #f7f8fa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0f1115;
    --tinte: #e8ecf6;
    --leise: #98a3bd;
    --linie: #262b36;
    --navy: #e8ecf6;
    --akzent: #ffb03a;
    --flaeche: #161a21;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--akzent); }
a:hover { text-decoration-thickness: 2px; }

header {
  border-bottom: 1px solid var(--linie);
  padding: 14px 20px;
}
.marke {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--navy); text-decoration: none; font-weight: 650;
  letter-spacing: -.01em;
}
.marke img { display: block; }
/* Das Wappen ist farbig und braucht im Dunkelmodus keinen Umbau — es hat einen
   transparenten Grund und traegt seine eigenen Farben. */

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: 1.2; letter-spacing: -.02em;
  margin: 0 0 1.4rem; text-wrap: balance;
}
h2 {
  font-size: 1.15rem; line-height: 1.3; letter-spacing: -.01em;
  margin: 2.4rem 0 .7rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  text-wrap: balance;
}
/* Die dritte Stufe ist in den Vorlagen entweder eine Unternummer (5.1, 5.2) oder ein
   benanntes Recht ("Recht auf Auskunft"). Beide sind Zwischenstufen und bekommen
   deshalb keine Trennlinie: sonst zerfaellt ein Abschnitt optisch in Einzelteile. */
h3 {
  font-size: 1rem; line-height: 1.35;
  margin: 1.6rem 0 .5rem; color: var(--akzent);
}

p { margin: 0 0 1rem; }
ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
li { margin: 0 0 .35rem; }
strong { font-weight: 650; }

/* Die Wege auf der Startseite. Keine Aufzaehlungspunkte, sondern Flaechen: auf dem
   Telefon ist eine Zeile Text ein schlechtes Ziel fuer einen Daumen. */
ul.wege { list-style: none; padding: 0; margin: 0 0 1.2rem; }
ul.wege li { margin: 0 0 8px; }
ul.wege a {
  display: block; padding: 13px 15px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; text-decoration: none; font-weight: 600;
}
ul.wege a:hover { border-color: var(--akzent); }

footer {
  border-top: 1px solid var(--linie);
  padding: 20px;
  max-width: 40rem; margin: 0 auto;
  color: var(--leise); font-size: .875rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
footer p { margin: 0; }

/* Etwas mehr Luft am Telefon nuetzt nichts, wenn der Text dafuer schmaler wird. Nur
   der Rand geht zurueck. */
@media (max-width: 26rem) {
  main { padding: 22px 16px 44px; }
  header, footer { padding: 14px 16px; }
}