/**
 * Saarland Today – Design-Tokens (Light Default, System-Dark via prefers-color-scheme).
 *
 * --st-hell-light / --st-dunkel-light: Markenfarben aus preprocess_html (Darkmode-Block-Config).
 * Chrome/Header/Hero: eigene feste Palette (--st-chrome-*), unabhängig vom System-Scheme.
 */

:root {
  color-scheme: light;

  /* Markenfarben (von Theme preprocess überschreibbar) */
  --st-hell-light: #f4f6f8;
  --st-dunkel-light: #172033;

  /* Semantische Aliase – Light Mode (Default) */
  --bg: var(--st-hell-light);
  --text: #000;
  --card-bg: var(--st-hell-light);
  --border: color-mix(in srgb, var(--st-dunkel-light) 12%, var(--st-hell-light));
  --link: #000;
  --muted-text: #000;

  /* Legacy-Mapping für Content-Bereiche */
  --st-bg-page: var(--bg);
  --st-bg-card: var(--card-bg);
  --st-text: #000;
  --st-text-muted: #000;
  --st-border: var(--border);
  --st-link: var(--link);
  --st-link-hover: #b0004b;
  --st-accent: #b0004b;
  --st-hero-overlay: 0.65;

  /*
   * Chrome / Header / Hero – fest wie bisheriger Dark-Look (nicht an prefers-color-scheme).
   * Layout-Seiten setzen --st-hell/--st-dunkel/--st-bg-site lokal auf diese Werte.
   */
  --st-chrome-bg: var(--st-dunkel-light);
  --st-chrome-text: var(--st-hell-light);
  --st-chrome-bg-site: #0f182b;
  --st-chrome-border: color-mix(in srgb, var(--st-chrome-text) 12%, var(--st-chrome-bg));
  /* Chrome-Verlauf (#st_chrome::before): oben 5px voll, unten transparent */
  --st-chrome-gradient-color: #000000;
  --st-chrome-gradient-solid-end: 5px;
  --st-hero-bg: #0f182b;

  /* Abstands-Raster ST (5 · 10 · 20px) */
  --st-space-5: 5px;
  --st-space-10: 10px;
  --st-space-20: 20px;

  /*
   * Werbe-Placements (ad_content / Paragraph werbung) – IAB-Maximalmaße.
   * Verwendung: st-ad-placements.css (--st-ad-max-w/--st-ad-max-h je Placement)
   */
  --st-ad-w-medium_rectangle: 300px;
  --st-ad-h-medium_rectangle: 250px;
  --st-ad-w-rectangle: 336px;
  --st-ad-h-rectangle: 280px;
  --st-ad-w-skyscraper: 120px;
  --st-ad-h-skyscraper: 600px;
  --st-ad-w-mobile_leaderboard: 300px;
  --st-ad-h-mobile_leaderboard: 50px;
  --st-ad-w-halfsize_banner: 234px;
  --st-ad-h-halfsize_banner: 60px;
  --st-ad-w-fullsize_banner: 468px;
  --st-ad-h-fullsize_banner: 60px;
  --st-ad-w-leaderboard: 728px;
  --st-ad-h-leaderboard: 90px;
  --st-ad-w-large_leaderboard: 970px;
  --st-ad-h-large_leaderboard: 90px;
  --st-ad-w-billboard: 970px;
  --st-ad-h-billboard: 250px;

  /* Skalenanker (keine @media-Breakpoints): nur für lineare 100vw-Formel */
  --st-logo-vw-min: 380px;
  --st-logo-vw-max: 2056px;
  --st-layout-max-width: var(--st-logo-vw-max);
  /* Solo #main-container: Werbung | Content | Werbung */
  --st-main-ad-column-max: 300px;
  --st-main-content-column-max: 1180px;
  --st-main-content-padding: clamp(
    5px,
    calc(10px + (100vw - var(--st-logo-vw-min, 380px)) * 100 / 1676),
    50px
  );

  /*
   * Header-Höhe: linear 100vw 380→2056 (wie Legacy), kein clamp.
   * 380px: 60px · 2056px: 120px · Scroll-Kollaps endet bei 60px
   */
  --st-header-height-min: 60px;
  --st-header-height-max: 120px;
  --st-header-height: calc(
    var(--st-header-height-min) + (100vw - var(--st-logo-vw-min))
      * (var(--st-header-height-max) - var(--st-header-height-min))
      / (var(--st-logo-vw-max) - var(--st-logo-vw-min))
  );
  /* Scroll-Ende: immer 60px (nicht mit Logo-Höhe ~40px koppeln). */
  --st-header-scroll-collapsed: 60px;

  /*
   * Logo (Branding/Header): linear 100vw 380→2056
   * Breite: 225px @ 380px → 450px @ 2056px
   * Höhe:  38px @ 380px →  76px @ 2056px (SVG 2760×465)
   */
  --st-logo-width-min: 225px;
  --st-logo-width-max: 450px;
  --st-logo-height-min: 38px;
  --st-logo-height-max: 76px;
  /* 1676 = 2056 − 380 (Spanne); Literale in calc für zuverlässiges Parsing */
  --st-logo-vw-span: 1676;
  --st-logo-width: calc(
    var(--st-logo-width-min) + (100vw - 380px) * 225 / var(--st-logo-vw-span)
  );
  --st-logo-height: calc(
    38px + (100vw - 380px) * 38 / var(--st-logo-vw-span)
  );
  /* Scroll-Kollaps: Header 60px, Logo 40px hoch (235×39.6 @ width-b). */
  --st-logo-height-scroll-collapsed: 40px;
  --st-logo-width-scroll-collapsed: calc(40px * 2760 / 465);
  /* Plateau unter 380px / über 2056px (kein clamp auf der Linearformel) */
  --st-logo-width-capped: min(
    var(--st-logo-width-max),
    max(var(--st-logo-width-min), var(--st-logo-width))
  );
  --st-logo-height-capped: min(
    var(--st-logo-height-max),
    max(var(--st-logo-height-min), var(--st-logo-height))
  );
  --st-chrome-header-logo-width-expanded: var(--st-logo-width-max);
  --st-chrome-header-logo-height-expanded: var(--st-logo-height-max);
  --st-logo-ratio: 2760 / 465;

  /*
   * Toolbar: linear 100vw 380→2056 (Spanne 1676px), kein Scroll.
   * 380px: 0.75rem / 1rem / 25px · 2056px: 1.25rem / 2rem / 50px
   */
  --st-chrome-vw-span-px: 1676;
  --st-chrome-font-size: calc(
    0.75rem + (100vw - 380px) * 0.5rem / var(--st-chrome-vw-span-px)
  );
  --st-chrome-icon-size: calc(
    1rem + (100vw - 380px) * 1rem / var(--st-chrome-vw-span-px)
  );
  --st-chrome-toggle-margin: calc(
    25px + (100vw - 380px) * 25 / var(--st-chrome-vw-span-px)
  );

  /*
   * Solo #st_header (Scroll-Sticky): Höhe 110px→55px, Hintergrund-Opacity 0%→100%.
   * Fortschritt: --st-header-scroll-progress (0–1), gesetzt per st-page-header-sticky.js
   */
  --st-page-header-height-start: 110px;
  --st-page-header-height-end: 55px;
  --st-page-header-opacity-start: 0;
  --st-page-header-opacity-end: 1;
  --st-page-header-bg-opacity: var(--st-page-header-opacity-start);
  --st-page-header-collapse-range: 140px;

  /*
   * Hauptmenü: linear 100vw 380→2056, kein Scroll.
   * 380px: 0.875rem · 2056px: 1.25rem
   */
  --st-menu-font-size-min: 0.875rem;
  --st-menu-font-size-max: 1.25rem;
  --st-menu-font-size: calc(
    var(--st-menu-font-size-min) + (100vw - var(--st-logo-vw-min))
      * (var(--st-menu-font-size-max) - var(--st-menu-font-size-min))
      / (var(--st-logo-vw-max) - var(--st-logo-vw-min))
  );

  /*
   * Hero-Meta (#st_hero_meta): linear 100vw 380→2056, mittig im Hero.
   * width-a @ 2056px (größte Schrift) · width-b @ 380px (kleinste Schrift)
   */
  --st-hero-meta-gap: calc(
    0.5rem + (100vw - var(--st-logo-vw-min)) * 0.5rem
      / var(--st-chrome-vw-span-px)
  );
  --st-hero-meta-breadcrumb-font-min: 0.725rem;
  --st-hero-meta-breadcrumb-font-max: 1rem;
  --st-hero-meta-breadcrumb-font: calc(
    var(--st-hero-meta-breadcrumb-font-min)
      + (100vw - var(--st-logo-vw-min))
      * (var(--st-hero-meta-breadcrumb-font-max) - var(--st-hero-meta-breadcrumb-font-min))
      / var(--st-chrome-vw-span-px)
  );
  --st-hero-meta-title-font-min: 2.1rem;
  --st-hero-meta-title-font-max: 3.5rem;
  --st-hero-meta-title-font: calc(
    var(--st-hero-meta-title-font-min)
      + (100vw - var(--st-logo-vw-min))
      * (var(--st-hero-meta-title-font-max) - var(--st-hero-meta-title-font-min))
      / var(--st-chrome-vw-span-px)
  );
  --st-hero-meta-description-font-min: 0.875rem;
  --st-hero-meta-description-font-max: 1.25rem;
  --st-hero-meta-description-font: calc(
    var(--st-hero-meta-description-font-min)
      + (100vw - var(--st-logo-vw-min))
      * (var(--st-hero-meta-description-font-max) - var(--st-hero-meta-description-font-min))
      / var(--st-chrome-vw-span-px)
  );
  --st-hero-meta-editorial-font: calc(
    0.75rem + (100vw - var(--st-logo-vw-min)) * 0.125rem
      / var(--st-chrome-vw-span-px)
  );
  --st-hero-meta-type-font: calc(
    0.75rem + (100vw - var(--st-logo-vw-min)) * 0.125rem
      / var(--st-chrome-vw-span-px)
  );
  --st-hero-meta-coat-size: calc(
    48px + (100vw - var(--st-logo-vw-min)) * 32px
      / var(--st-chrome-vw-span-px)
  );

  /* Allgemeine Site außerhalb Layout-Chrome */
  --st-bg-site: var(--bg);
  --st-hell: var(--st-hell-light);
  --st-dunkel: var(--st-dunkel-light);
}

