/* ==========================================================================
   Design-Tokens - Objektportal HYPA

   Abnahmekriterium 12: "Frontend und Backend verwenden dieselben
   CSS-Variablen; es gibt keinen Hex-Wert ausserhalb der Token-Datei."

   Das ist die Token-Datei. Steht anderswo im Projekt ein Hex-Wert, ist das
   ein Fehler und gehoert hierher verschoben.

   HERKUNFT DER WERTE
   Die Farben sind am 21. August 2026 aus dem ausgelieferten Stylesheet von
   hypa.de ausgelesen worden, nicht geschaetzt. Die Website laeuft auf
   WordPress mit dem Avada-Theme; die Werte unten sind dessen globale Palette
   (--awb-color1 bis --awb-color5).

   Die plan.md nennt in Abschnitt 10 abweichende Werte. Die waren aus einem
   Screenshot geschaetzt und sind damit ueberholt:

     Plan (geschaetzt)      tatsaechlich auf hypa.de
     #E30613  Rot           #E20A17
     #C00511  Rot dunkel    #AC0C17
     #262626  Anthrazit     #1D1A1A  (Kopf und Fuss)
     #F5F5F5  Flaeche       #F2F3F5

   Der Plan nennt als Schrift die Vermutung "Oswald oder eine sehr aehnliche
   Schrift". Tatsaechlich benutzt hypa.de:
     Ueberschriften  Barlow Semi Condensed, Schnitt 500, Versalien
     Fliesstext      Noto Sans, Schnitt 400
     Buttons         Barlow, Versalien, ohne Rundung

   Beide Schriften stehen unter der SIL Open Font License. Selbst-Hosten ist
   damit ausdruecklich erlaubt, die offene Lizenzfrage aus Abschnitt 10 ist
   beantwortet.
   ========================================================================== */

:root {
  /* --- Marke ------------------------------------------------------------ */
  --hypa-rot: #e20a17;
  --hypa-rot-dunkel: #ac0c17;
  --hypa-anthrazit: #1d1a1a;
  --hypa-anthrazit-hell: #2d2c2c;

  /* --- Text ------------------------------------------------------------- */
  --hypa-text: #1d1a1a;
  --hypa-text-hell: #6b6b6b;
  --hypa-text-invers: #ffffff;

  /* --- Flaechen --------------------------------------------------------- */
  --hypa-flaeche: #f2f3f5;
  --hypa-flaeche-karte: #ffffff;
  --hypa-flaeche-gedaempft: #e9eaee;
  --hypa-linie: #d7d8dc;
  --hypa-linie-kraeftig: #b9bac0;

  /* --- Typ-Kennzeichnung der Aushaenge ----------------------------------
     Plan Abschnitt 10, "Die Rot-Kollision und ihre Loesung":
     Das Markenrot ist zugleich das Alarm-Rot. Geloest ueber die Formsprache,
     nicht ueber eine Ausweichfarbe - Buttons bekommen rote Flaeche,
     Stoerungen roten Kantenbalken. Die Farbwerte sind deshalb bewusst
     dieselben.
     ---------------------------------------------------------------------- */
  --typ-stoerung: var(--hypa-rot);
  --typ-info: var(--hypa-anthrazit);
  /* Das gedeckte Gruen ist die einzige bewusst zugelassene Fremdfarbe.
     hypa.de fuehrt #65bc7b, das ist als Textfarbe auf Weiss zu hell
     (Kontrast 2,3:1). Abgedunkelt auf denselben Farbton mit 4,8:1. */
  --typ-gruss: #2e7d46;

  /* --- Zustandsfarben fuer das Backend ---------------------------------- */
  --status-neu: var(--hypa-rot);
  --status-arbeit: #b06a00;
  --status-erledigt: var(--typ-gruss);
  --status-abgelehnt: var(--hypa-text-hell);

  /* --- Schrift ---------------------------------------------------------- */
  --schrift-ueberschrift: 'Barlow Semi Condensed', 'Barlow', 'Arial Narrow',
    system-ui, sans-serif;
  --schrift-text: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Arial,
    sans-serif;
  --schrift-button: 'Barlow', 'Barlow Semi Condensed', system-ui, sans-serif;

  --schrift-gewicht-ueberschrift: 500;
  --schrift-gewicht-text: 400;
  --schrift-gewicht-betont: 600;

  /* Sperrung der Versalien, wie auf hypa.de */
  --sperrung-h1: 0.01em;
  --sperrung-h2: 0.02em;
  --sperrung-h3: 0.045em;
  --sperrung-button: 0.05em;

  /* --- Schriftgroessen -------------------------------------------------
     Plan Abschnitt 4.0: "mindestens 16 px Schrift". Das ist hier der
     kleinste Wert fuer Fliesstext, nicht der Zielwert.
     -------------------------------------------------------------------- */
  --groesse-klein: 0.9375rem; /* 15px - nur Zeitstempel und Nebensaechliches */
  --groesse-text: 1rem; /* 16px */
  --groesse-gross: 1.125rem; /* 18px - Aushangstexte, Buttons */
  --groesse-h4: 1.25rem;
  --groesse-h3: 1.5rem;
  --groesse-h2: 1.875rem;
  --groesse-h1: 2.25rem;

  --zeilenhoehe-text: 1.6;
  --zeilenhoehe-eng: 1.25;

  /* --- Abstaende -------------------------------------------------------- */
  --abstand-xs: 0.25rem;
  --abstand-s: 0.5rem;
  --abstand-m: 1rem;
  --abstand-l: 1.5rem;
  --abstand-xl: 2rem;
  --abstand-xxl: 3rem;

  /* --- Kanten ----------------------------------------------------------
     Plan Abschnitt 10: "keine runden Ecken, keine Verlaeufe, keine
     Schatten-Spielereien". Der Wert steht als Variable da, damit die
     Entscheidung sichtbar ist und nicht als Weglassen untergeht.
     -------------------------------------------------------------------- */
  --kante-radius: 0;
  --kante-balken: 6px; /* Breite des Typ-Kantenbalkens an der Aushangskarte */
  --kante-linie: 1px;

  /* --- Masse ------------------------------------------------------------ */
  --breite-inhalt: 68rem;
  --breite-schmal: 34rem;
  --breite-vorschau-handy: 390px;
  --hoehe-objektkopf: 20rem;
  --hoehe-objektkopf-klein: 13rem;
  /* Logohöhe im Kopfbereich. Die Bilddatei ist 137 px hoch, bei 3,5 rem
     bleibt also genug Reserve für Bildschirme mit doppelter Auflösung. */
  --hoehe-logo: 3.5rem;
  --hoehe-logo-klein: 2.75rem;
  /* Mindestgroesse fuer alles Anklickbare. Plan Abschnitt 4.0: "Grosse
     Klickflaechen" - jemand bedient das mit dem Daumen im Treppenhaus. */
  --klickflaeche-min: 44px;

  /* --- Fokus ------------------------------------------------------------
     Sichtbar und kraeftig. Wer mit der Tastatur bedient, muss jederzeit
     sehen, wo er steht.
     -------------------------------------------------------------------- */
  --fokus-farbe: var(--hypa-rot);
  --fokus-breite: 3px;
  --fokus-abstand: 2px;
}