/*!
 * aslh-lexyhost – Design-Tokens
 * Welt: „Jingle-Wand“ (Playout-Software). Fest ist nur das Logo-Orange #F5B005,
 * alle anderen Farben sind passend dazu abgeleitet. Zwei gleichwertige Farbsätze:
 *   hell  = Pult bei Tag (kühles Grau)
 *   dunkel = Studio bei Nacht (Graphit)
 * Umschaltung über html[data-theme="light"|"dark"] (siehe js/aslh-theme.js).
 */

/* ---------- Schriften (lokal, OFL – siehe fonts/LICENSE-OFL.txt) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-latin-500.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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-latin-600.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins-latin-700.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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/open-sans-latin-400.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: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/open-sans-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/open-sans-latin-600.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: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/open-sans-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/open-sans-latin-700.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: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/open-sans-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Animierbarer Winkel für den Glow-Rand der Island-Navigation */
@property --aslh-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Lichtlauf (Nutzerwunsch 2026-10-07): ein Lichtstreifen pendelt an der Ober- und Unterkante hin und her,
   oben von links nach rechts, unten gegenläufig. Wird als Ebene über ein Element gelegt (siehe .aslh-island__glow,
   aslh-home.css). --aslh-sweep ist die Position des Streifens. */
@property --aslh-sweep {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@keyframes aslh-sweep { to { --aslh-sweep: 100%; } }
:root {
  --aslh-sweep-light: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, #F5B005 55%, transparent) 30%,
    #FFE3A1 50%,
    color-mix(in srgb, #F5B005 55%, transparent) 70%,
    transparent);
}

/* ---------- Modus-unabhängige Tokens ---------- */
:root {
  /* Marke – einzige feste Farbe */
  --aslh-color-brand: #F5B005;

  /* Typografie */
  --aslh-font-display: "Poppins", "Open Sans", system-ui, sans-serif;
  --aslh-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --aslh-text-xs: 0.75rem;
  --aslh-text-sm: 0.875rem;
  --aslh-text-base: 1rem;
  --aslh-text-lg: 1.125rem;
  --aslh-text-xl: 1.375rem;
  --aslh-text-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --aslh-text-3xl: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  --aslh-text-hero: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  --aslh-leading-tight: 1.08;
  --aslh-leading-snug: 1.3;
  --aslh-leading-body: 1.6;
  --aslh-tracking-display: -0.03em;
  --aslh-measure: 68ch;

  /* Abstände (4er-Raster) */
  --aslh-space-1: 0.25rem;
  --aslh-space-2: 0.5rem;
  --aslh-space-3: 0.75rem;
  --aslh-space-4: 1rem;
  --aslh-space-5: 1.5rem;
  --aslh-space-6: 2rem;
  --aslh-space-7: 3rem;
  --aslh-space-8: 4.5rem;
  --aslh-space-9: 7rem;
  --aslh-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --aslh-page-max: 76rem;

  /* Formen: alles quadratisch wie das LH-Logo (Nutzerwunsch 2026-10-07). Tokens bleiben, damit Rollen benannt sind. */
  --aslh-radius-xs: 0;
  --aslh-radius-sm: 0;
  --aslh-radius-key: 0;
  --aslh-radius-lg: 0;
  --aslh-radius-panel: 0; /* App-Panels der Startseite (Material wie die Island) */
  --aslh-radius-pill: 0;

  /* Bewegung */
  --aslh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aslh-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --aslh-ease-spring: linear(0, 0.0308, 0.1098, 0.2188, 0.3433, 0.4716, 0.5951, 0.708, 0.8066, 0.8891, 0.9552, 1.0055, 1.0416, 1.0651, 1.0784, 1.0833, 1.0821, 1.0763, 1.0677, 1.0576, 1.0468, 1.0364, 1.0267, 1.0181, 1.0109, 1.005, 1.0005, 0.9972, 0.995, 0.9937, 0.9931, 0.9935, 0.9945, 0.996, 0.9975, 0.9988, 1);
  --aslh-dur-fast: 140ms;
  --aslh-dur-base: 260ms;
  --aslh-dur-spring: 620ms;
  --aslh-dur-theme: 220ms;

  --aslh-z-nav: 1030;
  --aslh-z-menu: 1040;
}

/* ---------- Hell: Pult bei Tag ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --aslh-color-bg: #FFFFFF;
  --aslh-color-surface: #F5F6F8;
  --aslh-color-surface-raised: #FFFFFF;
  --aslh-color-surface-sunken: #ECEEF1;
  --aslh-color-mark: #2B2D31; /* Graphit des LH-Logo-Quadrats */
  --aslh-color-text: #14161B;
  --aslh-color-text-muted: #525866;
  --aslh-color-border: #C9CED6;
  --aslh-color-border-strong: #9AA1AD;
  --aslh-color-input-border: #858C98;   /* >= 3:1 Feldgrenze (WCAG 1.4.11) */
  --aslh-color-on-danger: #FFFFFF;

  --aslh-color-brand-hover: #FFC123;
  --aslh-color-brand-text: #7E5700;      /* Orange als Schrift auf hellem Grund, >= 4.5:1 */
  --aslh-color-on-brand: #14161B;        /* Schrift auf Orange-Flächen */
  --aslh-color-focus: #2B4EE6;

  /* Cart-Farben der Jingle-Wand (Flächen, nicht Akzente) */
  --aslh-cart-brand: var(--aslh-color-brand);
  --aslh-cart-brand-ink: #14161B;
  --aslh-cart-cobalt: #2B4EE6;
  --aslh-cart-cobalt-ink: #FFFFFF;
  --aslh-cart-mint: #23A57A;
  --aslh-cart-mint-ink: #0C1A14;
  --aslh-cart-ink: #20242C;
  --aslh-cart-ink-ink: #F2F3F5;
  --aslh-cart-paper: #FFFFFF;
  --aslh-cart-paper-ink: #14161B;
  --aslh-color-onair: #D93A3F;

  --aslh-color-success: #146B4C;
  --aslh-color-warning: #8A5D00;
  --aslh-color-danger: #A8262C;
  --aslh-color-info: #2B4EE6;
  --aslh-color-success-bg: #DDF3EA;
  --aslh-color-warning-bg: #FCEFC9;
  --aslh-color-danger-bg: #FADDDE;
  --aslh-color-info-bg: #E0E6FD;

  --aslh-shadow-sm: 0 1px 2px rgba(20, 22, 27, 0.08), 0 2px 6px rgba(20, 22, 27, 0.06);
  --aslh-shadow-md: 0 6px 16px -4px rgba(20, 22, 27, 0.14), 0 2px 4px rgba(20, 22, 27, 0.06);
  --aslh-shadow-lg: 0 22px 44px -16px rgba(20, 22, 27, 0.28), 0 6px 12px -6px rgba(20, 22, 27, 0.12);
  /* Taste: Oberkante hell, Unterkante als „Hub“ */
  --aslh-key-bevel: 0 0 0 0 transparent; /* flach: Playout-Software, keine Hardware-Kante (Finish-Review) */

  --aslh-glow-strength: 1;
  --aslh-island-bg: rgba(255, 255, 255, 0.82);
  --aslh-island-border: rgba(20, 22, 27, 0.10);
  --aslh-logo-light: block;
  --aslh-logo-dark: none;
}

