/* Strudel-Hero (Frontend und Editor). Gehört zur Bühne: Farben und Schrift nur über Stil-Tokens (STIL.md). */
.fk-hero {
	position: relative; min-height: 100svh; display: flex; align-items: center;
	background: radial-gradient(ellipse 60% 70% at 70% 50%, var(--buehne-schein) 0%, transparent 70%), var(--buehne-tief);
	color: var(--buehne-text); overflow: hidden; isolation: isolate;
	margin-block: 0 !important;
}
.fk-hero__wirbel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* Schutzschicht links und unten, damit der Text vor dem Wirbel lesbar bleibt (in beiden Stilen) */
.fk-hero::after {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--buehne-tief) 92%, transparent) 0%, color-mix(in srgb, var(--buehne-tief) 55%, transparent) 38%, transparent 62%),
		linear-gradient(0deg, var(--buehne-tief) 0%, transparent 22%);
}
.fk-hero__innen { width: min(100% - 2 * var(--rand), 90rem); margin-inline: auto; padding-top: calc(var(--header-hoehe) + var(--s-7)); padding-bottom: var(--s-9); }
.fk-hero .fk-kicker { color: var(--buehne-akzent); }
.fk-hero__titel { color: var(--buehne-titel); max-width: 11ch; margin: 0 0 var(--s-5); font-size: calc(clamp(2.7rem, 1.4rem + 5.2vw, 6.4rem) * var(--titel-mass)); font-stretch: 112%; font-weight: calc(760 * var(--gewicht-mass)); letter-spacing: -.035em; line-height: 1.02; hyphens: auto; }
.fk-hero__titel em { font-style: normal; color: var(--buehne-akzent); display: block; }
.fk-hero .fk-lead { color: var(--buehne-text); max-width: 34rem; margin: 0 0 var(--s-6); }
.fk-hero__messwerte {
	position: absolute; right: var(--rand); bottom: var(--s-6); z-index: 1; margin: 0;
	display: grid; grid-template-columns: repeat(3, auto); gap: var(--s-2) var(--s-6);
	font-family: var(--etikett-schrift); font-size: calc(.72rem * var(--etikett-mass)); letter-spacing: calc(.06em * var(--sperrung)); color: var(--buehne-leise); text-transform: var(--versalien);
}
.fk-hero__messwerte dd { margin: 0; }
.fk-hero__messwerte b { display: block; font-family: var(--schrift-titel); font-size: 1.5rem; color: var(--buehne-titel); font-weight: calc(650 * var(--gewicht-mass)); letter-spacing: -.01em; text-transform: none; font-stretch: 108%; font-variant-numeric: tabular-nums; }
/* Verlinkte Kennzahl: Die Beschriftung ist der Link; seine Klickfläche (::after) deckt Zahl und
   Beschriftung. In Ruhe nur ein kleiner Pfeil in der Farbe der Beschriftung; beim Darüberfahren und
   mit Fokus wird die Beschriftung hell, die Zahl nimmt die Akzentfarbe an, der Pfeil rückt nach rechts. */
.fk-hero__messwert--link { position: relative; }
.fk-hero__messwerte .fk-hero__messlink { color: inherit; text-decoration: none; transition: color .3s; }
.fk-hero__messlink::after { content: ''; position: absolute; inset: -.3rem -.4rem; border-radius: var(--radius-s); }
/* Pfeil per transform verschieben, nicht per left: Bewegung beim Darüberfahren zählt sonst als Layoutsprung */
.fk-hero__messpfeil { display: inline-block; transition: transform .35s var(--bewegung), color .3s; }
.fk-hero__messwert--link b { transition: color .3s; }
.fk-hero__messwerte .fk-hero__messwert--link:is(:hover, :focus-within) .fk-hero__messlink { color: var(--buehne-titel); }
.fk-hero__messwert--link:is(:hover, :focus-within) :is(b, .fk-hero__messpfeil) { color: var(--buehne-akzent); }
.fk-hero__messwert--link:hover .fk-hero__messpfeil { transform: translateX(3px); }
/* Tastatur: Der Rahmen liegt um Zahl und Beschriftung (wie bei den Beitragskarten); ohne :has()
   zeichnet ihn die Klickfläche des Links. */
