/* CareKudos Design-Tokens (Brand Design Guide v1, 15.10.2026). Eine Quelle fuer Webseite, Brand Guide und Company Profile. */
@font-face{font-family:"Satoshi";src:url(../fonts/Satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/Satoshi-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/Satoshi-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/Satoshi-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* Farben */
  --navy:#040550;        /* Kudos Navy, aus dem Logo */
  --navy-2:#0A1170;      /* Navy hell, fuer Verlaeufe und Hover */
  --midnight:#02032B;    /* dunkelste Flaechen */
  --graphite:#2E3446;    /* Fliesstext */
  --slate:#6B7385;       /* leiser Text */
  --porcelain:#FFFFFF;
  --cloud:#F4F6FB;
  --mist:#E5E9F2;
  --haze:#CBD2E1;
  --gold-1:#F6C453;
  --gold-2:#E9A23B;
  --gold:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  --teal:#136A83;
  --leaf:#2A9D6E;

  /* Schrift */
  --font:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Formen */
  --r-xl:28px; --r-l:20px; --r-m:14px; --r-pill:999px;
  --line:1px solid var(--mist);

  /* Tiefe */
  --shadow-1:0 1px 2px rgba(4,5,80,.06),0 10px 28px rgba(4,5,80,.06);
  --shadow-2:0 2px 6px rgba(4,5,80,.08),0 28px 70px rgba(4,5,80,.14);
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.65);
  --glass-dark:rgba(255,255,255,.08);

  /* Kontrast-Vertrag (22.10.2026): jede Inhaltsbox hebt sich sichtbar vom hellen Grund ab.
     Weisse Karte auf hellem Grund = --card-shadow (Kante + Tiefe). Gestapelte Zeilen, Tabellen und Boxen im Textfluss = --card-edge (nur Kante).
     Getoente Flaeche auf Weiss = Kante --card-line. Bedienelemente (Felder, Rand-Knoepfe, Zustandssymbole) = --control-line, mind. 3:1 (WCAG 1.4.11). */
  --card-line:var(--haze);                                            /* 1,5:1 auf Weiss, 1,4:1 auf Cloud */
  --card-lift:0 1px 3px rgba(4,5,80,.07),0 12px 30px rgba(4,5,80,.10);
  --card-shadow:0 0 0 1px var(--card-line),var(--card-lift);
  --card-edge:0 0 0 1px var(--card-line),0 1px 2px rgba(4,5,80,.05);
  --control-line:#858EA2;                                             /* 3,3:1 auf Weiss, 3,0:1 auf Cloud */
  --gold-ink:#A77514;                                                 /* Gold fuer kleine Bediensymbole auf Hell: 4,0:1 auf Weiss */

  /* Bewegung */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:220ms; --t:520ms; --t-slow:900ms;

  /* Dichte: per JS aus der Fensterhoehe (1 = volle Groesse, kleiner auf flachen Laptops) */
  --dichte:1;
}