/*
Theme Name: TSI Trockenbau
Theme URI: http://www.tsi-trockenbau.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;}
.wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: var(--primary-color)!important;
    border: 1px solid var(--secundary-color)!important;
    color:#f2f2f2!important;
    text-align:center!important;
}
/* ########## Fonts ++ WICHTIG font-display: swap; ++ ########## */

/* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('assets/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('assets/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('assets/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('assets/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('assets/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
    src: url('assets/fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('assets/fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('assets/fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
    url('assets/fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('assets/fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

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

* {
    --font-family: 'Roboto';
    --transition: .4s ease;
    --wrp-width: 1240px;
    --font-size: 18px;
    --line-height: calc(var(--font-size) * 1.6);
    --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    --border-radius: 15px;
    --primary-color: #007F92;
    --secundary-color: #00444F;
    --text-color: #575756;
}

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

html {}
body {position:relative;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;}
.home.page .siegel {position:absolute;right:5vw;top:25vw;width:270px;z-index:8; transition: var(--transition);}
.scrolled-s .page .siegel {position:fixed;top:75%;width:220px;transition: var(--transition);}
.siegel {display:grid;grid-template-columns: 1fr 1fr;column-gap: 13px}
.page .siegel img {width:100%;height:auto;}
.page .siegel {position:absolute;right:5vw;top:18vw;width:270px;z-index:2}


.skizze {position:absolute;bottom:0;left:-130px;width:100%;max-width:550px;z-index:-1}
.home.page .skizze-1 {display:block;position:absolute;bottom:-170px;right:-150px;width:100%;max-width:550px;z-index:8}
.page .skizze-1 {display:none}
/* Margins */

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

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

/* Page Build */

