/* ==========================================================================
   flu.gs – Design-Tokens
   Abgeleitet aus dem Logo L-01_FLUGS (gültige Version 09.09.2026):
   Navy #00102D, Türkis #4FC2B7. Kein Orange (altes Branding entfällt).

   Kontrast (WCAG 2.x, gemessen):
     Navy  #00102D auf Weiß #FFFFFF ........ 18.88:1  AAA
     Navy  #00102D auf --bg #F4F6F9 ........ 17.44:1  AAA
     Weiß  auf Navy ........................ 18.88:1  AAA
     Türkis #4FC2B7 auf Navy ................ 8.75:1  AAA  -> Türkis-Text nur auf Navy
     Türkis #4FC2B7 auf Weiß ................ 2.16:1  FAIL (auch nicht AA-large)
     Türkis #4FC2B7 auf --bg ................ 1.99:1  FAIL
       => Türkis pur nur für Flächen, Akzente, Icons (nicht-textlich) und Text auf Navy.
     --teal-ink #1B766E auf Weiß ............ 5.44:1  AA   -> Links/Text in Türkis auf Hell
     --teal-ink #1B766E auf --bg ............ 5.02:1  AA
     --teal-ink #1B766E auf --teal-50 ....... 4.88:1  AA
     Navy auf Türkis (Button-Text) .......... 8.75:1  AAA  -> Buttons in Türkis mit Navy-Text,
     Weiß auf Türkis ........................ 2.16:1  FAIL    niemals weißer Text auf Türkis
     Navy auf --teal-600 (Button-Hover) ..... 6.52:1  AA
     --text-muted #4B5569 auf Weiß / --bg ... 7.49 / 6.92:1  AAA / AA
     --text-muted-inv #A9B1C2 auf Navy ...... 8.77:1  AAA
     --line-strong #8A93A6 auf Weiß ......... 3.09:1  (≥ 3:1 für Formularränder, WCAG 1.4.11)
     Türkis auf --navy-700 #13233F .......... 7.26:1  AAA
   ========================================================================== */

/* Libre Franklin (SIL OFL 1.1, siehe ../fonts/LibreFranklin-OFL.txt),
   variable Achse wght 100–900, latin-Subset, selbst gehostet. */
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin-wght-normal.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;
}

:root {
  /* ---- Farben: Basis (exakt aus dem Logo) ---- */
  --navy: #00102D;
  --teal: #4FC2B7;

  /* Navy-Stufen */
  --navy-900: #000A1E;   /* tiefste Fläche, Footer */
  --navy-800: #00102D;   /* = --navy, Logo-Navy */
  --navy-700: #13233F;   /* Karten/Flächen auf Navy, Hover */
  --navy-600: #243556;   /* Linien auf Navy */

  /* Türkis-Stufen */
  --teal-50:  #E6F6F4;   /* zarte Hinterlegung auf Hell */
  --teal-200: #A7E1DB;   /* helles Türkis, Flächen/Illustration */
  --teal-600: #36A89D;   /* Hover für Türkis-Flächen */
  --teal-ink: #1B766E;   /* Türkis für TEXT/LINKS auf Hell (≥ 4.5:1) */

  /* Neutrale */
  --white: #FFFFFF;
  --bg: #F4F6F9;          /* heller Hintergrund, leicht kühl */
  --surface: #FFFFFF;
  --line: #DDE2EA;        /* dekorative Trennlinien */
  --line-strong: #8A93A6; /* Formularränder (≥ 3:1) */
  --text: #00102D;
  --text-muted: #4B5569;
  --text-inv: #FFFFFF;
  --text-muted-inv: #A9B1C2;

  /* Semantik */
  --link: var(--teal-ink);
  --link-inv: var(--teal);
  --focus: var(--teal-ink);           /* Fokusring auf Hell */
  --focus-inv: var(--teal);           /* Fokusring auf Navy */
  --btn-bg: var(--teal);
  --btn-text: var(--navy);            /* nie Weiß auf Türkis */

  /* ---- Schrift ---- */
  --font-sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;       /* Headlines, nahe an der Wortmarke (Franklin Gothic Heavy) */

  /* Typo-Skala (fluid, 360px -> 1280px) */
  --fs-xs:  clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --fs-sm:  clamp(0.88rem, 0.85rem + 0.13vw, 0.95rem);
  --fs-base: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --fs-lg:  clamp(1.15rem, 1.07rem + 0.35vw, 1.35rem);
  --fs-xl:  clamp(1.35rem, 1.20rem + 0.65vw, 1.75rem);
  --fs-2xl: clamp(1.65rem, 1.38rem + 1.20vw, 2.4rem);
  --fs-3xl: clamp(2.05rem, 1.60rem + 2.00vw, 3.3rem);
  --fs-4xl: clamp(2.6rem, 1.85rem + 3.30vw, 4.6rem);
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;   /* für fette Headlines */
  --tracking-caps: 0.08em;     /* für kleine Versal-Labels */
  --measure: 66ch;

  /* ---- Abstände (4er-Raster) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --container: 72rem;

  /* ---- Radien ----
     Bildmarke: Eckradius = 19,5 % der Kantenlänge (39,93 / 205,25). */
  --radius-mark: 19.5%;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Schatten (Navy-getönt) ---- */
  --shadow-sm: 0 1px 2px rgb(0 16 45 / 0.08);
  --shadow-md: 0 4px 12px rgb(0 16 45 / 0.08), 0 1px 3px rgb(0 16 45 / 0.06);
  --shadow-lg: 0 16px 40px rgb(0 16 45 / 0.12), 0 4px 10px rgb(0 16 45 / 0.06);

  /* ---- Balkenmotiv ----
     Schräge der Logo-Balken: 23,94° zur Senkrechten (dx 18,25 / dy 41,11, bei allen
     drei Balken gleich), Oberkante länger als Unterkante (Schräge wie „/“).
     Balkenbreiten oben -> unten 144 : 80 : 32 (≈ 1 : 0,56 : 0,22), starke Treppe.
     transform: skewX(var(--skew)) erzeugt genau diese Neigung. */
  --skew-angle: 23.94deg;
  --skew: -23.94deg;
  --skew-ratio: 0.444;   /* tan(23,94°): horizontaler Versatz je Höhe, z. B. für clip-path */
  /* Balkenproportion im Logo: Höhe : Abstand = 41,1 : 12,4 (≈ 3,3 : 1) */
  --bar-gap-ratio: 0.3;

  /* ---- Bewegung ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
}

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