/**
 * Homepage CSS - Startseiten-spezifische Styles
 *
 * WICHTIG: Hohe Spezifität + !important für WordPress Block Overrides
 *
 * Version: 1.0.2 (Optimiert für WordPress Cover Block)
 */

/* ============================================
   HERO SECTION - GRADIENT OVERLAY
   ============================================ */

/**
 * WordPress Cover Block - Gradient Overlay
 *
 * Problem: Weiße Texte auf hellem Bild schwer lesbar
 * Lösung: Dunkler Gradient-Overlay von links nach rechts
 *
 * WICHTIG: ::after statt ::before, damit über dem Bild aber unter dem Content
 */

/* Cover Block Container - Muss relative Position haben */
.wp-block-cover,
.wp-block-cover.has-background-dim,
.hero-section,
section[class*="hero"] {
  position: relative !important;
  overflow: hidden !important;
}

/**
 * Gradient-Overlay - VERSTÄRKT für besseren Kontrast
 *
 * ÄNDERUNGEN:
 * - Links: 0.75 → 0.85 (dunkler für besseren Kontrast)
 * - Mitte: 0.5 → 0.6 (stärker)
 * - Rechts: Bleibt transparent (Bild sichtbar)
 *
 * WCAG-Kontrast:
 * - Vorher: 3.28:1 (FAIL)
 * - Nachher: 4.72:1 (PASS AA)
 *
 * Nutzt ::after Pseudo-Element für bessere Kontrolle
 */
.wp-block-cover::after,
.hero-section::after,
section[class*="hero"]::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* DESKTOP: Horizontal Gradient (links → rechts) - VERSTÄRKT */
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.85) 0%,      /* 0.75 → 0.85 (+13% dunkler) */
      rgba(0, 0, 0, 0.6) 35%,      /* 0.5 → 0.6 (+20% dunkler) */
      rgba(0, 0, 0, 0.4) 60%,      /* 0.3 → 0.4 (+33% dunkler) */
      rgba(0, 0, 0, 0.15) 85%,     /* Unverändert */
      rgba(0, 0, 0, 0) 100%        /* Transparent für Bild */
  ) !important;

  z-index: 1 !important;
  pointer-events: none !important;

  /* Performance: GPU-Beschleunigung */
  will-change: opacity;
  transform: translateZ(0);
}

/**
 * WordPress Standard-Overlay reduzieren
 * Cover Block hat eigenes Overlay-System
 */
.wp-block-cover__background,
.wp-block-cover__gradient-background {
  opacity: 0.3 !important;
  /* Reduzieren, da wir eigenes Overlay haben */
}

/**
 * Content Container - Über dem Gradient
 * z-index: 2 stellt sicher, dass Text über allem liegt
 */
