@charset "UTF-8";
/*
Theme Name: Floradesigns
Theme URI: http://www.floradesigns.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{;width:100%;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

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


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

* {
    --font-family: "Bicyclette", sans-serif;
    --transition: .2s ease;
    --wrp-width: 1350px;
    --font-size: 20px;
    --line-height: calc(var(--font-size) * 1.5);
    --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    --border-radius: 15px;
    --primary-color: #F9FAF6;
    --secondary-color: #739E65;
    --text-color: #40454A;
}

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

html {scroll-behavior: smooth;}
body {font-size: var(--font-size); font-family: var(--font-family), sans-serif; line-height: var(--line-height); color: var(--text-color);}
img {-ms-interpolation-mode:bicubic; vertical-align: bottom;}
svg {width: 100%; height: 100%;}
hr {border:none;height:1px;background:#ddd; margin:0;}

.wrp {max-width: var(--wrp-width); width: 90%; margin: 0 auto; position:relative; box-sizing:border-box;}

/* Margins */

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


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

/* Page Build */

main.withsidebar .page-build {display: grid; grid-template-columns: 70% 25%; align-items: flex-start; justify-content: space-between; max-width: var(--wrp-width); width: 90%; margin: 0 auto;}
main.withsidebar .content .wrp {width: 100%;}

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

/* Typo Styles */

h1{margin:0; font-size: 70px; line-height: 75px; text-transform: uppercase;}
h2{margin-bottom: 25px; font-size: 30px; line-height: 35px; text-transform: uppercase;}
h3{margin-bottom:15px;}

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

:target {scroll-margin-top: 300px;}

.btn {padding: 15px 16px; background: var(--secondary-color); display: inline-block; font-weight: 700; border-radius: 7px; text-transform: uppercase; color: var(--primary-color); border: 2px solid transparent;transition: all 0.2s ease; }
.btn:hover {background: none; border: 2px var(--secondary-color) solid; color: var(--secondary-color); }

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

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

#offcanvas 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 {display:block; color: var(--text-color); transition: var(--transition); padding: 30px 0; text-transform: uppercase; font-weight: 600;}
#mainnav ul.mainnav.desktop li a:hover, #mainnav ul > li.current-menu-item > a{color: var(--secondary-color); transition: var(--transition);}

/* Submenu */

