/* ══ Baustein Sprungzeile ════════════════════════════════════
   Vorbild: 03_Design/final/idee-soelden.html

   Eine Zeile im Fluss, keine zweite Navigation. Sie scrollt mit,
   nimmt keine Rasterspalte und tritt nur auf /soelden/ auf.

   Am Handy rollt sie waagrecht statt umzubrechen: zwei Zeilen
   Sprungmarken sehen aus wie ein Menue.
   ═════════════════════════════════════════════════════════════ */

.sprungzeile {
	border-bottom: 1px solid var(--ln);
}

/* Zwei Pixel unter dem Kopf, nicht --nachbild: die Zeile gehoert zu
   ihm, sie ist sein Inhaltsverzeichnis. Siehe die Regel
   .hauptteil > .kopf + * in seiten.css. */
.hauptteil > .kopf + .sprungzeile {
	padding-top: 0;
}

/* Das Polster sitzt an der Zeile, nicht am Verweis: die Zeile steht
   unmittelbar unter der Kante des Kopfbilds, und mit dem Polster am
   Verweis stand die Schrift dreizehn Pixel darunter. */
.sprungzeile__g {
	display: flex;
	gap: var(--s5);
	padding-block: var(--s2);
	overflow-x: auto;
	scrollbar-width: none;
}

.sprungzeile__g::-webkit-scrollbar {
	display: none;
}

.sprungzeile a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: .875rem;
	font-weight: var(--gw-halb);
	color: var(--mu);
	white-space: nowrap;
}

.sprungzeile a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--tx);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--e);
}

.sprungzeile a:hover {
	color: var(--tx);
}

.sprungzeile a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
	.sprungzeile a::after { transition: none; }
}