/**
 * Nützliche Boxen — frontend
 */

.nbx-group {
	display: flex;
	flex-wrap: wrap;
	align-items: var(--nbox-align, stretch);
	justify-content: var(--nbox-justify, flex-start);
	column-gap: var(--nbox-gap, 20px);
	row-gap: var(--nbox-row-gap, 20px);
	padding-left: var(--nbox-group-pad-x, 24px);
	padding-right: var(--nbox-group-pad-x, 24px);
	overflow: visible;
	box-sizing: border-box;
	width: 100%;
}

.nbx-group > .nbx-box {
	flex: 1 1 calc((100% / var(--nbox-cols, 4)) - var(--nbox-gap, 20px) + (var(--nbox-gap, 20px) / var(--nbox-cols, 4)));
	max-width: calc((100% / var(--nbox-cols, 4)) - var(--nbox-gap, 20px) + (var(--nbox-gap, 20px) / var(--nbox-cols, 4)));
	min-width: 0;
	box-sizing: border-box;
}

.nbx-box {
	display: flex;
	flex-direction: column;
	align-items: var(--nbox-justify, flex-start);
	justify-content: var(--nbox-align, flex-start);
	transform: skewX(var(--nbox-skew-x, 0deg)) skewY(var(--nbox-skew-y, 0deg)) rotate(var(--nbox-rotate, 0deg));
	transform-origin: var(--nbox-origin, center);
	border-width: var(--nbox-bd-w-t, var(--nbox-bd-w, 0))
		var(--nbox-bd-w-r, var(--nbox-bd-w, 0))
		var(--nbox-bd-w-b, var(--nbox-bd-w, 0))
		var(--nbox-bd-w-l, var(--nbox-bd-w, 0));
	border-style: var(--nbox-bd-style, solid);
	border-color: var(--nbox-bd-color, transparent);
	border-radius: var(--nbox-radius-tl, var(--nbox-radius, 0))
		var(--nbox-radius-tr, var(--nbox-radius, 0))
		var(--nbox-radius-br, var(--nbox-radius, 0))
		var(--nbox-radius-bl, var(--nbox-radius, 0));
	padding: var(--nbox-pad-t, var(--nbox-pad, 0))
		var(--nbox-pad-r, var(--nbox-pad, 0))
		var(--nbox-pad-b, var(--nbox-pad, 0))
		var(--nbox-pad-l, var(--nbox-pad, 0));
	margin: var(--nbox-mar-t, var(--nbox-mar, 0))
		var(--nbox-mar-r, var(--nbox-mar, 0))
		var(--nbox-mar-b, var(--nbox-mar, 0))
		var(--nbox-mar-l, var(--nbox-mar, 0));
	background: var(--nbox-bg, transparent);
	background-image: var(--nbox-bg-image, none);
	background-size: var(--nbox-bg-size, cover);
	background-position: var(--nbox-bg-pos, center);
	background-repeat: no-repeat;
	color: var(--nbox-color, inherit);
	min-height: var(--nbox-min-h, 0);
	box-shadow: var(--nbox-sh-inset, )
		var(--nbox-sh-x, 0)
		var(--nbox-sh-y, 0)
		var(--nbox-sh-blur, 0)
		var(--nbox-sh-spread, 0)
		var(--nbox-sh-color, transparent);
	transition:
		transform var(--nbox-dur, 0.3s) ease,
		background var(--nbox-dur, 0.3s) ease,
		border-color var(--nbox-dur, 0.3s) ease,
		box-shadow var(--nbox-dur, 0.3s) ease,
		color var(--nbox-dur, 0.3s) ease;
	box-sizing: border-box;
	width: 100%;
	overflow: visible;
}

.nbx-box > * {
	/* Content inherits the skewed coordinate system — no counter-skew. */
	max-width: 100%;
}

.nbx-box:hover {
	background: var(--nbox-hover-bg, var(--nbox-bg, transparent));
	border-color: var(--nbox-hover-bd, var(--nbox-bd-color, transparent));
	transform:
		skewX(var(--nbox-hover-skew-x, var(--nbox-skew-x, 0deg)))
		skewY(var(--nbox-skew-y, 0deg))
		rotate(var(--nbox-rotate, 0deg))
		scale(var(--nbox-hover-scale, 1));
}

@media (max-width: 1024px) {
	.nbx-group > .nbx-box {
		flex-basis: calc((100% / var(--nbox-cols-tab, 2)) - var(--nbox-gap, 20px) + (var(--nbox-gap, 20px) / var(--nbox-cols-tab, 2)));
		max-width: calc((100% / var(--nbox-cols-tab, 2)) - var(--nbox-gap, 20px) + (var(--nbox-gap, 20px) / var(--nbox-cols-tab, 2)));
	}
}

@media (max-width: 767px) {
	.nbx-group > .nbx-box {
		flex-basis: calc((100% / var(--nbox-cols-mob, 1)) - var(--nbox-gap, 20px) + (var(--nbox-gap, 20px) / var(--nbox-cols-mob, 1)));
		max-width: calc((100% / var(--nbox-cols-mob, 1)) - var(--nbox-gap, 20px) + (var(--nbox-gap, 20px) / var(--nbox-cols-mob, 1)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.nbx-box {
		transition: none;
	}
}