/* * 045 §13/§14 — DIE STATION „LAGE". * * ⚠️ WARUM ZUSAMMENGELEGT WURDE. * Bis 044 gab es „Regionale Lage" UND „Lagezentrum" als zwei getrennte Stationen. Beide * beantworteten dieselbe Frage — „wie steht es im Sektor und was mache ich als Nächstes?" — * nur mit unterschiedlichen Ausschnitten. Der Spieler musste zwischen ihnen hin- und * herspringen, um Karte und Einsatzliste zusammenzubringen, die zueinander gehören. * * ⚠️ RÄUMLICHE TRENNUNG, KEINE REITER. * Die naheliegende Lösung wäre ein Reiterkasten innerhalb einer Station gewesen. Das hätte * das Problem nur verschoben: der Spieler klickt weiter hin und her, sieht weiter nie beides * gleichzeitig, und die Stationsleiste hätte gelogen („eine Station"). Karte und Module * stehen deshalb NEBENEINANDER auf einem Schirm. * * ⚠️ ES GIBT WEITERHIN NUR EINE ZEITSTEUERUNG. * Beide Altstationen hätten je eine mitbringen können. Zwei Uhren auf einem Schirm sind eine * Fehlerquelle und eine Frage („welche gilt?"). Die Zeitsteuerung bleibt dort, wo sie war. * * ⚠️ DIESE DATEI WIRD ZULETZT GELADEN. * `frames-v2.css` deckelt Lagezentrum-Layouts auf 520 px Breite und `region.css` setzt das * Regionspanel auf `padding: 0`. Beide Annahmen galten für getrennte Panels und wären hier * falsch. Statt in den Altdateien herumzuschneiden, korrigiert diese Datei am Ende der Kette. */ /* * ⚠️ DAS RASTER DARF NICHT `height: 100%` DES PANELS NEHMEN. * Über ihm sitzt `#systemstart` — die Hochlaufmeldung beim allerersten Spielstart. Sie ist * meist ausgeblendet, beim ersten Start aber 242 px hoch (gemessen, 1600×900). Mit * `height: 100%` stand das Raster dann volle Panelhöhe UNTER der Meldung und ragte exakt um * deren Höhe unten heraus — die untere Kante von Karte und Säule lag unsichtbar hinter der * Stationsleiste. Genau im ersten Spielstart, also für jeden neuen Spieler. * * Deshalb ist das Panel eine Spalte: die Meldung nimmt, was sie braucht, das Raster den Rest. * `min-height: 0` ist dabei nicht optional — ohne das weigert sich ein Flex-Kind zu schrumpfen * und der Überlauf wäre nur verschoben statt behoben. */ /* * ⚠️ `.active` GEHÖRT IN DIESEN SELEKTOR — 046 GEFUNDEN, AUS 045 STAMMEND. * * Hier stand `…[data-panel="lage"] { display: flex }` OHNE `.active`. Dieser Selektor ist * spezifischer als `#scene-base .stage .tabpanel { display: none }` in kellerzentrale.css * und hat es damit überstimmt: das Lage-Panel war IMMER eingeblendet — auch wenn der Spieler * Personal, Forschung oder Lager gewählt hatte. Die gewählte Station wurde dann UNTER der * Lage angehängt und lag außerhalb des Bildes. * * Gemessen bei 1600×900: nach einem Klick auf PERSONAL begann das Personal-Panel bei y=815 * (von 900 sichtbaren Pixeln), das erste Porträt bei y=1037 — 137 px unter der Kante. Der * Spieler klickt eine Station an und sieht unverändert die Lage. * * Warum es niemandem auffiel: die Stationsknöpfe färbten sich korrekt um, und die Tests * zählten mit `querySelectorAll` — das findet auch Elemente in unsichtbaren Bereichen. * Aufgefallen ist es erst an einem Bildschirmfoto, das dem grünen Test widersprach. * * `display: flex` (statt `block` wie bei den anderen Panels) bleibt richtig: das Lage-Panel * ist eine Spalte aus Hochlaufmeldung und Raster (siehe oben). */ #scene-base .stage .tabpanel[data-panel="lage"].active { padding: 10px; display: flex; flex-direction: column; min-height: 0; } #scene-base .stage .tabpanel[data-panel="lage"] > #systemstart { flex: 0 0 auto; } /* Karte dominant, Säule schmal aber nutzbar. `minmax(0, …)` verhindert, dass ein breiter Karteninhalt die Spalte über den Panelrand hinausdrückt. */ #scene-base .stage .tabpanel[data-panel="lage"] .lage-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.85fr); /* Zweite Zeile: das Statusband über die volle Breite. `auto` — es nimmt genau seine natürliche Höhe, den Rest bekommen Karte und Säule. */ grid-template-rows: minmax(0, 1fr) auto; gap: 12px; flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; } #scene-base .lage-karte { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } #scene-base .lage-saeule { grid-column: 2; grid-row: 1; } #scene-base .lage-statusband { grid-column: 1 / -1; grid-row: 2; } /* Die Karte bringt ihr eigenes Scrollverhalten mit; der Rahmen darf sie nicht zusätzlich stauchen, sonst entsteht ein Scrollbereich im Scrollbereich. */ /* * ⚠️ 047 §34 — `min-height: 0` HAT DIE KARTE ZUSAMMENFALLEN LASSEN. * * Der Nullwert war nötig, damit das Flex-Kind überhaupt schrumpfen darf (sonst läuft das * Panel über — 045 §14). Er erlaubt aber auch, dass die Karte auf fast nichts schrumpft: * gemessen bei 1280×800 nur **137 px Höhe** bei einem viewBox von 1000×620, also Maßstab * 0,22. Jede Marke war damit rund 20 px gross — mit dem Finger nicht zu treffen, und lesen * konnte man die Karte auch nicht mehr. * * Die Untergrenze löst beides: die Karte bleibt gross genug zum Ablesen und zum Antippen, * und darf trotzdem schrumpfen, solange Platz da ist. `330px` ist gemessen: 260 px ergaben Maßstab 0,33 und 33-px-Marken — besser, aber * immer noch unter der Komfortgröße. Erst 330 px bringen die Marken über 44 px. Der Preis * ist, dass die Lage-Seite auf einem 800 px hohen Tablet scrollt; das ist der bessere Handel * als eine Karte, die man weder lesen noch treffen kann. */ #scene-base .lage-karte .region-mount { flex: 1 1 auto; min-height: 330px; overflow: hidden; } #scene-base .lage-karte .region { height: 100%; } #scene-base .lage-saeule { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } /* Die drei Module behalten ihre `.lz-*`-Klassen und damit ihr gewohntes Innenleben — zusammengelegt wurde der Rahmen, nicht der Inhalt. * * ⚠️ DIE SELEKTOREN SIND ABSICHTLICH LANG — KÜRZER FUNKTIONIERT NACHWEISLICH NICHT. * Erst stand hier `#scene-base .lage-saeule .lz-mission`. Das reichte nicht: in * kellerzentrale.css steht `#scene-base .stage .tabpanel .hud { min-height: 0 }` und ist * spezifischer (eine Klasse mehr). Ergebnis war gemessen `min-height: 0px` — das Modul * „Aktueller Einsatz“ fiel auf 28 px zusammen, also auf die blosse Titelzeile. Der Einsatz * WAR im DOM und galt jeder Sichtbarkeitsprüfung als sichtbar; auf dem Schirm sah man ihn * nicht. Genau der wichtigste Baustein des Schirms. * * Reihenfolge half nicht: lage.css wird zwar zuletzt geladen, aber Spezifität schlägt * Reihenfolge. `!important` wäre die faule Variante gewesen — sie hätte die nächste Regel * ebenso blind überfahren. Stattdessen sind die Selektoren am Panel verankert. */ /* * ⚠️ KEIN MODUL IN DIESER SPÄLTE SCHNEIDET NOCH ETWAS AB. * Mit `flex: 1 1 auto; min-height: 220px` bekam das Einsatzmodul eine feste 220-px-Höhe und * schnitt seinen eigenen Inhalt ab — die neue „Start“-Leiste lag zur Hälfte unter der * Modulkante, also ausgerechnet die Handlung, um die es auf dem Schirm geht. * * Jetzt nimmt jedes Modul seine natürliche Höhe (`flex: 0 0 auto`), und gescrollt wird * ausschliesslich die SPALTE. Damit ist die Reihenfolge auch die Sichtbarkeitsreihenfolge: * der Einsatz steht oben und ist immer vollständig zu sehen, die Bedrohungsdetails sind * einen kurzen Scroll entfernt. Nichts wird stillschweigend beschnitten. */ #scene-base .stage .tabpanel[data-panel="lage"] .lage-saeule .lz-mission { flex: 0 0 auto; min-height: 0; } /* * ⚠️ DECKELN ALLEIN REICHTE NICHT — DER PLATZ MUSS VERTEILT WERDEN. * Zuerst stand hier `flex: 0 0 auto`: jedes Modul so hoch, wie sein Inhalt will. Gemessen * ergab das 826 px Inhalt in einer 720 px hohen Spalte — der Basisstatus lag unter der Kante * und war nur per Scrollen erreichbar, ausgerechnet auf dem Einstiegsschirm. * * Jetzt teilen sich Einsatz und Bedrohung den freien Platz (beide `flex: 1 1`), der schmale * Basisstatus behält seine natürliche Höhe. Was im Bedrohungsmodul nicht hineinpasst, * scrollt INNERHALB des Moduls — nicht auf Kosten der Nachbarn. */ /* * ⚠️ `flex-shrink: 1` HAT DAS MODUL STILL BESCHNITTEN. * Mit `flex: 0 1 auto` schrumpfte das Bedrohungsmodul auf den verfügbaren Platz — und weil * es keinen eigenen Scroll hat (den verbietet Auftrag 022 zu Recht, er schnitt mitten durch * die Karten), verschwand der Rest einfach. Gemessen: 294 px Rahmen für deutlich mehr * Inhalt; die letzte Signaturkarte war unerreichbar. * * Mit `flex: 0 0 auto` behält das Modul seine natürliche Höhe. Passt die Spalte dann nicht * mehr auf den Schirm, scrollt die SPALTE (`.lage-saeule` hat `overflow-y: auto`) — dabei * bleibt jede Karte am Stück und alles ist erreichbar. Sichtbar abgeschnitten und * erreichbar-durch-Scrollen sind zwei sehr verschiedene Dinge. */ #scene-base .stage .tabpanel[data-panel="lage"] .lage-saeule .lz-threat { flex: 0 0 auto; min-height: 0; } #scene-base .stage .tabpanel[data-panel="lage"] .lage-saeule .lz-statusbar { flex: 0 0 auto; } /* Der 470-px-Deckel aus frames-v2.css bezog sich auf die alte Vollbreiten-Säule. Hier steht das Modul in einer schmalen Spalte, die selbst scrollt. */ /* Der Innenscroll des Einsatzmoduls entfällt — die Spalte scrollt, nicht das Modul. */ #scene-base .stage .tabpanel[data-panel="lage"] .lage-saeule .lz-mission .panelscroll { max-height: none; min-height: 0; overflow: visible; } /* * ⚠️ DAS BEDROHUNGSMODUL DARF DIE SPÄLTE NICHT AUFFRESSEN. * Gemessen war es 565 px hoch (Sensorbild + drei Signaturkarten) und drückte den Basisstatus * unter die Kante. Es bekommt deshalb einen Deckel und scrollt intern — sichtbar bleibt * alles, nur nicht mehr auf Kosten der beiden anderen Module. */ /* * ⚠️ HIER STAND EIN INTERNER SCROLL IM FEINDLAGE-RASTER — UND DAS WAR EIN RÜCKFALL. * Um die Säule zum Passen zu bringen, hatte ich `overflow-y: auto` auf `.intel-grid` gesetzt. * Auftrag 022 Phase A hat genau das schon einmal ENTFERNT, weil der Scrollrand mitten durch * das Forschungs-/Sperrband schnitt; tests/dossier-tablet-022.test.js hält das ausdrücklich * fest. Der Test prüfte allerdings nur frames-v2.css — meine Regel stand in dieser Datei und * ist deshalb glatt durchgerutscht. (Der Test prüft inzwischen ALLE Stylesheets.) * * Stattdessen scrollt die Säule als Ganzes, und das Sensorbild wird in dieser schmalen Spalte * etwas flacher gehalten. Damit bleibt jede Karte am Stück. */ #scene-base .stage .tabpanel[data-panel="lage"] .lage-saeule .lz-threat .intel-grouppic, #scene-base .stage .tabpanel[data-panel="lage"] .lage-saeule .lz-threat .intel-sensor { max-height: 96px; } /* * Schmale Schirme: Karte oben, Module darunter. Untereinander statt nebeneinander — auf einem * Tablet hochkant wäre eine 320-px-Säule neben einer Karte für beides zu wenig. */ @media (max-width: 1100px) { /* * ⚠️ GESTAPELT HEISST: DAS PANEL SCROLLT, DIE MODULE NICHT. * Mit festen Zeilenhoehen wurde das Einsatzmodul unten abgeschnitten (gemessen auf * 1024×768: der Briefingtext lief unter den Rahmen des Basisstatus). Untereinander muss * jedes Modul seine natuerliche Hoehe behalten und die SEITE scrollen — sonst schneidet * genau das Modul ab, das man zuerst lesen soll. */ #scene-base .stage .tabpanel[data-panel="lage"] .lage-layout { /* * ⚠️ HIER DARF DAS RASTER KEINE FESTE HOEHE HABEN. * * Vom Desktop-Fall erbt es `flex: 1 1 auto` — also genau die Hoehe des Panels. Untereinander * gestapelt braucht der Inhalt aber mehr: Karte + Einsatzmodul + Statusband. Die * `auto`-Zeilen wurden dann zusammengedrueckt, und ihr Inhalt lief sichtbar darueber * hinaus. Gemessen auf 1024×768: das Einsatzmodul stand bei y450 mit 512 px Hoehe, das * Statusband bei y564 — der Briefingtext lief also unter den naechsten Rahmen. * * `align-content: start` allein reichte nicht (probiert, gemessen, unveraendert): die * Zeile war bereits zu klein, bevor die Ausrichtung ueberhaupt zum Tragen kam. * * Deshalb: das Raster waechst mit seinem Inhalt (`flex: 0 0 auto`, keine Hoehe), und * gescrollt wird die SEITE. Jedes Modul behaelt seine natuerliche Hoehe, nichts wird * beschnitten. */ grid-template-columns: 1fr; grid-template-rows: minmax(320px, 46vh) auto auto; grid-auto-rows: auto; align-content: start; flex: 0 0 auto; height: auto; min-height: 0; overflow: visible; } /* Der Scrollbereich wandert eine Ebene nach aussen. */ #scene-base .stage .tabpanel[data-panel="lage"] { overflow-y: auto; } #scene-base .lage-karte { grid-column: 1; grid-row: 1; min-height: 320px; } #scene-base .lage-saeule { grid-column: 1; grid-row: 2; overflow-y: visible; } #scene-base .lage-statusband { grid-column: 1; grid-row: 3; } /* Kein Modul deckelt sich hier selbst — die Seite scrollt. */ #scene-base .stage .tabpanel[data-panel="lage"] .lage-saeule .lz-mission, #scene-base .stage .tabpanel[data-panel="lage"] .lage-saeule .lz-threat { flex: 0 0 auto; min-height: 0; } } /* ========================================================================== * 045 §14 — DIE KARTE BEKOMMT DIE GANZE SPALTE. * * ⚠️ 320 PX DAUERHAFT FÜR EINEN PLATZHALTERSATZ. * `region.css` teilt den Kartenbereich in `1fr 320px`: links die Karte, rechts eine feste * Detailspalte. Solange kein Einsatzknoten gewählt ist — also beim Betreten des Schirms, und * damit in den ersten Sekunden jedes Spiels — steht dort nur der Satz „Einen Einsatzknoten * auf der Lagekarte wählen…". Gemessen: rund ein Fünftel der Bildschirmbreite, dauerhaft * belegt von einer Aufforderung, deren Ziel dadurch kleiner wird. * * ⚠️ DIE LÖSUNG WAR SCHON DA — NUR AUF DAS HOCHFORMAT BESCHRÄNKT. * Für Tablet/Hochformat gibt es längst ein Blatt, das über die Karte gleitet, sobald ein * Knoten gewählt wird (`.rd-sheet` + `.rd-backdrop`, beides getestet). Statt einen zweiten * Mechanismus zu bauen, übernimmt der Querformat-Schirm denselben — nur seitlich statt von * unten, weil hier die Breite und nicht die Höhe knapp ist. * * Alles hier ist auf `[data-panel="lage"]` und breite Schirme begrenzt: die Hochformat-Regeln * in region.css bleiben unberührt und gewinnen weiterhin über ihre Media-Query. * ========================================================================== */ /* * ⚠️ DIE GRENZE LAG ZU HOCH — GEMESSEN AUF 1024×768. * Zuerst stand hier `min-width: 1101px`. Ein Tablet im Querformat (1024 px) fiel damit * durchs Raster: es bekam weder die neue Vollbreiten-Karte noch die Hochformat-Regeln aus * `region.css` (die haengen an `orientation: portrait`). Uebrig blieb die alte Aufteilung * `1fr 320px` — die Karte schrumpfte auf ein Drittel der Flaeche, daneben stand der * Platzhaltersatz. Auf dem Bild war die Lagekarte kaum noch zu lesen. * * 900 px ist die neue Grenze: darueber ist genug Breite fuer Karte UND Seitenspalte, darunter * greift das gestapelte Layout. */ @media (min-width: 900px) { #scene-base .tabpanel[data-panel="lage"] .region-body { grid-template-columns: 1fr; position: relative; } #scene-base .tabpanel[data-panel="lage"] .region-detail.rd-sheet { position: absolute; top: 0; bottom: 0; right: 0; left: auto; width: min(380px, 42%); z-index: 30; border-left: 2px solid var(--rg-warn); border-top: none; display: flex; flex-direction: column; overflow: hidden; transform: translateX(103%); transition: transform .28s ease; box-shadow: -14px 0 44px rgba(0, 0, 0, .62); } #scene-base .tabpanel[data-panel="lage"] .region-detail.rd-sheet.open { transform: translateX(0); } /* * ⚠️ IM OFFENEN ZUSTAND WIRD AUS DER UEBERLAGERUNG EINE ECHTE SPALTE. * * Gemessen bei 1600×900: mit eingeblendetem Detail lagen **2 von 5 Kartenknoten** unter dem * Blatt und waren nicht mehr anklickbar — unter anderem der Sägewerk-Sektor. Für den Spieler * heisst das: Detail offen, Nachbarziel anklicken, nichts passiert. Im Kampagnendurchlauf * schlug es als „Storyeinsatz 4 wird auf der regionalen Lage nicht angeboten" auf — ein Satz, * der nach einem Fehler in der Freischaltkette klingt und keiner war. * * `position: absolute` war für das Hochformat gedacht, wo das Blatt ohnehin fast den ganzen * Schirm einnimmt. Auf dem Desktop nimmt es jetzt seine eigene Spalte: die Karte wird * schmaler, ihr SVG skaliert mit, und ALLE Knoten bleiben erreichbar. * * `:has()` ist hier das richtige Werkzeug — die Bedingung („ein Kind ist offen") steht * genau dort, wo sie wirkt. Die Alternative wäre eine Klasse am Elternknoten gewesen, die * `region-view.js` mitpflegen müsste: eine zweite Stelle, die beim nächsten Umbau vergessen * wird. */ #scene-base .tabpanel[data-panel="lage"] .region-body:has(.rd-sheet.open) { grid-template-columns: minmax(0, 1fr) min(380px, 42%); } #scene-base .tabpanel[data-panel="lage"] .region-body:has(.rd-sheet.open) .region-detail.rd-sheet { position: relative; inset: auto; width: auto; transform: none; box-shadow: none; } /* Der Inhalt scrollt innen, der Aktionsfuß bleibt stehen — wie im Hochformat. */ #scene-base .tabpanel[data-panel="lage"] .region-detail.rd-sheet .rd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 14px; } #scene-base .tabpanel[data-panel="lage"] .region-detail.rd-sheet .rd-actions { flex: 0 0 auto; margin-top: 0; display: flex; gap: 10px; padding: 10px 14px; background: linear-gradient(180deg, rgba(14, 26, 35, .98), rgba(8, 14, 20, .995)); border-top: 1px solid rgba(90, 150, 190, .24); } /* * §14/GLM: Die wichtigste Handlung des Schirms darf kein schmaler Knopf am Rand sein. * „Einsatz starten" bekommt die volle Breite des Fusses und eine Höhe, die auch mit * dem Finger sicher zu treffen ist. */ #scene-base .tabpanel[data-panel="lage"] .region-detail.rd-sheet .rd-actions .kz-btn { flex: 1 1 auto; min-height: 46px; } #scene-base .tabpanel[data-panel="lage"] .region-detail.rd-sheet .rd-actions .rd-start { flex: 2 1 auto; } /* * ⚠️ KEIN SPERRENDER HINTERGRUND AUF BREITEN SCHIRMEN. * * Im Hochformat deckt das Blatt fast den ganzen Schirm ab — dort ist ein modaler Hintergrund * richtig: er dunkelt ab und fängt den Klick, der das Blatt schliessen soll. * * Auf dem Desktop ist dasselbe Blatt aber eine SEITENSPALTE. Ein Hintergrund über die ganze * Fläche legt sich dann über die Karte und fängt Klicks ab, die dem Spieler gehören: * gemessen im Kampagnendurchlauf — nach dem Öffnen eines Knotens landete der nächste Klick * auf dem Hintergrund statt auf dem nächsten Knoten. Effektiv war nur jeder zweite Klick * wirksam, und der Durchlauf meldete „Storyeinsatz 2 wird auf der regionalen Lage nicht * angeboten" — ein Satz, der nach einem Fehler in der Kampagnenlogik klingt und keiner war. * * Für einen Spieler ist es dasselbe Ärgernis: Detail offen, Nachbarknoten anklicken, * nichts passiert. * * Die leichte Abdunklung bleibt als Hinweis, dass eine Ebene offen ist — die Karte bleibt * bedienbar. Geschlossen wird über „Schliessen" im Blatt oder durch die Wahl eines anderen * Knotens. */ #scene-base .tabpanel[data-panel="lage"] .rd-backdrop, #scene-base .tabpanel[data-panel="lage"] .rd-backdrop.open { display: block; position: absolute; inset: 0; z-index: 29; background: rgba(3, 7, 11, .28); pointer-events: none; /* <- der entscheidende Unterschied zum Hochformat */ transition: opacity .28s ease; } #scene-base .tabpanel[data-panel="lage"] .rd-backdrop { opacity: 0; } #scene-base .tabpanel[data-panel="lage"] .rd-backdrop.open { opacity: 1; } } /* ========================================================================== * 045 §14 — DIE WICHTIGSTE HANDLUNG SOLL AUCH SO AUSSEHEN. * * Der Einsatzeintrag IST bereits vollflächig anklickbar — die ganze Zeile ist ein