/* Krisenradar-Vorschau (Frontend und Editor) */
.fk-radar-vorschau { margin-block: 0 !important; }
/* Direkt danach ein zweiter Bühnen-Abschnitt (Startseite seit 28.10.2026: die Kennzahlen): eine
   Haarlinie wie am Laufband trennt beide, sonst läuft dieselbe Fläche ohne Grenze durch */
.fk-radar-vorschau + .fk-kennzahlen { border-top: 1px solid var(--buehne-linie); }
/* Davor das Laufband, das ohne JavaScript fehlt: dann trennt dieselbe Haarlinie den Hero von der
   Vorschau. Das Laufband (mit JavaScript immer da, siehe laufband/style.css) bringt seine eigenen Linien mit. */
html:not(.fk-js) .fk-laufband + .fk-radar-vorschau { border-top: 1px solid var(--buehne-linie); }
.fk-radar {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s-7); align-items: start;
}
.fk-radar > * { min-width: 0; }
.fk-radar__titel { margin: 0 0 var(--s-5); max-width: 14ch; font-size: calc(clamp(2rem, 1.3rem + 2.4vw, 3.4rem) * var(--titel-mass)); font-stretch: 110%; letter-spacing: -.03em; line-height: 1.04; }
.fk-radar .fk-lead { margin: 0; }
.fk-radar__knoepfe { margin-top: var(--s-5); }

/* Kurzdefinitionen RP, LRC, ERC */
.fk-kurzdefinition { margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.fk-kurzdefinition > div { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.fk-kurzdefinition dt { font-family: var(--etikett-schrift); font-weight: 600; color: var(--buehne-akzent); font-size: calc(.85rem * var(--etikett-mass)); }
.fk-kurzdefinition dd { margin: 0; font-size: .95rem; color: var(--buehne-text); line-height: 1.5; }
/* Quellen und Kleingedrucktes in --buehne-quelle: lesbarer als --buehne-gedaempft (Kontrast ≥ 4,5:1 in beiden Stilen) */
.fk-kurzdefinition__quelle { font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); line-height: 1.65; color: var(--buehne-quelle); margin: var(--s-4) 0 0; }

/* Liga-Reiter */
.fk-reiter { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: var(--s-5); }
.fk-reiter [role='tab'], .fk-reiter__knopf {
	font-family: var(--etikett-schrift); font-size: calc(.74rem * var(--etikett-mass)); letter-spacing: calc(.06em * var(--sperrung)); text-transform: var(--versalien); line-height: 1.2;
	background: transparent; color: var(--buehne-leise); border: 1px solid var(--buehne-linie); border-radius: 99px;
	padding: .45rem .8rem; margin: 0; cursor: pointer; transition: color .25s, background-color .25s, border-color .25s;
}
.fk-reiter [role='tab']:hover { color: var(--buehne-titel); border-color: var(--buehne-leise); }
.fk-reiter [role='tab']:focus-visible { outline: 2px solid var(--buehne-akzent); outline-offset: 2px; }
.fk-reiter [aria-selected='true'], .fk-reiter__knopf--aktiv { background: var(--buehne-akzent); color: var(--auf-akzent); border-color: var(--buehne-akzent); }
.fk-reiter [aria-selected='true']:hover { color: var(--auf-akzent); border-color: var(--buehne-akzent); }

/* Instrument mit Tabelle */
.fk-radar__instrument:focus-visible { outline: 2px solid var(--buehne-akzent); outline-offset: 3px; }
.fk-radar__instrument > :not(.fk-scanlinie) { position: relative; z-index: 1; }
.fk-radar .fk-instrument__fuss { color: var(--buehne-quelle); align-items: center; }
/* Feste Höhen: Die Verlaufslinie bestimmt die Höhe jeder Zeile (--fk-verlauf-hoehe); Name, Platzhalter und
   leere Zeilen halten dieselbe Höhe. Eine Zeile ist damit genau --fk-radar-zeile hoch (Linie + Innenabstand
   oben und unten + Trennlinie), und die Tabelle hält ab dem ersten Bild so viele Zeilen frei, wie sie
   Mannschaften zeigt (--fk-radar-anzahl aus render.php). Daten, Meldungen und Reiterwechsel ändern die
   Höhe nicht mehr. */
.fk-tabelle-mini {
	--fk-verlauf-hoehe: 1.8rem;
	--fk-radar-zeile: calc(var(--fk-verlauf-hoehe) + 2 * .75rem + 1px);
	width: 100%; margin: 0; border-collapse: collapse; font-family: var(--schrift-daten); font-size: .82rem;
}
.fk-tabelle-mini thead th {
	text-align: left; font-family: var(--etikett-schrift); font-weight: 500; font-size: calc(.66rem * var(--etikett-mass)); letter-spacing: calc(.1em * var(--sperrung)); text-transform: var(--versalien); white-space: nowrap;
	color: var(--buehne-quelle); padding: .7rem var(--s-5); border-bottom: 1px solid var(--buehne-linie);
}
.fk-tabelle-mini abbr { text-decoration: none; cursor: help; }
.fk-tabelle-mini tbody :is(th, td) { padding: .75rem var(--s-5); border-bottom: 1px solid var(--buehne-linie); color: var(--buehne-text); vertical-align: middle; text-align: left; font-weight: 400; }
.fk-tabelle-mini tbody tr:last-child > * { border-bottom: 0; }
.fk-tabelle-mini .fk-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Zahlenspalten so schmal wie ihr Inhalt, die Mannschaft bekommt den Rest: So verteilt die Tabelle ihre Breite mit
   Platzhaltern genauso wie mit Daten, und die Spaltenköpfe rücken nicht, wenn die Zeilen kommen (vorher „Platz“ bis
   28 px). Die Platzhalter halten dafür die Breite der späteren Zahl: unsichtbares Maß und „–“ in derselben Zelle. */
.fk-tabelle-mini .fk-zahl { width: 1%; }
.fk-radar__zahl { display: inline-grid; justify-items: end; }
.fk-radar__zahl > * { grid-area: 1 / 1; }
.fk-radar__zahl > :first-child { visibility: hidden; }
.fk-tabelle-mini .fk-wert--minus { color: var(--warnung-text); } /* Bernstein als Text: im Stil „Klinisch“ dunkler, damit lesbar */
.fk-tabelle-mini .fk-wert--plus { color: var(--buehne-akzent); }
.fk-tabelle-mini .fk-tabelle-mini__meldung { font-family: var(--etikett-schrift); color: var(--buehne-quelle); padding-block: var(--s-5); font-size: calc(.8rem * var(--etikett-mass)); }
/* Mit JavaScript ruhige Platzhalterzeilen (render.php), ohne JavaScript nur der Hinweis aufs Krisenradar */
.fk-js .fk-radar__ohne-js, html:not(.fk-js) .fk-radar__platzhalter { display: none; }
.fk-tabelle-mini .fk-radar__ohne-js > td { border-bottom: 0; }
/* Meldung statt Daten (keine Daten, nicht erreichbar): eine Zeile, so hoch wie alle Zeilen zusammen
   (die letzte Zeile hat keine Trennlinie, daher − 1px), der Text ruhig in der Mitte */
.fk-tabelle-mini .fk-radar__meldezeile > td { height: calc(var(--fk-radar-anzahl, 6) * var(--fk-radar-zeile) - 1px); padding-block: 0; text-align: center; }
/* Vor der Meldung eine Platzhalterzeile als Maß (view.js): ohne Höhe, aber mit ihren Spaltenbreiten */
.fk-tabelle-mini .fk-radar__masszeile { visibility: collapse; }

/* Zeilen gleiten nacheinander herein, sobald die Daten da sind (nur Frontend mit JavaScript) */
.fk-js .fk-tabelle-mini tr[data-zeile] { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--bewegung), transform .5s var(--bewegung); transition-delay: calc(var(--i, 0) * 70ms); }
.fk-js .fk-tabelle-mini.ist-geladen tr[data-zeile] { opacity: 1; transform: none; }

