/* ==========================================================================
   BAUWUCHT.DE — Mobile App-Style Overlay
   ==========================================================================
   This file adds an app-like mobile experience ON TOP of the existing
   desktop site. Desktop remains 100% untouched.

   Everything is wrapped in a single @media query so no styles leak
   to screens wider than 768px.
   ========================================================================== */

.mobile-tab-bar,
.mobile-tab-bar__lang-switch-slot,
.whatsapp-float {
  display: none !important;
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    position: relative;
  }

  html {
    background: #5b544c !important;
    scroll-snap-type: y proximity !important;
    scroll-padding-top: 0 !important;
    scroll-behavior: auto !important;
  }

  body {
    background: #f8f9fa !important;
    scroll-snap-type: y proximity !important;
    overscroll-behavior-y: auto !important;
  }

  .page-snap-section {
    scroll-snap-align: center !important;
    scroll-snap-stop: normal !important;
  }

  .landing-services-desktop-shell .page-snap-section,
  .landing-projects-desktop-shell .page-snap-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  html.bauwucht-landing-mobile-snap,
  html.bauwucht-landing-mobile-snap body {
    scroll-snap-type: none !important;
    scroll-padding-top: 0 !important;
    scroll-behavior: auto !important;
    overscroll-behavior-y: contain !important;
  }

  html.bauwucht-landing-mobile-snap.is-programmatic-scroll,
  html.bauwucht-landing-mobile-snap.is-programmatic-scroll body {
    scroll-snap-type: none !important;
  }

  html.bauwucht-landing-mobile-snap .page-snap-section {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  html.bauwucht-landing-mobile-snap .landing-services-desktop-shell .page-snap-section,
  html.bauwucht-landing-mobile-snap .landing-projects-desktop-shell .page-snap-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  #page-container,
  #main-content,
  .et-boc,
  .et-l {
    background: #f8f9fa !important;
  }

  body.home {
    background-color: #5b544c !important;
  }

  body:has(.hero-section-ref),
  body:has(.project-hero),
  body:has(.page-hero) {
    background-color: #5b544c !important;
  }

  body.page-template-page-kalkulator,
  body.page-template-page-leistungen,
  body.page-template-page-leistungen-genehmigungsverfahren,
  body.page-template-page-leistungen-innenausbau,
  body.page-template-page-leistungen-aussenausbau,
  body.page-template-page-leistungen-badezimmersanierung,
  body.page-template-page-leistungen-ladenbau {
    background-color: #f8f9fa !important;
  }

  /* Keep service sub-pages on a relaxed scroll behavior (no section snap interference). */
  body.page-template-page-leistungen,
  body.page-template-page-leistungen-genehmigungsverfahren,
  body.page-template-page-leistungen-innenausbau,
  body.page-template-page-leistungen-aussenausbau,
  body.page-template-page-leistungen-badezimmersanierung,
  body.page-template-page-leistungen-ladenbau {
    scroll-snap-type: none !important;
    overscroll-behavior-y: auto !important;
  }

  body.page-template-page-leistungen .page-snap-section,
  body.page-template-page-leistungen-genehmigungsverfahren .page-snap-section,
  body.page-template-page-leistungen-innenausbau .page-snap-section,
  body.page-template-page-leistungen-aussenausbau .page-snap-section,
  body.page-template-page-leistungen-badezimmersanierung .page-snap-section,
  body.page-template-page-leistungen-ladenbau .page-snap-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  /*
   * The individual service templates are custom-rendered and can arrive without
   * WordPress body classes on mobile. Key off the real page wrapper instead so
   * the global app-style snap never fights normal vertical reading scroll.
   */
  html:has(.leistung-wrapper),
  body:has(.leistung-wrapper) {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
  }

  html:has(.leistung-wrapper) .page-snap-section,
  body:has(.leistung-wrapper) .page-snap-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  body.page-template-page-leistungen #page-container,
  body.page-template-page-leistungen #main-content,
  body.page-template-page-projekte #page-container,
  body.page-template-page-projekte #main-content,
  body.page-template-page-kontakt #page-container,
  body.page-template-page-kontakt #main-content,
  body.page-template-page-kalkulator #page-container,
  body.page-template-page-kalkulator #main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body.page-template-page-leistungen-genehmigungsverfahren #page-container,
  body.page-template-page-leistungen-genehmigungsverfahren #main-content,
  body.page-template-page-leistungen-innenausbau #page-container,
  body.page-template-page-leistungen-innenausbau #main-content,
  body.page-template-page-leistungen-aussenausbau #page-container,
  body.page-template-page-leistungen-aussenausbau #main-content,
  body.page-template-page-leistungen-badezimmersanierung #page-container,
  body.page-template-page-leistungen-badezimmersanierung #main-content,
  body.page-template-page-leistungen-ladenbau #page-container,
  body.page-template-page-leistungen-ladenbau #main-content,
  body.page-template-page-leistungen #page-container,
  body.page-template-page-leistungen #main-content {
    background-color: #f8f9fa !important;
  }

  body.page-template-page-leistungen-genehmigungsverfahren .page-hero,
  body.page-template-page-leistungen-innenausbau .page-hero,
  body.page-template-page-leistungen-aussenausbau .page-hero,
  body.page-template-page-leistungen-badezimmersanierung .page-hero,
  body.page-template-page-leistungen-ladenbau .page-hero,
  body:has(.leistung-wrapper) .page-hero {
    height: clamp(390px, 48svh, 520px) !important;
    min-height: 390px !important;
  }

  body.page-template-page-leistungen-genehmigungsverfahren .page-hero .parallax-mirror-bg,
  body.page-template-page-leistungen-innenausbau .page-hero .parallax-mirror-bg,
  body.page-template-page-leistungen-aussenausbau .page-hero .parallax-mirror-bg,
  body.page-template-page-leistungen-badezimmersanierung .page-hero .parallax-mirror-bg,
  body.page-template-page-leistungen-ladenbau .page-hero .parallax-mirror-bg,
  body:has(.leistung-wrapper) .page-hero .parallax-mirror-bg {
    top: -10% !important;
    height: 120% !important;
  }

  body.page-template-page-leistungen-genehmigungsverfahren .page-hero .depth-layer,
  body.page-template-page-leistungen-innenausbau .page-hero .depth-layer,
  body.page-template-page-leistungen-aussenausbau .page-hero .depth-layer,
  body.page-template-page-leistungen-badezimmersanierung .page-hero .depth-layer,
  body.page-template-page-leistungen-ladenbau .page-hero .depth-layer,
  body:has(.leistung-wrapper) .page-hero .depth-layer {
    margin-top: 0 !important;
  }

  body.page-template-page-leistungen-genehmigungsverfahren #main-content,
  body.page-template-page-leistungen-innenausbau #main-content,
  body.page-template-page-leistungen-aussenausbau #main-content,
  body.page-template-page-leistungen-badezimmersanierung #main-content,
  body.page-template-page-leistungen-ladenbau #main-content,
  body:has(.leistung-wrapper) #main-content {
    padding-top: 52px !important;
  }

  body.page-template-page-leistungen-genehmigungsverfahren .z-step,
  body.page-template-page-leistungen-innenausbau .z-step,
  body.page-template-page-leistungen-aussenausbau .z-step,
  body.page-template-page-leistungen-badezimmersanierung .z-step,
  body.page-template-page-leistungen-ladenbau .z-step,
  body:has(.leistung-wrapper) .z-step {
    margin-bottom: 26px !important;
  }

  body.home,
  body.home #page-container,
  body.home #et-boc,
  body.home #et-main-area,
  body.home #main-content,
  body.home .et_builder_inner_content,
  body.home .main-flow-scaler,
  body.home .hero-section-ref,
  body.home .hero-container,
  body.home .mobile-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  img,
  picture,
  video {
    max-width: 100% !important;
    height: auto !important;
  }

  #page-container,
  #main-content,
  section,
  .redesign-section,
  .portfolio-section,
  .services-snap-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }


