/**
 * Störer Block - Frontend & Editor Styles
 */

.stoerer-container {
	--stoerer-size: 8em;
	width: 100%;
	position: relative;
	/* Höhe 0 -> der Störer reserviert keinen Platz und wird bewusst über das
	   umliegende Element (z.B. Video) gelegt; Nachbar-Elemente fließen darunter. */
	height: 0;
	right: -4%;
	z-index: 1;
	pointer-events: none;
}

/* Der Badge selbst: Grund-Neigung + Hover-Skalierung.
   Die Scroll-Rotation liegt bewusst auf dem inneren .stoerer-badge__rotor,
   damit sich Neigung/Hover und Rotation nicht gegenseitig überschreiben. */
.stoerer-badge {
	display: block;
	position: absolute;
	/* Mitte des Störers auf die Kante des darunterliegenden Elements legen
	   (um die halbe Höhe nach oben verschoben). */
	top: calc(var(--stoerer-size) / -2);
	right: 0;
	width: var(--stoerer-size);
	height: var(--stoerer-size);
	text-decoration: none;
	pointer-events: auto;
	/* Farbe für currentColor (Outlines + Text) – passt sich im Dark-Mode automatisch an. */
	color: var(--color-text, #222222);
	/* Halbtransparente Fläche zwischen den Outlines (hell im Light-, dunkel im Dark-Mode). */
	--stoerer-fill-color: rgba(255, 255, 255, 0.35);
	transform: rotate(-8deg);
	transition: transform 0.3s ease;
}

html[data-theme="dark"] .stoerer-badge {
	--stoerer-fill-color: rgba(31, 28, 37, 0.35);
}

.stoerer-badge__fill {
	fill: var(--stoerer-fill-color);
}

/* TEST: Outlines vorübergehend ausblenden */
.stoerer-badge__ring {
	display: none;
}

.stoerer-badge:hover {
	transform: rotate(-12deg) scale(1.05);
}

.stoerer-badge:active {
	transform: rotate(-12deg) scale(0.98);
}

.stoerer-badge__rotor {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(var(--stoerer-rot, 0deg));
	will-change: transform;
}

.stoerer-badge__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.stoerer-badge__text {
	font-family: var(--bookcase-font-display);
	font-weight: bold;
}

/* Tablet/Mobile: Störer ragt 1em nach rechts und oben über die obere rechte
   Ecke des darunterliegenden Elements hinaus. */
@media (max-width: 1024px) {
	.stoerer-container {
		right: -1em;
	}

	.stoerer-badge {
		top: -1em;
	}

	/* Verhindert horizontales Wegscrollen durch den überstehenden Störer.
	   clip (statt hidden) erzeugt KEINEN Scroll-Container und lässt die andere
	   Achse sichtbar -> das Dokument scrollt weiterhin über window, die
	   Scroll-Rotation bleibt erhalten. Die body-Regel nutzt bewusst die höhere
	   Spezifität "html body", um die Theme-Regel body{overflow-x:hidden} (<=522px)
	   zu überschreiben; sonst würde body dort zum Scroll-Container und die
	   Rotation auf Mobile bräche. */
	html {
		overflow-x: clip;
	}

	html body {
		overflow-x: clip;
	}
}