@import "custom_fonts.css";

.featured-article-badge {display: none; visibility: hidden;}

/*
GERUEST  MAINMenu  CONTENT  COLLAGE  FEATURES  RETREAT AKKORDEON
*/

body {
  background-color: #fafafa;
  font-family: 'Montserrat';
  font-size: 20px;
}
#sp-main-body {
  background-color: #fff;
  hyphens: auto;
}
#sp-main-body .container,
#sp-main-body .row > *,.bgimg {
  padding-right: 0;
  padding-left: 0;
}
.bg01 {
  background-image: url(/images/layout/bg_logo-01_F9F7F1.png);
}
#sp-section-2 .container {
  padding-left: 0;
  padding-right: 0;
}

#sp-bottom .container, #sp-footer .container {
  padding: 2em min(50px, 6vw) 0.5em;
}
#sp-header .container {
  padding: 0 min(50px, 6vw);
  width: 100%;
}

.h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
  font-family: 'Lora';
  color: #c6a664;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
}
.h1, h1 {font-size: min(60px, 2.50vmax); font-weight: 600;}
.h2, h2 {font-size: min(38px, 5.5vw); font-weight: 600;}
.h3, h3 {font-size: min(32px, 5.0vw);}
.h4, h4 {font-size: min(20px, 4.5vw);}
.h5, h5 {font-size: min(28px, 4.0vw); font-weight: 600;}
  p, li {font-size: min(1em,  3.0vw);}

h1, h2 {hyphens: none;}

#sp-footer, #sp-bottom {
  .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {color:#ffffff}
}

.textxl { 
  h1 {font-size: min(60px, 7vmax); font-weight: 600;}
  h2 {font-size: min(38px, 5.5vw); font-weight: 600;}
  h3 {font-size: min(32px, 5.0vw);}
  h4 {font-size: min(20px, 4.5vw);}
  h5 {font-size: min(28px, 4.0vw); font-weight: 600;}
  p, li {font-size: min(1em,  3.0vw);}
}

img {height: auto;}
.radius {border-radius: 20px;}

.button {
  display: inline-block;
  font-family: Lara;
  font-weight: 600;
  font-size: 1em !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background-color: #9eab97;
  color: #fff;
  padding: 0.5em 1.25em;
  border-radius: 17px;
  border: 2px solid #9eab97;
  margin-top: 0.5em;
}
.button:hover {
  color: #9eab97;
  background-color: #fff;
}

ul.icon {
  list-style-image: url(/images/layout/logo-icon_30px_breit.png);
  padding-left: 2em;
}
ul.icon li {margin-bottom: 0.5em;}

#sp-header .logo a {
  font-size: min(3vw, 26px);
  line-height: 1;
  margin: 9px 0 0 0;
  padding: 0;
  font-family: 'Lara';
  color: #9eab97;
  font-weight: 600;
}

.anker {transform: translateY(-120px);}

video {
  width: 100%;
  height: auto;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.convertforms.cf-success .cf-response {background-color: #95A78B!important;}

/* HEADERVideo */
.headertext {
  
  position: relative;
  z-index: 1;
  color: #fff;
  width: 100%;
  height: 0px;
  text-shadow: #000 6px 4px 10px;
  text-transform: uppercase;
  transform: translate(0, 25vw);
  padding: 0 min(50px, 6vw);
  
  h2 {
    color: #fff;
    font-size: 3vmax;
    margin-bottom: 0.2em;
    font-weight: 600;
  }
  h3 a {
    color: #fff;
    font-size: min(2em, 3.5vw);
    font-weight: 600;
    line-height: 1;
  }

  .button {text-shadow: none;}

  .teaser-button {
    background-color: #C6A664;
    border-radius: 50%;
    transform: rotate(-7deg);
    aspect-ratio: 1;
    text-align: center;
    text-shadow: none;
    font-weight: 600;
    font-size: 90%;
    line-height: 1.25;
    padding: 2.5em 0;
    float: right;
  }
  .px260 {
    width: min(260px, 30vw);
  }
}
  
/* GERUEST */
#sp-header {width: 100%;}
#sp-logo {width: 40%;}
#sp-top1 {width: 20%;}
#sp-menu {width: 40%;}

.logoimg {
  margin: 1em auto;
  img {max-height: 80px;width: auto;}
}
.sp-column.headcontact.d-flex.align-items-center {
  line-height: 120px;
  float: right;
  padding-top: 4px;
}
#sp-section-2 {margin-top: 120px;}
#sp-main-body {padding: 60px 0 0;}

.right {float: right;}

#sp-bottom, #sp-footer {;
  font-size: 0.9em;
  line-height: 1.4;
}
#sp-footer .container-inner {
  padding: 0px 0;
  border-top: 0px solid rgba(255,255,255,0);
}

