/* ═══════════════ Spacing-Debug-Layer (VisBug-Pattern) ═══════════════
   Hover-driven Distance-Messung. Aktiv wenn body.bp-spacing-debug-on.
*/

#bp-spacing-debug-toggle {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	background: #0b0b3d;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, background 0.15s ease;
}
#bp-spacing-debug-toggle:hover {
	transform: translateY(-1px);
	background: #1e1e7a;
}
body.bp-spacing-debug-on #bp-spacing-debug-toggle {
	background: #ffec6d;
	color: #0b0b3d;
}

/* Hint-Pill neben dem Toggle (nur sichtbar wenn aktiv) */
#bp-sd-hint {
	position: fixed;
	bottom: 20px;
	left: 130px;
	z-index: 999998;
	display: none;
	max-width: 520px;
	padding: 7px 12px;
	background: rgba(11, 11, 61, 0.92);
	color: #fff;
	font: 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	border-radius: 4px;
	pointer-events: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
#bp-sd-hint strong {
	color: #ffec6d;
	font-weight: 600;
}
body.bp-spacing-debug-on #bp-sd-hint { display: block; }

/* Hover-Layer — alle Overlays sind hier drin */
.bp-sd-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	z-index: 9999;
}

/* Outline um das Element unter dem Cursor (Hover) */
.bp-sd-hover-outline {
	position: absolute;
	outline: 2px solid rgba(0, 150, 200, 0.85);
	outline-offset: -1px;
	background: rgba(0, 150, 200, 0.06);
	pointer-events: none;
	border-radius: 1px;
}

/* Anchor-Outline (geklicktes Element bleibt highlighted) */
.bp-sd-anchor-outline {
	position: absolute;
	outline: 2px solid rgba(255, 140, 0, 0.9);
	outline-offset: -1px;
	background: rgba(255, 140, 0, 0.08);
	pointer-events: none;
	border-radius: 1px;
}

/* Distance-Pfeile (Bemaßungs-Linien zwischen Elementen) */
.bp-sd-arrow {
	position: absolute;
	background: #d63384;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Font-Info-Pill (oben am Hover-Element) */
.bp-sd-font-info {
	position: absolute;
	background: #0b0b3d;
	color: #ffec6d;
	font: 700 11px/1 -apple-system, BlinkMacSystemFont, monospace;
	padding: 4px 8px;
	border-radius: 3px;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	z-index: 2;
}

/* Pixel-Label am Pfeil */
.bp-sd-arrow-label {
	position: absolute;
	background: #fff;
	border: 1px solid #d63384;
	color: #d63384;
	font: 700 11px/1 -apple-system, BlinkMacSystemFont, monospace;
	padding: 3px 7px;
	border-radius: 3px;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	transform: translate(0, -50%);
	z-index: 1;
}

/* Wenn aus → komplett unsichtbar */
body:not(.bp-spacing-debug-on) .bp-sd-layer,
body:not(.bp-spacing-debug-on) .bp-sd-hover-outline,
body:not(.bp-spacing-debug-on) .bp-sd-anchor-outline,
body:not(.bp-spacing-debug-on) .bp-sd-arrow,
body:not(.bp-spacing-debug-on) .bp-sd-arrow-label,
body:not(.bp-spacing-debug-on) .bp-sd-font-info {
	display: none !important;
}

/* Cursor-Hint im aktivierten Mode */
body.bp-spacing-debug-on main,
body.bp-spacing-debug-on .l-main {
	cursor: crosshair;
}

@media (max-width: 1023px) {
	body.bp-spacing-debug-on .bp-sd-layer { display: none; }
	body.bp-spacing-debug-on::after {
		content: "Spacing-Debug nur ab 1024px Breite sichtbar";
		position: fixed;
		bottom: 70px;
		left: 20px;
		z-index: 999998;
		background: #0b0b3d;
		color: #fff;
		padding: 6px 10px;
		border-radius: 4px;
		font: 11px/1 sans-serif;
	}
}