/* ==========================================================================
   pages/legal.css
   One template for the whole legal/transparency tier: /impressum,
   /datenschutz, /transparenz, /satzung, /foerdervereinbarung.

   No band, no marker, no images, no reveal animation. These are reference
   documents, not designed pages — the job is that they are found, read and
   trusted. Plan decision D1.
   ========================================================================== */

@layer pages {

  .legal-hero { padding-block: var(--space-9) var(--space-7); }
  .legal-hero .lead { margin-top: var(--space-5); }

  .legal { max-width: var(--width-prose); padding-bottom: var(--space-10); }

  .legal h2 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-5);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-hairline);
  }

  .legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

  .legal h3 { margin-top: var(--space-7); margin-bottom: var(--space-4); }

  .legal dl { margin: 0 0 var(--space-6); }
  .legal dt { font-size: var(--step-small); color: var(--text-muted); margin-top: var(--space-4); }
  .legal dd { margin: 0; }

  /* The statute keeps its literal "(1) (2)" numbering inside the paragraph text
     rather than a CSS counter — the numbering is part of the legal text and must
     not be able to drift from the signed original if a paragraph is added. */

  .legal__meta {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--surface-quiet);
    border-radius: var(--radius-md);
    font-size: var(--step-small);
  }

  .legal__meta p:last-child { margin-bottom: 0; }

  /* ---- transparency: project catalogue ---------------------------------- */

  .projects { max-width: var(--width-content); }

  .projects__year { margin-top: var(--space-8); }

  /* Wide content scrolls inside its own container; the page body never
     scrolls horizontally. */
  .projects__scroll { overflow-x: auto; margin-top: var(--space-6); }

  .projects table { width: 100%; border-collapse: collapse; min-width: 40rem; }

  .projects th,
  .projects td {
    text-align: left;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line-hairline);
    vertical-align: top;
  }

  .projects th {
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    font-size: var(--step-small);
    color: var(--text-heading);
    white-space: nowrap;
  }

  .projects td { font-size: var(--step-small); }
  .projects .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .projects caption { text-align: left; font-size: var(--step-small); color: var(--text-muted); margin-bottom: var(--space-4); }

  /* ---- transparency: cash positions -------------------------------------- */

  .balances { list-style: none; padding: 0; margin: var(--space-6) 0 0; max-width: 26rem; }

  .balances li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line-hairline);
    margin: 0;
    max-width: none;
  }

  .balances .amount { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }
}