/*
    Theme Name: DOMUS Massivhaus
    Description: DOMUS Worpress-Theme
    Version: 1.0
    License: Alle Rechte vorbehalten
*/

/* #region KEYFRAMES */
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-Regular.ttf');
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-Light.ttf');
    font-weight: 300;
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-Medium.ttf');
    font-weight: 500;
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-SemiBold.ttf');
    font-weight: 600;
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins/Poppins-Bold.ttf');
    font-weight: 700;
}


@keyframes nojs-start-show{
    0%{
        visibility:collapse;
        opacity: 0;
    }
    100%{
        visibility:visible;
        opacity: 1;
    }
}

@keyframes blink{
    0%{
        filter: brightness(1);
        box-shadow: 0 0 10px transparent;
    }
    20%{
        filter:brightness(1.06);
        box-shadow: 0 0 10px #22b9af;
    }
    100%{
        filter:brightness(1);
        box-shadow: 0 0 10px transparent;
    }
}
/* #endregion */

/* #region ICONS */
[class^="icon-"], [class*=" icon-"],
[class^="icon-fill-"], [class*=" icon-fill-"]{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('./images/icons_outline.svg');
    background-size: 1000%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}

[class^="icon-fill-"], [class*=" icon-fill-"]{
    background-image: url('./images/icons_fill.svg');
}

.icon-square, .icon-fill-square{ background-position: 0% 0%; }
.icon-map-marker, .icon-fill-map-marker{ background-position: 11% 0%; }
.icon-phone, .icon-fill-phone{ background-position: 22% 0%; }
.icon-mail, .icon-fill-mail{ background-position: 33% 0%; }
.icon-search, .icon-fill-search{ background-position: 44% 0%; }
.icon-calendar, .icon-fill-calendar{ background-position: 55% 0%; }
.icon-twitter, .icon-fill-twitter{ background-position: 0% 11%; }
.icon-facebook, .icon-fill-facebook{ background-position: 11% 11%; }
.icon-xing, .icon-fill-xing{ background-position: 22% 11%; }
/* #endregion */

/* #region ALLGEMEIN */

html, body{
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    color: #666;
    line-height: 26px;
}

.black{
    color: black;
}
.green{
    color: hsl(176deg 69% 43%);
}
.fontweight-500{
    font-weight: 500;
}
.fontweight-600{
    font-weight: 600;
}


*::selection{
    color: black;
    background: hsl(20, 70%, 90%);
}

input, textarea, button, a{
    outline-color: #00aaa0;
    outline-width: 1px;
    /* outline-style: solid; */
}

::-webkit-input-placeholder { /* Edge */
    color: #868686;
}
::placeholder {
    color: #868686;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-webkit-autofill::first-line {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 14px;
    -webkit-text-fill-color: hsl(20, 0%, 87%);
    box-shadow: 0 0 0 1000px #3f3f3f inset !important;
    -webkit-box-shadow: 0 0 0 1000px #3f3f3f inset !important;
}

a{
    display: inline-block;
    color:#ff874b;
    transition: transform .3s, color .2s;
}
a:link{
    color:#ff874b;
}
a:visited{
    color: #f68b55;
    filter: saturate(.75);
}
a:hover{
    color: #ffb894;
    /* transform: translate(0,-3px); */
}
a:active{
    color: #ffb894;
}
a:focus{
    color: #ffb894;
}

span.shadow{
    filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.8));
}

.float-l{
    float: left;
}

.float-r{
    float: right;
}

.bit-margin-r{
    margin-right: .7em;
}

.bit-margin-l{
    margin-left: .7em;
}

.bit-margin-r-x2{
    margin-right: 1.4em;
}

.bit-margin-l-x2{
    margin-left: 1.4em;
}
/* #endregion */

header{
    width: 100%;
    color: white;
    font-size: 14px;
    font-weight: 300;
}

/* #region HEADER SEARCH */
   
#header-search-row{
    width: 100%;
    overflow: hidden;
    letter-spacing: 0.05em;
    background: #00aaa0;
    background: linear-gradient(180deg, #00b8ab 0%, #02978d 100%);
    border-bottom: 1px solid white;
    box-sizing: border-box;
}

#header-search{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: center;

    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    padding: 0 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

#header-search [class^="icon-"], #header-search [class*=" icon-"],
#header-search [class^="icon-fill-"], #header-search [class*=" icon-fill-"]{
    width: 23px;
    height: 23px;
    vertical-align: middle;
    filter: contrast(1.6) drop-shadow(1px 1px 0 rgba(0,0,0,0.8));
}

#header-search a{
    color:white;
    text-decoration: none;
}

#header-search input,
#header-search button{
    float: left;
    vertical-align: middle;
}

#header-search > .contact-area{
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    
    float: left;
}

#header-search > .contact-area > div{
    float: left;
    margin-right: 1.4em;
}