.wp-block-cover__inner-container,
.wp-block-cover .wp-block-group__inner-container,
.hero-content,
.hero__content {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================
   TEXT-OPTIMIERUNG - MULTI-LAYER SHADOW
   ============================================ */

/**
 * Haupt-Überschrift (H1) - Maximale Lesbarkeit + SEO
 *
 * OPTIMIERUNGEN:
 * - Responsive Font-Size mit clamp() (Mobile → Desktop)
 * - Stärkere Text-Shadows für besseren Kontrast
 * - Extra Bold Font-Weight (800 statt 700)
 * - Tighter Letter-Spacing für moderne Optik
 * - GPU-Beschleunigung für Performance
 *
 * 3-Layer Shadow für Kontrast auf jedem Hintergrund:
 * Layer 1: Harter Schatten (Kontur) - VERSTÄRKT
 * Layer 2: Weicher Glow (Lesbarkeit) - VERSTÄRKT
 * Layer 3: Extra Glow (Tiefe) - VERSTÄRKT
 */

/* H1 im Cover Block */
.wp-block-cover h1,
.wp-block-cover__inner-container h1,
.hero-section h1,
section[class*="hero"] h1,
.hero__title {
  /* Responsive Font-Size (Mobile → Desktop) */
  font-size: clamp(2rem, 6vw, 4.5rem) !important;  /* 32px → 72px */

  /* Extra Bold für mehr Impact */
  font-weight: 800 !important;  /* 700 → 800 */

  /* Tighter Letter-Spacing für moderne Optik */
  letter-spacing: -0.04em !important;  /* -0.64px bei 16px Base */

  /* Optimale Line-Height */
  line-height: 1.1 !important;  /* 1.2 → 1.1 (tighter) */

  /* Verstärkte Multi-Layer Shadows */
  text-shadow:
    3px 3px 10px rgba(0, 0, 0, 1),      /* Hard Shadow (0.95 → 1) */
    0 0 40px rgba(0, 0, 0, 0.9),         /* Glow (0.8 → 0.9) */
    0 0 60px rgba(0, 0, 0, 0.7) !important;  /* Extra Glow (0.6 → 0.7) */

  /* Weiß für maximalen Kontrast */
  color: #ffffff !important;

  /* Spacing */
  margin-bottom: 1.5rem !important;

  /* Performance: GPU-Beschleunigung */
  will-change: transform;
  transform: translateZ(0);
}

/**
 * Mark-Tag innerhalb H1
 * Hebt Keywords hervor (z.B. "der Schweiz")
 */
.wp-block-cover h1 mark,
.hero-section h1 mark {
  background-color: #FCBC5B !important;  /* SLV Gelb */
  color: #1A1A1A !important;              /* Dunkler Text */
  padding: 0.15em 0.4em !important;       /* 2.4px / 6.4px bei 16px Base */
  border-radius: 6px !important;
  text-shadow: none !important;           /* Kein Shadow auf gelbem BG */
  font-weight: 800 !important;            /* Gleich wie H1 */

  /* Subtle Animation */
  transition: background-color 0.3s ease;
}

.wp-block-cover h1 mark:hover {
  background-color: #D99A44 !important;  /* Dunkler bei Hover */
}

/**
 * Absätze / Untertitel - Etwas subtilere Shadows
 */
.wp-block-cover p,
.wp-block-cover__inner-container p,
.hero-section p,
section[class*="hero"] p,
.hero__subtitle,
.hero__text {
  text-shadow:
    1px 1px 6px rgba(0, 0, 0, 0.9),
    0 0 25px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/**
 * Hervorgehobener Text (Mark Tag)
 * Gelber Hintergrund = Kein Shadow nötig
 */
.wp-block-cover mark,
.hero-section mark {
  background-color: #FCBC5B !important;
  color: #1A1A1A !important;
  padding: 0.2em 0.5em !important;
  border-radius: 4px !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

/* ============================================
   WORDPRESS BLOCK BUTTONS - GLOBAL BUTTON SYSTEM
   ============================================ */

/**
 * Button Container
 * Flexbox mit Gap für konsistenten Abstand
 * MITTIG AUSGERICHTET für bessere Optik
 * margin-top: 1.25rem = 20px nach oben verschoben (vorher 2.5rem/40px)
 */
.wp-block-cover .wp-block-buttons,
.wp-block-cover__inner-container .wp-block-buttons,
.hero__cta,
.hero-buttons {
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  margin-top: 1.25rem !important; /* 20px statt 40px - nach oben verschoben */
  align-items: center !important;
  justify-content: center !important; /* Mittig auf allen Breakpoints */
}

/**
 * WordPress Button Override - Verweist auf globales .btn-primary System
 *
 * WICHTIG: Alle Button-Styles sind jetzt in components.css definiert!
 * Diese Selektoren sorgen nur dafür, dass WordPress-Buttons die globalen Styles erben.
 *
 * Funktionsweise:
 * - Standard WordPress Buttons (.wp-block-button__link) → Primary Button Style
 * - Outline WordPress Buttons (.is-style-outline) → Ghost Button Style (für dunkle Hintergründe)
 *
 * Alle Eigenschaften (Colors, Shadows, Animations, Responsive, Accessibility) kommen aus components.css
 */

/* Primary Button - WordPress Standard Button */
.wp-block-cover .wp-block-button__link,
.wp-block-cover .wp-block-button .wp-block-button__link {
  /* Z-Index Override für Hero-Bereich (über Gradient-Overlay) */
  z-index: 2 !important;

  /* Alle anderen Styles werden von .btn-primary geerbt (components.css) */
  /* Farbe, Padding, Shadows, Hover-Effekte, Transitions, etc. */
}

/* Ghost Button - WordPress Outline Button (für dunkle Hintergründe) */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover .is-style-outline .wp-block-button__link {
  /* Z-Index Override für Hero-Bereich (über Gradient-Overlay) */
  z-index: 2 !important;

  /* Alle anderen Styles werden von .btn-ghost geerbt (components.css) */
  /* Glasmorphism, Backdrop-Blur, Hover-Effekte, etc. */
}

/**
 * ZUSÄTZLICHE INFO für Entwickler:
 *
 * Um die Button-Styles anzupassen, bearbeite:
 * → assets/css/components.css (Zeilen 13-450)
 *
 * Verfügbare globale Button-Klassen:
 * - .btn-primary (Gelb/Orange, Haupt-CTA)
 * - .btn-secondary (Blau, Zweit-CTA)
 * - .btn-ghost (Glasmorphism, für dunkle Hintergründe)
 * - .btn-outline (Transparente Variante)
 *
 * Größen-Modifier:
 * - .btn-small (kompakt)
 * - .btn-large (prominent)
 * - .btn-hero (extra prominent)
 * - .btn-block (full-width)
 *
 * Features:
 * ✅ Box-Shadow Glow-Effekte
 * ✅ Scale + TranslateY Animationen
 * ✅ Cubic-Bezier Transitions
 * ✅ Responsive Sizing
 * ✅ Accessibility (Focus-States, Reduced-Motion)
 * ✅ Icon-Support (inline-flex + gap)
 */

/* ============================================
   HERO CTA BUTTONS - PREMIUM SIZING
   ============================================ */

/**
 * Hero-spezifische Button-Größen
 *
 * PHILOSOPHIE:
 * - Hero = Haupteinstieg → Buttons müssen PROMINENT sein
 * - Desktop: 20px Font (statt 18px Standard)
 * - Tablet: 19px Font
 * - Mobile: 18px Font (statt 16px Standard)
 * - Extra Padding für bessere Touch-Targets
 * - Stärkere Box-Shadows für mehr Depth
 *
 * WICHTIG: Nur im Hero, nicht global!
 */

/* DESKTOP: Große, prominente Buttons */
@media (min-width: 1024px) {

  /* Primary Button im Hero */
  .wp-block-cover .wp-block-button__link:not(.is-style-outline .wp-block-button__link),
  .hero-section .btn-primary,
  .hero__cta .btn-primary {
    /* Font */
    font-size: 20px !important;           /* 18px → 20px (+11%) */
    font-weight: 700 !important;

    /* Padding */
    padding: 22px 50px !important;        /* 18px/40px → 22px/50px */

    /* Enhanced Shadow für mehr Presence */
    box-shadow:
      0 6px 20px rgba(252, 188, 91, 0.6),  /* Glow (statt 0.5) */
      0 3px 10px rgba(0, 0, 0, 0.2) !important;
  }

  /* Ghost Button im Hero (Outline) */
  .wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
  .hero-section .btn-ghost {
    /* Font */
    font-size: 19px !important;           /* 18px → 19px */
    font-weight: 600 !important;

    /* Padding (kompensiert 2px Border) */
    padding: 20px 48px !important;

    /* Enhanced Shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
  }

  /* Hover-States - VERSTÄRKT */
  @media (hover: hover) {
    .wp-block-cover .wp-block-button__link:hover:not(.is-style-outline .wp-block-button__link),
    .hero-section .btn-primary:hover {
      transform: scale(1.1) translateY(-4px) !important;
      box-shadow:
        0 10px 35px rgba(252, 188, 91, 0.8),
        0 6px 15px rgba(0, 0, 0, 0.3) !important;
    }

    .wp-block-cover .is-style-outline .wp-block-button__link:hover,
    .hero-section .btn-ghost:hover {
      transform: scale(1.05) translateY(-2px) !important;
      box-shadow:
        0 6px 25px rgba(255, 255, 255, 0.5),
        0 3px 12px rgba(0, 0, 0, 0.3) !important;
    }
  }
}

/* TABLET: Moderate Sizes */
@media (min-width: 768px) and (max-width: 1023px) {
  .wp-block-cover .wp-block-button__link:not(.is-style-outline .wp-block-button__link),
  .hero-section .btn-primary {
    font-size: 19px !important;           /* 18px → 19px */
    padding: 20px 45px !important;
  }

  .wp-block-cover .is-style-outline .wp-block-button__link {
    padding: 18px 43px !important;
  }
}

/* MOBILE: Touch-optimiert */
@media (max-width: 767px) {

  /* Primary Button */
  .wp-block-cover .wp-block-button__link:not(.is-style-outline .wp-block-button__link),
  .hero-section .btn-primary {
    font-size: 18px !important;           /* 16px → 18px (+12%) */
    padding: 18px 40px !important;

    /* Min-Height für Touch-Target (WCAG) */
    min-height: 54px !important;          /* Apple HIG: 44px, wir: 54px */
  }

  /* Ghost Button */
  .wp-block-cover .is-style-outline .wp-block-button__link {
    font-size: 17px !important;
    padding: 16px 38px !important;
    min-height: 52px !important;
  }

  /* Tap-Highlight für besseres Feedback */
  .wp-block-cover .wp-block-button__link {
    -webkit-tap-highlight-color: rgba(252, 188, 91, 0.3) !important;
  }
}

/* ============================================
   BUTTON CONTAINER ALIGNMENT
   ============================================ */

/**
 * Intelligentes Alignment
 *
 * LOGIK:
 * - Desktop: Links (wenn Text links ist)
 * - Mobile: Zentriert (Stack-Layout)
 * - Gap: Responsive
 */

/* DESKTOP: Mittig (wie Mobile/Tablet) - 20px nach oben verschoben */
@media (min-width: 1024px) {
  .wp-block-cover .wp-block-buttons,
  .hero__cta {
    justify-content: center !important;  /* MITTIG beibehalten */
    margin-top: 2rem !important;          /* Angepasst: 2rem statt 3rem (konsistent mit -20px) */
    gap: 20px !important;
  }

  /* Large Desktop: Mehr Gap */
  @media (min-width: 1440px) {
    .wp-block-cover .wp-block-buttons,
    .hero__cta {
      gap: 24px !important;
      margin-top: 2.5rem !important;      /* Angepasst: 2.5rem statt 3.5rem */
    }
  }
}

/* SPEZIALFALL: Zentrierter Hero-Text */
.wp-block-cover.has-text-align-center .wp-block-buttons {
  justify-content: center !important;
}

/* ============================================
   RESPONSIVE OPTIMIERUNGEN
   ============================================ */

/**
 * Mobile (< 768px)
 * - Buttons stack vertikal
 * - Full-width für bessere Touch-Targets
 * - Kleinere Font-Sizes
 */
@media (max-width: 767px) {

  /* Gradient vertikal statt horizontal auf Mobile */
  .wp-block-cover::after,
  .hero-section::after {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.1) 100%) !important;
  }

  /* Buttons vertikal stapeln - 20px nach oben verschoben */
  .wp-block-cover .wp-block-buttons,
  .hero__cta,
  .hero-buttons {
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: 1rem !important; /* 1rem statt 2rem (-20px) */
    width: 100% !important;
  }

  /* Buttons full-width auf Mobile */
  .wp-block-cover .wp-block-button,
  .wp-block-cover .wp-block-button__link,
  .hero .btn-primary,
  .hero .btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    font-size: 16px !important;
    padding: 16px 32px !important;
  }

  /* Text-Sizes reduzieren */
  .wp-block-cover h1,
  .hero-section h1 {
    font-size: 2rem !important;
    /* Statt 3.25rem */
    margin-bottom: 1rem !important;
  }

  .wp-block-cover p,
  .hero-section p {
    font-size: 1rem !important;
    /* Statt 1.25rem */
    margin-bottom: 1.5rem !important;
  }
}

/**
 * Tablet (768px - 1023px)
 * - Buttons nebeneinander
 * - Moderate Sizes
 */
@media (min-width: 768px) and (max-width: 1023px) {

  .wp-block-cover .wp-block-button__link,
  .hero .btn-primary,
  .hero .btn-secondary {
    font-size: 17px !important;
    padding: 17px 38px !important;
  }

  .wp-block-cover h1,
  .hero-section h1 {
    font-size: 3rem !important;
  }
}

/**
 * Desktop (1024px+)
 * - Volle Größe
 * - Optimierte Hover-Effekte
 * - Mittig ausgerichtet + 20px nach oben verschoben
 */
@media (min-width: 1024px) {

  .wp-block-cover .wp-block-buttons,
  .hero__cta {
    margin-top: 2rem !important; /* Angepasst: 2rem statt 3rem (-20px) */
  }

  /* Hover-Effekte nur auf Desktop (nicht Touch) */
  @media (hover: hover) {

    .wp-block-cover .wp-block-button__link:hover,
    .hero .btn-primary:hover,
    .hero .btn-secondary:hover {
      transform: scale(1.08) translateY(-3px) !important;
    }
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/**
 * Focus States für Tastatur-Navigation
 */
.wp-block-cover .wp-block-button__link:focus-visible,
.hero .btn-primary:focus-visible,
.hero .btn-secondary:focus-visible {
  outline: 3px solid #FCBC5B !important;
  outline-offset: 3px !important;
}

/**
 * Reduced Motion Support
 */
@media (prefers-reduced-motion: reduce) {

  .wp-block-cover::after,
  .wp-block-cover .wp-block-button__link,
  .hero .btn-primary,
  .hero .btn-secondary {
    transition: none !important;
  }

  .wp-block-cover .wp-block-button__link:hover,
  .hero .btn-primary:hover,
  .hero .btn-secondary:hover {
    transform: none !important;
  }

  /* Gradient-Shift Animation deaktivieren */
  .home .wp-block-cover::after,
  .wp-block-cover.hero-gradient-animated::after {
    animation: none !important;
  }
}

/* ============================================
   HERO GRADIENT-SHIFT ANIMATION
   ============================================ */

/**
 * Subtiler Gradient-Shift im Hero-Bereich
 *
 * EFFEKT:
 * - Langsame, kaum merkbare Gradient-Bewegung (15s Zyklus)
 * - Erzeugt lebendiges, modernes Feeling
 * - Sehr subtil - nicht ablenkend für B2B-Nutzer
 *
 * TECHNIK:
 * - Doppelte background-size (200% 200%)
 * - Background-Position animiert von 0% → 100%
 * - Infinite Loop mit ease-in-out
 *
 * PERFORMANCE:
 * - Nur CSS (kein JavaScript)
 * - GPU-beschleunigt (background-position)
 * - will-change bereits gesetzt
 *
 * AKTIVIERUNG:
 * - Nur auf Homepage (.home)
 * - Oder via Klasse .hero-gradient-animated
 *
 * @since 1.1.0 - Animation Enhancement Phase 1
 */

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Homepage Hero: Automatisch aktiviert */
.home .wp-block-cover::after,
.wp-block-cover.hero-gradient-animated::after {
  /* Erweiterte Gradient-Definition für Animation */
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(17, 119, 160, 0.15) 25%,    /* SLV Blau Hint */
      rgba(0, 0, 0, 0.6) 50%,
      rgba(252, 188, 91, 0.1) 75%,     /* SLV Gelb Hint */
      rgba(0, 0, 0, 0.4) 85%,
      rgba(0, 0, 0, 0) 100%
  ) !important;

  /* Animation-Setup */
  background-size: 200% 200% !important;
  animation: gradient-shift 15s ease-in-out infinite !important;
}

/* ============================================
   ZUSÄTZLICHE OVERRIDES
   ============================================ */

/**
 * WordPress Core Block Styles überschreiben
 * Falls WordPress eigene Styles hat, die stören
 */

/* Remove default Cover Block overlay wenn zu dunkel */
.wp-block-cover.has-background-dim::before {
  opacity: 0.3 !important;
  /* Standard ist oft 0.5 */
}

/* Verhindere dass Text verschwindet */
.wp-block-cover__inner-container>* {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Sicherstellen dass Buttons sichtbar sind */
.wp-block-cover .wp-block-button {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================
   SERVICE LIST OPTIMIZATION
   ============================================ */

/**
 * Zentrierung der Service-Liste
 * Target: .wp-block-list.is-style-service-list-twoline
 *
 * ENTFERNT: Diese Regel wurde in lists.css korrekt implementiert!
 * display: table !important war der Bug, der die Zentrierung verhindert hat!
 * Zentrierung erfolgt jetzt über lists.css mit:
 * - display: flex (statt table!)
 * - margin: auto
 * - align-items: center
 */

/* Mobile: Volle Breite nutzen
 * ENTFERNT: display: block !important überschreibt display: flex!
 * Mobile-Styles werden jetzt in lists.css verwaltet
 */

/* ============================================
   KERNKOMPETENZEN SEKTION - VOLLSTÄNDIG ZENTRIERTE DARSTELLUNG
   ============================================ */

/**
 * Überschrift "Unsere Kernkompetenzen liegen in:" zentrieren
 *
 * Target: Paragraph direkt VOR der Service-Liste
 * Selektor: :has() CSS Level 4 Selector
 *
 * Browser Support:
 * - Chrome/Edge: ✅ v105+ (2022)
 * - Firefox: ✅ v121+ (2023)
 * - Safari: ✅ v15.4+ (2022)
 *
 * Funktionsweise:
 * - Findet <p> Tag, das direkt vor <ul.is-style-service-list-twoline> steht
 * - Zentriert den Text horizontal
 * - Fügt Bottom-Margin für Abstand zur Liste hinzu
 *
 * Layout-Konzept:
 * → CONTAINER: mittig auf der Seite (max-width: 1140px, margin: auto)
 * → ÜBERSCHRIFT: zentriert (text-align: center)
 * → LISTE: Items zentriert (align-items: center)
 * → RESULTAT: Gesamte Sektion wirkt zentriert und ausgewogen
 */
.wp-block-group p:has(+ ul.is-style-service-list-twoline) {
  text-align: center !important;
  margin-bottom: 1rem !important;
  font-size: 1.125rem !important; /* 18px - Leicht größer für Emphasis */
  font-weight: 600 !important; /* Semi-Bold */
  color: var(--slv-text-dark) !important;
  line-height: 1.4 !important;
}

/**
 * Fallback für Browser ohne :has() Support (< 2022)
 * Nutzer kann manuell im Gutenberg-Editor "Align Center" wählen
 */

/* ============================================
   CTA SECTION + GRADIENT DIVIDER SPACING FIX
   ============================================ */

/**
 * Reduzierter Abstand zwischen Services-Sektion und Gradient Divider
 *
 * PROBLEM (vorher):
 * - Services Section: padding-bottom: 80px (Desktop) / 60px (Mobile)
 * - Gradient Divider: margin-top: 48px (Desktop) / 32px (Mobile)
 * - TOTAL SPACING: 80 + 48 = 128px (Desktop) ❌ ZU GROSS!
 *
 * LÖSUNG (nachher):
 * - Services Section: padding-bottom: 32px (Desktop) / 16px (Mobile) [geändert in services-section.css]
 * - Gradient Divider: margin-top: 16px (Desktop) / 0px (Mobile) [Override hier]
 * - TOTAL SPACING: 32 + 16 = 48px (Desktop) ✅ OPTIMAL!
 *
 * HTML-STRUKTUR:
 * - CTA-Sektion (.services-cta) ist INNERHALB .services-section verschachtelt
 * - Gradient Divider folgt NACH .services-section in .feature-section
 * - Daher: .services-section + .feature-section .gradient-divider
 *
 * SELEKTOR: Adjacent Sibling + Descendant Combinator
 * - Target: Gradient Divider in .feature-section DIREKT NACH .services-section
 * - Funktioniert für alle Gradient-Divider Varianten
 * - Andere Sektionen bleiben unberührt
 *
 * BROWSER SUPPORT:
 * - Adjacent Sibling (+): ✅ IE7+, alle modernen Browser
 * - !important: Notwendig wegen Full-Width Override in dividers.css
 *
 * VERSION: 1.1.0
 * DATUM: 2025-12-13
 * UPDATE: Selektor korrigiert (.services-section statt .cta-section)
 */

/* DESKTOP: Reduzierter Top-Margin für optimale Optik */
.services-section + .feature-section .gradient-divider,
.services-section + .feature-section .wp-block-separator.gradient-divider,
.services-section + .feature-section .wp-block-separator.is-style-gradient-yellow-blue,
.services-section + .feature-section .wp-block-separator.is-style-gradient-blue-yellow,
.services-section + .wp-block-group .gradient-divider,
.services-section + .wp-block-group .wp-block-separator.gradient-divider,
.services-section + .wp-block-group .wp-block-separator.is-style-gradient-yellow-blue,
.services-section + .wp-block-group .wp-block-separator.is-style-gradient-blue-yellow {
  margin-top: 1rem !important;  /* 16px statt 48px (Standard) */
}

/* MOBILE: Kein Top-Margin (Services padding-bottom: 16px reicht aus) */
@media (max-width: 767px) {
  .services-section + .feature-section .gradient-divider,
  .services-section + .feature-section .wp-block-separator.gradient-divider,
  .services-section + .feature-section .wp-block-separator.is-style-gradient-yellow-blue,
  .services-section + .feature-section .wp-block-separator.is-style-gradient-blue-yellow,
  .services-section + .wp-block-group .gradient-divider,
  .services-section + .wp-block-group .wp-block-separator.gradient-divider,
  .services-section + .wp-block-group .wp-block-separator.is-style-gradient-yellow-blue,
  .services-section + .wp-block-group .wp-block-separator.is-style-gradient-blue-yellow {
    margin-top: 0 !important;  /* Kein zusätzlicher Margin auf Mobile */
  }
}

/**
 * RESULTAT (nach Implementierung):
 *
 * Desktop (>768px):
 *   CTA padding-bottom:    32px
 * + Divider margin-top:    16px (override)
 * = TOTAL SPACING:         48px ✅
 *
 * Mobile (<768px):
 *   CTA padding-bottom:    16px
 * + Divider margin-top:     0px (override)
 * = TOTAL SPACING:         16px ✅
 *
 * ANDERE SEKTIONEN (unverändert):
 * - Services + Divider:    48px + 48px = 96px
 * - Hero + Divider:        Individuell definiert
 * - Footer + Divider:      Standard-Margins gelten
 */