/* ===== Single Video Block ===== */
.mk-vsingle{
  width: 100%;
  max-width: var(--mkMaxW, 860px);
  margin: 18px auto;
}

/* ===== Grid ===== */
.mk-vgrid{
  --gap: 14px;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 18px 0;
}

/* ✅ Mobil: KEIN Grid (1 Spalte, untereinander) */
@media (max-width: 767px){
  .mk-vgrid{
    grid-template-columns: 1fr;
  }
}

/* ===== Hard switch mobile/desktop ===== */
.mk-only-mobile{ display: none !important; }
.mk-only-desktop{ display: block !important; }

@media (max-width: 767px){
  .mk-only-mobile{ display: block !important; }
  .mk-only-desktop{ display: none !important; }
}

/* ===== Mobile: Vimeo-Player inline ===== */
.mk-vembed{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  box-shadow: 2px 8px 20px rgba(0,0,0,.4);
  position: relative;
}

.mk-vembed__ratio{
  width: 100%;
  aspect-ratio: var(--mkTileAR, 16/9);
  position: relative;
}

.mk-vembed__ratio iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== Desktop: Preview als Vimeo-iframe + Klickfläche ===== */
.mk-vtileframe{
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  box-shadow: 2px 8px 20px rgba(0,0,0,.4);
}

.mk-vtileframe__ratio{
  width: 100%;
  aspect-ratio: var(--mkTileAR, 16/9);
  position: relative;
  overflow: hidden;

  /* Wenn du weiter minimale Ränder siehst, lass das drin – sonst kannst du es auf inset(0) setzen */
  clip-path: inset(-2px);
}

.mk-vtileframe__ratio iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

/* Klickfläche */
.mk-vtilebtn{
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mk-vtilebtn:focus-visible{
  outline: 3px solid rgba(76, 148, 255, .65);
  outline-offset: 3px;
}

/* Play-Button */
.mk-vtilebtn__play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-55%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mk-vtilebtn__play::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%,-50%);
  width: 0;
  height: 0;
  border-left: 18px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

@media (hover:hover){
  .mk-vtileframe{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .mk-vtileframe:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 46px rgba(0,0,0,.22);
  }
}

/* ===== Modal (Desktop) ===== */
.mk-vmodal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.mk-vmodal.is-open{
  display: block;
}

.mk-vmodal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.70);
}

.mk-vmodal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(980px, calc(100vw - 26px));
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.40);
}

.mk-vmodal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  line-height: 42px;
  cursor: pointer;
  z-index: 2;
}

.mk-vmodal__frame{
  width: 100%;
  aspect-ratio: var(--mkAR, 16/9);
  background: #000;
}

.mk-vmodal__frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* scroll lock */
.mk-noscroll{
  overflow: hidden !important;
}