/* ========================================================================== Krisenradar im neuen Design (aus prototyp/assets/css/radar.css). Das Plugin „fussballkrisen“ bleibt unverändert (Markup, JavaScript, Funktionsstile). Diese Datei legt nur das Aussehen darüber; render.php lädt sie NACH dem Plugin-Stil (Abhängigkeit „fbk-frontend“). Die Bühne selbst (.fk-radar-buehne) steht in style.css. Die Diagrammfarben setzt das Plugin selbst (helles Schema); deshalb liegen Diagramme und Tabelle auf hellen Instrumentenkarten. ========================================================================== */ /* Ab dem Inhaltsraster (Diagramme, Tabelle, Ergebnisse) wird der Grund hell – unabhängig davon, wie hoch Kopf und Filter auf dem jeweiligen Bildschirm werden */ body .fbk-app .fbk-content-grid { position: relative; } body .fbk-app .fbk-content-grid::before { content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -1.25rem; bottom: -200vh; background: var(--flaeche); } /* Anhalten per Klick (grundlagen.js, NICHT_FLAECHE): Die Bühne mit dem Wirbel umschließt die ganze App. Frei sind nur ihr dunkler Kopf und die Bühne um die App; was man bedient (Filter, Hinweis, Tabelle, Diagramm, Ergebnisse) und der Text im Kopf zeigen darum keinen Hand-Zeiger (04.11.2026). */ .fk-bewegung-flaeche .fbk-app, .fk-bewegung-flaeche .fbk-header span { cursor: auto; } @media (prefers-reduced-motion: no-preference) { .fk-bewegung-flaeche .fbk-app > .fbk-header { cursor: pointer; } } body .fbk-app { --fbk-primary: var(--navy); --fbk-accent: var(--akzent); --fbk-border: var(--linie); --fbk-background: var(--karte); --fbk-text: var(--titel); --fbk-muted: var(--text-leise); font-family: var(--schrift-titel); max-width: var(--breite); width: min(100% - 2 * var(--rand), var(--breite)); padding: 0 0 var(--s-8); font-size: 15px; } /* Kopf des Radars auf Dunkel */ body .fbk-app .fbk-hero { background: none; border: 0; box-shadow: none; padding: var(--s-6) 0 var(--s-6); margin: 0; text-align: left; color: var(--buehne-text); } body .fbk-app .fbk-hero .fbk-hero-eyebrow { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--etikett-schrift); font-size: calc(var(--fs-mini) * var(--etikett-mass)); font-weight: 500; letter-spacing: calc(.14em * var(--sperrung)); color: var(--buehne-akzent); background: none; padding: 0; margin-bottom: var(--s-4); } body .fbk-app .fbk-hero-eyebrow::before { content: var(--etikett-strich); width: 1.6rem; height: 1px; background: currentColor; } body .fbk-app .fbk-hero #fbk-page-title { font-family: var(--schrift-titel); font-size: calc(clamp(2.6rem, 1.4rem + 4vw, 5rem) * var(--titel-mass)); font-stretch: 112%; font-weight: calc(760 * var(--gewicht-mass)); letter-spacing: -.035em; color: var(--buehne-titel); margin: 0 0 var(--s-4); line-height: 1; } body .fbk-app .fbk-hero #fbk-page-subtitle { font-family: var(--schrift-text); font-size: var(--fs-lead); color: var(--buehne-text); max-width: 38rem; margin: 0; } body .fbk-app .fbk-hero #fbk-data-stand { background: color-mix(in srgb, var(--buehne-akzent) calc(8% * var(--schmuck)), transparent); border: 1px solid color-mix(in srgb, var(--buehne-akzent) 30%, transparent); border-radius: 99px; padding: .3rem .75rem; font-weight: 500; } body .fbk-app .fbk-stand { font-family: var(--etikett-schrift); font-size: calc(.75rem * var(--etikett-mass)) !important; color: var(--buehne-leise) !important; margin-top: var(--s-4) !important; letter-spacing: calc(.04em * var(--sperrung)); } body .fbk-app .fbk-header-team-logo { background: var(--karte); border-radius: var(--radius-m); padding: .4rem; } body .fbk-app .fbk-back { color: var(--buehne-akzent); font-family: var(--etikett-schrift); font-size: calc(.8rem * var(--etikett-mass)); text-decoration: none; background: var(--buehne-hoch); border-color: var(--buehne-linie); } /* Grund: das Plugin setzt Weiß – auf Dunkel stand Signalgrün dann auf Weiß */ /* Hinweis der Mannschaftswahl (setzt frontend.js unter den Kopf): erbte sonst die Titelfarbe der Fläche und stand auf Dunkel unsichtbar, ohne Abstand zum Zurück-Knopf */ body .fbk-app .fbk-team-chooser-note { color: var(--buehne-text); margin: 0 0 var(--s-3); } /* Mannschaftswahl ohne Untertitel und ohne Hinweis (Felix, 08.11.2026: „remove“) – die Auswahlfelder darunter sagen dasselbe. Nur ausgeblendet: frontend.js und vorab.js schreiben die Texte weiter, das Plugin bleibt unverändert. */ .fk-radar--wahl .fbk-app .fbk-hero #fbk-page-subtitle, .fk-radar--wahl .fbk-app .fbk-team-chooser-note { display: none; } /* Filterleiste: Glas-Instrument auf Dunkel */ body .fbk-app .fbk-filters { background: color-mix(in srgb, var(--buehne-hoeher) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--buehne-linie); border-radius: var(--radius-l); padding: var(--s-5); box-shadow: var(--schatten-tief); gap: var(--s-4); align-items: end; } body .fbk-app .fbk-filter-group label { font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); font-weight: 500; letter-spacing: calc(.12em * var(--sperrung)); text-transform: var(--versalien); color: var(--buehne-leise); margin-bottom: .45rem; } body .fbk-app .fbk-select { appearance: none; -webkit-appearance: none; background: var(--buehne) var(--auswahl-pfeil) no-repeat right .9rem center; color: var(--buehne-titel); border: 1px solid var(--buehne-linie); border-radius: var(--radius-s); font-family: var(--schrift-titel); font-size: .95rem; font-weight: 560; padding: .7rem 2.4rem .7rem .9rem; min-height: 2.9rem; transition: border-color .2s, box-shadow .2s; } body .fbk-app .fbk-select:hover { border-color: var(--buehne-leise); } body .fbk-app .fbk-select:focus { outline: none; border-color: var(--buehne-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--buehne-akzent) 18%, transparent); } body .fbk-app .fbk-select option { background: var(--buehne); color: var(--buehne-titel); } body .fbk-app .fbk-btn-reset { background: transparent; color: var(--buehne-text); border: 1px solid var(--buehne-linie); border-radius: var(--radius-s); font-family: var(--schrift-titel); font-weight: calc(600 * var(--gewicht-mass)); min-height: 2.9rem; padding: .7rem 1.1rem; cursor: pointer; transition: all .2s; } body .fbk-app .fbk-btn-reset:hover { border-color: var(--buehne-akzent); color: var(--buehne-akzent); } /* Hinweisbox */ body .fbk-app .fbk-info { background: transparent; border: 0; border-left: 2px solid var(--buehne-akzent); border-radius: 0; color: var(--buehne-leise); padding: .2rem 0 .2rem var(--s-4); margin: var(--s-5) 0 var(--s-6); font-family: var(--schrift-text); font-size: .92rem; } body .fbk-app .fbk-info strong { font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); font-weight: 500; letter-spacing: calc(.12em * var(--sperrung)); text-transform: var(--versalien); color: var(--buehne-akzent); } body .fbk-app .fbk-info p { margin: .3rem 0 0; color: var(--buehne-text); } /* Laden */ body .fbk-app .fbk-loading { font-family: var(--etikett-schrift); color: var(--buehne-leise); } body .fbk-app .fbk-spinner { border-color: var(--buehne-linie); border-top-color: var(--buehne-akzent); } /* Inhaltsraster: helle Instrumentenkarten */ body .fbk-app .fbk-content-grid { gap: var(--s-5); } body .fbk-app .fbk-accordion, body .fbk-app .fbk-results-panel, body .fbk-app .fbk-current { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-l); box-shadow: 0 1px 0 color-mix(in srgb, var(--navy) 4%, transparent), 0 24px 48px -32px color-mix(in srgb, var(--navy) 35%, transparent); overflow: hidden; } body .fbk-app .fbk-accordion + .fbk-accordion { margin-top: var(--s-5); } body .fbk-app .fbk-accordion-toggle { background: var(--karte); color: var(--titel); border: 0; border-bottom: 1px solid transparent; font-family: var(--schrift-titel); font-size: 1.12rem; font-weight: calc(680 * var(--gewicht-mass)); font-stretch: 104%; letter-spacing: -.01em; padding: var(--s-5) var(--s-5); display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; position: relative; } body .fbk-app .fbk-accordion-toggle::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--akzent); margin-right: .8rem; flex: 0 0 auto; box-shadow: 0 0 0 calc(4px * var(--schmuck)) color-mix(in srgb, var(--akzent) 14%, transparent); /* Lichthof nur, wo der Stil Schmuck will */ } body .fbk-app .fbk-accordion-toggle > span:first-child { margin-right: auto; } body .fbk-app .fbk-accordion-toggle[aria-expanded='true'] { border-bottom-color: var(--linie); } body .fbk-app .fbk-accordion-toggle:hover { background: color-mix(in srgb, var(--hover-flaeche) 55%, var(--karte)); } /* im Stil „Dunkel“ nach dem Runden genau der alte Farbwert */ body .fbk-app .fbk-chevron { color: var(--akzent); transition: transform .35s var(--bewegung); } body .fbk-app .fbk-accordion-toggle[aria-expanded='true'] .fbk-chevron { transform: rotate(180deg); } body .fbk-app .fbk-accordion-body { padding: var(--s-5); background: var(--karte); } /* Kennzahl-Knöpfe */ body .fbk-app .fbk-chart-controls { font-family: var(--etikett-schrift); font-size: calc(.72rem * var(--etikett-mass)); letter-spacing: calc(.08em * var(--sperrung)); text-transform: var(--versalien); color: var(--text-leise); gap: .4rem; } body .fbk-app .fbk-metric-btn { font-family: var(--etikett-schrift); font-size: calc(.78rem * var(--etikett-mass)); font-weight: 600; letter-spacing: calc(.06em * var(--sperrung)); background: transparent; color: var(--navy); border: 1px solid var(--linie-stark); border-radius: 99px; padding: .4rem .9rem; cursor: pointer; transition: all .2s; } body .fbk-app .fbk-metric-btn:hover { border-color: var(--navy); } body .fbk-app .fbk-metric-btn.active { background: var(--navy); color: var(--weiss); border-color: var(--navy); } body .fbk-app .fbk-chart-wrap { border-top: 1px var(--strich-art) var(--linie); padding-top: var(--s-4); margin-top: var(--s-4); } body .fbk-app .fbk-chart-note, body .fbk-app .fbk-table-note { font-family: var(--etikett-schrift); font-size: calc(.74rem * var(--etikett-mass)); color: var(--text-leise); } /* Fußnote unter der Tabelle („… ausschließlich die Werte des 4. Spieltags.“): ein deutscher Satz, kein Etikett – sie steht darum in der Schrift der Zeile über der Tabelle („Bundesliga · Saison …“). IBM Plex Mono zeichnet das ß in der alten Form „ſʒ“ mit Unterlänge, die in der kleinen Fußnote fremd wirkt (Kommentar Constantin, 29.10.2026: „Das ß ist komisch“); ein anderes ß bietet die Schrift nicht (Stilsätze ss01–ss08, salt, cv01, cv02, hist geprüft 04.11.2026). Stil „Klinisch“: unverändert, Titel- und Etikettschrift sind dort beide IBM Plex Sans. Feste Höhe auf dem Handy: unten bei der Ligatabelle als Gerüst. */ body .fbk-app .fbk-table-note { font-family: var(--schrift-titel); } body .fbk-app .fbk-team-link { color: var(--akzent); font-weight: calc(650 * var(--gewicht-mass)); text-decoration: none; } /* Tabelle */ body .fbk-app .fbk-table-header h3 { font-family: var(--schrift-titel); font-size: 1.2rem; color: var(--titel); } body .fbk-app .fbk-table-navigation { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-m); padding: .5rem; } body .fbk-app .fbk-table-nav-btn { background: var(--karte); color: var(--navy); border: 1px solid var(--linie); border-radius: var(--radius-s); font-family: var(--schrift-titel); font-weight: calc(620 * var(--gewicht-mass)); font-size: .88rem; padding: .55rem .9rem; cursor: pointer; } body .fbk-app .fbk-table-nav-btn:hover:not(:disabled) { border-color: var(--navy); } body .fbk-app .fbk-table-day-caption { font-family: var(--etikett-schrift); font-size: calc(.64rem * var(--etikett-mass)); letter-spacing: calc(.12em * var(--sperrung)); text-transform: var(--versalien); color: var(--text-leise); } body .fbk-app .fbk-table-day strong { font-family: var(--schrift-titel); color: var(--titel); } body .fbk-app .fbk-ranking-table { font-family: var(--schrift-daten); font-size: .86rem; border-collapse: collapse; } body .fbk-app .fbk-ranking-table thead th { background: var(--buehne); color: var(--buehne-leise); border: 0; font-weight: 500; font-family: var(--etikett-schrift); } body .fbk-app .fbk-ranking-table thead th:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); } body .fbk-app .fbk-ranking-table thead th:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; } body .fbk-app .fbk-th-sort { font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); letter-spacing: calc(.1em * var(--sperrung)); text-transform: var(--versalien); color: var(--buehne-text); background: none; border: 0; } /* Das Plugin setzt Farbe (Weiß; Rosa unter dem Mauszeiger und für die aktive Spalte) und Schrift der Sortierknöpfe mit !important – hier über Tokens, sonst stünde in hellen Stilen Weiß auf Hellgrau */ body .fbk-app .fbk-ranking-table thead button.fbk-th-sort { color: var(--buehne-titel) !important; font-family: var(--etikett-schrift) !important; } body .fbk-app .fbk-ranking-table thead button.fbk-th-sort:is(:hover, .active) { color: var(--sortiert) !important; } body .fbk-app .fbk-ranking-table tbody tr { border-bottom: 1px solid var(--linie); transition: background .2s; } body .fbk-app .fbk-ranking-table tbody tr:hover { background: var(--hover-flaeche); } body .fbk-app .fbk-ranking-table td { color: var(--text); } body .fbk-app .fbk-team-name { font-family: var(--schrift-titel); font-weight: calc(620 * var(--gewicht-mass)); color: var(--titel); } body .fbk-app .fbk-apply-chart-btn { background: var(--navy); color: var(--weiss); border: 0; border-radius: var(--radius-s); font-family: var(--schrift-titel); font-weight: calc(650 * var(--gewicht-mass)); padding: .8rem 1.2rem; cursor: pointer; transition: transform .3s var(--bewegung), box-shadow .3s; } body .fbk-app .fbk-apply-chart-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--navy) 60%, transparent); } /* Aktuelle Situation (Mannschaftsansicht) */ /* overflow: visible – die Hilfe-Popups der Kennwerte öffnen über den Kartenrand hinaus */ body .fbk-app .fbk-current { padding: var(--s-5); margin-bottom: var(--s-5); overflow: visible; } body .fbk-app .fbk-section-header h3 { font-family: var(--schrift-titel); color: var(--titel); } body .fbk-app .fbk-current-value { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-m); } /* Nur Etikett und Wert: frontend.js setzt das Hilfe-Popup als Geschwister hinter das Etikett, es behält eigene Farben */ body .fbk-app .fbk-current-value > span:first-child { font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); letter-spacing: calc(.1em * var(--sperrung)); text-transform: var(--versalien); color: var(--text-leise); } body .fbk-app .fbk-current-value > strong { font-family: var(--schrift-titel); font-stretch: 110%; color: var(--titel); } /* Letzte Ergebnisse */ body .fbk-app .fbk-results-panel { padding: var(--s-5); align-self: start; position: sticky; top: calc(var(--header-hoehe) + 1rem); } body .fbk-app .fbk-results-header h3 { font-family: var(--schrift-titel); font-size: 1.12rem; color: var(--titel); } body .fbk-app .fbk-results-header label { font-family: var(--etikett-schrift); font-size: calc(.66rem * var(--etikett-mass)); letter-spacing: calc(.1em * var(--sperrung)); text-transform: var(--versalien); color: var(--text-leise); } body .fbk-app .fbk-results-select { font-family: var(--schrift-titel); border: 1px solid var(--linie-stark); border-radius: var(--radius-s); padding: .5rem; background: var(--karte); color: var(--titel); } body .fbk-app .fbk-match-caption { font-family: var(--etikett-schrift); font-size: calc(10px * var(--etikett-mass)); letter-spacing: calc(.06em * var(--sperrung)); text-transform: var(--versalien); color: var(--akzent); } body .fbk-app .fbk-match-team span { font-family: var(--schrift-titel); color: var(--text); } /* Fehlt ein Vereinslogo, streckte flex: 1 1 auto (Plugin, gilt für alle span) den ⚽-Platzhalter zur Ellipse */ body .fbk-app .fbk-match-team .fbk-team-logo-placeholder { flex: 0 0 19px; width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; } body .fbk-app .fbk-match-team strong { font-family: var(--schrift-daten); color: var(--titel); } body .fbk-app .fbk-results-source, body .fbk-app .fbk-results-updated { font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); color: var(--text-leise); } body .fbk-app .fbk-results-source a { color: var(--akzent); } /* Hilfe-Popups und Bildnachweise */ body .fbk-app .fbk-help-popup { background: var(--buehne) !important; font-family: var(--schrift-titel); border: 1px solid var(--buehne-linie); } body .fbk-app .fbk-help-popup strong { color: var(--buehne-titel); } /* Plugin: #fff */ /* Text: Plugin #e4ebf4. In den Kennwert-Kästchen traf ihn außerdem die Plugin-Regel für deren Etiketten (13 px, Abstand unten) – Größe und Abstand wie in den Diagramm-Popups */ body .fbk-app .fbk-help-popup > span { color: var(--hilfe-text); font-size: inherit; margin: 0; } /* Die Popups der Diagramm-Knöpfe öffnen nach unten (dort liegt das Diagramm): nach oben hatten sie bis zum Rand des Akkordeons (overflow: hidden, wegen der runden Ecken) nur wenige Zeilen Platz */ body .fbk-app .fbk-chart-controls .fbk-help-popup { top: calc(100% + 9px); bottom: auto; } body .fbk-app .fbk-image-credits summary { font-family: var(--etikett-schrift); font-size: calc(.74rem * var(--etikett-mass)); color: var(--text-leise); cursor: pointer; } body .fbk-app .fbk-empty, body .fbk-app .fbk-no-data { font-family: var(--schrift-text); color: var(--text-leise); } @media (max-width: 52rem) { body .fbk-app .fbk-results-panel { position: static; } } /* Mannschaftsanalyse, bevor eine Mannschaft gewählt ist: Die Hauptspalte ist leer (alle Akkordeons verborgen). Dann eine Spalte, sonst stünde neben „Letzte Ergebnisse“ eine große leere Fläche. Die leere Hauptspalte fällt ganz weg – als leere Rasterzeile hielte sie sonst einen Zeilenabstand frei. !important: siehe „Zusatzstile des echten Plugins“ am Ende der Datei. */ body .fbk-app .fbk-content-grid:not(:has(.fbk-content-main > :not(.fbk-hidden))) { grid-template-columns: minmax(0, 1fr) !important; } body .fbk-app .fbk-content-grid:not(:has(.fbk-content-main > :not(.fbk-hidden))) > .fbk-content-main { display: none; } body .fbk-app .fbk-content-grid:not(:has(.fbk-content-main > :not(.fbk-hidden))) .fbk-results-panel { max-width: 34rem; position: static; } /* Das Plugin stapelt die Filter auf dem Handy als Spalte, behält aber flex: 1 1 165px – dadurch wird jeder Filter 165 px hoch. Hier korrigiert, ohne das Plugin anzufassen. */ @media (max-width: 480px) { body .fbk-app .fbk-filter-group { flex: 0 0 auto; } } /* Handy: Hilfe-Popups öffnen nach unten und spannen über die Knopfzeile bzw. das Kennwert-Kästchen. Auf das „?“ zentriert liefen sie sonst links aus dem Bildschirm und wurden abgeschnitten. */ @media (max-width: 480px) { body .fbk-app :is(.fbk-chart-controls, .fbk-current-value) { position: relative; } body .fbk-app .fbk-help-wrap { position: static; } body .fbk-app .fbk-help-popup { left: 0; right: 0; width: auto; transform: none; top: calc(100% + 9px); bottom: auto; } } /* Handy: Das Plugin gibt dem Diagramm 300 px. Die Ligaansicht braucht mehr: Bis Radar-Plugin 2.3.0 stand die Legende (bis 20 Mannschaften) darin und ließ den Kurven 80 px; seit 2.4.0 stehen die Namen rechts am Linienende, untereinander (rund 13 px je Mannschaft) unter einer kleinen Legende – dafür reichen 520 px. Die Mannschaftsanalyse (Kennwerte sichtbar) zeigt eine Kurve und behält 300 px. Dort steht „Aktuelle Situation“ schon vor dem Laden da (unten, „Feste Höhen“), trägt aber noch die Klasse fbk-hidden – darum hier die Ansicht ausgenommen. */ @media (max-width: 480px) { body :not(.fk-radar--analyse) > .fbk-app:has(#fbk-current.fbk-hidden) .fbk-chart-wrap { height: 520px; } } /* Tabelle ohne die feste Mindestbreite des Plugins (650 px), damit sie lieber schmaler wird als zu rollen (Felix, 09.11.2026). Kopf der ersten Spalte (Felix, 09.11.2026: „For Tabellenplatz, use the leagues logo instead and make the column smaller“): statt „Tabellenplatz“ das Zeichen der Liga (view.js schreibt data-fk-liga an den Knopf; die Bilder wie bei den Wappen-Platzhaltern unten), daneben der Sortierpfeil aus dem aria-sort, das frontend.js an die Zelle setzt. Der Name des Knopfs für Bildschirmleser bleibt „Tabellenplatz“. Die Form (Plättchen + Pfeil) gilt vom ersten Bild an, auch bevor die Liga feststeht – sonst rückte der Tabellenkopf beim Laden um 4–8 px (seit die Tabelle oben steht). */ body .fbk-app .fbk-ranking-table { min-width: 0; } body .fbk-app .fbk-ranking-table :is(th, td):first-child { white-space: nowrap; padding-left: .9rem; padding-right: .6rem; } body .fbk-app .fbk-ranking-table thead button.fbk-th-sort[data-sort='platz'] { font-size: 0 !important; gap: .2rem; align-items: center; } body .fbk-app .fbk-ranking-table thead button.fbk-th-sort[data-sort='platz']::before { content: '' !important; display: inline-block !important; width: 22px; height: 22px; background-position: center; background-size: 78%; background-repeat: no-repeat; /* Bild aus den Ligaregeln unten */ background-color: #fff; border-radius: 5px; /* weißes Plättchen: der Tabellenkopf ist dunkel, mehrere Zeichen auch */ } body .fbk-app .fbk-ranking-table thead th[aria-sort='ascending'] > button.fbk-th-sort[data-sort='platz']::after { content: '\2191' !important; content: '\2191' / '' !important; font-size: 12px; } body .fbk-app .fbk-ranking-table thead th[aria-sort='descending'] > button.fbk-th-sort[data-sort='platz']::after { content: '\2193' !important; content: '\2193' / '' !important; font-size: 12px; } @media (max-width: 480px) { body .fbk-app .fbk-ranking-table :is(th, td) { padding-inline: .4rem; } body .fbk-app .fbk-ranking-table .fbk-team-logo { width: 18px; height: 18px; margin-right: .3rem; } } /* ========================================================================== Feste Höhen beim Laden (29.10.2026) frontend.js baut das Radar erst nach dem Laden der Daten um: Kopf, Filter, Zurück-Knopf, „Aktuelle Situation“, offene Akkordeons, Ergebnisliste. Ohne Vorsorge sprang die Seite dabei um bis zu 600 px. vorab.js (läuft vor dem ersten Bild) nennt die Ansicht als Klasse an der Bühne, dazu fk-radar--wartet, und setzt die Texte, die schon feststehen. Solange fk-radar--wartet steht, zeigt diese Datei für jede Ansicht, was später kommt, in seiner Endgröße: - was sicher kommt, gleich (Zurück-Knopf, Filter, „Aktuelle Situation“ mit „–“); - was mit den Daten kommt, als ruhiges Gerüst mit leisem „… wird geladen …“ (Diagramm, Tabelle, Stand); - Texte, deren Länge erst die Daten bestimmen, mit einem unsichtbaren Muster in ihrer längsten Form (::before bei :empty – die Regel :empty bleibt dabei erfüllt). view.js nimmt fk-radar--wartet weg, sobald das Plugin sein erstes Laden beendet; danach gelten seine Zustände. Scheitert das Laden, setzt view.js fk-radar--ausfall an die Bühne und fk-halten an jeden Kasten, der zu sehen ist: Er behält Gerüst und Höhe und zeigt eine Meldung, bis er ganz unter dem Fenster liegt. Die Zustände hängen an Klassen, nicht an :has(): Firefox rechnete solche Regeln nicht verlässlich neu, wenn das Plugin Inhalte tauscht (die Ladepille blieb dort stehen). Plugin-Teile werden nur während des Wartens versteckt, nie auf Dauer – erkennt vorab.js die Ansicht falsch, stimmt nach dem Laden wieder alles. Ohne JavaScript fehlen die Klassen; dann gilt nichts davon. ========================================================================== */ body .fbk-app { /* Höhe jeder Tabellenzeile im Radar. Der Vereinsname hat höchstens zwei Zeilen (unten, „Vereinsname“): Zwei Zeilen brauchen 2 × 1,2 × 0,86rem Schrift + 2 × 8px Innenabstand + 1px Linie = 50 px, eine Zeile 39 px (auf dem Handy gemessen 01.11.2026: alle sechs Ligen, 320 bis 480 px, beide Stile, Web- und Ersatzschrift). Wie viele Namen umbrechen, wissen erst die Daten; darum hat jede Zeile diese feste Höhe (unten), und die Tabelle ist vor und nach dem Laden gleich hoch. Auf dem Handy bricht rund ein Drittel der Namen um; dort sind es 56 px (unten), damit zweizeilige Namen etwa so viel Luft haben wie am Rechner – Felix bat am 01.11.2026, die beste Größe zu prüfen (vorher 74 px, aus der Zeit, als der Name unter das Wappen lief). Wer Schriftgröße, Zeilenhöhe, Zeilenzahl oder Innenabstand des Namens ändert, prüft, dass zwei Zeilen weiter hineinpassen. */ --fk-tabelle-zeile: 3.25rem; /* So viele Zeilen hält die Ligatabelle frei: Bundesliga, die Liga, mit der das Radar startet */ --fk-tabelle-zeilen: 18; /* Höhe eines Eintrags in „Letzte Ergebnisse“ (frontend.css: 11px Innenabstand oben und unten, 1px Linie, Kopfzeile mit Zeilenhöhe 1,6, 5px Abstand, zwei Mannschaftszeilen mit Zeilenhöhe 1,3 der 15px-Zahl, 5px dazwischen) */ --fk-ergebnis-hoehe: calc(2 * 11px + 1px + 1.6 * 10px * var(--etikett-mass) + 5px + 2 * 1.3 * 15px + 5px); /* So viele Einträge liefert die Schnittstelle für eine Liga oder eine Mannschaft */ --fk-ergebnisse: 6; } /* Lade- und Fehlerhinweis des Plugins nehmen keinen Platz: eine ruhige Pille an ihrer Stelle im Fluss, aber herausgenommen, statt Filter und Inhalt zu schieben. Sie sitzt ganz über der Kante, an der der Inhalt beginnt – auf der Fläche davor, nicht auf der ersten Karte. */ body .fbk-app :is(#fbk-loading, #fbk-empty) { position: absolute; left: 0; right: 0; z-index: 5; width: fit-content; max-width: min(100%, 36rem); margin: 0 auto; transform: translateY(calc(-100% - .5rem)); display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .45rem 1rem; border: 1px solid var(--buehne-linie); border-radius: 99px; background: var(--buehne-hoch); box-shadow: var(--schatten-karte); color: var(--buehne-leise); text-align: center; font-family: var(--etikett-schrift); font-size: calc(.75rem * var(--etikett-mass)); line-height: 1.4; } body .fbk-app .fbk-loading .fbk-spinner { width: .85rem; height: .85rem; border-width: 2px; animation-duration: 1.2s; flex: none; } body .fbk-app #fbk-empty { color: var(--buehne-text); border-color: color-mix(in srgb, var(--warnung) 55%, transparent); } body .fbk-app #fbk-empty::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--warnung); flex: none; } /* Ladekreis steht still bei „Bewegung reduzieren“ und wenn die Animationen der Seite angehalten sind */ @media (prefers-reduced-motion: reduce) { body .fbk-app .fbk-loading .fbk-spinner { animation: none; } } html.fk-bewegung-aus body .fbk-app .fbk-loading .fbk-spinner { animation: none; } /* Beim ersten Laden sagen Stand-Pille und Gerüste, dass Daten kommen; die Ladepille des Plugins bleibt dann aus. Die Mannschaftswahl hat beides nicht: Dort steht die Pille vom ersten Bild an. */ .fk-radar--wartet:is(.fk-radar--liga, .fk-radar--analyse) .fbk-app #fbk-loading { display: none !important; } /* Seit Radar-Plugin 2.5.0 zeigen auf der Mannschaftswahl die 18 leeren Karten das Laden; die Pille fiele beim Verschwinden 33 px weg und zöge „Letzte Ergebnisse“ nach oben. */ .fk-radar--wahl .fbk-app #fbk-loading { display: none !important; } /* Stand-Pille im Kopf (Liga, Mannschaft): kommt mit den Daten. Bis dahin steht in ihr leise „Daten werden geladen …“; scheitert das Laden, hält sie unsichtbar ihren Platz. Immer eine Zeile (notfalls mit „…“): Ihre Höhe hängt so nie an der Länge des Textes – bei 320 px brach ein langer Text sonst auf zwei Zeilen um. */ :is(.fk-radar--liga, .fk-radar--analyse) .fbk-app .fbk-hero #fbk-data-stand { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(.fk-radar--liga, .fk-radar--analyse) .fbk-app .fbk-hero #fbk-data-stand:not(:empty), :is(.fk-radar--liga, .fk-radar--analyse):is(.fk-radar--wartet, .fk-radar--ausfall) .fbk-app .fbk-hero #fbk-data-stand:empty { display: block; } :is(.fk-radar--liga, .fk-radar--analyse):is(.fk-radar--wartet, .fk-radar--ausfall) .fbk-app .fbk-hero #fbk-data-stand:empty::before { content: 'Daten werden geladen …'; } .fk-radar--ausfall .fbk-app .fbk-hero #fbk-data-stand:empty { visibility: hidden; } /* Mannschaftsanalyse und -wahl: Zurück-Knopf gleich (Text steht im Markup), Filter wie nach dem Laden. frontend.js baut die Filterleiste erst nach dem Laden um (auf dem Handy nach rund 3 s); sie sprang dabei sichtbar (CLS 0,09, gemessen 31.10.2026). Mit Mannschaft (?team=…) fehlen Liga- und Mannschaftswahl, ohne Mannschaft Saison, Spieltage, Zurücksetzen und Hinweis – so, wie das Plugin sie danach selbst ausblendet. */ .fk-radar--wartet.fk-radar--analyse .fbk-app #fbk-back.fbk-hidden { display: inline-flex !important; } .fk-radar--wartet.fk-radar--analyse .fbk-app :is(#fbk-league-group, #fbk-team-group), .fk-radar--wartet.fk-radar--wahl .fbk-app :is(#fbk-season-group, #fbk-from-group, #fbk-to-group, #fbk-reset, .fbk-info) { display: none; } /* Seit Radar-Plugin 2.5.0 wählt man die Mannschaft auf Karten (#fbk-team-wahl, unten), nicht mehr im Auswahlfeld */ .fk-radar--wahl .fbk-app #fbk-team-group { display: none !important; } /* Mannschaftswahl: seit Radar-Plugin 2.6.0 zweispaltig wie das Krisenradar (Regeln am Ende der Datei) */ /* Mannschaftsanalyse: „Aktuelle Situation“ gleich mit „–“; der Stand daneben hält mit Mustertext Platz. Bleiben die Daten aus, steht dort leise „nicht verfügbar“ (über dem Muster, das die Breite hält). */ .fk-radar--wartet.fk-radar--analyse .fbk-app #fbk-current.fbk-hidden, body .fbk-app #fbk-current.fk-halten.fbk-hidden { display: block !important; } .fk-radar--analyse .fbk-app #fbk-current-stand:empty::before { content: '00. Spieltag · Saison 0000-0000'; visibility: hidden; } body .fbk-app #fbk-current.fk-halten #fbk-current-stand { position: relative; } body .fbk-app #fbk-current.fk-halten #fbk-current-stand:empty::after { content: 'nicht verfügbar'; position: absolute; left: 0; top: 0; white-space: nowrap; } /* Hilfe-„?“ von frontend.js (beim Start, oft erst nach dem ersten Bild): Ein 19 px hoher Knopf neben RP, LRC und ERC machte deren Kästchen knapp 2 px höher; ein leerer Kasten gleicher Höhe und Ausrichtung in derselben Zeile hält das schon vorher (Kästchen 2 bis 4: Tabellenplatz hat keine Hilfe). Er ist ein leerer Inline-Kasten mit Zeilenhöhe 30 px (19 px Knopf + 11 px Abstand aus frontend.css), kein inline-block: Hinter einem inline-block würde der Zeilenumbruch im Markup vor „RP“ als Leerzeichen sichtbar und rückte es nach rechts. In der Knopfzeile über dem Diagramm folgt jedem Kennzahl-Knopf ein „?“ (19 px, 3 px Abstand, dazu ein Abstand der Zeile): Den Platz dafür hält der Knopf selbst rechts frei; kommt das „?“, rückt es mit negativem Rand genau an seine alte Stelle. Sonst bräche die Zeile auf dem Handy erst mit den Hilfen um. (Nicht mit :has() gelöst: Chrome rechnet die Regel beim Einfügen des „?“ hier nicht neu.) */ body .fbk-app .fbk-current-value:nth-child(n+2)::before { content: ''; display: inline; line-height: 30px; vertical-align: middle; } /* wie das „?“: 19 px, darunter 11 px aus frontend.css (.fbk-current-value span) */ body .fbk-app .fbk-chart-controls .fbk-metric-btn { margin-right: calc(.4rem + 3px + 19px); } body .fbk-app .fbk-chart-controls .fbk-metric-btn + .fbk-help-wrap { margin-left: calc(-1 * (.4rem + 19px)); } /* Offene Akkordeons als Gerüst, bis frontend.js sie füllt: Mannschaftsanalyse und ?chart=1 das Diagramm, Ligaseite die Tabelle. Der Knopf darüber sieht schon offen aus. Bei einem Ausfall bleibt so ein Gerüst stehen, solange es zu sehen ist (fk-halten am Kasten und am Knopf, view.js). */ .fk-radar--wartet:is(.fk-radar--analyse, .fk-radar--diagramm) .fbk-app #fbk-chart-body.fbk-hidden, .fk-radar--wartet:is(.fk-radar--liga, .fk-radar--analyse) .fbk-app #fbk-table-body.fbk-hidden, body .fbk-app :is(#fbk-chart-body, #fbk-table-body).fk-halten.fbk-hidden { display: block !important; } .fk-radar--wartet:is(.fk-radar--analyse, .fk-radar--diagramm) .fbk-app #fbk-chart-toggle, .fk-radar--wartet:is(.fk-radar--liga, .fk-radar--analyse) .fbk-app #fbk-table-toggle, body .fbk-app .fbk-accordion-toggle.fk-halten { border-bottom-color: var(--linie); } .fk-radar--wartet:is(.fk-radar--analyse, .fk-radar--diagramm) .fbk-app #fbk-chart-toggle .fbk-chevron, .fk-radar--wartet:is(.fk-radar--liga, .fk-radar--analyse) .fbk-app #fbk-table-toggle .fbk-chevron, body .fbk-app .fbk-accordion-toggle.fk-halten .fbk-chevron { transform: rotate(180deg); } .fk-radar--analyse .fbk-app #fbk-chart-note:empty::before { content: 'Die Grafik zeigt die Entwicklung der ausgewählten Mannschaft.'; visibility: hidden; } .fk-radar--diagramm .fbk-app #fbk-chart-note:empty::before { content: 'Bewegen Sie die Maus über eine Linie oder einen Mannschaftsnamen am rechten Rand, um diese Mannschaft hervorzuheben. Ein Klick öffnet die Mannschaftsanalyse.'; visibility: hidden; } /* Diagramm-Gerüst: eine gestrichelte Nulllinie wie in der Radar-Vorschau, darunter leise, was hier gleich steht */ :is(.fk-radar--wartet #fbk-chart-body, #fbk-chart-body.fk-halten) .fbk-chart-wrap { background: linear-gradient(to right, var(--linie-stark) 0 2px, transparent 2px) 0 50% / 5px 1px repeat-x; } :is(.fk-radar--wartet #fbk-chart-body, #fbk-chart-body.fk-halten) .fbk-chart-wrap::after { content: 'Diagramm wird geladen …'; position: absolute; left: 0; right: 0; top: calc(50% + .8rem); text-align: center; pointer-events: none; font-family: var(--etikett-schrift); font-size: calc(.74rem * var(--etikett-mass)); color: var(--text-leise); } #fbk-chart-body.fk-halten .fbk-chart-wrap::after { content: 'Das Diagramm ist gerade nicht verfügbar.'; } /* Ligatabelle als Gerüst: Überschrift, Beschreibung und Notiz in ihrer späteren Form, darunter 18 leere Zeilen (--fk-tabelle-zeilen); Ligen mit 20 Mannschaften wachsen nach dem Laden um zwei Zeilen (Felix, 01.11.2026: in Ordnung). Die feinen Zeilenlinien liegen über die ganze Breite auf der Tabelle (von unten gezählt, wo die letzte Zeile endet) – nicht auf der Platzhalter-Zeile, die nur eine Zelle hat. */ :is(.fk-radar--liga, .fk-radar--analyse) .fbk-app :is(.fk-radar--wartet #fbk-table-body, #fbk-table-body.fk-halten) #fbk-table-heading::after { content: ' – 00. Spieltag'; visibility: hidden; } :is(.fk-radar--liga, .fk-radar--analyse) .fbk-app #fbk-table-description:empty::before { content: 'Primeira Liga · Saison 0000-0000'; visibility: hidden; } :is(.fk-radar--liga, .fk-radar--analyse) .fbk-app #fbk-table-note:empty::before { content: 'Die Tabelle zeigt ausschließlich die Werte des 00. Spieltags.'; visibility: hidden; } /* Fußnote bis 480 px: Der Satz bricht je nach Breite ein- oder zweizeilig um, und das Muster („00.“) kann eine Zeile mehr brauchen als der echte Satz („4.“) – ohne diese Regel bei 386–392 px (Stil „Dunkel“, Archivo) bzw. 442–449 px (Stil „Klinisch“); mit IBM Plex Mono lag die Lücke bei 518–525 px. Darum hier immer zwei Zeilen: 2 × Zeilenhöhe 1,6 (frontend.css) × Schriftgröße (oben), in rem gerechnet (2lh wäre 0,04 px niedriger als zwei Textzeilen). Gemessen 04.11.2026 (Teamvorschau-Kopie, Chrome, 1-px-Schritte 320–1100 px, beide Stile): Muster und Satz überall gleich hoch. Grenze in em, nicht in px: Wer im Browser eine größere Grundschrift eingestellt hat, bekommt größere Schrift (rem) und damit die Lücke bei größeren Breiten (bei 20 px Grundschrift bis 562 px); 30em wächst mit (16 px: 480 px wie oben). */ @media (max-width: 30em) { body .fbk-app .fbk-table-note { min-height: calc(2 * 1.6 * .74rem * var(--etikett-mass)); } } @media (max-width: 480px) { body .fbk-app { --fk-tabelle-zeile: 3.5rem; } } body .fbk-app .fbk-ranking-table tbody tr { height: var(--fk-tabelle-zeile); } :is(.fk-radar--liga, .fk-radar--analyse) .fbk-app #fbk-ranking-tbody:empty::after { /* unten eine (unsichtbare) Linie wie die letzte echte Zeile: Im zusammengelegten Tabellenrahmen zählt sie halb mit */ content: ''; display: table-row; height: calc(var(--fk-tabelle-zeilen) * var(--fk-tabelle-zeile)); border-bottom: 1px solid transparent; } :is(.fk-radar--wartet #fbk-table-body, #fbk-table-body.fk-halten) .fbk-ranking-table { background-image: repeating-linear-gradient(to top, var(--linie) 0 1px, transparent 1px var(--fk-tabelle-zeile)); background-size: 100% calc(var(--fk-tabelle-zeilen) * var(--fk-tabelle-zeile)); background-position: 0 100%; background-repeat: no-repeat; } :is(.fk-radar--wartet #fbk-table-body, #fbk-table-body.fk-halten) .fbk-table-wrap { position: relative; } :is(.fk-radar--wartet #fbk-table-body, #fbk-table-body.fk-halten) .fbk-table-wrap::after { content: 'Tabelle wird geladen …'; position: absolute; left: 0; right: 0; top: calc(3rem + var(--fk-tabelle-zeile) / 2); transform: translateY(-50%); text-align: center; pointer-events: none; font-family: var(--etikett-schrift); font-size: calc(.74rem * var(--etikett-mass)); color: var(--text-leise); line-height: 1.3; /* zweizeilig (Meldung bei 320–360 px) bleibt so in der ersten Zeile, mit Abstand zum Tabellenkopf */ } #fbk-table-body.fk-halten .fbk-table-wrap::after { content: 'Die Tabelle ist gerade nicht verfügbar.'; } /* Spieltag über der Tabelle („–“, dann „4. Spieltag“) und Sortierpfeil am Tabellenplatz (frontend.js schreibt „Tabellenplatz ↑“, auf dem Handy setzt ihn radar.css oben): Beide haben vorher schon ihre spätere Breite, sonst rückten die Etiketten seitlich, wenn die Daten kommen */ body .fbk-app .fbk-table-day strong { min-width: 11ch; } .fk-radar--wartet .fbk-app .fbk-ranking-table thead button.fbk-th-sort[data-sort='platz']::after, body .fbk-app .fk-halten .fbk-ranking-table thead button.fbk-th-sort[data-sort='platz']::after { content: '\00a0\2191' !important; visibility: hidden; } @media (max-width: 480px) { .fk-radar--wartet .fbk-app .fbk-ranking-table thead button.fbk-th-sort[data-sort='platz']::after, body .fbk-app .fk-halten .fbk-ranking-table thead button.fbk-th-sort[data-sort='platz']::after { content: ' \2191' !important; font-size: 12px; white-space: pre; } } /* Spalten mit festen Anteilen: Ohne Zeilen verteilte die Tabelle ihre Breite anders, und mit den Daten rückten die Spaltenköpfe bis 130 px seitlich. Die Anteile sind die der geladenen Tabelle (gemessen 29.10.2026, Bundesliga, 834 bis 1920 px); „Team“ bekommt den Rest. --sperrung (1 im Stil „Dunkel“, 0 im Stil „Klinisch“) steht für die gesperrten Versal-Etiketten, die die Platz-Spalte breiter machen. Auf dem Handy ist die Tabelle so breit wie geladen (sie lässt sich seitlich schieben), der Name bricht dort notfalls auch im Wort um. */ /* Seit 09.11.2026 (Ligazeichen statt „Tabellenplatz“) ist die erste Spalte schmal und fest: Zeichen, Pfeil, Abstände */ body .fbk-app .fbk-ranking-table thead th:nth-child(1) { width: 3.75rem; } body .fbk-app .fbk-ranking-table thead th:nth-child(3) { width: calc(14.7% - .9% * var(--sperrung)); } body .fbk-app .fbk-ranking-table thead th:nth-child(n+4) { width: calc(13.4% - .85% * var(--sperrung)); } @media (max-width: 480px) { body .fbk-app .fbk-ranking-table { min-width: calc(22.83rem + .87rem * var(--sperrung)); } body .fbk-app .fbk-ranking-table thead th:nth-child(1) { width: 3rem; } body .fbk-app .fbk-ranking-table thead th:nth-child(3) { width: calc(19.33% - .71% * var(--sperrung)); } body .fbk-app .fbk-ranking-table thead th:nth-child(n+4) { width: calc(17.05% - .62% * var(--sperrung)); } body .fbk-app .fbk-ranking-table a.fbk-team-name { overflow-wrap: anywhere; } } /* Vereinsname: höchstens zwei Zeilen neben dem Wappen, die in die feste Zeilenhöhe passen (wie in der Radar-Vorschau; vorher machte ein zweizeiliger Name um 1024 px die Zeile 24 px höher). Dafür haben die Zellen oben und unten etwas weniger Innenabstand – einzeilige Zeilen sehen gleich aus, weil die Zeile ohnehin höher ist als ihr Inhalt und ihn mittig hält. */ body .fbk-app .fbk-ranking-table tbody td { padding-top: 8px; padding-bottom: 8px; } body .fbk-app .fbk-ranking-table a.fbk-team-name { display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: calc(100% - 25px - 8px); line-height: 1.2; vertical-align: middle; } @media (max-width: 480px) { body .fbk-app .fbk-ranking-table a.fbk-team-name { max-width: calc(100% - 18px - .3rem); } } /* Chromes Seitenübersetzung legt jeden Text in zwei ; die erben hier „middle“ und machten zweizeilige Namen höher (Stil „Klinisch“ 53,5 statt 50 px, gemessen 01.11.2026). So stehen sie wie der Text. */ body .fbk-app .fbk-ranking-table a.fbk-team-name * { vertical-align: baseline !important; } /* Handy: Antippbar ist die ganze Namenszelle (Wappen, Name und Innenabstand, so hoch wie die Zeile), nicht nur der Text – der war einzeilig 16,5 px hoch, Apple und Material raten zu 44 bzw. 48 px (Felix, 03.11.2026). Eine leere Fläche des Links (::after) liegt über der Zelle; weil die Zelle ihr Bezug ist, schneidet die Begrenzung auf zwei Zeilen (overflow am Link) sie nicht ab. Die Fläche gibt es nur am Link direkt in der zweiten Zelle: Ändert das Plugin die Spalten, bleibt es beim Text, statt dass die Flächen über dem ganzen Radar liegen. Auf der Mannschaftsseite (Link „#fbk-current“, springt nur nach oben) bleibt es beim Text. Tastatur: der Rahmen um die ganze Zelle, wie bei den Beitragskarten. */ @media (max-width: 480px) { body .fbk-app .fbk-ranking-table tbody td:nth-child(2) { position: relative; } body .fbk-app .fbk-ranking-table tbody td:nth-child(2) > a.fbk-team-name:not([href^='#'])::after { content: ''; position: absolute; inset: 0; } body .fbk-app .fbk-ranking-table tbody td:nth-child(2) > a.fbk-team-name:not([href^='#']):focus-visible { outline: none; } body .fbk-app .fbk-ranking-table tbody td:nth-child(2) > a.fbk-team-name:not([href^='#']):focus-visible::after { outline: 2px solid var(--akzent); outline-offset: -3px; border-radius: 2px; } } /* Letzte Ergebnisse: Solange die Liste nur Text enthält („Ergebnisse werden geladen …“, auch beim Wechsel der Liga, oder eine Meldung statt Ergebnissen), hält sie den Platz von sechs Einträgen; der Text steht ruhig in der Mitte. Erkannt an der Klasse fk-nur-text (view.js), beim ersten Laden schon an fk-radar--wartet. Scheitert das erste Laden, gibt view.js den Platz frei, sobald die Liste ganz unter dem Fenster liegt (fk-frei). */ .fk-radar--wartet .fbk-app #fbk-results-list, body .fbk-app #fbk-results-list.fk-nur-text:not(.fk-frei) { min-height: calc(var(--fk-ergebnisse) * var(--fk-ergebnis-hoehe)); display: flex; align-items: center; justify-content: center; text-align: center; } .fk-js .fbk-app #fbk-results-updated:empty::before { content: 'Letzter Datenabruf: 00.00.0000, 00:00:00'; visibility: hidden; } body .fbk-app #fbk-results-list.fk-frei ~ #fbk-results-updated:empty::before { content: none; } /* Lange Vereinsnamen bleiben einzeilig (enden notfalls mit „…“): jeder Eintrag ist so genau gleich hoch */ body .fbk-app .fbk-match-team span:not(.fbk-team-logo) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bei einem Ausfall: leerer Wappenplatz vor dem Mannschaftsnamen unsichtbar (der Platz bleibt; sonst stünde dort ein leeres weißes Feld) */ .fk-radar-buehne:not(.fk-radar--wartet) .fk-wappen-platz:empty { visibility: hidden; } /* Lange Mannschaftsnamen im Titel (Handy, Stil „Dunkel“): mit Trennstrich an einer Silbe statt mitten im Wort („Mönchengladba|ch“) – wo der Browser deutsche Silbentrennung kennt; sonst bleibt der Umbruch des Plugins */ body .fbk-app .fbk-hero #fbk-page-title { hyphens: auto; -webkit-hyphens: auto; } /* Ohne JavaScript lädt das Radar nichts; statt „Ergebnisse werden geladen …“ (Text des Plugins, bliebe für immer stehen) ein Hinweis. „scripting: none“ gilt nur, wenn JavaScript wirklich aus ist (ältere Browser: wie bisher). */ @media (scripting: none) { body .fbk-app #fbk-results-list { font-size: 0; } body .fbk-app #fbk-results-list::before { content: 'Die Ergebnisse brauchen JavaScript.'; font-size: 12px; } } /* ========================================================================== Zusatzstile des echten Plugins ausgleichen (05.11.2026) Das Plugin „fussballkrisen“ (2.2.1) hängt live an frontend.css noch einen Inline-Stil (