/*
Theme Name: IV-Lehm
Theme URI: https://www.iv-lehm.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; color: var(--akzent-color);}
img {-ms-interpolation-mode:bicubic; vertical-align: bottom; height: auto;}

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

* {
  --font-family: "aller", sans-serif;
  --transition: .5s ease-in-out;
  --wrp-width: 1400px;
  --font-size: 16px;
  --line-height: 24px;
  --box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
  --border-radius: 10px;
  --text-color: #000000;
  --light-gray-color: #F5F5F5;
  --akzent-color: #8CC172;
  --white: #ffffff;
}

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

html {background: #f5f5f5;}
body {font-size: var(--font-size); font-family: var(--font-family); line-height: var(--line-height); color: var(--text-color); max-width: 1920px; margin: 0 auto; background: var(--white);}
.wrp {max-width: var(--wrp-width); width: 90%; margin: 0 auto; position:relative; box-sizing:border-box;}

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

body main {position: relative;}
body main .bg-stripe {width: 930px; position: absolute; top: -100px; bottom: -100px; height: 100%; background: var(--light-gray-color); left: 50%; transform: translateX(-50%); }

@media (max-width: 1024px) {
    body main .bg-stripe {display: none;}
}

@media (max-width: 766px) {
  body {font-size: 14px; line-height: 24px;}
  body p {font-size: 14px; line-height: 24px;}
}

/* Page Build */

main.withsidebar {display: grid; align-items: flex-start; grid-template-columns: 65% 27%; justify-content: space-between; max-width: var(--wrp-width); width: 90%; margin-left: auto; margin-right: auto;}
main.withsidebar .content .wrp {width: 100%;}
main.withsidebar .sidebar {width: 100%; position: -webkit-sticky; position: sticky; top: 150px; box-sizing: border-box;}
main.withsidebar .sidebar h3 {text-transform: uppercase; margin-bottom: 20px; font-weight: 600; color: var(--akzent-color);}
main.withsidebar .sidebar ul li {list-style-type: none; margin: 0 0 15px 25px; position: relative; transition: var(--transition);}
main.withsidebar .sidebar ul li:before {content: '»'; position: absolute; left: -20px; top: -2px;}
main.withsidebar .sidebar ul li a {color: var(--text-color); transition: var(--transition);}
main.withsidebar .sidebar ul li:hover a {color: var(--akzent-color); transition: var(--transition);}
main.withsidebar .sidebar ul li:hover {transform: translateX(5px); transition: var(--transition);}

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

/* Typo Styles */

h1{margin:0; font-size: 48px; line-height: 58px; font-weight: 700; color: var(--white);}
h2{margin:0; font-size: 30px; line-height: 46px; font-weight: 500; color: var(--text-color);}
h2 span {font-weight: 300; margin-left: 8px;}
h3{margin:0; font-size: 18px; line-height: 18px; font-weight: 500; color: var(--text-color);}

@media (max-width: 1024px) {
  h1{font-size: 30px; line-height: 40px;}
  h2{font-size: 25px; line-height: 30px;}
  h3{font-size: 14px; line-height: 20px;}
}

@media (max-width: 500px) {
  h1{font-size: 30px; line-height: 35px;}
}

.btntext {display: inline-flex; align-items: start;}
.btntext a {border-bottom: 1px dashed var(--white); line-height: var(--font-size); padding: 2px 0; color: var(--white);}
.btntext .btn-icon {width: 14px; height: 14px; margin-left: 10px;}
.btntext .btn-icon svg {width: 100%; height: 100%;}
.btntext .btn-icon svg path {stroke: var(--white);}

