/* > **Gepflegt von:** `frag-anna-website`
   Erzeugt von `npm run gestaltung` aus `stil/tokens.css`. Stand: siehe gestaltung-manifest.json.
   Nicht von Hand ändern: Änderungen hier gehen beim nächsten Lauf verloren.
   Gehört etwas hinein, schreib es in deine Abschlussmeldung.

   Die @font-face-Regel ist absichtlich nicht enthalten: Die Schrift liegt in eurer eigenen
   Markenquelle (marke/schrift/Lexend-Variable.woff2). Bindet sie selbst ein, Familienname
   »Lexend«, font-weight: 400 700. --schrift greift dann von allein. */

:root {
  --nacht: #0E2744;
  --nacht-tief: #0A1D33;
  --nacht-2: #1B3A5C;
  --gruen: #249A6C;
  --gruen-tief: #1C7D57;
  --gruen-hell: #2FBF86;
  --gruen-zart: #E7F3EC;
  /* Ein Ton je Fach. Sie sind kein zweites Farbsystem, sondern ein Erkennungszeichen: Sie tragen den Punkt
     am Umschalter, die Zeichnung auf der Karte und den Pfeil am Weiterlink — nie eine Fläche und nie den
     Fließtext. --zweig ist die Stelle, an der das jeweils aktive Fach seine Farbe einsetzt; ohne Fach
     bleibt es Grün. Gerechnet gegen --papier, die ungünstigere der beiden Flächen (der aktive Reiter liegt
     darauf): Grün 4,74 : 1, Ocker 5,51 : 1, Blau 5,40 : 1. Alle drei über AA, sie dürfen also auch einen
     Linktext tragen. Gegen Weiß sind es 5,10 / 5,93 / 5,81. */
  --fach-vermessung: #1C7D57;
  /* 26.09.2026: war Ocker #8A5A00 (Jonathan: »70er-Jahre-Feeling«). Jetzt das Orange-Rot, das das Formular des
     Brandschutz-Vorführbüros selbst trägt (akzentfarbe der App), damit Website und Produkt eine Farbe sprechen. */
  --fach-brandschutz: #B4410E;
  --fach-pruefung: #1F5FD1;
  --papier: #F6F7F4;
  /* Am Handy liegen die Abschnitte untereinander statt nebeneinander, und der Wechsel der Grundfläche ist
     das einzige Signal »neues Thema«. Weiß gegen --papier trägt dafür nicht: 1,075 : 1 gemessen, also
     praktisch kein Unterschied. Dieser Ton gibt 1,117 : 1 — immer noch ruhig, aber beim Scrollen erkennbar.
     Er gilt nur für die Abschnittsflächen (stil/basis.css), nicht für Kacheln, Etiketten und Knöpfe.

     Der Wert ist nach oben gedeckelt, und zwar durch --gruen-tief (#1C7D57), die Farbe der Eyebrows und
     der »weiter«-Verweise: Auf #F1F3EE hält sie 4,561 : 1 und damit AA, auf dem zuerst gewählten #EEF0EA
     nur noch 4,438 : 1. Ein dunklerer Grund ist also nicht möglich, ohne die Markenfarbe zu ändern. */
  --papier-handy: #F1F3EE;
  --weiss: #FFFFFF;
  --schiefer: #4A5A70;
  --linie: #E2E6EA;
  --linie-dunkel: rgba(255, 255, 255, .14);
  --warn: #B7791F;
  --fehler: #B42318;
  /* Zarte Hintergründe zu den beiden Signalfarben, als Gegenstück zu --gruen-zart. --warn-zart stand vorher
     dreimal als #FBF3E6 im Stil, also eine Farbe ohne Namen — genau das, was dieses Regelwerk verhindern soll.
     --fehler-zart fehlte ganz; die App-Werft musste sich mit Weiß und roter Linie behelfen (Meldung 19.09.2026). */
  --warn-zart: #FBF3E6;
  --fehler-zart: #FBEBE9;
  /* Text auf --warn-zart: --warn selbst schafft dort nur 3,1 : 1. Für Etiketten »fällig«, »pausiert« (App-Oberfläche,
     25.09.2026). Gegen --warn-zart 6,5 : 1, gegen Weiß 7,4 : 1. */
  --warn-tief: #7A4F0E;
  /* Ampel für Meldungen (KONZEPT-AMPEL-MELDUNGEN, A6, 26.09.2026). Farbe nie allein: immer mit Wort (Rot, Orange, Grün)
     und Form (Achteck, Dreieck, Kreis), damit es auch bei Rot-Grün-Schwäche und im Graustufendruck eindeutig ist.
     Kontraste gerechnet: Farbe auf Weiß und Weiß auf Farbe je 6,57 / 5,43 / 5,10 : 1; Tief auf Zart 7,72 / 6,99 / 5,76 : 1. */
  --ampel-rot: #B42318;
  --ampel-rot-tief: #8F1D14;
  --ampel-rot-zart: #FBEBE9;
  --ampel-orange: #B54708;
  --ampel-orange-tief: #8A3A06;
  --ampel-orange-zart: #FEF0E3;
  --ampel-gruen: #1C7D57;
  --ampel-gruen-tief: #176A4A;
  --ampel-gruen-zart: #E7F3EC;
  /* Neu bei ANNA, nur dafür (App L396, Uschi 29.09.2026): Kennzeichen für »neu bei ANNA, noch nicht entschieden«, kein Zustand und
     keine Hausfarbe. Kontraste nachgemessen: Weiß auf --neu 6,93 : 1, --neu-tief auf --neu-zart 9,41 : 1, --neu auf --neu-zart 6,03 : 1. */
  --neu: #6B3FB8;
  --neu-tief: #4B2885;
  --neu-zart: #F2EDFA;

  --gruen-druck: #176A4A;
  /* Druck-Zustand auf hellen Flächen. Für Grün gab es ihn, für den zweiten Knopf nicht: Dort wurde --papier
     genommen, weil nichts anderes da war. Ohne eigenen Wert wählt jede Werft ihren eigenen Grauton. */
  --papier-druck: #EAEDE7;
  --nacht-30: rgba(14, 39, 68, .3);
  --nacht-20: rgba(14, 39, 68, .2);
  --nacht-8: rgba(14, 39, 68, .08);
  --auf-dunkel-2: rgba(255, 255, 255, .74);

  --schrift: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Abstandsskala: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px; --a8: 64px; --a9: 96px;

  --breite: 1200px;
  --rand: clamp(20px, 5vw, 48px);
  --sektion: clamp(72px, 10vw, 128px);

  --r-8: 8px; --r-12: 12px; --r-20: 20px; --r-28: 28px;

  --schatten-1: 0 1px 2px rgba(14, 39, 68, .06), 0 1px 1px rgba(14, 39, 68, .04);
  --schatten-2: 0 12px 32px -12px rgba(14, 39, 68, .18), 0 2px 6px rgba(14, 39, 68, .06);
  --schatten-buehne: 0 40px 80px -30px rgba(14, 39, 68, .35);

  --kurve: cubic-bezier(.2, .7, .2, 1);
  --kopf-hoehe: 80px;
}

/* Jedes Element, das ein Fach vertritt, setzt --zweig für sich und seine Kinder. Das gilt seitenweit:
   Punkte unter dem Vorführfenster, Reiter über der Länderkarte, Karten der Zielgruppen-Weiche. */
[data-vorfuehr-reiter="vermessung"] { --zweig: var(--fach-vermessung); }
[data-vorfuehr-reiter="brandschutz"] { --zweig: var(--fach-brandschutz); }
[data-vorfuehr-reiter="pruefsachverstaendiger"] { --zweig: var(--fach-pruefung); }