/* ══════════════════════════════════════════════════════════════════════════
   Jasar Clean Service — Gestaltungstoken

   Schriften, Abstände und Maße sind aus der Vorlage übernommen; Datums- und Auftraggeberangaben in den
   Schriftkommentaren unten beziehen sich auf deren Auftraggeber.
   Die PALETTE ist neu (27.10.2026).

   ── Herleitung ─────────────────────────────────────────────────────────────
   Auftrag: aufgebaut wie die Vorlage, „jedoch das ein andere blau ton genommen
   wird". Geliefert ist kein Farbwert — die Töne unten sind ein Vorschlag
   der Agentur und abzunehmen. Die Vorlage ist ein Stahlblau mit Petrolstich
   (Farbton 206°). Jasar bekommt ein Kobalt- bzw. Königsblau (220–222°):
   klar als anderes Blau erkennbar, aber dieselbe Rollenverteilung.

   | Token             | Wert     | HSL            | Aufgabe                          |
   |-------------------|----------|----------------|----------------------------------|
   | --dunkelblau      | #0d2a6d  | 222° 79 % 24 % | dunkle Bänder, Fuß, Glasleiste, Hauptknopf |
   | --dunkelblau-tief | #0a2052  | 222° 78 % 18 % | Hover auf dunkelblauen Flächen   |
   | --hellblau        | #3f7bf3  | 220° 88 % 60 % | Kanten, Symbole, Balken — KEINE Schrift |
   | --hellblau-text   | #2e69e1  | 220° 75 % 53 % | wo Hellblau Text trägt oder ist  |
   | --lightgrau       | #f3f5f9  | 220° 33 % 96 % | abgesetzte Bänder, ganz leicht kühl |
   | --text            | #1d2435  | 222° 29 % 16 % | Schrift                          |

   Alle übrigen Blautöne in style.css (Glas der Kopfleiste, Schleier über
   den Titelbildern, Tönungen) sind aus den Werten der Vorlage ABGELEITET: Farbton
   auf 222° gedreht, Sättigung und RELATIVE LEUCHTDICHTE beibehalten. Damit
   bleiben die in der Vorlage gemessenen Kontraste erhalten. Kommentare in
   style.css, die Hex-Werte samt Kontrastzahl nennen, stammen aus der
   Vorlage; die Werte darin sind mitgedreht, die Zahlen nicht neu gemessen.
   Maßgeblich ist die Tabelle unten.

   ── Kontraste, gerechnet (WCAG 2.2: Text 4,5:1 · große Schrift und
      Bedienränder 3:1). Nachgerechnet mit Python nach der WCAG-Formel
      (relative Leuchtdichte), nicht geschätzt. ──────────────────────────────

   | Vordergrund            | auf Weiß | auf Lightgrau | auf Dunkelblau |
   |------------------------|----------|---------------|----------------|
   | --text      #1d2435    |  15,49   |    14,19      |     1,16 ✗     |
   | --ink-ruhig #404a64    |   8,82   |     8,08      |     1,52 ✗     |
   | --ink-leise #5c6884    |   5,57   |     5,11      |     2,40 ✗     |
   | --hellblau-text #2e69e1|   4,97   |     4,55      |     2,69 ✗     |
   | --hellblau  #3f7bf3    |   3,93 ~ |     3,60 ~    |     3,40 ~     |
   | --rand      #848a9a    |   3,45 ~ |     3,16 ~    |     3,88 ~     |
   | --dunkelblau #0d2a6d   |  13,38   |    12,26      |     1,00 ✗     |
   | --lightgrau #f3f5f9    |   1,09 ✗ |     1,00 ✗    |    12,26       |
   | --auf-dunkel-leise #c4d0e9 | —    |      —        |     8,63       |
   | Weiß        #ffffff    |   1,00 ✗ |     1,09 ✗    |    13,38       |

   ~ = trägt nur große Schrift (ab 24px, fett ab 18,7px) und Bedienränder
   ✗ = trägt gar keinen Text

   ── WICHTIG: Hellblau #3f7bf3 kann keinen Fließtext tragen ─────────────────
   Weiß darauf erreicht 3,93:1, nicht 4,5:1. Hellblau ist deshalb die Farbe
   für FLÄCHEN OHNE KLEINSCHRIFT: Kanten, Symbole, Trennbalken,
   Hover-Zustände. Wo Hellblau Text tragen oder selbst Text sein muss, steht
   --hellblau-text (#2e69e1): gleicher Farbton, dunkler, 4,97:1 gegen Weiß
   und 4,55:1 gegen Lightgrau.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Outfit — einzige Schrift der Seite (Auftraggeber, 27.10.2026) ─────────
   Geliefert als Google-Fonts-Paket (variable Schrift + statische Schnitte),
   SIL Open Font License 1.1 (assets/fonts/OFL-Outfit.txt). Originale in
   _generator/quellen/schrift/Outfit/ (gesperrt).

   Ersetzt beide Schriften der Vorlage: Blauer Nue (Überschriften, eine
   Kundenvorgabe des dortigen Auftraggebers — deren Lizenz gilt nicht für
   Jasar) und Inter (Fließtext). Ihre Dateien sind aus assets/fonts entfernt.

   EINE Datei für alle Gewichte: die variable Fassung, auf lateinische
   Zeichen samt deutscher Satzzeichen (U+0000–00FF, „ “ ‚ ‘ – — … ‑, €, ẞ,
   Pfeile) beschnitten, als woff2 — 34 KB. Deshalb EINE @font-face-Regel mit
   `font-weight: 100 900`; mehrere Regeln auf dieselbe Datei würden alle
   Gewichte gleich dick zeichnen.

   Achtung: Die Standardinstanz der Datei ist „Thin" (100). Wo kein Gewicht
   gesetzt ist, gilt das Gewicht des Elements (body 400) — nie die
   Standardinstanz. Neu erzeugen mit pyftsubset (Befehl in README).
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-var.woff2') format('woff2-variations'),
       url('../fonts/outfit-var.woff2') format('woff2');
}

:root {
  /* ── Markenfarben: Vorschlag der Agentur, 27.10.2026 (siehe Kopf) ── */
  --dunkelblau: #0d2a6d;
  --hellblau:   #3f7bf3;
  --lightgrau:  #f3f5f9;
  --text:       #1d2435;

  /* ── Abgeleitet (Herleitung und Kontraste siehe Kopf) ── */
  --hellblau-text: #2e69e1;   /* nur dort, wo Hellblau Text trägt oder Text ist */
  --dunkelblau-tief: #0a2052; /* Hover auf dunkelblauen Flächen */

  /* ── Rollen ── */
  --grund:      #ffffff;          /* Seitenhintergrund */
  --grund-grau: var(--lightgrau); /* abgesetzte Bänder */
  --grund-tief: var(--dunkelblau);/* dunkle Bänder */

  --ink:        var(--text);      /* Überschriften, Fließtext */
  --ink-ruhig:  #404a64;          /* zweite Ebene */
  --ink-leise:  #5c6884;          /* Bildunterschriften, Fußzeile, Bedienränder */
  --auf-dunkel: var(--lightgrau); /* Schrift auf dunkelblauem Grund */
  --auf-dunkel-leise: #c4d0e9;    /* zweite Ebene auf dunkelblauem Grund */

  --linie:      #dbdee6;          /* Trennlinien */
  --rand:       #848a9a;          /* dekorative Kanten */

  --akzent:      var(--dunkelblau);      /* Verweise, Hauptknopf */
  --akzent-tief: var(--dunkelblau-tief); /* dessen Hover */
  --auf-akzent:  #ffffff;
  --akzent-hell: var(--hellblau);        /* Kanten, Symbole, Balken, Hover */

  /* ── Schrift: Outfit für alles (Auftraggeber, 27.10.2026) ── */
  --schrift-titel: 'Outfit', 'Segoe UI', Arial, sans-serif;
  --schrift-text:  'Outfit', 'Segoe UI', Arial, sans-serif;
  --gewicht-titel: 700;   /* Überschriften: Outfit Bold */
  --gewicht-ui:    500;   /* Navigation, kleine Bedienelemente */
  --gewicht-knopf: 700;

  /* Fließende Größen: kein Sprung an einer Breakpoint-Kante.
     clamp(min, bevorzugt, max) — min gilt am Handy, max ab Desktop. */
  --t-xs:   0.8125rem;
  --t-s:    0.9375rem;
  --t-m:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-l:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-2xl:  clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  --t-3xl:  clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  --zeile-eng:  1.15;
  --zeile:      1.6;

  /* ── Abstände ── */
  --a-1: 0.25rem;
  --a-2: 0.5rem;
  --a-3: 0.75rem;
  --a-4: 1rem;
  --a-5: 1.5rem;
  --a-6: 2rem;
  --a-7: 3rem;
  --a-8: 4rem;
  --a-9: 6rem;
  --band: clamp(3rem, 2rem + 5vw, 6rem);   /* senkrechter Abstand je Abschnitt */

  /* ── Maße ── */
  --breite:      1200px;   /* Inhaltsbreite */
  --breite-text:  68ch;    /* Lesebreite für Fließtext */
  --rundung:     10px;
  --rundung-s:    6px;
  --kopf-hoehe:  72px;

  /* ── Schatten: aus dem Dunkelblau, nicht aus Neutralgrau ── */
  --schatten-1: 0 1px 2px rgba(13, 42, 109, 0.07), 0 2px 8px rgba(13, 42, 109, 0.06);
  --schatten-2: 0 2px 6px rgba(13, 42, 109, 0.10), 0 12px 28px rgba(13, 42, 109, 0.11);

  /* ── Bewegung ── */
  --dauer:  .24s;
  --kurve:  cubic-bezier(.2, .7, .3, 1);
}

/* Kein dunkles Thema: dafür wurde keine Palette geliefert, und eine zu
   erfinden hieße, Farben zu setzen, die niemand abgenommen hat. */
:root { color-scheme: light; }