/*
 * Selektor muss Elementors Kit-CSS schlagen.
 * Elementor schreibt seine Globals als `.elementor-kit-XX { --e-global-...: # }`
 * — Klassen-Selektor (0,1,0) > :root (0,0,1). Wir matchen jede Kit-Klasse.
 *
 * `tmp`-Annotation = Mapping noch nicht final mit Design abgestimmt.
 */
:root,
[class*="elementor-kit-"] {

  /* ═════════════════════════════════════════════════════════
   *  FRONTEND — System Globals (Site Settings)
   * ═════════════════════════════════════════════════════════ */

  /* ───── System Colors ─────────────────────────────────── */
  --e-global-color-primary:   var(--color-brand-primary);   /* tmp */
  --e-global-color-secondary: var(--color-brand-secondary); /* tmp */
  --e-global-color-text:      var(--color-text-default);    /* tmp */
  --e-global-color-accent:    var(--color-brand-accent);    /* tmp */
  --e-global-color-danger:    var(--color-feedback-danger); /* tmp */

  /* ───── Custom Kit Colors (Kit-7) → bestehende Tokens ── */
  --e-global-color-2b44ab1: var(--color-brand-inway);             
  --e-global-color-17e0211: var(--c-teal-100);             /* tmp — cyan light */
  --e-global-color-7a03630: var(--color-brand-ok);  
  --e-global-color-98509a6: var(--c-green-100);            /* tmp — mint */
  --e-global-color-0c991c2: var(--color-text-default);     /* tmp — ink */
  --e-global-color-28c71a5: var(--c-neutral-600);          /* tmp — gray */
  --e-global-color-e7fdd78: var(--color-surface-muted);    /* tmp — gray light */

  /* ───── System Typography — Primary (Headlines) ───────── */
  --e-global-typography-primary-font-family:     var(--font-sans);    /* tmp */
  --e-global-typography-primary-font-weight:     var(--fw-semibold);  /* tmp */
  --e-global-typography-primary-font-size:       var(--fs-800);       /* tmp */
  --e-global-typography-primary-line-height:     1.2;                 /* tmp */
  --e-global-typography-primary-letter-spacing:  0;                   /* tmp */
  --e-global-typography-primary-font-style:      normal;              /* tmp */
  --e-global-typography-primary-text-transform:  none;                /* tmp */
  --e-global-typography-primary-text-decoration: none;                /* tmp */

  /* ───── System Typography — Secondary (Subheadlines) ──── */
  --e-global-typography-secondary-font-family:     var(--font-sans);  /* tmp */
  --e-global-typography-secondary-font-weight:     var(--fw-medium);  /* tmp */
  --e-global-typography-secondary-font-size:       var(--fs-600);     /* tmp */
  --e-global-typography-secondary-line-height:     1.3;               /* tmp */
  --e-global-typography-secondary-letter-spacing:  0;                 /* tmp */
  --e-global-typography-secondary-font-style:      normal;            /* tmp */
  --e-global-typography-secondary-text-transform:  none;              /* tmp */
  --e-global-typography-secondary-text-decoration: none;              /* tmp */

  /* ───── System Typography — Text (Body) ───────────────── */
  --e-global-typography-text-font-family:     var(--font-sans);   /* tmp */
  --e-global-typography-text-font-weight:     var(--fw-regular);  /* tmp */
  --e-global-typography-text-font-size:       var(--fs-300);      /* tmp */
  --e-global-typography-text-line-height:     1.5;                /* tmp */
  --e-global-typography-text-letter-spacing:  0;                  /* tmp */
  --e-global-typography-text-font-style:      normal;             /* tmp */
  --e-global-typography-text-text-transform:  none;               /* tmp */
  --e-global-typography-text-text-decoration: none;               /* tmp */

  /* ───── System Typography — Accent (Small / Captions) ─── */
  --e-global-typography-accent-font-family:     var(--font-sans); /* tmp */
  --e-global-typography-accent-font-weight:     var(--fw-medium); /* tmp */
  --e-global-typography-accent-font-size:       var(--fs-200);    /* tmp */
  --e-global-typography-accent-line-height:     1.4;              /* tmp */
  --e-global-typography-accent-letter-spacing:  0.02em;           /* tmp */
  --e-global-typography-accent-font-style:      normal;           /* tmp */
  --e-global-typography-accent-text-transform:  none;             /* tmp */
  --e-global-typography-accent-text-decoration: none;             /* tmp */

  /* ───── Buttons (frontend) ────────────────────────────── */
  --e-button-border-radius:      var(--radius-md);            /* tmp */
  --e-button-font-size:          var(--fs-300);               /* tmp */
  --e-button-font-weight:        var(--fw-semibold);          /* tmp */
  --e-button-line-height:        1.2;                         /* tmp */
  --e-button-padding-block:      var(--space-3);              /* tmp */
  --e-button-padding-inline:     var(--space-6);              /* tmp */
  --e-button-context-color:      var(--color-brand-primary);  /* tmp */
  --e-button-context-color-dark: var(--color-brand-accent);   /* tmp */
  --e-button-context-tint:       var(--c-teal-100);           /* tmp */

  /* ───── Border ────────────────────────────────────────── */
  --e-border-radius: var(--radius-md);                        /* tmp */


  /* ═════════════════════════════════════════════════════════
   *  EDITOR / ADMIN APP — alle --e-a-* Variablen
   *  Rebrand der Editor-UI auf Agenic-Tokens.
   * ═════════════════════════════════════════════════════════ */

  /* ───── Base ──────────────────────────────────────────── */
  --e-a-color-white:             var(--c-neutral-0);            /* tmp */
  --e-a-color-black:             var(--c-neutral-800);          /* tmp */
  --e-a-color-logo:              var(--c-neutral-0);            /* tmp */
  --e-a-color-circle-logo:       var(--c-neutral-800);          /* tmp */

  /* ───── Brand ─────────────────────────────────────────── */
  --e-a-color-primary:           var(--c-teal-100);             /* tmp */
  --e-a-color-primary-bold:      var(--color-brand-primary);    /* tmp */
  --e-a-color-primary-bold-dark: var(--color-brand-accent);     /* tmp */
  --e-a-color-secondary:         var(--c-neutral-650);          /* tmp */
  --e-a-color-accent:            var(--color-brand-accent);     /* tmp */
  --e-a-color-accent-promotion:  var(--color-brand-secondary);  /* tmp */
  --e-a-color-global:            var(--color-brand-primary);    /* tmp */

  /* ───── Status ────────────────────────────────────────── */
  --e-a-color-success: var(--color-feedback-success);  /* tmp */
  --e-a-color-danger:  var(--color-feedback-danger);   /* tmp */
  --e-a-color-info:    var(--color-feedback-info);     /* tmp */
  --e-a-color-warning: var(--color-feedback-warning);  /* tmp */

  /* ───── Backgrounds ───────────────────────────────────── */
  --e-a-bg-default:     var(--color-surface-default);  /* tmp */
  --e-a-bg-invert:      var(--c-neutral-800);          /* tmp */
  --e-a-bg-hover:       var(--c-neutral-200);          /* tmp */
  --e-a-bg-active:      var(--c-neutral-300);          /* tmp */
  --e-a-bg-active-bold: var(--c-neutral-400);          /* tmp */
  --e-a-bg-loading:     var(--c-neutral-50);           /* tmp */
  --e-a-bg-logo:        var(--c-neutral-800);          /* tmp */
  --e-a-bg-primary:     var(--c-teal-100);             /* tmp */
  --e-a-bg-secondary:   var(--c-neutral-650);          /* tmp */
  --e-a-bg-chip:        var(--c-neutral-200);          /* tmp */
  --e-a-bg-success:     var(--c-success-100);          /* tmp */
  --e-a-bg-info:        var(--c-info-100);             /* tmp */
  --e-a-bg-danger:      var(--c-danger-100);           /* tmp */
  --e-a-bg-warning:     var(--c-warning-100);          /* tmp */

  /* ───── Text ──────────────────────────────────────────── */
  --e-a-color-txt:          var(--c-neutral-650);    /* tmp */
  --e-a-color-txt-muted:    var(--c-neutral-600);    /* tmp */
  --e-a-color-txt-disabled: var(--c-neutral-500);    /* tmp */
  --e-a-color-txt-invert:   var(--c-neutral-0);      /* tmp */
  --e-a-color-txt-accent:   var(--c-neutral-800);    /* tmp */
  --e-a-color-txt-hover:    var(--c-neutral-700);    /* tmp */
  --e-a-color-txt-active:   var(--c-neutral-800);    /* tmp */

  /* ───── Borders ───────────────────────────────────────── */
  --e-a-border-color:        var(--c-neutral-300);   /* tmp */
  --e-a-border-color-bold:   var(--c-neutral-400);   /* tmp */
  --e-a-border-color-focus:  var(--c-neutral-500);   /* tmp */
  --e-a-border-color-accent: var(--c-neutral-800);   /* tmp */
  --e-a-border:      1px solid var(--e-a-border-color);       /* tmp */
  --e-a-border-bold: 1px solid var(--e-a-border-color-bold);  /* tmp */
  --e-a-border-radius: var(--radius-sm);             /* tmp */

  /* ───── Buttons — Neutral ─────────────────────────────── */
  --e-a-btn-color:          var(--c-neutral-800);              /* tmp */
  --e-a-btn-color-invert:   var(--e-a-color-txt-invert);       /* tmp */
  --e-a-btn-color-disabled: var(--e-a-color-txt-disabled);     /* tmp */
  --e-a-btn-bg:             var(--c-neutral-650);              /* tmp */
  --e-a-btn-bg-hover:       var(--c-neutral-700);              /* tmp */
  --e-a-btn-bg-active:      var(--c-neutral-750);              /* tmp */
  --e-a-btn-bg-disabled:    var(--c-neutral-400);              /* tmp */

  /* ───── Buttons — Primary ─────────────────────────────── */
  --e-a-btn-bg-primary:        var(--c-teal-100);              /* tmp */
  --e-a-btn-bg-primary-hover:  var(--c-teal-100);              /* tmp */
  --e-a-btn-bg-primary-active: var(--color-brand-primary);     /* tmp */

  /* ───── Buttons — Accent ──────────────────────────────── */
  --e-a-btn-bg-accent:        var(--color-brand-accent);       /* tmp */
  --e-a-btn-bg-accent-hover:  var(--c-teal-700);               /* tmp */
  --e-a-btn-bg-accent-active: var(--color-brand-primary);      /* tmp */

  /* ───── Buttons — Info ────────────────────────────────── */
  --e-a-btn-bg-info:        var(--c-info-500);  /* tmp */
  --e-a-btn-bg-info-hover:  var(--c-info-700);  /* tmp */
  --e-a-btn-bg-info-active: var(--c-info-900);  /* tmp */

  /* ───── Buttons — Success ─────────────────────────────── */
  --e-a-btn-bg-success:        var(--c-success-500);  /* tmp */
  --e-a-btn-bg-success-hover:  var(--c-success-700);  /* tmp */
  --e-a-btn-bg-success-active: var(--c-success-900);  /* tmp */

  /* ───── Buttons — Warning ─────────────────────────────── */
  --e-a-btn-bg-warning:        var(--c-warning-500);  /* tmp */
  --e-a-btn-bg-warning-hover:  var(--c-warning-700);  /* tmp */
  --e-a-btn-bg-warning-active: var(--c-warning-900);  /* tmp */

  /* ───── Buttons — Danger ──────────────────────────────── */
  --e-a-btn-bg-danger:        var(--c-danger-500);  /* tmp */
  --e-a-btn-bg-danger-hover:  var(--c-danger-700);  /* tmp */
  --e-a-btn-bg-danger-active: var(--c-danger-900);  /* tmp */

  /* ───── Dark Mode Surface ─────────────────────────────── */
  --e-a-dark-bg:              var(--c-neutral-800);  /* tmp */
  --e-a-dark-color-txt:       var(--c-neutral-550);  /* tmp */
  --e-a-dark-color-txt-hover: var(--c-neutral-400);  /* tmp */

  /* ───── Misc ──────────────────────────────────────────── */
  --e-a-font-family:      var(--font-sans);                /* tmp */
  --e-a-transition-hover: all .3s;                         /* tmp */
  --e-a-popover-shadow:   0 2px 15px rgba(0,0,0,.3);       /* tmp */
  --e-a-dropdown-shadow:  0 0 3px rgba(0,0,0,.2);          /* tmp */
}

