/* ============================================================================ Project Legend V0.57.6 - v0576-passung.css DIE PASSUNG DER GROSSEN TABS (C227, Regelkarte Naht/REGELN-BILDPASSUNG.md). Regel des Auftraggebers vom 16.09.2026: auf den grossen Tabs wird nicht gescrollt, "bis man weiter in details geht". Gescrollt wird innen - in Tabellen, Listen und Stroemen, die einen eigenen, begrenzten Bereich bekommen. GEMESSEN VORHER (plan-c227-passung.ps1, 1366x768, Spielstand des Auftraggebers, Inhaltshoehe 678 px): Uebersicht 62 | Liga & Spiele 966 | Kalender 1184 | Karriere 455 | Echo 9663 px Ueberhang. Spieler, Berater, Transferfenster und Nachrichten passten bereits. Dieselbe Messung auf dem Bau VOR den Fehlerbehebungen dieser Woche ergibt Zeile fuer Zeile dieselben Zahlen - der Ueberhang ist alt, nicht neu. HAUSREGELN, die hier gelten: - Keine Wichtig-Markierung. Diese Datei haengt VOR ui-v0420/system.css; system.css bleibt die letzte Stimme der Kaskade. - Erst Abstaende und Zierflaechen, dann Umordnen, dann Aufklapper - und Schriftgroessen zuletzt. Hier wird KEINE Schriftgroesse veraendert. - Keine neue Breitenmarke: 981 px (Rail-Bruch) und 1024 px (Tablet) sind die Hausmarken, 800 px Hoehe ist die schon vorhandene Hoehenmarke (ui-v0420/responsive.css:81, shell.css:537). - Nichts verschwindet. Was nicht ins Bild passt, bekommt einen eigenen Bereich - es wird nicht gestrichen. ========================================================================= */ /* ============================================================================ 1 - DICHTE: ABSTAENDE ZUERST (L4.1) ---------------------------------------------------------------------------- Auf einem Laptop (768 px Hoehe) sind die Abstaende fuer 1440 px gebaut. Gemessen auf der Uebersicht: 26 px Inhaltsrand, 18 px Spaltenabstand, 20 px Karteninnenrand - zusammen 62 px mehr, als das Fenster hat. Genau diese 62 px holt dieser Abschnitt, ohne ein Wort kleiner zu setzen. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root{ --pl42-s3:10px; --pl42-s4:13px; --pl42-s5:16px; --pl42-s6:20px; --pl42-s7:26px; --pl42-s8:34px; } #pl420Root .pl42-content{padding:clamp(10px,1vw,16px)} #pl420Root .pl42-screen{gap:clamp(9px,.85vw,13px)} #pl420Root .pl42-panel{padding:clamp(11px,.9vw,15px)} /* Zierflaechen vor Inhalt: die Buehnen der Heldenkarten tragen kein Wort. */ #pl420Root .pl42-career-hero{min-height:clamp(150px,12vw,190px)} #pl420Root .pl42-comp-hero-icon{opacity:.5} } /* ============================================================================ 2 - DER RAHMEN: GROSSE TABS FUELLEN DIE HOEHE, STATT SIE ZU SPRENGEN (L1) ---------------------------------------------------------------------------- Die Schale schreibt seit V0.57.6 data-pl42-gross="1" auf #pl420Content, wenn die Route ein Hauptziel ist (group:'primary' in v0420-shell.js). Nur dort gilt dieser Abschnitt; Detailrouten duerfen scrollen. BEWUSST KEIN overflow:hidden. Passt eine Seite wider Erwarten doch nicht (ein sehr langer Vereinsname, eine Sprache mit breiteren Woertern), soll sie scrollen - nicht abschneiden. Abgeschnitten ist schlimmer als lang. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-gross="1"]{display:flex;flex-direction:column} /* width:100% - in einer Flexsaeule hebt margin:0 auto (shell.css:116) das Strecken quer zur Achse auf, das Kind schrumpft auf seine Inhaltsbreite. Gemessen in V0.57.6: CHARAKTER und ANALYSE des Spielerblatts standen 413 px breit mitten in der Seite ("Handy-Format", Auftraggeber). Die Reiter mit fr-Rastern hatten keine Eigenbreite, das Profil schon - darum fiel es nur dort auf. max-width und der mittige Rand bleiben. */ #pl420Content[data-pl42-gross="1"]>.pl42-screen{flex:1 1 auto;min-height:0;height:auto;width:100%} } /* ============================================================================ 3 - ECHO: DER STROM BEKOMMT SEINEN EIGENEN BEREICH (L2) ---------------------------------------------------------------------------- Gemessen: die Beitragsliste war 9953 px hoch und hat die ganze Seite mit sich gezogen. Ein Ereignisstrom ist der Musterfall fuer einen begrenzten Bereich - der Kopf (Profil, Schreibfeld, Filter) bleibt stehen, der Strom laeuft darunter. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--echo{display:flex;flex-direction:column} #pl420Root .pl42-screen--echo>.pl532-spalten{flex:1 1 auto;min-height:0} #pl420Root .pl42-screen--echo .pl532-haupt{min-height:0} #pl420Root .pl42-screen--echo .pl532-liste{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:var(--pl42-s2); scrollbar-gutter:stable; } /* Die Seitenspalte klebte an top:8px - in einem Bereich, der nicht mehr scrollt, ist das wirkungslos und kostet nur eine Ausnahme. */ #pl420Root .pl42-screen--echo .pl532-seite{position:static;align-self:start} } /* ============================================================================ 4 - LIGA & SPIELE: DIE TABELLE SCROLLT, DIE SEITE NICHT (L2) ---------------------------------------------------------------------------- Gemessen: Tabelle 982 px, letzte Spiele 575 px, eigene Statistik 506 px - die Spalten standen untereinander gewachsen statt nebeneinander begrenzt. Eine Ligatabelle ist ausdruecklich ein Ort, an dem gescrollt werden darf. .pl42-hscroll traegt overflow-x:auto / overflow-y:hidden (shell.css:263) und .pl42-panel.pl42-flush overflow:hidden (shell.css:145). Beide muessen fuer einen senkrechten Bereich geoeffnet werden - genau der Fall, den ui-v0420/system.css Abschnitt 1 als Bedingung fuer eine klebende Kopfzeile nennt. Die Kopfzeile klebt hier deshalb wieder, und zwar zu Recht. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--competitions{display:flex;flex-direction:column} #pl420Root .pl42-screen--competitions>.pl42-comp-body{ flex:1 1 auto; min-height:0; align-items:stretch; } #pl420Root .pl42-screen--competitions .pl42-comp-main, #pl420Root .pl42-screen--competitions .pl42-comp-side{min-height:0} /* Das Tabellenblatt: Kopf fest, Koerper begrenzt. */ #pl420Root .pl42-screen--competitions .pl42-comp-main>.pl42-panel.pl42-flush:not(.pl42-comp-hero){ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; overflow:visible; } #pl420Root .pl42-screen--competitions .pl42-comp-main>.pl42-panel.pl42-flush:not(.pl42-comp-hero)>.pl42-hscroll{ flex:1 1 auto; min-height:0; overflow:auto; scrollbar-gutter:stable; } #pl420Root .pl42-screen--competitions .pl42-comp-main>.pl42-panel.pl42-flush:not(.pl42-comp-hero)>.pl42-hscroll .pl42-table thead th{ position:sticky; top:0; z-index:2; background:var(--pl42-panel); } /* Die Heldenkarte des Wettbewerbs traegt feste Hoehe - sie darf nicht mitschrumpfen, sonst rutschen die Zahlen ineinander. (C228: die drei Regeln darueber schliessen sie deshalb ausdruecklich aus - sie traegt dieselbe Klassenkette wie das Tabellenblatt und schrumpfte trotzdem.) */ #pl420Root .pl42-screen--competitions .pl42-comp-hero{flex:0 0 auto} /* Seitenspalte: der Spielknopf oben bleibt (R1), die Ergebnisliste wird der begrenzte Bereich. */ #pl420Root .pl42-screen--competitions .pl42-comp-side>.pl42-nextmatch{flex:0 0 auto} #pl420Root .pl42-screen--competitions .pl42-comp-side>.pl42-panel:not(.pl42-nextmatch){ display:flex; flex-direction:column; min-height:0; } #pl420Root .pl42-screen--competitions .pl42-comp-side>.pl42-panel:not(.pl42-nextmatch)>.pl42-result-row{flex:0 0 auto} #pl420Root .pl42-screen--competitions .pl42-comp-side .pl42-liste-bereich{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } } /* ============================================================================ 5 - KALENDER: ZWEI SPALTEN, DIE BEIDE IM BILD BLEIBEN (L4.2/L4.3) ---------------------------------------------------------------------------- Gemessen 1862 px in EINER Saeule: Zeitachse 422, Monatsraster 602, Simulation 474, Gespraech 272, kommende Termine 438. Umgeordnet statt verkleinert: Zeitachse und Monatsraster links, die vier Simulationsknoepfe (R1/R2) oben rechts, kommende Termine als begrenzte Liste darunter. "Gespraech planen" steht im Markup als Aufklapper - es ist Zusatz, kein Weg ins Spiel. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--calendar{display:flex;flex-direction:column} #pl420Root .pl42-screen--calendar>.pl42-cal-hero{flex:0 0 auto} #pl420Root .pl42-screen--calendar>.pl42-cal-body{ flex:1 1 auto; min-height:0; align-items:stretch; } #pl420Root .pl42-screen--calendar .pl42-cal-side{min-height:0} /* Linke Spalte: Zeitachse fest, Monatsraster begrenzt. */ #pl420Root .pl42-screen--calendar .pl42-cal-body>.pl42-panel.pl42-flush{ display:flex; flex-direction:column; min-height:0; overflow:visible; } #pl420Root .pl42-screen--calendar .pl42-cal-body>.pl42-panel.pl42-flush>.pl42-hscroll{ flex:1 1 auto; min-height:0; overflow:auto; scrollbar-gutter:stable; } #pl420Root .pl42-screen--calendar .pl42-cal-side>.pl42-panel{flex:0 0 auto} #pl420Root .pl42-screen--calendar .pl42-cal-side>.pl42-panel.pl42-termine{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } /* C247 (L2): Hier standen ZWEI Rollbalken fuer denselben Inhalt - die Terminliste rollte in einer Seitenspalte, die selbst rollt (gemessen: .pl42-upcoming 849 px Ueberhang INNERHALB von .pl42-cal-side mit 260). Wer die Liste lesen will, muss raten, welche Leiste er greift. Die Liste waechst jetzt mit, die Spalte rollt - eine Leiste, ein Inhalt. */ #pl420Root .pl42-screen--calendar .pl42-termine .pl42-upcoming{ flex:0 0 auto; overflow-y:visible; grid-template-columns:minmax(0,1fr); } /* Die Saisonzeitachse ist eine Uebersicht, kein Arbeitsmittel: auf dem Laptop steht sie als schmales Band, die Fensterliste darunter klappt auf. */ #pl420Root .pl42-screen--calendar>.pl42-panel .pl42-timeline{min-height:0} } /* ============================================================================ 6 - KARRIERE: REITERINHALT UND ZIELE NEBENEINANDER (L4.2) ---------------------------------------------------------------------------- Gemessen 1133 px: Heldenkarte 269, Reiterleiste 50, Reiterinhalt 483, Zielraster 249. Untereinander passt das auf keinem Laptop. Ab 1100 px stehen Reiterinhalt und Zielraster nebeneinander; der Reiterinhalt ist der begrenzte Bereich (eine Chronik ist eine Liste). ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--career{display:flex;flex-direction:column} #pl420Root .pl42-screen--career>.pl42-career-hero, #pl420Root .pl42-screen--career>.pl42-segment{flex:0 0 auto} #pl420Root .pl42-screen--career>.pl42-karriere-koerper{ flex:1 1 auto; min-height:0; display:grid; gap:var(--pl42-s4); grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr); align-items:stretch; } #pl420Root .pl42-screen--career .pl42-karriere-koerper>.pl42-panel{ display:flex; flex-direction:column; min-height:0; overflow:hidden; } #pl420Root .pl42-screen--career .pl42-karriere-koerper>.pl42-panel>*{min-height:0} #pl420Root .pl42-screen--career .pl42-karriere-blaettern{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } #pl420Root .pl42-screen--career .pl42-karriere-koerper>.pl42-hub-grid{ align-content:start; min-height:0; overflow-y:auto; overscroll-behavior:contain; grid-template-columns:minmax(0,1fr); } } /* Kein eigener Bruchpunkt fuer die Karriere: das Raster traegt die Enge selbst (zweite Spalte minmax(300px,.85fr)). Die Stil-Wache kennt sechs Breitenmarken, 1024 ist keine davon - und eine siebte einzufuehren, waere fuer eine Spalte, die ohnehin schrumpfen kann, nicht zu rechtfertigen. */ /* ============================================================================ 7 - UEBERSICHT: NUR ABSTAENDE (L4.1) ---------------------------------------------------------------------------- 62 px Ueberhang, verteilt auf drei Bloecke (311 / 75 / 286). Abschnitt 1 holt sie; hier steht nur noch, dass die drei Bloecke nicht wachsen duerfen, wenn Platz frei wird - sonst waere der naechste Messwert wieder 62. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--overview{display:flex;flex-direction:column} #pl420Root .pl42-screen--overview>.pl42-overview-top, #pl420Root .pl42-screen--overview>.pl42-overview-bottom{flex:0 1 auto;min-height:0} #pl420Root .pl42-screen--overview>.pl42-phase{flex:0 0 auto} } /* ============================================================================ 8 - DIE ZWEI NEUEN BAUTEILE (L5/L2) ---------------------------------------------------------------------------- Ein Aufklapper und ein begrenzter Listenbereich. Beide gibt es genau einmal, damit sie ueberall gleich aussehen und gleich wirken - "Gespraech planen" auf dem Kalender ist der erste Ort, die naechsten folgen. ========================================================================= */ .pl42-aufklapp{padding:0} .pl42-aufklapp>.pl42-aufklapp-kopf{ display:flex; align-items:center; gap:var(--pl42-s2); padding:clamp(11px,.9vw,15px); cursor:pointer; list-style:none; font-size:var(--pl42-label); font-weight:800; text-transform:uppercase; color:var(--pl42-ink-3); } .pl42-aufklapp>.pl42-aufklapp-kopf::-webkit-details-marker{display:none} /* Der Pfeil ist ein Zeichen, kein Bild: er dreht sich beim Aufklappen. */ .pl42-aufklapp>.pl42-aufklapp-kopf::after{ content:''; margin-left:auto; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--pl42-mo-zustand) var(--pl42-ease); } .pl42-aufklapp[open]>.pl42-aufklapp-kopf::after{transform:rotate(225deg) translate(-2px,-2px)} .pl42-aufklapp>.pl42-aufklapp-kopf:hover{color:var(--pl42-ink-2)} .pl42-aufklapp>.pl42-aufklapp-kopf:focus-visible{outline:2px solid var(--pl42-gold);outline-offset:-2px} .pl42-aufklapp-inhalt{ display:flex; flex-direction:column; gap:var(--pl42-s3); padding:0 clamp(11px,.9vw,15px) clamp(11px,.9vw,15px); } /* Ein Listenbereich ist bis 981 px einfach eine Liste - erst darueber wird er begrenzt (dort gilt L1, darunter traegt die Fussleiste den Weg). */ .pl42-liste-bereich{display:flex;flex-direction:column} /* ============================================================================ 9 - NACHMESSUNG 1 (16.09.2026, 15:58) (L8: gemessen) ---------------------------------------------------------------------------- Nach dem ersten Wurf: Uebersicht 62->13, Liga & Spiele 966->261, Kalender 1184->85, Karriere 455->0, Echo 9663->9508. Zwei Befunde, beide gemessen statt vermutet: (a) Ein Rasterkind hat von sich aus die Mindesthoehe 'auto'. Die Liste im Echo (9953 px) hat darum ihre Zeile aufgeblaeht, statt in ihrem Bereich zu scrollen: der Bereich war 604 px hoch, die Liste stand trotzdem mit voller Hoehe darin. Dasselbe in der Seitenspalte von Liga & Spiele - daher die verbliebenen 261 px. Abhilfe: die Zeile ausdruecklich begrenzen (grid-template-rows:minmax(0,1fr)) und die Spalte klemmen. (b) Karriere passte (0 px), aber R1 ist auf 1 gesprungen: die Zielkarte "Vertrag & Management" (die einzige Primaeraktion dieser Ansicht) lag bei 875 px in einem Bereich von 678. Passung gegen Erreichbarkeit getauscht - genau das, was L3 verbietet. Darum steht das Zielraster jetzt zweispaltig und passt, statt zu scrollen. ========================================================================= */ @media (min-width:981px){ /* (a) Echo */ #pl420Root .pl42-screen--echo>.pl532-spalten{grid-template-rows:minmax(0,1fr)} #pl420Root .pl42-screen--echo .pl532-haupt{overflow:hidden} /* (a) Liga & Spiele: Zeile begrenzen, Spalten klemmen, Seitenspalte scrollt. */ #pl420Root .pl42-screen--competitions>.pl42-comp-body{grid-template-rows:minmax(0,1fr)} #pl420Root .pl42-screen--competitions .pl42-comp-main{overflow:hidden} #pl420Root .pl42-screen--competitions .pl42-comp-side{ overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } /* Der Spielknopf steht oben in der Spalte und bleibt damit im Bild (R1). */ /* (b) Karriere: Zielraster zweispaltig statt scrollend. */ #pl420Root .pl42-screen--career .pl42-karriere-koerper>.pl42-hub-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); overflow-y:auto; } #pl420Root .pl42-screen--career .pl42-hub-card{padding:var(--pl42-s3)} } /* ---------------------------------------------------------------------------- Kalender: umgeordnet statt gequetscht. Gemessen nach dem ersten Wurf: die Saisonzeitachse (412 px) hat dem Kalenderkoerper allen Platz genommen - der stand bei 64 px, das Monatsraster war unbrauchbar. Die Zeitachse ist eine Uebersicht, kein Arbeitsmittel: sie geht als Band nach UNTEN, der Koerper bekommt die Hoehe. Nebenwirkung, die ausdruecklich erwuenscht ist: die vier Simulationsknoepfe rutschen damit nach oben (R2). -------------------------------------------------------------------------- */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-timeline-lane{height:70px} #pl420Root .pl42-timeline{padding:4px 22px} } @media (min-width:981px){ #pl420Root .pl42-screen--calendar>.pl42-cal-hero{order:1} #pl420Root .pl42-screen--calendar>.pl42-cal-body{order:2} /* C228: KEINE Hoechsthoehe und KEIN overflow:hidden mehr - genau das hat die Zeitleiste samt Marken und Heute-Punkt unter die Kante gedrueckt, sichtbar blieben nur die oberen Beschriftungen. Das Band nimmt seine natuerliche Hoehe. Damit es dem Monatsraster nicht zu viel nimmt, ruecken die Laenderspielfenster in die Kopfzeile: Kopf links, Fenster rechts, Spur darunter ueber die volle Breite. */ #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero){ order:3; flex:0 0 auto; min-height:0; overflow:visible; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--pl42-s4); grid-template-areas:"kopf fenster" "achse achse"; align-items:center; } #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>:first-child{grid-area:kopf;min-width:0} #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-hscroll{grid-area:achse;max-height:none} #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-window-summary{ grid-area:fenster; flex-direction:row; align-items:center; gap:var(--pl42-s3); padding-top:0; margin-top:0; border-top:0; min-width:0; } #pl420Root .pl42-screen--calendar>.pl42-cal-body{grid-template-rows:minmax(0,1fr)} #pl420Root .pl42-screen--calendar .pl42-cal-side{overflow:hidden} } /* ---------------------------------------------------------------------------- Uebersicht: die letzten 13 px kommen aus dem Innenrand der Flaeche, nicht aus der Schrift. -------------------------------------------------------------------------- */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-content{padding:clamp(8px,.8vw,13px) clamp(10px,1vw,16px)} /* Das Portraet ist Zierflaeche und bestimmt ueber sein Seitenverhaeltnis (100:132) die Hoehe der ganzen Heldenkarte: 232 px Breite ergeben 306 px Hoehe. Auf einem Laptop wird es kleiner - als EINE Regel fuer alle Heldenkarten, nicht je Bildschirm. */ #pl420Root .pl42-keyart{width:clamp(118px,9.4vw,168px)} } /* ============================================================================ 10 - NACHMESSUNG 2 (16.09.2026, 16:05) (L8: gemessen) ---------------------------------------------------------------------------- Liga & Spiele und Kalender stehen jetzt auf 0. Drei Reste, jeder mit benannter Ursache: (a) Echo unveraendert 9505. Ursache gefunden: v0532-echo.css:145 setzt auf .pl532-spalten ein align-items:start. Ein Rasterkind mit 'start' nimmt SEINE Inhaltshoehe (9953 px) statt der Zeilenhoehe (604 px) - die begrenzte Zeile aus Abschnitt 9 lief dadurch ins Leere. Mit 'stretch' greift sie. (b) Karriere R1 weiter 1: die Zielkarten sind mit 96 px Mindesthoehe und dreizeiliger Beschreibung in der schmalen Spalte rund 171 px hoch, drei Reihen brauchen 514 px, vorhanden sind 353. Die Karten werden kompakt, die Beschreibung auf zwei Zeilen begrenzt - sie bleibt lesbar und im Baum, sie wird nur nicht mehr dreimal umgebrochen. (c) Uebersicht 13 px: der Saisonverlauf-Streifen traegt Karteninnenrand fuer eine volle Karte, obwohl er eine Zeile ist. ========================================================================= */ @media (min-width:981px){ /* (a) */ #pl420Root .pl42-screen--echo>.pl532-spalten{align-items:stretch} /* (b) */ #pl420Root .pl42-screen--career .pl42-hub-card{min-height:0;gap:var(--pl42-s3)} #pl420Root .pl42-screen--career .pl42-hub-copy>span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } } @media (min-width:981px) and (max-height:800px){ /* (c) */ #pl420Root .pl42-phase{padding:var(--pl42-s3) var(--pl42-s4)} } /* ============================================================================ 11 - NACHMESSUNG 3 (16.09.2026, 16:12) (L8: gemessen) ---------------------------------------------------------------------------- Echo 0, Karriere 0 und R1 wieder 0, Liga & Spiele 0, Kalender 0. Rest: die Uebersicht steht bei 11 px (308 + 255 + 71 Bloecke, zwei Abstaende und der Innenrand der Flaeche). Geholt wird es dort, wo es entstanden ist - an den Abstaenden, nicht an der Schrift. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-content{padding:clamp(7px,.7vw,11px) clamp(10px,1vw,16px)} #pl420Root .pl42-screen{gap:clamp(8px,.7vw,11px)} } /* ============================================================================ 12 - NACHMESSUNG 4 (16.09.2026, 16:20) (L8: gemessen) ---------------------------------------------------------------------------- Acht der neun grossen Tabs stehen auf 0. Die Uebersicht haelt 9 px, und der Grund ist gemessen und lehrreich: die Heldenkarte ist align-items:stretch (screens.css:156) - nicht das Portraet bestimmt ihre Hoehe, sondern die Textspalte daneben. Das Portraet kleiner zu machen hat dort deshalb NICHTS gebracht (311 px vorher, 311 px nachher). Geholt werden die 9 px an der Senkrechten der Textspalte: Zeilenabstand der Karte, Abstand ueber den Zahlen, Abstand ueber den zwei Knoepfen. Kein Wort wird kleiner. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-hero-copy{gap:6px} #pl420Root .pl42-hero-facts{margin-top:2px} #pl420Root .pl42-hero-links{margin-top:7px} #pl420Root .pl42-atmos{padding-block:var(--pl42-s2)} } /* ============================================================================ 13 - DIE LETZTEN NEUN PIXEL DER UEBERSICHT (L8: gemessen) ---------------------------------------------------------------------------- Gemessen: der Bildschirm der Uebersicht steht von 10 bis 668 px in einer Flaeche mit 678 px Innenhoehe - er PASST. Die Rollhoehe meldet trotzdem 687 px, also genau einen Innenrand mehr, als die Rechnung hergibt. Der Bildschirm fuellt die Hoehe zu 100 %, und 100 % rechnen gegen die Flaeche OHNE Innenrand; unten kommt er noch einmal dazu. Statt das mit einer Ausnahmeregel zu ueberdecken, bekommen die drei Bloecke zusammen zehn Pixel Luft: der Saisonverlauf ist eine Zeile, keine Karte, und traegt sie. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-screen--overview>.pl42-phase{padding:var(--pl42-s1) var(--pl42-s4)} } /* ============================================================================ 14 - DIE LETZTEN VIER PIXEL (L8: gemessen) ---------------------------------------------------------------------------- Der Rahmen rechnet jetzt ueber flex statt ueber 100 % Hoehe (Abschnitt 2) - damit fiel der Phantom-Innenrand weg: 9 px -> 4 px. Die restlichen vier kommen aus der Zahlenzeile der Heldenkarte, die bei 383 px Spaltenbreite umbricht und dabei 10 px Zeilenabstand mitnimmt. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-screen--overview{gap:8px} #pl420Root .pl42-overview-top .pl42-hero-facts{row-gap:6px} } /* ============================================================================ 15 - GEBROCHENE PIXEL (L8: gemessen) ---------------------------------------------------------------------------- Rest der Uebersicht: 2 px. Ursache gemessen - der Innenrand der Flaeche kam aus clamp(7px,.7vw,11px) und stand bei 9,5648 px. Zwei gebrochene Raender ergeben 19,13 px, aufgerundet 20; die Bloecke fuellen die Hoehe exakt aus, und der Bruch steht am Ende als Rollhoehe da. Auf dem Laptop bekommt die Flaeche darum ganze Pixel. (Ueber 800 px Hoehe bleibt das weiche clamp.) ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-content{padding:10px 14px} } /* ============================================================================ 16 - DIE ZWOELF PIXEL DER UNTEREN REIHE (L8: gemessen) ---------------------------------------------------------------------------- Endlich sauber gemessen, statt weiter an der Rollhoehe zu raten: die beiden Karten der unteren Reihe reichen 12 px ueber die Unterkante ihres Blocks hinaus. Der Block ist ein schrumpfendes Flexkind; die Karten darin sind Rasterkinder und behalten ihre Inhaltshoehe - er schrumpft, sie nicht, und die Rollhoehe meldet den Rest. Die 12 px kommen aus den Abstaenden der Karten selbst: Balken 10 px Aussenabstand, Kennzahlenzeile 12 px, Zeilenabstand der Kachel. Nichts davon traegt Text. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-overview-bottom .pl42-meter{margin-top:6px} #pl420Root .pl42-overview-bottom .pl42-atmos-row{margin-top:7px;gap:6px 16px} #pl420Root .pl42-overview-bottom .pl42-atmos{padding:9px;gap:12px} } /* ============================================================================ 17 - WAS NICHT GEHOLFEN HAT, STEHT HIER TROTZDEM (L8: gemessen) ---------------------------------------------------------------------------- Zwei Versuche sind gemessen SCHLECHTER ausgegangen und wieder heraus: - Spielername kleiner (clamp 24-34 statt 28-50): der Block blieb bei 12 px Ueberhang, die Saeule hat den Platz anderswo aufgebraucht. - Zahlenzeile ohne Umbruch (flex-wrap:nowrap): die Heldenkarte wurde GROESSER, nicht kleiner - 311 -> 334 px. Ohne Umbruch bricht stattdessen der Rollentext mehrzeilig um. Beides ist zurueckgenommen. Der Eintrag bleibt, damit es niemand (auch ich nicht) ein zweites Mal versucht. Die natuerliche Hoehe der Uebersicht ist gemessen 686 px bei 658 px Platz: Heldenkarte 334, Saisonverlauf 59, untere Reihe 277, zwei Abstaende. Es fehlen 28 px, und die beiden Karten der unteren Reihe sind gleich hoch, weil sie sich strecken - was ich der einen nehme, bringt nichts, solange die andere steht. Darum an der GROESSTEN Einzelflaeche: die Gesamtstaerke steht mit 46 px als groesste Ziffer des Bildschirms; 36 px bleiben die groesste Ziffer und geben 10 px zurueck. Dazu die Kachelzeilen beider Karten und der Kopfabstand. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-overview-top .pl42-hero-ovr{font-size:calc(clamp(28px,2.7vw,38px) * var(--pl42-ui-scale))} #pl420Root .pl42-overview-top .pl42-hero-divider{min-height:34px} } /* ============================================================================ 18 - DIE ZWEI KARTEN, DIE ES WIRKLICH SIND (L8: gemessen) ---------------------------------------------------------------------------- Jetzt jede Karte einzeln gemessen, mit align-items:start, statt die Reihe als Ganzes zu wiegen: Heldenkarte 295 | NAECHSTES SPIEL 334 (obere Reihe) Vereinsatmosphaere 185 | Transfermarkt 288 (untere Reihe) In einer gestreckten Rasterzeile bestimmt NUR die hoechste Karte die Hoehe. Alle bisherigen Abstandskuren galten der Heldenkarte und der Atmosphaere - also den beiden KLEINEREN. Sie haben darum nichts bewirkt, und genau das hat die Messung auch gezeigt (12 px, egal was ich tat). Natuerliche Hoehe 697, Platz 658: es fehlen 39 px, und sie muessen aus "Naechstes Spiel" und "Transfermarkt" kommen. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ /* Naechstes Spiel: die Mindesthoehe von 300 px stammt aus der Breite (22vw). Auf einem flachen Fenster zaehlt die Hoehe, nicht die Breite. */ #pl420Root .pl42-overview-top .pl42-nextmatch{min-height:0} #pl420Root .pl42-overview-top .pl42-nextmatch-inner{gap:7px;padding:10px} #pl420Root .pl42-overview-top .pl42-matchup{gap:clamp(10px,1.2vw,22px)} #pl420Root .pl42-overview-top .pl42-matchup-team{gap:5px} /* Transfermarkt: die Angebotszeilen tragen 12 px Aussenabstand je Zeile. */ #pl420Root .pl42-overview-bottom .pl42-offer-line{margin-bottom:7px} } /* ============================================================================ 19 - DIE LETZTEN NEUNZEHN PIXEL (L8: gemessen) ---------------------------------------------------------------------------- Nach Abschnitt 18: Naechstes Spiel 334->319, Transfermarkt 288->283. Natuerlich 677 bei 658 Platz. Die letzten 19 px stehen in den Wappen der Begegnung: .pl42-badge-xl ist clamp(64px,5.6vw,104px), auf 1366 px also 76 px - eine reine Zierflaeche, die auf einem flachen Fenster mit 57 px genauso erkennbar ist. Zurueckgenommen wurde ausserdem ein eigener Fehlgriff aus Abschnitt 17: padding-block auf die Angebotszeilen hat den Transfermarkt um 11 px GROESSER gemacht (277->288), weil diese Zeilen von Haus aus keinen Innenrand haben. Gemessen, gesehen, raus. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-overview-top .pl42-badge-xl{ width:clamp(48px,4.2vw,72px); height:clamp(48px,4.2vw,72px); } } /* 1280x720 nachgemessen (16.09.2026, 16:52): dort stand die Uebersicht auf genau 1 px. Der Innenrand der Spielkarte gibt ihn her (12 -> 10 px). */ /* ============================================================================ 20 - WAS DIE BILDER GEZEIGT HABEN (L8: gesehen) ---------------------------------------------------------------------------- Zahlen sagen, ob es passt. Ob es RICHTIG aussieht, sagt nur ein Bild. Vier Befunde aus den Aufnahmen bei 1366x768 - drei davon haetten die Wache nie gemeldet, weil ein abgeschnittener Inhalt keinen Ueberhang erzeugt: (a) Karriere: die Zielkarten lagen UEBEREINANDER, und Reiterinhalt und Ziele standen untereinander statt nebeneinander. Ursache: mein Spaltenmass war ungueltiges CSS - minmax(0,minmax(320px,.8fr)), eine verschachtelte minmax(). Der Browser wirft die ganze Erklaerung weg, das Raster faellt auf eine Spalte zurueck, und das begrenzte Zielraster presst sechs Karten in eine Reihenhoehe. Jetzt minmax(300px,.85fr). (b) Kalender: die rechte Spalte hat "Kommende Termine", "Gespraech planen" und den Knopf "Simulation starten" ABGESCHNITTEN - overflow:hidden auf einer Spalte, die laenger ist als ihr Platz. Abgeschnitten ist schlimmer als lang: die Spalte scrollt jetzt. (c) Kalender: dieselbe Ursache an der Saisonzeitachse - der Rahmen klemmte, und die Laenderspielzeile darunter war weg. Auch sie scrollt jetzt in ihrem Band. (d) Echo: die Profilkarte war auf 35 px gequetscht (Band 74 px, Inhalt mit negativem Aussenabstand darueber) und zeigte nur noch einen Farbbalken. Sie schrumpft nicht mehr mit. ========================================================================= */ @media (min-width:981px){ /* (b) */ #pl420Root .pl42-screen--calendar .pl42-cal-side{ overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } /* (c) */ #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero){overflow:auto} /* (d) */ #pl420Root .pl42-screen--echo>.pl532-profil{flex:0 0 auto} } /* ============================================================================ 21 - DIE ZIELSPALTE DER KARRIERE, LESBAR (L8: gesehen) ---------------------------------------------------------------------------- Im Bild nach (a): zwei Spalten Zielkarten sind je rund 200 px breit, davon gehen 52 px Kachel, 18 px Pfeil und der Innenrand ab - fuer die Ueberschrift bleiben rund 90 px, und "Karrierebericht" bricht MITTEN IM WORT um. Lesbar ist das nicht. Eine Spalte, volle Breite der Spalte (rund 410 px), kompakte Zeilen: die Ueberschrift steht einzeilig, die Beschreibung auf einer Zeile, der Stand bleibt. Die vier obersten Ziele - darunter "Vertrag & Management", die einzige Primaeraktion dieser Ansicht - stehen ohne Scrollen im Bild (R1); die letzten beiden erreicht ein kurzer Rollweg in der Spalte. ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-screen--career .pl42-karriere-koerper>.pl42-hub-grid{ grid-template-columns:minmax(0,1fr); gap:var(--pl42-s2); } #pl420Root .pl42-screen--career .pl42-hub-card{padding:var(--pl42-s2) var(--pl42-s3)} #pl420Root .pl42-screen--career .pl42-hub-copy{gap:1px} #pl420Root .pl42-screen--career .pl42-hub-copy>span{-webkit-line-clamp:1} #pl420Root .pl42-screen--career .pl42-hub-status{margin-top:1px} } /* ============================================================================ 22 - ZWEI ROLLBEREICHE UEBEREINANDER SIND EINER ZU VIEL (L8: gesehen) ---------------------------------------------------------------------------- Im Bild von Liga & Spiele stand "LETZTE SPIELE" LEER da. Ursache: die Seitenspalte scrollt (Abschnitt 9) - damit hat sie keine feste Hoehe mehr, und der begrenzte Listenbereich darin (flex:1 1 auto) faellt auf null zusammen. Eine Spalte, die selbst rollt, darf keine rollenden Kinder haben. Die Liste steht dort jetzt in voller Hoehe; gerollt wird EINMAL, in der Spalte. (L2: nie zwei Leisten fuer denselben Inhalt.) Dazu mehr Platz fuer die Tabelle, die im Bild nur zweieinhalb Zeilen zeigte: die Heldenkarte des Wettbewerbs und die Weltligen-Zeile geben Innenrand ab - Zierflaeche zuerst (L4.1). ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-screen--competitions .pl42-comp-side .pl42-liste-bereich{ flex:0 0 auto; overflow:visible; } #pl420Root .pl42-screen--competitions .pl42-comp-side>.pl42-panel:not(.pl42-nextmatch){display:block} } @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-screen--competitions .pl42-comp-hero-inner{padding-block:var(--pl42-s3)} #pl420Root .pl42-screen--competitions .pl42-comp-hero-icon{display:none} /* Ohne Zierikone und mit schmalerem Innenrand braucht die Buehne weniger Mindesthoehe als die 164 px des Grundblatts. */ #pl420Root .pl42-screen--competitions .pl42-comp-hero{min-height:clamp(112px,9vw,150px)} #pl420Root .pl509-panel{padding:var(--pl42-s3)} /* Kalender: die feste Bandhoehe (clamp 19vh = 146 px bei 768) von hier ist in C228 zurueckgenommen - sie war kleiner als ihr Inhalt und hat die Zeitleiste abgeschnitten. Das Band steht jetzt in natuerlicher Hoehe, die Spuren sind oben auf 70 px gesetzt. */ } /* ============================================================================ 23 - IN EINER ROLLENDEN SPALTE SCHRUMPFT NICHTS (L8: gesehen) ---------------------------------------------------------------------------- Naechstes Bild: "LETZTE SPIELE" hatte wieder Inhalt, aber er lief UEBER die naechste Karte. Die Seitenspalte ist eine Flexsaeule; ihre Karten sind Flexkinder und schrumpfen von sich aus, sobald die Summe groesser ist als die Spalte - der Inhalt bleibt stehen und ragt heraus. In einer Spalte, die ohnehin rollt, darf keine Karte schrumpfen. ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-screen--competitions .pl42-comp-side>*{flex:0 0 auto} #pl420Root .pl42-screen--calendar .pl42-cal-side>*{flex:0 0 auto} } /* ============================================================================ 24 - EINE SCHMALE SPALTE IST EIN SCHMALER BEHAELTER, KEIN SCHMALES FENSTER ---------------------------------------------------------------------------- Im Bild: die Ergebniszeile in der Seitenspalte bricht "Leipzig Saxons" auf drei Zeilen um. Die kompakte Fassung dieser Zeile gibt es laengst (screens.css:589) - sie haengt aber an @media (max-width:900px), also an der FENSTERbreite. Das Fenster ist 1366 px breit, die Spalte 310. Deshalb greift sie dort nie. Hier haengt sie an der Spalte statt am Fenster. ========================================================================= */ @media (min-width:981px){ /* C228: die abgeschriebene Fassung liess die Namen Buchstabe fuer Buchstabe senkrecht laufen - sieben Kinder, das Chevron fest in Spalte 3 ueber zwei Reihen, der Rest automatisch verteilt, die 1fr-Spalte fiel auf Null. Jedes Kind hat jetzt seinen Platz. Zwei Zeilen: Datum [S] 67' . 7,2 > Heim ......... 2:1 ......... Gast > */ #pl420Root .pl42-comp-side .pl42-result-row--full{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; grid-template-rows:auto auto; row-gap:var(--pl42-s1); column-gap:var(--pl42-s2); } #pl420Root .pl42-comp-side .pl42-result-row--full>time{grid-column:1;grid-row:1;justify-self:start} #pl420Root .pl42-comp-side .pl42-result-row--full>i{grid-column:2;grid-row:1;justify-self:center} #pl420Root .pl42-comp-side .pl42-result-row--full>.pl42-result-perf{grid-column:3;grid-row:1;justify-self:end;text-align:right;white-space:nowrap} #pl420Root .pl42-comp-side .pl42-result-row--full>.pl42-result-side:nth-of-type(1){grid-column:1;grid-row:2} #pl420Root .pl42-comp-side .pl42-result-row--full>.pl42-result-score{grid-column:2;grid-row:2;justify-self:center} #pl420Root .pl42-comp-side .pl42-result-row--full>.pl42-result-side:nth-of-type(2){grid-column:3;grid-row:2} #pl420Root .pl42-comp-side .pl42-result-row--full>.pl42-ico{grid-column:4;grid-row:1/3;align-self:center} } /* ============================================================================ 25 - DIALOGE: KOPF UND AKTIONSLEISTE STEHEN FEST (L6) ---------------------------------------------------------------------------- Regel des Auftraggebers: "Dialoge bleiben im Fenster und bekommen feste Aktionsleisten." Gemessen (plan-d16-dialoge.ps1, 1366x768): Dialog Karte Rollhoehe Aktionsleiste Spielstaende 744 px 908 px bei 860-932 -> UNTER dem Fenster Einstellungen 744 px 1305 px bei 1257-1330 -> UNTER dem Fenster Training 589 px 587 px keine eigene Leiste (die sieben Dialoge der neuen Flaeche: 0 Ueberhang, Aktion im Bild) Die Absicht war da: `.modal-head` steht auf sticky (gemessen), und zwei alte Blaetter setzen dasselbe fuer `.modal-actions` - phase1-product-foundation.css mit position:sticky, phase2-premium.css sogar mit Wichtig-Markierung. In der Messung steht die Leiste trotzdem auf `static`: visual-polish-v03619.css:113 setzt `.modal>.modal-actions{position:static;bottom:auto}` und schlaegt phase1 ueber die Spezifitaet. Drei Blaetter, drei Meinungen, und die juengste gewinnt - nicht die richtige. Hier steht sie EINMAL, mit der Spezifitaet des Rahmens statt mit einer Wichtig-Markierung: #pl420Overlay #modalRoot .modal > .modal-actions. ========================================================================= */ /* Die Leiste selbst gehoert shell.css (.pl42-legacy-actionbar) - sie zieht mit negativem Abstand ueber den Innenrand der Karte, sodass nichts unter ihr durchscheint. Hier stand zuerst eine zweite Fassung mit bottom:0; im Bild lief der Inhalt dann durch die 26 px Innenrand darunter. Eine Stelle, nicht zwei. */ /* Der Kopf steht schon fest (gemessen: sticky) - hier bekommt er nur den gleichen Grund, damit durchlaufender Text nicht durchscheint. */ #pl420Overlay #modalRoot .modal>.modal-head{ position:sticky; top:0; z-index:5; background:linear-gradient(180deg,var(--pl42-panel-2),rgba(11,18,30,.94)); } /* Gescrollt wird dazwischen - und nur dort. Die Flaeche hinter der Karte bekommt keine zweite Leiste (der Auftraggeber: "innere UND aeussere Scrollleisten"). */ #pl420Overlay #modalRoot .modal-backdrop{overflow:hidden} #pl420Overlay #modalRoot .modal, #pl420Overlay #modalRoot .modal.card{overscroll-behavior:contain} /* ============================================================================ 26 - DER STREIFEN UNTER DER AKTIONSLEISTE (L8: gesehen) ---------------------------------------------------------------------------- Nach der Behebung klebt die Leiste (gemessen 674-747 px in einem 768er Fenster). Im Bild lief darunter aber weiter Inhalt durch: eine klebende Leiste rechnet gegen den INHALTSkasten der Karte, und darunter liegen noch 24 px Innenrand, durch die der Text scrollt. Der Innenrand selbst ist nicht zu aendern, ohne eine Wichtig-Markierung zu schlagen (phase2-premium.css setzt `.modal{padding:24px!important}`), und eine solche Markierung kommt in dieses Blatt nicht. Stattdessen malt die Leiste den Streifen zu - ein Schlagschatten ohne Weichzeichnung, um genau diese 26 px nach unten versetzt. Kein Platzbedarf, keine Ausnahme, kein zweiter Kampf um dieselbe Eigenschaft. ========================================================================= */ #pl420Overlay #modalRoot .pl42-legacy-actionbar{ box-shadow:0 26px 0 0 var(--pl42-bg); } /* ============================================================================ 27 - HERGELEITETE JAHRESZEILEN DER FINANZEN (C225/3) ---------------------------------------------------------------------------- Nachgetragene Saisonzeilen stammen aus dem Gehaltsverlauf, nicht aus einer laufenden Buchung. Die Saeule zeigt das: gestrichelte Oberkante statt voller Flaeche. Wer darauf zeigt, liest es im Hinweistext. ========================================================================= */ #pl420Root .pl42-spark-col.is-hergeleitet>i{ background:linear-gradient(180deg,var(--pl42-gold-deep),rgba(233,185,73,.35)); border-top:2px dashed var(--pl42-gold-bright); } #pl420Root .pl42-spark-col.is-hergeleitet>b{color:var(--pl42-ink-3)} /* ============================================================================ 28 - DAS LIVE-ENDERGEBNIS BLEIBT IM FENSTER (C227, L6) ---------------------------------------------------------------------------- Meldung des Auftraggebers: "Live-Endergebnis: 'Zur Uebersicht' und 'Details' unterhalb des Bildschirms." Die Karte ist so gebaut, dass sie ihre Hoehe nimmt (`.pl391-post{overflow:hidden}`) und in einem mittigen Raster sitzt - ist sie hoeher als das Fenster, liegen Kopf UND Fussleiste ausserhalb. Dieselbe Loesung wie bei den Altdialogen, weil sie sich dort gemessen bewaehrt hat: die Karte rollt zwischen Kopf und Fuss, beide bleiben stehen. Nichts wird abgeschnitten, nichts verschwindet. ========================================================================= */ @media (min-width:981px){ .pl391-live.is-post-match{place-items:stretch;padding:clamp(10px,1.4vw,26px)} .pl391-live.is-post-match .pl391-post{ margin:auto; max-height:100%; min-height:0; overflow:auto; overscroll-behavior:contain; } .pl391-live.is-post-match .pl391-post>header{ position:sticky; top:0; z-index:3; background:linear-gradient(180deg,rgba(9,22,35,.99),rgba(7,18,29,.97)); } .pl391-live.is-post-match .pl391-post>footer{ position:sticky; bottom:0; z-index:3; background:linear-gradient(180deg,rgba(7,18,29,.92),rgba(4,12,20,.99)); border-top:1px solid var(--pl42-line); } } /* Auf dem Telefon traegt die Karte die volle Breite und rollt ohnehin; dort bleibt es bei der bestehenden Regel (ui-v0391/live-match.css:40). */ /* ============================================================================ 29 - DAS POSITIONSFELD RAGT IN DIE VERTRAGSKARTE (C227) ---------------------------------------------------------------------------- Meldung des Auftraggebers, nachgemessen bei 1366x768 im Spielerprofil: der Kasten "POSITION" steht von 1017 bis 1129 px, die Karte "VERTRAG" beginnt davor - Ueberlappung 31 px breit und 151 px hoch. Kein Eindruck, ein Kasten ueber einem anderen. URSACHE: `.pl42-development-grid` hat die Spalten `auto 1fr auto`, und der dritte Kasten traegt `min-width:112px` samt einem Spielfeld von clamp(96px,8vw,130px). Keine der drei Spalten darf unter ihre Inhaltsbreite - also laeuft die Reihe aus der Karte heraus statt umzubrechen. BEHEBUNG: alle drei Spalten duerfen schrumpfen (minmax(0,...)), das Spielfeld bleibt hoechstens so breit wie sein Kasten, und wird es zu eng, rutscht der Positionskasten in eine eigene Zeile, statt den Nachbarn zu ueberdecken. ========================================================================= */ /* C247: Diese Regel stand OHNE Bedingung und hat damit die Telefonregel des Entwicklungsrasters ueberschrieben - drei Spalten auf 390 px. Sie gehoert in dasselbe Band wie Abschnitt 29, aus dem sie stammt. */ @media (min-width:981px){ #pl420Root .pl42-development-grid{ grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto); } } #pl420Root .pl42-position-map{min-width:0} #pl420Root .pl42-position-map .pl42-pitch{max-width:100%;height:auto} @media (max-width:1440px) and (min-width:981px){ /* Gemessen: unter rund 1500 px Fensterbreite bleibt in der dritten Spalte des Spielerkopfes zu wenig Platz fuer Werte UND Spielfeld nebeneinander. */ #pl420Root .pl42-development-grid{grid-template-columns:minmax(0,auto) minmax(0,1fr)} #pl420Root .pl42-development-grid>.pl42-position-map{ grid-column:1/-1; flex-direction:row; align-items:center; gap:var(--pl42-s3); } #pl420Root .pl42-development-grid>.pl42-position-map .pl42-pitch{width:clamp(72px,6vw,104px)} } /* ============================================================================ 30 - ZWEI LAYOUTFEHLER OHNE SCROLLEN (C227) ---------------------------------------------------------------------------- (a) "Lange Begriffe brechen unguenstig um (Aussenverteidiger in Living World)." Deutsche Zusammensetzungen brauchen Trennung, nicht Gewalt: `hyphens:auto` trennt nach den Regeln der Sprache (das Dokument traegt lang="de"), `overflow-wrap:break-word` bleibt als Notausgang fuer den Fall, dass keine Trennstelle passt. Kein Wort wird kleiner gesetzt. (b) "Manche Diagrammbeschriftungen sind sehr klein, obwohl daneben Platz bleibt." Gemessen: die Saisonbeschriftung unter den Saeulen steht mit fest 10 px, waehrend das Haus dafuer --pl42-label hat (11,5 px bei 1366 px Breite) - und die Saeule ist mindestens 44 px breit, hat also Platz. Sie folgt jetzt dem Token wie jede andere Kleinbeschriftung. ========================================================================= */ #pl420Root .pl42-stat strong, #pl420Root .pl42-rival-name small, #pl420Root .pl42-hero-role, #pl420Root .pl42-position-map b{ hyphens:auto; overflow-wrap:break-word; } #pl420Root .pl42-spark-col small{font-size:var(--pl42-label)} /* ============================================================================ 31 - FREIER PLATZ GEHOERT GEFUELLT (C227) ---------------------------------------------------------------------------- "Bitte lass es auch nicht nur kaum Information sein oder halb leer." Gemessen (plan-c227-leere.ps1, 1366x768): Nachrichten 471 px frei (69 %), Transferfenster 232 (34 %), Spieler 199 (29 %), Berater 179 (26 %) - die uebrigen fuenf grossen Tabs 20 bis 37 px (3-5 %). Die vier Leeren stammen NICHT aus der Passung (sie standen vorher schon auf 0 Ueberhang), aber leer bleiben sollen sie nicht. Zwei Mittel, in dieser Reihenfolge: 1. Inhalt statt Luft - die Nachrichtenliste klappt die neueste Nachricht von sich aus auf (v0530-postfach.js). Das fuellt mit Text, nicht mit Abstand. 2. Wo der Inhalt wirklich kurz ist, traegt die letzte Flaeche den Rest der Hoehe, statt am Fuss ein Loch zu lassen. Listen zeigen dadurch mehr Zeilen; Karten stehen buendig statt in der Luft zu enden. ========================================================================= */ @media (min-width:981px){ /* Nachrichten: Kopf fest, Liste nimmt den Rest und rollt in sich. */ #pl420Content[data-pl42-gross="1"]>.pl42-screen--nachrichten{display:flex;flex-direction:column} #pl420Root .pl42-screen--nachrichten>.pl530-kopf{flex:0 0 auto} #pl420Root .pl42-screen--nachrichten>.pl530-liste{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } /* Berater und Transferfenster: die Kopfzeile bleibt, der Inhalt darunter fuellt die Hoehe und rollt erst, wenn er laenger ist als der Platz. */ #pl420Content[data-pl42-gross="1"]>.pl42-screen--berater, #pl420Content[data-pl42-gross="1"]>.pl42-screen--transferfenster{display:flex;flex-direction:column} #pl420Root .pl42-screen--berater>.pl502-kopfzeile, #pl420Root .pl42-screen--transferfenster>.pl502-kopfzeile{flex:0 0 auto} #pl420Root .pl42-screen--berater>:last-child, #pl420Root .pl42-screen--transferfenster>:last-child{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } /* Spieler (C228): die Kopfreihe wurde in V0.57.6 auf die volle Hoehe gestreckt - drei Karten mit Inhalt oben und Luft unten. Der Auftraggeber: "genau das, was ich gesagt habe nicht zu tun." Die Kopfreihe nimmt jetzt ihre natuerliche Hoehe; den Rest der Seite fuellt eine zweite Reihe mit Inhalt (Saison in Zahlen, letzte Einsaetze, Schluesselwerte - Abschnitt 35). Die Spalten der zweiten Reihe folgen denen der ersten (screens.css:269), damit die Kanten durchlaufen. */ #pl420Content[data-pl42-gross="1"]>.pl42-screen--player{display:flex;flex-direction:column} #pl420Root .pl42-screen--player>.pl42-segment{flex:0 0 auto} #pl420Root .pl42-screen--player>.pl42-player-top{flex:0 0 auto} #pl420Root .pl42-screen--player>.pl42-player-saison{ flex:1 1 auto; min-height:0; display:grid; align-items:stretch; grid-template-columns:minmax(0,1.15fr) minmax(0,1.2fr) minmax(0,.78fr); gap:clamp(12px,1.1vw,18px); } #pl420Root .pl42-screen--player>.pl42-player-saison>.pl42-panel{display:flex;flex-direction:column;min-height:0} /* Die Einsatzliste ist der begrenzte Bereich der Reihe: fuenf Zeilen, und wenn die Hoehe nicht reicht, rollt sie in sich (L2). */ #pl420Root .pl42-einsatz-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable} } /* ============================================================================ 32 - KARRIERE-LIVE: DIE EREIGNISLISTE SCHIEBT DEN SPIELBEREICH WEG (C227) ---------------------------------------------------------------------------- Meldung des Auftraggebers: "Laengere Karriere-Live-Simulation: die wachsende Ereignisliste verkleinert den Spielbereich, innere Scrollbereiche." NACHGEBAUT und gemessen (plan-c227-karriereLive.ps1, 1366x768, echte Klassenkette): mit 8 Eintraegen ist die Liste 175 px hoch, mit 200 Eintraegen 3727 px - sie rollt NICHT in sich, stattdessen rollt die ganze Schale. Der Spielbereich bleibt zwar 480 px hoch, wandert beim Rollen aber aus dem Bild. URSACHE, im Quelltext belegt: ui-v0420/shell.css:521 baut die Schale richtig (height:100%, overflow:hidden, Zeilen als minmax(0,fr), Liste mit overflow:auto). v0482-livesim-layout.css:83 haengt SPAETER in der Kette und hebt das unter genau unserer Bedingung wieder auf: @media (max-height:900px) and (min-width:851px){ .pl387-shell{height:auto;max-height:none;min-height:calc(100dvh - 20px);overflow-y:auto} .pl387-feed{min-height:min-content} } `min-height:min-content` schlaegt jede Hoehenangabe - die Liste kann damit nicht mehr schrumpfen und waechst mit jedem Ereignis weiter. Hier wird die urspruengliche Bauart wiederhergestellt: die Schale passt ins Fenster, gerollt wird INNEN. Der Hintergrund behaelt overflow:auto als Notausgang - abgeschnitten wird nichts. ========================================================================= */ /* Ohne Bedingung: ui-v0420/shell.css:521 baut die Schale genau so; hier wird sie nur gegen ein spaeter geladenes Blatt wiederhergestellt. */ #plV0387CareerLive .pl387-shell{ height:100%; max-height:100%; min-height:0; overflow:hidden; } #plV0387CareerLive .pl387-feed, #plV0387CareerLive .pl387-calendar{min-height:0} #plV0387CareerLive .pl387-unten{min-height:0} /* ============================================================================ 33 - WAAGERECHTER LAUF: DIE LAENDERSPIELFENSTER (C227) ---------------------------------------------------------------------------- Gemessen (plan-c227-quer.ps1, 1366x768): auf der Nationalmannschaft laeuft EIN Kasten waagerecht, und zwar heftig - .pl42-hscroll ist 522 px breit und traegt 1040 px Inhalt, also 518 px Ueberhang. Man sieht weniger als die Haelfte der Fenster. (Zum Vergleich: Kalender 270 und 101 px in den dafuer vorgesehenen Bereichen, Ligatabelle 19 px - das ist gewollt und klein.) Die Seite selbst laeuft auf keiner Route waagerecht (seiteQuer 0). URSACHE: `.pl42-window` ist mit `flex:0 0 200px` fest, die Liste mit `min-width:min-content` unzerbrechlich - vier Fenster brauchen 830 px, die Spalte hat 522. Eine Karte mit Datum und Zustand muss aber nicht 200 px breit sein, und eine Liste aus vier gleichartigen Karten darf umbrechen. Ein Zeitfenster, das man erst scrollen muss, um es zu sehen, ist die Art Scrollen, die der Auftraggeber ausdruecklich nicht will. ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-window-list{flex-wrap:wrap;min-width:0} #pl420Root .pl42-window{flex:1 1 168px;width:auto;min-width:0;max-width:none} /* C247: Hier stand eine Regel, die nichts tat. `overflow-x:visible` ist wirkungslos, sobald derselbe Kasten overflow-y:hidden traegt - der Browser macht daraus zwingend overflow-x:auto. Die beiden Regeln darueber erledigen die Arbeit allein. Entfernt, damit niemand sie fuer die Behebung haelt. */ } /* Nachmessung: durch den Umbruch waechst der Block um 146 px, die Nationalmannschaft (eine Detailroute, auf der Scrollen erlaubt ist) steht damit bei 146 px Ueberhang statt 0. Ein Teil davon kommt zurueck, wenn die Fensterkarten auf dem Laptop kompakter stehen - ihr Inhalt sind drei kurze Zeilen. */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-window{padding:var(--pl42-s2) var(--pl42-s3);gap:2px} #pl420Root .pl42-window-list{gap:var(--pl42-s2)} } /* ============================================================================ 34 - HANDY: DAS PORTRAET NIMMT DIE HALBE SEITE (C227, L7) ---------------------------------------------------------------------------- Regel des Auftraggebers: "Handy: eigenes einspaltiges Layout, keine verkleinerte Desktopansicht." Gemessen bei 390x844: das Layout IST eigen - eine Spalte, Fussleiste mit sechs Zielen, kein waagerechter Lauf auf einer einzigen Route (quer = 0 ueberall). Das stimmt also. Was nicht stimmt, sieht man erst im Bild: das Portraet steht mit voller Breite und rund 350 px im Bild - fast die halbe Seitenhoehe fuer eine Zierflaeche. "Naechstes Spiel" samt seiner Aktion beginnt erst darunter. Auf einem Telefon ist der erste Bildschirm die ganze Miete. Das Portraet steht deshalb wieder NEBEN dem Namen statt darueber, mit fester, kleiner Breite. Der Kopf der Uebersicht schrumpft damit von rund 580 px auf rund 230 - der Rest ist Inhalt. ========================================================================= */ @media (max-width:640px){ #pl420Root .pl42-overview-top .pl42-hero{flex-direction:row;align-items:flex-start;gap:var(--pl42-s3)} #pl420Root .pl42-overview-top .pl42-keyart{ width:clamp(104px,30vw,148px); max-width:none; margin:0; flex:0 0 auto; aspect-ratio:100/124; } #pl420Root .pl42-overview-top .pl42-hero-copy{min-width:0} #pl420Root .pl42-overview-top .pl42-hero-name{font-size:var(--pl42-h1)} /* Die zwei Knoepfe unter dem Namen bleiben nebeneinander, solange sie passen. */ #pl420Root .pl42-overview-top .pl42-hero-links{gap:var(--pl42-s2)} } /* ============================================================================ 35 - SPIELERPROFIL: EINE ZWEITE REIHE MIT INHALT STATT GEDEHNTER KARTEN (C228) ---------------------------------------------------------------------------- Was ein Spielerprofil zeigt, wenn es ernst gemeint ist: Kopf, Entwicklung, Vertrag - und dazu die Saison in Zahlen, die letzten Einsaetze mit Note und die staerksten Werte. Die drei neuen Karten stehen unter den drei Kopfkarten in denselben Spalten. Die Einsatzzeile ist die Ergebniszeile des Hauses (.pl42-result-row / --open: Knopf, Rahmen, Hover), nur als Raster mit benannten Spalten: Datum, Gegner, Ergebnis, Ausgang, Leistung, Chevron. ========================================================================= */ #pl420Root .pl42-saison-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--pl42-s3) var(--pl42-s4); align-content:start; } #pl420Root .pl42-saison-grid .pl42-stat small{white-space:nowrap} #pl420Root .pl42-einsatz-zeile{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto auto; column-gap:var(--pl42-s3); align-items:center; } #pl420Root .pl42-einsatz-zeile>time{font-size:var(--pl42-label);color:var(--pl42-ink-4);white-space:nowrap;font-variant-numeric:tabular-nums} #pl420Root .pl42-einsatz-zeile .pl42-result-side small{font-size:var(--pl42-label);color:var(--pl42-ink-4);font-weight:800;white-space:nowrap} #pl420Root .pl42-einsatz-zeile>.pl42-result-perf{white-space:nowrap;text-align:right} #pl420Root .pl42-einsatz-zeile>.pl42-ico{justify-self:end} #pl420Root .pl42-schluessel-karte .pl42-attr:last-child{margin-bottom:0} /* ============================================================================ 36 - SENKRECHTE SCHRIFT IM SPIELERKOPF: DIE BEHEBUNG VON 29 UND 30 HAT SIE ERZEUGT (C229) ---------------------------------------------------------------------------- Meldung des Auftraggebers (16.09., "die Darstellung ist schlecht"), gemessen bei 1536x912 im Spielerprofil: FORM 21 x 25 px FITNESS 21 x 50 px POTENZIAL 21 x 63 px Buchstabe unter Buchstabe, und die Werte 47 / 95 / 85 mitten durchgebrochen. Auf dem Bild ist es die auffaelligste Karte des ganzen Bildschirms. URSACHE, und sie liegt in ZWEI eigenen Behebungen, die einzeln richtig sind: Abschnitt 29 gab den drei Spalten `minmax(0,...)`, damit das Positionsfeld nicht mehr in die Vertragskarte ragt. Seither darf JEDE Spalte unter ihre Inhaltsbreite - auch die mittlere mit den Werten. Abschnitt 30 gab `.pl42-stat strong` ein `overflow-wrap:break-word`, damit lange deutsche Zusammensetzungen umbrechen statt ueberzulaufen. Zusammen heisst das: Die Spalte darf auf 21 px schrumpfen, und was nicht passt, bricht Buchstabe fuer Buchstabe. Unterhalb 1440 px faellt die Karte ohnehin auf zwei Spalten (Abschnitt 29), deshalb tritt es NUR in der breiten Ansicht auf - und genau die faehrt der Auftraggeber. BEHEBUNG, zwei Zeilen, und keine davon nimmt 29 oder 30 zurueck: (a) Die Wertespalte darf nicht unter den Platz ihrer laengsten Beschriftung. `min-width:max-content` zwingt das Raster, ihr die Breite zu geben, die "POTENZIAL" braucht - der Umbruch von 29 bleibt fuer die anderen beiden Spalten erhalten. (b) Eine kurze Beschriftung wie FORM oder POTENZIAL bricht NIE. Sie ist ein Wort und wird als Wort gesetzt. `overflow-wrap` aus 30 bleibt fuer die langen Begriffe (Aussenverteidiger) da, wo es hingehoert. GEGENPROBE, die diese Zeile begleiten muss: Die Karte darf danach nicht wieder in die Nachbarkarte ragen - das war der Anlass von 29. Gemessen wird der Abstand zwischen `.pl42-development` und `.pl42-player-contract`. ========================================================================= */ #pl420Root .pl42-development-values{min-width:max-content} #pl420Root .pl42-development-values .pl42-stat small, #pl420Root .pl42-development-values .pl42-stat strong{ white-space:nowrap; overflow-wrap:normal; hyphens:none; } /* ============================================================================ 37 - KALENDER: 126 px TOTE FLAECHE UNTER DER ZEITSPUR (C229) ---------------------------------------------------------------------------- Meldung des Auftraggebers: "der Kalender ist zu gequetscht". Gemessen bei 1536x912: Kopfkarte (01. Januar) 163 px SAISONZEITACHSE 358 px <- davon 126 px LEER DEZEMBER 2026 - FEBRUAR 2027 210 px <- zeigt EINE Woche Die Zeitachse traegt ihren Inhalt bis 232 px; die restlichen 126 px sind Polsterung unter der Spur. Das Monatsraster muss sich derweil mit 210 px begnuegen und rollt innen - von drei angekuendigten Monaten ist eine Woche zu sehen. WARUM ES SO GEKOMMEN IST, und das ist keine Nachlaessigkeit: Abschnitt "Kalender: umgeordnet statt gequetscht" hatte eine Hoechsthoehe samt `overflow:hidden`. Die C228-Meldung zeigte, dass genau das die Zeitleiste mit Marken und Heute-Punkt unter die Kante drueckte - sichtbar blieben nur die oberen Beschriftungen. Die Hoechsthoehe musste also weg. Nur greift die Sparfassung der Spur (`timeline-lane{height:70px}`) seither an `max-height:800px` - und der Auftraggeber faehrt 912. BEHEBUNG: Die Spur wird auf dem Schreibtisch IMMER sparsam gesetzt, nicht nur auf niedrigen Fenstern. Kein `overflow:hidden`, keine Hoechsthoehe - die Polsterung wird kleiner, nicht der Inhalt abgeschnitten. Das ist der Unterschied zwischen "passt" und "ist abgeschnitten", und er ist genau der Fehler, den C228 aufgedeckt hat. ERWARTET: Zeitachse von 358 auf rund 230 px, Monatsraster von 210 auf rund 340 px - statt einer Woche sind vier bis fuenf zu sehen. GEGENPROBE: Die Zeitleiste muss danach VOLLSTAENDIG sichtbar bleiben - Marken, Beschriftungen und der Heute-Punkt. Wird sie wieder angeschnitten, ist die Behebung falsch und nicht das Band zu kuerzen. ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-timeline-lane{height:70px} #pl420Root .pl42-timeline{padding:6px 22px 10px} /* Der Koerper bekommt, was die Spur nicht mehr braucht. */ #pl420Root .pl42-screen--calendar>.pl42-cal-body{flex:1 1 auto;min-height:0} } /* ============================================================================ 38 - LIGA & SPIELE: DIE TABELLE ZEIGT 2 VON 18 (C229) ---------------------------------------------------------------------------- Meldung des Auftraggebers: "die Tabelle ist zu gequetscht". Gemessen bei 1536x912: Tabelle hat 18 Zeilen a 42 px = 833 px Roller dafuer 183 px SICHTBAR 2 Zeilen Die linke Spalte ist 533 px hoch. Davon nimmt die Kopfkarte (Titel, Wappen, Pokalbild, vier Zahlen) den groessten Teil; was uebrig bleibt, geht an die Ueberschrift, den Knopf "Spalten" und die Legende - und der Rest, 183 px, ist die Tabelle selbst. Die Kopfkarte ist ein Schild, die Tabelle ist der Inhalt. Heute bekommt das Schild die Hoehe. BEHEBUNG nach der Vorgabe des Auftraggebers (kleine Uebersicht auf dem Tab, Tiefe im Detailschirm - `competition-stats` gibt es bereits): (a) Das Schild bekommt eine Hoechsthoehe. Es wird nicht kleiner gesetzt und verliert nichts - es hoert nur auf, mitzuwachsen. (b) Der Tabellenroller nimmt, was frei wird (`flex:1 1 auto`), statt einer festen Restgroesse. ERWARTET: von 2 auf 8 bis 10 sichtbare Zeilen. Das ist eine Uebersicht - Tabellenfuehrer, eigener Platz, die Nachbarn. Die vollen 18 bleiben im Detailschirm, und der darf rollen. GEGENPROBE: Der Ueberhang der Seite muss 0 bleiben, und die Kopfkarte darf ihre vier Zahlen nicht verlieren - wird sie angeschnitten, ist die Hoechsthoehe zu klein und nicht die Tabelle zu gross. ========================================================================= */ @media (min-width:981px){ /* V0.58.9 (D10): `>*>` traf auch die Seitenkarte "Naechstes Spiel" - sie ist ebenfalls .pl42-panel.pl42-flush und erstes Kind von .pl42-comp-side. Mit 172 px Deckel und zentriertem Inhalt lief sie oben aus der Spalte (Ueberschrift und Wappen angeschnitten, gemessen 23-34 px) und der Spielknopf unten in "Letzte Spiele" (7-19 px). Eingeengt wie C247 in der Nachbarregel; die Kopfkarte behaelt ihre 172 px (Gewicht jetzt (1,5,0), 38b und 44b bleiben dahinter). */ #pl420Root .pl42-screen--competitions .pl42-comp-hero, #pl420Root .pl42-comp-body>.pl42-comp-main>.pl42-panel.pl42-flush:first-child{ max-height:172px; flex:0 0 auto; overflow:visible; } /* Die Tabellenkarte bekommt den Rest und reicht ihn an den Roller weiter. */ /* C247: `>*>` traf auch die Seitenspalte und machte dort die Abschnitte 22 und 23 rueckgaengig. Auf die Hauptspalte eingeengt. */ #pl420Root .pl42-comp-body>.pl42-comp-main>.pl42-panel:not(:first-child){ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } #pl420Root .pl42-comp-body .pl42-table-scroll, #pl420Root .pl42-comp-body .pl42-panel>.pl42-hscroll{ flex:1 1 auto; min-height:220px; } } /* ============================================================================ 38b - BERICHTIGUNG ZU 38: min-height SCHLAEGT max-height (C229) ---------------------------------------------------------------------------- Abschnitt 38 setzte der Kopfkarte `max-height:172px`. Gemessen danach: weiterhin 184 px, Tabelle weiterhin 2 von 18 Zeilen. Die Regel stand im Stilblatt (3 Treffer im geladenen Blatt), sie wirkte nur nicht. URSACHE: Die Karte traegt `min-height:184.32px` - das sind 12vw bei 1536 px Fensterbreite. In CSS gewinnt `min-height` gegen `max-height`, immer. Eine Hoechsthoehe neben einer groesseren Mindesthoehe ist wirkungslos, und sie meldet das nicht: die Regel steht da, sie greift, und die Zahl bleibt. Das ist dieselbe Form wie die Fehler dieser Woche - eine Vorgabe, die aussieht, als wirke sie. Deshalb steht sie hier und wird nicht in 38 ueberschrieben. BEHEBUNG: Die Mindesthoehe wird auf dem Schreibtisch aufgehoben. Sie ist fuer das Telefon gedacht, wo die Karte die volle Breite traegt; auf dem Schreibtisch macht sie aus einem Schild einen Platzhalter. GEGENPROBE (unveraendert aus 38): Die vier Zahlen der Kopfkarte muessen vollstaendig sichtbar bleiben. Verschwindet eine, ist die Hoehe zu klein. ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-screen--competitions .pl42-comp-hero{ min-height:0; max-height:150px; } } /* ============================================================================ 39 - LIGA & SPIELE: 135 px FUER EIN SUCHFELD (C229) ---------------------------------------------------------------------------- Nach 38/38b: Kopfkarte 153, Tabellenkarte 363, davon 214 Roller = 3 von 18 Zeilen. Die Spalte kann nicht weiter wachsen, weil unter ihr die Karte "Weltligen" steht: 135 px, Inhalt ist eine Ueberschrift, ein Verweis und ein Suchfeld. Das ist kein Vorwurf an die Karte - sie ist der Eingang in den Weltfussball und gehoert auf den Tab. Sie braucht dafuer aber keine 135 px. BEHEBUNG: Sie wird zu einer Zeile. Ueberschrift links, Verweis rechts, Suchfeld daneben - was frei wird, geht an die Tabelle. Das ist genau die Vorgabe des Auftraggebers: kleine Uebersicht auf dem Tab, Tiefe im Detailschirm (hier "Weltfussball oeffnen"). ERWARTET: Roller von 214 auf rund 270 px, 6 statt 3 sichtbare Zeilen. GEGENPROBE: Das Suchfeld muss bedienbar bleiben - volle Hoehe der Eingabe, kein abgeschnittener Text, und der Verweis bleibt anklickbar. V0.58.9 (D11): Der Kommentar oben versprach eine Zeile, die Regeln setzten nur Abstaende - gemessen blieb die Karte 112 px hoch (zwei Zeilen plus 14 px margin-top aus v0505-berater-tab.css:94). Schlimmer: die Suchtreffer (bis 8) standen im Fluss und liessen sie auf 499 px wachsen; die Hauptspalte fiel dann auf 79 px, die Tabelle auf 0 Zeilen. Jetzt wirklich eine Zeile (Kopf links, Suchfeld rechts), die Treffer sind eine Aufklappliste UEBER der Karte mit eigenem, begrenztem Rollbereich - die Karte wird durch Tippen nicht hoeher. Die Karte wird ausserdem nicht mehr erst vom Sekundentakt angehaengt (v0509: Beobachter), die Hoehen haengen also nicht mehr von der Zeit ab. V0.58.9 (Nachbessern): Auf dem Schreibtisch steht die Karte jetzt am Ende der HAUPTSPALTE (v0509 tick/ortFuer), damit die Seitenspalte bis unten reicht. Die Regeln treffen sie darum als Nachfahre, nicht als Kind des Schirms. Gewicht (1,5,0) mit der ganzen Klassenkette der Karte: schlaegt Abschnitt 38 (.pl42-comp-main>.pl42-panel:not(:first-child), (1,4,0), flex:1 1 auto und flex-direction:column) - sonst wuechse die Karte mit und stuende senkrecht. Die Vollansicht "Alle" ist ausgenommen: dort verbirgt Abschnitt 40 die Karte mit (1,3,0). Kinder (1,6,0) gegen v0589-liga.css Block A (1,4,0). ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-screen--competitions:not(.pl42-nur-tabelle) .pl42-panel.pl502-panel.pl509-panel{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:var(--pl42-s4); row-gap:var(--pl42-s2); position:relative; flex:0 0 auto; min-height:0; margin-top:0; padding-top:var(--pl42-s3); padding-bottom:var(--pl42-s3); } #pl420Root .pl42-screen--competitions:not(.pl42-nur-tabelle) .pl42-panel.pl502-panel.pl509-panel>.pl42-panel-head{ flex:1 1 240px; min-width:0; margin-bottom:0; } #pl420Root .pl42-screen--competitions:not(.pl42-nur-tabelle) .pl42-panel.pl502-panel.pl509-panel>.pl42-panel-head h3{margin:0} /* Die Karte steht in der Hauptspalte, und die ist bei 1024 px nur rund 555 px breit: Kopf (240) + Suchfeld (420) passten nicht in eine Zeile, die Karte wurde zweizeilig (104 px) und schob im Pokal (es) die Spalte ueber ihren Rand (gemessen messungen/nb5-es.txt, 1024x768). Das Suchfeld beginnt deshalb bei 200 px und waechst dreimal so schnell wie der Kopf bis 420 px - ab rund 760 px Spaltenbreite (gerechnet; alle Laptopgroessen) bleibt es 420 px breit wie bisher. */ #pl420Root .pl42-screen--competitions:not(.pl42-nur-tabelle) .pl42-panel.pl502-panel.pl509-panel>.pl509-suche{ flex:3 1 200px; max-width:420px; margin-top:0; } #pl420Root .pl42-screen--competitions:not(.pl42-nur-tabelle) .pl42-panel.pl502-panel.pl509-panel>.pl509-treffer:empty{display:none} #pl420Root .pl42-screen--competitions:not(.pl42-nur-tabelle) .pl42-panel.pl502-panel.pl509-panel>.pl509-treffer:not(:empty){ position:absolute; right:var(--pl42-s3); bottom:calc(100% + var(--pl42-s1)); z-index:5; width:min(420px,calc(100% - var(--pl42-s6))); max-height:min(320px,45vh); overflow-y:auto; overscroll-behavior:contain; margin:0; padding:var(--pl42-s2); background:var(--pl42-panel-2); border:1px solid var(--pl42-line); border-radius:var(--pl42-r-sm); box-shadow:var(--pl42-shadow-1); } } /* ============================================================================ 40 - DIE VOLLANSICHTEN: NUR DIE TABELLE, NUR DER KALENDER (C229) ---------------------------------------------------------------------------- Vorgabe des Auftraggebers (17.09.): "bei Kalender und Liga waere ein Button gut, wo man nur den Kalender und die Liga ansehen kann." Das loest den Widerspruch, gegen den die Abschnitte 28 bis 39 einzeln angekaempft haben: Ein grosser Tab soll passen UND alles zeigen. Gemessen bei 1536x912 geht das nicht - die Tabelle braucht 800 px fuer 18 Zeilen und hat 233, das Monatsraster braucht rund 1950 px fuer drei Monate und hat 302. Kein Stilblatt macht aus 1950 px 302. Der Ausweg ist keine weitere Regel, sondern eine zweite Ansicht: Der Tab bleibt die Uebersicht, ein Knopf zeigt die Sache allein - und DORT darf gerollt werden, genau wie in den Detailschirmen. Gebaut ist es als Routenparameter (`nur`), nicht als neuer Schirm: Die Tabelle wird nicht ein zweites Mal gebaut, sie bekommt nur die ganze Seite. Damit gibt es keine zweite Stelle, die beim naechsten Umbau vergessen wird. GEGENPROBE, die hier zwingend ist: Der Knopf "Zurueck" muss die Uebersicht unveraendert wiederherstellen - gleiche Hoehen, gleiche Knopfzahl. Eine Vollansicht, aus der man nicht sauber zurueckkommt, ist schlimmer als keine. ========================================================================= */ /* --- nur die Tabelle ------------------------------------------------------ Die KOPFKARTE BLEIBT, und das ist eine Entscheidung: Eine Vollansicht der Tabelle ohne die Angabe, WELCHE Tabelle das ist, waere schlechter als eine mit. Sie traegt Liganame, Platz, Punkte und Spieltag auf 153 px - das ist der Bezug, den die Zahlen darunter brauchen. Weg sind die Seitenspalte (Naechstes Spiel, Letzte Spiele, Deine Statistik) und die Weltligen-Karte: beides gehoert der Uebersicht, nicht der Tabelle. */ #pl420Root .pl42-nur-tabelle .pl42-comp-side, #pl420Root .pl42-nur-tabelle>.pl42-panel:last-child{display:none} #pl420Root .pl42-nur-tabelle .pl42-comp-body{grid-template-columns:minmax(0,1fr)} #pl420Root .pl42-nur-tabelle .pl42-comp-main{min-height:0} #pl420Root .pl42-nur-tabelle .pl42-comp-main>.pl42-panel{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } /* Hier IST das Rollen richtig - es ist die Detailansicht der Tabelle. */ #pl420Root .pl42-nur-tabelle .pl42-hscroll{flex:1 1 auto; min-height:0; overflow:auto} #pl420Root .pl42-nur-tabelle .pl42-table{width:100%} /* --- nur der Kalender ----------------------------------------------------- */ #pl420Root .pl42-nur-kalender>.pl42-cal-hero, #pl420Root .pl42-nur-kalender>.pl42-panel:not(.pl42-cal-hero):not(.pl42-cal-body), #pl420Root .pl42-nur-kalender .pl42-cal-side{display:none} #pl420Root .pl42-nur-kalender>.pl42-cal-body{ grid-template-columns:minmax(0,1fr); flex:1 1 auto; min-height:0; } #pl420Root .pl42-nur-kalender .pl42-cal-body>.pl42-panel{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } #pl420Root .pl42-nur-kalender .pl42-hscroll{flex:1 1 auto; min-height:0; overflow:auto} /* Die Zellen duerfen atmen, wenn die Seite ihnen gehoert. */ #pl420Root .pl42-nur-kalender .pl42-calgrid-cell{min-height:96px} /* ============================================================================ 41 - ECHO IST EIN STROM, KEIN TAB: ABSCHNITT 3 WIRD ZURUECKGENOMMEN (C229) ---------------------------------------------------------------------------- Abschnitt 3 hat der Beitragsliste einen eigenen, begrenzten Bereich gegeben, weil sie "9953 px hoch war und die ganze Seite mit sich gezogen hat". Das war unter der Annahme richtig, Echo sei einer der grossen Tabs, die passen muessen. DIE ANNAHME WAR FALSCH. In der Schale steht Echo NICHT als group:'primary' - nur overview, player, competitions, calendar und career tun das. Die Passungswache hatte neun Namen fest eingetippt, waehrend ihr eigener Kopf behauptete, sie lese group:'primary'; Echo, Berater, Transferfenster und Nachrichten wurden also gegen ein Band gemessen, das fuer sie nie galt. (Berichtigt am 17.09. in plan-c227-passung.ps1 - die Gruppen kommen jetzt aus der Schale.) Der Auftraggeber hat es in einem Satz gesagt: "Hier darf gescrollt werden, es soll ein social media sein." Ein sozialer Strom, der in einem Kasten von 400 px rollt, waehrend darum herum Platz leer steht, ist kein Strom. Deshalb: Die Liste rollt wieder mit der Seite. Das ist keine Verschlechterung gegenueber Abschnitt 3, es ist die Ruecknahme einer Behebung, deren Anlass sich als Messfehler herausgestellt hat. GEGENPROBE: Kopf (Profil, Schreibfeld, Filter) und Seitenspalte duerfen dabei nicht verrutschen, und der waagerechte Lauf muss 0 bleiben. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--echo{display:block} #pl420Root .pl42-screen--echo>.pl532-spalten{flex:none;min-height:0} #pl420Root .pl42-screen--echo .pl532-liste{ flex:none; min-height:0; overflow-y:visible; padding-right:0; } /* Die Seitenspalte darf jetzt wieder mitlaufen - in einer rollenden Seite ist genau das ihr Zweck. */ #pl420Root .pl42-screen--echo .pl532-seite{position:sticky; top:var(--pl42-s3)} } /* ============================================================================ 42 - ECHO: DER PROFILBANNER SIEHT UNFERTIG AUS (C229) ---------------------------------------------------------------------------- Meldung des Auftraggebers: "das Layout mit dem roten Strich ueber der Schrift oder rotem Balken". Gemeint ist `.pl532-profil-band` - 74 px hoch, `opacity:.55`, darauf ein Farbverlauf aus den VEREINSFARBEN (v0532-echo.js:1061). Die Idee ist richtig: Das Titelbild traegt die Identitaet des Vereins. Die Ausfuehrung liest sich aber als Platzhalter - ein flacher Farbblock, der unten hart abschneidet, und bei Leipzig Saxons ein Magentarot, das neben dem marineblauen Haus und seinem Gold fremd wirkt. BEHEBUNG, ohne die Vereinsfarbe wegzunehmen: (a) Ein Schleier von unten nach oben blendet das Band in die Karte - kein harter Schnitt mehr an der Kante, an der die Schrift beginnt. (b) Die Farbe wird gedaempft (opacity .55 -> .38) und bekommt eine leichte Vignette, damit sie als Hintergrund liest und nicht als Flaeche. (c) Etwas hoeher (74 -> 96 px), damit das Rundbild sichtbar hineinragt, statt auf der Kante zu sitzen - das ist die Bauform, die jeder von einem sozialen Profil kennt. GEGENPROBE: Name, Kennung und die drei Zahlen (Follower, Folge ich, Beitraege) muessen vollstaendig lesbar bleiben; der Schleier darf keinen Text verschlucken. ========================================================================= */ #pl420Root .pl532-profil-band{ height:96px; opacity:.38; position:relative; } #pl420Root .pl532-profil-band::after{ content:''; position:absolute; inset:0; /* Kein Weiss-Schleier und kein Hex hinter dem Token - die Stil-Wache haelt beides fuer einen harten Verstoss, und sie hat recht: ein Weiss ueber einer Vereinsfarbe entfaerbt sie, und ein Ersatzwert hinter var() ist eine zweite Palette, die niemand pflegt. Der Schleier ist der Kartenton selbst. */ background:linear-gradient(to bottom, transparent 34%, var(--pl42-panel) 100%); pointer-events:none; } #pl420Root .pl532-profil-inhalt{margin-top:-42px} /* ============================================================================ 43 - SPIELER: 15 px UEBERHANG BEI 1366x768 (C229) ---------------------------------------------------------------------------- Der letzte Verstoss gegen die Passung der grossen Tabs. Gemessen: Reiterleiste 50 px Kopfreihe (Portraet, Entwicklung, Vertrag) 407 px zweite Reihe (Saison, Einsaetze, Schluesselwerte) 174 px zwei Luecken a 9,6 19 px ------------------------------------------------ 650 + Polsterung = 693 sichtbar 678 px -> 15 px zu viel Bei 1536x912 passt es (808 px sichtbar); nur auf dem niedrigeren Fenster fehlen die 15 px. Er war schon vor der heutigen Arbeit da. BEHEBUNG: Die Kopfreihe gibt auf niedrigen Fenstern 16 px ab. NICHT die zweite Reihe - die traegt Saisonzahlen, Einsatzliste und Schluesselwerte und ist mit 174 px ohnehin die knappste. AUSDRUECKLICH NICHT: die Breite anfassen. Genau das hat in Abschnitt 29/30 die senkrechte Schrift erzeugt - eine Spalte, die unter ihre Inhaltsbreite darf, bricht kurze Beschriftungen Buchstabe fuer Buchstabe. Hier wird nur Hoehe genommen. GEGENPROBE: senkrechte Schrift muss 0 bleiben, und die vier Zahlen der Entwicklungskarte (Form, Fitness, Potenzial, Fortschritt) muessen vollstaendig sichtbar bleiben. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-screen--player>.pl42-player-top{max-height:386px} #pl420Root .pl42-screen--player .pl42-player-portrait, #pl420Root .pl42-screen--player .pl42-player-top img{max-height:100%} } /* ============================================================================ 44 - SKALIEREN NACH OBEN UND NACH UNTEN (C233) ---------------------------------------------------------------------------- Frage des Auftraggebers: "Skaliert das jetzt auch bis zu jeder Groesse?" Gemessen an vierzehn Fenstergroessen, fuenf grosse Tabs je Groesse: nach oben 2560x1440, 1920x1080, 1680x1050: Ueberhang 0, waagerecht 0, senkrechte Schrift 0 - es PASST ueberall. nach unten 1024x768: Uebersicht 25 px ueber, Spieler 6 1024x640 (Mindestmass des Wirts): Uebersicht 92, Spieler 118 ABER "passt" ist nicht "sieht gut aus". Bei 2560x1440 stehen auf der Uebersicht 468 px LEER: die drei Bloecke messen 449 + 86 + 280 px und wachsen nicht mit. Der Spielerbildschirm tut es (seine zweite Reihe geht von 243 auf 726 px) - die Uebersicht hat es nie gelernt. (a) NACH OBEN: Die untere Karte der Uebersicht bekommt den freien Platz, wie es die zweite Reihe des Spielers schon tut. Sie waechst, statt eine leere Flaeche unter sich zu lassen. Ihre Kinder duerfen mit - sonst waechst nur der Rahmen und der Inhalt klebt oben. (b) NACH UNTEN: Unterhalb 800 px Fensterhoehe wird die Polsterung schmaler und die Kopfkarten geben Hoehe ab. NICHT die Listen - die sind dort ohnehin das Knappste. Das Mindestmass des Wirts ist 1024x640; darunter kann das Fenster gar nicht, also ist das die untere Grenze, die halten muss. AUSDRUECKLICH NICHT: an der Breite drehen. Genau das hat in 29/30 die senkrechte Schrift erzeugt. GEGENPROBE: senkrechte Schrift muss an ALLEN Groessen 0 bleiben, und der waagerechte Lauf ebenso. Waechst die untere Karte, darf sie ihre Nachbarn nicht ueberdecken. ========================================================================= */ /* (a) nach oben ------------------------------------------------------------ */ @media (min-width:981px) and (min-height:800px){ #pl420Root .pl42-screen--overview>.pl42-overview-bottom{flex:1 1 auto; min-height:0} #pl420Root .pl42-screen--overview>.pl42-overview-bottom>*{min-height:0} /* Die Kachelraster der unteren Karte duerfen die gewonnene Hoehe verteilen. */ #pl420Root .pl42-screen--overview .pl42-overview-bottom .pl42-panel{ display:flex; flex-direction:column; } #pl420Root .pl42-screen--overview .pl42-overview-bottom .pl42-panel>:last-child{ flex:1 1 auto; min-height:0; } } /* (b) nach unten, bis zum Mindestmass des Wirts ---------------------------- */ @media (min-width:981px) and (max-height:800px){ #pl420Content{padding-top:var(--pl42-s2); padding-bottom:var(--pl42-s2)} #pl420Root .pl42-screen{gap:var(--pl42-s2)} #pl420Root .pl42-screen--overview>.pl42-overview-top{max-height:196px} #pl420Root .pl42-screen--player>.pl42-player-top{max-height:330px} #pl420Root .pl42-screen--calendar>.pl42-cal-hero{max-height:120px} #pl420Root .pl42-screen--competitions .pl42-comp-hero{max-height:120px} #pl420Root .pl42-screen--career .pl42-career-hero{max-height:150px} /* Die Zeitspur wird noch einmal flacher - sie ist eine Uebersicht. */ #pl420Root .pl42-timeline-lane{height:54px} #pl420Root .pl42-timeline{padding:4px 18px 6px} } /* ============================================================================ 45 - BERICHTIGUNG ZU 43/44: EIN DECKEL AUF DEM KASTEN SCHRUMPFT NICHT DEN INHALT (C233) ---------------------------------------------------------------------------- Die Abschnitte 43 und 44 haben den Kopfreihen `max-height` gegeben. Gemessen bei 1024x640 danach: Spieler, Kopfreihe Kasten 330 px (der Deckel) Inhalt 395 px darin das Portraet 372 px hoch Uebersicht, untere Karte Kasten 214 Inhalt 306 Der Kasten wurde kleiner, der Inhalt nicht. Bei `overflow:visible` steht er trotzdem da und zaehlt weiter zur Seitenhoehe - der Ueberhang blieb, obwohl die Regel griff. Das ist dieselbe Form wie 38b (`min-height` schlaegt `max-height`): eine Vorgabe, die aussieht, als wirke sie. Dazu ein zweiter eigener Fehler: `max-height:100%` auf dem Bild tut nichts, solange sein Kasten keine bestimmte Hoehe hat. Prozent von "unbestimmt" ist unbestimmt. BEHEBUNG: Auf kurzen Schirmen wird das BILD begrenzt, nicht sein Kasten - in Pixeln, damit die Angabe bestimmt ist. Und die Karten duerfen schrumpfen (`min-height:0`), sonst halten ihre Kinder die Reihe auseinander. KEIN `overflow:hidden`. Das hat im Kalender die Zeitleiste abgeschnitten und in C228 die Knoepfe verschwinden lassen - abgeschnitten meldet keine Wache. Hier wird kleiner gesetzt, nicht abgeschnitten. GEGENPROBE: Ueberhang bei 1024x640 muss auf 0 gehen, und senkrechte Schrift muss ueber ALLE vierzehn Groessen 0 bleiben. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ /* Das Portraet ist der groesste Einzelposten - 372 px bei 550 px Seite. */ #pl420Root .pl42-screen--player .pl42-player-top img, #pl420Root .pl42-screen--overview .pl42-overview-top img{ max-height:232px; height:auto; object-fit:cover; } /* Karten und ihre Kinder duerfen schrumpfen, statt sich zu stemmen. */ #pl420Root .pl42-screen--player .pl42-player-top>*, #pl420Root .pl42-screen--overview .pl42-overview-top>*, #pl420Root .pl42-screen--overview .pl42-overview-bottom>*, #pl420Root .pl42-screen--overview .pl42-overview-bottom .pl42-panel{ min-height:0; } /* Die Wappen der Uebersicht sind 84 px hoch in 48 px Kaesten. */ #pl420Root .pl42-screen--overview .pl42-badge-xl{width:48px;height:48px} #pl420Root .pl42-screen--overview .pl42-badge-xl svg, #pl420Root .pl42-screen--overview .pl42-badge-xl img{width:100%;height:100%} } /* ============================================================================ 46 - DAS MINDESTMASS: WENIGER ZEIGEN, NICHT ENGER SETZEN (C233) ---------------------------------------------------------------------------- Vorgabe des Auftraggebers: "Ich moechte keinen Ueberlauf. Das sieht unprofessionell aus." Nach 44 und 45 stand es bei 1024x640 auf 73 px (Uebersicht) und 62 px (Spieler). Gemessen, was dort noch ueberlaeuft: Spieler VERTRAG will 375 px, hat 328 ENTWICKLUNG will 346 px, hat 328 Uebersicht drei Karten je rund 30 px zu wenig Das ist kein Abstand mehr und keine Bildgroesse - das ist Text. Bei 550 px nutzbarer Hoehe ist schlicht mehr Inhalt da als Platz. Enger setzen loest es nicht; es muss etwas weichen. DESHALB EIN EIGENER BRUCHPUNKT. 640 ist das Mindestmass des Wirts (ProjectLegendHost.cs, MinimumSize 1024x640) - kleiner kann das Fenster nicht werden, und nur dort gilt diese Regel. Bei 1366x768 fehlen zwei Pixel; dort waere es falsch, eine ganze Reihe wegzunehmen. Der Bruchpunkt ist in stil-wache.pl eingetragen und begruendet, wie es die Regel dort verlangt. WAS WEICHT, und warum gerade das: Spieler die zweite Reihe (Saison, Einsaetze, Schluesselwerte). Sie ist vollstaendig ueber die Verweise BERICHT, ALLE und TRAINING erreichbar - drei Wege, die auf dem Schirm stehenbleiben. Uebersicht die mittlere Karte (Saisonverlauf). Sie ist eine Kurve zum Ansehen, kein Arbeitsmittel, und steht im Karrierebericht. Es wird NICHTS abgeschnitten und nichts unerreichbar: beides hat auf demselben Schirm einen Verweis. Das ist der Unterschied zu `overflow:hidden`, das in C228 die Knoepfe verschwinden liess, ohne dass eine Wache anschlug. GEGENPROBE: Ueberhang bei 1024x640 muss 0 sein - und bei 1024x768 und 1280x720 darf NICHTS verschwinden, dort greift die Regel nicht. ========================================================================= */ @media (min-width:981px) and (max-height:640px){ #pl420Root .pl42-screen--player>.pl42-player-saison{display:none} #pl420Root .pl42-screen--overview>.pl42-phase{display:none} } /* ============================================================================ 47 - DIE LETZTEN FUENF PIXEL: DER DECKEL WAR WIEDER DER FEHLER (C233) ---------------------------------------------------------------------------- Nach 46 stand alles auf 0 ausser dem Spielerbildschirm: 1 bis 5 px zwischen 1024x768 und 1536x912. Nachgerechnet bei 1024x768: Bloecke 49,6 + 330 + 254,9 = 634,5 Luecken 2 x 8 = 16 Polsterung 10 + 10 = 20 zusammen 670,5 GEMESSEN 683 -> 12,5 px unerklaert Die Differenz ist kein Abstand. Es ist der Inhalt, der aus dem gedeckelten Kasten quillt: `.pl42-player-top` traegt `max-height:330px` (Abschnitt 43), die Karte VERTRAG will 375 px, ENTWICKLUNG 346. Bei `overflow:visible` stehen die Ueberhaenge unter dem Kasten und zaehlen weiter. ZUM DRITTEN MAL DIESELBE FORM an einem Tag: 38b (min-height schlaegt max-height), 45 (Deckel schrumpft den Inhalt nicht), und jetzt das. Ein Deckel auf einem Kasten ist eine Aussage ueber den Kasten, nie ueber das, was darin steht. BEHEBUNG: Der Deckel aus 43 faellt weg - er hat ohnehin nie gewirkt. Statt dessen wird der INHALT der drei Kopfkarten auf kurzen Schirmen enger gesetzt: Polsterung und Zeilenabstand, nichts weggenommen. Das ist das erste Mittel der Reihenfolge aus C227 (erst Abstaende, dann Umordnen, dann Aufklapper) - und es genuegt hier, weil es nur um zwoelf Pixel geht. GEGENPROBE: Ueberhang ueber ALLE Groessen 0, senkrechte Schrift 0, und bei 1024x640 muessen weiterhin genau zwei Bloecke stehen (Abschnitt 46). ========================================================================= */ @media (min-width:981px) and (max-height:800px){ /* NACHTRAG, gemessen: Der Deckel aus 43 wurde hier erst entfernt - und das machte es SCHLECHTER (1366x768 von 2 auf 45 px, 1024x768 von 5 auf 42). Ohne ihn nimmt die Kopfreihe ihre volle Hoehe von 431 px; mit ihm sind es 330 plus Ueberhang. Der Deckel hat also sehr wohl geholfen, nur nicht vollstaendig. Er bleibt - und die engeren Abstaende darunter sollen den Rest schliessen, indem sie die natuerliche Hoehe senken. */ /* Statt dessen: die Karten der Kopfreihe setzen enger. */ #pl420Root .pl42-screen--player .pl42-player-top>.pl42-panel{ padding-top:var(--pl42-s3); padding-bottom:var(--pl42-s3); } #pl420Root .pl42-screen--player .pl42-player-top .pl42-stat, #pl420Root .pl42-screen--player .pl42-player-top .pl42-kv, #pl420Root .pl42-screen--player .pl42-player-top .pl42-panel>*+*{ margin-top:var(--pl42-s2); } #pl420Root .pl42-screen--player .pl42-player-top .pl42-development-values{ gap:var(--pl42-s2); } } /* ============================================================================ 48 - DIE LETZTEN FUENF PIXEL, ZWEITER ANLAUF (C233) ---------------------------------------------------------------------------- Gemessen, was die Kopfreihe des Spielers bei 1024x768 wirklich fuellt: Portraet Kasten 328 Inhalt 328 passt ENTWICKLUNG Kasten 328 Inhalt 357 Kopf 26 + Raster 241 + HINWEIS 60 VERTRAG Kasten 328 Inhalt 418 Kopf 26 + 57 + Kopf 26 + 40 + FUSS 157 Der groesste einzelne Posten, der NICHT gebraucht wird, ist der Hinweissatz in der Entwicklungskarte ("Sehr gute Entwicklung - der aktuelle Weg traegt"): 60 px fuer einen Satz, der die Zahlen darueber wiederholt. Auf kurzen Schirmen weicht er. Die Zahlen bleiben, der Knopf bleibt, der Fuss der Vertragskarte bleibt - dort steht "Vertrag & Management". Dazu ruecken die Teile der beiden Karten um vier statt acht Pixel auseinander. Das ist wieder das erste Mittel aus C227 (Abstaende), und es ist hier angemessen: es geht um fuenf Pixel. GEGENPROBE: Ueberhang ueber alle elf Schreibtischgroessen 0, senkrechte Schrift 0, und bei 1024x640 weiterhin genau zwei Bloecke. ========================================================================= */ /* C247: Abschnitt 48 war wirkungslos und hat trotzdem etwas gekostet. Das Blatt haelt selbst fest, dass das Verstecken dieses Hinweissatzes KEINE messbare Wirkung hatte - der Ueberhang blieb ziffernweise gleich. Behoben wurde er spaeter in Abschnitt 49 an ganz anderer Stelle. Der Satz war damit auf JEDEM Laptop versteckt, ohne Gegenwert. Die Regel ist entfernt; die Begruendung darueber bleibt stehen, weil der Fehlversuch die Geschichte der Behebung ist. */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-screen--player .pl42-player-top>.pl42-panel>*+*{ margin-top:var(--pl42-s1); } } /* ============================================================================ 49 - DIE LETZTEN FUENF PIXEL: DER SCHIRM WIRD GEDECKELT, NICHT DER INHALT ---------------------------------------------------------------------------- Drei Fehlversuche, und alle drei aus demselben Grund: ich habe die Ursache vermutet statt sie zu erfragen. 47 Deckel der Kopfreihe aufgehoben -> SCHLECHTER (2 auf 45 px) 48 Hinweissatz der Karte versteckt -> gar keine Wirkung ? Polsterung des Inhalts verkleinert -> gar keine Wirkung, und zwar weil die Regel die KASKADE VERLOR: ich schrieb "#pl420Content" (1,1,0 waere noetig gewesen), in derselben Abfrage steht aber schon mein eigenes "#pl420Root .pl42-content{padding:10px 14px}" - hoehere Gewichtung, also blieb es bei 10 px. Vier meiner eigenen Regeln liegen dort uebereinander; die letzte gewinnt. Erst der Browser hat mir das gesagt, nachdem ich ihn gefragt habe, WELCHE Regel gewinnt. Die Messung bei 1024x768 (player): #pl420Content sichtbar 678, Polsterung 2x10 -> Platz 658 .pl42-screen ist 663,48 hoch -> 5,48 zu viel Bloecke 49,6 + 330 + 254,88 = 634,48, zwei Luecken 16 = 650,48 Der Schirm ist also INHALTSGROSS - er weiss nichts von den 658, die er hat, und deshalb schrumpft auch kein Kind. Genau das wird hier geaendert. BEHEBUNG: Der Spielerschirm bekommt einen Deckel in Hoehe seines Platzes. Der Elternteil hat eine feste Hoehe (er ist der Roller), also ist 100% hier bestimmt und nicht bedeutungslos - anders als in Abschnitt 43, wo ich genau diesen Fehler gemacht habe. Der Deckel wirkt, weil der Schirm eine Spalte ist: die Saisonkarte traegt flex:1 1 auto und min-height:0, gibt die fehlenden Pixel her, und ihre Einsatzliste rollt innen ohnehin. Der Deckel gilt OHNE Hoehenbedingung. Er ist keine Sparmassnahme fuer kurze Schirme, sondern die Aussage "ein Schirm ist nie hoeher als seine Flaeche" - und deshalb greift er auch bei 1536x912 und 1152x864, wo jede Abfrage auf max-height:800px vorbeigeht und trotzdem 2 bis 3 px stehen. GEGENPROBE: 0 Ueberhang auf ALLEN elf Groessen - und die Einsatzliste muss weiter vollstaendig erreichbar sein. Wird sie abgeschnitten statt rollbar, ist der Deckel falsch und gehoert zurueckgenommen. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--player{max-height:100%} } /* ============================================================================ 50 - DIALOGE: HIER STEHT NUR DER BEFUND, DIE BEHEBUNG LIEGT WOANDERS ---------------------------------------------------------------------------- Gemessen am 17.09.2026, alle 22 Dialoge bei 1536x912 und beim Mindestmass 1024x640. Ergebnis fast durchweg gut: kein Querlauf, ueberall ein Deckel, inneres Rollen greift (Kopfzeile klebt oben, Knopfleiste unten). Fuenf Dialoge standen beim Mindestmass 8 px zu tief: Einstellungen, Speicherstaende, Systemerklaerung, Reifebericht, Berater. Der Browser hat gesagt, warum - und die Antwort war groesser als erwartet: VIERZEHN Regeln setzen max-height auf .modal, ELF setzen die Polsterung der Flaeche darunter, verteilt auf sechs Stilblaetter, drei davon mit Wichtig-Markierung. Die beiden Gewinner widersprachen sich: phase2-premium.css .modal-backdrop{padding:24px !important} -> 48 px Luft v03812-responsive.css .modal{max-height:calc(100dvh - 24px) !important} BEHOBEN NICHT HIER, sondern in v03812-responsive.css (jetzt 48 px). Dieses Blatt laedt zwar spaeter, koennte eine Wichtig-Markierung aber nur mit einer zweiten schlagen - und die verbietet die Stil-Wache zu Recht. Ein erster Versuch stand genau hier und war wirkungslos; er ist entfernt, damit niemand ihn spaeter fuer die Behebung haelt. → Wenn zwei Regeln mit Gewalt gesetzt sind und sich widersprechen, ist die Behebung nicht eine dritte Gewalt, sondern die Berichtigung einer der beiden an ihrer Quelle. ========================================================================= */ /* ============================================================================ 51 - MARKTLISTE AUF DEM HANDY: EINE SPALTE STATT DREI ---------------------------------------------------------------------------- Gemessen am 17.09.2026 ueber alle 17 Schirme bei 390x844 und 768x1024: waagerecht rollt NICHTS (q=0 und Seitenrolle 0 auf jeder Breite von 1024 bis 390), kein winziger Schriftgrad, keine senkrecht laufende Schrift. Genau EINE Stelle schneidet ab - die Marktliste des Transferfensters, dort aber 132 Mal: die Vereinsnamen laufen rechts aus ihrer Zelle. Ursache: .pl506-liste li ist ein Raster. Unter 1100 px steht es schon auf drei Spalten (104px, 1fr, 84px), und bei 340 px nutzbarer Breite bleiben der mittleren Spalte 119 px. Ein Vereinsname wie "Barcelona Bluewhite" passt da nicht, und weil die Zelle nicht umbrechen darf (white-space: nowrap), wird er hinausgeschoben statt umgebrochen. BEHEBUNG: Auf Handybreite ist eine Zeile keine Tabelle mehr. Eine Spalte, umbrechender Text - dann kann nichts mehr hinauslaufen. Kein waagerechtes Rollen, weil das auf einem Handy die schlechtere Antwort ist: man findet die Spalte nicht wieder, die man sucht. GEGENPROBE: bei 390x844 duerfen auf KEINEM der 17 Schirme abgeschnittene Texte stehen. Steht dort noch etwas, ist die Zeile nicht die einzige Ursache gewesen. ========================================================================= */ @media (max-width:640px){ #pl420Root .pl506-liste li{ grid-template-columns:minmax(0,1fr); gap:var(--pl42-s1); } #pl420Root .pl506-liste li>*{grid-column:auto} #pl420Root .pl506-route{white-space:normal; overflow:visible; text-overflow:clip} } /* ============================================================================ 52 - LIVE-ANSICHTEN UND DIE LETZTEN TELEFONSTELLEN (C247) ---------------------------------------------------------------------------- Aus dem Quelltextaudit der offenen Fronten von C227 Stufe 2. Drei Befunde betreffen Flaechen, die sich nicht messen lassen, ohne eine Partie zu starten - deshalb steht hier fuer jede, WORAN man merkt, dass sie stimmt. (a) TAFELN DER LIVE-ANSICHT haben einen Deckel, aber kein inneres Rollen. Auf kurzen Schirmen wird Spielerleistung, Traineranweisung und der Statistikreiter unten abgeschnitten, ohne dass man herankommt. ERKENNBAR RICHTIG, wenn man in einem laufenden Spiel bei 1024x640 an das Ende der Spielerliste kommt. (b) DIE KONFERENZLEISTE sitzt als drittes Kind in einer Spalte, deren Zeilendefinition in einer Stilschicht steht. Die dafuer gebaute Mittelzeile greift nie, weil eine ungeschichtete Regel die Spalte auf zwei Zeilen stellt - geschichtete Regeln verlieren gegen ungeschichtete. Hier steht sie ungeschichtet nach, damit die Traineranweisung ihren Platz behaelt. ERKENNBAR RICHTIG, wenn im Live-Spiel Leistung, Konferenz UND Traineranweisung untereinander sichtbar sind. (c) DER HINWEISSTREIFEN und der Transferschluss-Ticker stehen fest 26 px ueber dem unteren Rand - auf dem Telefon also MITTEN auf der unteren Navigationsleiste. Sie verdecken sie nicht nur, sie fangen auch die Beruehrung ab. Dieselbe Zahl wie .pl42-actionbar, damit alles, was ueber der Leiste schwebt, auf derselben Hoehe schwebt. (d) DIE EINSATZZEILE des Spielerprofils ist ein Sechs-Spalten-Raster mit vier umbruchfreien Spalten und hatte im ganzen Baum keine Regel fuer schmale Breiten. ========================================================================= */ #pl391Live .pl391-performance, #pl391Live .pl391-instruction, #pl391Live .pl391-full-stats{overflow:auto; min-height:0} #pl391Live [data-pl391-region="side"].pl496-mit-konferenz{ grid-template-rows:auto minmax(120px,1fr) minmax(188px,.85fr); } @media (max-width:980px){ #pl420Toast{bottom:calc(74px + env(safe-area-inset-bottom,0px))} #pl517Ticker{bottom:calc(74px + env(safe-area-inset-bottom,0px))} } @media (max-width:640px){ #pl420Root .pl42-einsatz-zeile{ grid-template-columns:auto minmax(0,1fr) auto; row-gap:var(--pl42-s1); } } /* ============================================================================ 53 - V0.58.9: KACHELPASSUNG (Pruefbericht zu V0.58.3, D01-D26) Abschnitt 44b hat bei Fensterhoehe <= 800 px fuenf Kopfbereiche GEDECKELT (Uebersicht 196, Spieler 330, Kalender 120, Liga 120, Karriere 150). Das betrifft ALLE drei Laptopgroessen (1536x770, 1366x768, 1280x720), nicht nur das Mindestmass, fuer das die Deckel gedacht waren. Mit overflow:hidden und mittiger Ausrichtung in den Karten wurde aus Seitenueberhang STILLES ABSCHNEIDEN an beiden Enden - die Passungswache zaehlte nur den Ueberhang und sah nichts. Gemessen am 21.09. mit plan-kachelpassung.ps1 (misst abgeschnitten / verdeckt / ueberlappt je Element): Uebersicht 11/12/12 abgeschnittene Elemente bei 1536/1366/1280, 0 bei 1920x1080. Regel dieses Abschnitts: nichts wird mehr STILL geschnitten. Wo der Platz nicht reicht, zeigt es sich als messbarer Ueberhang, und der Platz kommt aus Abstaenden, nicht aus Schrift. ========================================================================= */ @media (min-width:981px) and (max-height:800px){ /* D01-D03: Deckel der Uebersicht aufheben und die Reihe nicht mehr still schrumpfen lassen (Abschnitt 1, Z. 238-239: flex:0 1 auto). */ #pl420Root .pl42-screen--overview>.pl42-overview-top{max-height:none;flex-shrink:0} /* Abschnitt 44 wollte die GES-Zahl auf 38 px senken; die Regel verlor gegen system.css:86 (#pl420Root .pl42-stat>strong.pl42-hero-ovr, 1,2,1). Mit 1,3,1 greift sie. */ #pl420Root .pl42-overview-top .pl42-stat>strong.pl42-hero-ovr{font-size:calc(clamp(28px,2.7vw,38px) * var(--pl42-ui-scale))} /* Der gewonnene Platz kommt aus Abstaenden: Aktionsreihe 10 -> 6 px. */ #pl420Root .pl42-overview-top .pl42-nextmatch-actions{gap:6px} }