#header-search > .contact-area a{
    padding: 8px 0 7px 0;
    white-space: nowrap;
}

#header-search > .social-icons{
    order: 0;
    flex: 0 1 auto;
    align-self: auto;

    float: left;
    margin:0;
    white-space: nowrap;
    text-align: left;
}

#header-search > .social-icons > a{
    padding: 8px .3em 7px 0;
}

#header-search > .search-area{
    order: 0;
    flex: 0 1 auto;
    align-self: auto;

    width: 100%;
    float: right;
    transition: flex .75s cubic-bezier(0,.7,.3,1);
}

#header-search > .search-area > .search-form{
    width: 100%;
    float: left;
    height: 36px;
    margin: 10px 0;
    position: relative;
}

#header-search .search-field{
    height: 36px;
    width: 100%;
    border-top: 1px solid #303030;
    border-left: 1px solid #303030;
    border-right: 1px solid #707070;
    border-bottom: 1px solid #707070;
    border-radius: 5px;
    margin: 0;
    padding: 0px 46px 0 13px;
    background: #3f3f3f;
    color: #bbb;
    box-sizing: border-box;
    outline:none;
}

#header-search .search-field:focus{
    color: #00aaa0;
    /* width: 230px;; */
}

#header-search .search-button{
    position: absolute;
    right: 1px;
    top: 1px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 0;
    box-sizing: border-box;
    background: #525252;
    background: linear-gradient(180deg, rgba(95,95,95,1) 0%, rgba(64,64,64,1) 100%);
    border-left: 1px solid #656565;
    border-top: 1px solid #656565;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    outline: none;
    cursor: pointer;
}

#header-search .search-button > .icon-search{
    background-image: url(./images/icon_search.svg);
    background-size: contain;
    filter: saturate(0) brightness(1.2);
    transition: filter .5s;
}

#header-search .search-button:hover > .icon-search,
#header-search .search-button:focus > .icon-search{
    filter: saturate(1) brightness(1.2) drop-shadow(0 0 3px #00aaa0);
}
/* #endregion */

/* #region HEADER SEARCH (MEDIAQUERIES) */

@media (min-width:460px){
    #header-search{
        justify-content: flex-start;
        padding: 0 40px;
    }

    #header-search > .social-icons{
        /* flex: 1 1 auto; */
        text-align: right;
        margin:0 1.6em 0 0;
        margin-left: auto;
    }

    #header-search > .search-area{
        flex: 1 1 150px;
        width: auto;
        margin-left: auto;
    }
}

@media (min-width:800px){
    #header-search > .search-area{
        flex: .1 1 190px;
    }
}

/* #endregion */

/* #region HEADER NAVIGATION */

#header-nav-row{
    width: 100%;
    height: 130px;
    border-top: 1px solid #b2b2b2;
    /* background: #eee; */
}

#header-nav{
    width: 100%;
    max-width: 1200px;
    height: 130px;
    padding: 1px 20px 0 20px;
    margin: 0 auto;
    box-sizing: border-box;
    font-weight: 300;
    text-transform: uppercase;
}

#header-nav .logo-domus{
    float: left;
    display: block;
    width: 200px;
    height: 48px;
    margin: 40px 0;
    background-image: url(images/logo_domus.svg);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: transform .3s, filter .3s;
}

#header-nav .logo-domus:hover{
    filter: brightness(1.2) contrast(0.9);
    transform: scale(1.075);
}

#nav-main{
    clear: both;
    color:black;
    animation: nojs-start-show .3s;
    animation-delay: 1.2s;
    animation-fill-mode: backwards;
}

#nav-main ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#header-nav > .button-nav{
    display: none;
    float: right;
    font-weight: 500;
    padding: 43px 12px 12px 12px;
    background: white;
    border:none;
    line-height: 26px;
    cursor: pointer;
    outline: none;
}

#header-nav .symbol-menu{
    position: relative;
    margin-left: 1px;
    width: 37px;
    height: 24px;
}

#header-nav .line-top,
#header-nav .line-middle,
#header-nav .line-bottom{
    width: 100%;
    height: 5px;
    background:#1d1d1d;
    transition: all .5s;
    opacity: 1;
    transform: translate(0,0) rotate(0) scale(1);
    /* transform-origin: 50% 50%; */
}

#header-nav .line-middle,
#header-nav .line-bottom{
    margin-top: 5px;
}

#header-nav > .button-nav.close .line-top{
    transform: translate(0,10px) rotate(135deg) scale(.8);
    background: #e56b2d;
}

#header-nav > .button-nav.close .line-middle{
    opacity: 0;
    transform:  translate(0,0) rotate(0) scale(.8);
}

#header-nav > .button-nav.close .line-bottom{
    transform: translate(0,-10px) rotate(-135deg) scale(.8);
    background: #e56b2d;
}

