/* ============================================================================ Project Legend V0.58.9 - v0589-details.css (Strang "details") DIE DREI DETAILSEITEN PASSEN INS FENSTER Befunde SCROLL-Karrierebericht, SCROLL-Scoutbericht, SCROLL-Finanzen (Pruefbericht zu V0.58.3, wf/karriere.txt). Entscheidung der Hauptsitzung (21.09.2026): career-report, scout-report und career-finances kommen bei 1536x770, 1366x768 und 1280x720 ohne Seitenueberhang aus. Das loest fuer diese drei Routen die aeltere Zeile "Detailrouten duerfen scrollen" (v0576-passung.css:57-59) ab. Echte Tabellen und Listen bekommen einen eigenen, begrenzten Rollbereich mit klebendem Kopf. Nachtrag (notizen/ENTSCHEIDUNG-HAUPTSITZUNG.md): Zwischenhoehen bis 960 px (maximiertes Fenster auf 1440x900/1600x900) muessen wie der Laptop passen; die Hoehenmarke max-height:960px ist dafuer freigegeben. Kurven duerfen die Daten nicht verfaelschen, die Saisonchronik rollt nie waagerecht, kein Wort bricht mitten im Wort. GEMESSEN VORHER (Wirt g, Leipzig Saxons, Saison 2026, Spieltag 9/34, 27.10.2026; messungen/kp-vorher-de.txt), Seitenueberhang in px: 1536x770 1366x768 1280x720 1920x1080 1024x768 career-report 352 333 371 248 439 scout-report 153 131 161 0 228 career-finances 385 361 396 164 347 Zwischenhoehen (Wirt e, messungen/n2/n2-alt-de.txt, Basis): 1440x820 1600x820 1440x900 1600x900 1536x864 career-report 426 463 346 383 403 scout-report 131 159 51 79 105 career-finances 413 455 333 375 392 HAUSREGELN, die hier gelten: - Keine Wichtig-Markierung; dieses Blatt haengt nach v0576-passung.css und vor ui-v0420/system.css. - Keine neue Bruchstelle: nur 981 px (Rail-Bruch) und die Hoehen 800/960 px. Wo eine Breite entscheiden muss, entscheidet der Inhalt (columns mit Mindestbreite, Raster mit minmax/min-content) - nicht eine neue Zahl. - Erst Abstaende, dann Umordnen, dann Aufklapper; keine Schriftgroesse. - Kein neues Abschneiden: jeder begrenzte Bereich rollt (overflow:auto). Passt etwas wider Erwarten doch nicht, waechst die Seite und rollt - sie schneidet nicht ab. - Alle Regeln sind ueber #pl420Content[data-pl42-ansicht=""] begrenzt (v0420-shell.js:673). living-world, match-preview, competition-stats und national-team teilen Klassen mit diesen Seiten (.pl42-report-grid, .pl42-screen--detail) und bleiben unberuehrt. - Handy (unter 981 px): hier greifen nur das Verbergen der Reiterleiste (alle Raster bleiben untereinander, die Seite rollt senkrecht) und die Saeulen mit gemeinsamer Grundlinie (Abschnitt 4). ========================================================================= */ /* ============================================================================ 1 - KARRIEREBERICHT: REITER UEBER DEN DREI RASTERN ---------------------------------------------------------------------------- Kopf und Uebersicht (8 Kennzahlen) bleiben stehen. Darunter steht EIN Raster zur Zeit: Chronik & Stationen | Entwicklung | Titel, Entscheidungen & Finanzen. Die Leiste setzt v0589-details.js ein (Bauteil .pl42-segment wie bei den Karriere-Reitern). Warum Reiter: nutzbar sind bei 1280x720 604 px, Kopf + Uebersicht + Leiste brauchen 275 - fuer die drei Raster blieben 329 px, sie brauchen 276 + 214 + 266 (gemessen). Umordnen allein reicht nicht: die Chronik braucht rund 570-650 px Breite (Tabelle), die Kurven ebenso (44-px-Saeulen) - eine dritte oder vierte Spalte zwingt beide in waagerechte Roller (Gegenpruefung SCROLL-Karrierebericht (2)). Die Reiter gelten bei jeder Hoehe (Entscheidung der Hauptsitzung Nr. 1). ========================================================================= */ /* Ohne Desktop-Rahmen ist die Leiste nutzlos: alle Raster stehen untereinander. */ #pl420Content[data-pl42-ansicht="career-report"] .pl589-bericht-reiter{display:none} @media (min-width:981px){ #pl420Content[data-pl42-ansicht="career-report"]{display:flex;flex-direction:column} /* width:100% - in einer Flexsaeule hebt margin:0 auto (shell.css:116) das Strecken auf (dieselbe Falle wie v0576-passung.css Abschnitt 2). flex-basis 0 statt auto: GEMESSEN mit auto (lange Karriere, 1280x720) blieb die Seite 619 px hoch in 610 px Innenhoehe - der Rollbehaelter #pl420Content liess sein Flexkind nicht unter die Inhaltshoehe schrumpfen (9 px Ueberhang). Mit 0 waechst sie auf genau 610. Was dann noch nicht passt, laeuft sichtbar ueber und rollt die Seite. */ #pl420Content[data-pl42-ansicht="career-report"]>.pl42-report{flex:1 1 0px;min-height:0;width:100%} #pl420Content[data-pl42-ansicht="career-report"]>.pl42-report>*{flex:0 0 auto} #pl420Content[data-pl42-ansicht="career-report"]>.pl42-report>.pl589-bericht-reiter{display:flex} /* Verborgen wird nur, was einen Reiter hat - fehlt das Modul, bleibt die Seite wie in V0.58.8. */ #pl420Content[data-pl42-ansicht="career-report"]>.pl42-report>.pl42-report-grid[data-pl589-feld]{display:none} #pl420Content[data-pl42-ansicht="career-report"]>.pl42-report>.pl42-report-grid[data-pl589-aktiv]{ display:grid; flex:0 1 auto; min-height:0; /* Eine Rasterzeile nimmt mindestens, was ihre festen Panels brauchen (auto); Panels mit Liste tragen min-height:0 und geben keine Mindesthoehe vor - ihre Liste rollt (v0576-passung.css Abschnitt 9 (a)). */ grid-auto-rows:minmax(auto,1fr); } /* Chronik und Stationen. Die Chronik rollt NIE waagerecht (Entscheidung der Hauptsitzung Nr. 3): ihre Spalte ist nie schmaler als der kleinste Tabelleninhalt (min-content; mehrwortige Koepfe und Vereinsnamen brechen dafuer an Leerzeichen, siehe unten) und bekommt sonst den groesseren Anteil. GEMESSEN vorher (messungen/n2/n2-alt-breiten.txt, 1.3fr): 1366x768 Rollbreite 578 px, Tabelle en 650 / es und it 617 / id 597 px - "Ø RATING" und "OVR" lagen nur waagerecht erreichbar; 1024x768 de 463/569. Die Stationen sind ebenso nie schmaler als ihr laengstes Wort (Zeilenregeln unten; vorher brach "Moenchengladbac/h" bei 1024x768, n3-v2-lang-bilder.txt). */ #pl420Content[data-pl42-ansicht="career-report"]>.pl42-report>.pl42-report-grid[data-pl589-feld="chronik"]{ grid-template-columns:minmax(min-content,1.45fr) minmax(min-content,1fr); } /* Titel | Entscheidungen | Finanzen immer in einer Reihe: bei 1024 px brach auto-fit (detail.css:43) die Finanzkarte in eine zweite Reihe, deren feste Hoehe den Listen darueber den Platz nahm (gemessen 1024x768: 32 px Ueberhang, Karte ueber ihren Rand gelaufen). Jede Spalte ist mindestens so breit wie ihr laengstes Wort samt Kachel und Datumschip (min-content, dazu die Zeilenregeln unten); die Entscheidungen - der laengste Text - bekommen den groesseren Anteil. Mit gleichen Dritteln brach bei 1024x768 "Vertragsverlaengerun/g" mitten im Wort (Gegenpruefung, pg-lang-nachher.txt; Entscheidung der Hauptsitzung Nr. 5); gemessen in Runde 3: Zeilen 4, 5 und 8 von 8, Text 118-121 px breit, das Wort braucht rund 123 px (messungen/n3/n3-v2-lang-bilder.txt, u-entscheid.js). */ #pl420Content[data-pl42-ansicht="career-report"]>.pl42-report>.pl42-report-grid[data-pl589-feld="erfolge"]{ grid-template-columns:minmax(min-content,1fr) minmax(min-content,1.4fr) minmax(min-content,1fr); } /* Listenzeilen (Titel, Entscheidungen, Vereinsstationen): Der Textblock hatte min-width:0 (screens.css:534, detail.css:51) und gab jeden Pixel an den Datumschip ab, dessen Text dafuer nie umbrach - das laengste Wort wurde zerteilt ("Moenchengladbac/h" in den Stationen bei 1024x768, "Vertrags- verlaengerun/g"). Jetzt: der Textblock ist nie schmaler als sein laengstes Wort, der Chip bleibt einzeilig (er hat eine feste Hoehe von 26 px, shell.css:219), und reicht beides nebeneinander nicht, rutscht der Chip in eine zweite Zeile, statt ein Wort zu zerteilen. So bleibt auch die Mindestbreite der Spalte klein genug, dass Chronik und Stationen bei 1024 px nebeneinander passen. */ #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld] :is(.pl42-timeline-row,.pl42-station){flex-wrap:wrap} #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld] :is(.pl42-timeline-row,.pl42-station)>div{flex:1 1 0px;min-width:min-content} #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld] :is(.pl42-timeline-row,.pl42-station)>.pl42-chip{white-space:nowrap} /* Die Panels werden Saeulen: Kopf fest, Liste begrenzt. Nur Panels mit Liste duerfen unter ihren Inhalt schrumpfen. */ #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel{ display:flex; flex-direction:column; } #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel:has(>.pl42-hscroll,>.pl42-stations,>.pl589-liste){min-height:0} #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>*{flex:0 0 auto} /* Saisonchronik: eigener Rollbereich, Kopf klebt. .pl42-hscroll traegt overflow-y:hidden (shell.css:263) - ein blosses Begrenzen wuerde still abschneiden, darum ausdruecklich auto. Waagerecht rollt er nicht mehr (Tabelle ohne Mindestbreite, Spalte nach min-content). */ #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>.pl42-hscroll{ flex:0 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; } #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>.pl42-hscroll>.pl42-table{min-width:0} /* Mehrwortige Kopfzellen ("Ø RATING", "Ø NOTE") und Vereinsnamen duerfen an Leerzeichen umbrechen (screens.css:73-81 setzen nowrap); ein einzelnes Wort bleibt ganz (#pl420Root * setzt nur break-word, shell.css:36). Der Zellenrand ist nicht verhandelbar: phase2-premium.css:137 setzt ihn mit Wichtig-Markierung. */ #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>.pl42-hscroll>.pl42-table th, #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>.pl42-hscroll>.pl42-table .pl42-team{white-space:normal} #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>.pl42-hscroll>.pl42-table .pl42-team>span{min-width:0} /* Die Vereinszelle ist td.pl42-team mit display:flex (screens.css:81) und damit keine Tabellenzelle mehr: ihre Hoehe von 42 px (phase2-premium.css:137, in der kompakten Dichte 36 px MIT Wichtig-Markierung, :219) ist fest statt Mindestmass. Ein dreizeiliger Vereinsname lief darum ueber die Zeilenlinie in die Nachbarzeile (Runde 3, Bild shots/n3/langv2b-de-career-report_chronik- 1024x768.png: "Real Club Deportivo de La Coruna"). min-height geht vor height - die Zelle waechst mit ihrem Inhalt, ohne Wichtig-Markierung. */ #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>.pl42-hscroll>.pl42-table td.pl42-team{min-height:max-content} /* system.css setzt #pl420Root th auf static (Abschnitt 1) - mit Grund: ohne senkrechten Bereich klebte nichts. Hier gibt es den Bereich. */ #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>.pl42-hscroll>.pl42-table thead th{ position:sticky; top:0; z-index:2; } /* Vereinsstationen & Leihen: die Liste rollt, die Nationalstufen bleiben. */ #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>.pl42-stations{ flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } /* Titel & Auszeichnungen, Wichtige Karriereentscheidungen: v0589-details.js fasst die Zeilen in .pl42-liste-bereich. */ #pl420Content[data-pl42-ansicht="career-report"] .pl42-report-grid[data-pl589-feld]>.pl42-panel>.pl589-liste{ flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } } /* ============================================================================ 2 - SCOUTBERICHT: ABSTAENDE DES PAPIERS, DANN VIER SPALTEN ---------------------------------------------------------------------------- Gemessen 1280x720: Tablett 703 px, verfuegbar 534. Der Kopf der Zeitung stand in 64ch Breite (detail.css:98) - die Ueberschrift brach in zwei Zeilen, rechts daneben lag rund 60 % der Papierbreite leer. Zuerst die Abstaende (Papier-Innenrand, Kopf- und Abschnittsraender), dann die Ueberschrift ueber die volle Breite, dann vier statt drei Spalten. Abstaende und vier Spalten nur auf Schirmen bis 960 px Hoehe (Hausmuster (min-width:981px) and (max-height:...), v0576-passung.css:38; die Marke 960 hat die Hauptsitzung fuer Zwischenhoehen freigegeben). Vorher galt hier 800 - dann rollte die Seite bei 1440x820 noch 131 px, bei 1600x820 159 px (messungen/n2/n2-alt-de.txt). Die volle Breite der Ueberschrift gilt bei jeder Hoehe (zweiter Block unten, Runde 4). Zweiter Durchgang nach dem Sprachlauf (messungen/kp-sprachen-an-1.txt, erster Stand): de passte, pt-BR lief 15/18 px und id 1/31 px ueber (1366/1280). Darum Raender und Abschnittsabstaende noch einmal enger und ein Fuss, der in sich umbricht. ========================================================================= */ @media (min-width:981px) and (max-height:960px){ #pl420Content[data-pl42-ansicht="scout-report"] .pl42-tablet-frame{padding:clamp(6px,.55vw,9px)} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-tablet-bar{padding-bottom:5px} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper{padding:clamp(10px,.9vw,16px) clamp(16px,1.6vw,26px)} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-head{padding-bottom:6px;margin-bottom:8px} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-lead{margin-bottom:8px} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-kicker{margin-bottom:4px} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-lead h3{margin-bottom:4px} /* Bis zu vier Spalten, keine schmaler als 220 px: die Breite entscheidet, nicht eine neue Bruchstelle. Gerechnet: 1280/1366/1536 -> 4 Spalten (252/239/270 px), 1024x768 -> 3 Spalten (277 px) statt 2 (responsive.css:112); die Profilzeilen (dl) brauchen dort nicht mehr als heute bei 1366 (321 px) zur Verfuegung stand. */ #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-columns{columns:4 220px} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-columns section{margin-bottom:8px} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-columns h4{margin-bottom:4px} /* Der letzte Absatz eines Abschnitts trug seinen Absatzrand (8 px, detail.css:113) zusaetzlich zum Abschnittsrand - doppelt. pt-BR lief nach dem zweiten Durchgang bei 1280x720 noch 2 px ueber (messungen/kp-sprachen-an-2.txt). */ #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-columns section>:last-child{margin-bottom:0} /* Listenzeilen (Staerken, Entwicklungsfelder) 4 -> 3 px Innenrand (detail.css:119): die Spalte mit "Niveau" und "Staerken" ist in pt-BR die hoechste (gemessen 1280x720: 138 + 8 + 137 = 283 px). */ #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-list li{padding:3px 0} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-foot{margin-top:4px;padding-top:6px} /* Der Hinweis im Fuss (zweiter Teil) brach in id als GANZES in eine zweite Zeile (gemessen 1280x720: Fuss 61 statt 26 px). Er darf jetzt in seinem eigenen Kasten umbrechen und steht rechtsbuendig neben dem Autor. */ #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-foot>span:last-child{flex:1 1 320px;min-width:0;text-align:right} } @media (min-width:981px){ /* Die Ueberschrift bekommt die volle Papierbreite, der Vorspann behaelt ein Lesemass (90ch ist eine Annahme, keine Hausmarke - Gegenpruefung (4)). Bei JEDER Hoehe, nicht nur bis 960 px: 64ch (detail.css:98) brach die Ueberschrift auch auf breiten Schirmen in zwei Zeilen, rechts daneben lag die halbe Papierbreite leer - und genau diese Zeile liess die Seite im maximierten Fenster rollen. GEMESSEN vorher (Runde 4, messungen/n4/n4-basis-de.txt): 1680x970 (Fenster auf 1680x1050) 19 px, 1920x1000 (Fenster auf 1920x1080) 14 px. Sonst aendert sich oberhalb von 960 px am Scoutbericht nichts (drei Spalten, alte Abstaende). */ #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-lead{max-width:none} #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-standfirst{max-width:90ch} /* Beobachtende Vereine sind eine Liste (r.watchers aus state.transferOffers, unbegrenzt, v0420-foundation.js:1305) und rollen in sich (Entscheidung der Hauptsitzung Nr. 4). Der Bereich ist drei Zeilen hoch und rollt erst, wenn mehr da ist; ein kurzer Satz ("keine konkreten Interessenten") sieht aus wie vorher. GEMESSEN vorher (Gegenpruefung pg-scout-last2.txt): fuenf lange Vereinsnamen liessen die Seite bei 1280x720 in de/pt-BR 10 px, in id 26 px rollen. Letzter Abschnitt = Beobachtende Vereine (v0420-detail-screens.js:570). */ #pl420Content[data-pl42-ansicht="scout-report"] .pl42-epaper-columns>section:last-child>p{ max-height:calc(3 * 1.6em); overflow-y:auto; overscroll-behavior:contain; } } /* ============================================================================ 3 - KARRIEREFINANZEN: DREI SPALTEN STATT ZWEI MAL ZWEI ---------------------------------------------------------------------------- Gemessen 1280x720: Kopf 59, Kopfkarte 133, Raster 420 + 308, Hinweis 42 - 1026 px fuer 630. Umgeordnet, ohne Aufklapper: Kopf (volle Breite) Kopfkarte (6 Kennzahlen, 3x2) | Hinweis "hergeleitet" Einkommen nach Saison | Boni & | Vertrag & Marktwertentwicklung | Zusatzeinn. | erwartetes Einkommen Boni und Vertrag reichen ueber beide Zeilen; ihre Liste bzw. Tabelle ist der begrenzte Bereich. Die Kurven stehen uebereinander in Spalte 1. Nicht vier gleiche Spalten: Gegenpruefung SCROLL-Finanzen (1),(3),(6). Die .pl42-fin-grid verlieren ihre Box (display:contents); das Raster der Seite uebernimmt ihre Panels. Der Hinweis f.derived (v0420-detail-screens.js:687) steht neben der Kopfkarte, wenn es ihn gibt. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-ansicht="career-finances"]{display:flex;flex-direction:column} /* flex-basis 0 aus demselben Grund wie in Abschnitt 1 (gemessen: mit auto schrumpft das Kind des Rollbehaelters nicht auf dessen Innenhoehe). */ #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen{ flex:1 1 0px; min-height:0; width:100%; display:grid; /* Hohe Schirme (ueber 960 px): die Kurvenspalte ist die breiteste. Mit 1.1fr rollten bei 1920x1080 in einer langen Karriere beide Kurven waagerecht (sichtbar 488 von 668 bzw. 616 px), in V0.58.8 rollte die Einkommenskurve nur um 7 px (751/758; Gegenpruefung pg-lang-nachher/ -vorher.txt). Mit 1.6fr fehlten noch 4 px (664/668, Runde 3, messungen/n3/n3-v2-lang.txt). Die Boni-Spalte ist nie schmaler als ihre Kennzahlen (min-content, siehe Metrikreihe unten): mit .8fr allein brach bei 1680x970 "GESCHAETZTE/S" (n3-v2-lang-bilder.txt). Die Vertragsspalte ist nie schmaler als ihre Tabelle (min-content): mit 1fr allein rollte sie bei 1680 px Breite waagerecht (355/388 px, messungen/n2/n2-v1-de.txt), in V0.58.8 nicht. Gewichte 1.7/.9/1.15 und 6 px Saeulenabstand (Abschnitt 4) aus vier gemessenen Varianten (Runde 3, plaene/n3/versuch-a..d.css): bei 1920x1080 stehen beide Kurven der langen Karriere ganz (651/651), und im Spielstand des Wirts bleiben Vereinsname und alle Kennzahlwerte einzeilig (mit .8fr brach "9,68 Tsd. / EUR" in zwei Zeilen, mit 1fr der Vereinsname). Kurze Schirme: siehe unten. */ grid-template-columns:minmax(0,1.7fr) minmax(min-content,.9fr) minmax(min-content,1.15fr); /* Die Kurvenzeilen wachsen nie unter ihren Inhalt (auto) - Boni und Vertrag tragen min-height:0 und geben darum keine Mindesthoehe vor. */ grid-template-rows:auto auto minmax(auto,1fr) minmax(auto,1fr); } #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-screen-head{grid-column:1/-1;grid-row:1} #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-panel{grid-column:1/-1;grid-row:2} #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen:has(>.pl42-note)>.pl42-panel{grid-column:1/3} /* Neben dem Hinweis sechs Kennzahlen als 3x2 statt 2x3. Die Mindestbreite waechst mit der Beschriftung (20 x --pl42-label; bei 10 px = 200 px statt 210, detail.css:139). Gerechnet bei 1366x768: Kartenbreite 654 px, drei Spalten je 207 px, Text 155 px - das laengste ungeteilte Wort KARRIEREEINKOMMEN braucht 145 px (messungen/breiten-vorher.txt). Mit festen 200 px standen bei 1920x1080 (Beschriftung 11,9 px) vier Spalten und das Wort brach als "KARRIEREEINKOMME / N" (Bild shots/final-de-career-finances-1920x1080.png). */ #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-panel>.pl42-fin-top{ grid-template-columns:repeat(auto-fit,minmax(min(calc(var(--pl42-label) * 20),100%),1fr)); } #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-note{grid-column:3;grid-row:2;margin:0;align-items:flex-start} #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-fin-grid{display:contents} /* Erstes Raster: Einkommen (Spalte 1 oben), Boni (Spalte 2, beide Zeilen). */ #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-panel+.pl42-fin-grid>.pl42-panel:first-child{grid-column:1;grid-row:3} #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-panel+.pl42-fin-grid>.pl42-panel:last-child{grid-column:2;grid-row:3/5} /* Zweites Raster: Marktwert (Spalte 1 unten), Vertrag (Spalte 3, beide Zeilen). */ #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-fin-grid+.pl42-fin-grid>.pl42-panel:first-child{grid-column:1;grid-row:4} #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-fin-grid+.pl42-fin-grid>.pl42-panel:last-child{grid-column:3;grid-row:3/5} /* Boni und Vertrag: Saeule mit begrenztem Bereich. */ #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child{ display:flex; flex-direction:column; min-height:0; } #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>*{flex:0 0 auto} #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>.pl42-fin-bonus{ flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>.pl42-hscroll{ flex:0 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; } /* Boni gesamt | Geschaetztes Netto bleiben nebeneinander: auto-fit minmax(140px) (shell.css:184-187) klappte sie in der schmalen Spalte untereinander und nahm der Bonusliste 60 px. Beide Beschriftungen sind mehrwortig und brechen an Leerzeichen. */ #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>.pl42-fin-bonus~.pl42-metric-row{ grid-template-columns:repeat(2,minmax(min-content,1fr)); } /* Einkommen in der ersten Saison (Hinweis + "Projektion Saison | Bisher verdient", v0420-detail-screens.js:621-626): dieselbe feste Zweierreihe. auto-fit minmax(140px) klappte die beiden bei 1024x768 in der 256 px schmalen Spalte untereinander, die Spalte lief dadurch 8 px ueber (Runde 3, messungen/n3/n3-v3-de.txt, Bild shots/n3/v3-de-career-finances- 1024x768.png). Beide Beschriftungen sind mehrwortig. */ #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen>.pl42-panel+.pl42-fin-grid>.pl42-panel:first-child>.pl42-metric-row{ grid-template-columns:repeat(2,minmax(min-content,1fr)); } /* Vertragskennzahlen: Mindestbreite nach der Beschriftung statt fester 140 px (shell.css:186). AUSSTIEGSKLAUSEL ist ein Wort (127 px bei 10 px Schrift, messungen/breiten-vorher.txt); bei 1920x1080 (11,9 px) brach es als "AUSSTIEGSKLAUSE/L" - schon in V0.58.8 (Bild shots/vorher-de-career-finances-1920x1080.png), gemessen mit plan-wortbruch.ps1 (messungen/wortbruch.txt). */ #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid+.pl42-fin-grid>.pl42-panel:last-child>.pl42-metric-row{ grid-template-columns:repeat(auto-fit,minmax(max(140px,calc(var(--pl42-label) * 13 + 16px)),1fr)); } /* Vier Spalten (Verein, Zeitraum, Wochengehalt, Einsaetze) brauchen keine 640 px (screens.css:72); in der Vertragsspalte waeren sonst rund 45 % nur waagerecht erreichbar (Gegenpruefung SCROLL-Finanzen (6)). */ #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>.pl42-hscroll>.pl42-table{min-width:0} /* Mehrwortige Kopfzellen und Vereinsnamen duerfen an Leerzeichen umbrechen (screens.css:74/81 setzen nowrap); ein einzelnes Wort bleibt ganz. Der Zellenrand ist nicht verhandelbar: phase2-premium.css:137 setzt ihn mit Wichtig-Markierung. */ #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>.pl42-hscroll>.pl42-table th, #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>.pl42-hscroll>.pl42-table .pl42-team{white-space:normal} #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>.pl42-hscroll>.pl42-table .pl42-team>span{min-width:0} /* Vereinszelle waechst mit dem Namen (Begruendung in Abschnitt 1; Runde 3, Bild shots/n3/langv2b-de-career-finances-1280x720.png). */ #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>.pl42-hscroll>.pl42-table td.pl42-team{min-height:max-content} #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:last-child>.pl42-hscroll>.pl42-table thead th{ position:sticky; top:0; z-index:2; } } @media (min-width:981px) and (max-height:960px){ /* Kurze Schirme und Zwischenhoehen bis 960 px (maximiertes Fenster auf 1440x900/1600x900): Vertragsspalte breiter, weil die Tabelle mit dem Spielstand des Wirts 325-441 px braucht (gemessen en..id, messungen/tabelle-vertrag.txt); die Kurven rollen hier, wenn sie mehr Saeulen haben, als Platz ist - und stehen dann am neuesten Wert (v0589-details.js). */ #pl420Content[data-pl42-ansicht="career-finances"]>.pl42-screen{ grid-template-columns:minmax(0,1.1fr) minmax(min-content,.9fr) minmax(0,1.25fr); } /* Engere Bonuszeilen (9 -> 6 px Innenrand, detail.css:142; mit 7 px fehlten bei 1280x720 3 px, gemessen). */ #pl420Content[data-pl42-ansicht="career-finances"] .pl42-bonus-row{padding:6px 0} /* Die beiden Kurven fuellen die Hoehe ihrer Rasterzeile, statt eine feste Hoehe zu tragen. VORHER stand hier height:110px - zusammen mit den zweizeiligen Betraegen wurden die Balken dabei bis auf 39 px gestaucht und 7 von 13 Einkommensbalken gleich hoch, obwohl ihre Werte 46-100 % waren (Gegenpruefung pg-saeulen.txt). Jetzt: die Kurve nimmt, was die Zeile hergibt (Rasterzeilen 1fr), die Balkenflaeche hat eine eigene Zeile mit Mindesthoehe (Abschnitt 4), die Betraege stehen darunter. */ #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:first-child{display:flex;flex-direction:column} #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:first-child>*{flex:0 0 auto} #pl420Content[data-pl42-ansicht="career-finances"] .pl42-fin-grid>.pl42-panel:first-child>.pl42-spark{ flex:1 1 0px; height:auto; min-height:min-content; } } /* ============================================================================ 4 - SAEULEN: EIGENE BALKENFLAECHE, GEMEINSAME GRUNDLINIE ---------------------------------------------------------------------------- Eine Saeule ist eine Flexsaeule (detail.css:56): Balken, Betrag und Datum teilen sich ihre Hoehe, und nur der Balken kann schrumpfen. Der Balken ist height:X% der GANZEN Saeule (v0420-detail-screens.js:413/429/614/655) - alles ueber (100 % - Beschriftung) wird gleich hoch gekappt. Das stand schon in V0.58.8 so da (Gegenpruefung pg-saeulen.txt, vorher-lang: Gesamt- staerke 8 von 13 Balken um mehr als 15 Prozentpunkte daneben), und weil ein zweizeiliger Betrag die eine Saeule hoeher macht als die andere, lagen die Balken nicht einmal auf einer Grundlinie. Jetzt (Entscheidung der Hauptsitzung Nr. 2): die Kurve ist ein Raster mit drei Zeilen - Balkenflaeche, Betraege, Daten -, jede Saeule uebernimmt diese Zeilen (subgrid). Die Prozenthoehe bezieht sich damit auf die Balkenflaeche allein, alle Balken stehen auf derselben Grundlinie, und die Betraege liegen AUSSERHALB der Balkenhoehe. Die Balkenflaeche ist mindestens 56 px hoch - ein Prozentpunkt Unterschied ist damit mindestens ein halbes Pixel, fuenf Punkte fast drei. Nur in diesen beiden Routen; ohne subgrid bleibt V0.58.8. Betraege brechen an ihren Leerzeichen um, statt in die Nachbarsaeule zu laufen ("1,05 Mio. €1,45 Mio. €" schon in V0.58.8, Bild shots/lang-de- career-report_entwicklung-1366x768.png); ein einzelnes Wort bleibt ganz. ========================================================================= */ #pl420Content[data-pl42-ansicht="career-report"] .pl42-spark-col b, #pl420Content[data-pl42-ansicht="career-finances"] .pl42-spark-col b{ white-space:normal; text-align:center; line-height:1.15; } @supports (grid-template-rows:subgrid){ #pl420Content[data-pl42-ansicht="career-report"] .pl42-spark, #pl420Content[data-pl42-ansicht="career-finances"] .pl42-spark{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(44px,1fr); grid-template-rows:minmax(56px,1fr) auto auto; gap:5px 8px; } #pl420Content[data-pl42-ansicht="career-report"] .pl42-spark>.pl42-spark-col, #pl420Content[data-pl42-ansicht="career-finances"] .pl42-spark>.pl42-spark-col{ display:grid; grid-row:1/-1; grid-template-rows:subgrid; justify-items:center; height:auto; min-width:0; } #pl420Content[data-pl42-ansicht="career-report"] .pl42-spark-col>i, #pl420Content[data-pl42-ansicht="career-finances"] .pl42-spark-col>i{grid-row:1;align-self:end} #pl420Content[data-pl42-ansicht="career-report"] .pl42-spark-col>b, #pl420Content[data-pl42-ansicht="career-finances"] .pl42-spark-col>b{grid-row:2;align-self:start} #pl420Content[data-pl42-ansicht="career-report"] .pl42-spark-col>small, #pl420Content[data-pl42-ansicht="career-finances"] .pl42-spark-col>small{grid-row:3;align-self:start} /* Desktop: 6 statt 8 px zwischen den Saeulen (Abstand, keine Saeulenbreite - die 44 px bleiben, Gegenpruefung). 13 Saisons brauchen damit 644 statt 668 px; bei 1920x1080 steht die Einkommenskurve der langen Karriere ganz (Runde 3, versuch-d). Handy unveraendert 8 px. */ @media (min-width:981px){ #pl420Content[data-pl42-ansicht="career-report"] .pl42-spark, #pl420Content[data-pl42-ansicht="career-finances"] .pl42-spark{column-gap:6px} } }