/* ══════════════════════════════════════════════════════════════════════════
   Younes — Gestaltungstoken

   Stand 11.09.2026: Schrift und Farben nach Kundenvorgabe eingesetzt.
   Die drei Markenfarben und die Textfarbe stehen unverändert so da, wie sie
   geliefert wurden. Alles Weitere ist daraus abgeleitet — gleicher Farbton,
   gleiche Sättigung, nur andere Helligkeit — und unten nachgerechnet.

   | Rolle        | Wert     | Herkunft                      |
   |--------------|----------|-------------------------------|
   | Headline     | Blauer Nue Bold (Kunde, OTF → woff2)     |
   | Fließtext    | Blauer Nue Regular                       |
   | Textfarbe    | #20313b  | Kundenvorgabe (heller Grund)  |
   | Dunkelblau   | #0a4472  | Kundenvorgabe                 |
   | Hellblau     | #308ecb  | Kundenvorgabe                 |
   | Lightgrau    | #f6f6f6  | Kundenvorgabe                 |

   ── Kontraste, gerechnet (WCAG 2.2: Text 4,5:1 · große Schrift und
      Bedienränder 3:1). Geprüft gegen alle vier möglichen Gründe: ───────────

   | Vordergrund          | auf Weiß | auf Lightgrau | auf Dunkelblau | auf Hellblau |
   |----------------------|----------|---------------|----------------|--------------|
   | Text      #20313b    |  13,43   |    12,43      |      1,33 ✗    |    3,75 ~    |
   | Dunkelblau #0a4472   |  10,08   |     9,33      |      1,00 ✗    |    2,81 ✗    |
   | Hellblau  #308ecb    |   3,59 ~ |     3,32 ~    |      2,81 ✗    |    1,00 ✗    |
   | Lightgrau #f6f6f6    |   1,08 ✗ |     1,00 ✗    |      9,33      |    3,32 ~    |
   | Weiß      #ffffff    |   1,00 ✗ |     1,08 ✗    |     10,08      |    3,59 ~    |

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

   ── WICHTIG: Hellblau #308ecb kann keinen Fließtext tragen ─────────────────
   Weder Weiß (3,59:1) noch die Textfarbe (3,75:1) erreichen darauf die 4,5:1.
   Hellblau ist deshalb hier die Farbe für FLÄCHEN OHNE KLEINSCHRIFT: Kanten,
   Symbole, Trennbalken, Hover-Zustände, große Auszeichnungen. Für alles, wo
   Hellblau Text tragen oder selbst Text sein muss, gibt es --hellblau-text:
   dasselbe Blau (Farbton 203,6°, Sättigung 61,8 %), nur um acht Prozentpunkte
   dunkler — #2877aa, 4,87:1 gegen Weiß und 4,51:1 gegen Lightgrau.
   Der Knopf in Hellblau nutzt diesen Wert; das gelieferte #308ecb bleibt
   unangetastet und wird für alles Flächige verwendet.

   ── Abgeleitete Stufen, ebenfalls gerechnet ────────────────────────────────

   | Token                 | Wert     | auf Weiß | auf Lightgrau |
   |-----------------------|----------|----------|---------------|
   | --ink        (= Text) | #20313b  |  13,43   |    12,43      |
   | --ink-ruhig           | #395769  |   7,66   |     7,09      |
   | --ink-leise           | #4b738a  |   5,10   |     4,72      |
   | --hellblau-text       | #2877aa  |   4,87   |     4,51      |
   | --rand                | #82919d  |   3,25   |     3,01      |
   | --linie               | #dbe0e4  |   1,33   |     1,23      |  reine Trennlinie

   | Auf Dunkelblau #0a4472        | Wert     | Verhältnis |
   |-------------------------------|----------|------------|
   | --auf-dunkel   (= Lightgrau)  | #f6f6f6  |    9,33    |
   | --auf-dunkel-leise            | #bcd0e0  |    6,36    |
   | --akzent-tief (Hover, weiß)   | #08365b  |   12,43    |
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Blauer Nue ────────────────────────────────────────────────────────────
   Die drei OTF-Schnitte tragen intern JEWEILS EINEN EIGENEN Familiennamen
   ("Blauer Nue", "Blauer Nue Medium", "Blauer Nue Bold"). Ohne @font-face
   fände `font-weight: 700` deshalb nichts — hier werden sie unter dem einen
   Namen "Blauer Nue" mit echten Gewichten zusammengefasst.

   Die OTF-Originale bleiben als zweite Quelle stehen: fehlt einmal die
   woff2-Fassung, lädt der Browser das Original und die Seite sieht trotzdem
   richtig aus. Geliefert wurde die ganze Familie (18 Schnitte); eingebunden
   sind nur die drei, die die Seite benutzt — jeder weitere kostet Ladezeit.

   Bekannte Lücke: das große ẞ fehlt in allen Schnitten. Kommt es in einem
   Text vor, ersetzt der Browser es aus der Rückfallschrift. „SS" schreiben
   oder die Stelle meiden.
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Blauer Nue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/blauernue-regular.woff2') format('woff2'),
       url('../fonts/BlauerNue-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Blauer Nue';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/blauernue-medium.woff2') format('woff2'),
       url('../fonts/BlauerNue-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Blauer Nue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/blauernue-bold.woff2') format('woff2'),
       url('../fonts/BlauerNue-Bold.otf') format('opentype');
}

/* ── Inter — Fließtext (Auftraggeber, 14.09.2026) ──────────────────────────
   Überschriften bleiben Blauer Nue Bold (Kundenvorgabe vom 11.09.), der
   LAUFENDE TEXT steht ab jetzt in Inter Regular.

   Es ist eine Variable Font: eine Datei mit dem Gewichtsbereich 100–900,
   Standard 400. Deshalb EINE @font-face-Regel mit `font-weight: 300 700`
   statt mehrerer mit festen Werten — mehrere Regeln auf dieselbe Datei
   würden alle Gewichte gleich dick rendern.

   Warum die beiden Schriften nebeneinander funktionieren: Blauer Nue ist
   eine geometrische Grotesk mit auffälligen Rundungen, Inter eine neutrale
   Lesegrotesk mit großer x-Höhe. Der Unterschied ist groß genug, dass es
   nach Absicht aussieht, und Inter bleibt in kleinen Graden länger lesbar.

   Zu beachten: Inters x-Höhe ist größer als die von Blauer Nue, derselbe
   Zahlenwert in `font-size` wirkt dadurch etwas größer. Die Stufen --t-*
   sind deshalb NICHT verändert worden — im Screenshot trägt der Fließtext
   in dieser Größe gut, und ein Nachjustieren ohne Anlass hätte alle
   Abstände mitverschoben. Wer es doch ändert: nur --t-m und --t-l anfassen,
   die Überschriften stehen weiter in Blauer Nue.
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

:root {
  /* ── Markenfarben: Kundenvorgabe, unverändert ── */
  --dunkelblau: #0a4472;
  --hellblau:   #308ecb;
  --lightgrau:  #f6f6f6;
  --text:       #20313b;

  /* ── Abgeleitet (Herleitung und Kontraste siehe Kopf) ── */
  --hellblau-text: #2877aa;   /* nur dort, wo Hellblau Text trägt oder Text ist */
  --dunkelblau-tief: #08365b; /* 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:  #395769;          /* zweite Ebene */
  --ink-leise:  #4b738a;          /* Bildunterschriften, Fußzeile, Bedienränder */
  --auf-dunkel: var(--lightgrau); /* Schrift auf dunkelblauem Grund */
  --auf-dunkel-leise: #bcd0e0;    /* zweite Ebene auf dunkelblauem Grund */

  --linie:      #dbe0e4;          /* Trennlinien */
  --rand:       #82919d;          /* 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 ── */
  --schrift-titel: 'Blauer Nue', 'Segoe UI', Arial, sans-serif;
  /* Fließtext: Inter Regular. Blauer Nue bleibt als zweite Stufe stehen,
     falls Inter einmal nicht lädt — dann sieht die Seite immer noch nach
     sich selbst aus statt nach Systemschrift. */
  --schrift-text:  'Inter', 'Blauer Nue', 'Segoe UI', Arial, sans-serif;
  --gewicht-titel: 700;   /* Headline = Blauer Nue Bold, Kundenvorgabe */
  --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(10, 68, 114, 0.07), 0 2px 8px rgba(10, 68, 114, 0.06);
  --schatten-2: 0 2px 6px rgba(10, 68, 114, 0.10), 0 12px 28px rgba(10, 68, 114, 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; }