@charset "utf-8";
/* CSS Document */

.hometop::before {
  content: "\f015";
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

#lpmainmenu > ul.nav > li a {
  white-space: nowrap;
}


h1, section:not(#philosophy, .festsitzend, .herausnehmbar, .service) h2 {
color:#283055;
}


section:not(.vorteile, .service, .seminare) h3,
section:not(.vorteile, .service, .seminare) h4 {
font-weight:bold;
color:#283055;
}


#lpmainmenu > ul.nav  > li > a {
  border:1px solid #283055;
}

#lpmainmenu > ul.nav  > li:hover > a, #lpmainmenu > ul.nav  > li.active > a {
    color: #283055 !important;
    background-color: #fff;
  border:1px solid #283055;
}


.vorteile {
  position: relative;
    color:#fff;
}
 

.vorteile::before {
  content:"";
  display: block;
  width:100%;
  height:100%;
  /*background:rgba(233,240,246,0.8);
  background:rgba(62,118,165,0.7);
  background:rgba(0,72,133,0.7);*/
  background:#283055;
  position: absolute;
  top:0;
  backdrop-filter: blur(15px);
}
 

.media_image {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #283055;
  border-radius: 100%;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1/1;
  padding: 15px;
position:relative;
  overflow: hidden;
}

.media_image img {
  border: 0px solid #ccc;
  border-radius: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}


.media_image[class*="evhdle_"] {
  cursor: pointer;
}



.media_image[class*="evhdle_"]::after {
  content:"\f002";
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #283055;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  padding: 15px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position:absolute;
  bottom:10px;
}



.content-media {
  text-align: center;
}
 
.content-media .kaufen {
  margin:30px 0;
}


.shortvideoitem {
  aspect-ratio: 1/1;
  max-height:450px;
  max-width:450px;
min-width: 300px;
    padding:12px;
  border-radius: 100%;
  border: 1px solid #283055;
  overflow:hidden;
/*pointer-events:none;*/
}

.shortvideoitem_inner {
   position: relative;
  aspect-ratio: 1/1;
  max-height:500px;
  max-width:500px;
  border-radius: 100%;
  border: 0px solid #ccc;
  overflow:hidden;
}

.shortvideoitem_inner .videobox_content > div  {
  position: absolute;
  top:-200px;
  left:50%;
  transform: translate(-50%, 0);
  width: 900px;
  height: 900px;
}

.shortvideoitem_inner video {
  min-height:500px;
  width:100%;
}


#vid_premiumline_usage .shortvideoitem_inner .videobox_content > div  {
  top:-220px;
}


#vid_premiumline_usage .shortvideoitem_inner video  {
 -webkit-filter: brightness(100%);
}

#vorteile, #advantages, #avantages, #ventajas {
  padding: 100px 0 0;
}
 

.vorteile .x-column {
 /* width: calc(100%/7); */
}
 
.vorteile .more_btn,
.service .more_btn,
.pflege .more_btn {
display:none;
}

.vorteile .x-column .xcol-pic-box  {
  margin-bottom: 0px;
}

.vorteile .x-column .xcol-pic-box a {
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border:3px solid #fff;
  aspect-ratio: 1/1;
  width: 180px;
  height: 180px;
  border-radius: 100%;
  padding: 15px;
  margin: 50px 0;
}
 

.vorteile .x-column img {
  display: block;
  margin: auto;
  width: 150px;
}
 

.vorteile .contenttext h4  {
  margin-bottom: 30px;
}

.festsitzend, .herausnehmbar  {
color:#fff;
padding: 260px 0;
}

.festsitzend *, .herausnehmbar *, .service * {
color:#fff;
}

.festsitzend h2, .herausnehmbar h2 {
font-weight:bold;
}


#content .x-column > a[href*="shop."], .kaufen {
    color: #283055;
    border: 1px solid #283055;
}

#content .x-column > a[href*="shop."]:hover, .kaufen:hover {
    color: #fff;
    background: #283055;
    border: 1px solid #283055;
}

#content .x-column > a[href*="shop."]::before, .kaufen::before {
  color:#fff;
  background: #283055;
}

.dent_btn_white.kaufen:hover {
  color: rgb(40, 66, 106) !important;
}

.dent_btn_white.kaufen::before {
  color: #fff;
  background: transparent;
}

.dent_btn_white:hover.kaufen::before {
  color: rgb(40, 66, 106) !important;
}


