/* ============================================================================
   aemter.info — Farbsystem

   Anspruch: die Seite soll wirken wie ein **öffentliches Auskunftsangebot** —
   sachlich, ruhig, verlässlich. Also die Anmutung eines Verwaltungsportals,
   ohne eines zu sein.

   ⚠️ Bewusst NICHT übernommen: Bundesadler-Anmutung, Schwarz-Rot-Gold als
   Gestaltungsmittel, Wappen, Siegel oder ein Blau, das ein konkretes Landes-
   portal nachahmt. Wir sind ein privates Informationsangebot. Eine Gestaltung,
   die Amtlichkeit vortäuscht, wäre irreführend — deshalb steht im Kopf und im
   Fuß ausdrücklich, dass dies kein Amt ist.

   Regeln, an die sich alle Bausteine halten:
   1. **Zwei Farben mit getrennten Aufgaben.** Blau trägt Navigation, Links und
      Struktur. Gold setzt Akzente: Hervorhebung, Fristen, aktive Marken. Keine
      dritte Markenfarbe, keine Verläufe, keine Schlagschatten.
   2. **Statusfarben nur für Zustände** — geöffnet, geschlossen, eingeschränkt.
      Nie als Dekoration, nie für Überschriften oder Rahmen.
   3. **Farbe ist nie alleiniger Bedeutungsträger.** Jeder farbige Zustand
      trägt zusätzlich Text und ein Formzeichen (Punkt, Kante). Das hilft bei
      Farbsehschwäche und im Ausdruck.
   4. **Kontrast vor Eleganz.** Fließtext und Bedienelemente erreichen
      mindestens 4,5:1 gegen ihren Untergrund, große Schrift 3:1.
   ========================================================================= */

:root{
  /* ---- Grundton: institutionelles Blau ---------------------------------
     Tiefer und kühler als ein Marken-Blau. Verwaltungsnah, nicht werblich.
     Kontrast auf Weiß: 7,9:1 — auch für kleine Schrift ausreichend.        */
  --ae-blau:#0f4a7a;
  --ae-blau-dunkel:#0a3557;      /* Kopfkante, Hover, gedrückte Zustände   */
  --ae-blau-hell:#e7eef5;        /* Chips, Marker, hervorgehobene Zeile    */
  --ae-blau-rand:#c3d4e4;        /* Kante auf blau-hellen Flächen          */

  /* ---- Akzent: Gold -----------------------------------------------------
     ⚠️ Gold ist eine **Flächen- und Zierfarbe, keine Textfarbe.** Auf Weiß
     erreicht #F7AC12 nur 1,93:1 - für Fließtext ist das unbrauchbar, die
     Vorgabe liegt bei 4,5:1. Wo Gold als Schrift auftritt, steht deshalb der
     abgedunkelte Verwandte `--ae-gold-text` (5,5:1 auf Weiß, 5,2:1 auf
     Papier). Derselbe Farbwinkel, nur dunkler - es wirkt wie eine Farbe.

     Auf dem dunklen Blau des Kopfes erreicht das helle Gold dagegen 4,8:1 und
     darf dort auch Text tragen.                                           */
  --ae-gold:#f7ac12;             /* Flächen, Balken, Marken, Akzent auf Blau */
  --ae-gold-text:#8c6004;        /* wenn Gold schreiben muss: 5,5:1 auf Weiß */
  --ae-gold-hell:#fef3d8;        /* hinterlegte Hervorhebung                 */
  --ae-gold-rand:#e8c98a;        /* Kante auf goldhellen Flächen             */

  /* ---- Schrift und Flächen --------------------------------------------- */
  --ae-tinte:#101c28;            /* Überschriften, 16,4:1                  */
  --ae-text:#1d2a36;             /* Fließtext, 13,3:1                      */
  --ae-grau:#576470;             /* Nebenangaben, Quellen, 6,4:1           */
  --ae-linie:#d7dee6;            /* Trennlinien, Rahmen                    */
  --ae-papier:#f4f7fa;           /* ruhige Flächen, Fuß, Kacheln           */
  --ae-weiss:#ffffff;

  /* ---- Zustände ---------------------------------------------------------
     Entsättigt: Information, kein Alarm. Jeweils Text- und Flächenton.

     ⚠️ Die frühere Warnfarbe (ein Ocker, #7a5600) ist entfallen. Sie lag zu
     nah am neuen Gold, und eine Farbe darf nur eine Aufgabe haben: Sonst
     bedeutet derselbe Ton einmal "Achtung" und einmal "hier schauen". Fristen
     tragen jetzt Gold - sie sind ein Hinweis, keine Störung. Was wirklich
     schiefgeht, nutzt das Rot der Zustandsfarbe.                          */
  --ae-offen:#11663f;            /* geöffnet, 5,9:1 auf hellgrün           */
  --ae-offen-hell:#e4f1ea;
  --ae-zu:#8f2b39;               /* geschlossen, 6,8:1 auf hellrot         */
  --ae-zu-hell:#f9eaec;
  --ae-warn:var(--ae-gold-text); /* Einschränkung und Frist - siehe oben   */
  --ae-warn-hell:var(--ae-gold-hell);
  --ae-warn-rand:var(--ae-gold-rand);

  /* ---- Form -------------------------------------------------------------
     Kleiner Radius, keine Schatten: gedruckte Formulare als Vorbild,
     nicht Karten-Interfaces.                                               */
  --ae-radius:6px;
  --ae-radius-gross:8px;
}