/* ============================================================
   KIONIER Designsystem "Institut" (Variante 5, final 2026-07-25)
   Verlags-Grammatik: heller Grund, Serifen-Display (Newsreader),
   Inter als Textschrift, IBM Plex Mono für Quellen/Zahlen-Meta.
   Bernstein ausschließlich als Marker/Unterstreichung, nie als
   Farbfläche. Kein sensified-Bezug.
   ============================================================ */

:root {
  /* --- Farbe: Kernpalette --- */
  --ink: #16181D;             /* Headlines, Primärtext */
  --ink-soft: #2A2E36;        /* Fließtext */
  --navy: #0C1622;            /* dunkle Flächen (Footer, Monitor-Banner) */
  --paper: #FFFFFF;
  --paper-2: #F7F5F1;         /* Papier-Ton für ruhige Flächen */
  --amber: #E89B3C;           /* Marker, Unterstreichungen (nie Text auf hell) */
  --ocker: #8C5A10;           /* AA-konformer Akzent für Text auf hell */
  --muted: #585F6B;           /* Nebentext, Metadaten */
  --faint: #9AA0AA;           /* Nummern, Fußnoten */
  --line: #E4E2DC;            /* Hairlines */
  --line-strong: #C9C6BD;

  /* --- Typografie --- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --size-h1: clamp(1.7rem, 2.9vw, 2.5rem);
  --size-h2: clamp(1.4rem, 2.2vw, 1.8rem);
  --size-h3: 1.22rem;
  --size-body: 1.02rem;

  /* --- Layout --- */
  --max: 1240px;

  /* Bilder und Kacheln tragen eine leichte Rundung; Linien, Knöpfe und
     Tabellen bleiben kantig, damit der Charakter sachlich bleibt. */
  --radius-img: 6px;

  /* ============================================================
     Alias-Layer: alte --j-* Tokens auf die neue Palette gemappt.
     Wird von tools.css (ROI-Rechner, Readiness-Check) und wp.css
     weiter genutzt — bewusst nicht entfernt.
     ============================================================ */
  --j-petrol: #16181D;
  --j-petrol-deep: #0C1622;
  --j-teal: #8C5A10;
  --j-mint: #E89B3C;
  --j-amber: #E89B3C;
  --j-ink: #2A2E36;
  --j-ink-strong: #16181D;
  --j-muted: #585F6B;
  --j-faint: #9AA0AA;

  --j-bg: #FFFFFF;
  --j-bg-alt: #F7F5F1;
  --j-bg-soft: #F7F5F1;
  --j-bg-tint: #F1EDE4;
  --j-bg-dark: #0C1622;
  --j-border: #E4E2DC;
  --j-border-strong: #C9C6BD;
  --j-border-petrol: rgba(140, 90, 16, 0.25);

  --j-font-display: "Newsreader", Georgia, serif;
  --j-font-body: "Inter", system-ui, sans-serif;
  --j-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --j-size-hero: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  --j-size-h1: clamp(1.7rem, 2.9vw, 2.5rem);
  --j-size-h2: clamp(1.4rem, 2.2vw, 1.8rem);
  --j-size-h3: 1.22rem;
  --j-size-body: 1.02rem;
  --j-size-small: 0.9375rem;
  --j-size-meta: 0.8125rem;
  --j-size-kicker: 0.72rem;

  --j-leading-body: 1.7;
  --j-leading-tight: 1.18;
  --j-measure: 45rem;

  --j-space-1: 0.5rem;
  --j-space-2: 1rem;
  --j-space-3: 1.5rem;
  --j-space-4: 2rem;
  --j-space-5: 3rem;
  --j-space-6: 4.5rem;
  --j-space-7: 6rem;
  --j-container: 77.5rem;

  --j-radius-card: 2px;
  --j-radius-card-lg: 2px;
  --j-radius-btn: 2px;
  --j-radius-pill: 2px;
  --j-shadow-card: 0 1px 2px rgba(22, 24, 29, 0.04);
  --j-shadow-hover: 0 10px 26px rgba(22, 24, 29, 0.08);

  --j-transition: 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --j-transition: 0s; }
}