.fk-team-zelle { display: flex; align-items: center; gap: .7rem; font-family: var(--schrift-titel); font-size: .95rem; font-weight: calc(600 * var(--gewicht-mass)); line-height: 1.25; color: var(--buehne-titel); }
.fk-team-zelle img { width: 1.4rem; height: 1.4rem; object-fit: contain; flex: 0 0 auto; }
/* In der Tabelle genau so hoch wie die Verlaufslinie: Platzhalter, leere Zeilen und Zeilen ohne Linie
   (Saisonbeginn) sind dann gleich hoch. Ein langer Name bricht auf höchstens zwei Zeilen um; die stehen
   mittig und reichen dabei etwas in den Innenabstand der Zeile, statt sie höher zu machen. Wie viele
   Namen umbrechen, hängt von den Daten ab – die Höhe der Tabelle so nicht mehr. */
.fk-tabelle-mini tbody .fk-team-zelle { height: var(--fk-verlauf-hoehe); }
.fk-team-zelle__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Platz für den Unterstrich (Maus, Tastaturfokus) unter der letzten Zeile, ohne die Zeile höher zu machen: Er lag
   sonst knapp außerhalb des Kastens und wurde abgeschnitten (Stil „Klinisch“, Handy) */
.fk-tabelle-mini .fk-team-zelle__name { padding-bottom: .14em; margin-bottom: -.14em; }
/* Teamname als Link zur Mannschaftsanalyse: sieht aus wie der Name ohne Link (nicht in Linkfarbe),
   Unterstrich erst unter dem Mauszeiger oder mit Tastaturfokus; der Fokusrahmen kommt aus basis.css
   und liegt mit fit-content eng um Wappen und Namen statt um die ganze Zelle */
