/* ============================================================
   paneri Design System v2.0 — Elementor Pro Edition
   
   Integration: Site Settings → Custom CSS
   oder als separate CSS im Child-Theme (functions.php)
   
   WICHTIG: Dieses File definiert die Tokens und Utilities.
   Die Elementor Global Colors/Fonts werden zusätzlich 
   nativ in Site Settings → Design System konfiguriert.
   
   Architektur:
   ┌─────────────────────────────────────┐
   │  Elementor Global Colors/Fonts      │ ← Picker-Zugriff
   │  (Site Settings → Design System)    │
   ├─────────────────────────────────────┤
   │  paneri-ds.css (dieses File)        │ ← Tokens + Utilities
   │  (Site Settings → Custom CSS)       │
   ├─────────────────────────────────────┤
   │  Elementor Widgets                  │ ← Visueller Builder
   │  + ggf. Element-Level Custom CSS    │
   └─────────────────────────────────────┘
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   
   Benennungsschema: --ap-{kategorie}-{name}
   "ap" = Asana Praxis (pro Projekt wechselbar)
   ============================================================ */
:root {
  
  /* ─── FARBEN ─────────────────────────────────────────────── */
  
  /* Markenfarben */
  --ap-red:              #E1123C;
  --ap-red-dark:         #B40E30;
  --ap-red-soft:         #FCEDEF;    /* 5% Red auf Weiß */
  --ap-red-hover:        #C80F35;    /* Zwischen red und red-dark */
  
  /* Neutrals – warm-toned */
  --ap-brown:            #583916;    /* Headlines */
  --ap-brown-soft:       #7A5A35;    /* Subheadlines, Sekundär */
  --ap-text:             #141414;    /* Fließtext */
  --ap-text-soft:        #4A4540;    /* Sekundärtext */
  --ap-text-muted:       #8A847C;    /* Tertiär, Captions */
  
  /* Hintergründe */
  --ap-bg:               #FFFFFF;
  --ap-bg-cream:         #FAF1E7;    /* Sektions-Hintergrund */
  --ap-bg-cream-dark:    #F0E3D3;    /* Hover auf Cream */
  --ap-bg-blush:         #E6C6CD;    /* Footer */
  --ap-bg-blush-soft:    #F3E0E5;    /* Leichtes Rosé */
  --ap-bg-warm:          #FDF8F2;    /* Noch heller als Cream */
  
  /* Borders */
  --ap-border:           #E0D5C8;
  --ap-border-light:     #EDE6DC;
  --ap-border-red:       rgba(225, 18, 60, 0.15);
  
  /* Semantisch */
  --ap-white:            #FFFFFF;
  --ap-black:            #141414;
  
  
  /* ─── TYPOGRAFIE ─────────────────────────────────────────── */
  
  /* Font-Stacks — via Google Fonts oder lokal hosten */
  --ap-font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --ap-font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Weights */
  --ap-weight-regular:   400;
  --ap-weight-medium:    500;
  --ap-weight-semibold:  600;
  --ap-weight-bold:      700;
  
  /* 
     TYPE SCALE — Bewusst luftig/groß
     
     Philosophie: Yoga-Seite = Ruhe, Raum, Atmen.
     Base = 18–20px (nicht 16px Standard).
     Ratio: ~1.3 (Perfect Fourth) — harmonisch, nicht dramatisch.
     Alle Stufen fluid mit clamp().
  */
  --ap-text-xs:     clamp(0.75rem,  0.72rem + 0.15vw, 0.833rem);   /* 12–13px */
  --ap-text-sm:     clamp(0.875rem, 0.84rem + 0.18vw, 0.975rem);   /* 14–16px */
  --ap-text-base:   clamp(1.125rem, 1.06rem + 0.33vw, 1.3rem);     /* 18–21px ← BEWUSST GROß */
  --ap-text-md:     clamp(1.25rem,  1.16rem + 0.45vw, 1.5rem);     /* 20–24px */
  --ap-text-lg:     clamp(1.5rem,   1.35rem + 0.75vw, 1.875rem);   /* 24–30px */
  --ap-text-xl:     clamp(1.75rem,  1.5rem  + 1.25vw, 2.5rem);     /* 28–40px */
  --ap-text-2xl:    clamp(2.125rem, 1.75rem + 1.88vw, 3.25rem);    /* 34–52px */
  --ap-text-3xl:    clamp(2.5rem,   2rem    + 2.5vw,  4rem);       /* 40–64px */
  --ap-text-hero:   clamp(3rem,     2.2rem  + 4vw,    5.5rem);     /* 48–88px */
  
  /* Letter-Spacing — kalibriert pro Stufe */
  --ap-ls-display:  -0.03em;    /* Große Headlines */
  --ap-ls-heading:  -0.02em;    /* H1–H2 */
  --ap-ls-subhead:  -0.012em;   /* H3–H4 */
  --ap-ls-body:     -0.008em;   /* Fließtext */
  --ap-ls-small:     0em;       /* Kleiner Text */
  --ap-ls-caps:      0.08em;    /* Uppercase/Kicker */
  
  /* Line-Heights — luftiger als üblich */
  --ap-lh-display:   1.08;     /* Hero-Headlines */
  --ap-lh-heading:   1.2;      /* H1–H2 */
  --ap-lh-subhead:   1.35;     /* H3–H5 */
  --ap-lh-body:      1.7;      /* Fließtext — bewusst HOCH */
  --ap-lh-relaxed:   1.85;     /* Lead-Paragraphen */
  --ap-lh-tight:     1.15;     /* Labels, Buttons */
  
  
  /* ─── SPACING ────────────────────────────────────────────── 
  
     LUFTIG = größere Basis.
     Skala: 4px Mikro-Stufen + 8px-basierte Haupt-Stufen.
     Sections kriegen 120–200px Padding.
  */
  --ap-space-1:    0.25rem;    /*   4px  — Mikro */
  --ap-space-2:    0.5rem;     /*   8px  */
  --ap-space-3:    0.75rem;    /*  12px  */
  --ap-space-4:    1rem;       /*  16px  */
  --ap-space-5:    1.25rem;    /*  20px  */
  --ap-space-6:    1.5rem;     /*  24px  */
  --ap-space-8:    2rem;       /*  32px  */
  --ap-space-10:   2.5rem;     /*  40px  */
  --ap-space-12:   3rem;       /*  48px  */
  --ap-space-16:   4rem;       /*  64px  */
  --ap-space-20:   5rem;       /*  80px  */
  --ap-space-24:   6rem;       /*  96px  */
  --ap-space-32:   8rem;       /* 128px  */
  --ap-space-40:  10rem;       /* 160px  */
  --ap-space-48:  12rem;       /* 192px  */
  
  /* Fluid Sections — DER Schlüssel zu "luftig" */
  --ap-section-sm:   clamp(3rem,    2rem + 5vw,   6rem);     /*  48– 96px */
  --ap-section-md:   clamp(4.5rem,  3rem + 7.5vw, 9rem);     /*  72–144px */
  --ap-section-lg:   clamp(6rem,    4rem + 10vw, 12rem);      /*  96–192px */
  --ap-section-xl:   clamp(7.5rem,  5rem + 12.5vw, 15rem);    /* 120–240px */
  
  /* Element-Spacing (innerhalb von Sektionen) */
  --ap-stack-xs:     var(--ap-space-3);     /* 12px — zwischen Label + Input */
  --ap-stack-sm:     var(--ap-space-5);     /* 20px — zwischen Text-Blöcken */
  --ap-stack-md:     var(--ap-space-8);     /* 32px — zwischen Content-Gruppen */
  --ap-stack-lg:     var(--ap-space-12);    /* 48px — zwischen Sub-Sektionen */
  --ap-stack-xl:     var(--ap-space-20);    /* 80px — große visuelle Trennung */
  
  
  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --ap-container:        1400px;     /* Moderner Standard */
  --ap-container-narrow: 680px;      /* Text-Content */
  --ap-container-wide:   1600px;     /* Volle Breite */
  --ap-gutter:           clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  --ap-grid-gap:         clamp(1.5rem, 1rem + 2.5vw, 3rem);
  
  
  /* ─── RADII ──────────────────────────────────────────────── */
  --ap-radius-xs:    3px;
  --ap-radius-sm:    6px;
  --ap-radius-md:    12px;
  --ap-radius-lg:    20px;
  --ap-radius-xl:    32px;
  --ap-radius-full:  9999px;
  
  
  /* ─── SCHATTEN — warm-getönt ─────────────────────────────── */
  --ap-shadow-xs:   0 1px 3px rgba(88, 57, 22, 0.04);
  --ap-shadow-sm:   0 2px 6px rgba(88, 57, 22, 0.06);
  --ap-shadow-md:   0 6px 20px rgba(88, 57, 22, 0.08);
  --ap-shadow-lg:   0 16px 40px rgba(88, 57, 22, 0.1);
  --ap-shadow-xl:   0 24px 56px rgba(88, 57, 22, 0.12);
  
  
  /* ─── TRANSITIONS ────────────────────────────────────────── */
  --ap-ease:         cubic-bezier(0.25, 0.1, 0.25, 1);
  --ap-ease-out:     cubic-bezier(0.22, 0.2, 0.03, 1);
  --ap-ease-bounce:  cubic-bezier(0.35, 1.35, 0.5, 1);
  --ap-dur-fast:     150ms;
  --ap-dur:          300ms;
  --ap-dur-slow:     600ms;
}