@media (min-width: 950px){
    #offcanvas {display: none;}
    #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: 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(--secondary-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover a {color: var(--secondary-color);}
    #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(--secondary-color);}

    /* Desktop ausblenden */

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

@media (max-width: 950px) {

    #mainnav {display: none;}

    /* Offcanvas */

    #offcanvas ul.mainnav.smart {display:block;}
    #offcanvas {position: fixed; top: 0; right: 0; bottom: 0; background: #fff; width: 80%; max-width: 500px; transform: translateX(120%); transition: var(--transition); box-shadow: var(--box-shadow); z-index: 10;}
    #offcanvas.active {transform: translateX(0); transition: var(--transition);}
    #offcanvas .head {display: grid;grid-template-columns:  auto 55px; align-items: center; padding: 40px 10px; box-sizing: border-box;}
    #offcanvas .head p {margin: 0; font-size: 25px; color: var(--text-color);}
    #offcanvas .head .buttons {display: flex; justify-content: center;justify-self: end;}

    #offcanvas .head .buttons a {width: 50px; height: 50px; border-radius: 2px; margin-left: 5px; display: flex; align-items: center; justify-content: space-around; }
    #offcanvas .head .buttons a:first-child {margin-left: 0;}
    #offcanvas .head .buttons a svg {width: 25px; height: 25px;}
    #offcanvas .head .buttons a svg g path {stroke: #a4a4a4;}

    /* Submenu */

    #offcanvas ul.mainnav.smart {display: block;}
    #offcanvas ul.mainnav li { box-sizing: border-box; margin: 10px; background: var(--secondary-color); list-style-type: none; padding: 10px; border-radius: 10px;}
    #offcanvas ul.mainnav li a {font-size: var(--font-size); padding: 10px 45px 10px 5%; display: block; font-weight: 600; text-transform: uppercase; color: var(--primary-color);}
    #offcanvas ul.mainnav li a:hover {color: var(--text-color);}

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

    /* Offcanvas Sub Layer 1 */

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

    /* Offcanvas Sub Layer 2 */

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

    #offcanvas 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;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; transition: var(--transition); margin-right: 20px;}
    .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%;border-radius: 4px;height: 2px;transition: all .3s;position: relative;background: var(--secondary-color)}
    .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 ########## */

header {position: fixed; top: 0; width: 90%; z-index: 1; padding: 15px 50px; box-sizing: border-box;  max-width: var(--wrp-width) !important;left: 50%; transform: translateX(-50%); margin-top: 20px; border-radius: 10px; background: var(--primary-color); transition:  var(--transition);}
header .header-grid {display: grid; grid-template-columns: 200px auto; grid-template-rows: auto; justify-items: start; align-items: center; justify-content: space-between;}
header .header-grid .logo {width: 100%;}
header .header-grid .logo a {display: flex; align-items: center;}
header .header-grid .mainnav-toggle {display: none;justify-self: end;}

html.scrolled header {box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.1); margin-top: -1px; border-radius: 0 0 10px 10px;background: #fff; z-index: 10;}

/* Kopfbereich Startseite / Unterseite  */

.stage {width: 100%; min-height: 400px; position: relative; margin-top: 160px; overflow: hidden;}
.stage .wrp {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.stage img {width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 10px;}
.stage .stage-content {background: var(--primary-color); border-radius: 10px; position: relative;}
.stage .stage-content .stagetext {padding: 200px 50px;}
.stage .stage-content .stagetext h2 {font-size: 20px; font-weight: 600; text-transform: uppercase; color: var(--secondary-color);}
.stage .stage-content .contact-buttons {display: flex; position: absolute; bottom: 50px; left: 50px; right: 50px; gap: 20px;}
.stage .stage-content .contact-buttons .btn { background: var(--text-color);color: var(--primary-color); width: 90%; text-align: center; display: inline-flex;align-items: center;gap: 10px; justify-content: center; text-transform: unset; }
.stage .stage-content .contact-buttons .btn:hover { background: var(--secondary-color);}
.stage .stage-content .contact-buttons .btn svg {width: 25px; height: 25px; fill: var(--primary-color);}

.stage.subpage { width: 100%; position: relative; min-height: unset;}
.stage.subpage .wrp {display: block;}
.stage.subpage .stage-content {align-content: center;padding: 100px 50px;}

@media (max-width: 1100px) {
    .stage .wrp {grid-template-columns: auto;}
    .stage.subpage .wrp img {display: none;}
}

@media (max-width: 700px) {
    .stage {margin-top: 120px;}
    .stage .stage-content .stagetext {padding: 120px 0 200px 30px ;}
    .stage .stage-content .contact-buttons {flex-direction: column;bottom: 30px; left: 30px; right: 30px}
    .stage .wrp .stage-content h1 {font-size: 60px;}

    .stage.subpage .stage-content {padding: 70px 0 70px 30px ;}
    .stage.subpage .stage-content h1 {font-size: 40px;}

    header .header-grid {grid-template-columns: 120px auto;}
    header {grid-template-columns: 120px auto; padding: 15px 30px; transition:  var(--transition);}
}




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

/* Text */

.text.multiple-col .wrp {-webkit-columns: 2 350px; -moz-columns: 2 350px; columns: 2 350px; -webkit-column-gap: 4em; -moz-column-gap: 4em; column-gap: 4em;}
.text.align-center {text-align: center; }
.text.align-center .wrp {background: var(--primary-color); padding: 40px; border-radius: 10px;}
.text .wrp p:first-of-type {margin-top: 25px;}
.text.align-center h2 {margin-bottom: 0;}

/* Text Bild */

.textbild .wrp {display: grid; align-items: center; gap: 20px; box-sizing: border-box;}
.textbild .text {border-radius: 10px; box-sizing: border-box; background: var(--primary-color); padding: 50px 50px; height: 100%; align-content: center;}
.textbild .bild {width: 100%; height: 100%; aspect-ratio: 2/1;}
.textbild .bild img {width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
.textbild .text p {margin-bottom: 0;}
.textbild .text h2 {margin-bottom: 25px; hyphens: auto;}
.textbild .text a.btn {margin-top: 25px;}

@media (max-width: 768px) {
    .textbild {margin-bottom: 50px;}
    .textbild .text {order: 1!important; padding: 30px;}
    .textbild .bild {order: 2!important;}
    .textbild .wrp {grid-template-columns: 100%!important; gap: 20px;}
}

@media (max-width: 550px) {
    .textbild .text {padding: 30px;}
}

/* Teasercards */

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

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

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

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

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

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

/* Image */

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

.bildtrenner {width:100%; aspect-ratio: 3/1; overflow: hidden; position: relative; max-height: 400px;}
.bildtrenner:before {width:100%; height: 100%; position: absolute; content: ''; background: black; opacity:.4;}
.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;}
.bildtrenner .wrp .stage-content {color: var(--primary-color); width: 50%;}

@media (max-width: 800px) {
    .bildtrenner {max-height: unset; aspect-ratio: unset;}
    .bildtrenner .wrp .stage-content { width: 100%;}
}


/* Galerie*/

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

.gallery .masonry {gap: 20px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: min-content;}
.gallery .masonry .gallery-item:nth-child(odd) {grid-column: span 2;}
.gallery .masonry .gallery-item:nth-child(even) {grid-column: span 3;}
.gallery .masonry .gallery-item:nth-child(4n+1) {grid-column: 1 / span 2;}
.gallery .masonry .gallery-item:nth-child(4n+2) {grid-column: 3 / span 3;}
.gallery .masonry .gallery-item:nth-child(4n+3) {grid-column: 1 / span 3;}
.gallery .masonry .gallery-item:nth-child(4n+4) {grid-column: 4 / span 2;}

.gallery .gallery-item.hidden {display: none;}
.gallery .gallery-loadmore {text-align: center;margin-top: 30px;}
.gallery .gallery-loadmore button:hover {cursor:pointer;}

.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: black; 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 .wrp {display: grid; grid-template-columns: 1fr 2fr; gap: 20px;}
.accordion .wrp .text {background: var(--primary-color); border-radius: 10px;padding: 50px;}

.accordion .item-accordion-head {cursor: pointer; position: relative; background: var(--primary-color);  padding:80px 50px; border-radius: 10px;font-weight: 600;}
.accordion .item-accordion-head .title {position: relative;z-index: 5; color: var(--primary-color);}
.accordion .item-accordion-head .img-wrp {position: absolute; left: 0; top: 0; height: 100%; width: 100%; }
.accordion .item-accordion-head .img-wrp img {height: 100%; width: 100%;border-radius:10px; object-fit: cover;position: relative;z-index: 3;}
.accordion .item-accordion-head .overlay {height: 100%; width: 100%;border-radius: 10px; position: absolute; background: rgba(0,0,0,0.2); content: ''; top: 0; left: 0;z-index: 4;}
.accordion .item-accordion:last-child {margin-bottom: 0;}
.accordion .item-accordion-content {background: var(--primary-color); padding: 20px 50px; margin-top: 10px; border-radius: 10px;}
.accordion .active .item-accordion-head {background-color:var(--primary-color); border-radius: 10px; }
.accordion .item-accordion-btn {width: 26px; height: 26px;float: right; margin: 0; cursor: pointer; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);z-index: 5;}
.accordion .item-accordion-btn:before {content: '+'; color: var(--primary-color); position: absolute; width: 26px; height: 26px; text-align: center; line-height: 22px; font-size: 24px;}
.accordion .item-accordion {margin-bottom: 20px; }
.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;background:var(--primary-color);}


