/* ============================================================
   Legal-Seiten (Impressum, Datenschutz, AGB) - gemeinsame Shell.
   Spiegelt die MC2-Optik der index.html, ohne deren komplettes
   Stylesheet zu ziehen. Tokens 1:1 aus dem :root der index.html.
   Generiert aus tools? Nein: von Hand gepflegt. Keine Gedankenstriche.
   ============================================================ */
:root{
  --paper:#FAF9F5; --surface-alt:#F2EFE7; --card:#FFFFFF;
  --ink:#15140F; --ink-deep:#100F0B; --muted:#5C5346;
  --accent:#E5421F; --accent-deep:#C23514;
  --line:#E4DDD0; --on-ink:#FAF9F5;
  --on-ink-soft:rgba(250,249,245,.82); --on-ink-faint:rgba(250,249,245,.58);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.02rem;line-height:1.7;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;word-break:break-word;
}
/* lange dt. Komposita + URLs nie horizontal ueberlaufen lassen (Mobile) */
h1.legal-title,.legal-lead,.legal-section h2,.legal-section p,.legal-section li{
  overflow-wrap:anywhere;hyphens:auto;
}
.wrap{width:100%;max-width:52rem;margin-inline:auto;padding-inline:clamp(1.15rem,5vw,2rem)}
a{color:var(--accent-deep);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--accent)}

/* Kopf */
.legal-head{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.legal-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.95rem}
.legal-brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink);text-decoration:none;font-size:.96rem}
.legal-brand:hover{color:var(--ink)}
.legal-brand .mark{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:.55rem;background:var(--ink);color:var(--on-ink);flex:0 0 auto}
.legal-brand .mark svg{width:1.15rem;height:1.15rem}
.legal-back{font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

/* Inhalt */
main.legal{padding-block:clamp(2.4rem,7vw,4.2rem)}
.legal-kicker{font-family:"DM Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 .9rem}
h1.legal-title{font-family:"Unbounded",system-ui,sans-serif;font-weight:500;font-size:clamp(2rem,5.5vw,3rem);line-height:1.06;letter-spacing:-.01em;margin:0 0 1rem}
.legal-lead{font-size:clamp(1.05rem,2.4vw,1.2rem);color:var(--muted);margin:0 0 2.4rem;max-width:46ch}
.legal-section{margin-block:2rem;padding-top:2rem;border-top:1px solid var(--line)}
.legal-section:first-of-type{border-top:0;padding-top:0}
.legal-section h2{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.16rem;line-height:1.3;letter-spacing:-.01em;margin:0 0 .8rem}
.legal-section p{margin:0 0 .9rem}
.legal-section p:last-child{margin-bottom:0}
.legal-section .addr{color:var(--muted);line-height:1.85}
.legal-section ul{margin:.2rem 0 .9rem;padding-left:1.15rem}
.legal-section li{margin:.32rem 0}

/* Fuss */
.legal-foot{margin-top:3rem;background:var(--ink-deep);color:var(--on-ink-faint);border-top:1px solid var(--line)}
.legal-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.3rem;padding-block:1.8rem;font-size:.86rem}
.legal-foot a{color:var(--on-ink-soft)}
.legal-foot a:hover{color:var(--on-ink)}

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