html,body { height:100%; margin:0; }
  /* Fullscreen Video */
  .yt-fullscreen {
    position: fixed;
    inset: 0;              /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    z-index: 9999;         /* Video unter Modal */
    background: black;
  }
  .yt-fullscreen iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* Button (zuerst sichtbar über dem Video) */
  .open-modal-btn {
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 10001;        /* über Video und Modal-Backdrop */
    background: rgba(255,255,255,0.9);
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
  }

  /* Modal Backdrop */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;        /* hidden initially */
    align-items: center;
    justify-content: center;
    z-index: 10000;       /* über Video, unter ggf. button (if you want) */
    padding: 1rem;
  }
  .modal-backdrop.show { display: flex; }

  /* Modal Dialog */
  .modal {
    background: #fff;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 1rem;
    position: relative;
  }

  .modal-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
  .modal-title { font-size:1.125rem; font-weight:600; margin:0; }
  .modal-close {
    background: transparent;
    border: 0;
    font-size: 1.2rem;
    cursor: pointer;
  }

  @media (max-width:480px){
    .open-modal-btn { right: 0.5rem; top: 0.5rem; padding:0.4rem 0.6rem; }
    .modal { padding:0.75rem; }
  }