#nav-main > ul{
    position: absolute;
    left: 0;
    float: left;
    width: 100%;
    border:1px solid #ccc;
    z-index: 100;
}

#nav-main > ul > li{
    position: relative;
    background:white;
    z-index: 50;
}

#nav-main a{
    transform: none;
    transition: all .3s, box-shadow 1s;
    text-decoration: none;
    color: black;
    background: white;
}

#nav-main > ul > li.current-menu-item,
#nav-main > ul > li.current-menu-ancestor{
    z-index: 200;
}

#nav-main > ul > li:hover{
    z-index: 100;
}

#nav-main > ul > li > a{
    display: block;
    font-weight: 500;
    padding: 10px 12px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    background: rgba(255,255,255,0);
    transition: all .5s;
}

#nav-main > ul > li a:not(:last-child){
    padding-right: 36px;
    font-weight: 500;
}

#nav-main > ul > li a:not(:last-child)::after{
    position: absolute;
    right: 8px;
    display: inline-block;
    content: '';
    width: 18px;
    height: 18px;
    margin: 4px;
    background-image: url(./images/arrow_submenu.svg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 200%;
    transition: background-position .3s;
}

#nav-main > ul > li a.open:not(:last-child)::after{
    background-position: center bottom;
}

#nav-main > ul > li.current-menu-item > a,
#nav-main > ul > li.current-menu-ancestor > a{
    box-shadow: 2px 2px 7px rgba(0,0,0,0.2);
}

#nav-main > ul li.current-menu-item > a,
#nav-main > ul li.current-menu-ancestor > a{
    color: #00ccbe;
}

#nav-main > ul > li:hover > a,
#nav-main > ul > li > a.open{
    background:rgba(255,255,255,1);
    box-shadow: 2px 2px 7px rgba(0,0,0,0.2);
}

#nav-main > ul > li:hover > a:not(:last-child),
#nav-main > ul > li.current-menu-item > a:not(:last-child),
#nav-main > ul > li.current-menu-ancestor > a:not(:last-child){
    padding-right: 36px;
}

#nav-main > ul > li > ul{
    visibility: collapse;
    opacity: 0;
    overflow: hidden;
    box-shadow: 0px 0px 0px rgba(0,0,0,0);
    transition: all .5s;
    /* background: #00a1ad; */
}

#nav-main > ul > li:hover > ul,
#nav-main > ul > li > ul.open{
    visibility: visible;
    opacity: 1;
    box-shadow: 2px 2px 7px rgba(0,0,0,0.2);
}

#nav-main > ul > li > ul a{
    width: 100%;
    padding: 10px 20px 10px 12px;
    margin-top: -1px;
    border-bottom: 2px solid #e4e4e4;
    white-space: nowrap;
    box-sizing: border-box;
}

#nav-main > ul > li > ul a:last-child::before{
    content: '■';
    display: inline-block;
    margin: -5px 8px 0 0;
    vertical-align: middle;
}

#nav-main > ul > li > ul > li:first-of-type > a{
    margin-top: 0;
}

#nav-main > ul > li > ul a:last-child{
    transform: translateX(0px);
    transition: all .3s;
}

#nav-main > ul > li > ul a:last-child:hover{
    transform: translateX(5px);
    background: #eee;
    /* color:white; */
}

/* #endregion */

/* #region HEADER NAVIGATION (MEDIAQUERIES) */

@media (min-width:460px){
    #header-nav{
        /* justify-content: flex-start; */
        padding: 1px 40px 0 40px;
    }

    #nav-main{
        position: relative;
        float:right;
    }

    #nav-main > ul{
        left: auto;
        right: 0;
        width: auto;
    }
}

@media (min-width:1200px){/*WICHTIG: Auch in JS ändern*/
    #nav-main{
        float: right;
        clear: none;
    }

    #nav-main > ul{
        position: static;
        right: auto;
        border: none;
    }
    
    #nav-main > ul > li{
        float: left;
    }
    
    #nav-main > ul > li > a{
        padding: 67px 12px 35px 12px;
    }
    
    #nav-main > ul > li.current-menu-item > a,
    #nav-main > ul > li.current-menu-ancestor > a{
        padding: 75px 12px 37px 12px;
    }
    
    #nav-main > ul > li:hover > a{
        padding: 75px 12px 37px 12px;
    }

    #nav-main > ul > li > ul{
        position: absolute;
    }
}

/* #endregion */

/* #region MAIN IMAGE BG */

#mainimg-bg-row{
    width: 100%;
    height: 43vw;
    max-height: 600px;
    background: #c3c3c3;
    /* background-image: url(./images/mainimg_BG.png); */
    background-size: auto 238%;
    background-position: 89% 39%;
    background-repeat: no-repeat;
}

