/* === Typografie wie mAY hr ===
 * Sechs Stufen, ein Schrift-Stack, Ziffern untereinander - dieselbe Grundlage
 * wie in mAY hr (mayHR: apps/web/tailwind.config.ts, docs/03-entwicklung/
 * gestaltung.md). Jede Seite laedt diese Datei vor ihrem eigenen CSS; neue
 * Groessen werden nur ueber die Stufen gesetzt, nie als freie rem-Werte.
 */
:root {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --text-meta: 0.75rem;     /* 12 px - Beschriftungen, Fussnoten, Einheiten */
    --text-data: 0.8125rem;   /* 13 px - dichte Tabellenzellen */
    --text-ui: 0.875rem;      /* 14 px - Bedienelemente, Standardtext */
    --text-body: 1rem;        /* 16 px - Fliesstext, Erklaerungen */
    --text-section: 1.25rem;  /* 20 px - Abschnittstitel, Wortmarke */
    --text-page: 1.75rem;     /* 28 px - Seitentitel */
}

body {
    font-family: var(--font-sans);
    /* Optische Randglaettung wie in mAY hr. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    font-weight: 600;
}

h1 {
    font-size: var(--text-page);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--text-section);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--text-body);
    letter-spacing: -0.01em;
}

/* Ziffern stehen untereinander: proportionale Ziffern lassen Betragsspalten
   ausfransen. Ersetzt die fruehere Monospace-Schrift fuer Betraege. */
table,
[data-numeric],
.tabular,
.num,
.betrag {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}