/* ============================================================
   MARKEN-TOKENS — Web Werkstube
   >>> Diese Datei ersetzt brand.css aus dem robschman Design System.
   >>> Gleiche Variablennamen, andere Werte. Alles andere
   >>> (base-colors.css, typography.css, spacing.css) bleibt unverändert.
   Stand: 20.08.2026 — Schrift Archivo Black, Reihenfolge Lila > Messing > Azur
   ============================================================ */
:root {
  /* ---- Marken-Schrift (Display / Signatur) ----
     Archivo Black = Markenname, H1/H2, Sektionstitel, Zahlen, Preise, Badges.
     ACHTUNG: Archivo Black gibt es nur in EINEM Gewicht (400). Niemals
     font-weight 700 oder 900 setzen — der Browser rechnet sonst kuenstliches
     Fett dazu und die Buchstaben verschmieren.
     Fließtext bleibt Montserrat (steht in typography.css, markenuebergreifend). */
  --font-display: 'Archivo Black', -apple-system, 'Segoe UI', sans-serif;
  --fw-display: 400;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- PRIMÄRER AKZENT = INTERAKTION. Lila heißt anklickbar. ----
     Hinweis: Anders als beim Grün von robschman wird hier beim Hover
     AUFGEHELLT statt abgedunkelt. Lila ist von Natur aus dunkler als Grün —
     abdunkeln würde unter die Lesbarkeitsgrenze fallen. */
  --violet-500:  #A78BFA;  /*  7,23:1 auf --bg — überall zulässig */
  --violet-400:  #B9A3FC;  /*  9,10:1 — Hover (heller) */
  --violet-600:  #9575F8;  /*  5,79:1 — Press */
  --violet-tint: rgba(167,139,250,0.12);
  --on-violet:   #0B0B0B;  /*  7,23:1 — Weiß NIE auf Lila (2,50:1) */

  /* ---- SEKUNDÄR: Messing. Ganze Sektionen und Hervorhebungen. ----
     NIE für Knöpfe verwenden — sonst nicht mehr von der Warnfarbe
     #F5A524 unterscheidbar (fast gleicher Farbton und gleiche Helligkeit). */
  --messing-500: #D9A441;  /*  8,75:1 auf --bg — Flächen UND Text zulässig */
  --messing-600: #C08F2E;  /*  6,76:1 — Rahmen, Hover auf Flächen */
  --messing-tint: rgba(217,164,65,0.10);
  --on-messing:  #1A1206;  /*  8,75:1 — Weiß NIE auf Messing (2,06:1) */

  /* ---- AKZENT: Azur. Nur kleine Tupfer: Badges, Symbole, Marker. ---- */
  --azur-400:    #60A5FA;  /*  7,74:1 — Badge-Text, kleine Marker */
  --azur-500:    #2D8CF0;  /*  5,74:1 — nur Flächen und Rahmen, nie Kleintext */
  --azur-tint:   rgba(96,165,250,0.12);
  --on-azur:     #06182E;

  /* ---- WARNUNG (unverändert aus dem Grundsystem) ---- */
  --warn-500:    #F5A524;  /*  9,64:1 auf --bg */
  --warn-tint:   rgba(245,165,36,0.12);

  /* ============ SEMANTISCHE ALIASE (MARKE) ============ */
  --accent:        var(--violet-500);
  --accent-hover:  var(--violet-400);
  --accent-active: var(--violet-600);
  --accent-tint:   var(--violet-tint);
  --on-accent:     var(--on-violet);
  --accent-text:   var(--violet-500); /* klein & groß gleich — 7,23:1 */

  --secondary:     var(--messing-500);
  --secondary-tint: var(--messing-tint);
  --marker:        var(--azur-400);
  --marker-tint:   var(--azur-tint);

  --terra:         var(--messing-500); /* Kompatibilität zum Grundsystem */
  --warn:          var(--warn-500);
  --focus-ring:    var(--violet-500);

  /* Marken-Glow: einziger farbiger Schatten, nur Primary-CTA Hover */
  --shadow-accent: 0 6px 24px rgba(167,139,250,0.22);
}

/* ---- MESSING-SEKTION — SPARSAM EINSETZEN ----
   >>> STANDARD ist NICHT diese gefuellte Flaeche, sondern der dezente
   >>> Block: dunkler Hintergrund, 3px Messing-Balken links, Ueberschrift
   >>> und Zahlen in Messing. Siehe .messing-block weiter unten.
   >>>
   >>> Diese gefuellte Variante nur fuer HOECHSTENS EINE Sektion pro Seite,
   >>> z.B. ein zeitlich begrenztes Angebot. Sonst zieht Gelb den Blick
   >>> staerker an als der lila Knopf — dann fuehrt nicht mehr Lila.
   Achtung, anders als die Terracotta-Sektion bei robschman:
   Auf Messing ist WEISS unlesbar (2,06:1). Deshalb kippt hier alles
   auf DUNKLE Schrift. */
.theme-messing {
  --bg:            var(--messing-500);
  --bg-raised:     var(--messing-500);
  --surface:       rgba(0,0,0,0.08);
  --surface-hover: rgba(0,0,0,0.14);
  --line:          rgba(26,18,6,0.28);
  --line-strong:   rgba(26,18,6,0.55);
  --text:          var(--on-messing);
  --text-muted:    rgba(26,18,6,0.72);
  --text-soft:     rgba(26,18,6,0.84);
  --accent:        var(--on-messing);
  --accent-hover:  #000000;
  --accent-active: #2B1E0A;
  --accent-text:   var(--on-messing);
  --on-accent:     var(--messing-500);
  --focus-ring:    var(--on-messing);
  --shadow-accent: none;
  background: var(--bg);
  color: var(--text);
}

/* ---- MESSING DEZENT — das ist der Standard fuer hervorgehobene Bloecke ----
   Messing setzt nur einen warmen Akzent, der Hintergrund bleibt dunkel.
   Lila bleibt dadurch die Farbe, die fuehrt. */
.messing-block {
  background: var(--messing-tint);              /* rgba(217,164,65,0.10) */
  border: 1px solid rgba(217,164,65,0.26);
  border-left: 3px solid var(--messing-500);
  border-radius: 14px;
}
.messing-block .titel,
.messing-block .zahl {
  color: var(--messing-500);                    /* 8,75:1 — auch als Text zulaessig */
  font-family: var(--font-display);
}