/* ==========================================================================
   ZUGUMZUG PREMIUM DESIGN SYSTEM v4.0 — OFF-WHITE HIGH CONTRAST EDITION
   Modern luxury off-white theme with electric sky blue accents,
   2px edge-to-edge margins, and maximum contrast typography
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */
:root {
  /* Brand Sky Blue Colors */
  --brand-blue:           #0ea5e9;     /* primary vivid sky blue */
  --brand-blue-bright:    #38bdf8;     /* electric cyan */
  --brand-blue-hover:     #0284c7;     /* deep sky blue */
  --brand-blue-dark:      #0369a1;     /* rich azure */
  --brand-blue-glow:      rgba(14, 165, 233, 0.35);
  --brand-blue-subtle:    rgba(14, 165, 233, 0.08);
  --brand-blue-border:    rgba(14, 165, 233, 0.25);
  --brand-orange:         #f97316;     /* warm accent */

  /* Legacy variable aliases for seamless backward compatibility */
  --brand-green:          #0ea5e9;
  --brand-green-bright:   #0284c7;
  --brand-green-hover:    #0369a1;
  --brand-green-glow:     rgba(14, 165, 233, 0.35);
  --brand-green-subtle:   rgba(14, 165, 233, 0.08);
  --brand-green-border:   rgba(14, 165, 233, 0.25);

  /* Background Layers (OFF-WHITE SYSTEM FOR MAXIMUM CONTRAST) */
  --bg-base:              #f8fafc;     /* crisp off-white canvas */
  --bg-surface:           #f1f5f9;     /* subtle contrasting surface (slate-100) */
  --bg-surface-2:         #e8edf4;     /* light elevated surface */
  --bg-card:              #ffffff;     /* pure crisp white cards */
  --bg-glass:             rgba(255, 255, 255, 0.90);

  /* Text — HIGH CONTRAST (WCAG AAA Compliant) */
  --text-primary:         #0f172a;     /* deep charcoal black (maximum readability) */
  --text-secondary:       #334155;     /* clear dark slate body text */
  --text-muted:           #64748b;     /* medium slate for captions & metadata */
  --text-on-blue:         #ffffff;

  /* Borders */
  --border-subtle:        #e2e8f0;
  --border-card:          #e2e8f0;
  --border-active:        rgba(14, 165, 233, 0.60);

  /* Shadows */
  --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:            0 4px 18px rgba(0, 0, 0, 0.06);
  --shadow-lg:            0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-blue:          0 6px 24px rgba(14, 165, 233, 0.25);
  --shadow-green:         0 6px 24px rgba(14, 165, 233, 0.25);

  /* Transitions */
  --transition-fast:      all 0.18s ease;
  --transition-smooth:    all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce:    all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 100px;

  /* *** OVERRIDE WEBFLOW DARK THEME VARIABLES *** */
  /* Webflow uses --ci: #0e1710 (near black) as brand color for backgrounds.
     We override it here to match our sky-blue off-white premium theme. */
  --ci:        #f8fafc !important;   /* off-white — overrides dark navbar/bar bg */
  --ci-light:  #e0f2fe !important;   /* sky-blue-100 — replaces green accent */
}

/* ==========================================================================
   GLOBAL RESETS & TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

body {
  font-family: var(--font-body) !important;
  background-color: var(--bg-base) !important;
  color: var(--text-secondary) !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
}

.page-wrapper, .main-wrapper {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; font-weight: 800 !important; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important; font-weight: 800 !important; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.75rem) !important; }

p {
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
}

/* Guarantee white text on dark surfaces & headers */
.text-color-white,
.text-color-white *,
.text-color-alternate,
.text-color-alternate * {
  color: #ffffff !important;
}

.text-color-secondary, .text-muted-zemanta, .paragraph {
  color: var(--text-secondary) !important;
}

/* Brand highlight sky blue gradient text */
.color-is-blue, .highlight-text, .text-color-primary, .brand-highlight {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: var(--brand-blue-hover) !important;
  font-weight: 800 !important;
  display: inline !important;
}

/* ==========================================================================
   EXACT 4PX SCREEN PADDING (ZERO HORIZONTAL SCROLL)
   Root-level fix: 100vw causes overflow when scrollbar is present.
   We use width:100% instead and ensure all containers are properly contained.
   ========================================================================== */
.navbar1_component {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;           /* NOT 100vw — avoids horizontal scroll */
  max-width: 100% !important;
  box-sizing: border-box !important;
  left: 0 !important;
  right: 0 !important;
  min-height: unset !important;
  height: auto !important;
  transition: background 0.3s !important;
}

.anouncement-bar {
  background: #f8fafc !important;   /* off-white — overrides --ci dark color */
  color: var(--text-secondary) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;           /* NOT 100vw — avoids horizontal scroll */
  max-width: 100% !important;
  box-sizing: border-box !important;
  z-index: 1001 !important;
  position: relative !important;
  min-height: unset !important;
}

/* Override all Webflow 100vw widths that cause horizontal overflow */
.anouncement-bar,
.navbar1_component,
.w-nav,
.padding-global,
.padding-global-2,
.padding-global-3,
footer,
.footer15_component {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

/* ==========================================================================
   RESPONSIVE CONTAINER & SECTION PADDING
   Restores generous horizontal padding and centered containers across all pages
   ========================================================================== */
.padding-global,
.padding-global-2,
.padding-global-3 {
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .padding-global,
  .padding-global-2,
  .padding-global-3 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.container-large,
.container-large-2,
.container-large-3 {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.navbar1_container,
.announcement-flex {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.navbar1_logo-link {
  margin-left: 0 !important;
  padding-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

.navbar1_logo {
  margin-left: 0 !important;
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12)) !important;
  transition: var(--transition-smooth) !important;
  flex-shrink: 0 !important;
}

.navbar1_logo-link:hover .navbar1_logo {
  transform: scale(1.06) rotate(-3deg) !important;
  filter: drop-shadow(0 3px 10px rgba(14, 165, 233, 0.3)) !important;
}

.padding-section-large {
  padding-top: clamp(28px, 3.5vw, 44px) !important;
  padding-bottom: clamp(28px, 3.5vw, 44px) !important;
}

.padding-section-medium {
  padding-top: clamp(18px, 2.5vw, 30px) !important;
  padding-bottom: clamp(18px, 2.5vw, 30px) !important;
}

.zuhause_hero-header-sektion_component {
  justify-items: start !important;
}

/* Announcement flex */
.announcement-flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  gap: 12px !important;
  padding: 0 !important;
  min-height: 26px !important;
}

.announcement-left {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.announcement-left a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: var(--transition-fast) !important;
  font-weight: 600 !important;
}

.announcement-left a:hover {
  color: var(--brand-blue) !important;
}

.topbar-icon {
  width: 13px !important;
  height: 13px !important;
  stroke: var(--brand-blue) !important;
  flex-shrink: 0 !important;
  opacity: 0.95 !important;
  vertical-align: middle !important;
  transition: stroke 0.2s ease, transform 0.2s ease !important;
}

.announcement-left a:hover .topbar-icon {
  stroke: var(--brand-blue-hover) !important;
  transform: scale(1.12) !important;
  opacity: 1 !important;
}

.topbar-location {
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

.announcement-left span.hide-mobile {
  color: #94a3b8 !important;
  opacity: 0.8 !important;
}

/* Language Pill */
.lang-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.lang-pill span.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 800 !important;
}

.lang-pill a {
  color: #64748b !important;
  text-decoration: none !important;
  padding: 2px 6px !important;
  transition: var(--transition-fast) !important;
  border-radius: var(--radius-pill) !important;
}

.lang-pill a:hover {
  color: var(--brand-blue-hover) !important;
  background: rgba(14, 165, 233, 0.1) !important;
}

/* ==========================================================================
   MAIN NAVIGATION & LOGO
   ========================================================================== */
.navbar1_container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 54px !important;
  min-height: 54px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.logo-text-wrapper {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.logo-text {
  font-family: var(--font-heading) !important;
  color: #0f172a !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
  margin: 0 !important;
  padding: 0 !important;
}

.logo-tagline {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 8.5px !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
  letter-spacing: 0.45px !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Nav Links */
.navbar1_menu {
  display: flex !important;
  align-items: center !important;
}

.navbar1_menu-links {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.navbar1_link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition-fast) !important;
  position: relative !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

.navbar1_link .nav-icon {
  width: 15px !important;
  height: 15px !important;
  stroke: var(--brand-blue) !important;
  stroke-width: 2.2 !important;
  opacity: 0.9 !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, stroke 0.2s ease !important;
  vertical-align: middle !important;
}

.navbar1_link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--brand-blue) !important;
  border-radius: 2px !important;
  transition: width 0.2s ease !important;
}

.navbar1_link:hover {
  color: var(--brand-blue-hover) !important;
  background: rgba(14, 165, 233, 0.08) !important;
}

.navbar1_link:hover .nav-icon {
  opacity: 1 !important;
  stroke: var(--brand-blue-hover) !important;
  transform: translateY(-1px) scale(1.1) !important;
}

.navbar1_link:hover::after {
  width: 60% !important;
}

.navbar1_link.w--current {
  color: var(--brand-blue-hover) !important;
  background: rgba(14, 165, 233, 0.08) !important;
}

.navbar1_link.w--current .nav-icon {
  opacity: 1 !important;
  stroke: var(--brand-blue-hover) !important;
}

.navbar1_link.w--current::after {
  width: 60% !important;
}

.navbar1_menu-buttons .button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  height: auto !important;
}

.navbar1_menu-buttons .button .nav-cta-icon {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

.navbar1_menu-buttons .button:hover .nav-cta-icon {
  transform: translateX(3px) !important;
}

/* ==========================================================================
   CTA BUTTONS — Sky Blue Luxury Pill Design with High Contrast
   ========================================================================== */
.button, .mainbutton, .w-button {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.32) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  letter-spacing: 0.02em !important;
}

.button:hover, .mainbutton:hover, .w-button:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  box-shadow: 0 6px 24px rgba(14, 165, 233, 0.45) !important;
  transform: translateY(-2px) scale(1.02) !important;
  color: #ffffff !important;
}

.button:active, .mainbutton:active, .w-button:active {
  transform: translateY(0px) scale(0.99) !important;
}

.button.is-secondary, .mainbutton-outlines {
  background: rgba(14, 165, 233, 0.06) !important;
  border: 1.8px solid #0ea5e9 !important;
  color: #0284c7 !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.12) !important;
}

