/* Base — reset, typography roles, the flow utility. design-system.md §3. */
@layer reset, tokens, base, layout, components, utilities, prose;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img, picture, video { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
}

@layer base {

  /* The header is sticky, so an in-page anchor lands its target under it
     unless the root says otherwise: measured, every #id landed at exactly
     targetTop=0, fully hidden behind 97-185px of header. That breaks the
     mitigation ux-ia.md §7 rests on — the seven /gleitschirmkurse/* URLs
     301 to anchors on /weiterbildung/, and the visitor is supposed to
     arrive AT the heading carrying their old page title.
     --header-h is the measured header height plus room to breathe; it is
     an over-estimate on purpose, since landing a little low is invisible
     and landing high hides the heading. */
  :root { --header-h: 5rem; }
  @media (min-width: 60rem) { :root { --header-h: 6.5rem; } }
  html { scroll-padding-top: var(--header-h); }

  html {
    font-family: var(--font-sans);
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-normal);
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Numbers must line up. Prices, dates, phone numbers, table cells. */
  .u-nums, table, .preis, .termin, time, .steckbrief__wert {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* Hierarchy — design-system.md §3.3 */
  h1, .fs-3xl { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-display); }
  h2, .fs-2xl { font-size: var(--fs-2xl); font-weight: var(--fw-semi); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
  h3, .fs-xl  { font-size: var(--fs-xl);  font-weight: var(--fw-semi); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
  h4, .fs-md  { font-size: var(--fs-md);  font-weight: var(--fw-semi); line-height: var(--lh-snug); }
  h5, h6      { font-size: var(--fs-base); font-weight: var(--fw-semi); line-height: var(--lh-snug); }

  .display { font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
  .lede    { font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--ink-muted); max-width: var(--measure-lede); }

  /* The eyebrow — the single most identity-carrying text style on the site. */
  .eyebrow {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--brand-ink);
    margin-bottom: var(--space-2);
  }
  /* Every --deep surface, in one place: the default --brand-ink is a dark
     orange for light grounds and only reaches 2.57:1 on --deep. Lighthouse
     caught .cta-band, which had been missed when .section--deep and the
     footer each got their own rule. --on-deep-accent is the token that
     exists for exactly this (6.64:1). */
  .section--deep .eyebrow,
  .cta-band .eyebrow,
  .site-footer .eyebrow { color: var(--on-deep-accent); }


  /* --- German compound nouns — design-system.md §3.4 ------------------ */
  /* Layer 1 — browser hyphenation, prose only. Requires lang="de". */
  .prose, .prose p, .prose li, .faq__antwort, .rechtstext {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 3;
    hyphenate-limit-lines: 2;
  }

  /* Layer 2 — headings get balance + manual hyphens, never auto. */
  h1, h2, h3, .kurs-card__titel, .steckbrief__label {
    text-wrap: balance;
    hyphens: manual;
    overflow-wrap: break-word;
  }
  p, li { text-wrap: pretty; }

  /* Layer 4 — never truncate, never justify. */
  .prose p, .prose li { text-align: left; }

  /* The reset strips list markers, because most lists on this site are layout
     (nav, footer, card grids, the Termin list). Body copy is the exception: a
     list inside prose is an actual list and needs its marker back. Declared
     here in @layer base so the component layer's own lists (.ablauf, .vorteile,
     .team-grid …) still win when they sit inside a .prose block. */
  .prose ul, .faq__antwort ul, .rechtstext ul { list-style: disc; }
  .prose ol, .faq__antwort ol, .rechtstext ol { list-style: decimal; }
  .prose ul, .prose ol,
  .faq__antwort ul, .faq__antwort ol,
  .rechtstext ul, .rechtstext ol {
    padding-inline-start: var(--space-5);
  }
  .prose li + li, .faq__antwort li + li, .rechtstext li + li {
    margin-block-start: var(--space-1);
  }
  .prose li::marker, .faq__antwort li::marker, .rechtstext li::marker {
    color: var(--brand-ink);
  }

  /* Focus — never removed, only replaced. */
  :focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
  }
  /* Dieselben drei --deep-Flächen wie bei .eyebrow oben — design-system.md §7.4
     listet sie hier ebenfalls zu dritt. .cta-band fehlte (Cross-Wave-Audit C1):
     --focus (#A63C00) erreicht auf --deep nur 2,58:1 und liegt damit unter der
     3:1-Schwelle von WCAG 2.2 SC 1.4.11 — der Ring wäre praktisch unsichtbar. */
  .section--deep :focus-visible,
  .site-footer :focus-visible,
  .cta-band :focus-visible {
    outline-color: var(--focus-inverse);
  }
}

@layer utilities {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--wide   { max-width: var(--container-wide); }
  .container--narrow { max-width: var(--container-narrow); }

  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* The flow utility — design-system.md §3.6. One rule handles ninety
     percent of vertical spacing. Do not set margin-bottom by hand. */
  /* Order matters and is not cosmetic: `margin-block` is a shorthand that also
     writes margin-block-start, and both rules have the same specificity. With
     the reset second it overwrote every flow gap on the site — the whole
     utility was silently doing nothing. Reset first, then the gap. */
  .flow > * { margin-block: 0; }
  .flow > * + * { margin-block-start: var(--flow); }
  .flow > h2 { --flow: var(--space-7); }
  .flow > h3 { --flow: var(--space-6); }
  .flow > :is(h2, h3, h4) + * { --flow: var(--space-3); }
  .flow > .eyebrow + * { --flow: var(--space-1); }
}

/* C28 — .prose ist "--measure + .flow". Das --measure fehlte, damit war der
   Token aus tokens.css nirgends konsumiert und Fließtext lief über die volle
   --container-narrow-Breite: 656-680px, rund 76-79 deutsche Zeichen pro Zeile
   gegen die 70-75, die design-system.md §3.5 als angenehm bezeichnet.
   Cross-Wave-Audit D1.

   Warum eine eigene Schicht NACH utilities: 25 der 28 .prose-Boxen tragen
   .container--narrow auf derselben Box. Schichten schlagen Spezifität, also
   gewinnt .container--narrow aus @layer utilities gegen jede .prose-Regel aus
   @layer base — die Regel wäre dort wirkungslos. Diese Schicht steht als
   letzte im @layer-Statement oben und setzt sich deshalb durch.

   Warum zwei Regeln: box-sizing ist border-box. Auf einer .container-Box zählt
   padding-inline: var(--gutter) in max-width hinein, ein blankes --measure
   ergäbe dort nur 64ch minus zwei Gutter (~520px, ~57 Zeichen) — genauso
   daneben wie vorher, nur zu schmal. Die Gutter werden deshalb aufgeschlagen.

   Kein margin-inline: auto. Die drei blanken .prose-Boxen liegen INNERHALB
   eines .container--narrow neben ihrer eigenen h2 (flugschule.njk:140,
   anreise-unterkunft.njk:42 und :95); zentriert stünde der Fließtext gegen
   seine eigene Überschrift eingerückt. Die 25 Container-Boxen zentriert
   .container ohnehin selbst. */
@layer prose {
  .prose           { max-width: var(--measure); }
  .container.prose { max-width: calc(var(--measure) + 2 * var(--gutter)); }
}