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

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: #f7f8f9;
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    line-height: 2.2rem;
    color: #444444;
    margin: 0;
    padding: 0;
    overflow: auto;
}

img {
    max-width: 100%;
    vertical-align: top;
}

a {
    color: #2C4557;
    text-decoration: none;
}


main header {
    position: relative;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.show-more {
    display:none;
}

.text-center {
    text-align:center;
}

/*----------------Typography--------------*/

/* roboto-300 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/roboto-v30-latin-300.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('fonts/roboto-v30-latin-300.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('fonts/roboto-v30-latin-regular.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/roboto-v30-latin-500.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('fonts/roboto-v30-latin-500.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/roboto-v30-latin-700.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('fonts/roboto-v30-latin-700.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

h1,
h2 {
    font-weight: 300;
}

h3,
h4,
h5,
h6 {
    font-weight: 500;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    font-weight: 500;
}

h1 {
    font-size: 4.5rem;
    line-height: 6rem;
}

h2 {
    font-size: 2.6rem;
    line-height: 3.5rem;
}

h2 span {
    font-weight: 600;
}

h3 {
    font-size: 2.2rem;
    line-height: 3.5rem;
}

.property-details-left h3 {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 2.5rem;
}

.text-caps {
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-weight: 500;
    color: #fff;
    font-size: 1rem;
}

#property-details .text-caps {
    color: #c29b40; 
}

input,
textarea,
button {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}

/*----------------Header--------------*/

#main-header {
    align-items: center;
    position: absolute;
    transition: all .2s;
    top: 20px;
    left: 0;
    z-index: 9;
    width: 100%;
    text-transform: uppercase;
    padding-top: 2rem;
    color: #fff;
    font-weight: 500;
}


#main-header-inner .grid {
    align-items: center;
    justify-content: center;
    height: 90px;
    max-width: 1640px;
    margin: 0 auto;
    font-size: 1rem;
}

#main-header nav {
    grid-column: 1/5;
    text-align: left;
}

#main-header ul {
    display: inline-block;
    list-style-type: none;
}

#main-header ul li {
    display: inline;
    margin-right: 2rem;
}

#main-header a {
    text-decoration: none;
    color: #fff;
    position: relative;
}

#main-header #logo a {
    position: unset;
}

#main-header nav a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: #fff;
    transition: transform 0.2s;
    transform: scaleX(0);
    transform-origin: center;
}

.sticky #main-header nav a::after {
    background: #2C4557;
}

#main-header nav li a:hover::after {
    transform: scaleX(1);
    transform-origin: center;
}

.booking a {
    padding: 9px 26px 5px 28px;
    border: 1px solid #fff;
    border-radius: 45px;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.booking i {
    font-size: 22px;
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    right: 20px;
    top: 15px;
}

.double-cta .booking i {
    right: 36px;
    top: 23px;
}

.booking:hover i {
    opacity: 1;
    color: #0e1d2b;
}

.booking span {
    transition: margin-right 0.3s ease;
}

.booking:hover span {
    margin-right: 22px;
}

#main-header .booking a:hover {
    background: #fff;
    color: #0e1d2b;
    transition: .2s all ease-in-out;
}


#logo {
    position: relative;
    grid-column: 5/9;
    text-align: center;
    width: 200px;
    margin: -80px auto 0 auto;
}

#logo img {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#main-header aside {
    grid-column: 9/13;
    text-transform: uppercase;
    text-align: right;
}

#main-header aside li:last-of-type {
    margin-right: 0;
}

.contact p {
    font-size: 0.9rem;
}

.header-icon {
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 200em;
    margin-right: 5px;
    transition: all .15s;
}

a:hover .header-icon {
    background: #fff;
    color: #2C4557;
}



/*--------------- Layout and Grid System-----------------*/


.full-width {
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
}

.row {
    position: relative;
    max-width: 1640px;
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 2.5rem;
    position: relative;
    max-width: 1640px;
    margin: 0 auto;
}

.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2.5rem;
    margin: 0 auto;
}

.grid-three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2.5rem;
    margin: 0 auto;
}

