/* ============================================================
   legal.css – gemeinsame Styles für /impressum und /datenschutz
   Lädt nichts von fremden Servern – die Schriften liegen seit
   dem Self-Hosting lokal unter /fonts/.
   ============================================================ */

:root{
  --bg:#fafaf6;
  --card:#ffffff;
  --ink:#0d1410;
  --ink-2:#3b4a40;
  --ink-3:#6b7a70;
  --line:#e8ebe3;
  --green:#1f7a3a;
  --green-2:#15803d;
  --green-soft:#e6f3e9;
  --warn:#b45309;
  --warn-soft:#fdf3df;
  --shadow:0 1px 2px rgba(15,31,23,.03), 0 4px 14px rgba(15,31,23,.04);
  --radius:14px;

  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Instrument Serif","Iowan Old Style",Palatino,Georgia,"Times New Roman",serif;

  --text-body:clamp(0.95rem,0.9rem + 0.15vw,1.0625rem);
  --text-h1:clamp(2rem,1.4rem + 2.4vw,3.25rem);
  --text-h2:clamp(1.15rem,1.05rem + 0.5vw,1.45rem);

  --space-block:clamp(2.5rem,2rem + 2vw,4.5rem);
  --duration:180ms;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.legal-wrap{max-width:760px;margin:0 auto;padding:32px clamp(20px,5vw,40px) 96px}

/* ---------- Kopfzeile ---------- */
.legal-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.legal-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--green-2);
  text-decoration:none;border-radius:99px;
  padding:7px 14px 7px 10px;background:var(--green-soft);
  transition:transform var(--duration) var(--ease), background var(--duration) var(--ease);
}
.legal-back:hover{background:#d1ead8;transform:translateX(-2px)}
.legal-back:focus-visible{outline:2px solid var(--green-2);outline-offset:3px}
.legal-back svg{width:14px;height:14px;flex-shrink:0}
.legal-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* ---------- Titel ---------- */
.legal-hero{padding:var(--space-block) 0 8px}
.legal-hero h1{
  font-family:var(--font-serif);
  font-size:var(--text-h1);
  line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 14px;font-weight:400;
}
.legal-hero .lede{font-size:1.05em;color:var(--ink-3);margin:0;max-width:56ch}
.legal-stand{margin-top:20px;font-size:12.5px;color:var(--ink-3)}

/* ---------- Abschnitte ---------- */
section.legal-section{margin-top:var(--space-block);scroll-margin-top:24px}
section.legal-section > h2{
  font-family:var(--font-serif);
  font-size:var(--text-h2);font-weight:400;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 6px;
}
section.legal-section > .ref{
  font-size:12px;color:var(--ink-3);margin:0 0 16px;
  font-variant-numeric:tabular-nums;
}
h3{font-size:1em;font-weight:700;color:var(--ink);margin:24px 0 6px}
p{margin:0 0 14px}
ul{margin:0 0 14px;padding-left:20px}
li{margin-bottom:7px}
li::marker{color:var(--ink-3)}
strong{color:var(--ink);font-weight:650}

a{color:var(--green-2);text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--green-2);outline-offset:2px;border-radius:2px}

/* ---------- Karten & Adressblock ---------- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);
}
.card + .card{margin-top:14px}
.card p:last-child{margin-bottom:0}

address.legal-address{
  font-style:normal;line-height:1.8;color:var(--ink);
  font-size:1.05em;
}

/* Definitionsliste für „Feld: Wert“-Angaben */
dl.legal-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 20px}
dl.legal-dl dt{color:var(--ink-3);font-size:13px;padding-top:2px}
dl.legal-dl dd{margin:0;color:var(--ink)}
@media (max-width:520px){
  dl.legal-dl{grid-template-columns:1fr;gap:2px}
  dl.legal-dl dd{margin-bottom:10px}
}

/* ---------- Platzhalter, die noch ausgefüllt werden müssen ---------- */
.todo{
  background:var(--warn-soft);color:var(--warn);
  padding:1px 7px;border-radius:5px;
  font-weight:700;font-size:.92em;
  border:1px dashed rgba(180,83,9,.4);
}

.notice{
  background:var(--warn-soft);border:1px solid rgba(180,83,9,.22);
  border-left:3px solid var(--warn);
  border-radius:var(--radius);padding:18px 22px;margin:20px 0;
  color:#7c3d06;font-size:.95em;
}
.notice strong{color:#7c3d06}
.notice p:last-child{margin-bottom:0}

/* ---------- Tabelle (Empfänger/Dienste) ---------- */
.legal-table{width:100%;border-collapse:collapse;font-size:.93em;margin:0 0 14px}
.legal-table th,.legal-table td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;
}
.legal-table th{color:var(--ink-3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.legal-table td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Consent-Widerruf-Button ---------- */
.consent-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.btn{
  appearance:none;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font:inherit;font-size:14px;font-weight:600;
  padding:10px 18px;border-radius:10px;cursor:pointer;
  transition:transform var(--duration) var(--ease), border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.btn:hover{border-color:#cfd8cd;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
.btn-primary{background:var(--green-2);border-color:var(--green-2);color:#fff}
.btn-primary:hover{background:var(--green)}
#consent-state{font-size:13px;color:var(--ink-3)}

/* ---------- Fußzeile ---------- */
.legal-footer{
  margin-top:var(--space-block);padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;color:var(--ink-3);
}
.legal-footer a{font-weight:600}