/* MAINMenu */
.burger-icon {width: 45px;}
.burger-icon > span {
  height: 5px;
  margin: 9px 0;
  border-radius: 5px;
  background-color: #9eab97;
}


.offcanvas-active .burger-icon > span:nth-child(1), 
#modal-menu-toggler.active .burger-icon > span:nth-child(1) {
  transform: translate(0, 16px) rotate(-45deg);
}
.offcanvas-active .burger-icon > span:nth-child(3), 
#modal-menu-toggler.active .burger-icon > span:nth-child(3) {
  transform: translate(0, -12px) rotate(45deg);
}
.offcanvas-active .burger-icon > span,
#modal-menu-toggler.active .burger-icon > span {
  background-color: #252525;
}

.offcanvas-menu {
  background-color: #9eab97;
  width: 80%;
  max-width: 400px;
  height: max-content;
}
body.ltr.offcanvs-position-right .offcanvas-menu {right: -100%;}
.offcanvas-menu .offcanvas-inner {padding: 25px 0 0;}
.offcanvas-menu.border-menu .offcanvas-inner ul.menu > li {
  border-bottom: none;
  padding: 1em 0.5em;
  box-shadow: 1px 6px 10px rgba(0,0,0,0.2);
  width: 100%;
}
.offcanvas-menu a {
  font-family: 'Lara';
  font-size: 1.3em !important;
  text-transform: uppercase;
  font-weight: 600;
}
.mod-menu.mod-list.menu:last-child {margin: 0;}
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  opacity: 1!important;
}

.kontaktnav {
  
  img {
    max-width: 30px;
    display: inline-block;
    margin-left: 5px;}
  p {
    margin-top: 1em;}
  a[href="#kontakt"] {
  font-family: 'Lara';
  font-size: 1.2em;
  color: #9eab97;
  text-transform: uppercase;
  letter-spacing: 0.03em;}
  
}


/* CONTENT */
.article-list .article {
  margin-bottom: 4em;
  padding: 20px;
  border: none;
  border-radius: 0px;
}