/* Dunkel-Tokens: System (prefers-color-scheme) bzw. data-color-scheme vom Init-Script. */
html[data-color-scheme='dark'],
body.darkmode--activated {
  color-scheme: dark;

  --bg: #1b273b;
  --text: #fff;
  --card-bg: #1b273b;
  --border: #2d3a50;
  --link: #fff;
  --muted-text: #fff;

  --st-bg-page: var(--bg);
  --st-bg-card: var(--card-bg);
  --st-text: #fff;
  --st-text-muted: #fff;
  --st-border: var(--border);
  --st-link: var(--link);
  --st-link-hover: #ff4f93;
  --st-accent: #c00055;
  --st-hero-overlay: 0.75;

  --st-bg-site: #0f182b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme='light']) {
    color-scheme: dark;

    --bg: #1b273b;
    --text: #fff;
    --card-bg: #1b273b;
    --border: #2d3a50;
    --link: #fff;
    --muted-text: #fff;

    --st-bg-page: var(--bg);
    --st-bg-card: var(--card-bg);
    --st-text: #fff;
    --st-text-muted: #fff;
    --st-border: var(--border);
    --st-link: var(--link);
    --st-link-hover: #ff4f93;
    --st-accent: #c00055;
    --st-hero-overlay: 0.75;

    --st-bg-site: #0f182b;
  }
}