.grid-four {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.grid-five {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2.5rem;
    margin: 0 auto;
}

.v-center-content {
    align-self: center;
}

.col-1 {
    grid-column: span 1;
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}

.col-5 {
    grid-column: span 5;
}

.col-6 {
    grid-column: span 6;
}

.col-7 {
    grid-column: span 7;
}

.col-8 {
    grid-column: span 8;
}

.col-9 {
    grid-column: span 9;
}

.col-10 {
    grid-column: span 10;
}

.col-11 {
    grid-column: span 11;
}

.col-12 {
    grid-column: span 12;
}


/* Spacing */

.spacing-200 {
    padding: 2rem 0;
}

.spacing-300 {
    padding: 3rem 0;
}

.spacing-400 {
    padding: 4rem 0;
}

.spacing-500 {
    padding: 5rem 0;
}

.spacing-700 {
    padding: 7rem 0;
}

.spacing-900 {
    padding: 9rem 0;
}


/* Buttons */

.button-blue {
    background: rgb(26, 48, 61);
    background: linear-gradient(16deg, rgba(26, 48, 61, 1) 0%, rgba(36, 69, 88, 1) 100%);
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    border-radius: 35px;
    display: inline-block;
    padding: 12px 35px 10px 35px;
    text-transform: uppercase;
    transition: .2s all ease-in-out;
    font-weight: 500;
    font-size: 1rem;
}

.button-blue:hover {
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}

.button-white {
    background: #fff;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    border-radius: 35px;
    display: inline-block;
    padding: 16px 45px 14px 45px;
    font-weight: 500;
    font-size: 1rem;
    position: relative;
}

.button-blue.button-big {
    padding: 16px 62px 14px 62px;
}

/* CTA */

.cta-bottom {
    border-top: 1px solid #e1e1e1;
    margin: 3rem 0 0 0;
    padding: 3rem 0 0 0;
}

.double-cta a {
    margin: 0 15px;
    font-weight: 500;
    text-transform: uppercase;
}

.button-transparent {
    color: #fff;
    position: relative;
    font-weight: 500;
    font-size: 1rem;
}

.button-transparent:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: #fff;
    transition: transform 0.2s;
    transform-origin: center;
}

.button-transparent-mini {
    text-transform: uppercase;
    font-size: 1rem;
}

.hint {
    line-height: normal;
    color: #747474;
}

div.hint {
    max-width: 230px;
    font-size: 0.9rem;
    display: inline-block;
    position: relative;
    top: 10px;
    left: 10px;
}

/* Paralax Effect */

.parallax-banner {
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover !important;
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.immobilie-essen-1 .parallax-banner {
    background-image: url('images/wohnung-essen-1.jpg');
}

.immobilie-essen-2 .parallax-banner {
    background-image: url('images/wohnung-essen-2.jpg');
}

.immobilie-essen-3 .parallax-banner {
    background-image: url('images/wohnung-essen-3.jpg');
}

.immobilie-essen-4 .parallax-banner {
    background-image: url('images/wohnung-essen-4.jpg');
}

/*--------------- Banner -----------------*/

#banner {
    background: url(images/bg-immobilienmarkt.jpg) no-repeat;
    overflow: hidden;
    position: relative;
    margin-top: -20px;
}

#banner:before,
.banner-overlay:before {
    background: rgb(0, 0, 0);
    /*background: linear-gradient(278deg, rgba(26,48,61,1) 0%, rgba(0,212,255,0) 34%, rgba(26,48,61,1) 86%);*/
    content: "";
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.4;
    transition: .5s all;
}

.contact-page .banner-overlay:before,
.home .banner-overlay:before {
    opacity: 0.5;
}

#banner .grid {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    height: 90vh;
    max-height: 1080px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.banner-layout-left #banner-content {
    grid-column: 1/8;
    color: #fff;
    z-index: 3;
    position: relative;
    padding: 10rem 0 4rem 0;
}

.banner-layout-left h1 {
    margin-top: 1rem;
}

.banner-layout-center #banner-content {
    grid-column: 3/11;
    color: #fff;
    z-index: 3;
    position: relative;
    padding: 14rem 0 8rem 0;
    text-align: center;
}

.banner-layout-center h1 {
    margin-top: 1rem;
}

/*----------------------------- Startseite --------------------------------------*/

.home main,
.contact-page main {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.home footer,
.contact-page #page-footer {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    z-index: 99;
    align-self: end;
}

.contact-page #page-footer,
.home #page-footer {
    color: #fff;
    z-index: 3;
}

.contact-page #page-footer .grid,
.home #page-footer .grid {
    margin: 0 auto;
    max-width: 1640px;
}

.contact-page #page-footer a,
.home #page-footer a {
    color: #fff;
}

