/* =================================== MB - Grid mit Bild =================================== */
#grid-3-col{position:relative;display:block;}

.title-before-grid{color:var(--color-primary);}

.modular-card{position:relative;height:100%;overflow:hidden;}

.modular-card-image{position:relative;overflow:hidden;aspect-ratio: 1 / 1;}
.product-card .modular-card-image{aspect-ratio: 16 / 9;}

.modular-card-title{position:relative;z-index:5;}
.modular-card-priceinfo{color:var(--color-white);}
.modular-card-content-block{position:relative;padding:1.5rem;background:var(--color-text);transition: all var(--transition-default) ease-in-out;}
.modular-card-content-block::after{position:absolute;z-index:1;content:"";top:-0.75rem;left:2rem;width:1.5rem;height:1.5rem;background:var(--color-text);rotate:45deg;transition: all var(--transition-default) ease-in-out;}
.modular-card-link{color:var(--color-text);}

a.modular-card-link:hover .modular-card-image img{transform: scale(1.2);}
a.modular-card-link:hover .modular-card-content-block{background:var(--color-primary);}
a.modular-card-link:hover .modular-card-content-block::after{background:var(--color-primary);}


.modular-card-title h4{color:var(--color-white);margin-bottom:0rem;padding-bottom:0rem;padding-bottom:0;}
.product-card .modular-card-title h4{font-weight:400;}
.modular-card-priceinfo h4{font-weight:400;margin-bottom:0rem;}

.card-layout-4 .dark-gradient-75{display:none;}

.card-layout-3 .modular-card-image{aspect-ratio: 1 / 1;}
.card-layout-3 .modular-card-content-block{background:none;padding-left:0rem;padding-bottom:0rem;}
.card-layout-3 .modular-card-content-block::after{display:none;}
.card-layout-3 .modular-card-priceinfo{position:absolute;z-index:5;top:-2rem;right:1rem;color:var(--color-white);background:var(--color-primary);padding:0.5rem 1rem;}
.card-layout-3 .modular-card-priceinfo::after{position:absolute;z-index:1;content:"";top:-0.75rem;left:2rem;width:1.5rem;height:1.5rem;background:var(--color-primary);rotate:45deg;;}
.card-layout-3 .modular-card-content-block h2, .card-layout-3 .modular-card-content-block h3{margin: 0rem;transition: all var(--transition-default) ease-in-out;}

a.modular-card-link:hover .card-layout-3 .modular-card-content-block{background:transparent;}
a.modular-card-link:hover .card-layout-3 .modular-card-content-block h2{color: var(--color-primary);}



/* =================================== DEFAULT PAGE =================================== */
#contentpage-header:not(.dx-hero-easy){position:relative;display:block;padding-top:16rem;padding-bottom:2rem;background:linear-gradient(var(--color-white), var(--color-primary));color:var(--color-white);} 

#main-content-section{position:relative;z-index:9;}


/* =================================== KONTAKT & MAP =================================== */
.qr-code img{width:8rem;}


.map-col { height: 100%; }
#kontakt-map{
  width: 100%;
  height: 100%;
  min-height: 600px; /* wichtig! */
  overflow: hidden;
}




/* =================================== SIDE CONTACT BUTTONS =================================== */
.side-contact{
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  display:none;
  flex-direction: column;
  overflow: hidden;
}

.side-contact__btn{
  width: 4rem;
  height: 4rem;
  display: grid;
  background: var(--color-overlay-dark);
  place-items: center;
  text-decoration: none;
  margin-bottom:1px;
  transition: all var(--transition-fast) ease-in-out;
}

.side-contact__icon{
  width:50%;height:50%;
  color: var(--color-white);
}

.side-contact__btn:hover{
    background: var(--color-overlay-dark-strong);
}

@media (max-width: 768px){

  .side-contact{
    left: 0rem;
    right: auto;
    top: auto;
    bottom: 0rem;
    transform: none;
   flex-direction: row;
   border-top-right-radius: 1rem;
  }

  .side-contact__btn{
  margin-bottom:0px;
  margin-right:1px;

}

}