.button.is-secondary:hover, .mainbutton-outlines:hover {
  background: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.35) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.btn-icon {
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.btn-arrow {
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.button:hover .btn-arrow, .w-button:hover .btn-arrow {
  transform: translateX(4px) !important;
}

/* ==========================================================================
   HERO SECTION — Fresh Off-White Aesthetic
   ========================================================================== */
.section_hero, .hero1_component, [class*="hero"] {
  position: relative !important;
  overflow: hidden !important;
}

.hero1_component::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(14, 165, 233, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(56, 189, 248, 0.05) 0%, transparent 50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.usp-hero-grid .zuhause_vorteile-sektion_item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.usp-hero-grid .zuhause_vorteile-sektion_item p {
  color: #0f172a !important;
}

/* ==========================================================================
   SECTIONS & PACING (TIGHT WHITESPACE)
   ========================================================================== */
section {
  position: relative !important;
}

.padding-section-large,
.section_zuhause_benefits .padding-section-large,
.section_layout25 .padding-section-large,
.section_layout121 .padding-section-large,
.section_preise .padding-section-large,
.section_zuhause_about .padding-section-large,
.section_zuhause_dienstleistungen-sektion .padding-section-large,
.section_faq1 .padding-section-large,
.section-blog .padding-section-large {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.padding-section-medium {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.margin-bottom.margin-xxlarge { margin-bottom: 24px !important; }
.margin-bottom.margin-xlarge { margin-bottom: 20px !important; }
.margin-bottom.margin-large { margin-bottom: 16px !important; }
.margin-bottom.margin-medium { margin-bottom: 14px !important; }
.margin-bottom.margin-small { margin-bottom: 10px !important; }
.margin-bottom.margin-xsmall { margin-bottom: 8px !important; }
.margin-bottom.margin-xxsmall { margin-bottom: 6px !important; }

.margin-top.margin-xxlarge { margin-top: 24px !important; }
.margin-top.margin-xlarge { margin-top: 20px !important; }
.margin-top.margin-large { margin-top: 16px !important; }
.margin-top.margin-medium { margin-top: 14px !important; }
.margin-top.margin-small { margin-top: 10px !important; }
.margin-top.margin-xsmall { margin-top: 8px !important; }

.button-group {
  margin-top: 16px !important;
  gap: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Alternating Section Backgrounds for Subtle Depth */
.section_preise {
  background: var(--bg-surface) !important;
}

.section_zuhause_benefits {
  background: var(--bg-base) !important;
}

.section_zuhause_benefits::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent) !important;
}

.section_layout25, .section_layout484 {
  background: var(--bg-surface) !important;
}

/* layout484 is the animated text scroll section — Webflow sets it to 90vh which wastes huge space */
.section_layout484 {
  height: auto !important;
  max-height: none !important;
  min-height: unset !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.section_layout121 {
  background: var(--bg-base) !important;
}

.section_zuhause_dienstleistungen-sektion {
  background: var(--bg-surface) !important;
}

.section_faq1 {
  background: var(--bg-base) !important;
}

.section_zuhause_about {
  background: var(--bg-surface) !important;
}

.section_zuhause_cta-sektion {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
}

.section-blog {
  background: var(--bg-surface) !important;
}

.section_zuhause_testimonial-sektion {
  background: var(--bg-base) !important;
}

/* ==========================================================================
   CONTENT BOXES & CARDS — CRISP WHITE WITH HIGH CONTRAST
   ========================================================================== */

/* 1. Timeline Step Cards (#ablauf) */
.layout121_timeline-step {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 18px 22px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.layout121_timeline-step:hover {
  border-color: #0ea5e9 !important;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.15) !important;
  transform: translateY(-2px) !important;
}

.layout121_timeline-step h3,
.layout121_timeline-step h4,
.layout121_timeline-step .heading-style-h5 {
  color: #0f172a !important;
}

.layout121_timeline-step p {
  color: #334155 !important;
}

.ablauf-number {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
  border: 2px solid #ffffff !important;
  flex-shrink: 0 !important;
}

/* 2. Stats Cards in Benefits Section */
.zuhause_about_item-list {
  gap: 12px !important;
}

.zuhause_about_text-wrapper {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}

.zuhause_about_text-wrapper:hover {
  border-color: #0ea5e9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.12) !important;
}

.zuhause_about_text-wrapper .heading-style-h2 {
  color: #0284c7 !important;
}

.zuhause_about_text-wrapper p {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* 3. Feature Cards in Warum ZugUmZug Section */
.layout25_item-list {
  gap: 12px !important;
}

.section_layout25 .layout25_text-wrapper {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}

.section_layout25 .layout25_text-wrapper:hover {
  border-color: #0ea5e9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.12) !important;
}

.section_layout25 .layout25_text-wrapper h3,
.section_layout25 .layout25_text-wrapper .heading-style-h6 {
  color: #0f172a !important;
}

.section_layout25 .layout25_text-wrapper p {
  color: #334155 !important;
}

/* 4. Price Cards in Preise Section */
.section_preise .layout25_item-list {
  gap: 12px !important;
}

.section_preise .layout25_text-wrapper {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}

.section_preise .layout25_text-wrapper:hover {
  border-color: #0ea5e9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.12) !important;
}

.section_preise .layout25_text-wrapper .heading-style-h6 {
  color: #0f172a !important;
}

.section_preise .layout25_text-wrapper p {
  color: #334155 !important;
}

.section_preise .layout25_text-wrapper .color-is-blue {
  color: #0284c7 !important;
}

/* 5. Services items in Dienstleistungen Section - Identical Size */
.service-list-2col {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 20px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.service-list-2col > .w-dyn-item {
  display: flex !important;
  height: 100% !important;
  width: 100% !important;
  align-self: stretch !important;
}

.layout285_item {
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px 22px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.layout285_item:hover {
  border-color: #0ea5e9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.14) !important;
}

.layout285_item-icon-wrapper {
  background: rgba(14, 165, 233, 0.08) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  border-radius: 8px !important;
  padding: 5px 11px !important;
  display: inline-flex !important;
  margin-bottom: 12px !important;
  align-self: flex-start !important;
}

.layout285_item-icon-wrapper .text-style-tagline {
  color: #0284c7 !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
}

.layout285_item h3, 
.layout285_item .heading-style-h5 {
  color: #0f172a !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  min-height: 2.7rem !important;
  display: flex !important;
  align-items: flex-start !important;
}

.layout285_item .text-size-small.w-richtext {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.layout285_item p {
  color: #475569 !important;
  font-size: 0.925rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

@media screen and (max-width: 991px) {
  .service-list-2col {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 16px !important;
  }
  .layout285_item h3,
  .layout285_item .heading-style-h5 {
    min-height: auto !important;
  }
}

@media screen and (max-width: 600px) {
  .service-list-2col {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
  }
}

/* 5b. Über Uns & Kontakt Sektion High-Contrast Styling */
.section_uber-uns_kontakt-sektion {
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
}

.uber-uns_kontakt-sektion_grid-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.uber-uns_kontakt-sektion_item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 36px 30px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.uber-uns_kontakt-sektion_item:hover {
  border-color: #0ea5e9 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.12) !important;
}

.uber-uns_kontakt-sektion_icon-wrapper {
  background: rgba(14, 165, 233, 0.1) !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  border-radius: 14px !important;
  width: 56px !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

.uber-uns_kontakt-sektion_icon-wrapper .icon-embed-medium,
.uber-uns_kontakt-sektion_icon-wrapper .text-color-white,
.uber-uns_kontakt-sektion_icon-wrapper svg {
  color: #0284c7 !important;
  fill: #0284c7 !important;
  width: 28px !important;
  height: 28px !important;
}

.uber-uns_kontakt-sektion_item h3,
.uber-uns_kontakt-sektion_item .heading-style-h4,
.uber-uns_kontakt-sektion_item .heading-style-h4.text-color-white {
  color: #0f172a !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.uber-uns_kontakt-sektion_item p,
.uber-uns_kontakt-sektion_item p.text-color-white {
  color: #475569 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  flex-grow: 1 !important;
}

.uber-uns_kontakt-sektion_item a,
.uber-uns_kontakt-sektion_item a.text-color-white,
.uber-uns_kontakt-sektion_item .text-style-link {
  color: #0284c7 !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 12px !important;
  transition: all 0.2s ease !important;
}

.uber-uns_kontakt-sektion_item a:hover {
  color: #0369a1 !important;
  text-decoration: underline !important;
}

.uber-uns_kontakt-sektion_item .margin-top div,
.uber-uns_kontakt-sektion_item .margin-top .text-color-white {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

.section_uber-uns_cta-sektion h2,
.section_uber-uns_cta-sektion .heading-style-h2,
.section_uber-uns_cta-sektion .heading-style-h2.text-color-white {
  color: #0f172a !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
}

.section_uber-uns_cta-sektion p,
.section_uber-uns_cta-sektion p.text-color-white,
.section_uber-uns_cta-sektion .text-size-medium {
  color: #334155 !important;
  line-height: 1.6 !important;
}

@media screen and (max-width: 991px) {
  .uber-uns_kontakt-sektion_grid-list {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* 6. General Cards & Accordions */
.zuhause_benefits_item,
.services_card,
.service_card,
.blog-card,
.testimonials-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.04) !important;
  transition: var(--transition-smooth) !important;
}

.zuhause_benefits_item:hover,
.services_card:hover {
  border-color: #0ea5e9 !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.12) !important;
  transform: translateY(-3px) !important;
}

.benefit-icon {
  background: rgba(14, 165, 233, 0.08) !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px !important;
  display: inline-flex !important;
}

.stats-number, .benefit-number,
[class*="number"], [class*="stat-"] {
  color: #0284c7 !important;
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1 !important;
}

/* ==========================================================================
   FAQ SECTION — Readable accordions with crisp text
   ========================================================================== */
.faq1_accordion {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 8px !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.faq1_accordion:hover {
  border-color: #0ea5e9 !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.1) !important;
}

.faq1_question, [class*="faq"] h3, [class*="faq"] h4, [class*="faq"] p {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.faq1_answer, .faq1_answer p, [class*="faq-answer"] {
  color: #334155 !important;
  line-height: 1.7 !important;
  font-size: 15px !important;
}

.faq1_icon {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.1) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
  transition: var(--transition-fast) !important;
}

/* ==========================================================================
   CTA BANNERS — Rich Sky Blue Climax Banner
   ========================================================================== */
.zuhause_cta-sektion_card {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-xl) !important;
  padding: 44px 36px !important;
  box-shadow: 0 12px 40px rgba(2, 132, 199, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.zuhause_cta-sektion_card h2,
.zuhause_cta-sektion_card .heading-style-h2 {
  color: #ffffff !important;
}

.zuhause_cta-sektion_card .button {
  background: #ffffff !important;
  color: #0284c7 !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
}

.zuhause_cta-sektion_card .button:hover {
  background: #f8fafc !important;
  color: #0369a1 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   TESTIMONIALS / REVIEWS — SINGLE CLEAN CARD LAYER (No nested box layers)
   ========================================================================== */
/* The ONLY element that should have card styling (border, background, radius, shadow) */
.zuhause_testimonial-sektion_card,
.testimonial_card,
.review-card,
.testimonials-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px 22px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  width: 22rem !important;
  min-width: 22rem !important;
  max-width: 22rem !important;
  flex: 0 0 22rem !important;
  max-height: 330px !important;
  margin-right: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.zuhause_testimonial-sektion_card:hover,
.testimonial_card:hover,
.review-card:hover,
.testimonials-card:hover {
  border-color: #0ea5e9 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.12) !important;
}

/* Strictly strip all card borders, backgrounds, paddings, and shadows from containers and inner elements */
.section_zuhause_testimonial-sektion,
.zuhause_testimonial-sektion_component,
.zuhause_testimonial-sektion_content-top,
.zuhause_testimonial-sektion_rating-wrapper,
.zuhause_testimonial-sektion_rating-icon,
.zuhause_testimonial-sektion_client,
.zuhause_testimonial-sektion_client-info {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.section_zuhause_testimonial-sektion {
  background: var(--bg-base, #f8fafc) !important;
  overflow: hidden !important;
}

.section_zuhause_testimonial-sektion .heading-style-h2,
.section_zuhause_testimonial-sektion .heading-style-h2 *,
.section_zuhause_testimonial-sektion h2,
.section_zuhause_testimonial-sektion h2 * {
  color: #0f172a !important;
}

/* Smooth continuous infinite scrolling customer feedback marquee */
.zuhause_testimonial-sektion_component {
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 0 24px 0 !important;
  position: relative !important;
  user-select: none !important;
  max-height: 400px !important;
  align-items: flex-start !important;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.zuhause_testimonial-sektion_component:hover .zuhause_testimonial-sektion_loop-trigger {
  animation-play-state: paused !important;
}

.zuhause_testimonial-sektion_loop-trigger {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  align-items: stretch !important;
  animation: testimonialScroll 55s linear infinite !important;
  will-change: transform !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  gap: 0 !important;
}

@keyframes testimonialScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (max-width: 768px) {
  .zuhause_testimonial-sektion_card {
    width: 84vw !important;
    min-width: 250px !important;
    max-width: 320px !important;
    flex: 0 0 84vw !important;
    max-height: 310px !important;
    margin-right: 0.75rem !important;
    padding: 18px 16px !important;
  }
  .zuhause_testimonial-sektion_loop-trigger {
    animation-duration: 32s !important;
  }
  .zuhause_testimonial-sektion_component {
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 0 24px 0 !important;
  position: relative !important;
  user-select: none !important;
  max-height: 400px !important;
  align-items: flex-start !important;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
}

/* Star rating row inside card — clean inline stars without any box container or card borders */
.zuhause_testimonial-sektion_rating-wrapper,
.star-rating {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
}

.zuhause_testimonial-sektion_rating-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 2px !important;
  color: #f59e0b !important;
}

.zuhause_testimonial-sektion_rating-icon .icon-embed-xsmall,
.zuhause_testimonial-sektion_rating-icon svg {
  width: 18px !important;
  height: 18px !important;
  color: #f59e0b !important;
}

.zuhause_testimonial-sektion_rating-icon svg path {
  fill: #f59e0b !important;
}

.zuhause_testimonial-sektion_card .text-size-medium {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin-bottom: 16px !important;
}

.zuhause_testimonial-sektion_client {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: auto !important;
}

.zuhause_testimonial-sektion_client-info,
.zuhause_testimonial-sektion_client-info .text-weight-semibold,
.zuhause_testimonial-sektion_client-info p {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  margin: 0 !important;
}

/* ==========================================================================
   FOOTER — Ultra-Clean Seamless Dark Navy Anchor
   No white boxes, high contrast typography, compact vertical spacing
   ========================================================================== */
.footer15_component,
footer {
  background-color: #0b1320 !important;
  background: #0b1320 !important;
  border-top: 1px solid rgba(14, 165, 233, 0.25) !important;
  color: #cbd5e1 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Force all wrappers, cards, grids, and lists inside footer to have NO white background */
.footer15_component .w-layout-grid,
.footer15_component [class*="layout"],
.footer15_component [class*="wrapper"],
.footer15_component .footer15_top-wrapper,
.footer15_component .footer15_left-wrapper,
.footer15_component .footer15_menu-wrapper,
.footer15_component .footer15_link-list,
.footer15_component .footer15_social-list,
.footer15_component .footer15_social-link,
.footer15_component .footer15_details-wrapper,
.footer15_component .footer15_bottom-wrapper,
.footer15_component .footer15_legal-list,
.footer15_component .footer15_image-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Footer compact spacing — eliminate excessive vertical gaps */
.footer15_component .padding-vertical.padding-xxlarge {
  padding-top: 28px !important;
  padding-bottom: 16px !important;
}
.footer15_component .padding-bottom.padding-xlarge {
  padding-bottom: 16px !important;
}
.footer15_component .padding-bottom.padding-large {
  padding-bottom: 10px !important;
}
.footer15_component .footer15_image-wrapper {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.footer15_component .line-divider {
  background-color: rgba(255, 255, 255, 0.12) !important;
  height: 1px !important;
  margin: 10px 0 !important;
}
.footer15_component .padding-top.padding-medium {
  padding-top: 10px !important;
}

/* Footer top wrapper: 3-column layout (left info | nav col1 | nav col2) */
.footer15_top-wrapper {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  grid-template-rows: auto !important;
  grid-column-gap: 40px !important;
  grid-row-gap: 0 !important;
  align-items: start !important;
}

/* Footer menu wrapper: two nav link columns side-by-side */
.footer15_menu-wrapper {
  display: contents !important; /* flatten into parent grid */
}

/* Footer quote strip — compact single line */
.footer15_image-wrapper {
  text-align: center !important;
}
.text-size-is-quote,
.footer15_component .text-size-is-quote,
footer .text-size-is-quote {
  font-size: clamp(1rem, 1.6vw, 1.3rem) !important;
}

/* Prevent GSAP scrub animation from leaving words invisible after scroll completes */
.layout484_text .word {
  opacity: 1 !important;
}

/* Text readability in footer */
.footer15_logo {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)) !important;
}

.footer15_component p,
.footer15_component span,
.footer15_component .text-color-white,
.footer15_component .text-size-small,
.footer15_credit-text,
.footer15_details-wrapper,
.footer15_details-wrapper div {
  color: #cbd5e1 !important;
}

.footer15_details-wrapper a {
  color: #f1f5f9 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}
.footer15_details-wrapper a:hover {
  color: #38bdf8 !important;
}

.footer15_link {
  color: #94a3b8 !important;
  background: transparent !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.footer15_link:hover {
  color: #38bdf8 !important;
}

.footer15_heading, footer h3, footer h4 {
  color: #38bdf8 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 12px !important;
}

/* High contrast quote */
.text-size-is-quote,
.footer15_component .text-size-is-quote,
footer .text-size-is-quote {
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  letter-spacing: -0.01em !important;
  opacity: 0.96 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Footer bottom and legal list */
.footer15_bottom-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.footer15_legal-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  align-items: center !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.footer15_legal-link {
  color: #94a3b8 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.footer15_legal-link:hover {
  color: #38bdf8 !important;
}

.footer_powered-by {
  display: inline-block;
  margin-left: 6px;
  color: #94a3b8 !important;
  font-size: 13px;
}

.footer_powered-link {
  color: #38bdf8 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.footer_powered-link:hover {
  color: #7dd3fc !important;
  text-decoration: underline !important;
}

/* Footer mobile responsive */
@media (max-width: 768px) {
  .footer15_top-wrapper {
    grid-template-columns: 1fr !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 24px !important;
  }
  .footer15_menu-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 20px !important;
  }
  .text-size-is-quote,
  footer .text-size-is-quote {
    font-size: 1rem !important;
  }
  /* Reduce section padding on mobile */
  .padding-section-large {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.w-form-label, label, .form-label {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select,
.w-input,
.w-select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 14.5px !important;
  font-family: var(--font-body) !important;
  transition: var(--transition-fast) !important;
  width: 100% !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.w-input:focus,
.w-select:focus {
  border-color: #0ea5e9 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
}

input::placeholder, textarea::placeholder {
  color: #94a3b8 !important;
}

.check-field, .anfrage-checkbox {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition-fast) !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
}

.check-field:hover, .anfrage-checkbox:hover {
  border-color: #0ea5e9 !important;
  background: rgba(14, 165, 233, 0.06) !important;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumb, .breadcrumbs, [class*="breadcrumb"] {
  font-size: 13px !important;
  color: var(--text-muted) !important;
}

.breadcrumb a, .breadcrumbs a, [class*="breadcrumb"] a {
  color: #0284c7 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.breadcrumb a:hover, .breadcrumbs a:hover {
  color: #0ea5e9 !important;
}

/* ==========================================================================
   PRICING CARDS
   ========================================================================== */
.pricing-card, .preis-card, [class*="pricing"], [class*="preis_card"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-lg) !important;
  transition: var(--transition-smooth) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.pricing-card:hover, .preis-card:hover {
  border-color: #0ea5e9 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.15) !important;
}

.price-amount, .preis-betrag, [class*="price-number"] {
  color: #0284c7 !important;
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1 !important;
}

/* ==========================================================================
   BLOG / ARTICLE CARDS
   ========================================================================== */
.blog-card, .article-card, [class*="blog_card"], [class*="wissen"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  transition: var(--transition-smooth) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04) !important;
}

.blog-card:hover, .article-card:hover, [class*="blog_card"]:hover {
  border-color: #0ea5e9 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.12) !important;
}

.blog-card h3, .article-card h3, [class*="blog_card"] h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.blog-card p, .article-card p {
  color: #334155 !important;
  line-height: 1.65 !important;
}

.blog-tag, .category-tag, .tag, [class*="blog-tag"] {
  background: rgba(14, 165, 233, 0.1) !important;
  color: #0284c7 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-pill) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
}

/* ==========================================================================
   IMAGES & BADGES
   ========================================================================== */
img {
  max-width: 100% !important;
  height: auto !important;
}

.hero-image, [class*="hero_image"], [class*="feature_image"] {
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

.zuhause_benefits_image-wrapper {
  position: relative !important;
  border-radius: 18px !important;
  overflow: visible !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 440px !important;
}

.zuhause_benefits_image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 440px !important;
  max-height: 520px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1) !important;
}

.hero-img-wrapper,
.zuhause_about_image-wrapper {
  position: relative !important;
  overflow: visible !important;
}

.hero-img {
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1) !important;
}

.zuhause_about_image {
  border-radius: 18px !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1) !important;
}

.image-bewertung-banner-01,
.absolute-img,
.absolute-img-01 {
  position: absolute !important;
  left: 20px !important;
  bottom: 20px !important;
  right: auto !important;
  top: auto !important;
  max-width: 310px !important;
  width: auto !important;
  z-index: 10 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(12px) !important;
}

@media (max-width: 767px) {
  .image-bewertung-banner-01,
  .absolute-img,
  .absolute-img-01 {
    max-width: 250px !important;
    left: 12px !important;
    bottom: 12px !important;
  }
}

/* ==========================================================================
   DIVIDERS & SCROLLBAR
   ========================================================================== */
hr, .divider {
  border: none !important;
  height: 1px !important;
  background: #e2e8f0 !important;
  margin: 20px 0 !important;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: rgba(14, 165, 233, 0.35); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(14, 165, 233, 0.6); }

::selection {
  background: rgba(14, 165, 233, 0.25);
  color: #0f172a;
}

:focus-visible {
  outline: 2px solid var(--brand-blue) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 991px) {
  .announcement-flex {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 12px !important;
  }

  .w-nav-overlay {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
  }

  .navbar1_menu,
  .w-nav-overlay [data-nav-menu-open] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 20px 4% 36px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    width: 100% !important;
  }

  .navbar1_menu-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 4px !important;
  }

  .navbar1_link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    border-radius: var(--radius-sm) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
    width: 100% !important;
  }

  .navbar1_link:hover {
    background: rgba(14, 165, 233, 0.08) !important;
  }

  .navbar1_link .nav-icon {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.9 !important;
    flex-shrink: 0 !important;
  }

  .navbar1_link::after {
    display: none !important;
  }

  .navbar1_menu-buttons {
    padding-top: 16px !important;
    width: 100% !important;
  }

  .navbar1_menu-buttons .button {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 20px !important;
  }

  .mobile-lang-switcher {
    display: flex !important;
    padding: 14px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 8px !important;
  }

  .zuhause_cta-sektion_card {
    padding: 30px 18px !important;
  }
}

@media (max-width: 767px) {
  .announcement-left {
    gap: 12px !important;
  }

  h1 { font-size: 1.85rem !important; }
  h2 { font-size: 1.5rem !important; }
}

@media (max-width: 479px) {
  .lang-pill { font-size: 11px !important; }
  .announcement-left { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; }
}

/* ==========================================================================
   UTILITY CLASSES & WEBFLOW OVERRIDES
   ========================================================================== */
.text-green, .text-blue { color: #0284c7 !important; }
.text-white { color: #ffffff !important; }
.text-dark { color: #0f172a !important; }
.text-muted { color: var(--text-muted) !important; }
.bg-dark { background: #0f172a !important; }
.bg-surface { background: var(--bg-surface) !important; }

.badge-green, .badge-blue {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(14, 165, 233, 0.1) !important;
  color: #0284c7 !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  letter-spacing: 0.3px !important;
}

/* ==========================================================================
   LAYOUT SECTION BACKGROUND OVERRIDES
   Safe background assignments excluding dark photographic/hero/footer sections
   ========================================================================== */
section:not(.section_header6):not(.section_header7):not(.video-hero-section):not(.section_zuhause_cta-sektion):not(.footer15_component):not(footer),
.section:not(.section_header6):not(.section_header7):not(.video-hero-section):not(.section_zuhause_cta-sektion):not(.footer15_component):not(footer),
[class*='section_']:not(.section_header6):not(.section_header7):not(.video-hero-section):not(.section_zuhause_cta-sektion):not(.footer15_component):not(footer),
[class*='_section']:not(.section_header6):not(.section_header7):not(.video-hero-section):not(.section_zuhause_cta-sektion):not(.footer15_component):not(footer) {
  background-color: var(--bg-base) !important;
  color: var(--text-secondary) !important;
}

.section_zuhause_dienstleistungen-sektion,
.section_layout25,
.section_preise,
.section_zuhause_about,
.section-blog {
  background-color: var(--bg-surface) !important;
}

.section_zuhause_benefits,
.section_layout121,
.section_faq1 {
  background-color: var(--bg-base) !important;
}

.section_zuhause_cta-sektion {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}

[class*='layout25_'],
[class*='layout121_'],
[class*='layout285_'],
[class*='layout484_'],
.container-large,
.container-medium,
.container-small,
.padding-global,
.padding-section-large,
.padding-section-medium,
.padding-section-small {
  background-color: transparent !important;
}

/* ==========================================================================
   DIENSTLEISTUNGEN SECTION — Clean Left-Aligned Header
   Resolves awkward "middle aligned" text in Services section
   ========================================================================== */
.section_zuhause_dienstleistungen-sektion .max-width-huge.align-center,
.zuhause_dienstleistungen-sektion_component .max-width-huge.align-center,
.zuhause_dienstleistungen-sektion_component .align-center {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 920px !important;
}

.section_zuhause_dienstleistungen-sektion .max-width-huge.align-center h2,
.section_zuhause_dienstleistungen-sektion .max-width-huge.align-center p,
.section_zuhause_dienstleistungen-sektion .max-width-huge.align-center div {
  text-align: left !important;
}

/* ==========================================================================
   SECTION HEADER 6 — Dark Cinematic Truck Background with Pure White Text
   High contrast guaranteed across all screen sizes
   ========================================================================== */
.section_header6 {
  position: relative !important;
  background-color: #0b1320 !important;
  color: #ffffff !important;
  overflow: hidden !important;
  min-height: 480px !important;
}

.section_header6 .header6_background-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

.section_header6 .header6_background-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.section_header6 .image-overlay-layer {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(11, 19, 32, 0.95) 0%, rgba(11, 19, 32, 0.88) 50%, rgba(11, 19, 32, 0.65) 100%) !important;
  z-index: 1 !important;
}

.section_header6 .header6_content {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

.section_header6 .padding-global,
.section_header6 .container-large,
.section_header6 .max-width-medium {
  background: transparent !important;
}

.section_header6 h2,
.section_header6 .heading-style-h2,
.section_header6 .text-color-white {
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85) !important;
  background: transparent !important;
}

.section_header6 p,
.section_header6 .text-size-medium,
.section_header6 .text-size-regular {
  color: #f1f5f9 !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75) !important;
  background: transparent !important;
}

.section_header6 .zuhause_vorteile-sektion_item {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.section_header6 .zuhause_vorteile-sektion_item p {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
  text-shadow: none !important;
}

.section_header6 .zuhause_vorteile-sektion_item svg {
  stroke: #38bdf8 !important; /* vivid cyan checkmark */
  flex-shrink: 0 !important;
}

/* ==========================================================================
   BLOG SECTION — Responsive Grid with Generous Padding & Card Elevation
   ========================================================================== */
.section-blog .blog-grid-top,
.section-blog .blog-grid-bottom {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 840px) {
  .section-blog .blog-grid-top,
  .section-blog .blog-grid-bottom {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

.section-blog .blog-link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  text-decoration: none !important;
}

.section-blog .blog-link:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.15) !important;
  border-color: #0ea5e9 !important;
}

.section-blog .blog-thumb {
  height: 240px !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

.section-blog .blog-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.section-blog .blog-link:hover .blog-thumb img {
  transform: scale(1.05) !important;
}

.section-blog .blog-content {
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
}

/* ==========================================================================
   SERVICES FULL-BLEED STICKY SHOWCASE (section_header7 / leistungen-cms)
   Text directly over the background image WITHOUT white box background
   ========================================================================== */
.leistungen-cms,
.leistungen-cms .w-dyn-list,
.leistungen-cms .w-dyn-items,
.leistungen-cms .w-dyn-item,
.leistungen-cms .item-is-sticky,
.section_header7,
.section_header7.text-color-alternate,
.section_header7 .padding-global,
.section_header7 .container-large,
.section_header7 .header7_content,
.section_header7 .padding-section-large,
.section_header7 .max-width-medium,
.section_header7 .margin-bottom,
.section_header7 .margin-top,
.section_header7 .w-richtext {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Background image wrapper and dark cinematic overlay for flawless contrast */
.section_header7 .header7_background-video-wrapper {
  z-index: 0 !important;
  position: absolute !important;
  inset: 0% !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.section_header7 .video-overlay-layer {
  z-index: 1 !important;
  position: absolute !important;
  inset: 0% !important;
  background: linear-gradient(90deg, rgba(10, 17, 30, 0.85) 0%, rgba(10, 17, 30, 0.65) 50%, rgba(10, 17, 30, 0.35) 100%) !important;
  pointer-events: none !important;
}

.section_header7 .background-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 30% !important;
}

/* Content layer directly over image */
.section_header7 .header7_content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  min-height: clamp(460px, 72svh, 580px) !important;
  background: transparent !important;
}

.section_header7 .padding-section-large {
  padding-top: clamp(1.5rem, 3vh, 2.5rem) !important;
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem) !important;
  background: transparent !important;
}

.section_leistungen_header .padding-section-large {
  padding-top: clamp(2.5rem, 5vh, 4rem) !important;
  padding-bottom: clamp(1rem, 2vh, 1.5rem) !important;
}

@media (max-width: 767px) {
  .section_header7 .header7_content {
    min-height: auto !important;
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }
  .section_header7 .padding-section-large {
    padding-top: 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }
}

.section_header7 .max-width-medium {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Crisp white headings on image with text shadow */
.section_header7 h2,
.section_header7 .heading-style-h2,
.section_header7 .text-color-white {
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(2.2rem, 4vw, 3.25rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95) !important;
  background: transparent !important;
}

/* Crisp white body paragraph on image */
.section_header7 p,
.section_header7 .text-size-medium,
.section_header7 .w-richtext,
.section_header7 .w-richtext p {
  color: #f1f5f9 !important;
  font-family: var(--font-body) !important;
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.95) !important;
  max-width: 36rem !important;
  background: transparent !important;
}

/* Button Group directly on image */
.section_header7 .button-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 1.75rem !important;
  background: transparent !important;
}

.section_header7 .button-group a {
  margin-left: 0 !important;
}

/* Primary Action Button (Angebot einholen / Get Free Quote) */
.section_header7 .button.is-secondary.is-white,
.section_header7 .button.w-button:not(.is-secondary) {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 13px 26px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.5) !important;
  transition: all 0.25s ease !important;
}

.section_header7 .button.is-secondary.is-white:hover,
.section_header7 .button.w-button:not(.is-secondary):hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  box-shadow: 0 6px 26px rgba(14, 165, 233, 0.65) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* Secondary Details Link Button */
.section_header7 .button.is-secondary:not(.is-white) {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(56, 189, 248, 0.85) !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.25s ease !important;
}

.section_header7 .button.is-secondary:not(.is-white):hover {
  background: rgba(14, 165, 233, 0.35) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45) !important;
}


.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

.text-size-large, .text-size-medium, .text-size-small, .text-size-regular {
  color: var(--text-secondary) !important;
}

.w-richtext, .w-richtext p, .w-richtext li { color: var(--text-secondary) !important; }
.w-richtext h1, .w-richtext h2, .w-richtext h3,
.w-richtext h4, .w-richtext h5, .w-richtext h6 { color: var(--text-primary) !important; }

.text-style-tagline {
  color: #0284c7 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}
.color-is-orange { color: var(--brand-orange) !important; font-weight: 700 !important; }
.service-list-2col, .service-list-2col p, .service-list-2col li { color: var(--text-secondary) !important; }

.w-dyn-list, .w-dyn-items, .w-dyn-item { background: transparent !important; }

/* Dropdown menus */
.w-dropdown-list, .navbar1_dropdown-list {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
  padding: 8px !important;
}
.w-dropdown-link, .navbar1_dropdown-link {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition-fast) !important;
  text-decoration: none !important;
  display: block !important;
}
.w-dropdown-link:hover, .navbar1_dropdown-link:hover {
  background: rgba(14, 165, 233, 0.08) !important;
  color: #0284c7 !important;
}

/* Forms */
.w-form-done, .w-form-fail {
  background: rgba(14, 165, 233, 0.1) !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
}

/* Links */
a { color: #0284c7 !important; transition: color 0.2s ease !important; }
a:hover { color: #0ea5e9 !important; }
.navbar1_link, .footer15_link, .announcement-left a { text-decoration: none !important; }
.button, .mainbutton, .w-button,
.button:hover, .mainbutton:hover, .w-button:hover { color: #ffffff !important; }

/* ==========================================================================
   BENEFITS SECTION BACKGROUND VIDEO
   ========================================================================== */
.zuhause_benefits_image-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}

.zuhause_benefits_image.w-background-video {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  min-height: 480px !important;
  max-height: 580px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background-color: #0f172a !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.15), 0 0 0 1px #e2e8f0 !important;
}

.zuhause_benefits_image.w-background-video > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  z-index: 1 !important;
}

.zuhause_benefits_image-wrapper .absolute-img-01 {
  z-index: 10 !important;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.16)) !important;
  position: absolute !important;
  pointer-events: none !important;
  left: 12px !important;
  bottom: 12px !important;
  top: auto !important;
  right: auto !important;
  max-width: 260px !important;
}

/* ==========================================================================
   STRICT OVERFLOW CONTAINMENT & ZERO HORIZONTAL SCROLL
   ========================================================================== */
*, *:before, *:after {
  box-sizing: border-box !important;
}

.hero-img-wrapper {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

.image-bewertung-banner-01,
.absolute-rating-01,
.absolute-rating-02 {
  max-width: 90% !important;
}

.layout25_image-wrapper {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

.layout25_image-wrapper .image-additional-01 {
  right: 0 !important;
  max-width: 45% !important;
}

.layout25_image-wrapper .image-additional-00 {
  left: 0 !important;
  max-width: 45% !important;
}

img, video, iframe {
  max-width: 100% !important;
}

/* ==========================================================================
   VIDEO HERO LANDING SECTION — Bottom-Only CTA & Trust Signals
   ========================================================================== */
.video-hero-section {
  position: relative !important;
  width: 100% !important;
  height: calc(100vh - 86px) !important;
  min-height: 520px !important;
  max-height: 840px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: #0b1320 !important;
}

.video-hero-section > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  z-index: 1 !important;
  opacity: 0.96 !important;
}

.video-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(11, 19, 32, 0.05) 0%,
    rgba(11, 19, 32, 0.15) 55%,
    rgba(11, 19, 32, 0.78) 100%
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.video-hero-content {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 24px 34px 24px !important;
  width: 100% !important;
  max-width: 980px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.video-hero-content.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.video-hero-cta-group {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  flex-wrap: wrap !important;
}

.btn-hero-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #0ea5e9 !important;
  color: #ffffff !important;
  padding: 14px 28px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 24px rgba(14, 165, 233, 0.45) !important;
  transition: all 0.25s ease !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
}

.btn-hero-primary:hover {
  background: #0284c7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(14, 165, 233, 0.65) !important;
  color: #ffffff !important;
}

.btn-hero-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #ffffff !important;
  padding: 14px 28px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.btn-hero-secondary:hover {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.video-hero-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  align-items: center !important;
  justify-content: center !important;
}

.video-hero-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}

.video-hero-trust-item svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #38bdf8 !important;
  fill: none !important;
}

.video-hero-mute-btn {
  display: none !important;
}

.video-hero-scroll-indicator {
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
  pointer-events: none !important;
}

.video-hero-scroll-indicator.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.video-hero-scroll-indicator svg {
  stroke: #ffffff !important;
  width: 14px !important;
  height: 14px !important;
  animation: heroBounce 2s infinite !important;
}

@keyframes heroBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(5px); }
  60% { transform: translateY(2px); }
}

@media (max-width: 767px) {
  .video-hero-section {
    height: 38vh !important;
    min-height: 240px !important;
    max-height: 320px !important;
  }
  .video-hero-content {
    padding: 0 14px 12px 14px !important;
  }
  .video-hero-cta-group {
    margin-bottom: 6px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .btn-hero-primary, .btn-hero-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 9999px !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .btn-hero-primary {
    border: 1px solid transparent !important;
    background: #0ea5e9 !important;
    color: #ffffff !important;
  }
  .btn-hero-secondary {
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #ffffff !important;
  }
  .btn-hero-primary svg, .btn-hero-secondary svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }
  .btn-hero-primary span, .btn-hero-secondary span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .video-hero-trust {
    display: none !important;
  }
  /* Hide the redundant static hero image and banner on mobile to bring H1 and content up */
  .hero-header-sektion_form-wrapper.home {
    display: none !important;
  }
  .section_zuhause_hero-header-sektion .padding-section-large {
    padding-top: 14px !important;
    padding-bottom: 16px !important;
  }
  .section_zuhause_hero-header-sektion .heading-style-h1.is-home {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
    margin-top: 6px !important;
  }
  .section_zuhause_hero-header-sektion .heading-style-h1:not(.is-home) {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
  }
  .section_zuhause_hero-header-sektion .usp-hero-grid {
    gap: 6px !important;
  }
  .section_zuhause_hero-header-sektion .usp-hero-grid .zuhause_vorteile-sektion_item {
    padding: 5px 10px !important;
    font-size: 0.82rem !important;
  }
}

/* ==========================================================================
   HERO HEADER COMPACT / SQUEEZED LAYOUT (Below Video)
   ========================================================================== */
.section_zuhause_hero-header-sektion {
  position: relative !important;
  overflow: hidden !important;
}

.section_zuhause_hero-header-sektion .padding-section-large {
  padding-top: 18px !important;
  padding-bottom: 22px !important;
}

.section_zuhause_hero-header-sektion .zuhause_hero-header-sektion_component {
  grid-column-gap: 2.5rem !important;
  grid-row-gap: 1.25rem !important;
  align-items: center !important;
}

.section_zuhause_hero-header-sektion .google-review.hero,
.google-review.hero,
.google-review {
  margin-bottom: 14px !important;
  width: clamp(235px, 22vw, 280px) !important;
  max-width: 290px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: inline-block !important;
}

.google-review.big {
  width: 260px !important;
  max-width: 300px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: inline-block !important;
}

.section_zuhause_hero-header-sektion .heading-style-h1.is-home {
  font-size: 2.1rem !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 4px !important;
}

.section_zuhause_hero-header-sektion .space-12 {
  height: 4px !important;
}

.section_zuhause_hero-header-sektion .heading-style-h1:not(.is-home) {
  font-size: 1.35rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 8px !important;
}

.section_zuhause_hero-header-sektion .text-size-medium {
  font-size: 0.94rem !important;
  line-height: 1.42 !important;
  margin-bottom: 10px !important;
  color: #475569 !important;
}

.section_zuhause_hero-header-sektion .usp-hero-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 6px !important;
  margin-bottom: 4px !important;
}

.section_zuhause_hero-header-sektion .usp-hero-grid .zuhause_vorteile-sektion_item {
  flex: 1 1 auto !important;
  padding: 6px 12px !important;
  font-size: 0.86rem !important;
  white-space: nowrap !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.section_zuhause_hero-header-sektion .usp-hero-grid .zuhause_vorteile-sektion_item p {
  margin: 0 !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.section_zuhause_hero-header-sektion .margin-top.margin-medium {
  margin-top: 10px !important;
}

.section_zuhause_hero-header-sektion .button-group {
  margin-top: 8px !important;
}

.section_zuhause_hero-header-sektion .button.is-secondary.is-orange {
  padding: 10px 20px !important;
  font-size: 0.92rem !important;
}

.section_zuhause_hero-header-sektion .hero-img-wrapper {
  height: 420px !important;
  max-height: 420px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.section_zuhause_hero-header-sektion .hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 30% !important;
}

.section_zuhause_hero-header-sektion .image-bewertung-banner-01 {
  max-width: 260px !important;
  left: 14px !important;
  bottom: 14px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 991px) {
  .section_zuhause_hero-header-sektion .padding-section-large {
    padding-top: 14px !important;
    padding-bottom: 16px !important;
  }
  .section_zuhause_hero-header-sektion .hero-img-wrapper {
    height: 340px !important;
    max-height: 340px !important;
  }
}



/* ==========================================================================
   SINGLE UNIFIED HEADER BAR (Replaces 2-bar layout)
   ========================================================================== */
.navbar1_component.single-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 35%, #7dd3fc 70%, #38bdf8 100%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(2, 132, 199, 0.22) !important;
  box-shadow: 0 2px 14px rgba(2, 132, 199, 0.12) !important;
  padding: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.single_header_container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.single-header .navbar1_logo-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.single-header .navbar1_logo {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.25s ease !important;
}

.single-header .navbar1_logo-link:hover .navbar1_logo {
  transform: scale(1.05) !important;
}

.single-header .navbar1_brand-text {
  display: inline-flex !important;
  align-items: baseline !important;
  font-family: var(--font-heading, 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  user-select: none !important;
  transition: opacity 0.2s ease !important;
}

.single-header .navbar1_logo-link:hover .navbar1_brand-text {
  opacity: 0.9 !important;
}

.single-header .brand-zug {
  color: #68aa00 !important;
}

.single-header .brand-um {
  color: #0f172a !important;
}

.single-header .logo-text-wrapper {
  display: none !important;
}

/* Google Rating 4.9 in Top Blue Header */
.header_google-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(2, 132, 199, 0.28) !important;
  border-radius: 9999px !important;
  box-shadow: 0 1.5px 6px rgba(2, 132, 199, 0.12) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-left: 14px !important;
  margin-right: 18px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.header_google-rating:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.25) !important;
  transform: translateY(-1px) !important;
}

.header_google-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.header_google-brand {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  letter-spacing: -0.01em !important;
}

.header_google-stars {
  color: #f59e0b !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.header_google-score {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #0369a1 !important;
  background: #e0f2fe !important;
  padding: 2px 6px !important;
  border-radius: 9999px !important;
  line-height: 1 !important;
}

@media (max-width: 991px) {
  .header_google-brand {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .header_google-rating {
    padding: 3px 8px !important;
    gap: 5px !important;
    margin-left: 6px !important;
  }
  .header_google-stars {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }
  .header_google-score {
    font-size: 11px !important;
    padding: 1px 5px !important;
  }
}

@media (max-width: 480px) {
  .header_google-stars {
    display: none !important;
  }
  .header_google-rating {
    padding: 3px 6px !important;
    gap: 4px !important;
  }
}

.single_header_right {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-left: auto !important;
}

.header_contacts {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.header_contact-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #0f172a !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
  white-space: nowrap !important;
}

.header_contact-item:hover {
  color: #0369a1 !important;
}

.header_contact-icon {
  color: #0284c7 !important;
  flex-shrink: 0 !important;
}

.header_sep {
  color: rgba(15, 23, 42, 0.3) !important;
  font-size: 13px !important;
  user-select: none !important;
}

.single_header_right .lang-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
  border-radius: 9999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.single_header_right .lang-pill a {
  color: #475569 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.single_header_right .lang-pill a:hover {
  color: #0f172a !important;
}

.single_header_right .lang-pill .active {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

.header_cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  padding: 8px 15px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.3) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  border: none !important;
}

.header_cta-btn:hover {
  background: linear-gradient(135deg, #0369a1, #075985) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(2, 132, 199, 0.4) !important;
}

/* ==========================================================================
   AUTO-HIDE VERTICAL BAR MENU (LEFT, FLOATING OVER VIDEO)
   ========================================================================== */
.vertical-nav-dock {
  position: fixed !important;
  top: 62px !important;
  left: 0 !important;
  z-index: 995 !important;
  width: 58px !important;
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: none !important;
  border-radius: 0 16px 16px 0 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease !important;
  padding: 12px 8px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: visible !important;
}

/* Expanded state on hover OR when pinned/expanded */
.vertical-nav-dock:hover,
.vertical-nav-dock.is-pinned {
  width: 236px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6), 0 0 24px rgba(2, 132, 199, 0.2) !important;
}

.v-dock-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}

.v-dock-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  position: relative !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
  white-space: nowrap !important;
}

.v-dock-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #38bdf8 !important;
}

.v-dock-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #cbd5e1 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.v-dock-item:hover .v-dock-icon {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important;
}

.v-dock-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
  opacity: 0 !important;
  max-width: 0 !important;
  pointer-events: none !important;
  transform: translateX(-8px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease, max-width 0.3s ease !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.vertical-nav-dock:hover .v-dock-label,
.vertical-nav-dock.is-pinned .v-dock-label {
  opacity: 1 !important;
  max-width: 170px !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

/* Tooltip (only active when collapsed and mouse hovered over an icon) */
.v-dock-tooltip {
  position: absolute !important;
  left: calc(100% + 12px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-6px) !important;
  background: #0f172a !important;
  color: #f8fafc !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  z-index: 1000 !important;
}

.vertical-nav-dock:not(:hover):not(.is-pinned) .v-dock-item:hover .v-dock-tooltip {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* Toggle Expand/Collapse Button (Matches user's >> and << drawings) */
.v-dock-toggle {
  margin-top: 6px !important;
  padding: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  color: #94a3b8 !important;
  border-radius: 0 0 12px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: color 0.2s, background 0.2s !important;
}

.v-dock-toggle:hover {
  color: #38bdf8 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.v-dock-toggle-icons {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  flex-shrink: 0 !important;
}

.v-dock-icon-expand {
  display: block !important;
}

.v-dock-icon-collapse {
  display: none !important;
}

.vertical-nav-dock:hover .v-dock-icon-expand,
.vertical-nav-dock.is-pinned .v-dock-icon-expand {
  display: none !important;
}

.vertical-nav-dock:hover .v-dock-icon-collapse,
.vertical-nav-dock.is-pinned .v-dock-icon-collapse {
  display: block !important;
}

.v-dock-toggle-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  opacity: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition: opacity 0.22s, max-width 0.3s !important;
}

.vertical-nav-dock:hover .v-dock-toggle-label,
.vertical-nav-dock.is-pinned .v-dock-toggle-label {
  opacity: 1 !important;
  max-width: 150px !important;
}

/* Explicitly collapsed state overrides :hover so clicking <<< immediately collapses the dock */
.vertical-nav-dock.is-collapsed,
.vertical-nav-dock.is-collapsed:hover {
  width: 58px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

.vertical-nav-dock.is-collapsed .v-dock-label,
.vertical-nav-dock.is-collapsed:hover .v-dock-label,
.vertical-nav-dock.is-collapsed .v-dock-toggle-label,
.vertical-nav-dock.is-collapsed:hover .v-dock-toggle-label {
  opacity: 0 !important;
  max-width: 0 !important;
  pointer-events: none !important;
  transform: translateX(-8px) !important;
}

.vertical-nav-dock.is-collapsed .v-dock-icon-expand,
.vertical-nav-dock.is-collapsed:hover .v-dock-icon-expand {
  display: block !important;
}

.vertical-nav-dock.is-collapsed .v-dock-icon-collapse,
.vertical-nav-dock.is-collapsed:hover .v-dock-icon-collapse {
  display: none !important;
}

/* Prevent horizontal overflow & page wobbling on mobile devices */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

.page-wrapper,
.main-wrapper,
.section_testimonials,
.zuhause_testimonial-sektion {
  overflow-x: clip !important;
  max-width: 100% !important;
}

.zuhause_testimonial-sektion_loop-trigger {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
}

/* Responsive adjustments for Header & Navigation */
@media (max-width: 1024px) {
  .header_contacts .hide-tablet-sm {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .navbar1_component.single-header {
    height: 48px !important;
    min-height: 48px !important;
  }
  .single_header_container {
    padding: 0 12px !important;
  }
  .single-header .navbar1_logo-link {
    gap: 8px !important;
  }
  .single-header .navbar1_logo {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }
  .single-header .navbar1_brand-text {
    font-size: 17px !important;
  }
  .single_header_right {
    gap: 10px !important;
  }
  .header_contacts {
    gap: 8px !important;
  }
  .header_contacts .hide-mobile-location,
  .header_contacts .hide-tablet-sm,
  .header_contacts .header_contact-text,
  .header_sep {
    display: none !important;
  }
  .header_contact-item {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(2, 132, 199, 0.25) !important;
    border-radius: 8px !important;
  }
  .header_contact-icon {
    width: 16px !important;
    height: 16px !important;
  }
  .header_cta-btn {
    display: none !important;
  }
  .vertical-nav-dock {
    display: none !important;
  }
}

/* Mobile Hero Trust Badges Wrap */
@media (max-width: 768px) {
  .hero_trust-badges,
  .hero-badges,
  .zuhause_hero-vorteile_liste,
  .hero-trust-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }
  .zuhause_hero-vorteil_punkt {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

/* Mobile Form Optimizations (anfrage.html & en/quote.html) */
@media (max-width: 480px) {
  .radio-group-flex {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .radio-button-field {
    min-height: 46px !important;
    padding: 10px 14px !important;
  }
  .section-form {
    padding: 12px 10px 70px 10px !important;
  }
  .contact-card {
    padding: 20px 14px !important;
    border-radius: 12px !important;
  }
  .w-checkbox.checkbox-field {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .w-checkbox.checkbox-field input[type="checkbox"] {
    margin-top: 3px !important;
    flex-shrink: 0 !important;
  }
}


/* ==========================================================================
   MOBILE HAMBURGER & DRAWER NAVIGATION
   ========================================================================== */
.header_hamburger-btn {
  display: none !important;
  background: transparent !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
  border-radius: 8px !important;
  width: 38px !important;
  height: 38px !important;
  padding: 8px 7px !important;
  cursor: pointer !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
  margin-left: 6px !important;
  box-sizing: border-box !important;
}
.header_hamburger-btn span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background-color: #0f172a !important;
  border-radius: 2px !important;
  transition: all 0.25s ease !important;
}
.header_hamburger-btn:hover {
  background: rgba(2, 132, 199, 0.12) !important;
  border-color: #0284c7 !important;
}
.header_hamburger-btn.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}
.header_hamburger-btn.is-active span:nth-child(2) {
  opacity: 0 !important;
}
.header_hamburger-btn.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

@media (max-width: 991px) {
  .header_hamburger-btn {
    display: flex !important;
  }
}

/* Mobile Slide-Out Drawer Navigation */
.mobile-nav-drawer {
  display: none !important;
}

@media (max-width: 991px) {
  .mobile-nav-drawer {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 18px 36px 18px !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .mobile-nav-drawer.is-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
.mobile-nav-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
.mobile-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.2s ease !important;
}
.mobile-nav-link:hover,
.mobile-nav-link.is-active {
  background: rgba(14, 165, 233, 0.2) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}
.mobile-nav-link svg {
  color: #38bdf8 !important;
  flex-shrink: 0 !important;
}
.mobile-nav-contacts {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 20px !important;
}
.mobile-nav-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #cbd5e1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.mobile-nav-contact-item svg {
  color: #38bdf8 !important;
}
.mobile-nav-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 20px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4) !important;
  margin-top: 4px !important;
}

/* ==========================================================================
   INTERACTIVE CLIENT IMAGE CAROUSEL
   ========================================================================== */
.client-carousel-section {
  padding: 64px 0 !important;
  background: #f8fafc !important;
  position: relative !important;
  overflow: hidden !important;
}
.client-carousel-container {
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  position: relative !important;
}
.client-carousel-header {
  text-align: center !important;
  margin-bottom: 36px !important;
}
.client-carousel-badge {
  display: inline-block !important;
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0284c7 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 14px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.client-carousel-title {
  font-family: var(--font-heading, 'Outfit', sans-serif) !important;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}
.client-carousel-desc {
  font-size: 16px !important;
  color: #475569 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}
.client-carousel-viewport {
  overflow: hidden !important;
  position: relative !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  background: #ffffff !important;
  padding: 12px 6px !important;
}
.client-carousel-track {
  display: flex !important;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform !important;
}
.client-carousel-slide {
  flex: 0 0 33.333% !important;
  min-width: 33.333% !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}
@media (max-width: 991px) {
  .client-carousel-slide {
    flex: 0 0 50% !important;
    min-width: 50% !important;
  }
}
@media (max-width: 640px) {
  .client-carousel-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
  }
}
.client-carousel-card {
  position: relative !important;
  height: 290px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.client-carousel-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.25) !important;
}
.client-carousel-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
  display: block !important;
}
.client-carousel-card:hover img {
  transform: scale(1.05) !important;
}
.client-carousel-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 14px 16px !important;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.5) 70%, transparent 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.client-carousel-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.2s ease !important;
}
.client-carousel-btn:hover {
  background: #0ea5e9 !important;
  color: #ffffff !important;
  border-color: #0ea5e9 !important;
  transform: translateY(-50%) scale(1.1) !important;
}
.client-carousel-prev {
  left: 12px !important;
}
.client-carousel-next {
  right: 12px !important;
}
.client-carousel-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 22px !important;
}
.client-carousel-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #cbd5e1 !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.25s ease !important;
}
.client-carousel-dot.is-active {
  width: 28px !important;
  border-radius: 10px !important;
  background: #0ea5e9 !important;
}

/* ==========================================================================
   HIGH CONTRAST & READABILITY FIXES (PREVENT ANY INVISIBLE TEXT)
   ========================================================================== */
nav[style*="font-size:13px"] a,
nav[style*="font-size: 13px"] a,
.breadcrumb a {
  color: #1e293b !important;
  font-weight: 500 !important;
}
nav[style*="font-size:13px"] a:hover,
nav[style*="font-size: 13px"] a:hover,
.breadcrumb a:hover {
  color: #0284c7 !important;
}
nav[style*="font-size:13px"],
nav[style*="font-size: 13px"],
.breadcrumb {
  color: #64748b !important;
}
nav[style*="font-size:13px"] span,
nav[style*="font-size: 13px"] span,
.breadcrumb span {
  color: #0284c7 !important;
  font-weight: 600 !important;
}

/* Fix white text inside light service process cards */
.service-step-card p,
div[style*="background:#ffffff"] p,
div[style*="background: #ffffff"] p,
div[style*="background:#f8fafc"] p,
div[style*="background: #f8fafc"] p,
div[style*="background:#f1f5f9"] p,
div[style*="background: #f1f5f9"] p {
  color: #334155 !important;
}

.service-step-card h3,
div[style*="background:#ffffff"] h3,
div[style*="background: #ffffff"] h3,
div[style*="background:#f8fafc"] h3,
div[style*="background: #f8fafc"] h3 {
  color: #0f172a !important;
}

@media (max-width: 768px) {
  .vertical-nav-dock {
    display: none !important;
  }
}


/* ==========================================================================
   PREMIUM QUOTE FORM DESIGN SYSTEM (COMPACT, STRUCTURED, CRISP BORDERS)
   ========================================================================== */
.section-form {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  padding: 16px 20px 48px !important;
  position: relative !important;
  min-height: calc(100vh - 140px) !important;
}

.container-small {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.title-x-large {
  margin-bottom: 12px !important;
  text-align: center !important;
}

.title-x-large .heading-style-h2 {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: clamp(24px, 3.6vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #0f172a !important;
  line-height: 1.18 !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.title-x-large .color-is-blue {
  color: #0284c7 !important;
}

.title-x-large .text-size-small,
.title-x-large p.text-size-small {
  color: #64748b !important;
  font-size: 14px !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  line-height: 1.35 !important;
}

.title-x-large .divider-wrapper {
  margin-bottom: 4px !important;
  gap: 0 !important;
  line-height: 1 !important;
}

.title-x-large .divider-caption {
  line-height: 1 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Prominent Google Review Badge (increased size wrt header) */
.title-x-large .google-review,
.divider-caption .google-review {
  width: clamp(260px, 30vw, 350px) !important;
  max-width: 360px !important;
  height: auto !important;
  max-height: none !important;
  display: inline-block !important;
  margin-bottom: 3px !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06)) !important;
}

/* Compact Contact Info Pill */
.contact-links {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  margin-bottom: 12px !important;
  padding: 6px 14px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.contact-link-block {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.contact-link-block:hover {
  background: #f1f5f9 !important;
}

.contact-link-block .contact-icon-wrapper {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(2, 132, 199, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.contact-link-block .contact-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.contact-link-block .icon-small {
  width: 16px !important;
  height: 16px !important;
  color: #0284c7 !important;
}

.contact-link-block .caption-small {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  line-height: 1.1 !important;
}

.contact-link-block .subheading-large {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}

/* Elevated True Form Card */
.contact-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 16px !important;
  padding: 28px 26px !important;
  box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.07), 0 4px 10px -2px rgba(15, 23, 42, 0.03) !important;
  position: relative !important;
  overflow: hidden !important;
}

.contact-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 50%, #68aa00 100%) !important;
}

/* Compact Form Layout */
.contact-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important; /* Eliminates the massive 48px gap! */
}

.column-x-small {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.form-field-label {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  letter-spacing: -0.01em !important;
}

.form-field-label .text-color-accent {
  color: #ef4444 !important;
  font-weight: 700 !important;
}

/* Crisp True Form Inputs */
.form-text-field,
input.form-text-field,
select.form-text-field {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1.5px solid #cbd5e1 !important; /* Clean visible outline */
  border-radius: 9px !important; /* Proper form corners, not 96px pill! */
  background-color: #f8fafc !important;
  color: #0f172a !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.form-text-field:hover,
select.form-text-field:hover {
  border-color: #94a3b8 !important;
  background-color: #ffffff !important;
}

.form-text-field:focus,
select.form-text-field:focus {
  border-color: #0284c7 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  outline: none !important;
}

.form-text-field::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* Selection Cards (Relocation Type & Move Size) */
.form-grid-four-column {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  .form-grid-four-column {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.radio-button-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 42px !important;
  height: auto !important;
  padding: 8px 6px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-bottom: 0 !important;
  user-select: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.radio-button-field:hover {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.08) !important;
}

/* Hide the old bloated absolute Webflow radio overlay */
.radio-button-field .radio-button {
  display: none !important;
}

.radio-button-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  pointer-events: none !important;
  margin-bottom: 0 !important;
  transition: color 0.2s ease !important;
}

/* Checked state */
.radio-button-field.is-selected,
.radio-button-field:has(input:checked) {
  border-color: #0284c7 !important;
  background: #e0f2fe !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
}

.radio-button-field.is-selected .radio-button-label,
.radio-button-field:has(input:checked) .radio-button-label {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

/* Date Dropdowns */
.select-flex {
  display: grid !important;
  grid-template-columns: 80px 1fr 100px !important;
  gap: 8px !important;
  width: 100% !important;
}

@media (max-width: 480px) {
  .select-flex {
    grid-template-columns: 1fr 1.5fr 1fr !important;
  }
}

select.form-text-field {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' height='16' stroke='%230284c7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;
  cursor: pointer !important;
}

/* GDPR Checkbox */
.check-flex {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9px !important;
  padding: 10px 14px !important;
  margin-top: 2px !important;
}

/* ==========================================================================
   BULLETPROOF ACCESSIBLE CONSENT CHECKBOXES
   ========================================================================== */
.checkbox-field,
.form_checkbox,
.w-checkbox.checkbox-field,
.w-checkbox.form_checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  margin-bottom: 14px !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.checkbox-field:hover,
.form_checkbox:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
}

.checkbox-field:focus-within,
.form_checkbox:focus-within {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important;
}

/* Explicit native checkbox styling overriding any global appearance resets */
input[type="checkbox"].custom-consent-checkbox,
.checkbox-field input[type="checkbox"],
.form_checkbox input[type="checkbox"],
.w-checkbox input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  z-index: 10 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: #0284c7 !important;
  border-radius: 5px !important;
  border: 1.5px solid #94a3b8 !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

/* Hide Webflow's artificial custom checkbox div completely */
.checkbox-field .w-checkbox-input,
.form_checkbox .w-checkbox-input,
.w-checkbox-input,
.w-checkbox-input--inputType-custom {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* Label text typography & layout */
.checkbox-field .text-size-tiny-2,
.form_checkbox .form_checkbox-label,
.checkbox-field .w-form-label,
.form_checkbox .w-form-label {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
  display: block !important;
  flex: 1 1 auto !important;
}

/* Links inside the consent label */
.checkbox-field a,
.form_checkbox a,
.checkbox-field .color-is-blue,
.form_checkbox .text-link {
  color: #0284c7 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 5 !important;
}

.checkbox-field a:hover,
.form_checkbox a:hover {
  color: #0369a1 !important;
}

/* Submit Button Row */
.flex-block-2 {
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.flex-block-2 .button.w-button {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flex-block-2 .button.w-button:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45) !important;
  transform: translateY(-1px) !important;
}

.flex-block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.flex-block .basictext {
  font-size: 12.5px !important;
  color: #15803d !important;
  font-weight: 600 !important;
}

.flex-block .icon-small-3 svg {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 767px) {
  .section-form {
    padding: 12px 12px 40px !important;
  }
  .contact-card {
    padding: 22px 16px !important;
    border-radius: 14px !important;
  }
  .contact-links {
    gap: 12px !important;
    padding: 8px 12px !important;
  }
}


/* ==========================================================================
   LIVE GOOGLE REVIEWS & RATING BADGE COMPONENT (https://share.google/JtssRFKLFeKJiIYUK)
   ========================================================================== */
.google-rating-live-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  padding: 6px 16px 6px 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  text-decoration: none !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  max-width: fit-content !important;
}

.google-rating-live-pill:hover {
  border-color: #4285f4 !important;
  box-shadow: 0 4px 14px rgba(66, 133, 244, 0.2) !important;
  transform: translateY(-1px) !important;
}

.google-rating-pill-logo {
  display: flex !important;
  align-items: center !important;
}

.google-rating-pill-stars,
.google-stars-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.google-star-svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  fill: #fbbc04 !important;
}

.google-rating-pill-text {
  font-weight: 600 !important;
  color: #334155 !important;
}

.google-rating-pill-text strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.google-rating-pill-count {
  color: #64748b !important;
  font-size: 12.5px !important;
}

/* Hero Badge Wrapper */
.hero-google-rating-wrapper {
  margin-bottom: 14px !important;
  display: inline-block !important;
}

/* Testimonial Section Google Header Row */
.testimonial-google-badge-wrapper {
  margin-bottom: 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.testimonial-header-pill-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.testimonial-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-view-all-reviews,
.btn-write-google-review {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

.btn-view-all-reviews:hover {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

.btn-write-google-review {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

.btn-write-google-review:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Card Header inside Review Card */
.google-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.google-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.google-review-time {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.google-verified-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  opacity: 0.85 !important;
  transition: opacity 0.2s ease !important;
}

.google-verified-link:hover {
  opacity: 1 !important;
}

.google-review-body {
  position: relative !important;
  margin-bottom: 16px !important;
}

.google-review-quote {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #334155 !important;
  font-weight: 400 !important;
}

.google-review-quote.is-clamped {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.btn-toggle-expand {
  background: none !important;
  border: none !important;
  color: #0284c7 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 4px 0 0 0 !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}

/* Owner Response Box */
.card-owner-response {
  background: #f8fafc !important;
  border-left: 3px solid #0284c7 !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  margin-top: 8px !important;
  font-size: 12px !important;
  max-height: 70px !important;
  overflow: hidden !important;
}

.owner-response-badge {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  margin-bottom: 4px !important;
}

.owner-response-text {
  color: #475569 !important;
  line-height: 1.5 !important;
  max-height: 120px !important;
  overflow-y: auto !important;
}

/* Author Row */
.zuhause_testimonial-sektion_client-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.google-author-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
}

.google-author-details {
  display: flex !important;
  flex-direction: column !important;
}

.author-name {
  font-size: 14.5px !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.author-badge {
  font-size: 11.5px !important;
  color: #64748b !important;
  margin-top: 2px !important;
}

/* Carousel Prev / Next Controls */
.testimonial-carousel-nav {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  padding: 0 16px !important;
}

.t-nav-btn {
  pointer-events: auto !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.t-nav-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  transform: scale(1.08) !important;
}

/* ==========================================================================
   ALL REVIEWS FULLSCREEN MODAL / DRAWER
   ========================================================================== */
.google-reviews-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.google-reviews-modal.is-open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.google-reviews-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.google-reviews-modal-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 960px !important;
  max-height: 90vh !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.reviews-modal-header {
  padding: 24px 28px 16px 28px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

.reviews-modal-header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

.reviews-modal-branding {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.modal-badge-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.btn-close-modal {
  background: #e2e8f0 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #1e293b !important;
  transition: all 0.2s ease !important;
  z-index: 100 !important;
  position: relative !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.btn-close-modal:hover {
  background: #cbd5e1 !important;
  color: #000000 !important;
  transform: scale(1.08) !important;
}

.btn-close-modal svg,
.btn-close-modal line {
  pointer-events: none !important;
}

.reviews-modal-score-bar {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  padding: 12px 18px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
}

.score-big {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1 !important;
  font-family: var(--font-heading) !important;
}

.score-stars-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.score-meta-text {
  font-size: 13px !important;
  color: #64748b !important;
}

.btn-modal-google-cta {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.btn-modal-google-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
  color: #ffffff !important;
}

.reviews-modal-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.reviews-search-box {
  flex: 1 !important;
  min-width: 240px !important;
  position: relative !important;
}

.reviews-search-box .search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

.reviews-search-box input {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 12px 8px 36px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.reviews-search-box input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.reviews-filter-pills {
  display: flex !important;
  gap: 6px !important;
}

.rf-pill {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.rf-pill:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.rf-pill.is-active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.reviews-modal-body {
  padding: 24px 28px !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
  gap: 16px !important;
  background: #f1f5f9 !important;
}

.reviews-modal-body .zuhause_testimonial-sektion_card {
  width: 100% !important;
  min-width: unset !important;
  margin-right: 0 !important;
}

.reviews-empty-state {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 48px 16px !important;
  color: #64748b !important;
  font-size: 15px !important;
}

@media (max-width: 768px) {
  .google-rating-live-pill {
    padding: 5px 12px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }
  .google-wordmark-svg {
  height: 18px !important;
  width: 53px !important;
  max-height: 18px !important;
  max-width: 53px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
  .google-star-svg {
    width: 13px !important;
    height: 13px !important;
  }
  .testimonial-header-pill-row {
    flex-direction: column !important;
    align-items: center !important;
  }
  .google-reviews-modal {
    padding: 8px !important;
  }
  .google-reviews-modal-content,
  .reviews-modal-content {
    max-height: 94vh !important;
    border-radius: 14px !important;
    width: 100% !important;
  }
  .reviews-modal-header {
    padding: 14px 16px !important;
  }
  .reviews-modal-body {
    padding: 14px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .reviews-modal-body .zuhause_testimonial-sektion_card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .reviews-modal-score-bar {
    flex-wrap: wrap !important;
  }
  .btn-modal-google-cta {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }
  .testimonial-carousel-nav {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS POLISH & iOS FORM AUTO-ZOOM PREVENTION
   ========================================================================== */
@media (max-width: 768px) {
  /* Prevent iOS Safari 16px auto-zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  textarea,
  select,
  .w-input,
  .w-select,
  .form_input,
  .form-text-field {
    font-size: 16px !important;
  }

  /* Prevent side wobble / horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    max-width: 100vw;
  }

  .main-wrapper, .page-wrapper {
    overflow-x: clip !important;
    width: 100%;
    max-width: 100vw;
  }

  /* Ensure containers do not exceed mobile screen */
  .container-large, .container, .padding-global {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ==========================================================================
     COMPREHENSIVE MOBILE BUTTON RESPONSIVENESS & LONG-TEXT VISIBILITY
     ========================================================================== */
  .button:not(.header_cta-btn),
  .w-button:not(.header_cta-btn),
  .f-button:not(.header_cta-btn),
  .btn:not(.header_cta-btn),
  .hero_cta-btn,
  .mobile-nav-cta,
  .button-group .button:not(.header_cta-btn),
  a.button:not(.header_cta-btn),
  button.button:not(.header_cta-btn) {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 12px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* HTML input submit/button elements (fix clipping and ellipsis) */
  input[type="submit"].button,
  input[type="button"].button,
  input[type="submit"].w-button,
  input[type="button"].w-button,
  input[type="submit"],
  input[type="button"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  /* Full-width CTA Bottom & Service Page CTA buttons */
  .button.is-secondary.is-orange,
  .zuhause_cta-sektion_card .button,
  .button-group.is-center .button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    height: auto !important;
    min-height: 50px !important;
  }

  /* Multi-step form step buttons */
  .form-buttons {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .form-buttons.spread {
    justify-content: space-between !important;
  }

  #Weiter-Ende,
  [data-form="submit-btn"],
  [data-form="next-btn"] {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    font-size: 15px !important;
  }

  /* Mobile container button-groups */
  .button-group:not(.video-hero-cta-group) {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  .button-group:not(.video-hero-cta-group) .button {
    width: 100% !important;
  }
}


/* ==========================================================================
   MODERN BRANDED DATE PICKER (Flatpickr Theme & Inputs)
   ========================================================================== */
.date-picker-wrapper {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.date-picker-wrapper .date-picker-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0284c7 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.date-picker-wrapper:focus-within .date-picker-icon {
  color: #0369a1 !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.date-picker-wrapper input.date-picker-input,
input.form-text-field.date-picker-input,
input.text-field.date-picker-input {
  width: 100% !important;
  padding-left: 44px !important;
  padding-right: 14px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.date-picker-wrapper input.date-picker-input:hover,
input.form-text-field.date-picker-input:hover,
input.text-field.date-picker-input:hover {
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
}

.date-picker-wrapper input.date-picker-input:focus,
.date-picker-wrapper input.date-picker-input.active,
input.form-text-field.date-picker-input:focus,
input.form-text-field.date-picker-input.active,
input.text-field.date-picker-input:focus,
input.text-field.date-picker-input.active {
  border-color: #0284c7 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(2, 132, 199, 0.18) !important;
  outline: none !important;
}

/* Flatpickr Calendar Styling overrides */
.flatpickr-calendar {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.16), 0 6px 14px -2px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
  font-family: inherit !important;
  overflow: hidden !important;
  padding: 0 !important;
  z-index: 999999 !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #0284c7 !important;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #ffffff !important;
}

.flatpickr-months {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  padding: 6px 4px !important;
  display: flex !important;
  align-items: center !important;
}

.flatpickr-months .flatpickr-month {
  color: #ffffff !important;
  fill: #ffffff !important;
  height: 38px !important;
}

.flatpickr-current-month {
  font-size: 105% !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  padding-top: 6px !important;
}

.flatpickr-current-month .cur-month {
  font-weight: 700 !important;
  color: #ffffff !important;
}

.flatpickr-current-month input.cur-year {
  font-weight: 700 !important;
  color: #ffffff !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #ffffff !important;
  fill: #ffffff !important;
  padding: 8px !important;
  height: 36px !important;
  width: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: background 0.15s ease !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #ffffff !important;
  width: 14px !important;
  height: 14px !important;
}

.flatpickr-weekdays {
  background: #f0f9ff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 6px 0 !important;
}

span.flatpickr-weekday {
  color: #0369a1 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.flatpickr-days {
  padding: 8px !important;
}

.flatpickr-day {
  border-radius: 8px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 2px !important;
  transition: all 0.15s ease !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #e0f2fe !important;
  border-color: #e0f2fe !important;
  color: #0284c7 !important;
}

.flatpickr-day.today {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
  background: #f0f9ff !important;
}

.flatpickr-day.today:hover {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 8px -1px rgba(2, 132, 199, 0.35) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #cbd5e1 !important;
  background: transparent !important;
  cursor: not-allowed !important;
}


/* ==========================================================================
   MOBILE HEADER ADJUSTMENTS (CTA Button Hidden on Mobile & Rating Gap)
   ========================================================================== */
.header_google-rating {
  margin-right: 18px !important;
}

.header_contacts {
  margin-left: 6px !important;
}

@media (max-width: 1024px) {
  .header_google-rating {
    margin-right: 16px !important;
  }
  .header_contacts {
    margin-left: 4px !important;
  }
  /* Hide Get a free quote button on Mobile & Tablet devices (Ultra-specific) */
  .single-header .header_cta-btn,
  .single-header a.header_cta-btn,
  a.button.header_cta-btn,
  a.w-button.header_cta-btn,
  a.button.w-button.header_cta-btn,
  .header_cta-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 768px) {
  .header_google-rating {
    margin-right: 14px !important;
  }
}