/* ==========================================================
   LUMA Immobilien
   Version 0.3
   Basislayout
========================================================== */


/* ----------------------------------------------------------
   RESET
---------------------------------------------------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#ffffff;
    color:#222;
    font-family:"Montserrat",Arial,Helvetica,sans-serif;
    line-height:1.6;

}


/* ----------------------------------------------------------
   WRAPPER
---------------------------------------------------------- */

.wrapper{

    width:100%;
    max-width:1360px;

    margin:0 auto;

    padding:0 40px;

}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:120px;

    background:#212529;

    border-bottom:1px solid rgba(255,255,255,.10);

    z-index:9999;

}

.header-inner{

    position:relative;

    height:120px;

}


/* ----------------------------------------------------------
   DESKTOP NAVIGATION
---------------------------------------------------------- */

.main-nav{

    position:absolute;

    left:40px;
    bottom:18px;

}

.main-nav ul{

    list-style:none;

    display:flex;

    gap:38px;

}

.main-nav li{

    margin:0;

    padding:0;

}

.main-nav a{

    display:block;

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:400;

    letter-spacing:.05em;

    padding-bottom:4px;

    border-bottom:2px solid transparent;

    transition:all .25s ease;

}

.main-nav a:hover{

    color:#b31c69;

    border-bottom-color:#b31c69;

}

.main-nav a.active{

    color:#38b54a;

    border-bottom-color:#38b54a;

}


/* ----------------------------------------------------------
   LOGO
---------------------------------------------------------- */

.brand{

    position:absolute;

    right:40px;

    top:18px;

}

.brand img{

    display:block;

    width:140px;

    height:auto;

}


/* ----------------------------------------------------------
   BURGER BUTTON
---------------------------------------------------------- */

.menu-toggle{

    display:none;

    position:absolute;

    left:40px;

    top:50%;

    transform:translateY(-50%);

    width:34px;
    height:24px;

    background:none;

    border:none;

    cursor:pointer;

    padding:0;

}

.menu-toggle span{

    display:block;

    width:34px;

    height:2px;

    background:#ffffff;

    margin:7px 0;

    transition:.25s;

}


/* ----------------------------------------------------------
   MOBILE NAVIGATION
---------------------------------------------------------- */

.mobile-nav{

    display:none;

    position:fixed;

    top:120px;

    left:0;

    width:100%;

    background:#212529;

    padding:18px 40px 24px;

    z-index:9998;

}

.mobile-nav.open{

    display:block;

}

.mobile-nav a{

    display:block;

    color:#ffffff;

    text-decoration:none;

    font-size:17px;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:color .25s ease;

}

.mobile-nav a:hover{

    color:#b31c69;

}

.mobile-nav a.active{

    color:#38b54a;

}

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

.hero{

    position:relative;

    margin-top:120px;

    height:75vh;

    min-height:680px;
    
    margin-bottom:60px;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    inset:0;

}

.hero-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}


/* ----------------------------------------------------------
   HERO OVERLAY
---------------------------------------------------------- */

.hero-overlay{

    position:absolute;

    inset:0;

  
}


/* ----------------------------------------------------------
   HERO CONTENT
---------------------------------------------------------- */

.hero-content{

    position:relative;

    z-index:5;

    height:100%;

    display:flex;

    align-items:flex-end;

}


/* ----------------------------------------------------------
   HERO COPY
---------------------------------------------------------- */

.hero-copy{

    max-width:620px;

    margin-bottom:110px;

}

.hero-copy h1{

    color:#ffffff;

    font-size:58px;

    font-weight:300;

    line-height:1.08;

    text-shadow:0 4px 14px rgba(0,0,0,.55);

    margin-bottom:22px;

}

.hero-copy p{

    color:#ffffff;

    font-size:21px;

    line-height:1.75;

    text-shadow:0 2px 10px rgba(0,0,0,.45);

}

/* ----------------------------------------------------------
   HERO LABEL
---------------------------------------------------------- */

