/* ======================================================================
   Rechtsseiten — Datenschutz, Impressum, Kontakt
   ======================================================================

   Diese Seiten teilen sich eine Datei, damit die drei Texte gleich
   aussehen und eine Aenderung an einer Stelle genuegt.

   Die Farben sind dieselben wie im Quiz. Hell oder dunkel richtet sich
   hier nach der Einstellung des Betriebssystems: die Rechtsseiten
   kennen den Hell-Dunkel-Knopf der Startseite nicht, und ein Besucher,
   der nur das Impressum lesen will, soll deswegen nicht geblendet
   werden.

   Anders als das Quiz ist hier Lesen die einzige Aufgabe. Darum eine
   schmale Spalte, grosszuegige Zeilenabstaende und kein Schnickschnack.
   ==================================================================== */

:root{
  --bg:#080b14; --panel:#0f1524; --line:#1e2739;
  --fg:#f2f5fb; --dim:#7b879c;  --gold:#e8b84b;
  --glow:#16203c;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f7fc; --panel:#fff;  --line:#d9e1ee;
    --fg:#0c1220; --dim:#5c6880; --gold:#9c7005;
    --glow:#e3eaf6;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 60% at 50% -10%,var(--glow) 0%,transparent 62%)}

main{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:6vh 6vw 12vh}

.zurueck{margin-bottom:34px;font-size:15px}
.zurueck a{color:var(--dim);text-decoration:none}
.zurueck a:hover{color:var(--gold)}

h1{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
h2{font-size:20px;font-weight:700;margin:40px 0 12px;letter-spacing:-.01em}
p{margin-bottom:14px}
a{color:var(--gold)}

.stand{color:var(--dim);font-size:14px;margin-bottom:28px}
.lead{font-size:18px;color:var(--fg);margin-bottom:8px}

ul{margin:0 0 14px 22px}
li{margin-bottom:8px}

code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* Anschriften und die Kontaktadresse stehen abgesetzt, damit man sie
   findet, ohne den Absatz zu lesen. */
.anschrift{background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;line-height:1.85}
.anschrift.gross{font-size:22px;font-weight:700;text-align:center;padding:26px 18px}


.hinweis{color:var(--dim);font-size:14px;font-style:italic;margin-bottom:10px}

table{border-collapse:collapse;width:100%;margin:6px 0 18px;font-size:14.5px}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
th{background:var(--panel);font-weight:700}
td code{background:transparent;border:0;padding:0}

.fuss{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--dim);font-size:14px}

@media (max-width:620px){
  h1{font-size:30px}
  main{padding:5vh 6vw 10vh}
  table{font-size:13px}
  th,td{padding:7px 8px}
}