/* ══════════════════════════════════════════════════════════════════════════ sq-sprache.css — IF1 (2026-09-15): die neue Formsprache als ZUSAETZLICHE Schicht ueber der Lobby. 🚨 DIE REGEL DIESER DATEI: hier steht NUR, was hinter dem Schalter `body.sq-sprache` haengt. Keine einzige Regel in game-v3.css wurde geaendert oder geloescht — wer den Schalter ausschaltet, sieht exakt den Bildschirm von heute. Marcel, 15.09.: „wir ersetzen nicht, wir bauen um." Jede Regel hier beginnt mit `body.sq-sprache #screen-lobby` (oder `body.sq-sprache` fuer die Farbwerte). Das ist Absicht und keine Umstaend- lichkeit: der Vorfahre IST der Schalter, und der Bildschirmbezug haelt die Runde bei der Lobby. Die Rollenteilung, aus mockups/bildschirme-neue-sprache.html uebersetzt: GOLD = Struktur und Besitz (das Gehaeuse, der Rahmen, was DA ist) CYAN = Energie und das Anklickbare (was ANTWORTET) Nie beide fuer dasselbe. Deshalb ruht der Knopf golden und wird unter dem Finger cyan — nicht heller gold. ══════════════════════════════════════════════════════════════════════════ */ body.sq-sprache { --sq-gold: #f0b429; --sq-goldRGB: 240, 180, 41; --sq-cyan: #2dd4bf; --sq-cyanRGB: 45, 212, 191; --sq-cyanHell: #7fe6d6; } /* ── 1. Der Menueknopf ────────────────────────────────────────────────────── Die Eckabschnitte gibt es seit Fix I1 bereits (clip-path-Chamfer) — neu sind der GOLDENE Balken links (heute grau), der Gefahrenstreifen oben rechts und die Indexnummer. Der Gefahrenstreifen ist ein HINTERGRUNDBILD, kein zusaetzliches Element: `.menu-btn::after` ist von der Tick-Kerbe belegt und `::before` traegt gleich die Indexnummer. Ein drittes Pseudo-Element gibt es nicht, ein neues DOM- Element waere ein Markup-Umbau gewesen — verboten in dieser Runde. */ body.sq-sprache #screen-lobby .menu-btn { --mb-chamfer: 20px; --mb-edge: rgba(var(--sq-goldRGB), 0.78); background-color: rgba(4, 8, 16, 0.80); background-image: repeating-linear-gradient(115deg, rgba(var(--sq-goldRGB), 0.70) 0 3px, transparent 3px 7px); background-repeat: no-repeat; background-position: right 30px top 0; background-size: 34px 8px; color: var(--sq-gold); padding-left: 34px; /* Platz fuer die Indexnummer, symmetrisch … */ padding-right: 34px; /* … damit die Beschriftung mittig bleibt */ transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } body.sq-sprache #screen-lobby .menu-btn .menu-arrow { color: rgba(var(--sq-goldRGB), 0.75); } body.sq-sprache #screen-lobby .menu-btn .menu-btn-sub { color: rgba(var(--sq-goldRGB), 0.42); } /* Die Indexnummer (001, 002 …) — OHNE eine einzige Aenderung am Markup. Ein CSS-Zaehler je Menue-Ebene zaehlt die Knoepfe; `decimal-leading-zero` liefert zwei Stellen, die fuehrende "0" im content macht drei daraus (9 -> "0"+"09" = 009, 10 -> "0"+"10" = 010). Zurueck- und Beenden-Knoepfe zaehlen NICHT mit: sie sind kein Menuepunkt, sondern ein Ausgang. Verborgene Knoepfe (`display:none`) erhoehen den Zaehler nach CSS-Spezifikation ohnehin nicht — genau richtig, denn im Browser ist „Mit Steam anmelden" unsichtbar. */ body.sq-sprache #screen-lobby .menu-level { counter-reset: sq-idx; } body.sq-sprache #screen-lobby .menu-btn:not(.back-btn):not(.menu-btn-quit) { counter-increment: sq-idx; } body.sq-sprache #screen-lobby .menu-btn:not(.back-btn):not(.menu-btn-quit)::before { content: "0" counter(sq-idx, decimal-leading-zero); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: rgba(var(--sq-cyanRGB), 0.62); pointer-events: none; } /* ── 2. Die Farbrolle: unter dem Finger wird der Knopf CYAN ───────────────── Das ist der eigentliche Kern der Sprache (Prompt, Abschnitt 3, Punkt 2) — nicht die Eckabschnitte. Gold sagt „der Knopf ist da", Cyan sagt „er antwortet". Dieselbe Rolle, die Cyan im Spiel schon hat (Ladering, Kommandoknopf im Zustand „bereit"). */ body.sq-sprache #screen-lobby .menu-btn:hover, body.sq-sprache #screen-lobby .menu-btn:focus-visible { --mb-edge: var(--sq-cyan); border-left-color: var(--sq-cyan); color: var(--sq-cyanHell); background-color: rgba(var(--sq-cyanRGB), 0.14); background-image: repeating-linear-gradient(115deg, rgba(var(--sq-cyanRGB), 0.80) 0 3px, transparent 3px 7px); box-shadow: 0 0 18px -4px rgba(var(--sq-cyanRGB), 0.55); text-shadow: 0 0 10px rgba(var(--sq-cyanRGB), 0.35); } body.sq-sprache #screen-lobby .menu-btn:hover .menu-arrow, body.sq-sprache #screen-lobby .menu-btn:focus-visible .menu-arrow { color: var(--sq-cyanHell); text-shadow: 0 0 8px rgba(var(--sq-cyanRGB), 0.6); } body.sq-sprache #screen-lobby .menu-btn:hover .menu-btn-sub, body.sq-sprache #screen-lobby .menu-btn:focus-visible .menu-btn-sub { color: rgba(var(--sq-cyanRGB), 0.75); } body.sq-sprache #screen-lobby .menu-btn:hover::before, body.sq-sprache #screen-lobby .menu-btn:focus-visible::before { color: var(--sq-cyanHell); } /* Zurueck-Knopf: bleibt zurueckgenommen, folgt aber derselben Regel — unter dem Finger cyan, nicht gold. Heute wird er beim Ueberfahren gold, und das waere in der neuen Sprache die falsche Aussage (Gold = Besitz, nicht Antwort). Kein Streifen, keine Nummer: ein Ausgang ist kein Menuepunkt. */ body.sq-sprache #screen-lobby .menu-btn.back-btn { --mb-edge: rgba(var(--sq-goldRGB), 0.30); background-image: none; padding-left: 20px; padding-right: 20px; color: #6a7090; } body.sq-sprache #screen-lobby .menu-btn.back-btn:hover { --mb-edge: var(--sq-cyan); color: var(--sq-cyanHell); background-color: rgba(var(--sq-cyanRGB), 0.10); background-image: none; text-shadow: 0 0 10px rgba(var(--sq-cyanRGB), 0.3); } /* Beenden bleibt rot — Gefahr ist eine eigene Rolle und wird nicht eingefaerbt. */ body.sq-sprache #screen-lobby .menu-btn.menu-btn-quit { background-image: none; padding-left: 20px; padding-right: 20px; } /* ── 3. Der Titel ────────────────────────────────────────────────────────── Zwei Toene, eine Zeile. Die Aufteilung in zwei Haelften kann CSS allein nicht: sie braucht zwei Elemente. Die setzt sq-sprache.js zur LAUFZEIT und nur bei eingeschaltetem Schalter — im Markup (`views/play-v3.ejs`) steht davon nichts, und mit ausgeschaltetem Schalter steht die Ueberschrift unveraendert da. */ body.sq-sprache #screen-lobby .lobby-title { color: var(--sq-gold); /* EINE Zeile. Die Ueberschrift steht in `#lobby-main`, und das ist per layout-config.js auf 400 px festgenagelt (`overflow-x:hidden`) — sie MUSS also hineinpassen, statt dagegen anzuschreiben. Bei 24 px brach sie um. Klein und gesperrt ist zugleich naeher an der Vorlage: dort steht unter dem grossen Schriftzug eine schmale Zeile „Trading Card Game · v0.7.370", und genau diese Rolle hat der Kickstarter-Zusatz hier. */ font-size: 13px; letter-spacing: 0.24em; white-space: nowrap; line-height: 1.2; margin-top: 2px; } body.sq-sprache #screen-lobby .lobby-title br { display: none; } body.sq-sprache #screen-lobby .lobby-title .sq-titel-a { color: #ffffff; } body.sq-sprache #screen-lobby .lobby-title .sq-titel-b { color: var(--sq-gold); } body.sq-sprache #screen-lobby .lobby-title .sq-titel-trenn { color: rgba(var(--sq-goldRGB), 0.55); padding: 0 0.45em; } /* Die Beschriftungen ueber den Eingabefeldern gehoeren zum Gehaeuse — gold. */ body.sq-sprache #screen-lobby .menu-label { color: rgba(var(--sq-goldRGB), 0.70); } body.sq-sprache #screen-lobby .menu-input:focus { border-color: var(--sq-cyan); box-shadow: 0 0 12px -4px rgba(var(--sq-cyanRGB), 0.6); } /* ── 4. Die Leitbahnen ───────────────────────────────────────────────────── Die Flaeche selbst. Sie faengt NICHTS ab (`pointer-events:none`) und liegt UNTER der Bedienung: `.lobby-main` hat z-index 2, `#lobby-ship-container` hat 0 — die Bahnen sitzen dazwischen. Das Element entsteht nur, wenn der Schalter an ist (sq-sprache.js), deshalb gibt es im Aus-Zustand weder Canvas noch Bildschleife. */ body.sq-sprache #screen-lobby #sq-bahnen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; } /* ── 5. Der Pre-Enlist-Kasten ─────────────────────────────────────────────── II1 (2026-09-16). 🚨 UMBAU, KEIN NEUBAU: die drei Elemente im Kasten sind woertlich dieselben DOM-Knoten, die die Lobby schon hat — `#lobby-promo-banner` (seit 17.07.), `#lobby-discord-btn` (seit 17.07.) und `#lobby-steam-btn` (seit BE1, 20.08.). sq-sprache.js haengt sie beim Einschalten in `#sq-preenlist` um und beim Ausschalten zurueck; keiner von ihnen wird erzeugt, ersetzt oder in seiner Verlinkung angefasst. Was hier steht, ist ausschliesslich ihre KLEIDUNG. Aussenmasse des Kastens selbst stehen in layout-config.js (IG1: die Formsprache aendert keine gefuehrten Aussenmasse) — hier kein width/height mit !important, kein min-/max-width, kein min-/max-height. */ body.sq-sprache #screen-lobby #sq-preenlist { /* Sichtbar nur im Hauptmenue — dieselbe Bedingung, unter der die drei Elemente heute schon erscheinen (game-v3.css, `:has(#menu-main.active)`). Sie wird hier WIEDERHOLT und nicht geerbt: der Kasten ist ein eigenes Element und faellt sonst in den Untermenues nicht mit weg. */ display: none; position: relative; box-sizing: border-box; background: rgba(4, 8, 16, 0.90); border: 1px solid rgba(var(--sq-cyanRGB), 0.45); /* Vorlage: der Community- Kasten ist der einzige mit cyanem statt goldenem Rahmen */ clip-path: polygon(0 12px, 12px 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); overflow: hidden; z-index: 3; /* ueber den Leitbahnen (1), wie .lobby-main (2) */ } body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-preenlist { display: flex; flex-direction: column; } /* Der goldene Balken links und der Gefahrenstreifen oben rechts — dieselben zwei Pseudo-Elemente wie an jedem Rahmen der Vorlage (.fui::before/::after). */ body.sq-sprache #screen-lobby #sq-preenlist::before { content: ''; position: absolute; left: -1px; top: 14px; width: 3px; height: 34px; background: var(--sq-cyan); } body.sq-sprache #screen-lobby #sq-preenlist::after { content: ''; position: absolute; right: 8px; top: -1px; width: 44px; height: 9px; background: repeating-linear-gradient(115deg, rgba(var(--sq-cyanRGB), 0.85) 0 4px, transparent 4px 9px); } /* Kopfzeile mit Indexnummer. 🚨 Die Nummer ist HART und kein CSS-Zaehler: der Zaehler aus Abschnitt 1 laeuft ueber `.menu-level` und zaehlt Menue- knoepfe; dieser Kasten steht ausserhalb jeder Menue-Ebene. */ body.sq-sprache #screen-lobby #sq-preenlist .sq-kasten-kopf, body.sq-sprache #screen-lobby #sq-status .sq-kasten-kopf, body.sq-sprache #screen-lobby #sq-roadmap .sq-kasten-kopf { flex: none; padding: 8px 14px 7px; font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sq-cyanHell); border-bottom: 1px solid rgba(var(--sq-cyanRGB), 0.28); display: flex; justify-content: space-between; align-items: center; } body.sq-sprache #screen-lobby #sq-preenlist .sq-kasten-idx, body.sq-sprache #screen-lobby #sq-status .sq-kasten-idx { font-size: 9px; letter-spacing: 0.1em; color: rgba(var(--sq-cyanRGB), 0.62); } /* Rumpf: links die Figur, rechts der Text — wie im Kickstarter-Banner. */ body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-rumpf { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; } /* Die BB. Sie steht mit der Unterkante auf der Kastenkante auf und darf oben herausragen — genau dafuer wurde sie in IE1 freigestellt (545x1066, der Schnitt sitzt im BILD, nicht im CSS). Der cyane Hof unter ihr ist die Lichtquelle, kein Rahmen. */ body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-bild { flex: none; width: 132px; position: relative; display: flex; align-items: flex-end; justify-content: center; } body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-hof { position: absolute; left: 50%; top: 52%; width: 170px; height: 170px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(var(--sq-cyanRGB), 0.26) 0%, rgba(var(--sq-cyanRGB), 0.09) 44%, transparent 70%); } body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-bild img { position: relative; z-index: 1; display: block; height: 252px; /* EINE Zahl steuert die Groesse (IE1) */ width: auto; filter: drop-shadow(0 0 20px rgba(var(--sq-cyanRGB), 0.40)) drop-shadow(0 5px 10px rgba(2, 4, 10, 0.80)); } body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-text { flex: 1 1 auto; min-width: 0; padding: 10px 14px 12px 2px; display: flex; flex-direction: column; justify-content: center; } body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-titel { font-size: 13px; letter-spacing: 0.06em; line-height: 1.4; color: var(--sq-cyanHell); } body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-titel b { color: var(--sq-gold); font-weight: 700; } body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-punkte { margin-top: 9px; font-size: 10.5px; line-height: 1.7; /* LO1: 1.85 -> 1.7, Platz fuer die vierte Knopfzeile */ color: #aab4c2; } body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-punkte div::before { content: '\25B8\00a0'; /* ▸ — Zeichen, kein Text */ color: rgba(var(--sq-goldRGB), 0.75); } /* ── Die drei vorhandenen Elemente, umgekleidet ───────────────────────────── Ab hier wird NICHTS erzeugt: jede Regel kleidet einen Knoten, den es seit Monaten gibt. Sie stehen im Kasten nebeneinander statt einzeln auf der Buehne — deshalb `position:static`. Das darf CSS hier, weil sq-sprache.js die von der Layout-Engine geschriebenen Inline-Stile vorher RAEUMT (und beim Ausschalten `applyLayout('lobby')` sie wieder setzt); ein `!important` waere der stille Weg an der Engine vorbei, den IG1 verbietet. */ /* LO1: seit dem Livestream-Knopf stehen VIER Knoepfe untereinander. Der Kasten ist gefuehrt (400x300, narrow 360x280) und bleibt es — Platz schafft die Kleidung: Abstand 12 -> 10, Luecke 6 -> 5, Knopf-Innenabstand 6 -> 5 und die Punkteliste etwas enger. Gemessen (scripts/lo1-nachweis.js, Fall 15): ohne das lief die Textspalte in narrow ueber (Luft oben -6, unten -3), bei 16:9 blieben oben 4 px. */ body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-knoepfe { margin-top: 10px; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; } /* Gemeinsame Knopfform der Vorlage (.knopf.klein) fuer alle drei. */ body.sq-sprache #screen-lobby #sq-preenlist .lobby-promo-banner, body.sq-sprache #screen-lobby #sq-preenlist .lobby-discord-btn, body.sq-sprache #screen-lobby #sq-preenlist .lobby-steam-btn, body.sq-sprache #screen-lobby #sq-preenlist .lobby-twitch-btn { position: static; display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; padding: 5px 11px; border-radius: 0; border-width: 1px; border-style: solid; font-family: 'Orbitron', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; opacity: 1; transform: none; clip-path: polygon(0 8px, 8px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } /* Pre-Enlist: der EINZIGE Knopf, der von sich aus leuchtet (.knopf.bereit). Sein Bild tritt im Kasten zurueck — es wird NICHT entfernt, nur verborgen, und kommt beim Ausschalten unveraendert wieder. */ body.sq-sprache #screen-lobby #sq-preenlist .lobby-promo-banner { border-color: var(--sq-cyan); color: var(--sq-cyanHell); background: rgba(var(--sq-cyanRGB), 0.12); animation: sqBereitPuls 2.4s ease-in-out infinite; } body.sq-sprache #screen-lobby #sq-preenlist .lobby-promo-banner img { display: none; } /* Der Pfeil als Zeichen im Stylesheet — nicht als Textknoten (s. sq-sprache.js). */ body.sq-sprache #screen-lobby #sq-preenlist .lobby-promo-banner .sq-pe-knopf-text::after { content: '\00a0\25B8'; color: rgba(var(--sq-cyanRGB), 0.85); } body.sq-sprache #screen-lobby #sq-preenlist .lobby-promo-banner:hover { background: rgba(var(--sq-cyanRGB), 0.22); color: #ffffff; filter: none; } @keyframes sqBereitPuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--sq-cyanRGB), 0.34); } 50% { box-shadow: 0 0 20px -2px rgba(var(--sq-cyanRGB), 0.60); } } /* Discord und Steam behalten ihre Hausfarbe — sie sind fremde Marken, und die Formsprache faerbt keine fremde Marke um. Nur die FORM wird angeglichen. */ body.sq-sprache #screen-lobby #sq-preenlist .lobby-discord-btn { border-color: rgba(88, 101, 242, 0.75); color: #9aa6ff; background: rgba(88, 101, 242, 0.10); } body.sq-sprache #screen-lobby #sq-preenlist .lobby-steam-btn { border-color: rgba(155, 176, 196, 0.75); color: #cdd8e4; background: rgba(155, 176, 196, 0.10); } /* LO1: der Livestream-Knopf — dieselbe Regel wie Discord und Steam: eine fremde Marke behaelt ihre Hausfarbe (Twitch-Violett), nur die FORM wird angeglichen. Er steht unter dem Steam-Knopf (vierter in der Reihe, bricht um). Die Regel `display:inline-flex` oben macht ihn hier sichtbar; ausserhalb des Kastens bleibt er verborgen (game-v3.css). */ body.sq-sprache #screen-lobby #sq-preenlist .lobby-twitch-btn { border-color: rgba(145, 70, 255, 0.75); color: #c4a6ff; background: rgba(145, 70, 255, 0.10); cursor: pointer; } body.sq-sprache #screen-lobby #sq-preenlist .lobby-twitch-btn:hover { background: rgba(145, 70, 255, 0.22); color: #ffffff; } /* Die Wortmarken-Symbole bleiben, nur kleiner. */ body.sq-sprache #screen-lobby #sq-preenlist .lobby-discord-icon, body.sq-sprache #screen-lobby #sq-preenlist .lobby-steam-icon, body.sq-sprache #screen-lobby #sq-preenlist .lobby-twitch-icon { width: 13px; height: 13px; flex-shrink: 0; } /* LO1: narrow (1/1 .. 6/5) — der Kasten ist dort 20 px niedriger (280), die vier Knopfzeilen brauchen dieselbe Hoehe. Die Punkteliste und die Innenabstaende der Textspalte werden enger; Schriftgroessen bleiben. */ @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 6/5) { body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-text { padding: 6px 12px 7px 2px; } body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-punkte { margin-top: 6px; line-height: 1.5; } body.sq-sprache #screen-lobby #sq-preenlist .sq-pe-knoepfe { margin-top: 8px; } } /* Hochformat: `lobby.portrait` fuehrt nur `lobby-main` (CX1) — ein Kasten ohne Ankerwert stuende dort unpositioniert herum. Dieselbe Entscheidung, die game-v3.css fuer die drei Einzelelemente schon getroffen hat. */ @media (max-aspect-ratio: 1/1) { body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-preenlist { display: none; } } /* ── 6. Der Status-Kasten ─────────────────────────────────────────────────── IJ1 (2026-09-16). Drei Zeilen, rechts der Wert. Er teilt sich Kopfzeile und Indexnummer mit dem Pre-Enlist-Kasten (Selektoren oben erweitert, nicht verdoppelt) und traegt den GOLDENEN Rahmen der Vorlage — cyan ist dort dem Community-Kasten vorbehalten. Die Farbregel, woertlich aus dem Prompt: ZAHLEN in Gold (Bestand, was da ist), "Bereit" in Cyan (Zustand, was antwortet). Nie beides fuer dasselbe. */ body.sq-sprache #screen-lobby #sq-status { display: none; position: relative; box-sizing: border-box; background: rgba(4, 8, 16, 0.90); border: 1px solid rgba(var(--sq-goldRGB), 0.34); clip-path: polygon(0 12px, 12px 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); overflow: hidden; z-index: 3; } body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-status { display: flex; flex-direction: column; } body.sq-sprache #screen-lobby #sq-status::before { content: ''; position: absolute; left: -1px; top: 14px; width: 3px; height: 34px; background: var(--sq-gold); } body.sq-sprache #screen-lobby #sq-status::after { content: ''; position: absolute; right: 8px; top: -1px; width: 44px; height: 9px; background: repeating-linear-gradient(115deg, rgba(var(--sq-goldRGB), 0.85) 0 4px, transparent 4px 9px); } /* Geraetebeschriftung — im Stylesheet, weil ein Literal in textContent fuer den i18n-Waechter ein Anzeigetext waere (II1 hat so den Pfeil gefunden). */ body.sq-sprache #screen-lobby #sq-status .sq-kasten-idx::after { content: 'NET'; } body.sq-sprache #screen-lobby #sq-status .sq-status-rumpf { flex: 1 1 auto; min-height: 0; padding: 4px 14px 6px; display: flex; flex-direction: column; justify-content: center; } body.sq-sprache #screen-lobby #sq-status .sq-status-zeile { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 11.5px; border-bottom: 1px solid rgba(139, 147, 168, 0.14); } body.sq-sprache #screen-lobby #sq-status .sq-status-zeile:last-child { border-bottom: none; } body.sq-sprache #screen-lobby #sq-status .sq-status-name { color: #8b93a8; } body.sq-sprache #screen-lobby #sq-status .sq-status-wert { display: inline-flex; align-items: center; gap: 5px; } /* GOLD = Bestand. */ body.sq-sprache #screen-lobby #sq-status .sq-status-zahl { color: var(--sq-gold); font-weight: 700; font-variant-numeric: tabular-nums; /* die Zeile springt nicht bei 9 -> 10 */ } body.sq-sprache #screen-lobby #sq-status .sq-status-dim { color: #8b93a8; } /* Das Trennzeichen als Zeichen im Stylesheet, nicht als Textknoten. LS1: "X Spieler / X Games / X Spiele gegen Bot" — der Abstand kommt aus dem gap der Wertspalte. */ body.sq-sprache #screen-lobby #sq-status .sq-status-trenner::before { content: '/'; color: #8b93a8; } /* Der Punkt neben "Online" — grau, solange niemand da ist; er leuchtet erst, wenn die Zahl es rechtfertigt. Eine Anzeige, die immer gruen ist, sagt nichts. */ body.sq-sprache #screen-lobby #sq-status .sq-status-punkt { display: inline-block; width: 7px; height: 7px; background: rgba(139, 147, 168, 0.45); } body.sq-sprache #screen-lobby #sq-status .sq-status-punkt.sq-status-punkt-an { background: var(--sq-cyan); box-shadow: 0 0 7px rgba(var(--sq-cyanRGB), 0.75); } /* CYAN = Zustand. Der einzige cyane Wert im Kasten. */ body.sq-sprache #screen-lobby #sq-status .sq-status-bereit { color: var(--sq-cyan); } body.sq-sprache #screen-lobby #sq-status .sq-status-weg { color: #d06060; } /* Hochformat: wie beim Pre-Enlist-Kasten kein gefuehrter Ankerwert (lobby.portrait fuehrt nur lobby-main, Fund CX1) — also ausblenden statt unpositioniert stehen. */ @media (max-aspect-ratio: 1/1) { body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-status { display: none; } } /* ── 7. Die Komposition: die Gruppe steht mittig ──────────────────────────── IM1 (2026-09-16). Marcel: „einfach nur weiter nach links, damit Buttons und die beiden Kaesten mittig sind." Die Vorlage macht daraus ein zweispaltiges Gitter, das als GANZES mittig auf der Buehne steht (mockups/bildschirme-neue-sprache.html, Zeile 171: `max-width:1240px; margin:6px auto 0`). 🚨 GERECHNET, NICHT GESCHOBEN. Die Gruppe steht heute so (gemessen, scripts/im1-messung.js) — W ist die BUEHNENbreite, nicht die Bildschirm- breite (sie klemmt bei 1280 und waechst bis 1920, s. layout-engine.js): Menuespalte links = W/2 - 200 (Anker center, Pivot center, 400 breit) beide Kaesten rechts = W - 8 (Anker mid-right, Pivot mid-right) Gruppenmitte = 3W/4 - 104, Buehnenmitte = W/2. Der Versatz ist die Differenz: Versatz = W/2 - (3W/4 - 104) = 104px - W/4 Ein fester Pixelwert taete es NICHT: bei 1280 waeren das -216, bei 1706 (21:9) aber -323. Gemessen ueber 1280 .. 1720 Buehnen-px, Randdifferenz ueberall 0 (scripts/im1-versuch.js). 🚨 WARUM `margin-left` UND NICHT `transform`. Beide ueberleben die Engine — `applyToElement()` schreibt position/left/top/width/height und leert right/bottom/min-width/min-height, sonst nichts (layout-anchors.js:123-135). Aber ein Prozentwert in `transform: translateX()` bezieht sich auf die EIGENE Breite des Elements, in `margin-left` dagegen auf die Breite des umgebenden Rahmens — und der ist hier gemessen `#screen-lobby` (position:relative) und exakt so breit wie die Buehne. Nur so laesst sich „W/4" ueberhaupt hinschreiben. `right` ist von der Engine geleert, also auto: der negative Rand verschiebt den Kasten und aendert seine Breite nicht (gemessen: 832 bzw. 1046 Buehnen-px vorher wie nachher). Kein `!important`, kein min-/max-width, keine Aenderung an layout-config.js — die gefuehrten Aussenmasse bleiben, wo sie hingehoeren (IG1, Weg A). ⚠ DIE BEDINGUNG IST DIESELBE WIE DIE DER KAESTEN. In den Untermenues sind beide Kaesten `display:none`; dort BESTEHT die Gruppe nur aus der Menuespalte, und die steht schon mittig. Wuerde der Versatz dort weitergelten, stuende die Spalte allein links der Mitte. Deshalb haengt er an `:has(#menu-main.active)` — an derselben Bedingung, unter der die Kaesten sichtbar sind, nicht an einer zweiten. Der Uebergang gleitet, damit der Wechsel eine Bewegung ist und kein Sprung. ⚠ Der Titelblock wandert mit, ohne eigene Regel: Logo, Untertitel und der Sprachumschalter stehen IN `#lobby-main` (views/play-v3.ejs, `.lobby-header` und `.lang-switch-wrap`). Eine halb verschobene Spalte ist hier strukturell nicht moeglich. */ body.sq-sprache #screen-lobby:has(#menu-main.active) #lobby-main, body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-status, body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-preenlist { transition: margin-left 0.22s ease; } /* `narrow` (Seitenverhaeltnis 1.0 .. 1.2): die Menuespalte ist dort 360 breit, der Versatz also 104px -> (180+8)/2 = 94px. Die Buehne ist in diesem Band immer 1280 breit, aber die Rechnung bleibt dieselbe Form. 🚨 Unter 1/1 steht KEINE Regel: dort sind beide Kaesten ausgeblendet (s. Abschnitt 5 und 6), die Gruppe ist wieder nur die Spalte, und die steht mittig. Ein Versatz haette sie ohne Grund nach links gezogen. Die Reihenfolge der beiden Bloecke ist Absicht: bei genau 1.2 treffen beide zu, der spaetere gewinnt — und 1.2 gehoert der Engine nach zu `default` (layout-engine.js, computeGeometry: `else if (ratio < 1.2) narrow`). */ @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 6/5) { body.sq-sprache #screen-lobby:has(#menu-main.active) #lobby-main, body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-status, body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-preenlist { margin-left: calc(94px - 25%); } } @media (min-aspect-ratio: 6/5) { body.sq-sprache #screen-lobby:has(#menu-main.active) #lobby-main, body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-status, body.sq-sprache #screen-lobby:has(#menu-main.active) #sq-preenlist { margin-left: calc(104px - 25%); } } /* ── LP1 (2026-09-23): Menue und Roadmap ruecken an den rechten Kasten ────── Seit LO1 ist die Gruppe dreispaltig; IM1s Versatz haelt aber nur die Mitte der ZWEI alten Spalten. Ab einer Buehne ueber 1280 (Seitenverhaeltnis ueber 16:9, z. B. ein Browserfenster mit Leisten) klafft deshalb zwischen Menue und Status-Kasten eine Luecke, die mit W waechst (W/2 - 608: 0 bei 1280 ueber der 32er-Fuge, 245 bei 21:9). 🚨 DIE REGEL: die Lage der linken Gruppen ergibt sich aus der LINKEN KANTE DES RECHTEN KASTENS — nicht aus einer festen Zahl. Der Kasten selbst bleibt, wo er ist (Regel darueber unveraendert). Kastenkante = W - 8 - 400 + (104px - 25%) Anker mid-right -8, Breite 400 (layout-config.js), IM1-Versatz Spalte links = Kastenkante - 32 - 400 32er-Fuge wie ueberall margin-left = Spalte links - (W/2 - 200) die Engine setzt die Spalte mittig (Anker center) Bei W = 1280 ergibt das genau IM1s -216 — dort aendert sich nichts. Die Roadmap folgt der Spalte (Abschnitt 19). `%` ist die Buehnenbreite (`#screen-lobby`, gemessen IM1), die Variablen werden erst am Element aufgeloest. Weg A: `margin-left` ist kein gefuehrtes Mass (die Engine schreibt es nicht, s. IM1) — kein Eintrag in layout-config.js, kein !important. Nur im default-Band: narrow hat eine feste Buehne (1280), Hochformat und AUS- Zustand sind von diesen Selektoren nicht erfasst. */ @media (min-aspect-ratio: 6/5) { body.sq-sprache #screen-lobby { --sq-kasten-kante: calc(100% - 408px + 104px - 25%); --sq-spalte-links: calc(var(--sq-kasten-kante) - 32px - 400px); } body.sq-sprache #screen-lobby:has(#menu-main.active) #lobby-main { margin-left: calc(var(--sq-spalte-links) - (50% - 200px)); } } /* ── 8. Der Abdunkler hinter dem Titelblock ───────────────────────────────── IM1. Die Kulisse (`public/bg-space.jpg`) hat ihre Sonne oben links. Solange die Menuespalte mittig stand, war das kein Problem — nach der Verschiebung aus Abschnitt 7 steht der Schriftzug genau davor. Marcel: „wichtig ist, dass wir zur besseren Lesbarkeit dann vermutlich auch die Sonne wieder an der Logo-Stelle abdunkeln muessen." ⚠ NICHT DAS GANZE BILD. Die Kulisse ist bewusst hell; die Vorlage nimmt mit `#buehne::before` nur oben und unten einen Hauch. Was hier steht, ist der Schleier der Vorlage selbst (mockups/bildschirme-neue-sprache.html, Zeile 174-177: „ein weicher dunkler Schleier, weil die Sonne der Kulisse genau dort steht und sonst blendet") — ein Verlauf, der zum Rand hin auf 0 geht und deshalb keine sichtbare Kante hat. Er haengt am Titelblock und nicht an der Buehne: so wandert er mit, wenn die Spalte sich verschiebt, und steht auch im Hochformat richtig. `::before` ist an `.lobby-header` frei (geprueft: game-v3.css kennt dort kein Pseudo- Element), `position:absolute` haelt ihn aus dem Flex-Fluss — sonst waere er ein fuenftes Flex-Kind und wuerde das Logo nach unten schieben. `z-index:-1` legt ihn hinter Logo und Schrift, aber innerhalb von `#lobby-main` (z-index:2) — er kann also nicht hinter die Kulisse fallen. */ body.sq-sprache #screen-lobby .lobby-header { position: relative; } body.sq-sprache #screen-lobby .lobby-header::before { content: ''; position: absolute; left: 50%; top: 50%; /* IW1 (2026-09-17): 130%/170% -> 220%/240%, Mitte 48% -> 56%. Marcel: „das Abdunkeln muss da ein bisschen groesser gemacht werden, damit das Wort ,Kickstarter' auch besser lesbar ist." GEMESSEN, warum: die Kickstarter-Zeile sitzt am UNTEREN Rand des Titelblocks (Mitte bei 94,5 % seiner Hoehe), der Schleier war aber auf dessen MITTE zentriert. An den Enden der Zeile lag der normierte Ellipsenradius bei 0,94 — jenseits des letzten Farbstopps (78 %), also Deckkraft 0. Genau dort steht die Kulisse am hellsten (Sonnenstrahl links, Planetenkante rechts): Kontrast 1,26:1 (scripts/iw1-messung.js). Die Ellipse ist deshalb breiter (sie muss die ganze Zeile fassen, nicht nur das Logo) und ihre Mitte tiefer (zwischen Logo und Zeile). ⚠ NICHT staerker in der Mitte — 0,90 statt 0,88 ist die einzige Aenderung am Kern. Was fehlte, war Reichweite, nicht Schwaerze. ⚠ Der letzte Stopp bleibt bei Deckkraft 0: eine Kante entsteht nur dort, wo ein Verlauf auf einen Wert > 0 endet. */ width: 150%; height: 260%; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(2, 4, 10, 0.90) 0%, rgba(2, 4, 10, 0.85) 55%, rgba(2, 4, 10, 0.45) 68%, rgba(2, 4, 10, 0) 77%); } /* ── 9. Das Atmen ────────────────────────────────────────────────────────── IM1. Marcel: „das Atmen, also die Idle-Animation der Buttons, fehlt noch." 🚨 ZWEI VERSCHIEDENE BEWEGUNGEN, UND SIE DUERFEN SICH NICHT INS GEHEGE KOMMEN: Atmen — sehr langsames Heben und Senken -> ALLE vier Menuekaesten Pulsieren — der Rand leuchtet auf -> GENAU EINER Das Pulsieren bleibt dem Pre-Enlist-Knopf (`sqBereitPuls`, Abschnitt 5). Wenn alles pulsiert, bedeutet Pulsieren nichts mehr — dieselbe Grenze, die FV1 fuer die Benachrichtigungsklaenge gezogen hat. Das Atmen hier traegt deshalb KEIN Leuchten: nur Bewegung. ⚠ NUR DIE BEWEGUNG, KEINE GROESSENAENDERUNG. Die Vorlage hat im selben Keyframe noch `scale(1.008)` und einen Schein; beides ist hier bewusst weggelassen. Ein wachsender Kasten schiebt seine Nachbarn und stoert beim Lesen, und der Schein waere das zweite Pulsieren. 🚨 WARUM DIE `translate`-EIGENSCHAFT UND NICHT `transform`. `.menu-btn:active` setzt `transform: scale(0.98)` (game-v3.css). Eine laufende Animation auf `transform` haette diese Rueckmeldung beim Druecken ueberstimmt. `translate` ist eine eigene Eigenschaft und wird VOR `transform` angewandt — beide wirken nebeneinander, das Druecken bleibt sichtbar. 🚨 WARUM DIE LISTE BEIDE ANIMATIONEN NENNT. `.menu-level.active .menu-btn` traegt bereits `animation: menu-fade-in 0.3s ease-out both` (game-v3.css) — den Auftritt beim Bildschirmwechsel. Eine Regel mit hoeherer Spezifitaet ERSETZT diese Liste, sie ergaenzt sie nicht; ohne die Nennung waere der Auftritt bei eingeschaltetem Schalter still verschwunden. Und `animation-delay` bleibt hier ABSICHTLICH ungesetzt: die Staffelung des Auftritts (`:nth-child(N)`, 0.1s .. 0.55s) gilt damit weiter. Ein einzelner Verzoegerungswert wiederholt sich ueber die ganze Liste — er trifft also beide Animationen, und beim Atmen ist er folgenlos, weil dessen PHASE in den Keyframes steckt und nicht in einer Verzoegerung. 🚨 JEDER KASTEN MIT EIGENER PHASE UND EIGENEM TAKT. Vier Keyframe-Saetze, um je eine Vierteldrehung versetzt, dazu vier verschiedene Dauern — die Reihe ist damit zu KEINEM Zeitpunkt im Gleichschritt, auch nicht im Augenblick des Ladens. (Vier gleiche Keyframes mit nur verschiedener Dauer waeren beim Start alle bei 0 gewesen.) Dieselbe Asymmetrie wie bei den Leitbahnen in Abschnitt 4. */ @keyframes sqAtmenA { /* Phase 0 */ 0%, 100% { translate: 0 0; } 25% { translate: 0 -0.75px; } 50% { translate: 0 -1.5px; } 75% { translate: 0 -0.75px; } } @keyframes sqAtmenB { /* Phase 1/4 */ 0%, 100% { translate: 0 -0.75px; } 25% { translate: 0 -1.5px; } 50% { translate: 0 -0.75px; } 75% { translate: 0 0; } } @keyframes sqAtmenC { /* Phase 2/4 */ 0%, 100% { translate: 0 -1.5px; } 25% { translate: 0 -0.75px; } 50% { translate: 0 0; } 75% { translate: 0 -0.75px; } } @keyframes sqAtmenD { /* Phase 3/4 */ 0%, 100% { translate: 0 -0.75px; } 25% { translate: 0 0; } 50% { translate: 0 -0.75px; } 75% { translate: 0 -1.5px; } } body.sq-sprache #screen-lobby #menu-main .menu-btn:not(.back-btn):not(.menu-btn-quit) { animation-name: sqAtmenA, menu-fade-in; animation-duration: 5.2s, 0.3s; animation-timing-function: ease-in-out, ease-out; animation-iteration-count: infinite, 1; animation-fill-mode: none, both; will-change: translate; } /* Eigener Takt und eigene Phase je Kasten — die Dauern der Vorlage. `:nth-child` zaehlt hier genau die vier Menueknoepfe: der Sprachumschalter und der (im Browser verborgene) Beenden-Knopf stehen dahinter. 🚨 DIE `:not()`-KETTE MUSS HIER WIEDERHOLT WERDEN. Ohne sie ist die allgemeine Regel darueber SPEZIFISCHER als diese vier: jedes `:not()` gibt seinem Argument den vollen Klassenpunkt weiter, die Grundregel kommt damit auf (2,4,1) und ein blosses `:nth-child(N)` nur auf (2,3,1). Gemessen beim ersten Lauf (scripts/im1-nachweis.js, Fall 6): alle vier Knoepfe liefen auf `sqAtmenA` mit 5.2s — und die Probe war trotzdem GRUEN, weil die vier Auftritts-Verzoegerungen aus game-v3.css (0.1s .. 0.55s) vier knapp verschiedene Werte erzeugten. Vier verschiedene Zahlen sind eben noch kein Beleg fuer vier Phasen; 0.45s Spreizung auf 5.2s Takt sind 9 Prozent und damit praktisch Gleichschritt. */ body.sq-sprache #screen-lobby #menu-main .menu-btn:not(.back-btn):not(.menu-btn-quit):nth-child(1) { animation-name: sqAtmenA, menu-fade-in; animation-duration: 5.0s, 0.3s; } body.sq-sprache #screen-lobby #menu-main .menu-btn:not(.back-btn):not(.menu-btn-quit):nth-child(2) { animation-name: sqAtmenB, menu-fade-in; animation-duration: 6.1s, 0.3s; } body.sq-sprache #screen-lobby #menu-main .menu-btn:not(.back-btn):not(.menu-btn-quit):nth-child(3) { animation-name: sqAtmenC, menu-fade-in; animation-duration: 5.6s, 0.3s; } body.sq-sprache #screen-lobby #menu-main .menu-btn:not(.back-btn):not(.menu-btn-quit):nth-child(4) { animation-name: sqAtmenD, menu-fade-in; animation-duration: 6.6s, 0.3s; } /* ⚠ Sie hoert auf, wenn der Zeiger darueber steht — sonst wackelt genau das, was man gerade anfassen will. `paused` haelt den Kasten dort an, wo er steht; es springt nichts. */ body.sq-sprache #screen-lobby #menu-main .menu-btn:hover { animation-play-state: paused; } /* Wer Bewegung abbestellt hat, bekommt keine. Dieselbe Entscheidung, die game-v3.css fuer das Bot-Angebot trifft (`prefers-reduced-motion: reduce`). 🚨 UND DAS IST ZUGLEICH DER WEG FUER BROWSERPROBEN. Playwright haelt ein dauernd bewegtes Element fuer „not stable" und bricht `locator.hover()` / `.click()` nach 30 s ab — gemessen, nicht vermutet (erster Lauf von scripts/im1-nachweis.js, Fall 10). Den BEDIENER trifft das nicht (Fall 8: 56 Treffer, 0 Fehlgriffe an der Ruhelage), eine kuenftige Probe schon. Wer hier klicken will, nimmt entweder `page.mouse.move()`/`{force:true}` oder schaltet die Bewegung ab: browser.newContext({ reducedMotion: 'reduce' }) ⛔ BERICHTIGT in JI1 (2026-09-18): der Satz „verify-ui ist heute nicht betroffen — es faehrt mit ausgeschaltetem Schalter" gilt NICHT MEHR. Die Formsprache ist seit JI1 die VORGABE; jeder Browserlauf trifft diese Animation jetzt, sofern er nicht ausdruecklich `?sprache=0` setzt. `verify-ui` ist weiterhin heil, aber aus einem anderen Grund: es startet seit IN1 mit `reducedMotion: 'reduce'`. **Jedes NEUE Messskript muss das ebenfalls tun** — sonst laeuft sein erster Klick in den Deckel. */ @media (prefers-reduced-motion: reduce) { body.sq-sprache #screen-lobby #menu-main .menu-btn:not(.back-btn):not(.menu-btn-quit) { animation-name: menu-fade-in; animation-duration: 0.3s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; translate: none; } } /* ── 10. Freies Spiel (#menu-play) ───────────────────────────────────────── IN1 (2026-09-16). Der erste Bildschirm der Formsprache, der nicht nur aus Knoepfen besteht: ein Namensfeld, eine Fraktionsreihe mit Bildern, ein ``) bestimmt sie. Ohne `margin:auto 0` haengt der Inhalt des anderen oben und darunter steht eine tote Flaeche. */ body.sq-sprache #screen-lobby #menu-play .play-action-primary { font-size: 12px; letter-spacing: 0.1em; padding-bottom: 14px; } body.sq-sprache #screen-lobby #menu-play .play-action-primary > *:not(.play-action-sub), body.sq-sprache #screen-lobby #menu-play .play-action-secondary > .play-action-row { margin-top: auto; margin-bottom: auto; } body.sq-sprache #screen-lobby #menu-play .play-action-secondary { color: var(--sq-gold); } body.sq-sprache #screen-lobby #menu-play .play-action-row { padding: 0 10px; gap: 8px; flex-direction: column; align-items: center; } /* „GEGEN BOT" ist ein Knopf und sah wie eine Beschriftung aus — der Kasten darum ist ein `div` und kann die Klickbarkeit nicht anzeigen. Er bekommt deshalb die Knopfform der Vorlage. Der Knoten bleibt derselbe; er wird angezogen, nicht ersetzt. */ body.sq-sprache #screen-lobby #menu-play .play-action-row > button { color: var(--sq-gold); border: 1px solid rgba(var(--sq-goldRGB), 0.45) !important; background: rgba(var(--sq-goldRGB), 0.06) !important; padding: 6px 12px !important; font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 0.14em; clip-path: polygon(0 6px, 6px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 6px)); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } /* GOLD ruht, CYAN antwortet — dieselbe Regel wie am Menueknopf (Abschnitt 2). Der Suchkasten IST ein Knopf; der Botkasten ist ein `div`, dort antwortet sein Knopf. */ body.sq-sprache #screen-lobby #menu-play .play-action-primary:hover, body.sq-sprache #screen-lobby #menu-play .play-action-primary:focus-visible { border-color: var(--sq-cyan); color: var(--sq-cyanHell); box-shadow: 0 0 18px -4px rgba(var(--sq-cyanRGB), 0.55); } body.sq-sprache #screen-lobby #menu-play .play-action-row > button:hover { color: var(--sq-cyanHell); border-color: var(--sq-cyan) !important; background: rgba(var(--sq-cyanRGB), 0.12) !important; text-shadow: 0 0 10px rgba(var(--sq-cyanRGB), 0.35); } /* ── Der Schwierigkeitsgrad ────────────────────────────────────────────── 🚨 DAS `` zu verbergen ist der Weg, den der Prompt als zweite Moeglichkeit nennt. Er traegt nicht: `verify-ui.js:953` ruft `page.selectOption('#botDifficulty', …)`, und Playwrights Actionability verlangt ein SICHTBARES Element. Gemessen (scripts/in1-selectprobe.js): sichtbar, nur umgekleidet -> geht durch, Wert "hard" display:none -> BRICHT AB nach 6 s visibility:hidden -> BRICHT AB nach 6 s opacity:0 (Kasten bleibt) -> geht durch ← technisch, aber eine Falle: ein unsichtbares, anklickbares Bedienteil ueber den Knoepfen Also wird es UMGEKLEIDET, nicht ausgetauscht. `appearance:none` nimmt ihm den Systemanstrich, alles Uebrige ist Farbe und Form. Jeder Leser (`joinBotGame()`, verify-ui, der Botlauf selbst) sieht denselben Knoten mit denselben Werten. */ body.sq-sprache #screen-lobby #menu-play #botDifficulty.play-select { appearance: none; -webkit-appearance: none; background: rgba(2, 6, 14, 0.92) !important; /* !important nur, weil die Bestandsregel .play-select selbst mit !important schreibt — hier wird eine vorhandene Farbregel ueberstimmt, KEIN Aussenmass (Weg A gilt) */ border: 1px solid rgba(var(--sq-goldRGB), 0.45) !important; border-radius: 0 !important; color: var(--sq-gold) !important; font-family: 'Orbitron', sans-serif; font-size: 10px !important; letter-spacing: 0.1em; padding: 5px 9px !important; min-width: 84px !important; clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); transition: border-color 0.15s ease, color 0.15s ease; } body.sq-sprache #screen-lobby #menu-play #botDifficulty.play-select:hover, body.sq-sprache #screen-lobby #menu-play #botDifficulty.play-select:focus { border-color: var(--sq-cyan) !important; color: var(--sq-cyanHell) !important; } body.sq-sprache #screen-lobby #menu-play #botDifficulty.play-select option { background: #040a14 !important; color: var(--sq-gold) !important; font-size: 11px !important; } /* ── Kasten 003: der private Raum ──────────────────────────────────────── Er ist ein `.menu-btn` und traegt darum seit IM1 schon Balken, Streifen und eine Indexnummer — nur zaehlt der CSS-Zaehler je Menue-Ebene, und auf dieser Ebene ist er der erste, bekommt also „001". In der Vorlage ist er der dritte. Die Nummer wird hier gesetzt, nicht gezaehlt. */ body.sq-sprache #screen-lobby #menu-play .menu-btn:not(.back-btn)::before { content: '003'; } /* ── Das Namensfeld ────────────────────────────────────────────────────── Es steht UEBER den beiden Kaesten, nicht in „Gegner suchen": der Name gilt fuer beide Wege — auch das Botspiel traegt ihn — und in einem der Kaesten stuende er wie eine Bedingung nur dieses Kastens. Das Feld selbst wird nur angezogen; es bleibt `#guestName`, nimmt Eingaben an wie heute, und `page.fill('#guestName', …)` (verify-ui:945) findet es. */ body.sq-sprache #screen-lobby #menu-play .menu-input { background: rgba(2, 6, 14, 0.92); border: 1px solid rgba(var(--sq-goldRGB), 0.34); border-radius: 0; color: #e8eaf0; clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); } /* ── Die Fraktionsreihe ────────────────────────────────────────────────── 🚨 NUR RAHMEN UND SCHRIFT. Die Wappen sind echte Bilder (/images/faction-logo-vs.webp, -ued.webp, dazu der gezeichnete Wuerfel fuer „Zufall") — Marcel: „die richtigen Symbole usw. muessen genutzt werden." Die Vorlage zeigt an dieser Stelle blossen Text; das Bild ist die Vorlage, nicht die Wahrheit. Hier steht deshalb KEINE Regel, die `.faction-emblem` verbirgt, verkleinert oder ersetzt. */ body.sq-sprache #screen-lobby #menu-play .faction-btn { border-radius: 0; clip-path: polygon(0 10px, 10px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); } /* ── Such- und Raumstand ───────────────────────────────────────────────── Erscheinen erst waehrend der Suche bzw. im Raum; sie bekommen denselben Rahmen, damit der Bildschirm nicht auf halbem Weg die Sprache wechselt. */ body.sq-sprache #screen-lobby #menu-play #queueStatus, body.sq-sprache #screen-lobby #menu-play #privateRoomInfo { box-sizing: border-box; padding: 10px 12px; background: rgba(4, 8, 16, 0.90); border: 1px solid rgba(var(--sq-cyanRGB), 0.34); clip-path: polygon(0 10px, 10px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); } body.sq-sprache #screen-lobby #menu-play .room-code { color: var(--sq-gold); } /* Die Anwesenheitszeile als Kopfzeile ueber den Kaesten. */ body.sq-sprache #screen-lobby #menu-play #sq-presence-lobby { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; color: #8b93a8; } /* ── 11. Freies Spiel bekommt Breite ─────────────────────────────────────── IO1 (2026-09-16). IN1 hat gebaut, was in 400 Buehnen-px moeglich war — Rahmen, Kopfzeilen, Indexnummern. Das RASTER der Vorlage (mockups/bildschirme-neue-sprache.html, „Freies Spiel": zwei Kaesten nebeneinander, darunter einer ueber die ganze Breite) braucht mehr. 🚨 DIE GESCHAERFTE WEG-A-REGEL (CLAUDE.md, Berichtigung zu IG1): Die Formsprache DARF ein gefuehrtes Mass aendern — aber nur ueber Eigenschaften, die `applyToElement()` LEERT (`min-width`, `min-height`), niemals ueber `!important`, und niemals in `layout-config.js`. Der Grund, aus dem Weg A ueberhaupt existiert, ist der SCHALTER: eine Regel hinter `body.sq-sprache` greift nur im Ein-Zustand, „aus = heute" bleibt unberuehrt, und die Engine wird nicht angefasst. Gemessen (scripts/io1-messung.js, vier Fenster): 400 -> 840 (default) · 360 -> 840 (narrow) · Ruecknahme -> wieder 400/360 Hauptmenue 400/400 · Schalter aus 400/400 · Hochformat 1280 unberuehrt 🚨 WARUM DIE REGEL AUF `:has(#menu-play.active)` BESCHRAENKT IST — und das ist der Preis aus Abschnitt 2 des Prompts, gerechnet aus gemessenen Kanten: im HAUPTMENUE stehen rechts fuenf Elemente (`#sq-preenlist`, `#sq-status` und die drei Geschwister `#lobby-promo-banner`/`#lobby-discord-btn`/ `#lobby-steam-btn` darin). Die Fuge zwischen Menuespalte und Kaesten ist 32 px: mit unbeschraenkter Regel wuerden sie ab einer Spaltenbreite von **432** Buehnen-px ueberlappt (narrow: ab 452). Es ist also nicht so, dass die Beschraenkung sauberer waere — sie ist der einzige Weg, der ueberhaupt geht. Auf der Ebene „Freies Spiel" sind alle fuenf `display:none` (game-v3.css `:has(#menu-main.active)`, Abschnitt 5/6 hier) — gemessen **0 von 5 gerendert**, in allen vier Fenstern. Dort ist nichts, was ueberlappt werden koennte. ⚠ „display !== none" ist dafuer der falsche Blick: die drei Geschwister haengen im Ein-Zustand IN `#sq-preenlist`, und an ihnen selbst steht weiter `display:flex`. Gemessen wird `getClientRects().length` — der erste Lauf der Probe zaehlte sie als sichtbar, bei einer Huellbox von 0x0. 🚨 DIE AUSGLEICHSZAHL IST GERECHNET, NICHT GESCHOBEN. Die Engine setzt `left = W/2 - 200` (Anker center, Pivot center, 400 breit) und leert `right`. Waechst nur die Breite, waechst der Kasten nach RECHTS und die Mitte wandert um 220 px. Mittig waere `left = (W - X)/2`, also margin-left = 200 - X/2 = -220 (default, Spalte 400) margin-left = 180 - X/2 = -240 (narrow, Spalte 360) — beides von der Buehnenbreite W unabhaengig, weil sich W herauskuerzt. Gemessen steht die Spalte danach bei 220 .. 1060, Rand links 220, Rand rechts 220, Differenz 0 px (1280, 1920 und narrow gleich). ⚠ Der IM1-Versatz `calc(104px - 25%)` haengt an `:has(#menu-main.active)` und gilt hier gar nicht — die beiden Regeln koennen sich nicht treffen. ⚠ Hochformat bekommt KEINE Regel: dort fuehrt `lobby.portrait` nur `lobby-main` mit `stretch-both` (CX1), die Spalte ist ohnehin so breit wie die Buehne (gemessen 1280), und beide Kaesten sind ausgeblendet. */ @media (min-aspect-ratio: 6/5) { body.sq-sprache #screen-lobby:has(#menu-play.active) #lobby-main { min-width: 840px; margin-left: -220px; } } @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 6/5) { body.sq-sprache #screen-lobby:has(#menu-play.active) #lobby-main { min-width: 840px; margin-left: -240px; } } /* Der Uebergang gleitet wie in Abschnitt 7 — der Wechsel auf „Freies Spiel" ist eine Bewegung, kein Sprung. */ body.sq-sprache #screen-lobby:has(#menu-play.active) #lobby-main { transition: margin-left 0.22s ease, min-width 0.22s ease; } /* ── Die zwei Kappen, die den Raum sonst wieder wegnehmen ───────────────── Gemessene Bestandswerte, KEINE gefuehrten Masse (weder `.menu-container` noch `.menu-btn` stehen in layout-config.js — die Engine kennt sie nicht): .menu-container width:100%; max-width:420px (game-v3.css:3069) .menu-btn width:100%; max-width:360px (game-v3.css, Fix I1) Ohne diese beiden Zeilen waere die Spalte 840 breit und der Inhalt stuende weiter in 420 px. Beide gelten nur, solange „Freies Spiel" die aktive Ebene ist. */ body.sq-sprache #screen-lobby:has(#menu-play.active) .menu-container { max-width: 100%; } body.sq-sprache #screen-lobby #menu-play { width: 100%; } /* FIX OD1 (2026-10-03): der private Raum hat eine eigene Ebene (#menu-privat-raum) mit demselben Rahmen wie das Freie Spiel — er bekommt dieselbe Breite, dieselbe Mitte und denselben weichenden Titelblock. Woertlich die Regeln von oben, nur fuer die zweite Ebene; die Rechnung (840, -220/-240) gilt unveraendert. */ @media (min-aspect-ratio: 6/5) { body.sq-sprache #screen-lobby:has(#menu-privat-raum.active) #lobby-main { min-width: 840px; margin-left: -220px; } } @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 6/5) { body.sq-sprache #screen-lobby:has(#menu-privat-raum.active) #lobby-main { min-width: 840px; margin-left: -240px; } } body.sq-sprache #screen-lobby:has(#menu-privat-raum.active) #lobby-main { transition: margin-left 0.22s ease, min-width 0.22s ease; } body.sq-sprache #screen-lobby:has(#menu-privat-raum.active) .menu-container { max-width: 100%; } body.sq-sprache #screen-lobby:has(#menu-privat-raum.active) .lobby-header { display: none; } /* 🚨 UND DER TITELBLOCK WEICHT — GEMESSEN, NICHT AUS GESCHMACK. Mit ihm endete der ZURUECK-Knopf bei **860** von 720 Buehnen-px (scripts/io1-blick.js, erster Lauf): das Raster baut hoeher als eine Knopfliste, und `#lobby-main` hat `overflow-y:auto` — der Knopf waere nicht weg, aber unter der Kante, und niemand scrollt in einem Menue. Die Vorlage zeigt auf diesem Bildschirm ohnehin KEIN Logo, sondern nur das Schild „Freies Spiel" (mockups/bildschirme-neue-sprache.html, `#s-frei`) — das Schild UEBERNIMMT hier die Aufgabe des Titelblocks. ⚠ Nur der Titelblock, NICHT der Sprachumschalter: `.lang-switch-wrap` ist ein eigenes Element neben `.lobby-header` (IM1) und bleibt bedienbar. Und nur auf dieser Ebene und nur im Ein-Zustand — im Hauptmenue steht der Titel wie heute. */ body.sq-sprache #screen-lobby:has(#menu-play.active) .lobby-header { display: none; } /* ── Das Raster ────────────────────────────────────────────────────────── Weiterhin ueber `order` in der Flex-Spalte, die `.menu-level` ohnehin ist (IN1) — kein Knoten wird geloescht, ersetzt oder verschoben. Neu sind VIER Knoten, und sie werden erzeugt, nicht umgehaengt: das Schild und die drei Erklaersaetze (sq-sprache.js, `spielBauen()`), jeder mit `data-i18n` und leer im Code. [ FREIES SPIEL ] order -12 (Schild) SPIELERNAME [ … ] order -10 2 online · niemand sucht order -9 ┌ 001 ┐ ┌ 002 ┐ order -8 ┌ 003 privater Raum ┐ order -5 Such-/Raumstand order -4 ‹ WAEHLE DEINE FRAKTION › [VS][?][UED] order -3 ┌ ZURUECK ┐ order 0 (Vorgabe) */ body.sq-sprache #screen-lobby #menu-play > #sq-fs-titel { order: -12; } /* Das Schild der Vorlage (mockups, `.schild`): angeschnittene Ecken, Gold, weit gesperrt. Ein ELEMENT mit i18n-Schluessel, kein `content:` — ein Wort im Stylesheet waere hartkodiertes Deutsch (IN1 hat es darum gelassen; der Schluessel `FREIES SPIEL` ist in beiden Woerterbuechern vorhanden). */ body.sq-sprache #screen-lobby #menu-play #sq-fs-titel { align-self: center; margin: 0 0 16px; padding: 9px 32px; background: rgba(2, 4, 10, 0.94); border: 1px solid rgba(var(--sq-goldRGB), 0.5); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sq-gold); } /* Das Namensfeld: eine ZEILE ueber dem Raster, Beschriftung links, Feld daneben. `.menu-field` ist im Bestand 270 px breit und eine Spalte (game-v3.css) — in 840 px stuende die Beschriftung sonst als Einzelzeile ueber einem schmalen Kasten mitten im Nichts. 🚨 WARUM HIER UND NICHT IN EINEM KASTEN: der Name gilt fuer BEIDE Wege — auch das Botspiel traegt ihn — und in Kasten 001 stuende er wie eine Bedingung nur dieses Kastens. Ueber dem Raster gilt er sichtbar fuer alles, was darunter steht. (Dieselbe Begruendung wie IN1, dieselbe Stelle; die Vorlage hat das Feld vergessen.) */ body.sq-sprache #screen-lobby #menu-play > #guestBox, body.sq-sprache #screen-lobby #menu-play > #userDisplay { order: -10; width: 100%; max-width: 470px; flex-direction: row; align-items: center; gap: 14px; } body.sq-sprache #screen-lobby #menu-play > #guestBox > .menu-input { flex: 1 1 auto; } body.sq-sprache #screen-lobby #menu-play > #guestBox > .menu-label { flex: 0 0 auto; } body.sq-sprache #screen-lobby #menu-play > .play-actions-grid { order: -8; gap: 18px; margin-bottom: 16px; } /* Gemessen standen die beiden Kaesten 2 Buehnen-px versetzt (001 bei 172, 002 bei 174 — scripts/io1-blick.js). In einem Gitter ist das kein Geschmack, sondern ein Rest: beide Zellen werden ausdruecklich gestreckt und bekommen keinen eigenen Rand. */ body.sq-sprache #screen-lobby #menu-play > .play-actions-grid > .play-action-btn { align-self: stretch; margin: 0; } /* 003 und ZURUECK ueber die ganze Breite — wie in der Vorlage. */ body.sq-sprache #screen-lobby #menu-play > .menu-btn { max-width: none; } /* Die Fraktionsreihe und die Standkaesten bleiben schmal: drei Wappen ueber 840 px auseinanderzuziehen macht sie nicht lesbarer, nur weiter weg. */ body.sq-sprache #screen-lobby #menu-play > label.menu-label, body.sq-sprache #screen-lobby #menu-play > .faction-row { width: 100%; max-width: 520px; } /* Die Ueberschrift der Reihe steht ueber ihrer Mitte, nicht an ihrem linken Rand — die Vorlage setzt sie mittig („‹ Waehle deine Fraktion ›"). */ body.sq-sprache #screen-lobby #menu-play > label.menu-label { text-align: center; } body.sq-sprache #screen-lobby #menu-play > #queueStatus, body.sq-sprache #screen-lobby #menu-play > #privateRoomInfo { width: 100%; max-width: 560px; } /* ── Was in den Kaesten steht ──────────────────────────────────────────── Jetzt ist Platz fuer den Erklaersatz der Vorlage. Die Kopfzeile bleibt `.play-action-sub` (IN1), die Indexnummern bleiben, wo sie sind. */ body.sq-sprache #screen-lobby #menu-play .play-action-btn { min-height: 186px; padding: 0 0 14px; } body.sq-sprache #screen-lobby #menu-play .play-action-btn .play-action-sub { order: -2; padding: 8px 52px 7px 14px; } /* Der Erklaersatz. 🚨 Er muss aus der Knopfschrift AUSSTEIGEN: der Kasten ist ein `