main.withsidebar .page-build {display: grid; grid-template-columns: 70% 25%; align-items: flex-start; justify-content: space-between; max-width: var(--wrp-width); width: 90%; margin: 0 auto;}
main.withsidebar .content .wrp {width: 100%;}
main.withsidebar .sidebar {width: 100%; position: -webkit-sticky; position: sticky; top: 150px; background: #f5f5f5; padding: 0; box-sizing: border-box;margin-bottom:100px;}

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

/* Typo Styles */

h1{margin:0 0 20px 0;font-size:30px;font-weight:400;line-height:35px;text-transform: uppercase}
h1 strong{font-size:30px;font-weight:700;color:var(--primary-color)}
.home.page h2{margin:0 0 20px 0;font-size:30px;font-weight:400;line-height:35px;text-transform: uppercase}
.home.page h2 strong{font-size:30px;font-weight:700;color:var(--primary-color)}

.page h2{margin:0 0 25px 0;font-size:24px;font-weight:400;line-height:35px;text-transform: uppercase}
.page h2 strong{font-size:24px;font-weight:700;color:var(--primary-color)}

h3{margin:0;}

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

p {margin-bottom: var(--line-height);}
p:last-child {margin-bottom: 0;}
address {font-style: normal; color: var(--text-color);}
.sidebar-contact h3 {font-size:18px;font-style: normal; color: var(--text-color);padding: 0 25px;}
.sidebar-contact address {font-size:16px;font-style: normal; color: var(--text-color);padding: 0 25px;}
.sidebar-nav {margin:0;}
.sidebar-contact {border-top:10px solid #fff;padding-top:20px;}
.sidebar-nav li{list-style-type:none;margin:0 0 1px 0;}
.sidebar-nav li a{font-size:16px;display:block;margin:0;padding:10px 25px;background:var(--primary-color);color:#f2f2f2; transition: var(--transition);}
.sidebar-nav li a:hover,.sidebar-nav li.current-menu-item a {background:var(--secundary-color); transition: var(--transition);}
address a {display: block;}
ol, ul {margin-bottom: var(--line-height);}
li {margin-left: 20px;}

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

#mainnav ul.mainnav.smart {display:none;}
#mainnav {display: block; transform: translate(0);}
#mainnav ul.mainnav.desktop li {list-style-type: none; font-size: 20px; margin-left: 40px;}
#mainnav ul.mainnav.desktop li:first-child {margin-left:0;}
#mainnav ul.mainnav.desktop li a{ font-size: 20px;text-transform:uppercase;font-weight:400;display:block; color: var(--text-color); transition: var(--transition); padding:15px 0;}
#mainnav ul.mainnav.desktop li a:hover, #mainnav ul.mainnav.desktop li.current-menu-item a,#mainnav ul.mainnav.desktop li.current-page-ancestor a{color: var(--primary-color); transition: var(--transition);}

/* Submenu */

@media (min-width: 1025px){

    #mainnav ul.mainnav.desktop {display: flex; align-items: center; margin: 0;}
    html.scrolled #mainnav ul.mainnav li a {padding: 15px 0; transition: var(--transition);}

    #mainnav ul.mainnav li.menu-item-has-children {position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {position: absolute; top: 60px; left: 0; display: block; height: auto; max-height: 0; overflow: hidden;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {width:250px; height: 100%; padding:0; transition: 0.8s ease;margin: 0;}
    #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 a {background: var(--secundary-color);color: #f2f2f2}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {font-size:16px;padding: 10px;background: var(--primary-color);color: #f2f2f2;margin-bottom:1px}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.current-menu-item a {background: var(--secundary-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:last-child {margin-bottom: 0;}

    /* Zweite Ebene */

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

    /* Desktop ausblenden */

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

@media (max-width: 1024px) {

    .mainnav.desktop {display: none;}

    /* Offcanvas */

    #mainnav ul.mainnav.smart {display:block;}
    #mainnav {position: fixed; top: 0; right: 0; bottom: 0;background: #f2f2f2;height: 100vh;width: 100%; max-width: 500px; transform: translateX(100%); transition: var(--transition); box-shadow: var(--box-shadow); z-index: 2;}
    #mainnav.active {transform: translateX(0);background: #f2f2f2;height: 100vh;overflow-y: scroll;transition: var(--transition);}
    #mainnav .head {display: grid;grid-template-columns: auto auto 55px;background: #fff;align-items: center; padding: 20px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
    #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: #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 {stroke: #a4a4a4;}

    /* Submenu */

    #mainnav ul.mainnav.smart {display: block;}
    #mainnav ul.mainnav li {padding: 0; box-sizing: border-box; margin: 0; background: #efefef; border-bottom: 1px solid #dedede; list-style-type: none;}
    #mainnav ul.mainnav li a {font-size: var(--font-size); padding: 10px 45px 10px 5%; display: block;}

    #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;}

    /* 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: 20px;transform: translateY(-50%);width: 50px;height: 50px;background: var(--primary-color);box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3); transition: var(--transition);}
    .mainnav-toggle.off.active {display:none!important}
    .mainnav-toggle .btn-mainnav-toggle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 35px;cursor: pointer;}
    .mainnav-toggle .btn-mainnav-toggle span {display: block;width: 100%;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);} }

    #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; height:100vh;overflow:hidden;transition: var(--transition);}
}

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

header {position: fixed; top: 85px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1320px; z-index: 10; padding:10px 0;box-shadow: 0 0 0 rgba(0,0,0, 0); box-sizing: border-box; background: rgba(242,242,242, 0.95);transition: var(--transition);}
.scrolled header {position: fixed; top: 0; left: 50%; transform: translateX(-50%);z-index:88; width: 100%; max-width: 100%;padding:5px 0;box-shadow: 0 0 13px rgba(0,0,0, 0.5);transition: var(--transition);}
header .wrp {width:100%;max-width:1320px;box-sizing:border-box;padding:0 40px}
header .header-grid {display: grid; grid-template-columns: 210px auto; grid-template-rows: auto; justify-items: start; align-items: center; justify-content: space-between;}
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  */

.home.page .stage {position:relative;width: 100%; aspect-ratio: 3/1; margin-top: 0;clip-path: polygon(50% 0%,100% 0%,100% 90%,50% 100%,0% 90%,0% 0%);}
.page .stage {width: 100%; aspect-ratio: 4/1; margin-top: 0;clip-path: polygon(50% 0%,100% 0%,100% 90%,50% 100%,0% 90%,0% 0%);}
.stage img {width: 100%; height: 100%; min-height: 220px; object-fit: cover; object-position: center;}
.stage .claim {position: absolute;text-align: center;width: 100%;top: 15vw;font-size:40px;line-height:53px;font-weight:700;text-transform:uppercase;color:var(--secundary-color)}
.stage .claim p{max-width:720px;padding:30px 0;box-sizing:border-box;border:1px solid var(--secundary-color);margin:0 auto;background:rgba(255,255,255, 0.7);text-shadow: -1px 1px 0 #f2f2f2,
1px 1px 0 #f2f2f2,
1px -1px 0 #f2f2f2,
-1px -1px 0 #f2f2f2;}
/* ########## 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;}
.home.page .text {max-width:980px;margin:0 auto}
.page .text {max-width:inherit;margin:0 auto}
.text .buttons {display:none;margin:40px 0 0 0}
.text.mb {margin-bottom:50px}
.text .buttons.ja {display:block}
.text .buttons.ja ul {display:grid;grid-template-columns: 1fr 1fr;column-gap: 20px;margin:0;}
.text .buttons.ja ul li {list-style-type:none;margin:0;}
.text .buttons.ja ul li:nth-child(odd) a {display:block;padding:10px;color:#f2f2f2;background:var(--primary-color);text-align:center;font-size:22px;transition:var(--transition)}
.text .buttons.ja ul li:nth-child(even) a {display:block;padding:10px;color:#f2f2f2;background:var(--secundary-color);text-align:center;font-size:22px;transition:var(--transition)}
.text .buttons.ja ul li:nth-child(odd) a:hover {display:block;padding:10px;color:#f2f2f2;background:var(--secundary-color);text-align:center;font-size:22px;transition:var(--transition)}
.text .buttons.ja ul li:nth-child(even) a:hover {display:block;padding:10px;color:#f2f2f2;background:var(--primary-color);text-align:center;font-size:22px;transition:var(--transition)}
.text h3 {font-size:24px;font-weight:400;color:var(--primary-color);margin:0 0 20px 0}
.text.grey {position:relative;background: #f2f2f2;padding: 50px 0 0 0;margin-bottom:220px;}
.text.grey:after {
    content: "";
    position: absolute;
    bottom: -120px;
    display: block;
    width: 100%;
    height: 120px;
    background: #f2f2f2;
    clip-path: polygon(50% 0%,100% 0%,100% 20%,50% 100%,0% 20%,0% 0%);
}


.texttext {position:relative}
.texttext .wrp {display: grid; grid-template-columns: 1fr 1fr;column-gap:50px}
.texttext .wrp div.wpforms-container-full {
    margin: 0 auto;
}

/* 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 .wrp {grid-template-columns: 100%!important;}
}

/* Image */

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

.bildtrenner {width:100%; aspect-ratio: 3/1; overflow: hidden;}
.bildtrenner img {width:100%; height: 100%; object-fit: cover; object-position: center;}

/* Galerie */

.home .gallery {background:#f2f2f2;padding:220px 0 25px 0;position:relative;}
.home .gallery.mb {margin-bottom:220px;}
.home .gallery:before {content:"";position:absolute;top:-2px;display:block;width:100%;height:120px;background:var(--primary-color);clip-path: polygon(50% 0%,100% 0%,100% 20%,50% 100%,0% 20%,0% 0%);}
.home .gallery:after  {content:"";position:absolute;bottom:-120px;display:block;width:100%;height:120px;background:#f2f2f2;clip-path: polygon(50% 0%,100% 0%,100% 20%,50% 100%,0% 20%,0% 0%);}
.home .gallery .text {max-width:820px;margin:0 auto 80px auto;}
.gallery .fresco-gallery:not(.masonry) {display: grid; gap:20px; margin-bottom: 0;}
.gallery .fresco-gallery li {list-style-type: none; margin: 0 0 25px 0;overflow: hidden;}
.gallery .fresco-gallery:not(.masonry) li {margin: 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%;transform:scale(1);clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 10%); transition: var(--transition);}
.gallery .fresco-gallery li:hover img {width: 100%;transform:scale(1.2);clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 10%); transition: var(--transition);}

.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;}

}

/* 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%;}

/* Teasercards */

.home .teasercards  {background:var(--primary-color);padding:220px 0 50px 0; box-sizing: border-box;color:#f2f2f2;margin-bottom:0;position:relative;width: 100%;overflow: hidden;}
.home .teasercards:before {content:"";position:absolute;top:-2px;display:block;width:100%;height:120px;background:#fff;clip-path: polygon(50% 0%,100% 0%,100% 20%,50% 100%,0% 20%,0% 0%);}
.home .teasercards .text {max-width:820px;margin:0 auto 80px auto;}
.teasercards .cards.no-carousel li{position:relative;transition:var(--transition)}
.teasercards .cards.no-carousel li img{clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 10%);transition:var(--transition)}

.teasercards .cards.no-carousel li a{position:absolute;width:100%;height:100%;left:0;top:0;z-index:10;}
.teasercards .cards.no-carousel li .inhalt {position:absolute;font-size:20px;font-weight:700;bottom:0;width:100%;height:22%;text-align:center;background:rgba(0,68,79,0.9);padding:20px 0;box-sizing:border-box;z-index:1;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);transition:var(--transition)}
.teasercards .cards.no-carousel li .inhalt h3 {font-size:20px;font-weight:700;color:#f2f2f2;transition:var(--transition)}
.teasercards .cards.no-carousel li .text {position:absolute;font-size:20px;font-weight:700;left:0;color:#f2f2f2;bottom:0;width:100%;height:22%;text-align:center;background:rgba(0,68,79,0.9);padding:20px 0;box-sizing:border-box;z-index:1;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);transition:var(--transition)}
.teasercards .cards.no-carousel li:hover .inhalt {height:100%;padding:100px 0 20px 0;clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 10%);background:rgba(0,68,79,0.95);transition:var(--transition)}
.teasercards .cards.no-carousel li:hover .text {height:100%;padding:100px 0 20px 0;clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 10%);background:rgba(0,127,146,0.95);transition:var(--transition)}
.teasercards .cards.no-carousel li .inhalt:after {content:"mehr erfahren";display:block;color:#f2f2f2;font-size:16px;margin:0;opacity:0;height:0;transition:var(--transition)}
.teasercards .cards.no-carousel li:hover .inhalt:after {content:"mehr erfahren";display:block;color:#f2f2f2;font-size:16px;margin:20px 0 0 0;opacity:1;transition:var(--transition)}
.teasercards .cards.no-carousel li .text:after {content:"mehr erfahren";display:block;color:#f2f2f2;font-size:16px;margin:0;opacity:0;height:0;transition:var(--transition)}
.teasercards .cards.no-carousel li:hover .text:after {content:"mehr erfahren";display:block;color:#f2f2f2;font-size:16px;margin:20px 0 0 0;opacity:1;transition:var(--transition)}
.home .teasercards h2 {color:#f2f2f2}
.home .teasercards h2 strong {color:var(--secundary-color)}
.teasercards img {width: 100%; aspect-ratio: 2/1.5; height: auto; object-fit: cover;}
.teasercards .cards.no-carousel {display: grid; grid-column-gap: 25px; grid-row-gap: 25px; margin: 0;position: relative;z-index: 10;}
.teasercards .cards.no-carousel li {list-style-type: none; margin: 0;}
.teasercards .splide ul.cards {display: flex; grid-column-gap: unset;}

.splide__arrow--next {right:0!important}
.splide__arrow--prev {left:0!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;}
}

/* Accordion */

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

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

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

@media (max-width: 768px) {
    main.withsidebar .content .blog-grid {grid-template-columns: repeat(2, 1fr);}
}
div.wpforms-container-full .wpforms-form .wpforms-field {padding: 5px 0!important;clear: both;}
div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {height:auto!important;min-height:140px!important;}
div.wpforms-container-full .wpforms-form .wpforms-submit-spinner {display:none!important}
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form .wpforms-page-button {background: var(--primary-color)!important;border: 0!important;color: #f2f2f2!important;font-size:18px!important;padding: 10px 15px;display:block;width:100%;box-sizing: border-box;margin:20px 0;transition:var(--transition)}
div.wpforms-container-full .wpforms-form input[type=submit]:hover, div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover {background: var(--secundary-color)!important;transition:var(--transition)}


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

footer {background:#f2f2f2;padding:40px;font-size:16px;line-height:24px;font-weight:400;}
footer .wrp {display:grid;grid-template-columns: 10% 20% 20% 1fr}
footer .wrp svg {width:70px;height:auto;}
footer .wrp ul {display:grid;grid-template-columns: 25% 25% 1fr;align-self: center;align-items: center;margin:0;}
footer .wrp ul li{list-style-type:none;margin:0;background: url("assets/arrow.png") left center no-repeat;background-size: 13px;padding-left:20px;}
footer .wrp div,footer .wrp address {align-self: center;}
footer .wrp address strong {color:var(--primary-color)}
/* Bottom */

.bottom {background:var(--primary-color);color:#f2f2f2;padding:10px 0;font-size:14px;font-weight:400;}
.bottom a {color:#f2f2f2}
.bottom .wrp {display:grid;grid-template-columns: 1fr 1fr}
.bottom .wrp ul {margin:0;}
.bottom .wrp ul li {margin:0;list-style-type: none;display:inline-block}
.bottom .wrp ul li:after {content:"-";display: inline-block;margin-left:4px;}
.bottom .wrp ul li:nth-child(2):after {content:"";display: none;}
.bottom .copyright {justify-self: end;}

/* 404 */

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

@media (max-width: 1240px) {
    header {top:0}
    .stage .claim {top:13vw;font-size: 35px;line-height: 48px;}
    .teasercards .cards.no-carousel li .inhalt h3 {font-size: 18px;}
    .teasercards .cards.no-carousel li .text {font-size: 20px;}
    .teasercards .cards.no-carousel li .inhalt {line-height:20px;}
    .home.page .siegel {position: absolute;right: 2vw;width:200px}
    .page .siegel {position: absolute;right: 2vw;width:200px}
    .scrolled-s .page .siegel {position: fixed;top:70%;width:130px}
}
@media (max-width: 1024px) {
    .page .stage.mb {margin-bottom:50px;}
    .teasercards .cards.no-carousel li .inhalt {height:inherit;}
    .teasercards .cards.no-carousel li .text {height:inherit;}
    .teasercards .cards.no-carousel li .inhalt {position:absolute;font-size:20px;font-weight:700;bottom:0;width:100%;height:22%;text-align:center;background:rgba(0,68,79,0.9);padding:20px 0;box-sizing:border-box;z-index:1;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);transition:var(--transition)}
    .teasercards .cards.no-carousel li:hover .inhalt {position:absolute;font-size:20px;font-weight:700;bottom:0;width:100%;height:22%;text-align:center;background:rgba(0,68,79,0.9);padding:20px 0;box-sizing:border-box;z-index:1;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);transition:var(--transition)}
    .teasercards .cards.no-carousel li .text {position:absolute;font-size:20px;font-weight:700;bottom:0;width:100%;height:22%;text-align:center;background:rgba(0,68,79,0.9);padding:20px 0;box-sizing:border-box;z-index:1;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);transition:var(--transition)}
    .teasercards .cards.no-carousel li:hover .text {position:absolute;font-size:20px;font-weight:700;bottom:0;width:100%;height:22%;text-align:center;background:rgba(0,68,79,0.9);padding:20px 0;box-sizing:border-box;z-index:1;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);transition:var(--transition)}
    .teasercards .cards.no-carousel li .inhalt:after {display:none;}
    .teasercards .cards.no-carousel li:hover .inhalt:after {disolay:none}
    .teasercards .cards.no-carousel li .text:after {display:none;}
    .teasercards .cards.no-carousel li:hover .text:after {disolay:none}
    .teasercards .cards.no-carousel li:hover img{clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 10%);transition:var(--transition)}
    footer .wrp {grid-template-columns: 12% 25% 1fr;}
    footer .wrp ul {display:none}
    .home.page .siegel,.scrolled-s .home.page .siegel {width:180px;transition:var(--transition)}
    .page .siegel,.scrolled-s .page .siegel {width:180px;transition:var(--transition)}
    .scrolled-s .page .siegel {position:absolute;top: 25vw;right:2vw;width:130px;transition:var(--transition)}
    .scrolled-s .home.page .siegel {position:absolute;top: 25vw;right:2vw;width:130px;transition:var(--transition)}
}
@media (max-width: 940px) {
    .stage.mb {margin-bottom: 50px;}
    .stage .claim {top: 13vw;font-size: 30px;line-height: 42px;}
    .stage .claim p {max-width: 600px;}
    .home .teasercards {padding: 200px 0 50px 0;}
    .home .gallery.mb {margin-bottom: 200px;}
    .home .gallery {padding: 200px 0 25px 0;}
    .home.page .text {margin: 0 auto 50px auto;}
    .text .buttons.ja ul li:nth-child(odd) a {font-size: 20px;}
    .text .buttons.ja ul li:nth-child(even) a {font-size: 20px;}
}
@media (max-width: 800px) {
    .stage .claim {top: 13vw;font-size: 24px;line-height: 36px;}
    .stage .claim p {max-width: 400px;padding: 15px 0;}
    .home.page .text {max-width:640px;}
    .texttext .wrp {grid-template-columns: 1fr;}
    .teasercards .cards.no-carousel li .text {font-size: 18px;line-height:18px;}
    .wpforms-container {margin-top:20px!important;}
    footer .wrp {grid-template-columns: 1fr;text-align: center;}
    footer .wrp address {margin:10px 0}
}
@media (max-width: 720px) {
    .teasercards .cards.no-carousel li .inhalt {font-size:18px;line-height:18px;}
    .teasercards .cards.no-carousel li .inhalt h3 {font-size: 16px;}
    .teasercards .cards.no-carousel li .text {font-size: 16px;line-height:18px;}
    .home .teasercards:before, .home .gallery:before,.home .gallery:after {content: "";clip-path: polygon(50% 0%,100% 0%,100% 40%,50% 100%,0% 40%,0% 0%);}
    .text.grey:after {    clip-path: polygon(50% 0%,100% 0%,100% 40%,50% 100%,0% 40%,0% 0%);}
    .text.grey {margin-bottom: 175px;}
    .gallery .text {padding:0 20px}
}
@media (max-width: 640px) {
    .stage .claim {top: 16vw;font-size: 22px;line-height: 30px;}
    .stage .claim p {max-width: 380px;padding: 8px 0;}
    .teasercards .cards.no-carousel {grid-template-columns: repeat(1, 1fr)!important;}
    .teasercards .cards.no-carousel li .inhalt h3 {font-size: 20px;}
    .teasercards .cards.no-carousel li .text {font-size: 20px;line-height:22px;}
    .home.page .siegel,.scrolled-s .home.page .siegel {width:150px;}
    .page .siegel,.scrolled-s .page .siegel {width:150px;}
    .page .siegel {top:22vw}
    .scrolled-s .page .siegel {width:130px}
    .scrolled-s .home.page .siegel {width:130px}
}
@media (max-width: 550px) {
    .gallery .video-gallery-grid {grid-template-columns: 100%!important;}
    .gallery .fresco-gallery {grid-template-columns: repeat(3, 1fr)!important;}
    .gallery .fresco-gallery:not(.masonry) {gap: 13px;}
}
@media (max-width: 540px) {
    header .wrp {padding:0 20px;}
    .stage .claim {top:20vw}
    .text .buttons.ja ul {grid-template-columns: 1fr;row-gap: 20px}
    .home.page .siegel,.scrolled-s .home.page .siegel {width:135px;}
    .page .siegel,.scrolled-s .page .siegel {width:135px;}
    .home.page .siegel {top: 33vw;}
    .page .siegel {top: 30vw;}
}
@media (max-width: 480px) {
    .stage .claim {top:21vw}
    .home.page .stage img {min-height:240px;}
    .page .stage img {min-height:170px;}
    .page .siegel {top: 26vw;}
    .page .stage.mb {margin-bottom: 35px;}
    .home .teasercards {padding: 175px 0 50px 0;}
    .home .gallery {padding: 175px 0 25px 0;}
    .home .gallery.mb {margin-bottom: 155px;}
    .bottom .wrp {display: grid;grid-template-columns: 1fr;text-align:center}
    .home.page .siegel {top:40vw}
    .teasercards .cards.no-carousel li img{max-height:180px;}
    .teasercards .cards.no-carousel li .inhalt,.teasercards .cards.no-carousel li .text {height:inherit;}
    .home.page .text {margin: 0 auto;text-align:left;}
    .home.page .text h1 {text-align:left!important;}
    .home.page .text p {text-align:left!important;}
    .home.page .teasercards .text h2 {text-align:center!important;}
    .home.page .teasercards .text p {text-align:center!important;}
    .gallery .text h2 {text-align:center!important;}
    .home.page .gallery .text p {text-align:center!important;}
    .text.grey:after {bottom: -100px;z-index:-1}
    .text.grey {margin-bottom: 130px;}
    .home.page .siegel, .scrolled-s .home.page .siegel,.page .siegel {
        width: 140px;
    }
}
@media (max-width: 420px) {
    .stage .claim {top:27vw;font-size: 18px;line-height: 25px;}
    .stage .claim p {max-width: inherit;padding: 5px 0;border:0;}
    .home.page .text {margin: 0 auto;}
    .home .teasercards {padding: 175px 0 0 0;}
    .home .gallery {padding: 175px 0 0 0;}
    .teasercards .cards.no-carousel {margin-top:20px;}
    .gallery .fresco-gallery:not(.masonry) {margin-top:20px}
    .scrolled-s .page .siegel {opacity: 0;height:0;width:0;}
    .home.page .siegel {top: 45vw;}
}
@media (max-width: 375px) {
    .stage .claim {top:28vw;}
    .teasercards .cards.no-carousel li .inhalt h3 {font-size: 17px;}
    .teasercards .cards.no-carousel li .text {font-size: 17px;}
    .home.page .siegel {top: 49vw;}
    .page .siegel {top: 28vw;}


}