/*
Theme Name: Verhufen
Theme URI: http://www.et-verhufen.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{overflow: unset!important;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; ++ ########## */


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

* {
    --font-family: "effra-cc", sans-serif;
    --transition: .45s ease;
    --wrp-width: 1240px;
    --font-size: 18px;
    --line-height: calc(var(--font-size) * 1.7);
    --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    --border-radius: 15px;
    --primary-color: #FBBA00;
    --secundary-color: #00415B;
    --text-color: #00415B;
}

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

html {scroll-behavior: smooth;}
body {font-size: var(--font-size); font-family: var(--font-family); line-height: var(--line-height); color: var(--text-color);}
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;}

/* Margins */

.mb {margin-bottom: 130px;}
.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 */

.home.page h1{margin:0 0 30px 0;font-size:45px;line-height:55px;text-transform: uppercase;font-weight:600;color:var(--secundary-color)}
.home.page h1 strong {font-weight:600;color:var(--primary-color)}
.page h1{margin:0;font-size:45px;line-height:55px;text-transform: uppercase;font-weight:500;}
h2{margin:0;}
h3{margin:0;}

.text h2{margin:0 0 30px 0;font-size:40px;line-height:50px;text-transform: uppercase;font-weight:600;color:var(--secundary-color)}
.text h2 strong {font-weight:600;color:var(--primary-color)}

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

.btn {padding: 12px 16px; background: var(--primary-color); display: inline-block;}

p {margin-bottom: var(--line-height);}
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 ########## */

#mainnav-desk {display: block; transform: translate(0);margin-right:80px;}
#mainnav-desk ul.mainnav.desktop li {list-style-type: none; font-size: 20px;font-weight:600;margin-left:40px;}
#mainnav-desk ul.mainnav.desktop li:first-child {margin-left:0;}
#mainnav-desk ul.mainnav.desktop li a{display:block; color: var(--secundary-color);transition: var(--transition);text-transform:uppercase}
#mainnav-desk ul.mainnav.desktop li a.highlight {color: var(--primary-color); transition: var(--transition);}

/* Submenu */

#mainnav-desk ul.mainnav.desktop {display: flex; align-items: center; margin: 0;}

#mainnav-desk ul.mainnav li.menu-item-has-children {position: relative;}
#mainnav-desk 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;}
#mainnav-desk ul.mainnav li.menu-item-has-children ul.sub-menu li {width:200px; height: 100%; padding: 8px 0 8px 7px; transition: 0.8s ease; background: #f5f5f5; margin: 0;}
#mainnav-desk ul.mainnav li.menu-item-has-children:hover > ul.sub-menu {max-height: 674px; padding: 0; overflow: visible; margin-top: -6px;}

#mainnav-desk ul.mainnav li.menu-item-has-children ul.sub-menu li:hover {background: var(--primary-color);}
#mainnav-desk ul.mainnav li.menu-item-has-children ul.sub-menu li:hover a {color: #fff;}
#mainnav-desk ul.mainnav li.menu-item-has-children ul.sub-menu li a {padding: 3px;}
#mainnav-desk 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;}




/* Offcanvas */

#mainnav ul.mainnav.smart {display:block;}
#mainnav {position: fixed; top: 0; right: 0; bottom: 0; background: rgba(251,186,0, 0.9); width: 100%; max-width: 1240px; border-bottom-left-radius:20px;border-top-left-radius:20px;transform: translateX(100%); transition: var(--transition); box-shadow: var(--box-shadow); z-index: 2;}
#mainnav.active {transform: translateX(0); transition: var(--transition);}
#mainnav .head {display: grid;grid-template-columns: auto auto 55px; align-items: center; padding: 20px; box-sizing: border-box; box-shadow:0;}
#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-radius: 2px;background:var(--primary-color);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: 25px; height: 25px;}
#mainnav .head .buttons a svg g path {stroke: #fdfdfd;}

/* Submenu */

