@charset "UTF-8";
/*
Theme Name: Autohaus Papastathis
Theme URI: http://www.autohaus-papastathis.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
*/

/*Global Reset*/

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

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

/* bebas-neue-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: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/bebas-neue-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-100 - 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: 'Lato';
    font-style: normal;
    font-weight: 100;
    src: url('assets/fonts/lato-v24-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url('assets/fonts/lato-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-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: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-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: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: url('assets/fonts/lato-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

* {
    --font-family-hl: "Bebas Neue", sans-serif;
    --font-family: "Lato", sans-serif;
    --transition: .2s ease;
    --wrp-width: 1360px;
    --font-size: 18px;
    --line-height: calc(var(--font-size) * 1.8);
    --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    --border-radius: 15px;
    --primary-color: #15395D;
    --secundary-color: #94C11F;
    --text-color: #515151;
}

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

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

@media (max-width: 1024px){
    body{font-size: 16px;line-height: 28px;}
}

/* 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%;}
main.withsidebar .content .wrp {width: 100%;}

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

/* Typo Styles */

h1,h2,h3,h4,h5,h6 {font-family: var(--font-family-hl);font-weight: 300}


h1{margin-bottom: 50px; font-size: 90px;line-height: 110px;color: var(--primary-color);}
h2{margin:0;font-size: 50px;margin-bottom: 50px;}
h3{margin:0;}

@media (max-width: 1024px) {
    h1{font-size: 70px;line-height: 80px;}
}
@media (max-width: 767px) {
    h1{font-size: 50px;line-height: 60px;}
}

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: 8px 55px; background: var(--secundary-color); display: inline-block;border-radius: 10px;color: white;font-family: var(--font-family-hl);box-shadow: var(--box-shadow);}
.btn:hover {background-color: var(--primary-color);color: var(--secundary-color);transition: var(--transition);scale: 1.1}
a.btn {font-size: 20px}
p {margin-bottom: var(--line-height);}
p:last-child {margin-bottom: 50px;}
address {font-style: normal; color: var(--text-color);}
address a {display: block;}
ol, ul {margin-bottom: var(--line-height);}
li {margin-left: 20px;}
.teasercards.servicebg .st0 {stroke: none}
.whitebg {background-color: white;padding: 50px 0;}
.hideicon {display: none;}

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

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

/* Submenu */

