/*
 * SLP Globus
 *
 * Die Bühne für die Weltkugel. Sie steht bewusst ohne Rahmen und ohne
 * eigenen Grund: die Kugel bringt ihren Weltraum selbst mit, und der
 * Seitenhintergrund trägt bis an den Rand durch.
 */

.slp-globus {
	position: relative;
	display: block;
	width: 100%;
	height: clamp(320px, 64vh, 680px);
	margin-inline: auto;
	/* Luft nach unten, sonst steht der Knopf auf dem ersten Absatz. */
	margin-block-end: clamp(1.5rem, 4vw, 3rem);
	overflow: hidden;
}

/*
 * Auf schmalen Geräten nimmt die Bühne sonst zwei Drittel des Bildschirms
 * ein und das Zeichen steht allein in einer großen leeren Fläche.
 */
@media (max-width: 600px) {
	.slp-globus {
		height: clamp(260px, 46vh, 400px);
	}
}

.slp-globus__bild {
	display: block;
	width: 100%;
	height: 100%;

	/*
	 * Weicher Auslauf an allen vier Kanten. Während der Kartenphase füllt
	 * die Landmasse die ganze Fläche und bricht sonst als scharfes Rechteck
	 * mitten auf der Seite ab. Die Maske liegt bewusst auf dem Canvas und
	 * nicht auf der Bühne - der Knopf sitzt in der Ecke und würde darin
	 * gleich mit verblassen.
	 */
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
		linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
	mask-image:
		linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
		linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/*
 * Der Knopf hält sich zurück, bis die Fahrt vorbei ist - während der Fahrt
 * wäre er nur ein Angebot, sie abzubrechen.
 */
.slp-globus__neu {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.9em;
	border: 1px solid var(--slp-linie, rgba(135, 148, 160, 0.22));
	border-radius: var(--slp-radius, 3px);
	background: color-mix(in srgb, var(--slp-eisen, #191f25) 82%, transparent);
	color: var(--slp-stahl, #8794a0);
	font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", monospace);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transform: translateY(0.4em);
	transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease, border-color 0.2s ease;
	pointer-events: none;
}

.slp-globus.ist-angekommen .slp-globus__neu {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.slp-globus__neu:hover,
.slp-globus__neu:focus-visible {
	color: var(--slp-kalk, #edeae4);
	border-color: var(--slp-linie-stark, rgba(135, 148, 160, 0.4));
}

/* Ohne Skript bleibt die Fläche leer statt als Loch stehen zu bleiben. */
.slp-globus__ersatz {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	color: var(--slp-stahl, #8794a0);
	text-align: center;
}

.slp-globus__ersatz img {
	width: min(58%, 320px);
	height: auto;
}

.slp-globus:has(.slp-globus__bild) .slp-globus__ersatz {
	display: none;
}

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