/* ============================================================================
   staedy — Apple-native styling for legal documents (Impressum · Datenschutz · AGB)
   Mirrors the index-apple-mockup design system: self-hosted Inter (SF Pro stand-in),
   SF system stack, frosted nav, centered reading column, sticky section nav.
   100% local — no font CDN, no external connections.
   ========================================================================= */

:root{
  --ink:#1d1d1f;            /* Apple label */
  --ink-2:#424245;          /* legal body — dark for long-form readability */
  --ink-3:#6e6e73;          /* secondary */
  --ink-4:#86868b;          /* tertiary / meta */
  --line:#d2d2d7;           /* hairline */
  --bg:#fff;
  --bg-2:#f5f5f7;           /* systemGroupedBackground */
  --blue:#0071e3;
  --blue-hover:#0077ed;
  --radius:18px;
  --wrap:980px;
  --measure:700px;          /* reading column */
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",sans-serif;
}

/* Inter (self-hosted, OFL) — SF Pro stand-in on non-Apple machines. Nothing leaves the device. */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-var.woff2") format("woff2");
  font-style:normal;font-weight:100 900;font-display:swap}
/* brand signature — EB Garamond italic */
@font-face{font-family:"EB Garamond";src:url("/assets/fonts/eb-garamond-italic.woff2") format("woff2");
  font-style:italic;font-weight:400 800;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;letter-spacing:-.022em}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:600;color:var(--ink)}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.88em;
  background:rgba(0,0,0,.05);padding:1px 6px;border-radius:6px}

/* ---------------- frosted nav ---------------- */
.nav{position:sticky;top:0;z-index:50;height:48px;
  background:rgba(250,250,252,.8);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.nav__in{max-width:var(--wrap);margin:0 auto;height:100%;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between}
.nav__brand{color:var(--ink);font-family:"EB Garamond",Georgia,serif;font-style:italic;
  font-size:23px;font-weight:500}
.nav__brand:hover{color:var(--blue);text-decoration:none}
.nav__back{font-size:14px;color:var(--ink-3);display:inline-flex;align-items:center;gap:5px}
.nav__back:hover{color:var(--ink);text-decoration:none}
.nav__back svg{width:15px;height:15px}

/* ---------------- layout ---------------- */
.legal-wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;
  align-items:start}
.legal-main{max-width:var(--measure);padding:70px 0 40px;min-width:0}
/* solo: short documents (Impressum) — one centered column, no TOC */
.legal-wrap--solo{grid-template-columns:minmax(0,1fr);gap:0}
.legal-wrap--solo .legal-main{margin:0 auto}

/* ---------------- document header ---------------- */
.legal-eyebrow{color:var(--blue);font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.legal-main h1{font-size:clamp(2.4rem,1.2vw+2.05rem,3.25rem);line-height:1.07;font-weight:600;
  letter-spacing:-.03em;hyphens:auto}
.legal-updated{margin-top:16px;color:var(--ink-4);font-size:15px}
.legal-lede{margin-top:22px;font-size:19px;line-height:1.55;color:var(--ink-3);letter-spacing:-.01em}

/* ---------------- sections ---------------- */
.legal-section{padding-top:40px;margin-top:40px;border-top:1px solid var(--line);scroll-margin-top:72px}
.legal-section:first-of-type{border-top:0}
.legal-section h2{font-size:25px;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.legal-section p{color:var(--ink-2);margin-bottom:14px}
.legal-section p:last-child{margin-bottom:0}
.legal-section a{font-weight:500}

/* ---------------- sticky table of contents ---------------- */
.legal-toc{position:sticky;top:80px;padding-top:74px;font-size:14px}
.legal-toc__label{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-4);
  text-transform:uppercase;margin-bottom:14px}
.legal-toc ol{list-style:none;display:flex;flex-direction:column;gap:1px}
.legal-toc a{display:block;color:var(--ink-3);padding:6px 12px;border-radius:8px;line-height:1.35;
  border-left:2px solid transparent}
.legal-toc a:hover{color:var(--ink);background:var(--bg-2);text-decoration:none}
.legal-toc a.is-active{color:var(--blue);font-weight:500;background:rgba(0,113,227,.07)}

/* ---------------- privacy-by-design callout card (Datenschutz) ---------------- */
.pcard{background:var(--bg-2);border-radius:var(--radius);padding:34px 34px 30px;margin:40px 0;
  scroll-margin-top:72px}
.pcard__eyebrow{color:var(--blue);font-size:14px;font-weight:600;letter-spacing:-.005em;margin-bottom:10px}
.pcard h2{font-size:26px;line-height:1.18;font-weight:600;letter-spacing:-.02em;margin-bottom:14px;border:0;padding:0}
.pcard__lead{color:var(--ink-2);margin-bottom:24px}
.pcard__list{list-style:none;display:flex;flex-direction:column;gap:0}
.pcard__item{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:18px 0;
  border-top:1px solid var(--line)}
.pcard__item:first-child{border-top:0;padding-top:0}
.pcard__k{font-weight:600;color:var(--ink);letter-spacing:-.01em}
.pcard__v{color:var(--ink-2)}
.pcard__why{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:16px;line-height:1.6}

/* ---------------- footer ---------------- */
.legal-foot{background:var(--bg-2);border-top:1px solid var(--line);margin-top:60px;
  font-size:12px;color:var(--ink-4)}
.legal-foot__in{max-width:var(--wrap);margin:0 auto;padding:28px 22px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.legal-foot__brand{font-family:"EB Garamond",Georgia,serif;font-style:italic;font-size:19px;
  font-weight:500;color:var(--ink-3)}
.legal-foot__note{flex:1;min-width:240px}
.legal-foot__links{display:flex;gap:22px}
.legal-foot__links a{color:var(--ink-3)}

/* ---------------- responsive ---------------- */
@media(max-width:860px){
  .legal-wrap{grid-template-columns:1fr;gap:0}
  .legal-toc{display:none}
  .legal-main{padding:48px 0 32px;max-width:none}
  .pcard__item{grid-template-columns:1fr;gap:4px}
  .pcard{padding:26px 22px}
}

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