/*
  Alternatives Theme-Variablen-Set, uebertragen aus dem "Nightreel"
  Styleguide (Referenz: externes Design-System-Dokument, dunkles
  Grundgeruest mit Cobalt/Coral/Iris/Electric-Akzenten).

  Aktivierung: in includes/header.php den Link auf theme.css durch
  diesen hier ersetzen. Zum Zurueckrollen einfach wieder auf
  theme.css umstellen bzw. diesen Commit revertieren - style.css
  bleibt in beiden Faellen unveraendert, da es ausschliesslich diese
  Variablen referenziert (siehe Kommentar in theme.css).

  Bewusste Abweichung vom Styleguide: die Preis-Ampelfarben
  (--color-price-*) bleiben gruen/amber/rot, weil sie eine dritte,
  vom Marken-Akzent unabhaengige Bedeutungsebene tragen (siehe
  theme.css) - das gilt unabhaengig vom gewaehlten Theme.
*/
:root {
    /* Flaechen - Nightreel-Neutralramp (grey-05/08/10/15/00) */
    --color-bg: #0D0D18;
    --color-surface: #12131D;
    --color-surface-alt: #161722;
    --color-surface-raised: #252736;
    --color-footer-bg: #000000;

    /* Text-Akzent (Links, Hervorhebungen, Preise, Fokus, aktive Zustaende):
       Amber #FFB200 statt Cobalt (seit 2026-10-03) - Cobalt auf dem dunklen
       Hintergrund war als Textfarbe schlecht lesbar (Kontrast Amber auf
       #0D0D18 ca. 11:1). --color-accent ist die hellere Hover-/Verlaufs-
       Variante. Flaechen/Glows bleiben im tiefen Violett (--color-accent-dark/
       -rgb). */
    --color-accent: #FFCB47;
    /* Bewusst sehr tiefes Violett (fast schwarz) fuer alle Flaechen/Border -
       deutlich dunkler als die Basisfarbe, die nur noch fuer Text/Links
       reserviert ist. */
    --color-accent-dark: #23145A;
    /* Urspruengliches Cobalt-Paar, bewusst weiter fuer dekorative Verlaeufe
       (z. B. .steps-grid__number) - nur Text-Akzent/Links sind Amber. */
    --color-cobalt: #5B53FF;
    --color-cobalt-light: #6369FF;
    --color-accent-light: #FFB200;
    /* RGB der dunklen Variante, nicht der Basis: alle Flaechen/Glows, die
       diese Komponenten fuer eine transluzente Farbwäsche nutzen (Fokus-
       Ring, Hero-Glow, Badge-Tint), sollen wie alle anderen Flaechen im
       gedeckteren Dunkel erscheinen - nur Textfarben bleiben hell. */
    --color-accent-rgb: 35, 20, 90;
    --color-scrim-rgb: 13, 13, 24;

    /* Nur fuer den dekorativen Orbital-Glow (siehe .about-section in
       style.css) - Cobalt + Electric-Cyan, die zwei Akzente aus dem
       Styleguide, die dort explizit fuer grosse dekorative Glows/
       Glow-Motive vorgesehen sind (nie fuer Text/Controls). */
    --color-glow-1-rgb: 35, 20, 90;
    --color-glow-2-rgb: 71, 235, 235;

    /* Text */
    --color-text: #F5F5F8;
    --color-text-muted: #A3A4BF;
    --color-text-on-accent: #FFFFFF;
    --color-icon-muted: #6A6B83;

    /* Rahmen / Schatten - weich, mehrschichtig statt hartem Drop-Shadow */
    --color-border: #2E2F40;
    --color-border-strong: #36384A;
    --shadow-sm: 5px 7px 18px rgba(0, 0, 0, 0.10), 0 8px 21px rgba(1, 0, 19, 0.15);
    --shadow-md: 16px 29px 13px rgba(0, 0, 0, 0.15), 7px 12px 6.5px rgba(0, 0, 0, 0.12), 1.5px 2.7px 3px rgba(0, 0, 0, 0.05);
    --shadow-lg: 32px 57px 25px rgba(0, 0, 0, 0.21), 17px 30px 13px rgba(0, 0, 0, 0.15);

    /* Preis-/Statusfarben (Ampel gruen -> amber -> rot) - unveraendert,
       siehe Kommentar oben */
    --color-price-low: #4FAE5C;
    --color-price-mid: #E0A83E;
    --color-price-high: #E4572E;

    /* Typografie: Archivo (Ueberschriften, condensed grotesk statt
       Newsreader-Serife) + Inter (Text, unveraendert) + IBM Plex Mono
       fuer zukuenftige Eyebrow-/Label-Verwendung. Selbst gehostet
       unter assets/fonts/ (siehe fonts.css) - kein Google-Request. */
    --font-heading: 'Archivo', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --heading-letter-spacing: -0.02em;

    /* Typografie-Skala - Groessen unveraendert (nur der Font wechselt),
       damit keine Layout-Regressionen entstehen */
    --font-size-h1: clamp(2rem, 4.5vw, 3.5rem);
    --font-size-h2: clamp(1.5rem, 3vw, 2.25rem);
    --font-size-h3: 1.5rem;
    --font-size-body-lg: 1rem;
    --font-size-body: 0.875rem;
    --font-size-small: 0.75rem;

    /* Radius - etwas grosszuegiger als das bisherige Theme, angelehnt
       an die Karten-/Panel-Radien im Styleguide (12-16px) */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Button-Hooks (siehe .btn/.main-nav a in style.css): Pill-Radius +
       Display-Schrift statt Formularradius/Inter, wie der Styleguide es
       fuer Buttons und Nav-Items vorsieht. Ohne diese Variablen (im
       bisherigen theme.css nicht gesetzt) bleibt das alte Verhalten
       unveraendert. */
    --btn-radius: 999px;
    --btn-font: var(--font-heading);
    --container-width: 1180px;

    /* Motion - kurze Dauern plus die charakteristische leichte
       Overshoot-Kurve fuer Hover-Zustaende (siehe .card:hover in
       style.css, das --ease-hover mit ease-Fallback nutzt) */
    --ease-default: cubic-bezier(.25, .1, .25, 1);
    --ease-out: cubic-bezier(.28, .44, .49, 1);
    --ease-bounce: cubic-bezier(.17, .89, .47, 1.13);
    --ease-hover: var(--ease-bounce);
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 400ms;
}