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


/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  animation: fadeInUp 0.8s ease;
}
.animation-fadeInUp {
  animation: fadeInUp 1s ease 0.2s both;
}
.inview {
  opacity: 0
}
.inview.animation-fadeInUp  {
  opacity: 1
}

/*Abschnitt Massagen*/

#massagen {
  /*height: 100vh;*/
}

#massagen .wp-block-element-max-breite .wp-block-inline {
  /*display: flex;*/
 /* height: 100vh;*/
  /*max-width: 1200px;*/
 /* margin: auto;*/
}

#massagen .wp-block-element-max-breite .wp-block-inline div.wp-block-group:nth-child(2) > div.wp-block-group__inner-container {
	display:flex;
	/*height: 100vh;*/
}



/* ===== TABS ===== */
.tabs {
  width: 30%;
  display: flex;
  flex-direction: column;
 /* justify-content: center;*/
	
}

.tab {
  padding: /*20px*/ 1rem;
  cursor: pointer;
  opacity: 0.4;
  transition: 0.3s;
}

.tab.active {
  opacity: 1;
  font-weight: bold;
}

/* ===== CONTENT ===== */
.panels {
  width: 70%;
  position: relative;
}

/*.panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.4s;
}*/
  /*.panel {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;     ✅ vertikal zentriert 
  justify-content: flex-start;

  opacity: 0;
  transform: translateY(60px) scale(0.96);

  padding: 40px;
  box-sizing: border-box;

  will-change: transform, opacity;
}
*/

 /*.panel {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;      vertikal zentriert 
  justify-content: flex-start;

  opacity: 0;
  transform: translateY(60px);

  padding: 40px;
  box-sizing: border-box;

  will-change: transform, opacity;
}*/

.panel {
  position: absolute;
  /*inset: 0;*/

  display: flex;
  justify-content: flex-start;

  padding: 0 40px;
  box-sizing: border-box;

  overflow-y: auto;
}

/* Standard: zentriert */
.panel .wp-block-group {
  /* margin: auto 0;
 max-width: 520px;*/
}

/* Wenn viel Content */
.panel.large .wp-block-group {
  margin-top: 0;
  margin-bottom: 0;
}

.panel.active {
  opacity: 1;
  transform: translateY(0);
}

.panels{
    display: flex;
    /*align-items: center;*/
    height: 100%;
}
.panel.active{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .tabs { width: 35%; }
  .panels { width: 65%; }
	.panel {  padding: 0 40px;}
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

  #massagen {
    height: auto;
  }

 #massagen .wp-block-element-max-breite .wp-block-inline {
    flex-direction: column;
    height: auto;
    padding: 20px 0;
  }

  .tabs {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    gap: 10px;
	  justify-content: flex-start;
  }

  .tab {
    white-space: nowrap;
    padding: 10px 15px;
    background: #eee;
    border-radius: 20px;
  }

  .panels {
    width: 100%;
	  height:auto;
	  flex-direction: column;
  }

  .panel {
    position: relative;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 40px;
	  height:auto;
	  overflow-y: unset;
	  padding:0
  }
	#massagen .wp-block-element-max-breite .wp-block-inline div.wp-block-group:nth-child(2) > div.wp-block-group__inner-container {
    display: flex;
    height: auto;
    flex-direction: column;
}
}