/* =====================================================
   Upliso — Design Tokens (tokens.css)
   Alle Design-Werte zentral. Dark Mode vorbereitet.
   ===================================================== */
:root {
  /* --- CI-Farben --- */
  --color-primary:        #1F3A5F;   /* Midnight Blue – Struktur, Text, Flächen */
  --color-accent:         #2DB5C4;   /* Teal – Wachstum, CTAs, Akzente */
  --color-primary-dark:   #142842;
  --color-primary-light:  #EAF7F9;   /* sehr heller Teal-Tint */
  --color-ink:            #0F1B2D;   /* Fließtext dunkel */
  --color-bg:             #FFFFFF;
  --color-bg-muted:       #F6F8FA;

  /* --- Abgeleitete Farben --- */
  --color-accent-dark:    #157F8C;   /* dunkleres Teal, CTA-Gradient-Ende */
  --color-accent-ink:     #0E6B76;   /* Teal als Text: AA-konform auf Weiß */
  --color-ink-soft:       #46586E;   /* Sekundärtext */
  --color-border:         rgba(31, 58, 95, 0.12);
  --color-on-dark:        #F2F7FA;
  --color-on-dark-soft:   rgba(242, 247, 250, 0.72);

  /* --- Typografie --- */
  --font-display:         "Inter", sans-serif;
  --font-body:            "Inter", sans-serif;

  /* --- Radius & Schatten (farbnah, nie grau) --- */
  --radius-card:          16px;
  --radius-pill:          999px;
  --shadow-card:          0 8px 32px rgba(31, 58, 95, 0.10);
  --shadow-card-hover:    0 18px 48px rgba(31, 58, 95, 0.16);
  --shadow-accent:        0 8px 28px rgba(45, 181, 196, 0.18);
  --shadow-accent-hover:  0 12px 36px rgba(45, 181, 196, 0.30);

  /* --- Gradients --- */
  --gradient-cta:         linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  --gradient-hero:        linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-bg) 40%, var(--color-primary-light) 76%, #DDF2F5 100%);
  --gradient-deep:        linear-gradient(126deg, var(--color-primary-dark) 0%, var(--color-primary) 52%, #17606E 100%);
  --gradient-card-dark:   linear-gradient(152deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);

  /* --- Layout --- */
  --spacing-section:      110px;
  --container:            1180px;

  /* --- Responsive Struktur-Tokens (Overrides unten) --- */
  --nav-links-display:    flex;
  --hero-cols:            1.04fr 0.96fr;
  --pl-cols:              1fr 1fr;
  --bento-cols:           repeat(3, 1fr);
  --span-2col:            span 2;
  --span-2row:            span 2;
  --kpi-cols:             repeat(4, 1fr);
  --branchen-cols:        repeat(4, 1fr);
  --steps-cols:           repeat(3, 1fr);
  --testi-cols:           repeat(3, 1fr);
  --faq-cols:             0.85fr 1.15fr;
  --footer-cols:          1.5fr 1fr 1fr 1fr 1fr;
  --footer-brand-col:     auto;
  --mirror-order:         2;                 /* Modul-Sektionen: Text rechts (gespiegelt) */
  --article-cols:         250px minmax(0, 1fr); /* Blog-Artikel: TOC + Content */
  --glossar-cols:         90px 1fr;          /* Glossar: Buchstabe + Eintraege */
}

/* --- Dark Mode: vorbereitet, Umschaltung folgt --- */
[data-theme="dark"] {
  --color-bg:             #0B1522;
  --color-bg-muted:       #0F1E30;
  --color-ink:            #E7EEF6;
  --color-ink-soft:       #9FB2C6;
  --color-primary-light:  #122B3C;
  --color-primary-dark:   #0D1B2E;
  --color-border:         rgba(255, 255, 255, 0.12);
  --color-accent-ink:     #6FD3DE;
  --shadow-card:          0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-card-hover:    0 18px 48px rgba(0, 0, 0, 0.55);
  --gradient-hero:        linear-gradient(135deg, #0F2233 0%, #0B1522 45%, #0F2233 100%);
}

/* --- Tablet --- */
@media (max-width: 1020px) {
  :root {
    --spacing-section:    84px;
    --hero-cols:          1fr;
    --pl-cols:            1fr;
    --bento-cols:         repeat(2, 1fr);
    --kpi-cols:           repeat(2, 1fr);
    --branchen-cols:      repeat(2, 1fr);
    --steps-cols:         1fr;
    --testi-cols:         1fr;
    --faq-cols:           1fr;
    --footer-cols:        repeat(2, 1fr);
    --footer-brand-col:   1 / -1;
    --mirror-order:       0;
    --article-cols:       1fr;
  }
}

/* --- Mobil --- */
@media (max-width: 640px) {
  :root {
    --spacing-section:    64px;
    --nav-links-display:  none;
    --bento-cols:         1fr;
    --span-2col:          auto;
    --span-2row:          auto;
    --branchen-cols:      1fr;
    --footer-cols:        1fr;
    --glossar-cols:       1fr;
  }
}