.fk-tabelle-mini .fk-team-zelle--link { width: fit-content; color: var(--buehne-titel); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.fk-tabelle-mini .fk-team-zelle--link:is(:hover, :focus-visible) { color: var(--buehne-titel); text-decoration-line: underline; }

/* Verlaufslinie der RP */
.fk-radar__verlauf { width: 1%; }
.fk-verlauf { display: block; width: 7rem; height: var(--fk-verlauf-hoehe, 1.8rem); overflow: visible; }
.fk-verlauf__linie { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fk-verlauf__null { stroke: color-mix(in srgb, var(--buehne-leise) 25%, transparent); stroke-width: 1; stroke-dasharray: 2 3; }
.fk-verlauf--minus .fk-verlauf__linie { stroke: var(--warnung); }
.fk-verlauf--minus .fk-verlauf__ende { fill: var(--warnung); }
.fk-verlauf--plus .fk-verlauf__linie { stroke: var(--buehne-akzent); }
.fk-verlauf--plus .fk-verlauf__ende { fill: var(--buehne-akzent); }
.fk-verlauf__trainer circle { fill: var(--buehne-titel); stroke: var(--buehne); stroke-width: 1; }
.fk-verlauf__trainer .fk-verlauf__ziel { fill: transparent; stroke: none; }

/* Legende im Fuß, nur wenn ein Trainerwechsel zu sehen ist. Ohne Trainerwechsel unsichtbar, aber mit ihrem
   Platz: Sonst bräche die Fußzeile um, sobald sie mit den Daten kommt (hidden hält sie vor Bildschirmlesern verborgen). */
.fk-radar__legende { display: inline-flex; align-items: center; gap: .4rem; }
.fk-radar__legende[hidden] { display: inline-flex; visibility: hidden; }
.fk-radar__legende i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--buehne-titel); box-shadow: 0 0 0 1px var(--buehne); }

/* Ohne JavaScript lädt hier nichts: dann kein „wird geladen …“ (Platz bleibt; der Hinweis aufs Krisenradar steht in der Tabelle) */
html:not(.fk-js) .fk-radar__stand { visibility: hidden; }
/* Statuszeile: Text und unsichtbare Maße (render.php, je Liga eines) in derselben Rasterzelle – so breit und so
   viele Zeilen wie der längste Stand aller Ligen, schon während „wird geladen …“ dasteht und bei jedem Reiterwechsel */
.fk-radar__stand { display: inline-grid; text-align: end; font-variant-numeric: tabular-nums; } /* Text ist so breit wie die Zelle: tauscht er, bleibt sein Kasten stehen */
.fk-radar__stand > * { grid-area: 1 / 1; }
.fk-radar__stand-mass { visibility: hidden; }

/* Lichtstreifen, der langsam über das Instrument wandert (Schmuck: im Stil „Klinisch“ unsichtbar) */
.fk-scanlinie {
	position: absolute; left: 0; right: 0; top: -30%; height: 30%; z-index: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--buehne-akzent) calc(6% * var(--schmuck)), transparent), transparent);
	animation: fk-scan 6s linear infinite;
}
@keyframes fk-scan { to { transform: translateY(534%); } }
.fk-bewegung-aus .fk-scanlinie { animation-play-state: paused; }

@media (max-width: 64rem) {
	.fk-radar { grid-template-columns: minmax(0, 1fr); }
	.fk-tabelle-mini .fk-nur-breit { display: none; }
}
@media (max-width: 40rem) {
	.fk-tabelle-mini thead th, .fk-tabelle-mini tbody :is(th, td) { padding-inline: .55rem; }
	.fk-tabelle-mini tr > :first-child { padding-left: var(--s-4); }
	.fk-tabelle-mini tr > :last-child { padding-right: var(--s-4); }
	.fk-team-zelle { font-size: .84rem; gap: .45rem; }
	.fk-team-zelle img { width: 1.1rem; height: 1.1rem; }
	.fk-radar__stand { text-align: start; }
	.fk-verlauf { width: 4.2rem; }
	.fk-reiter [role='tab'], .fk-reiter__knopf { font-size: calc(.7rem * var(--etikett-mass)); padding: .42rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
	.fk-scanlinie { display: none; }
	.fk-js .fk-tabelle-mini tr[data-zeile] { opacity: 1; transform: none; transition: none; }
	.fk-reiter [role='tab'] { transition: none; }
}

/* Editor: ruhige Platzhalter statt Live-Daten */
.fk-radar--editor .fk-scanlinie { display: none; }
.fk-radar__balken { display: inline-block; vertical-align: middle; height: .6rem; width: 9rem; max-width: 100%; border-radius: 3px; background: var(--buehne-kante); }
.fk-radar__balken--kurz { width: 2rem; }
.fk-radar__balken--mittel { width: 6.5rem; }
/* Handy: Namensbalken schmaler als die Spalte – mit 9rem hielt er sie breiter als später die Namen, und die Spalten
   rückten mit den Daten um 23 px nach links */
@media (max-width: 40rem) {
	.fk-radar__balken { width: 5.5rem; }
	.fk-radar__balken--mittel { width: 4rem; }
	.fk-radar__balken--kurz { width: 2rem; }
}
.fk-radar--editor .fk-kurzdefinition > div { position: relative; }
.fk-radar__live { display: inline-flex; align-items: center; gap: .4rem; color: var(--buehne-akzent); }
.fk-radar__live::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--buehne-akzent); }