/* Die Gestaltung der oeffentlichen Seiten.

   Woertlich aus datenschutz.html herausgezogen, damit alle vier Seiten
   wirklich gleich aussehen und nicht nur aehnlich. Die Datenschutzseite
   behaelt ihre eigene Kopie im Kopfbereich -- ihre Adresse ist bei WHOOP
   hinterlegt, und an einer Seite, die dort eingetragen ist, aendere ich
   nicht mehr als noetig. Wer hier etwas aendert, aendert es dort mit.

   Bewusst ohne Google Fonts: eine Seite, die die Datenverarbeitung
   erklaert und dabei selbst Daten an Dritte abgibt, waere ein
   Widerspruch. Systemschriften reichen. */

:root{
    --bg:#0e1116; --panel:#161a21; --line:#242a34;
    --text:#e6e9ef; --dim:#a2abb9; --faint:#808998; --gold:#c8a34a;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    font-size:15px;line-height:1.7;
  }
  .wrap{max-width:820px;margin:0 auto;padding:40px 22px 80px;}
  header{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:30px;}
  .brand{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);
  }
  h1{font-size:26px;margin:12px 0 6px;line-height:1.25;}
  .stand{font-size:12.5px;color:var(--faint);}
  .sprachwahl{display:flex;gap:8px;margin-top:18px;}
  .sprachwahl button{
    background:var(--panel);border:1px solid var(--line);color:var(--dim);
    border-radius:999px;padding:5px 14px;font:inherit;font-size:12.5px;cursor:pointer;
  }
  .sprachwahl button[aria-pressed="true"]{border-color:var(--gold);color:var(--text);}
  /* 12.10.2026: /info und /methodology haben je Sprache eine eigene Adresse -- die Wahl ist ein Link. */
  .sprachwahl a{background:var(--panel);border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:5px 14px;font-size:12.5px;text-decoration:none;}
  .sprachwahl a[aria-current="page"]{border-color:var(--gold);color:var(--text);}
  h2{
    font-size:15px;margin:34px 0 10px;padding-top:20px;border-top:1px solid var(--line);
    letter-spacing:.2px;
  }
  h2:first-of-type{border-top:0;padding-top:0;}
  h3{font-size:13.5px;margin:20px 0 6px;color:var(--dim);font-weight:600;}
  p,li{color:var(--dim);}
  p{margin:0 0 12px;}
  ul{margin:0 0 12px;padding-left:20px;}
  li{margin-bottom:5px;}
  strong{color:var(--text);font-weight:600;}
  code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12.5px;background:var(--panel);border:1px solid var(--line);
    border-radius:4px;padding:1px 5px;color:var(--text);
  }
  table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:13.5px;}
  th,td{text-align:left;vertical-align:top;padding:8px 10px;border-top:1px solid var(--line);}
  th{color:var(--faint);font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:700;}
  td{color:var(--dim);}
  td:first-child{color:var(--text);white-space:nowrap;}
  .kasten{
    background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:14px 16px;margin:0 0 16px;font-size:13.5px;
  }
  .kasten p:last-child{margin-bottom:0;}
  a{color:var(--gold);}
  footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);}
  [data-sprache]{display:none;}
  [data-sprache].an{display:block;}
  @media(max-width:560px){
    .wrap{padding:26px 16px 60px;} h1{font-size:21px;}
    td:first-child{white-space:normal;}
  }
/* desk-thema-css */
  /* 11.10.2026: hell/dunkel (thema.js, rechtsseiten-thema.mjs) */
  :root[data-theme="light"]{--bg:#F4F5F7;--panel:#FFFFFF;--line:#DDE1E7;--text:#1B2028;--dim:#4F5764;--faint:#636B79;--gold:#8A6D12;}
  .sprachwahl{display:inline-flex;vertical-align:middle;}
  .themawahl{display:inline-flex;align-items:center;gap:2px;margin:18px 0 0 10px;padding:2px;border:1px solid var(--line);border-radius:999px;vertical-align:middle;}
  .themawahl button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--faint);cursor:pointer;}
  .themawahl button svg{width:15px;height:15px;}
  .themawahl button:hover{color:var(--gold);}
  .themawahl button[aria-pressed="true"]{background:var(--panel);color:var(--gold);}
/* /desk-thema-css */