.elementor-kit-6{--e-global-color-primary:#9ABB37;--e-global-color-secondary:#2D3436;--e-global-color-text:#535C68;--e-global-color-accent:#F9F7F4;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat family";--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Montserrat family";--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;font-family:"Cormorant Garamond", Sans-serif;font-weight:400;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-primary );line-height:1.3px;color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-primary );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{line-height:1em;}.elementor-kit-6 h1{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-6 h2{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-6 h3{font-weight:500;}.elementor-kit-6 h4{line-height:1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6 h1{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-6 h2{line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-letter-spacing:0px;--e-global-typography-primary-word-spacing:0em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-secondary-word-spacing:0em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-text-word-spacing:0em;--e-global-typography-accent-letter-spacing:0px;--e-global-typography-accent-word-spacing:0em;}.elementor-kit-6 a{line-height:1em;}.elementor-kit-6 h1{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-6 h2{line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */============================================================

   1. SPOTLESS BEAUTY: UNIVERSAL HERO (SB-Klassen)

   ============================================================ */



.sb-hero-wrapper {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    min-height: 800px !important;

    position: relative;

    overflow: hidden;

}



.sb-hero-wrapper .sb-hero-glass {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    padding: 60px 50px !important;

    background: rgba(255, 255, 255, 0.35) !important;

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

    border: 1px solid rgba(255, 255, 255, 0.3);

    max-width: 550px !important;

    width: 90% !important;

    z-index: 10;

    text-align: center;

    box-shadow: 0 20px 50px rgba(0,0,0,0.1);

}



.sb-hero-wrapper .sb-item-h1 {

    font-family: 'Cormorant Garamond', serif !important;

    font-size: clamp(38px, 6vw, 56px) !important;

    line-height: 1.3 !important; 

    margin: 20px 0 !important;

    color: #1a1a1a !important;

}



.sb-hero-wrapper .sb-section-bottom {

    width: 100% !important;

    margin-top: 30px !important;

}



.sb-hero-wrapper .sb-btn-container {

    display: flex !important;

    gap: 15px !important;

    justify-content: center !important;

    width: 100% !important;

}



.sb-hero-wrapper .sb-btn {

    flex: 1 !important;

    padding: 18px 25px !important;

    text-transform: uppercase !important;

    font-weight: 700 !important;

    font-size: 12px !important;

    letter-spacing: 1px !important;

    text-decoration: none !important;

    transition: all 0.4s ease !important;

    display: inline-block !important;

}



.sb-hero-wrapper .sb-btn-green {

    background: #89b53e !important;

    color: white !important;

    border: 1px solid #89b53e !important;

}



.sb-hero-wrapper .sb-btn-white {

    background: transparent !important;

    color: #1a1a1a !important;

    border: 1px solid #1a1a1a !important;

}



.sb-hero-wrapper .sb-btn:hover {

    background: #769e35 !important;

    color: white !important;

    border-color: #769e35 !important;

    transform: translateY(-3px) !important;

    box-shadow: 0 10px 20px rgba(137, 181, 62, 0.2) !important;

}



@keyframes fadeInUpReveal {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }

}



.sb-section-top { opacity: 0; animation: fadeInUpReveal 0.8s ease forwards 0.3s; }

.sb-section-center { opacity: 0; animation: fadeInUpReveal 0.8s ease forwards 0.7s; }

.sb-section-slogan { opacity: 0; animation: fadeInUpReveal 0.8s ease forwards 1.1s; }

.sb-section-bottom { opacity: 0; animation: fadeInUpReveal 0.8s ease forwards 1.5s; }



@media (max-width: 768px) {

    .sb-hero-wrapper { min-height: 650px !important; }

    .sb-hero-wrapper .sb-hero-glass { width: 92% !important; padding: 40px 20px !important; min-height: auto !important; }

    .sb-hero-wrapper .sb-item-h1 { font-size: 32px !important; }

    .sb-hero-wrapper .sb-btn-container { flex-direction: column !important; gap: 12px !important; }

    .sb-hero-wrapper .sb-btn { width: 100% !important; }

}



/* ============================================================

   2. SPOTLESS BEAUTY: EXPERTEN-BLOCK (SF-Klassen)

   ============================================================ */



