/* ===================================================================
   legal.css — Shell der Rechtsseiten (Impressum, Datenschutz)
   ===================================================================
   Diese 20 Regeln waren in impressum.html und datenschutz.html
   byte-identisch dupliziert (Vergleich 15.08.2026: 26 gemeinsame
   Regeln, 0 Wertkonflikte — impressum war eine exakte Teilmenge von
   datenschutz). Hier zusammengeführt, wörtlich übernommen.

   Bewusst NICHT im Kern (beklaro.css): body, a, .nav, .logo, .eyebrow,
   .mono, h1, h2, .footer existieren auf index/preise/kontakt in
   abweichenden Varianten. Die Rechtsseiten haben eine eigene, schlanke
   Shell — schmale 760px-Spalte, sticky Nav mit Zurück-Link statt
   vollem Menü, einzeiliger Footer.

   Reihenfolge entspricht dem Original, damit die Kaskade unverändert
   bleibt. Einbindung IMMER nach beklaro.css.

   Seitenspezifische Ergänzungen (h3, ul, li, .fact, .stand) bleiben
   inline in datenschutz.html.
=================================================================== */

body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Kopfzeile ---------- */
.nav{position:sticky;top:0;background:rgba(251,251,250,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--hairline);z-index:10}
.nav-inner{max-width:760px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--green);position:relative;top:1px}
.back{font-size:14px;font-weight:500;color:var(--muted)}

/* ---------- Inhaltsspalte ---------- */
main{max-width:760px;margin:0 auto;padding:64px 24px 96px}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
h1{font-family:var(--font-head);font-weight:700;font-size:clamp(34px,6vw,52px);letter-spacing:-.022em;line-height:1.05;margin:14px 0 10px}
.lead{color:var(--muted);max-width:56ch}
h2{font-family:var(--font-body);font-weight:700;font-size:20px;letter-spacing:-.01em;margin:44px 0 10px;padding-top:28px;border-top:1px solid var(--hairline)}
p{margin:0 0 12px;max-width:68ch}
address{font-style:normal;margin:0 0 12px}
.mono{font-family:var(--font-mono);font-size:14px}

/* ---------- Fußzeile ---------- */
.footer{border-top:1px solid var(--hairline);padding:28px 24px 40px}
.footer-inner{max-width:760px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.footer-inner a{color:var(--muted)}