.home #banner-content {
    text-align: center;
    padding-top: 13rem;
}

.home h1 {
    max-width: 1160px;
}


/* Startseite Slider*/

body.home {
    background: #000;
}

.home-slider {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    object-fit: cover !important;
    height: 100%;
    width: 100%;
}

.home-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.home-slide>div {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute;
    animation: slide 12s infinite;
    -webkit-animation: slide 12s infinite;
    opacity: 0;
}

.home-slide .banner-image-1 {
    animation-delay: 0s;
}

.home-slide .banner-image-2 {
    animation-delay: 4s;
}

.home-slide .banner-image-3 {
    animation-delay: 8s;
}

.home-slide .banner-image-4 {
    animation-delay: 12s;
}

.banner-image-1 {
    background: url(images/start-1.jpg) no-repeat;
}

.banner-image-2 {
    background: url(images/start-2.jpg) no-repeat;
}

.banner-image-3 {
    background: url(images/start-3.jpg) no-repeat;
}

.banner-image-4 {
    background: url(images/start-4.jpg) no-repeat;
}


@keyframes slide {

    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    53% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes slide {

    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    53% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/*----------------------------- Property Listing --------------------------------------*/

#standorte-banner {
    background: url(images/standorte.jpg) no-repeat;
    ;
}

.property-box {
    border-radius: 5px;
    transition: .2s all ease-in-out;
    position: relative;
}

.property-box:hover {
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.property-info {
    padding: 0 2rem 2rem 2rem;
}

.property-box h3 {
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
    line-height: normal;
}

.property-box ul {
    margin-bottom: 2rem;
}

.property-box li {
    display: inline-block;
    margin-right: 0.8rem;
}

.property-box ul i {
    font-size: 1.4rem;
}

.property-box .button-blue {
    margin-right: 2rem;
}

.property-box .slider {
    height: unset;
}

.badge {
    position: absolute;
    right: 15px;
    top: 15px;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 5px;
    font-size: 0.8rem;
    background: #c29b40;
    color: #fff;
    padding: 5px 10px;
    z-index: 3;
}

/*-----------------------------------Property Page-----------------------------------*/

#property-banner {
    color: #fff;
    text-align: center;
}

#property-banner .grid {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 900px;
}

#home-banner .grid {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}

#property-banner #banner-content,
#home-banner #banner-content {
    grid-column: 2/12;
    color: #fff;
    z-index: 3;
    position: relative;
}

.banner-title {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5rem;
}

p.banner-subtitle {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.5rem;
    font-weight:300;
    margin-bottom: 5rem;
}

#home-banner p.banner-subtitle {
    max-width: 820px;
    margin: 25px auto 55px auto;
    font-weight:300;
}

p.intro {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 2.4rem;
}

p.intro:before {
    content: "";
    display: block;
    width: 45px;
    height: 3px;
    background: #c29b40;
    margin-bottom: 30px;
}


/* Property Features */

.property-bar {
    border-bottom: 1px solid #e1e1e1;
    padding: 1rem 0;
}

.property-bar #property-features-big {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

#property-features-big i {
    font-size: 40px;
    position: relative;
    bottom: -7px;
    margin-right: 10px;
    color: #7D7D7D;
}

#property-features-small {
    margin-top: 2.5em;
    background: #fff;
    padding: 3rem;
    border-radius: 5px;
}

#property-features-small h4 {
    margin-bottom: 1.5rem;
}

#property-features-small img {
    max-width: 28px;
    margin-right: 10px;
    display: inline-block;
    opacity: 0.8;
    position: relative;
    bottom: -2px;
}

#property-features-small .grid-two {
    grid-gap: .6rem;
}

.property-details-left {
    grid-column: 1/6;
}

.property-details-right {
    grid-column: 7/13;
}

/* Property Slider and Images */

