/*   Bildsortierung */
.sort-grid {
	--js-size: 200px;
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--global--spacing-unit);
	box-sizing: border-box;
  max-width: calc(4 * var(--js-size) + 5 * var(--global--spacing-unit) + 2px);
  list-style: none; 
  padding: var(--global--spacing-unit); 
  background: var(--wp--preset--color--accent-2); 
  border: 1px solid var(--wp--preset--color--accent-1);
}
.sort-item {
  position: relative; 
  display: flex;
  flex-direction: column;  
  overflow: hidden; 
  align-items: center; 
  justify-content: center;
	box-sizing: border-box;
  width: var(--js-size); 
  height: var(--js-size);
  background: #fff; 
  border: 1px solid var(--wp--preset--color--accent-2);
  cursor: move
}
.img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.sort-item img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
}
.sort-item input {
	box-sizing: border-box;
	width: calc(100% - var(--global-seam));
  margin: calc(var(--global-seam) / 2);
  border: none;
  outline: calc(var(--global-seam) / 2) solid white;
  text-align: center
}
.sort-item input:focus {outline-color: var(--wp--preset--color--accent-1)}
/* Platzhalter während des Ziehens */
.sort-placeholder {
	box-sizing: border-box;
  width: var(--js-size); 
  height: var(--js-size); 
  background: var(--wp--preset--color--accent-2); 
  border: 2px dashed var(--wp--preset--color--accent-1);
}
/* Das Element, während es gezogen wird */
.ui-sortable-helper {
  pointer-events: none !important; 
  z-index: 9999 !important;
}