.toto_youtube-modal {
  position: relative;
}
.toto_youtube-modal-preview {
  aspect-ratio: 16 / 9; /* oder 4/3 etc. */
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*youtube embed video iframe like play button with red background polygon*/
/*<svg viewBox="0 0 95 68" width="95" height="68">
  <path fill="#FF0000" d="M92.3,10.7c-1.1-4.1-4.3-7.3-8.4-8.4C76.4,0,47.5,0,47.5,0S18.6,0,11.1,2.3c-4.1,1.1-7.3,4.3-8.4,8.4C0.4,18.2,0.4,34,0.4,34s0,15.8,2.3,23.3c1.1,4.1,4.3,7.3,8.4,8.4C18.6,68,47.5,68,47.5,68s28.9,0,36.4-2.3c4.1-1.1,7.3-4.3,8.4-8.4C94.6,52.2,94.6,34,94.6,34S94.6,15.8,92.3,10.7z"/>
  <polygon fill="white" points="38,20 38,48 62,34"/>
</svg>*/
.toto_youtube-modal-preview::before {
  content: "";
  width: 80px;
  height: 80px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"><polygon points="30,0 70,0 85,2 95,10 98,20 100,35 98,50 95,60 85,68 70,70 30,70 15,68 5,60 2,50 0,35 2,20 5,10 15,2" fill="rgba(255, 0, 0, 0.8)"/></svg>') no-repeat center center;
  border-radius: 50%;
  position: absolute;
}
.toto_youtube-modal-preview::after {
  content: "";
  width: 60px;
  height: 60px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="40,30 70,50 40,70" fill="rgba(255, 255, 255, 0.8)"/></svg>') no-repeat center center;
  background-size: contain;
  position: absolute;  
}
/*youtube like play button with red background polygon END*/

.toto_youtube-modal-asset {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.toto_youtube-modal-asset.hidden {
  display: none;
}
.toto_youtube-modal-asset-inner {
  position: relative;
  width: 80vw;
  max-height: 80vh;
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toto_youtube-modal-video {
  width: 100%;
  aspect-ratio: 16 / 9;   /* oder 4/3 etc. */
  max-height: calc(80vh - 60px); /* 80vh minus padding oben+unten */
}
.toto_youtube-modal-video iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.toto_youtube-modal-close {
  margin: 0 auto;
  cursor: pointer;
}

.toto_youtube-modal_text-preview-wrapper {
  display: flex;
}
/*
0 = Oben
8 = Unten
26 = Links
25 = Rechts
*/
.toto_youtube-modal_text-preview-wrapper.content-orientation-0 {
  flex-direction: column-reverse;
  gap: 10px;
}
.toto_youtube-modal_text-preview-wrapper.content-orientation-8 {
  flex-direction: column;
  gap: 10px;
}
.toto_youtube-modal_text-preview-wrapper.content-orientation-25 {
  flex-direction: row;
  gap: 10px;
}
.toto_youtube-modal_text-preview-wrapper.content-orientation-26 {
  flex-direction: row-reverse;
  gap: 10px;
}
.toto_youtube-modal_text-preview-wrapper.content-orientation-25 .toto_youtube-modal-preview,
.toto_youtube-modal_text-preview-wrapper.content-orientation-26 .toto_youtube-modal-preview {
  width: 37.5%;
  min-width: 37.5%;
}

/*Full width modal video and no border for mobile*/
@media screen and (max-width: 1023px) {
  .toto_youtube-modal-asset-inner {
    width: 100vw;
    height: auto;
    max-height: none;
    padding: 0;
    border-radius: 0;
  }
  .toto_youtube-modal-video {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .toto_youtube-modal_text-preview-wrapper.content-orientation-25,
  .toto_youtube-modal_text-preview-wrapper.content-orientation-0 {
    flex-direction: column;
    gap: 10px;    
  }
  .toto_youtube-modal_text-preview-wrapper.content-orientation-26,
  .toto_youtube-modal_text-preview-wrapper.content-orientation-8 {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .toto_youtube-modal_text-preview-wrapper.content-orientation-0 .toto_youtube-modal-preview,
  .toto_youtube-modal_text-preview-wrapper.content-orientation-8 .toto_youtube-modal-preview,
  .toto_youtube-modal_text-preview-wrapper.content-orientation-25 .toto_youtube-modal-preview,
  .toto_youtube-modal_text-preview-wrapper.content-orientation-26 .toto_youtube-modal-preview {
    width: 100%;
    min-width: 100%;
  }
}