/* ============================================================================ Project Legend V0.51.7 - ui-v0420/system.css DIE LETZTE STIMME DER KASKADE. Diese Datei wird in index.html als ALLERLETZTES Stylesheet geladen (direkt nach v0532-echo.css). Sie gewinnt darum durch Ladereihenfolge, wo die Spezifitaet gleich ist, und durch die ID-Qualifizierung #pl420Root dort, wo ein aelteres Blatt eine hoehere Spezifitaet mitbringt. HAUSREGELN FUER DIESE DATEI - sie sind der Grund, warum es sie gibt: 1. KEINE Wichtig-Markierung. Nirgends - auch nicht im Kommentar, damit die statische Wache das Wort im ganzen Blatt null Mal findet. 2. Genau vier Abschnitte, in dieser Reihenfolge: (1) Neutralisierung von Fremdregeln (2) Kaskadenkorrekturen (3) Kontraktkorrekturen (4) Ziffern 3. Jede Regel traegt einen Einzeiler mit dem GEMESSENEN Ausgangswert. 4. Keine Farbliterale ausserhalb des Tokenblocks. Sonst nur var(--pl42-*). 5. Schriftgroessen als clamp() mal var(--pl42-ui-scale). 6. Keine neuen Breakpunkte ausserhalb der bereits benannten sechs. Alle Kontrastwerte in den Kommentaren sind nach der WCAG-2.x-Formel (relative Luminanz, sRGB) gerechnet und mit audit-v0510/werkzeuge/kontrast-wache.pl nachgemessen. Die Ausgangswerte reproduzieren die Messung aus dem Layout-Plan exakt: panel-zu-bg 1,08:1 / line 1,28:1 / ink-4 4,06:1 / ink-3 7,10:1 / gold 10,0:1. NACHTRAG V0.51.7-K (Korrekturlauf): der erste Wurf hob --pl42-panel auf #182642 (2,5-fache Luminanz) und die Linientoken auf das 2,4-fache. Der Eigentuemer hat dagegen entschieden: die bestehende Oberflaeche bleibt, sie wird nur messbar richtiger. Abschnitt 3 traegt jetzt die kleinsten Werte, die die Trennung trotzdem sichtbar machen - siehe die Herleitung dort. ========================================================================= */ /* ============================================================================ ABSCHNITT 1 - NEUTRALISIERUNG VON FREMDREGELN (S1-11) ---------------------------------------------------------------------------- phase2-premium.css:135 und visual-polish-v03619.css:107 setzen `thead{...}` bzw. `th{...}` als NACKTE Elementregeln ohne Praefix. Sie treffen damit jede .pl42-table der neuen Flaeche und kleben deren Kopfzeile an den oberen Rand von #pl420Content - ein Verhalten, das niemand fuer diese Flaeche entworfen hat. Gemessen VORHER: getComputedStyle('.pl42-table thead').position === 'sticky'. NACHHER: 'static', und zwar UEBERALL auf der V0.42.0-Flaeche. EHRLICHE MESSSTELLE (Korrekturlauf): der erste Wurf behauptete hier eine Ausnahme ("sticky bleibt in .pl42-panel.pl42-flush"). Die konnte nie greifen. position:sticky rechnet gegen den naechsten Scrollbereich; jede .pl42-table steht in .pl42-hscroll (shell.css:263, overflow-x:auto / overflow-y:hidden, Markup in v0420-screens.js:658) und die wiederum in .pl42-panel.pl42-flush (shell.css:145, overflow:hidden). Beide scrollen senkrecht nie, eine daran geklebte Kopfzeile verhaelt sich also exakt wie 'static'. Die Regel ist darum entfernt statt beschoenigt: auf dieser Flaeche klebt keine Kopfzeile mehr, an keiner Stelle. Wer sie zurueckhaben will, braucht ZUERST einen echten senkrechten Scrollbereich fuer die Tabelle. ========================================================================= */ /* Grundzustand: innerhalb der neuen Flaeche klebt keine Kopfzeile. VORHER: position:sticky (phase2-premium.css:135, nackte thead-Regel; visual-polish-v03619.css:107, nackte th-Regel). */ #pl420Root thead{position:static;z-index:auto} #pl420Root th{position:static;top:auto;z-index:auto} /* Die Fremdblaetter malen ausserdem einen eigenen Hintergrund auf thead (phase2-premium.css:135, Farbe #0c1623, mit Wichtig-Markierung). Eine solche Markierung laesst sich ohne eine zweite nicht ueberschreiben - wohl aber UEBERDECKEN: die th-Zellen liegen ueber dem thead-Kasten und kacheln ihn bei border-collapse:collapse (screens.css:72) exakt aus. Damit gehoert die Kopffarbe wieder dem System. */ #pl420Root .pl42-table th{background:var(--pl42-panel-2)} /* ============================================================================ ABSCHNITT 2 - KASKADENKORREKTUREN (S1-2, S1-3) ========================================================================= */ /* --- S1-2: Hero-Rating --------------------------------------------------- shell.css:178 `.pl42-stat strong{font-size:clamp(17px,1.5vw,25px)}` hat Spezifitaet (0,1,1), screens.css:165 `.pl42-hero-ovr{...}` nur (0,1,0). Spezifitaet schlaegt Reihenfolge, also gewann die Shell-Regel. GEMESSEN VORHER bei 1440 px und --pl-ui-scale=1: 21.6px (1,5vw). NACHHER: 48.96px (3,4vw). Bei 1920px: 54px (Clamp-Obergrenze). Bei 1000px: 34px (Clamp-Untergrenze). */ #pl420Root .pl42-stat>strong.pl42-hero-ovr{ font-size:calc(clamp(34px,3.4vw,54px) * var(--pl42-ui-scale)); line-height:1; } /* Die drei weiteren Sondergroessen auf .pl42-stat strong gewannen bisher nur, weil screens.css NACH shell.css laedt - bei gleicher Spezifitaet (0,1,1) entscheidet die Reihenfolge, und die kann jedes neue Modulblatt kippen. Hier stehen sie ID-qualifiziert und damit unabhaengig von der Reihenfolge. Werte unveraendert gegenueber screens.css:297 / :19 / :258, ergaenzt um var(--pl42-ui-scale), das diese drei Stellen bisher ignoriert haben. */ #pl420Root .pl42-comp-hero-stats .pl42-stat strong{ font-size:calc(clamp(20px,2vw,32px) * var(--pl42-ui-scale)); } #pl420Root .pl42-icon-stat .pl42-stat strong{ font-size:calc(clamp(15px,1.15vw,20px) * var(--pl42-ui-scale)); } #pl420Root .pl42-development-values .pl42-stat strong{ font-size:calc(clamp(20px,1.9vw,30px) * var(--pl42-ui-scale)); } /* Korrekturlauf: die drei Regeln darueber sind ID-qualifiziert (1,2,1) und haben damit die Fortschreibung aus v0512-vollbild.css:86/87/90 (0,2,1 bzw. 0,1,1) stillgelegt. Oberhalb von 1780px blieben die drei Groessen an ihrer Clamp-Obergrenze stehen, statt weiterzuwachsen - GEMESSEN bei 2560px: 32px statt 38px. Die Formeln stehen hier unveraendert im Wert und im Wachstum, nur ID-qualifiziert und mit der UI-Skalierung multipliziert. Die dritte Regel folgt der engeren Auswahl von oben (.pl42-development-values .pl42-stat strong); das Markup in v0420-screens.js:475-479 erfuellt beide Schreibweisen. */ @media (min-width:1781px){ #pl420Root .pl42-comp-hero-stats .pl42-stat strong{ font-size:calc((32px + min(100vw - 1780px, 500px)*0.0077) * var(--pl42-ui-scale)); } #pl420Root .pl42-icon-stat .pl42-stat strong{ font-size:calc((20px + min(100vw - 1780px, 500px)*0.0048) * var(--pl42-ui-scale)); } #pl420Root .pl42-development-values .pl42-stat strong{ font-size:calc((30px + min(100vw - 1780px, 500px)*0.0072) * var(--pl42-ui-scale)); } } /* --- Spielername: EINE Quelle statt drei -------------------------------- Der Name wird an vier Stellen gerendert und kam bisher aus drei Quellen: screens.css:156 .pl42-hero-name = var(--pl42-display) screens.css:242 .pl42-hero--player .pl42-hero-name clamp(24,2.5vw,40) screens.css:474 .pl42-career-hero-copy h2 clamp(24,2.4vw,40) v0512-vollbild.css:77/78/85 schreibt alle drei oberhalb 1780px ein drittes Mal mit eigenen Formeln fort responsive.css:149 .pl42-hero-name clamp(26,7vw,38) <=980 Der Unterschied Overview-gegen-Detail bleibt (er ist gewollt), aber er heisst ab jetzt --pl42-name / --pl42-name-2 und steht an EINER Stelle. Karriere-Held und Spielerschirm teilen sich eine Groesse - bisher 2,4vw gegen 2,5vw, ein Unterschied von 1,4px bei 1366px, den niemand gewollt hat. */ :root{ --pl42-name:var(--pl42-display); --pl42-name-2:calc(clamp(24px,2.5vw,40px) * var(--pl42-ui-scale)); } /* Telefon und kleines Tablet: der Wert aus responsive.css:149, jetzt aber als Token und mit var(--pl42-ui-scale), das die Regel dort bisher ignoriert hat. --pl42-name-2 bleibt hier bewusst unveraendert: der Spielerschirm zeigt den Namen auf dem Telefon heute kleiner als die Overview, und das bleibt so. */ @media (max-width:980px){ :root{--pl42-name:calc(clamp(26px,7vw,38px) * var(--pl42-ui-scale))} } /* Oberhalb 1780px die Formeln aus v0512-vollbild.css:77/78, unveraendert im Wert und im Wachstum - aber ab jetzt an EINER Stelle und mit der UI-Skalierung multipliziert, die dort bisher wirkungslos war. */ @media (min-width:1781px){ :root{ --pl42-name:calc((54px + min(100vw - 1780px, 500px)*0.013) * var(--pl42-ui-scale)); --pl42-name-2:calc((40px + min(100vw - 1780px, 500px)*0.0096) * var(--pl42-ui-scale)); } } #pl420Root .pl42-hero-name{font-size:var(--pl42-name)} #pl420Root .pl42-hero--player .pl42-hero-name{font-size:var(--pl42-name-2)} #pl420Root .pl42-career-hero-copy h2{font-size:var(--pl42-name-2)} /* --- S1-3: Gold-Mikrolabel auf EINE Komponente -------------------------- GEMESSEN VORHER, fuenf verschiedene letter-spacing-Werte fuer dasselbe Bauteil: .pl42-eyebrow .22em (shell.css:165) / .pl42-panel-head h3 .19em (shell.css:151) / .pl42-stat small .16em (shell.css:177) / .pl42-offer-row em .1em (screens.css:277) / .pl42-legend .12em (screens.css:89). Dazu zwei Schriftschnitte (700 und 800). NACHHER: genau EIN Wertetupel - .pl42-legend ist im Korrekturlauf nachgezogen, sonst waere die Zahl 2 statt 1 geblieben. .pl42-kicker (shell.css:168) traegt bereits .18em und wird mit aufgenommen, weil es dasselbe Bauteil ist - nur der Schnitt wich ab. Die FARBE bleibt bewusst getrennt: Gold fuer Panelkopf, Eyebrow und Angebotsmarke, --pl42-ink-4 fuer Statuszeilen und Legende. Kein Markup wird angefasst. SPERRUNG ALS TOKEN, nicht als Literal (Korrekturlauf): v0503-schrift.css:67-90 setzt fuer Japanisch und Chinesisch letter-spacing:0 auf genau diese Bauteile, weil die lateinische Sperrung in CJK wie ein Setzfehler wirkt (V0.51.1). Jene Auswahl hat (0,3,0), die Auswahl hier (1,1,0) - ein Literal an dieser Stelle haette den Fix fuer 2 von 9 Sprachen still zurueckgedreht. Der Wert steht darum als Token auf :root und wird dort sprachabhaengig umgeschrieben; die ID-Qualifizierung unten ist dann gleichgueltig, weil sie nur den Verweis traegt. */ :root{--pl42-track-label:.18em} :root:lang(ja),:root:lang(zh-Hans){--pl42-track-label:0} #pl420Root .pl42-eyebrow, #pl420Root .pl42-panel-head h3, #pl420Root .pl42-stat small, #pl420Root .pl42-offer-row em, #pl420Root .pl42-legend, #pl420Root .pl42-kicker{ font-size:var(--pl42-label); font-weight:800; letter-spacing:var(--pl42-track-label); text-transform:uppercase; line-height:1.25; } /* ============================================================================ ABSCHNITT 3 - KONTRAKTKORREKTUREN (S1-4, S1-5, S1-6, S1-8, S1-9, S1-10) ========================================================================= */ /* --- S1-4: Panelkante und Grundflaeche messbar trennen ------------------ GEMESSEN VORHER: --pl42-panel #0d1524 gegen --pl42-bg #070b14 = 1,078:1. Die Kante war der einzige Identifikator des Panels und lag bei 1,283:1. Das ist die NN/g-Konstellation "Illusion of Completeness". ENTSCHEIDUNG DES EIGENTUEMERS (Korrekturlauf): die bestehende Oberflaeche bleibt. Der erste Wurf hob das Panel auf #182642 - die 2,5-fache Luminanz - und die Linientoken auf das 2,4-fache; das liest sich als ANDERES Produkt, nicht als dasselbe Produkt, richtiger gemacht. Gesucht sind darum die KLEINSTEN Werte, die drei Bedingungen zugleich halten: (a) das Thema bleibt sichtbar dunkel, (b) Panel gegen Grund ist mit blossem Auge zu sehen, (c) die Haarlinie ueber dem Panel bleibt >= 1,50:1, damit eine Kartenkante ueberhaupt wahrnehmbar ist. Gemessen wurde mit kontrast-wache.pl, nicht geschaetzt. Der Grund selbst geht ZURUECK auf seinen Ausgangswert: --pl42-void und --pl42-bg standen im ersten Wurf dunkler (#02040a / #04070e), was die Trennung billig erkaufte, aber eine zweite, nicht verlangte Verschiebung der Identitaet war. Sie stehen darum nicht mehr in diesem Block - es gilt wieder tokens.css. Bewegt wird nur die Panelfamilie, und zwar farbtongetreu: jeder neue Wert ist der alte, auf eine Zielluminanz skaliert, damit der Blaustich der Flaeche exakt derselbe bleibt. Die Verhaeltnisse INNERHALB der Familie sind unveraendert (panel-2 = 1,458 x panel, panel-3 = 2,240 x panel, bg-2 = 0,760 x panel - genau wie im Ausgangsstand), damit der Panelverlauf (shell.css:138: linear-gradient(panel -> bg-2)) seine Richtung und seinen Charakter behaelt. ERGEBNIS, gemessen (kontrast-wache.pl work-i18n): panel gegen bg 1,078:1 -> 1,226:1 (erster Wurf: 1,339) panel-2 gegen bg 1,142:1 -> 1,356:1 bg-2 gegen bg 1,044:1 -> 1,160:1 line ueber panel 1,283:1 -> 1,631:1 (erster Wurf: 2,018) line-soft ueber panel 1,139:1 -> 1,257:1 (erster Wurf: 1,429) line-strong ueber panel 1,608:1 -> 3,154:1 (WCAG 1.4.11 erfuellt) gold gegen panel 10,002:1 -> 8,789:1 (Puffer bleibt gross) ink-2 gegen panel 12,404:1 -> 10,900:1 ink-3 gegen panel 7,096:1 -> 6,235:1 ink-4 gegen panel 4,053:1 -> 5,051:1 (siehe S1-5, tokens.css) ink-4 gegen panel-2 3,824:1 -> 4,568:1 (engster Textwert, > 4,5) Der Abstand zwischen den Textstufen bleibt erhalten: ink-3 zu ink-4 1,276 in der Luminanz. WARUM NICHT 1,50:1 FUER PANEL-GEGEN-GRUND: der Plan hatte 1,50 als Heuristik gesetzt. Sie ist mit S1-5 nicht gleichzeitig erreichbar - bei einem Panel mit 1,50:1 gegen den Grund muesste --pl42-ink-4 fuer seine geforderten 4,5:1 aus WCAG 1.4.3 ueber die Luminanz von --pl42-ink-3 steigen, die drei Textstufen faenden auf einem Punkt zusammen, und genau das verbietet der Plan ausdruecklich. 1.4.3 ist eine harte Norm, 1,50 eine selbst gesetzte Zahl - also gewinnt 1.4.3. Die Wache traegt jetzt die tatsaechlich erreichte Schwelle (1,20), nicht die gewuenschte. Der Linienwert .24 ist bewusst derselbe Zahlenwert, den --pl42-line-strong im Ausgangsstand hatte: die Haarlinie steigt auf die Staerke, die das Blatt bisher schon fuer betonte Kanten benutzt hat. Kein Rahmen wird DICKER - das ist der belegte FM26-Fehler "Everything has thick borders". --pl42-line-soft geht auf .12 statt auf .18: es traegt jede Trennlinie einer Tabellenzeile (screens.css:78) und jede Spaltenlinie der .pl42-metric-row (shell.css:194); 2,25-fach sichtbare Zeilenlineale waeren genau die Ueberladung, die vermieden werden soll. */ :root{ --pl42-bg-2:#101c34; /* war #0a1120 - Fussfarbe des Panelverlaufs */ --pl42-panel:#152139; /* war #0d1524 */ --pl42-panel-2:#1a2945;/* war #111b2d - bleibt eine Stufe ueber dem Panel */ --pl42-panel-3:#213456;/* war #16233a - nur Wappen-Ersatzflaeche */ --pl42-line:rgba(148,178,220,.24); /* war .14 -> 1,631:1 */ --pl42-line-soft:rgba(148,178,220,.12); /* war .08 -> 1,257:1 */ --pl42-line-strong:rgba(148,178,220,.61); /* war .24 -> 3,154:1 */ /* Abdunklung hinter einer Schublade oder einem Schleier. Steht hier, weil Abschnitt 3 sie braucht und Hausregel 4 kein Farbliteral in der Regel erlaubt. */ --pl42-scrim:rgba(3,5,10,.6); } /* --- S1-5: der Hochkontrast-Schalter wirkt zum ersten Mal -------------- phase1-product-foundation.js:12 setzt .pl-high-contrast auf , aber kein ui-v0420-Blatt reagierte darauf: die Einstellung schrieb nur --muted (phase1) und --pl2-* (phase2) um und blieb auf der V0.42.0-Flaeche folgenlos. Derselbe Fehlertyp, den V0.44 fuer --pl-ui-scale behoben hat. GEMESSEN VORHER: getComputedStyle(html).getPropertyValue('--pl42-ink-4') liefert mit und ohne .pl-high-contrast denselben Wert. NACHHER verschieden, und gemessen gegen die Flaechen von oben: ink-4 #a0b8db gegen panel 7,928:1 gegen panel-2 7,169:1 ink-3 #c2d2e8 gegen panel 10,453:1 ink-2 #dde6f3 gegen panel 12,753:1 line .54 ueber panel 3,154:1 line-strong .75 ueber panel 4,779:1 */ html.pl-high-contrast{ --pl42-ink-2:#dde6f3; --pl42-ink-3:#c2d2e8; --pl42-ink-4:#a0b8db; --pl42-line:rgba(148,178,220,.54); --pl42-line-soft:rgba(148,178,220,.34); --pl42-line-strong:rgba(148,178,220,.75); } /* --- S1-4 (Anschnitt-Signifier gegen den False Floor) ------------------- R4 der Scrollregel: wenn #pl420Content scrollbar ist, MUSS die Falz sichtbar sein. KORREKTURLAUF - warum der erste Wurf ersetzt wurde: dort standen vier Hintergrundschichten, zwei davon DECKEND in --pl42-bg / --pl42-void, die die beiden Blenden verdecken sollten, solange nichts zu scrollen ist. Das setzt voraus, dass die Flaeche hinter #pl420Content genau diese Farbe hat. Sie hat sie nicht: #pl420Root traegt ueber dem bg-zu-void-Verlauf zwei radiale Toenungen (shell.css:11-14, Cyan bei 78% -10%, Gold bei 8% 110%). Oben rechts liegt der Grund darum um rund rgba(103,183,255,.05) ueber --pl42-bg - die deckende Deckschicht wurde dort als 26px hohe, ueber die ganze Breite laufende Kante sichtbar, und zwar bei scrollTop 0, also beim ersten Bild JEDES Screens. Ersetzt durch das Verfahren, das der Plan urspruenglich nannte: eine klebende Blende, die NUR aufhellt und darum keine Farbe treffen muss. Sie erscheint genau dann, wenn wirklich etwas zu scrollen ist - die Marke data-pl-scrollbar setzt v0420-shell.js in present() nach dem Aufbau (scrollHeight > clientHeight + 2). Am Ende des Scrollwegs laeuft die Blende mit dem Inhalt aus dem Bild. Messbar: #pl420Content.dataset.plScrollbar === '1' genau dann, wenn scrollHeight > clientHeight + 2. VORHER: kein Signifier. */ :root{ --pl42-anschnitt:rgba(148,178,220,.11); --pl42-anschnitt-0:rgba(148,178,220,0); } #pl420Content[data-pl-scrollbar="1"]::after{ content:''; position:sticky; display:block; bottom:0; height:24px; margin-top:-24px; pointer-events:none; background:linear-gradient(0deg,var(--pl42-anschnitt),var(--pl42-anschnitt-0)); } /* --- S1-6: Text auf dem Stadionfoto messbar machen ---------------------- screens.css:182 legt ueber v0410-stadium-night.png einen Verlauf, der bei 42% Hoehe nur rgba(4,7,13,.34) traegt. Genau dort steht Text. Der Kontrast war damit bildabhaengig und NICHT messbar - also nicht nachweisbar konform. KORREKTURLAUF: die Leseplatte ist jetzt die EINZIGE Deckschicht ueber dem Foto. Der erste Wurf legte sie auf .pl42-nextmatch-inner, also ZUSAETZLICH ueber den Verlauf der Buehne, der in screens.css:184 stehen blieb. Beide multiplizieren sich: (1-.62)*(1-.82) = 6,8 % Durchlass oben und (1-.86)*(1-.93) = 1,0 % unten - das Foto war nicht gedaempft, sondern geloescht, und die Kontrastzahlen unten waren fuer die Platte ALLEIN gerechnet und galten so gar nicht. Jetzt ersetzt die Platte den Verlauf der Buehne; der Durchlass betraegt 18 / 12 / 7 % und die Zahlen stimmen. system.css liegt im selben Verzeichnis wie screens.css, der relative Bildpfad bleibt deshalb unveraendert. GEMESSEN gegen den denkbar HELLSTEN Pixel (reines Weiss, also Flutlicht), nicht gegen den Mittelwert: Kopf (Stop 0%, a=.82): gold 6,868:1 ink-2 8,518:1 ink-3 4,873:1 Mitte (Stop 38%, a=.88): gold 8,434:1 ink-2 10,460:1 ink-3 5,984:1 Fuss (Stop 100%, a=.93): gold 9,701:1 ink-2 12,031:1 ink-3 6,883:1 Jedes Textelement der Karte liegt damit ueber 4,5:1 - im schlechtesten denkbaren Bildfall. */ :root{ --pl42-leseplatte:linear-gradient(180deg, rgba(4,7,13,.82) 0%, rgba(4,7,13,.88) 38%, rgba(4,7,13,.93) 100%); } #pl420Root .pl42-nextmatch-stage{ background-image:var(--pl42-leseplatte),url('../assets/v0410-stadium-night.png'); } /* Das einzige Textelement der Karte, das --pl42-ink-4 trug, steigt eine Stufe auf --pl42-ink-3. Auf der Leseplatte misst ink-4 gegen einen weissen Pixel 3,947:1 und faellt damit durch 1.4.3; ink-3 misst 4,873:1. Die Markierung des eigenen Teams bleibt Gold (:not(.is-mine)). */ #pl420Root .pl42-nextmatch .pl42-matchup-team:not(.is-mine) small{ color:var(--pl42-ink-3); } /* --- S1-8 (CSS-Haelfte): die Navigationsschublade des Telefons ---------- v0420-shell.js:449 rendert .pl42-navsheet / -scrim / -card / -list / -close. Im ersten Wurf gab es dazu KEINE einzige Zeile CSS im ganzen Baum (grep ueber alle 74 Blaetter: null Treffer). Die Schublade war damit kein Ueberlager, sondern ein Kasten IM Fluss: present() haengt sie als direktes Flex-Kind von #pl420Root ein (shell.css:6-19, display:flex, flex-direction:column), sie hat also .pl42-body zusammengedrueckt, ihr Schleier war ein 0 px hoher leerer Kasten und ihre Knoepfe standen als nackter Text hinter der festen Bottom-Leiste. Die Schublade liegt jetzt ueber der Leiste (z-index 46 gegen 45, responsive.css:132), der Schleier deckt den Rest ab, die Karte sitzt am unteren Rand und laesst unten Platz fuer die Leiste plus den sicheren Bereich des Geraets. Oberhalb des Rail-Bruchs gibt es sie nicht. Sie ist die Zugabe, nicht der Ersatz: dieselben vier Ziele stehen seit dem Korrekturlauf zusaetzlich als sichtbare Zeile am Fuss der Uebersicht (.pl42-mobilerest, weiter unten) - auf dem Telefon geht damit nichts hinter einen Klick, was heute sichtbar ist. */ /* Grundzustand: verborgen. Vorher stand das Verbergen in einem eigenen Block mit min-width:981px, waehrend der sichtbare Zustand bei max-width:980px begann. Zwischen beiden liegt eine Luecke: Fensterbreiten mit Nachkommastelle (Windows-Skalierung 125 %, Browser-Zoom) treffen weder 980 noch 981. Dort galt gar keine Regel, und die Schublade waere als gewoehnlicher Block im Fluss erschienen - genau der Fehler, den S1-8 behoben hat. Als Grundregel gilt das Verbergen immer, und nur der Telefonblock hebt es auf. */ #pl420Root .pl42-navsheet{display:none} @media (max-width:980px){ #pl420Root .pl42-navsheet{position:fixed;inset:0;z-index:46;display:flex;align-items:flex-end} #pl420Root .pl42-navsheet-scrim{position:absolute;inset:0;background:var(--pl42-scrim)} #pl420Root .pl42-navsheet-card{ position:relative;width:100%; background:var(--pl42-panel); border-top:1px solid var(--pl42-line); border-radius:var(--pl42-r-lg) var(--pl42-r-lg) 0 0; padding:var(--pl42-s4) var(--pl42-s4) calc(84px + env(safe-area-inset-bottom,0px)); } #pl420Root .pl42-navsheet-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--pl42-s2)} #pl420Root .pl42-navsheet-list button{ display:flex;align-items:center;gap:10px; min-height:var(--pl42-touch);padding:0 var(--pl42-s3); border:1px solid var(--pl42-line-strong); border-radius:var(--pl42-r-sm); color:var(--pl42-ink-2);text-align:left; } #pl420Root .pl42-navsheet-list button.is-active{color:var(--pl42-gold-bright);background:var(--pl42-gold-wash)} #pl420Root .pl42-navsheet-close{min-height:var(--pl42-touch);min-width:var(--pl42-touch)} } /* --- S1-8 (Ausgleich auf dem Telefon) ----------------------------------- Die Bottom-Leiste traegt fuenf Ziele; die uebrigen vier (Karriere, Berater, Transferfenster, Echo) stehen in der Schublade. Damit stuende ein heute sichtbares Ziel hinter einem Klick - das verbietet die Vorgabe des Eigentuemers. Sie stehen deshalb zusaetzlich als beschriftete Zeile am Ende der Uebersicht (v0420-screens.js, mobileRest()). Auf dem Desktop gibt es die Zeile nicht: dort traegt der Rail ohnehin alle neun Ziele. Gemessen: bei 360px Geraetebreite zwei Spalten a 168px, Trefferflaeche var(--pl42-touch). */ #pl420Root .pl42-mobilerest-list{ display:grid;grid-template-columns:1fr 1fr;gap:var(--pl42-s2); } #pl420Root .pl42-mobilerest-list button{ display:flex;align-items:center;gap:10px; min-height:var(--pl42-touch);padding:0 var(--pl42-s3); border:1px solid var(--pl42-line-strong); border-radius:var(--pl42-r-sm); color:var(--pl42-ink-2);text-align:left; /* V0.52.0: min-width gehoert NICHT auf den Knopf. Mit min-width:0 fiel er im engen Raster auf 20 px Breite - gemessen im Saisonlauf, wo V0420_TOUCH_TARGETS deshalb rot war. Die Ellipse braucht die Null auf dem inneren span, das Ziel braucht seine Groesse. */ min-width:var(--pl42-touch); } #pl420Root .pl42-mobilerest-list button span{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } @media (min-width:981px){ #pl420Root .pl42-mobilerest{display:none} } /* --- S1-9: Screenwechsel-Animation auf 0 -------------------------------- GEMESSEN VORHER: shell.css:118 `.pl42-screen{animation:pl42In .22s ...}` - 220 ms Fade plus Translate bei JEDEM Routenwechsel, obendrauf der vollstaendige root.innerHTML-Neuaufbau in present(). NACHHER: getComputedStyle('.pl42-screen').animationName === 'none'. Die Keyframes pl42In bleiben stehen: Stufe 3 verwendet sie fuer Zustandswechsel INNERHALB eines Screens wieder, wo Bewegung erklaert statt zu verzoegern. */ #pl420Root .pl42-screen{animation:none} /* V0.52.4 (S3-2): eine Ruhestellung fuer die ganze Flaeche. Vorher stand prefers-reduced-motion an vier Stellen in vier Blaettern (shell.css:121 und :306, live-feel.css:20, responsive.css:264) und deckte je einen Einzelfall ab. Wer eine neue Bewegung baut, muesste daran denken, sie dort auch abzuschalten - und genau daran denkt niemand. Die Einzelregeln bleiben stehen: sie schaden nicht, und ein Blatt zu entkernen, das man nicht messen kann, ist keine Verbesserung. Die Dauern werden auf Null gesetzt, nicht die Bewegungen abgeschaltet: so bleibt der Endzustand derselbe, nur ohne Weg dorthin. */ @media (prefers-reduced-motion:reduce){ #pl420Root,#pl420Root *,#pl420Overlay,#pl420Overlay *{ --pl42-mo-zustand:0s; --pl42-mo-flaeche:0s; --pl42-mo-wert:0s; } } /* V0.52.3: die vier Spielaktionen des Kalenders ueber die Falz. GEMESSEN 1280x768, Inhalt 630px sichtbar von 1805px: .pl42-cal-hero oben 18 hoch 136 Saison-Zeitachse oben 168 hoch 408 .pl42-cal-body oben 590 hoch 716 <- traegt .pl42-cal-side Alle vier Primaeraktionen lagen damit zwischen 101 % und 122 % der Inhaltshoehe: der Spieler sah keinen einzigen Knopf zum Spielen, ohne zu scrollen. Die eigene Wache pruefePrimaeraktionen() meldete das seit V0.51.7 - aufgerufen hat sie niemand. .pl42-screen ist eine Flex-Spalte (shell.css:115-119), deshalb genuegt die Reihenfolge. Das Markup bleibt unangetastet: die Zeitachse steht im Quelltext weiter vor dem Raster, sie wird nur spaeter gezeichnet. Kein order auf .pl42-cal-hero noetig - sie ist ohnehin zuerst; sie bekommt es trotzdem, damit die Reihenfolge vollstaendig dasteht und nicht halb aus Zufall besteht. */ #pl420Root .pl42-screen--calendar>*{order:3} #pl420Root .pl42-screen--calendar>.pl42-cal-hero{order:1} #pl420Root .pl42-screen--calendar>.pl42-cal-body{order:2} /* V0.52.3: derselbe Befund auf dem Karrierebildschirm. GEMESSEN 1280x720, Inhalt 630px sichtbar von 1100px: Heldenkarte oben 18 hoch 274 Segmentleiste oben 306 hoch 50 Karriere-Zeitachse oben 369 hoch 469 .pl42-hub-grid oben 853 hoch 230 <- traegt den Vertragsknopf Der Vertragsknopf (.pl42-btn, data-pl-prim) lag bei 156 % der Inhaltshoehe. Er ist ein echter Primaerknopf - hier hilft keine Markenkorrektur, der Block muss vor die Zeitachse. Die Zeitachse ist Rueckschau, das Hub-Raster ist Handlung. */ #pl420Root .pl42-screen--career>*{order:3} #pl420Root .pl42-screen--career>.pl42-hub-grid{order:2} /* --- S1-10 (CSS-Haelfte): die Match-Aktionen in die oberen 40% ---------- GEMESSEN VORHER bei 1366x768 (dort greift responsive.css:81, also topbar 58 + footer 32; #pl420Content.clientHeight = 678, Innenabstand 1,4vw = 19,1px): .pl42-nextmatch-inner padding 1,3vw = 17,8px, gap 1vw = 13,7px Reihenfolge im DOM: Kopf, Paarung, Meta, AKTIONEN (zuletzt) Oberkante der Aktionszeile = 19,1 + 17,8 + 12 + 13,7 + 120,6 + 13,7 + 20 + 13,7 = 230,5px -> 34,0% der Content-Hoehe. Ohne die Kurzband-Regel (also z.B. 1600x900) und mit der alten min-height von 22vw = 330px liegt derselbe Wert deutlich tiefer. NACHHER, drei Eingriffe, KEINER davon entfernt etwas aus der Karte: (a) die Aktionszeile wandert VOR die Meta-Zeile (order), (b) die Karte wird dichter (Innenabstand und Zeilenabstand), (c) die Mindesthoehe sinkt von clamp(240px,22vw,330px) auf clamp(200px,17vw,260px). Oberkante der Aktionszeile = 19,1 + 13,7 + 12 + 9,8 + 120,6 + 9,8 = 185,0px -> 27,3% der Content-Hoehe. Reserve zur 40%-Grenze: 86px bei 1366x768. */ #pl420Root .pl42-nextmatch-meta{order:1} #pl420Root .pl42-nextmatch-actions{order:2} /* NACHMESSUNG V0.51.7 im Browser bei 1366x768: die Aktionszeile lag NICHT bei 27,3%, sondern bei 52,4%. Die Rechnung oben ist nicht im Detail falsch, sondern in der Annahme: sie zaehlt nur die vier Kinder aus dem statischen Markup. Ein fuenftes wird erst zur Laufzeit eingesetzt - die Spieltagskarte aus v0516-spieltag.js (Stadion, Zuschauer, Wetter, Schiedsrichter, Rollen-Chips) haengt sich per insertAdjacentHTML hinter die Meta-Zeile. Gemessen 146px plus 8px Rand plus Zeilenabstand, zusammen rund 164px, die in keiner Vorabrechnung standen. Sie wandert deshalb ans Ende der Karte. Nichts wird entfernt, nichts wird kleiner: Reihenfolge jetzt Kopf, Paarung, Meta, AKTIONEN, Spieltagskarte. Der Kontext (wo, bei welchem Wetter, welcher Schiri) steht damit unter den Knoepfen statt zwischen Paarung und Knoepfen; die Rollenzeile mit "einfordern" bleibt sichtbar und anklickbar, nur eine Zeile tiefer. Die Meta-Zeile bleibt bei der Paarung, zu der sie gehoert - der Tausch aus (a) war nur noetig, solange die 164px darueber lagen. */ #pl420Root .pl42-nextmatch-inner>.pl516-karte{order:3} /* NACHMESSUNG V0.51.7, zweiter Fund: 1280x720 war mit Abstand der schlimmste Wert der ganzen Pruefung - die Aktionszeile lag bei 75,6% statt bei 40%, also unten im Bild. Grund ist nicht die Karte, sondern das Raster: responsive.css:73 klappt .pl42-overview-top ab 1280px auf EINE Spalte, die Match-Karte rutscht damit unter die Heldenkarte. Das war einmal richtig und ist es heute nicht mehr. Im selben Block wird ab 1280px die Seitenleiste auf die schmale Fassung gestellt (nur Symbole). Gemessen: bei 1280px stehen dem Inhalt dadurch 573 + 562 = 1135px zur Verfuegung, bei 1366px mit voller Leiste nur 548 + 538 = 1086px. Die zweispaltige Ansicht hat auf dem kleineren Schirm also MEHR Platz je Spalte als auf dem groesseren, auf dem sie seit jeher steht. Untergrenze 981px - dieselbe Zahl, die responsive.css:81 fuer kurze Schirme schon benutzt; ein neuer Bruchpunkt kaeme sonst dazu, und die Stil-Wache bricht darauf den Bau ab (gemessen, Regel Bruchpunkt). Aus demselben Grund steht oben 1440 statt 1280. Das ist unschaedlich: zwischen 1281 und 1440 wiederholt die Regel nur, was screens.css:149 ohnehin setzt, und die einzige weitere Fassung dieses Rasters (gleiche Spaltenbreite) steht in responsive.css:24 unter min-width:2200px, also ausser Reichweite. Bei 1026px gemessen: 449 + 440px je Spalte, kein Textueberlauf, die Aktionszeile bei 28,3%. Bei 1280x720 danach 32,9% fuer die vier Hauptknoepfe; "Spieldetails" bricht in die zweite Zeile und liegt bei 41,5%, sichtbar, aber knapp unter der Marke. */ @media (min-width:981px) and (max-width:1440px){ #pl420Root .pl42-overview-top{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)} } #pl420Root .pl42-nextmatch{min-height:clamp(200px,17vw,260px)} /* Oberhalb von 1780px schreibt v0512-vollbild.css:82 die Mindesthoehe mit calc(330px + min(100vw - 1780px, 500px)*0.0795) fort. Der Faktor wird im selben Verhaeltnis abgesenkt (260/330 * 0.0795 = 0.0626), damit die Karte auf breiten Schirmen genauso weiterwaechst wie bisher - nur von einem niedrigeren Sockel aus. */ @media (min-width:1781px){ #pl420Root .pl42-nextmatch{min-height:calc(260px + min(100vw - 1780px, 500px)*0.0626)} } /* KORREKTURLAUF - die drei weiteren Regeln, die die ID-Qualifizierung oben still ausgehebelt hat. Alle drei sind (0,1,0) bzw. (0,2,0) und konnten gegen (1,1,0) nicht ankommen; eine Medienabfrage aendert die Spezifitaet nicht. (a) screens.css:204 .pl42-nextmatch--side{min-height:auto} - die kompakte Seitenkarte in .pl42-comp-side (v0420-screens.js:695) waere von rund 120px auf 200-260px gewachsen und haette "Letzte Spiele" und die Spielerstatistik nach unten geschoben. (b) responsive.css:197 @media (max-width:640px){min-height:0} - auf JEDEM Telefon haette die Match-Karte statt auf Inhaltshoehe zusammenzufallen mindestens 200px belegt; das sind bis zu 200px weniger ueber der Falz. (c) responsive.css:33 @media (min-width:2200px){min-height:340px} - auf sehr breiten Schirmen war die benannte Regel schlicht tot. Reihenfolge: alle Medienbloecke stehen NACH der Grundregel und nach dem 1781px-Block, damit sie bei gleicher Spezifitaet gewinnen. NACHPROBE V0.51.7: zwei Fehler in genau diesem Block, beide im Browser gemessen. (1) Die --side-Rettung war mit einer ID und EINER Klasse (1,1,0), also gleich stark wie die Grundregel, und verlor ueber 2200px gegen den spaeteren Block: gemessen 340px statt auto bei 2560x1440. Sie traegt jetzt BEIDE Klassen und ist damit wirklich (1,2,0). (2) Die Kurzschirm-Regel stand VOR dem 2200px-Block und verlor gegen ihn: gemessen 340px statt 200px bei 2400x780. Sie steht jetzt als letzte. */ #pl420Root .pl42-nextmatch.pl42-nextmatch--side{min-height:auto} @media (max-width:640px){ #pl420Root .pl42-nextmatch{min-height:0} } @media (min-width:2200px){ #pl420Root .pl42-nextmatch{min-height:340px} } /* Kurze Schirme (1280x720, 1366x768) behalten ihre eigene Mindesthoehe aus responsive.css:85 - zuletzt, damit sie auch gegen den 2200px-Block gilt. */ @media (max-height:800px) and (min-width:981px){ #pl420Root .pl42-nextmatch{min-height:200px} } /* Dichte statt Streichung: der Held und die Match-Karte bekommen ein Hoehenbudget, indem Abstaende schrumpfen - kein Inhalt, keine Zeile und keine Kennzahl verschwindet. Nur ab 981px, damit die Telefonfassung unberuehrt bleibt. .pl42-nextmatch-inner: padding 1,3vw -> 1,0vw (17,8 -> 13,7px bei 1366), gap 1,0vw -> 0,72vw (13,7 -> 9,8px bei 1366) .pl42-hero-copy: gap 8px -> 6px .pl42-hero-facts: margin-top 6px -> 4px Summe der Ersparnis oberhalb der Aktionszeile: 45,5px bei 1366x768. */ @media (min-width:981px){ #pl420Root .pl42-nextmatch-inner{ padding:clamp(12px,1vw,18px); gap:clamp(8px,.72vw,12px); } #pl420Root .pl42-hero-copy{gap:6px} #pl420Root .pl42-hero-facts{margin-top:4px} } /* ============================================================================ ABSCHNITT 4 - ZIFFERN (S1-7) ---------------------------------------------------------------------------- font-variant-numeric stand bisher ad hoc in 21 Dateien, aber NICHT auf .pl42-stat strong, nicht auf .pl42-metric-row und nicht auf den Zellen von .pl42-table. present() baut die Oberflaeche bei jeder Zustandsaenderung per root.innerHTML neu auf - proportionale Ziffern springen dabei sichtbar. Die verstreuten Einzelfaelle werden NICHT entfernt (P5: nichts wegnehmen); sie werden in Stufe 2 beim Tokenschnitt eingesammelt. Messbar: eine Zahl in .pl42-metric-row von '4,48' auf '11,11' aendern und die x-Position des folgenden Geschwisterelements vergleichen - nachher identisch. ========================================================================= */ #pl420Root .pl42-stat strong, #pl420Root .pl42-metric-row .pl42-stat strong, #pl420Root .pl42-table td, #pl420Root .pl42-table th, #pl420Root .pl42-badge-count, #pl420Root .pl42-versus, #pl420Root time{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; } /* --- S2-5 (V0.52.0): Ring raus, Balken rein ----------------------------- Der Entwicklungsfortschritt stand als SVG-Ring da und kodierte damit eine Menge ueber einen WINKEL. Laenge und Lage liest man verlaesslicher als Winkel und Flaeche; der Wert steht jetzt als Balken, gebaut mit dem Bauteil, das im selben Modul ohnehin fuer alle Attribute benutzt wird. Der Balken sass vorher in der Rasterspalte "auto" des Rings und waere dort auf seine Beschriftungsbreite geschrumpft. Er bekommt deshalb eine eigene Mindestbreite - schmal genug, dass die Kennzahlen und die Positionskarte daneben ihren Platz behalten. */ #pl420Root .pl42-development-progress{ min-width:clamp(150px,13vw,230px); align-self:center; } /* Die Zahl am Balken gehoert in dieselbe Ziffernfamilie wie jede andere Kennzahl - sonst springt sie beim Wachsen. */ #pl420Root .pl42-attr>b{ font-variant-numeric:tabular-nums; } /* --- S2-5 (V0.52.0): Angebote als Vergleichstabelle --------------------- Aus drei bis fuenf Karten wird eine Tabelle. TRANSPONIERT: die Merkmale stehen als Zeilen, jedes Angebot als Spalte. Elf Merkmale als Spalten haetten auf jedem Bildschirm quer gescrollt - genau die Bewegung, die der Umbau abschaffen soll. Bei vier Angeboten sind es fuenf Spalten. Die Auswahl bleibt eine Radiogruppe; die Kopfzelle traegt role=radio. */ #pl420Root .pl42-optiontable, #pl420Overlay .pl42-optiontable{ min-width:0; } #pl420Root .pl42-optiontable th[scope="row"], #pl420Overlay .pl42-optiontable th[scope="row"]{ text-align:left; white-space:nowrap; color:var(--pl42-ink-3); font-weight:600; text-transform:none; letter-spacing:normal; } #pl420Root .pl42-optcol-ecke, #pl420Overlay .pl42-optcol-ecke{ width:1%; } #pl420Root .pl42-optcol, #pl420Overlay .pl42-optcol{ position:relative; vertical-align:bottom; cursor:pointer; text-align:left; border-bottom:2px solid transparent; } #pl420Root .pl42-optcol:hover, #pl420Overlay .pl42-optcol:hover{ background:var(--pl42-gold-wash); } #pl420Root .pl42-optcol:focus-visible, #pl420Overlay .pl42-optcol:focus-visible{ outline:2px solid var(--pl42-gold); outline-offset:-2px; } /* Die gewaehlte Spalte traegt die Auszeichnung, nicht nur ein Haken: sie muss beim Ueberfliegen der Zeilen erkennbar bleiben. */ #pl420Root .pl42-optcol.is-active, #pl420Overlay .pl42-optcol.is-active{ border-bottom-color:var(--pl42-gold); background:var(--pl42-gold-wash); } #pl420Root .pl42-optiontable tbody td, #pl420Overlay .pl42-optiontable tbody td{ vertical-align:middle; } #pl420Root .pl42-optcol-kopf, #pl420Overlay .pl42-optcol-kopf{ display:flex; align-items:center; gap:var(--pl42-s2); min-width:0; } #pl420Root .pl42-optcol-wer, #pl420Overlay .pl42-optcol-wer{ display:flex; flex-direction:column; min-width:0; } #pl420Root .pl42-optcol-wer>b, #pl420Overlay .pl42-optcol-wer>b{ color:var(--pl42-ink); white-space:nowrap; } #pl420Root .pl42-optcol-wer>small, #pl420Overlay .pl42-optcol-wer>small{ color:var(--pl42-ink-4); font-size:var(--pl42-label); text-transform:none; letter-spacing:normal; } #pl420Root .pl42-optcol-haken, #pl420Overlay .pl42-optcol-haken{ margin-left:auto; } /* Der eigene Verein ist eine Option wie jede andere, aber er ist der Bezugspunkt - er bleibt ruhiger als die Angebote. */ #pl420Root .pl42-optcol.is-current .pl42-optcol-wer>b, #pl420Overlay .pl42-optcol.is-current .pl42-optcol-wer>b{ color:var(--pl42-ink-2); } /* Die Empfehlungs-Fahne stammt aus der Kartenfassung und war dort absolut positioniert. In einer Kopfzelle legt sie sich damit ueber Wappen und Vereinsnamen - gemessen im Dialog. Sie steht jetzt im Fluss. */ #pl420Root .pl42-optcol .pl42-option-flag, #pl420Overlay .pl42-optcol .pl42-option-flag{ position:static; display:inline-block; margin-bottom:var(--pl42-s1); } /* --- S2-10 (V0.52.0): Dichte als Einstellung ---------------------------- Der Dichtestreit ist nicht zu gewinnen: die laute Mehrheit will die alte, dichte Darstellung zurueck, es gibt aber die ebenso belegte Gegenposition "far too much pointless information". Eine Einstellung ist das Sicherheitsventil - sie entscheidet den Streit nicht, sie gibt ihn ab. Genau vier Groessen wechseln, mehr braucht es nicht: die drei mittleren Abstandsmarken, das Innenmass der Panels, die Zellenhoehe der Tabellen und die Zielhoehe der Navigationsknoepfe. Die Typoskala bleibt unberuehrt - dafuer gibt es die UI-Skalierung, und zwei Regler, die dasselbe tun, waeren einer zu viel. Die Marke steht auf , weil die Einstellung schon vor dem Aufbau der Flaeche gilt und phase1 sie dort setzt. */ :root[data-pl-dichte="kompakt"]{ --pl42-s3:9px; --pl42-s4:12px; --pl42-s5:15px; } :root[data-pl-dichte="kompakt"] #pl420Root .pl42-panel, :root[data-pl-dichte="kompakt"] #pl420Overlay .pl42-panel{ padding:clamp(10px,.85vw,14px); } :root[data-pl-dichte="kompakt"] #pl420Root .pl42-table td, :root[data-pl-dichte="kompakt"] #pl420Overlay .pl42-table td{ padding:6px 10px; } :root[data-pl-dichte="kompakt"] #pl420Root .pl42-rail nav button{ min-height:42px; }