/*   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: calc(25% - 3 * var(--global--spacing-unit) / 4);
  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 .button-wrapper {display: flex}
.sort-area button {margin: var(--global--spacing-unit) var(--global--spacing-unit) var(--global--spacing-unit) 0}
.sort-area .msg-result {display: flex; align-items: center}
.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, .sort-item textarea {
	box-sizing: border-box;
	width: calc(100% - var(--global-seam));
  margin: calc(var(--global-seam) / 2);
}
.sort-item input {
  border: none;
  outline: calc(var(--global-seam) / 2) solid white;
  text-align: center
}
.sort-item textarea {
	--js-border-size: 2px;
	--js-line-height: 1.5;
	resize: none;
	line-height: var(--js-line-height);
	padding: var(--global-seam);
  height: calc(3*var(--js-line-height)*1em + 2*var(--global-seam) + 2*var(--js-border-size));
  border: var(--js-border-size) solid var(--wp--preset--color--accent-3)
}
.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--base);
  border: 2px dashed var(--wp--preset--color--contrast)
}
/*   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}



/* Responsive */

/* Tablett Landscape */
@media only screen and (max-width: 960px) {
  .sort-grid {--js-size: calc(33.33% - 2 * var(--global--spacing-unit) / 3)}
}

/* Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 782px) {
  .sort-grid {--js-size: calc(50% - var(--global--spacing-unit) / 2)}
}	 

/* Smartphone */
@media only screen and (max-width: 480px) {
  .sort-grid {--js-size: 100%}
}