/* =========================================================================
   Design-Tokens der Event-Micropage.

   Jede Farbe, jeder Radius und jede Schrift der Seite kommt aus dieser Datei.
   In app.css steht bewusst kein einziges Farbwort - dadurch laesst sich das
   Aussehen komplett ueber config.json steuern, ohne CSS anzufassen.

   Ueberschreibbar pro Event via:  config.theme.tokens = { "--brand-accent": "#..." }
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- Marke ----------------------------------------------------------- */
  --brand-accent:       #FB9B28;   /* G&L Orange */
  --brand-accent-hover: #FFB35C;
  --brand-accent-ink:   #001720;   /* Text auf oranger Flaeche */
  --brand-signal:       #FB5128;   /* Live-Signal, Trennstriche */

  /* --- Flaechen -------------------------------------------------------- */
  --surface-base:   #001720;
  --surface-raised: #002735;
  --surface-sunken: #000B10;
  --hairline:       rgba(255, 255, 255, 0.14);
  --overlay:        rgba(0, 11, 16, 0.72);

  /* --- Text ------------------------------------------------------------ */
  --text-strong: #FFFFFF;
  --text-body:   #CBD8DD;
  --text-muted:  #8FA5AE;
  --text-link:   var(--brand-accent);
  --text-meta:   var(--text-muted);   /* Datums- und Uhrzeitzeile */
  --text-on-accent: var(--brand-accent-ink);

  /* --- Fokus (Barrierefreiheit: immer sichtbar, nie ausgeschaltet) ------ */
  --focus-ring: 3px solid var(--brand-accent);
  --focus-offset: 3px;

  /* --- Typografie ------------------------------------------------------ */
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --size-kicker:   0.8125rem;
  --size-body:     1rem;
  --size-lead:     1.0625rem;
  --size-title:    clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
  --size-title-sub: 0.55em;    /* zweite Titelzeile, relativ zur ersten */
  --font-title-sub: var(--font-display);
  --weight-title-sub: 500;
  --weight-title:  700;
  --tracking-kicker: 0.14em;

  /* --- Mass und Rhythmus ----------------------------------------------- */
  /* Gemeinsame Flucht von Kopfzeile, Titel, Buehne, Bloecken und Fusszeile.
     Das ist der Regler fuer "der Player soll breiter werden" - die Breite
     der Buehne kann die Inhaltsbreite nicht ueberschreiten. */
  --content-max: 1220px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;

  /* Abstaende zwischen den Bauteilen der Seite. */
  --stage-gap: var(--space-3);   /* zwischen Buehne und dem, was darunter kommt */
  --blocks-gap: var(--space-3);  /* zwischen den Bloecken untereinander */

  --radius:    16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --radius-banner-button: 2px;   /* Einwilligungs-Banner wie auf gl-systemhaus.de */

  --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-banner: 0 -1px 10px rgba(172, 171, 171, 0.3);

  /* --- Rahmen und Schatten je Bauteil ----------------------------------
     Getrennt einstellbar, weil ein Player oft anders gerahmt sein soll
     als eine Textkarte. Wer nichts setzt, bekommt ueberall dasselbe. */
  --frame-bg: var(--surface-sunken);
  --frame-border: 1px;
  --frame-border-color: var(--hairline);
  --frame-radius: var(--radius);
  --frame-shadow: var(--shadow-card);

  --panel-border: 1px;
  --panel-border-color: var(--hairline);
  --panel-radius: var(--radius);
  --panel-shadow: none;

  /* Karten und Bloecke getrennt von den uebrigen Flaechen einstellbar. */
  --card-bg: var(--surface-raised);
  --card-title: var(--text-strong);
  --card-text: var(--text-muted);
  --card-strong: var(--text-body);
  --card-border: 1px;
  --card-border-color: var(--hairline);
  --card-radius: var(--radius);
  --card-shadow: none;

  --header-text: var(--text-body);    /* Sprachwahl und Texte in der Kopfzeile */
  --header-radius: var(--radius);
  --header-inset: 0px;        /* > 0 setzt die Kopfzeile als Leiste ab */

  /* --- Marken-Logos im Header ------------------------------------------ */
  --logo-height: 32px;        /* pro Logo via config.brand.logos[].height uebersteuerbar */
  --logo-gap:    clamp(1rem, 2.5vw, 2rem);

  /* --- Kopf- und Fusszeile ---------------------------------------------- */
  --header-bg: var(--surface-raised);
  --header-blur: 14px;
  --header-opacity: 0.72;     /* nur wirksam bei theme.headerScroll = "translucent" */
  --header-height: 64px;      /* Mindesthoehe, waechst mit dem Inhalt */
  --header-max: var(--content-max);   /* eigene Breite, sonst wie der Inhalt */
  --footer-height: 0px;
  --footer-max: var(--content-max);
  --footer-radius: var(--radius);
  --footer-inset: 0px;        /* > 0 setzt die Fusszeile als Leiste ab */

  /* --- Buehne ----------------------------------------------------------- */
  /* Drei Groessenmodi, weil die Player sich unterschiedlich verhalten:
     - "ratio"    fuer Player mit eigenem Seitenverhaeltnis (Bitmovin single,
                  Container .bitmovinplayer-container.aspect-16x9)
     - "fixed"    fuer Player, die ihre Hoehe aus dem Inhalt bilden und eine
                  vorgegebene Hoehe NICHT ausfuellen (Playlist-Player .gl--player)
     - "viewport" wenn die Buehne einen Anteil der Fensterhoehe einnehmen soll */
  --stage-ratio: 16 / 9;
  --stage-height: 620px;      /* gilt bei mode "fixed" */
  --stage-vh: 70vh;           /* gilt bei mode "viewport" */
  --stage-min-height: 0px;    /* Untergrenze, in jedem Modus wirksam */
  --stage-width: 100%;        /* Breite der Playerflaeche, zentriert */

  --panel-width: 380px;       /* Breite des Panels neben dem Player */
  --panel-height: 460px;      /* Hoehe, sobald das Panel unter den Player rutscht */
}

/* =========================================================================
   Light-Theme. Wird ueber config.theme.mode = "light" gesetzt.
   Wichtig: Orange auf Weiss erreicht als Text nur ~2:1 und faellt durch
   WCAG 1.4.3 (BITV 2.0). Deshalb hier ein abgedunkeltes Orange fuer Text,
   waehrend das CI-Orange fuer Flaechen erhalten bleibt.
   ========================================================================= */
:root[data-theme="light"] {
  color-scheme: light;

  --brand-accent-hover: #C97C20;
  /* --brand-accent-ink bleibt bewusst dunkel: weisser Text auf #FB9B28
     erreicht nur 2.14:1 und faellt durch. Dunkel auf Orange = 8.59:1. */

  --surface-base:   #FFFFFF;
  --surface-raised: #F4F6F7;
  --surface-sunken: #E9EDEF;
  --hairline:       rgba(0, 23, 32, 0.14);
  --overlay:        rgba(255, 255, 255, 0.72);

  --text-strong: #001720;
  --text-body:   #40525A;
  --text-muted:  #5E7079;
  --text-link:   #8A5210;              /* Textvariante des CI-Orange */
  --text-meta:   var(--text-muted);

  --focus-ring: 3px solid #8A5210;
  --shadow-card: 0 18px 40px -28px rgba(0, 23, 32, 0.45);
  --shadow-banner: 0 -1px 10px rgba(0, 23, 32, 0.15);
}

/* Nutzer, die Bewegung reduziert haben wollen, bekommen keine Animationen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}