/* ---------- Dunkel: Studio bei Nacht ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --aslh-color-bg: #111318;
  --aslh-color-surface: #181B21;
  --aslh-color-surface-raised: #20242C;
  --aslh-color-surface-sunken: #0C0E12;
  --aslh-color-mark: #262930;
  --aslh-color-text: #EEF0F3;
  --aslh-color-text-muted: #9AA1AD;
  --aslh-color-border: #2C313B;
  --aslh-color-border-strong: #464C58;
  --aslh-color-input-border: #6B7280;
  --aslh-color-on-danger: #111318;

  --aslh-color-brand-hover: #FFC52E;
  --aslh-color-brand-text: #F5B005;
  --aslh-color-on-brand: #111318;
  --aslh-color-focus: #8EA2FF;

  --aslh-cart-brand: var(--aslh-color-brand);
  --aslh-cart-brand-ink: #111318;
  --aslh-cart-cobalt: #3A5BF0;
  --aslh-cart-cobalt-ink: #FFFFFF;
  --aslh-cart-mint: #2FBF8C;
  --aslh-cart-mint-ink: #08130F;
  --aslh-cart-ink: #2A2F39;
  --aslh-cart-ink-ink: #EEF0F3;
  --aslh-cart-paper: #E9ECEF;
  --aslh-cart-paper-ink: #14161B;
  --aslh-color-onair: #FF5A5F;

  --aslh-color-success: #3FD19A;
  --aslh-color-warning: #F5B005;
  --aslh-color-danger: #FF6B70;
  --aslh-color-info: #8EA2FF;
  --aslh-color-success-bg: #10291F;
  --aslh-color-warning-bg: #2D2309;
  --aslh-color-danger-bg: #331417;
  --aslh-color-info-bg: #161D3D;

  --aslh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --aslh-shadow-md: 0 8px 18px -6px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.35);
  --aslh-shadow-lg: 0 26px 48px -18px rgba(0, 0, 0, 0.75), 0 8px 14px -8px rgba(0, 0, 0, 0.5);
  --aslh-key-bevel: 0 0 0 0 transparent;

  --aslh-glow-strength: 0.85;
  --aslh-island-bg: rgba(24, 27, 33, 0.78);
  --aslh-island-border: rgba(255, 255, 255, 0.08);
  --aslh-logo-light: none;
  --aslh-logo-dark: block;
}

/* Kein JS / noch kein data-theme gesetzt: Systemeinstellung */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --aslh-color-bg: #111318;
    --aslh-color-surface: #181B21;
    --aslh-color-surface-raised: #20242C;
    --aslh-color-surface-sunken: #0C0E12;
    --aslh-color-mark: #262930;
    --aslh-color-text: #EEF0F3;
    --aslh-color-text-muted: #9AA1AD;
    --aslh-color-border: #2C313B;
    --aslh-color-border-strong: #464C58;
    --aslh-color-input-border: #6B7280;
    --aslh-color-on-danger: #111318;
  --aslh-color-input-border: #6B7280;
  --aslh-color-on-danger: #111318;
    --aslh-color-brand-hover: #FFC52E;
    --aslh-color-brand-text: #F5B005;
    --aslh-color-on-brand: #111318;
    --aslh-color-focus: #8EA2FF;
    --aslh-cart-brand: var(--aslh-color-brand);
    --aslh-cart-brand-ink: #111318;
    --aslh-cart-cobalt: #3A5BF0;
    --aslh-cart-cobalt-ink: #FFFFFF;
    --aslh-cart-mint: #2FBF8C;
    --aslh-cart-mint-ink: #08130F;
    --aslh-cart-ink: #2A2F39;
    --aslh-cart-ink-ink: #EEF0F3;
    --aslh-cart-paper: #E9ECEF;
    --aslh-cart-paper-ink: #14161B;
    --aslh-color-onair: #FF5A5F;
    --aslh-color-success: #3FD19A;
    --aslh-color-warning: #F5B005;
    --aslh-color-danger: #FF6B70;
    --aslh-color-info: #8EA2FF;
    --aslh-color-success-bg: #10291F;
    --aslh-color-warning-bg: #2D2309;
    --aslh-color-danger-bg: #331417;
    --aslh-color-info-bg: #161D3D;
    --aslh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --aslh-shadow-md: 0 8px 18px -6px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.35);
    --aslh-shadow-lg: 0 26px 48px -18px rgba(0, 0, 0, 0.75), 0 8px 14px -8px rgba(0, 0, 0, 0.5);
    --aslh-key-bevel: 0 0 0 0 transparent;
    --aslh-glow-strength: 0.85;
    --aslh-island-bg: rgba(24, 27, 33, 0.78);
    --aslh-island-border: rgba(255, 255, 255, 0.08);
    --aslh-logo-light: none;
    --aslh-logo-dark: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --aslh-dur-fast: 0ms;
    --aslh-dur-base: 0ms;
    --aslh-dur-spring: 0ms;
    --aslh-dur-theme: 0ms;
    --aslh-ease-spring: linear;
  }
}