/* ==========================================================================
   1. BOTTOM TAB BAR
   ========================================================================== */

.mobile-tab-bar {
    position: fixed !important;
    left: 10px !important;
    right: auto !important;
    bottom: 0 !important;
    bottom: max(0px, calc(env(safe-area-inset-bottom) - 24px)) !important;
    z-index: 100001 !important;
    width: calc(100vw - 20px) !important;
    height: 78px !important;
    max-width: calc(100vw - 20px) !important;
    padding: 0 8px !important;
    background: #FFFFFF !important;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    border-radius: 24px !important;
    border: 1px solid rgba(8, 12, 24, 0.08) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0) !important;
    transform-origin: right bottom !important;
    pointer-events: auto !important;
    overflow: visible !important;
    transition:
        left 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        bottom 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.24s ease,
        opacity 0.24s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-tab-bar.is-shell-collapsed {
    left: calc(100vw - 84px) !important;
    bottom: 26px !important;
    bottom: max(26px, calc(26px + env(safe-area-inset-bottom) - 24px)) !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 9999px !important;
    transition:
        left 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
        bottom 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
        width 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
        height 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
        padding 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
        border-radius 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
        background-color 0.22s ease 0.28s,
        border-color 0.22s ease 0.28s,
        box-shadow 0.22s ease 0.28s,
        transform 0.24s ease,
        opacity 0.24s ease !important;
}

