/* =========================================================================
   VitaCare — Elementor-Markenangleichung
   Stylt die Ausgabe nativer Elementor-Widgets (Heading/Text/Button/Container)
   auf das Theme-Design (Sora/Inter, petrol/ink/mint, .shell-Breite, .btn-primary).
   So editiert der Kunde Inhalte visuell, das Design bleibt markenkonform.
   Lädt NUR auf Elementor-Seiten (siehe inc/elementor.php).
   ========================================================================= */

:root{
  --vc-petrol:rgb(11 122 79);
  --vc-petrol-deep:rgb(7 92 59);
  --vc-petrol-tint:rgb(227 241 234);
  --vc-ink:rgb(16 42 67);
  --vc-ink-soft:rgb(39 66 92);
  --vc-ink-mute:rgb(90 107 123);
  --vc-ink-faint:rgb(144 160 173);
  --vc-mint:rgb(63 194 222);
  --vc-mint-light:rgb(118 214 236);
  --vc-snow:rgb(246 248 250);
}

/* ---- Container: exakt wie die Theme-.shell (max 80rem, 1.5rem Seitenpadding) ---- */
.elementor-section.elementor-section-boxed > .elementor-container{max-width:80rem}
.elementor-section > .elementor-container{padding-left:1.5rem;padding-right:1.5rem}
@media (max-width:767px){.elementor-section > .elementor-container{padding-left:1.25rem;padding-right:1.25rem}}

/* ---- Überschriften: Sora, ink, Größe nach HTML-Tag (wie Theme-Display-Skala) ---- */
.elementor-widget-heading .elementor-heading-title{
  font-family:Sora,system-ui,sans-serif;color:var(--vc-ink);
  font-weight:600;letter-spacing:-.02em;line-height:1.12;text-wrap:balance
}
.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.2rem,5vw,4rem);line-height:1.06;letter-spacing:-.025em}
.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(1.8rem,3.6vw,2.9rem)}
.elementor-widget-heading h3.elementor-heading-title{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.elementor-widget-heading h4.elementor-heading-title{font-size:1.3rem}

/* ---- Fließtext: Inter, ink-mute, angenehme Zeilenhöhe ---- */
.elementor-widget-text-editor{font-family:Inter,system-ui,sans-serif;color:var(--vc-ink-mute);font-size:1.0625rem;line-height:1.75}
.elementor-widget-text-editor p{margin-bottom:1rem;text-wrap:pretty}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-widget-text-editor a{color:var(--vc-petrol);text-decoration:underline}

/* ---- Buttons: 1:1 .btn-primary (petrol, pill, Inter 600) ---- */
.elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:9999px;background-color:var(--vc-petrol);
  padding:.875rem 1.75rem;font-family:Inter,system-ui,sans-serif;font-size:.92rem;font-weight:600;color:#fff;
  box-shadow:0 1px 2px rgba(16,42,67,.04),0 8px 24px -12px rgba(16,42,67,.12);
  transition:transform .2s cubic-bezier(.23,1,.32,1),background-color .2s
}
.elementor-button:hover{background-color:var(--vc-petrol-deep);color:#fff;transform:translateY(-2px)}
.elementor-button:active{transform:scale(.97)}
/* Helle Variante (CSS-Klasse vc-btn-light am Button-Widget) */
.vc-btn-light .elementor-button{background-color:#fff;color:var(--vc-petrol-deep)}
.vc-btn-light .elementor-button:hover{background-color:var(--vc-snow)}

/* ---- Eyebrow-Helfer (CSS-Klasse vc-eyebrow am Text/Heading-Widget) ---- */
.vc-eyebrow,.vc-eyebrow .elementor-heading-title{
  font-family:Inter,system-ui,sans-serif!important;font-size:.72rem!important;font-weight:600;
  text-transform:uppercase;letter-spacing:.26em;color:var(--vc-petrol)
}

/* ---- Helle Texte auf dunklen Sektionen — über WIDGET-Klassen (Sections rendern _css_classes NICHT) ---- */
.elementor-widget-heading.vc-h-white .elementor-heading-title{color:#fff}
.elementor-widget-heading.vc-eyebrow-light .elementor-heading-title{color:var(--vc-mint-light)}
.elementor-widget-text-editor.vc-text-white,
.elementor-widget-text-editor.vc-text-white p{color:rgba(255,255,255,.85)}

/* ---- Eingebettete Shortcode-Blöcke sollen volle Breite nutzen ---- */
.elementor-widget-shortcode{width:100%}

/* ---- Schmale Inhalte: vc-narrow-w an den WIDGETS (nur Widget-Klassen rendern) ---- */
.elementor-widget.vc-narrow-w{max-width:48rem;margin-inline:auto}