/* ============================================================
   2. BASE RESETS
   
   Minimal — nur was Elementor nicht abdeckt.
   Elementor bringt eigenes Reset mit, daher hier nur
   typografische Basis und Rendering-Optimierung.
   ============================================================ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--ap-text);
  letter-spacing: var(--ap-ls-body);
  line-height: var(--ap-lh-body);
}

::selection {
  background: var(--ap-red);
  color: var(--ap-white);
}

img { height: auto; }


/* ============================================================
   3. TYPOGRAFIE-KLASSEN
   
   Für Elementor: CSS-Klassen im Widget unter
   Advanced → CSS Classes eintragen.
   
   Prefix: "ap-" (Asana Praxis / Projekt-Prefix)
   ============================================================ */

/* Display / Hero */
.ap-display {
  font-family: var(--ap-font-display) !important;
  font-size: var(--ap-text-hero) !important;
  font-weight: var(--ap-weight-regular) !important;
  line-height: var(--ap-lh-display) !important;
  letter-spacing: var(--ap-ls-display) !important;
  color: var(--ap-brown) !important;
}

/* Headlines */
.ap-h1 {
  font-family: var(--ap-font-display) !important;
  font-size: var(--ap-text-3xl) !important;
  font-weight: var(--ap-weight-regular) !important;
  line-height: var(--ap-lh-heading) !important;
  letter-spacing: var(--ap-ls-heading) !important;
  color: var(--ap-brown) !important;
}