.slider {
    position: relative;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.slides {
    display: grid;
}

.slide {
    width: 100%;
    height: 100%;
    grid-area: 1 / 1 / 2 / 2;
    max-width: 100%;
    height: auto;
    display: none;
}

.slides img {
    border-radius: 5px;
}

.preview-images img {
    border-radius: 5px;
}



/* Lightbox Container */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(250, 250, 250, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* Makes lightbox scrollable */
    z-index: 9999;
    visibility: visible;
    backdrop-filter: blur(5px);
    text-align: center;
}

html.no-scroll {
    overflow: hidden !important;
    /* Hide scrollbar for Windows */
    scrollbar-width: none;
    /* Hide scrollbar for Webkit browsers */
    -webkit-overflow-scrolling: touch;
}

.lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox-content,
.image-lightbox-content {
    max-height: 90vh;
    overflow-y: auto;
}

.lightbox img {
    margin: 20px;
    display: block;
    border-radius: 5px;
}

.lightbox-toggle {
    cursor: pointer;
}

.close-lightbox {
    position: fixed;
    z-index: 9999;
    top: 25px;
    right: 25px;
    line-height: 50px;
    width: 50px;
    height: 50px;
    font-size: 25px;
    border-radius: 200em;
    cursor: pointer;
    text-align: center;
    background: #fff;
    color: #000;
    border: none;
    padding: 0;
}

.slider .lightbox-toggle {
    position: absolute;
    right: 15px;
    bottom: 15px;
    background: #fff;
    text-align: center;
    padding: 14px 35px 12px 35px;
    z-index: 2;
    border-radius: 35px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.slider-controls {
    position: absolute;
    top: 45%;
    width: 100%;
    z-index: 2;
}

.slider-controls div {
    background: #fff;
    border-radius: 200rem;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    border-radius: 200em;
    color: #0e1d2b;
    opacity: 0;
    transition: .2s all ease-in-out;
}

.property-page .slider-controls div {
    width: 65px;
    height: 65px;
    font-size: 25px;
    line-height: 65px;
}

.property-listing .slider-controls div {
    width: 45px;
    height: 45px;
    font-size: 22px;
    line-height: 45px;
}

.slider:hover .slider-controls div {
    opacity: 0.8;
}

.slider-controls .prev {
    position: absolute;
    left: 15px;
}

.slider-controls .next {
    position: absolute;
    right: 15px;
}

/* Buchungs Hilfe*/

#buchung-hilfe {
    background: url(images/bg-support.jpg) no-repeat right top;
    background-size: contain;
    border-radius: 5px;
}

#hilfe-text {
    background: rgb(26, 48, 61);
    background: linear-gradient(90deg, rgba(26, 48, 61, 1) 0%, rgba(36, 69, 88, 1) 100%);
    border-top: 5px solid #c29b40;
    padding: 2rem 3rem 3rem 3rem;
    border-radius: 5px;
    max-width: 500px;
    color: #fff;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

#hilfe-text h3 {
    margin-bottom: 0;
    line-height: normal;
}

.call-us {
    font-size: 2rem;
    font-weight: 500;
}

#buchung-hilfe a {
    color: #fff;
    transition: .2s all ease-in-out;
}

#buchung-hilfe a:hover .circle-icon {
    background: #fff;
    color: rgb(26, 48, 61);
}

.circle-icon {
    border: 1px solid #fff;
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 200em;
    margin-right: 5px;
    transition: all .15s;
    margin-right: 10px;
}

.circle-icon img {
    max-width:22px!important;
    margin-top:11px;
}

#buchung-hilfe a .circle-icon {
    border: 1px solid #fff;
    display: inline-block;
    width: 62px;
    height: 62px;
    line-height: 62px;
    font-size: 1.5rem;
    text-align: center;
    border-radius: 200em;
    margin-right: 5px;
    transition: all .15s;
    margin-right: 10px;
}

/*--------------------------------- Über Uns --------------------------------------*/

#ueberuns-banner {
    background: url(images/ueber-uns.jpg) no-repeat;
}


#ueber-uns-content .content-wrapper {
    grid-column: 4 / span 6;
    /* Start at 4th column and span 6 columns */
}

/*--------------------------------- Footer --------------------------------------*/

#page-footer {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin: 1.5rem auto;
    color: #7D7D7D;
}

#page-footer p {
    text-align: left;
    margin: 0;
    padding: 0;
}

#page-footer img {
    display: inline-block;
    max-width: 150px;
    margin: 0 auto;
}

.contact-page #page-footer img {
    position: relative;
    top: -15px;
}

#page-footer ul {
    text-align: right;
}

#page-footer ul li {
    text-align: right;
    display: inline-block;
    margin-left: 1rem;
}

#page-footer a {
    color: #7D7D7D;
}

/*-----------------------------------Contact Page-----------------------------------*/

#kontakt-info {
    max-width:1160px;
    margin:0 auto;
    color:#fff;
    padding: 8rem 0 8rem 0;
    position:relative;
    z-index:2;
}

