/*
Theme Name: Berghwacht
Theme URI: http://www.kundenurl.de/
Author: SIGN+DESIGN Werbeagentur
Author URI: https://www.signunddesign.com/
Description: Wozu lange um den „heißen Brei“ reden: Unser Ziel ist Ihr Erfolg! Denn nur erfolgreiche Kunden sind auf Dauer glückliche Kunden. Und um Sie glücklich zu machen, richten wir unsere Energie auf Ihren stimmigen Auftritt und die Entwicklung zielführender Kommunikationsmaßnahmen. Werbung darf bei uns Spaß machen und ist trotzdem niemals Selbstzweck. Was zählt ist Ihr Erfolg! Die Früchte unserer Bemühungen: treue, langjährige Kunden und zahlreiche Weiterempfehlungen – mit ein Grund dafür, dass viele unserer Kunden aus dem Bereich Immobilien stammen. Und hier liegt auch seit über 20 Jahren ein Schwerpunkt unserer Arbeit.
Version: 2.1
*/@charset "UTF-8";

/*Global Reset*/

body,html,h1,h2,h3,h4,h5,h6,p,ul,ol,li{padding:0;margin:0;}
body,html{width:100%;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

/* ########## Fonts ++ WICHTIG font-display: swap; ++ ########## */

/* Orbitron */

/* orbitron-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: 'Orbitron';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/orbitron-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* orbitron-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: 'Orbitron';
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/orbitron-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* orbitron-600 - 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: 'Orbitron';
    font-style: normal;
    font-weight: 600;
    src: url('assets/fonts/orbitron-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* orbitron-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: 'Orbitron';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/orbitron-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* orbitron-800 - 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: 'Orbitron';
    font-style: normal;
    font-weight: 800;
    src: url('assets/fonts/orbitron-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* orbitron-900 - 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: 'Orbitron';
    font-style: normal;
    font-weight: 900;
    src: url('assets/fonts/orbitron-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Montserrat */

/* montserrat-200 - 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: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: url('assets/fonts/montserrat-v26-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-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: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('assets/fonts/montserrat-v26-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-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: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-italic - 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: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('assets/fonts/montserrat-v26-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-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: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/montserrat-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - 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: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('assets/fonts/montserrat-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ########## Variables ########## */

* {
    --font-family: "Montserrat", sans-serif;
    --font-family-hl: "Orbitron", sans-serif;
    --transition: .3s ease-in-out;
    --wrp-width: 1620px;
    --small-wrp-width: 1350px;
    --font-size: 16px;
    --line-height: calc(var(--font-size) * 1.8);
    --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    --border-radius: 15px;
    --primary-color: #f39204;
    --secundary-color: #365A75;
    --text-color: #fff;
}

/* ########## Globals ########## */

html {scroll-behavior: smooth; height: 100%;}
body {font-size: var(--font-size); font-family: var(--font-family); line-height: var(--line-height); color: var(--text-color); background-color: #101010; min-height: 100vh;}
body.home:after {content: url("assets/reifenspuren.svg");position: absolute;width: 100%;top: 55%;opacity: 0.3; z-index: -1; height: 100%; }
img {-ms-interpolation-mode:bicubic; vertical-align: bottom;}
svg {width: 100%; height: 100%;}
hr {border:none;height:1px;background:#ddd; margin:0;}

.wrp {max-width: var(--wrp-width); width: 90%; margin: 0 auto; position:relative; box-sizing:border-box;}
.small-wrp {max-width: var(--small-wrp-width);}

@media (max-width: 700px) {
    body.home:after {top: 85%;}
}

/* Margins */

.mb {margin-bottom: 100px;}
.mb50 {margin-bottom: 50px;}

@media (max-width: 500px) {
  .mb {margin-bottom: 50px;}
  .mb50 {margin-bottom: 25px;}
}

/* Page Build */

main.withsidebar .page-build {display: grid; grid-template-columns: 70% 25%; align-items: flex-start; justify-content: space-between; max-width: var(--wrp-width); width: 90%; margin: 0 auto;}
main.withsidebar .content .wrp {width: 100%;}

@media (max-width: 1024px) {
    main.withsidebar .page-build {grid-template-columns: 100%;}
    main.withsidebar .page-build .sidebar {display: none;}
}

/* Typo Styles */

h1,h2,h3,h4,h5  {font-family: Orbitron,sans-serif;text-transform: uppercase;}
h1{margin-bottom: 30px; font-size: 80px;}
h2{margin-bottom: 25px; font-size: 40px; line-height: 40px; font-weight: 500; color: var(--primary-color);}
h3{margin-bottom: 25px; font-size: 30px; font-weight: 500;}
h4{margin:0; font-size: 20px; text-decoration: underline; font-weight: 500;}
h5{font-size: 16px; font-weight: 500;}

@media (max-width:1024px){
    h2{font-size: 30px; line-height: 32px;margin-bottom: 20px;}
}


a {text-decoration: none; outline:none !important; color: var(--text-color); transition: var(--transition);}
a:hover {transition: var(--transition);}

.btn {padding: 12px 50px;border: 2px solid var(--primary-color); cursor: pointer; font-family: Orbitron, sans-serif; border-top: none; position: relative; display: inline-block;}
.btn:before {position: absolute;content: ''; height: 2px; background-color: var(--primary-color);top: 0;left: 0; width: 65%;transition: var(--transition);}
.btn:after {position: absolute;content: ''; height: 2px; background-color: var(--primary-color);top: 0;right: 0; width: 17%;transition: var(--transition);}
.btn span:before {position: absolute;content: url("assets/icons/btn-arrow.svg");top: -25%;right: 20%; width: 25px;transition: var(--transition);}
.btn span {display: inline-block;}

.btn:hover.btn:before {transition: var(--transition);width: 75%}
.btn:hover.btn:after {transition: var(--transition);width: 7%}
.btn:hover.btn span:before {right: 10%;transition: var(--transition);}

@media (max-width: 500px) {
    .btn {padding: 8px 18px; font-size: 15px;}
    .btn:before {width: 61%;}
    .btn span:before {top: -29%}
}

p {margin-bottom: var(--line-height); font-size: 16px; font-weight: 500}
/* p:last-child {margin-bottom: 0;} */
address {font-style: normal; color: var(--text-color);}
address a {display: block;}
ol, ul {margin-bottom: var(--line-height);}
li {margin-left: 20px;}

/* ########## Mainnav ########## */

.current-menu-item  a {color: var(--primary-color);}
.current-menu-item ul li a  {color: #fff!important;}

#mainnav ul.mainnav.smart {display:none;}
#mainnav {display: block; transform: translate(0);}

#mainnav .mainnav.desktop {display: flex;align-items: center;margin: 0}
#mainnav .mainnav.desktop li {list-style-type: none; margin-left: 38px;}
#mainnav .mainnav.desktop li:last-child a {color: var(--primary-color); border: 2px solid var(--primary-color); padding: 10px 7px 10px 7px;}
#mainnav .mainnav.desktop li:last-child a:hover {color: #fff; border: 2px solid var(--primary-color);padding: 14px 10px 14px 10px; }
#mainnav .mainnav.desktop li a {font-size: 18px; font-weight: 500; text-transform: uppercase;}
#mainnav .mainnav.desktop li a:hover {color: var(--primary-color);}

/* Submenu */

@media (min-width: 1300px){

    #mainnav ul.mainnav li a {padding: 25px 0; transition: var(--transition);}

    #mainnav ul.mainnav li.menu-item-has-children {position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {position: absolute; top: 84px; left: 0; display: block; height: auto; max-height: 0; overflow: hidden; background: rgba(0,0,0,0.4)}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li { height: 100%; padding: 18px 7px 18px 13px;  margin-left: 0;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:last-child a {color: #fff; transition: var(--transition); border: none;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:last-child:hover a {color: var(--primary-color); transition: var(--transition);padding: 18px 0 18px 0;}
    #mainnav ul.mainnav li.menu-item-has-children:hover > ul.sub-menu {max-height: 674px; overflow: visible; margin-top: -40px; width: 230px;}

    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover {border:2px solid var(--primary-color); backdrop-filter: blur(3px);padding: 16px 6px 16px 11px;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {padding: 18px 0 18px 0;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:last-child {margin-bottom: 0;}

    /* Zweite Ebene */

    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu {position: absolute; left: 100%; top: 6px; overflow: hidden;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover ul.sub-menu {overflow: visible;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li {background: #f5f5f5;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li a {color: var(--text-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li:hover a {color: var(--primary-color);}

    /* Desktop ausblenden */

    #mainnav .head,
    #mainnav address.contact,
    #mainnav ul.mainnav li.back {display: none;}
}

@media (max-width: 1300px) {

    #mainnav .mainnav.desktop {display: none;}

    /* Offcanvas */
    .noscroll {overflow: hidden;}

    #mainnav ul.mainnav.smart {display:block;}
    #mainnav {position: fixed; top: 0; right: 0; bottom: 0; background: #101010; width: 100%; height: 100%; transform: translateX(100%); transition: .8s ease-in-out; box-shadow: var(--box-shadow); z-index: 2;}
    #mainnav.active {transform: translateX(0); transition: .8s ease-in-out; overflow: auto}
    #mainnav .head {display: grid;grid-template-columns:  auto 50px; align-items: center; padding: 20px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-bottom: 35px;}
    #mainnav .head p {margin: 0; font-size: 25px; color: var(--text-color);}
    #mainnav .head .buttons {display: flex; justify-content: center;justify-self: end; }

    #mainnav .head .buttons a {width: 50px; height: 50px; border: 2px var(--primary-color) solid; margin-left: 5px; display: flex; align-items: center; justify-content: space-around;}
    #mainnav .head .buttons a:first-child {margin-left: 0;}
    #mainnav .head .buttons a svg {width: 30px; height: 30px;}
    #mainnav .head .buttons a svg g path {stroke: #fff;}

    /* Submenu */

    #mainnav ul.mainnav.smart {display: block;}
    #mainnav ul.mainnav.smart li {padding: 0; box-sizing: border-box; border-bottom: 1px solid #dedede; list-style-type: none; margin-bottom: 40px; margin-left: 5%; margin-right: 5%;padding-bottom: 8px;}

    #mainnav ul.mainnav li a {font-size: 30px; display: block;}
    #mainnav ul.mainnav li a:hover {color: var(--primary-color);}

    #mainnav .opensubnav {cursor: pointer; width: 49px; height: 49px; position: absolute; right: 5%; display: block; z-index: 100; box-sizing: border-box;}
    #mainnav .opensubnav.active {}
    #mainnav .opensubnav:after  {content: ''; transform: rotate(-45deg) translate(-50%, -50%); border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 6px; left: 50%; top:20%; position: absolute; transition: var(--transition);}
    #mainnav .opensubnav.active:after  {content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg);  border: solid #fff; border-width: 0 2px 2px 0;  transition: var(--transition);}

    #mainnav address.contact {padding: 5%; box-sizing: border-box; display: block;}

    /* Offcanvas Sub Layer 1 */

    #mainnav li.menu-item-has-children ul.sub-menu {display: none; transition: var(--transition); margin-bottom: 0; transition: var(--transition);}
    #mainnav li.menu-item-has-children.active ul.sub-menu {display: block; margin-top: 40px;}
    #mainnav li.menu-item-has-children.active ul.sub-menu li {margin-left: 0; border: none; margin-bottom: 20px;}
    #mainnav li.menu-item-has-children.active ul.sub-menu li a {padding-left: 5%;}
    #mainnav li.menu-item-has-children.active ul.sub-menu li ul.sub-menu li a {padding-left: 15%;}

    /* Offcanvas Sub Layer 2 */

    #mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children .opensubnav {}
    #mainnav li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children ul.sub-menu {display: none; transition: var(--transition);}
    #mainnav li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children.active ul.sub-menu {display: block; transition: var(--transition);}

    #mainnav ul.offcanvas-menu li.back a:before {display: none;}

    /* Mainnav Toggle */

    .mainnav-toggle {border-radius: 2px; display: block!important; position: relative; z-index: 10;width: 30px;height: 30px;box-shadow:none; transition: var(--transition);}
    .mainnav-toggle.off {border-radius: 2px; display: block!important; position: absolute; z-index: 10; top: 50%; right: 0;transform: translateY(-50%);width: 50px;height: 50px;background: transparent; transition: var(--transition);}
    .mainnav-toggle.off.active {display:none!important}
    .mainnav-toggle .btn-mainnav-toggle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 35px;cursor: pointer;}
    .mainnav-toggle .btn-mainnav-toggle span {display: block;width: 100%;border-radius: 4px;height: 2px;background: #fff;transition: all .3s;position: relative;}
    .mainnav-toggle .btn-mainnav-toggle span + span {margin-top: 7px;}
    .mainnav-toggle .btn-mainnav-toggle.active span + span {margin-top: 13px;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(1) {animation: ease .7s top forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(1) {animation: ease .7s top-2 forwards;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(2) {animation: ease .7s scaled forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(2) {animation: ease .7s scaled-2 forwards;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(3) {animation: ease .7s bottom forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(3) {animation: ease .7s bottom-2 forwards;}

    @keyframes top { 0% {top: 0; transform: rotate(0);} 50% {top: 15px;transform: rotate(0);} 100% {top: 15px;transform: rotate(45deg);} }
    @keyframes top-2 { 0% {top: 15px;transform: rotate(45deg);} 50% {top: 15px;transform: rotate(0deg);} 100% {top: 0;transform: rotate(0deg);} }
    @keyframes bottom { 0% {bottom: 0;transform: rotate(0);} 50% {bottom: 15px;transform: rotate(0);} 100% {bottom: 15px;transform: rotate(135deg);} }
    @keyframes bottom-2 { 0% {bottom: 15px;transform: rotate(135deg);} 50% {bottom: 15px;transform: rotate(0);} 100% {bottom: 0;transform: rotate(0);} }
    @keyframes scaled { 50% {transform: scale(0);} 100% {transform: scale(0);} }
    @keyframes scaled-2 { 0% {transform: scale(0);} 50% {transform: scale(0);} 100% {transform: scale(1);} }

    #mainnav-overlay {position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(7px); opacity: 0; z-index: -5; transition: var(--transition); visibility: hidden;}
    #mainnav-overlay.active {opacity: 1; z-index: 1; visibility: visible; transition: var(--transition);}
}

/* ########## Header ########## */

header {position: fixed; top: 0; width: 100%; z-index: 10; padding: 15px 0; box-sizing: border-box; background-image: linear-gradient(to bottom, rgba(16, 16, 16), rgba(16, 16, 16,0.0)); font-family: Orbitron,sans-serif}
header .header-grid {display: grid; grid-template-columns: 150px auto; grid-template-rows: auto; justify-items: start; align-items: center; justify-content: space-between; transition: var(--transition);}
header .header-grid .logo {width: 100%; height: 100%;}
header .header-grid .logo a {display: flex; align-items: center;}
header .header-grid .mainnav-toggle {display: none;justify-self: end;}

.scrolled header .header-grid {grid-template-columns: 100px auto; transition: var(--transition);}

@media (max-width: 950px) {
    header .header-grid {grid-template-columns:85px auto; }
    .scrolled header .header-grid {grid-template-columns: 60px auto; transition: var(--transition);}
}


/* Kopfbereich Startseite / Unterseite  */

.single .stage {aspect-ratio: 6/1!important;}

.stage {aspect-ratio: 2/1; width: 100%; min-height: 900px; position: relative;}
.stage-content h3 strong {color: var(--primary-color);}
.stage.frontpage:before {content: url("assets/berg_kontur.svg");width: 140%;position: absolute; bottom: -10px;right: -16%;}
.stage .wrp {position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}
.stage img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.stagevideo {width: 100%; height: 100%; object-fit: cover;}

.stage.subpage {width: 100%; position: relative; max-height: 600px;min-height: unset;}
.stage.subpage h1 {line-height: 80px;}
.stage.subpage .wrp {top: 60%;}
.stage.subpage:after {content: '';position: absolute;bottom: -1px; background: linear-gradient(to top, rgba(16, 16, 16),rgba(16, 16, 16, 0.7), rgba(16, 16, 16,0.0)); width: 100%; height: 30%;left: 0;}
.stage.subpage:before {content: '';position: absolute;top: 0; background: rgba(0,0,0,0.4); width: 100%; height: 100%;left: 0;}


@media (max-width: 1300px) {
    .single .stage {aspect-ratio: 4/1!important;}

    .stage.subpage {aspect-ratio: 3/1;}
    .stage .stage-content h1 {font-size: 60px; margin-bottom: 15px;}
    .stage.subpage h1 {line-height: 40px; font-size:40px; }
    .stage .stage-content h3 {font-size: 26px; margin-bottom: 15px;}
}

@media (max-width: 600px) {
    .stage {min-height: 550px;}
    .stage .stage-content h1 {font-size: 37px; margin-bottom: 8px;}
    .stage .stage-content h3 {font-size: 21px; margin-bottom: 5px;}
    .stage.subpage {aspect-ratio: 2/1; min-height: 220px;}
    .stage.subpage .wrp {top: 70%;}
    .stage.subpage h1 {line-height: 30px; font-size: 27px;}
}

/* ########## Content ########## */

/* Text */

.text.multiple-col .wrp {-webkit-columns: 2 350px; -moz-columns: 2 350px; columns: 2 350px; -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em;}
.text.align-center {text-align: center;}

/* Text Bild */

.textbild {position: relative;}
.textbild .wrp {display: grid; align-items: center; justify-content: space-between; box-sizing: border-box;}
.textbild .text {border-radius: 5px 0 0 5px; box-sizing: border-box;}
.textbild .text h2 strong {color: #fff; font-weight: 500;}
.textbild .bild {width: 100%; height: 100%;}
.textbild .bild img {width: 100%; height: 100%; object-fit: cover; }

.textbild.erstbild.mb.extended .bild.erstbild {width: 117%; margin-left: -17%;}
.textbild.ersttext.mb.extended .bild.ersttext {width: 117%;}


@media (max-width: 1800px) {
    .textbild.erstbild.mb.extended .bild.erstbild {width: 100%;margin-left: unset;}
    .textbild.ersttext.mb.extended .bild.ersttext {width: 100%;}
}

@media (max-width: 1024px) {
    .textbild .text {order: 1!important;}
    .textbild .bild {order: 2!important;}
    .textbild .wrp {grid-template-columns: 100%!important; gap: 50px;}
}

/* Teasercards */

.teasercards .cards.no-carousel {display: grid; grid-row-gap: 50px; margin: 0;}
.teasercards .cards.no-carousel li {list-style-type: none; margin: 0;}
.teasercards .splide ul.cards {display: flex; grid-column-gap: unset;}

.teasercard-item {position: relative; border: 2px solid var(--primary-color); max-height: 420px; min-height: 400px; overflow: hidden; width: 102%; box-sizing: border-box;}
.teasercard-item:hover img {scale: 1.08; transition: var(--transition);}
.teasercard-item:first-child {margin-top: 90px;}
.teasercard-item:last-child {margin-left: -2%;}
.teasercard-item .img-wrp {width: 100%;height: 100%; aspect-ratio: 3/4; display: block;}
.teasercard-item .img-wrp:after {content:'';bottom:0;height: 100%;width: 100%;position: absolute;background-image: linear-gradient(to top, rgba(16, 16, 16), rgba(16, 16, 16,0.0)); display: block;}
.teasercard-item .img-wrp img {width: 100%; height: 100%; object-fit: cover;transition: var(--transition);}

.teasercard-item .teasercard-content {display: block; position: absolute; bottom: 50px;padding: 0 50px;}



.splide__arrow--next {right:-5%!important}
.splide__arrow--prev {left:-5%!important}

@media (max-width: 1024px) {
    .teasercards .cards.no-carousel {grid-template-columns: 100%!important;}
    .teasercards .teasercard-item {width: 100%; min-height: unset;}
    .teasercard-item:first-child {margin-top: 0;}
    .teasercard-item:last-child {margin-left: 0;}
}

@media (max-width: 500px) {
    .teasercards .cards.no-carousel {grid-template-columns: 100% !important;}
    .teasercards.mb .wrp .cards.no-carousel .teasercard-item .img-wrp {aspect-ratio: 3/2;}
    .teasercard-item .teasercard-content {padding: 0 25px; bottom: 25px;}
    .teasercard-item .teasercard-content h3 {margin-bottom: 10px; font-size: 20px;}
    .teasercard-item .teasercard-content p {margin-bottom: 10px;}

}

/* Blogbeiträge Teasercards */

.blogbeitraege.teasercards .wrp .cards.no-carousel {display: grid; grid-template-columns: 1.5fr 1fr 1fr!important; gap: 1%;}
.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-item {background: #1b1b1b; max-height: unset; min-height: unset; overflow: visible; border: none;}
.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-item:first-child {margin: 0;}
.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-item .img-wrp {position: relative; overflow: hidden; height: 250px; aspect-ratio: unset;}
.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-item .img-wrp:after {transition: var(--transition);}
.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-item:hover :after {scale: 1.08; transition: var(--transition);}

.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-content {padding: 20px; position: relative; bottom: unset;}
.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-content h4 {margin-bottom: 20px;}
.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-item {width: 100%;}
.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-item:last-child {margin-left: unset;}

.blogbeitraege.teasercards .wrp .cards.no-carousel .teasercard-item .img-wrp .date {position: absolute; bottom: 20%; background-color: rgba(243,146, 4, 0.7);padding: 5px 20px;z-index: 6;}


@media (max-width: 1024px) {
    .blogbeitraege.teasercards .wrp .cards.no-carousel {display: grid; grid-template-columns: 100%!important; gap: 25px;}
}

.older.btn {color: #ffffff;}
.archive .content .navigation {display: flex;justify-content: space-between; margin-top: 50px;}

.archive .content .navigation .newer, .archive .content .navigation .older  {font-family: Orbitron, sans-serif; }
.archive .content .navigation .newer a:hover, .archive .content .navigation .older a:hover  {color: var(--primary-color);}
/* Image */

.image img {display:block; width:100%; height:auto;}

.bildtrenner {width:100%; aspect-ratio: 3/1; overflow: hidden; position: relative;}


.bildtrenner:before {content: ''; background-image:url("assets/maske1.png");width:100%; height: 100%; position: absolute; top: -1%; background-repeat: no-repeat; background-size: 100%; z-index: 3;}
.bildtrenner:after {content: ''; background-image:url("assets/maske2.png");width:100%; height: 100%; position: absolute; left:0; bottom: -86%;background-repeat: no-repeat; background-size: 100%;}
.bildtrenner .bt-image {height: 100%;width: 100%; overflow: hidden; position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}
.bt-image:before {content:''; bottom:0; width:100%; height: 200%;background-image: linear-gradient(to right, rgba(16, 16, 16, 0.8), rgba(16, 16, 16,0.0)); display: block; position: absolute; z-index: 1; transition: var(--transition);}
.bildtrenner .wrp {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3;}
.bildtrenner .wrp .stage-content {max-width: 50%;}

@keyframes p-1 {
    from {transform: translateY(0)}
    to {transform: translateY(-100px)}
}


@media (max-width: 1450px) {
    .bildtrenner .bt-image {min-height: 480px;}
    .bildtrenner {min-height: 480px;}
    .bildtrenner .wrp .stage-content {max-width: unset;}
}

@media (max-width: 910px) {
    .bildtrenner:after {bottom: -92%}
}

@media (max-width: 500px) {
    .bildtrenner:after {bottom: -96%}
}

/* Galerie */

.gallery .fresco-gallery:not(.masonry) {display: grid; gap: 50px; margin-bottom: 0;}
.gallery .fresco-gallery li {list-style-type: none; margin: 0; border-radius: 5px;overflow: hidden;}
.gallery .fresco-gallery:not(.masonry) li {margin: 0;}
.gallery .fresco-gallery li a {position: relative; display: block; overflow: hidden; height: 100%;}
.gallery .fresco-gallery li a .overlay {width: 100%; position: absolute; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: var(--secundary-color); opacity: 0; transition: var(--transition);}
.gallery .fresco-gallery li a:hover .overlay {opacity: 0.6; transition: var(--transition);}
.gallery .fresco-gallery li a .overlay .icon-wrp {position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; transform: translate(-50%, -50%);}
.gallery .fresco-gallery li a .overlay .icon-wrp svg {width: 100%; height: 100%; transform: scale(0); transition: var(--transition);}
.gallery .fresco-gallery li a .overlay .icon-wrp svg path {fill: #fff;}
.gallery .fresco-gallery li a:hover .overlay .icon-wrp svg { transform: scale(1); transition: var(--transition);}
.gallery .fresco-gallery li img {width: 100%; height: 100%; object-fit: cover;}
.gallery .fresco-gallery.masonry {gap: 25px; columns: 4; margin: 0 auto;}

.gallery .video-gallery-grid {display: grid; grid-column-gap: 50px; grid-row-gap: 50px;}
.gallery .video-gallery-grid .video-gallery-item {height: 220px; width: 100%; display: block; position: relative; overflow: hidden;}
.gallery .video-gallery-grid .video-gallery-item .overlay {width: 100%; position: absolute; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: var(--secundary-color); opacity: 0; transition: var(--transition); z-index: 4;}
.gallery .video-gallery-grid .video-gallery-item:hover .overlay {opacity: 0.6; transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp {position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; transform: translate(-50%, -50%);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg {width: 100%; height: 100%; transform: scale(0); transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg path {fill: #fff!important;}
.gallery .video-gallery-grid .video-gallery-item:hover .overlay .icon-wrp svg { transform: scale(1); transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item img {height: 100%; width: 100%; object-fit: cover; object-position: center; transform: scale(1.2);}

@media (max-width: 1024px) {
  .gallery .fresco-gallery {grid-template-columns: repeat(4, 1fr)!important;}
  .gallery .video-gallery-grid {grid-template-columns: repeat(2, 1fr)!important;}
  .gallery .filterrow {display: grid; grid-template-columns: 100%; gap: 25px;}
  .gallery .filterrow #filter {flex-wrap: wrap;}
}

@media (max-width: 550px) {
  .gallery .video-gallery-grid {grid-template-columns: 100%!important;}
  .gallery .fresco-gallery {grid-template-columns: repeat(2, 1fr)!important;}
  .gallery .fresco-gallery:not(.masonry) {gap: 30px;}
}

/* oEmbed */

.embed .respo-video{position: relative;overflow: hidden;aspect-ratio: 2/1;}
.embed .respo-video iframe {position: absolute; top: 0; left: 0; width: 100%;	height: 100%;}
.embed .respo-video ._brlbs-cb-youtube {margin-bottom: -56.25%;}

/* Accordion */

.accordion .item-accordion-head {cursor: pointer; position: relative; background: #f2f2f2; margin-bottom:10px; padding:10px 25px 10px 10px; border:1px solid #f2f2f2;}
.accordion .active .item-accordion-head {background-color:#f8f8f8}
.accordion .item-accordion-btn {width: 26px; height: 26px;float: right; margin: 0; cursor: pointer; position: absolute; right: 5px; top: 50%; transform: translateY(-50%);}
.accordion .item-accordion-btn:before {content: '-'; color: #555; position: absolute; width: 26px; height: 26px; text-align: center; line-height: 22px; font-size: 24px;}
.accordion .item-accordion {margin-bottom: 5px;}
.accordion .item-accordion.hidden .item-accordion-btn:before {content: '+'; line-height: 26px;}
.accordion .item-accordion.active .item-accordion-btn:before {content: '-'; line-height: 22px; }
.accordion .item-accordion.hidden.active .item-accordion-btn:before {content: '-'; line-height: 22px;}
.accordion .item-accordion.hidden .item-accordion-content {display: none;padding:20px 20px;background:#f8f8f8;margin-bottom:10px;}
.accordion .item-accordion.hidden .item-accordion-content:after {display:block;width: 0;height: 0;border-right: 100px solid #037CA9;border-top: 50px solid transparent;border-bottom: 50px solid transparent;}

/* ########## Blog + Sidebar ########## */

main.withsidebar .content .blog-grid {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 50px; grid-row-gap: 50px;}
main.withsidebar .content .blog-grid .post {width: 100%; background: #1b1b1b;}
main.withsidebar .content .blog-grid .post:nth-child(even) {}
main.withsidebar .content .blog-grid .post img {width: 100%; height: 100%; object-fit: cover;transition: var(--transition);}
main.withsidebar .content .blog-grid .post .post-content {padding: 20px; display: block;}
main.withsidebar .content .blog-grid .post .post-content p {margin-bottom: 10px;}
main.withsidebar .content .blog-grid .post .post-content h4 {margin-bottom: 8px;}
main.withsidebar .content .blog-grid .post .post-content span {color: var(--primary-color); text-transform: uppercase; font-weight: 600;}
main.withsidebar .content .blog-grid .post .img-wrp {width: 100%; height: 280px; position: relative;overflow: hidden;}
main.withsidebar .content .blog-grid .post .img-wrp:after {content:'';bottom:0;position: absolute;background-image: linear-gradient(to top, rgba(16, 16, 16), rgba(16, 16, 16,0.0)); display: block; height: 100%; width: 100%; transition: var(--transition);}
main.withsidebar .content .blog-grid .post .img-wrp .date {position: absolute; bottom: 15%;background-color: rgba(243,146, 4, 0.7);padding: 8px 12px 8px 20px;z-index: 6; line-height: 12px; font-size: 16px;}
main.withsidebar .content .blog-grid .post:hover :after {scale: 1.08; transition: var(--transition);}
main.withsidebar .content .blog-grid .post:hover img {scale: 1.08; transition: var(--transition);}

article.singlepost .section.image {margin-bottom: 30px;}
article.singlepost .post-image {}
article.singlepost .post-image img {width: 100%; height: auto; object-fit: cover;}

.single .text {margin-bottom: 25px;}
.single h4 {margin-bottom: 25px;}
.single .section.text a {color: var(--primary-color);text-decoration: underline;}


@media (max-width: 720px) {
    main.withsidebar .content .blog-grid {grid-template-columns: 1fr;}
}

/* Sidebar */
.sidebar .sidebar-content #secondary ul .current-cat {background: var(--primary-color);}
main.withsidebar .sidebar .sidebar-nav ul .current-menu-item {background: var(--primary-color); color: #fff;}
main.withsidebar .sidebar .sidebar-nav ul .current-menu-item a {color: #fff;}

main.withsidebar .sidebar .sidebar-nav ul li  {list-style-type: none; margin-left: 0;border: 2px solid orange;margin-bottom: 15px;padding: 7px 11px;text-transform: uppercase; transition: var(--transition);}
main.withsidebar .sidebar .sidebar-nav ul li:hover  {background: var(--primary-color); transition: var(--transition);}
main.withsidebar .sidebar .sidebar-nav ul li a {padding: 11px 0;}

main.withsidebar .sidebar {width: 100%; position: -webkit-sticky; position: sticky; top: 150px; padding: 25px; box-sizing: border-box;}
.sidebar .sidebar-content #secondary ul li {list-style-type: none; margin-left: 0;margin-bottom: 15px;}
.sidebar .sidebar-content #secondary ul li a {padding: 13px 19px;text-transform: uppercase; transition: var(--transition); display: block;border: 2px solid orange;}
.sidebar .sidebar-content #secondary ul li:hover  {background: var(--primary-color); transition: var(--transition);}
.sidebar .sidebar-content #secondary .widget-title {margin-bottom: 10px; font-size: 23px;}

@media (max-width: 1024px) {
    main.withsidebar .page-build .sidebar {display: none;}
}



/* ########## Footer ########## */

.footer-berg {margin-bottom: -7%;}
.footer-berg .wrp span {font-family: Orbitron, sans-serif; font-size: 80px; color: #fff; line-height: 80px;}
.footer-berg .wrp span strong {color: var(--primary-color);}
.footer-berg .wrp {display: grid;grid-template-columns: 1fr 2fr; align-items: center;}
.footer-berg .wrp .berg-blau {width: 100%;height: 100%}
.footer-berg .st0 {fill: var(--secundary-color);}

@media (max-width: 1400px){
    .footer-berg .wrp span {font-size: 50px; line-height: 50px;}
}

@media (max-width: 870px){
    .footer-berg .wrp span {font-size: 30px; line-height: 30px;}
}

@media (max-width: 520px){
    .footer-berg .wrp span {font-size: 19px; line-height: 19px;}
}

footer {background-color: var(--secundary-color); padding: 80px 0;position: relative;}
footer h3 {font-weight: 400;}
footer .wrp .footer-grid {display: grid;grid-template-columns: 200px auto; gap: 15%;}
footer .wrp .footer-content {display: flex; justify-content: end; gap: 50px;}
footer .wrp .footer-content .content-1 {display: flex; gap: 50px;}
footer .wrp .footer-content .content-2 {display: flex; gap: 50px;}
footer .wrp .footernav .bottom_nav {list-style-type: none;}
footer a {width: 150px; height: 150px;}
footer a img {width: 100%;}
footer a:hover {color: var(--primary-color);}
footer .footernav .bottom_nav li {margin-left: 0; text-decoration: none; text-transform: uppercase;}


@media (max-width: 1500px) {
    footer .footer-grid {gap: 5%!important;}
}

@media (max-width: 1290px) {
    footer .wrp .footer-content {justify-content: unset;}
    footer .wrp .footer-content .content-1 {display: unset;}
    footer .wrp .footer-content .content-2 {display: unset;}
    footer .wrp .footer-content .content-1 .landylounge {margin-bottom: 50px;}
    footer .wrp .footer-content .content-2 .kontakt {margin-bottom: 50px;}
}

@media (max-width: 775px) {
    footer .wrp .footer-grid {display: grid;grid-template-columns: 100%;}

}

@media (max-width: 513px) {
    footer .wrp .footer-content {display: unset;}
    footer .wrp .footer-content h3 {font-size: 22px; margin-bottom: 5px;}
    footer .wrp .footer-content .content-2 .footernav {margin-bottom: 50px;}
    footer .wrp .footer-content .content-1 .standort {margin-bottom: 50px;}

}


/* Bottom */

.bottom {background-color: var(--primary-color);}
.bottom .wrp {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}

/* 404 */

.error404 .stage {display: none;}
.pageerror {padding: 250px 0 100px 0; text-align: center;}

/* Autos */
.auto .wrp {display: grid; justify-content: space-between; align-items: center;}
.auto .bild {display: grid;grid-template-columns: 1fr 150px;grid-template-rows: 150px 150px 150px; gap: 20px;}
.auto .bild span {position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);z-index: 2; display: none;}
.auto .bild ul li {list-style-type: none; margin-left: unset;margin-bottom: 20px; display: none}
.auto .bild .mainbild {grid-row-start: 1;grid-row-end: 4; overflow: hidden;}
.auto .bild .mainbild img {width: 100%; height: 100%; object-fit: cover;}
.auto .bild ul li:nth-child(2) {display: block;}
.auto .bild ul li:nth-child(1) {display: block;}
.auto .bild ul li:nth-child(3) {position: relative; display: block;}
.auto .bild ul li:nth-child(3):after {content:'';background-color: rgba(0,0,0,0.6); position: absolute;top: 0;left:0;width: 100%;height: 100%;}
.auto .bild ul li:nth-child(3) span {display: block; padding: 50px; color: var(--primary-color); font-family: Orbitron, sans-serif; font-size: 50px;}
.auto .bild ul li img {width: 100%;height: 100%}
.auto .bild ul li a {position: relative;display: block;}

.auto .attributes {display: flex; gap: 5%; margin-bottom: 25px;}
.auto .attributes .attributes-content p {margin-bottom: 0;}
.auto .attributes .attributes-content span {font-family: Orbitron, sans-serif; font-size: 21px;}
.auto .attributes .attributes-item {display:  grid; grid-template-columns: 40px auto; gap: 20px; align-items: center;}

.auto .attributes .icon-wrp {width: 40px; height: 40px;}
.auto .attributes .icon-wrp svg {width: 100%; height: 100%;}
.auto .attributes .icon-wrp svg path {stroke: var(--primary-color);}

.auto.erstbild.mb.extended .bild.erstbild {width: 118%; margin-left: -18%;}
.auto.ersttext.mb.extended .bild.ersttext {width: 118%; grid-template-columns: 150px 1fr;}
.auto.ersttext.mb.extended .bild.ersttext .mainbild {grid-column-start: 2; grid-row-end: 4;}

@media (max-width: 1800px) {
    .auto.erstbild.mb.extended .bild.erstbild {width: 100%;margin-left: unset;}
    .auto.ersttext.mb.extended .bild.ersttext {width: 100%;}
}

@media (max-width: 1500px) {
    .auto .bild {grid-template-columns: 1fr 1fr 1fr!important; gap: 20px;}
    .auto.ersttext .bild {grid-template-columns: 1fr 1fr 1fr!important; gap: 20px;}
    .auto .bild .mainbild {grid-column-start: 1!important;grid-column-end: 4!important; overflow: hidden;}
    .auto .bild ul {display: contents;}
    .auto .attributes .attributes-item .attributes-content {text-align: center;}
    .auto .attributes .attributes-item .icon-wrp {justify-self: center;}
    .auto .attributes .attributes-item {grid-template-columns: auto; gap: 15px;}

}
@media (max-width: 920px) {
    .auto .wrp {grid-template-columns: auto!important;}
    .auto.erstbild .text.erstbild {order: 1!important;}
    .auto .attributes .attributes-content span {font-size: 19px;}
}