/*
Theme Name: Easyegg
Theme URI: http://www.easyegg.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";

/*WICHTIG BackgroundImages webp - background-image: url('<?php $img = get_sub_field('img'); echo $img['sizes']['1280width']; ?>.webp');*/

/*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;}
a{outline:none !important;text-decoration:none;}
img{-ms-interpolation-mode:bicubic; vertical-align: bottom;}

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

* {
  --font-family: "ff-tisa-sans-web-pro", sans-serif;
  --font-light: 100;
  --font-regular: 400;
  --font-bold: 700;
  --transition: .3s ease-in-out;
  --font-size: 16px;
  --line-height: 26px;
  --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
  --border-radius: 20px;
  --text-color: #4b4b4b;
  --akzent-color: #96be1e;
  --vollei: #f39200;
  --eiweiß: #4996d1;
  --eigelb: #fbba23;
  --ruehrei: #afcb08;
}

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

html {background: #f5f5f5;}
body {font-family: var(--font-family); font-weight: var(--font-regular); font-size: var(--font-size); color: var(--text-color); font-style: normal; max-width: 1920px; width: 100%; margin: 0 auto; background: #fff;}
body.overflow {overflow: hidden!important;}
.wrp {max-width:1400px; width: 90%; margin: 0 auto; position:relative; box-sizing:border-box;}
.small-wrp {max-width:1050px; width: 90%; margin: 0 auto; position:relative; box-sizing:border-box;}

hr{border:none;height:1px;background:#ddd; margin:0;}

.cf {zoom:1;}
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}

/* Typo Styles */