.btn {padding: 5px 0 5px 0; box-sizing: border-box; font-size: 18px; color: var(--akzent-color); border-bottom: 2px dashed var(--akzent-color); transition: var(--transition);}
.btn:hover {color: #225A38; border-bottom: 2px dashed #225A38; transition: var(--transition);}

button.btn {cursor: pointer; border: 0;}
.btn.small {padding: 8px 12px; font-size: 16px; display: block; text-align: center; margin-top: 5px;}

a:hover{}

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

/* Margins */

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

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

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

header {position: fixed; top: 0; width: 100%; max-width: 1920px; z-index: 20; transition: var(--transition); box-shadow: var(--box-shadow);}
header .header-grid {display: grid; background: #fff; grid-template-columns: 240px auto; grid-template-rows: auto; padding: 0 5%; justify-items: start; align-items: center; justify-content: space-between; transition: var(--transition);}
header .header-grid .logo {width: 100%;}

html.scrolled header {background: var(--white); transition: var(--transition); box-shadow: var(--box-shadow);}
html.scrolled header .header-grid {padding: 0 5%; transition: var(--transition);}
header.cart, header.checkout, .page-id-577 header {background: #4d5961!important;}

@media (max-width: 1024px) {
    header .header-grid {padding: 18px 5%;}
    html.scrolled header .header-grid {padding: 10px 5%;}
}

@media (max-width: 500px) {
    header .header-grid {grid-template-columns: 170px auto;}
}

/* ########## 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; cursor: pointer;}
#mainnav ul.mainnav li.nav-icon.search {padding: 15px; box-sizing: border-box; border-radius: 50%; position: relative; cursor: pointer;}
#mainnav ul.mainnav li.nav-icon .icon-wrp, #mainnav ul.mainnav li.nav-icon-konto .icon-wrp {width: 18px; height: 18px; display: block;}
#mainnav ul.mainnav li.nav-icon span svg, #mainnav ul.mainnav li.nav-icon-konto span svg {width: 100%; height: 100%;}
#mainnav ul.mainnav li.nav-icon span svg path, #mainnav ul.mainnav li.nav-icon-konto span svg path {stroke: var(--white); transition: var(--transition);}
#mainnav ul.mainnav li:first-child {margin-left:0;}
#mainnav ul.mainnav li a {display:block; color: var(--text-color); transition: var(--transition); padding: 50px 0; position: relative;}
#mainnav ul > li.current-menu-item > a{color: #235B39; transition: var(--transition);}

#mainnav ul.mainnav li.menu-item-has-children a:after {content: '›'; position: absolute; right: -15px; top: 50%; transform: translateY(-50%) rotate(90deg);}

#mainnav ul.mainnav > li.rd-search {float: left; height: 62px;}
#mainnav ul.mainnav > li.rd-search #suchbox,
#mainnav ul.mainnav > li.shopping-cart {display: inline-block; border: none;}
#mainnav ul.mainnav > li.rd-search #suchbox,
#mainnav ul.mainnav > li.shopping-cart a {padding: 10px 15px; border: none;}
#mainnav ul.mainnav > li.shopping-cart a svg{height: 35px;}
#mainnav ul.mainnav > li.rd-search .search-box .cancel-icon.active {right: -22px;}

.infonav-mein-konto, .mainnav {display: flex; justify-content: flex-end; margin: 0;}
.infonav-mein-konto li {list-style-type: none;}
.infonav-mein-konto li a {color: var(--white); font-size: 14px;}

.shopping-bag  { position: relative;}
.shopping-bag  { position: relative;}
.shopping-bag .count {position: absolute;top: -10px;left: 15px;width: 20px;height: 20px; line-height: 20px; border-radius: 50%;background: var(--akzent-green);color: #fff;text-align: center;font-size: 12px;font-weight: bold; display: none;}
.shopping-bag .count.show {display: block;}

html.scrolled #mainnav ul.mainnav li.nav-icon span svg path, html.scrolled #mainnav ul.mainnav li.nav-icon-konto span svg path {stroke: var(--text-color); transition: var(--transition);}
html.scrolled #mainnav ul.mainnav li a {color: var(--text-color); transition: var(--transition); padding: 43px 0;}

/* 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: 130px; left: 0; display: block; height: auto; max-height: 0; overflow: hidden; background: var(--light-gray-color);}
    html.scrolled #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {top: 116px;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {width: 210px; height: 100%; transition: 0.8s ease; background: transparent; margin: 0;}
    html.scrolled #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {background: #f5f5f5;}
    #mainnav ul.mainnav li.menu-item-has-children:hover > ul.sub-menu {max-height: 674px; padding: 0; overflow: visible; margin-top: -6px;}

    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover {background: #fff;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover a {color: var(--akzent-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {padding: 10px 0 10px 7px; color: var(--text-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a:hover {color: var(--akzent-color); transition: var(--transition);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a:after {display: none;}
    #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(--akzent-color);}

    /* Desktop ausblenden */

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

/* Mainnav Toggle */

.mainnav-toggle {border-radius: 2px; display: block!important; z-index: 10; position: relative; width: 50px;height: 50px; margin-left: 40px;}
.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: var(--text-color); transition: var(--transition); 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;}

html.scrolled .mainnav-toggle .btn-mainnav-toggle span {background: var(--text-color); transition: var(--transition);}

@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);} }

