/* =====================================================================
   BRAND-TOKENS  –  Hier das eigene Farb- und Schriftkonzept eintragen.
   Alle Farben der Website leiten sich aus diesen Variablen ab.
   Das Vorbild (Tripletta) arbeitet mit genau ZWEI Farben:
   einer dunklen Grundfarbe und einer hellen Akzentfarbe, die sich
   abschnittsweise abwechseln. Dieses Prinzip ist hier übernommen.
   ===================================================================== */
:root {
  /* --- Markenfarben potzblitz (aus dem Logo) --- */
  --brand-dark:   #161b22;   /* potzblitz Anthrazit (Logo-Kachel) */
  --brand-light:  #fafaf5;   /* potzblitz Off-White (Logo-Hintergrund) */
  --brand-pop:    #ffd21e;   /* potzblitz Gelb (Blitz) – Buttons, Badges, Akzente */

  /* Abgeleitete Töne – in der Regel nicht anfassen */
  --brand-dark-soft:  color-mix(in srgb, var(--brand-dark) 88%, var(--brand-light));
  --brand-light-soft: color-mix(in srgb, var(--brand-light) 88%, var(--brand-dark));
  --brand-line-on-dark:  color-mix(in srgb, var(--brand-light) 25%, transparent);
  --brand-line-on-light: color-mix(in srgb, var(--brand-dark) 18%, transparent);

  /* --- Schriften --- */
  --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Formen --- */
  --radius-card: 20px;
  --radius-pill: 999px;
}