.ap-h2 {
  font-family: var(--ap-font-display) !important;
  font-size: var(--ap-text-2xl) !important;
  font-weight: var(--ap-weight-regular) !important;
  line-height: var(--ap-lh-heading) !important;
  letter-spacing: var(--ap-ls-heading) !important;
  color: var(--ap-brown) !important;
}

.ap-h3 {
  font-family: var(--ap-font-display) !important;
  font-size: var(--ap-text-xl) !important;
  font-weight: var(--ap-weight-medium) !important;
  line-height: var(--ap-lh-subhead) !important;
  letter-spacing: var(--ap-ls-subhead) !important;
  color: var(--ap-brown) !important;
}

.ap-h4 {
  font-family: var(--ap-font-body) !important;
  font-size: var(--ap-text-lg) !important;
  font-weight: var(--ap-weight-semibold) !important;
  line-height: var(--ap-lh-subhead) !important;
  letter-spacing: var(--ap-ls-subhead) !important;
  color: var(--ap-brown) !important;
}

.ap-h5 {
  font-family: var(--ap-font-body) !important;
  font-size: var(--ap-text-md) !important;
  font-weight: var(--ap-weight-semibold) !important;
  line-height: var(--ap-lh-subhead) !important;
  letter-spacing: var(--ap-ls-body) !important;
  color: var(--ap-brown-soft) !important;
}

/* Kicker / Overline */
.ap-kicker {
  font-family: var(--ap-font-body) !important;
  font-size: var(--ap-text-xs) !important;
  font-weight: var(--ap-weight-semibold) !important;
  letter-spacing: var(--ap-ls-caps) !important;
  text-transform: uppercase !important;
  color: var(--ap-red) !important;
}

/* Body Varianten */
.ap-lead {
  font-size: var(--ap-text-md) !important;
  line-height: var(--ap-lh-relaxed) !important;
  color: var(--ap-text-soft) !important;
  max-width: 40em;
}