@media (min-width: 1025px){

    #mainnav ul.mainnav.desktop {display: flex; align-items: center; margin: 0;}
    #mainnav ul.infonav {background: var(--primary-color);justify-content: end;position: relative}
    #mainnav ul.infonav li {z-index:1;}
    #mainnav ul.infonav:before {content:'';background-color: var(--primary-color);height: 80px;width: 80px;transform: rotate(45deg);position: absolute;left: -40px;top: -47px}
    #mainnav ul.infonav:after {content:'';background-color: var(--primary-color);position: absolute;height: 50px;width: 200%;left: 100%}
    #mainnav ul.mainnav.infonav li a {font-size:16px; color: white;padding:0;height: 50px;line-height: 50px}
    #mainnav ul.mainnav.desktop li {font-size: 25px;font-family: var(--font-family-hl);}

    html.scrolled #mainnav ul.mainnav li a {padding: 15px 0; transition: var(--transition);}
    html.scrolled #mainnav ul.mainnav.infonav li a {padding: 0; transition: var(--transition);}

    #mainnav ul.mainnav li.menu-item-has-children {position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {position: absolute; top: 84px; left: 0; display: block; height: auto; max-height: 0; overflow: hidden;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {width:200px; height: 100%; padding: 8px 0 8px 7px; transition: 0.8s ease; background: #f5f5f5; margin: 0;}
    #mainnav 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: var(--primary-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover a {color: #fff;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {padding: 3px;}
    #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: #fff; width: 100%; max-width: 500px; transform: translateX(100%); transition: var(--transition); box-shadow: var(--box-shadow); z-index: 2;}
    #mainnav.active {transform: translateX(0); transition: var(--transition);}
    #mainnav .head {display: grid;grid-template-columns: auto auto 55px; align-items: center; padding: 20px; box-sizing: border-box; box-shadow: 0 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:last-child {width: 30px; height: 30px;}
    #mainnav .head .buttons a svg path {fill: var(--primary-color);stroke: none;}

    /* 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: 0;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; transition: var(--transition);}
}

/* ########## Header ########## */
@media (max-width:1024px){
    header {padding: 36px 0;}
}

@media (max-width:767px){
    header .header-grid {grid-template-columns: 200px auto!important;}
    .flyout,.flyout.active {display: none!important;}
}

header {position: fixed; top: 0; width: 100%; z-index: 10; box-sizing: border-box; background: #fff; box-shadow: var(--box-shadow);}
header .header-grid {display: grid; grid-template-columns: 300px 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 .logo a img {width: 100%;}
header .header-grid .mainnav-toggle {display: none;justify-self: end;}

.flyout {display: none;position: fixed;top: 20%;right: 0;z-index: 8;width: 40px;}
.flyout.active {display: block;}
.flyout-con-1 {background: var(--secundary-color);position: absolute;right: -260px;width: 313px;transition: all 0.5s;border-radius: 50px;height: 50px;}
.flyout-con-2 {background: var(--secundary-color);position: absolute;right: -260px;width: 313px;transition: all 0.5s;border-radius: 50px;height: 50px;margin-top: 60px;}
.flyout-con-3 {background: var(--secundary-color);position: absolute;right: -260px;width: 313px;transition: all 0.5s;border-radius: 50px;height: 50px;margin-top: 120px;}
.flyout-con-1:hover {right: -20px; transition: all 0.5s;}
.flyout-con-2:hover {right: -20px; transition: all 0.5s;}
.flyout-con-3:hover {right: -20px; transition: all 0.5s;}

.flyout svg {width: 60px;height:30px;margin-top: 10px;fill: white;}
.flyout svg path {fill: white;}
.flyout a {font-family: var(--font-family);color: white;display: inline-block;vertical-align: top;padding: 7px;width: 70%;}
.flyout p {font-family: var(--font-family);color: white;display: inline-block;vertical-align: top;padding: 7px;width: 70%;line-height: 18px}

@media (max-width: 1024px){
    .flyout a {margin-top: 3px;}
}

/* Kopfbereich Startseite / Unterseite  */

.stage {aspect-ratio: 3/1; width: 100%; min-height: 400px; position: relative; margin-top: 100px;margin-bottom: -100px;}
.stage .wrp {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}
.stage img {width: 100%; height: 100%; object-fit: cover; object-position: center;position: relative}

@media (max-width: 767px){
    .stage {aspect-ratio: unset;min-height:250px;margin-bottom: -115px;}
}

.stage.subpage {aspect-ratio: 3/.7; width: 100%; position: relative;margin-bottom: 100px;}


.introblock {text-align: center;margin-bottom: 200px;}
.introblock .wrp .subpagehead {display:inline-block;background-color: var(--primary-color);border-radius: 10px;border: 2px solid white;padding: 56px 40px 46px 40px;text-align: center;position: absolute;left: 50%;transform: translateX(-50%);top: -150px;}
.introblock .wrp h1 {color: white;margin-bottom: 0;line-height: 50px;white-space: nowrap;}

@media (max-width: 500px){
    .introblock .wrp .subpagehead {padding: 35px 30px 18px 30px}
}

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

/* Text */

.text.mb {width: 100%;}
.text.mb p:last-child {margin-bottom: 0;}
.text.multiple-col .wrp {-webkit-columns: 2 350px; -moz-columns: 2 350px; columns: 2 350px; -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em;}
.text.align-center {text-align: center;}
.text.mb .wrp a {align-items: center;}
.text.mb .wrp .btn {padding: 13px 29px;}

@media (max-width: 1240px){
    .text.mb .wrp .btn {padding: 11px 19px;}
    .text.mb .wrp a {font-size: 25px;}
}

@media (max-width: 767px){
    .text.mb .wrp h2 {font-size: 40px;line-height: 40px;}
}

.btn {
    position: relative;
    overflow: hidden;
    animation: pulse 2s infinite;
}

@keyframes pulse {0%
    {scale: 1;}50% {scale: 1.05;}100% {scale: 1;}
}


/* Text Bild */

.textbild .wrp {display: grid; align-items: center; justify-content: space-between; box-sizing: border-box; gap: 50px;}
.textbild .text {border-radius: 5px 0 0 5px; box-sizing: border-box;}
.textbild .bild {width: 100%;height: 100%;}
.textbild .bild img {width: 100%; aspect-ratio: 1.58; object-fit: cover;border-radius: 10px;height: 100%;}
.textbild h2 {line-height: 50px}


@media (max-width: 500px) {
    .textbild .bild img {display: none;}
    .textbild.erstbild {padding: 50px 0;}
    .textbild h2 {font-size: 40px; margin-bottom: 35px;line-height: 40px}
}

@media (max-width: 768px) {
    .textbild .text {order: 1!important;}
    .textbild .bild {order: 2!important;}
    .textbild .wrp {grid-template-columns: 100%!important;}
    .textbild.erstbild .bild.erstbild img {display: none;}
}

/* Teasercards */

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

.teasercard-item .img-wrp {width: 100%; aspect-ratio: 2/1.5; display: block;}
.teasercard-item .img-wrp img {width: 100%; height: 100%; object-fit: cover;}

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

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



.teasercards .teasercard-item.create-item  {box-shadow:var(--box-shadow);background-color: var(--primary-color);border-radius: 10px;text-align: center;width: 100%;border: 2px solid white;color: white;padding: 15px;box-sizing: border-box;}

.teasercards .teasercard-item.create-item h2 {margin-bottom: 16px;display: inline-block;border-bottom: 1px solid white;padding: 0 15px 15px 15px;line-height: normal;}
.teasercards .teasercard-item.create-item p {margin-bottom: 20px}

.teasercards .teasercard-item.create-item:hover {transition: 0.3s ease-out;scale: 1.03;}
.teasercards .teasercard-item.create-item:hover .img-wrp  {transition: 0.8s ease;rotate: 360deg;scale: 1.01;}

.teasercards .teasercard-item.create-item .text-btn {background-color: var(--secundary-color);border-radius: 5px;padding:13px 19px;font-family: var(--font-family-hl);display: inline-block;margin-bottom: 20px;line-height: 13px;}
.teasercards .teasercard-item.create-item .img-wrp {display:block;background-color: white; height: 78px;width: 78px;border-radius: 50px;justify-content: center;margin: -40px auto 10px;}

.teasercards .teasercard-item.create-item .img-wrp svg {width: 70%}
.teasercards .teasercard-item.create-item .img-wrp svg .st0 {fill: #15395D;stroke: none!important;}

@media (max-width: 900px){
    .teasercards .teasercard-item.create-item p {min-height: 84px;}
}

@media (max-width: 500px){
    .teasercards {margin-bottom: 75px;}
}

@media (max-width: 767px){
    .teasercards.mb .cards.no-carousel{grid-template-columns: 100%!important;gap: 5%;justify-items: center;}
    .teasercards .teasercard-item.create-item {margin-top: 0}
    .teasercards .teasercard-item.create-item:last-child {margin-bottom: 50px;}
    .teasercards .teasercard-item.create-item h2 {font-size: 35px;}
    .teasercards .teasercard-item.create-item p {min-height: unset;}
    .teasercards .teasercard-item.create-item .img-wrp {height: 65px;width: 65px;}
    .teasercards .teasercard-item.create-item:hover {margin-top:initial;scale: initial;}
    .teasercards .teasercard-item.create-item:hover .img-wrp  {rotate: initial;scale: initial;}
}

/*Service-Teasercards */

.teasercards.servicebg {background-color: var(--primary-color);padding: 100px 0;margin-bottom: 2px}
.teasercards.servicebg h2 {position: relative;color: white;line-height: 50px;}
.teasercards.servicebg h2:before {content:'';position: absolute; background-color: white;height: 4px;width: 200px; top: 104px;}
.teasercards.servicebg .cards.no-carousel {gap: 43px;}
.teasercards.servicebg .cards.no-carousel:first-child  {display: none}
.teasercards.servicebg .teasercard-item.service-item {text-align: center;color: white;font-family: var(--font-family);background-color: rgba(255, 255, 255, .1) ;border-radius: 10px;transition: var(--transition);padding: 10px 30px 40px 30px}
.teasercards.servicebg .teasercard-item.service-item:hover {scale: 1.03;transition: var(--transition)}
.teasercards.servicebg .teasercard-item.service-item .img-wrp {height: 55px;width: 55px;margin: 40px auto 30px auto}
.teasercards.servicebg .teasercard-item.service-item p {margin: 0}
.teasercards.servicebg .teasercard-item.service-item h3 {position: relative;font-size: 30px;padding-bottom: 50px;display: inline-block}
.teasercards.servicebg .teasercard-item.service-item h3:before {content:'';position: absolute;height: 1px;width: 150px; top: 57px;left: 50%;transform:translateX(-50%);background-color: white }
.teasercards.servicebg .teasercard-item.service-item .img-wrp svg .st0 {fill: var(--secundary-color)}

.page-id-923 .teasercards.mb.servicebg {margin-bottom: 100px;}
.page-id-923 .teasercards.servicebg h2 {display: none;}


@media (max-width: 1024px) {
    .teasercards.servicebg .cards.no-carousel {grid-template-columns: repeat(2, 1fr)!important;}
}
@media (max-width: 767px) {
    .teasercards.servicebg .teasercard-item.service-item h3 {font-size: 25px;}
    .teasercards.servicebg .teasercard-item.service-item:hover {scale: initial;}
    .teasercards.servicebg .cards.no-carousel {grid-template-columns: 100%!important;}
}

@media (max-width: 500px) {
    .teasercards.servicebg {padding: 50px 0;}
    .teasercards .cards.no-carousel {grid-template-columns: 100% !important;}
    .teasercards.servicebg h2 {font-size: 40px;line-height: 40px;}
    .teasercards.servicebg h2:before {top: 85px;width: 185px;}

}

/*Rezensionen*/

.rezensionen h2 {position: relative;color: var(--primary-color);}
.rezensionen h2:before {content:'';position: absolute; background-color: var(--primary-color);height: 4px;width: 200px; top: 40px;}

.rezensionen .cards.no-carousel {display: grid;grid-template-columns: repeat(3, 1fr);gap: 43px;text-align: center}
.rezensionen .cards.no-carousel .rezensionen-item {background-color: white;border-radius: 10px;box-shadow: var(--box-shadow);padding:50px 34px 30px 34px;}
.rezensionen .cards.no-carousel .rezensionen-item p:first-child {opacity: unset;margin-bottom: 0!important;}
.rezensionen .cards.no-carousel .rezensionen-item p:last-child {margin-bottom: 0;opacity: .5;font-style: italic;font-size: 16px;}

.rezensionen .cards.no-carousel .rezensionen-item h3 {font-size: 18px;position: relative;padding-bottom: 0;
    font-family: var(--font-family), serif;font-weight:400;}
.rezensionen .cards.no-carousel .rezensionen-item h3:before {content:'';background-color: #8B8B8B ;width: 90%;height: 1px;position: absolute;top: -19px;left: 50%;transform: translateX(-50%)}

.popupbutton {font-family: var(--font-family);color: var(--secundary-color);cursor: pointer;display: block;margin-bottom: 45px;}


.popupcontent,.contactpopup-content{background-color: var(--primary-color);color: white;font-family: var(--font-family);padding: 60px 50px 20px 50px;top: 20%;position: absolute;width: 40%;left: 50%;transform: translateX(-50%);border-radius: 10px;}
.popupcontent h3 {font-family: var(--font-family);font-weight: 400;}
.popupcontent h3:before {content:'';background-color: white ;width: 70%;height: 1px;position: absolute;left:50%;bottom: 90px;transform: translateX(-50%)}
.popupcontent p:last-child {opacity: .5;font-style: italic;margin-bottom: 0;}
.popup,.contactpopup {position:fixed;opacity: 0;top: 0;right: 0;bottom: 0;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);left: 50%;transform: translateX(-50%);width: 100%;z-index: -2;transition: var(--transition);}
.activepop {z-index: 2;transition: var(--transition);opacity: 100;overflow-y: auto;}
.closepopup {height: 20px;width: 20px;background: url("assets/icons/close.svg")no-repeat;display: block;right: 20px;top: 20px;position: absolute;background-size: contain;}
.closepopup:hover {transition: var(--transition);rotate: 180deg;cursor: pointer}

.contactpopup-content h2 {line-height: 30px; font-size: 30px;margin-bottom: 0;}



@media (max-width: 1350px){
    .rezensionen .cards.no-carousel{grid-template-columns: repeat(2, 1fr)}
}


@media (max-width: 767px){
    .popupcontent,.contactpopup-content {width: 75%;padding:12% 5% 5% 5%}
    .popupcontent h3 {font-size: 18px;}
    .popup {backdrop-filter: blur(50px);background: rgba(255, 255, 255, 0.1);}
    .rezensionen .cards.no-carousel{grid-template-columns: 100%!important;}
}

@media (max-width: 500px){
    .contactpopup-content h2 {line-height: 20px; font-size: 20px;margin-bottom: 0;}
    .rezensionen h2 {font-size: 40px;line-height: 40px;}
    .rezensionen h2:before {width: 155px;}


}

.contactbtn {cursor:pointer;padding: 8px 55px; background: var(--secundary-color); display: inline-block;border-radius: 10px;color: white;font-family: var(--font-family-hl);box-shadow: var(--box-shadow)}


/* Image */

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

.bildtrenner {width:100%;height: 480px; aspect-ratio: 3/1; overflow: hidden; position: relative;}
.bildtrenner img {width:100%; height: 100%; object-fit: cover; object-position: center;}
.bildtrenner .wrp {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}

@media (max-width: 767px){
    .bildtrenner {height: 200px; margin-bottom: 50px;}
}

/* Galerie */

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

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

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

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

/* oEmbed */

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

/* Accordion */

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

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

main.withsidebar .content .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 50px; grid-row-gap: 50px;}
main.withsidebar .content .blog-grid .post {width: 100%;}
main.withsidebar .content .blog-grid .post img {width: 100%; height: auto; object-fit: cover;}

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

/* Sidebar */

main.withsidebar .sidebar {background-color: white;width: 100%; position: -webkit-sticky; position: sticky; top: 150px; border-radius: 10px; padding: 25px; box-sizing: border-box;box-shadow: var(--box-shadow);}
main.withsidebar .sidebar ul li {list-style-type: none;margin-left: 0;margin-bottom: 5px}
main.withsidebar .sidebar ul li a {padding: 3px 0 3px 10px;display: block;border-left: 5px solid var(--primary-color);background-color: #e7e7e7;font-size: 16px;}
main.withsidebar .sidebar h3 {margin-bottom: 10px;}
main.withsidebar .sidebar .sidebar-contact .contact {font-size: 16px;}


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

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

/* ########## Kontaktformular ########## */

div.wpforms-container-full .wpforms-form input {border: none!important;}
div.wpforms-container-full .wpforms-form textarea {border: none!important;}
div.wpforms-container-full .wpforms-form .wpforms-submit-spinner {display: none!important;}
div.wpforms-container-full .wpforms-form button[type=submit] {padding: 8px 55px!important; background: var(--secundary-color) !important; display: inline-block;border-radius: 10px!important;color: white!important;font-family: var(--font-family-hl) !important;box-shadow: var(--box-shadow) !important;border: none!important;transition: var(--transition);}
div.wpforms-container-full .wpforms-form button[type=submit]:hover {background: var(--primary-color) !important; transition: var(--transition);}

    /* ########## Footer ########## */
footer .wrp{display: grid;grid-template-columns: repeat(4,1fr);gap:4%; }

footer {background-color: #15395D;padding: 50px 0;color: white;font-size: 16px;line-height: 28px}
footer p {margin: 0;}
footer h4 {font-size: 30px;color: var(--secundary-color);padding-bottom: 30px}

footer .kontakt a {color: white;font-family: var(--font-family), serif;width: auto}
footer .kontakt a:hover {color: var(--secundary-color);transition: var(--transition);}

.footerinfo {width: 300px;}
.footerinfo p {margin-bottom: 30px;}
.footerinfo img {height: 70px;padding-right: 10px}
.footerinfo img:last-child {height: 50px;padding-right: 10px}
.logo-footer svg {height: 50px;margin-bottom: 30px;}

.tab {width: 70px;display: inline-block;}
.tab1 {width: 95px;display: inline-block;}

@media (max-width: 1220px) {
    footer .wrp{display: grid;grid-template-columns: repeat(2,1fr);gap:5%;grid-row-gap: 17%;padding-bottom: 86px; }
}

@media (max-width: 767px) {
    footer .wrp{display: grid;grid-template-columns: 100%;gap:5%;padding-bottom: 126px;}
    footer .wrp .standorte p:last-child {margin-bottom: 0;}
}

/* Bottom */
.bottom {font-family: var(--font-family);font-size: 14px;color: var(--primary-color);background-color: white;}
.bottom .wrp {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}

/* 404 */

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