html[data-color-scheme='light'] {
  color-scheme: light;

  --bg: var(--st-hell-light);
  --text: #000;
  --card-bg: var(--st-hell-light);
  --border: color-mix(in srgb, var(--st-dunkel-light) 12%, var(--st-hell-light));
  --link: #000;
  --muted-text: #000;

  --st-bg-page: var(--bg);
  --st-bg-card: var(--card-bg);
  --st-text: #000;
  --st-text-muted: #000;
  --st-border: var(--border);
  --st-link: var(--link);
  --st-link-hover: #b0004b;
  --st-accent: #b0004b;
  --st-hero-overlay: 0.65;

  --st-bg-site: var(--bg);
  --st-hell: var(--st-hell-light);
  --st-dunkel: var(--st-dunkel-light);
}

/* Content-Seiten: Basis aus semantischen Tokens (ohne Page-BG-Seiten) */
.page-wrapper:not(.has-st-page-bg) {
  background-color: var(--bg);
  color: var(--text);
}

.page-wrapper.has-st-page-bg {
  color: var(--text);
}

.page-wrapper hr,
.page-wrapper ul,
.page-wrapper ol,
.page-wrapper ol li,
.page-wrapper ul li,
.page-wrapper table,
.page-wrapper .dropbutton-widget {
  background-color: transparent;
}