.sf-expert-wrapper-final { 

    width: 100% !important; 

    background: #ffffff; 

    padding: 100px 0 0 0;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.sf-header-final { text-align: center; margin-bottom: 50px; padding: 0 20px; }



.sf-label-top, .sf-label-cta { 

    display: block;

    font-size: 11px; 

    text-transform: uppercase; 

    color: #89b53e; 

    font-weight: 700; 

    letter-spacing: 4px; 

    margin-bottom: 15px;

}



.sf-headline, .sf-cta-head { 

    font-family: 'Cormorant Garamond', serif; 

    font-size: clamp(32px, 5vw, 48px); 

    color: #1a1a1a; 

    font-weight: 500;

    line-height: 1.2 !important;

}



.sf-line { width: 45px; height: 1px !important; background: #89b53e; margin: 25px auto 0 auto; }



.sf-content-grid { 

    display: grid; 

    grid-template-columns: repeat(3, 1fr); 

    gap: 30px; 

    max-width: 1200px; 

    padding: 60px 20px;

}



.sf-card { 

    padding: 40px 30px;

    background: #fff;

    border: 1px solid #f0f0f0;

    transition: all 0.4s ease;

    text-align: center;

}



.sf-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.05);

    border-color: rgba(137, 181, 62, 0.3);

}