#mainnav ul.mainnav.smart {display: block;}
#mainnav ul.mainnav li {padding: 0; box-sizing: border-box; margin: 0 0 5px 0;list-style-type: none;}
#mainnav ul.mainnav li a {font-size: 24px; font-weight:700;color:#fff;padding: 10px 45px 10px 5%;display: block; transition: var(--transition);}
#mainnav ul.mainnav li a:hover {color:var(--secundary-color); transition: var(--transition);}
#mainnav ul.mainnav li.current_page_item a{color:var(--text-color); transition: var(--transition);}

#mainnav .opensubnav {cursor: pointer; width: 49px; height: 49px; position: absolute; right: 0; background: #fff; display: block; z-index: 100; box-sizing: border-box;}
#mainnav .opensubnav.active {background: var(--secundary-color);}
#mainnav .opensubnav:after  {content: ''; transform: rotate(-45deg) translate(-50%, -50%); border: solid var(--secundary-color); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; left: 50%; top:42%; 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; left: 19px; top:18px; transition: var(--transition);}

#mainnav address.contact {padding: 5%; box-sizing: border-box; display: block;}
#mainnav address.contact h4 {font-size:35px;line-height:45px;font-weight:bold;margin:0 0 20px 0;color:#fff;text-transform: uppercase;}
#mainnav address.contact p {color:#fff;font-size:18px;}
#mainnav address.contact a {display:inline-block;padding:7px 50px;border-radius:10px;background:#fdfdfd;box-sizing: border-box;color:var(--primary-color);font-size:18px;font-weight:700;text-align:center;transition: var(--transition);}
#mainnav address.contact a:hover {color:var(--secundary-color); transition: var(--transition);}

/* Offcanvas Sub Layer 1 */

