/* =========================================================
   REGION PAGE
   bien-etre-regional.html
========================================================= */

/* =========================================================
   REGION MENU
========================================================= */

.region-menu{
  list-style:none;

  display:grid;
  gap:14px;

  margin:40px 0 70px;
  padding:0;
}

.region-menu li{
  margin:0;
  padding:0;
}

.region-menu a{
  display:flex;
  align-items:center;

  min-height:54px;

  padding:14px 22px;

  border-radius:18px;

  background:rgba(0,0,0,0.32);

  border:1px solid rgba(255,215,0,0.16);

  color:#f5d061;

  text-decoration:none;

  font-weight:600;
  letter-spacing:1px;

  backdrop-filter:blur(8px);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.region-menu a:hover{
  transform:translateY(-2px);

  background:rgba(80,120,40,0.42);

  border-color:rgba(180,255,120,0.32);

  box-shadow:
    0 12px 35px rgba(0,0,0,0.35),
    0 0 22px rgba(180,255,120,0.08);
}

/* =========================================================
   REGION BLOCK
========================================================= */

.region-block{
  margin:90px 0;
}

.region-block h2{
  margin-bottom:42px;

  line-height:1.25;
  letter-spacing:4px;
}

/* =========================================================
   REGION ROW
========================================================= */

.region-row{
  display:flex;
  align-items:center;
  gap:50px;
	overflow:visible;
}

.region-row.reverse{
  flex-direction:row-reverse;
}

/* =========================================================
   IMAGE SIDE
========================================================= */

.region-image-wrap{
  flex:0 0 46%;

  overflow:hidden;

  border-radius:24px;

  position:relative;

  transition:
    transform 0.6s ease,
    box-shadow 0.6s ease;

  z-index:1;
}

.region-image{
  width:100%;

  display:block;

  aspect-ratio:16/9;

  object-fit:cover;

  border-radius:24px;

  box-shadow:
    0 28px 70px rgba(0,0,0,0.45),
    0 12px 30px rgba(0,0,0,0.28);

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

/* =========================================================
   IMAGE HOVER
========================================================= */

.region-image-wrap:hover{
  transform:scale(1.18);

  z-index:20;
	
  box-shadow:
    0 50px 120px rgba(0,0,0,0.65),
    0 20px 50px rgba(0,0,0,0.35);
}

/* =========================================================
   TEXT SIDE
========================================================= */

.region-text{
  flex:1;
}

.region-text p{
  margin-bottom:24px;

  line-height:1.9;
}

/* =========================================================
   HIGHLIGHT WORDS
========================================================= */

.region-link{
  color:#69b7ff;

  font-weight:600;

  text-decoration:none;

  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}

.region-link:hover{
  color:#a7d8ff;

  text-shadow:
    0 0 14px rgba(105,183,255,0.35);
}

/* =========================================================
   REGION BUTTONS
========================================================= */

.region-links{
  display:flex;
  flex-wrap:wrap;

  gap:20px;

  margin-top:70px;
}

/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:980px){

  .region-row,
  .region-row.reverse{
    flex-direction:column;
  }

  .region-image-wrap{
    flex:1 1 auto;

    width:100%;
  }

  .region-block{
    margin:70px 0;
  }

  .region-block h2{
    margin-bottom:28px;
  }

}
/* =========================================
   REGION LINKS
========================================= */

.region-link{
  color:#6db8ff;

  font-weight:600;

  text-decoration:none;

  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}

.region-link:hover{
  color:#9fd4ff;

  text-shadow:
    0 0 14px rgba(109,184,255,0.35);
}
/* =========================================================
   INFO HOVER / POPUP
========================================================= */

.info-hover{
  position:relative;

  color:#7ed957;

  font-weight:600;

  cursor:pointer;

  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}

.info-hover:hover{
  color:#b8ff9f;

  text-shadow:
    0 0 12px rgba(120,255,120,0.25);
}

/* =========================================================
   POPUP
========================================================= */

.info-popup{
  position:absolute;

  left:50%;
  top:140%;

  transform:
    translateX(-50%)
    scale(0.92);

  width:280px;

  padding:16px;

  border-radius:22px;

  background:
    rgba(10,20,10,0.92);

  backdrop-filter:blur(14px);

  border:
    1px solid rgba(120,255,120,0.18);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.45),
    0 0 28px rgba(120,255,120,0.12);

  opacity:0;

  visibility:hidden;

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;

  z-index:999;
}

