/**
 * AURA – Abbildung auf Elementor-Standard-Widgets.
 * Spezifität bewusst niedrig (max. 0,2,0 bzw. 0,3,0 bei :focus), damit Einstellungen im
 * Elementor-Panel (0,3,0+) immer gewinnen. Dark-Mode-Globalfarben: siehe tokens.css.
 */

/* ---------- Oberflächen-Control (Erweitert → AURA-Oberfläche) ---------- */

.elementor-widget.aura-surface-raised,
.elementor-widget.aura-surface-inset {
  padding: var(--aura-space-6);
}

.e-con.aura-surface-raised,
.elementor-section.aura-surface-raised,
.elementor-column.aura-surface-raised > .elementor-widget-wrap {
  border-radius: var(--aura-radius-card);
}

/* Spalten: Fläche auf den inneren Wrap legen, damit die Spaltenabstände erhalten bleiben. */
.elementor-column.aura-surface-raised,
.elementor-column.aura-surface-inset {
  background: none;
  box-shadow: none;
}

.elementor-column.aura-surface-raised > .elementor-widget-wrap {
  background-color: var(--aura-surface);
  box-shadow: var(--aura-shadow-raised);
}

.elementor-column.aura-surface-inset > .elementor-widget-wrap {
  border-radius: var(--aura-radius-md);
  background-color: var(--aura-surface);
  box-shadow: var(--aura-shadow-inset);
}

/* ---------- Typografie ---------- */

.elementor-widget-heading .elementor-heading-title {
  font-weight: var(--aura-weight-semibold);
  line-height: var(--aura-leading-tight);
}

.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* ---------- Button ---------- */

.elementor-element .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--aura-touch-target);
  border-radius: var(--aura-radius-control);
  background-color: var(--aura-accent);
  color: var(--aura-on-accent);
  fill: currentColor;
  box-shadow: var(--aura-shadow-raised-sm);
  font-weight: var(--aura-weight-semibold);
  line-height: 1.2;
  transition:
    background-color var(--aura-duration-hover) var(--aura-ease-out),
    box-shadow var(--aura-duration-press) var(--aura-ease-out),
    transform var(--aura-duration-press) var(--aura-ease-out);
}

.elementor-element .elementor-button:hover,
.elementor-element .elementor-button:focus {
  background-color: color-mix(in srgb, var(--aura-accent) 85%, var(--aura-highlight));
  color: var(--aura-on-accent);
}

.elementor-element .elementor-button:active {
  box-shadow: var(--aura-shadow-pressed);
  transform: translateY(1px);
}

.elementor-element .elementor-button:focus-visible {
  outline: 2px solid var(--aura-focus);
  outline-offset: 3px;
}

/* Sekundär: CSS-Klasse „aura-button-secondary“ im Tab Erweitert setzen. */
.aura-button-secondary .elementor-button {
  background-color: var(--aura-surface);
  color: var(--aura-text);
}

.aura-button-secondary .elementor-button:hover,
.aura-button-secondary .elementor-button:focus {
  background-color: color-mix(in srgb, var(--aura-surface) 55%, var(--aura-highlight));
  color: var(--aura-text);
}

/* ---------- Formulare (Elementor Pro) ---------- */

.elementor-field-group .elementor-field-textual,
.elementor-field-group .elementor-select-wrapper select {
  min-height: var(--aura-touch-target);
  border: 1px solid transparent;
  border-radius: var(--aura-radius-control);
  background-color: var(--aura-surface);
  color: var(--aura-text);
  box-shadow: var(--aura-shadow-inset);
}

.elementor-field-group .elementor-field-textual:focus,
.elementor-field-group .elementor-select-wrapper select:focus {
  border-color: var(--aura-focus);
  box-shadow: var(--aura-shadow-inset);
  outline: 2px solid var(--aura-focus);
  outline-offset: 2px;
}

.elementor-field-group .elementor-field-label {
  font-weight: var(--aura-weight-medium);
}

.elementor-form .elementor-message-danger {
  color: var(--aura-danger);
}

.elementor-form .elementor-message-success {
  color: var(--aura-success);
}

/* ---------- Akkordeon, Toggle, Tabs, Trenner ---------- */

.elementor-widget-accordion .elementor-accordion-item,
.elementor-widget-toggle .elementor-toggle-item {
  border-color: var(--aura-border);
}

.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-toggle .elementor-tab-content {
  border-color: var(--aura-border);
}

.elementor-widget-tabs .elementor-tab-title,
.elementor-widget-tabs .elementor-tab-content,
.elementor-widget-tabs .elementor-tabs-content-wrapper {
  border-color: var(--aura-border);
}

.elementor-element.elementor-widget-divider {
  --divider-color: var(--aura-border);
}

/* ---------- Icon-Boxen & Listen ---------- */

.elementor-widget-icon-box .elementor-icon,
.elementor-widget-icon .elementor-icon {
  color: var(--aura-accent-strong);
  fill: var(--aura-accent-strong);
}

.elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-icon svg {
  color: var(--aura-accent-strong);
  fill: var(--aura-accent-strong);
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .elementor-element .elementor-button,
  .elementor-element .elementor-button:active {
    transform: none;
    transition: none;
  }
}