/* =========================================================
   Seelenbalsam — Section Backgrounds (deep fix)
   Single source of truth for every section's edge-to-edge
   background. Defeats Elementor wrapper constraints so each
   widget paints its bg the full viewport width and adjacent
   sections blend (no hard edges, no white slivers).
   ========================================================= */

/* ------------------------------------------------------------
   1. UNIVERSAL EDGE-TO-EDGE BREAKOUT
   Every sb-* section escapes its Elementor parent container
   so its bg covers the full viewport. Inner content is
   re-constrained to 1500px via padding.
   ------------------------------------------------------------ */
.sb-hero,
.sb-about-intro,
.sb-services-cards,
.sb-methods-comparison,
.sb-methods-grid-6,
.sb-testimonial,
.sb-dual,
.sb-treat,
.sb-gallery,
.sb-voucher,
.sb-contact,
.sb-mein-weg,
.sb-three-values,
.sb-three-step-process,
.sb-pricing-tiers,
.sb-tiers,
.sb-big-quote,
.sb-faq,
.sb-cta-banner,
.sb-qa-grid,
.sb-opening-hours,
.sb-service-detail,
.sb-map-with-sidebar,
.sb-contact-info-grid,
.sb-footer__contact,
.sb-footer__band,
.sb-footer {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
}

/* Strip the constraining wrappers so backgrounds can paint full bleed.
   The parent .elementor-section already has max-width:none on these
   widgets, but the inner .elementor-container clamps to 1500. Clear it
   for our widgets and rely on the widget's own inner __inner element. */
.elementor-widget-sb-hero,
.elementor-widget-sb-about-intro,
.elementor-widget-sb-services-cards,
.elementor-widget-sb-methods-comparison,
.elementor-widget-sb-methods-grid-6,
.elementor-widget-sb-testimonial,
.elementor-widget-sb-dual-forces,
.elementor-widget-sb-popular-treatments,
.elementor-widget-sb-gallery,
.elementor-widget-sb-voucher,
.elementor-widget-sb-gift-voucher-cta,
.elementor-widget-sb-contact,
.elementor-widget-sb-contact-form,
.elementor-widget-sb-mein-weg,
.elementor-widget-sb-three-values,
.elementor-widget-sb-three-step-process,
.elementor-widget-sb-pricing-tiers,
.elementor-widget-sb-big-quote-section,
.elementor-widget-sb-faq-accordion,
.elementor-widget-sb-cta-banner,
.elementor-widget-sb-qa-grid,
.elementor-widget-sb-opening-hours,
.elementor-widget-sb-service-detail,
.elementor-widget-sb-map-with-sidebar,
.elementor-widget-sb-contact-info-grid,
.elementor-widget-sb-site-footer {
    width: 100% !important;
    max-width: 100% !important;
}
.elementor-widget-sb-hero > .elementor-widget-container,
.elementor-widget-sb-about-intro > .elementor-widget-container,
.elementor-widget-sb-services-cards > .elementor-widget-container,
.elementor-widget-sb-methods-comparison > .elementor-widget-container,
.elementor-widget-sb-methods-grid-6 > .elementor-widget-container,
.elementor-widget-sb-testimonial > .elementor-widget-container,
.elementor-widget-sb-gallery > .elementor-widget-container,
.elementor-widget-sb-voucher > .elementor-widget-container,
.elementor-widget-sb-gift-voucher-cta > .elementor-widget-container,
.elementor-widget-sb-contact > .elementor-widget-container,
.elementor-widget-sb-contact-form > .elementor-widget-container,
.elementor-widget-sb-mein-weg > .elementor-widget-container,
.elementor-widget-sb-three-values > .elementor-widget-container,
.elementor-widget-sb-three-step-process > .elementor-widget-container,
.elementor-widget-sb-pricing-tiers > .elementor-widget-container,
.elementor-widget-sb-big-quote-section > .elementor-widget-container,
.elementor-widget-sb-faq-accordion > .elementor-widget-container,
.elementor-widget-sb-cta-banner > .elementor-widget-container,
.elementor-widget-sb-qa-grid > .elementor-widget-container,
.elementor-widget-sb-opening-hours > .elementor-widget-container,
.elementor-widget-sb-service-detail > .elementor-widget-container,
.elementor-widget-sb-map-with-sidebar > .elementor-widget-container,
.elementor-widget-sb-contact-info-grid > .elementor-widget-container,
.elementor-widget-sb-site-footer > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Elementor sections that contain our widgets must not clamp.
   The .elementor-container has max-width: 1500 via base.css — defeat it. */
