/* ==========================================================================
   Plagemann Design System — Tokens
   Übernommen aus _ds/plagemann-design-system-1e4cd9a3/tokens/*.css
   (fonts, colors, typography, spacing, effects, syntax, brand).

   Zwei bewusste Abweichungen von der Vorlage:
   1. Keine Google Fonts. Die Datenschutzerklärung sagt zu, dass keine
      externen Schriftarten geladen werden — die Dateien liegen lokal unter
      assets/fonts/ (siehe README dort), samt Ersatzschriften mit gleichen
      Maßen für die Zeit, bis sie geladen sind.
   2. Fluide Stufen rechnen gegen vw statt cqi. Die Mocks setzen
      container-type:inline-size auf die volle Rahmenbreite (1920 px), nicht
      auf den Inhaltscontainer — dort ist 1cqi also dasselbe wie 1vw im
      echten Layout. Die clamp-Obergrenzen sind identisch.
   ========================================================================== */

/* ---- Schriften: lokal, kein externer Request ----------------------------
   JetBrains Mono trägt alles Kurze, IBM Plex Sans nur laufende Absätze.
   Beide liegen als Latin-Subset unter assets/fonts/, beide als variable
   Schrift: ein Schnitt je Lage deckt alle Gewichte ab. Die Lizenzen liegen
   daneben (OFL-*.txt). */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Ersatz mit den Maßen der echten Schrift ----------------------------
   Bis die woff2 da ist, steht der Text in einer Systemschrift. Ohne Angleich
   wäre die schmaler, Zeilen bräche anders um, und beim Wechsel spränge die
   Seite (Cumulative Layout Shift). Deshalb bekommt die Systemschrift Breite,
   Ober- und Unterlänge der echten:

   JetBrains Mono  0,600 em je Zeichen, Oberlänge 1,020, Unterlänge 0,300
   Consolas        0,550 em (1126/2048)           → size-adjust 109,1 %
   Menlo, DejaVu   0,600 em                       → nur die Höhen
   IBM Plex Sans   0,463 em im Mittel deutscher Texte, 1,025 / 0,275
   Arial           0,457 em (gemessen an Liberation Sans, metrisch gleich)
                                                  → size-adjust 101,3 %

   Die Höhen stehen geteilt durch size-adjust, weil sie sich auf die schon
   angepasste Größe beziehen. Nachgemessen mit fontTools an den Dateien in
   assets/fonts/, siehe README dort. */
@font-face {
  font-family: 'JetBrains Mono Ersatz';
  src: local('Consolas');
  font-weight: 100 500;
  size-adjust: 109.1%;
  ascent-override: 93.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'JetBrains Mono Ersatz';
  src: local('Consolas Bold'), local('Consolas-Bold');
  font-weight: 600 900;
  size-adjust: 109.1%;
  ascent-override: 93.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'JetBrains Mono Ersatz Unix';
  src: local('Menlo'), local('DejaVu Sans Mono'), local('Liberation Mono');
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Sans Ersatz';
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans');
  font-weight: 100 500;
  size-adjust: 101.3%;
  ascent-override: 101.2%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Sans Ersatz';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold');
  font-weight: 600 900;
  size-adjust: 101.3%;
  ascent-override: 101.2%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}

/* ==========================================================================
   Dunkel — Standardfläche des Systems
   ========================================================================== */