.two-c {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 600px;
    margin: 0 auto;
}

.contact-page {
    background: url(images/kontakt.jpg) no-repeat;
    background-size: cover;
}

.contact-page h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

#contact-banner .grid {
    padding-top: 15rem;
    z-index: 3;
}

.contact-left {
    color: #fff;
    max-width: 600px;
}

.contact-left ul {
    font-size: 1.5rem;
    font-weight:bold;
}


.contact-data li {
    margin-bottom:15px;
}

.contact-data a {
    color:#fff;
    font-weight:500;
}

.contact-data a .circle-icon {
    background:#fff;
    color:#2C4557
}


#contact-form {
    background: #fff;
    border-radius: 5px;
    padding: 2.5rem;
}

#contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

#email,
#nachricht,
.g-recaptcha,
button {
    grid-column: span 2;
}

#contact-form label {
    display: block;
    text-transform: uppercase;
    font-size: 1rem;
}

#contact-form input,
textarea {
    width: 100%;
    background: #F5F5F5;
    border-radius: 5px;
    border: none;
    padding: 10px;
}

textarea {
    min-height: 200px;
}

#contact-form button {
    background: rgb(26, 48, 61);
    background: linear-gradient(16deg, rgba(26, 48, 61, 1) 0%, rgba(36, 69, 88, 1) 100%);
    color: #fff;
    text-align: center;
    border-radius: 35px;
    text-transform: uppercase;
    transition: .2s all ease-in-out;
    font-weight: 500;
    padding: 19px 62px 16px 62px;
    cursor: pointer;
    border: none;
}

.contact-full {
    grid-column: span 2;
}



/*-----------------------------------Impressum-----------------------------------*/


.impressum #impressum-banner {
    background: url(images/impressum.jpg) no-repeat;
}


/*-----------------------------------Responsive-----------------------------------*/

/* Responsive Menu */

#menu {
    background: rgb(26, 48, 61);
    background: linear-gradient(360deg, rgba(26, 48, 61, 1) 0%, rgba(36, 69, 88, 1) 100%);
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 998;
    padding: 2rem;
    border-top: 5px solid #c29b40;
    overflow-y: auto; /* Enables vertical scrolling */
}

#menu img {
    max-width: 250px;
    margin-bottom: 2rem;
}

#menu ul:before {
    content: "";
    height: 3px;
    width: 25px;
    background: #c29b40;
    margin-bottom: 1rem;
    display: block;
}

#menu ul:after {
    content: "";
    height: 3px;
    width: 25px;
    background: #c29b40;
    margin-top: 1rem;
    display: block;
}

#menu ul a {
    text-transform: uppercase;
    display: block;
    padding: 0.5rem 0;
}

#menu a {
    color: #fff;
}

/* Toggle styles */
#toggle {
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 999;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 200rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally */
    justify-content: center;
    /* Center vertically */
    background: #fff;
    padding-top: 4px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

#toggle.toggle-active {
    padding-top: 0;
}

#toggle span {
    width: 20px;
    height: 2px;
    background-color: #333;
    transition: all 0.3s ease-in-out;
    margin-bottom: 3px;
    transform-origin: center;
}

/* Active toggle styles */
#toggle.toggle-active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

#toggle.toggle-active span:nth-child(2) {
    opacity: 0;
}

#toggle.toggle-active span:nth-child(3) {
    transform: translateY(-2.5px) rotate(-45deg);
}



/* Responsive */
@media (min-width: 1280px) {

    #menu,
    #toggle {
        display: none;
    }
}