.sf-accent { width: 40px; height: 1px !important; background: #89b53e; margin: 0 auto 25px auto; }



.sf-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #1a1a1a; margin-bottom: 15px; }



.sf-card p { font-size: 14px; line-height: 1.7; color: #555; }



.sf-cta-area { 

    width: 100%; 

    background: #fdfcfb; 

    padding: 100px 20px; 

    text-align: center;

    border-top: 1px solid #f0f0f0;

}



.sf-cta-p { font-size: 15px; color: #555; max-width: 650px; margin: 0 auto 40px auto; line-height: 1.8; }



.sf-button { 

    background: #1a1a1a; 

    color: #fff !important; 

    padding: 20px 45px; 

    font-size: 12px; 

    font-weight: 700;

    text-decoration: none;

    text-transform: uppercase;

    transition: 0.3s;

    display: inline-block;

}



.sf-button:hover { background: #89b53e; }



.sf-footer-note { 

    margin-top: 60px; 

    font-size: 11px; 

    color: #aaa; 

    max-width: 800px; 

    padding-top: 25px; 

    border-top: 1px dotted #ccc;

    margin-left: auto;

    margin-right: auto;

}



@media (max-width: 900px) {

    .sf-content-grid { grid-template-columns: 1fr; }

    .sf-button { width: 100% !important; max-width: 300px; }

}

/* ============================================================

   3. SPOTLESS BEAUTY: PREMIUM PRICING (ZENTRAL)

   ============================================================ */



.sf-pricing-section { 

    width: 100% !important; 

    padding: 100px 0 !important; 

    background: #fff; 

}



/* Grid mit Abstand zwischen den Karten */

.lash-grid { 

    display: grid; 

    grid-template-columns: 1fr 1fr; 

    gap: 40px; /* Erzeugt den gewünschten Abstand zwischen den Boxen */

    max-width: 1200px;

    margin: 0 auto 80px auto;

}



.sf-service-card { 

    background: #fff; 

    display: flex; 

    flex-direction: column;

    border: 1px solid #f0f0f0; /* Subtiler Rahmen statt harter Kante */

    transition: all 0.4s ease;

}



.sf-service-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.05);

}



.sf-card-img { 

    width: 100%; 

    aspect-ratio: 16 / 10; /* Eleganteres Breitbild-Format */

    overflow: hidden; 

}



.sf-card-img img { 

    width: 100%; 

    height: 100%; 

    object-fit: cover; 

    transition: transform 0.6s ease;

}



.sf-service-card:hover .sf-card-img img { transform: scale(1.05); }



.sf-card-body { 

    padding: 40px; 

    display: flex; 

    flex-direction: column; 

    flex-grow: 1; 

}



/* Preis-Ästhetik */

.sf-price-value { 

    font-family: 'Cormorant Garamond', serif; 

    font-size: 56px; 

    color: #1a1a1a; 

    line-height: 1;

    margin: 15px 0 30px 0;

}



.sf-refill-list { border-top: 1px solid #f5f5f5; padding-top: 25px; margin-bottom: 35px; }



/* Button als echtes Premium-Element */

.sf-btn-booking { 

    background: #1a1a1a !important; 

    color: #fff !important; 

    text-align: center; 

    padding: 20px; 

    text-decoration: none; 

    font-size: 12px; 

    font-weight: 700; 

    text-transform: uppercase; 

    letter-spacing: 2px;

    display: block;

    margin-top: auto;

    transition: 0.3s ease;

}



.sf-btn-booking:hover { background: #89b53e !important; }



/* MOBILE OPTIMIERUNG */

@media (max-width: 900px) {

    .lash-grid { 

        grid-template-columns: 1fr !important; 

        gap: 30px !important; 

        padding: 0 20px;

    }

    

    .sf-card-body { padding: 30px 20px !important; }

    

    .sf-price-value { font-size: 46px !important; }

}

/* ============================================================

   4. SPOTLESS BEAUTY: WORKFLOW (DEIN WEG ZUM LOOK)

   ============================================================ */



.sf-workflow-section {

    width: 100% !important;

    padding: 100px 0 !important;

    background-color: #f9f7f4; 

}

.sf-workflow-grid {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 30px;

    max-width: 1200px;

    margin: 0 auto;

}



.sf-workflow-item {

    flex: 1;

    min-width: 280px;

    max-width: 350px;

    background: #ffffff;

    padding: 50px 30px;

    text-align: center;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    border: 1px solid rgba(0,0,0,0.03);

}



.sf-workflow-item:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.05);

}



/* Icon & Step-Number Design */

.sf-icon-box { 

    position: relative; 

    margin: 0 auto 30px auto; 

    width: 80px;

}



.sf-icon-circle {

    width: 80px;

    height: 80px;

    background: #fdfcfb; 

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(137, 181, 62, 0.15);

    transition: all 0.3s ease;

}



.sf-workflow-item:hover .sf-icon-circle { 

    background: #89b53e; 

    border-color: #89b53e;

}



.sf-workflow-item:hover .sf-icon-circle svg { 

    stroke: #ffffff; 

}



.sf-step-num {

    position: absolute;

    top: 0;

    right: -5px;

    width: 28px;

    height: 28px;

    background: #1a1a1a;

    color: #ffffff;

    border-radius: 50%;

    font-size: 11px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Text-Styling */

.sf-step-h3 { 

    font-family: 'Cormorant Garamond', serif; 

    font-size: 26px; 

    color: #1a1a1a; 

    margin-bottom: 15px; 

}



.sf-step-p { 

    font-size: 14px; 

    line-height: 1.8; 

    color: #555; 

}



/* Mobile Optimierung */

@media (max-width: 768px) {

    .sf-workflow-section { padding: 60px 20px !important; }

    .sf-workflow-item { max-width: 100%; width: 100%; padding: 40px 25px; }

}

/* ============================================================

   5. SPOTLESS BEAUTY: EXPERTISE & TRUST

   ============================================================ */



.sf-exp-section { padding: 100px 0; background-color: #ffffff; }



/* Grid-Logik */

.sf-exp-content { 

    display: grid; 

    grid-template-columns: 1fr 1.1fr; 

    gap: 80px; 

    align-items: start;

}



/* Bild-Design mit Schatten-Effekt */

.sf-exp-img-box { position: relative; width: 100%; }

.sf-exp-img-box img { 

    width: 100%; 

    height: auto; 

    box-shadow: 30px 30px 0px #f9f7f4; /* Der helle Versatz */

    transition: all 0.5s ease;

}



.sf-exp-experience-badge { 

    position: absolute; 

    bottom: -15px; 

    right: -15px; 

    background: #89b53e; 

    color: #fff; 

    padding: 15px 25px; 

    z-index: 10;

}



/* Bio & Text */

.sf-exp-bio { margin-top: 50px; }

.sf-exp-p { 

    font-size: 16px; 

    line-height: 1.8 !important; 

    color: #555; 

    font-style: italic;

    border-left: 2px solid #f9f7f4;

    padding-left: 25px;

}



/* Zertifikate-Grid */

.sf-exp-cert-double-wrapper { 

    display: grid; 

    grid-template-columns: 1fr 1fr; 

    gap: 20px; 

    margin-bottom: 40px; 

}



.sf-cert-img-wrapper { 

    background: #fff; 

    padding: 15px; 

    border: 1px solid #f2f2f2; 

    aspect-ratio: 4/3; 

    display: flex; 

    align-items: center; 

    justify-content: center;

}



/* Trust-Box Premium */

.sf-exp-trust-box { 

    background: #fdfcfb; 

    padding: 45px; 

    border-radius: 0; 

    border: 1px solid #f5f5f5;

    border-top: 4px solid #89b53e;

}



.sf-trust-txt strong { font-size: 17px; letter-spacing: 0.5px; display: block; margin-bottom: 5px; }

.sf-trust-subtext { color: #89b53e !important; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }



/* Mobile Anpassungen */

@media (max-width: 900px) {

    .sf-exp-content { grid-template-columns: 1fr; gap: 50px; }

    .sf-exp-img-box img { box-shadow: 15px 15px 0px #f9f7f4; }

    .sf-exp-bio { margin-top: 30px; text-align: center; }

    .sf-exp-p { padding-left: 0; border-left: none; }

    .sf-exp-trust-box { padding: 30px 20px; }

}

/* ============================================================

   6. SPOTLESS BEAUTY: REVIEWS (SLIDER)

   ============================================================ */



.sf-review-section { 

    width: 100% !important; 

    padding: 100px 0 !important; 

    background-color: #ffffff; 

}



.sf-review-card {

    max-width: 900px; 

    margin: 0 auto; 

    background: #f4f8ee; /* Soft Green passend zur Brand */

    padding: 80px 40px; 

    text-align: center; 

    border: 1px solid rgba(137, 181, 62, 0.1);

    position: relative;

}



/* Slide Animation */

.sf-slide { 

    display: none; 

    animation: sfFade 0.8s ease;

    min-height: 250px; /* Verhindert Layout-Springen */

}



.sf-slide.active { display: block !important; }



@keyframes sfFade { from { opacity: 0; } to { opacity: 1; } }



.sf-stars { 

    color: #c5a059; 

    font-size: 22px; 

    margin-bottom: 25px; 

    display: block; 

}



.sf-quote { 

    font-size: clamp(18px, 4vw, 22px); 

    line-height: 1.7 !important; 

    color: #555; 

    font-style: italic; 

    margin: 0 auto 40px auto; 

    max-width: 750px;

    font-family: 'Cormorant Garamond', serif;

}



.sf-name { 

    font-family: 'Montserrat', sans-serif; 

    font-size: 14px; 

    text-transform: uppercase; 

    letter-spacing: 2px; 

    color: #1a1a1a; 

    font-weight: 700; 

    margin-bottom: 5px; 

}



/* Dots & Button */

.sf-dots { margin: 40px 0; }

.sf-dot { 

    height: 8px; 

    width: 8px; 

    background: rgba(137, 181, 62, 0.2); 

    border-radius: 50%; 

    display: inline-block; 

    margin: 0 6px; 

    cursor: pointer; 

    transition: 0.3s; 

}

.sf-dot.active { background: #89b53e; width: 24px; border-radius: 10px; }



.sf-btn-outline {

    display: inline-block; 

    font-size: 11px; 

    text-transform: uppercase; 

    letter-spacing: 2px; 

    color: #1a1a1a;

    text-decoration: none; 

    border: 1px solid #1a1a1a; 

    padding: 18px 40px; 

    font-weight: 700;

    transition: all 0.3s ease;

}



.sf-btn-outline:hover { background: #1a1a1a; color: #fff; }



/* Mobile Optimierung */

@media (max-width: 768px) {

    .sf-review-section { padding: 60px 20px !important; }

    .sf-review-card { padding: 50px 20px; }

    .sf-quote { font-size: 18px; min-height: 200px; }

}

/* ============================================================

   7. SPOTLESS BEAUTY: GALLERY SLIDER (REFINED)

   ============================================================ */



.sf-gallery-section {

    padding: 100px 0;

    background: #fff;

    overflow: hidden;

}



.sf-gallery-container {

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

    padding: 0 50px; /* Platz für Pfeile */

}



.sf-gallery-viewport {

    overflow: hidden;

    width: 100%;

}



.sf-gallery-track {

    display: flex;

    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

    gap: 30px; /* Der wichtige Abstand zwischen den Bildern */

}



.sf-gallery-item {

    min-width: calc(33.333% - 20px); /* 3 Bilder auf Desktop */

    aspect-ratio: 1 / 1;

    border-radius: 4px;

    overflow: hidden;

    background: #f9f7f4;

}



.sf-gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;

}



.sf-gallery-item:hover img { transform: scale(1.05); }



/* Pfeile Design */

.sf-nav-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: #fff;

    border: 1px solid #eee;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    cursor: pointer;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.3s;

}



.sf-nav-btn:hover { background: #89b53e; color: #fff; border-color: #89b53e; }

.sf-prev { left: 0; }

.sf-next { right: 0; }



/* Mobile Optimierung */

@media (max-width: 900px) {

    .sf-gallery-item { min-width: calc(50% - 15px); } /* 2 Bilder */

    .sf-gallery-container { padding: 0 40px; }

}



@media (max-width: 600px) {

    .sf-gallery-item { min-width: 100%; } /* 1 Bild vollflächig */

    .sf-nav-btn { width: 35px; height: 35px; font-size: 12px; }

}

/* ============================================================

   8. SPOTLESS BEAUTY: FLUID FAQ (SEO & MOBILE REPAIR)

   ============================================================ */

.sf-faq-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 60px 20px;

    font-family: 'Montserrat', sans-serif;

}



.sf-faq-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0 60px; /* Großer horizontaler Abstand für Luftigkeit */

}



.sf-faq-item {

    border-bottom: 1px solid #f0f0f0; /* Sehr feine Trennlinie */

    margin-bottom: 5px;

}



.sf-faq-question {

    width: 100%;

    background: transparent;

    color: #1a1a1a;

    border: none;

    padding: 22px 10px 22px 35px; /* Text leicht nach rechts versetzt (35px) */

    text-align: left;

    font-size: 13px; /* Filigrane Schrift */

    font-weight: 500;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: all 0.3s ease;

}



.sf-faq-question:hover {

    color: #89b53e;

}



.sf-faq-icon {

    font-size: 18px;

    color: #89b53e;

    font-weight: 300;

}



/* Antwort-Feld mit dezentem Platin-Hintergrund */

.sf-faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    background: #fcfcfc; /* Sehr helles Grau für Tiefe */

}



.sf-faq-answer div {

    padding: 10px 40px 25px 35px; /* Auch die Antwort leicht nach rechts versetzt */

    font-size: 12px;

    line-height: 1.8;

    color: #666;

}



.sf-faq-item.active .sf-faq-question {

    color: #89b53e;

    font-weight: 600;

}



@media (max-width: 900px) {

    .sf-faq-grid { grid-template-columns: 1fr; }

}



HTML HERO:

<div class="sb-hero-wrapper">

  <div class="sb-hero-bg"></div>

  

  <div class="sb-hero-content">

    <div class="sb-hero-glass">

      

      <div class="sb-section-top">

        <div class="sb-item-stars">★★★★★</div>

        <div class="sb-item-tag">Premium Permanent Make-up</div>

        <div class="sb-item-name">Fatma Heimburger</div>

      </div>



      <div class="sb-section-center">

        <h1 class="sb-item-h1">Zeitlose<br>Definition</h1>

        <p class="sb-item-desc">

          Verleihen Sie Ihren Augen dauerhafte Tiefe und Ausdruckskraft. Eine präzise Wimpernkranzverdichtung für einen natürlich dichten Look – jeden Tag.

        </p>

      </div>



      <div class="sb-section-slogan">

        <span class="sb-slogan-highlight">Dein Blick, perfekt gerahmt.</span>

      </div>



      <div class="sb-section-bottom">

        <div class="sb-btn-container">

          <a href="#termin" class="sb-btn sb-btn-green trigger-rueckruf">Termin buchen</a>

          <a href="#Wimpernkranzverdichtung-PMU_Preisliste" class="sb-btn sb-btn-white">Preisliste</a>

        </div>

      </div>

      

    </div>

  </div>

</div>



<style>

  /* --- DESKTOP DESIGN --- */

  .sb-hero-wrapper {

    position: relative;

    width: 100%;

    height: 600px; 

    display: flex;

    align-items: center;

    overflow: hidden;

    font-family: 'Montserrat', sans-serif;

  }



  .sb-hero-bg {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    /* Neue Bild-URL für Augen-PMU */

    background-image: url('https://spotless-beauty.de/wp-content/uploads/2026/01/augenlidstrich_permanent-make-up_spotless-beauty-tuttlingen-titelbild-1_ergebnis.webp');

    background-size: cover;

    background-position: center 30%; 

    z-index: 1;

    /* Spiegelt das Bild horizontal für bessere Text-Lesbarkeit */

    transform: scaleX(-1);

  }



  .sb-hero-content {

    position: relative;

    z-index: 3;

    padding-left: 8%;

    width: 100%;

  }



  .sb-hero-glass {

    background: rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    padding: 40px;

    width: 400px; 

    border: 1px solid rgba(255, 255, 255, 0.3);

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    height: 550px; 

    box-sizing: border-box;

  }



  .sb-section-top { margin-bottom: 30px; }

  .sb-section-center { margin-bottom: 25px; }

  .sb-section-slogan { margin-bottom: 35px; width: 100%; }

  .sb-section-bottom { width: 100%; }



  .sb-item-stars { color: #c5a059; font-size: 11px; letter-spacing: 6px; margin-bottom: 35px; }

  .sb-item-tag { color: #89b53e; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 8px; }

  .sb-item-name { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: #1a1a1a; font-style: italic; line-height: 1.1; }

  .sb-item-h1 { font-family: 'Cormorant Garamond', serif; font-size: 52px; color: #1a1a1a; line-height: 0.85 !important; font-weight: 400; margin: 0 0 15px 0 !important; }

  .sb-item-desc { font-size: 13px; line-height: 1.6; color: #333; max-width: 95%; margin: 0 auto; }



  .sb-slogan-highlight { 

    font-size: 10px;

    text-transform: uppercase; 

    letter-spacing: 3px; 

    color: #89b53e; 

    font-weight: 700; 

    font-style: italic; 

    border-top: 1px solid rgba(137, 181, 62, 0.15); 

    border-bottom: 1px solid rgba(137, 181, 62, 0.15); 

    padding: 5px 0; 

    display: inline-block;

    white-space: nowrap;

    max-width: 90%;

    overflow: hidden;

  }



  .sb-btn-container { display: flex; gap: 12px; justify-content: center; }

  .sb-btn { 

    flex: 1; 

    padding: 16px 5px; 

    font-size: 10px; 

    font-weight: 600; 

    text-transform: uppercase; 

    text-decoration: none !important; 

    letter-spacing: 1.5px; 

    text-align: center; 

    transition: all 0.3s ease;

    display: inline-block;

  }

  

  .sb-btn-green { 

    background: #89b53e !important; 

    color: #fff !important; 

    border: 1px solid #89b53e !important; 

  }

  .sb-btn-green:hover { 

    background: #1a1a1a !important; 

    border-color: #1a1a1a !important;

    transform: translateY(-2px);

  }



  .sb-btn-white { 

    background: rgba(255,255,255,0.1) !important; 

    color: #1a1a1a !important; 

    border: 1px solid #1a1a1a !important; 

    backdrop-filter: blur(5px);

  }

  .sb-btn-white:hover { 

    background: #1a1a1a !important; 

    color: #fff !important;

    transform: translateY(-2px);

  }



  /* --- MOBILE OPTIMIERUNG --- */

  @media (max-width: 768px) {

    .sb-hero-wrapper { 

      height: 100vh; 

      align-items: flex-start;

      padding-top: 30px;

    }

    /* Hintergrund auf Mobile leicht anpassen */

    .sb-hero-bg { background-position: 50% 15%; }

    .sb-hero-content { padding-left: 0; }

    .sb-hero-glass { 

      width: 92%; margin: 0 auto; height: auto; padding: 25px 15px; 

      background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);

    }

    .sb-item-stars { margin-bottom: 20px; }

    .sb-item-h1 { font-size: 38px; }

    .sb-slogan-highlight { font-size: 2.8vw; min-font-size: 8px; max-font-size: 10px; letter-spacing: 1.5px; white-space: nowrap; }

    .sb-item-desc { font-size: 14px; color: #000; font-weight: 500; } 

    .sb-btn-container { flex-direction: column; width: 100%; gap: 10px; }

    .sb-btn { padding: 18px 5px; font-size: 11px; }

  }

</style>
/* Layout Basis */
.sf-pricing-section { width: 100%; padding: 80px 0; background: #fff; font-family: 'Montserrat', sans-serif; }
.sf-pricing-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sf-pricing-header { text-align: center; margin-bottom: 50px; }
.sf-title { font-family: 'Cormorant Garamond', serif; font-size: 42px; color: #1a1a1a; margin: 15px 0; }
.sf-label { color: #89b53e; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.sf-divider-small { width: 45px; height: 1.5px; background: #89b53e; margin: 0 auto; }

/* Grid System - Erzwingt gleiche Höhe der Karten */
.pmu-grid-3-col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px;
    margin-bottom: 80px;
    align-items: stretch;
}

/* Karten-Design */
.sf-service-card { 
    border: 1px solid #f0f0f0; 
    background: #fff; 
    display: flex; 
    flex-direction: column; 
    transition: transform 0.3s ease;
}

.sf-service-card:hover {
    transform: translateY(-5px);
}

.sf-card-img img { 
    width: 100%; 
    aspect-ratio: 4/3; 
    object-fit: cover; 
    display: block; 
}

/* Card Body - Flexbox sorgt für vertikale Ausrichtung der Elemente */
.sf-card-body { 
    padding: 40px 25px; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}

/* Headlines auf gleicher Höhe halten */
.sf-card-headline { 
    font-family: 'Cormorant Garamond', serif; 
    font-size: 24px; 
    margin-bottom: 20px; 
    min-height: 64px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* Beschreibungen auf gleicher Höhe halten */
.sf-card-desc { 
    font-size: 14px; 
    color: #666; 
    line-height: 1.6; 
    margin-bottom: 30px; 
    min-height: 70px; 
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Preis-Block ans Ende schieben */
.sf-price-block {
    margin-top: auto;
    margin-bottom: 25px;
}

.sf-price-value { 
    font-family: 'Cormorant Garamond', serif; 
    font-size: 48px; 
    color: #1a1a1a; 
}

.sf-btn-booking { 
    background: #89b53e !important; 
    color: #fff !important; 
    padding: 18px; 
    display: block; 
    text-decoration: none; 
    font-size: 12px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1.5px;
}

/* Zusatzleistungen */
.sf-care-section { max-width: 850px; margin: 0 auto; }
.sf-sub-title { text-align: center; color: #89b53e; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 30px; }
.sf-care-item { border: 1px solid #e0e0e0; margin-bottom: 12px; transition: all 0.3s ease; }
.sf-care-header { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.sf-care-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; }
.sf-care-tag { font-size: 11px; color: #89b53e; font-weight: 700; text-transform: uppercase; }
.sf-care-body { max-height: 0; opacity: 0; overflow: hidden; transition: 0.3s ease; padding: 0 25px; background: #fafafa; }
.sf-care-item.active { border-color: #89b53e; }
.sf-care-item.active .sf-care-body { max-height: 200px; opacity: 1; padding-bottom: 20px; padding-top: 15px; border-top: 1px solid #eee; }

/* Responsive View */
@media (max-width: 991px) {
    .pmu-grid-3-col { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }
}
@media (max-width: 767px) {
    .pmu-grid-3-col { grid-template-columns: 1fr !important; }
    .sf-card-headline, .sf-card-desc { min-height: auto; }
}
</style>/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://spotless-beauty.de/wp-content/uploads/2026/01/cormorant-garamond-v21-latin-600.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Montserrat family';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://spotless-beauty.de/wp-content/uploads/2026/01/montserrat-v31-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat family';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://spotless-beauty.de/wp-content/uploads/2026/01/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat family';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://spotless-beauty.de/wp-content/uploads/2026/01/montserrat-v31-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat family';
	font-style: italic;
	font-weight: 400;
	font-display: auto;
	src: url('https://spotless-beauty.de/wp-content/uploads/2026/01/montserrat-v31-latin-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat family';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://spotless-beauty.de/wp-content/uploads/2026/01/montserrat-v31-latin-700.woff2') format('woff2');
}
/* End Custom Fonts CSS */