/* ==========================================================================
   apollo consulting — Design-Tokens (eine Datei, keine @import-Kette)

   ZWEI QUELLEN, klare Rangordnung:
     1. CI (Wahrheit fuer Farbwerte):
        material/ci-visuell_apollo-consulting.md  ← 2201_AC_CD-Manual.pdf
     2. Design-Vorlage (Wahrheit fuer die ANWENDUNG der Farben, Typo-Skala,
        Spacing, Radien, Schatten, Motion):
        material/design-vorlage/design_handoff_hero/reference/tokens/*.css

   Abgleich am 09.08.2026: Die 6 CI-Farbwerte sind in beiden Quellen
   ZEICHENGLEICH — kein Konflikt. Die Vorlage ergaenzt nur dort, wo die CI
   schweigt (Tints, Neutrale, dunkle Flaechen, Skalen). Uebernommen wird
   deshalb das Token-Schema der Vorlage; die CI-Werte stehen zusaetzlich als
   --ci-* Herkunftsebene, damit jederzeit nachweisbar ist, was Original ist.

   Aufbau:
     --ci-*      Original-CI-Werte. UNANTASTBAR.
     --ac-*      Design-System-Rampe (CI-Werte + abgeleitete Stufen)
     semantisch  --text-*, --surface-*, --border-* — DIESE benutzen, nicht die Rampe
     Layout      --section-* / --measure — aus dem SEOGEO-Layout-Standard portiert

   KONTRAST-BELEGE (gerechnet, WCAG 2.1 — nicht geschaetzt):
     #333333 Headline auf Weiss ......... 12,63:1 ✓
     #706f6f Fliesstext auf Weiss ........  5,01:1 ✓
     #706f6f Fliesstext auf #f8f8f7 ......  4,71:1 ✓
     #00699d Link auf Weiss ..............  5,99:1 ✓
     #3e5698 Link-Hover auf Weiss ........  7,02:1 ✓
     #8f8e8e Muted auf Weiss .............  3,27:1 ✗ nur grosse Schrift
     #1a919a Teal auf Weiss ..............  3,78:1 ✗ nur grosse Schrift/Icons
     Weiss auf #14161a ................... 18,11:1 ✓ dunkle Sektionen
     Weiss auf #23262b ................... 15,18:1 ✓ Panel auf Dunkel
     Weiss auf #00699d ...................  5,99:1 ✓ primaerer Button
     Weiss auf #3e5698 ...................  7,02:1 ✓ Button-Alternative
     Weiss auf #74b959 ...................  2,38:1 ✗ NIE weisser Text auf Gruen
     #14161a auf #74b959 .................  7,61:1 ✓ so wird Gruen zum Button
     #14161a auf #dedc00 ................. 12,37:1 ✓
     #dedc00 auf #14161a ................. 12,37:1 ✓ Kicker im dunklen Hero
   ========================================================================== */