#mainimg-bg-gradient{
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, rgba(255,255,255,0) 5%, rgba(255,255,255,1) 80%); */
    background: linear-gradient(45deg, rgba(255,255,255,.25) 5%, rgba(255,255,255,1) 80%);
}

/* #endregion */

/* #region MAIN-IMAGE BG (MEDIAQUERIES) */

@media (min-width:1200px){
    #mainimg-bg-row{
        background-position: -600px 39%;
    }
}

/* #endregion */

/* #region CONTENT MAIN-IMAGES */

#mainimgs{
    position: relative;
    width: 100%;
    height: 43vw;
    max-width: 1280px;
    max-height: 600px;
    margin: -43vw auto 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

#mainimgs > a{
    display: block;
    position: absolute;
    left: auto;
    right: auto;
    width: 100%;
    height: 43vw;
    max-height: 600px;
    text-decoration: none;
    border:10px solid white;
    box-sizing: border-box;
    transition: width 2s cubic-bezier(.5,0,.5,1), border 2s, border-color .5s .25s;
    filter: hue-rotate(-7deg);
}

#mainimgs > a.hidden{
    width: 0;
    border-right-width: 0;
    border-color: rgba(255,255,255,0);
}

#mainimgs > a:hover{
    transform: none;
}

#mainimgs > a > h1{
    position: absolute;
    width: 100%;
    padding-bottom: 20px;
    margin: 0 0 0 -30px;
    top:5%;
    transition: top .5s, width 1s;
    overflow: hidden;
}

#mainimgs > a.hidden > h1{
    width: 0;
}

#mainimgs > a > div.mainimg{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #e5e5e5;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#mainimgs h1 > span{
    display: inline-block;
    color:white;
    vertical-align: middle;
    box-shadow: 4px 5px 4px rgba(0,0,0,.5);
    white-space: nowrap;
}

#mainimgs h1 > span:first-child{
    background: #00aaa0;
    background: linear-gradient(45deg, #00aaa0 20%, rgba(0, 170, 159, 0.74) 100%);
    font-size: 16px;
    font-weight: 700;
    padding:.6em .9em .6em 30px;   
}

#mainimgs h1 > span ~ span{
    background:#dc6e36;
    background: linear-gradient(45deg, rgba(220,110,54,1) 20%, rgba(220,110,48,0.75) 100%);
    font-size: 15px;
    font-weight: 400;
    padding:.4em .9em .4em 30px;
}

#mainimgs h1 > span:first-child::before,
#mainimgs h1 > span ~ span::before{
    content:'';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;    
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#mainimgs h1 > span:first-child::before{
    background-image: url('./images/label_mainimg_knick_tuerkis.svg');
}

#mainimgs h1 > span ~ span::before{
    background-image: url('./images/label_mainimg_knick_orange.svg');
}

#mainimg-changer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    z-index: 25;
}

#mainimg-changer > button{
    float: left;
    width: 28px;
    height: 28px;
    padding: 4px;
    border:none;
    background: transparent;
}

#mainimg-changer > button > div{
    position: relative;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.7);
    border: 2px solid white;
}

/* #endregion */

/* #region CONTENT MAIN-IMAGES (MEDIAQUERIES) */

@media (min-width:460px){
    #mainimgs{
        padding:0 3vw;
        margin: -40vw auto 0 auto;
    }

    #mainimgs > a{
        width: calc(100% - 6vw);
    }
}

@media (min-width:620px){
    #mainimgs h1 > span:first-child{
        font-size: 18px;
        padding:.6em .9em .6em 40px;
    }
    
    #mainimgs h1 > span ~ span{
        font-size: 17px;
        padding:.4em .9em .4em 40px;
    }
}

@media (min-width:800px){
    #mainimgs > a > h1{
        top:61.8%;
    }

    #mainimgs h1 > span:first-child{
        font-size: 2.8vw;
    }
    
    #mainimgs h1 > span ~ span{
        font-size: 2.3vw;
    }
}

@media (min-width:1200px){
    #mainimgs{
        margin: calc(40px - 43vw) auto 0 auto;
    }

    #mainimgs h1 > span:first-child{
        font-size: 34px;
        padding:20px 30px 20px 40px;
    }
    
    #mainimgs h1 > span ~ span{
        font-size: 28px;
        padding:10px 25px 10px 40px;
    }
}

@media (min-width:1396px){
    #mainimgs{
        /* max-width: 1200px; */
        padding: 0 40px;
        margin: -560px auto 0 auto;
    }

    #mainimgs > a{
        width: calc(100% - 80px);
    }
}

/* #endregion */

/* #region CONTENT */

#maincontent-row{
    /* border-bottom:1px solid #c3c3c3; */
    margin-top: -40px;
    padding-top: 40px;
    background: #eee;
    /* background-image: url('./images/contentBG_bottom.png'); */
    background-size: 300% auto;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}