.ap-body {
  font-size: var(--ap-text-base) !important;
  line-height: var(--ap-lh-body) !important;
  letter-spacing: var(--ap-ls-body) !important;
}

.ap-body-sm {
  font-size: var(--ap-text-sm) !important;
  line-height: var(--ap-lh-body) !important;
  color: var(--ap-text-soft) !important;
}

.ap-caption {
  font-size: var(--ap-text-xs) !important;
  color: var(--ap-text-muted) !important;
  letter-spacing: var(--ap-ls-small) !important;
}


/* ============================================================
   4. SECTION SPACING
   
   Für Elementor Sections/Containers:
   Advanced → CSS Classes → z.B. "ap-section" eintragen.
   
   Überschreibt Elementors Standard-Padding.
   ============================================================ */

/* Standard Section — großzügig */
.ap-section {
  padding-top: var(--ap-section-md) !important;
  padding-bottom: var(--ap-section-md) !important;
}

.ap-section-sm {
  padding-top: var(--ap-section-sm) !important;
  padding-bottom: var(--ap-section-sm) !important;
}

.ap-section-lg {
  padding-top: var(--ap-section-lg) !important;
  padding-bottom: var(--ap-section-lg) !important;
}

.ap-section-xl {
  padding-top: var(--ap-section-xl) !important;
  padding-bottom: var(--ap-section-xl) !important;
}

/* Hero Section — extra Luft oben */
.ap-hero-section {
  padding-top: var(--ap-section-xl) !important;
  padding-bottom: var(--ap-section-lg) !important;
}


/* ============================================================
   5. UTILITY KLASSEN
   
   Sparsam — nur was Elementor nicht nativ kann.
   ============================================================ */

/* Width Constraints */
.ap-narrow    { max-width: var(--ap-container-narrow) !important; margin-left: auto !important; margin-right: auto !important; }
.ap-standard  { max-width: var(--ap-container) !important; margin-left: auto !important; margin-right: auto !important; }
.ap-wide      { max-width: var(--ap-container-wide) !important; margin-left: auto !important; margin-right: auto !important; }

/* Farb-Hintergründe */
.ap-bg-white  { background-color: var(--ap-bg) !important; }
.ap-bg-cream  { background-color: var(--ap-bg-cream) !important; }
.ap-bg-warm   { background-color: var(--ap-bg-warm) !important; }
.ap-bg-blush  { background-color: var(--ap-bg-blush) !important; }
.ap-bg-dark   { background-color: var(--ap-black) !important; color: var(--ap-white) !important; }
.ap-bg-red    { background-color: var(--ap-red) !important; color: var(--ap-white) !important; }

/* Text-Farben */
.ap-c-brown   { color: var(--ap-brown) !important; }
.ap-c-red     { color: var(--ap-red) !important; }
.ap-c-soft    { color: var(--ap-text-soft) !important; }
.ap-c-muted   { color: var(--ap-text-muted) !important; }
.ap-c-white   { color: var(--ap-white) !important; }

/* Vertikaler Stack-Space (Gap zwischen Kinder-Elementen) */
.ap-stack-sm > *:not(:last-child) { margin-bottom: var(--ap-stack-sm) !important; }
.ap-stack-md > *:not(:last-child) { margin-bottom: var(--ap-stack-md) !important; }
.ap-stack-lg > *:not(:last-child) { margin-bottom: var(--ap-stack-lg) !important; }
.ap-stack-xl > *:not(:last-child) { margin-bottom: var(--ap-stack-xl) !important; }


/* ============================================================
   6. KOMPONENTEN
   ============================================================ */

/* ── Buttons ──────────────────────────────────────────────── */
.ap-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5em !important;
  padding: 1em 2.2em !important;
  font-family: var(--ap-font-body) !important;
  font-size: var(--ap-text-sm) !important;
  font-weight: var(--ap-weight-semibold) !important;
  letter-spacing: var(--ap-ls-caps) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 2px solid transparent !important;
  border-radius: var(--ap-radius-xs) !important;
  cursor: pointer !important;
  transition: all var(--ap-dur) var(--ap-ease) !important;
  line-height: var(--ap-lh-tight) !important;
}
.ap-btn:active { transform: translateY(1px) !important; }

