/* ============================================================
   Mahlich — Rechtsseiten (Impressum / Datenschutz)
   Look der Hauptseite: dunkler Glow-Header + helles Dokument
   ============================================================ */

body { background: var(--bg); }

/* ---- dunkler Glow-Header (wie der Hero der Startseite) ---- */
.legal-top {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--hero-1), transparent 60%),
    linear-gradient(180deg, var(--hero-2) 0%, var(--hero-3) 100%);
  padding-bottom: clamp(170px, 21vw, 290px);
}
/* weicher Übergang dunkel -> hell (statt harter Kante) */
.legal-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  height: clamp(170px, 21vw, 290px);
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--bg) 14%, transparent) 22%,
    color-mix(in oklab, var(--bg) 42%, transparent) 38%,
    color-mix(in oklab, var(--bg) 74%, transparent) 50%,
    var(--bg) 58%);
}
.legal-top .bloom {
  position: absolute; z-index: -1; left: 50%; top: clamp(30px, 9vh, 110px);
  width: min(720px, 92vw); height: 320px; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 34% 44% at 57% 46%, rgba(var(--glow), 1) 0%, rgba(var(--glow), 0.5) 24%, rgba(var(--glow), 0.16) 46%, transparent 66%),
    radial-gradient(circle at 67% 40%, rgba(var(--glow), 0.42), transparent 56%);
  filter: blur(26px); opacity: 0.9; pointer-events: none;
}
.legal-top .bloom-2 {
  position: absolute; z-index: -1; right: -8%; top: -8%; width: 520px; height: 520px;
  background: radial-gradient(circle at 50% 50%, rgba(var(--glow-2), 0.40), transparent 62%);
  filter: blur(50px); pointer-events: none;
}

/* nav row */
.legal-nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.legal-nav .brand img { height: 26px; display: block; }
.legal-back { display: inline-flex; align-items: center; gap: 9px; font-size: 0.92rem; font-weight: 600;
  color: rgba(255,255,255,0.72); transition: color .2s; }
.legal-back:hover { color: #fff; }
.legal-back .arrow { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25); transition: transform .25s var(--ease), border-color .25s, background .25s; }
.legal-back .arrow svg { width: 14px; height: 14px; display: block; }
.legal-back:hover .arrow { transform: translateX(-2px); border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }

/* hero title */
.legal-hero { text-align: center; max-width: 860px; margin: 0 auto; padding-top: clamp(38px, 7vw, 84px); }
.legal-hero .eyebrow { color: rgba(255,255,255,0.6); justify-content: center; }
.legal-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-top: 16px; letter-spacing: -0.03em; }
.legal-hero .meta { margin-top: 18px; font-family: var(--font-mono); font-size: 0.8rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }
.legal-hero .meta .fillin { color: #fff; }

/* table of contents (dark) */
.legal-toc { max-width: 760px; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.legal-toc a { font-family: var(--font-mono); font-size: 0.76rem; color: rgba(255,255,255,0.72); padding: 6px 13px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-pill); transition: color .2s, border-color .2s, background .2s; }
.legal-toc a:hover { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }

/* ---- helles Dokument ---- */
.legal-doc { max-width: 760px; margin: 0 auto; position: relative; z-index: 2;
  margin-top: clamp(-42px, -5vw, -76px); padding-top: 0; padding-bottom: clamp(56px, 8vw, 110px); }
.legal-doc section { padding-block: clamp(22px, 3vw, 34px); border-top: 1px solid var(--line); scroll-margin-top: 30px; }
.legal-doc section:first-of-type { border-top: none; }
.legal-doc h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; }
.legal-doc h2 .num { font-family: var(--font-mono); font-size: 0.7em; color: var(--accent); margin-right: 10px; }
.legal-doc h3 { font-size: 1.05rem; margin-top: 22px; }
.legal-doc p, .legal-doc li { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; }
.legal-doc p { margin-top: 12px; }
.legal-doc address { font-style: normal; margin-top: 14px; line-height: 1.8; color: var(--ink); }
.legal-doc a { color: var(--accent); }
.legal-doc ul { margin-top: 12px; display: grid; gap: 8px; padding-left: 22px; list-style: disc; }
.legal-doc strong { color: var(--ink); }

/* placeholder (falls noch offen) */
.fillin { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent);
  padding: 1px 8px; border-radius: 6px; font-weight: 600; font-family: var(--font-mono); font-size: 0.9em;
  border: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent); }