#maincontent{
    max-width: 1200px;
    padding: 40px 20px 70px 20px;
    margin:0 auto;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4em;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);
    box-shadow: 3px 10px 9px rgba(0,0,0,.22);
}

#maincontent *.margin-top-none{
    margin-top: 0;
}
#maincontent *.margin-bottom-none{
    margin-bottom: 0;
}

#maincontent h1,
#maincontent h2{
    color: black;
}

#maincontent a{
    text-shadow: 1px 1px 0px rgba(255,255,255,.75);
    display: inline-block;
    color:#ff874b;
    transition: transform .3s, color .2s;
}
#maincontent a:link{
    color:#ff874b;
}
#maincontent a:visited{
    color: #f68b55;
    filter: saturate(.75);
}
#maincontent a:hover{
    color: #ffb894;
    /* transform: translate(0,-3px); */
}
#maincontent a:active{
    color: #ffb894;
}
#maincontent a:focus{
    color: #ffb894;
}

#maincontent p{
    margin: 1.5em 0;
}

#maincontent ul{
    list-style: none;
    padding-left: 20px;
}

#maincontent ul li{
    font-weight: 500;
}

#maincontent ul li::before{
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: hsl(176, 100%, 34%);
    margin: 0 11px 2px -18px;
}

#maincontent .wp-block-columns{
    margin-bottom: 0;
}

#maincontent .wp-block-column{
    box-sizing: border-box;
}

#maincontent .wp-block-image{
    padding: 1em 0;
    margin: 0;
    box-sizing: border-box;
}

#maincontent .wp-block-image img{
    height: auto;
    border: 2px solid white;    
    box-sizing: border-box;
    vertical-align: middle;
    box-shadow: 1px 2px 8px rgba(0,0,0,.4);
    filter: brightness(1) saturate(1);
    transition: box-shadow .5s, filter .5s;
	max-width: 100% !important;
}

#maincontent .wp-block-image figcaption{
    background: white;
    margin: 0;
    padding: 8px 12px;
    z-index: 10;
    position: relative;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 1px 2px 8px rgba(0,0,0,.4);
    transition: box-shadow .5s;
}

#maincontent .wp-block-image > a{
    text-decoration: none;
}

#maincontent .wp-block-image > a:hover > img{
    box-shadow: 1px 7px 16px rgba(0,0,0,.4);
    filter: brightness(1.2) saturate(.5);
}

#maincontent .wp-block-image > a:hover > figcaption{
    box-shadow: 1px 7px 16px rgba(0,0,0,.4);
}

#maincontent .google-maps {
    margin: 1em 0;
    border: 2px solid white;
    box-sizing: border-box;
    vertical-align: middle;
    box-shadow: 1px 2px 8px rgba(0,0,0,.4);
}

#maincontent .wp-block-column.left-sep{
    border-left:1px solid #22b9af;
    padding-left: 20px;
}

#maincontent .wp-block-column.right-sep{
    border-right:1px solid #22b9af;
    padding-right: 20px;
}

#maincontent hr.wp-block-separator{
    margin: 24px 0;
    background: hsl(176, 69%, 43%);
    background: linear-gradient(90deg, rgba(34, 185, 175, 0) 0%, rgb(34, 185, 175) 30%, rgb(34, 185, 175) 70%, rgba(34, 185, 175, 0) 100%);
    border:none;
    height: 2px;
}

#maincontent hr.wp-block-separator:last-child{
    display: none;
}

#maincontent ul.blocks-gallery-grid,
#maincontent ul.wp-block-gallery{
    padding:0;
}

#maincontent ul.blocks-gallery-grid > li::before,
#maincontent ul.wp-block-gallery > li::before{
    display: none;
}

#maincontent figure.wp-block-gallery .blocks-gallery-item{
    border: .6vw solid white;
    /* border-bottom: 3vw solid white; */
    box-sizing: border-box;
    vertical-align: middle;
    box-shadow: 1px 2px 8px rgba(0,0,0,.4);
    filter: brightness(1) saturate(1);
    transform: scale(1) rotate(0deg);
    transition: box-shadow .5s, filter .5s, transform .5s;
	background: #fff;
}

#maincontent figure.wp-block-gallery .blocks-gallery-item:hover{
    box-shadow: 1px 7px 16px rgba(0,0,0,.4);
    filter: brightness(1.2) saturate(.5);
    transform: scale(1.0) rotate(1.5deg);
    z-index: 10;
}

#maincontent figure.wp-block-gallery a{
    transform: none;
}

#maincontent .blocks-gallery-item__caption{
    display: none;
}

#maincontent .wp-block-image a[href$=".jpg"],
#maincontent .wp-block-image a[href$=".png"],
#maincontent .wp-block-gallery a[href$=".jpg"],
#maincontent .wp-block-gallery a[href$=".png"]{
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