.mobile-tab-bar.is-shell-hidden {
    opacity: 0 !important;
    transform: translateY(calc(180px + env(safe-area-inset-bottom))) !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.mobile-tab-bar__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #999 !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    gap: 4px !important;
    padding: 6px 0 !important;
    flex: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    transition: color 0.2s ease, opacity 0.22s ease, transform 0.28s ease !important;
}

.mobile-tab-bar__item svg {
    width: 22px !important;
    height: 22px !important;
    fill: #999 !important;
    stroke: none !important;
    transition: fill 0.2s ease !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__item:not(.mobile-tab-bar__item--center) {
    opacity: 0 !important;
    transform: translateY(16px) scale(0.86) !important;
    pointer-events: none !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__item[data-tab="home"] {
    transition-delay: 0ms !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__item[data-tab="leistungen"] {
    transition-delay: 80ms !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__item[data-tab="projekte"] {
    transition-delay: 160ms !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__item[data-tab="kontakt"] {
    transition-delay: 240ms !important;
}

.mobile-tab-bar:not(.is-shell-collapsed) .mobile-tab-bar__item[data-tab="home"] {
    transition-delay: 220ms !important;
}

.mobile-tab-bar:not(.is-shell-collapsed) .mobile-tab-bar__item[data-tab="leistungen"] {
    transition-delay: 300ms !important;
}

.mobile-tab-bar:not(.is-shell-collapsed) .mobile-tab-bar__item[data-tab="projekte"] {
    transition-delay: 380ms !important;
}

.mobile-tab-bar:not(.is-shell-collapsed) .mobile-tab-bar__item[data-tab="kontakt"] {
    transition-delay: 460ms !important;
}

/* Center item — floating orange circle (Kalkulator) */
.mobile-tab-bar__item--center {
    position: relative !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__item--center {
    position: absolute !important;
    inset: 0 !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 66px !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

.mobile-tab-bar__item--center span {
    margin-top: 0 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.2s ease, transform 0.24s ease !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__item--center span {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    pointer-events: none !important;
    transition-delay: 120ms !important;
}

.mobile-tab-bar__fab {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #ff6a1e 0%, #fd5d14 50%, #e84e0e 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -28px !important;
    box-shadow: 0 6px 20px rgba(253, 93, 20, 0.45), 0 2px 8px rgba(0,0,0,0.15) !important;
    animation: fabPulse 3s ease-in-out infinite !important;
    position: relative !important;
    transition: margin 0.32s ease, transform 0.32s ease, box-shadow 0.28s ease !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__fab {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
}

@keyframes fabPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(253, 93, 20, 0.45), 0 2px 8px rgba(0,0,0,0.15); }
    50% { box-shadow: 0 6px 28px rgba(253, 93, 20, 0.6), 0 2px 8px rgba(0,0,0,0.15); }
}

.mobile-tab-bar__fab svg {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
}

.mobile-tab-bar__fab-icon {
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    transition: opacity 0.22s ease, transform 0.28s ease !important;
}

.mobile-tab-bar__fab-icon--calculator {
    opacity: 1 !important;
    transition-delay: 0ms !important;
}

.mobile-tab-bar__fab-icon--menu {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.78) !important;
    transition-delay: 0ms !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__fab-icon--calculator {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.78) !important;
    transition-delay: 300ms !important;
}

.mobile-tab-bar.is-shell-collapsed .mobile-tab-bar__fab-icon--menu {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    transition-delay: 360ms !important;
}

.mobile-tab-bar:not(.is-shell-collapsed) .mobile-tab-bar__fab-icon--calculator {
    transition-delay: 260ms !important;
}

.mobile-tab-bar:not(.is-shell-collapsed) .mobile-tab-bar__fab-icon--menu {
    transition-delay: 0ms !important;
}

.mobile-tab-bar__item--center .mobile-tab-bar__fab svg,
.mobile-tab-bar__item--center.is-active .mobile-tab-bar__fab svg {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Active state */
.mobile-tab-bar__item.is-active {
    color: #fd5d14 !important;
}

.mobile-tab-bar__item.is-active svg {
    fill: #fd5d14 !important;
}

.mobile-tab-bar__lang-switch-slot,
.mobile-tab-bar__lang-switch-slot .ios-lang-switch,
.whatsapp-float {
    transition: transform 0.24s ease, opacity 0.24s ease !important;
    opacity: 1 !important;
}

.mobile-tab-bar__lang-switch-slot.is-shell-hidden,
.whatsapp-float.is-shell-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) !important;
}

.mobile-tab-bar-safe-fill.is-shell-collapsed {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(calc(96px + env(safe-area-inset-bottom, 0px))) !important;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-tab-bar,
    .mobile-tab-bar.is-shell-collapsed,
    .mobile-tab-bar__item,
    .mobile-tab-bar__item--center span,
    .mobile-tab-bar__fab,
    .mobile-tab-bar__fab-icon,
    .mobile-tab-bar-safe-fill {
        transition-duration: 0.08s !important;
        transition-delay: 0ms !important;
        animation: none !important;
    }
}


/* ==========================================================================
   2. HIDE EXISTING MOBILE NAV & OVERLAYS
   ========================================================================== */

#mobile-hamburger-btn {
    display: none !important;
}

#mobile-nav-overlay {
    display: none !important;
}

#mobile-lang-switch-container {
    display: none !important;
}

.sticky-conversion-bar {
    display: none !important;
}

/* Reposition WhatsApp float above tab bar */
.whatsapp-float {
    bottom: 118px !important;
    bottom: max(118px, calc(118px + env(safe-area-inset-bottom) - 24px)) !important;
}


/* ==========================================================================
   3. BODY PADDING FOR TAB BAR
   ========================================================================== */

body {
    padding-bottom: 126px !important;
}

footer {
    margin-bottom: 0 !important;
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}


/* ==========================================================================
   4. SHARED APP TYPOGRAPHY & CARDS
   ========================================================================== */

.mobile-app-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 24px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}


/* ==========================================================================
   5. CALCULATOR — MOBILE TWEAKS (keep dark glassmorphism)
   ========================================================================== */

/* Hide left value-propositions column in non-compact mode */
.calc-flex-row > div:first-child:not(:only-child) {
    display: none !important;
}

.calc-flex-row {
    gap: 0 !important;
}

/* Tighten padding on mobile */
.divi-quiz-wrapper {
    border-radius: 16px !important;
    padding: 24px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Pill-shaped buttons */
.premium-btn {
    border-radius: 50px !important;
}


/* ==========================================================================
   6. LANDING PAGE HERO MOBILE
   ========================================================================== */

/* Hero: auto height, natural flow */
.hero-section-ref {
    min-height: 100svh !important;
    min-height: calc(100svh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;
    height: auto !important;
    margin-top: calc(-1 * env(safe-area-inset-top)) !important;
    padding-top: calc(42px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    justify-content: flex-start !important;
}

/* Hide desktop hero content & slider on mobile */
.hero-visuals {
    display: none !important;
}

.hero-content {
    display: none !important;
}

/* Hero container: single column */
.hero-container {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    align-content: start !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
}

/* === MOBILE HERO CONTENT === */
.mobile-hero-content {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 42px !important;
    transform: translateY(calc(-13vh)) !important;
    position: relative !important;
    isolation: isolate !important;
}

.bauwucht-device-preview-mobile .mobile-hero-content {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 42px !important;
    transform: translateY(calc(-13vh)) !important;
    position: relative !important;
    isolation: isolate !important;
}

.mobile-hero-content::before,
.bauwucht-device-preview-mobile .mobile-hero-content::before {
    content: none !important;
}

.mobile-hero-content > *,
.bauwucht-device-preview-mobile .mobile-hero-content > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Badge row */
.mobile-hero-badges {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}

.mobile-hero-lang-switch-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 0 22px 0 !important;
    pointer-events: auto !important;
}

.mobile-hero-lang-switch {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 68px !important;
    min-width: 68px !important;
    height: 25px !important;
    min-height: 25px !important;
    padding: 2px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(18, 18, 20, 0.38) !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.mobile-hero-lang-switch__thumb {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    z-index: 1 !important;
    width: calc(50% - 2px) !important;
    height: calc(100% - 4px) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16) !important;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mobile-hero-lang-switch.is-en .mobile-hero-lang-switch__thumb {
    transform: translateX(100%) !important;
}

.mobile-hero-lang-switch__label {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50% !important;
    height: 100% !important;
    color: rgba(255, 255, 255, 0.72) !important;
    transition: color 0.18s ease !important;
}

.mobile-hero-lang-switch.is-de .mobile-hero-lang-switch__label--de,
.mobile-hero-lang-switch.is-en .mobile-hero-lang-switch__label--en {
    color: #080c18 !important;
}

.mobile-badge-location {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(18, 18, 20, 0.34) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
}

.mobile-badge-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(18, 18, 20, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
    color: #FFB300 !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
}

.mobile-badge-rating strong {
    color: #fff !important;
}

/* Mobile hero heading — big, bold, impactful */
.mobile-hero-heading {
    color: #ffffff !important;
    font-size: 2.6rem !important;
    font-weight: 900 !important;
    line-height: 1.0 !important;
    text-transform: uppercase !important;
    margin: 0 0 18px 0 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    text-align: left !important;
    display: inline-block !important;
    max-width: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.mobile-hero-heading span {
    color: #fd5d14 !important;
}

/* Mobile subtitle */
.mobile-hero-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
    display: inline-block !important;
    max-width: min(92%, 34rem) !important;
    padding: 0 !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* "KOSTENLOSES ANGEBOT IN 2 MINUTEN!" label — hidden, calc speaks for itself */
.mobile-hero-calc-label {
    display: none !important;
}



/* === CALCULATOR INSIDE HERO === */
.mobile-hero-calculator-slot {
    width: 100% !important;
    position: relative !important;
    z-index: 5 !important;
    margin: 12px 0 42px !important;
    padding: 0 !important;
    left: 0 !important;
    right: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
}

.mobile-hero-calculator-slot .calculator-section,
.bauwucht-device-preview-mobile .mobile-hero-calculator-slot .calculator-section {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    position: relative !important;
    left: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: none !important;
}

.mobile-hero-calculator-slot .calculator-section > .container,
.mobile-hero-calculator-slot .calculator-section.is-mobile-hero-calculator > .container {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.mobile-hero-calculator-slot .calculator-section.is-mobile-hero-calculator {
    display: block !important;
}

/* Hide calc section header & parallax bg inside hero */
.mobile-hero-calculator-slot .calculator-section h2 {
    display: none !important;
}

.mobile-hero-calculator-slot .calculator-section.is-mobile-hero-calculator .divi-quiz-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    transform: none !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(8, 12, 24, 0.42), rgba(8, 12, 24, 0.58)) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
}

.mobile-hero-calculator-slot .calculator-section.is-mobile-hero-calculator .calc-flex-row {
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

.mobile-hero-calculator-slot .parallax-mirror-bg {
    display: none !important;
}

.mobile-hero-calculator-slot .calc-flex-row > div:first-child:not(:only-child) {
    display: none !important;
}

.mobile-hero-calculator-slot .calc-flex-row {
    justify-content: flex-start !important;
    gap: 0 !important;
}

.mobile-hero-calculator-slot .calc-flex-row > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.mobile-hero-calculator-slot .quiz-step,
.mobile-hero-calculator-slot h3,
.mobile-hero-calculator-slot input,
.mobile-hero-calculator-slot label,
.mobile-hero-calculator-slot .progress {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

.desktop-calculator-shell {
    display: block;
}

@media (max-width: 768px) {
    .desktop-calculator-shell {
        display: none !important;
    }
}

.bauwucht-device-preview-mobile .desktop-calculator-shell {
    display: none !important;
}

/* Review strip repositioning */
.review-strip-vfinal {
    position: static !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

/* Hide CTA group on mobile */
.hero-cta-group {
    display: none !important;
}

.bauwucht-device-preview-mobile .hero-content {
    display: none !important;
}

.bauwucht-device-preview-mobile .hero-visuals {
    display: none !important;
}

.bauwucht-device-preview-mobile .hero-container {
    grid-template-columns: 1fr !important;
    padding: 74px 16px 0 !important;
    align-content: start !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
    align-items: start !important;
}

.bauwucht-device-preview-mobile .hero-section-ref {
    min-height: 100svh !important;
    min-height: calc(100svh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;
    height: auto !important;
    margin-top: calc(-1 * env(safe-area-inset-top)) !important;
    padding: calc(94px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: visible !important;
    background-image: url('/wp-content/uploads/2026/06/bauwucht-orange-renovation-hero-v7.png') !important;
    background-size: auto 115% !important;
    background-position: center 55% !important;
    background-repeat: no-repeat !important;
    background-color: #6f6a5f !important;
}

.bauwucht-device-preview-mobile .hero-section-ref > .parallax-mirror-bg,
.bauwucht-device-preview-mobile .hero-section-ref > .hero-section-overlay {
    display: none !important;
}

.bauwucht-device-preview-mobile .review-strip-vfinal {
    background: #5f574e !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding: 10px 0 14px !important;
    margin-top: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    z-index: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.bauwucht-device-preview-mobile .review-strip-vfinal .review-item div {
    color: #ffffff !important;
}

.bauwucht-device-preview-mobile .review-strip-vfinal .review-item .stars {
    color: #ffb300 !important;
}

.bauwucht-device-preview-mobile .review-strip-vfinal .review-item .author {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* ==========================================================================
   7. LANDING PAGE SECTIONS — APP-STYLE
   ========================================================================== */

/* --- Services section: horizontal swipeable carousel --- */
.redesign-section {
    padding: 40px 0 !important;
    overflow: visible !important;
}

.services-fullwidth-layout {
    padding: 0 !important;
    overflow: visible !important;
}

/* Section title */
.redesign-section > .services-fullwidth-layout > .section-title,
.redesign-section .section-title {
    padding: 0 20px !important;
    font-size: 1.6rem !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

/* Make service panels container a horizontal snap-scroll carousel */
.vertical-services-container,
.leistungen-grid-parallax {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: none !important;
    scroll-padding-inline: 0 !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    scrollbar-width: none !important;   /* Firefox */
}

.vertical-services-container::-webkit-scrollbar,
.leistungen-grid-parallax::-webkit-scrollbar {
    display: none !important;           /* Chrome/Safari */
}

/* Each panel = full viewport width, tall card */
.service-panel-minimal {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 420px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    position: relative !important;
}

/* Panel bg — cover full card */
.service-panel-minimal .panel-bg-minimal {
    top: 0 !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Stronger overlay for text readability */
.panel-overlay-minimal {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%) !important;
}

/* Panel content: bottom-aligned */
.panel-content-minimal {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 30px 24px !important;
    z-index: 3 !important;
}

/* Panel title: huge, bold */
.panel-title-minimal {
    font-size: 2rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1.05 !important;
    color: #fff !important;
    margin-bottom: 12px !important;
}

.panel-bullets-minimal {
    margin: 0 !important;
    padding: 0 !important;
}

.panel-bullets-minimal li {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Carousel dot indicators (injected via JS) */
.mobile-services-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 0 20px !important;
}

.mobile-services-dots .dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ccc !important;
    transition: all 0.3s ease !important;
}

.mobile-services-dots .dot.active {
    background: #fd5d14 !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* --- Trust section: UNCHANGED (per user request) --- */
.trust-section {
    padding: 60px 0 !important;
    background: #ffffff !important;
}

.trust-bento {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
}

.trust-card {
    border-radius: 20px !important;
}

/* --- Portfolio section: mobile-native swipeable cards --- */
.portfolio-section {
    padding: 60px 0 !important;
}

.portfolio-section .p-track {
    scroll-snap-type: none !important;
}

.portfolio-section .p-card-wrap {
    scroll-snap-align: none !important;
    flex: 0 0 clamp(60vw, 68vw, 290px) !important;
}

.portfolio-section .p-card {
    border-radius: 20px !important;
    overflow: hidden !important;
}

.how-we-work-section,
.how-we-work-section .how-we-work-grid {
  width: 100% !important;
  max-width: 100% !important;
}

.how-we-work-section .architect-planning-col,
.how-we-work-section .timeline-col,
.hww-timeline {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.how-we-work-section .architect-video-container {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.how-we-work-section .hww-content {
  min-width: 0 !important;
  width: 100% !important;
}

.how-we-work-section .hww-content h4,
.how-we-work-section .hww-content p {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.how-we-work-section .architect-video-container video,
.how-we-work-section .deferred-media-video,
.how-we-work-section video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Hide desktop nav arrows on mobile */
.portfolio-section .p-nav {
    display: none !important;
}

/* Portfolio heading */
.portfolio-section h2 {
    font-size: 2rem !important;
    text-align: left !important;
    padding: 0 20px !important;
}

.portfolio-section h2 + p {
    display: none !important;
}

/* --- How We Work --- */
.how-we-work-section {
    padding: 60px 16px !important;
}

/* --- FAQ --- */
.faq-section-white {
    padding: 60px 0 !important;
}

.faq-section-white .redesign-section {
    padding: 0 16px !important;
}

.faq-item {
    border-radius: 16px !important;
}

/* Section titles — bold, left-aligned, app-style */
.section-title {
    font-size: 1.6rem !important;
    margin-bottom: 30px !important;
    font-weight: 800 !important;
}


/* ==========================================================================
   8. CONTACT PAGE MOBILE
   ========================================================================== */

/* Shorter hero */
body.page-template-page-kontakt .page-hero {
    height: 25vh !important;
}

/* Form section */
.outreach-form-section {
    padding: 32px 0 !important;
}

.outreach-main-layout {
    gap: 20px !important;
}

/* Form card: app-style */
.outreach-form-card {
    border-radius: 20px !important;
    margin: 0 8px !important;
    padding: 22px 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}


/* ==========================================================================
   9. ABOUT US PAGE MOBILE
   ========================================================================== */

/* Shorter hero */
body.page-template-page-ueber-uns .page-hero {
    height: 25vh !important;
}

/* Team image */
.hero-image-container img {
    border-radius: 20px !important;
}

/* Founder cards */
.founder-card {
    border-radius: 20px !important;
    padding: 24px !important;
    margin: 0 16px !important;
}

/* Philosophy text */
.philosophy-text-block {
    padding: 0 16px !important;
}

.philosophy-text-block p {
    text-align: left !important;
}


/* ==========================================================================
   10. KALKULATOR STANDALONE PAGE — LIGHT THEME
   ========================================================================== */

body.page-template-page-kalkulator #kalkulator-section {
    padding-top: 80px !important;
    background: #f9f9f9 !important;
}

body.page-template-page-kalkulator .parallax-mirror-bg {
    display: none !important;
}

body.page-template-page-kalkulator #kalkulator-section h2 {
    color: #1A1A1A !important;
    text-shadow: none !important;
}

body.page-template-page-kalkulator .divi-quiz-wrapper {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e5e5e5 !important;
    color: #1A1A1A !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

body.page-template-page-kalkulator .divi-quiz-wrapper h3 {
    color: #1A1A1A !important;
    text-shadow: none !important;
}

body.page-template-page-kalkulator .quiz-opt {
    background: #FFFFFF !important;
    border: 2px solid #e0e0e0 !important;
    color: #1A1A1A !important;
}

body.page-template-page-kalkulator .quiz-opt:has(input:checked),
body.page-template-page-kalkulator .quiz-opt.selected {
    border-color: #fd5d14 !important;
    background: rgba(253, 93, 20, 0.04) !important;
}

body.page-template-page-kalkulator input[type="text"],
body.page-template-page-kalkulator input[type="email"],
body.page-template-page-kalkulator input[type="tel"],
body.page-template-page-kalkulator input[type="number"] {
    background: #f5f5f5 !important;
    border: 2px solid #e0e0e0 !important;
    color: #1A1A1A !important;
}

body.page-template-page-kalkulator input::placeholder {
    color: #999 !important;
}

body.page-template-page-kalkulator .prev-step {
    background: #e8e8e8 !important;
    color: #1A1A1A !important;
}

body.page-template-page-kalkulator .progress {
    background: #e8e8e8 !important;
}

body.page-template-page-kalkulator .consent-label,
body.page-template-page-kalkulator .consent-label span {
    color: #666 !important;
}

body.page-template-page-kalkulator #successMsg h3 {
    color: #1A1A1A !important;
}

body.page-template-page-kalkulator #successMsg p {
    color: #666 !important;
}


} /* END @media (max-width: 768px) */