/* Offcanvas */

.offcanvas {position: fixed; top: 0; right: 0; height: 100vh; background: var(--white); width: 100%; max-width: 500px; transform: translateX(100%); transition:  var(--transition); z-index: 10;}
.offcanvas.active {transform: translateX(0); transition:  var(--transition); box-shadow: var(--box-shadow);}
.offcanvas .offcanvas-head {display: grid; grid-template-columns: auto auto; grid-column-gap: 50px; justify-content: space-between; padding: 28px 30px; width: 100%; box-sizing: border-box; align-items: center; background: var(--akzent-color); margin-bottom: 10px;}
.offcanvas .offcanvas-head .buttons {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 30px; justify-content: space-between; padding: 15px; width: 100%; box-sizing: border-box; align-items: center; }
.offcanvas .offcanvas-head .buttons span {width: 25px; height: 25px; display: block;}
.offcanvas .offcanvas-head .buttons span:hover {cursor: pointer;}
.offcanvas .offcanvas-head .buttons span svg {width: 100%; height: 100%;}
.offcanvas .offcanvas-head .buttons span svg path {stroke: var(--white);}
.offcanvas .offcanvas-head p {font-size: 24px; margin: 0; color: var(--white);}

.offcanvas.shopping-bag .offcanvas-head .buttons span:not(#close-nav),
.offcanvas.shopping-bag address,
.offcanvas.shopping-bag .offcanvas-contact-wrp,
.offcanvas.login .offcanvas-head .buttons span:not(#close-nav),
.offcanvas.login .offcanvas-contact-wrp,
.offcanvas.login .address {display: none;}
.offcanvas.shopping-bag .offcanvas-head .buttons,
.offcanvas.login .offcanvas-head .buttons {grid-template-columns: 100%;}

.offcanvas address {padding: 0 30px; box-sizing: border-box; width: 100%;}
.offcanvas address a {display: inline-block; color: var(--text-color);}
.offcanvas .offcanvas-contact-wrp {padding: 0 30px; box-sizing: border-box; width: 100%;}
.offcanvas .offcanvas-contact-wrp a {color: var(--text-color);}
.offcanvas .offcanvas-contact-wrp > span {display: block;}
.offcanvas .offcanvas-contact-wrp .distancer {width: 75px; display: inline-block;}

.offcanvas-nav li {list-style-type: none; margin: 0;}
.offcanvas-nav li a {padding: 10px 30px; background: var(--light-grey); color: var(--text-color); display: block; box-sizing: border-box; border-bottom: 1px solid var(--white);}

.offcanvas-nav .opensubnav {cursor: pointer; width: 44px; height: 44px; position: absolute; right: 0; background: var(--light-gray-color); display: block; z-index: 100; box-sizing: border-box;}
.offcanvas-nav .opensubnav.active {background: var(--akzent-color);}
.offcanvas-nav .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);}
.offcanvas-nav .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);}

.offcanvas-content {padding: 50px 30px;}

.cf {clear: both;}
/* Offcanvas Sub Layer 1 */

.offcanvas-nav li.menu-item-has-children ul.sub-menu {display: none; transition: var(--transition); margin-bottom: 0;}
.offcanvas-nav li.menu-item-has-children.active ul.sub-menu {display: block;}
.offcanvas-nav li.menu-item-has-children.active ul.sub-menu li a {background: var(--light-gray-color); padding-left: 10%;}
.offcanvas-nav li.menu-item-has-children.active ul.sub-menu li a:hover {color: var(--akzent-color); transition: var(--transition);}
.offcanvas-nav li.menu-item-has-children.active ul.sub-menu li ul.sub-menu li a {padding-left: 15%;}