/* Bild */

.info-popup img{
  width:100%;

  border-radius:14px;

  margin-bottom:12px;

  display:block;
}

/* =========================================================
   DESKTOP HOVER
========================================================= */

.info-hover:hover .info-popup{
  opacity:1;

  visibility:visible;

  transform:
    translateX(-50%)
    scale(1);
}

/* =========================================================
   MOBILE / TAP
========================================================= */

.info-hover.active .info-popup{
  opacity:1;

  visibility:visible;

  transform:
    translateX(-50%)
    scale(1);
}

/* =========================================================
   MOBILE FIX
========================================================= */

@media screen and (max-width:768px){

  .info-popup{
    width:240px;

    left:50%;

    top:150%;
  }

}
/* =========================================================
   IMPRESSIONS GALLERY
========================================================= */

.gallery-title{
  margin-top:120px;
  margin-bottom:40px;

  text-align:center;
}

/* Galerie */

.impressions-gallery{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

  gap:24px;
}

/* Karte */

.gallery-item{

  position:relative;

  overflow:hidden;

  border-radius:24px;

  text-decoration:none;

  background:rgba(0,0,0,0.35);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.45);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

/* Bild */

.gallery-item img{

  width:100%;

  height:320px;

  object-fit:cover;

  display:block;

  transition:
    transform 0.7s ease;
}

/* Text */

.gallery-item span{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:18px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.85),
      transparent
    );

  color:white;

  font-size:14px;

  letter-spacing:1px;
}

/* Hover */

.gallery-item:hover{

  transform:
    translateY(-8px)
    scale(1.02);

  box-shadow:
    0 35px 80px rgba(0,0,0,0.6),
    0 0 35px rgba(255,215,0,0.12);
}

.gallery-item:hover img{

  transform:scale(1.08);
}

/* =========================================================
   PANORAMA SECTION
========================================================= */

.panorama-section{

  margin:70px 0 110px;

  overflow:hidden;
}

/* Wrapper */

.panorama-wrapper{

  position:relative;

  overflow-x:auto;
  overflow-y:hidden;

  border-radius:28px;

  scrollbar-width:thin;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.55);

  cursor:grab;

  background:#000;
}

/* Panorama Bild */

.panorama-image{

  display:block;

  height:min(65vh,700px);

  width:auto;

  min-width:100%;

  object-fit:cover;

  transition:
    transform 0.6s ease;
}

/* Hover */

.panorama-wrapper:hover .panorama-image{

  transform:scale(1.015);
}

/* Hinweis */

.panorama-hint{

  position:absolute;

  left:50%;
  bottom:22px;

  transform:translateX(-50%);

  padding:12px 22px;

  border-radius:999px;

  background:rgba(0,0,0,0.55);

  backdrop-filter:blur(10px);

  color:white;

  font-size:14px;

  letter-spacing:1px;

  pointer-events:none;

  animation:panoramaPulse 2.5s infinite;
}

/* Animation */

@keyframes panoramaPulse{

  0%{
    opacity:0.55;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:0.55;
  }
}

/* Mobile */

@media screen and (max-width:768px){

  .panorama-image{

    height:42vh;
  }

  .panorama-hint{

    font-size:12px;

    padding:10px 18px;
  }

}

/* =========================================================
   VIDEO SECTION
========================================================= */

.video-section{

  margin:90px 0 70px;
}

.video-wrapper{

  position:relative;

  width:100%;

  aspect-ratio:16/9;

  overflow:hidden;

  border-radius:28px;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.55);

  background:#000;
}

/* iframe */

.video-wrapper iframe{

  width:100%;

  height:100%;

  border:none;

  display:block;
}

/* Hover Effekt */

.video-wrapper:hover{

  transform:scale(1.01);

  transition:transform 0.4s ease;
}