/* ═══════════════════════════════════════════════════════════════ StarshipOS — Responsive Layer v2 (Smartphone & Tablet) Eingebunden in templates/layout/base.html hinter tokens-v2.css, controls-v2.css und dem head-extra-Fragment. ── Warum jede Regel mit `.station-body` beginnt ─────────────── Die Ladereihenfolge allein reicht hier nicht. Der Thymeleaf Layout-Dialect haengt die Stylesheets der Stationsseite hinter den gesamten Layout-Head; /css/damage-control.css steht im gelieferten HTML also NACH dieser Datei und wuerde bei gleicher Spezifitaet gewinnen. Deshalb ist jeder Selektor mit `.station-body` praefixiert: (0,2,0) schlaegt die Ein-Klassen-Regeln der Stationen (0,1,0) unabhaengig von der Reihenfolge — und das ohne ein einziges `!important`, das spaeter niemand mehr gezielt uebersteuern koennte. Wer hier etwas ergaenzt, haelt sich an dieses Muster. ── Entwurfsgedanke ──────────────────────────────────────────── Zielgeraete laut CC_158 sind 10–15"-Android-Tablets im Kiosk-Modus (Steuer-Stationen) plus gelegentlich ein Smartphone (GM unterwegs, kleine Nebenstation, Prop). Die Stationen sind als zwei- bis dreispaltige Cockpits gebaut — „1fr + 320px Seitenspalte" ist das durchgaengige Muster. Unter ~1000 px gibt es dafuer keinen Platz. Die Antwort ist deshalb nicht „alles kleiner skalieren", sondern eine Stufe weniger Dimension pro Breite: Breit (>= 1024px) Cockpit: Spalten nebeneinander, Randleisten als vertikale Schienen links/rechts. Tablet ( 600–1023) Stapel: eine Spalte, Randleisten wandern an die Unterkante als Dock. Phone (<= 599px) Kompakt: wie Tablet, dazu kompakter Kopf, volle Breite fuer jedes Panel, Tabellen scrollen horizontal. Was NICHT passiert: kein Feature verschwindet. Auf dem Telefon ist dieselbe Station bedienbar wie auf der Bruecke, nur gestapelt. Eine Station, auf der ein Regler fehlt, ist im Spiel schlimmer als eine, auf der man scrollen muss. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 0. BREAKPOINT-VERTRAG Diese drei Breiten sind die einzigen, die im Projekt verwendet werden sollen. Neue Stationsseiten schreiben ihre Ausnahmen mit denselben Grenzen, sonst entstehen wieder Zwischenzustaende, in denen ein Panel halb umgebrochen ist. max-width: 599px Phone max-width: 1023px Phone + Tablet hochkant ("schmal") min-width: 1024px Tablet quer + Desktop + Beamer Zusaetzlich (orthogonal, nicht als Breitenersatz): (pointer: coarse) Touch-Metrik — greift auch am 22"-Touchmonitor ═══════════════════════════════════════════════════════════════ */ :root { /* Breite der fixierten Randschienen im Cockpit-Modus. Quelle: .gsp-tab (34px) und .ots-strip-tab (36px). */ --rail-left-w: 34px; --rail-right-w: 36px; /* Hoehe des unteren Docks im schmalen Modus (Reiterleiste). */ --dock-h: 44px; /* Sichere Bereiche (Notch / Home-Indicator). Ohne viewport-fit=cover sind alle env() 0 — die Rechnung bleibt also auch auf Geraeten ohne Aussparung korrekt. */ --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } /* ═══════════════════════════════════════════════════════════════ 1. SHELL — Viewport-Hoehe und Platz fuer die Randschienen Zwei Fehler, die in jeder Groesse auftreten und hier zentral behoben werden: a) 100vh ist auf Mobilgeraeten nicht die sichtbare Hoehe. Solange die Adressleiste eingeblendet ist, ist 100vh groesser als das Fenster; der untere Rand der Seite liegt unter der Browser-UI. 100dvh ("dynamic viewport height") ist die tatsaechlich freie Hoehe. Die 100vh-Zeile bleibt als Fallback davor stehen. b) Die beiden fixierten Randschienen (Spielstatus links, OTS-Tasks rechts) liegen UEBER dem Inhalt, ohne dass der Inhalt Platz fuer sie freihaelt. Deshalb ist auf jeder Station das erste Zeichen der Alarmleiste verdeckt ("REEN ALERT" statt "GREEN ALERT") und am rechten Rand fehlen 36px. Das ist keine Mobil-Eigenheit — es passiert auch am Desktop, faellt dort nur weniger auf. Die Shell bekommt daher einen Innenabstand in Schienenbreite. ═══════════════════════════════════════════════════════════════ */ .station-body { min-height: 100vh; min-height: 100dvh; } .station-shell { min-height: 100vh; min-height: 100dvh; /* Platz fuer die Randschienen. Wird im schmalen Modus (§3) auf 0 gesetzt, weil die Schienen dort nach unten wandern. */ padding-left: calc(var(--rail-left-w) + var(--safe-l)); padding-right: calc(var(--rail-right-w) + var(--safe-r)); } /* Ist das Spielstatus-Panel abgeschaltet (.gsp--off = display:none), waere der linke Innenabstand ungenutzt. :has() wird vom Projekt bereits vorausgesetzt (siehe ots-task-strip.css); faellt es aus, bleiben lediglich 34px Rand stehen — kein Layoutfehler. */ .station-shell:has(> .gsp.gsp--off) { --rail-left-w: 0px; } /* Niemand soll seitlich scrollen muessen, nur weil ein einzelnes Panel zu breit rechnet. Die eigentlichen Ursachen behandeln §4–§6; das hier ist die Grenze, an der ein uebersehener Fall auffaellt, ohne die Seite unbedienbar zu machen. */ .station-main { max-width: min(var(--shell-max), 100%); overflow-x: clip; } /* ═══════════════════════════════════════════════════════════════ 1b. BEDIENELEMENTE, DIE IHRE SPALTE SPRENGEN — gilt in JEDER Breite Ein so breit wie sein `size`-Default (rund 20 Zeichen). Beides zaehlt als Mindestbreite, beides ignoriert die Spalte, in der das Element steht. Das Sprungziel-Dropdown der Navigation ("SEC-04 — Tannhaeuser Rift") ist 397px breit und steht in einer 300px-Spalte. Diese Regel steht bewusst OHNE Media Query: ein 11"-Tablet im Querformat hat 1194px und faellt damit in den Cockpit-Modus — der Fehler tritt also genau dort auf, wo die Breakpoints nicht greifen. Sie kann nichts kaputtmachen: sie erlaubt Schrumpfen, sie erzwingt es nicht. ═══════════════════════════════════════════════════════════════ */ .station-body .station-main select, .station-body .station-main input, .station-body .station-main textarea { max-width: 100%; min-width: 0; } /* Derselbe Mechanismus eine Ebene hoeher: Grid- und Flex-Elemente haben per Default `min-width: auto` und koennen deshalb nicht unter ihre Inhaltsbreite schrumpfen. Eine Spalte, in der eine breite Tabelle steht, waechst dann ueber ihre Rasterbreite hinaus und schiebt das ganze Layout auf — bei der Spielerverwaltung auf einem 12,9"-Tablet quer um 177px. Auch das gilt in jeder Breite: die Spalten existieren oberhalb von 1023px ja gerade erst. Ohne Media Query, weil `min-width: 0` nur Schrumpfen erlaubt und nie erzwingt. */ .station-body [class*="-layout"] > *, .station-body [class*="-columns"] > *, .station-body .survey-main > *, .station-body .station-panel > * { min-width: 0; } /* Deutsche Komposita sind der zweite Dauerfall: „Atmosphaerendichtungen" ist ein einziges Wort von 278px und passt in keine 240px-Spalte. Ohne Umbruchpunkt laeuft es aus dem Panel heraus — im Cockpit genauso wie auf dem Telefon, nur faellt es dort frueher auf. `break-word` allein reicht nicht: es bricht zwar die Zeile, aendert aber nicht die Mindestbreite (min-content) des Elements. Als Flex-Element im Panelkopf schrumpft der Titel deshalb gar nicht erst unter seine Wortbreite — es gibt nie eine zu enge Zeile, die gebrochen werden koennte. Erst `min-width: 0` erlaubt das Schrumpfen, dann greift der Umbruch. */ .station-body .station-main :is(h1, h2, h3, h4, .panel-title, [class*="-label"], [class*="-name"]) { hyphens: auto; /* — trennt „Atmosphaeren-dichtungen" */ overflow-wrap: break-word; /* Notbremse, wenn die Trennung nicht reicht */ min-width: 0; } /* ═══════════════════════════════════════════════════════════════ 2. KOPFZEILE — vom Einzeiler zum Zweizeiler .station-header ist eine Flex-Zeile mit vier Gruppen: Titelblock, Bemannung, Gefahren-Badges, Ton. Nebeneinander brauchen die ~900px. Die bisherige Regel in styles.css stellt sie unter 768px komplett untereinander (flex-direction: column) — das kostet auf einem Telefon rund 160px Hoehe, bevor die Station ueberhaupt anfaengt. Stattdessen: Titelblock belegt Zeile 1 ueber die volle Breite, die drei Statusgruppen teilen sich Zeile 2. Das sind zwei Zeilen statt vier, ohne dass etwas entfaellt. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { .station-body .station-header { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; row-gap: var(--space-sm); column-gap: var(--space-sm); padding: var(--space-sm) var(--space-md); } /* Zeile 1 */ .station-body .station-heading { flex: 1 1 100%; flex-wrap: wrap; row-gap: 2px; column-gap: var(--space-sm); min-width: 0; } .station-body .station-heading h1 { font-size: var(--text-lg); min-width: 0; overflow-wrap: anywhere; } /* Zeile 2: Bemannung, Gefahren, Ton nebeneinander. `.station-crew` schiebt sich im Cockpit per `margin-left: auto` nach rechts. In der zweiten Zeile wuerde das eine Luecke aufreissen und die drei Gruppen auseinanderziehen — hier beginnen sie links. */ .station-body .station-crew, .station-body .hazard-indicator, .station-body .sound-panel { flex: 0 1 auto; min-width: 0; margin-left: 0; } } @media (max-width: 599px) { /* Der Breadcrumb wiederholt, was Code + Titel schon sagen. Auf dem Telefon ist die Zeile wertvoller als die Redundanz. */ .station-body .station-breadcrumb { display: none; } .station-body .station-heading h1 { font-size: var(--text-md); } /* Der Lautstaerkeregler darf schrumpfen — die Stummtaste nicht. */ .station-body .sound-panel { padding: 2px 4px; } /* Die Alarmleiste ist die wichtigste Zeile der Station. Sie bleibt beim Scrollen stehen, damit „RED ALERT" nicht weggescrollt wird. */ .station-body .alert-bar { position: sticky; top: 0; z-index: 800; padding-top: calc(var(--space-xs) + var(--safe-t)); } /* Stehend muss sie deckend sein — sonst scheint der Inhalt darunter durch (die Farbe der Leiste ist nur ein Hauch über dem Hintergrund). */ .station-body .alert-bar--GREEN { background: color-mix(in srgb, var(--alert-green) 10%, var(--bg-primary)); } .station-body .alert-bar--YELLOW { background: color-mix(in srgb, var(--alert-yellow) 15%, var(--bg-primary)); } .station-body .alert-bar--RED { background: color-mix(in srgb, var(--alert-red) 15%, var(--bg-primary)); } } /* ═══════════════════════════════════════════════════════════════ 3. RANDSCHIENEN → UNTERES DOCK Spielstatus-Panel (links) und OTS-Task-Strip (rechts) sind im Cockpit-Modus vertikale Schienen ueber die volle Hoehe. Auf einem Telefon nehmen die beiden Reiter zusammen 70 von 390 px Breite — 18 % des Bildschirms fuer zwei Griffe. Im schmalen Modus werden daraus zwei kleine Reiter an der Unterkante (links Status, rechts Tasks); aufgeklappt fahren sie als Bottom-Sheet nach oben. Das ist die Stelle, die ein Daumen auf einem gehaltenen Geraet erreicht. Das geht ohne Markup-Aenderung: beide Fragmente haben dieselbe Struktur — versteckte Checkbox,