/* Offcanvas Sub Layer 2 */

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

@media (max-width: 1024px) {
  #mainnav ul.mainnav li,
  #mainnav address {display: none;}
}

#mainnav-overlay {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(45,45,45,0.6); backdrop-filter: blur(5px); z-index: 8; display: none;}
#mainnav-overlay.active {display: block;}

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

/* Kopfbereich Startseite / Unterseite  */

.stage {width: 100%; position: relative; z-index: 2;}

.stage .stageimage {position: relative; max-width: 90%; margin: 0 auto; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow);}
.stage .stageimage > img,
.stage .stageimage > picture img {width: 100%; aspect-ratio: 3/1.2; object-position: center; object-fit: cover; opacity: 0.9;}
.stage .stageimage .wrp {position: absolute; top: calc(50% + (130px / 2)); left: 50%; transform: translate(-50%,-50%);}
.stage .stageimage .stagecontent {max-width: 750px; width: 100%; text-shadow: 3px 4px 10px rgba(0,0,0,0.5);}
.stage .stageimage .stagecontent p {color: var(--white);}
.stage .stageimage .stagecontent .btntext .btn-icon svg path {stroke: var(--white);}

.stage .stageimage .stagevideo {opacity: 0.8; width: 100%; height: 100%; object-fit: cover;aspect-ratio: 3/1.2;object-position: center;}

.stage.subpage {width: 100%; position: relative;}
.stage.subpage .stageimage .wrp {top: 70%;}
.stage.subpage .stageimage .overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.stage.subpage .stageimage > picture img {aspect-ratio: 3/0.8; min-height: 370px; object-position: center 30%; object-fit: cover;}
.stage.subpage .stageimage > img {aspect-ratio: 3/0.8;}
.stage.subpage .hl-wrp {display: flex; align-items: flex-start; margin-bottom: 30px;}
.stage.subpage .hl-wrp .hl {max-width: 70ch;}
.stage.subpage .hl-wrp h2 {line-height: 50px; font-size: 45px; color: var(--white);}
.stage.subpage .hl-wrp h3 {color: var(--white); font-size: 25px;}
.stage.subpage .hl-wrp .icon-wrp {width: 50px; height: 50px; margin-right: 20px;}
.stage.subpage .hl-wrp .icon-wrp svg {width: 100%; height: 100%; opacity: 1;}
.stage.subpage .hl-wrp .icon-wrp svg path {stroke: var(--white); fill: var(--white);}


@media (max-width: 1500px) {
  .stage .stageimage > img, .stage .stageimage > picture img {aspect-ratio: 3/1.5;}
}

@media (max-width: 1280px) {
  .stage .stageimage .stagevideo {aspect-ratio: 3/1.75;}
}

@media (max-width: 1100px) {
  .stage .stageimage > img, .stage .stageimage > picture img {aspect-ratio: 3/1.75;}
}

@media (max-width: 1024px) {
    .stage.subpage .stageimage > picture img {min-height: 300px;}
}

@media (max-width: 900px) {
  .stage .stageimage > img, .stage .stageimage > picture img {aspect-ratio: 3/2.5; height: 100%; min-height: 450px;}
  .stage .zertifikat .wrp .zertifikat-item {height: 60px;}
  .stage .stageimage .stagevideo {aspect-ratio: 3/2;}
  .stage .stageimage .wrp {position: absolute; top: 60%;}
}

@media (max-width: 680px) {
  .stage .stageimage .wrp {position: absolute; top: 70%;}

}

@media (max-width: 600px) {
  .stage .stageimage .wrp {position: absolute; top: 80%;}
  .stage .stageimage .stagecontent p {display: none;}
}

@media (max-width: 500px) {
  .stage.subpage .hl-wrp h2 {font-size: 35px; line-height: 45px;}
  .stage.subpage .hl-wrp h3 {font-size: 16px; line-height: 26px;}
  .stage .stageimage .stagevideo {aspect-ratio: 3/2.2;}
}