/* Hide extra content on mobile by default */
@media (max-width: 767px) {

    /* Hide Elements */

    #main-nav,
    #main-header .contact,
    #page-footer p,
    #page-footer img {
        display: none;
    }

    main {
        padding: 0 25px;
    }


    /* Typography */

    h2 {
        font-size: 2.2rem;
        line-height: normal;
        margin-top: 0.5rem;
    }

    .property-details-left h3 {
        line-height: normal;
    }

    /* Grid */

    .grid,
    .grid-two,
    .grid-three,
    .grid-four, #contact-form, .two-c {
        display: block;
    }

    .property-details-right .grid-three {
        display: grid;
        grid-gap: 0.5rem;
    }

    /* Buttons */

    .double-cta a {
        margin: 1rem 0;
    }

    .button-white,
    .button-blue {
        width: 100%;
    }

    .button-transparent-mini {
        text-align:center;
        display:block;
        padding:1rem 1rem 0 1rem;
    }

    div.hint {
        display: block;
        text-align: center;
        width: 100%;
        max-width: unset;
        top: unset;
        left: unset;
        margin: 0.5rem 0;
    }

    .cta-bottom {
        border-bottom: 1px solid #e1e1e1;
        padding: 1rem 0 0.5rem 0;
        margin: 1rem 0;
    }

    /* Header */

    #logo {
        width: 220px;
        margin: 0.3rem auto 0 auto;
        position: relative;
    }

    /* Banner */

    .home #banner-content {
        padding-top:7rem;
    }

    .parallax-banner {
        background-position: unset !important;
        padding: 0 25px;
        background-size: cover;
    }

    .parallax-banner .grid {
        height: unset !important;
        padding-bottom: 3rem;
    }

    .banner-layout-center #banner-content {
        padding: 10rem 0 2rem 0;
    }

    .parallax-banner {
        margin-left: -25px;
        margin-right: -25px;
    }

    #banner-content p {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    #banner-content h1 {
        font-size: 2.2rem;
        font-weight: 500;
        line-height: normal;
    }

    /* Property Page */

    .property-bar #property-features-big li {
        font-size: 1rem;
        display: inline-block;
    }

    #property-features-big i {
        margin: 0 3px;
    }

    #property-features-small {
        margin-top: 1.5em;
        background: #fff;
        padding: 1.5rem;
        border-radius: 5px;
    }

    .slider {
        height: 210px;
        margin-bottom: .5rem;
    }

    .property-page .slider-controls div, .property-listing .slider-controls div {
        width: 45px;
        height: 45px;
        font-size: 22px;
        line-height: 50px;
    }
    .slider .lightbox-toggle {
        text-align: center;
        padding: 7px 15px 4px 15px;
        font-size: 0.8rem;
    }

    .close-lightbox {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        line-height: 42px;
        font-size: 22px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
    }

    .lightbox-inner {
        padding: 1.2rem;
    }

    .lightbox img {
        margin: 0 0 1rem 0;
    }

    /* Buchungshilfe */

    #buchung-hilfe {
        padding-top: 9rem;
    }

    #hilfe-text {
        padding: 0 2rem 2rem 2rem;
        margin: 0 auto;
    }

    .call-us {
        font-size: 1.6rem;
        font-weight: 500;
    }


/* Property Listing */

.property-box {
    background:#fff;
}

.property-box .slider {
    height:245px;
    margin-bottom:1rem;
}

.property-box h3 {
    font-size: 1.3rem;
    line-height: normal;
}

.property-box ul {
    margin-bottom: 1rem;
}

    /* Property Page */
    .description {
        overflow: hidden;
        max-height: 450px;
        /* Adjust as needed */
    }

    .show-more {
        display: block;
        position: relative;
        background: #f7f8f9;
        text-align: center;
        text-transform: uppercase;
        font-size: 1rem;
    }

    .show-more:before {
        content: "";
        display: block;
        height: 70px;
        background: rgb(247, 248, 249);
        background: linear-gradient(0deg, rgba(247, 248, 249, 1) 0%, rgba(47, 100, 131, 0) 100%);
        position: absolute;
        width: 100%;
        top: -64px;
    }

    /* Contact Page */

    #contact-banner .grid {
        padding-top:7rem;
    }

    #contact-banner .contact-left {
        text-align:center;
        margin: 0 auto;
    }

    #contact-form {
        margin-top:2rem;
    }

    #contact-form button {
        width:100%;
        padding: 19px 42px 16px 42px;
        margin-top:1rem;
    }


    /*Footer*/

    #page-footer {
        margin-top: 0;
    }


    #page-footer ul {
        text-align: center;
    }

    #page-footer ul li {
        margin: 0 0.5rem;
        text-align: center;
    }

}