/* #maincontent a:hover + .blocks-gallery-item__caption{
    display: block;
    padding: 8px;
    background:rgba(0,0,0,0.5);
    color: white;
    box-sizing: border-box;
} */

#maincontent .blocks-gallery-caption{
    display:none;
}

#maincontent .wp-block-file__button{
    /* border-radius: 5px; */
    background: #00aaa0;
}

#maincontent .angebot-item{
    /* border-bottom: 1px solid #666; */
    position: relative;
    padding: .5em;
    margin: 1em 0;
    background: white;
    font-size: 13px;
    line-height: 1.4em;
    letter-spacing: 0px;
    overflow: hidden;
    box-shadow: 2px 3px 8px rgb(0 0 0 / 15%);
}

#maincontent .angebot-item.reserviert::after,
#maincontent .angebot-item.verkauft::after{
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    top: 0px;
    right: 0px;
    background-image: url('images/label_reserved.svg');
}

#maincontent .angebot-item.verkauft::after{
    background-image: url('images/label_sold.svg');
}

#maincontent .angebot-item p{
    line-height: 2em;
    margin: 0;
    font-weight: 600;
}

#maincontent .angebot-item:last-child{
    border:none;
}

#maincontent .angebot-item > .thumbnail{
    float: left;
    margin: 0 0 .8em .75em;
    padding: 0 .3em .3em .3em;
}

#maincontent .angebot-item > .thumbnail > p{
    padding-left: .2em;
}

#maincontent .angebot-item > .thumbnail:nth-last-of-type(2){
    margin-right: .75em;
}

#maincontent .angebot-item > .thumbnail a{
    display: block;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
    border: 2px solid rgb(255, 195, 165);
    transition: transform .4s, border .4s;
    transform: scale(.95);
    /* box-shadow: 1px 2px 4px rgb(0 0 0 / 40%); */
    box-sizing: border-box;
}

#maincontent .angebot-item > .thumbnail a:hover{
    border-color: rgb(255, 145, 90);
    transform: scale(1.05);
    z-index: 100;
    cursor: zoom-in;
}

#maincontent .angebot-item > .data{
    overflow: hidden;
}

#maincontent .angebot-item > .data:nth-of-type(3){
    clear: both;
}
#maincontent .angebot-item > .data:nth-of-type(4){
    clear: both;
}
#maincontent .angebot-item > .data:nth-of-type(5){
    clear: both;
}
#maincontent .angebot-item > .data:nth-of-type(6){
    clear: both;
}
#maincontent .angebot-item > .data:nth-of-type(7){
    clear: both;
}

#maincontent .angebot-item > .data div{
    float: left;
    margin: 0 .75em .6em .75em;
    padding: 0 .5em .2em .5em;
    background: white;
}

#maincontent .angebot-item > .data strong,
#maincontent .angebot-item > .data span{
    white-space: nowrap;
}

/* #endregion */

/* #region CONTENT (MEDIAQUERIES) */

@media (max-width: 599px){
    #maincontent .wp-block-column.right-sep,
    #maincontent .wp-block-column.left-sep{
        padding:0;
        border:none;
    }

    #maincontent hr.wp-block-separator:last-child{
        display: block;
    }

    #maincontent *.mobile-display-none{
        display: none;
    }
}

@media (max-width: 900px){    
    #maincontent .angebot-item > .data{
        clear: both;
    }
}

@media (max-width:1100px){
    #maincontent .angebot-item{
        font-size: 12px;
    }
}

@media (max-width: 782px) and (min-width: 600px){
    .wp-block-column {
        flex-basis: calc(50% - 16px)!important;
        flex-grow: 0;
    }

    .wp-block-column:nth-child(2n) {
        margin-left: 32px;
    }

    .wp-block-column .wp-block-columns{
        flex-wrap: wrap;
    }

    .wp-block-column .wp-block-column{
        flex-basis: 100% !important;
        flex-grow: 1;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .wp-block-column .wp-block-column:nth-child(2n){
        margin-left:0;
    }

    .wp-block-column .wp-block-column.right-sep,
    .wp-block-column .wp-block-column.left-sep{
        border:none;
        padding: 0;
    }
}

@media (min-width:460px){
    #maincontent-row{
        padding: 0 3vw;
        background-size: 250% auto;
        background-position: 0 bottom;
    }

    #maincontent{
        padding: 80px 40px 80px 40px;
    }
}

@media (min-width: 550px){
    #maincontent{
        line-height: 1.5em;
    }
}

@media (min-width:620px){
    #maincontent-row{
        background-size: 150% auto;
        background-position: 38% bottom;
    }

    #maincontent{
        font-size: 1em;
        padding: 80px 40px 80px 40px;
    }
}

