/* ============================================================================ Project Legend V0.58.9 - v0589-details2.css (Strang "details2") LIVING WORLD, NAECHSTES SPIEL UND SPIELERBLATT PASSEN INS FENSTER Entscheidung des Auftraggebers "Detailseiten auch ohne Scrollen": bei 1536x770, 1366x768, 1280x720 und bei 1440x900, 1600x900, 1536x864 kein Seitenueberhang. Echte Listen bekommen einen eigenen, begrenzten Rollbereich. Das loest fuer diese Routen die Zeile "Detailrouten duerfen scrollen" (v0576-passung.css:57-59) ab - wie v0589-details.css fuer Karrierebericht, Scoutbericht und Finanzen. GEMESSEN VORHER (Wirt j, Leipzig Saxons, Saison 2026, Spieltag 9/34, 27.10.2026; messungen/kp-vorher-de.txt), Seitenueberhang in px: 1536x770 1366x768 1280x720 1440x900 1600x900 1536x864 1920x1080 1024x768 living-world 875 844 877 824 874 888 547 1128 match-preview 170 135 170 130 177 199 0 290 spielerblatt 0 0 0 0 0 0 0 0 / 28 (Jugend) Gegenmessung Wirt c (leerer Strang, messungen/kp-vorher-c-de.txt): living-world 875/844/877/824/874/888/547/1128, match-preview 170/135/170/130/177/199/0/290, dazu 1745x982 687/122 und 2457x971 667/447 (virtuelle Flaechen der Skalierung). NACHHER (Wirt c, gleicher Spielstand; messungen/kp-d3-de.txt, elf Fenster, neun Ansichten je Fenster; kp-d2-sprachen.txt, acht Sprachen x vier Fenster): 0 px Seitenueberhang in allen 323 Messungen. HAUSREGELN, die hier gelten: - Keine Wichtig-Markierung; dieses Blatt haengt nach v0576-passung.css und vor ui-v0420/system.css. - Keine neue Breitenmarke: nur 981 px (Rail-Bruch) und 1440 px (responsive.css:57), beide in stil-wache.pl benannt. Keine Hoehenmarke: die Regeln gelten bei jeder Hoehe (ENTSCHEIDUNG-HAUPTSITZUNG.md 1-2). - Erst Abstaende, dann Umordnen, dann Aufklapper; keine Schriftgroesse. - Kein neues Abschneiden: jeder begrenzte Bereich rollt (overflow:auto), kein max-height-Deckel. 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). Die Klassen .pl42-report-grid, .pl42-sim-grid und .pl42-nextmatch teilen andere Seiten (Uebersicht, Kalender, Liga) - sie bleiben unberuehrt. - Handy (unter 981 px): nichts aus diesem Blatt greift ausser dem Verbergen der Reiterleiste. ========================================================================= */ /* ============================================================================ 1 - LIVING WORLD: DREI REITER UEBER NEUN KACHELN ---------------------------------------------------------------------------- v0589-details2.js markiert die neun Kacheln (data-pl589-lw) und setzt den aktiven Reiter auf die Seite (data-pl589-lw-aktiv). Die drei Behaelter (.pl42-lw-top und zweimal .pl42-lw-grid) verlieren ihre Box (display:contents); das Raster der Seite ordnet die Kacheln des aktiven Reiters an. Ohne Modul (kein data-pl589-lw-aktiv) bleibt die Seite wie in V0.58.8. ========================================================================= */ #pl420Content[data-pl42-ansicht="living-world"] .pl589-lw-reiter{display:none} @media (min-width:981px){ #pl420Content[data-pl42-ansicht="living-world"]{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: das Kind des Rollbehaelters schrumpft sonst nicht auf dessen Innenhoehe (gemessen im Strang details, v0589-details.css Abschnitt 1). */ #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv]{ flex:1 1 0px; min-height:0; width:100%; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-content:start; } #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv]>.pl42-screen-head, #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv]>.pl589-lw-reiter{grid-column:1/-1} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv]>.pl589-lw-reiter{display:flex} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv]>.pl42-lw-top, #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv]>.pl42-lw-grid{display:contents} /* Verborgen wird nur, was einen Reiter hat. */ #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv="verein"] [data-pl589-lw-feld]:not([data-pl589-lw-feld="verein"]), #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv="rolle"] [data-pl589-lw-feld]:not([data-pl589-lw-feld="rolle"]), #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv="aktuell"] [data-pl589-lw-feld]:not([data-pl589-lw-feld="aktuell"]){display:none} /* Verein & Trainer: oben Stimmung | Trainer (wie .pl42-lw-top, 1,15 : 1), darunter Vereinsfuehrung & Finanzen ueber die volle Breite - ihre vier Kennzahlen stehen dann in EINER Reihe. Die Reihen wachsen nicht mit: auf hohen Schirmen bleibt Flaeche unter den Kacheln frei, statt jede Kachel innen leer zu dehnen (Bild p1-de-living-world_verein-1920x1080.png). */ #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv="verein"]{grid-template-rows:auto auto auto auto} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="stimmung"]{grid-column:1/8;grid-row:3} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="trainer"]{grid-column:8/13;grid-row:3} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="finanzen"]{grid-column:1/-1;grid-row:4} /* Deine Rolle: Konkurrenz | Einsatz | Auswirkung in einer Reihe, die den Rest der Hoehe nimmt. Die Konkurrenzliste rollt in sich. Die Konkurrenz bekommt die breiteste Spalte: "Aussenverteidiger" steht sonst als "Aussenverteidi/ger" in zwei Zeilen (V0.58.8, Bild vorher-de-living-world-1366x768.png). */ #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv="rolle"]{grid-template-rows:auto auto minmax(auto,1fr)} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="konkurrenz"]{grid-column:1/6;grid-row:3} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="einsatz"]{grid-column:6/9;grid-row:3} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="auswirkung"]{grid-column:9/13;grid-row:3} /* Die Position ist das einzige lange Einzelwort der Kennzahlreihe. In der halben Kachelbreite brach "Aussenverteidiger" mitten im Wort (V0.58.8 bei 1366x768 und 1920x1080; mit Reitern noch bei 1536x770 und 1920x1080, messungen/wortbruch-n2-de.txt). Sie bekommt die ganze Zeile; Rangfolge, Kaderpool und Staerke stehen darunter. */ #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="konkurrenz"]>.pl42-metric-row>.pl42-stat:first-child{grid-column:1/-1} /* Form, Medien & Ereignisse: der Formtrend als flache Reihe oben, darunter Schlagzeilen | Vereinsereignisse; beide Listen rollen in sich. */ #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv="aktuell"]{grid-template-rows:auto auto auto minmax(auto,1fr)} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="form"]{grid-column:1/-1;grid-row:3} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="medien"]{grid-column:1/7;grid-row:4} #pl420Content[data-pl42-ansicht="living-world"]>.pl42-screen[data-pl589-lw-aktiv] [data-pl589-lw="ereignisse"]{grid-column:7/13;grid-row:4} /* Kacheln mit Liste werden Saeulen: Kopf und Kennzahlen fest, die Liste begrenzt. Nur sie duerfen unter ihren Inhalt schrumpfen. */ #pl420Content[data-pl42-ansicht="living-world"] [data-pl589-lw]:has(>.pl589-liste){display:flex;flex-direction:column;min-height:0} #pl420Content[data-pl42-ansicht="living-world"] [data-pl589-lw]:has(>.pl589-liste)>*{flex:0 0 auto} #pl420Content[data-pl42-ansicht="living-world"] [data-pl589-lw]>.pl589-liste{ flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } /* Die Zeilen im Bereich schrumpfen nie: die Kurzkarte (.pl534-block traegt overflow:hidden, v0534-spielerkarte.css:25) fiel in der Flexsaeule sonst auf einen Streifen zusammen (Bild shots/n2-de-karte-1280x720.png) - still abgeschnitten. Der Bereich rollt stattdessen. */ #pl420Content[data-pl42-ansicht="living-world"] [data-pl589-lw]>.pl589-liste>*{flex-shrink:0} } /* ============================================================================ 2 - NAECHSTES SPIEL: DIE SPIELTAGSKARTE IST DIE ZIERFLAECHE ---------------------------------------------------------------------------- Gemessen 1280x720 (messungen/bloecke-vorher-de.txt): Kopf 59, Simulations- auswahl 197, Spieltagskarte 200, Raster 300 - 800 px fuer 630. (a) ABSTAENDE, alle Hoehen: die Spieltagskarte traegt eine feste Mindesthoehe (system.css:593-637, 200-269 px), die nur das Stadionbild zeigt. Sie nimmt jetzt den Rest der Seite: nie weniger als ihr Inhalt (flex-shrink 0, Basis = Inhalt), sonst waechst sie in die freie Flaeche. Bei 1920x1080 heisst das: gleiche Seite, die Karte schliesst unten buendig ab statt 28 px frei zu lassen (vorher 973 von 973 px mit Luecke unten). (b) UMORDNEN, bei jeder Hoehe ab 981 px Breite: Simulationsauswahl und Spieltagskarte stehen nebeneinander, die vier Simulationsknoepfe als 2 x 2 mit dem Symbol links neben der Beschriftung. Die Spielaktionen bleiben das erste Element der Seite und oben links (S3-3, v0420-detail-screens.js:942-944) - naeher am Kopf als vorher. Nur mit Abstaenden (Karte auf Inhaltshoehe, Knoepfe flach in einer Reihe) blieben 91/61/95 px bei 1280x720/1366x768/1536x770 und 29/47 px bei 1600x900/1536x864 (gemessen, Probe auf der Basis: plaene/probe-mp-abstaende.css, messungen/probe-abstaende-mp.txt). Zuerst galt (b) nur bis 960 px Hoehe. Die Hauptsitzung verlangt "ohne Scrollen" auch auf den virtuellen Flaechen der Skalierung (1920x1080 mit z 1,1 = 1745x982, 3440x1360 mit z 1,4 = 2457x971): dort blieben mit (a) allein 52 und 88 px Ueberhang (messungen/kp-c1-de.txt; Basis 122 und 447 px, kp-vorher-c-de.txt). Eine Hoehenmarke ueber 960 gibt es nicht - also gilt (b) bei jeder Hoehe (ENTSCHEIDUNG-HAUPTSITZUNG.md 2). (c) Das Berichtsraster behaelt drei Spalten auch bei 1024 px (auto-fit minmax(360px), detail.css:43, legte dort die dritte Kachel in eine zweite Reihe: 290 px Ueberhang bei 1024x768). ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-ansicht="match-preview"]{display:flex;flex-direction:column} #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen{flex:1 1 0px;min-height:0;width:100%} #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>*{flex:0 0 auto} /* (1,3,0) gegen system.css #pl420Root .pl42-nextmatch (1,1,0). */ #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-nextmatch{flex:1 0 auto;min-height:0} #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-report-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); /* Freie Hoehe (hohe Fenster) teilen sich Aktionsreihe und Berichtsraster zu gleichen Teilen. Mit "auto" fuer das Raster nahm die Aktionsreihe allein alles: bei 1920x1080 wurden die vier Knoepfe je 206 px hoch (Bild shots/c2-de-match-preview-1920x1080.png). Auf Laptops ist keine Hoehe frei - dort bleiben beide Reihen auf Inhaltshoehe. */ grid-template-rows:auto minmax(auto,1fr) minmax(auto,1fr); align-content:start; } #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-screen-head, #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-report-grid{grid-column:1/-1} #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-panel:not(.pl42-nextmatch){grid-column:1;grid-row:2} /* Im Raster darf die Karte (overflow:hidden, shell.css:145) nie unter ihren Inhalt gedrueckt werden - sonst schnitte sie still ab. */ #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-nextmatch{grid-column:2;grid-row:2;min-height:min-content} #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-report-grid{grid-row:3} /* Vier Knoepfe als 2 x 2, Symbol links, Beschriftung und Zusatz rechts daneben. Keine Beschriftung wird kuerzer oder kleiner. Ist die Reihe hoeher als die Knoepfe (die Spieltagskarte daneben, oder 801-960 px Hoehe), werden die Knoepfe hoeher - nicht die Kachel innen leer (Bild shots/p3-de-match-preview-1440x900.png). */ #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-panel:not(.pl42-nextmatch){display:flex;flex-direction:column} #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-panel:not(.pl42-nextmatch)>*{flex:0 0 auto} #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-panel:not(.pl42-nextmatch)>.pl42-sim-grid{flex:1 1 auto} #pl420Content[data-pl42-ansicht="match-preview"] .pl42-sim-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;margin-bottom:0} #pl420Content[data-pl42-ansicht="match-preview"] .pl42-sim-grid>.pl42-sim-tile{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; row-gap:2px; align-items:center; align-content:center; text-align:left; min-height:0; padding:10px 12px; } #pl420Content[data-pl42-ansicht="match-preview"] .pl42-sim-grid>.pl42-sim-tile>.pl42-ico-tile{grid-column:1;grid-row:1/3} #pl420Content[data-pl42-ansicht="match-preview"] .pl42-sim-grid>.pl42-sim-tile>b{grid-column:2;grid-row:1;align-self:end} #pl420Content[data-pl42-ansicht="match-preview"] .pl42-sim-grid>.pl42-sim-tile>small{grid-column:2;grid-row:2;align-self:start} } /* Bei 1024 px Breite ist jede der drei Kacheln des Berichtsrasters rund 290 px breit. Die Kennzahlreihen des Gegners (minmax(140px), shell.css:186) stehen dort einspaltig - fuenf Zeilen, 388 px hoch, 7 px Seitenueberhang (messungen/kp-n1-de.txt). Mit 120 px Mindestbreite passen zwei nebeneinander; das laengste Etikett (TABELLENPLATZ) ist schmaler (Wortbruchprobe, messungen/wortbruch-*.txt). Obergrenze 1440 (responsive.css:57, eine der Marken in stil-wache.pl): 1024 ist dort keine erlaubte Breitenmarke - der erste Wurf mit max-width:1024px ergab "NEU 2 (hart)" (messungen/wachen-nachher.txt). Zwischen 1025 und 1440 px aendert 120 statt 140 nichts: fuer drei Spalten fehlt die Breite (3 x 120 + 2 x 16 = 392 px gegen 338-358 px Innenbreite, gerechnet aus den Kachelbreiten in bloecke-n2-de.txt), zwei passten schon. */ @media (min-width:981px) and (max-width:1440px){ #pl420Content[data-pl42-ansicht="match-preview"]>.pl42-screen>.pl42-report-grid .pl42-metric-row{ grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr)); } } /* ============================================================================ 3 - SPIELERBLATT EINES JUGENDSPIELERS: DIE JUGENDBILANZ PASST IN IHRE KACHEL ---------------------------------------------------------------------------- Gemessen (Wirt c, Leipzig Saxons, Saison 2026, Spieltag 9, 27.10.2026; messungen/blatt-probe-basis.txt, U21-Torwart Daan Lukas Quinn, neun Sprachen, acht Fenster): Die Tabelle der Jugendbilanz (v0527) ragte ueber den Rand ihrer Kachel - bei 1024-1440 px Breite in allen neun Sprachen (de bei 1280x720 17 px, en 54 px, es 55 px; zh-Hans nur bei 1366x768, 7 px), bei 1536x770 in en/es/fr/it/pt-BR/id/ja (1-34 px), bei 1600x900 in en/es/fr/it/pt-BR/id (5-32 px). Bei 1280x720 lag die Spalte Ø in Englisch UNTER der Nachbarkachel "Rating" (Bild shots/blatt-vorher-en-blatt-1280x720.png). Ursache: die Kopfzellen tragen die Alt-Regel "thead th{padding:8px 11px!important; letter-spacing:.09em!important}" (phase2-premium.css:136, Schicht "legacy" - gegen eine Wichtig-Regel einer Schicht gewinnt keine normale Regel), das Raster gibt aber jeder Kachel dieselbe Breite (auto-fit minmax(260px), v0522-spielerblatt.css:15). Dazu bei 1024x768 28 px Seitenueberhang (it 62 px): dort stand das Radar allein in einer zweiten Reihe. UMORDNEN, nichts wird kleiner oder kuerzer: (a) ab 981 px: die erste Spalte (Jugendbilanz) ist mindestens so breit wie ihre Tabelle (minmax(max-content,1fr)); die drei anderen teilen den Rest. Bei 1920x1080 und breiter aendert sich nichts (alle vier Spalten sind dort ohnehin breiter als die Tabelle, messungen/blatt-probe-a.txt). (b) 981-1440 px (1024, 1280, 1366, 1440): fuer vier Spalten fehlt dort die Breite (1024x768: Gitter 901 px, Tabelle mit Rand bis 338 px) - die Jugendbilanz steht UEBER der Staerke in der ersten Spalte, Profil und Radar daneben ueber beide Reihen. Die Leserichtung bleibt (Bilanz, Staerke, Profil, Radar). Das Radar waechst nicht mit der Spalte (max-width 250px, v0521-analyse.css:27). Nur fuer das bekannte Blatt: Jugendbilanz zuerst, Radar als viertes Kind. Ohne Jugendbilanz (Profis) oder ohne Radar bleibt das Raster unveraendert. Handy (unter 981 px): unveraendert. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-ansicht="spielerblatt"] .pl522-gitter:has(>.pl527-bilanz:first-child):has(>.pl522-karte:nth-child(4)){ grid-template-columns:minmax(max-content,1fr) repeat(3,minmax(0,1fr)); } } @media (min-width:981px) and (max-width:1440px){ /* Zeile 2 ist flexibel: sie nimmt, was Profil und Radar ueber die Hoehe der Jugendbilanz hinaus brauchen - die Staerke steht so direkt unter der Bilanz, ohne Luecke dazwischen. */ #pl420Content[data-pl42-ansicht="spielerblatt"] .pl522-gitter:has(>.pl527-bilanz:first-child):has(>.pl522-karte:nth-child(4)){ grid-template-columns:minmax(max-content,1fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; } #pl420Content[data-pl42-ansicht="spielerblatt"] .pl522-gitter:has(>.pl527-bilanz:first-child):has(>.pl522-karte:nth-child(4))>:nth-child(1){grid-column:1;grid-row:1} #pl420Content[data-pl42-ansicht="spielerblatt"] .pl522-gitter:has(>.pl527-bilanz:first-child):has(>.pl522-karte:nth-child(4))>:nth-child(2){grid-column:1;grid-row:2} #pl420Content[data-pl42-ansicht="spielerblatt"] .pl522-gitter:has(>.pl527-bilanz:first-child):has(>.pl522-karte:nth-child(4))>:nth-child(3){grid-column:2;grid-row:1/3} #pl420Content[data-pl42-ansicht="spielerblatt"] .pl522-gitter:has(>.pl527-bilanz:first-child):has(>.pl522-karte:nth-child(4))>:nth-child(4){grid-column:3;grid-row:1/3} }