/* =========================================================
   zm-webdesign.de — Rechtliche Seiten (Impressum, Datenschutz)
   Ergänzt style.css: nutzt dessen Tokens, Schriften, Navigation, Buttons und Footer.
   ========================================================= */

html { scroll-padding-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Statischer Farbschimmer wie auf der Startseite */
.legal::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 42% at 78% -4%, rgba(91, 140, 255, 0.15), transparent 70%),
    radial-gradient(42% 38% at 12% 6%, rgba(167, 139, 250, 0.11), transparent 70%);
}

/* Auf der Startseite blendet JS die Navigation ein; diese Seiten kommen ohne JS aus */
.legal .nav { opacity: 1; }
.legal .nav__cta { display: inline-flex; }

.legal a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Kopf ---------- */
.legal__main { padding: calc(var(--nav-h) + 20px + clamp(56px, 10vh, 120px)) 0 clamp(72px, 12vh, 140px); }
.legal__head { margin-bottom: clamp(40px, 7vh, 80px); }
.legal__head h1 {
  font-size: clamp(2.1rem, 7.4vw, 5.4rem); letter-spacing: -0.045em; line-height: 1.02;
  text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
.legal__head p:last-child { margin-top: 20px; max-width: 52ch; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.15rem); }

/* ---------- Layout: Seitenleiste + Text ---------- */
.legal__layout { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(32px, 7vw, 112px); align-items: start; }
.legal__aside {
  position: sticky; top: calc(var(--nav-h) + 20px + 32px); display: grid; gap: 40px;
  max-height: calc(100vh - var(--nav-h) - 72px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.legal__aside-title { margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.legal__aside ul, .legal__aside ol { display: grid; gap: 2px; }
.legal__aside a {
  display: block; padding: 7px 0 7px 14px; border-left: 1px solid var(--line-2);
  font-size: 14px; line-height: 1.35; color: var(--muted); transition: color 0.3s, border-color 0.3s;
}
.legal__aside a:hover, .legal__aside a[aria-current="page"] { color: var(--text); border-color: var(--accent); }

/* ---------- Text ---------- */
.legal__body { max-width: 70ch; color: #c9c9d1; line-height: 1.7; }
.legal__body > * + * { margin-top: 1.1em; }
.legal__body h2 {
  margin-top: 3.2rem; padding-top: 2.2rem; border-top: 1px solid var(--line);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.15; color: var(--text); text-wrap: balance;
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body h3 { margin-top: 2rem; font-size: 1.1rem; letter-spacing: -0.015em; line-height: 1.3; color: var(--text); }
.legal__body h2 + *, .legal__body h3 + * { margin-top: 1rem; }
.legal__body strong { color: var(--text); font-weight: 600; }
.legal__body a {
  color: var(--text); text-decoration: underline; text-decoration-color: rgba(91, 140, 255, 0.6);
  text-underline-offset: 0.22em; transition: text-decoration-color 0.3s;
}
.legal__body a:hover { text-decoration-color: var(--accent-3); }

.legal__list { display: grid; gap: 0.55em; }
.legal__list li { position: relative; padding-left: 1.5em; }
.legal__list li::before {
  content: ""; position: absolute; left: 0.3em; top: 0.72em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(91, 140, 255, 0.6);
}

.legal__card { display: block; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-style: normal; color: var(--text); }
.legal__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 28px; }
.legal__facts dt { color: var(--muted); }
.legal__facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* Noch auszufüllende Angaben: bewusst auffällig, damit sie vor dem Livegang nicht untergehen */
mark.todo {
  padding: 0.05em 0.35em; border-radius: 4px; background: rgba(253, 224, 71, 0.16); color: #fde047;
  outline: 1px dashed rgba(253, 224, 71, 0.55); outline-offset: 1px;
}

/* ---------- Footer (drei Spalten statt vier) ---------- */
.legal .footer { padding-inline: 0; } /* der Container zentriert schon; sonst doppelter Seitenabstand */
.legal .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
.legal .footer li { font-size: 15px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .legal__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .legal__aside { position: static; max-height: none; overflow: visible; }
  .legal__toc { display: none; }
  .legal__pages ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .legal__pages a { padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; }
  .legal__pages a:hover, .legal__pages a[aria-current="page"] { border-color: var(--accent); }
  .legal .footer__grid { grid-template-columns: 1fr 1fr; }
  .legal .footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .legal .footer__grid { grid-template-columns: 1fr; }
  .legal__card { padding: 18px 20px; }
}

/* ---------- Druck ---------- */
@media print {
  body.legal { background: #fff; color: #000; }
  .legal::before, .legal .nav, .skip-link, .legal__aside, .legal .footer { display: none !important; }
  .legal__main { padding: 0; }
  .legal__layout { display: block; }
  .legal__head h1, .legal__head p:last-child, .legal__body, .legal__body h2, .legal__body h3,
  .legal__body strong, .legal__body a, .legal__card, .legal__facts dt, .legal__facts dd { color: #000; }
  .legal__body h2 { border-color: #999; }
  .legal__card { background: none; border-color: #999; }
  mark.todo { background: none; color: #000; outline-color: #000; }
}