/* ============================================================
   LEGAL.CSS
   Gemeinsames Stylesheet für Impressum & Datenschutz.
   Nutzt dieselben Design-Tokens wie die Startseite.
   ============================================================ */
:root {
  --bg:        #ffffff;
  --bg-soft:   #f5f4f2;
  --ink:       #1d1d1f;
  --ink-soft:  #6e6e73;
  --hairline:  rgba(0,0,0,0.10);
  --accent:    #1a1a1a;
  --accent-ink:#000000;
  --nav-h:     68px;
  --maxw:      760px;
  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto,
          system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background: var(--bg); line-height: 1.6; font-weight: 400;
  letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; font-weight: 700; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Navigation (reduziert) ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 40px);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.brand {
  font-size: 20px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.02em; text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.nav .back { font-size: 15px; color: var(--ink-soft); text-decoration: none; }
.nav .back:hover { color: var(--ink); }

/* ---------- Inhalt ---------- */
main.legal {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px, 8vw, 90px) clamp(20px, 5vw, 40px) clamp(70px, 10vh, 120px);
}
main.legal h1 { font-size: clamp(32px, 5vw, 44px); margin: 0 0 8px; }
main.legal .updated { color: var(--ink-soft); font-size: 14px; margin: 0 0 40px; }
main.legal h2 { font-size: 22px; margin: 44px 0 12px; }
main.legal h3 { font-size: 17px; margin: 26px 0 8px; }
main.legal p  { margin: 0 0 14px; color: #333; }
main.legal ul { margin: 0 0 14px; padding-left: 22px; color: #333; }
main.legal li { margin-bottom: 6px; }
main.legal .addr { font-style: normal; margin: 0 0 14px; line-height: 1.7; }
main.legal .placeholder {
  background: #fff4d6; padding: 1px 6px; border-radius: 4px;
  font-style: normal; color: #7a5b00;
}
main.legal strong { font-weight: 600; color: var(--ink); }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--hairline);
  padding: 34px clamp(20px, 5vw, 40px);
  font-size: 13px; color: var(--ink-soft);
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
}
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }