/* ==========================================================================
   Amara Solutions – Design-Tokens (Version 2)
   Einzige Quelle fuer Farben, Schrift, Abstaende, Radien, Schatten.
   Dokumentation + Kontrastwerte: STYLEGUIDE.md · Live-Uebersicht: styleguide.html
   Regel: In allen anderen CSS-Dateien keine Hex-/rgba-Werte, nur var(--…).
   ========================================================================== */
:root{
  /* ---------- 1. Basisfarben (RGB-Tripel fuer Transparenzen) ---------- */
  --rgb-black:0 0 0;
  --rgb-white:255 255 255;
  --rgb-navy:0 27 61;
  --rgb-steel:150 158 205;          /* Rand der Navigationsleiste */
  --rgb-night:3 13 22;              /* = --c-night als Tripel */

  /* ---------- 2. Marke ---------- */
  --c-navy:#001B3D;                 /* Primaer dunkel: Flaechen, Ueberschriften auf hell */
  --c-navy-deep:#003060;            /* Tiefblau: Kacheln, Sektionen, Erklaerfenster */
  --c-blue:#006EEF;                 /* Aktionsblau: Buttons, Links, Fokus */
  --c-blue-hover:#0060D4;
  --c-blue-soft:#388CED;            /* Linien/Raender auf hellem Grund (nicht fuer Text) */
  --c-night:#030D16;                /* Dunkelblau der Unterkante des Services-Header-Videos (Uebergang) */
  --c-navy-100:#C3CAD4;             /* heller Navy-Ton fuer Flaechen (z. B. Venn-Kreis) */
  --c-silver:#BCC3CC;               /* Silber: Kategorie Forschung (Erfahrungen) – Kreise, Linien */

  /* ---------- 3. Neutral ---------- */
  --c-black:#000000;
  --c-ink:#0B0D15;                  /* Fliesstext & Ueberschriften auf hell */
  --c-gray-600:#5A5A5A;             /* Nebentext, Hinweise (6,9:1 auf Weiss) */
  --c-gray-500:#6B6B6B;             /* Mittelgrau, Mindestwert fuer Text (5,3:1) */
  --c-gray-400:#8C8D8D;             /* Raender von Eingabefeldern (3,3:1), kein Text */
  --c-gray-200:#E6E6E6;             /* Linien, Rahmen, heller Titel auf Schwarz */
  --c-gray-100:#F4F4F4;             /* helle Flaechen */
  --c-white:#FFFFFF;
  --c-danger:#C62828;               /* Fehlermeldungen (5,6:1 auf Weiss) */
  --c-success:#1B7F3B;              /* Erfolgsmeldungen (5,3:1 auf Weiss) */

  /* ---------- 4. Hellblau-Skala (nur Hintergruende/Verlaeufe) ---------- */
  --c-sky-50:#E8F6FB;
  --c-sky-100:#CDEAF5;
  --c-sky-200:#B5E3EF;
  --c-sky-300:#8FC5E5;
  --c-sky-400:#6EA8DB;
  --c-sky-500:#3B83D9;
  --c-sky-600:#1B68CE;
  --c-sky-700:#154D99;
  --c-sky-800:#0B2B56;
  --c-sky-900:#090E35;

  /* ---------- 5. Semantische Rollen ---------- */
  --text:var(--c-ink);
  --text-muted:var(--c-gray-600);
  --text-on-dark:var(--c-white);
  --heading:var(--c-ink);
  --surface:var(--c-white);
  --surface-dark:var(--c-navy);
  --border:var(--c-gray-200);
  --border-input:var(--c-gray-400);
  --link:var(--c-blue);
  --focus:var(--c-blue);            /* Fokusring: blau mit weissem Innenring, auf hell + dunkel sichtbar */
  --focus-ring:0 0 0 2px var(--c-white), 0 0 0 5px var(--c-blue);
  --nav-bg:rgb(var(--rgb-black) / .84);
  --nav-line:rgb(var(--rgb-steel) / .72);

  /* ---------- 6. Verlaeufe (benannt, aus Skala aufgebaut) ---------- */
  --grad-sky-night:linear-gradient(180deg,          /* Kontakt, Kunden & Partner */
     var(--c-sky-200) 0%, var(--c-sky-600) 33.45%, var(--c-sky-900) 67.29%, #010105 96.8%, var(--c-black) 100%);
  --grad-sky-light:linear-gradient(180deg,          /* Homepage Mittelteil */
     var(--c-white) 0%, #B8E4F0 44.24%, #367CD5 83.27%, #3070C4 93.68%, #215DAD 97.4%, #1E56A0 99.26%, #1E549C 100%);


  /* ---------- 6b. Weitere Verlaeufe (Canva-gemessen) ---------- */
  --grad-text-intro:linear-gradient(90deg,
     #7A7A7E   0%,
     #777982   5%,
     #6870B0  27%,
     #445FC3  49%,
     #3D5FD4  65%,
     #375CD7  76%,
     #2D4AAA  81%,
     #23387E  87%,
     #192653  92%,
     #0F1427  97%,
     var(--c-ink) 100%);   /* Verlaufsschrift „Tradition trifft Innovation“ (Startseite) */
  --grad-footer-home:linear-gradient(180deg,
      #20559C   0%,
      #1F5195   4.65%,
      #1E4E8E   9.30%,
      #1D4882  18.60%,
      #1C477E  23.26%,
      #1C4275  27.91%,
      #1B3C69  37.21%,
      #1C3A64  41.86%,
      #1E3960  46.51%,
      #11151B  93.02%,
      #101214  97.67%,
      #101011 100%);   /* Footer Startseite */
  --grad-text-cerntech:linear-gradient(90deg,
    #E8FCFF   0%,
    #D8F8FC  15%,
    #CBF5FB  30%,
    #B6F1F8  45%,
    #9FECF5  60%,
    #8AE9F2  75%,
    #83E7F2 100%);   /* Verlaufsschrift Cerntech (Akzent-Tuerkis) */
  --grad-services-band:linear-gradient(180deg,
     #020202   0%,
     var(--c-black)  31.44%,
     #2E2E2E  36.63%,
     var(--c-gray-600)  42.61%,
     #808080  48.60%,
     #A2A2A2  54.59%,
     #BFBFBF  61.28%,
     #CFCFCF  68.56%,
     #E5E5E5  78.54%,
     var(--c-white)  90.32%,
     var(--c-white) 100%);   /* Services: Schwarz -> Weiss unter „Unsere Loesungen“ */
  /* Version 3 – Services im Himmel-Verlauf der uebrigen Seiten (statt Schwarz/Grau/Weiss) */
  --grad-services-band-v3:linear-gradient(180deg,
     var(--c-night)     0%,
     var(--c-navy)     14%,
     var(--c-sky-800)  30%,
     var(--c-sky-700)  42%,
     var(--c-sky-600)  58%,
     var(--c-sky-400)  76%,
     var(--c-sky-200)  92%,
     var(--c-sky-100) 100%);   /* Services: Hero (Navy) -> hell, unter „Unsere Loesungen“ */
  --grad-services-flow-v3:linear-gradient(180deg,
     var(--c-sky-100)   0%,
     var(--c-sky-200)  30%,
     var(--c-sky-300)  40%,
     var(--c-sky-400)  52%,
     var(--c-sky-500)  61%,
     var(--c-sky-600)  68%,
     var(--c-sky-700)  79%,
     var(--c-sky-800)  89%,
     var(--c-sky-900)  96%,
     var(--c-black)   100%);   /* Services: drei Bereiche hell -> Nacht -> Footer (wie Erfahrungen/Kontakt) */
  --grad-glass-card:linear-gradient(180deg,
     rgb(var(--rgb-white) / .53)   0%,
     rgb(var(--rgb-white) / .36)  13%,
     rgb(var(--rgb-white) / .19)  26%,
     rgb(var(--rgb-white) / .09)  39%,
     rgb(var(--rgb-white) / 0)    58%,
     rgb(var(--rgb-black) / .035)       72%,
     rgb(var(--rgb-black) / .035)       88%,
     rgb(var(--rgb-black) / 0)         100%);   /* Glaskarten Logo-Leiste */
  --grad-glass-panel:linear-gradient(180deg,
     rgb(var(--rgb-white) / .56)   0%,
     rgb(var(--rgb-white) / .45)  10%,
     rgb(var(--rgb-white) / .30)  26%,
     rgb(var(--rgb-white) / .15)  50%,
     rgb(var(--rgb-white) / .10)  63%,
     rgb(var(--rgb-white) / .05)  76%,
     rgb(var(--rgb-white) / 0)   100%);   /* Glasfenster Kunden & Partner */
  --grad-xp-page:linear-gradient(180deg,
     var(--c-sky-200)   0%,
     var(--c-sky-500)  23.4%,
     #1961C1  32.5%,
     #08203E  51.9%,
     #020810  58.4%,
     var(--c-black)  61.7%,
     var(--c-black) 100%);   /* Seitenhintergrund Erfahrungen */
  --grad-xp-card:linear-gradient(180deg,
     var(--c-white)   0%,
     var(--c-sky-50)   9.4%,
     var(--c-sky-100)  20.2%,
     #AFDDED  31.1%,
     var(--c-sky-300)  38.3%,
     var(--c-sky-400)  45.6%,
     #4D8DD3  52.8%,
     #3C80CE  56.4%,
     #1A63C6  63.6%,
     var(--c-sky-700)  70.9%,
     var(--c-sky-800)  81.8%,
     #030A13  92.6%,
     var(--c-black)  96.3%);   /* Karte Erfahrungen */

  /* ---------- 7. Schrift ---------- */
  --font-text:"Lexend","Segoe UI",system-ui,-apple-system,sans-serif;   /* Text, UI, Navigation, Buttons */
  --font-display:"Onest","Lexend",system-ui,sans-serif;                  /* grosse Ueberschriften */
  --font-mono:"Fira Mono","IBM Plex Mono",ui-monospace,monospace;        /* Akzent: Bereichstitel wie UNSERE LOESUNGEN */
  --font-arabic:"Cairo","Noto Sans Arabic",system-ui,sans-serif;         /* nur Arabisch */

  --fw-regular:400;
  --fw-semibold:600;
  --fw-bold:800;

  /* Groessenskala – Desktop-Werte bezogen auf 1440 px (1024–1439 px skaliert body{zoom}) */
  --fs-display-1:140px;   /* Bereichs-Titel (Robotik, Forschung …), UNSERE LOESUNGEN */
  --fs-display-2:116px;   /* Seitentitel (Impressum, Ueber Amara, Cerntech) */
  --fs-h1:84px;
  --fs-h2:68px;
  --fs-h3:40px;
  --fs-h4:32px;
  --fs-lead:26px;
  --fs-body:21px;
  --fs-small:18px;
  --fs-xs:15px;           /* Mindestgroesse fuer Hinweise/Beschriftungen */

  --lh-tight:1.1;
  --lh-heading:1.2;
  --lh-text:1.5;
  --measure:68ch;         /* Zeilenlaenge Fliesstext */

  /* ---------- 8. Abstaende (8-Punkt-Raster) ---------- */
  --space-1:8px;  --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:96px; --space-8:128px;

  /* ---------- 9. Radien ---------- */
  --radius-sm:8px;        /* Eingabefelder, kleine Buttons */
  --radius-md:12px;       /* Karten, Kacheln, Panels */
  --radius-lg:24px;       /* grosse Flaechen, Navigation */
  --radius-xl:32px;       /* Bildrahmen, Glas-Karten */
  --radius-pill:999px;

  /* ---------- 10. Schatten ---------- */
  --shadow-1:0 10px 24px -12px rgb(var(--rgb-navy) / .55);     /* Hover leicht */
  --shadow-2:0 16px 34px -16px rgb(var(--rgb-black) / .6);     /* Hover deutlich, geoeffnet */
  --shadow-3:0 18px 40px -16px rgb(var(--rgb-black) / .7);     /* schwebende Ebenen (Menue) */

  /* ---------- 11. Bewegung ---------- */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur-fast:.2s;
  --dur-base:.35s;
  --dur-slow:.9s;
  /* ---------- 12. Grosse Hintergrundbilder (AVIF bevorzugt, WebP als Ersatz; 1x/2x) ---------- */
  --img-footer-dark:image-set(
     url("../img/footer/footer-welle-dunkel-2862.avif?v=d82d68e2") type("image/avif") 1x,
     url("../img/footer/footer-welle-dunkel-5724.avif?v=120713e7") type("image/avif") 2x,
     url("../img/footer/footer-welle-dunkel-2862.webp?v=0131e4fd") type("image/webp") 1x,
     url("../img/footer/footer-welle-dunkel-5724.webp?v=b9fa7ba7") type("image/webp") 2x);
  --img-footer-blue:image-set(
     url("../img/footer/footer-welle-blau-1720.avif?v=4d7ef366") type("image/avif") 1x,
     url("../img/footer/footer-welle-blau-3440.avif?v=ebd1fd71") type("image/avif") 2x,
     url("../img/footer/footer-welle-blau-1720.webp?v=d2136eeb") type("image/webp") 1x,
     url("../img/footer/footer-welle-blau-3440.webp?v=469823ad") type("image/webp") 2x);
}

/* aeltere Browser ohne image-set(type()): WebP */
@supports not (background-image:image-set(url("x.avif") type("image/avif") 1x)){
  :root{
    --img-footer-dark:url("../img/footer/footer-welle-dunkel-2862.webp?v=0131e4fd");
    --img-footer-blue:url("../img/footer/footer-welle-blau-1720.webp?v=d2136eeb");
  }
}

/* Unter 1024 px: Groessen stufenlos per clamp() */
@media (max-width:1023.98px){
  :root{
    --img-footer-dark:image-set(url("../img/footer/footer-welle-dunkel-2862.avif?v=d82d68e2") type("image/avif"), url("../img/footer/footer-welle-dunkel-2862.webp?v=0131e4fd") type("image/webp"));
    --img-footer-blue:image-set(url("../img/footer/footer-welle-blau-1720.avif?v=4d7ef366") type("image/avif"), url("../img/footer/footer-welle-blau-1720.webp?v=d2136eeb") type("image/webp"));
    --fs-display-1:clamp(34px,9.4vw,120px);
    --fs-display-2:clamp(28px,8.4vw,110px);
    --fs-h1:clamp(36px,8.2vw,72px);
    --fs-h2:clamp(30px,6.4vw,56px);
    --fs-h3:clamp(24px,4.4vw,36px);
    --fs-h4:clamp(21px,3.6vw,28px);
    --fs-lead:clamp(18px,2.6vw,24px);
    --fs-body:clamp(16px,2.2vw,19px);
    --fs-small:16px;
    --fs-xs:14px;
  }
}