h1{font-size: 50px; font-weight: var(--font-bold); color: #fff; }
h2{font-size: 45px; font-weight: var(--font-bold); color: var(--text-color); line-height: 55px; margin-bottom: 25px;}
h3{font-size: 30px; font-weight: var(--font-bold); color: #fff; line-height: 55px;}

.content h2 {font-size: 30px;}

a {text-decoration: none; color: var(--text-color);}
a:hover{}
p {font-size: var(--font-size); color: var(--text-color); margin-bottom: var(--line-height); word-break: break-word;}
address {font-style: normal; color: var(--text-color);}
address a {display: block;}
ol, ul {margin-bottom: var(--line-height);}
li {margin-left: 20px;}

@media (max-width: 766px) {
  h1{font-size: 35px;}
  h2{font-size: 35px!important; line-height: 40px!important;}
  h2 span {font-size: 16px!important; line-height: 30px!important;}
  h3{font-size: 25px; line-height: 35px;}
}

/* Btn */

.btn {display: inline-block;}
.btn a {color: #fff; display: flex; align-items: center; background: var(--akzent-color); font-weight: bold; padding: 10px 25px 10px 15px; font-size: 14px; border-radius: 20px; box-sizing: border-box; box-shadow: 0px 5px 25px -8px rgba(0,0,0,0.6);}
.btn a svg {width: 16px; height: 16px; margin-left: 15px; animation: 2s arrow infinite;}
.btn a svg g path {stroke: #fff;}

@keyframes arrow {
  0% {transform: translateX(0);}
  50% {transform: translateX(5px);}
  100% {transform: translateX(0);}
}

.btn.outline a {color: var(--text-color); background: transparent; backdrop-filter: blur(20px); border: 4px solid var(--akzent-color); padding: 6px 21px 6px 11px; border-radius: 20px; box-sizing: border-box;}
.btn.outline a svg g path {stroke: var(--text-color);}

/* Margins */

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

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

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

header {position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1920px; transition: all .45s ease-in-out; z-index: 10; padding: 0; box-sizing: border-box;}
header:before {content: ''; position: absolute; width: 150px; height: 100px; background: url("assets/icons/deutschland-eier.svg") right no-repeat; top: 50%; transform: translateY(-50%); right: 0; background-size: contain;}
header .header-grid {display: grid; grid-template-columns: 200px auto; grid-template-rows: auto; justify-items: start; align-items: center; justify-content: space-between;}
header .header-grid .logowrp {width: 85px; display: inline-block;}
header .header-grid .logowrp svg#easyegg-logo {width: 100%;}
header .header-grid svg#easyegg-logo #bildmarke-egg {fill: #fff; transition: all .45s ease-in-out;}
header .header-grid svg#easyegg-logo #wortmarke path {fill: #fff; transition: all .45s ease-in-out;}
header .header-grid .mainnav-toggle {display: none;}

header:hover,
html.scrolled header {padding: 0; transition: all .45s ease-in-out; background: #fff; box-shadow: 0px 5px 25px -8px rgba(0,0,0,0.6);}
header:hover .header-grid svg#easyegg-logo #bildmarke-egg,
html.scrolled header .header-grid svg#easyegg-logo #bildmarke-egg {fill: #4b4b4b; transition: all .45s ease-in-out;}
header:hover .header-grid svg#easyegg-logo #wortmarke path,
html.scrolled header .header-grid svg#easyegg-logo #wortmarke path {fill: #4b4b4b; transition: all .45s ease-in-out;}

@media (max-width: 1666px) {
  header:before {top: 150%;}
}

@media (max-width: 1024px) {
  header .header-grid {display: block; padding: 20px 0; transition: var(--transition);}
  html.scrolled header .header-grid {padding: 10px 0; transition: var(--transition);}
}

@media (max-width: 766px) {
  header:before {top: 100px; position: fixed; width: 90px; height: 50px;}
}

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

#mainnav {display: block; transform: translate(0);}
#mainnav ul.mainnav {display: flex; align-items: center; margin: 0;}
#mainnav ul.mainnav li {list-style-type: none; font-size: 16px; margin-left: 40px;}
#mainnav ul.mainnav li:first-child {margin-left:0;}
#mainnav ul.mainnav li a{display:block; color: #fff; transition: all .45s ease-in-out; padding: 30px 0;}
#mainnav ul.mainnav li a:hover, #mainnav ul.cf > li.current-menu-item > a{color: var(--akzent-color); transition: var(--transition);}

#mainnav ul.mainnav li.nav-contact {margin: 0 0 0 10px;}
#mainnav ul.mainnav li.nav-contact.first {margin: 0 0 0 40px;}
#mainnav ul.mainnav li.nav-contact a {width: 35px; height: 35px; border-radius: 40px; padding: 0; background: var(--akzent-color); position: relative; display: block;}
#mainnav ul.mainnav li.nav-contact a .svg-wrp {width: 15px; height: 15px; position: absolute; top: 40%; left: 48%; transform: translate(-50%, -50%);}
#mainnav ul.mainnav li.nav-contact a svg {width: 100%; height: 100%;}
#mainnav ul.mainnav li.nav-contact a svg g path {stroke: #fff;}

#mainnav ul.mainnav li.search {margin-left: 40px; width: 18px; height: 18px;}
#mainnav ul.mainnav li.search span svg {width: 100%; height: 100%;}
#mainnav ul.mainnav li.search svg g path {stroke: #fff; transition: var(--transition);}


html.scrolled #mainnav ul.mainnav li a {color: var(--text-color); transition: all .45s ease-in-out;}
header:hover #mainnav ul.mainnav li.search svg path,
html.scrolled #mainnav ul.mainnav li.search svg path {stroke: var(--text-color)!important; transition: var(--transition);}

header:hover #mainnav ul.mainnav li a {color: var(--text-color); transition: var(--transition);}

#mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.easyegg a,
#mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.regionale-eier a,
#mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.bunt a {padding: 15px 0 15px 50px; color: var(--akzent-color); font-weight: 700; position: relative; background: #fff;}

#mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.easyegg a:after {position: absolute; content: ''; width: 25px; height: 25px; left: 10px; top: 50%; transform: translateY(-50%); background: url("assets/icons/easyegg-logo.svg") no-repeat center; background-size: contain;}
#mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.regionale-eier a:after {position: absolute; content: ''; width: 25px; height: 25px; left: 10px; top: 50%; transform: translateY(-50%); background: url("assets/icons/bauer-leonard-logo.svg") no-repeat center; background-size: contain;}
#mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.bunt a:after {position: absolute; content: ''; width: 25px; height: 25px; left: 10px; top: 50%; transform: translateY(-50%); background: url("assets/icons/moos-butzen-logo.svg") no-repeat center; background-size: contain;}

/* Submenu */

@media (min-width: 1025px){
    #mainnav ul.mainnav li.menu-item-has-children {position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {position: absolute; top: 86px; left: 0; height: auto; max-height: 0; overflow: hidden;transform: translateX(-10px);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {width:220px; height: 100%; transition: 0.8s ease; background: #f5f5f5; margin: 0;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {padding: 7px 10px; color: var(--text-color); transition: var(--transition);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a:hover {background: #fff; color: var(--akzent-color); transition: var(--transition);}
    #mainnav ul.mainnav li.menu-item-has-children:hover > ul.sub-menu {max-height: 674px; padding: 0; overflow: visible; background: #f5f5f5;}

    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li {width:480px; height: 100%; transition: 0.8s ease; margin: 0;}
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.w50 {float: left; width: 50%;}

    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.easyegg {position: relative; display: inline-block;}
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.regionale-eier {position: relative; display: inline-block;}
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.bunt {position: relative; display: inline-block;}

    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li ul.sub-menu {display: grid; top: 0!important; left: 0!important; transform: translateX(0px); position: relative; grid-template-columns: repeat(2, 1fr); max-height: 674px; padding: 0; overflow: visible; margin-bottom: 0;}
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li ul.sub-menu li {width: 240px; box-sizing: border-box; padding: 0;}
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li ul.sub-menu li a {color: var(--text-color); background: #f5f5f5; padding: 5px 10px; background-image: none; font-weight: 400; transition: var(--transition); border-bottom: 1px solid #fff;}
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li ul.sub-menu li a:nth-child(odd) {border-right: 1px solid #fff;}
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li ul.sub-menu li a:hover {background: #fff; color: var(--akzent-color); transition: var(--transition);}
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li ul.sub-menu li a:after {display: none;}

  /* Desktop ausblenden */

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

@media (max-width: 1024px) {

  /* Offcanvas */

    #mainnav {position: fixed; overflow: scroll; top: 0; right: 0; bottom: 0; background: #fff; height: 100vh; width: 100%; max-width: 500px; transform: translateX(100%); transition: var(--transition); box-shadow: var(--box-shadow);}
    #mainnav.active {transform: translateX(0); transition: var(--transition);}
    #mainnav.active .head {display: grid; height: 80px; grid-template-columns: auto auto 55px; align-items: center; padding: 0 20px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
    #mainnav.active .head p {margin: 0; font-size: 25px; color: var(--text-color);}
    #mainnav.active .head .buttons {display: flex; justify-content: flex-end;}

    #mainnav .head .buttons a {width: 50px; height: 50px; border-radius: 2px; background: #f5f5f5; 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,
    #mainnav .head .buttons a svg path {stroke: #a4a4a4!important;}

    #mainnav ul.mainnav {display: block;}
    #mainnav ul.mainnav li,
    #mainnav ul.infonav li {padding: 0 5%; box-sizing: border-box; margin: 0; background: #efefef; border-bottom: 1px solid #dedede; position: relative; list-style-type: none;}
    #mainnav ul.mainnav .search {display: none;}

    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.easyegg,
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.regionale-eier,
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.bunt {background: #fff; padding: 0 3%;}

    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.easyegg a:before,
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.regionale-eier a:before,
    #mainnav ul.mainnav li.menu-item-has-children.megamenu ul.sub-menu li.bunt a:before {display: none;}

    #mainnav ul.mainnav li.nav-contact {display: none;}
    #mainnav ul.mainnav li a,
    #mainnav ul.infonav li a {font-size: var(--font-size); color: var(--text-color); padding: 15px 0; display: block;}
    #mainnav address.contact {padding: 5%; box-sizing: border-box; display: block;}
    #mainnav address.contact .logowrp {display: block;}
    #mainnav address.contact svg {display: block; margin-bottom: 25px;}
    #mainnav address.contact svg #bildmarke-egg {fill: var(--text-color);}
    #mainnav address.contact svg #wortmarke path {fill: var(--text-color);}

    /* Submenu */

    #mainnav ul.mainnav .opensubnav {cursor: pointer; width: 44px; height: 44px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: #fff; display: block; z-index: 100; box-sizing: border-box;}
    #mainnav ul.mainnav .opensubnav.active {background: var(--akzent-color);}
    #mainnav ul.mainnav .opensubnav:after  {content: ''; transform: rotate(-45deg) translate(-50%, -50%); border: solid var(--akzent-color); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; left: 50%; top:42%; position: absolute; transition: var(--transition);}
    #mainnav ul.mainnav .opensubnav.active:after  {content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg);  border: solid #fff; border-width: 0 2px 2px 0;  left: 22px; top:18px;  transition: var(--transition);}

  /* Offcanvas Sub Layer 1 */

    #mainnav ul.mainnav li.back {display: block; background: #cdcdcd; position: relative; z-index: 5;}
    #mainnav ul.mainnav li.back a {padding: 10px 0; font-weight: 700;}
    #mainnav ul.mainnav > li.menu-item-has-children > a {position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {position: fixed; top: 80px; height: 100%; right: 0; width: 500px; max-width: 100%; z-index: 101; background: #fff; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform .3s ease-in-out, box-shadow .3s ease-in-out;transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;overflow-y: scroll;-webkit-overflow-scrolling: touch;}
    #mainnav ul.mainnav li.menu-item-has-children.active ul.sub-menu {-webkit-transform:none; transform:none; pointer-events:auto; transition: transform .3s ease-in-out;}

    /* Mainnav Toggle */

    .mainnav-toggle {border-radius: 2px; display: block!important; position: absolute; z-index: 10; top: 50%; right: 0;transition: var(--transition); transform: translateY(-50%);width: 50px;height: 50px;background: var(--akzent-color);box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);}
    .mainnav-toggle.active {top: 44%; right: -3%; transition: var(--transition);}
    .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%;box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);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);} }
}

@media (max-width: 500px) {
  #mainnav.active .head p {font-size: 18px; font-weight: 700;}
}

/* Suche */

.search-form {position: fixed; opacity: 0; transition: var(--transition); display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1920px; top: 0; right: 0; bottom: 0; left: 50%; transform: translateX(-50%); backdrop-filter: blur(5px); background: rgba(150,190,30,0.9);}
.search-form .suchen {width: 90%; max-width: 650px; margin: 0;}
.search-form .suchen #search-form {position: relative; z-index: 5000;}
.search-form .suchen #search-form input#s {height: 80px; -webkit-appearance: none; line-height: 80px; width: 100%; font-size: 25px; color: #fff; text-align: center; background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,0.2); outline: none; transition: var(--transition);}
.search-form .suchen #search-form input#s:focus {border-bottom: 2px solid #fff; transition: var(--transition);}
.search-form .suchen #search-form input#searchsubmit {position: absolute; top: 50%; transform: translateY(-50%); right: 6%; border: none; background-image: url("assets/icons/search.svg"); background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 30px; font-size: 0; width: 50px; height: 50px;}
.search-form .suchen #search-form input#s::placeholder {font-size: 25px; color: #fff;}

.search-form.active {opacity: 1; z-index: 10; transition: var(--transition);}

.close-search {position: absolute;top: 200px;right: calc((100% - 1420px)/2); display: flex; align-items: center; color: #fff; font-weight: 700;}
.close-search:hover {cursor: pointer;}
.close-search:hover > svg {transform: rotate(180deg); transition: var(--transition);}
.close-search svg {margin-left: 20px; transition: var(--transition);}
.close-search svg g path {stroke: #fff;}

.search-grid {display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; margin-bottom: 100px;}
.search-grid .produktubersicht-item img {object-fit: cover;}

@media (max-width: 1580px) {
  .close-search {right: 5%;}
}

@media (max-width: 1024px) {
  .close-search {right: 5%; top: 110px}
}

@media (max-width: 1160px) {
  .search-grid {grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 800px) {
  .search-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 530px) {
  .search-grid {grid-template-columns: repeat(1, 1fr);}
}

.search .noposts {padding: 100px 0;}
.search .noposts h4 {margin: 0;}

.search h2.suchergebnis {font-size: 20px;}
.search h2.suchergebnis strong {font-size: 22px;}

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

main.withsidebar .page-build {display: grid; width: 90%; max-width: 1420px; margin: 0 auto 100px auto; grid-template-columns: 68% 27%; justify-content: space-between; align-items: flex-start; overflow: unset;}
main.withsidebar .wrp, main.withsidebar .small-wrp {margin: 0; width: 100%;}

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

/* Kopfbereich Startseite / Unterseite  */

.stage {width: 100%; position: relative; z-index: 5; background-size: cover; background-position: center;}
.stage .stage-content {padding: 150px 0 50px 0; position: relative; z-index: 2;}
.stage .stage-content .btn {display: flex; justify-content: center;}
.stage .productimage-repeater {width: 80%; max-width: 1300px; margin: 0 auto 50px auto;}
.stage .productimage-repeater img {width: 100%;}

.stage .stage-teaser-repeater {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 50px;}
.stage .stage-teaser-repeater .stage-teaser-item {position: relative; width: 100%; height: 250px; border-radius: var(--border-radius); overflow: hidden;}
.stage .stage-teaser-repeater .stage-teaser-item .text-wrp {background: #fff; width: 100%;position: absolute;top: 0;left: 0;right: 0; padding: 10px 15px; box-sizing: border-box;}
.stage .stage-teaser-repeater .stage-teaser-item .text-wrp h3 {font-size: 18px; color: var(--text-color); line-height: 22px; text-align: center;}
.stage .stage-teaser-repeater .stage-teaser-item .text-wrp h3 span {display: block; font-size: 14px; color: var(--akzent-color);}
.stage .stage-teaser-repeater .stage-teaser-item img {position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; right: 0; bottom: 0; transform: scale(1); transition: var(--transition);}
.stage .stage-teaser-repeater .stage-teaser-item:hover img {transform: scale(1.2); transition: var(--transition);}

.stage #stagevideo {position: absolute; width: 100%; z-index: 1;}

.subpage-stage {height: 360px; width: 100%; display: flex; align-items: center; justify-content: center; background-position: center; background-size: cover;}
.subpage-stage h1 {color: var(--text-color); text-align: center; margin-top: 150px;}
.subpage-stage h1 span {font-size: 24px; display: block; margin-top: -15px;}

.subpage-stage.produktseite {justify-content: flex-start; align-items: flex-end;}
.subpage-stage.produktseite h1 {text-align: left; margin-bottom: 50px; font-size: 40px;}

@media (max-width: 1150px) {
  .stage .stage-content {padding: 50px 0 50px 0;}
}

@media (max-width: 1024px) {
    .stage .stage-teaser-repeater {grid-column-gap: 10px;}
    .stage .stage-teaser-repeater .stage-teaser-item { height: 150px;}
}

@media (max-width: 950px) {
  .stage .stage-teaser-repeater .stage-teaser-item .text-wrp {min-height: 65px;}
}

@media (max-width: 766px) {
  .subpage-stage {height: 250px;}
  .stage #stagevideo {display: none;}
  .stage .productimage-repeater {opacity: 1!important;}
  .stage .stage-teaser-repeater {grid-template-columns: repeat(1, 1fr); grid-row-gap: 25px;}
    .stage .stage-teaser-repeater .stage-teaser-item .text-wrp {min-height: unset;}
    .stage .productimage-repeater {width: 96%; max-width: 1300px; margin: 30px auto 20px auto;}
}

@media (max-width: 500px) {
  .subpage-stage h1 {margin-top: 100px; font-size: 25px; line-height: 35px;}
  .subpage-stage h1 span {font-size: 18px; margin-top: 0;}
}

/* Introblock */

.introblock {width: 100%; position: relative; z-index: 3; margin-bottom: -150px;}
.introblock .textbild .small-wrp {grid-template-columns: calc(98% - 50%) 45%!important; align-items: start; display: grid;}
.introblock .textbild .small-wrp h2 {font-size: 60px;}
.introblock .textbild .small-wrp h2 {font-size: 60px;}
.introblock .textbild .small-wrp .btn {margin-right: 25px;}

@media (max-width: 1130px) {
  .introblock .textbild .small-wrp {margin-bottom: 80px; align-items: center;}
}

@media (max-width: 1024px) {
    .introblock {margin-bottom: -50px; }
}


@media (max-width: 766px) {
  .introblock .textbild .small-wrp {grid-template-columns: 100%!important;}
  .introblock .textbild .small-wrp .bild {display: none;}
}

/* Text Bild */

.textbild .small-wrp {display: grid; align-items: stretch; justify-content: space-between; box-sizing: border-box;}
.textbild .text {border-radius: 5px 0 0 5px; box-sizing: border-box; display: flex; align-items: center;}
.textbild .bild { box-sizing: border-box; flex: 1; background-position: center center; background-size: cover; background-repeat: no-repeat; border-radius: var(--border-radius); overflow: hidden;}
.textbild .bild img {width: 100%; height: auto; vertical-align: bottom; visibility: hidden;}
.textbild .text hr {margin: 20px 0px;}

@media (max-width: 768px) {
  .textbild.erstbild .bild {margin-bottom: 50px;}
  .textbild .small-wrp {grid-template-columns: 100%!important;}
  .textbild .text {order: unset!important;}
}

/* Text Bild Full Width */

.textbild-fullwidth {position: relative;}
.textbild-fullwidth .text {display: flex; align-items: center; padding: 100px 0; justify-content: start;}
.textbild-fullwidth .text h2 {font-size: 48px; line-height: 50px; margin-bottom: 0;}
.textbild-fullwidth .text h2 span {font-size: 24px; margin-bottom: 25px; display: block;}
.textbild-fullwidth .text .text-wrp {max-width: 570px; width: 100%;}
.textbild-fullwidth .text .text-wrp p svg {width: 50px; height: 50px; float: left; padding: 0 15px 0 0;}
.textbild-fullwidth .text .text-wrp p svg path {stroke: var(--text-color);}
.textbild-fullwidth .text .text-wrp .btn {margin-top: 100px;}
.textbild-fullwidth .bild {box-sizing: border-box; flex: 1; background-position: center center; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; right: 0; bottom: 0; left: 60%;}
.textbild-fullwidth .bild img {width: 100%; height: auto; vertical-align: bottom; visibility: hidden;}

.textbild-fullwidth.green-bg h2,
.textbild-fullwidth.green-bg p,
.textbild-fullwidth.green-bg ul li {color: #fff;}
.textbild-fullwidth.green-bg .btn a {color: var(--text-color); background: #fff;}
.textbild-fullwidth.green-bg .btn a svg g path {stroke: var(--text-color);}
.textbild-fullwidth.green-bg .text .text-wrp p svg path {stroke: #fff!important;}

.textbild-fullwidth.erstbild .bild {right: 60%; left: 0;}
.textbild-fullwidth.erstbild .text {display: flex; align-items: center; padding: 100px 0; justify-content: flex-end;}

@media (max-width: 1140px) {
  .textbild-fullwidth.erstbild .bild {right: 70%;}
  .textbild-fullwidth.ersttext .bild {left: 70%;}
}

@media (max-width: 979px) {
  .textbild-fullwidth.erstbild .bild {right: 80%;}
  .textbild-fullwidth.ersttext .bild {left: 80%;}
}

@media (max-width: 800px) {
  .textbild-fullwidth.erstbild .bild {display: none;}
  .textbild-fullwidth.erstbild .text {justify-content: flex-start;}
  .textbild-fullwidth .text .text-wrp {max-width: unset;}
  .textbild-fullwidth .text .text-wrp .btn {margin-top: 50px;}
  .textbild-fullwidth.ersttext .bild {display: none;}
  .textbild-fullwidth.ersttext .text {justify-content: flex-start;}
}

/* Vorteile */

.vorteile {background: #f7f7f7; padding: 50px 0;}
.vorteile .vorteil-grid {display: grid; grid-template-columns: repeat(4, auto); padding: 0 5%; justify-content: space-between;}
.vorteile .vorteil-grid .vorteil-item {position: relative;}
.vorteile .vorteil-grid .vorteil-item .icon-wrp {position: absolute; width: 50px; height: 50px; object-fit: contain; top: 0; left: 0;}
.vorteile .vorteil-grid .vorteil-item .icon-wrp svg {width: 100%; height: 100%;}
.vorteile .vorteil-grid .vorteil-item h4 {font-size: 18px; line-height: 22px; color: var(--text-color); font-weight: var(--font-light); padding-left: 70px;}
.vorteile .vorteil-grid .vorteil-item h4 span {font-weight: var(--font-bold); display: block;}

@media (max-width: 1130px) {
  .vorteile .vorteil-grid {grid-template-columns: repeat(2, 1fr); grid-row-gap: 25px;}
}

@media (max-width: 570px) {
  .vorteile .vorteil-grid {grid-template-columns: repeat(1, 1fr); grid-row-gap: 25px;}
}

/* Bildtrenner */

.bildtrenner {height: 30vw; max-height: 500px; width: 100%; background-color: #000; position: relative;}
.bildtrenner .btn {position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%);}
.bildtrenner .bildtrenner-bg {background-repeat: no-repeat; height: 100%; background-size: 100vw; opacity: 0.7; background-position-y: 0; background-position-x: center;}

@media (max-width: 1130px) {
  body.home .bildtrenner {margin-top: 0;}
}

@media (max-width: 500px) {
  .bildtrenner .btn {top: 50%; bottom: unset; transform: translate(-50%, -50%);}
  .bildtrenner .btn a {width: 250px;}
}

/* Produktubersicht + Teasercards */

.produktubersicht-head {display: flex; align-items: center;}
.produktubersicht-head h3 {font-size: 24px; line-height: 30px;  color: var(--text-color);}
.produktubersicht-head h3 span {display: block; font-size: 14px; color: var(--akzent-color);}
.produktubersicht-head .logo-wrp {width: 80px; height: 80px; margin-right: 25px;}
.produktubersicht-head .logo-wrp svg {width: 100%; height:100%;}

.produktubersicht-grid, .cards-grid {display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 20px; grid-row-gap: 20px;}

.produktubersicht-item {border-radius: var(--border-radius); overflow: hidden; position: relative;}
.produktubersicht-item .produktubersicht-item-head {padding: 15px; border-radius: 20px 20px 0 0; position: relative; z-index: 2; display: block; text-align: center; background-image: url("assets/bg-pattern.jpg"); background-size: cover; width: 100%; box-sizing: border-box;}
.produktubersicht-item img {width: 100%; transform: scale(1); transition: .45s ease-in-out;}
.produktubersicht-item .button {width: 35px; height: 35px; border-radius: 35px; position: absolute; bottom: 10px; right: 10px; background: var(--text-color);transition: .45s ease-in-out;}
.produktubersicht-item .button svg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px;}
.produktubersicht-item .button svg g path {stroke: #fff;}

.produktubersicht-item:hover img {transform: scale(1.2); transition: .45s ease-in-out;}
.produktubersicht-item:hover .button {background: var(--akzent-color); transition: .45s ease-in-out;}

.contact-card {border-radius: var(--border-radius); background: var(--akzent-color); min-height: 261px; display: flex; align-items: center; justify-content: center;}
.contact-card h3 {font-size: 25px;}
.contact-card .contact a {color: #fff;}
.contact-card .btn {margin-top: 25px;}
.contact-card .btn a {background: #fff; color: var(--akzent-color);}
.contact-card .btn a svg g path {stroke: var(--akzent-color);}

@media (max-width: 1024px) {
    .contact-card {display: none;}
}

@media (max-width: 1160px) {
  .produktubersicht .produktubersicht-grid, .cards-grid {grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 800px) {
  .produktubersicht .produktubersicht-grid, .cards-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 530px) {
  .produktubersicht .produktubersicht-grid, .cards-grid {grid-template-columns: repeat(2, 1fr);}
    .produktubersicht-item .produktubersicht-item-head {min-height: 48px; padding: 10px 10px 0 10px; line-height: 15px; }
}

/* Produkt Detail */

.main-image.mobile {display: none; position: absolute;width: 200px;right: 10%;top: 10%;}
.main-image.mobile img {width: 100%;}

.product-detail {display: grid; grid-template-columns: 60% 30%; justify-content: space-between;}
.product-detail .product-images .main-image img {margin-top: -250px; width: 100%;}
.product-detail .product-images .fresco-gallery {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 25px; grid-row-gap: 25px;}
.product-detail .product-images .fresco-gallery li {list-style-type: none; margin: 0; border-radius: var(--border-radius); overflow: hidden;}
.product-detail .product-images .fresco-gallery li img {width: 100%;}

.haltung-icon {width: 100%;}
.haltung-icon p {font-size: 10px;}
.haltung-icon .icon {width: 120px; height: auto;  display: inline-block; position: relative; cursor: pointer}
.haltung-icon svg {width: 100%; height: 100%; margin-bottom: 20px!important;}
.haltung-icon .tooltipp {visibility: hidden; opacity: 0; max-width: 450px; width: 500%; height: auto; background: var(--text-color); color: #fff; font-size: 16px; padding: 12px; box-sizing: border-box; border-radius: var(--border-radius); position: absolute; z-index: 2; transition: var(--transition); left: 25px;}
.haltung-icon .tooltipp:after {content:'';width: 0; height: 0; border-style: solid; border-width: 0 20px 30px 20px; border-color: transparent transparent var(--text-color) transparent;position: absolute; top: -20px;}
.haltung-icon .tooltipp p {font-size: 16px; margin-bottom: 0; color: #fff;}
.haltung-icon .tooltipp ul {margin-bottom: 0;}
.haltung-icon .icon:hover > .tooltipp {visibility: visible; transition: var(--transition); opacity: .85;}

@media (max-width: 768px) {
  .haltung-icon .tooltipp {display: none;}
    .haltung-icon .icon {width: 24%; }
}

@media (max-width: 760px) {
  .product-detail {grid-template-columns: 100%; grid-row-gap: 50px;}
  .product-detail .product-images .main-image img {display: none;}
  .main-image.mobile {display: none;}
}

@media (max-width: 500px) {
  .main-image.mobile {width: 160px;right: 0;top: 25%;}
}

/* USP */

.usp {}
.usp .usp-grid {display: grid; grid-template-columns: 48% 48%; justify-content: space-between; grid-row-gap: 50px;}
.usp .usp-grid .usp-item {display: flex; align-items: center;}
.usp .usp-grid .usp-item p {margin: 0; font-weight: 300; line-height: 20px;}
.usp .usp-grid .usp-item p span {display: block; font-weight: 700;}
.usp .usp-grid .usp-item .icon-wrp {width: 60px; height: 60px; margin-right: 20px;}
.usp .usp-grid .usp-item .icon-wrp svg {width: 100%; height: 100%;}

@media (max-width: 500px) {
  .usp .usp-grid {grid-template-columns: 100%;}
}

/* Facts */

.nutritions table {width: 100%;border-collapse: collapse;}
.nutritions table thead tr {background: #fff!important;}
.nutritions tr:nth-of-type(odd) {background: #eee;}
.nutritions th {color: var(--text-color);font-weight: bold;}
.nutritions td, th {padding: 6px; text-align: left;}

@media screen and (max-width: 766px) {
  .nutritions table {border: 0;}
  .nutritions table caption {font-size: 1.3em;}
  .nutritions table thead {border: none;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
  .nutritions table tr {border-bottom: 3px solid #ddd;display: block;margin-bottom: .625em;}
  .nutritions table td {border-bottom: 1px solid #ddd;display: block;font-size: .8em;text-align: right;}
  .nutritions table td::before {content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}
  .nutritions table td:last-child {border-bottom: 0;}
}


  /* Seitenvorschläge */

.seitenvorschlage h2 {text-align: center;}
.seitenvorschlage .seitenvorschlage-grid {display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 20px; grid-row-gap: 20px;}
.seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item {border-radius: var(--border-radius); overflow: hidden; position: relative;}
.seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item .seitenvorschlage-item-head {padding: 15px; border-radius: 20px 20px 0 0; position: relative; z-index: 2; display: block; text-align: center; background-image: url("assets/bg-pattern.jpg"); background-size: cover; width: 100%; box-sizing: border-box;}
.seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item img {width: 100%; transform: scale(1); transition: .45s ease-in-out; }
.seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item .button {width: 35px; height: 35px; border-radius: 35px; position: absolute; bottom: 10px; right: 10px; background: var(--text-color);transition: .45s ease-in-out;}
.seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item .button svg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px;}
.seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item .button svg g path {stroke: #fff;}

.seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item:hover {border-radius: var(--border-radius);overflow: hidden; position: relative;}
.seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item:hover img {transform: scale(1.2); transition: .45s ease-in-out;}
.seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item:hover .button {background: var(--akzent-color); transition: .45s ease-in-out;}

@media (max-width: 850px) {
  .seitenvorschlage .seitenvorschlage-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 500px) {
  .seitenvorschlage .seitenvorschlage-grid {grid-template-columns: repeat(2, 1fr);}
    .seitenvorschlage .seitenvorschlage-grid .seitenvorschlage-item .seitenvorschlage-item-head{ min-height: 48px;
    padding: 10px 10px 0 10px;
    line-height: 15px;}
}

/* Kontakt Störer */

.storer {background: url("assets/bg-pattern.jpg"); width: 100%; background-size: cover; background-position: center; padding: 50px 0; box-sizing: border-box;}
.storer .flex-wrp {margin-right: 50px; flex-wrap: wrap;}
.storer .wrp {display: flex; align-items: flex-end;}
.storer h4 {font-size: 35px; margin-bottom: 15px;}
.storer p {margin-bottom: 0;}
.storer a {transition: var(--transition);}
.storer a:hover {color: var(--akzent-color); transition: var(--transition);}

@media (max-width: 700px) {
  .storer .wrp {display: block;}
  .storer .flex-wrp {margin-right: 0; margin-bottom: 50px;}
}

/* Blog Teaser + Blog */

.blogbeitraege-teaser {padding: 100px 0 250px 0; position: relative;}

.blogbeitraege-teaser .freisteller-eierkarton {position: absolute; top: 0; right: 0;}
.blogbeitraege-teaser .blog-teaser-grid {display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 50px;}

.news {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 50px; grid-row-gap: 50px;}
.news a {position: relative;}
.news .news-text-wrp {margin-bottom: 60px; display: block;}
.news .link-btn {width: 50px; height: 50px; border-radius: 50px; background: var(--text-color); position: absolute; bottom: 0; left: 0; transition: var(--transition);}
.news .link-btn svg {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.news .link-btn svg g path {stroke: #fff;}
.news .bild {margin-bottom: 15px;}
.news .bild img {width: 100%; height: 250px; object-fit: cover; border-radius: var(--border-radius);}
.news h2 {font-size: 20px!important; line-height: 30px!important; color: var(--akzent-color);}
.news a:hover .link-btn {background: var(--akzent-color); transition: var(--transition);}

.content .navigation .newer a,
.content .navigation .older a {background: var(--akzent-color);color: #fff;float: left; display:inline-block; width:auto; cursor: pointer;padding:5px 10px;margin:15px 0 0 0;box-shadow:0 0 5px rgba(0,0,0,0.0); transition:var(--transition); border-radius: 3px;}
.content .navigation .newer a:hover,
.content .navigation .older a:hover {opacity: 0.8;text-decoration:none;transition:all 0.5s}
.content .navigation .older a {float: right;}

@media (max-width: 1200px) {
  .withsidebar .news {display: grid; grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 600px) {
  .withsidebar .news {grid-template-columns: 100%;}
}

/* Image */

.image img{display:block;width:100%;height:auto;  border-radius: var(--border-radius);}

/* Galerie */

.gallery .fresco-gallery {display: grid; grid-column-gap: 20px; grid-row-gap: 20px;}
.gallery .fresco-gallery li {list-style-type: none; margin: 0; border-radius:var(--border-radius);}
.gallery .fresco-gallery li {list-style-type: none;}
.gallery .fresco-gallery li img {width: 100%; height: auto; vertical-align: bottom; border-radius: var(--border-radius);}

@media (max-width: 1024px) {
  .gallery .fresco-gallery {grid-template-columns: repeat(3, 1fr)!important;}
}

@media (max-width: 500px) {
  .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%;}

/* Maps  */

.maps .acf-map {width: 100%; height: 400px;}
.maps .acf-map img {max-width: inherit !important;}

/* Contact Form 7 */

.wpcf7 input[type="text"], .wpcf7 input[type="submit"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select {display:block;box-sizing:border-box;width:100%;padding:7px 12px;float:right;border:1px solid #ddd;outline:none !important;-webkit-appearance:none;font-size:15px;line-height:1.6em;color:#555;border-radius:3px;}
.wpcf7 textarea{resize:vertical;min-height:100px;height:180px;max-height:350px;}
.wpcf7 input:focus, .wpcf7 textarea:focus{border-color:#bbb;}
.wpcf7 p:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.wpcf7 p{display:inline-block;}* html .wpcf7 p{height:1%;}.wpcf7 p{display:block;}
.wpcf7 label{width:32%;float:left;padding:0;margin:0;line-height:2.5em;font-weight: 700;}
.wpcf7-recaptcha{padding-left:32%;margin-bottom:1.5em;}
.wpcf7 input[type=submit]{background: #f5f5f5;color: #000000;display:inline-block;width:auto;cursor:pointer;float:none;margin-left:32%;border:none;}
.wpcf7 .info{font-size:12px;color:#999;}
.wpcf7 .wpcf7-form-control-wrap {display: grid;}

.accept-this-1 {width: 70%; float: right;}
.accept-this-1 label {width: 100%;}
span.info {width: 68%; float: right;}

span.checkbox-741 {width: 70%; float: right;}

@media (max-width: 1024px){
  .wpcf7 .wpcf7-form-control-wrap {display: block;}
  .accept-this-1, span.info {width: 100%; float: none;}
  span.wpcf7-list-item {margin: 0!important;}
  .wpcf7 input[type=submit]{margin-left:0;}
  .wpcf7-recaptcha{padding-left:0;padding-top:10px;}
  .wpcf7 input[type="text"], .wpcf7 textarea{float:none;width:100%;}
  #content .wpcf7 p{margin:0;}
  .wpcf7 label{line-height:1em;padding:10px 0 15px 0;width:100%;}
}

@media (max-width: 766px){
  .wpcf7 p {margin:0;}
  .wpcf7 label {font-size: 14px;}
}

/* Accordion */

.accordion .item-accordion-head {cursor: pointer; position: relative; background: #f2f2f2; margin-bottom:0px; padding:10px 25px 10px 10px; border-bottom:1px solid #cccccc;}
.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-content {padding:20px 20px;background:#f8f8f8;margin-bottom:10px;}
.accordion .item-accordion.hidden .item-accordion-content {display: none;}
.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;}

/* ########## Sidebar ########## */

.withsidebar .sidebar {width: 100%; position: -webkit-sticky; position: sticky; top: 150px; padding: 25px; background: #f5f5f5; box-sizing: border-box; border-radius: var(--border-radius);}
.withsidebar .sidebar .boxtitel {margin-bottom: 15px; font-weight: 700;}
.withsidebar .sidebar h3.widget-title {font-size: 20px; margin-bottom: 20px; color: var(--text-color);}
.withsidebar .sidebar ul li {list-style-type: none; margin: 0 0 5px 0;}
.withsidebar .sidebar ul li a {background: #fff; padding: 5px 0 5px 10px; border-left: 5px solid var(--akzent-color); display: block;}
.withsidebar .sidebar ul li.current_page_item a {background: var(--akzent-color); color: #fff;}
.withsidebar .sidebar .contact {margin-top: 25px;}

article.singlepost .post-image { margin-bottom: 25px;}
article.singlepost .post-image img {width: 100%; height: auto; object-fit: cover; border-radius: 20px;}

.archive-title h2 {font-size: 20px; margin-bottom: 20px;}

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

@media (max-width: 768px) {
  article.singlepost h2 { font-size: 25px!important; line-height: 30px!important;}
  .withsidebar {grid-template-columns: 100%;}
  .withsidebar .sidebar {display: none;}
}

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

footer {background: url("assets/bg-pattern.jpg") no-repeat; width: 100%; position: relative;}
footer .contact-stoerer {width: 100%; padding: 50px 0; box-sizing: border-box; position: relative; overflow: hidden; background: #fff;}
footer .contact-stoerer .contact-grid {display: grid;grid-template-columns: auto auto;align-items: flex-end;justify-content: flex-start;grid-column-gap: 50px;}
footer .contact-stoerer .contact-grid .text {color: var(--text-color);}
footer .contact-stoerer .contact-grid .text a {margin-right: 15px;}
footer .contact-stoerer .contact-grid .btn {z-index: 5; display: flex; justify-content: flex-end;}
footer .contact-stoerer .contact-grid .btn a {background: #fff; color: var(--akzent-color);}
footer .contact-stoerer .contact-grid .btn a svg g path {stroke: var(--akzent-color);}
footer .contact-stoerer .contact-grid h2 {font-size: 35px; margin-bottom: 15px;}
footer .contact-stoerer .contact-grid p {margin-bottom: 0;}

footer .footer-grid {display: grid; grid-template-columns: auto auto; justify-content: space-between; padding: 75px 0 50px 0;}
footer .footer-grid .footerlogo {display: flex; align-items: flex-start;}
footer .footer-grid .footerlogo address {margin-right: 50px;}
footer .footer-grid .footerlogo svg {width: 100px; height: auto; margin-right: 50px;}

footer .footernav .bottom_nav {display: grid;grid-template-columns: 1fr 1fr;column-gap: 30px;list-style-type: none;}
footer .footernav .bottom_nav li:nth-child(-n+6) {border-bottom: 1px solid var(--text-color); width: 200px;}
footer .footernav .bottom_nav li a {padding: 5px 0 5px 0; display: block; transition: var(--transition);}
footer .footernav .bottom_nav li a:hover {color: var(--akzent-color); transition: var(--transition);}

footer .bottom {width: 100%; background: var(--text-color); padding: 10px 0;}
footer .bottom-grid {display: grid; grid-template-columns: auto auto; justify-content: space-between; flex-wrap: wrap;}
footer .bottom-grid .copyright {color: #fff; font-size: 12px;}
footer .bottom-grid .copyright a {color: #fff; font-size: 12px;}

@media (max-width: 1080px) {
  footer .footer-grid {grid-template-columns: 100%;}
  footer .footernav .bottom_nav li:nth-child(-n+4) {width: auto;}
  footer .footernav .bottom_nav li {margin-left: 0;}
}

@media (max-width: 670px) {
  footer .contact-stoerer .contact-grid {grid-template-columns: 100%; grid-row-gap: 50px;}
  footer .contact-stoerer .contact-grid .btn {justify-content: flex-start;}
}

@media (max-width: 540px) {
  footer .footernav .bottom_nav {grid-template-columns: 100%;}
  footer .footer-grid .footerlogo {display: block;}
  footer .contact-stoerer .contact-grid a {display: block;}

}

/* 404 */

body.error404 {position: relative; height: 100vh;}
body.error404 main .content {margin-top: 150px;}
body.error404 footer {position: absolute; bottom: 0; width: 100%;}