/* Body-Defaults — Elementor überschreibt auf Sektion-Ebene */
body {
  background: var(--color-surface-default);
  color: var(--color-text-default);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
}


/* ═════════════════════════════════════════════════════════════════
 *  UI-Primitive-Reclaim
 * -----------------------------------------------------------------
 *  Elementors Kit-CSS setzt auf `.elementor-kit-XX button` (Spez. 0,1,1)
 *  unter anderem background-image (Gradient), font-size, color,
 *  font-family, background-color, border-radius. Das überschreibt unsere
 *  .ag-*-Primitives, weil deren Basis-Selektor nur (0,1,0) hat.
 *
 *  Trick: `button.ag-chip` hat dieselbe Spezifität (0,1,1) wie Elementors
 *  Selektor. Diese Datei wird NACH Elementors CSS geladen — Source-Order
 *  entscheidet das Tie zu unseren Gunsten. Wir setzen hier nur die Werte
 *  zurück, die Elementor anfasst; alles andere lebt weiter in ui.css.
 *
 *  Pro neuer .ag-*-Primitive (Button, Pille, Input …) hier eine
 *  äquivalente Reclaim-Regel ergänzen.
 * ═════════════════════════════════════════════════════════════════ */

button.ag-chip,
input.ag-chip[type="button"],
input.ag-chip[type="submit"] {
  background-color: var(--chip-bg);
  background-image: none;
  color:            var(--chip-text);
  font-family:      var(--font-sans);
  font-size:        var(--chip-fs);
  font-weight:      var(--chip-fw);
  border-radius:    var(--radius-pill);
}

/* Hover/Active müssen ebenfalls die Variant-Vars gewinnen lassen */
button.ag-chip:hover,
input.ag-chip[type="button"]:hover,
input.ag-chip[type="submit"]:hover {
  background-color: var(--chip-bg-hover);
  background-image: none;
}
button.ag-chip:active,
input.ag-chip[type="button"]:active,
input.ag-chip[type="submit"]:active {
  background-color: var(--chip-bg-active);
  background-image: none;
}

/* Solid-Variante: Gradient zurückholen (kommt aus --chip-bg, der hier
   einen Gradient enthält → background shorthand statt background-color) */
button.ag-chip.ag-chip--solid,
input.ag-chip.ag-chip--solid[type="button"],
input.ag-chip.ag-chip--solid[type="submit"],
button.ag-chip.ag-chip--solid:hover,
button.ag-chip.ag-chip--solid:active {
  background: var(--chip-bg);
}