/* ==========================================================================
   NexaMINT – Abstands- und Texthilfen
   ==========================================================================

   Warum es diese Klassen gibt: Die Content-Security-Policy erlaubt kein
   style-Attribut (style-src 'self' ohne 'unsafe-inline'). Inline gesetzte
   Abstände werden vom Browser stillschweigend verworfen – im Quelltext stehen
   sie, wirken aber nicht. Deshalb steht jede Angabe hier als Klasse.

   Warum als eigene, ZULETZT geladene Datei: Bauteile wie .check-list setzen
   selbst margin: 0. Stünden die Hilfsklassen früher, gäben sie bei gleicher
   Spezifität nach und ein .mt-4 daran bliebe wirkungslos.

   Nicht als allgemeines Hilfsklassen-System gedacht: Wo ein Abstand zu einem
   Bauteil gehört, steht er weiterhin beim Bauteil. Diese Klassen decken die
   Ausnahmen ab, die sonst ein style-Attribut gebraucht hätten.
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }

.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }

.m-0 { margin: 0; }
.mi-auto { margin-inline: auto; }

.fs-xs   { font-size: var(--text-xs); }
.fs-sm   { font-size: var(--text-sm); }
.fs-base { font-size: var(--text-base); }
.fs-lg   { font-size: var(--text-lg); }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.c-deep  { color: var(--nexa-deep); }
.c-muted { color: var(--color-muted); }

.bg-mist { background: var(--nexa-mist); }
.bc-turquoise { border-color: var(--nexa-turquoise); }

.mw-52ch  { max-width: 52ch; }
.mw-62ch  { max-width: 62ch; }
.mw-64ch  { max-width: 64ch; }
.mw-68ch  { max-width: 68ch; }
.mw-72ch  { max-width: 72ch; }
.mw-60rem { max-width: 60rem; }
.mw-62rem { max-width: 62rem; }

/* --- Mindestluft nach Überschriften ---------------------------------------

   Viele Überschriften werden von einem Absatz mit kleinem eigenen Abstand
   gefolgt (aus der Zeit der Inline-Styles). Direkt unter einer Überschrift
   wirkt das gequetscht. Die folgenden Regeln heben nur die zu knappen Fälle
   an; größere Abstände bleiben unangetastet, weil sie dort gewollt sind.

   Spezifität (0,1,1) – schlägt die einfache Hilfsklasse (0,1,0). */

h2 + .mt-1,
h2 + .mt-2,
h2 + .mt-3,
h2 + .mt-4 { margin-top: var(--space-5); }

h3 + .mt-1,
h3 + .mt-2,
h3 + .mt-3 { margin-top: var(--space-4); }

/* Ein Absatz direkt nach einer Überschrift ohne eigene Abstandsklasse */
h2 + p,
h2 + ul,
h2 + ol,
h2 + dl { margin-top: var(--space-5); }

h3 + p,
h3 + ul,
h3 + ol { margin-top: var(--space-4); }