/*   Breiten und Abstände */
body {
  --global--spacing-unit: 15px;
  --global-seam: 6px;
}  

/*   Bildsortierung */
.sort-area figcaption {
	padding: var(--global-seam) var(--global--spacing-unit) ;  
	color: var(--wp--preset--color--accent)
}
.sort-area figcaption + * {margin-top: 0; padding-top: 0} 
.sort-grid {
	--js-size: 200px;
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--global--spacing-unit);
	box-sizing: border-box;
	min-height: var(--js-size);
  max-width: calc(4 * var(--js-size) + 5 * var(--global--spacing-unit) + 2px);
  list-style: none; 
  padding: var(--global--spacing-unit); 
  border: 1px solid var(--wp--preset--color--accent-1);
}
.sort-area figcaption, .sort-grid {background: var(--wp--preset--color--accent-2)}  
.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-3); 
  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;
}


/* Bilder hochladen */
.di-upload-area {position: relative}
.drop-area {
  display:none; 
	position:absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%; 
	background:rgba(0,123,255,0.3); 
	border:5px dashed #007bff; 
	z-index:9999; 
	pointer-events:none
}
.di-upload-area.selected .drop-area {display:block}