/* ============================================================================ V0.59.0 - RESTE DER UEBERGABE (C328, 22.09.2026) Dieses Blatt haengt nach v0589-skalierung-zoom.css und vor ui-v0420/system.css. Keine Wichtig-Markierung, nur Hausmarken (981/1024/980), Tokens statt Literale. ============================================================================ */ /* ---------------------------------------------------------------------------- 1 - ATTRIBUT-REITER 1024x768: 241 px SEITENUEBERHANG (Uebergabe 2D, Punkt 3) ---------------------------------------------------------------------------- Gemessen vorher (plan-kachelpassung.ps1, de, 1024x768): player>attribute S241, sonst 0. Die Hausreihenfolge: erst Abstaende, dann Umordnen, dann ein begrenzter Bereich. - Die Beschreibungszeile des Kopfes ("Uebungen im Training verbessern ...") entfaellt bei 1024: die Gruppenchips direkt darunter tragen dieselbe Aussage in Zahlen. Nichts geht verloren, der Text steht ab 1025 wieder. - Die Werteleisten stehen enger (5 statt 9 px Abstand je Wert). - Das Raster steht in drei statt zwei Spalten (responsive.css:67 setzt bei <=1280 zwei; bei 1024 mit schmaler Leiste sind rund 300 px je Karte frei) und ist der begrenzte Bereich des Reiters: eine Liste von Werten darf in sich rollen, die Seite nicht (Hausregel des Auftraggebers). - Die Sonderregel "letzte Karte ueber die volle Breite" gilt fuer zwei Spalten, nicht fuer drei. - Die Werteleisten stehen einzeilig (Name | Leiste | Wert): zehn Werte brauchen so rund 230 statt 340 px, zwei Kartenreihen passen in die Hoehe. Gemessen nach dem ersten Wurf (zweizeilig): Raster rollte 224 px. BEDINGUNG: kein Breitenbruchpunkt (die Stil-Wache kennt sechs benannte, 1024 ist keiner), sondern das Seitenverhaeltnis - 1024x768 ist 4:3, die Laptop- masse 1280x720 und 1366x768 sind 16:9 und bleiben unberuehrt. -------------------------------------------------------------------------- */ @media (min-width:981px) and (max-aspect-ratio:4/3){ #pl420Root .pl42-screen--player>.pl42-attr-head{flex:0 0 auto;padding:var(--pl42-s3)} #pl420Root .pl42-screen--player>.pl42-attr-head>.pl42-muted{display:none} #pl420Root .pl42-screen--player>.pl42-attr-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:var(--pl42-s2); flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } #pl420Root .pl42-screen--player>.pl42-attr-grid>:last-child:nth-child(odd){grid-column:auto} #pl420Root .pl42-screen--player .pl42-attrgroup{padding:var(--pl42-s2) var(--pl42-s3)} #pl420Root .pl42-screen--player .pl42-attrgroup .pl42-attr{ grid-template-columns:minmax(0,1fr) minmax(48px,72px) auto; column-gap:var(--pl42-s2); row-gap:0; align-items:center; margin-bottom:calc(var(--pl42-s1) / 2); } #pl420Root .pl42-screen--player .pl42-attrgroup .pl42-attr>span{grid-column:1;grid-row:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #pl420Root .pl42-screen--player .pl42-attrgroup .pl42-attr>i{grid-column:2;grid-row:1} #pl420Root .pl42-screen--player .pl42-attrgroup .pl42-attr>b{grid-column:3;grid-row:1} } /* ---------------------------------------------------------------------------- 2 - TABLET 768x1024: DER HINTERGRUND ROLLTE 48 px HINTER ALTDIALOGEN ---------------------------------------------------------------------------- v0589-nacharbeit.css sperrt das Dokument, solange #pl420Overlay data-open="1" traegt. Die Altdialoge (#modalRoot, in den Vorhang verlegt, shell.css:281) setzen diese Marke nicht - sie sind offen, sobald #modalRoot Kinder hat (shell.css:376 blendet den leeren Behaelter aus). Dieselbe Rollsperre, an dieses Merkmal gehaengt. Auf dem Desktop rollt das Dokument nie; die Regel wirkt nur unter der Rail-Marke. -------------------------------------------------------------------------- */ @media (max-width:980px){ html:has(#pl420Overlay #modalRoot:not(:empty)){overflow:hidden} } /* --------------------------------------------------------------------------- V0.60.0 (Pruefbericht V0.59.0 D05): Karriereplanung mit dem Berater, nur unter der Kennung pl600-agent (v0590-rest.js). Gemessen vorher 968 px Inhalt bei 720 px Dialoghoehe (1536x770). Titel einzeilig, Kontext und Hinweis enger, Auswahlkarten waagerecht (Symbol links) - alle Inhalte bleiben. -------------------------------------------------------------------------- */ #pl420Overlay #modalRoot .modal.pl600-agent .modal-head{padding-top:16px;padding-bottom:10px} #pl420Overlay #modalRoot .modal.pl600-agent .modal-head > div{max-width:none;flex:1 1 auto} #pl420Overlay #modalRoot .modal.pl600-agent .modal-head h3{line-height:1.15;max-width:none} #pl420Overlay #modalRoot .modal.pl600-agent .pl-decision-context{margin-bottom:10px} #pl420Overlay #modalRoot .modal.pl600-agent .pl-decision-context > div{padding-top:10px;padding-bottom:10px} #pl420Overlay #modalRoot .modal.pl600-agent .guide-card{margin-top:8px;margin-bottom:8px;padding-top:9px;padding-bottom:9px} #pl420Overlay #modalRoot .modal.pl600-agent .guide-card .guide-dismiss{margin-top:4px;min-height:0;align-items:center} #pl420Overlay #modalRoot .modal.pl600-agent .guide-card .guide-dismiss input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;margin:0 6px 0 0;flex:0 0 18px} #pl420Overlay #modalRoot .modal.pl600-agent .choice-grid{gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))} #pl420Overlay #modalRoot .modal.pl600-agent .choice-card{display:grid;min-height:0;grid-template-columns:32px minmax(0,1fr);column-gap:10px;align-content:start;padding:10px 12px} #pl420Overlay #modalRoot .modal.pl600-agent .choice-card > .choice-icon{grid-row:1 / span 3;margin:2px 0 0;width:32px;height:32px} #pl420Overlay #modalRoot .modal.pl600-agent .choice-card > *:not(.choice-icon){grid-column:2} #pl420Overlay #modalRoot .modal.pl600-agent .choice-card > h4{margin-bottom:3px} #pl420Overlay #modalRoot .modal.pl600-agent .choice-card > p{margin-bottom:7px} #pl420Overlay #modalRoot .modal.pl600-agent .choice-card > .btn{justify-self:start} /* V0.60.0 (D05) beim Mindestmass des Wirts: weniger zeigen - Datum steht im Untertitel, der Hinweistitel bleibt. */ @media (max-height:640px){ #pl420Overlay #modalRoot .modal.pl600-agent .modal-head .pl-context-label{display:none} #pl420Overlay #modalRoot .modal.pl600-agent .guide-card .guide-head p{display:none} } /* --------------------------------------------------------------------------- V0.60.0 (Pruefbericht V0.59.0 D06): Abschluss der Mehrfachsimulation auf kurzen Schirmen - Ergebnisse oben, Leistung und Wirkung nebeneinander. -------------------------------------------------------------------------- */ @media (min-width:981px) and (max-height:800px){ .pl42-modal-body .pl42-three{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px} .pl42-modal-body .pl42-three>section:first-child{grid-column:1 / -1;grid-row:auto} .pl42-modal-body .pl42-three>section{padding-top:10px;padding-bottom:10px} .pl42-modal-body .pl42-three .pl42-panel-head{margin-bottom:6px} .pl42-modal-body .pl42-three .pl42-three-row{padding-top:5px;padding-bottom:5px} .pl42-modal-body .pl42-three>section:has(.pl42-three-perfgrid){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:12px;align-items:start} .pl42-modal-body .pl42-three>section:has(.pl42-three-perfgrid)>.pl42-panel-head{grid-column:1 / -1} .pl42-modal-body .pl42-three .pl42-three-perfgrid, .pl42-modal-body .pl42-three .pl42-three-impact{gap:10px} .pl42-modal-body .pl42-three .pl42-three-rating{margin-top:0;padding-top:8px;padding-bottom:8px;align-self:stretch;display:flex;flex-direction:column;justify-content:center} } @media (min-width:981px) and (max-height:640px){ .pl42-modal-body .pl42-three>section{padding-top:6px;padding-bottom:6px} .pl42-modal-body .pl42-three .pl42-three-row{padding-top:2px;padding-bottom:2px} .pl42-modal-body .pl42-three .pl42-three-record{padding-top:4px} .pl42-modal-body .pl42-three .pl42-panel-head{margin-bottom:3px} } /* V0.60.0 (C297): Minuten der Nachspielzeit ("90+2'" 57 px, "90+10'" 63 px, gemessen) passen nicht in die 47-px-Minutenspalte des Tickers - die Liste bekommt dann fuer alle Zeilen eine breitere Spalte. */ #pl391Live .pl391-feed ol.pl600-nachspiel li{grid-template-columns:64px minmax(0,1fr)} /* V0.60.1 (C337): Entscheidungsdialog der Erzaehlereignisse - Ereignis links, Antworten rechts. Die Anordnung stammt aus ui-v0391/events.css (V0.39.1, Karriere-Live-Unterbrechung); dort haengt sie an body.pl39-ui, das der PL420-Rahmen nicht mehr setzt - sie griff darum nirgends, der Dialog stapelte Kopf und vier Antwortkarten untereinander und rollte innen (1366x768: bei 7 bis 10 von 11 Jugend-Ereignissen je Sprache). Ab 981 px Breite; darunter bleibt die gestapelte Form (Tablet hochkant, Handy). Auf niedrigen Fenstern (Hoehenmarken 800 und 640) werden nur Antworttext und Karteninnenraum dichter - die Anordnung bleibt. */ @media (min-width:981px){ #modalRoot .modal .pl32-decision{display:grid;grid-template-columns:minmax(300px,.74fr) minmax(0,1.26fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"kopf wahltitel" "kopf wahl";column-gap:26px;row-gap:10px;align-items:start} #modalRoot .modal .pl32-decision>.pl32-event-head{grid-area:kopf;min-width:0;padding:0 24px 4px 0;border-bottom:0;border-right:1px solid var(--pl-border)} #modalRoot .modal .pl32-decision>.pl-decision-section{grid-area:wahltitel;margin:0} #modalRoot .modal .pl32-decision>.pl32-choice-grid{grid-area:wahl;margin-top:0;min-width:0} #modalRoot .modal .pl32-decision .pl32-choice-card{min-height:0} #modalRoot .modal .pl32-decision .pl32-spoken{font-size:var(--pl42-body);line-height:1.46} } @media (min-width:981px) and (max-height:800px){ #modalRoot .modal .pl32-decision .pl32-choice-card{padding:14px 38px 14px 14px} #modalRoot .modal .pl32-decision .pl32-spoken{line-height:1.44} } /* V0.60.2 (C339): kleinstes Wirtfenster (Hoehenmarke 640) - in 92 von 99 gemessenen Faellen war die ANTWORTSPALTE die hoehere: die Karten werden dichter (Abstand ihrer drei Teile, Trennlinie), die Spalten bleiben .84/1.16 - schmaler darf die Kopfspalte nicht werden (bei .62 wurde sie selbst zur hoeheren, gemessen 266 x 644 px). Rahmen, Innenabstand und Dialoghoehe stehen in phase2-premium.css (Schicht legacy). */ @media (min-width:981px) and (max-height:640px){ #modalRoot .modal .pl32-decision{grid-template-columns:minmax(300px,.84fr) minmax(0,1.16fr);column-gap:20px} #modalRoot .modal .pl32-decision>.pl32-event-head{padding-right:18px} #modalRoot .modal .pl32-decision .pl32-choice-card{padding:12px 34px 12px 12px;gap:4px} #modalRoot .modal .pl32-decision .pl33-stakes{line-height:1.35;padding-top:5px} #modalRoot .modal .pl32-decision .pl32-choice-arrow{right:10px;bottom:10px} }