@media (min-width:1200px){
    #maincontent-row{
        background-size: 1920px auto;
        background-position: center bottom;
    }

    #maincontent{
        padding: 80px 40px 120px 40px;
    }

    #maincontent figure.wp-block-gallery .blocks-gallery-item{
        border: 8px solid white;
        /* border-bottom: 36px solid white; */
		display: table-cell;
    }
}

@media (min-width:1920px){
    
}

/* #endregion */

/* #region FOOTER */

#footer-main{
    width: 100%;
    background:#c4c4c4;
    border-top: 1px solid white;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    /* color: #e4e4e4; */
}

#footer-main [class^="icon-"], #footer-main [class*=" icon-"],
#footer-main [class^="icon-fill-"], #footer-main [class*=" icon-fill-"]{
    width: 26px;
    height: 26px;
    margin-top: 4px;
    vertical-align: middle;
    filter: contrast(1.6) drop-shadow(1px 1px 0 rgba(0,0,0,0.8));
}

#footer-main em{
    font-style: normal;
    color: #22b9af;
    font-weight: 700;
}

#footer-main strong{
    font-weight: 600;
}

#footer-main p{
    margin: 0 0 22px 0;
    white-space: nowrap;
}

#footer-main a{
    font-weight: 400;
    color: #ff874b;
    text-decoration: none;
    text-shadow: 1px 1px 0px rgba(255,255,255,.75);
}
#footer-main a:link{
    color:#ff874b;
}
#footer-main a:visited{
    color: #f68b55;
    /* filter: saturate(.75); */
}
#footer-main a:hover{
    color: #ffb894;
    /* transform: translate(0,-3px); */
}
#footer-main a:active{
    color: #ffb894;
}
#footer-main a:focus{
    color: #ffb894;
}

#footer-main > #footer-top{
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    text-align: center;
    margin: 0 auto;
    border-bottom: 1px solid #9f9f9f;
    overflow: hidden;
    background: #4d4d4d;
    background: linear-gradient(180deg, rgba(247,247,247,1) 0%, rgba(217,217,217,1) 100%);
    box-sizing: border-box;
}

#footer-top > section{
    padding: 20px 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

#footer-top > section:first-child{
    border-top:none;
}

#footer-top > section:last-child{
    border-bottom:none;
}

#footer-form{
    width: 100%;
    max-width: 1200px;
    padding: 40px 20px;
    margin: 0 auto;
    border-top: 1px solid white;
    overflow: hidden;
    background: #e7e7e7;
    box-sizing: border-box;
    filter: brightness(1);
    animation-duration: .7s;
    animation-iteration-count: 2;
    box-shadow: 0 0 0px transparent;
}

#footer-form em{
    display: inline-block;
    width: 100%;
    text-align: center;
}

#footer-form table{
    width: 100%;
}

#footer-form table td{
    height: 32px;
    padding: 2px 0;
    vertical-align: top;
    line-height: 14px;
    box-sizing: border-box;
}

#footer-form table #td-gender{
    padding-top:7px;
}

#footer-form table td:first-child{
    width: 132px;
    padding: 10px 10px 10px 0;
}

#footer-form label{
    white-space: nowrap;
    padding-top:1px;
}

#footer-form table td:first-child label:not([required]){
    display: inline-block;
    padding-left: 11.5px;
}

#footer-form label[required]::before{
    content: '*';
    color: #ff8548;
    display: inline-block;
    font-size: 18px;
    padding: 3px 3px 3px 0;
    margin-top: -4px;
}

#footer-form label.label-gender{
    cursor: pointer;
    padding: 1px 10px 0 10px;
}

#footer-form label.label-gender::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    padding: 2px;
    margin-right: 6px;
    border: 2px solid #999;
    background: #eee;
    /* background-clip: content-box; */
    border-radius: 50%;
    vertical-align: bottom;
}

#footer-form input:checked + label.label-gender::before{
    background-color: #777;
    background-clip: content-box;
    background-color: #00aaa0;
}

#footer-form input[name="gender"]{
    display: none;
}

#footer-form input,
#footer-form select,
#footer-form textarea{
    width: 100%;
    height: 32px;
    color: #666;
    outline:none;
    background: #f7f7f7;
    padding: 4px 14px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0 0 0 rgba(18, 186, 201, 0);
    transition: box-shadow .5s, background .5s;
}

#footer-form input:focus,
#footer-form select:focus,
#footer-form textarea:focus{
    background: white;
    box-shadow: 0 0 5px #12cabd;
}

#footer-form input:hover,
#footer-form select:hover,
#footer-form textarea:hover{
    background: white;
}

#footer-form select{
    cursor: pointer;
    padding-right: 0;
}

#footer-form textarea{
    height: 145px;
    /* min-height: 129px; */
    /* max-height: 209px; */
    padding: 6px 10px;
    resize: none;
}

#footer-form input:focus{
    color: #12cabd;
}

#footer-form #input-meeting-date,
#footer-form #input-meeting-time{
    width: 100%;
    padding: 6px 0 6px 10px;
}