:root {
  /* ---- Marke: die fünfzehn Werte ---- */
  --ground-dark: #12171F;      /* Grundfläche dunkel · 18,0:1 zu Weiß */
  --accent-dark: #2D72C9;      /* NUR ab 24px fett: Wortmarke, Ü1, Linien · 3,7:1 */
  --accent-dark-sm: #7FB1EC;   /* Klein auf Dunkel: Labels, Links · 8,1:1 */
  --accent-light: #15457A;     /* Akzent auf Hell · 9,7:1 zu Weiß */
  --link-blue: #1A5FB4;        /* Link, Primär-Button, Fokusring · 6,3:1 */
  --ink: #1F2733;              /* Fließtext auf Weiß · 15,0:1 */
  --ink-quiet: #5A6573;        /* Dezenter Text · 5,9:1 */
  --ink-on-dark: #C7CCD4;      /* Text auf Dunkel · 11,1:1 */
  --rule-dark: #26303D;
  --code-ground-dark: #1B2230;
  --tint-light: #F4F8FD;
  --signal-success: #1E7A46;
  --signal-success-dark: #4CAF7D;
  --signal-warning: #B25E09;
  --signal-error: #B3261E;

  /* ---- Abgeleitet, nicht im Markenhandbuch ---- */
  --white: #FFFFFF;
  --signal-warning-dark: #D9922E;
  --signal-error-dark: #F0736A;

  /* ---- Flächenleiter dunkel ---- */
  --bg-0: #0E1319;
  --bg-1: #12171F;
  --bg-2: #171E28;
  --bg-3: #1B2230;
  --bg-4: #222B3A;
  /* ---- Flächenleiter hell ---- */
  --paper-0: #FFFFFF;
  --paper-1: #F4F8FD;
  --paper-2: #E8EEF7;

  /* ---- Linien. --line-3 aus dem Kontrast-Patch der Mocks: 3,1:1, damit
         Rahmen von Bedienelementen WCAG 1.4.11 erfüllen. ---- */
  --line-1: #1B2430;
  --line-2: #26303D;
  --line-3: #374553;
  --line-light-1: #EEF1F4;
  --line-light-2: #DEE2E8;
  --line-light-3: #C3CCD6;

  /* ---- Textleiter dunkel. --fg-3/--fg-4 ebenfalls aus dem Patch.
         --fg-4 stand auf #5F6B7A und trug damit nur 2,94:1 auf --bg-3 —
         gemessen, nicht geschätzt (check_render.py). Jetzt 4,5:1 gegen die
         hellste der vier dunklen Flächen. ---- */
  --fg-1: #FFFFFF;
  --fg-2: #C7CCD4;
  --fg-3: #8A95A3;
  --fg-4: #7B8A9D;

  /* ---- Semantik ---- */
  --surface-page: var(--bg-1);
  --surface-sunken: var(--bg-3);
  --surface-card: var(--bg-2);
  --surface-raised: var(--bg-3);
  --surface-hover: var(--bg-3);
  --surface-active: var(--bg-4);
  --surface-tint: var(--bg-2);
  --surface-overlay: rgba(9, 12, 17, .74);

  --text-heading: var(--fg-1);
  --text-body: var(--fg-2);
  --text-secondary: var(--fg-2);
  --text-muted: var(--fg-3);
  --text-faint: var(--fg-4);
  --text-accent: var(--accent-dark-sm);  /* Kleintext-Blau */
  --text-accent-lg: var(--accent-dark);  /* nur ab 24px fett */
  --text-on-accent: #FFFFFF;

  --border-subtle: var(--line-1);
  --border-default: var(--line-2);
  --border-strong: var(--line-3);
  --border-accent: var(--accent-dark);

  --accent-primary: var(--accent-dark);
  --accent-primary-hover: #3A85E0;
  --accent-primary-press: #245C9F;
  --accent-primary-dim: rgba(127, 177, 236, .14);
  --accent-small: var(--accent-dark-sm);

  --link: var(--accent-dark-sm);
  --link-hover: #A8CBF2;
  --focus-ring: var(--accent-dark-sm);

  --status-success: var(--signal-success-dark);
  --status-success-dim: rgba(76, 175, 125, .14);
  --status-warning: var(--signal-warning-dark);
  --status-warning-dim: rgba(217, 146, 46, .14);
  --status-danger: var(--signal-error-dark);
  --status-danger-dim: rgba(240, 115, 106, .14);
  --status-info: var(--accent-dark-sm);
  --status-info-dim: rgba(127, 177, 236, .14);

  /* ---- Codefarben ---- */
  --syn-plain: #C7CCD4;
  --syn-keyword: #7FB1EC;
  --syn-type: #A9CBF2;
  --syn-method: #E8EDF4;
  --syn-string: #9FB3C9;
  --syn-number: #DCE3EC;
  --syn-comment: #8A95A3;
  --syn-punct: #8A95A3;
  --syn-attr: #A9CBF2;
  --syn-prompt: #8A95A3;
  --syn-out-ok: var(--signal-success-dark);
  --syn-out-err: var(--signal-error-dark);

  /* ---- Wortmarke ----
     „Nils" in Light, „Plagemann" in Bold. Laufweite und Wortabstand sind
     Teil der Marke und werden nicht nachjustiert. */
  --logo-font: var(--font-core);
  --logo-weight-given: 300;
  --logo-weight-family: 700;
  --logo-tracking: -0.045em;
  --logo-word-gap: 0.22em;
  --logo-clear-space: 0.365em;
  --logo-size-header: 24px;   /* kleinste zweifarbige Stufe */
  --logo-size-footer: 15px;   /* einfarbig */
  --logo-given: var(--white);
  --logo-family: var(--accent-dark);       /* nur ab 24px · 3,7:1 */
  --logo-family-sm: var(--accent-dark-sm); /* darunter · 8,1:1 */
  --logo-solid: var(--white);
  --logo-mark-bg: var(--code-ground-dark);
  --logo-mark-border: var(--rule-dark);
  /* Monogramm als Avatar (Mock 21): Ersatz fürs Porträt, solange kein Foto
     vorliegt. Werte aus tokens/brand.css, Glyphengröße als Anteil der Box. */
  --logo-mark-glyph: 0.41;
  --logo-avatar-bg: var(--accent-light);
  --logo-avatar-given: var(--accent-dark-sm);
  --logo-avatar-family: var(--white);

  /* ---- Schriftfamilien ---- */
  --font-core: 'JetBrains Mono', 'JetBrains Mono Ersatz', 'JetBrains Mono Ersatz Unix', Consolas, ui-monospace, monospace;
  --font-prose: 'IBM Plex Sans', 'IBM Plex Sans Ersatz', Arial, Helvetica, sans-serif;
  --font-mono: var(--font-core);
  --font-display: var(--font-core);
  --font-body: var(--font-core);

  /* ---- Rollenskala (DS, feste Stufen) ---- */
  --h1: 44px;
  --h2: 30px;
  --h3: 22px;
  --h4: 19px;
  --text-base: 17px;
  --text-label: 12px;
  --text-caption: 12px;
  --text-code: 15px;

  /* ---- Größenleiter ---- */
  --text-2xs: 12px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 15px;
  --text-body-size: 17px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: 44px;
  --text-4xl: 64px;

  /* ---- Fluide Stufen der Mocks (gegen vw statt cqi) ---- */
  --t-4xl: clamp(30px, 3.9vw, 44px);
  --t-3xl: clamp(27px, 3.3vw, 38px);
  --t-2xl: clamp(23px, 2.7vw, 30px);
  --t-xl:  clamp(19px, 2vw, 22px);
  --t-lg:  clamp(17px, 1.7vw, 19px);
  --t-md:  17px;
  --t-sm:  15px;
  --t-xs:  14px;
  --t-2xs: 12px;
  --t-3xs: 12px;

  /* ---- Zeilenabstand ---- */
  --lh-h1: 1.25;
  --lh-h2: 1.3;
  --lh-h3: 1.35;
  --lh-body: 1.6;
  --lh-caption: 1.45;
  --lh-code: 1.6;
  --lh-mono-prose: 1.7;
  --leading-tight: var(--lh-h1);
  --leading-snug: var(--lh-h2);
  --leading-normal: 1.5;
  --leading-relaxed: var(--lh-body);

  /* ---- Gewichte ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Laufweite ---- */
  --tracking-heading: -0.04em;  /* Mono-Überschriften — Pflicht */
  --tracking-display: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-label: 0.14em;
  --tracking-logo: -0.045em;

  /* ---- Maximale Zeilenlänge je Rolle ---- */
  --measure-h1: 30ch;
  --measure-h2: 40ch;
  --measure-h3: 50ch;
  --measure-prose: 70ch;
  --measure-caption: 60ch;
  --measure-code: 80ch;
  --measure-mono-prose: 60ch;
  /* Satzspiegel der Artikelseite. Das Design-System kennt ihn als 68ch, der
     Desktop-Mock setzt 720 px — maßgeblich ist der Mock. */
  --measure-article: 720px;

  /* ---- Seitenbreite ----
     Der Desktop-Mock setzt 1440 px hart im <main>; das Token
     --container-max im Design-System steht noch auf 1120 px und ist damit
     der ältere Wert. Maßgeblich ist der Mock.
     --gut hält Kopf- und Fußzeile am selben Raster: sie laufen über die
     volle Fensterbreite, ihr Inhalt beginnt aber auf der Kante des
     Containers. Das Prozentzeichen rechnet gegen die Breite des Elements,
     an dem --gut als padding steht — deshalb steht hier keine feste Zahl. */
  --container-max: 1440px;
  --container-pad: 40px;
  --gut: max(var(--container-pad),
             calc((100% - var(--container-max)) / 2 + var(--container-pad)));

  /* ---- Abstände: 4-Punkt-Treppe ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 44px;
  --space-8: 64px; --space-9: 88px; --space-10: 120px;
  --space-11: 160px; --space-12: 200px;

  /* ---- Vertikaler Rhythmus der Mocks ---- */
  --r-1: 8px;  --r-2: 16px; --r-3: 24px; --r-4: 32px;
  --r-5: 44px; --r-6: 64px; --r-7: 88px;

  /* ---- Radien: scharf und bewusst ---- */
  --radius-xs: 2px;   /* Inline-Code */
  --radius-sm: 3px;   /* Schaltflächen, Felder, Chips, Badges */
  --radius-md: 4px;   /* Karten, Code-Blöcke, Panels */
  --radius-lg: 6px;   /* Dialoge */
  --radius-full: 999px;

  /* ---- Bauhöhen ---- */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --hit-min: 44px;
  --rule-hairline: 1px;

  /* ---- Effekte. Keine Verläufe, keine Leuchteffekte: Tiefe entsteht
         durch Flächenstufe und 1px-Linie. ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .45);
  --ring-width: 2px;
  --ring-gap: 2px;
  --ring-focus: 0 0 0 var(--ring-gap) var(--surface-page),
                0 0 0 calc(var(--ring-gap) + var(--ring-width)) var(--focus-ring);

  /* ---- Bewegung: schnell und präzise, kein Federn ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --blur-overlay: 8px;

  color-scheme: dark;
}

/* ==========================================================================
   Hell — Werte 1:1 aus LIGHT_VARS im Mock-Skript, identisch zu Print und Word
   ========================================================================== */
:root[data-theme="light"] {
  --bg-0: #E8EEF7;
  --bg-1: #FFFFFF;
  --bg-2: #FFFFFF;
  --bg-3: #F4F8FD;
  --bg-4: #E8EEF7;

  --line-1: #EEF1F4;
  --line-2: #DEE2E8;
  --line-3: #C3CCD6;

  --fg-1: #15457A;
  --fg-2: #1F2733;
  --fg-3: #5A6573;
  --fg-4: #8A93A1;

  --surface-page: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-sunken: #F4F8FD;
  --surface-raised: #FFFFFF;
  --surface-hover: #F4F8FD;
  --surface-active: #E8EEF7;
  --surface-tint: #F4F8FD;
  --surface-overlay: rgba(31, 39, 51, .44);

  --text-heading: #15457A;
  --text-body: #1F2733;
  --text-secondary: #1F2733;
  --text-muted: #5A6573;
  --text-faint: #656B76;
  --text-accent: #15457A;
  --text-accent-lg: #15457A;
  --text-on-accent: #FFFFFF;

  --border-subtle: #EEF1F4;
  --border-default: #DEE2E8;
  --border-strong: #C3CCD6;
  --border-accent: #15457A;

  --accent-primary: #1A5FB4;
  --accent-primary-hover: #15457A;
  --accent-primary-press: #103865;
  --accent-primary-dim: rgba(26, 95, 180, .10);
  --accent-small: #15457A;

  --link: #1A5FB4;
  --link-hover: #15457A;
  --focus-ring: #1A5FB4;

  --status-success: #1E7A46;
  --status-success-dim: rgba(30, 122, 70, .10);
  --status-warning: #A75808;
  --status-warning-dim: rgba(178, 94, 9, .10);
  --status-danger: #B3261E;
  --status-danger-dim: rgba(179, 38, 30, .10);
  --status-info: #1A5FB4;
  --status-info-dim: rgba(26, 95, 180, .10);

  --logo-given: #5A6573;
  --logo-family: #15457A;
  --logo-family-sm: #15457A;
  --logo-solid: #15457A;
  --logo-mark-bg: #F4F8FD;
  --logo-mark-border: #DEE2E8;

  --syn-plain: #1F2733;
  --syn-keyword: #15457A;
  --syn-type: #1A5FB4;
  --syn-method: #1F2733;
  --syn-string: #4A5766;
  --syn-number: #1F2733;
  --syn-comment: #5A6573;
  --syn-punct: #5A6573;
  --syn-attr: #1A5FB4;
  --syn-prompt: #5A6573;
  --syn-out-ok: #1E7A46;
  --syn-out-err: #B3261E;

  color-scheme: light;
}

/* Systemeinstellung „hell", solange nicht manuell auf dunkel gestellt.
   Gleiche Werte wie oben — @media kann keine Regel wiederverwenden. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg-0: #E8EEF7;
    --bg-1: #FFFFFF;
    --bg-2: #FFFFFF;
    --bg-3: #F4F8FD;
    --bg-4: #E8EEF7;

    --line-1: #EEF1F4;
    --line-2: #DEE2E8;
    --line-3: #C3CCD6;

    --fg-1: #15457A;
    --fg-2: #1F2733;
    --fg-3: #5A6573;
    --fg-4: #8A93A1;

    --surface-page: #FFFFFF;
    --surface-card: #FFFFFF;
    --surface-sunken: #F4F8FD;
    --surface-raised: #FFFFFF;
    --surface-hover: #F4F8FD;
    --surface-active: #E8EEF7;
    --surface-tint: #F4F8FD;
    --surface-overlay: rgba(31, 39, 51, .44);

    --text-heading: #15457A;
    --text-body: #1F2733;
    --text-secondary: #1F2733;
    --text-muted: #5A6573;
    --text-faint: #656B76;
    --text-accent: #15457A;
    --text-accent-lg: #15457A;
    --text-on-accent: #FFFFFF;

    --border-subtle: #EEF1F4;
    --border-default: #DEE2E8;
    --border-strong: #C3CCD6;
    --border-accent: #15457A;

    --accent-primary: #1A5FB4;
    --accent-primary-hover: #15457A;
    --accent-primary-press: #103865;
    --accent-primary-dim: rgba(26, 95, 180, .10);
    --accent-small: #15457A;

    --link: #1A5FB4;
    --link-hover: #15457A;
    --focus-ring: #1A5FB4;

    --status-success: #1E7A46;
    --status-success-dim: rgba(30, 122, 70, .10);
    --status-warning: #A75808;
    --status-warning-dim: rgba(178, 94, 9, .10);
    --status-danger: #B3261E;
    --status-danger-dim: rgba(179, 38, 30, .10);
    --status-info: #1A5FB4;
    --status-info-dim: rgba(26, 95, 180, .10);

    --logo-given: #5A6573;
    --logo-family: #15457A;
    --logo-family-sm: #15457A;
    --logo-solid: #15457A;
    --logo-mark-bg: #F4F8FD;
    --logo-mark-border: #DEE2E8;

    --syn-plain: #1F2733;
    --syn-keyword: #15457A;
    --syn-type: #1A5FB4;
    --syn-method: #1F2733;
    --syn-string: #4A5766;
    --syn-number: #1F2733;
    --syn-comment: #5A6573;
    --syn-punct: #5A6573;
    --syn-attr: #1A5FB4;
    --syn-prompt: #5A6573;
    --syn-out-ok: #1E7A46;
    --syn-out-err: #B3261E;

    color-scheme: light;
  }
}

/* Web Mobil — eigene Stufen, weil sich der Betrachtungsabstand unterscheidet. */
@media (max-width: 640px) {
  :root {
    --h1: 30px; --h2: 24px; --h3: 19px; --h4: 17px;
    --text-base: 16px; --text-code: 14px;
    --text-3xl: 30px; --text-2xl: 24px; --text-xl: 19px;
    --text-body-size: 16px; --text-4xl: 38px;
  }
}