.elementor-section:has(.elementor-widget-sb-hero) .elementor-container,
.elementor-section:has(.elementor-widget-sb-about-intro) .elementor-container,
.elementor-section:has(.elementor-widget-sb-services-cards) .elementor-container,
.elementor-section:has(.elementor-widget-sb-methods-comparison) .elementor-container,
.elementor-section:has(.elementor-widget-sb-methods-grid-6) .elementor-container,
.elementor-section:has(.elementor-widget-sb-testimonial) .elementor-container,
.elementor-section:has(.elementor-widget-sb-dual-forces) .elementor-container,
.elementor-section:has(.elementor-widget-sb-popular-treatments) .elementor-container,
.elementor-section:has(.elementor-widget-sb-gallery) .elementor-container,
.elementor-section:has(.elementor-widget-sb-voucher) .elementor-container,
.elementor-section:has(.elementor-widget-sb-gift-voucher-cta) .elementor-container,
.elementor-section:has(.elementor-widget-sb-contact) .elementor-container,
.elementor-section:has(.elementor-widget-sb-contact-form) .elementor-container,
.elementor-section:has(.elementor-widget-sb-mein-weg) .elementor-container,
.elementor-section:has(.elementor-widget-sb-three-values) .elementor-container,
.elementor-section:has(.elementor-widget-sb-three-step-process) .elementor-container,
.elementor-section:has(.elementor-widget-sb-pricing-tiers) .elementor-container,
.elementor-section:has(.elementor-widget-sb-big-quote-section) .elementor-container,
.elementor-section:has(.elementor-widget-sb-faq-accordion) .elementor-container,
.elementor-section:has(.elementor-widget-sb-cta-banner) .elementor-container,
.elementor-section:has(.elementor-widget-sb-qa-grid) .elementor-container,
.elementor-section:has(.elementor-widget-sb-opening-hours) .elementor-container,
.elementor-section:has(.elementor-widget-sb-service-detail) .elementor-container,
.elementor-section:has(.elementor-widget-sb-map-with-sidebar) .elementor-container,
.elementor-section:has(.elementor-widget-sb-contact-info-grid) .elementor-container,
.elementor-section:has(.elementor-widget-sb-site-footer) .elementor-container {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Universal inner-content recentering: each widget's __inner stays at
   1500px max so text/cards don't sprawl to viewport edges. */
.sb-about-intro__inner,
.sb-services-cards__inner,
.sb-methods-comparison__inner,
.sb-testimonial__inner,
.sb-gallery__inner,
.sb-contact__inner,
.sb-mein-weg__inner,
.sb-three-values__inner,
.sb-three-step-process__inner,
.sb-tiers__inner,
.sb-pricing-tiers__inner,
.sb-faq__inner,
.sb-cta__inner,
.sb-qa-grid__inner,
.sb-opening-hours__inner,
.sb-service-detail__inner,
.sb-map-with-sidebar__inner,
.sb-contact-info-grid__inner,
.sb-bigquote__inner,
.sb-big-quote__inner {
    max-width: 1500px !important;
    margin-inline: auto !important;
    padding-inline: clamp(22px, 4.6vw, 64px) !important;
    box-sizing: border-box !important;
}

/* ------------------------------------------------------------
   2. HERO — pink wash, height capped to prevent dominating page
   ------------------------------------------------------------ */
.sb-hero {
    min-height: auto !important;
    background: linear-gradient(180deg, #ffe9ea 0%, #ffe9ea 70%, #ffe9ea 100%) !important;
}
.sb-hero__inner {
    min-height: 640px !important;
    padding-block: clamp(60px, 8vw, 100px) !important;
}

/* ------------------------------------------------------------
   3. ABOUT-INTRO — same pink wash so hero → about blends seamlessly
   ------------------------------------------------------------ */
.sb-about-intro {
    background: var(--mx-color-surface-2, #ffe9ea) !important;
    background-image:
        radial-gradient(ellipse 60% 80% at 90% 10%, rgba(243, 114, 179, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 5% 90%, rgba(207, 101, 154, 0.06) 0%, transparent 55%) !important;
    padding-block: clamp(60px, 8vw, 120px) !important;
}

/* DUAL FORCES — cream wash */
.sb-dual {
    background: #FFFCF5 !important;
    background-image: none !important;
    padding-block: clamp(40px, 5vw, 80px) clamp(60px, 7vw, 110px) !important;
}

/* ------------------------------------------------------------
   4. SERVICES-CARDS — soft pink wash with cream tint, cards stand out
   ------------------------------------------------------------ */
.sb-services-cards {
    background-color: #FFE9EE !important;
    background-image:
        radial-gradient(ellipse 70% 90% at 0% 38%, rgba(243, 114, 179, 0.24) 0%, rgba(243, 114, 179, 0.12) 42%, rgba(243, 114, 179, 0) 72%),
        linear-gradient(90deg, rgba(255, 224, 234, 0.94) 0%, rgba(255, 238, 235, 0.84) 44%, rgba(255, 252, 245, 0.66) 100%),
        url('../images/angebot-bg.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding-block: clamp(63px, 6.5vw, 105px) clamp(80px, 10vw, 140px) !important;
}

/* ------------------------------------------------------------
   5. METHODS-COMPARISON — pink with decorative radial accents
   ------------------------------------------------------------ */
.sb-methods-comparison {
    background-color: #FFFCF5 !important;
    background-image: none !important;
    padding-block: clamp(68px, 6.5vw, 100px) clamp(80px, 10vw, 140px) !important;
}

/* ------------------------------------------------------------
   6. TESTIMONIAL — distinct cream-ish wash so it reads as its own card
   ------------------------------------------------------------ */
.sb-testimonial {
    position: relative !important;
    isolation: isolate !important;
    background-color: #ffeeee !important;
    background-image: url('../images/testimonial-bg.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding-block: clamp(60px, 8vw, 110px) !important;
}

/* Scroll-driven brighten + colour shift — opacity ramps with --sb-scroll (set inline in testimonial.php) */
.sb-testimonial::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    /* Multi-color watercolour mesh — pink-dominant with soft peach,
       lavender and a touch of aqua, like the hero. Fades in on scroll. */
    background:
        radial-gradient(40% 50% at 18% 22%, rgba(255, 138, 191, 0.85) 0%, transparent 60%),
        radial-gradient(42% 52% at 82% 18%, rgba(255, 176, 138, 0.70) 0%, transparent 60%),
        radial-gradient(50% 55% at 75% 80%, rgba(180, 150, 240, 0.70) 0%, transparent 62%),
        radial-gradient(45% 50% at 22% 82%, rgba(140, 205, 240, 0.55) 0%, transparent 60%),
        radial-gradient(60% 60% at 50% 50%, rgba(255, 200, 224, 0.55) 0%, transparent 70%),
        linear-gradient(var(--sb-angle, 120deg), #FFE3EF 0%, #FBD0E4 50%, #EFD7F4 100%) !important;
    opacity: var(--sb-scroll, 0) !important;
    /* brighten + saturate as the section scrolls into view */
    filter: saturate(calc(1 + var(--sb-scroll, 0) * 0.5)) brightness(calc(1 + var(--sb-scroll, 0) * 0.1)) !important;
    transition: filter 0.18s linear !important;
}
/* Second overlay: a brighten wash so the section visibly lifts on scroll */
.sb-testimonial::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%) !important;
    opacity: var(--sb-scroll, 0) !important;
    transition: opacity 0.18s linear !important;
}
.sb-testimonial > .sb-testimonial__wrap {
    position: relative !important;
    z-index: 1 !important;
}

/* ------------------------------------------------------------
   7. GALLERY — shell pink, slightly cooler than testimonial
   ------------------------------------------------------------ */
.sb-gallery {
    background: #FFFCF5 !important;
    background-color: #FFFCF5 !important;
    background-image: none !important;
    padding-block: clamp(80px, 10vw, 140px) !important;
}

/* ------------------------------------------------------------
   8. PRICING / TIERS — pink wash with feature card highlight
   ------------------------------------------------------------ */
.sb-tiers,
.sb-pricing-tiers {
    background: var(--mx-color-surface-3, #ffeeee) !important;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(243, 114, 179, 0.08) 0%, transparent 70%) !important;
    padding-block: clamp(80px, 10vw, 140px) !important;
}

/* ------------------------------------------------------------
   9. GIFT VOUCHER — full-bleed image, soft fade at top & bottom
   so it doesn't have hard edges against pink neighbours.
   ------------------------------------------------------------ */
.sb-voucher {
    min-height: 480px !important;
}
.sb-voucher::before { content: none !important; }
.sb-voucher::after { content: none !important; }
.sb-voucher__overlay { z-index: 1 !important; }
.sb-voucher__inner   { z-index: 2 !important; }

/* ------------------------------------------------------------
   10. CONTACT FORM — pink wash that flows into footer
   ------------------------------------------------------------ */
.sb-contact {
    background: var(--mx-color-surface-2, #ffe9ea) !important;
    background-image:
        linear-gradient(180deg, #ffe9ea 0%, #ffeeee 60%, #ffe9ea 100%) !important;
    padding-block: clamp(60px, 8vw, 110px) !important;
}

/* ------------------------------------------------------------
   11. FOOTER — contact + pink gradient band, smooth transition
   ------------------------------------------------------------ */
.sb-footer__contact {
    background: linear-gradient(180deg, var(--mx-color-surface-2, #ffe9ea) 0%, #ffd6dd 100%) !important;
    padding-block: clamp(60px, 8vw, 100px) !important;
}
.sb-footer__band {
    background: url('../images/footer-bg.webp') center/cover no-repeat, linear-gradient(90deg, #823657 0%, #AA3569 100%) !important;
}

/* ------------------------------------------------------------
   12. SECTIONS WITH WHITE-CARD CONTENT INSIDE
   keep their existing card colors readable on the pink wash.
   ------------------------------------------------------------ */
.sb-tiers__card,
.sb-pricing-tiers__card,
.sb-mein-weg__step,
.sb-three-values__card {
    background: #ffffff !important;
}

/* ------------------------------------------------------------
   13. ABOUT pages / single-widget pages (Über mich, Leistungen,
   Angebote, Kontakt) where one widget dominates: give the body
   a matching pink so any micro-gaps don't show white.
   ------------------------------------------------------------ */
body.page,
body.elementor-page {
    background: #ffe9ea !important;
}

/* ------------------------------------------------------------
   14. RESPONSIVE — tighten inner padding on small screens
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .sb-about-intro__inner,
    .sb-services-cards__inner,
    .sb-methods-comparison__inner,
    .sb-testimonial__inner,
    .sb-gallery__inner,
    .sb-contact__inner,
    .sb-tiers__inner,
    .sb-pricing-tiers__inner,
    .sb-qa-grid__inner,
    .sb-three-step-process__inner,
    .sb-methods-grid-6__inner,
    .sb-big-quote__inner,
    .sb-service-detail__inner,
    .sb-map-with-sidebar__inner,
    .sb-contact-info-grid__inner {
        padding-inline: 0 !important;
    }
}
@media (max-width: 768px) {
    .sb-hero__inner { min-height: auto !important; }
}

/* ============================================================
   ÜBER-MICH page — per-section backgrounds (match design)
   Alternating cream / light-pink, with the FAQ on wine.
   These widgets only appear on the Über-mich page.
   ============================================================ */
.sb-mein-weg          { background: #FFFCF5 !important; }
.sb-methods-grid-6    { background: linear-gradient(135deg, #FFE3EF 0%, #FBD0E4 48%, #EFD7F4 100%) !important; }
.sb-three-step-process{
    background-color: #FFE9EE !important;
    background-image:
        radial-gradient(ellipse 70% 90% at 0% 38%, rgba(243, 114, 179, 0.24) 0%, rgba(243, 114, 179, 0.12) 42%, rgba(243, 114, 179, 0) 72%),
        linear-gradient(90deg, rgba(255, 224, 234, 0.94) 0%, rgba(255, 238, 235, 0.84) 44%, rgba(255, 252, 245, 0.66) 100%),
        url('../images/angebot-bg.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.sb-three-values      { background: #FBE9ED !important; }
.sb-big-quote-section,
.sb-big-quote { background: #FCEFF2 !important; }

/* FAQ accordion on wine, light text */
.sb-qa-grid {
    background: linear-gradient(135deg, #6b2940 0%, #8a3a5e 100%) !important;
}
.sb-qa-grid, .sb-qa-grid * {
    color: #ffffff;
}

/* ------------------------------------------------------------
   KONTAKT PAGE (page 6) — cream backgrounds, uniform (no pink wash)
   ------------------------------------------------------------ */
body.page-id-6 { background: #FFFCF5 !important; }
.page-id-6 .sb-hero,
.page-id-6 .sb-contact,
.page-id-6 .sb-contact-info-grid {
    background: #FFFCF5 !important;
    background-image: none !important;
}
/* map section: soft pink so it reads against the cream page */
.page-id-6 .sb-map {
    background: #FFE9EE !important;
    background-image: none !important;
}

/* Kontakt page: trim map section padding so it doesn't leave a band over the footer */
.page-id-6 .sb-map { padding-top: clamp(28px,3.2vw,48px) !important; padding-bottom: clamp(28px,3.2vw,48px) !important; }
.page-id-6 .sb-map__sidebar { justify-content: center !important; }

/* Kontakt page: contain the pink map section to the 1500 grid (no full-bleed) */
.page-id-6 .sb-map {
    max-width: calc(1500px - 2 * clamp(22px, 4.6vw, 64px)) !important;
    margin-bottom: clamp(48px, 6vw, 90px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}
.page-id-6 .sb-map__inner { padding-inline: clamp(20px,2.2vw,38px) !important; max-width: 100% !important; }