/* =====================================================================
   tokens.css – Design-Tokens
   Quelle: Trilium „Corporate Design“ (Single Source of Truth, 22.10.2026)
   Später: _tokens.scss / :root in der Contao-Theme-Basis
   ===================================================================== */

:root {
  /* ---------- CD-Farben (Manual, HEX aus RGB berechnet) ---------- */
  --lk-orange:  #EE7F00;   /* Kontrast mit Weiß 2,74:1 – kein weißer Text darauf */
  --lk-rot:     #C61D53;   /* 5,67:1 */
  --lk-blau:    #006EAB;   /* 5,50:1 */
  --lk-violett: #564C89;   /* 7,53:1 */

  /* ---------- abgeleitet / aus Unterlagen (nicht Teil des CDs) ---------- */
  --lk-orange-text:    #B25F00;   /* nur für Textflächen, AA mit Weiß; nie für die Logo-Fläche */
  --lk-blau-dunkel:    #005888;   /* dunkleres Blau für Text neben blauen Elementen (Menü-Label) */
  --lk-grau-logo:      #58585A;
  --lk-text:           #1A171C;
  --lk-weiss:          #FFFFFF;
  --lk-flaeche-hell:   #ECEAF3;
  --lk-flaeche-hell-2: #F4F3F7;

  /* ---------- Schrift ---------- */
  --lk-font:           "Noto Sans", system-ui, sans-serif;
  --lk-font-hand:      "Satisfy", cursive;        /* bzw. Desyrel nach Lizenzprüfung */
  --lk-stretch-normal:    100%;                   /* Noto Sans */
  --lk-stretch-condensed: 87.5%;                  /* Noto Sans SemiCondensed */
  --lk-weight-light:    300;
  --lk-weight-regular:  400;
  --lk-weight-semibold: 600;
  --lk-weight-bold:     700;

  /* ---------- Logo-Modul A = Durchmesser des Signet-Kreises ----------
     Im SVG ist der Kreis genau so hoch wie die viewBox (68,03 Einheiten),
     d. h. A = dargestellte Höhe der Wort-Bildmarke.
     Breite der Wort-Bildmarke = 260,79 / 68,03 × A ≈ 3,83 A.
     Mobil: A 52 / 54 / 60 px (Wort-Bildmarke 199 / 207 / 230 px breit)
     Desktop: A 62 / 66 / 80 px (Wort-Bildmarke 238 / 253 / 307 px breit) */
  --a-s: 52px;
  --a-m: 54px;
  --a-l: 60px;
  --a:   var(--a-m);
  --logo-ratio: 3.8335;

  /* ---------- Raster (Layout-Modell B) ---------- */
  --content-max: 1200px;
  /* Außenabstand = CD-Seitenabstand ½ A (mindestens 1,25 rem).
     Dadurch liegen Topline, Logo und Inhalt auf derselben linken Kante
     UND das Logo hält ½ A zum Bildschirmrand. */
  --page-pad: max(1.25rem, calc(var(--a) / 2));
  --gap-small:  1rem;
  --gap-medium: 1.5rem;
  --gap-big:    2.5rem;

  /* ---------- Typo-Grundwerte ---------- */
  --fs-base:    1rem;      /* 16 px, Regular 400 für Fließtext */
  --lh-base:    1.6;
  --fs-topline: 0.9rem;    /* 14,4 px */
  --prose-max:  70ch;      /* Zeilenlänge im Platzhalter-Inhalt – offen */

  /* ---------- Fokus ---------- */
  --focus-ring:       var(--lk-blau);
  --focus-ring-inner: var(--lk-weiss);
}

/* Ab Tablet größeres Logo-Modul */
@media (min-width: 768px) {
  :root {
    --a-s: 62px;
    --a-m: 66px;
    --a-l: 80px;
  }
}