#footer-form #input-meeting-date{
    margin-bottom:6px;
}

#footer-form input::-webkit-input-placeholder,
#footer-form input::placeholder{
    color:#bbb;
}

#footer-form input::-webkit-calendar-picker-indicator{
    filter: invert(.9);
    outline: none;
    cursor: pointer;
}

#footer-form .button-form{
    float: right;
    height: 28px;
    color: #f2996d;
    font-size: 12px;
    font-weight: 300;
    background: #f7f7f7;
    padding: 0px 12px;
    margin:5px 0 0 5px;
    box-sizing: border-box;
    border:1px solid;
    border-top-color: #eea784;
    border-right-color: #b57859;
    border-bottom-color: #b57859;
    border-left-color: #eea784;
    border-radius: 5px;
    transition: all .5s;
    cursor: pointer;
    outline: none;
}

#footer-form .button-form:hover{
    color: hsl(176, 84%, 40%);
    border-top-color: hsl(176, 76%, 73%);
    border-right-color: hsl(176, 38%, 53%);
    border-bottom-color: hsl(176, 38%, 53%);
    border-left-color: hsl(176, 76%, 73%);
    background: white;
}

#footer-form #button-form-reset{
    font-size: 17px;
    padding-top: 2px;
    color: #ccc;
    border-top-color: hsl(350, 0%, 73%);
    border-right-color: hsl(350, 0%, 53%);
    border-bottom-color: hsl(350, 0%, 53%);
    border-left-color: hsl(350, 0%, 73%);
}

#footer-form #button-form-reset:hover{
    color: hsl(350, 84%, 69%);
    border-top-color: hsl(350, 90%, 73%);
    border-right-color: hsl(350, 50%, 53%);
    border-bottom-color: hsl(350, 50%, 53%);
    border-left-color: hsl(350, 90%, 73%);
}

#footer-bar{
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    color: #adadad;
    background:#464646;
    padding:10px;
}

/* #endregion */

/* #region FOOTER (MEDIAQUERIES) */

@media (min-width:460px){
    #footer-form{
        padding: 40px; 
    }
    
    #footer-form #input-meeting-date,
    #footer-form #input-meeting-time{
        float: left;
    }

    #footer-form #input-meeting-date{
        margin:0 5px 0 0;
        width: calc(64% - 5px);
    }

    #footer-form #input-meeting-time{
        width: 36%;
    }
}

@media (min-width:550px){
    #footer-main > #footer-top{
        text-align: left;
        padding: 40px 20px 20px 20px;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

    #footer-top > section{
        float: left;
        border:none;
        padding: 0 20px 10px 20px;
        box-sizing: border-box;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0;
        -webkit-flex: 1 1 25%;
        -ms-flex: 1 1 25%;
        flex: 1 1 25%;
        -webkit-align-self: auto;
        -ms-flex-item-align: auto;
        align-self: auto;
    }

    #footer-form em{
        text-align: left;
    }
}

@media (min-width:800px){
    #footer-form table{
        float: left;
        width: 50%;
    }

    #footer-form table:first-of-type{
        padding-right: 20px;
    }

    #footer-form table:last-of-type{
        padding-left: 20px;;
    }

    #footer-form table:last-of-type td:first-child{
        width: 98px;
    }
}

@media (min-width:1200px){

}

/* #endregion */

/* #region BUTTON-SCROLL-TOP */

#button-scroll-top{
    position: fixed;
    bottom: 42px;
    right: 42px;
    border:none;
    vertical-align: middle;
    width: 56px;
    height: 56px;
    border-radius: 5px;
    background:#464646;
    background-image: url('./images/icon_scrollTop.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    outline:none;
    /* border: 1px solid #7d7d7d; */
    cursor: pointer;
    transition: all .3s;
    filter: brightness(1);
}

#button-scroll-top.hide{
    bottom:-60px;   
}

#button-scroll-top:hover{
    background-color: #00aaa0;
    /* filter: brightness(1.5); */
}

/* #endregion */

/* #region BUTTON-SCROLL-TOP (MEDIAQUERIES) */

@media (max-width: 599px){
    #button-scroll-top{
        bottom: -60px !important;
    }
}

@media (min-width: 1200px){
    #button-scroll-top{
        right: calc((100% - 1200px) * 0.5 + 42px);
    }
}

@media (min-width: 1500px){
    #button-scroll-top{
        right: 42px;
    }
}

/* #endregion */


/* DRNG */

.blocks-gallery-item img {
    border-style: none;
    /*max-width: 100%;
    height: auto;*/
}

/*.blocks-gallery-item*/ figure {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
	aspect-ratio: auto;
}

figure {
	max-width: 100%;
}*/

figure > img{
  width: auto;
  min-height: auto;
}

img {
	max-width: 100%;
	height: auto;
}