/* ============================================================
   Design Tokens
   Primärfarbe: EBC-Grün (Logo). Sonst angelehnt an KERN UX.
   ============================================================ */

/* ---- Schriften (lokal eingebunden, Latin-Subset reicht für DE+EN) ---- */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/FiraSans-Regular.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: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/FiraSans-Medium.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: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/FiraSans-SemiBold.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: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}

:root {
  /* ---- Farbpalette (Light – Standard) ---- */
  --color-primary:        #01473A;      /* EBC-Grün (Logo) */
  --color-primary-hover:  #023729;
  --color-primary-light:  #E6F0EC;       /* sehr helles Grün für Icon-Hintergründe */
  --color-accent:         #06B18C;       /* Türkis-Grün (KERN-Sekundär) */
  --color-accent-hover:   #04866A;

  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F4F6F5;
  --color-bg-card:        #FFFFFF;
  --color-bg-dark:        #01473A;       /* Header / Hero – in beiden Modi gleich */
  --color-bg-darker:      #013126;

  --color-text:           #1A1F1D;
  --color-text-muted:     #4F5854;
  --color-text-on-dark:   #FFFFFF;
  --color-text-on-dark-muted: #C9D8D2;

  --color-border:         #D6DCD9;
  --color-border-strong:  #A8B2AE;

  --color-success:        #008033;
  --color-warning:        #FFA200;
  --color-danger:         #B80000;
  --color-info:           #0288D1;

  --color-focus:          #00BAE9;
  --image-tint:           none;

  /* ---- Typografie ---- */
  --font-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Adaptive Größen: Mobile / Desktop */
  --fs-display:   1.875rem;  /* 30px / 48px */
  --fs-xl:        1.5rem;    /* 24px / 32px */
  --fs-lg:        1.3125rem; /* 21px / 26px */
  --fs-md:        1.125rem;  /* 18px */
  --fs-base:      1rem;      /* 16px */
  --fs-sm:        0.875rem;  /* 14px */

  --lh-display:   1.15;
  --lh-heading:   1.25;
  --lh-body:      1.6;

  /* ---- Spacing-Skala (4-/8-px Grid) ---- */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */

  /* ---- Layout ---- */
  --container-max:      75rem;     /* 1200px */
  --container-padding:  1.25rem;
  --content-max-text:   42rem;     /* ca. 65 Zeichen pro Zeile */

  /* ---- Radius / Elevation ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 28px rgba(0,0,0,0.12);

  /* ---- Sonstiges ---- */
  --transition-fast: 120ms ease;
  --transition-med:  220ms ease;
}

/* ---- Dark Theme ---- */
:root[data-theme="dark"] {
  --color-primary:        #2DD4A8;       /* Akzent-Grün übernimmt im Dark Mode die Primärrolle */
  --color-primary-hover:  #5DE6BF;
  --color-primary-light:  rgba(45, 212, 168, 0.14);
  --color-accent:         #5DE6BF;
  --color-accent-hover:   #2DD4A8;

  --color-bg:             #0E1512;       /* sehr dunkles Grün-Schwarz */
  --color-bg-alt:         #141C18;
  --color-bg-card:        #1A231F;
  --color-bg-dark:        #01302A;       /* etwas dunkler im Dark Mode für besseren Kontrast zur Bühne */
  --color-bg-darker:      #001E1A;

  --color-text:           #E8ECEA;
  --color-text-muted:     #95A29C;
  --color-text-on-dark:   #FFFFFF;
  --color-text-on-dark-muted: #BCCEC8;

  --color-border:         #263330;
  --color-border-strong:  #3B4944;

  --color-focus:          #5DE6BF;
  --image-tint:           brightness(0.85);
}

/* Wenn Nutzer noch keine Wahl getroffen hat, System-Präferenz übernehmen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-primary:        #2DD4A8;
    --color-primary-hover:  #5DE6BF;
    --color-primary-light:  rgba(45, 212, 168, 0.14);
    --color-accent:         #5DE6BF;
    --color-accent-hover:   #2DD4A8;
    --color-bg:             #0E1512;
    --color-bg-alt:         #141C18;
    --color-bg-card:        #1A231F;
    --color-bg-dark:        #01302A;
    --color-bg-darker:      #001E1A;
    --color-text:           #E8ECEA;
    --color-text-muted:     #95A29C;
    --color-border:         #263330;
    --color-border-strong:  #3B4944;
    --color-focus:          #5DE6BF;
    --image-tint:           brightness(0.85);
  }
}

/* Adaptive Schriftgrößen ab Tablet */
@media (min-width: 768px) {
  :root {
    --fs-display: 3rem;       /* 48px */
    --fs-xl:      2rem;       /* 32px */
    --fs-lg:      1.5rem;     /* 24px */
    --fs-md:      1.125rem;   /* 18px */
  }
}
@media (min-width: 1200px) {
  :root {
    --fs-display: 3.5rem;     /* 56px */
  }
}