.accordion .item-accordion.active .item-accordion-content .sub-accordion .item-accordion.hidden .item-accordion-btn {right: 10px; top: 53%;}
.accordion .item-accordion.active .item-accordion-content .sub-accordion .item-accordion.hidden .item-accordion-btn:before {content: '+'; line-height: 22px; }
.accordion .item-accordion.active .item-accordion-content .sub-accordion .item-accordion.hidden .item-accordion-head {border: 2px solid var(--text-color); margin-bottom: 10px; padding: 6px 20px;}
.accordion .item-accordion.active .item-accordion-content .sub-accordion .item-accordion.hidden.active .item-accordion-btn:before {content: '-'; line-height: 22px; }

.accordion .galerie {display: grid;gap: 50px; justify-self: baseline; margin-bottom: 0; margin-top: 30px;}
.accordion .galerie .gallery-item {list-style-type: none ; border-radius: 9px; max-width: 200px; aspect-ratio: 1/1; position: relative; margin:0 0 30px 0; min-width: 0;}
.accordion .galerie .gallery-item p {text-align: center;    position: absolute; left: 50%;transform: translateX(-50%);bottom: -30px;}
.accordion .galerie .gallery-item a  {position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 1/1;}
.accordion .galerie .gallery-item a .overlay {width: 100%; position: absolute; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: black;opacity: 0; transition: var(--transition);}
.accordion .galerie .gallery-item a:hover .overlay {opacity: 0.7; transition: var(--transition);}
.accordion .galerie .gallery-item a .overlay .icon-wrp {position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; transform: translate(-50%, -50%);}
.accordion .galerie .gallery-item a .overlay .icon-wrp svg {width: 100%; height: 100%; transform: scale(0); transition: var(--transition);}
.accordion .galerie .gallery-item a .overlay .icon-wrp svg path {fill: #fff;}
.accordion .galerie .gallery-item a:hover .overlay .icon-wrp svg { transform: scale(1); transition: var(--transition);}
.accordion .galerie .gallery-item img {height: 100%; width: 100%; object-fit: cover;}

.gslide-description p {white-space: pre-line;}

@media (max-width: 1100px) {
    .accordion .wrp {grid-template-columns: auto;}
}

@media (max-width: 850px) {
    .accordion .galerie {grid-template-columns: repeat(3, 1fr)!important; gap: 20px;}
}

@media (max-width: 550px) {
    .accordion .wrp .text {padding: 30px;}
    .accordion .item-accordion-head {padding: 20px 30px;}
    .accordion .item-accordion-content {padding: 30px;}
    .accordion .galerie {grid-template-columns: repeat(2, 1fr)!important; gap: 20px;}
}


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

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

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

/* Sidebar */

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


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

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

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


.contactform {margin-bottom: -180px; position: relative;z-index: 5;}
.contactform .wrp {background: var(--text-color); border-radius: 30px; box-shadow:  var(--box-shadow);}
.contactform .wrp .form-grid {display: grid; align-items: center;padding: 50px; grid-template-columns: 1fr 1fr; gap: 10px;}
.contactform .wrp .form-grid .claim {font-size: 30px; text-transform: uppercase; color: #ffffff; margin-bottom: 0; line-height: 36px;}
.contactform .wrp .form-grid .claim p { margin-bottom: 0;}

.contactform .wrp .form-grid .form input {border: none; border-radius: 10px; text-transform: unset; font-weight: 600;}
.contactform .wrp .form-grid .form input::placeholder {text-transform: uppercase;}
.contactform .wrp .form-grid .form textarea {border: none;  border-radius: 10px; text-transform: uppercase;font-weight: 600;}
.contactform .wrp .form-grid .form button {padding: 8px 40px; background: var(--secondary-color); display: inline-block; border-radius: 10px; color: #ffffff; font-weight: 600;transition: var(--transition); border: 2px solid transparent; text-transform: uppercase;}
.contactform .wrp .form-grid .form button:hover {border: 2px solid var(--secondary-color);background: transparent; transition: var(--transition); color: var(--secondary-color);}
.contactform .wrp .form-grid .form .wpforms-submit-container svg {display: none;}
.contactform .wrp .form-grid .form button.iti__selected-country {border-radius: 10px 0 0 10px!important; padding: 8px 5px;}
.contactform .wrp .form-grid .form #wpforms-559-field_8 {color: var(--primary-color);}

@media (max-width: 650px) {
    .contactform .wrp .form-grid {grid-template-columns: auto; padding: 30px;}

}

footer {background: #F2F2F2; padding: 250px 0 50px 0; font-size: 18px;}
footer .logo { width: 200px; margin-bottom: 15px;}
footer .wrp {display: grid; grid-template-columns: repeat(3,auto); justify-content: space-between;}
footer h3 {text-transform: uppercase;}
footer li {margin-left: 0;}
footer .footertext {width: 270px;}
footer .footernav ul li {list-style-type: none; text-transform: uppercase;}

@media (max-width: 850px) {
    footer .wrp {grid-template-columns: 1fr 1fr; gap: 50px;}
}

@media (max-width: 650px) {
    footer .wrp {
        grid-template-columns: auto;
        gap: 50px;
    }
}
/* Bottom */

.bottom .wrp {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 16px;}

/* 404 */

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