.elementor-201 .elementor-element.elementor-element-61b97e5:not(.elementor-motion-effects-element-type-background), .elementor-201 .elementor-element.elementor-element-61b97e5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://reinigung-buchs.ch/wp-content/uploads/2025/11/info@reinigung-buchs.ch_.png");background-position:center center;background-size:cover;}.elementor-201 .elementor-element.elementor-element-61b97e5 > .elementor-background-overlay{background-color:#000000;opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-201 .elementor-element.elementor-element-61b97e5{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-201 .elementor-element.elementor-element-21e27f2 > .elementor-container{max-width:1160px;}.elementor-201 .elementor-element.elementor-element-21e27f2{overflow:hidden;padding:0px 0px 120px 0px;}.elementor-bc-flex-widget .elementor-201 .elementor-element.elementor-element-661db0d.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-201 .elementor-element.elementor-element-661db0d.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-201 .elementor-element.elementor-element-661db0d > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:16px;}.elementor-201 .elementor-element.elementor-element-661db0d > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-201 .elementor-element.elementor-element-9160d8c{width:var( --container-widget-width, 517px );max-width:517px;--container-widget-width:517px;--container-widget-flex-grow:0;z-index:1;}.elementor-201 .elementor-element.elementor-element-9160d8c > .elementor-widget-container{padding:0px 0px 16px 0px;}.elementor-201 .elementor-element.elementor-element-9160d8c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:35px;font-weight:500;color:#000000;}.elementor-201 .elementor-element.elementor-element-67cf5bf > .elementor-widget-container{padding:0px 0px 24px 0px;}.elementor-201 .elementor-element.elementor-element-67cf5bf{z-index:1;font-family:"Poppins", Sans-serif;font-size:17px;font-weight:300;color:#000000;}.elementor-201 .elementor-element.elementor-element-b8d381d .elementor-button{fill:#FFFFFF;color:#FFFFFF;}.elementor-201 .elementor-element.elementor-element-72442c7 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:0px;}.elementor-201 .elementor-element.elementor-element-c75e013 > .elementor-widget-container{margin:0px 0px -110px 0px;}.elementor-201 .elementor-element.elementor-element-c75e013{text-align:right;}.elementor-201 .elementor-element.elementor-element-c75e013 img{width:540px;border-radius:25px 25px 25px 25px;}.elementor-201 .elementor-element.elementor-element-c548f4b:not(.elementor-motion-effects-element-type-background), .elementor-201 .elementor-element.elementor-element-c548f4b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #412650 77%, #FFFFFF 77%);}.elementor-201 .elementor-element.elementor-element-c548f4b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-201 .elementor-element.elementor-element-c548f4b > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-201 .elementor-element.elementor-element-5e6df14.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-201 .elementor-element.elementor-element-5e6df14 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:16px;}.elementor-201 .elementor-element.elementor-element-5e6df14 > .elementor-element-populated{border-style:dashed;border-width:2px 0px 0px 0px;border-color:#FFFFFF2B;padding:120px 0px 0px 0px;}.elementor-201 .elementor-element.elementor-element-3835ead{width:auto;max-width:auto;top:-30px;}.elementor-201 .elementor-element.elementor-element-3835ead > .elementor-widget-container{background-color:var( --e-global-color-uicore_dark );padding:20px 18px 10px 18px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF2B;border-radius:100px 100px 100px 100px;}.elementor-201 .elementor-element.elementor-element-3835ead:hover .elementor-widget-container{background-color:var( --e-global-color-uicore_secondary );}.elementor-201 .elementor-element.elementor-element-3835ead.bdt-background-overlay-yes > .elementor-widget-container:before{transition:background 0.3s;}.elementor-201 .elementor-element.elementor-element-3835ead .elementor-icon-wrapper{text-align:center;}.elementor-201 .elementor-element.elementor-element-3835ead.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-201 .elementor-element.elementor-element-3835ead.elementor-view-framed .elementor-icon, .elementor-201 .elementor-element.elementor-element-3835ead.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-201 .elementor-element.elementor-element-3835ead.elementor-view-framed .elementor-icon, .elementor-201 .elementor-element.elementor-element-3835ead.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-201 .elementor-element.elementor-element-3835ead .elementor-icon{font-size:20px;}.elementor-201 .elementor-element.elementor-element-3835ead .elementor-icon svg{height:20px;}.elementor-201 .elementor-element.elementor-element-75a74a1{--spacer-size:120px;width:var( --container-widget-width, 120px );max-width:120px;--container-widget-width:120px;--container-widget-flex-grow:0;top:80px;}.elementor-201 .elementor-element.elementor-element-75a74a1.bdt-background-overlay-yes > .elementor-widget-container:before{background-color:transparent;background-image:radial-gradient(at center center, var( --e-global-color-uicore_accent ) 0%, var( --e-global-color-uicore_dark ) 65%);opacity:0.2;transition:background 0.3s;}body:not(.rtl) .elementor-201 .elementor-element.elementor-element-75a74a1{left:410px;}body.rtl .elementor-201 .elementor-element.elementor-element-75a74a1{right:410px;}.elementor-201 .elementor-element.elementor-element-75a74a1 > .elementor-widget-container{border-radius:100px 100px 100px 100px;}.elementor-201 .elementor-element.elementor-element-11bf3f7 > .elementor-widget-container{padding:0px 40px 0px 40px;}.elementor-201 .elementor-element.elementor-element-11bf3f7{z-index:1;text-align:center;}.elementor-201 .elementor-element.elementor-element-11bf3f7 .elementor-heading-title{font-size:50px;line-height:60px;color:#FFFFFF;}.elementor-201 .elementor-element.elementor-element-1ef3c1d{width:var( --container-widget-width, 770px );max-width:770px;--container-widget-width:770px;--container-widget-flex-grow:0;z-index:1;text-align:center;font-size:20px;color:#FFFFFF;}.elementor-201 .elementor-element.elementor-element-1ef3c1d > .elementor-widget-container{padding:0px 0px 40px 0px;}.elementor-201 .elementor-element.elementor-element-0de725d{--spacer-size:266px;}.elementor-201 .elementor-element.elementor-element-ac68cd0{margin-top:-290px;margin-bottom:0px;padding:120px 0px 0px 0px;}.elementor-201 .elementor-element.elementor-element-a051665 > .elementor-widget-container{padding:0px 170px 0px 170px;}.elementor-201 .elementor-element.elementor-element-a051665{z-index:1;text-align:center;}.elementor-201 .elementor-element.elementor-element-a051665 .elementor-heading-title{font-size:50px;color:#000000;}.elementor-201 .elementor-element.elementor-element-3c1d656 > .elementor-widget-container{padding:0px 220px 0px 220px;}.elementor-201 .elementor-element.elementor-element-3c1d656{text-align:center;font-size:20px;}.elementor-201 .elementor-element.elementor-element-5771806{padding:0px 0px 120px 0px;}.elementor-201 .elementor-element.elementor-element-e32dbc6:not(.elementor-motion-effects-element-type-background), .elementor-201 .elementor-element.elementor-element-e32dbc6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#412650;}.elementor-201 .elementor-element.elementor-element-e32dbc6{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-201 .elementor-element.elementor-element-e32dbc6 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-201 .elementor-element.elementor-element-0d444cb{margin-top:0px;margin-bottom:0px;padding:70px 0px 0px 0px;}.elementor-201 .elementor-element.elementor-element-706ccdb > .elementor-widget-container{padding:0px 170px 0px 170px;}.elementor-201 .elementor-element.elementor-element-706ccdb{z-index:1;text-align:center;}.elementor-201 .elementor-element.elementor-element-706ccdb .elementor-heading-title{font-size:60px;color:#000000;}.elementor-201 .elementor-element.elementor-element-9a4ecc9 > .elementor-widget-container{padding:0px 270px 0px 270px;}.elementor-201 .elementor-element.elementor-element-9a4ecc9{text-align:center;font-size:20px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:1024px){.elementor-201 .elementor-element.elementor-element-21e27f2{padding:90px 0px 90px 0px;}.elementor-201 .elementor-element.elementor-element-9160d8c{width:100%;max-width:100%;}.elementor-201 .elementor-element.elementor-element-67cf5bf > .elementor-widget-container{padding:0px 0px 16px 0px;}.elementor-201 .elementor-element.elementor-element-c75e013 > .elementor-widget-container{margin:0px 0px -70px 0px;}.elementor-201 .elementor-element.elementor-element-5e6df14 > .elementor-element-populated{padding:90px 0px 0px 0px;}.elementor-201 .elementor-element.elementor-element-3835ead{top:-28px;}.elementor-201 .elementor-element.elementor-element-3835ead .elementor-icon{font-size:18px;}.elementor-201 .elementor-element.elementor-element-3835ead .elementor-icon svg{height:18px;}.elementor-201 .elementor-element.elementor-element-75a74a1{--spacer-size:90px;--container-widget-width:90px;--container-widget-flex-grow:0;width:var( --container-widget-width, 90px );max-width:90px;top:60px;}body:not(.rtl) .elementor-201 .elementor-element.elementor-element-75a74a1{left:28%;}body.rtl .elementor-201 .elementor-element.elementor-element-75a74a1{right:28%;}.elementor-201 .elementor-element.elementor-element-11bf3f7 .elementor-heading-title{font-size:35px;line-height:1.4em;}.elementor-201 .elementor-element.elementor-element-1ef3c1d{width:var( --container-widget-width, 600px );max-width:600px;--container-widget-width:600px;--container-widget-flex-grow:0;}.elementor-201 .elementor-element.elementor-element-1ef3c1d > .elementor-widget-container{padding:0px 0px 32px 0px;}.elementor-201 .elementor-element.elementor-element-a051665 .elementor-heading-title{font-size:25px;}.elementor-201 .elementor-element.elementor-element-3c1d656 > .elementor-widget-container{padding:0px 110px 0px 110px;}.elementor-201 .elementor-element.elementor-element-3c1d656{font-size:13px;}.elementor-201 .elementor-element.elementor-element-706ccdb .elementor-heading-title{font-size:24px;}.elementor-201 .elementor-element.elementor-element-9a4ecc9 > .elementor-widget-container{padding:0px 110px 0px 110px;}}@media(max-width:767px){.elementor-201 .elementor-element.elementor-element-21e27f2{padding:60px 0px 60px 0px;}.elementor-201 .elementor-element.elementor-element-9160d8c{width:100%;max-width:100%;text-align:center;}.elementor-201 .elementor-element.elementor-element-9160d8c .elementor-heading-title{font-size:30px;}.elementor-201 .elementor-element.elementor-element-67cf5bf > .elementor-widget-container{padding:0px 0px 8px 0px;}.elementor-201 .elementor-element.elementor-element-67cf5bf{text-align:center;}.elementor-201 .elementor-element.elementor-element-c75e013 > .elementor-widget-container{margin:0px 0px -50px 0px;}body:not(.rtl) .elementor-201 .elementor-element.elementor-element-75a74a1{left:10%;}body.rtl .elementor-201 .elementor-element.elementor-element-75a74a1{right:10%;}.elementor-201 .elementor-element.elementor-element-75a74a1{top:48px;}.elementor-201 .elementor-element.elementor-element-11bf3f7 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-201 .elementor-element.elementor-element-11bf3f7 .elementor-heading-title{font-size:30px;}.elementor-201 .elementor-element.elementor-element-1ef3c1d{width:100%;max-width:100%;font-size:15px;}.elementor-201 .elementor-element.elementor-element-1ef3c1d > .elementor-widget-container{padding:0px 10px 24px 10px;}.elementor-201 .elementor-element.elementor-element-a051665 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-201 .elementor-element.elementor-element-a051665 .elementor-heading-title{font-size:30px;}.elementor-201 .elementor-element.elementor-element-3c1d656 > .elementor-widget-container{padding:0px 0px 8px 0px;}.elementor-201 .elementor-element.elementor-element-3c1d656{font-size:15px;}.elementor-201 .elementor-element.elementor-element-706ccdb > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-201 .elementor-element.elementor-element-706ccdb .elementor-heading-title{font-size:27px;}.elementor-201 .elementor-element.elementor-element-9a4ecc9 > .elementor-widget-container{padding:0px 30px 8px 30px;}.elementor-201 .elementor-element.elementor-element-9a4ecc9{font-size:12px;}}@media(min-width:768px){.elementor-201 .elementor-element.elementor-element-661db0d{width:45%;}.elementor-201 .elementor-element.elementor-element-72442c7{width:55%;}}@media(max-width:1024px) and (min-width:768px){.elementor-201 .elementor-element.elementor-element-661db0d{width:50%;}.elementor-201 .elementor-element.elementor-element-72442c7{width:50%;}}/* Start custom CSS for html, class: .elementor-element-b2f80b4 *//* ------------------------------------------------------- */
/* GLOBAL TYPOGRAPHY - PREMIUM CLEANING COMPANY FEEL       */
/* ------------------------------------------------------- */