.fk-hero__messwert--link:has(.fk-hero__messlink:focus-visible) { outline: 2px solid var(--buehne-akzent); outline-offset: .4rem; border-radius: var(--radius-s); }
.fk-hero__messwerte .fk-hero__messlink:focus-visible { outline: none; }
@supports not selector(:has(*)) {
	.fk-hero__messlink:focus-visible::after { outline: 2px solid var(--buehne-akzent); }
}
.fk-hero__weiter {
	position: absolute; left: var(--rand); bottom: var(--s-6); z-index: 1;
	font-family: var(--etikett-schrift); font-size: calc(.7rem * var(--etikett-mass)); letter-spacing: calc(.14em * var(--sperrung)); text-transform: var(--versalien); color: var(--buehne-leise);
	display: flex; align-items: center; gap: .75rem; text-decoration: none;
}
.fk-hero__weiter:hover { color: var(--buehne-titel); }
.fk-hero__weiter i { width: 1px; height: 2.6rem; background: linear-gradient(var(--buehne-akzent), transparent); position: relative; overflow: hidden; }
/* Der Lichtpunkt rieselt per transform (gleiche Strecke wie früher top: −40 % → 100 %, also −100 % → 250 % der
   eigenen Höhe): Eine animierte Lage zählt in jedem Bild als Layoutsprung, eine Transformation nicht */
.fk-hero__weiter i::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--buehne-titel); transform: translateY(-100%); animation: fk-rieseln 2.4s var(--bewegung) infinite; }
@keyframes fk-rieseln { to { transform: translateY(250%); } }
.fk-anker { display: block; height: 0; }

/* Schmale Schirme: der Hero ist so hoch wie sein Inhalt, und der Wirbel dreht sich um das Ende des
   Titels (strudel.js misst den Schlusspunkt) – Bild und Text als eine Komposition, kein Bild darüber.
   Hinter dem Text bleibt der Wirbel zurückhaltend: --wirbel-schmal wie im Seitenkopf, hier etwas
   kräftiger, weil der Wirbel klein um den Titel liegt (Dunkel voll, Klinisch rund .6). */
@media (max-width: 52rem) {
	.fk-hero {
		min-height: 0; flex-direction: column; justify-content: flex-start; align-items: stretch;
		background: radial-gradient(ellipse 80% 45% at 62% 30%, var(--buehne-schein) 0%, transparent 70%), var(--buehne-tief);
	}
	.fk-hero__wirbel { opacity: min(1, calc(var(--wirbel-schmal) * 1.7)); }
	.fk-hero::after { background: linear-gradient(0deg, color-mix(in srgb, var(--buehne-tief) 80%, transparent) 0%, transparent 30%); }
	.fk-hero__innen { padding-top: calc(var(--header-hoehe) + var(--s-6)); padding-bottom: var(--s-5); }
	.fk-hero__messwerte { position: static; width: min(100% - 2 * var(--rand), 90rem); margin: 0 auto var(--s-7); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); font-size: calc(.62rem * var(--etikett-mass)); }
	.fk-hero__messwerte b { font-size: 1.25rem; }
	/* Verlinkte Kennzahl so breit wie ihr Inhalt (wie auf breiten Schirmen): Fokusrahmen und
	   Klickfläche reichen sonst über die ganze Spalte bis an die Beschriftung daneben. */
	.fk-hero__messwert--link { justify-self: start; }
	.fk-hero__weiter { display: none; }
	.fk-hero .fk-kicker::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.fk-hero__weiter i::after { animation: none; }
	.fk-hero__messpfeil { transition: color .3s; }
	.fk-hero__messwert--link:hover .fk-hero__messpfeil { transform: none; }
}

/* Editor: statische Spirale statt Animation, Höhe begrenzt */
.fk-hero--editor { min-height: 38rem; }
.fk-hero--editor .fk-hero__spirale { position: absolute; right: 6%; top: 50%; width: min(48%, 34rem); transform: translateY(-50%); opacity: .55; z-index: -1; }
.fk-hero--editor .fk-hero__messwerte-hinweis { position: absolute; right: var(--rand); bottom: var(--s-4); font-family: var(--etikett-schrift); font-size: calc(.62rem * var(--etikett-mass)); color: var(--buehne-gedaempft); text-transform: none; letter-spacing: 0; }