/* V0.52.0 (S2-2): Deckel auf die Wachstumsstrecke. Gemessen: von 1366 auf 2560 legt der Heldenname um 51 % zu (42,4 -> 64,1 px), und die Formel kennt keine Obergrenze - auf 3840 px waeren es rund 80 px. Die Strecke endet jetzt bei 2280 px Fensterbreite. Bis dahin aendert sich nichts; 1920 bleibt exakt wie heute. NICHT umgebaut wurde die zweite Skala als solche. Der Plan nahm an, auf 1920 sei nicht mehr zu sehen als auf 1366. Gemessen ist das Gegenteil der Fall: sichtbare Ligazeilen 6 -> 13 -> 18, Ueberhang der Uebersicht 591 -> 383 -> 63 px. Die Inhaltshoehe waechst dabei nur um 8,7 %. */ /* PROJECT LEGEND V0.50.2 - Vollbild MIT Dichte-Skalierung auf hohen Aufloesungen. Rueckmeldung des Nutzers: nur die Deckel aufzuheben streckt die Flaechen, ohne dass Schrift und Elemente mitwachsen - "wirkt billig". Ursache: fast alle Groessen sind clamp(min, X vw, max); ab ~1780px greifen die max-Deckel und NICHTS skaliert mehr mit. Loesung: oberhalb von 1780px laufen die Deckel linear weiter. Einheitlicher Faktor F = 1 + 0.4 * (Breite - 1780) / 1660 -> 1.00 bei 1780, ~1.19 bei 2560, ~1.40 bei 3440. Jede Steigung unten ist Basiswert * F, ausgeschrieben als calc(BASIS + min(100vw - 1780px, 500px) * BASIS*0.000241). Unterhalb 1781px aendert diese Datei ausser dem max-width-Fall nichts. Diese Datei laedt NACH den ui-v0420-Styles (Body-Block) und gewinnt damit auch gegen deren Ultrabreit-Stufen (2200px/3000px), die durch die lineare Skalierung ersetzt werden. Dialoge behalten ihre Lesebreite, nur der Trainingsdialog waechst moderat mit. */ /* Hauptoberflaeche: volle Inhaltsbreite statt Deckel (alle Breiten). */ .pl42-screen{max-width:100%} /* Livespiel (V0.40-Flaeche): Deckel 1640/1960 aufheben, Rand bleibt. */ @media (min-width:1673px){ :root{--pl400-content:calc(100vw - 64px)} } @media (min-width:2200px){ :root{--pl400-content:calc(100vw - 120px)} } /* Altbau-Huellen (Intro/Menue/Legacy-Bereiche) auf breiten Bildschirmen. */ @media (min-width:1720px){ .app-shell{max-width:calc(100vw - 48px)} body.pl39-ui #introScreen .pl312-feature-area{max-width:calc(100vw - 120px)} } /* ==================== Dichte-Skalierung ab 1781px ==================== */ @media (min-width:1781px){ /* ---- Design-Tokens: Typo (mit UI-Skalierung des Nutzers), Abstaende, Radien, Bedienhoehen, Rahmenmasse ---- */ :root{ --pl42-display:calc((50px + min(100vw - 1780px, 500px)*0.0121) * var(--pl42-ui-scale)); --pl42-h1:calc((34px + min(100vw - 1780px, 500px)*0.0082) * var(--pl42-ui-scale)); --pl42-h2:calc((23px + min(100vw - 1780px, 500px)*0.0055) * var(--pl42-ui-scale)); --pl42-h3:calc((17px + min(100vw - 1780px, 500px)*0.0041) * var(--pl42-ui-scale)); --pl42-body:calc((15px + min(100vw - 1780px, 500px)*0.0036) * var(--pl42-ui-scale)); --pl42-small:calc((13px + min(100vw - 1780px, 500px)*0.0031) * var(--pl42-ui-scale)); --pl42-label:calc((11.5px + min(100vw - 1780px, 500px)*0.0028) * var(--pl42-ui-scale)); --pl42-s1:calc(4px + min(100vw - 1780px, 500px)*0.001); --pl42-s2:calc(8px + min(100vw - 1780px, 500px)*0.0019); --pl42-s3:calc(12px + min(100vw - 1780px, 500px)*0.0029); --pl42-s4:calc(16px + min(100vw - 1780px, 500px)*0.0039); --pl42-s5:calc(20px + min(100vw - 1780px, 500px)*0.0048); --pl42-s6:calc(26px + min(100vw - 1780px, 500px)*0.0063); --pl42-s7:calc(34px + min(100vw - 1780px, 500px)*0.0082); --pl42-s8:calc(44px + min(100vw - 1780px, 500px)*0.0106); --pl42-r-sm:calc(10px + min(100vw - 1780px, 500px)*0.0024); --pl42-r-md:calc(14px + min(100vw - 1780px, 500px)*0.0034); --pl42-r-lg:calc(18px + min(100vw - 1780px, 500px)*0.0043); --pl42-touch:calc(44px + min(100vw - 1780px, 500px)*0.0106); --pl42-topbar:calc(66px + min(100vw - 1780px, 500px)*0.0159); --pl42-footer:calc(38px + min(100vw - 1780px, 500px)*0.0092); --pl42-rail:calc(236px + min(100vw - 1780px, 500px)*0.0569); } /* ---- Rahmen & Grundraster ---- */ .pl42-content{padding:calc(26px + min(100vw - 1780px, 500px)*0.0063) calc(26px + min(100vw - 1780px, 500px)*0.009)} .pl42-screen{gap:calc(18px + min(100vw - 1780px, 500px)*0.0043)} .pl42-overview-top,.pl42-overview-bottom,.pl42-attr-grid,.pl42-player-top, .pl42-player-bottom,.pl42-comp-body,.pl42-comp-main,.pl42-comp-side, .pl42-cal-body,.pl42-cal-side{gap:calc(18px + min(100vw - 1780px, 500px)*0.0043)} .pl42-hero,.pl42-hero-facts{gap:calc(26px + min(100vw - 1780px, 500px)*0.0063)} .pl42-panel{padding:calc(20px + min(100vw - 1780px, 500px)*0.0048)} .pl42-panel-head{min-height:calc(26px + min(100vw - 1780px, 500px)*0.0063)} .pl42-rail nav button{min-height:calc(52px + min(100vw - 1780px, 500px)*0.0125)} /* ---- Heldenflaechen, Portrait, Ring, Karten ---- */ .pl42-keyart{width:calc(272px + min(100vw - 1780px, 500px)*0.0656)} .pl42-keyart--compact{width:calc(152px + min(100vw - 1780px, 500px)*0.0366)} .pl42-hero-name{font-size:calc(54px + min(100vw - 1780px, 500px)*0.013)} .pl42-hero--player .pl42-hero-name{font-size:calc(40px + min(100vw - 1780px, 500px)*0.0096)} .pl42-hero-role{font-size:calc(22px + min(100vw - 1780px, 500px)*0.0053)} .pl42-versus{font-size:calc(34px + min(100vw - 1780px, 500px)*0.0082)} .pl42-matchup{gap:calc(34px + min(100vw - 1780px, 500px)*0.0082)} .pl42-nextmatch{min-height:calc(330px + min(100vw - 1780px, 500px)*0.0795)} .pl42-comp-hero{min-height:calc(190px + min(100vw - 1780px, 500px)*0.0458)} .pl42-career-hero{min-height:calc(240px + min(100vw - 1780px, 500px)*0.0578)} .pl42-career-hero-copy h2{font-size:calc(40px + min(100vw - 1780px, 500px)*0.0096)} .pl42-comp-hero-stats .pl42-stat strong{font-size:calc(32px + min(100vw - 1780px, 500px)*0.0077)} .pl42-icon-stat .pl42-stat strong{font-size:calc(20px + min(100vw - 1780px, 500px)*0.0048)} .pl42-ring{width:calc(132px + min(100vw - 1780px, 500px)*0.0318)} .pl42-ring-copy b{font-size:calc(32px + min(100vw - 1780px, 500px)*0.0077)} .pl42-development-values strong{font-size:calc(30px + min(100vw - 1780px, 500px)*0.0072)} .pl42-pitch{width:calc(130px + min(100vw - 1780px, 500px)*0.0313)} /* ---- Attributbalken & Tabellen ---- */ .pl42-attr{margin-bottom:calc(9px + min(100vw - 1780px, 500px)*0.0022)} .pl42-attr i{height:calc(6px + min(100vw - 1780px, 500px)*0.0024)} .pl42-table td{padding:calc(9px + min(100vw - 1780px, 500px)*0.0022) calc(12px + min(100vw - 1780px, 500px)*0.0029)} /* ---- V0.51-Elemente: Ueberkategorie-Chips & Trainingsuebungen ---- */ .pl511-chip{padding:calc(5px + min(100vw - 1780px, 500px)*0.0012) calc(11px + min(100vw - 1780px, 500px)*0.0027)} .pl511-chip small{font-size:calc(10px + min(100vw - 1780px, 500px)*0.0024)} .pl511-chip b{font-size:calc(14px + min(100vw - 1780px, 500px)*0.0034)} .pl511-gruppenwert{font-size:calc(13px + min(100vw - 1780px, 500px)*0.0031)} .pl511-katkopf b{font-size:calc(12px + min(100vw - 1780px, 500px)*0.0029)} .pl511-ueb-kopf b{font-size:calc(13px + min(100vw - 1780px, 500px)*0.0031)} .pl511-ueb-kopf .pl511-ico{font-size:calc(16px + min(100vw - 1780px, 500px)*0.0039)} .pl511-ziel{font-size:calc(10.5px + min(100vw - 1780px, 500px)*0.0025)} .pl511-last{font-size:calc(10px + min(100vw - 1780px, 500px)*0.0024)} .pl511-uebungen{grid-template-columns:repeat(auto-fill,minmax(calc(250px + min(100vw - 1780px, 500px)*0.06),1fr))} .pl511-gruppen{grid-template-columns:repeat(auto-fit,minmax(calc(230px + min(100vw - 1780px, 500px)*0.055),1fr));gap:calc(12px + min(100vw - 1780px, 500px)*0.0029)} .pl511-gruppe .pl511-gross{font-size:calc(30px + min(100vw - 1780px, 500px)*0.0072)} .pl511-gruppe b{font-size:calc(14px + min(100vw - 1780px, 500px)*0.0034)} .pl511-gruppe small{font-size:calc(11px + min(100vw - 1780px, 500px)*0.0027)} .pl511-drillkopf b{font-size:calc(13px + min(100vw - 1780px, 500px)*0.0031)} .pl511-zurueck{font-size:calc(12px + min(100vw - 1780px, 500px)*0.0029)} /* Dialogbreite kommt inline aus v0511-attribute.js. */ /* Livespiel-Flaeche: Grundschrift moderat mitziehen. */ .pl400-ui .content{font-size:calc(16px + min(100vw - 1780px, 500px)*0.0024)} }