/* ==========================================================================
   freyhauer/rocket-scroll – Orbit-Kapsel
   Schwebendes Badge unten links/rechts: Fortschrittsring, in der Mitte eine
   schräg fliegende Rakete, daneben Countdown + aktueller Abschnitt.
   Klick öffnet die Liste aller Abschnitte.
   Alle Farben/Größen über Custom Properties überschreibbar.
   ========================================================================== */

.rs {
	--rs-bg: #29223d;
	--rs-ink: #f3eff8;
	--rs-muted: rgba(243, 239, 248, .62);
	--rs-line: rgba(243, 239, 248, .14);
	--rs-accent: #ff5f52;
	--rs-hull: #ffffff;
	--rs-hull-line: #1f1a2f;
	--rs-flame: #ffb347;
	--rs-space: #15111f;
	--rs-ring: 56px;
	--rs-gap: 24px;
	--rs-shadow: 0 12px 32px -12px rgba(15, 11, 24, .65);
	--rs-font: inherit;
	--rs-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
	--rs-ease: cubic-bezier(.2, .7, .2, 1);
	--rs-z: 1030;
	--p: 0;

	position: fixed;
	z-index: var(--rs-z);
	right: calc(var(--rs-gap) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--rs-gap) + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	font-family: var(--rs-font);
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
}
.rs *, .rs *::before, .rs *::after { box-sizing: border-box; }

.rs--left {
	right: auto;
	left: calc(var(--rs-gap) + env(safe-area-inset-left, 0px));
	align-items: flex-start;
}

/* ---------- Badge ---------- */
.rs__pill {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 6px 18px 6px 6px;
	border: 0;
	border-radius: 999px;
	background: var(--rs-bg);
	color: var(--rs-ink);
	box-shadow: var(--rs-shadow);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .25s var(--rs-ease);
}
.rs__pill:hover { transform: translateY(-2px); }
.rs__pill:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 3px; }

.rs__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Ring ---------- */
.rs__ring {
	position: relative;
	flex: none;
	width: var(--rs-ring);
	height: var(--rs-ring);
}
.rs__ring-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.rs__track { fill: none; stroke: var(--rs-line); stroke-width: 2.5; }
.rs__prog {
	fill: none;
	stroke: var(--rs-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset .12s linear;
}

/* Markierungen der Abschnitte auf dem Ring */
.rs__ticks { position: absolute; inset: 0; }
.rs__tick {
	position: absolute;
	inset: 0;
	transform: rotate(calc(var(--tp) * 360deg));
}
.rs__tick::before {
	/*content: "";*/
	position: absolute;
	top: calc(var(--rs-ring) * 2 / 52 - 1.5px);
	left: 50%;
	width: 3px;
	height: 3px;
	margin-left: -1.5px;
	border-radius: 50%;
	background: var(--rs-ink);
	opacity: .45;
	transition: background .25s, opacity .25s;
}
.rs__tick.is-passed::before { background: var(--rs-bg); opacity: .9; }

/* ---------- Fenster mit Sternen + Rakete ---------- */
.rs__window {
	position: absolute;
	inset: 7px;
	overflow: hidden;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rs-space) 70%, #4a3f6e), var(--rs-space) 75%);
}

/* Zwei Sternenschichten in verschiedenen Kachelgrößen → Parallaxe.
   Die Animation verschiebt jede Schicht um genau eine Kachel, daher nahtlos. */
.rs__stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .95) 0 .8px, transparent 1.3px),
		radial-gradient(circle at 70% 75%, rgba(255, 255, 255, .5) 0 .6px, transparent 1px);
	background-size: 14px 14px, 9px 9px;
	animation: rs-warp .45s linear infinite paused;
}
@keyframes rs-warp {
	to { background-position: -14px 14px, -9px 9px; }
}
.rs.is-flying .rs__stars { animation-play-state: running; }
.rs.is-reverse .rs__stars { animation-direction: reverse; }
.rs.is-boarded:not(.is-flying) .rs__stars {
	animation-duration: 2.4s;
	animation-play-state: running;
}

