/* Embed Text Module - Full width with optimized height for videos */
.embed-text-modul-container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.embed-text-modul-container .inner {
  max-width: 100%;
  margin: 0 auto;
}

.embed-text-modul-container:hover .embed-container .embed-wrapper {
  transform: scale(1.05);
}

.embed-text-modul-container .embed-text-modul {
  margin-bottom: 100px;
}

.embed-text-modul-container .embed-text-modul:last-child {
  margin-bottom: 0;
}

/* Embed Container Styles */
.embed-text-modul .embed-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

/* Remove our padding since Vimeo/YouTube embeds have their own */
.embed-text-modul .embed-container .embed-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

/* Let Vimeo/YouTube keep their 16:9 ratio */
.embed-text-modul .embed-container .embed-wrapper > div {
  /* Keep standard 16:9 ratio */
  padding-bottom: 56.25% !important;
  padding-top: 0 !important;
}

/* Ensure iframes fill their container */
.embed-text-modul .embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Text Container Styles */
.embed-text-modul .text-container {
  background: #282828;
  padding: 30px 20px;
}

.embed-text-modul .text-container span {
  position: relative;
  padding-left: 28px;
  color: white;
  font-size: 16px;
  font-size: 1.6rem;
  display: block;
  font-weight: 400;
  margin-bottom: 10px;
}

.embed-text-modul .text-container span:before {
  content: '';
  width: 19px;
  height: 1px;
  background: #ff8c00;
  position: absolute;
  top: 50%;
  left: 0;
}

.embed-text-modul .text-container h2 {
  color: white;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.2;
  margin-top: 8px;
  margin-bottom: 24px;
  font-weight: 700;
}

.embed-text-modul .text-inner .text-left-border {
  padding: 25px 0 0 0;
}

.embed-text-modul .text-inner .text-left-border p {
  color: white;
  margin: 20px 0 30px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.embed-text-modul .button-box {
  text-align: center;
  margin-top: 20px;
}

.embed-text-modul .button-box .load-more-button {
  display: inline-block;
  margin-bottom: 16px;
  margin-right: 16px;
}

.embed-text-modul .button-box .load-more-button:last-child {
  margin-right: 0;
}

/* Flexbox layout for proper alignment - side by side from start */
.embed-text-modul .custom-flex-box {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* Right-aligned variant */
.embed-text-modul-rechts .custom-flex-box {
  display: flex;
  flex-direction: row;
}

/* Tablet Landscape and up (768px+) */
@media screen and (min-width: 768px) {
  .embed-text-modul .text-container {
    padding: 50px 50px 50px 90px;
    display: flex;
    align-items: center;
  }

  .embed-text-modul .text-container .text-container-flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .embed-text-modul .text-inner {
    max-width: 500px;
  }

  .embed-text-modul .text-inner .text-left-border {
    padding: 0 25px 0 0;
  }

  .embed-text-modul .text-inner .text-left-border p {
    margin: 20px 0 30px 0;
    -webkit-line-clamp: 8;
    max-width: 90%;
  }

  .embed-text-modul .button-box {
    text-align: left;
    margin-top: 30px;
  }

  .embed-text-modul-rechts .custom-flex-box {
    display: flex;
    flex-direction: row;
  }

  .embed-text-modul-rechts .text-container {
    padding: 50px 90px 50px 50px;
  }

  .embed-text-modul-rechts .text-container .text-container-flex {
    justify-content: flex-end;
  }

  .embed-text-modul-rechts .text-inner .text-left-border {
    padding: 0 0 0 25px;
  }
}

/* Desktop and up (1024px+) */
@media screen and (min-width: 1024px) {
  .embed-text-modul .text-container h2 {
    font-size: 48px;
    font-size: 4.8rem;
  }
}

/* Flex sizing for video/text split - adjusted for 16:9 video */
.embed-text-modul .flex-box-sixty {
  /* Calculate width based on 16:9 ratio - video takes more space */
  flex: 0 0 calc(100% * 16 / (16 + 9));  /* ~64% */
  max-width: calc(100% * 16 / (16 + 9));
  width: calc(100% * 16 / (16 + 9));
}

.embed-text-modul .flex-box-fourty {
  /* Text takes the remaining space */
  flex: 0 0 calc(100% * 9 / (16 + 9));  /* ~36% */
  max-width: calc(100% * 9 / (16 + 9));
  width: calc(100% * 9 / (16 + 9));
  position: relative;
}

/* Ensure text container matches video height exactly */
.embed-text-modul .flex-box-fourty .text-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
}

/* Mobile responsiveness */
@media screen and (max-width: 767px) {
  .embed-text-modul .custom-flex-box {
    flex-direction: column;
  }
  
  .embed-text-modul .flex-box-sixty,
  .embed-text-modul .flex-box-fourty {
    flex: 0 1 100%;
    max-width: 100%;
    width: 100%;
  }
  
  /* Reset position for mobile */
  .embed-text-modul .flex-box-fourty {
    position: static;
  }
  
  .embed-text-modul .flex-box-fourty .text-container {
    position: static;
    height: auto;
    padding: 30px 20px;
  }
  
  /* Keep original 16:9 ratio on mobile */
  .embed-text-modul .embed-container .embed-wrapper > div {
    padding-bottom: 56.25% !important;
  }
  
  .embed-text-modul-rechts .custom-flex-box {
    flex-direction: column-reverse;
  }
}