@charset "utf-8";
/* CSS Document */

/* Global vars ------------------------------ */
:root{
    /* colors */
    --primary-color: #a2c617;
    --primary-inv-color: #fff;
    
    --primary-font-color: #5a5a5a;
    --primary-header-color: #a2c617;
    --primary-mainnav-color: var(--primary-font-color);
    --link-hover-color: #000000;
    --footer-txt-color: #a1a1a1;
    --hr-color: #d5d5d5;
    
    --hero-header-color: #fff;
    --hero-header-overlay-color: rgba(0,0,0,0.30);
    
    --img-link-bg-color:transparent;
    
    --btn-drop-color: #FFF;
    
    --primary-hg-color-1: #f3f3f3;
    --primary-hg-color-2: #D6D6D6;
    
    /* Layout */
    --wrapper-spacer__S: 0px;
    --wrapper-spacer__M: 0px;
    
    /* Nav */
    --nav-height: 90px;
    --nav-color: #FFF;
    --menue-icon-color: var(--nav-color);
    
    /* Nav Proj-Logo */
    --main-logo-w__S: 210px;
    --main-logo-h__S: auto;
    --main-logo-w__L: 198px;
    --main-logo-h__L: auto;
    
    --main-logo-m__S: 20px 0 0 0;
    --main-logo-m__L: 20px 0 0 0;
    
    /* Hero */
    --swiper-heder-h__S:300px;
    --swiper-heder-h__M:400px;
    --swiper-heder-h__L:620px;/*  Höhe Bild*/
    
    --swiper-overlay-pos-l__M:-70px;
    
    --swiper-overlay-h__S:100px;
    --swiper-overlay-h__M:120px;
    --swiper-overlay-h__L:200px; /*  Höhe Overlay*/
    
    --swiper-overlay-left__S: -20px;
    --swiper-overlay-left__M: -50px;
    --swiper-overlay-left__L: -450px; /*abstand links*/
    
    /* Hero Proj-Logo */
    --object-logo-h__S:50px; 
    --object-logo-m__S: 30px auto 20px auto;
    
    --object-logo-h__M:70px; 
    --object-logo-m__M: 20px auto 20px auto; /*-40px 0 20px 15px;*/
    
    --object-logo-h__L:90px; /*  Höhe Logo im header*/
    --object-logo-ml__L: 30px; /*  Margin Logo im header*/
    --object-logo-m__L: -54px 0px 20px var(--object-logo-ml__L); /* oben - rechts - unten - links */
    
    
    /* Spacer */
    --spacer__L: 20px;
    --spacer__S: 10px;
    
    /* PIC GAL */
    --picGal-h__S:200px;
    --picGal-h__M:400px;
    
    /* FULL BG */
    --fullPic-h__S: 200px;
    --fullPic-h__M: 450px;
    
    /* image dropdown */
    --btn-drop-header-h__S: 60px;
    --btn-drop-header-h__M: 80px;
    
    /* box shadow */
    --box-shadow-down:2px 2px 6px -2px rgba(0,0,0,0.3);
    --box-shadow-all:0px 3px 8px 0px rgba(0,0,0,0.2); 
    
    /* object list items // Anzahl der Spalten */
    --obj-list-items__S: 5;
    --obj-list-items__M: 8;
    
    /* object image slider */
    --objGal-h__S:100px;
    --objGal-h__M:200px;
    
    /* wohnung properties filter */
    --wpf-hg-color: #fff;
    --wpf-hg-style-color: var(--primary-color);
    
    /* slider select  */
    --slider-selection-on-color: var(--primary-color);
    --slider-selection-off-color: var(--primary-hg-color-2);
    
    /* spinner */
    --spinner-ring-color:#d5d5d5;
    --spinner-pfeil-color:var(--primary-color);
    
    /* modal loading */
    --modal-bg-color: #000;
    --modal-txt-color: #fff;
    --modal-link-color: var(--primary-color);
    
    /* lightbox */
    --lightbox-color: var(--primary-inv-color);
  
    /* Mouse Over Effekts */
    /* MO Zoom */
    --mo-zoom-duration: 1.4s;
    --mo-zoom-scale: 1.04;
}

.nav__var1{
    /* Layout */
    --wrapper-spacer__S: 0px;
    --wrapper-spacer__L: 0px;

    /* nav style */
    --nav-bg-color__top: rgba(255,255,255,0.00);
    --nav-box-shadow__top: 0px 2px 5px 0px rgb(0 0 0 / 0%);

    --nav-bg-color__not-top: rgba(255,255,255,1.00);
    --nav-box-shadow__not-top: 0px 2px 5px 0px rgb(0 0 0 / 6%);

    --nav-mainlogo-opacity__top: 0;
    --nav-mainlogo-opacity__not-top: 1;

    --nav-font-color__top: var(--nav-color);

    --nav-menueIcon-color__top: var(--menue-icon-color);
    --nav-menueIcon-color__not-top: var(--primary-color);
}

.nav__var2{
    /* Layout */
    --wrapper-spacer__S: var(--nav-height__S);
    --wrapper-spacer__L: var(--nav-height__L);

    /* nav style */
    --nav-bg-color__top: rgba(255,255,255,1.00);
    --nav-box-shadow__top: 0px 2px 5px 0px rgb(0 0 0 / 6%);

    --nav-bg-color__not-top: rgba(255,255,255,1.00);
    --nav-box-shadow__not-top: 0px 2px 5px 0px rgb(0 0 0 / 6%);

    --nav-mainlogo-opacity__top: 1;
    --nav-mainlogo-opacity__not-top: 1;

    --nav-font-color__top: var(--primary-mainnav-color);

    --nav-menueIcon-color__top: var(--primary-color);
    --nav-menueIcon-color__not-top: var(--primary-color);
}