.ap-btn-primary {
  background: var(--ap-red) !important;
  color: var(--ap-white) !important;
  border-color: var(--ap-red) !important;
}
.ap-btn-primary:hover {
  background: var(--ap-red-dark) !important;
  border-color: var(--ap-red-dark) !important;
  box-shadow: var(--ap-shadow-md) !important;
}

.ap-btn-outline {
  background: transparent !important;
  color: var(--ap-red) !important;
  border-color: var(--ap-red) !important;
}
.ap-btn-outline:hover {
  background: var(--ap-red) !important;
  color: var(--ap-white) !important;
}

.ap-btn-warm {
  background: var(--ap-bg-cream) !important;
  color: var(--ap-brown) !important;
  border-color: var(--ap-bg-cream) !important;
}
.ap-btn-warm:hover {
  background: var(--ap-bg-cream-dark) !important;
  border-color: var(--ap-bg-cream-dark) !important;
}

.ap-btn-ghost {
  background: transparent !important;
  color: var(--ap-red) !important;
  padding: 0.5em 0 !important;
  border: none !important;
  border-bottom: 2px solid var(--ap-border-red) !important;
  border-radius: 0 !important;
  text-transform: none !important;
  font-weight: var(--ap-weight-medium) !important;
  letter-spacing: var(--ap-ls-body) !important;
  font-size: var(--ap-text-base) !important;
}
.ap-btn-ghost:hover {
  border-bottom-color: var(--ap-red) !important;
}

.ap-btn-round { border-radius: var(--ap-radius-full) !important; }
.ap-btn-lg    { padding: 1.2em 3em !important; font-size: var(--ap-text-base) !important; }
.ap-btn-sm    { padding: 0.65em 1.5em !important; font-size: var(--ap-text-xs) !important; }


/* ── Cards ────────────────────────────────────────────────── */
.ap-card {
  background: var(--ap-white) !important;
  border-radius: var(--ap-radius-md) !important;
  overflow: hidden !important;
  transition: box-shadow var(--ap-dur) var(--ap-ease),
              transform var(--ap-dur) var(--ap-ease) !important;
}
.ap-card-shadow { box-shadow: var(--ap-shadow-md) !important; }
.ap-card-shadow:hover { box-shadow: var(--ap-shadow-lg) !important; transform: translateY(-3px) !important; }
.ap-card-bordered { border: 1px solid var(--ap-border) !important; }
.ap-card-body { padding: var(--ap-space-10) !important; }

/* ── Zitat ────────────────────────────────────────────────── */
.ap-quote {
  position: relative !important;
  padding: var(--ap-space-10) var(--ap-space-12) !important;
  padding-left: var(--ap-space-16) !important;
  font-family: var(--ap-font-display) !important;
  font-size: var(--ap-text-lg) !important;
  font-style: italic !important;
  line-height: var(--ap-lh-relaxed) !important;
  color: var(--ap-text-soft) !important;
}
.ap-quote::before {
  content: '\201E' !important;
  position: absolute !important;
  top: 0.2em !important;
  left: 0 !important;
  font-size: 5em !important;
  line-height: 1 !important;
  color: var(--ap-border-red) !important;
  font-family: var(--ap-font-display) !important;
  font-style: normal !important;
}

.ap-quote-author {
  font-family: var(--ap-font-body) !important;
  font-size: var(--ap-text-sm) !important;
  font-style: normal !important;
  font-weight: var(--ap-weight-semibold) !important;
  color: var(--ap-red) !important;
  letter-spacing: var(--ap-ls-caps) !important;
  text-transform: uppercase !important;
  margin-top: var(--ap-space-5) !important;
  display: block !important;
}

/* ── Badge / Pill ─────────────────────────────────────────── */
.ap-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.3em 1em !important;
  font-size: var(--ap-text-xs) !important;
  font-weight: var(--ap-weight-semibold) !important;
  letter-spacing: var(--ap-ls-caps) !important;
  text-transform: uppercase !important;
  border-radius: var(--ap-radius-full) !important;
  background: var(--ap-red-soft) !important;
  color: var(--ap-red) !important;
}

/* ── Ornament / Trenner ───────────────────────────────────── */
.ap-ornament {
  text-align: center !important;
  color: var(--ap-border) !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.5em !important;
  margin: var(--ap-space-16) auto !important;
}
.ap-ornament::before { content: '— \2022 —'; }