#mainnav li.menu-item-has-children ul.sub-menu {display: none; transition: var(--transition); margin-bottom: 0;}
#mainnav li.menu-item-has-children.active ul.sub-menu {display: block;}
#mainnav li.menu-item-has-children.active ul.sub-menu li a {background: #fff; padding-left: 10%;}
#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 {background: #f5f5f5;}
#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: 50px;height: 50px;background: var(--primary-color);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: 40px;height: 40px;background: none;box-shadow: none; 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: 30px;cursor: pointer;}
.mainnav-toggle .btn-mainnav-toggle span {display: block;width: 100%;box-shadow: 0 2px 10px 0 rgba(0,0,0,0);border-radius: 4px;height: 2px;background:var(--primary-color);transition: all .3s;position: relative;}
.mainnav-toggle .btn-mainnav-toggle span + span {margin-top: 7px;width:90%}
.mainnav-toggle .btn-mainnav-toggle span + span + span {width:80%}
.mainnav-toggle .btn-mainnav-toggle.active span + span {margin-top: 13px;}
.mainnav-toggle .btn-mainnav-toggle.active span:nth-child(1) {background:#fff;width:100%;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) {background:#fff;width:100%;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) {background:#fff;width:100%;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: 20px 0; box-sizing: border-box; background: #fff; box-shadow: var(--box-shadow);transition: var(--transition);}
.scrolled header {padding: 10px 0;transition: var(--transition);}
header .header-grid {display: grid; grid-template-columns: 350px auto; grid-template-rows: auto; justify-items: start; align-items: center; justify-content: space-between;transition: var(--transition);}
.scrolled header .header-grid {display: grid; grid-template-columns: 180px auto;transition: var(--transition);}
header .header-grid .logo {width: 100%;}
header .header-grid .logo a {display: flex; align-items: center;}
header .header-grid .mainnav-toggle {display: none;justify-self: end;}

/* Kopfbereich Startseite / Unterseite  */
.stage.mb {margin-bottom:50px}
.stage {aspect-ratio: 3/1; width: 100%;position: relative; margin-top: 55px;}
.stage .wrp {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}
.stage img {width: 100%; height: 100%; object-fit: cover; object-position: center;clip-path: polygon(50% 100%, 100% 85%, 100% 0, 0 0, 0 85%);}
.stage .stage-content h2{font-size:55px;line-height:60px;text-transform: uppercase;color:var(--primary-color);text-align:center;font-weight:600;text-shadow: rgba(0,0,0, 0.75) 0 2px 10px;}
.stage .wrp .stage-content .buttons {margin:75px auto 0 auto;text-align:center;}
.stage .wrp .stage-content .buttons a {font-size: 18px;font-weight: 600;text-transform:uppercase;color: #fff;padding: 15px 40px;box-sizing: border-box;background: var(--primary-color);display: inline-block;border-radius: 50px;filter: drop-shadow(0 2px 10px rgba(0,0,0, 0.75));transition: var(--transition);}
.stage .wrp .stage-content .buttons a:hover {background: var(--secundary-color);transition: var(--transition);}
.stage .wrp .stage-content .buttons a.tel {background: var(--secundary-color);transition: var(--transition);margin-right:20px;}
.stage .wrp .stage-content .buttons a.tel:hover {background: var(--primary-color);transition: var(--transition);}
.stage.subpage {aspect-ratio: 3/.7; width: 100%; position: relative;}

/* ########## 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 .wrp {display: grid; align-items: center; justify-content: space-between; box-sizing: border-box; background: #fff;}
.textbild .text {border-radius: 5px 0 0 5px; box-sizing: border-box;}
.textbild .bild {width: 100%; height: 100%;}
.textbild .bild img {width: 100%; height: 100%; object-fit: cover;}

@media (max-width: 768px) {
    .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-column-gap: 50px; 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 .img-wrp {width: 100%; aspect-ratio: 2/1.5; display: block;}
.teasercard-item .img-wrp img {width: 100%; height: 100%; object-fit: cover;}

.teasercard-item .teasercard-content {display: block;}
.teasercard-item .teasercard-content .btn {display: inline-block;}

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

@media (max-width: 1024px) {
    .teasercards .cards.no-carousel {grid-template-columns: repeat(2, 1fr)!important;}
}

@media (max-width: 500px) {
    .teasercards .cards.no-carousel {grid-template-columns: 100% !important;}
}

/* Image */

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

.bildtrenner {width:100%; height:auto;position: relative;background:var(--secundary-color) url(assets/wasserzeichen.svg) right bottom -160px no-repeat;background-size:50%;padding:80px 0}
.bildtrenner img {width:100%; height: 100%; object-fit: cover; object-position: center;}
.bildtrenner .wrp {display:grid;grid-template-columns: 40% auto;align-items: center;}
.bildtrenner .wrp .stage-content p{font-size:50px;line-height:58px;font-weight:600;color:#fff;text-transform:uppercase;}
.bildtrenner .wrp .buttons {justify-self: end;}
.bildtrenner .wrp .buttons a{font-size:24px;font-weight:600;color:#fff;border:1px solid  var(--primary-color);padding: 15px 40px;box-sizing:border-box;background: var(--primary-color);display: inline-block;border-radius:50px;transition: var(--transition);}
.bildtrenner .wrp .buttons a:hover{color:var(--primary-color);border:1px solid #fff;background: var(--secundary-color);transition: var(--transition);}
.bildtrenner .wrp .buttons a.tel {margin-right:50px;}

/* Galerie */

.gallery .fresco-gallery:not(.masonry) {display: grid; gap: 50px; margin-bottom: 0;}
.gallery .fresco-gallery li {list-style-type: none; margin: 0 0 25px 0; border-radius: 5px;overflow: hidden;}
.gallery .fresco-gallery:not(.masonry) li {margin: 0 0 50px 0;}
.gallery .fresco-gallery li a {position: relative; display: block; overflow: hidden;}
.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%;}
.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;}
}

/* oEmbed */

.embed .respo-video{position: relative;height: 0;overflow: hidden;}
.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:20px 25px 20px 20px; border:1px solid #f2f2f2;font-size:20px;font-weight:600;}
.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(3, 1fr); grid-column-gap: 50px; grid-row-gap: 50px;}
main.withsidebar .content .blog-grid .post {width: 100%;}
main.withsidebar .content .blog-grid .post img {width: 100%; height: auto; object-fit: cover;}

article.singlepost .post-image {}
article.singlepost .post-image img {width: 100%; height: auto; object-fit: cover;}

/* Sidebar */

main.withsidebar .sidebar {width: 100%; position: -webkit-sticky; position: sticky; top: 150px; background: #f5f5f5; padding: 25px; box-sizing: border-box;}

.boxen .wrp {display:grid;grid-template-columns: 1fr 1fr 1fr;gap:25px;}
.boxen .wrp .box {position:relative;background:#f2f2f2;border:1px solid var(--primary-color);padding:40px;box-sizing: border-box;}
.boxen .wrp .box:after {content:"";position:absolute;left:0;top:0;width:100%;height:100%;border:10px solid #fff;box-sizing: border-box;}

.boxen .wrp .box h3{font-size:22px;line-height:28px;font-weight:600;text-transform: uppercase;margin:0 0 20px 0}

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

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

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

footer {background:var(--secundary-color) url(assets/wasserzeichen.svg) right bottom -160px no-repeat;background-size:50%;color:#fff;padding:80px 0;}
footer .wrp {display:grid;grid-template-columns: 45% auto;align-items: center;}
footer address{font-size:16px;font-weight:400;color:#fff;}
footer h4 {
    font-size: 50px;
    line-height: 58px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    margin:0;
}
footer .buttons {justify-self: end;}
footer .buttons a{font-size:24px;font-weight:600;color:#fff;border:1px solid  var(--primary-color);padding: 15px 40px;box-sizing:border-box;background: var(--primary-color);display: inline-block;border-radius:50px;transition: var(--transition);}
footer .buttons a:hover {color:var(--primary-color);border:1px solid #fff;background: var(--secundary-color);transition: var(--transition);}
footer .buttons a.tel {margin-right:50px;}

/* Bottom */

.bottom .wrp {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;margin:10px auto 20px auto}
.bottom .wrp ul.bottom_nav {list-style-type: none;margin:0;}
.bottom .wrp ul li{display:inline-block;margin:0;padding:0;font-size:16px;font-weight:400;}
.bottom .wrp ul li:nth-child(1):after{content:" - ";display:inline-block;margin-left:4px;}
.bottom .wrp .copyright{margin:0;padding:0;font-size:16px;font-weight:400;}
.bottom .wrp .copyright a{font-size:16px;font-weight:400;}
.bottom .wrp a {color:var(--secundary-color);transition: var(--transition);}
.bottom .wrp a:hover {color:var(--primary-color);transition: var(--transition);}

/* 404 */

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

/* Formular */

div.wpforms-container-full.custom .wpforms-form .wpforms-submit-spinner {display:none;}
div.wpforms-container-full.custom .wpforms-form input[type=text],div.wpforms-container-full.custom .wpforms-form input[type=email] ,
div.wpforms-container-full.custom .wpforms-form input[type=tel]{border:1px solid #D9D8D8;padding:20px;height:auto;color:var(--secundary-color)}
div.wpforms-container-full.custom .wpforms-form button[type=submit]{text-transform:uppercase;font-size:20px;font-weight:600;color:#fff;padding: 15px 70px;margin-top:40px;border:0;box-sizing:border-box;background: var(--primary-color);display: inline-block;border-radius:50px;transition: var(--transition);}
div.wpforms-container-full.custom .wpforms-form button[type=submit]:hover{background:var(--secundary-color);border:0;transition: var(--transition);}
::placeholder {color:var(--secundary-color);text-transform:uppercase;opacity:0.5}

/* Wir */

.company.mb{margin-bottom:40px}
.company .company-content {display:grid;grid-template-columns: 1fr 1fr 1fr;gap:25px;}
.company .company-content .text h2{font-size:30px;line-height:35px;font-weight:600;margin:0 0 20px 0}
.company .company-content .bild img {width: 100%;height: 100%;object-fit: cover;}

@media (max-width: 1520px) {
    .bildtrenner {background: var(--secundary-color) url(assets/wasserzeichen.svg) right center no-repeat;background-size: cover;}
    footer {background: var(--secundary-color) url(assets/wasserzeichen.svg) right center no-repeat;background-size: cover;}
    .stage {aspect-ratio: 3 / 1.25;}
    .stage .wrp {top: 53%;}
}
@media (max-width: 1240px) {
    .bildtrenner .wrp .stage-content p {font-size: 40px;line-height: 48px;}
    .bildtrenner .wrp .buttons a {font-size:22px;}
    footer h4 {font-size: 40px;line-height: 48px;}
    footer .buttons a{font-size:20px;}
    footer address {font-size: 14px;}
    footer .buttons a.tel {
        margin-right: 20px;
    }
    .bildtrenner .wrp .buttons a.tel {
        margin-right: 20px;
    }
}
@media (max-width: 1120px) {
    .stage {aspect-ratio: 3 / 1.4;}
    .stage .stage-content h2 {font-size: 50px;line-height: 55px;}
    .stage .wrp .stage-content .buttons {margin: 40px auto 0 auto;}
    .bildtrenner, footer {padding: 40px 0;}
    .bildtrenner .wrp {display: grid;grid-template-columns: 100%;align-items: start;text-align: center;}
    .bildtrenner .wrp .buttons {justify-self: center;margin-top:40px;}
    .bildtrenner .wrp .stage-content p {font-size: 42px;line-height: 50px;}
    .boxen .wrp {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
    .company .company-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
    .company .company-content .bild {display:none;}
    .company .company-content .bild.smart {display:block;}
    .text h2 {
        margin: 0 0 20px 0;
        font-size: 30px;
        line-height: 35px;
    }
    div.wpforms-container-full.custom .wpforms-form button[type=submit] {font-size: 18px;padding: 13px 70px;}
    footer .wrp{display: grid;grid-template-columns: 100%;align-items: start;text-align: center;}
    footer .buttons {justify-self: center;margin-top:40px;}
    footer h4 {font-size: 42px;line-height: 50px;}
}
@media (max-width: 980px) {
    #mainnav-desk {display:none;}
}
@media (max-width: 900px) {
    .stage .stage-content h2,.home.page h1,.bildtrenner .wrp .stage-content p,footer h4 {font-size: 40px;line-height: 45px;}
    .mb {margin-bottom: 100px;}
    .bottom .wrp {display:block;text-align:center}
    .boxen .wrp {display: grid;grid-template-columns: 48% 48%;gap: 25px;}

}
@media (max-width: 780px) {
    header .header-grid {display: grid;grid-template-columns: 300px auto;}
    .stage {aspect-ratio: 3 / 1.7;}
}
@media (max-width: 768px) {
    header .header-grid {
        display: grid;
        grid-template-columns: 250px auto;
    }
}
@media (max-width: 670px) {
    .bildtrenner .wrp .buttons a,footer .buttons a {font-size: 20px;padding: 15px 25px;}
    .bildtrenner, footer {padding: 60px 0;}
    .bildtrenner, footer {background-size: 170%;}
    .boxen .wrp {display: grid;grid-template-columns: 100%;gap: 25px;}
    .company .company-content {display: grid;grid-template-columns: 100%;gap: 25px;}
}
@media (max-width: 640px) {
    .stage .stage-content h2, .home.page h1, .bildtrenner .wrp .stage-content p, footer h4 {
        font-size: 35px;
        line-height: 42px;
    }
}
@media (max-width: 570px) {
    .stage {aspect-ratio: 3 / 1.3;}
    .stage .stage-content h2 {display:none;}
    .bildtrenner .wrp .buttons a,footer .buttons a {display:block;}
    .bildtrenner .wrp .buttons a.tel,footer .buttons a.tel {margin-right:0;margin-bottom:20px;}
}
@media (max-width: 450px) {
    .stage {
        aspect-ratio: 3 / 1.8;
    }
    .stage .wrp {
        top: 50%;
    }
}
@media (max-width:400px) {
    header .header-grid {
        display: grid;
        grid-template-columns: 200px auto;
    }
}