/*
  Elementor, beide Welten: Das Kit und die klassischen Widgets folgen den Tokens des Themes.
  Lädt überall, wo Elementor läuft – in PHP-Ansichten wie in Elementor-Dokumenten. Tokens werden hier nicht neu
  definiert; Elementor-Variablen werden nur auf sie gelegt.
  Abgrenzung (seit 3.0):
    elementor-kit.css      – diese Datei: Kit-Variablen, Überschriften- und Schaltflächen-Widget (klassisch)
    elementor-bruecke.css  – nur PHP-Ansichten: Elementor-Inhalt im Textbereich von page.php/single.php
    elementor-rest.css     – nur Elementor-Dokumente und Editor-Vorschau: was Atomic-Elemente nicht selbst können
  Keine Regel steht in zwei dieser Dateien.
*/

/* ---------- Kit: Standardfarben und -schriften der Widgets folgen den Tokens (auch im dunklen Schema) ---------- */
body[class*='elementor-kit-'] {
  --e-global-color-primary: var(--text);
  --e-global-color-secondary: var(--text-2);
  --e-global-color-text: var(--text);
  --e-global-color-accent: var(--akzent-text);
  --e-global-typography-primary-font-family: var(--font-display);
  --e-global-typography-primary-font-weight: 700;
  --e-global-typography-secondary-font-family: var(--font-display);
  --e-global-typography-secondary-font-weight: 650;
  --e-global-typography-text-font-family: var(--font-text);
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: var(--font-display);
  --e-global-typography-accent-font-weight: 650;
}

/* Elementor setzt Überschriften-Widgets auf line-height 1: Werte aus global.css */
:where(.elementor) h1.elementor-heading-title,
:where(.elementor) h2.elementor-heading-title { line-height: 1.06; }
:where(.elementor) h3.elementor-heading-title { line-height: 1.15; }
:where(.elementor) h4.elementor-heading-title { line-height: 1.2; }
/* h5 und h6 lässt global.css unberührt: Sie erben die Zeilenhöhe des Fließtexts wie in .prosa */
:where(.elementor) h5.elementor-heading-title,
:where(.elementor) h6.elementor-heading-title { line-height: inherit; }

/*
  Schaltflächen-Widget wie .btn (Grundzustand aus global.css).
  Die Spielarten .btn-tief/.btn-sonne/.btn-linie/.btn-hell bildet die Brücke bewusst nicht nach:
  Sie setzen --btn-bg/--btn-fg und border-color mit einer Klasse (0,1,0) und kämen gegen diese Regel
  nicht an. Wer eine Spielart im Editor braucht, stellt Farbe und Rahmen am Widget selbst ein.
*/
.elementor .elementor-widget-button .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.7rem 1.4rem;
  font: 650 var(--fs-s) / 1 var(--font-display);
  font-stretch: 100%;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--auf-akzent); fill: var(--auf-akzent); background: var(--blau);
  border: 1.5px solid transparent; border-radius: var(--r-pille);
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
/* Text und Symbol stehen in einer Hülle; der Abstand von .btn gehört deshalb dorthin */
.elementor .elementor-widget-button .elementor-button .elementor-button-content-wrapper { gap: 0.55rem; }
.elementor .elementor-widget-button .elementor-button svg { width: 1.15em; height: 1.15em; flex: none; }
.elementor .elementor-widget-button .elementor-button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .elementor .elementor-widget-button .elementor-button:hover { background: var(--blau-hover); }
}