body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #fff;
}

/* Headings – premium and bold */
h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
}


/* ------------------------------------------------------- */
/* HERO SECTION                                             */
/* ------------------------------------------------------- */

.hero-banner {
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
}

/* Floating Background Shapes */
.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.shape {
    position: absolute;
    background: radial-gradient(circle, rgba(252, 134, 190, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: floatAround 20s infinite;
}

/* Shape positions */
.shape:nth-child(1) {
    width: 300px;
    height: 300px;
    top: 10%;
    left: 10%;
}

.shape:nth-child(2) {
    width: 200px;
    height: 200px;
    top: 60%;
    right: 15%;
}

.shape:nth-child(3) {
    width: 250px;
    height: 250px;
    bottom: 20%;
    left: 50%;
}

/* Movement */
@keyframes floatAround {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%     { transform: translate(30px, -30px) scale(1.1); }
    50%     { transform: translate(-20px, 20px) scale(0.9); }
    75%     { transform: translate(20px, 30px) scale(1.05); }
}

/* Badge */
.hero-badge {
    display: inline-block;
    padding: 12px 30px;
    background: rgba(252, 134, 190, 0.2);
    border: 2px solid #FC86BE;
    border-radius: 50px;
    font-size: 1rem;
    margin-bottom: 30px;
    color: #FC86BE;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    animation: pulse 2s ease-in-out infinite;
}

/* Headline */
.hero-content h1 {
    font-size: 4.5rem;
    font-weight: 800;
    margin-bottom: 30px;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -1.2px;
}

/* Description */
.hero-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 40px;
    line-height: 1.85;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

/* Buttons Section */
.hero-buttons {
    display: flex;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* Primary Button */
.btn-primary {
    padding: 16px 45px;
    background: linear-gradient(135deg, #FC86BE 0%, #ff6ba9 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.4s ease;
    box-shadow: 0 10px 40px rgba(252, 134, 190, 0.5);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
    width: 400px;
    height: 400px;
}

.btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(252, 134, 190, 0.7);
}

.btn-primary span {
    position: relative;
    z-index: 2;
}

/* Secondary Button */
.btn-secondary {
    padding: 16px 45px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.25);
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #FC86BE;
    transform: translateY(-5px);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c720e47 */<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hari Reinigung - Professionelle Reinigungsdienstleistungen</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #fffff;
            background: transparent !important;
            overflow-x: hidden;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .gradient-text {
            background: linear-gradient(135deg, #FC86BE 0%, #ff6ba9 50%, #ffb3d9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Hero Section with Video Background Effect */
        .hero-banner {
            padding: 100px 0 60px;
            position: relative;
            overflow: hidden;
        }

        .hero-content {
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 2;
            opacity: 0;
            animation: fadeInUp 1s ease forwards;
        }

        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
        }

        .shape {
            position: absolute;
            background: radial-gradient(circle, rgba(252, 134, 190, 0.15) 0%, transparent 70%);
            border-radius: 50%;
            animation: floatAround 20s infinite;
        }

        .shape:nth-child(1) {
            width: 300px;
            height: 300px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .shape:nth-child(2) {
            width: 200px;
            height: 200px;
            top: 60%;
            right: 15%;
            animation-delay: 3s;
        }

        .shape:nth-child(3) {
            width: 250px;
            height: 250px;
            bottom: 20%;
            left: 50%;
            animation-delay: 6s;
        }

        @keyframes floatAround {
            0%, 100% {
                transform: translate(0, 0) scale(1);
            }
            25% {
                transform: translate(30px, -30px) scale(1.1);
            }
            50% {
                transform: translate(-20px, 20px) scale(0.9);
            }
            75% {
                transform: translate(20px, 30px) scale(1.05);
            }
        }

        .hero-badge {
            display: inline-block;
            padding: 10px 25px;
            background: rgba(252, 134, 190, 0.2);
            border: 2px solid #FC86BE;
            border-radius: 50px;
            font-size: 0.95rem;
            margin-bottom: 25px;
            color: #FC86BE;
            font-weight: 600;
            animation: pulse 2s ease-in-out infinite;
        }

        .hero-content h1 {
            font-size: 4.5rem;
            font-weight: 800;
            margin-bottom: 25px;
            line-height: 1.1;
            color: #fff;
            letter-spacing: -1px;
        }

        .hero-description {
            font-size: 1.0rem;
             color: #fff;
            margin-bottom: 35px;
            line-height: 1.8;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 50px;
        }

        .btn-primary {
            padding: 16px 40px;
            background: linear-gradient(135deg, #FC86BE 0%, #ff6ba9 100%);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.05rem;
            transition: all 0.4s ease;
            box-shadow: 0 10px 40px rgba(252, 134, 190, 0.5);
            position: relative;
            overflow: hidden;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .btn-primary:hover::before {
            width: 400px;
            height: 400px;
        }

        .btn-primary:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 50px rgba(252, 134, 190, 0.7);
        }

        .btn-primary span {
            position: relative;
            z-index: 2;
        }

        .btn-secondary {
            padding: 16px 40px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.05rem;
            transition: all 0.4s ease;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: #FC86BE;
            transform: translateY(-5px);
        }

        /* Animated Stats Counter */
        .stats-section {
            padding: 50px 0;
            position: relative;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .stat-item {
            text-align: center;
            padding: 40px 30px;
            background: linear-gradient(135deg, rgba(252, 134, 190, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.5s ease;
            opacity: 0;
            animation: popIn 0.8s ease forwards;
            position: relative;
            overflow: hidden;
        }

        .stat-item::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(252, 134, 190, 0.2) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .stat-item:hover::before {
            opacity: 1;
        }

        .stat-item:nth-child(1) { animation-delay: 0.1s; }
        .stat-item:nth-child(2) { animation-delay: 0.2s; }
        .stat-item:nth-child(3) { animation-delay: 0.3s; }
        .stat-item:nth-child(4) { animation-delay: 0.4s; }

        .stat-item:hover {
            transform: translateY(-15px) scale(1.05);
            border-color: rgba(252, 134, 190, 0.5);
            box-shadow: 0 20px 60px rgba(252, 134, 190, 0.4);
        }

        .stat-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #FC86BE 0%, #ff6ba9 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            box-shadow: 0 10px 30px rgba(252, 134, 190, 0.5);
            animation: rotate3D 3s ease-in-out infinite;
        }

        .stat-icon i {
            font-size: 2rem;
            color: white;
        }

        @keyframes rotate3D {
            0%, 100% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(180deg) scale(1.1);
            }
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            color: #FC86BE;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
        }

        .stat-label {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 600;
            position: relative;
            z-index: 2;
        }

        /* Image Slider Section */
        .slider-section {
            padding: 60px 0;
            overflow: hidden;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 15px;
            color: #ffffff;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.85);
            max-width: 700px;
            margin: 0 auto;
        }

        .image-slider-wrapper {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 80px;
        }

        .image-slider {
            overflow: hidden;
            border-radius: 30px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        .slider-track {
            display: flex;
            transition: transform 0.6s ease;
        }

        .slide {
            min-width: 100%;
            height: 600px;
            position: relative;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slide-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 50px;
            background: linear-gradient(180deg, transparent 0%, rgba(26, 15, 61, 0.95) 100%);
        }

        .slide-content h3 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: #ffffff;
        }

        .slide-content p {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.7;
        }

        .slider-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 60px;
            height: 60px;
            background: rgba(252, 134, 190, 0.3);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(252, 134, 190, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .slider-nav-btn:hover {
            background: #FC86BE;
            transform: translateY(-50%) scale(1.1);
        }

        .slider-nav-btn.prev {
            left:0;
        }

        .slider-nav-btn.next {
            right: 0;
        }

        .slider-nav-btn i {
            color: white;
            font-size: 1.5rem;
        }

        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 30px;
        }

        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .slider-dot.active {
            background: #FC86BE;
            width: 40px;
            border-radius: 6px;
        }

      


        /* 3D Services Cards */
        .services-section-3d {
            padding: 80px 0;
        }

        .services-grid-3d {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            perspective: 1000px;
        }

        .service-card-3d {
            background: linear-gradient(135deg, rgba(252, 134, 190, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.6s ease;
            transform-style: preserve-3d;
            cursor: pointer;
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards;
            position: relative;
            overflow: hidden;
        }

        .service-card-3d:nth-child(1) { animation-delay: 0.1s; }
        .service-card-3d:nth-child(2) { animation-delay: 0.2s; }
        .service-card-3d:nth-child(3) { animation-delay: 0.3s; }
        .service-card-3d:nth-child(4) { animation-delay: 0.4s; }

        .service-card-3d::before {
            content: '';
            position: absolute;
            top: -100%;
            left: -100%;
            width: 300%;
            height: 300%;
            background: radial-gradient(circle, rgba(252, 134, 190, 0.3) 0%, transparent 70%);
            transition: all 0.6s ease;
            opacity: 0;
        }

        .service-card-3d:hover::before {
            opacity: 1;
            top: -50%;
            left: -50%;
        }

        .service-card-3d:hover {
            transform: rotateX(10deg) rotateY(10deg) translateY(-20px);
            border-color: rgba(252, 134, 190, 0.5);
            box-shadow: 0 30px 80px rgba(252, 134, 190, 0.4);
        }

        .service-icon-3d {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #FC86BE 0%, #ff6ba9 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            box-shadow: 0 15px 40px rgba(252, 134, 190, 0.5);
            transition: transform 0.6s ease;
            position: relative;
            z-index: 2;
        }

        .service-card-3d:hover .service-icon-3d {
            transform: translateZ(50px) rotateY(360deg);
        }

        .service-icon-3d i {
            font-size: 2.5rem;
            color: white;
        }

        .service-card-3d h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: #ffffff;
            font-weight: 700;
            position: relative;
            z-index: 2;
        }

        .service-card-3d p {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            position: relative;
            z-index: 2;
        }

        /* Modern Testimonials Carousel */
        .testimonials-modern {
            padding: 80px 0;
        }

        .testimonials-carousel {
            position: relative;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 80px;
        }

        .testimonial-track {
            overflow: hidden;
        }

        .testimonial-slides {
            display: flex;
            transition: transform 0.5s ease;
        }

        .testimonial-slide-modern {
            min-width: 100%;
            padding: 60px;
            background: linear-gradient(135deg, rgba(252, 134, 190, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(252, 134, 190, 0.3);
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(252, 134, 190, 0.3);
            position: relative;
        }

        .quote-icon {
            width: 80px;
            height: 80px;
            background: #FC86BE;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            box-shadow: 0 15px 40px rgba(252, 134, 190, 0.5);
        }

        .quote-icon i {
            font-size: 2.5rem;
            color: white;
        }

        .testimonial-text-modern {
            font-size: 1.4rem;
            line-height: 2;
           
            text-align: center;
            margin-bottom: 40px;
            font-style: italic;
        }

        .testimonial-author-modern {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

        .author-avatar-modern {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid #FC86BE;
            box-shadow: 0 10px 30px rgba(252, 134, 190, 0.4);
        }

        .author-avatar-modern img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .author-info-modern h4 {
            font-size: 1.3rem;
            margin-bottom: 5px;
            
        }

        .author-info-modern p {
            font-size: 1rem;
            
        }

        .stars-modern {
            color: #FFD700;
            font-size: 1.2rem;
            margin-top: 10px;
        }

        .testimonial-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 60px;
            height: 60px;
            background: rgba(252, 134, 190, 0.3);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(252, 134, 190, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .testimonial-nav:hover {
            background: #FC86BE;
            transform: translateY(-50%) scale(1.1);
        }

        .testimonial-nav.prev {
            left: 0;
        }

        .testimonial-nav.next {
            right: 0;
        }

        .testimonial-nav i {
            color: white;
            font-size: 1.5rem;
        }

        /* CTA Section */
        .cta-section {
            padding: 80px 50px;
            background: linear-gradient(135deg, rgba(252, 134, 190, 0.2) 0%, rgba(255, 107, 169, 0.15) 100%);
            border-radius: 35px;
            text-align: center;
            margin: 80px 0;
            border: 2px solid rgba(252, 134, 190, 0.3);
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(252, 134, 190, 0.2) 0%, transparent 70%);
            animation: rotate 15s linear infinite;
        }

        .cta-content {
            position: relative;
            z-index: 2;
        }

        .cta-section h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            font-weight: 800;
            color: #ffffff;
        }

        .cta-section p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 35px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes popIn {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(252, 134, 190, 0.7);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 0 10px rgba(252, 134, 190, 0);
            }
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .services-grid-3d {
                grid-template-columns: repeat(2, 1fr);
            }

            .comparison-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 968px) {
            .hero-content h1 {
                font-size: 2rem;
            }

            .hero-description {
                font-size: 1rem;
            }

            .hero-buttons {
                flex-direction: column;
                gap: 15px;
            }

            .btn-primary,
            .btn-secondary {
                width: 100%;
                padding: 14px 30px;
                font-size: 1rem;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }

            .stat-icon {
                width: 70px;
                height: 70px;
            }

            .stat-icon i {
                font-size: 1.8rem;
            }

            .stat-number {
                font-size: 2.5rem;
            }

            .stat-label {
                font-size: 1rem;
            }

            .services-grid-3d {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .service-card-3d {
                padding: 35px 25px;
            }

            .service-card-3d h3 {
                font-size: 1.2rem;
            }

            .service-card-3d p {
                font-size: 0.9rem;
            }

            .service-icon-3d {
                width: 80px;
                height: 80px;
            }

            .service-icon-3d i {
                font-size: 2.2rem;
            }

            .slide {
                height: 400px;
            }

            .slide-overlay {
                padding: 30px;
            }

            .slide-content h3 {
                font-size: 1.8rem;
            }

            .slide-content p {
                font-size: 1rem;
            }

            .comparison-item {
                height: 350px;
            }

            .image-slider-wrapper,
            .testimonials-carousel {
                padding: 0 50px;
            }

            .section-title h2 {
                font-size: 2rem;
            }

            .section-subtitle {
                font-size: 1rem;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 20px;
            }

            .hero-banner {
                padding: 70px 0 50px;
            }

            .hero-content h1 {
                font-size: 1.8rem;
            }

            .hero-description {
                font-size: 0.95rem;
                line-height: 1.6;
            }

            .hero-badge {
                font-size: 0.85rem;
                padding: 8px 18px;
            }

            .btn-primary,
            .btn-secondary {
                padding: 12px 25px;
                font-size: 0.95rem;
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .stat-item {
                padding: 30px 20px;
            }

            .stat-icon {
                width: 60px;
                height: 60px;
            }

            .stat-icon i {
                font-size: 1.5rem;
            }

            .stat-number {
                font-size: 2rem;
            }

            .stat-label {
                font-size: 0.95rem;
            }

            .section-title h2 {
                font-size: 1.8rem;
            }

            .section-subtitle {
                font-size: 0.95rem;
            }

            .slide {
                height: 350px;
            }

            .slide-overlay {
                padding: 25px;
            }

            .slide-content h3 {
                font-size: 1.5rem;
            }

            .slide-content p {
                font-size: 0.9rem;
            }

            .comparison-item {
                height: 300px;
            }

            .label {
                font-size: 0.95rem;
                padding: 8px 16px;
            }

            .service-card-3d {
                padding: 30px 20px;
            }

            .service-card-3d:hover {
                transform: translateY(-10px);
            }

            .service-icon-3d {
                width: 70px;
                height: 70px;
            }

            .service-icon-3d i {
                font-size: 2rem;
            }

            .service-card-3d h3 {
                font-size: 1.15rem;
            }

            .service-card-3d p {
                font-size: 0.85rem;
            }

            .testimonial-slide-modern {
                padding: 40px 30px;
            }

            .quote-icon {
                width: 70px;
                height: 70px;
            }

            .quote-icon i {
                font-size: 2rem;
            }

            .testimonial-text-modern {
                font-size: 1rem;
                line-height: 1.7;
            }

            .author-avatar-modern {
                width: 70px;
                height: 70px;
            }

            .author-info-modern h4 {
                font-size: 1.1rem;
            }

            .author-info-modern p {
                font-size: 0.9rem;
            }

            .stars-modern {
                font-size: 1rem;
            }

            .cta-section {
                padding: 50px 30px;
            }

            .cta-section h2 {
                font-size: 1.8rem;
            }

            .cta-section p {
                font-size: 1rem;
            }

            .image-slider-wrapper,
            .testimonials-carousel {
                padding: 0 20px;
            }

            .slider-nav-btn,
            .testimonial-nav {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .hero-banner {
                padding: 60px 0 40px;
            }

            .hero-content h1 {
                font-size: 1.5rem;
            }

            .hero-description {
                font-size: 0.9rem;
            }

            .btn-primary,
            .btn-secondary {
                padding: 12px 20px;
                font-size: 0.9rem;
            }

            .stat-item {
                padding: 25px 15px;
            }

            .stat-number {
                font-size: 1.8rem;
            }

            .section-title h2 {
                font-size: 1.5rem;
            }

            .section-subtitle {
                font-size: 0.9rem;
            }

            .slide {
                height: 280px;
            }

            .slide-overlay {
                padding: 20px;
            }

            .slide-content h3 {
                font-size: 1.2rem;
            }

            .slide-content p {
                font-size: 0.85rem;
            }

            .comparison-item {
                height: 250px;
            }

            .service-card-3d {
                padding: 25px 15px;
            }

            .service-icon-3d {
                width: 60px;
                height: 60px;
            }

            .service-icon-3d i {
                font-size: 1.8rem;
            }

            .service-card-3d h3 {
                font-size: 1.1rem;
            }

            .service-card-3d p {
                font-size: 0.8rem;
            }

            .testimonial-slide-modern {
                padding: 30px 20px;
            }

            .testimonial-text-modern {
                font-size: 0.95rem;
            }

            .author-avatar-modern {
                width: 60px;
                height: 60px;
            }

            .author-info-modern h4 {
                font-size: 1rem;
            }

            .cta-section {
                padding: 40px 20px;
            }

            .cta-section h2 {
                font-size: 1.5rem;
            }

            .cta-section p {
                font-size: 0.95rem;
            }
        }
    </style>
</head>
<body>
    <!-- Hero Banner with Floating Shapes -->
    <section class="hero-banner">
        <div class="floating-shapes">
            <div class="shape"></div>
            <div class="shape"></div>
            <div class="shape"></div>
        </div>
        <div class="container">
            <div class="hero-content">
                <div class="hero-badge">🌟 Schweizer Qualität seit über 10 Jahren</div>
                <h1>
                    Ihr Zuhause verdient den besten <span class="gradient-text">Reinigungsservice</span>
                </h1>
                <p class="hero-description">
                    Entdecken Sie erstklassige Reinigungsdienstleistungen, die Ihr Leben einfacher machen. 
                    Von der Grundreinigung bis zur kompletten Haushaltsführung - wir kümmern uns um alles, 
                    damit Sie mehr Zeit für die wichtigen Dinge im Leben haben.
                </p>
                <div class="hero-buttons">
                    <a href="#contact" class="btn-primary"><span>Kostenlose Beratung</span></a>
                    <a href="#services" class="btn-secondary">Unsere Leistungen</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Animated Stats -->
    <section class="stats-section">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-number">1500+</div>
                    <div class="stat-label">Zufriedene Kunden</div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <div class="stat-number">10+</div>
                    <div class="stat-label">Jahre Erfahrung</div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="stat-number">98%</div>
                    <div class="stat-label">Kundenzufriedenheit</div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-number">24/7</div>
                    <div class="stat-label">Verfügbarkeit</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Image Slider -->
    <section class="slider-section">
        <div class="container">
            <div class="section-title">
                <h2>Erleben Sie <span class="gradient-text">Perfektion</span> in jedem Detail</h2>
                <p class="section-subtitle">
                    Unsere professionellen Reinigungsteams verwandeln jeden Raum in eine Oase der Sauberkeit
                </p>
            </div>
        </div>
        <div class="image-slider-wrapper">
            <div class="slider-nav-btn prev" onclick="changeImageSlide(-1)">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div class="image-slider">
                <div class="slider-track" id="imageSliderTrack">
                    <div class="slide">
                        <img src="https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=1200&h=700&fit=crop&q=80" alt="Professionelle Reinigung">
                        <div class="slide-overlay">
                            <div class="slide-content">
                                <h3>Professionelle Grundreinigung</h3>
                                <p>Gründliche Reinigung aller Räume mit modernsten Techniken und umweltfreundlichen Produkten für ein perfekt sauberes Zuhause.</p>
                            </div>
                        </div>
                    </div>
                    <div class="slide">
                        <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?w=1200&h=700&fit=crop&q=80" alt="Wohnzimmer Reinigung">
                        <div class="slide-overlay">
                            <div class="slide-content">
                                <h3>Luxus Wohnraumpflege</h3>
                                <p>Spezialisiert auf hochwertige Möbel und edle Oberflächen - wir behandeln Ihr Zuhause wie unser eigenes.</p>
                            </div>
                        </div>
                    </div>
                    <div class="slide">
                        <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1200&h=700&fit=crop&q=80" alt="Küchen Reinigung">
                        <div class="slide-overlay">
                            <div class="slide-content">
                                <h3>Küchen Tiefenreinigung</h3>
                                <p>Von Arbeitsflächen bis zu Geräten - wir sorgen für hygienische Sauberkeit in Ihrer Küche.</p>
                            </div>
                        </div>
                    </div>
                    <div class="slide">
                        <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1200&h=700&fit=crop&q=80" alt="Badezimmer Reinigung">
                        <div class="slide-overlay">
                            <div class="slide-content">
                                <h3>Badezimmer Perfektion</h3>
                                <p>Streifenfreie Armaturen, glänzende Fliesen und hygienische Frische - das ist unser Standard.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-nav-btn next" onclick="changeImageSlide(1)">
                <i class="fas fa-chevron-right"></i>
            </div>
            <div class="slider-dots">
                <span class="slider-dot active" onclick="goToImageSlide(0)"></span>
                <span class="slider-dot" onclick="goToImageSlide(1)"></span>
                <span class="slider-dot" onclick="goToImageSlide(2)"></span>
                <span class="slider-dot" onclick="goToImageSlide(3)"></span>
            </div>
        </div>
    </section>

    <!-- Before/After Comparison -->
    <section class="before-after-section">
        <div class="container">
            <div class="section-title">
                <h2>Vorher & Nachher - <span class="gradient-text">Der Unterschied</span> ist sichtbar</h2>
                <p class="section-subtitle">
                    Sehen Sie selbst, wie wir selbst die schwierigsten Fälle in strahlende Sauberkeit verwandeln. 
                    Bewegen Sie die Maus über die Bilder für den Vergleich.
                </p>
            </div>
            <div class="comparison-grid">
                <div class="comparison-item">
                    <div class="comparison-container">
                        <img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=800&h=600&fit=crop&q=80&sat=-100&bri=-30" alt="Vorher" class="before-image">
                        <img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=800&h=600&fit=crop&q=80" alt="Nachher" class="after-image">
                        <div class="comparison-slider"></div>
                    </div>
                    <div class="comparison-labels">
                        <span class="label before">Vorher</span>
                        <span class="label after">Nachher</span>
                    </div>
                </div>
                <div class="comparison-item">
                    <div class="comparison-container">
                        <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=800&h=600&fit=crop&q=80&sat=-100&bri=-30" alt="Vorher" class="before-image">
                        <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=800&h=600&fit=crop&q=80" alt="Nachher" class="after-image">
                        <div class="comparison-slider"></div>
                    </div>
                    <div class="comparison-labels">
                        <span class="label before">Vorher</span>
                        <span class="label after">Nachher</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 3D Services Cards -->
    <section class="services-section-3d" id="services">
        <div class="container">
            <div class="section-title">
                <h2>Unsere <span class="gradient-text">Premium-Services</span></h2>
                <p class="section-subtitle">
                    Massgeschneiderte Reinigungslösungen für jeden Bedarf - professionell, zuverlässig und umweltfreundlich
                </p>
            </div>
            <div class="services-grid-3d">
                <div class="service-card-3d">
                    <div class="service-icon-3d">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3>Grundreinigung</h3>
                    <p>Gründliche Reinigung aller Räume mit professionellen Techniken und umweltfreundlichen Produkten.</p>
                </div>
                <div class="service-card-3d">
                    <div class="service-icon-3d">
                        <i class="fas fa-hands-helping"></i>
                    </div>
                    <h3>Haushaltshilfe</h3>
                    <p>Persönliche Assistenz im Haushalt für ein stressfreies Leben und mehr Zeit für sich selbst.</p>
                </div>
                <div class="service-card-3d">
                    <div class="service-icon-3d">
                        <i class="fas fa-tshirt"></i>
                    </div>
                    <h3>Wäscheservice</h3>
                    <p>Kompletter Service inklusive Waschen, Trocknen, Bügeln und Falten mit grösster Sorgfalt.</p>
                </div>
                <div class="service-card-3d">
                    <div class="service-icon-3d">
                        <i class="fas fa-shopping-basket"></i>
                    </div>
                    <h3>Einkaufsservice</h3>
                    <p>Wir kaufen für Sie ein - regional, frisch und nach Ihren individuellen Wünschen.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Modern Testimonials -->
    <section class="testimonials-modern">
        <div class="container">
            <div class="section-title">
                <h2>Was unsere <span class="gradient-text">Kunden</span> sagen</h2>
                <p class="section-subtitle">
                    Über 1500 zufriedene Kunden vertrauen auf unsere Dienstleistungen
                </p>
            </div>
        </div>
        <div class="testimonials-carousel">
            <div class="testimonial-nav prev" onclick="changeTestimonial(-1)">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div class="testimonial-track">
                <div class="testimonial-slides" id="testimonialSlides">
                    <div class="testimonial-slide-modern">
                        <div class="quote-icon">
                            <i class="fas fa-quote-right"></i>
                        </div>
                        <p class="testimonial-text-modern">
                            "Hari Reinigung hat mein Leben komplett verändert! Das Team ist unglaublich professionell, 
                            pünktlich und achtet auf jedes Detail. Mein Zuhause war noch nie so sauber und ich fühle mich endlich wohl."
                        </p>
                        <div class="testimonial-author-modern">
                            <div class="author-avatar-modern">
                                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&q=80" alt="Sarah M.">
                            </div>
                            <div class="author-info-modern">
                                <h4>Sarah M.</h4>
                                <p>Privatkunde, Zürich</p>
                                <div class="stars-modern">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-slide-modern">
                        <div class="quote-icon">
                            <i class="fas fa-quote-right"></i>
                        </div>
                        <p class="testimonial-text-modern">
                            "Als Geschäftsführer schätze ich die Flexibilität und Qualität von Hari Reinigung. Unsere Büroräume 
                            sind immer tadellos sauber. Ein verlässlicher Partner für unser Unternehmen!"
                        </p>
                        <div class="testimonial-author-modern">
                            <div class="author-avatar-modern">
                                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&q=80" alt="Michael K.">
                            </div>
                            <div class="author-info-modern">
                                <h4>Michael K.</h4>
                                <p>Geschäftskunde, Basel</p>
                                <div class="stars-modern">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-slide-modern">
                        <div class="quote-icon">
                            <i class="fas fa-quote-right"></i>
                        </div>
                        <p class="testimonial-text-modern">
                            "Die Endreinigung nach unserem Umzug war perfekt! Hari Reinigung hat die Wohnung in kürzester Zeit 
                            blitzsauber gemacht. Sehr empfehlenswert und faire Preise."
                        </p>
                        <div class="testimonial-author-modern">
                            <div class="author-avatar-modern">
                                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&q=80" alt="Anna W.">
                            </div>
                            <div class="author-info-modern">
                                <h4>Anna W.</h4>
                                <p>Privatkunde, Bern</p>
                                <div class="stars-modern">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial-nav next" onclick="changeTestimonial(1)">
                <i class="fas fa-chevron-right"></i>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="container">
            <div class="cta-content">
                <h2>Bereit für ein <span class="gradient-text">blitzsauberes</span> Zuhause?</h2>
                <p>
                    Vereinbaren Sie jetzt Ihre kostenlose Erstberatung und erhalten Sie 15% Rabatt auf Ihre erste Buchung. 
                    Unser Team freut sich darauf, Sie kennenzulernen!
                </p>
                <a href="#contact" class="btn-primary"><span>Jetzt 15% Rabatt sichern</span></a>
            </div>
        </div>
    </section>

    <script>
        // Image Slider
        let currentImageSlide = 0;
        const totalImageSlides = 4;

        function changeImageSlide(direction) {
            currentImageSlide += direction;
            if (currentImageSlide < 0) currentImageSlide = totalImageSlides - 1;
            if (currentImageSlide >= totalImageSlides) currentImageSlide = 0;
            updateImageSlider();
        }

        function goToImageSlide(index) {
            currentImageSlide = index;
            updateImageSlider();
        }

        function updateImageSlider() {
            const track = document.getElementById('imageSliderTrack');
            track.style.transform = `translateX(-${currentImageSlide * 100}%)`;
            
            document.querySelectorAll('.slider-dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === currentImageSlide);
            });
        }

        // Auto-play image slider
        setInterval(() => {
            changeImageSlide(1);
        }, 5000);

        // Testimonial Carousel
        let currentTestimonial = 0;
        const totalTestimonials = 3;

        function changeTestimonial(direction) {
            currentTestimonial += direction;
            if (currentTestimonial < 0) currentTestimonial = totalTestimonials - 1;
            if (currentTestimonial >= totalTestimonials) currentTestimonial = 0;
            updateTestimonial();
        }

        function updateTestimonial() {
            const slides = document.getElementById('testimonialSlides');
            slides.style.transform = `translateX(-${currentTestimonial * 100}%)`;
        }

        // Auto-play testimonials
        setInterval(() => {
            changeTestimonial(1);
        }, 6000);

        // Counter animation for stats
        const animateCounter = (element, target) => {
            let current = 0;
            const increment = target / 60;
            const timer = setInterval(() => {
                current += increment;
                if (current >= target) {
                    element.textContent = target + (element.textContent.includes('+') ? '+' : element.textContent.includes('%') ? '%' : '');
                    clearInterval(timer);
                } else {
                    element.textContent = Math.floor(current) + (element.textContent.includes('+') ? '+' : element.textContent.includes('%') ? '%' : '');
                }
            }, 25);
        };

        const statsObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const numberElement = entry.target.querySelector('');
                    const text = numberElement.textContent;
                    const number = parseInt(text.replace(/\D/g, ''));
                    animateCounter(numberElement, number);
                    statsObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });

        document.querySelectorAll('.stat-item').forEach(stat => {
            statsObserver.observe(stat);
        });

        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.animationPlayState = 'running';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.stat-item, .service-card-3d, .comparison-item').forEach(el => {
            observer.observe(el);
        });
    </script>
</body>
</html>/* End custom CSS */