/**/
     details.product-group {
            position: relative;
            margin-bottom: 30px;
            border-radius: 100px;
            background: #fff;
            border-left: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
            transition: all linear 0.5s;
        }

         details[open].product-group {
         border-color: #ccc;
        }

         details.product-group > summary {
            display: flex;
            align-items: center;
            padding: 5px;
            background:#f0f0f0;
            border-radius: 100px;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
            cursor: pointer;
            transition: all linear 0.5s;
        }


         details[open].product-group > summary {
            background:#ccc;
        }

        details.product-group .course_thumb {
              min-width: 100px;
              max-width: 100px;
              height: 100px;
              overflow: hidden;
              display: flex;
              border-radius: 100%;
              margin-right: 15px;
              background: #fff;
              align-items: center;
              justify-content: center;
            }


        /* details[open].product-group > summary {
            background:#ccc;
        }*/

         details[open].product-group > summary {
            background: rgb(40, 66, 106) !important;
           color:#fff;
        }

        details[open].product-group > summary h3 {
           color:#fff !important;
        }



        details[open].product-group  summary ~ * {
          animation: sweep .5s ease-in-out;
        }

        @keyframes sweep {
          0%    {opacity: 0; margin-left: -10px}
          100%  {opacity: 1; margin-left: 0px}
        }


         details.product-group > div {
            padding: 20px;
            opacity: 0;
            transition: all linear 2.5s;
        }

         details[open].product-group > div {
            opacity: 1;
        }



 
        .product-group-content {
            display:flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

            .product-group-text {
                width: 50%;
            }

             .product-group-gallery {
             max-width: 330px;
                 width: 50%;
              }
 
    .shop-product-button {
          width: 100%;
          margin: 20px auto;
          text-align: center;
        }


 
           .product-group-gallery-item {
              display: none;
            }




            .product-group-gallery-item.active {
              display: block;
              padding: 10px;
              margin-top: 10px;
            }

.product-group-gallery-item .shortvideoitem_inner .videobox_content > div  {
  position: absolute;
  top:-110px;
  left:50%;
  transform: translate(-50%, 0);
  width: 500px;
  height: 500px;
}

.product-group-gallery-item .media_image {
  width: 300px;
}

             .product-group-gallery-thumbnails {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 300px;
                margin: auto;
              }


            .thumblink:nth-of-type(1) {
              display: flex;
              align-items: center;
              justify-content: center;
              text-decoration: none;
              background-color: #eee;
              color: #333;
              padding: 5px;
              border-radius: 200px;
              width:50px;
              height:50px;
              overflow: hidden;
              margin: 10px 5px;
            }

            .thumblink:nth-of-type(1)::before {
              display: flex;
              content:"\f04b";
              font-family:"Font Awesome 5 Free";
              font-weight: 900;
              color:#fff;
            }


            .thumblink:not(.active)::before {
              color:#666 !important;
            }



            .thumblink {
              display: flex;
              align-items: center;
              justify-content: center;
              text-decoration: none;
              background-color: #eee;
              color: #333;
              padding: 5px;
              border-radius: 200px;
              width:50px;
              height:50px;
              overflow: hidden;
              margin: 10px 5px;
            }

             .thumblink img {
              display: flex;
              height: 100%;
              border-radius: 200px;
              object-fit: cover;
            }

           .thumblink.active {
              /*background-color: #069;*/
              background-color: #283055;
              color: #fff;
            }



.zoom-overlay {
  position: fixed;
  display: none;
  z-index: 999999999 !important;
  top:50%;
  left: 50%;
  max-width: 600px;
  transform:translate(-50%, -50%);
  box-shadow: 0 0 50px rgba(0,0,0,0.3);
  border-radius: 5px;
  overflow: hidden;
}

.zoom-overlay.show {
  display: flex;
  flex-direction: column;
}

    .zoom-container {
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
      position: relative;
      touch-action: none;
    }

    .zoom-container img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.2s ease, transform-origin 0.1s ease;
    }

    .zoom-container.zoomed img {
      transform: scale(2); /* Zoomfaktor */
    }


/**/


.pflege .contenttext {
text-align:center;
}





@media screen and (max-width:520px) {
 
          details.product-group > div {
          padding: 10px;
        }
         details summary h3 {
          font-size: 14px;
          margin:0px 0 5px;
          line-height: 120%;
        }

         details summary p {
          font-size: 12px;
           margin: 0;
           line-height: 100%;
        }
 
          details.product-group .course_thumb {
              min-width: 50px;
              height: 50px;
            margin-right: 5px;
            }
 
  .product-group-content {
    display: flex;
    justify-content: center;
    text-align: center;
  }
 
          .product-group-content  > div{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
 
        .product-group-gallery {
            max-width: 230px;
            width: 100%;
          }
 
         details .shortvideoitem {
          min-width: 220px;
        }
 
  .product-group-gallery-thumbnails {
      max-width: 250px;
    }

 
  .product-group-gallery-item .media_image {
  width: 220px;
}
}