.hero-label{

    display:block;
    margin-bottom:14px;

    font-size:0.82rem;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;

    color:#C5B78A;

}


/* ----------------------------------------------------------
   BUTTON
---------------------------------------------------------- */

.hero-button{

    display:inline-block;

    margin-top:38px;
    
    margin-right:38px;
    
    margin-bottom:22px;

    padding:14px 34px;

    background:#38b54a;

    color:#ffffff;

    text-decoration:none;

    transition:.25s ease;
    
    border-radius:2px;
    


}

.hero-button:hover{

    background:#b31c69;

}

/* ----------------------------------------------------------
   OUTLINE BUTTON
---------------------------------------------------------- */

.btn-outline{

    display:inline-block;

    padding:15px 34px;

    background:#ffffff;

    color:#38b54a;

    text-decoration:none;

    font-size:.95rem;

    font-weight:800;

    letter-spacing:.12em;

    transition:all .25s ease;

}


.btn-outline:hover{

    background:#b31c69;

    color:#ffffff;

}


/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.content-section{

    padding:100px 0;


}

.content-section h2{

    font-size:40px;

    font-weight:300;
    
    color: #212529;

    margin-bottom:25px;

}

.content-section h3{

    font-weight:300;

    font-size:24px;
    
    color: #5A6268;

    line-height:1.8;

}

.content-section p{

    max-width:720px;

    font-size:18px;
    
    color: #212529;

    line-height:1.8;

}

/* ----------------------------------------------------------
   CONTENT LAYOUT
---------------------------------------------------------- */

.content-layout{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:80px;

}

.content-text{

    flex:0 0 660px;

}

.content-aside{

    flex:1;

    display:flex;
    
    flex-direction:column;

    gap:24px;

    align-items:flex-end;
    
    margin-top:60px;

}
.content-aside img{

    display:block;

    width:100%;

    max-width:380px;

    height:auto;
    
}


.content-aside img.content-bigpic{

    max-width:520px;

}


/* ----------------------------------------------------------
   CONTENT SERVICE LIST
---------------------------------------------------------- */

.service-list{

    margin-top:40px;

}

.service-list ul{

    margin:0;
    padding:0;

    list-style:none;

}

.service-list li{

    position:relative;

    padding:0 0 18px 34px;

    font-size:1.05rem;
    line-height:1.7;

}

.service-list li:before{

    content:"";

    position:absolute;

    left:0;
    top:12px;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#8AA97C;

}


/* ----------------------------------------------------------
   FORMULAR
---------------------------------------------------------- */


.hp-field{

    position:absolute;

    left:-9999px;

}


/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */

.site-footer{

    background:#1A1A18;

    color:#bdbdbd;

    padding:34px 0;

    font-size:14px;

}

.footer-inner{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:36px;

    flex-wrap:wrap;

}

.footer-legal{

    margin:0;

}

.footer-legal a{

    color:#38b54a;

    text-decoration:none;

    transition:color .25s ease;

}

.footer-legal a:hover{

    color:#b31c69;

}
/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media screen and (max-width:980px){

    .site-header{

        height:100px;

    }

    .header-inner{

        height:100px;

    }

    .main-nav{

        display:none;

    }

    .menu-toggle{

        display:block;

    }

    .brand{

        top:50%;

        right:24px;

        transform:translateY(-50%);

    }

    .brand img{

        width:140px;

    }

    .mobile-nav{

        top:100px;

    }

    .hero{

        margin-top:100px;

        min-height:560px;

    }

    .hero-copy{

        margin-bottom:70px;

    }

    .hero-copy h1{

        font-size:40px;

    }

    .hero-copy p{

        font-size:18px;

    }
    
     .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

    }


    .wrapper{

        padding:0 24px;

    }
    
   .content-layout{

        flex-direction:column;

        gap:40px;

    }
s
    .content-text{

        flex:1;

    }

    .content-aside{

        justify-content:center;

        padding-right:0;

        transform:none; 
        
        margin-top:10px;
        
        margin-left:12px;

    }
    
    .content-aside img{

        max-width:320px;

    }