/* =============================================================================
   Nora Henschen – Globale Typografie- und Abstandsregeln
   -----------------------------------------------------------------------------
   Verbindliche Basis für ALLE bestehenden und künftigen Seiten, Texte und
   Abschnitte (WCAG 2.1, Erfolgskriterium 1.4.12 – Textabstände).

   Einbinden in jeder Seite (im <head>, direkt nach support.js):
     <link rel="stylesheet" href="./global.css">

   Verwendung:
   - .flow     Auf jeden Textblock (Spalte, Karte, Artikel), der Absätze oder
               Überschriften enthält. Abstände entstehen über Margins, nicht
               über flex-gap oder manuelle Abstände.
   - .measure  Begrenzt einen Textblock auf die Lesebreite (65–70ch) und
               zentriert ihn im Container.
   - .row      Horizontale Zeilen (z. B. Text + Button); dort entfallen die
               vertikalen Absatz-Margins.

   Nicht hier geregelt: Schriftfamilien (font-family) – sie bleiben wie
   definiert. Keine inline line-height/margin auf p, li, h1–h3 setzen.
   ============================================================================= */

:root {
  --measure: 68ch;        /* Lesebreite: 65–70ch (~680–740px) */
  --lh-text: 1.6;         /* Zeilenhöhe Fliesstext (p, li) */
  --lh-heading: 1.2;      /* Zeilenhöhe Überschriften (h1–h3) */
  --space-paragraph: 1.5em;   /* Abstand nach einem Absatz */
  --space-before-heading: 2em; /* Luft vor einem neuen Thema */
  --space-after-heading: .75em; /* enger Abstand unter dem Titel */
  --space-block: 1.5rem;  /* Abstand zwischen sonstigen Blöcken in .flow */
}

/* 1 · Zeilenhöhe -------------------------------------------------------------- */
p, li { line-height: var(--lh-text); }
h1, h2, h3 { line-height: var(--lh-heading); }

/* 2 · Absätze ----------------------------------------------------------------- */
p {
  margin: 0 0 var(--space-paragraph);
  max-width: var(--measure);
}

/* 3 · Überschriften ----------------------------------------------------------- */
h1, h2, h3 { margin: 0 0 var(--space-after-heading); }

/* Neues Thema nach Inhalt: mehr Luft oberhalb */
:is(p, ul, ol, div, figure, blockquote, table, form) + :is(h1, h2, h3) {
  margin-top: var(--space-before-heading);
}

/* Kein doppelter Abstand vor einer Überschrift (wie Margin-Collapsing) */
:is(p, ul, ol, div, figure, blockquote, table, form):has(+ :is(h1, h2, h3)) {
  margin-bottom: 0;
}

/* Letztes Element eines Blocks ohne Abstand nach unten */
p:last-child,
:is(h1, h2, h3):last-child { margin-bottom: 0; }

/* 4 · Textblöcke -------------------------------------------------------------- */
:where(.flow) > * { margin-top: 0; margin-bottom: var(--space-block); }
:where(.flow) > span { margin-bottom: var(--space-after-heading); } /* Label/Kicker über Titel oder Text */
:where(.flow) > :last-child { margin-bottom: 0; }

/* 5 · Lesebreite -------------------------------------------------------------- */
.measure {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

/* 6 · Horizontale Zeilen ------------------------------------------------------ */
.row > :is(p, h1, h2, h3) { margin: 0; }
.row > .measure { width: auto; margin-inline: 0; }