/* ── Horizontale Linie ────────────────────────────────────── */
.ap-divider {
  height: 1px !important;
  background: var(--ap-border-light) !important;
  border: none !important;
  margin: var(--ap-space-12) 0 !important;
}


/* ============================================================
   7. SCROLL-ANIMATIONEN
   
   IntersectionObserver-basiert.
   Klasse auf Elementor-Widgets: "ap-reveal" + "ap-d1" bis "ap-d6"
   ============================================================ */
.ap-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ap-dur-slow) var(--ap-ease-out),
              transform var(--ap-dur-slow) var(--ap-ease-out);
}
.ap-reveal.ap-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffelte Delays */
.ap-d1 { transition-delay: 0ms; }
.ap-d2 { transition-delay: 120ms; }
.ap-d3 { transition-delay: 240ms; }
.ap-d4 { transition-delay: 360ms; }
.ap-d5 { transition-delay: 480ms; }
.ap-d6 { transition-delay: 600ms; }

/* Varianten */
.ap-reveal-fade { transform: none; }
.ap-reveal-left { transform: translateX(-24px); }
.ap-reveal-left.ap-visible { transform: translateX(0); }
.ap-reveal-right { transform: translateX(24px); }
.ap-reveal-right.ap-visible { transform: translateX(0); }
.ap-reveal-scale { transform: scale(0.96); }
.ap-reveal-scale.ap-visible { transform: scale(1); }


/* ============================================================
   8. RESPONSIVE FINE-TUNING
   
   Elementor hat eigene Breakpoints (Desktop, Tablet, Mobile).
   Hier nur Ergänzungen, die Elementor nicht nativ abdeckt.
   ============================================================ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .ap-section    { padding-top: var(--ap-section-sm) !important; padding-bottom: var(--ap-section-sm) !important; }
  .ap-section-lg { padding-top: var(--ap-section-md) !important; padding-bottom: var(--ap-section-md) !important; }
  .ap-section-xl { padding-top: var(--ap-section-lg) !important; padding-bottom: var(--ap-section-lg) !important; }
  
  .ap-card-body { padding: var(--ap-space-8) !important; }
  .ap-quote { padding-left: var(--ap-space-12) !important; }
  .ap-quote::before { font-size: 4em !important; }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .ap-display { font-size: var(--ap-text-2xl) !important; }
  .ap-h1      { font-size: var(--ap-text-xl) !important; }
  
  .ap-card-body { padding: var(--ap-space-6) !important; }
  .ap-quote { padding: var(--ap-space-6) var(--ap-space-4) var(--ap-space-6) var(--ap-space-10) !important; }
  .ap-quote::before { font-size: 3em !important; }
  
  .ap-btn-lg { padding: 0.9em 2em !important; }
  
  .mobile-hide { display: none !important; }
  .mobile-show { display: block !important; }
  .mobile-center { text-align: center !important; }
  .mobile-full { width: 100% !important; }
}


/* ============================================================
   9. ELEMENTOR-SPEZIFISCHE OVERRIDES
   
   Elementor generiert eigene Klassen (.elementor-widget-*,
   .elementor-heading-title, etc.). Hier gezielte Overrides
   für saubere Defaults.
   ============================================================ */

/* Elementor Headings — Basis-Styling */
.elementor-widget-heading .elementor-heading-title {
  letter-spacing: var(--ap-ls-heading);
}

/* Elementor Text Editor — Absatz-Spacing */
.elementor-widget-text-editor p {
  margin-bottom: 1em;
  line-height: var(--ap-lh-body);
  letter-spacing: var(--ap-ls-body);
}

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

/* Elementor Buttons — harmonischer */
.elementor-button {
  letter-spacing: var(--ap-ls-caps) !important;
  font-weight: var(--ap-weight-semibold) !important;
  transition: all var(--ap-dur) var(--ap-ease) !important;
}

/* Elementor Sections — Smooth Scrolling Target */
.elementor-section[id],
.e-con[id] {
  scroll-margin-top: 100px;
}

/* Bilder — kein hartes Einrasten */
.elementor-widget-image img {
  transition: transform var(--ap-dur-slow) var(--ap-ease) !important;
}