.article:has(.content) {padding: 20px 0;}
.content {padding: 5em min(100px, 6vw); min-height:500px;}
div:last-child:has(> .article) {margin-bottom: -95px;}
.col1 {background-color: #F1F2F0;}
.col2 {background-color: #F5F2EB;}

.bgimg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.bg01 {
  background-image: url(/images/layout/bg_logo_F5F6F4.png);
  background-position-x: 125%;
  background-size: min(600px, 50vw);
}
.bg02 {
  background-image: url(/images/layout/bg_logo_FBFBFB.png);
  background-position-x: 125%;
  background-position-y: -60px;
  background-size: min(900px, 60vw);
}
.bg03 {
  background-image: url(/images/layout/bg_logo_ECEEEA.png);
  background-position-x: 105%;
  background-position-y: 340px;
  background-size: min(350px, 60vw);
}
.bg04 {
  background-image: url(/images/layout/bg_logo_FBFBFB.png);
  background-position-x: -60%;
  background-position-y: 80px;
  background-size: min(800px, 60vw);
}
.bg05 {
  background-image: url(/images/layout/bg_logo_FBFBFB.png);
  background-position-x: 134%;
  background-position-y: 200px;
  background-size: min(800px, 60vw);
}



.team {
  img, p {max-width: 260px;margin: auto;}
  p {text-align: center;}
  .imgtxt {
  font-family: 'Lara';
  font-size: 80%;
  text-transform: uppercase;
  background-color: rgba(256,256,256,0.85);
  transform: translateY(-45px);
  height: 3.5em;
  padding-top: 0.25em;
  color: #333;
  border-radius: 0 0 20px 20px;
  }
  .imgtxt sup {font-size: 70%;}
}

.bild {margin-right: 40px;}
.text {}


/* COLLAGE */
.collage {
  h2 {margin-bottom: 0.2em;}
  p {
    font-size: 80%;
    margin-bottom: 0;
    }
  img {
    display: inline-block;
    vertical-align: top;
    margin: 7px;
    }
  .text {padding: 0.75em 1em 0;}
  .button {margin: 25px;}
}

.collage.mobil {
  display: none;
  p {font-size: min(1em, 3.5vw);}
  img {width: 22%; margin: 3px;}
  .button {margin: 25px auto;}
}


/* FEATURES */
.features{
  img {border-radius: 20px 20px 0 0}
  h4 {
    min-height: 4.75em;
    /*font-size: min(19px, 1.5vmax);*/
    padding: 1em 15px 0;
  }
  p {
    padding: 0.5em 15px 0.5em;
    font-size: 70%;
  }
  .wf-column {
    border-radius: 20px;
    min-height: 600px;
    background-color: #ffffff;
  }
  
}

.iconbox {
  background-color: #F7F2E9;
  border-radius: 15px;
  padding: 1.5em 2em 1em;
  width: calc(100% - 10vw);
  margin: auto;
  h5 {font-size: min(20px, 4.5vw);} 
  p {
    font-size: 85%;
    line-height: 1.2;}
  img {
    max-width: 110px;
    margin: auto;}
  
}


/* RETREAT */
.wf-columns.rund {
  max-width: 90%;
  margin: 0 auto;
  
  .wf-column {border: 3px solid #F1F2F0; padding: 2em;}
  .left {border-radius: 30px 0 0 30px;}
  .right {border-radius: 0 30px 30px 0;}
  .bgdunkel {background-color: #f1f2f0;}

}
.headinline h2, .headinline h4 {
  display: inline-block;
}
.dayicon img {
  width: 40px;
  float: right;
}



/* AKKORDEON */
.ssl-outer {
  border: 1px solid #F7F5EE;
  border-radius: 15px;
  margin-bottom: 1.5em;
  background-color: #F7F5EE;
  filter: drop-shadow(4px 4px 5px rgba(198, 166, 100, 0.4));
}
.ssl-outer:has(.ssl-title-open) {
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.ssl-title {
  color: #C6A664 !important;
  padding: 0.5em 1em 0.5em 2em !important;
  border-radius: 15px !important;
  font-family: 'Lara';
  font-size: min(24px, 3.5vw);
  text-transform: uppercase;
}
.ssl-title:hover {
  background-color: inherit;
  color: #C6A664 !important;
  border-radius: 15px !important;
}
.ssl-title-open {
  background-color: #f7f5ee !important;
  border-radius: 15px !important;
  filter: drop-shadow(4px 4px 5px rgba(198, 166, 100, 0.4));
}

.ssl-title::after {
  content: "";
  width: 1em;
  height: auto;
  display: block;
  position: relative;
  float: right;
  opacity: 0.7;
  margin: 0 10px 0 0;
}

.ssl-title::after {
  content: url('/images/layout/angle-down_24.png');
}
.ssl-title.ssl-title-open::after {
  content: url('/images/layout/angle-up_24.png');
}

.ssl-content {
  display: none;
  padding: 0.5em 5em 0.5em 2em !important;
  border-top: none;
  font-size: 80%;
}


/* ########################################################*/
@media (min-width: 1280px) {
  .headertext {
    transform: translate(0, 320px);

    p  {font-size: 21px;}
    h2 {font-size: 40px;}
    h3 a {font-size: 40px;}
  }
  
}


@media (max-width: 991px) {
  
  #sp-header, #sp-header .logo {height: 120px;}

}

@media (max-width: 960px) {
  .features h4 {
    min-height: 4.75em;
    /*font-size: min(17px, 1.8vmax);*/
    padding: 1em 15px 0;
  }
  .collage.desktop {display: none;}
  .collage.mobil {display: block;}
}


@media (max-width: 880px) {
  a[href="#kontakt"] {display:none;}
  .headertext a[href="#kontakt"],
  .collage a[href="#kontakt"] {display:inline-block;}
}



@media (max-width: 640px) {  
  
  .kontaktnav {display:none;}
  #sp-header .logo a {margin: 0;}
  #sp-section-2 {margin-top: 60px;}
  
  ul.icon {
    list-style-image: url(/images/layout/logo-icon_20px.png);
    padding-left: 2rem;
  }
  .logoimg { margin: 7px auto;
    img {max-height: 36px;width: auto;}
  }
  
  #sp-logo {width: 40%;}
  #sp-top1 {width: 35%;}
  #sp-menu {width: 25%;}
  #sp-logo, #sp-top1, #sp-menu, #sp-header, #sp-header .logo {height: 60px;}

  #sp-header .logo a {font-size: min(3.1vw, 26px);}
  .burger-icon {width: 35px;}
  .burger-icon > span {height: 4px; margin: 6px 0;}
  .offcanvas-active .burger-icon>span:nth-child(3), #modal-menu-toggler.active .burger-icon>span:nth-child(3) {transform: translate(0, -8px) rotate(45deg);}
  .offcanvas-active .burger-icon>span:nth-child(1), #modal-menu-toggler.active .burger-icon>span:nth-child(1) {transform: translate(0, 12px) rotate(-45deg);}
  
  .team { 
    img, p {max-width: 260px; max-width: 90%;}
    .wf-columns {display: block;}
  }
  .content {padding: 2em min(100px, 8vw); min-height:300px;}

  .iconbox {width: 100%;}
  
  .headertext {
    .button {width: min-content;}
    .teaser-button {
      border-radius: 15px;
      transform: rotate(0deg);
      aspect-ratio: auto!important;
      line-height: 1.25;
      padding: 2vw 0.5em !important;
      margin-top: 3em;}
    .px260 {
      width: min-content!important;
      height: min-content!important;}
  }
  .headertext.full {
    .button {width: auto;}
  }
  .offcanvas-menu{ .pt-4, .p-3 {padding: 0;} }
  .offcanvas-menu.border-menu .offcanvas-inner ul.menu > li {padding: 0.25em 0.5em;}

  #sp-bottom #sp-bottom1, #sp-bottom #sp-bottom2,
  #sp-bottom #sp-bottom3, #sp-bottom #sp-bottom4,
  #sp-footer #sp-footer1, #sp-footer #sp-footer2 {
    text-align:center!important;
  }
  #sp-bottom2, #sp-bottom3 {display: none;}
  
  #sp-bottom {
    padding: 30px 0 0;
    img {display: inherit;}
    .right, .right p, .right h3 {text-align:center!important; float:none;}
  }
  
  .wf-columns.rund {
    .left {border-radius: 30px 30px 0 0;}
    .right {border-radius: 0 0 30px 30px;}
  }
  .dayicon img {
    width: 58px;
    float: none;
    margin: 0 auto -2em;}
  .daytext {text-align: center;}

}


@media (max-width: 480px) {
  
  .wf-columns-gap-large:has(.features) {
    gap: 0;

    .wf-columns {display: block;}
    .wf-column  {min-height: auto;
                 padding-bottom: 1em;
                 margin-bottom: 2.5em;}
    h4 {min-height: auto;}
  }

}