/* ==========================================================================
   legal.css — Impressum + Datenschutz

   These two pages render semantic HTML (h1/h2/p/dl) with no hero. Without
   styling, headings fall back to the display scale (far too large) and the
   global "no rhythm on raw elements" rule leaves them cramped. This file:

   - gives the page top/bottom breathing room under the sticky header
   - tames the heading scale to document-appropriate sizes
   - reuses `.prose` (on the <article>) for paragraph rhythm + links, and
     extends it with <dl> rhythm + key/value styling, which .prose omits.
   ========================================================================== */

@layer components {

  .legal {
    padding-block: var(--space-4xl);
  }

  /* Reading column — narrower than the body for comfortable legal text.
     .prose caps at 72ch; we keep it left-aligned within the container. */
  .legal .prose {
    max-width: 72ch;
  }

  /* ---- Headings: calmer than .section-header's display scale ---- */
  .legal h1 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--text-title);
  }

  .legal h2 {
    font-size: var(--text-l);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
    color: var(--text-title);
  }

  /* The intro line right under the h1 reads as a lede. */
  .legal h1 + p {
    font-size: var(--text-ml);
    color: var(--text-muted);
  }

  /* ---- <dl> rhythm + styling (.prose doesn't cover description lists) ---- */
  .legal .prose dl {
    margin: 0;
  }

  .legal .prose :where(p, dl) + dl,
  .legal .prose dl + :where(p, dl) {
    margin-top: var(--space-m);
  }

  .legal .prose dl + h2 {
    margin-top: var(--space-2xl);
  }

  .legal .prose dt {
    font-weight: var(--weight-semibold);
    color: var(--text-title);
  }

  .legal .prose dt:not(:first-child) {
    margin-top: var(--space-s);
  }

  .legal .prose dd {
    margin: 0;
    color: var(--text-body);
  }

  /* The "Stand: …" timestamp + the EN courtesy-translation note. */
  .legal .prose small {
    color: var(--text-muted);
  }
}