/* Show all content on desktop */
@media (min-width: 768px) and (max-width: 1180px)  {

    /* Hide Elements */

    #main-nav,
    #page-footer p,
    #page-footer img {
        display: none;
    }

    main {
        padding: 0 25px;
    }

      /* Header */

      #logo {
        width: 220px;
        margin: 0;
        position: relative;
        top: 20px;
        left: 1rem;
    }

    #main-header aside {
        top: 14px;
        right: 10px;
        position: relative;
    }

    .booking a {
        padding: 5px 26px 2px 28px;
    }

    #menu p {
        max-width:500px;
    }

    /* Banner */

    .parallax-banner {
        background-position: unset !important;
        padding: 0 25px;
        background-size: cover;
    }

    .parallax-banner .grid {
        height: unset !important;
        padding-bottom: 3rem;
    }

    #banner-content, #contact-banner .grid {
        padding: 10rem 0 2rem 0;
    }

    .parallax-banner {
        margin-left: -25px;
        margin-right: -25px;
    }

    #banner-content p {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    #banner-content h1 {
        font-size: 2.2rem;
        font-weight: 500;
        line-height: normal;
    }

    .home #banner-content h1 {
        font-size: 4.2rem;
        font-weight:normal;
    }

    .home #banner-content p {
        font-size: 1.5rem;
        line-height: 2.4rem;
        font-weight: 300;
    }

    .banner-title, #ueber-uns-content .content-wrapper {
        max-width:680px;
        margin-left:auto;
        margin-right:auto;
    }

    /* Buttons */

    .cta-bottom {
        margin-bottom:2rem;
    }

    .double-cta {
        margin:2rem 0;
    }

    .button-transparent-mini {
        text-align:center;
        display:block;
        padding:1rem 1rem 0 1rem;
    }

    #property-overview .button-blue {
        width:100%;
        margin:0;
        display:block;
    }

/* Property Listing */

    /* Property Listing */

    #property-overview .grid.grid-three, #property-features-small .grid-two {
        display:grid;
        grid-template-columns: 1fr 1fr;
    }

    .property-box .slider {
        height:245px;
    }

    /* Property Page */

    .property-bar #property-features-big li {
        font-size: 1rem;
        display: inline-block;
    }

    #property-features-big i {
        margin: 0 3px;
    }

    #property-features-small {
        margin-top: 1.5em;
        background: #fff;
        padding: 1.5rem;
        border-radius: 5px;
    }

    .description {
        max-height: none;
        overflow: visible;
    }

    .show-more {
        display: none;
    }

/* Buchhungshilfe */

#buchung-hilfe {
    padding-top:12rem;
}

#buchung-hilfe .grid-two {
    display:block;
}

#hilfe-text {
    margin:0 auto;
}


.close-lightbox {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    line-height: 42px;
    font-size: 22px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

.lightbox-inner {
    padding: 1.2rem;
}

.lightbox img {
    margin: 0 0 1rem 0;
}

/*Kontakt*/

#contact-form {
    margin-top:2rem;
}

.contact-left {
    text-align:center;
    margin:0 auto;
}

.contact-data li {
display:inline-block;
margin:0 5px;
}

    /*Footer*/

    #page-footer {
        margin-top: 0;
    }

#page-footer .grid-three {
    display:block;
}

    #page-footer ul {
        text-align: center;
    }

    #page-footer ul li {
        margin: 0 0.5rem;
        text-align: center;
    }


}


@media (min-width: 1181px) and (max-width: 1625px)  {
    main {
        padding: 0 25px;
    }

    .parallax-banner {
        margin-left: -25px;
        margin-right: -25px;
    }

    #toggle {
        display:none;
    }

    #main-header-inner {
        padding:0 25px;
    }

    #logo {
        margin: -60px auto 0 auto;
    }

}

@media (max-width:1179px) {



    .grid,
    .grid-four,
    #responsive-nav {
        display: block;
    }

    .spacing-200,
    .spacing-300,
    .spacing-400,
    .spacing-500,
    .spacing-700,
    .spacing-900 {
        padding: 3rem 0;
    }

    /* Images */

    .grid-layout-one.grid .image-left,
    .grid-layout-one.grid .image-right {
        margin: 0;
    }

    /*----------------Header----------------*/


    #main-header {
        top: 0;
        padding-top: 0;
    }

    #main-header aside {
        margin-right: 3.6rem;
    }

    #main-header-inner .grid {
        height: 70px;
    }

    #main-header ul li {
        margin-right: 0;
    }

    .menu li {
        float: none;
    }

    .menu {
        display: none;
    }



    /*----------------Typography----------------*/

    h1 {
        font-size: 2.2rem;
        line-height: 3rem;
    }

    /*----------------Sections----------------------*/

    /* Banner */

    #banner .grid {
        height: unset;
    }

    #banner-content {
        padding: 4rem 1rem;
    }

    #banner-content p {
        margin: 0;
    }



}