.elementor-189 .elementor-element.elementor-element-961520f{--display:flex;--min-height:0px;--margin-top:54px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-202c3d2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-189 .elementor-element.elementor-element-39fc62b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-189 .elementor-element.elementor-element-6d42abd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-189 .elementor-element.elementor-element-d23d4ea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-189 .elementor-element.elementor-element-48e456e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-189 .elementor-element.elementor-element-05309d2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-189 .elementor-element.elementor-element-d0090d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-189 .elementor-element.elementor-element-13d53af{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-189 .elementor-element.elementor-element-5ee0187{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-189 .elementor-element.elementor-element-8856766{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-189 .elementor-element.elementor-element-13358a5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-189 .elementor-element.elementor-element-961520f{--margin-top:6px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-39fc62b{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-6d42abd{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-d23d4ea{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-48e456e{--justify-content:space-between;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-05309d2{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-d0090d6{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-6723fe3{padding:0px 0px 0px 0px;}.elementor-189 .elementor-element.elementor-element-13d53af{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-5ee0187{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-8856766{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-189 .elementor-element.elementor-element-13358a5{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-c0c6c43 *//* --- PORTFOLIO SECTION BASE --- */
.final-portfolio-section { 
  padding: 120px 0 !important; 
  background: #ffffff !important; 
  font-family: 'Montserrat', sans-serif !important; 
}
.portfolio-grid-wrapper { 
  max-width: 1300px; 
  margin: 0 auto; 
  padding: 0 40px; 
}

/* --- HEADER AREA --- */
.portfolio-header-area { 
  text-align: center; 
  margin-bottom: 90px !important; 
}
.portfolio-subtitle { 
  font-size: 10px; 
  text-transform: uppercase; 
  color: #89b53e; 
  letter-spacing: 6px; 
  display: block; 
  margin-bottom: 20px; 
  font-weight: 700; 
}
.portfolio-main-title { 
  font-family: 'Cormorant Garamond', serif !important; 
  font-size: clamp(32px, 5vw, 52px) !important; 
  color: #1a1a1a !important; 
  font-weight: 400; 
  line-height: 1.2; 
}
.portfolio-green-title { 
  color: #89b53e; 
  font-style: italic; 
}
.portfolio-accent-line { 
  width: 40px; 
  height: 1.5px; 
  background: #89b53e; 
  margin: 35px auto 0; 
}

/* --- GRID SYSTEM --- */
.portfolio-container-grid { 
  display: grid !important; 
  grid-template-columns: repeat(3, 1fr) !important; 
  gap: 80px 40px !important; 
}

/* --- CARD DESIGN --- */
.portfolio-item-card { 
  background: transparent !important; 
}
.portfolio-image-box { 
  width: 100% !important; 
  aspect-ratio: 4 / 5 !important; 
  overflow: hidden !important; 
  margin-bottom: 30px !important; 
  position: relative !important; 
  background: #f8f8f8; 
}
.portfolio-image-box img { 
  width: 100% !important; 
  height: 100% !important; 
  object-fit: cover !important; 
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1); 
}

/* --- HOVER EFFECTS --- */
.portfolio-image-overlay { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  background: rgba(26, 26, 26, 0.4); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  opacity: 0; 
  transition: all 0.6s ease; 
  z-index: 2; 
}
.overlay-text { 
  color: #fff; 
  font-family: 'Cormorant Garamond', serif; 
  font-size: 20px; 
  font-style: italic; 
  transform: translateY(20px); 
  transition: transform 0.6s ease; 
}

.portfolio-item-card:hover .portfolio-image-overlay { opacity: 1; }
.portfolio-item-card:hover .overlay-text { transform: translateY(0); }
.portfolio-item-card:hover .portfolio-image-box img { transform: scale(1.1); }

/* --- TEXT CONTENT --- */
.portfolio-category { 
  font-size: 9px; 
  text-transform: uppercase; 
  color: #89b53e; 
  letter-spacing: 3px; 
  font-weight: 700; 
  margin-bottom: 12px; 
}
.portfolio-item-title { 
  font-family: 'Cormorant Garamond', serif !important; 
  font-size: 26px !important; 
  font-weight: 500; 
  color: #1a1a1a; 
  margin: 0 0 15px 0 !important; 
  line-height: 1.2; 
  min-height: 60px; 
  display: flex; 
  align-items: center; 
}
.portfolio-item-desc { 
  font-size: 14px !important; 
  color: #666; 
  line-height: 1.7 !important; 
  margin-bottom: 25px !important; 
  min-height: 75px; 
}

/* --- BUTTON STYLE --- */
.portfolio-item-footer { 
  padding-top: 15px; 
  border-top: 1px solid #f0f0f0; 
}
.portfolio-btn { 
  font-size: 11px; 
  font-weight: 700; 
  color: #1a1a1a; 
  text-decoration: none; 
  letter-spacing: 2px; 
  position: relative; 
  padding-bottom: 5px; 
  transition: color 0.3s ease; 
  display: inline-block; 
}
.portfolio-btn::after { 
  content: ''; 
  position: absolute; 
  bottom: 0; left: 0; 
  width: 30px; 
  height: 1px; 
  background: #89b53e; 
  transition: width 0.4s ease; 
}
.portfolio-btn:hover { color: #89b53e; }
.portfolio-btn:hover::after { width: 100%; }

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1024px) { 
  .portfolio-container-grid { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 60px 30px !important; 
  } 
}
@media (max-width: 768px) { 
  .final-portfolio-section { padding: 80px 0 !important; } 
  .portfolio-grid-wrapper { padding: 0 25px; }
  .portfolio-container-grid { 
    grid-template-columns: 1fr !important; 
    gap: 50px !important; 
  } 
  .portfolio-image-box { aspect-ratio: 1 / 1 !important; } 
  .portfolio-item-title { min-height: auto; margin-bottom: 10px !important; }
  .portfolio-item-desc { min-height: auto; }
}/* End custom CSS */
/* Start custom CSS */<section class="sb-new-hero Home-desktop">
  <div class="sb-hero-container">
    <div class="sb-slider">
      <div class="sb-slide-track">
        <div class="sb-slide"><img src="https://spotless-beauty.de/wp-content/uploads/2026/02/powderbrows-titelbild-spotless-beauty-tuttlingen_ergebnis_ergebnis.webp" fetchpriority="high" alt="Permanent Make-up Tuttlingen"></div>
        <div class="sb-slide"><img src="https://spotless-beauty.de/wp-content/uploads/2026/02/Haarentfernung-Mann-Spotless-Beauty-Tuttlingen-Grundbild_ergebnis.webp" loading="lazy" alt="Dauerhafte Haarentfernung Tuttlingen"></div>
        <div class="sb-slide"><img src="https://spotless-beauty.de/wp-content/uploads/2026/01/wimpernverlaengerung_spotless-beauty-tuttlingen-titelbild_ergebnis.webp" loading="lazy" alt="Wimpernverlängerung Tuttlingen"></div>
        <div class="sb-slide"><img src="https://spotless-beauty.de/wp-content/uploads/2026/02/lippen_permanent-make-up_spotless-beauty-tuttlingen-titelbild_ergebnis_ergebnis.webp" loading="lazy" alt="Lippenpigmentierung Permanent Make-up"></div>
      </div>
    </div>

    <div class="sb-hero-content-layer">
      <div class="sb-hero-glass-box">
        <div class="sb-stars">★★★★★</div>
        <p class="sb-artist-label">Spotless Beauty & Aesthetic</p>
        <h1 class="sb-main-title">
          <span class="sb-seo-span">Ihr Beauty Studio Tuttlingen</span>
          Schönheit, die bleibt.
        </h1>
        <div class="sb-hero-desc">
          Ihr Expertenzentrum für 
          <a href="https://spotless-beauty.de/dauerhafte-haarentfernung-damen/" class="sb-inline-link"><strong>Dauerhafte Haarentfernung</strong></a>, 
          professionelles <a href="https://spotless-beauty.de/augenbrauen/" class="sb-inline-link"><strong>Permanent Make-up</strong></a> 
          und exzellente <a href="https://spotless-beauty.de/wimpernverlaengerung/" class="sb-inline-link"><strong>Wimpernverlängerung</strong></a>. 
          Ergänzt durch <span class="trigger-aesthetik sb-inline-link" style="cursor:pointer;"><strong>Faltenunterspritzung</strong></span>.
        </div>
        <div class="sb-hero-btns">
          <a href="javascript:void(0);" class="sb-btn-green trigger-rueckruf">Wunschtermin</a>
          <a href="#Unser_Portfolio" class="sb-btn-outline">Portfolio</a>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  :root { --sb-green: #89b53e; --sb-dark: #1a1a1b; }

  /* 1. SEKTION GLOBAL NACH HINTEN */
  .sb-new-hero { 
    position: relative; 
    z-index: 1 !important; 
    overflow: visible !important; 
  }

  /* SLIDER BASIS */
  .sb-slider { position: absolute; width: 100%; height: 100%; z-index: 1; }
  .sb-slide-track { display: flex; width: 400%; height: 100%; animation: sbSlide 20s infinite ease-in-out; }
  .sb-slide { width: 25%; }
  .sb-slide img { object-fit: cover; width: 100%; height: 100%; filter: brightness(0.9); }

  @keyframes sbSlide { 
    0%, 20% { transform: translateX(0); } 
    25%, 45% { transform: translateX(-25%); } 
    50%, 70% { transform: translateX(-50%); } 
    75%, 95% { transform: translateX(-75%); } 
    100% { transform: translateX(0); } 
  }

  /* 2. DER KLICK-FIX FÜR DAS MENÜ */
  .sb-hero-content-layer { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    /* Lässt Klicks zum Menü durch: */
    pointer-events: none !important; 
  }

  /* 3. NUR DIE BOX DARF REAGIEREN */
  .sb-hero-glass-box { 
    pointer-events: auto !important; 
    background: rgba(255, 255, 255, 0.96); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    padding: 50px; 
    width: 100%; 
    max-width: 500px; 
    text-align: center; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  }

  /* OPTIK STYLES */
  .sb-main-title { font-family: 'Cormorant Garamond', serif; font-size: 52px; color: var(--sb-dark); line-height: 1.1; margin: 15px 0; }
  .sb-seo-span { font-size: 12px; display: block; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; color: var(--sb-green); margin-bottom: 5px; }
  .sb-hero-desc { color: #555; font-size: 14px; line-height: 1.7; margin-bottom: 30px; }
  .sb-hero-btns { display: flex; gap: 15px; justify-content: center; }
  .sb-btn-green, .sb-btn-outline { flex: 1; padding: 18px; text-decoration: none !important; font-weight: 700; text-transform: uppercase; font-size: 11px; border-radius: 2px; transition: 0.3s; }
  .sb-btn-green { background: var(--sb-green); color: #fff !important; }
  .sb-btn-outline { border: 2px solid var(--sb-dark); color: var(--sb-dark) !important; }
  .sb-btn-green:hover { background: var(--sb-dark); }
  .sb-stars { color: #c5a059; letter-spacing: 5px; margin-bottom: 10px; }
  .sb-artist-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #888; letter-spacing: 1px; }

  /* DESKTOP HÖHE */
  @media (min-width: 769px) { .sb-new-hero { height: 650px; } }

  /* MOBILE FIX */
  @media (max-width: 768px) {
    .Home-desktop { display: none; }
  }
</style>/* End custom CSS */