/* Headline */

.headline.inc-icon .hl-wrp {grid-column-gap: 25px; display: grid; grid-template-columns: 50px auto; align-items: center;}
.headline .icon-wrp {width: 100%; aspect-ratio: 1/1;}
.headline .icon-wrp img {width: 100%; height: 100%; object-fit: contain;}
.headline h2 {text-transform: none; color: var(--hl-color); font-size: 36px;}
.headline h2 span {margin: 0; font-weight: 300;}
.headline .versalien h2 {text-transform: uppercase;}

@media (max-width: 500px) {
  .headline h2 {font-size: 25px; line-height: 32px;}
}

/* Text */

.text p {margin-bottom: var(--line-height);}
.text ul li {margin-bottom: 0;}
.text h2 {margin-bottom: 25px;}
.text p a {color: var(--text-color); border-bottom: 1px dashed var(--text-color); transition: var(--transition);}
.btn.learndash {color: var(--white) !important;}
.text p a:hover {color: var(--akzent-color); border-bottom: 1px dashed var(--akzent-color); transition: var(--transition);}
.text.gray .wrp {padding: 50px; background: var(--light-grey); box-sizing: border-box; border-radius: var(--border-radius);}
.text.center h2 {text-align: center;}
.text.center p {text-align: center; max-width: 800px; margin: 0 auto var(--line-height) auto;}

.text .btn-wrp {display: flex; gap: 50px;}
.text.center .btn-wrp {justify-content: center;}

.text .alignleft {float: left; margin: 0 0 35px 0; padding-top: 10px;}
.text p a.btn {color: #fff; text-decoration: none; margin: 35px auto 0 auto; border:none; display: block; text-align: center; }
.text .wrp.smallwidth {max-width:800px;}
.text .wrp.smallwidth h3 {font-size: 24px; font-weight: 400; margin: 0 0 15px 0; padding-top: 25px; color: var(--hl-color);}

@media (max-width: 500px) {
  .text.gray .wrp {padding: 25px;}
    .text .btn-wrp {flex-wrap: wrap; gap: 25px;}
}

/* Text Bild */

.textbild .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; padding-top: 50px;}
.textbild .text .hl-wrp {display: flex; align-items: flex-start; margin-bottom: 30px;}
.textbild .text .hl-wrp h2 {line-height: 35px;}
.textbild .text .hl-wrp .icon-wrp {width: 40px; height: 40px; margin-right: 20px;}
.textbild .text .hl-wrp .icon-wrp svg {width: 40px; height: 40px; opacity: 0.3;}
.textbild .text .hl-wrp .icon-wrp svg path {stroke: var(--hl-color);}
.textbild .text p,
.textbild .text ul,
.textbild .text ol,
.textbild .text .hl {max-width: 65ch;}

.textbild .bild {box-sizing: border-box; flex: 1; width: 120%; position: relative;}
.textbild .bild span {font-size: 12px;}
.textbild.erstbild .bild {margin-left: -20%; position: relative;}
.textbild .bild img {width: 100%; aspect-ratio: 3/1.5; vertical-align: bottom; border-radius: var(--border-radius); object-fit: cover;  box-shadow: var(--box-shadow);}

@media (max-width: 1600px) {
  .textbild .bild {width: 100%;}
  .textbild.erstbild .bild {margin-left: 0;}
  .textbild .text {padding-top: 0;}
}

@media (max-width: 1024px) {
  .textbild .text .hl-wrp .icon-wrp {display: none;}
  .textbild .wrp {grid-template-columns: 100%!important; grid-row-gap: 50px;}
  .textbild .text {order: 1!important;}
  .textbild .text p {max-width: unset;}
  .textbild .bild .storer {right: 0; top: -40px;}
  .textbild .text-wrp {margin-bottom: 0;}
  .textbild .text-wrp p:last-child {margin-bottom: 0;}
  .textbild .btn {display: inline-block; margin-top: 25px;}
  .textbild .link-liste {margin-top: 25px;}
  .textbild .text .hl-wrp {margin-bottom: 0;}
  .textbild .link-liste {width: 100%;}
  .textbild.erstbild .bild {margin-bottom: 25px;}
}

