/*
   SLP Nach oben
   ---------------------------------------------------------------
   Ein Knopf am rechten unteren Rand, gebaut aus denselben Tokens wie
   das Theme. Jeder Wert trägt einen Rückfallwert, damit er auch ohne
   das Theme „SLP Hütte“ nicht in Systemfarben zerfällt.

   Am unteren Rand des Knopfes läuft ein dünner Balken mit, der den
   gelesenen Anteil der Seite zeigt – dieselbe Idee wie die
   Temperaturskala am Hero, nur klein.
   --------------------------------------------------------------- */

.slp-oben {
	--oben-eisen: var(--slp-eisen, #191f25);
	--oben-eisen-hell: var(--slp-eisen-hell, #222b33);
	--oben-kalk: var(--slp-kalk, #edeae4);
	--oben-stahl: var(--slp-stahl, #8794a0);
	--oben-glut: var(--slp-glut, #ff5a1f);
	--oben-linie: var(--slp-linie-stark, rgba(135, 148, 160, 0.4));
	--oben-radius: var(--slp-radius, 3px);

	position: fixed;
	z-index: 60;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);

	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 0.9rem;
	overflow: hidden;

	/* Deckend, ohne backdrop-filter: mit Blur wird der Knopf auf Geräten
	   ohne GPU-Beschleunigung gar nicht gemalt – bei einem Bedienelement
	   ist das kein akzeptabler Preis für einen kaum sichtbaren Effekt. */
	background: var(--oben-eisen);
	color: var(--oben-kalk);
	border: 1px solid var(--oben-linie);
	border-radius: var(--oben-radius);
	cursor: pointer;

	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;

	/* Ausgangszustand: unsichtbar und nicht anklickbar. Erst die Klasse
	   is-sichtbar holt ihn herein. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	pointer-events: none;

	transition:
		opacity 260ms ease,
		transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 260ms,
		border-color 160ms ease,
		color 160ms ease,
		background-color 160ms ease;

	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.slp-oben.is-sichtbar {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

.slp-oben:hover,
.slp-oben:focus-visible {
	background: var(--oben-eisen-hell);
	border-color: var(--oben-glut);
	color: var(--oben-glut);
}

.slp-oben:focus-visible {
	outline: 2px solid var(--slp-messing, #e5a93c);
	outline-offset: 3px;
}

.slp-oben:active {
	transform: translateY(1px);
}

.slp-oben__pfeil {
	flex: none;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.slp-oben:hover .slp-oben__pfeil,
.slp-oben:focus-visible .slp-oben__pfeil {
	transform: translateY(-2px);
}

/* Der Fortschrittsbalken. Der Wert kommt aus dem Skript als Zahl
   zwischen 0 und 1 und wird hier zur Breite. */
.slp-oben::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: var(--oben-glut);
	transform: scaleX(var(--slp-oben-fortschritt, 0));
	transform-origin: left;
	opacity: 0.75;
}

/* Auf schmalen Anzeigen bleibt nur der Pfeil – die Schrift daneben
   kostet dort mehr Platz, als sie erklärt. */
.slp-oben__wort {
	display: none;
}

@media (min-width: 640px) {
	.slp-oben__wort {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slp-oben,
	.slp-oben__pfeil {
		transition: opacity 160ms ease, visibility 0s;
		transform: none;
	}

	.slp-oben:hover .slp-oben__pfeil,
	.slp-oben:focus-visible .slp-oben__pfeil {
		transform: none;
	}
}