.rs__rocket {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform .4s var(--rs-ease);
}
.rs.is-flying .rs__rocket { transform: translate(-50%, -50%) rotate(40deg) scale(1.06); }
.rs.is-flying.is-reverse .rs__rocket { transform: translate(-50%, -50%) rotate(52deg) scale(.96); }

.rs__rocket-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	animation: rs-float 2.8s ease-in-out infinite alternate;
}
.rs.is-flying .rs__rocket-svg { animation: rs-shake .09s linear infinite alternate; }
@keyframes rs-float {
	from { transform: translateY(1px); }
	to { transform: translateY(-1.5px); }
}
@keyframes rs-shake {
	from { transform: translate(-.4px, .3px); }
	to { transform: translate(.4px, -.3px); }
}

.rs__hull { fill: var(--rs-hull); stroke: var(--rs-hull-line); stroke-width: 1.2; }
.rs__win, .rs__fin { fill: var(--rs-accent); stroke: var(--rs-hull-line); stroke-width: 1; }
.rs__flame {
	fill: var(--rs-flame);
	transform-box: fill-box;
	transform-origin: 50% 0;
	transform: scaleY(.35);
	opacity: .75;
	transition: transform .3s var(--rs-ease), opacity .3s;
}
.rs.is-flying .rs__flame,
.rs.is-boarded .rs__flame {
	opacity: 1;
	animation: rs-flicker .1s steps(2) infinite alternate;
}
@keyframes rs-flicker {
	from { transform: scaleY(1.05) scaleX(1.1); }
	to { transform: scaleY(1.4) scaleX(.9); }
}

/* ---------- Text ---------- */
.rs__txt {
	display: grid;
	gap: 2px;
	min-width: 96px;
}
.rs__countdown {
	font-family: var(--rs-mono);
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--rs-muted);
	font-variant-numeric: tabular-nums;
	transition: color .3s;
}
.rs.is-boarded .rs__countdown { color: var(--rs-accent); }
.rs__current {
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---------- Abschnittsliste ---------- */
.rs__list {
	min-width: 220px;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	display: grid;
	gap: 2px;
	border-radius: 14px;
	background: var(--rs-bg);
	color: var(--rs-ink);
	box-shadow: var(--rs-shadow);
	transform-origin: bottom right;
	animation: rs-pop .25s var(--rs-ease);
}
.rs--left .rs__list { transform-origin: bottom left; }
.rs__list[hidden], .rs__item[hidden] { display: none; }
@keyframes rs-pop {
	from { opacity: 0; transform: translateY(6px) scale(.97); }
}
.rs__item { margin: 0; padding: 0; }
.rs__step {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--rs-muted);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.rs__step:hover,
.rs__step:focus-visible { background: rgba(243, 239, 248, .07); color: var(--rs-ink); text-decoration: none; }
.rs__step:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: -2px; }
.rs__num {
	font-family: var(--rs-mono);
	font-size: 10px;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}
.rs__step.is-passed .rs__num { color: var(--rs-accent); }
.rs__step.is-active { color: var(--rs-ink); }
.rs__step.is-active .rs__num { color: var(--rs-accent); opacity: 1; }

/* ---------- Mobil ---------- */
@media (max-width: 899.98px) {
	.rs { --rs-ring: 48px; --rs-gap: 14px; }
	.rs--hide-mobile { display: none; }
	.rs__pill { gap: 10px; padding-right: 14px; }
	.rs__txt { min-width: 0; }
	.rs__current { max-width: 120px; font-size: 12px; }
	.rs__rocket { width: 12px; }
}

/* Das Badge ersetzt den Scroll-to-Top-Pfeil des Themes (JS entfernt ihn zusätzlich).
   Per CSS sofort ausblenden, damit er beim Laden nicht kurz aufblitzt. */
body:has(.rs) .scroll-top { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.rs *, .rs *::before, .rs *::after {
		transition: none !important;
		animation: none !important;
	}
}