/* Image */

.image img {display:block; width: 110%; margin-left: -10%; /*aspect-ratio: 3/1.5;*/ object-fit: cover; object-position: center; border-radius: var(--border-radius); box-shadow: var(--box-shadow);}

@media (max-width: 1500px) {
  .image img {width: 100%; margin-left: 0;}
}

/* Galerie */

.gallery .fresco-gallery {display: grid; grid-column-gap: 50px; grid-row-gap: 50px;}
.gallery .fresco-gallery li {list-style-type: none; margin: 0;}
.gallery .fresco-gallery li {list-style-type: none;}
.gallery .fresco-gallery li img {width: 100%;}

@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 */

.respo-video {position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%;height: auto; border-radius: var(--border-radius);}
.respo-video iframe {position: absolute; top: 0; left: 0; width: 100%;	height: 100%;}

/* Teasercards */

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

.teasercards .cards.no-carousel {display: grid; gap: 25px; margin: 0;}
.teasercards .cards.no-carousel {list-style-type: none; margin: 0;}

.teasercards .splide .cards {display: flex; grid-column-gap: unset;}

.teasercards .teasercard-item {display: block; position: relative; width: 100%; aspect-ratio: 3/1.75; background: var(--akzent-color); border-radius: var(--border-radius); overflow: hidden;}
.teasercards .teasercard-item:nth-child(2) {background: #C4DB9B;}
.teasercards .teasercard-item:nth-child(3) {background: #225A38;}
.teasercards .teasercard-item:after {content: ''; position: absolute; height: 120%; width: 75%; top: 50%; transform-origin: center; transform: translate(-50%,-50%); left: 100%; background: url("assets/icons/iv-lehm-icon.svg"); background-size: cover; opacity: .35; transition: var(--transition);}
.teasercards .teasercard-item .img-wrp {width: 100%; height: 100%; display: block;}
.teasercards .teasercard-item .img-wrp img {width: 100%; height: 100%; object-fit: cover; opacity: .08; transition: var(--transition);}
.teasercards .teasercard-item .text {position: absolute; bottom: 25px; left: 25px; font-size: 30px; color: #fff;}

.teasercards .teasercard-item:hover .img-wrp img {transform: scale(1.1); opacity: .12; transition: var(--transition);}
.teasercards .teasercard-item:hover:after {left: 95%; transform: translate(-50%,-50%) rotate(12deg); transform-origin: center; transition: var(--transition);}

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

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

/* Accordion */

.accordion .item-accordion-head {cursor: pointer; position: relative; font-weight: 600; text-transform: uppercase; background: var(--akzent-color); border-radius: var(--border-radius); 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; margin-bottom: 10px; padding: 10px;}
.accordion .item-accordion.hidden .item-accordion-content h3 {margin-bottom: 28px;}
.accordion .item-accordion.hidden .item-accordion-content:after {display:block;width: 0;height: 0;border-right: 100px solid var(--akzent-color);border-top: 50px solid transparent;border-bottom: 50px solid transparent;}

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

.sidebar .teilnehmen {display: flex; justify-content: center;}
.sidebar .teilnehmen .btn {display: inline-block; margin-left: auto; margin-right: auto; text-align: center;}
.sidebar .sidebar-fragen {text-align: center;}

.sidebar .contact-sidebar a {color: var(--text-color); display: block;}
.sidebar .contact-sidebar a:hover {color: var(--akzent-color); transition: var(--transition);}
.sidebar .contact-sidebar a .distancer {width: 60px; display: inline-block;}

.sidebar.hide {display: none;}

/* ########## Blog ########## */

main.withsidebar .content .blog-grid {display: grid; grid-template-columns: 100%; grid-column-gap: 50px; grid-row-gap: 50px;}
main.withsidebar .content .blog-grid .post {width: 100%;}

main.withsidebar .content .blog-nav {margin: 25px 0 0 0; border-top: 1px solid #ccc; padding-top: 20px; display: grid;  grid-template-columns: repeat(2, 1fr);}
main.withsidebar .content .blog-nav .older {text-align: right;}
main.withsidebar .content .blog-nav .newer {}
main.withsidebar .content .blog-nav-single .navigation {display: block;}
main.withsidebar .content .blog-nav-single .navigation .nav-links {margin: 25px 0 0 0; border-top: 1px solid #ccc; padding-top: 20px; display: grid;  grid-template-columns: repeat(2, 1fr);}
main.withsidebar .content .blog-nav-single .navigation .nav-links .nav-previous {text-align: left;}
main.withsidebar .content .blog-nav-single .navigation .nav-links .nav-next {text-align: right;}
main.withsidebar .content .blog-nav-single .navigation h2 {display: none;}


#blog-sidebar > a.btn {display: inline-block;}

.post > a {display: grid; grid-template-columns: 1fr 2fr; grid-column-gap: 50px; align-items: center;}
.post > a .post-content {font-size: 20px; color: var(--text-color); display: block;}
.post > a .post-content .btnwrp {justify-content: flex-start;}
.post > a .post-content .btnwrp .btntext span {font-size: 16px;}
.post > a picture, .post > a img {border-radius: var(--border-radius); overflow: hidden; width: 100%; height: 100%; object-fit: cover;}

article.singlepost .post-image {}
article.singlepost .post-image img {width: 100%; height: auto; object-fit: cover;}
article.singlepost h3 {margin: 0 0 25px 0;}


/* Blog Sidebar */

@media (max-width: 768px) {
  main.withsidebar .content .blog-grid {grid-template-columns: repeat(2, 1fr);}
  .post > a {grid-template-columns: 100%;}
  .post > a picture {margin-bottom: 15px; display: block;}
}

@media (max-width: 500px) {
  main.withsidebar .content .blog-grid {grid-template-columns: 100%;}
}

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

.footer-image {max-width: 90%; aspect-ratio: 3/.5; margin-left: auto; margin-right: auto; border-radius: var(--border-radius); overflow: hidden;}
.footer-image img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

footer {padding: 100px 0; position: relative;background: #F1F1F1;}
footer .wrp {z-index: 2;}
footer:after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 2%; background-image: url("assets/icons/iv-lehm-icon.svg"); width: 33%; height: 125%; background-size: cover; background-position: center; opacity: .2;}
footer .footer-info {display: grid;grid-template-columns: auto auto;gap: 50px;align-items: flex-end;}
footer .footergrid {display: grid; grid-template-columns: auto auto; justify-content: space-between; grid-column-gap: 50px; align-items: flex-end;}
footer .footergrid .links .logo {width: 280px;}
footer .footergrid .links .logo svg {width: 100%;}
footer .footergrid .links .logo svg #color {opacity: 0;}
footer .footergrid .links .address,
footer .footergrid .links .address a {color: var(--text-color);}
footer .footergrid .links .address > span {display: block;}
footer .footergrid .links .address .distancer {width: 75px; display: inline-block;}
footer .footergrid .links .address address {color: var(--text-color);}

footer .footergrid  nav {display: grid; grid-template-columns: repeat(2, auto); align-items: flex-start;}
footer .footergrid  nav .footernav {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px; grid-row-gap: 2px; margin: 0;}
footer .footergrid  nav .footernav li {list-style-type: none; margin-left: 0;}
footer .footergrid  nav .footernav li a {color: var(--text-color);; display: block;}

@media (max-width: 1150px) {
  footer .footergrid {grid-template-columns: 100%; grid-row-gap: 50px;}
}

@media (max-width: 767px) {
    .footer-image {display: none;}
}

@media (max-width: 600px) {
    footer .footer-info {grid-template-columns: 100%; grid-row-gap: 50px;}
}

.footer-image {max-width: 90%; aspect-ratio: 3/.5; margin-left: auto; margin-right: auto; border-radius: var(--border-radius); overflow: hidden;}



.login-as-user-top {position: relative !important;}
/* Bottom */

.bottom .wrp {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 15px 0; color: var(--text-color); font-size: 12px;}
.bottom .wrp a {color: var(--text-color); font-size: 12px;}

/* 404 */

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

/* WP Forms */

.wpforms-container-full {margin: 0!important;}