/* ═══════════════════════════════════════════════════════════════
   Gemeinsames Aussehen fuer Impressum und Datenschutzerklaerung.
   Die Farbwerte sind dieselben wie in index.html, kontrast-check.mjs
   vergleicht beide Dateien und schlaegt fehl, wenn sie auseinanderlaufen.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#F0EBE1; --card:#FBF8F2; --card-alt:#FFFDF9; --chip:#EFE6D4;
  --border:#E6DDCB; --lines:#E4DAC6;
  --text:#17130E;
  --muted:#756648;
  --dim:#756648;
  --auf-farbe:#1A1206;
  --amber:#F5A623;   --amber-floor:#D98B12;  --amber-text:#926012;
  --amber2:#E06A00;  --amber2-floor:#B85600; --amber2-text:#AD5000;
  --teal:#0E9F8E;    --teal-floor:#0B7568;   --teal-text:#077468;
  --red:#E5484D;     --red-text:#B8393D;
  --correct:#34A853; --correct-text:#237639;
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --schatten:0 2px 8px rgba(23,19,14,.05), 0 12px 28px rgba(23,19,14,.07);
}

/* Schriften selbst ausgeliefert, siehe Kommentar in index.html */
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500 800; font-display:swap;
  src:url('schrift/jakarta-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800; font-display:swap;
  src:url('schrift/bricolage-latin.woff2') format('woff2');
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-weight:500;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.14;letter-spacing:-.02em}
h3{margin:0;font-weight:800;line-height:1.25}
p{margin:0}
strong,b{font-weight:800}

:focus-visible{outline:3px solid var(--text);outline-offset:3px;border-radius:8px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--text);color:var(--bg);
  padding:14px 20px;border-radius:0 0 18px 0;font-weight:800;text-decoration:none;
}
.skip:focus{left:0}

/* ─── Kopfzeile (Markup aus public/rechtliches/) ────────────── */
header.site{
  position:sticky;top:0;z-index:20;
  background:rgba(240,235,225,.92);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--border);
}
header.site .inner{
  max-width:820px;margin:0 auto;padding:0 20px;min-height:64px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
}
.brand{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;
  color:var(--text);text-decoration:none;
}
nav.site{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px}
nav.site a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;
  color:var(--muted);text-decoration:none;font-size:15px;font-weight:700;
}
nav.site a:hover{color:var(--text);background:var(--chip)}

/* ─── Inhalt ────────────────────────────────────────────────── */
main.wrap{max-width:820px;margin:0 auto;padding:40px 20px 64px}
main h1{font-size:clamp(30px,6vw,42px)}
main h2{font-size:clamp(21px,3.6vw,26px);margin-top:40px}
main h3{font-size:17px;margin-top:26px}
main p{margin-top:14px;color:var(--muted)}
main p strong{color:var(--text)}
main ul,main ol{margin:14px 0 0;padding-left:22px;color:var(--muted)}
main li{margin-top:6px}
p.meta{font-size:14px;color:var(--dim)}
p.lede{font-size:18px;color:var(--text)}
a{color:var(--teal-text);text-underline-offset:3px}
a:hover{color:var(--teal-floor)}
a.mail{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

.tablewrap{overflow-x:auto;margin-top:16px;border:2px solid var(--border);border-radius:16px;
  background:var(--card);box-shadow:var(--schatten)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:12px 14px;vertical-align:top;border-bottom:2px solid var(--border)}
th{font-weight:800;color:var(--text);background:var(--chip);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
tr:last-child td{border-bottom:0}
td{color:var(--muted)}
td:first-child{color:var(--text);font-weight:700}

.note{
  margin-top:20px;padding:16px 18px;border-radius:14px;
  background:var(--chip);border-left:6px solid var(--amber);color:var(--text);
}

/* Offene Stelle, rot, damit sie niemand uebersieht. Dunkle Schrift auf Rot: 4,74:1 */
mark.ph{background:var(--red);color:var(--auf-farbe);padding:2px 8px;border-radius:6px;font-weight:800}

/* ─── Fusszeile ─────────────────────────────────────────────── */
footer.site{border-top:2px solid var(--border);padding:28px 0 44px;color:var(--dim);font-size:14px}
footer.site .inner{max-width:820px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
footer.site a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;font-weight:700}
footer.site a:hover{color:var(--text)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}