:root {

  /* ── 1 · CI-Originalwerte (CD-Manual 2022) — UNANTASTBAR ───────────────── */
  --ci-grau:            #706f6f; /* Schrift-Grau, 70 % Schwarz */
  --ci-blau:            #3e5698; /* Figur Dunkelblau */
  --ci-tuerkis-dunkel:  #00699d; /* Figur Tuerkis dunkel */
  --ci-tuerkis-hell:    #1a919a; /* Figur Tuerkis hell */
  --ci-gruen:           #74b959; /* Figur Gruen mittel */
  --ci-gelbgruen:       #dedc00; /* Figur Gruen hell */

  /* ── 2 · Marken-Rampe (Blau → Gruen, Reihenfolge ist die CI-Aussage) ───── */
  --ac-cobalt: var(--ci-blau);
  --ac-petrol: var(--ci-tuerkis-dunkel);
  --ac-teal:   var(--ci-tuerkis-hell);
  --ac-green:  var(--ci-gruen);
  --ac-lime:   var(--ci-gelbgruen);

  /* Tints/Shades — ABGELEITET (Design-Vorlage), keine CI-Werte */
  --ac-cobalt-700: #2f4276;
  --ac-cobalt-300: #8a99c4;
  --ac-cobalt-100: #e2e6f1;
  --ac-petrol-700: #004f77;
  --ac-teal-100:   #dceef0;
  --ac-green-700:  #4f8a39;
  --ac-green-100:  #e6f3de;
  --ac-lime-700:   #a9a800;
  --ac-lime-100:   #f7f6cc;

  /* ── 3 · Neutrale — verankert am CI-Grau, Rest ABGELEITET ─────────────── */
  --ac-ink:       #333333;
  --ac-gray:      var(--ci-grau);
  --ac-gray-500:  #8f8e8e;
  --ac-gray-400:  #b3b2b2;
  --ac-gray-300:  #d4d3d3;
  --ac-gray-200:  #e6e5e5;
  --ac-gray-100:  #f2f1f1;
  --ac-gray-50:   #f8f8f7;
  --ac-white:     #ffffff;
  --ac-black:     #14161a; /* Signatur-Dunkel der Website (Design-Vorlage) */
  --ac-black-800: #23262b; /* angehobene Flaechen auf Dunkel */

  /* ── 4 · Signatur-Verlauf — NUR Akzent, NIE vollflaechig ──────────────── */
  /* Erlaubt: 4-px-Hairline, Icon-Fuellung, Button-Kreis, Unterstreichung.
     Verboten: Sektions-Hintergrund. (Design-Vorlage, „Der Gradient ist Akzent") */
  --ac-gradient: linear-gradient(90deg,
      var(--ac-cobalt) 0%, var(--ac-petrol) 28%, var(--ac-teal) 50%,
      var(--ac-green) 75%, var(--ac-lime) 100%);
  --ac-gradient-diag: linear-gradient(120deg,
      var(--ac-cobalt) 0%, var(--ac-teal) 45%, var(--ac-green) 72%, var(--ac-lime) 100%);

  /* ── 5 · Semantische Rollen — IM CODE NUR DIESE BENUTZEN ──────────────── */
  --color-brand:        var(--ac-petrol);
  --color-brand-strong: var(--ac-cobalt);
  --color-accent:       var(--ac-green);
  --color-accent-hi:    var(--ac-lime);

  --text-primary:    var(--ac-gray);       /* 5,01:1 */
  --text-heading:    var(--ac-ink);        /* 12,63:1 */
  --text-muted:      var(--ac-gray-500);   /* 3,27:1 — NUR ab 24 px bzw. 18,7 px fett */
  --text-muted-aa:   #767676;              /* ABGELEITET: 4,54:1 — Muted fuer Kleintext */
  --text-inverse:    var(--ac-white);
  --text-on-brand:   var(--ac-white);
  --text-link:       var(--ac-petrol);     /* 5,99:1 */
  --text-link-hover: var(--ac-cobalt);     /* 7,02:1 */

  --surface-page:        var(--ac-white);
  --surface-subtle:      var(--ac-gray-50);
  --surface-card:        var(--ac-white);
  --surface-dark:        var(--ac-black);
  --surface-dark-raised: var(--ac-black-800);
  --surface-brand:       var(--ac-cobalt);
  --surface-tint:        var(--ac-teal-100);

  --text-on-dark:       rgba(255,255,255,.95);
  --text-on-dark-muted: rgba(255,255,255,.66);
  --border-on-dark:     rgba(255,255,255,.16);

  --border-subtle:  var(--ac-gray-200);
  --border-default: var(--ac-gray-300);
  --border-strong:  var(--ac-gray-400);

  /* Status — aus der Marken-Rampe gezogen, damit Semantik on-brand bleibt */
  --color-success: var(--ac-green);
  --color-info:    var(--ac-petrol);
  --color-warning: #e8a400;
  --color-danger:  #c8442e;

  --focus-ring: var(--ac-teal);

  /* ── 6 · Buttons — Farbe folgt dem HINTERGRUND, nicht dem Inhalt ───────── */
  /* Regel gilt site-weit ohne Ausnahme. Weisser Text auf Gruen ist verboten
     (2,38:1); Gruen traegt nur mit dunkler Schrift (7,61:1). */
  --btn-primary-bg:        var(--ac-petrol);   /* auf hellem Grund */
  --btn-primary-text:      var(--ac-white);    /* 5,99:1 */
  --btn-primary-bg-hover:  var(--ac-petrol-700);
  --btn-accent-bg:         var(--ac-green);    /* Signal-Button */
  --btn-accent-text:       var(--ac-black);    /* 7,61:1 — NIE Weiss */
  --btn-ghost-border:      rgba(255,255,255,.24); /* auf dunklem Grund */
  --btn-ghost-bg-hover:    rgba(255,255,255,.08);

  /* ── 7 · Typografie ───────────────────────────────────────────────────── */
  /* Hausschrift laut CD-Manual: Fira Sans Extra Condensed → Display/H1.
     Condensed traegt Subheads/Nav/UI-Labels, die regulaere Fira Sans den
     Fliesstext (Extra Condensed ist ueber lange Absaetze mobil schwer lesbar).
     Bestaetigt durch die Design-Vorlage. Alle drei self-hosted (css/fonts.css). */
  --font-display: 'Fira Sans Extra Condensed', 'Fira Sans', system-ui, sans-serif;
  --font-heading: 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif;
  --font-body:    'Fira Sans', system-ui, -apple-system, sans-serif;

  /* Vorlagen-Skala als Basis, fluid gemacht — die Vorlage nennt Desktop-Werte,
     die Website braucht mobile Stufen. Obergrenze = Vorlagenwert. */
  --fs-display-xl: clamp(2.75rem, 7.5vw, 6.75rem); /* Hero-H1, bis 108 px */
  --fs-display:    clamp(2.25rem, 5vw, 3.5rem);    /* bis 56 px */
  --fs-h1:         clamp(2rem, 4vw, 2.625rem);     /* bis 42 px */
  --fs-h2:         clamp(1.5rem, 3vw, 2rem);       /* bis 32 px */
  --fs-h3:         clamp(1.25rem, 2vw, 1.5rem);    /* bis 24 px */
  --fs-h4:         1.25rem;                        /* 20 px */
  --fs-body-lg:    1.1875rem;                      /* 19 px */
  --fs-body:       1rem;                           /* 16 px — Mobil-Minimum */
  --fs-body-sm:    0.875rem;
  --fs-caption:    0.78125rem;
  --fs-overline:   0.75rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --lh-relaxed: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  --ls-display:  -0.01em;
  --ls-tight:    -0.005em;
  --ls-normal:   0em;
  --ls-overline: 0.14em;

  /* ── 8 · Spacing, Container, Radien (8-px-Rhythmus) ───────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --max-width:    var(--container-xl);
  --gutter: 24px;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;   /* Karten hoechstens bis hier — Marke ist rechtwinklig */
  --radius-xl: 24px;
  --radius-pill: 999px; /* nur Buttons und Badges */

  /* ── 9 · Layout-Rhythmus (aus dem SEOGEO-Layout-Standard portiert) ─────── */
  /* Genau EIN Sektionsrhythmus site-weit. Gleichfarbige Naehte kollabieren auf
     --section-pad-seam, sonst addieren sich die Paddings zu leeren Baendern. */
  --section-pad:      clamp(2.5rem, 5vw, 6rem);  /* Obergrenze = --section-y 96 px */
  --section-pad-seam: calc(var(--section-pad) * .5);
  --measure:          72ch;

  /* ── 10 · Schatten & Bewegung ─────────────────────────────────────────── */
  /* Weich, kuehl getoent (Markenblau) — nie harte schwarze Drop-Shadows. */
  --shadow-xs: 0 1px 2px rgba(37,54,90,.06);
  --shadow-sm: 0 2px 6px rgba(37,54,90,.08);
  --shadow-md: 0 8px 24px rgba(37,54,90,.10);
  --shadow-lg: 0 18px 48px rgba(37,54,90,.14);
  --shadow-focus: 0 0 0 3px rgba(26,145,154,.35);

  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}