/* ============================================================================ Project Legend V0.58.9 - v0589-kalender.css (Strang kalender) Pruefbericht zu V0.58.3, Bereich Kalender: D14, D15, D16, D17, D17-N1, D18 und aus dem Scroll-Teil "Kalender: Monatsraster, Simulationssteuerung, Datumsfeld, Start-Schaltflaeche, Terminplanung" sowie "Kalender: Saison-Zeitstrahl horizontal". Laedt direkt NACH v0576-passung.css und VOR ui-v0420/system.css. Gleich starke Regeln hier schlagen v0576-passung.css deshalb durch ihre Position; system.css bleibt die letzte Stimme (es setzt fuer den Kalender nur order, system.css:509-510, und hier wird order ausdruecklich mitgesetzt). HAUSREGELN: keine Wichtig-Markierung, keine neue Breiten- oder Hoehenmarke (981, 1440, 2200 / 800), keine Schriftgroesse, kein Deckel auf Inhalt. Was nicht passt, bekommt einen eigenen Bereich. STUFEN (Nachbesserung nach der Gegenpruefung): Wie eng Monatsraster und Seitenspalte stehen, haengt nicht an einer Fensterhoehe, sondern daran, ob der Inhalt passt. v0589-kalender.js misst das nach jedem Aufbau und setzt auf die Sektion data-kal-raster = voll | zwei | eins | knapp (Monatsraster) data-kal-seite = voll | dicht | eng (Simulationsspalte) - jeweils die erste Stufe, in der nichts rollt. So bleibt auf grossen Schirmen das bisherige Bild, und Zwischenhoehen (1440x900, 1536x864, 1600x900) passen ebenfalls, ohne neue Hoehenmarke (Gegenpruefung: dort rollten Raster und Spalte). Ohne das Modul gilt auf <= 800 px Hoehe die Rueckfallordnung (":not([data-kal-...])") - die Stufen "knapp" und "dicht". ========================================================================= */ /* ============================================================================ K1 - ANORDNUNG: DIE SEITENSPALTE BEKOMMT DIE HOEHE (D16) ---------------------------------------------------------------------------- Gemessen vorher (1366x768, Leipzig, 27.10.2026): Kopfkarte 120, Koerper 307, Zeitachsenband 215 ueber die volle Breite. Die Seitenspalte war nur so hoch wie der Koerper (307) und rollte 968 px - "1 Spiel" und "3 Spiele" standen im Bild, "Bis Winterpause", "Bis Saisonende", Datum und Start darunter im Rollbereich. Abschnitt 5 von v0576-passung.css beschreibt die Zielanordnung seit V0.57.6 ("Zeitachse und Monatsraster links, die vier Simulationsknoepfe oben rechts, kommende Termine darunter"), gebaut wurde sie nie. Hier ist sie gebaut, ohne Markup-Aenderung: .pl42-cal-body wird mit display:contents aufgeloest, seine zwei Kinder (Monatsraster, Seitenspalte) werden Rasterkinder der Sektion. Die Seitenspalte reicht ueber Raster UND Zeitachse; die Zeitachse steht links unter dem Raster. Die Vollansicht "nur Kalender" (pl42-nur-kalender, v0576 Abschnitt 40) ist ausdruecklich ausgenommen - dort gilt weiter ihr eigenes Blatt. order wird mitgesetzt: system.css:509-510 gibt Kopf 1 und Koerper 2; ohne eigenes order wuerden Raster und Spalte (Kinder eines display:contents) mit order 0 VOR dem Kopf gemalt. ========================================================================= */ @media (min-width:981px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--calendar:not(.pl42-nur-kalender){ display:grid; --kal-seite:320px; position:relative; grid-template-columns:minmax(0,1fr) minmax(0,var(--kal-seite)); grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:"kopf kopf" "raster seite" "achse seite"; column-gap:clamp(12px,1.1vw,18px); align-items:stretch; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)>.pl42-cal-body{display:contents} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)>.pl42-cal-hero{grid-area:kopf;order:1} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)>.pl42-cal-body>.pl42-panel.pl42-flush{ grid-area:raster; order:2; min-height:0; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)>.pl42-cal-body>.pl42-cal-side{ grid-area:seite; order:2; min-height:0; flex-direction:column; flex-wrap:nowrap; /* Sicherheitsnetz bleibt (v0576 Abschnitt 20: abgeschnitten ist schlimmer als lang), aber ohne reservierte Rinne - passt die Spalte, steht keine Leiste und kein leerer Streifen da. */ overflow-y:auto; scrollbar-gutter:auto; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)>.pl42-panel:not(.pl42-cal-hero){ grid-area:achse; order:3; } } /* Spaltenbreite wie bisher .pl42-cal-body (responsive.css:60 und :27). */ @media (min-width:981px) and (max-width:1440px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--calendar:not(.pl42-nur-kalender){--kal-seite:300px} } @media (min-width:2200px){ #pl420Content[data-pl42-gross="1"]>.pl42-screen--calendar:not(.pl42-nur-kalender){--kal-seite:400px} } /* ============================================================================ K2 - KOPFKARTE: DER INHALT WIRD ENGER, NICHT DER KASTEN (D14) ---------------------------------------------------------------------------- v0576-passung.css:1502 deckelt die Kopfkarte bei <= 800 px Hoehe auf 120 px. Gemessen vorher: die Zeile "Heim · Dein Team" / "Auswaerts" endet 8,0 / 6,1 / 5,4 px UNTER der Kartenkante (1536x770 / 1366x768 / 1280x720). Der Deckel faellt (gleiche Gewichtung 1,2,0, spaetere Position). Statt dessen ruecken die Teile der rechten Spalte zusammen, und die Ueberzeile "Naechstes Spiel" traegt ihre eigene Zeilenhoehe (system.css:199) statt der des umgebenden Blocks - so wie links schon (v0420-screens.js:1114). ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-cal-hero-next>.pl42-eyebrow{display:block} #pl420Root .pl42-cal-hero-next .pl42-matchup{margin-top:var(--pl42-s1)} #pl420Root .pl42-cal-hero-next .pl42-matchup-team{gap:var(--pl42-s1)} /* Die Spalte "Naechstes Spiel" war 380 px breit (screens.css:399); bei 1920 px brachen darin Vereinsname und "Heim · Dein Team" zweizeilig um, obwohl die Karte daneben 800 px frei hatte. */ #pl420Root .pl42-cal-hero-next{flex-basis:440px} } @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-screen--calendar>.pl42-cal-hero{max-height:none} /* Zierflaeche vor Inhalt: das Wappen der Begegnung (md, 40 px, shell.css:275) bleibt erkennbar mit 30 px - wie auf der Uebersicht (v0576 Abschnitt 19). */ #pl420Root .pl42-cal-hero-next .pl42-badge{width:30px;height:30px} } /* ============================================================================ K3 - MONATSRASTER: KEIN WAAGERECHTES ROLLEN, DIE WOCHEN TEILEN SICH DIE HOEHE (D15) ---------------------------------------------------------------------------- screens.css:447 verlangt 7 x 112 px Mindestbreite (856 px mit Abstaenden). Neben der 300-px-Spalte hat das Raster bei 1366 rund 795 px - es rollte waagerecht (gemessen 102 px). minmax(0,1fr) nimmt die Spaltenbreite. Senkrecht fuellen die sechs Wochen die Hoehe, die das Raster hat, statt eine feste Zellhoehe von 84 px zu tragen. ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-calgrid{ grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:auto repeat(6,minmax(min-content,1fr)); min-width:0; min-height:100%; padding:0 var(--pl42-s3) var(--pl42-s2); gap:var(--pl42-s1); } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-body>.pl42-panel.pl42-flush>.pl42-hscroll{ scrollbar-gutter:auto; } /* Kopfzeile des Rasters: Titel links, Legende in der Mitte, "Alle" rechts - statt der Legende als eigener Streifen unter dem Raster (rund 40 px). Der Kopf steht in einem div mit Inline-Polsterung (padding:16px 18px 0, v0420-screens.js:1152), gegen die kein Stilblatt ankommt; display:contents loest das div und den Kopf auf, ihre Teile werden Rasterzellen der Karte. Der leere Abstandhalter (.pl42-spacer) hat im Raster keine Aufgabe mehr. "Alle" behaelt seine 44-px-Trefferflaeche (shell.css:154-157). */ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-body>.pl42-panel.pl42-flush{ /* Titel und Legende teilen sich die Breite; wird es eng (1024), brechen beide um, statt dass die Legende allein dreizeilig wird. */ display:grid; grid-template-columns:minmax(min-content,1fr) minmax(min-content,1.7fr) auto; grid-template-rows:auto minmax(0,1fr); grid-template-areas:"titel legende alle" "raster raster raster"; column-gap:var(--pl42-s3); align-items:center; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-body>.pl42-panel.pl42-flush>div:first-child, #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-body>.pl42-panel.pl42-flush>div:first-child>.pl42-panel-head{display:contents} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-body>.pl42-panel.pl42-flush .pl42-panel-head>h3{ grid-area:titel; padding:var(--pl42-s2) 0 var(--pl42-s1) 18px; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-body>.pl42-panel.pl42-flush .pl42-panel-head>.pl42-spacer{display:none} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-body>.pl42-panel.pl42-flush .pl42-panel-head>.pl42-link{ grid-area:alle; margin:var(--pl42-s1) var(--pl42-s2) 0 0; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-body>.pl42-panel.pl42-flush>.pl42-hscroll{ grid-area:raster; align-self:stretch; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-body>.pl42-panel.pl42-flush>.pl42-legend{ grid-area:legende; justify-content:flex-end; gap:var(--pl42-s1) var(--pl42-s3); padding:var(--pl42-s2) 0 var(--pl42-s1); border-top:0; min-width:0; } /* Zelle: keine Mindesthoehe (die Reihen teilen sich die Hoehe), die Tageszahl steht UEBER dem Termin wie bisher (Stufe voll und zwei). */ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-calgrid-cell{ min-height:0; padding:3px 5px; gap:3px; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-calgrid-event{ min-width:0; padding:2px 4px; gap:4px; } } /* STUFE "zwei": Termintext hoechstens zwei Zeilen, sichtbar gekuerzt (Auslassungszeichen). Die Tageszahl bleibt darueber - der Termin hat die volle Zellbreite (Gegenpruefung D15: mit der Tageszahl daneben stand in id bei 1440x900 "pemanggila|n"). Kein Wort bricht mitten durch: v0589- kalender.js nimmt "voll" und "zwei" nur, wenn es im ganzen Raster keinen Wortbruch gibt (je Wort gemessen, Range-Rechtecke); sonst "eins". STUFE "eins": Tageszahl darueber, Termintext EINE Zeile (Zwischenhoehen wie 1440x900 - dort passt "zwei" nicht, "knapp" zeigte aber ein Viertel weniger Text). Sichtbar gekuerzt, nicht abgeschnitten: der volle Titel steht im Tooltip (title=, v0420-screens.js:1160), in "Kommende Termine" und in der Vollansicht "Alle"; der Titel kommt ohnehin schon auf 26 Zeichen gekuerzt an (v0420-screens.js:1161). Das overflow:hidden ist die Voraussetzung fuer das Auslassungszeichen, es verschluckt nichts ohne Hinweis. Einzeilig mit Auslassungszeichen war auch die urspruengliche Form (screens.css:458), v0503-schrift.css:130-144 hat sie spaeter auf Umbruch gestellt. ENTSCHEIDUNG DES AUFTRAGGEBERS: siehe notizen/BERICHT.md. */ @media (min-width:981px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-raster="zwei"] .pl42-calgrid-event em{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-raster="eins"] .pl42-calgrid-cell{padding:2px 5px;gap:2px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-raster="eins"] .pl42-calgrid-event{align-items:center;padding:1px 4px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-raster="eins"] .pl42-calgrid-event em{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } /* STUFE "knapp": EINE Zeile je Termin, die Tageszahl daneben, die Zelle so niedrig wie ihre Zeile. Das ist die Stufe der drei Laptopgroessen: umgebrochen war eine Wochenreihe gemessen 75,8 px hoch (messungen/v1-de.txt, 1366x768, 14 von 42 Zellen sichtbar), sechs Reihen brauchen gerechnet rund 475 px, der Rollbereich des Rasters hat gemessen 213 / 257 / 250 px (1280 / 1366 / 1536, messungen/n2-geo-alt.txt). Die Reihen teilen sich den Platz (1fr) - wo er reicht, sind sie hoeher als diese Mindesthoehe. */ @media (min-width:981px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-raster="knapp"] .pl42-calgrid-cell{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:3px 5px; padding:2px 5px; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-raster="knapp"] .pl42-calgrid-day{flex:0 0 auto;line-height:16px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-raster="knapp"] .pl42-calgrid-event{flex:1 1 0;align-items:center;padding:1px 4px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-raster="knapp"] .pl42-calgrid-more{flex:0 0 auto;line-height:16px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-raster="knapp"] .pl42-calgrid-event em{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } /* Rueckfall ohne v0589-kalender.js: kurze Schirme bekommen Stufe "knapp". */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-raster]) .pl42-calgrid-cell{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:3px 5px; padding:2px 5px; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-raster]) .pl42-calgrid-day{flex:0 0 auto;line-height:16px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-raster]) .pl42-calgrid-event{flex:1 1 0;align-items:center;padding:1px 4px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-raster]) .pl42-calgrid-more{flex:0 0 auto;line-height:16px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-raster]) .pl42-calgrid-event em{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } /* ============================================================================ K4 - SIMULATION: KOMPAKTE KACHELN (D16) ---------------------------------------------------------------------------- Kachel 110 px Mindesthoehe, 14/10 px Polsterung, 46-px-Symbol (screens.css:473-477). Kein Wort wird kleiner. Das Symbol traegt seine Groesse als Inline-Variable (--tile, v0420-icons.js:147); gesetzt werden deshalb Breite, Hoehe und Grundmass direkt. ========================================================================= */ /* Stufe "voll" (alle Hoehen): keine Mindesthoehe von 110 px, die Kachel ist so hoch wie ihr Inhalt. In id/it/fr brechen Name und Unterzeile zwei- bis dreizeilig um; gemessen v6 bei 1920x1080 in id: die Spalte rollte 45 px, weil Symbol (46 px) und Polsterung (14 px) je Reihe mehr brauchten als die Beschriftung selbst. Symbol 34 px, Polsterung 8 px. Datum und Start stehen nebeneinander statt untereinander: ein Knopf, der zu einem Feld gehoert, steht neben dem Feld. Spart eine Knopfhoehe (52 px). */ @media (min-width:981px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side .pl42-sim-tile{ min-height:0; padding:var(--pl42-s2); } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side .pl42-sim-tile>.pl42-ico-tile{width:34px;height:34px;flex-basis:34px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side .pl42-sim-tile>.pl42-ico-tile>svg{width:17px;height:17px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-panel:first-child{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); column-gap:var(--pl42-s2); align-items:end; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-panel:first-child>.pl42-panel-head, #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-panel:first-child>.pl42-sim-grid{grid-column:1/-1} /* Das Feld "Bis Datum" reicht mit seiner Beschriftung ueber BEIDE Spalten (Unterraster), das Eingabefeld steht links, "Simulation starten" rechts daneben in derselben Zeile. So bricht die Beschriftung nicht in der halben Breite um (gemessen id "BERDASARKAN TANGGAL": zwei Zeilen). */ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-panel:first-child>.pl42-field{ margin-bottom:0; min-width:0; grid-column:1/-1; grid-row:3/5; display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid; row-gap:6px; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-panel:first-child>.pl42-field>span{grid-column:1/-1;grid-row:1} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-panel:first-child>.pl42-field>input{grid-column:1;grid-row:2;min-width:0} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-panel:first-child>.pl42-btn{ grid-column:2; grid-row:4; padding:0 var(--pl42-s2); text-align:center; line-height:1.2; min-width:0; } } /* Stufe "dicht" (und "eng"): Abstaende und Symbol kleiner - kein Wort kleiner. Das waren bisher die Regeln fuer <= 800 px Hoehe; jetzt gelten sie ueberall dort, wo die Spalte sonst nicht passt (Gegenpruefung: bei 1440x900, 1536x864 und 1600x900 rollte die Spalte 12-180 px). */ @media (min-width:981px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-cal-side{gap:var(--pl42-s2)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-cal-side .pl42-sim-grid{gap:var(--pl42-s2);margin-bottom:var(--pl42-s2)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-cal-side .pl42-sim-tile{padding:var(--pl42-s1);gap:3px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-cal-side .pl42-sim-tile small{line-height:1.25} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-cal-side .pl42-sim-tile>.pl42-ico-tile{width:30px;height:30px;flex-basis:30px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-cal-side .pl42-sim-tile>.pl42-ico-tile>svg{width:15px;height:15px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-cal-side .pl42-panel-head{margin-bottom:var(--pl42-s2)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-termine>.pl42-panel-head{margin-bottom:var(--pl42-s1)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-cal-side>.pl42-panel:not(.pl42-aufklapp){padding:var(--pl42-s2) 10px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):is([data-kal-seite="dicht"],[data-kal-seite="eng"]) .pl42-cal-side>.pl42-aufklapp>.pl42-aufklapp-kopf{padding:var(--pl42-s2) var(--pl42-s3)} } /* Rueckfall ohne v0589-kalender.js: kurze Schirme bekommen Stufe "dicht". */ @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-cal-side{gap:var(--pl42-s2)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-cal-side .pl42-sim-grid{gap:var(--pl42-s2);margin-bottom:var(--pl42-s2)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-cal-side .pl42-sim-tile{padding:var(--pl42-s1);gap:3px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-cal-side .pl42-sim-tile small{line-height:1.25} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-cal-side .pl42-sim-tile>.pl42-ico-tile{width:30px;height:30px;flex-basis:30px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-cal-side .pl42-sim-tile>.pl42-ico-tile>svg{width:15px;height:15px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-cal-side .pl42-panel-head{margin-bottom:var(--pl42-s2)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-termine>.pl42-panel-head{margin-bottom:var(--pl42-s1)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-cal-side>.pl42-panel:not(.pl42-aufklapp){padding:var(--pl42-s2) 10px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender):not([data-kal-seite]) .pl42-cal-side>.pl42-aufklapp>.pl42-aufklapp-kopf{padding:var(--pl42-s2) var(--pl42-s3)} } /* Stufe "eng": die letzten Millimeter aus Abstaenden und Zierflaechen - kein Wort kleiner, nichts umgestellt, nichts weg. Das Symbol der Kachel (reine Zierflaeche) 24 statt 30 px, die zwei Kartenkoepfe der Spalte so hoch wie ihre Ueberschrift (min-height 26 px, shell.css:147, ist fuer Koepfe mit Verweisknopf; diese zwei haben keinen), Polsterung, Spaltenabstand und Terminzeilen enger. Gebraucht bei den Laptopgroessen in den langen Sprachen: gemessen id 1280x720 in Stufe "dicht" Liste 83,8 px, eine Terminzeile 65 px plus Monatszeile 20,5 px - kein Termin ganz sichtbar (messungen/n2-geo-alt.txt). Verworfen (gemessen, messungen/n2-probe2.txt und n2-probe3.txt): das Symbol NEBEN den Namen zu stellen. In id wurde die Kachel dadurch hoeher (97/107 statt 88/93 px), und lange Einzelwoerter ("WINTERPAUSE", "PERTANDINGAN") ragten ueber den Kachelrand. */ @media (min-width:981px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-cal-side{gap:6px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-cal-side>.pl42-panel:not(.pl42-aufklapp){padding:6px 10px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-cal-side .pl42-sim-tile>.pl42-ico-tile{width:24px;height:24px;flex-basis:24px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-cal-side .pl42-sim-tile>.pl42-ico-tile>svg{width:13px;height:13px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-cal-side .pl42-sim-tile{gap:2px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-cal-side>.pl42-panel>.pl42-panel-head{min-height:0} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-cal-side>.pl42-panel:first-child>.pl42-panel-head{margin-bottom:var(--pl42-s1)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-cal-side>.pl42-panel:first-child>.pl42-field{row-gap:var(--pl42-s1)} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-termine .pl42-upcoming-col{gap:6px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-termine .pl42-upcoming-row{padding:6px 10px} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender)[data-kal-seite="eng"] .pl42-cal-side>.pl42-aufklapp>.pl42-aufklapp-kopf{padding:6px var(--pl42-s3)} } /* ============================================================================ K5 - KOMMENDE TERMINE UND "GESPRAECH PLANEN" (D18) ---------------------------------------------------------------------------- v0576:175-177 (1,4,0) gab der Terminkarte flex:1 1 auto und min-height:0 - Abschnitt 23 (flex:0 0 auto, 1,2,0) verlor dagegen. Ergebnis gemessen: die Karte fiel auf 26,6 px zusammen, die Liste (742 px) lief heraus und lag UNTER "Gespraech planen". Jetzt: die Karte nimmt den Rest der Spalte; die Liste ist der begrenzte Bereich und rollt selbst. Die Spalte rollt nicht (K1, Stufen) - also bleibt es bei EINER Leiste fuer diesen Inhalt (C247). ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-panel.pl42-termine{ flex:1 1 auto; min-height:auto; display:flex; flex-direction:column; } /* contain:size - die Liste meldet ihrer Karte keine Inhaltshoehe, sonst waere die Mindesthoehe der Karte wieder die volle Liste (gemessen 780 px). Die Mindesthoehe ist Monatszeile plus eine Terminzeile (Gegenpruefung: 76 px reichten nicht, gemessen 12,5 + 8 + 65 = 85,5 px in Stufe "dicht", n2-geo-alt.txt). Die Monatszeile bleibt beim Rollen stehen. */ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-termine .pl42-upcoming{ flex:1 1 auto; min-height:86px; overflow-y:auto; overscroll-behavior:contain; align-content:start; contain:size; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-termine .pl42-upcoming-col>.pl42-kicker{ position:sticky; top:0; z-index:1; background:var(--pl42-panel); } } /* Der Aufklapper traegt seine Polsterung im Kopf (v0576:252-254); die Karte selbst hat keine. .pl42-aufklapp{padding:0} (0,1,0) verlor gegen v0576:47 (1,1,0) und system.css:820-823 (Dichte kompakt, 1,3,0). */ :root #pl420Root details.pl42-panel.pl42-aufklapp{padding:0} /* Geschlossen ist der Inhalt ohnehin nicht zu sehen; Chromium legt ihn aber als unsichtbare Kaesten UNTER die Karte (content-visibility des ::details-content). Gemessen: fuenf solche Kaesten (Art, Auswahl, Datum, Feld, Eintragen) standen 0 bis 216 px unter der Spalte und machten sie fuer die Kachelpassungswache zu einem Rollbereich. Geschlossen heisst jetzt auch im Kastenbaum: nicht da. */ #pl420Root .pl42-aufklapp:not([open])>.pl42-aufklapp-inhalt{display:none} /* "Gespraech planen" geoeffnet: das Formular klappt AN ORT UND STELLE in der Spalte auf, wie jeder Aufklapper (Gegenpruefung: die schwebende Karte ueber der Zeitachse der ersten Fassung war eine neue Aufklappform und verdeckte 3-8 Zeitachsenmarken). Die Art steht oben ueber die volle Breite (in der halben Breite schnitt das Auswahlfeld "Management / Verein" ab), darunter "Datum" mit "Eintragen" daneben - dasselbe Muster wie "Bis Datum" und "Simulation starten" darueber. Den Platz gibt die Terminliste her (Entscheidung der Hauptsitzung, notizen/ENTSCHEIDUNG-HAUPTSITZUNG.md Punkt 2): solange das Formular offen ist, klappt "Kommende Termine" auf seine Kopfzeile zusammen, die Kopfzeile nennt die Zahl der Termine ("Kommende Termine (9)" - nur eine Ziffer, kein neuer Text; v0589-kalender.js setzt data-kal-anzahl). Zugeklappt steht die Liste wieder da. Die Spalte selbst rollt nicht. */ @media (min-width:981px){ #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-aufklapp[open]>.pl42-aufklapp-inhalt{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--pl42-s1) var(--pl42-s2); align-items:end; padding-bottom:var(--pl42-s2); } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-aufklapp[open]>.pl42-aufklapp-inhalt>.pl42-field{margin-bottom:0;min-width:0} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-aufklapp[open]>.pl42-aufklapp-inhalt>.pl42-field>select, #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-aufklapp[open]>.pl42-aufklapp-inhalt>.pl42-field>input{min-width:0} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-aufklapp[open]>.pl42-aufklapp-inhalt>.pl42-field:first-of-type{grid-column:1/-1} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-aufklapp[open]>.pl42-aufklapp-inhalt>.pl42-field:nth-of-type(2){ grid-column:1/-1; grid-row:2/4; display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid; row-gap:var(--pl42-s1); } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-aufklapp[open]>.pl42-aufklapp-inhalt>.pl42-field:nth-of-type(2)>span{grid-column:1/-1;grid-row:1} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-aufklapp[open]>.pl42-aufklapp-inhalt>.pl42-field:nth-of-type(2)>input{grid-column:1;grid-row:2} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side>.pl42-aufklapp[open]>.pl42-aufklapp-inhalt>.pl42-btn{ grid-column:2; grid-row:3; padding:0 var(--pl42-s2); min-width:0; } #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side:has(>.pl42-aufklapp[open]) .pl42-termine{flex:0 0 auto} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side:has(>.pl42-aufklapp[open]) .pl42-termine .pl42-upcoming{display:none} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side:has(>.pl42-aufklapp[open]) .pl42-termine>.pl42-panel-head{margin-bottom:0} #pl420Root .pl42-screen--calendar:not(.pl42-nur-kalender) .pl42-cal-side:has(>.pl42-aufklapp[open]) .pl42-termine>.pl42-panel-head>h3[data-kal-anzahl]::after{ content:"\00a0(" attr(data-kal-anzahl) ")"; } } /* ============================================================================ K6 - SAISONZEITACHSE: KEIN WAAGERECHTES ROLLEN, NICHTS ANGESCHNITTEN (D17, D17-N1) ---------------------------------------------------------------------------- screens.css:404 setzt min-width:1340px (V0.42). Das Band rollte gemessen 113 / 256 / 208 px waagerecht (1536 / 1366 / 1280). Die Marken stehen in Prozent, die Mindestbreite ist nicht noetig - die Reihen verteilt jetzt v0589-kalender.js nach der GEMESSENEN Breite jeder Beschriftung. Die Spuren nehmen die Hoehe ihrer belegten Reihen (bisher fest 54 px bei <= 800 px: Reihe 1 stand bei bottom:40px und ragte 11,5 px ueber die Rollkante, gemessen "Laenderspiel 26. Aug." ohne Namen). Eine Beschriftung bricht nicht mehr um (width:max-content): zwei Zeilen Name haben die Reihe gesprengt (it/id/pt-BR, siehe D17-N1). Der Kopf (Titel links, Laenderspielfenster rechts) bricht um, statt den Titel zu ueberdecken (gemessen 1366x768 und 1024x768: "SAISONZEITACHSE / LAENDERSPIELFENSTER" ueberlappt). ========================================================================= */ @media (min-width:981px){ #pl420Root .pl42-screen--calendar .pl42-timeline{min-width:0} #pl420Root .pl42-screen--calendar .pl42-timeline-mark{width:max-content} #pl420Root .pl42-screen--calendar .pl42-timeline-mark b{white-space:nowrap} #pl420Root .pl42-screen--calendar .pl42-timeline-lane{height:34px} #pl420Root .pl42-screen--calendar .pl42-timeline-lane:has(>[data-row="1"]){height:64px} #pl420Root .pl42-screen--calendar .pl42-timeline-lane:has(>[data-row="2"]){height:94px} #pl420Root .pl42-screen--calendar .pl42-timeline-lane--top .pl42-timeline-mark[data-row="1"]{bottom:32px} #pl420Root .pl42-screen--calendar .pl42-timeline-lane--top .pl42-timeline-mark[data-row="2"]{bottom:62px} #pl420Root .pl42-screen--calendar .pl42-timeline-lane--bottom .pl42-timeline-mark[data-row="1"]{top:32px} #pl420Root .pl42-screen--calendar .pl42-timeline-lane--bottom .pl42-timeline-mark[data-row="2"]{top:62px} /* Kopf: links der Titel und darunter die Ueberschrift der Fensterliste, rechts die Fensterchips (umbrechend). Vorher standen Ueberschrift und Chips zusammen rechts und brauchten in pt-BR und fr drei Zeilen. */ #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero){ grid-template-columns:fit-content(220px) minmax(0,1fr); column-gap:var(--pl42-s4); row-gap:2px; grid-template-areas:"kopf fenster" "hinweis fenster" "achse achse"; } #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-window-summary{display:contents} #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-window-summary>.pl42-kicker{ grid-area:hinweis; align-self:start; } #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-window-summary>.pl42-tag-list{ grid-area:fenster; justify-content:flex-end; align-content:center; align-self:center; min-width:0; } #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-panel-head{align-self:end;min-height:0} #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-hscroll{margin-top:var(--pl42-s1)} /* Gestapelt: brauchen die Fensterchips neben dem Titel mehr als zwei Zeilen (gemessen pt-BR 1024x768: fuenf Zeilen, Band 308 px), stellt v0589-kalender.js sie UNTER Titel und Ueberschrift, ueber die volle Breite. */ #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)[data-kal-kopf="gestapelt"]{ grid-template-columns:minmax(0,1fr); grid-template-areas:"kopf" "hinweis" "fenster" "achse"; } #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)[data-kal-kopf="gestapelt"]>.pl42-window-summary>.pl42-tag-list{ justify-content:flex-start; margin-top:var(--pl42-s1); } } @media (min-width:981px) and (max-height:800px){ #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-panel-head{margin-bottom:0} /* Die Fensterchips sind Beschriftung, keine Knoepfe: 22 statt 26 px hoch. */ #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-window-summary .pl42-chip{height:22px} #pl420Root .pl42-screen--calendar>.pl42-panel:not(.pl42-cal-hero)>.pl42-window-summary>.pl42-tag-list{gap:var(--pl42-s1)} #pl420Root .pl42-screen--calendar .pl42-timeline{padding:2px 18px 2px} }