:root{
  /* Primitive: Neutral — markenunabhängig, gilt für alle PRO-Marken */
  --neutral-0:#FFFFFF;
  --neutral-100:#EEEFF0;
  --neutral-300:#CCCCCC;
  --neutral-600:#505456;
  --neutral-900:#24282A;

  /* ------------------------------------------------------------------
     Markenkanal — die EINZIGE Stelle, die pro Marke getauscht wird.
     Zwei Werte, weil eine Markenfarbe fast nie beides kann:
       --brand-graphic  Icons, Linien, Flächen ohne Text (≥3:1 auf Weiß)
       --brand-ink      Text, Links, Outlines           (≥4.5:1 auf Weiß)
     Standard ist der neutrale Dachwert „PRO Blau"; eine konkrete Marke
     wird über [data-brand="…"] am <html>- oder Container-Element gesetzt.
     ------------------------------------------------------------------ */
  --brand-graphic:#2E8FC4;
  --brand-ink:#1B5C82;

  /* Semantische Rollen — Komponenten benutzen ausschließlich diese */
  --surface:var(--neutral-0);
  --surface-muted:var(--neutral-100);
  --surface-inverse:var(--neutral-600);

  --text:#4A4A4A;
  --text-strong:var(--neutral-900);
  --text-inverse:var(--neutral-0);
  --text-muted:var(--neutral-600);

  --border:var(--neutral-300);

  --accent:var(--brand-ink);
  --accent-graphic:var(--brand-graphic);
}

/* Marken-Themes. Als Attribut-Selektor, damit sie auch auf einem einzelnen
   Container gelten (Marken-Vergleich, Co-Branding-Abschnitt).
   Wichtig: die semantischen Rollen müssen hier erneut deklariert werden —
   var() wird an der Deklarationsstelle aufgelöst, ein späteres Überschreiben
   von --brand-* auf einem Nachfahren erreicht das :root-Alias sonst nicht. */
[data-brand]{--accent:var(--brand-ink);--accent-graphic:var(--brand-graphic)}
[data-brand="pro"]{--brand-graphic:#2E8FC4;--brand-ink:#1B5C82}
[data-brand="einsatz"]{--brand-graphic:#65B32E;--brand-ink:#427718}
[data-brand="keimfrei"]{--brand-graphic:#14A0A0;--brand-ink:#0B6B6B}

/* Reserveplätze für die noch nicht gesetzten PRO-Marken — Hue frei wählbar,
   die beiden Kontraststufen bleiben Pflicht. Umbenennen, sobald die Marke steht. */
[data-brand="reserve-signal"]{--brand-graphic:#E08A1E;--brand-ink:#8A5200}
[data-brand="reserve-violett"]{--brand-graphic:#7B62D3;--brand-ink:#4C3A9E}