/* ==========================================================================
   A&L SERVICE & TECHNOLOGY — DESIGN TOKENS
   variables.css
   Zentrale Steuerung von Farben, Typografie, Abständen, Rastern und Effekten.
   Einheitliches Fundament für ein präzises, industrielles Corporate Design.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     FARBEN — Markenwelt (abgeleitet aus dem Logo: Azur-Blau + Anthrazit)
     Ruhige, seriöse Industrie-Palette. Blau ausschließlich als Akzent.
     -------------------------------------------------------------------- */

  /* Markenblau (Akzent) */
  --c-accent:            #0e93d2;   /* Primär-Akzent (Logo-Blau)          */
  --c-accent-600:        #0b7fb8;   /* Hover / kräftiger                   */
  --c-accent-700:        #0a6c9d;   /* aktiv / dunkler                     */
  --c-accent-800:        #085a82;   /* sehr dunkel                         */
  --c-accent-soft:       #e6f4fb;   /* zarte Blau-Fläche (Hintergründe)    */
  --c-accent-line:       #bfe2f4;   /* zarte Blau-Linie                    */

  /* Anthrazit / Neutralskala */
  --c-ink:               #14181c;   /* Fast-Schwarz (Headlines, Anthrazit) */
  --c-ink-900:           #171b20;
  --c-ink-800:           #1e242b;   /* dunkle Sektionen                    */
  --c-ink-700:           #2a323b;
  --c-gray-600:          #48525c;   /* Sekundärtext                        */
  --c-gray-500:          #667079;   /* gedämpfter Text                     */
  --c-gray-400:          #8a939c;
  --c-gray-300:          #c2c9d0;   /* Rahmen dunkler                      */
  --c-gray-200:          #dde2e7;   /* Standard-Rahmen                     */
  --c-gray-150:          #e7ebef;
  --c-gray-100:          #f0f3f6;   /* helle Fläche                        */
  --c-gray-50:           #f7f9fb;   /* sehr helle Fläche                   */
  --c-white:             #ffffff;

  /* Semantische Zuordnung */
  --c-bg:                var(--c-white);
  --c-bg-alt:            var(--c-gray-50);
  --c-bg-muted:          var(--c-gray-100);
  --c-bg-dark:           var(--c-ink-800);
  --c-bg-darker:         var(--c-ink);

  --c-text:              #232a31;   /* Fließtext                           */
  --c-text-strong:       var(--c-ink);
  --c-text-muted:        var(--c-gray-500);
  --c-text-invert:       #eef2f5;   /* Text auf dunklem Grund              */
  --c-text-invert-muted: #a7b1ba;

  --c-border:            var(--c-gray-200);
  --c-border-strong:     var(--c-gray-300);
  --c-border-dark:       rgba(255, 255, 255, 0.12);

  --c-focus:             #1aa5e6;   /* Fokus-Ring (Barrierefreiheit)       */

  /* Helle Topbar (graue Servicezeile, schwarzer Text) */
  --c-topbar-bg:         #eaeef1;
  --c-topbar-border:     #d7dde2;

  /* Marken-Blau für großflächige Sektionen (Logo-Blau, klar & hell) */
  --c-brand-blue:        #0e93d2;
  --c-brand-blue-600:    #0c84be;
  --c-brand-blue-800:    #0a6f9f;

  /* Statusfarben (dezent, industriell) */
  --c-success:           #2f8f5b;
  --c-warning:           #c78a1e;
  --c-danger:            #c0402f;

  /* --------------------------------------------------------------------
     TYPOGRAFIE
     -------------------------------------------------------------------- */
  --font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  /* Fluid Type Scale (clamp: min .. max) — ruhige, klare Hierarchie */
  --fs-display:  clamp(2.2rem, 1.6rem + 2.6vw, 4rem);      /* Hero          */
  --fs-h1:       clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
  --fs-h2:       clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem);
  --fs-h3:       clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --fs-h4:       clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --fs-lead:     clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem);  /* Vorspann      */
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-xs:       0.78rem;
  --fs-eyebrow:  0.78rem;   /* Kicker / Label                              */

  --lh-tight:    1.08;
  --lh-heading:  1.16;
  --lh-snug:     1.4;
  --lh-body:     1.72;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-eyebrow:  0.18em;  /* Versalabstand für Kicker                     */

  /* --------------------------------------------------------------------
     RASTER, ABSTÄNDE & MAßE
     -------------------------------------------------------------------- */
  --container:        1280px;   /* Standard-Inhaltsbreite                  */
  --container-wide:   1480px;   /* breite Sektionen                        */
  --container-narrow: 900px;    /* Lesebreite (Text)                       */
  --gutter:           clamp(1.25rem, 0.8rem + 2vw, 2.5rem); /* Randabstand */

  /* Vertikale Sektionsabstände (großzügige Weißräume) */
  --section-y:        clamp(4.5rem, 3rem + 6vw, 9rem);
  --section-y-sm:     clamp(3rem, 2rem + 3vw, 5rem);

  /* Space Scale (8px-Basis) */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-12: 6rem;

  /* Kanten & Rahmen — bewusst eckig / minimal */
  --radius-0:  0px;      /* Standard: eckig                                */
  --radius-1:  2px;      /* nur minimal, für Eingaben                      */
  --radius-2:  3px;
  --border-w:  1px;
  --rule:      1px solid var(--c-border);
  --rule-dark: 1px solid var(--c-border-dark);

  /* Schatten — sehr dezent, kein „Bubble"-Look */
  --shadow-xs:  0 1px 2px rgba(20, 24, 28, 0.06);
  --shadow-sm:  0 2px 10px rgba(20, 24, 28, 0.06);
  --shadow-md:  0 12px 30px rgba(20, 24, 28, 0.08);
  --shadow-lg:  0 24px 60px rgba(20, 24, 28, 0.12);
  --shadow-focus: 0 0 0 3px rgba(26, 165, 230, 0.35);

  /* --------------------------------------------------------------------
     LAYOUT-KONSTANTEN
     -------------------------------------------------------------------- */
  --header-h:        88px;    /* Höhe Sticky-Header (Desktop)              */
  --header-h-scroll: 68px;    /* verdichtet beim Scrollen                 */
  --topbar-h:        40px;    /* schmale Info-Leiste über dem Header       */
  --z-topbar:        900;
  --z-header:        1000;
  --z-mega:          1010;
  --z-overlay:       1080;
  --z-drawer:        1090;
  --z-toTop:         800;

  /* --------------------------------------------------------------------
     ANIMATION / TIMING
     -------------------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      160ms;
  --dur:           280ms;
  --dur-slow:      600ms;
  --dur-reveal:    900ms;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}