/* ════════════════════════════════════════════════════════════════
 * Schaad Advisors — Legal page layout (Impressum / Datenschutz)
 * ──────────────────────────────────────────────────────────────────
 * Single shared stylesheet for the two legal pages. Same hero topper
 * rhythm as the rest of the site (logo + nav + Kontakt anchored top
 * on dark bg-studio), then a paper-bg content column with hairline-
 * separated sections.
 *
 * All values reference shared/tokens.css — no off-token literals.
 * ════════════════════════════════════════════════════════════════ */

:root {
  --gutter: max(0px, calc((100vw - 1440px) / 2));
  /* --rail-pad is the global side-padding token (shared/tokens.css). */
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }
html {
  font-family: var(--font-sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--color-paper);
  color: var(--color-charcoal);
  overflow-x: clip;
}
a   { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }


/* ─── Entrance animation · header chrome static, content reveals ── */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.legal-hero__lead     { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.10s backwards; }
.legal-content__inner { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.25s backwards; }

@media (prefers-reduced-motion: reduce) {
  .legal-hero__lead,
  .legal-content__inner { animation: none; }
}


/* ════════════════════════════════════════════════════════════════
 *  HERO topper · short — no body, no photos, just title
 * ─────────────────────────────────────────────────────────────── */

.legal-hero {
  position: relative;
  width: 100vw;
  min-height: 360px;
  color: var(--color-white);
  z-index: 5;
  padding-bottom: var(--space-16);   /* 64px breathing before paper */
}

/* Studio backdrop · same atlas-blue halo + grain as other heroes. */
.bg-studio {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%,
      rgba(17, 100, 144, 0.22) 0%,
      transparent 65%),
    var(--color-bg-deep);
}
.bg-studio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feComponentTransfer><feFuncR type='linear' slope='3' intercept='-1'/><feFuncG type='linear' slope='3' intercept='-1'/><feFuncB type='linear' slope='3' intercept='-1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* Header chrome (logo · nav · Kontakt · burger · panel) lives in
   shared/site-header.css — same source on every page. */


/* ─── Hero lead · eyebrow + page title (no body) ─────────────── */

/* Section side padding = fluid 24-80 px gutter (matches --layout-gutter
   token). Inner column is purely a readable measure cap, no padding,
   so box-sizing math doesn't eat the content. */
.legal-hero__lead {
  padding: 191px clamp(24px, 5vw, 80px) 0;
}
.legal-hero__lead > * {
  max-width: 880px;
}

.legal-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);            /* 12px */
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-uppercase);
  text-transform: uppercase;
  color: var(--color-alpine);
  margin: 0 0 var(--space-6);     /* 24px · canonical eyebrow→title gap */
}
.legal-hero__eyebrow-line {
  width: 16px;
  height: 1px;
  background: var(--color-alpine);
  flex-shrink: 0;
}

.legal-hero__title {
  font-size: var(--text-h2);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-display);
  color: var(--color-white);
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
 *  CONTENT · paper bg, single readable column
 * ─────────────────────────────────────────────────────────────── */

/* Section provides the side gutters (fluid 24-80px). Inner is purely
   a readable-measure cap — no padding, so the 720 px max really is
   720 px of content, not 720-minus-padding. */
.legal-content {
  background: var(--color-paper);
  color: var(--color-charcoal);
  padding: clamp(64px, 8vw, 120px) clamp(24px, 5vw, 80px);
}

.legal-content__inner {
  max-width: 720px;             /* readable measure for legal copy */
  margin: 0 auto;
}

.legal-content__updated {
  display: inline-block;
  margin-bottom: var(--space-12);   /* 48px */
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-uppercase);
  text-transform: uppercase;
  color: var(--color-mute);
  font-variant-numeric: tabular-nums;
}

.legal-content section + section {
  margin-top: var(--space-12);      /* 48px between sections */
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}

.legal-content h2 {
  font-size: var(--text-h3);        /* 24px */
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);       /* 16px */
}

.legal-content h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-semi);
  letter-spacing: 0;
  line-height: var(--leading-tight);
  color: var(--color-charcoal);
  margin: var(--space-6) 0 var(--space-2);   /* 24/8 */
}

.legal-content p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);       /* 16px */
}
.legal-content p:last-child { margin-bottom: 0; }

.legal-content a {
  color: var(--color-atlas);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.legal-content a:hover { border-bottom-color: var(--color-atlas); }

/* Definition-style address block · used for Verantwortliche Stelle. */
.legal-content dl {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);  /* 12/24 */
  margin: 0 0 var(--space-6);
}
.legal-content dt {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-mute);
  padding-top: 2px;
}
.legal-content dd {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-charcoal);
}

/* Inline placeholder marker for client-fillable text · subtle but
   visible hairline dashed underline to flag what's still empty. */
.legal-content [data-placeholder] {
  background: rgba(17, 100, 144, 0.06);
  border-bottom: 1px dashed var(--color-atlas);
  padding: 0 4px;
  color: var(--color-atlas-dk);
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════════
 *  Responsive
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .legal-hero__lead { padding-top: 160px; }
  .legal-hero__nav { display: none; }
  .legal-content dl { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .legal-content dt { padding-top: var(--space-3); }
}