/* ==========================================================================
   Schriften – lokal eingebunden (keine Verbindung zu Google Fonts o. Ä.)
   Der Browser lädt nur die Dateien, die von der aktiven Kombination
   tatsächlich benutzt werden. Lizenzen: assets/fonts/LICENSES.txt
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("../fonts/red-hat-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Recursive";
  src: url("../fonts/recursive-latin-full-normal.woff2") format("woff2");
  font-weight: 300 1000;
  font-style: oblique 0deg 15deg;
  font-display: swap;
}

/* ==========================================================================
   Schriftkombinationen
   --font-head / --font-body / --font-mono   Überschrift, Fließtext, Akzente
   --head-weight, --head-tracking, --head-lh  Feinschliff je Überschriftenschrift
   --*-fvs                                    font-variation-settings (Achsen)
   --body-scale                               optischer Größenausgleich
   --wm-word / --wm-tag                       Breitenausgleich für Logo-Schriftzug und Unterzeile
   ========================================================================== */

:root {
  --fallback-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fallback-serif: Georgia, "Times New Roman", serif;
  --fallback-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* 1 · Werkstatt – lebendig, modern, freundlich */
:root,
[data-font="werkstatt"] {
  --font-head: "Bricolage Grotesque", var(--fallback-sans);
  --font-body: "Figtree", var(--fallback-sans);
  --font-mono: "JetBrains Mono", var(--fallback-mono);
  --head-weight: 750;
  --head-tracking: -0.025em;
  --head-lh: 1.04;
  --head-fvs: normal;
  --body-fvs: normal;
  --mono-fvs: normal;
  --body-scale: 1.02;
  --wm-word: 0.96;
  --wm-tag: 1.22;
}

/* 2 · Informatik – technisch, klar, mit Retro-Mono */
[data-font="informatik"] {
  --font-head: "Space Grotesk", var(--fallback-sans);
  --font-body: "Inter", var(--fallback-sans);
  --font-mono: "Space Mono", var(--fallback-mono);
  --head-weight: 700;
  --head-tracking: -0.035em;
  --head-lh: 1.02;
  --head-fvs: normal;
  --body-fvs: normal;
  --mono-fvs: normal;
  --body-scale: 0.98;
  --wm-word: 1.01;
  --wm-tag: 1.2;
}

/* 3 · Lesefreundlich – Lexend wurde für flüssiges Lesen entwickelt */
[data-font="lesefreundlich"] {
  --font-head: "Lexend", var(--fallback-sans);
  --font-body: "Lexend", var(--fallback-sans);
  --font-mono: "Red Hat Mono", var(--fallback-mono);
  --head-weight: 650;
  --head-tracking: -0.03em;
  --head-lh: 1.08;
  --head-fvs: normal;
  --body-fvs: normal;
  --mono-fvs: normal;
  --body-scale: 0.95;
  --wm-word: 0.91;
  --wm-tag: 1.07;
}

/* 4 · Barrierearm – Atkinson Hyperlegible (Braille Institute) */
[data-font="barrierearm"] {
  --font-head: "Atkinson Hyperlegible Next", var(--fallback-sans);
  --font-body: "Atkinson Hyperlegible Next", var(--fallback-sans);
  --font-mono: "Atkinson Hyperlegible Mono", var(--fallback-mono);
  --head-weight: 760;
  --head-tracking: -0.02em;
  --head-lh: 1.06;
  --head-fvs: normal;
  --body-fvs: normal;
  --mono-fvs: normal;
  --body-scale: 1.03;
  --wm-word: 1.03;
  --wm-tag: 1.19;
}

/* 5 · Editorial – warme Serif-Überschriften, ruhiger Fließtext */
[data-font="editorial"] {
  --font-head: "Fraunces", var(--fallback-serif);
  --font-body: "Source Sans 3", var(--fallback-sans);
  --font-mono: "IBM Plex Mono", var(--fallback-mono);
  --head-weight: 620;
  --head-tracking: -0.02em;
  --head-lh: 1.05;
  --head-fvs: "SOFT" 60, "WONK" 0;
  --body-fvs: normal;
  --mono-fvs: normal;
  --body-scale: 1.06;
  --wm-word: 1.09;
  --wm-tag: 1.14;
}

/* 6 · Sachlich – IBM Plex, nüchtern und institutionell */
[data-font="sachlich"] {
  --font-head: "IBM Plex Sans", var(--fallback-sans);
  --font-body: "IBM Plex Sans", var(--fallback-sans);
  --font-mono: "IBM Plex Mono", var(--fallback-mono);
  --head-weight: 650;
  --head-tracking: -0.025em;
  --head-lh: 1.06;
  --head-fvs: normal;
  --body-fvs: normal;
  --mono-fvs: normal;
  --body-scale: 1;
  --wm-word: 1.03;
  --wm-tag: 1.21;
}

/* 7 · Code-Charme – Recursive: verspielt in Überschriften, ruhig im Text, Mono für Akzente */
[data-font="code"] {
  --font-head: "Recursive", var(--fallback-sans);
  --font-body: "Recursive", var(--fallback-sans);
  --font-mono: "Recursive", var(--fallback-mono);
  --head-weight: 800;
  --head-tracking: -0.025em;
  --head-lh: 1.05;
  --head-fvs: "CASL" 1, "MONO" 0, "CRSV" 0.5;
  --body-fvs: "CASL" 0, "MONO" 0;
  --mono-fvs: "CASL" 0, "MONO" 1;
  --body-scale: 0.98;
  --wm-word: 1.04;
  --wm-tag: 1.07;
}