/* ==========================================================================
   Augenpartner Design-Kit — 1 von 3: Design-Tokens
   Version 1.0 (2026-09-04)

   Diese Datei ist die EINE Quelle der Marken-Werte fuer alle fuenf Auftritte
   (augenpartner.com, Altstetten, Dietikon, Berikon, Spreitenbach).
   Sie wird in jede Site KOPIERT — keine Laufzeit-Abhaengigkeit, kein CDN.
   Einbindung VOR dem seiteneigenen Stylesheet:

       <link rel="stylesheet" href="/design-kit/schriften/schrift.css">
       <link rel="stylesheet" href="/design-kit/tokens.css">
       <link rel="stylesheet" href="/design-kit/bausteine.css">
       <link rel="stylesheet" href="/assets/css/stil.css">

   Herkunft: Abschnitt 1 aus altstetten/assets/css/stil.css, plus die
   Entscheide aus Phase 1 (Fraunces als Anzeigeschrift, Radien 8/12/20).
   ========================================================================== */

:root {
  /* Farben ---------------------------------------------------------------
     Marken-Blau und Himmel sind gesetzt (Phase 1, Peters Wahl). */
  --tief: #004b91;          /* Marken-Blau: Kopfflaechen, primaerer Knopf, Links */
  --tief-dunkel: #003a71;   /* Hover fuer Marken-Blau */
  --himmel: #2382c3;        /* Akzent: nur Flaechen, Icons, Linien — nie Text */
  --himmel-dunkel: #1a6ca3; /* Akzent als Textfarbe (AA: 5,6:1 auf Weiss) */
  --himmel-hell: #e8f2fa;   /* sehr helle Akzentflaeche */

  /* Hausfarbe des Signets, am Logo auf augenpartner.com gemessen.
     NUR fuer das Markenzeichen in Kopf und Fuss — als Text- oder
     Bedienfarbe zu hell (3,0:1 auf Weiss). */
  --signet: #0096ff;

  /* Drei Gruen mit klaren Rollen — welches wofuer, steht dahinter.
     Grund: das helle Gruen ist als Schrift nicht lesbar genug (2,8:1 auf Weiss). */
  --gruen: #28af78;         /* nur Flaeche (Erfolgsmeldung, Haken) */
  --gruen-punkt: #1a7a52;   /* Punkt/Icon UND Schrift auf WEISS (5,3:1) */
  --gruen-text: #12603f;    /* Schrift auf --gruen-hell (6,8:1) */
  /* Welches der beiden dunklen Gruen, haengt am Untergrund:
     auf der hellen Gruenflaeche der Status-Pille braucht es --gruen-text,
     sonst waere der Abstand zum Grund zu klein. Auf WEISS ist dasselbe
     --gruen-text mit 7,6:1 dagegen so dunkel, dass es nicht mehr als
     Gruen gelesen wird (Peters Urteil 2026-09-04, Portal-Status) — dort
     ist --gruen-punkt die richtige Schriftfarbe und mit 5,3:1 klar AA. */
  --gruen-hell: #e6f6ef;
  --text: #0c1e21;          /* Fliesstext, fast-schwarz */
  --text-leise: #4a5a5e;    /* Sekundaertext, Kontrast > 7:1 auf Weiss */
  --weiss: #ffffff;
  --flaeche: #f4f8fb;       /* zarte Sektionsflaeche */
  --linie: #e2eaef;         /* Rahmen und Trenner */
  --linie-stark: #cfe0ee;   /* Rahmen von Knopf/Karte im Ruhezustand */
  --warn: #b3261e;          /* Fehler, geschlossen, Notfall */
  --warn-hell: #fdeceb;

  /* Abstands-Skala (8px-Raster) ------------------------------------------ */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* Radien, Schatten, Bewegung -------------------------------------------
     Phase 1: EIN Radien-Satz ueber alle Auftritte, 8 / 12 / 20 px.
     Knoepfe und Pillen sind davon ausgenommen (999px, siehe bausteine.css). */
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 20px;
  --schatten: 0 1px 2px rgba(12, 30, 33, .04), 0 10px 28px -18px rgba(12, 30, 33, .35);
  --schatten-hoch: 0 2px 4px rgba(12, 30, 33, .05), 0 22px 44px -22px rgba(12, 30, 33, .40);
  --tempo: 180ms cubic-bezier(.4, 0, .2, 1);

  /* Typografie -----------------------------------------------------------
     Fliesstext: System-Schrift (nichts zu laden, ueberall lesbar).
     Ueberschriften: Fraunces, selbst gehostet aus schriften/.
     ACHTUNG: Fraunces hat KEIN Kyrillisch. Russische Ueberschriften fallen
     auf Georgia zurueck — das ist so gewollt, Georgia hat Kyrillisch. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --breite: 1140px;
}

/* Anzeigeschrift auf Ueberschriften und Marken-Elemente legen.
   Die Klassen kommen aus dem gemeinsamen Markup (Altstetten-Muster). */
h1, h2, h3, h4,
.hero__titel, .marke__name, .person__name, .karte__titel,
.box__titel, .fuss__marke, .schnellinfo__titel {
  font-family: var(--font-display);
}
h1, h2, h3, .hero__titel, .marke__name {
  font-weight: 600;
  letter-spacing: -.01em;
}