* { box-sizing: border-box; margin: 0; padding: 0; } body { background: #04060c; color: #d8d8e0; font-family: 'Segoe UI', sans-serif; } /* v16: ECHTES gebürstetes Chrom mit Sci-Fi-Cyan-Akzent. Mehrere Gradient-Stops für die klassische "reflektierte Metallstreifen"-Optik (heller oben, dunkler in der Mitte, wieder heller kurz vor Boden, dann fast schwarz) - das ist das Muster das Chrom von langweiligem Flat-Grau unterscheidet. Plus subtiler Cyan-Glow an den Rändern für den Raumschiff-Konsolen- Look. Die pseudo-elemente ::before/::after fügen zusätzliche Glanz-Reflexe hinzu. */ /* --- Topbar (Aug 2026 v3.6: sticky, damit die Rohstoffleiste beim Scrollen sichtbar bleibt) --- */ .topbar { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, #8a97a8 0%, /* Metall-Kante oben (heller Reflex) */ #4a545f 8%, /* Übergang */ #2f353e 40%, /* dunkelste Zone (Mitte) */ #3d444e 65%, /* Rück-Highlight (typisch Chrom) */ #232830 90%, #14181e 100%); border-bottom: 1px solid #5fd0e8; /* Cyan-Akzentlinie unten */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), /* scharfer Highlight-Streifen oben */ inset 0 -2px 0 rgba(95,208,232,0.15), /* Cyan-Glow innen unten */ 0 0 25px rgba(95,208,232,0.25), /* Cyan-Ausstrahlung */ 0 4px 12px rgba(0,0,0,0.7); /* tiefer Schatten unter der Leiste */ padding: 5px 14px; position: sticky; /* v3.6: bleibt beim Runterscrollen oben stehen */ top: 0; z-index: 100; overflow: hidden; /* v6.6: Die Kopfleiste hat jetzt eine feste Hoehe statt einer aus dem Inhalt gewachsenen. Grund: die klebende Menueleiste darunter dockt mit `top: var(--topbar-hoehe)` an. Wuerde die Kopfleiste - etwa weil passeRohstoffleisteAn() den Inhalt per zoom verkleinert - niedriger ausfallen als dieser Wert, klebte das Menue mit einer sichtbaren Luecke. min-height statt height, damit ein unerwartet hoher Inhalt trotzdem nicht abgeschnitten wird - lieber eine Leiste zu hoch als ein abgeschnittener Rohstoffwert. */ min-height: var(--topbar-hoehe); } /* v16.1: Kein Shine-Animation mehr (User-Wunsch: statisches Chrom, kein Glitzer-Streifen) */ /* Aug 2026 v3.6: Rohstoffe IMMER horizontal nebeneinander (auf jeder Bildschirmgröße). Die Server-Uhrzeit hängt als letztes Element in der resource-bar (siehe baueResourceBar()). */ /* Aug 2026 v6.2 (User-Vorgabe): "Ich will bei der Kopfzeile nicht scrollen muessen, das muss alles ins Format passen - Desktop wie mobil." Deshalb KEIN overflow-x: auto mehr (das hat den Rollbalken erzeugt). Stattdessen sitzt der Inhalt in einem eigenen, inhaltsbreiten Kasten (.rb-inner), der bei Bedarf per Javascript einmalig heruntergerechnet wird - siehe passeRohstoffleisteAn(). */ .resource-bar { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; overflow: hidden; width: 100%; position: relative; z-index: 1; } .rb-inner { display: inline-flex; flex-direction: row; align-items: center; gap: 14px; flex-wrap: nowrap; white-space: nowrap; } /* Aug 2026 v5.8 (User-Vorgabe), korrigiert in v5.8.1: 1) "Das Rohstoffbild ist etwas kleiner als der Balken tief ist - mach es balkenfuellend." 2) "Wenn die Rohstoffe das Speicherlimit erreichen, bitte rot einfaerben." -> .res-voll 3) Zusaetzliche VIOLETTE Zeile fuer die Foerderung verwalteter Asteroiden. -> .res-asteroid 4) "Mach die Zahlen staerker/fetter/groesser." WAS IN v5.8 SCHIEFGING (Bild war rund zehnmal zu gross): Das Bild bekam `align-self: stretch` zusammen mit `width: auto` und `aspect-ratio: 1/1`. Damit haengt die Hoehe an der Zeilenhoehe UND die Breite an der Hoehe - waehrend die Zeilenhoehe ihrerseits vom Inhalt kommt. Diese Rueckkopplung hat der Browser nach oben aufgeloest: die Kacheln wuchsen auf ein Vielfaches, die Leiste bekam einen waagrechten Rollbalken. Jetzt ist NICHTS mehr automatisch: eine einzige Variable legt die Zeilenhoehe fest, und Bild wie Textblock bekommen exakt diesen Wert in Pixeln. Damit ist das Bild genau so hoch wie die Zeile tief ist - und kann sich nicht mehr aufschaukeln. Zum Vergleich: vorher 26 px Bild bei ~44 px Zeilenhoehe, jetzt 54 px bei 54 px. */ /* Aug 2026 v6.1 (User-Vorgabe): "Mach mir die Kopfzeile etwas schmaler, die erscheint mir doch recht wuchtig." 54 -> 42 px. Moeglich wurde das, indem die violette Asteroiden- Foerderung nicht mehr in einer VIERTEN Zeile steht, sondern direkt neben der normalen Produktion - drei Zeilen statt vier. */ /* Aug 2026 v6.6: vier Zeilen (Wert, Kapazitaet, Produktion, Asteroiden-Foerderung), 60 px. */ /* Aug 2026 v6.7 (User-Vorgabe): "Mach das Rohstoffband in der momentanen Schriftgroesse, d.h. es wird insgesamt etwas schmaler." Das ist der entscheidende Halbsatz: schmaler NICHT durch kleinere Schrift, sondern durch weniger Inhalt. Zwei der vier Zeilen sind ersatzlos weg - * die Speichergroesse, weil der Fuellstand jetzt in der FARBE des Bestands steckt, * die separate Asteroiden-Foerderung, weil sie mit der Planetenproduktion zu EINER Zahl zusammengefasst ist. Beides steht dafuer ausfuehrlicher im (i)-Fenster. Bleiben zwei Zeilen bei unveraenderter Schrift: 16 px x 1.12 + 12 px x 1.1 = 31.1 px. 34 px gibt etwas Luft. Die Kopfleiste schrumpft damit von 71 auf 45 px. --topbar-hoehe = Zeilenhoehe + 2x5 px Polster der .topbar + 1 px Cyan-Linie. */ /* v8.3: Unter die zwei Textzeilen kommt der Fuellbalken. Er bekommt eine EIGENE Variable statt in --res-zeile-hoehe eingerechnet zu werden - die Zeilenhoehe haengt an der Schriftgroesse und waechst am PC mit (siehe gen_pc_schriftgroessen.py), der Balken nicht. Waeren beide in einer Zahl, muesste der Generator sie wieder auseinanderrechnen. --res-balken-block = Balkenhoehe 5 px + 3 px Abstand zum Text. --topbar-hoehe = Zeilenhoehe + Balkenblock + 2x5 px Polster der .topbar + 1 px Cyan-Linie. */ :root { --res-zeile-hoehe: 36px; --res-balken-block: 8px; --topbar-hoehe: 55px; } /* v7.6: Schrift ueberall +1 px -> die zwei Zeilen der Rohstoffleiste brauchen 17 x 1.12 + 13 x 1.1 = 33.3 px. 36 px mit Reserve, Kopfleiste entsprechend. */ /* ===================================================================================== Aug 2026 v8.3 (User-Vorgabe): die Rohstoffleiste uebernimmt den Farbcode der Baukosten aus v8.2 - "Kannst du es mir nochmal machen indem die Farbcodierung der Rohstoffe etwas besser hervorkommt?" DREI TRAEGER DER ROHSTOFFFARBE, absichtlich gestaffelt: 1. ein 4 px Streifen links (die harte Kante, auch im Alarm sichtbar) 2. ein Farbschleier ueber die Kachel, der nach rechts auf 0 faellt 3. der Fuellbalken darunter Warum der Schleier nach rechts ausblendet: die Zahlen stehen rechts. Ein flaechig getoenter Kasten haette ihren Kontrast gekostet - so sitzt die Farbe dort, wo das Kuerzel steht, und die Ziffern bleiben auf dunklem Grund. ===================================================================================== */ .resource { position: relative; display: flex; flex-direction: column; gap: 3px; font-weight: bold; color: #eaf2f8; text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 6px rgba(95,208,232,0.15); flex: 0 0 auto; border-left: 4px solid var(--res-farbe, transparent); padding: 0 10px; border-radius: 0 6px 6px 0; } /* Der Schleier liegt als eigene Ebene UNTER dem Text (z-index der Kinder = 1). Als background auf .resource selbst waere er nicht moeglich, weil dort im Alarmfall zusaetzlich ein roter Ring liegt und beide sich sonst gegenseitig ueberschreiben. */ .resource::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--res-farbe, transparent) 30%, transparent) 0%, color-mix(in srgb, var(--res-farbe, transparent) 12%, transparent) 55%, transparent 100%); } .resource > * { position: relative; z-index: 1; } .res-kopf { display: flex; align-items: center; gap: 9px; height: var(--res-zeile-hoehe); } .res-stack { display: flex; flex-direction: column; justify-content: center; height: var(--res-zeile-hoehe); line-height: 1.12; overflow: hidden; } /* ===================================================================================== DIE FUENF ROHSTOFFFARBEN - EINE EINZIGE STELLE (v8.5) Bis v8.4 standen sie ZWEIMAL: einmal fuer die Kosten-Chips (.kb-chip[data-res=...]) und einmal fuer die Leistenkacheln (.resource[data-res=...]). Eine Laufprobe verglich beide Listen, damit sie nicht auseinanderlaufen. Mit dem (i)-Fenster waere eine DRITTE Liste dazugekommen - und drei Listen haelt auf Dauer kein Test zusammen. Deshalb jetzt: die Farbe haengt am ATTRIBUT, nicht an der Klasse. Jedes Element mit data-res="lithium" ist violett, egal ob Kachel, Chip, Tabellenkopf oder etwas, das es noch gar nicht gibt. Eine Farbe aendern heisst genau eine Zeile aendern. ===================================================================================== */ [data-res="eisen"] { --res-farbe: #9aa6b4; } /* Stahlgrau */ [data-res="lithium"] { --res-farbe: #c6a8ff; } /* violett-silbern */ [data-res="wasser"] { --res-farbe: #5fb8ff; } /* blau */ [data-res="wasserstoff"] { --res-farbe: #6ee7d5; } /* tuerkis */ [data-res="gold"] { --res-farbe: #f0c850; } /* gold */ [data-res="nahrung"] { --res-farbe: #a8d98a; } /* gruen */ /* ------------------------------------------------------------------------------------- Der Fuellbalken und das Zustandssystem "leise - Endanschlag - Alarm" (v8.3). Es loest die alte Ampel an der ZAHL ab (gruen/gelb/rot, v6.7). Zwei Gruende: 1. Die Zahl kann nicht gleichzeitig Rohstofffarbe und Ampelfarbe tragen. Sobald die Kachel eingefaerbt ist, konkurrieren beide - ein gelber Balken in einer goldenen Au-Kachel ist von einem gelben Balken in einer grauen Fe-Kachel kaum zu unterscheiden. 2. Die Ampel war symmetrisch, die Sachlage ist es nicht. Unter 50 % gibt es nichts zu tun - gruen ist ein Signal ohne Inhalt. Ab 99 % verfaellt echte Foerderung. Deshalb: z-ruhig (< 50 %) Balken in Rohstofffarbe, halbe Deckkraft. Kein Signal. z-achtung (50-99 %) volle Deckkraft. Sonst nichts. z-alarm (>= 99 %) roter Ring um die Kachel, roter Balken. v8.3.1 (User-Vorgabe): "Lass diese Speichergrenze Begrenzung mit diesem I am Ende der Leiste weg, das finde ich stoerend." Der bernsteinfarbene Endanschlag am rechten Ende des Balkens ist ersatzlos entfernt. Damit unterscheiden sich "leise" und "Achtung" nur noch ueber die Deckkraft des Balkens - bewusst so, es wurde kein anderes Zeichen an seine Stelle gesetzt. Der Alarm bleibt als einziger laut, und das ist auch der einzige Zustand, in dem tatsaechlich etwas passiert (Foerderung verfaellt). Nebeneffekt: Rot/Gruen ist die haeufigste Farbfehlsichtigkeit - ausgerechnet das Paar, das die alte Ampel benutzte. Dieses System unterscheidet ueber Deckkraft und Position. ------------------------------------------------------------------------------------- */ .res-balken { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.09); } .res-balken i { display: block; height: 100%; border-radius: 3px; background: var(--res-farbe, #5fd0e8); } /* v8.5: Diese drei Regeln haengen bewusst NICHT mehr an .resource, sondern nur am Zustand. Damit kann derselbe Balken auch woanders stehen - im (i)-Fenster steht er in einer Tabellenzeile. Wuerde man dort .resource mitgeben, bekaeme die Zeile das ganze Kachel-Layout (Spalte, Rand, Schleier) und die Tabelle waere zerlegt. */ .z-ruhig .res-balken i { opacity: 0.5; } .z-achtung .res-balken i { opacity: 1; } .z-alarm .res-balken i { background: #ff6b6b; } /* Der Alarm liegt als Ring OBEN DRAUF (inset box-shadow) und ersetzt den Farbschleier nicht. Nur so bleibt im Alarmfall erkennbar, WELCHER Rohstoff uebergelaufen ist - genau das ging verloren, als die Fuellung selbst die Ampelfarbe trug. */ .resource.z-alarm { box-shadow: inset 0 0 0 1px rgba(255,90,90,0.5), 0 0 10px rgba(255,90,90,0.22); } .resource.z-alarm .res-value { color: #ffb3b3; } /* ===================================================================================== Aug 2026 v6.7 (User-Vorgabe): chemische Symbole statt Bildern. Eisen Fe | Lithium Li | Wasser H2O | Wasserstoff H2 | Gold Au Feste Mindestbreite, damit die fuenf Symbole eine saubere Spalte bilden - "Fe" und "H2O" sind sonst unterschiedlich breit und die Zahlen dahinter stuenden versetzt. Serifenlos und gesperrt, damit es wie eine Beschriftung wirkt und nicht wie Fliesstext. ===================================================================================== */ /* v6.8 (User-Vorgabe): "Lass die Symbole Fe, Li etc. IMMER in der Standard-Schriftfarbe, faerbe diese nicht ein!" Vorher war das Symbol cyan und wurde bei vollem Lager sogar rot. Das war zu viel Farbe nebeneinander: die AMPEL soll die Aufmerksamkeit bekommen, nicht die Beschriftung. `color: inherit` nimmt die Farbe von .resource (#eaf2f8) - und bleibt damit auch dann unveraendert, wenn dort spaeter einmal etwas anderes steht. */ .res-symbol { min-width: 32px; text-align: right; font-size: 16px; font-weight: 800; letter-spacing: 0.5px; color: inherit; text-shadow: 0 1px 2px rgba(0,0,0,0.8); flex: 0 0 auto; } /* Die tiefgestellte 2 in H2O und H2. font-size in em, damit sie mit der Symbolgroesse mitwaechst; `bottom` statt des Browser-Standards, weil sonst die Zeilenhoehe aufblaeht - und genau die soll hier ja klein bleiben. */ .res-symbol sub { font-size: 0.68em; vertical-align: baseline; position: relative; bottom: -0.22em; } .res-value { font-size: 17px; font-weight: 800; letter-spacing: 0.3px; } .res-prod { font-size: 13px; font-weight: 700; font-family: "Consolas", monospace; letter-spacing: 0.2px; line-height: 1.1; } .res-prod-plus { color: #7fe89a; text-shadow: 0 0 4px rgba(127, 232, 154, 0.35); } .res-prod-minus { color: #ff7a6a; text-shadow: 0 0 4px rgba(255, 120, 100, 0.35); } .res-prod-null { color: #6a7080; } /* ------------------------------------------------------------------------------------- Fuellstands-Ampel (User-Vorgabe v6.7): "Zeige nur den Lagerbestand an, in gruen bei einem Fuellstand unter 50 %, in gelb zwischen 50 und 99 % und in rot bei 99-100 %. Damit kann dann die Speichergroesse weg." Die Kapazitaet ist damit nicht verschwunden, sondern in die Farbe gewandert: "wie voll ist mein Lager" war vorher ein Bruch, den man lesen musste - jetzt ist es eine Farbe, die man sieht. Die genauen Zahlen stehen im (i)-Fenster. v8.3: In der LEISTE gibt es diese Ampel nicht mehr - dort uebernimmt das Zustandssystem am Fuellbalken (z-ruhig / z-achtung / z-alarm, siehe weiter oben). Diese drei Klassen leben nur noch im (i)-Fenster weiter, in der Lager-Tabelle. Dort ist die Ampel richtig am Platz: die Tabelle hat keine Rohstofffarben, mit denen sie konkurrieren koennte, und neben der Farbe stehen ohnehin die genauen Zahlen. Deshalb geloescht wurden sie nicht. ------------------------------------------------------------------------------------- */ .res-fuell-gruen { color: #7fe89a; text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 7px rgba(127,232,154,0.4); } .res-fuell-gelb { color: #f5d76e; text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 7px rgba(245,215,110,0.45); } .res-fuell-rot { color: #ff6b6b; text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 8px rgba(255,90,90,0.55); } /* Das (i) vor Eisen. v8.3.1 (User-Vorgabe): "Und passe mir das Design fuer das i Feld zu dem oben bitte mit an." Es war ein cyaner Kreis - die einzige runde Form in einer Reihe aus Kacheln, und aus einer Zeit, als die Kacheln noch gar keine Form hatten. Jetzt bekommt es dieselbe Bauweise wie ein Rohstoff: Streifen links, Farbschleier nach rechts auslaufend, rechts abgerundet, gleiche Hoehe. Die Farbe ist bewusst CYAN und keine Rohstofffarbe. Cyan ist im ganzen Spiel die Farbe der Bedienelemente (Menue, Uhr, Ueberschriften) - so gehoert das (i) sichtbar zur Familie der Kacheln, ohne sich als sechster Rohstoff auszugeben. width: auto MUSS hier stehen: die globale Regel `button { width: 100% }` weiter unten in dieser Datei wuerde sonst durchschlagen und den Knopf ueber die halbe Leiste ziehen. Genau das ist in v6.2 schon einmal passiert - flex: 0 0 auto allein reicht NICHT, weil flex-basis die explizite width nicht ersetzt. */ .res-info-knopf { width: auto; min-width: 0; height: calc(var(--res-zeile-hoehe) + var(--res-balken-block)); flex: 0 0 auto; padding: 0 11px 0 8px; margin-right: 2px; border: none; border-left: 4px solid #5fd0e8; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, rgba(95, 208, 232, 0.30) 0%, rgba(95, 208, 232, 0.12) 55%, transparent 100%); color: #bdeeff; font-family: Georgia, "Times New Roman", serif; /* das klassische kursive i */ font-style: italic; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; } .res-info-knopf:hover { background: linear-gradient(90deg, rgba(95, 208, 232, 0.52) 0%, rgba(95, 208, 232, 0.24) 55%, transparent 100%); color: #eaffff; border-left-color: #a9ecff; box-shadow: 0 0 10px rgba(95, 208, 232, 0.45); } /* v6.8: Hier stand eine Regel, die das Symbol bei vollem Lager rot faerbte. Sie ist ersatzlos weg - der User will die Symbole ausdruecklich IMMER in der Standardfarbe. Dass das Lager voll ist, sagt die Ampel an der Zahl; ein zweites rotes Element daneben haette nur mit ihr um Aufmerksamkeit konkurriert. Die Klasse res-voll wird weiterhin gesetzt, damit spaetere Anzeigen daran andocken koennen. */ .server-time { color: #5fd0e8; font-family: 'Courier New', monospace; font-size: 15px; font-weight: bold; text-shadow: 0 0 8px rgba(95,208,232,0.7), 0 1px 0 rgba(0,0,0,0.7); letter-spacing: 1px; padding-left: 8px; /* v3.6: sitzt direkt hinter der Gold-Produktion in der Leiste */ flex: 0 0 auto; white-space: nowrap; } /* --- Highscore: Tab-Filter oben, Haupt-Rangliste in der Mitte, aufklappbare Einzelwerte unten. --- */ .hs-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; } .hs-tab-btn { padding: 8px 14px; background: rgba(15, 22, 35, 0.6); border: 1px solid #2f3c50; color: #a8b0c0; border-radius: 6px; cursor: pointer; font-size: 14px; white-space: nowrap; font-family: inherit; transition: all 0.15s; } .hs-tab-btn:hover { background: rgba(95, 208, 232, 0.08); color: #c8d0e0; } .hs-tab-btn.aktiv { background: rgba(95, 208, 232, 0.15); border-color: #5fd0e8; color: #7fdcf0; font-weight: 600; } .hs-haupt-box { background: rgba(21, 27, 40, 0.85); border: 1px solid #2f3c50; border-radius: 8px; padding: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .hs-haupt-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; color: #e8eef7; } .hs-haupt-tabelle th { color: #8a94a8; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; padding: 8px 10px; text-align: left; border-bottom: 1px solid #2f3c50; } .hs-haupt-tabelle td { padding: 10px; border-bottom: 1px solid #1e2838; } .hs-haupt-tabelle tbody tr:hover { background: rgba(95, 208, 232, 0.05); } .hs-haupt-tabelle .hs-rang { color: #7fdcf0; font-weight: 600; font-family: "Consolas", monospace; width: 60px; } .hs-haupt-tabelle .hs-punkte { text-align: right; font-family: "Consolas", monospace; color: #c0c8d5; } /* ===================================================================================== Aug 2026 v8.2 (User-Vorgabe) - Highscore-Reiter "Produktion" Nur Platzierungen, keine Mengen. Gold/Silber/Bronze fuer die ersten drei, danach die blosse Zahl. Jede Spalte ist anklickbar und sortiert die Liste danach. ===================================================================================== */ .prod-hinweis { margin: 4px 0 12px; line-height: 1.45; } .prod-tabelle .prod-kopf-spieler { width: 34%; } .prod-tabelle .prod-kopf { text-align: center; cursor: pointer; user-select: none; font-size: 13px; text-transform: none; letter-spacing: 0.2px; } .prod-tabelle .prod-kopf:hover { color: #a8ecff; } /* Die aktive Sortierspalte wird ganzflaechig hervorgehoben - so sieht man auf einen Blick, welche Rangfolge man gerade liest. Ohne das waere eine Tabelle aus lauter Zahlen kaum deutbar. */ .prod-tabelle .prod-kopf.aktiv { color: #5fd0e8; font-weight: 800; background: rgba(95, 208, 232, 0.10); border-bottom: 2px solid #5fd0e8; } .prod-tabelle .prod-zelle { text-align: center; padding: 8px 10px; } .prod-tabelle .prod-zelle.aktiv { background: rgba(95, 208, 232, 0.06); } .prod-tabelle .prod-spieler { color: #e8eef7; } /* Die eigene Zeile hervorheben - in einer langen Liste sucht man sonst sich selbst. */ .prod-tabelle .prod-ich { background: rgba(95, 208, 232, 0.07); } .prod-tabelle .prod-ich .prod-spieler { font-weight: 700; } .prod-stern { font-size: 20px; line-height: 1; } .prod-stern.gold { color: #f5c542; text-shadow: 0 0 8px rgba(245, 197, 66, .55); } .prod-stern.silber { color: #cfd6de; text-shadow: 0 0 8px rgba(207, 214, 222, .45); } .prod-stern.bronze { color: #cd8b52; text-shadow: 0 0 8px rgba(205, 139, 82, .45); } .prod-nr { color: #8b96a8; font-family: "Consolas", monospace; font-variant-numeric: tabular-nums; } .hs-untermenue-header { margin-top: 20px; padding: 12px 16px; background: rgba(21, 27, 40, 0.7); border: 1px solid #2f3c50; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: #a8b0c0; font-size: 14px; transition: all 0.15s; } .hs-untermenue-header:hover { background: rgba(95, 208, 232, 0.05); border-color: #5fd0e8; color: #c8d0e0; } .hs-untermenue-header .hs-caret { color: #7fdcf0; font-size: 12px; } /* Detail-Grid für die Höchsten Einzelwerte (Gebäude/Forschung/Schiffe/Verteidigung). */ .hs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; } .hs-box { background: rgba(21, 27, 40, 0.85); border: 1px solid #2f3c50; border-radius: 8px; padding: 14px; } .hs-box h3 { color: #7fdcf0; font-size: 14px; margin: 0 0 10px; letter-spacing: 0.5px; } .hs-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; color: #c0c8d5; } .hs-tabelle th, .hs-tabelle td { padding: 5px 8px; border-bottom: 1px solid #1e2838; text-align: left; } .hs-tabelle th { color: #8a94a8; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .hs-tabelle tbody tr:hover { background: rgba(95, 208, 232, 0.05); } .hs-leer { color: #6a7080; font-style: italic; text-align: center; } .npc-bebauung { margin-top: 14px; padding: 10px 12px; background: rgba(95, 208, 232, 0.05); border: 1px solid rgba(95, 208, 232, 0.2); border-radius: 6px; } .npc-bebauung h4 { color: #7fdcf0; font-size: 13px; margin: 0 0 6px; letter-spacing: 0.5px; text-transform: uppercase; } .npc-bebauung ul { margin: 0; padding-left: 20px; color: #c0c8d5; font-size: 13px; line-height: 1.6; } /* Klickbare Spielernamen im Highscore */ .hs-name { color: #7fdcf0; text-decoration: none; cursor: pointer; } .hs-name:hover { text-decoration: underline; } .hs-npc { color: #b090c0; text-decoration: none; cursor: pointer; font-style: italic; } .hs-npc:hover { text-decoration: underline; } /* Spielerprofil-Modal */ .prof-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .prof-summary-item { background: rgba(15,22,35,0.8); border: 1px solid #2f3c50; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; } .prof-summary-item span { color: #8a94a8; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .prof-summary-item b { color: #e8eef7; font-size: 19px; margin-top: 2px; font-family: "Consolas", monospace; } .prof-summary-item.prof-total b { color: #7fdcf0; } .prof-planeten-wrapper { max-height: 400px; overflow-y: auto; margin-top: 8px; border: 1px solid #2f3c50; border-radius: 6px; } .prof-planeten { width: 100%; border-collapse: collapse; font-size: 13px; color: #c0c8d5; } .prof-planeten th { background: #1a2130; color: #8a94a8; padding: 6px 10px; text-align: left; font-size: 11px; text-transform: uppercase; position: sticky; top: 0; } .prof-planeten td { padding: 5px 10px; border-bottom: 1px solid #1e2838; } .prof-planeten tbody tr:hover { background: rgba(95, 208, 232, 0.05); } .prof-koord { color: #7fdcf0; font-family: "Consolas", monospace; letter-spacing: 0.5px; } /* v7.9 (User-Vorgabe): Die Planetenzeilen im Spielerprofil fuehren jetzt ins Flottenmenue. Damit man das ueberhaupt merkt, brauchen sie einen sichtbaren Klick-Hinweis - eine Zeile, die aussieht wie Text, klickt niemand an. */ .prof-planet-zeile { cursor: pointer; } .prof-planet-zeile:hover { background: rgba(95, 208, 232, 0.12) !important; } .prof-planet-pfeil { text-align: right; opacity: 0; transition: opacity .12s; } .prof-planet-zeile:hover .prof-planet-pfeil { opacity: 1; } /* Am Handy gibt es kein Hovern - dort ist der Pfeil dauerhaft zu sehen. Die Regel dafuer steht bewusst NICHT hier, sondern weiter unten im GEMEINSAMEN Mobilblock bei den uebrigen Fingerbedienungs-Regeln. Ein zweiter, frueherer solcher Block an dieser Stelle hat beim ersten Anlauf zwei Laufproben zerlegt: die lesen den ERSTEN Mobilblock der Datei als "den" Mobilblock - und darin stand ploetzlich etwas ganz anderes. */ /* Aug 2026 v3.6: .topbar-right, .user-anzeige und .ansicht-umschalter komplett entfernt. Uhrzeit sitzt jetzt in der resource-bar (siehe .server-time), Spielername steht hinter dem Planetennamen (siehe .planet-name-spieler). */ /* Aug 2026 v3.7: Planet-Switcher oben in der Sidebar. Kompakte Zeile aus Pfeil-links | Dropdown | Pfeil-rechts. */ /* Aug 2026 v6.0 (User-Vorgabe): Der Planet-Umschalter sitzt jetzt in der KOPFLEISTE und bleibt damit zusammen mit den Rohstoffen beim Scrollen sichtbar. Er steht links vor den Rohstoffen und ist bewusst schmal - was drin steht (Koordinate oder Name), legt der Spieler in den Einstellungen fest. */ /* Aug 2026 v6.6 (User-Vorgabe): zurueck in die Menueleiste - dort aber KLEBEND, damit er beim Scrollen mitwandert statt oben wegzurutschen. v6.8: Das hat bis jetzt NICHT funktioniert, und zwar aus einem Grund, der nicht in dieser Regel stand: `.layout.weltraum` hatte `overflow: hidden` und war damit der Bezugsrahmen fuers Kleben - ein Rahmen, der selbst nicht scrollt. Der Umschalter blieb deshalb einfach stehen. Beides ist jetzt behoben (siehe Kommentar bei .layout.weltraum). `top` liegt knapp unter der Kopfleiste, damit er darunter hervorschaut und nicht dahinter verschwindet. z-index ueber der Kopfleiste ist NICHT noetig und waere falsch - er soll unter ihr durchlaufen, nicht ueber ihr liegen. */ .sidebar-planet-switcher { display: flex; align-items: stretch; gap: 4px; margin: 6px 6px 10px; padding: 4px; position: sticky; /* Genau die Stelle, an der er auch ungescrollt steht: Kopfleiste + padding-top der Menueleiste (10px) + eigener oberer Rand (6px). Waere der Wert kleiner, wuerde der Umschalter beim ersten Scrollen um die Differenz nach oben springen und dann erst kleben - eine kleine, aber sichtbare Zuckung. */ top: calc(var(--topbar-hoehe) + 16px); z-index: 5; box-sizing: border-box; /* Fast deckend: die Menueleiste scrollt jetzt in sich, die Reiter wandern also UNTER dem Umschalter durch. Bei 0.75 Deckkraft haette man sie durchschimmern sehen. */ background: rgba(15, 22, 35, 0.97); border: 1px solid rgba(95, 208, 232, 0.35); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 8px rgba(95,208,232,0.15); } .sps-arrow { width: 26px; min-width: 26px; padding: 0; background: rgba(95, 208, 232, 0.12); border: 1px solid rgba(95, 208, 232, 0.3); color: #7fdcf0; font-size: 14px; font-weight: 700; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .sps-arrow:hover:not(:disabled) { background: rgba(95, 208, 232, 0.28); color: #a8ecff; } .sps-arrow:disabled { opacity: 0.35; cursor: not-allowed; } /* Aug 2026 v7.6 (User-Vorgabe Punkt 6): Koordinate + Planetenname im Umschalter eine Schriftgroesse groesser UND fetter. Das ist die Zeile, die man am haeufigsten liest - sie war mit 12px/normal die kleinste Schrift der ganzen Menueleiste. */ .sps-dropdown { flex: 1; min-width: 0; background: #0d1320; border: 1px solid #263042; border-radius: 3px; color: #eaf3ff; font-size: 14px; font-weight: 700; padding: 3px 4px; font-family: inherit; } .sps-dropdown:hover { border-color: #5fd0e8; } /* --- Layout --- */ /* Aug 2026 v4.9 (User-Vorgabe): "Reiter am linken Rand direkt angrenzend an den Mittelbereich." Vorher klebte die Sidebar ganz links am Fensterrand, waehrend der Inhalt in der Restflaeche zentriert war - dazwischen klaffte eine grosse Luecke. Jetzt bilden Sidebar + Inhalt EINEN Block, der als Ganzes zentriert wird. Die Navigation grenzt damit unmittelbar an den Inhalt, und links wie rechts bleibt nur der Weltraum. */ .layout { display: flex; justify-content: center; /* v6.6: an die Kopfleiste gekoppelt statt fest 46 px - die Leiste hat jetzt vier Zeilen und ist am PC wie am Handy unterschiedlich hoch. */ min-height: calc(100vh - var(--topbar-hoehe)); position: relative; /* Bezugsrahmen fuer das Sternenfeld (.weltraum::before) */ } /* Sternenfeld liegt jetzt auf .layout und fuellt das GANZE Fenster - auch die Raender neben dem zentrierten Block. Genau das ist der "Universumshintergrund" am Rand. */ /* ------------------------------------------------------------------------------------- Aug 2026 v6.8 - HIER lag der Grund, warum der Planet-Umschalter nicht mitgescrollt ist. Hier stand `overflow: hidden`. Das ist die klassische Sticky-Falle: Ein Vorfahr mit overflow != visible wird selbst zum Bezugsrahmen fuer alles, was darin `position: sticky` hat. Dieser Rahmen scrollt aber nicht - er ist ja so hoch wie sein Inhalt. Also hatte der Umschalter nichts, woran er kleben konnte, und blieb einfach stehen, wo er stand. Ohne Fehlermeldung, ohne dass im CSS des Umschalters selbst irgendetwas falsch gewesen waere. Gebraucht wurde das overflow nur, weil das Sternenfeld mit `inset: -50px` ueber den Rand hinausragte. Das ist jetzt `inset: 0` (siehe .weltraum::before) - der Hintergrund ist eine sich wiederholende Kachel, der Ueberstand war ohnehin ohne Wirkung. Damit braucht es hier gar kein Zuschneiden mehr. ------------------------------------------------------------------------------------- */ .sidebar { flex: 0 0 var(--sidebar-breite); } /* Aug 2026 v5.8 (User-Vorgabe): "Die Breite der Rohstoffleiste oben soll die Breite sein, in der sich ALLE Fenster im Spiel befinden - rechts und links davon nur der Sternenhintergrund." max-width haelt die Spalte auch dann auf dieser Breite, wenn Javascript etwas anderes versuchen sollte. Damit ist das Aufreissen auf Fensterbreite doppelt ausgeschlossen. */ .content { flex: 0 1 var(--inhalt-breite); max-width: var(--inhalt-breite); } .sidebar { width: var(--sidebar-breite); /* v5.7: eine einzige Quelle fuer die Breite */ background: linear-gradient(90deg, #4a5460 0%, /* linker Reflex */ #363c46 15%, #2a2f38 40%, #363c46 70%, /* Rück-Highlight (Chrom-typisch) */ #1e2229 100%); border-right: 1px solid #5fd0e8; box-shadow: inset 1px 0 0 rgba(255,255,255,0.15), /* linker Kanten-Highlight */ inset -2px 0 0 rgba(95,208,232,0.15), /* Cyan-Glow innen rechts */ 2px 0 12px rgba(95,208,232,0.15), /* Cyan-Ausstrahlung nach rechts */ 3px 0 10px rgba(0,0,0,0.6); padding-top: 10px; /* Aug 2026 v6.6 hatte hier die GANZE Menueleiste klebend gemacht. v6.8 (User-Vorgabe, Korrektur): "Im Bild muesste links dann nur dieses Planetenwechselmenue sein, da der Rest ja weiter oben bleibt und nicht runterscrollt." Also andersherum: die Reiter scrollen ganz normal nach oben weg, und NUR der Umschalter wandert mit. Deshalb ist die Menueleiste hier wieder ein voellig normales Element - kein sticky, keine max-height, kein eigener Rollbalken. Wichtig: overflow bleibt `visible`. Jeder andere Wert wuerde die Leiste selbst zum Bezugsrahmen fuer das sticky des Umschalters machen - und der wuerde dann wieder stehenbleiben, genau wie vor v6.8. */ overflow: visible; position: relative; z-index: 10; } /* v16.1: Kein Shine-Animation mehr - Sidebar bleibt statisch metallisch */ /* v6.6-Falle, die hier fast eine Stunde gekostet haette: diese Regel setzte frueher `position: relative` auf ALLE direkten Kinder - und damit auch auf den Planet-Umschalter, dessen `position: sticky` dadurch stillschweigend ueberschrieben wurde (gleiche Spezifitaet, aber weiter unten in der Datei = gewinnt). Der Umschalter waere einfach nicht kleben geblieben, ohne jede Fehlermeldung. Deshalb ist er hier ausgenommen. */ .sidebar > *:not(.sidebar-planet-switcher) { position: relative; z-index: 1; } .nav-item { /* v5.7: schmalere Leiste -> weniger Innenabstand und etwas kleinere Schrift, damit auch "Schiffsfabrik" und "Planetendesign" in einer Zeile bleiben. */ /* v6.6 (User-Vorgabe): "Mach, dass diese Schriftgroesse/-dicke fuer das Menue links verwendet wird." Dieselben zwei Variablen wie in der Uebersicht - damit sind Menue und Uebersicht garantiert gleich stark, egal wie die Werte spaeter angepasst werden. */ padding: 9px 12px; font-size: var(--uebersicht-schrift); font-weight: var(--uebersicht-staerke); line-height: 1.25; cursor: pointer; color: #c0c6ce; border-left: 3px solid transparent; transition: background 0.15s, color 0.15s; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } .nav-item:hover:not(.disabled) { background: linear-gradient(90deg, rgba(90,100,115,0.4), rgba(90,100,115,0.15)); color: #fff; } .nav-item.active { background: linear-gradient(90deg, rgba(127,208,232,0.15), rgba(127,208,232,0.03)); border-left: 3px solid #7fd0e8; color: #7fd0e8; } .nav-item.disabled { color: #6a6e75; cursor: not-allowed; text-shadow: none; } /* Trenner zwischen den Standard-Reitern und den Dev/Logout-Aktionen unten. */ .nav-trenner { height: 1px; background: #2f3c50; margin: 12px 10px; } /* Dev-Reset: warm-orange, damit sofort klar ist "das ist keine normale Aktion". */ .nav-item-dev { color: #ffb37a; } .nav-item-dev:hover:not(.disabled) { background: rgba(255,120,60,0.08); border-left: 3px solid #ff9855; color: #ffcc99; } /* Logout: dezent rot. */ .nav-item-logout { color: #ff9080; } .nav-item-logout:hover:not(.disabled) { background: rgba(255,80,80,0.08); border-left: 3px solid #ff6a5a; color: #ffb0a0; } /* --- Ladezustand + Fehlerhinweis für Sonnensystem/Galaxie (statt leerem Container). --- */ .lade-hinweis { padding: 40px 20px; text-align: center; color: #7a8090; font-size: 15px; line-height: 1.5; } .lade-hinweis-sub { color: #5a6070; font-size: 12px; } .lade-hinweis.fehler { color: #ff9080; background: rgba(255,60,60,0.05); border: 1px solid rgba(255,60,60,0.2); border-radius: 8px; margin: 20px; } /* --- Techtree: Untermenü in der Sidebar (direkt in einen Zweig springen) --- */ .nav-item-techtree { display: flex; align-items: center; justify-content: space-between; } .nav-arrow { color: #6f7a8a; font-size: 12px; transition: transform 0.15s; } .nav-item-techtree.offen .nav-arrow { transform: rotate(90deg); } .nav-submenu { max-height: 0; overflow: hidden; background: #0c101a; transition: max-height 0.2s ease; } .nav-submenu.offen { max-height: 260px; } .nav-subitem { padding: 10px 20px 10px 40px; cursor: pointer; color: #8a94a8; font-size: 14.5px; border-left: 3px solid transparent; } .nav-subitem:hover { background: #1a2130; color: #fff; } .nav-subitem.active { color: #5fd0e8; border-left: 3px solid #5fd0e8; background: #1a2130; } .content { padding: 25px 30px; position: relative; overflow: hidden; min-width: 0; /* erlaubt Flex-Schrumpfen statt Ueberlauf */ } /* ===================================================================================== Aug 2026 v4.8 (User-Vorgabe): "Mach dass der Inhalt zentral ist und am Rand nur der Universumshintergrund." Vorher hat sich der Inhalt über die ganze Fensterbreite gezogen. Auf einem breiten Monitor stand links die Beschriftung und rechts der Wert - man musste quer über den Schirm schauen. Auf einem schmalen Laptop sah dieselbe Seite völlig anders aus. Lösung: der Inhalt bekommt eine FESTE maximale Breite und wird zentriert. Der Sternenhintergrund liegt auf .content und füllt weiterhin das ganze Fenster - er ist also genau das, was am Rand übrig bleibt. Warum das die Frage "über Schriftgröße?" besser löst: Schriftgrößen sind im ganzen Spiel in px angegeben, ändern sich also mit der Auflösung ohnehin nicht. Was sich ändert, ist die BREITE, über die sich der Inhalt verteilt - und genau die wird hier gedeckelt. Ergebnis: identisches Bild auf 1920, 2560 und 3840 Pixeln Breite. --inhalt-breite lässt sich an einer Stelle anpassen, falls es enger/breiter sein soll. ===================================================================================== */ :root { /* Aug 2026 v5.7 (User-Vorgabe): "Mach den Panel schmaler - um 1/5 reduzieren, also 4/5 der jetzigen Breite" und "reduziere die Pixel auch am PC, alles zentral mittig". Sidebar: 200px -> 160px (= 4/5) Inhalt: 1180px -> 1040px (kompakter, dadurch sitzt der Block sichtbar mittiger) Beide Werte stehen bewusst nur hier - alles andere leitet sich davon ab. */ --inhalt-breite: 1040px; --sidebar-breite: 160px; /* wird in den mobilen @media-Regeln mitgezogen */ } .page { display: none; } .page.active { display: block; width: 100%; /* fuellt die (bereits zentrierte) Inhaltsspalte */ } /* Die Rohstoffleiste oben soll mit der zentrierten Inhaltsspalte FLUCHTEN, nicht mit dem Fenster. Die Inhaltsspalte beginnt erst hinter der Sidebar, deshalb wird deren Breite hier als linker Versatz eingerechnet - sonst stünden die Rohstoffzahlen um die halbe Sidebar-Breite versetzt über den Werten darunter. */ /* v6.0: Kopfleiste = [Planet-Umschalter][Rohstoffe] als EIN Block, zentriert und exakt so breit wie Sidebar + Inhalt darunter. Der Umschalter uebernimmt dabei die Rolle, die vorher das linke Polster (padding-left) hatte. */ .topbar { justify-content: center; } .resource-bar { /* v6.6: Der Umschalter ist zurueck in der Sidebar - die Rohstoffleiste spannt jetzt wieder ueber die volle Breite von Sidebar + Inhalt und fluchtet damit mit dem Block darunter. */ max-width: calc(var(--inhalt-breite) + var(--sidebar-breite)); margin: 0; /* Gleiches Innenpolster wie .content darunter, damit das erste Rohstoffbild senkrecht mit dem Inhalt fluchtet und nicht um 30 px versetzt steht. v8.2 (User-Vorgabe 1.3): "Die Zeit ragt rechts ueber das Menue raus, das soll nicht sein, es soll buendig mit den Leisten sein." Genau dieselbe Ursache auf der anderen Seite: .content hat `padding: 25px 30px` - also LINKS UND RECHTS 30 px. Die Rohstoffleiste hatte das Polster nur links, dadurch stand die Uhrzeit exakt 30 px weiter rechts als der Rand der Uebersichts-Karten. */ padding-left: 30px; padding-right: 30px; box-sizing: border-box; } h1 { color: #5fd0e8; margin-bottom: 15px; letter-spacing: 1px; } .empty-hint { color: #888; } /* v15: Sonne prominenter mit intensiverem Glow, damit die Sonneneruption (Filament-Flare-Bogen) auch außerhalb der eigentlichen Sonnenscheibe klar sichtbar ist. */ .solar-bg { position: absolute; top: -40px; right: -60px; width: 640px; height: 640px; pointer-events: none; z-index: 0; filter: drop-shadow(0 0 100px rgba(255, 176, 60, 0.7)) drop-shadow(0 0 180px rgba(255, 120, 40, 0.4)) drop-shadow(0 0 280px rgba(255, 90, 20, 0.2)); } .sun-svg { width: 100%; height: 100%; overflow: visible; animation: sunPulse 6s ease-in-out infinite; } /* v16.1: NASA-Bild als "Modell" das mit dem Weltraum-Hintergrund verschmilzt statt eines sichtbaren Rechtecks. mix-blend-mode: screen -> alle dunklen Pixel des NASA-Bildes werden unsichtbar (schwarz + schwarz = schwarz, aber schwarz + hell = hell durchscheinend), sodass nur die glühende Sonnen-Scheibe selbst leuchtet und alles drumherum nahtlos in den Weltraum-Hintergrund übergeht. Zusätzlich radiale Maske für weichen Rand, plus Kontrast/ Sättigung für dramatischeren Look. */ .sun-nasa { width: 100%; height: 100%; object-fit: cover; /* Weiche runde Maske: 100% opak in der Mitte, langsam auf 0 zum Rand - keine harte Kante */ -webkit-mask-image: radial-gradient(circle at center, black 40%, rgba(0,0,0,0.7) 55%, transparent 72%); mask-image: radial-gradient(circle at center, black 40%, rgba(0,0,0,0.7) 55%, transparent 72%); /* Screen-Blend: das dunkle Umfeld des NASA-Bildes verschwindet komplett im schwarzen All */ mix-blend-mode: screen; /* Filter: mehr Kontrast + Sättigung für dramatischeren Sonnen-Look; leichte Rotation die langsam die Sonne "drehen" lässt (sie rotiert ja auch in echt) */ filter: contrast(1.15) saturate(1.3) brightness(1.05); animation: sunPulse 6s ease-in-out infinite, sunRotate 240s linear infinite; } @keyframes sunRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes sunPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } } /* --- Spielhintergrund v10.7: Farbband + drei driftende Sternenebenen --------------- Ein Element, vier Ebenen: das Farbband steht still, die drei Sternenkacheln driften unterschiedlich weit und ergeben dadurch Tiefe statt Tapete. Moeglich, weil background-position mehrwertig animierbar ist - jede Ebene hat in den Keyframes ihr eigenes Ziel. Jede Sternenebene ist EINE SVG-Kachel, nicht eine Handvoll radial-gradients. Der Unterschied ist nicht kosmetisch: background-size, -repeat und -position werden je BILD durchgezaehlt, nicht je Ebene. Bei hundert Verlaeufen wuerden die vier Groessen reihum wiederholt, und jeder Stern laege in einer anderen Kachel als gedacht. Die Kachelversaetze sind je ein ganzes Vielfaches der Kachelgroesse. Waere einer krumm, wuerde das ganze Sternenfeld bei jedem Durchlauf sichtbar springen. position: absolute, NICHT fixed. Der erste Anlauf hatte hier `fixed` - das hat am PC die letzten 53 Pixel jeder Seite unerreichbar gemacht (genau die Hoehe der Kopfleiste): der Himmel begann dann ganz oben am Fenster statt an der Oberkante von .layout, und um diese Differenz war der scrollbare Bereich zu kurz. Man kam bis kurz vors Seitenende und wurde zurueckgezogen. Gemessen in pw/scrollfehler3.py - mit `absolute` stimmt es exakt wieder mit dem Stand vor v10.7 ueberein. Das "der Himmel steht still" macht jetzt `background-attachment` - und zwar nur fuer das Farbband. Das Band bleibt am Fenster stehen (sonst wuerde sein Verlauf auf einer langen Seite ueber 3000 px gezerrt und waere je Bildschirm nur noch eine flache Farbe), die Sternenkacheln scrollen mit der Seite wie eh und je. Nur eine Ebene haengt am Fenster, also auch nur eine, die beim Scrollen neu gemalt werden muss. */ .weltraum::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(107deg, transparent 16%, rgba(70,150,215,.11) 32%, rgba(120,205,235,.21) 46%, rgba(150,95,215,.19) 60%, rgba(60,40,110,.09) 74%, transparent 90%), url("data:image/svg+xml,"), url("data:image/svg+xml,"), url("data:image/svg+xml,"); background-size: 100% 100%, 760px 760px, 680px 680px, 560px 560px; background-repeat: no-repeat, repeat, repeat, repeat; background-attachment: fixed, scroll, scroll, scroll; background-position: 0 0, 0 0, 0 0, 0 0; pointer-events: none; z-index: 0; animation: driftBackground 220s linear infinite; } @keyframes driftBackground { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 0, -1520px 760px, -1360px 680px, -1120px 560px; } } /* --- Sonnensystem-Ansicht: Bahnen & Beschriftung --- */ .orbit-path { fill: none; stroke: #263042; stroke-width: 1; } .planet-label { fill: #5fd0e8; font-size: 12px; text-anchor: middle; font-family: 'Segoe UI', sans-serif; } .planet-klickbar { cursor: pointer; } .galaxie-system-klickbar { cursor: pointer; } .sonnensystem-kopf { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .zoom-out-btn { width: auto; background: #1a2130; border: 1px solid #3a4a60; color: #5fd0e8; padding: 8px 16px; } .zoom-out-btn:hover { background: #24304a; } /* --- Koordinaten-Navigation (Sonnensystem/Galaxie: Galaxie-Auswahl + Vor/Zurück) --- */ .system-nav { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; flex-wrap: wrap; } .system-nav select { background: #131a26; color: #eaeaf0; border: 1px solid #2f3c50; border-radius: 6px; padding: 7px 10px; font-size: 14px; cursor: pointer; } .system-nav select:hover { border-color: #3a4a60; } .system-nav-btn { width: auto; background: #1a2130; border: 1px solid #3a4a60; color: #5fd0e8; padding: 6px 14px; border-radius: 6px; font-size: 15px; cursor: pointer; } .system-nav-btn:hover { background: #24304a; } .system-koordinate { color: #f0f0f5; font-weight: bold; font-size: 16px; letter-spacing: 0.5px; background: #131a26; border: 1px solid #2f3c50; border-radius: 6px; padding: 6px 14px; min-width: 70px; text-align: center; } /* SVGs skalieren sauber mit der Containerbreite (auch auf dem Handy) statt eine feste Höhe zu erzwingen - das Seitenverhältnis kommt aus dem viewBox. */ #sonnensystem-visual, #galaxie-visual { display: flex; justify-content: center; } #sonnensystem-visual svg, #galaxie-visual svg { height: auto; } /* --- Grid-System v2: 25x22-Sonnensystem-Grid und 25x25-Galaxie-Grid --- */ /* Aeusserer Rahmen fuer beide Grids: gleiche Sci-Fi-Optik wie der Techtree-Viewer, damit sich Sonnensystem, Galaxie und Forschungsbaum visuell zusammengehoerig anfuehlen. */ .system-grid, .galaxie-grid { display: grid; gap: 1px; padding: 12px; border: 1px solid #2f3c50; border-radius: 8px; box-shadow: inset 0 0 30px rgba(95, 208, 232, 0.08); width: 100%; max-width: 900px; margin: 0 auto; background-color: #050710; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Galaxie-Ansicht: echtes Andromeda-Foto als Grundlage (NASA/ESA public domain via Wikimedia). Das galaktische Zentrum liegt in der Mitte des Bilds und faellt mit dem 3x3-Schwarzeloch-Feld unseres Grids zusammen - die helle Kern-Leuchtkraft wird zur natuerlichen "Akkretions"-Optik unseres SMBH. Fallback: der Nebel-Verlauf, falls das Bild nicht laedt. */ .galaxie-grid { aspect-ratio: 1 / 1; background-image: radial-gradient(ellipse at 22% 30%, rgba(120, 90, 180, 0.14) 0%, transparent 55%), radial-gradient(ellipse at 78% 68%, rgba(50, 130, 200, 0.10) 0%, transparent 55%), url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Andromeda_Galaxy_%28with_h-alpha%29.jpg/1920px-Andromeda_Galaxy_%28with_h-alpha%29.jpg'), linear-gradient(180deg, #050710 0%, #0a0e1a 100%); background-size: auto, auto, cover, auto; background-position: center, center, center, center; background-repeat: no-repeat; } /* Sonnensystem-Ansicht: warm-glaenzende Nebelaufnahme (Carina Nebula, JWST NIRCam, NASA public domain) als Backdrop - visuell die "Nahansicht" der Galaxie, harmonisch zur Weitwinkel-Andromeda. */ .system-grid { aspect-ratio: 25 / 22; background-image: radial-gradient(ellipse at 30% 30%, rgba(255, 100, 60, 0.08) 0%, transparent 55%), url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Carina_Nebula_%28NIRCam_Image%29.jpg/1280px-Carina_Nebula_%28NIRCam_Image%29.jpg'), linear-gradient(180deg, #050710 0%, #0a0e1a 100%); background-size: auto, cover, auto; background-position: center, center, center; background-repeat: no-repeat; } /* Basis-Zelle: quadratisch, dunkel, dezente Innenkontur. */ .grid-zelle, .galaxie-zelle { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: rgba(15, 22, 35, 0.6); border: 1px solid rgba(60, 78, 100, 0.35); border-radius: 2px; font-size: 10px; color: #4a5570; transition: background 0.12s, border-color 0.12s, transform 0.08s; position: relative; overflow: hidden; } /* --- Sonnensystem-Grid (25x22): Planeten / leer / blockiert --- */ .grid-zelle.planet { background: rgba(30, 44, 68, 0.85); border-color: #4a6a90; cursor: pointer; } .grid-zelle.planet:hover { border-color: #5fd0e8; background: rgba(45, 65, 95, 0.95); transform: scale(1.15); z-index: 5; box-shadow: 0 0 8px rgba(95, 208, 232, 0.5); } .grid-zelle.planet.eigen { border-color: #5fd0e8; background: rgba(30, 55, 75, 0.9); } .grid-zelle.planet.heimatwelt { border-color: #7fe8ff; background: rgba(30, 60, 90, 1); box-shadow: inset 0 0 8px rgba(127, 232, 255, 0.4); } .grid-planet-dot { /* v10.4: Die Groesse ist jetzt die Ausbaustufe - sie kommt per inline-style aus STUFEN_E6.GROESSE in script.js (40 % auf Stufe 1 bis 65,5 % auf Stufe 7). Die Werte hier sind nur der Rueckfall, falls eine Zelle ohne Stufe gezeichnet wird. */ width: 55%; height: 55%; border-radius: 50%; display: block; position: relative; z-index: 2; /* background + box-shadow werden komplett inline in JS gesetzt (mehrstufiger Verlauf mit hellem Highlight, Terminator und Aussenglow - typspezifisch) */ } /* --- Ausbaustufen-Ring (v10.1) ------------------------------------------------------- Zwei Huellen ueber der ganzen Zelle: die hintere Ringhaelfte liegt HINTER dem Planeten (z-index 1, der Planet verdeckt sie), die vordere DAVOR (z-index 4). Die Naht zwischen beiden Haelften ist eine Maske und sitzt einmal auf der vorderen Huelle - sie wird inline in JS gesetzt. Die einzelnen Ringkopien innerhalb der Huelle kommen ebenfalls aus JS (stufenRingHtml), weil Breite, Neigung, Innenrand und Anzahl von der Stufe abhaengen. */ .grid-stufen-ring { position: absolute; inset: 0; pointer-events: none; display: block; } /* v10.4: der blaue Schein um den Planeten. Liegt zwischen hinterer Bandhaelfte und Planet, sein Verlauf steht als inline-style (er haengt an der Ausbaustufe). Alles in Prozent - in Pixeln waere der Schein am Handy dreimal zu gross und wuerde an der Zellkante zu einem eckigen Fleck gekappt. */ .grid-planet-aura { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block; } .grid-stufen-ring.hinten { z-index: 1; } .grid-stufen-ring.vorne { z-index: 4; } .grid-stufen-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } /* Ring fuer Gasriesen: schmale Ellipse hinter dem Planeten */ .grid-planet-ring { position: absolute; top: 42%; left: 8%; width: 84%; height: 16%; border: 1.4px solid; border-radius: 50%; transform: rotate(-18deg); opacity: 0.75; z-index: 1; pointer-events: none; } /* Warmer Nachtseiten-Glow fuer Lavaplaneten */ .grid-planet-glow { position: absolute; bottom: 12%; right: 12%; width: 24%; height: 24%; border-radius: 50%; filter: blur(4px); opacity: 0.7; z-index: 3; pointer-events: none; animation: lavaGlow 3.5s ease-in-out infinite; } @keyframes lavaGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } } .grid-zelle.planet.heimatwelt .grid-planet-dot { animation: heimatpuls 2.4s ease-in-out infinite; } @keyframes heimatpuls { 0%, 100% { box-shadow: 0 0 6px currentColor, inset -2px -2px 4px rgba(0, 0, 0, 0.4); } 50% { box-shadow: 0 0 14px #7fe8ff, inset -2px -2px 4px rgba(0, 0, 0, 0.4); } } .grid-zelle.frei { cursor: pointer; color: #2a3348; } .grid-zelle.frei:hover { background: rgba(30, 44, 68, 0.7); border-color: rgba(95, 208, 232, 0.4); color: #5fd0e8; } .grid-zelle.frei:hover::after { content: "+"; font-size: 15px; font-weight: bold; } .grid-zelle.blockiert { background: rgba(60, 25, 30, 0.4); border-color: rgba(200, 80, 80, 0.35); color: rgba(200, 100, 100, 0.6); cursor: not-allowed; font-size: 13px; } /* --- Sonderfelder im Sonnensystem: Stern (2x2), Asteroid, Mission (mini schwarzes Loch) --- v10.3 (User-Vorgabe): Stern, Asteroid und das Missionsfeld sind jetzt freigestellte Fotos statt CSS-Verlaeufen. Die PNGs haben keinen eigenen Hintergrund, der Spielhintergrund scheint also durch - deshalb bekommen diese Zellen weder Fuellung noch Rahmen, sonst staende ein Kasten hinter dem Bild. Die Bilder sind eng auf ihr Motiv zugeschnitten, 95 % Zellgroesse heisst daher wirklich 95 % Motiv - und nichts ragt in die Nachbarzelle. */ .grid-zelle.stern { background: transparent; border: none; position: relative; cursor: default; overflow: visible; z-index: 3; } .grid-zelle.stern:hover { transform: none; box-shadow: none; } /* Wichtig: das ist ein , kein mit background-image. Chromium legt drop-shadow() bei einem Hintergrundbild um den ganzen Elementkasten - dabei stand ein rechteckiger Schein hinter dem runden Objekt, also genau der Kasten, den wir nicht wollen. Beim folgt der Schatten der Alphamaske des Bildes. */ .grid-stern-foto { position: absolute; top: 50%; left: 50%; /* v10.5 (User-Vorgabe): 5 % groesser als vorher - 95 % * 1,05 = 99,75 %. Das Motiv im PNG ist rundum noch 1,5 % eingerueckt, die Sonne bleibt damit innerhalb des 2x2-Blocks. */ width: 99.75%; height: 99.75%; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; } /* Der Sterntyp faerbt das Foto nach - die gelbe Sonne ist das Original, die anderen drei Typen entstehen aus ihr per Farbdrehung. So bleiben rote Zwerge und blaue Riesen unterscheidbar, ohne dass es vier getrennte Bilder braucht. */ /* Bewusst OHNE drop-shadow: der Schein wuerde ueber die 95 % hinaus in die Nachbarzellen ragen (bzw. an deren Kante hart abgeschnitten und damit als Kasten sichtbar). Das Foto bringt seine Korona selbst mit. */ .grid-zelle.stern.stern-rot .grid-stern-foto { filter: hue-rotate(-20deg) saturate(1.25) brightness(0.95); } .grid-zelle.stern.stern-blau .grid-stern-foto { filter: hue-rotate(172deg) saturate(0.85) brightness(1.08); } .grid-zelle.stern.stern-weiss .grid-stern-foto { filter: saturate(0.10) brightness(1.25); } /* --- Asteroidenfeld: freigestelltes Foto, fuer alle Ressourcen dasselbe. Die frueheren Farbvarianten (eisen/lithium/gold) sind bewusst weg - der Rohstoff steht im Hovertext und im Asteroidenfenster, das Feld selbst soll nichts verraten. --- */ .grid-zelle.asteroid { cursor: help; background: transparent; border-color: transparent; } .grid-zelle.asteroid:hover { transform: scale(1.18); z-index: 5; } .grid-asteroid-foto { width: 92%; height: 92%; display: block; object-fit: contain; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); } .grid-zelle.asteroid:hover .grid-asteroid-foto { filter: brightness(1.35) contrast(1.05); } .grid-zelle.mission { cursor: pointer; background: transparent; border-color: transparent; } .grid-zelle.mission:hover { transform: scale(1.15); z-index: 5; } .grid-mission-icon { width: 95%; height: 95%; display: block; object-fit: contain; animation: missionsPuls 4s ease-in-out infinite; } /* Der Puls ist jetzt eine winzige Groessenaenderung. Jeder Schein (box-shadow ODER drop-shadow) wird von .grid-zelle{overflow:hidden} an der Zellkante gekappt und steht dann als violettes Rechteck hinter dem runden Objekt - genau der Kasten, den wir loswerden wollten. 95 % -> 100 % bleibt innerhalb der Zelle. */ @keyframes missionsPuls { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.05); opacity: 1; } } /* --- Schwarzes Loch statt Sonnensystem (Klick aufs galaktische Zentrum) --- */ .schwarzes-loch-hinweis { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 20px; color: #a8b0c0; text-align: center; max-width: 500px; margin: 0 auto; } /* v10.3: dasselbe Foto wie im Galaxiezentrum, nur gross - wer die Mitte der Karte anklickt, sieht genau das Objekt wieder, das er im Raster angeklickt hat. Das Bild ist breiter als hoch (Verhaeltnis 1,65:1), die Hoehe ergibt sich also aus der Breite. */ .schwarzes-loch-icon { width: 340px; max-width: 92vw; height: auto; animation: schwarzLochAtmen 6s ease-in-out infinite; } @keyframes schwarzLochAtmen { 0%, 100% { filter: drop-shadow(0 0 10px rgba(180, 111, 224, 0.35)); } 50% { filter: drop-shadow(0 0 22px rgba(200, 140, 240, 0.65)); } } /* --- Galaxie-Grid (25x25): Sci-Fi-Sternkarte mit Nebel-Backdrop --- */ /* Nebelhaftes All statt flachem Grid-Hintergrund */ .galaxie-grid { background: radial-gradient(ellipse at 22% 30%, rgba(120, 90, 180, 0.18) 0%, transparent 45%), radial-gradient(ellipse at 78% 68%, rgba(50, 130, 200, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(255, 160, 90, 0.10) 0%, transparent 35%), linear-gradient(180deg, #050710 0%, #0a0e1a 100%); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), inset 0 0 30px rgba(95, 208, 232, 0.10); } .galaxie-grid .grid-zelle, .galaxie-grid .galaxie-zelle { border-color: transparent; /* keine sichtbaren Zellraender - freier Blick auf die Sternkarte */ background: transparent; } /* Sonnensystem-Zelle: klickbarer Hotspot ohne sichtbaren Rahmen; der eigentliche Stern lebt in .galaxie-stern-punkt und dessen ::before/::after (Diffraktionskreuz). */ .galaxie-zelle.stern { cursor: pointer; color: #ffd166; /* wird per inline style pro Stern ueberschrieben - dient als currentColor */ position: relative; } .galaxie-zelle.stern:hover { z-index: 6; } .galaxie-zelle.stern:hover .galaxie-stern-punkt { transform: scale(1.6); filter: brightness(1.3); } .galaxie-zelle.stern.heimat .galaxie-stern-punkt { animation: heimatSternPuls 3.2s ease-in-out infinite; } .galaxie-zelle.stern.heimat::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1.5px solid rgba(127, 232, 255, 0.6); border-radius: 50%; animation: heimatRing 3.2s ease-out infinite; pointer-events: none; } @keyframes heimatSternPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } } @keyframes heimatRing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } } /* Sternpunkt = photorealistischer Look: heller Kern + Halo + Diffraktionskreuz (::before/::after) */ .galaxie-stern-punkt { position: absolute; top: 50%; left: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); background: radial-gradient(circle, #ffffff 0%, currentColor 25%, currentColor 45%, transparent 75%); border-radius: 50%; box-shadow: 0 0 6px currentColor, 0 0 12px currentColor; transition: transform 0.15s ease, filter 0.15s ease; display: block; z-index: 2; } .galaxie-stern-punkt::before, .galaxie-stern-punkt::after { content: ""; position: absolute; top: 50%; left: 50%; background: linear-gradient(90deg, transparent 0%, currentColor 40%, currentColor 60%, transparent 100%); opacity: 0.55; pointer-events: none; } .galaxie-stern-punkt::before { width: 320%; height: 1px; transform: translate(-50%, -50%); } .galaxie-stern-punkt::after { width: 1px; height: 320%; transform: translate(-50%, -50%); } /* Etwas mehr Diffraktions-Kick fuer helle Sterne */ .galaxie-zelle.stern.typ-blau .galaxie-stern-punkt, .galaxie-zelle.stern.typ-weiss .galaxie-stern-punkt { box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; } .galaxie-zelle.leer { background: transparent; border-color: transparent; } /* --- Schwarzes Loch im Galaxie-Zentrum (3x3-Span) --- v10.3 (User-Vorgabe): ein freigestelltes Foto statt der frueheren CSS-Schichten. .bh-foto liegt mit 2,5 % Abstand in der Zelle, das Motiv fuellt also 95 % des 3x3-Blocks und ragt in keine Nachbarzelle. Das Bild ist breit (1,65:1) - "contain" legt es auf die volle Blockbreite und laesst oben und unten Luft, statt es zu verzerren. */ .galaxie-zelle.schwarzes-loch { background: transparent; border: none; cursor: default; overflow: visible; position: relative; z-index: 5; } .galaxie-zelle.schwarzes-loch:hover { transform: none; } /* Das Foto: 2,5 % Abstand ringsum = 95 % Blockgroesse. Ein leichter Schein darunter haelt das Zentrum auch dann erkennbar, wenn ringsum viele helle Sterne stehen. */ .bh-foto { position: absolute; inset: 2.5%; width: 95%; height: 95%; object-fit: contain; animation: bhAtmen 7s ease-in-out infinite; pointer-events: none; } /* Kein Schein, sondern ein leises Atmen der Helligkeit: ein Schein wuerde ueber den 3x3-Block hinaus auf die Nachbarsterne fallen. */ @keyframes bhAtmen { 0%, 100% { opacity: 0.93; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } /* ===================================================================================== GALAXIEKARTE v10.6 - drei Reiter, Punkte statt Sternfarben ===================================================================================== Grundregel wie bei den Ausbaustufen: ALLES in Prozent. Die Karte ist am PC rund 470 px breit, am Handy 299 - in Pixeln gesetzte Punkte waeren dort dreimal zu gross. Der Punkt selbst ist ein Quadrat mit radial-gradient: innen deckend, aussen weich. ===================================================================================== */ /* Der Rahmen selbst war fuer das alte, mittig zentrierte Raster auf display:flex gestellt (Zeile 857). Die neue Karte bringt ihre eigene Aufteilung mit - bliebe der Rahmen ein Flexcontainer, waeren Reiterzeile und Buehne seine Flexkinder und wuerden auf ein Drittel der Breite gequetscht. Genau das ist beim ersten Versuch passiert: die Karte war 2 px breit. */ #galaxie-visual { display: block; } .gx-reiter-zeile { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; } .gx-reiter { /* width/flex muessen hier stehen: weiter oben in dieser Datei gilt `button { width: 100% }` fuer die Bau-Knoepfe. Ohne das hier waere jeder Reiter volle Breite und die drei stuenden untereinander statt nebeneinander. */ width: auto; flex: 0 0 auto; min-height: 36px; padding: 0 18px; border-radius: 18px; border: 1px solid #33465f; background: rgba(255, 255, 255, 0.035); color: #a8b6cc; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; } .gx-reiter:hover { border-color: #5a7ea0; color: #dbe4f0; } .gx-reiter.aktiv { border-color: #7fe8ff; background: rgba(127, 232, 255, 0.13); color: #7fe8ff; } .gx-buehne { display: flex; gap: 20px; align-items: flex-start; } /* v10.6.1: Die Legende steht jetzt UNTER der Karte statt neben ihr. Rechts bleibt nur die schmale Spalte fuer das angeklickte System - dadurch darf die Karte von 520 auf 700 px wachsen (Inhaltsspalte 1040 px minus 300 px Spalte minus 20 px Luecke). */ .gx-links { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .gx-legende-kasten { align-self: flex-start; width: 100%; max-width: 700px; } .gx-karte { position: relative; width: 100%; max-width: 700px; aspect-ratio: 1 / 1; border: 1px solid #2f3c50; border-radius: 8px; overflow: hidden; cursor: crosshair; background: radial-gradient(ellipse at 30% 32%, rgba(90, 70, 150, 0.15) 0%, transparent 55%), radial-gradient(ellipse at 72% 70%, rgba(40, 110, 180, 0.12) 0%, transparent 55%), linear-gradient(180deg, #050710 0%, #0a0e1a 100%); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6); } /* Punkte fangen keine Klicks - das macht der Rahmen, siehe gxKarteGeklickt(). */ .gx-punkt, .gx-loch, .gx-heimat, .gx-marke { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } /* Das freigestellte Wirbelfoto aus v10.3. object-fit passt es in den 3x3-Block ein, ohne es zu verzerren - das Bild ist 1,648-mal so breit wie hoch. */ .gx-loch { transform: none; border-radius: 0; object-fit: contain; } .gx-heimat { width: 2.6%; height: 2.6%; border: 1px solid rgba(127, 232, 255, 0.85); } .gx-marke { width: 4.4%; height: 4.4%; border: 1px solid rgba(255, 209, 102, 0.9); animation: gxMarkePuls 1.8s ease-in-out infinite; } @keyframes gxMarkePuls { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .gx-spalte { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; min-width: 260px; } .gx-kasten { border: 1px solid #26344a; border-radius: 10px; background: rgba(12, 17, 28, 0.75); padding: 12px 14px 14px; } .gx-kasten-kopf { color: #7fe8ff; font-size: 12px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid #22314a; margin-bottom: 10px; } /* Unter der Karte ist Breite da und Hoehe knapp: die Legende laeuft deshalb am PC in Spalten statt untereinander. */ .gx-legende { display: flex; flex-wrap: wrap; gap: 7px 22px; } .gx-legende .gx-leg-zeile { flex: 0 0 auto; } /* v10.7.2: der erklaerende Satz ueber der Legende. flex-basis 100 % - sonst liefe er als weitere Spalte neben den Punkten mit und waere nicht als Ueberschrift zu erkennen. */ .gx-leg-hinweis { flex: 1 1 100%; color: #8b97a8; font-size: 12.5px; line-height: 1.5; margin-bottom: 4px; } .gx-leg-hinweis b { color: #b9c6d8; } .gx-leg-zeile { display: flex; align-items: center; gap: 10px; color: #a8b6cc; font-size: 12.5px; } .gx-leg-zeile small { color: #6f7c92; } .gx-leg-punkt { flex: 0 0 auto; border-radius: 50%; display: block; } .gx-detail-name { color: #e8ecf4; font-size: 17px; font-weight: 600; } .gx-detail-zeile { color: #6f7c92; font-size: 12.5px; margin: 4px 0 10px; } .gx-detail-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .gx-spieler { display: flex; align-items: center; gap: 10px; border: 1px solid #26344a; border-radius: 8px; background: rgba(255, 255, 255, 0.02); padding: 7px 10px; } .gx-spieler b { color: #e8ecf4; font-size: 13px; display: block; } .gx-spieler small { color: #6f7c92; font-size: 11px; } .gx-spieler-punkt { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; } .gx-spieler-punkt.ich { background: #7fe8ff; box-shadow: 0 0 8px #7fe8ff; } .gx-spieler-punkt.fremd { background: rgba(190, 205, 230, 0.75); } .gx-spieler-punkt.npc { background: rgba(150, 175, 215, 0.45); } .gx-knopf { display: block; width: 100%; min-height: 40px; margin-top: 8px; border-radius: 8px; border: 1px solid #3a4a63; background: rgba(255, 255, 255, 0.03); color: #c3ccda; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .gx-knopf:hover { border-color: #5a7ea0; color: #e8ecf4; } .gx-knopf.haupt { border-color: #7fe8ff; color: #7fe8ff; background: rgba(127, 232, 255, 0.10); } .gx-leer { color: #6f7c92; font-size: 12.5px; } /* --- Reiter "Springen" --- */ .gx-springen { max-width: 620px; } .gx-spring-zeile { display: flex; gap: 10px; align-items: stretch; } .gx-koord { flex: 1 1 auto; min-height: 52px; border-radius: 26px; border: 1px solid #3a5f7a; background: rgba(127, 232, 255, 0.06); color: #7fe8ff; font-family: inherit; font-size: 20px; font-weight: 600; letter-spacing: 1px; padding: 0 22px; } .gx-koord::placeholder { color: #4d5c72; font-size: 14px; font-weight: 400; letter-spacing: 0; } .gx-koord.falsch { border-color: #ff3b30; color: #ff8f8a; } .gx-spring-zeile .gx-knopf { width: 150px; margin-top: 0; min-height: 52px; border-radius: 26px; } .gx-fehler { color: #ff8f8a; font-size: 12.5px; min-height: 18px; margin: 8px 2px 0; } /* Die Zifferntastatur braucht nur, wer mit dem Finger tippt - am PC ist sie im Weg. */ .gx-tasten { display: none; } .gx-titel { color: #7fe8ff; font-size: 13px; margin: 20px 0 8px; } .gx-verlauf { display: flex; align-items: center; gap: 12px; border: 1px solid #26344a; border-radius: 8px; background: rgba(255, 255, 255, 0.025); padding: 10px 14px; margin-bottom: 8px; cursor: pointer; } .gx-verlauf:hover { border-color: #5a7ea0; } .gx-verlauf-koord { color: #e8ecf4; font-weight: 600; font-size: 13.5px; } .gx-verlauf-text { color: #8ea3bd; font-size: 12px; flex: 1 1 auto; } .gx-verlauf-pfeil { color: #7fe8ff; } .gx-hilfe { color: #6f7c92; font-size: 12.5px; margin-bottom: 5px; } .gx-hilfe b { color: #e8ecf4; } /* --- Asteroiden-Slots --- */ .asteroid-klickbar { cursor: pointer; } .asteroid-icon { fill: #8a7a6a; stroke: #cbb896; stroke-width: 1; } .asteroid-icon.anwesend { fill: #cfa85a; stroke: #ffe0a0; } .asteroid-label { fill: #a0a8b8; font-size: 11px; text-anchor: middle; font-family: 'Segoe UI', sans-serif; } /* --- Techtree --- */ .techtree-zweig { border: 1px solid #263042; border-radius: 8px; margin-bottom: 14px; overflow: hidden; } .techtree-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: rgba(21, 27, 40, 0.9); cursor: pointer; font-weight: bold; color: #eaeaf0; } .techtree-header:hover { background: rgba(30, 40, 58, 0.9); } .techtree-arrow { color: #5fd0e8; font-size: 13px; } .techtree-content { display: none; padding: 6px 18px 16px; } .techtree-content.offen { display: block; } .techtree-kategorie { color: #5fd0e8; font-size: 16px; margin: 16px 0 6px; } .techtree-item { padding: 10px 0; border-bottom: 1px solid #1e2838; } .techtree-item-name { color: #f0f0f5; font-weight: bold; font-size: 15px; } .techtree-item-beschreibung { color: #a0a0b0; font-size: 14px; margin: 3px 0; } /* v7.6: die Voraussetzungszeile steht in Gebaeude-, Schiffs- und Verteidigungskarten und war die kleinste Zeile ueberhaupt. Jetzt auf Fliesstextgroesse, dazu etwas heller - grau auf dunkelblau war bei 13 px kaum lesbar. */ .techtree-item-requires { color: #8b96a8; font-size: 15px; } /* --- Forschungs-Techtree als grafisches Diagramm: ein SVG, ein Segment (Panel) pro Zweig, verwurzelt am Forschungszentrum (FZ), mit echten Verbindungslinien - auch zwischen Zweigen, genau dort wo eine Voraussetzung tatsächlich in einen anderen Zweig hineinreicht (orange Linien mit Pfeilspitze). Das Diagramm hat eine feste Pixelgröße und steckt in einem scrollbaren Rahmen - bei dieser Knotenzahl ist Scrollen/Zoomen (auch am Handy) sinnvoller als alles auf Handy-Breite zu stauchen und damit unlesbar zu machen. */ .fzg-hinweis { color: #8a94a6; font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; } .fzg-scroll { overflow: auto; max-height: 75vh; border: 1px solid #1e2838; border-radius: 10px; background: radial-gradient(ellipse at top, #0d1a2b 0%, #050810 60%, #020408 100%); } /* --- v13: Baum-Picker (Forschungs-Techtree im Spiel) --- */ .bp-container { display: flex; gap: 12px; height: 78vh; } .bp-liste { width: 240px; flex-shrink: 0; overflow-y: auto; background: linear-gradient(180deg, #3a424c 0%, #2a2f38 50%, #1e2229 100%); border: 1px solid rgba(95,208,232,0.3); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 12px rgba(95,208,232,0.08); } .bp-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: linear-gradient(180deg, #3a424c 0%, #262c34 100%); border: 1px solid rgba(120,140,170,0.25); border-radius: 5px; cursor: pointer; font-size: 13.5px; color: #c8d4e0; user-select: none; transition: all 0.15s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); text-shadow: 0 1px 0 rgba(0,0,0,0.5); } .bp-item:hover { border-color: #5fd0e8; color: #fff; background: linear-gradient(180deg, #4a525c 0%, #363c46 100%); } .bp-item.aktiv { border-color: #5fd0e8; background: linear-gradient(180deg, #2a4a5c 0%, #1a3040 100%); color: #7fd0e8; font-weight: 700; box-shadow: 0 0 0 1px #5fd0e8, 0 0 12px rgba(95,208,232,0.4); } .bp-item-badge { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: #2a3a52; color: #8a99b3; font-weight: 600; } .bp-item.hat-baum .bp-item-badge { background: #2a5a2a; color: #a0e08a; } /* v16: Techtree-Viewer als Sci-Fi Display-Screen mit HUD-Rahmen. Egal wie groß/klein der einzelne Baum ist, der Rahmen ist immer gleich, der Baum sitzt zentriert darin und wirkt wie auf einem Konsolen-Bildschirm angezeigt. */ .bp-viewer { flex: 1; overflow: hidden; padding: 0; display: block; background: transparent; position: relative; } .bp-svg { display: block; } .bp-container { height: 84vh; } .tt-display-frame { position: relative; width: 100%; height: 100%; background: radial-gradient(ellipse at 30% 20%, rgba(80,180,220,0.06), transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(200,140,80,0.04), transparent 60%), linear-gradient(180deg, #050810 0%, #0a1220 100%); border: 1px solid rgba(95,208,232,0.35); border-radius: 6px; box-shadow: inset 0 0 60px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(95,208,232,0.1), 0 0 20px rgba(95,208,232,0.15); display: flex; flex-direction: column; overflow: hidden; } /* Sternchen-Overlay - der "Weltraum in dem der Baum schwebt" */ .tt-display-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.3), transparent), radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.35), transparent), radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,0.3), transparent), radial-gradient(2px 2px at 15% 60%, rgba(255,255,255,0.25), transparent), radial-gradient(1.5px 1.5px at 75% 40%, rgba(255,255,255,0.35), transparent); background-size: 300px 300px; opacity: 0.6; } /* HUD-Header oben: Item-Name + Status */ .tt-display-header { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 8px 18px; background: linear-gradient(180deg, rgba(95,208,232,0.15), rgba(95,208,232,0.02)); border-bottom: 1px solid rgba(95,208,232,0.35); font-family: 'Courier New', monospace; text-shadow: 0 0 6px rgba(95,208,232,0.5); } .tt-display-title { color: #7fd0e8; font-size: 14px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; } .tt-display-status { color: #a0e0f0; font-size: 12px; letter-spacing: 1px; } .tt-display-status.leer { color: #ffb040; } /* Body: der Baum-Bereich - SVG bleibt in Original-Pixelgröße (Icons überall gleich groß), Body scrollt wenn nötig und zentriert wenn Baum kleiner als Rahmen ist. */ .tt-display-body { position: relative; z-index: 2; flex: 1; overflow: auto; padding: 20px; display: flex; align-items: center; justify-content: center; } .bp-svg-object { display: block; /* SVG bringt eigene Breite/Höhe mit (aus dem SVG-Attribut vom Server) */ flex-shrink: 0; /* nicht zusammendrücken wenn Flex-Container schmaler ist */ } /* Scanlines-Overlay - subtiler CRT-Effekt */ .tt-display-scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 2px, rgba(95,208,232,0.02) 2px, rgba(95,208,232,0.02) 3px ); animation: scanlines-move 8s linear infinite; } @keyframes scanlines-move { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } } /* HUD-Corner-Brackets (typisch Sci-Fi-Interfaces) */ .tt-corner { position: absolute; width: 20px; height: 20px; z-index: 4; border-color: #5fd0e8; pointer-events: none; } .tt-corner-tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; } .tt-corner-tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; } .tt-corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; } .tt-corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; } .tt-display-frame.leer { border-color: rgba(255,176,64,0.35); } .tt-display-frame.leer .tt-corner { border-color: #ffb040; } .tt-display-frame.leer .tt-display-header { border-bottom-color: rgba(255,176,64,0.35); } .bp-node { width: 100%; height: 100%; box-sizing: border-box; background: #1b2740; border: 1.5px solid #3d5578; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; text-align: center; } .bp-node.hub { background: #2a3f22; border-color: #4fae5f; } .bp-node-icon { font-size: 33px; line-height: 1; margin-bottom: 3px; } .bp-node-name { color: #f0f0f5; font-size: 12.5px; font-weight: 600; line-height: 1.15; } .fzg-svg { display: block; } /* --- OGame-Style Techtree --- */ .fzg-node-og { width: 72px; height: 96px; display: flex; flex-direction: column; align-items: center; cursor: help; } .fzg-node-icon { width: 68px; height: 68px; border-radius: 6px; background: linear-gradient(160deg, #1a2436 0%, #0a1220 100%); border: 1px solid #3a5578; box-shadow: inset 0 0 8px rgba(120, 180, 240, 0.15), 0 2px 4px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; font-size: 35px; line-height: 1; } .fzg-node-og:hover .fzg-node-icon { border-color: #6ba9d8; box-shadow: inset 0 0 12px rgba(120, 180, 240, 0.3), 0 0 8px rgba(120, 180, 240, 0.4); } .fzg-node-label { color: #b8c8dc; font-size: 11px; font-weight: 500; text-align: center; margin-top: 4px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fzg-edge-local-og { fill: none; stroke: #4a9b5e; stroke-width: 2; opacity: 0.9; } .fzg-edge-cross-og { fill: none; stroke: #e0524d; stroke-width: 2; opacity: 0.9; } .fzg-edge-hub-og { fill: none; stroke: #4b7ba0; stroke-width: 1.5; opacity: 0.7; } .fzg-badge-og rect { stroke-width: 1; } .fzg-badge-og text { font-family: inherit; font-size: 11px; font-weight: bold; } .fzg-badge-local rect { fill: #14361d; stroke: #4a9b5e; } .fzg-badge-local text { fill: #7ce596; } .fzg-badge-cross rect { fill: #3d1917; stroke: #e0524d; } .fzg-badge-cross text { fill: #ff8a85; } .fzg-badge-hub rect { fill: #14243a; stroke: #4b7ba0; } .fzg-badge-hub text { fill: #7cb8e0; } .fzg-panel-bg { fill: rgba(255,255,255,0.02); stroke: #263042; stroke-width: 1.5; } .fzg-panel-titel { fill: #5fd0e8; font-size: 16px; font-weight: bold; font-family: inherit; } .fzg-hub { display: inline-flex; align-items: center; gap: 5px; background: #16324a; color: #8fe0f0; border: 1px solid #2a5a78; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: bold; white-space: nowrap; width: fit-content; } .fzg-node-box { box-sizing: border-box; width: 100%; height: 100%; border: 1px solid #2f3c50; border-radius: 8px; padding: 7px 10px; background: #131a26; overflow: hidden; cursor: default; } .fzg-node-name { color: #f0f0f5; font-weight: bold; font-size: 13.5px; line-height: 1.25; } .fzg-stufe { color: #6f7a8a; font-weight: normal; font-size: 11.5px; display: block; margin-top: 2px; } .fzg-edge-hub { fill: none; stroke: #2a5a78; stroke-width: 1.5; } .fzg-edge-local { fill: none; stroke: #2f3c50; stroke-width: 1.5; } .fzg-edge-cross { fill: none; stroke: #d9a95f; stroke-width: 1.75; stroke-dasharray: 5 4; opacity: 0.85; } /* --- Fixer Planet in der Mitte (im Wechsler) --- */ .fixed-planet { width: 190px; height: 190px; margin-bottom: 10px; filter: drop-shadow(0 0 35px rgba(95, 208, 232, 0.35)); } #planet-canvas { width: 100%; height: 100%; display: block; } /* --- TEMPORÄR: Planetendesign-Vorschau (kommt später wieder raus) --- */ .planetendesign-vorschau-kugel { width: 260px; height: 260px; margin: 20px auto; filter: drop-shadow(0 0 35px rgba(95, 208, 232, 0.35)); } #planetendesign-vorschau-canvas { width: 100%; height: 100%; display: block; } @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .planet-hero, .summary-list { position: relative; z-index: 1; } /* v3.8 (User-Vorgabe): Auf breiten Screens sind die 3 Übersicht-Spalten zu weit auseinander. v4.8: Die Deckelung passiert jetzt zentral über .page.active (--inhalt-breite). Diese beiden Container sollen die zentrierte Spalte voll ausfüllen, statt sich nochmal auf 1100px zu verengen - sonst wäre die Übersicht schmaler als alle anderen Reiter. */ .planet-hero { width: 100%; margin: 0 auto 15px; } .summary-list { width: 100%; margin: 0 auto; } /* --- Übersicht-Liste, volle Breite --- */ .summary-list { display: flex; flex-direction: column; gap: 12px; width: 100%; } .summary-block { background: rgba(16, 21, 31, 0.85); border: 1px solid #263042; border-radius: 8px; padding: 14px 18px; backdrop-filter: blur(2px); /* ===================================================================================== Aug 2026 v8.0 (User-Vorgabe, Fehlerbild vom Spieler): Das aufgeklappte Schiffe-Feld verschwand zur Haelfte hinter dem naechsten Uebersichts-Kasten. Die Ursache ist `backdrop-filter` eine Zeile darueber. Es sieht harmlos aus, macht den Kasten aber zu einem eigenen STAPELKONTEXT. Damit gilt das z-index: 40 des Popups nur noch INNERHALB dieses Kastens - gegen den naechsten Kasten hat es keine Wirkung mehr, und weil der spaeter im Dokument steht, malt er darueber. Dieselbe Sorte Falle wie das `overflow: hidden`, das in v6.8 das Kleben des Planet-Umschalters verhindert hat: die Regel, die das Problem verursacht, steht an einer voellig anderen Stelle als die, die nicht funktioniert. Loesung: der Kasten bekommt selbst einen z-index, sobald in ihm etwas aufgeklappt ist. Dafuer braucht er position != static. ===================================================================================== */ position: relative; z-index: 1; } /* Am PC: solange die Maus im Kasten ist, liegt er ueber den folgenden. */ .summary-block:hover { z-index: 60; } /* Am Handy (kein Hovern) setzt Javascript diese Klasse, sobald ein
offen ist - siehe haltePopupObenauf() in script.js. Bewusst nicht ueber :has(), damit es auch in aelteren Browsern sicher greift. */ .summary-block.hat-offenes-feld { z-index: 60; } /* v6.6 (User-Vorgabe): "Mach die Ueberschriften in der Uebersicht dadurch eine Schriftgroesse groesser, dass die sich nochmal etwas hervorheben." Weil die Zeilen darunter jetzt alle auf 14px/700 stehen, waeren 15px als Ueberschrift zu nah dran gewesen - der Abstand zur Zeile ist es, der eine Ueberschrift zur Ueberschrift macht. 17px + Sperrung schaffen ihn. */ .summary-block h3 { font-size: 18px; font-weight: 700; letter-spacing: 0.3px; color: #eaeaf0; margin-bottom: 4px; } /* --- Planeten-Wechsler --- */ .planet-switcher { display: flex; align-items: center; justify-content: center; gap: 40px; background: rgba(16, 21, 31, 0.85); border: 1px solid #263042; border-radius: 8px; padding: 30px 18px; } .switch-arrow { width: 44px; height: 44px; border-radius: 50%; font-size: 17px; background: #2d6f8f; color: white; border: none; cursor: pointer; flex-shrink: 0; } .switch-arrow:hover { background: #3a89ae; } .switch-planet-display { display: flex; flex-direction: column; align-items: center; } .switch-planet-name { color: #f0f0f5; font-weight: bold; } .switch-arrow { width: 44px; height: 44px; border-radius: 50%; font-size: 17px; background: #2d6f8f; color: white; border: none; cursor: pointer; } .switch-arrow:hover { background: #3a89ae; } .switch-planet-name { color: #f0f0f5; font-weight: bold; } .switch-planet-display.spin-nowhere .switch-planet-name { animation: spinNowhere 0.5s ease; } .switch-arrow:active { transform: scale(0.92); } /* --- Rohstoff-Kennzeichen ------------------------------------------------------------ Bis v6.7 waren das echte Bilder (34x34 bzw. 26x26 Pixel). Aug 2026 v6.8 (User-Vorgabe): "Entferne das Icon mit dem jeweiligen chem. Namen: Eisenbild zu Fe, Lithiumbild zu Li etc." - und das ueberall, nicht nur oben in der Leiste. Der Klassenname bleibt .element-tile, weil sich vierzehn Fundstellen (Baukosten, Lager, Handel, Asteroiden, Pluender-Einstellungen) daran ausrichten. Aus der Bildkachel wird eine Textkachel: feste Mindestbreite, damit "Fe" und "H2O" gleich breit sind und die Zahlen dahinter in einer Flucht stehen - sonst saehe jede Kostenzeile ausgefranst aus. KEINE feste Hoehe mehr: die Kachel soll sich in Kostenzeilen an der Textzeile ausrichten und nicht wie ein Bild darueber hinausragen. */ .element-tile { display: inline-flex; align-items: baseline; justify-content: center; min-width: 30px; padding: 0 2px; flex-shrink: 0; font-weight: 800; letter-spacing: 0.4px; color: inherit; } /* Die tiefgestellte 2 in H2O und H2 - gleiche Behandlung wie in der Rohstoffleiste. */ .element-tile sub { font-size: 0.68em; vertical-align: baseline; position: relative; bottom: -0.22em; } .element-tile.sz-sm { min-width: 26px; font-size: 0.95em; } /* ===================================================================================== DIE PLAKETTE (Aug 2026 v8.7, User-Vorgabe) "Setz Variante C um sowohl dafuer als auch dann fuer den Rest. Finde es gut wenn ueberall das Symbol Fe, Li etc. in dieser Plakette ist. also i Popup von Ressanzeige und dann in jedem weiteren Feld wie Gebaeude Flotte etc. wo es Rohstoffe gibt so anpassen." ⚠️ DAMIT IST DIE VORGABE AUS v6.8 ABGELOEST. Dort hiess es ausdruecklich: "Lass die Symbole Fe, Li etc. IMMER in der Standard-Schriftfarbe, faerbe diese nicht ein!" Der Grund damals war, dass ein farbiges Symbol mit der Fuellstands-Ampel an der Zahl um Aufmerksamkeit konkurrierte. Diese Ampel gibt es seit v8.3 nicht mehr - der Fuellstand sitzt im Balken, die Zahl ist wieder weiss. Damit ist der Platz frei. EINE REGEL FUER ALLE STELLEN ---------------------------- Hier stehen die vier Selektoren, die es im ganzen Spiel gibt, in EINEM Block. Sie unterscheiden sich nur in der Breite (siehe unten) - Form, Farbe und Schriftfarbe kommen von hier. Vier getrennte Bloecke waeren vier Stellen, an denen sich die Plaketten auseinanderentwickeln koennten. Die Farbe kommt aus var(--res-farbe), also aus dem data-res-Attribut. Der dunkle Text (#0d1117) statt Weiss ist kein Geschmack, sondern noetig: auf Gold und Tuerkis waere weisse Schrift kaum lesbar, auf allen fuenf Farben ist dunkle Schrift kontrastreich. ===================================================================================== */ .element-tile[data-res], .resource .res-symbol, .kb-chip .kb-sym { border-radius: 6px; padding: 2px 6px; background: color-mix(in srgb, var(--res-farbe, #5fd0e8) 88%, #0a0e14); color: #0d1117; font-weight: 700; text-shadow: none; box-shadow: 0 0 8px color-mix(in srgb, var(--res-farbe, #5fd0e8) 40%, transparent); text-align: center; } /* Die Breiten. Sie sind der eigentliche Grund, warum es ueberhaupt feste Werte braucht: "Fe" ist schmal, "H2O" breit. Ohne feste Breite staenden die Zahlen dahinter versetzt und jede Kostenzeile saehe ausgefranst aus. Je Umgebung eine eigene Breite, weil dort auch die Schrift unterschiedlich gross ist. */ /* Der kleine Abstand nach rechts ist noetig, seit das Kuerzel einen Grund hat: an mehreren Stellen steht die Menge OHNE Leerzeichen direkt dahinter (z.B. `${elementTile(res)}${fmtZ(w)}` im Einheiten-Fenster). Ohne Abstand klebte die Zahl an der Plakette - vorher fiel das nicht auf, weil das Kuerzel keinen sichtbaren Rand hatte. */ .element-tile[data-res] { min-width: 40px; margin-right: 4px; } .element-tile[data-res].sz-sm { min-width: 34px; padding: 1px 4px; } .resource .res-symbol { min-width: 46px; } .kb-chip .kb-sym { min-width: 42px; } /* Bei zu teuren Kosten ist das ganze Chip gedaempft (.kb-fehlt). Die Plakette darf dabei nicht als einziges Element hell stehenbleiben - sonst zoege ausgerechnet der Rohstoff den Blick an, den man sich NICHT leisten kann. */ .kb-chip.kb-fehlt .kb-sym { opacity: .8; } /* --- Gebäude: vertikale Liste --- */ .buildings-list { display: flex; flex-direction: column; gap: 14px; margin-top: 15px; } .building-row { display: flex; gap: 20px; /* v16.1: Titan-/Chrom-Look wie in Topbar/Sidebar - Mehrstufen-Gradient mit heller Kante oben und dunklem Bottom, aber SEMI-TRANSPARENT sodass der Weltraum-/Sternenhintergrund durchscheint (User-Wunsch: "nicht deckend, dass wie jetzt der Hintergrund sichtbar bleibt"). */ background: linear-gradient(180deg, rgba(90,100,115,0.55) 0%, rgba(60,66,74,0.55) 20%, rgba(40,45,52,0.55) 50%, rgba(50,56,64,0.55) 75%, rgba(28,32,38,0.55) 100%); border: 1px solid rgba(95,208,232,0.28); border-radius: 6px; padding: 16px; align-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(95,208,232,0.12), 0 2px 8px rgba(0,0,0,0.4); backdrop-filter: blur(1px); /* leichtes Blurring hinter der Kachel für "Glas-Metall"-Optik */ } .building-row:hover { border-color: rgba(95,208,232,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 12px rgba(95,208,232,0.2), 0 2px 8px rgba(0,0,0,0.4); } .building-row .image-col { display: flex; flex-direction: column; align-items: center; /* v7.6 (User-Vorgabe): "Mach die Bilder immer gleich gross, egal wo. Mach sie allgemein erstmal 25 % groesser." Die Kachel .icon-placeholder ist die EINE Stelle, an der die Groesse steht - Gebaeude, Schiffe, Verteidigung und Forschung benutzen alle dieselbe Klasse. Damit kann keine Ansicht aus der Reihe tanzen. */ width: 158px; flex-shrink: 0; } /* v7.6: "Mach den Namen, der darueber steht, groesser." 15 -> 17 px. */ .building-row .image-col .name { color: #f0f0f5; font-size: 17px; font-weight: 700; margin-bottom: 7px; text-align: center; line-height: 1.2; } .building-row .icon-placeholder { width: 138px; /* v7.6: 110 x 1,25 */ height: 113px; /* v7.6: 90 x 1,25 */ display: flex; align-items: center; justify-content: center; background: #0d1320; border-radius: 8px; border: 1px solid #263042; overflow: hidden; position: relative; /* v3.7: für das absolut positionierte Info-Icon oben links */ } .building-photo { width: 100%; height: 100%; object-fit: cover; } /* Aug 2026 v3.7: kleines "i im Kreis" oben links im Gebäude-/Schiff-/Forschungs-/Verteidigungs- Bild. Ersetzt den früheren separaten "ℹ️ Info"-Button unter der Beschreibung. */ .img-info-btn { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid #7fdcf0; background: rgba(10, 18, 32, 0.85); color: #7fdcf0; font-family: Georgia, serif; font-size: 13px; font-weight: 700; font-style: italic; line-height: 18px; text-align: center; cursor: pointer; z-index: 2; box-shadow: 0 0 6px rgba(95, 208, 232, 0.45); transition: background 0.15s, color 0.15s, transform 0.1s; } .img-info-btn:hover { background: #7fdcf0; color: #0a0e14; transform: scale(1.1); } /* Aug 2026 v3.12 (User-Vorgabe Task 2): Max-Bauen-Zeile + Button unter dem Bauen-Button. */ .max-bauen-zeile { margin-top: 4px; padding: 3px 6px; background: rgba(95, 208, 232, 0.06); border: 1px solid rgba(95, 208, 232, 0.2); border-radius: 4px; color: #a8b8c8; font-size: 12px; display: flex; justify-content: center; font-family: "Consolas", monospace; } .max-bauen-btn { margin-top: 4px !important; background: #3a89ae !important; font-size: 12.5px !important; padding: 5px 8px !important; } .max-bauen-btn:hover:not(:disabled) { background: #4ba0c8 !important; } /* Aug 2026 v3.13 (Task 2): Scan-Modal Owner-Info-Box */ .owner-box { background: rgba(95, 208, 232, 0.06); border: 1px solid rgba(95, 208, 232, 0.25); border-radius: 5px; padding: 8px 10px; margin: 6px 0 8px; color: #d8dce8; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; } .owner-box .owner-zeile { line-height: 1.35; } .owner-box b { color: #7fdcf0; font-weight: 600; margin-right: 4px; } .building-row .info-col { flex: 1; min-width: 0; } .building-row .beschreibung { color: #a0a0b0; font-size: 14px; margin-bottom: 10px; line-height: 1.5; } /* v7.6: "Mach das Level in dick." */ .building-row .level-tag { color: #5fd0e8; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; margin-bottom: 8px; } /* v7.6 (User-Vorgabe): "Passe hier die Groesse der Zahlen und Kosten + Fe, Li etc. der allgemeinen Schriftgroesse an. Bauzeit und Voraussetzungen auch groesser!" Die drei Zeilen waren bewusst kleiner als der Beschreibungstext daneben. Jetzt liegen sie auf derselben Groesse. */ .building-row .cost-line { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 15px; font-weight: 600; } .building-row .bauzeit-line { font-size: 15px; opacity: .85; margin-bottom: 10px; } /* Aug 2026 v5.5: Gesamtbauzeit einer Bestellung. Seit v5.5 wird eine Bestellung komplett auf einmal fertig - diese Zeile ist deshalb die wichtigere der beiden. */ .building-row .bauzeit-line.gesamt-bauzeit { opacity: 1; color: #7fc4ff; font-weight: 500; margin-top: -6px; } .eta-line { font-size: 13px; margin-bottom: 6px; font-weight: 500; } /* ===================================================================================== Aug 2026 v7.6 (User-Vorgabe Punkt 4) - Aufklappbare Forschungskapitel Frueher stand pro Kategorie nur eine

-Ueberschrift zwischen den Karten, und zwar nur dann, wenn in der Kategorie ueberhaupt etwas Forschbares dabei war. Jetzt ist jedes Kapitel ein Knopf zum Auf- und Zuklappen und JEDES Kapitel wird gezeigt - auch ein leeres. Das Auf-/Zuklappen ist reines Browser-Verhalten (nur display: none), es geht dafuer KEIN Request an den Server. ===================================================================================== */ .forschung-kapitel-kopf { display: flex; align-items: center; gap: 10px; width: 100%; /* gegen die globale button-Regel absichern */ margin: 22px 0 6px; padding: 8px 12px; background: linear-gradient(90deg, rgba(95,208,232,0.16), rgba(95,208,232,0.03)); border: 1px solid rgba(95, 208, 232, 0.35); border-left: 4px solid #5fd0e8; border-radius: 6px; color: #5fd0e8; font-family: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; } .forschung-kapitel-kopf:hover { background: linear-gradient(90deg, rgba(95,208,232,0.26), rgba(95,208,232,0.06)); } .forschung-kapitel-kopf .fk-pfeil { font-size: 13px; width: 14px; flex: 0 0 14px; } .forschung-kapitel-kopf .fk-titel { flex: 1; } /* Zahl rechts: wie viele Forschungen in diesem Kapitel gerade verfuegbar sind. Bei 0 sieht man sofort, dass Aufklappen nichts bringt - man muss es nicht erst ausprobieren. */ .forschung-kapitel-kopf .fk-anzahl { flex: 0 0 auto; min-width: 24px; text-align: center; background: rgba(95, 208, 232, 0.18); border-radius: 10px; padding: 1px 8px; font-size: 13px; font-weight: 700; color: #a8ecff; } .forschung-kapitel-inhalt { margin-bottom: 4px; } .forschung-kapitel-inhalt .empty-hint { margin: 6px 0 10px 16px; } .eta-line.eta-moeglich { color: #6ee079; } /* v8.2: "baubar in 00:45:02" ist eine AUSKUNFT, kein Fehler - vorher stand die Zeile in Alarmrot und sah aus, als waere etwas kaputt. Jetzt ruhiges Blau; Rot bleibt den Faellen vorbehalten, in denen es wirklich nicht weitergeht (.eta-fehler). */ .eta-line.eta-wartet { color: #7fc4ff; } .eta-line.eta-fehler { color: #ff5555; font-weight: 600; } .cost-item { display: inline-flex; align-items: center; gap: 4px; } .cost-item.affordable { color: #6fd88a; } .cost-item.unaffordable { color: #e06060; } /* ===================================================================================== Aug 2026 v8.2 (User-Vorgabe) - Kostenanzeige "Variante B" Ein farbiger Chip je BENOETIGTEM Rohstoff, darunter ein Balken mit dem eigenen Fuellstand und - wenn etwas fehlt - der Prozentsatz. Der Farbcode ist der Kern: vorher war alles entweder gruen oder rot, bei fuenf roten Zahlen sucht man den Engpass trotzdem selbst. Jetzt hat jeder Rohstoff seine feste Farbe und der Balken zeigt sofort, welcher der kritische ist. ===================================================================================== */ .kosten-block { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; } .kb-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 12px; border-radius: 10px; min-width: 108px; background: color-mix(in srgb, var(--kb-farbe) 14%, transparent); border: 1px solid color-mix(in srgb, var(--kb-farbe) 42%, transparent); } /* Fehlt etwas, wird der Chip merklich blasser - man erkennt die Luecke schon am Grauwert, ohne eine Zahl zu lesen. Nicht weiter herunter als 55 %, sonst ist die Menge selbst nicht mehr ablesbar. */ .kb-chip.kb-fehlt { opacity: .55; filter: grayscale(.25); } /* v8.7: Die FARBE steht hier nicht mehr - das Kuerzel sitzt seitdem in einer Plakette (siehe den Plaketten-Block weiter oben), und die faerbt den Grund statt der Schrift. Uebrig bleiben Schriftgroesse und Sperrung. */ .kb-sym { font-size: 13px; letter-spacing: .3px; } .kb-zahl { color: #eef2f8; font-weight: 600; font-variant-numeric: tabular-nums; } .kb-balken { display: block; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .10); overflow: hidden; } .kb-balken i { display: block; height: 100%; background: var(--kb-farbe); border-radius: 2px; } .kb-fehlt-txt { font-size: 12px; color: #8b96a8; } .kb-pro-stueck { color: #8b96a8; font-size: 13px; margin-top: 4px; } /* Der Farbcode. Bewusst an den Stoffen orientiert statt an einer Ampel: Eisen stahlgrau, Lithium violett-silbern, Wasser blau, Wasserstoff tuerkis, Gold gold. v8.5: Die Werte stehen nicht mehr hier, sondern EINMAL ganz oben bei [data-res=...]. Das Chip nimmt sie nur noch entgegen. Ein Chip ohne data-res faellt auf Cyan zurueck. */ .kb-chip { --kb-farbe: var(--res-farbe, #5fd0e8); } .building-row .action-col { width: 150px; flex-shrink: 0; } .building-row .action-col:has(.anzahl-input) { display: flex; flex-direction: column; gap: 6px; } .anzahl-input { width: 100%; background: #0d1320; border: 1px solid #263042; border-radius: 4px; color: #eaeaf0; padding: 6px 8px; font-size: 14px; text-align: center; } .anzahl-input:disabled { color: #666; cursor: not-allowed; } button { background: #2d6f8f; color: white; border: none; padding: 7px 14px; border-radius: 4px; cursor: pointer; width: 100%; font-size: 14px; } button:hover { background: #3a89ae; } button:disabled { background: #2a2a33; cursor: not-allowed; color: #666; } .info-btn { background: transparent; border: 1px solid #3a4a60; color: #5fd0e8; padding: 6px 10px; margin-top: 6px; font-size: 13px; } .info-btn:hover { background: #1a2130; } .build-status { background: #24241a; border: 1px solid #665; border-radius: 6px; padding: 10px 15px; margin-bottom: 20px; color: #e0c060; } /* --- Bauschleife --- */ .bauschleife-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .bauschleife-item { display: flex; align-items: center; gap: 14px; background: rgba(36, 36, 26, 0.55); border: 1px solid #4a4530; border-radius: 6px; padding: 10px 14px; } .bauschleife-item.wartend { background: rgba(21, 27, 40, 0.7); border-color: #263042; } .bauschleife-item .bau-info { flex: 1; min-width: 0; } .bauschleife-item .bau-name { color: #eaeaf0; font-weight: bold; font-size: 14.5px; } .bauschleife-item .bau-zeit { color: #e0c060; font-size: 13.5px; } .bauschleife-item.wartend .bau-zeit { color: #7a8aa0; } .bauschleife-item .bau-abbrechen { width: auto; background: #7a2d2d; padding: 6px 12px; font-size: 13px; flex-shrink: 0; } .bauschleife-item .bau-abbrechen:hover { background: #963a3a; } /* --- Formulare (Nachrichten-Compose etc.) --- */ input[type="text"], textarea { width: 100%; background: #0d1320; border: 1px solid #263042; border-radius: 6px; color: #eaeaf0; padding: 10px 12px; font-family: inherit; font-size: 14.5px; margin-bottom: 10px; resize: vertical; } input[type="text"]:focus, textarea:focus { outline: none; border-color: #5fd0e8; } /* --- Nachrichten --- */ .nachricht-compose { background: rgba(21, 27, 40, 0.9); border: 1px solid #263042; border-radius: 8px; padding: 16px; margin: 15px 0 20px; max-width: 600px; } .nachricht-compose button { width: auto; padding: 8px 18px; } .nachrichten-liste { display: flex; flex-direction: column; gap: 10px; } .nachricht-item { background: rgba(21, 27, 40, 0.9); border: 1px solid #263042; border-radius: 8px; padding: 14px 16px; } .nachricht-item.ungelesen { border-color: #5fd0e8; } .nachricht-item.ungelesen .nachricht-betreff { color: #5fd0e8; } .nachricht-item.gelesen { opacity: 0.75; } .nachricht-item.offen { opacity: 1; border-color: #3d5570; } /* Aug 2026 v4.7: Der Kopf ist der Klickbereich zum Auf-/Zuklappen. Der Pfeil links zeigt den Zustand, der Löschen-Button rechts stoppt das Event selbst. */ .nachricht-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; user-select: none; } .nachricht-pfeil { color: #6f7a8a; font-size: 13px; width: 12px; flex: 0 0 auto; } .nachricht-betreff { font-weight: bold; color: #eaeaf0; flex: 1 1 auto; } .nachricht-datum { color: #6f7a8a; font-size: 13px; white-space: nowrap; } .nachricht-koerper { margin-top: 10px; border-top: 1px solid #263042; padding-top: 10px; } .nachricht-absender { color: #7a8aa0; font-size: 13px; margin: 0 0 8px; } .nachricht-inhalt { color: #c0c0cc; font-size: 14.5px; line-height: 1.5; } /* --- Spionagebericht (Aug 2026 v4.7, User-Vorgabe) ------------------------------------- Aufbau: Kopf, dann je ein Block für Gebäude / Schiffe / Verteidigung / Rohstoffe. Die Rohstoffmenge steht in normaler Schrift, die erbeutbare Menge dahinter in Grün. (Der Wunsch war "in schwarz" - auf dem dunklen Hintergrund des Spiels ist die normale helle Schriftfarbe das Gegenstück dazu, schwarz wäre schlicht unlesbar.) */ .spio-bericht { font-size: 14px; } .spio-kopf { color: #eaeaf0; font-weight: bold; margin-bottom: 4px; } .spio-meta { color: #7a8aa0; font-weight: normal; font-size: 13px; } .spio-planet { color: #5fd0e8; margin-bottom: 10px; font-size: 14px; } .spio-block { margin-bottom: 14px; } .spio-block h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #7a8aa0; border-bottom: 1px solid #263042; padding-bottom: 4px; } .spio-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: #c0c0cc; } .spio-zeile:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .spio-wert { color: #eaeaf0; font-variant-numeric: tabular-nums; white-space: nowrap; } .spio-wert.spio-null { color: #55607a; } /* nicht gebaute Gebäude: 0, dezent */ .spio-beute { color: #4ade80; } /* erbeutbare Menge - grün */ .spio-leer { color: #7a8aa0; font-style: italic; margin: 2px 0; } .spio-hinweis { color: #6f7a8a; font-size: 12.5px; margin: 6px 0 0; } /* --- Nav-Badge (z.B. ungelesene Nachrichten) --- */ .nav-badge { display: none; background: #5fd0e8; color: #0a0e14; font-weight: bold; font-size: 12px; border-radius: 10px; padding: 1px 7px; margin-left: 8px; } /* --- Modal --- */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; align-items: center; justify-content: center; } .modal-overlay.active { display: flex; } .modal-box { background: #10151f; border: 1px solid #263042; border-radius: 10px; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #263042; } .modal-header h2 { color: #5fd0e8; font-size: 18px; } .modal-close { cursor: pointer; color: #888; font-size: 19px; } .modal-close:hover { color: #fff; } .modal-body { padding: 16px 20px; } .modal-footer { padding: 0 20px 16px; } .modal-footer button { background: #2d6f8f; } .scan-planet-3d { display: flex; justify-content: center; margin-bottom: 14px; } /* .truemmerfeld-koord / .truemmerfeld-box / .owner-box: seit v10.1 nicht mehr benutzt - das Planetenfenster ist auf die V2-Fassung darunter (.pf-*) umgestellt. Die Regeln bleiben vorerst stehen, damit ein spaeterer Ruecksprung nichts nachbauen muss; sie greifen auf keinem Element mehr. */ .truemmerfeld-koord { color: #7fdcf0; font-size: 14px; margin-bottom: 12px; opacity: 0.85; } .truemmerfeld-box { background: rgba(255, 100, 80, 0.06); border: 1px solid rgba(255, 100, 80, 0.25); border-radius: 8px; padding: 12px 14px; } .truemmerfeld-box h3 { color: #ff9a80; font-size: 15px; margin: 0 0 8px; letter-spacing: 0.4px; } /* --- Planetenfenster V2 (v10.1) ------------------------------------------------------ Zwei Spalten: links die sich drehende Kugel mit dem Beziehungsband darunter, rechts die Zahlen. Das Band laeuft ueber die volle Breite der linken Spalte - es ist der schnellste Weg zu erkennen, ob der Planet einem selbst gehoert, jemand anderem, oder niemandem. */ .pf-gitter { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; } .pf-links { text-align: center; } .pf-kugel { display: block; margin: 0 auto; width: 150px; height: 150px; } .pf-band { margin-top: 8px; padding: 5px 0; border-radius: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; } .pf-band.eigen { background: rgba(110, 224, 121, 0.13); color: #8ee69a; } .pf-band.fremd { background: rgba(255, 110, 110, 0.12); color: #ff9a9a; } .pf-band.leer { background: rgba(140, 170, 210, 0.12); color: #a8bcd8; } .pf-feld { background: rgba(255, 255, 255, 0.028); border: 1px solid #232c3d; border-radius: 7px; padding: 10px 13px; } .pf-feld.warm { border-color: rgba(255, 140, 80, 0.28); background: rgba(255, 140, 80, 0.05); } .pf-feld .k { font-size: 11px; color: #6c7386; letter-spacing: 0.6px; text-transform: uppercase; } .pf-feld .v { font-size: 15px; color: #eaeaf0; font-weight: 600; margin-top: 3px; } .pf-feld .v small { font-size: 12px; color: #8f97a8; font-weight: 400; } .pf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } /* Allianz: im Datenmodell noch nicht vorhanden, der Platz steht aber schon. Vorgesehen sind drei Faelle - eigene Allianz gruen, fremde rot, keine grau. */ .pf-allianz { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 4px; margin-left: 2px; vertical-align: 1px; } .pf-allianz.eigen { background: rgba(110, 224, 121, 0.16); color: #8ee69a; border: 1px solid rgba(110, 224, 121, 0.34); } .pf-allianz.fremd { background: rgba(255, 110, 110, 0.14); color: #ff9a9a; border: 1px solid rgba(255, 110, 110, 0.34); } .pf-allianz-name { font-size: 12px; color: #8f97a8; font-weight: 400; margin-left: 5px; } .pf-ohne { font-size: 12px; color: #6c7386; font-weight: 400; margin-left: 4px; } /* --- v10.2: Merkliste ueber dem Flottenformular ------------------------------------- */ .merkliste-kasten { background: rgba(11, 15, 23, 0.7); border: 1px solid #1c2532; border-radius: 9px; padding: 10px 12px 6px; margin-bottom: 14px; } .ml-kopf { font-size: 13.5px; font-weight: 700; color: #eaeaf0; margin-bottom: 7px; } .ml-kopf span { font-weight: 400; font-size: 12px; color: #6c7386; margin-left: 8px; } .ml-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; } .ml-tabelle td { padding: 6px 8px; border-bottom: 1px solid #1a2230; } .ml-tabelle tr { cursor: pointer; } .ml-tabelle tr:hover td { background: rgba(95, 208, 232, 0.06); } .ml-tabelle tr:last-child td { border-bottom: none; } .ml-koord { font-family: "Consolas", "Courier New", monospace; color: #8ee0f5; } .ml-owner { color: #a8b0c0; } .ml-notiz { color: #6c7386; font-size: 12.5px; } /* --- v10.2: Wissen (B) und Merken (C) im Planetenfenster ---------------------------- */ .pf-rang { display: inline-block; background: rgba(240, 200, 80, 0.14); color: #f0c850; border: 1px solid rgba(240, 200, 80, 0.3); border-radius: 4px; font-size: 11px; font-weight: 800; padding: 1px 6px; margin-right: 4px; vertical-align: 1px; } .pf-grau { color: #6c7386; font-weight: 400; font-size: 13.5px; } .pf-minik { background: rgba(95, 208, 232, 0.12); border: 1px solid #2d6f8f; color: #7fdcf0; border-radius: 4px; font-size: 11.5px; padding: 2px 8px; margin-left: 8px; cursor: pointer; font-family: inherit; vertical-align: 1px; } /* Notiz und Markierung stehen in EINEM Feld: die Farbpunkte sitzen in der Kopfzeile. Zwei getrennte Kaesten waeren am Telefon rund 115 px mehr - genau daran haette es gescheitert (siehe Groessenvergleich zur Sichtkante von 780 px). */ .pf-kzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pf-marker { display: flex; align-items: center; gap: 6px; } .pf-pkt { width: 15px; height: 15px; border-radius: 50%; display: inline-block; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.14); transition: box-shadow 0.1s; } .pf-pkt.rot { background: #d8463c; } .pf-pkt.gelb { background: #e8b53c; } .pf-pkt.gruen { background: #4fb765; } .pf-pkt.blau { background: #4b8fd8; } .pf-pkt.keine { background: transparent; border: 1px dashed #47526a; } .pf-pkt.aktiv { box-shadow: 0 0 0 2px #10151f, 0 0 0 3px #7fdcf0; } .pf-markertext { font-size: 11.5px; color: #8f97a8; margin-left: 3px; } .pf-notiz { width: 100%; margin-top: 6px; background: rgba(0, 0, 0, 0.25); border: 1px dashed #2a3446; border-radius: 5px; padding: 7px 9px; color: #c7ceda; font-family: inherit; font-size: 13px; line-height: 1.45; resize: vertical; } .pf-notiz:focus { outline: none; border-color: #2d6f8f; border-style: solid; } .pf-notiz::placeholder { color: #565f74; } /* Knopfreihe (A). Sie steht zweimal im DOM: einmal im Fuss (PC) und einmal direkt unter dem Band (.pf-knoepfe-oben, Telefon). Immer nur eine der beiden ist sichtbar. */ .pf-kr { display: grid; gap: 8px; } .pf-kr.zwei { grid-template-columns: 1fr 1fr; } .pf-kr.drei { grid-template-columns: 1fr 1fr 1fr; } .pf-kr.vier { grid-template-columns: 1fr 1fr 1fr 1fr; } .pf-kr .knopf { display: block; width: 100%; background: #2d6f8f; color: #eaeaf0; border: none; border-radius: 5px; padding: 11px 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .pf-kr .knopf.zweit { background: transparent; border: 1px solid #2d6f8f; color: #7fdcf0; } .pf-kr .knopf.gefahr { background: transparent; border: 1px solid #7a3340; color: #ff9a9a; } .pf-kr .knopf.flach { background: transparent; border: 1px solid #2a3446; color: #93a0b5; font-weight: 500; font-size: 12.5px; padding: 8px 10px; } .pf-knoepfe-oben { display: none; } .pf-truemmer { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; } .pf-tf-paar { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #eaeaf0; font-weight: 600; font-family: "Consolas", "Courier New", monospace; } .pf-tf-leer { font-size: 12.5px; color: #6c7386; margin-top: 7px; line-height: 1.45; } /* Einladungscodes-Liste im Modal (Codes müssen einzeln kopierbar sein, Aug 2026) */ .codes-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(95, 208, 232, 0.15); border-radius: 6px; margin-bottom: 6px; background: rgba(95, 208, 232, 0.04); } .codes-sym { font-size: 15px; } .codes-text { flex: 1; font-family: "Consolas", "Courier New", monospace; font-size: 15px; color: #f0f0f5; user-select: all; cursor: text; padding: 2px 4px; background: rgba(0,0,0,0.25); border-radius: 3px; } .codes-status { font-size: 12px; color: #a8b0c0; } .codes-copy-btn { padding: 4px 10px; background: rgba(95, 208, 232, 0.12); border: 1px solid #5fd0e8; border-radius: 4px; color: #7fdcf0; font-size: 13px; cursor: pointer; } .codes-copy-btn:hover { background: rgba(95, 208, 232, 0.22); } .codes-copy-btn.copied { background: rgba(110, 224, 121, 0.2); border-color: #6ee079; color: #6ee079; } .codes-legende { color: #808898; font-size: 12px; margin-top: 12px; text-align: center; } /* Einstellungen (Aug 2026): Ingame-Name + Passwort + Account-Info */ .einstellungen-block { background: rgba(95, 208, 232, 0.04); border: 1px solid rgba(95, 208, 232, 0.15); border-radius: 8px; padding: 16px 20px; margin-bottom: 18px; } .einstellungen-block h2 { color: #7fdcf0; font-size: 17px; margin: 0 0 6px; } .einstellungen-zeile { display: flex; gap: 10px; margin-top: 10px; align-items: center; } .einstellungen-zeile input { flex: 1; padding: 8px 10px; background: #10161f; border: 1px solid #34495e; border-radius: 4px; color: #e0e0e5; font-size: 15px; } .einstellungen-zeile input:focus { outline: none; border-color: #5fd0e8; } .einstellungen-zeile button { width: auto; padding: 8px 14px; background: rgba(95, 208, 232, 0.12); border: 1px solid #5fd0e8; border-radius: 4px; color: #7fdcf0; font-size: 14px; cursor: pointer; } .einstellungen-zeile button:hover { background: rgba(95, 208, 232, 0.22); } /* Aug 2026 v6.0 (User-Vorgabe): "Mach das Element, wo ich den neuen Namen eingebe, gross und Speichern klein." Vorher teilten sich beide die Zeile - der Knopf war breiter als das Eingabefeld. Jetzt bekommt das Feld allen Platz, der Knopf nur seine Textbreite. */ /* v6.2-FIX: Warum das Eingabefeld winzig und der Knopf riesig war - ganz oben in dieser Datei steht `button { width: 100%; }` fuer die Bau-Knoepfe. In einer Flex-Zeile bekommt der Knopf dadurch flex-basis auto = 100 % der Zeile und draengt das Feld auf ein paar Pixel zusammen. `flex: 0 0 auto` allein hilft NICHT, weil flex-basis auto genau diese 100 % weiterreicht - die Breite muss ausdruecklich zurueckgesetzt werden. Genau das fehlte. */ .einstellungen-zeile-breit input { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 11px 12px; margin-bottom: 0; } .einstellungen-zeile .btn-klein, .btn-klein { flex: 0 0 auto; width: auto; /* <- hebt button { width: 100% } auf */ padding: 6px 12px; font-size: 13.5px; background: rgba(95, 208, 232, 0.12); border: 1px solid #5fd0e8; border-radius: 4px; color: #7fdcf0; cursor: pointer; } .btn-klein:hover:not(:disabled) { background: rgba(95, 208, 232, 0.22); } .btn-klein:disabled { opacity: .35; cursor: default; } .einstellungen-hinweis { color: #7a8aa0; font-size: 13px; margin: 6px 0 0; } .einstellungen-hinweis code { color: #e8eef7; } /* Pluender-Prioritaeten: eine Zeile je Rohstoff, mit Pfeilen zum Umsortieren. */ .pluender-prio-liste { margin-top: 10px; } .pluender-prio-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin-top: 5px; background: rgba(15, 22, 35, 0.6); border: 1px solid #26303f; border-radius: 5px; } .pluender-prio-name { flex: 1; display: flex; align-items: center; gap: 8px; color: #e8eef7; font-weight: 600; } /* v6.2: Auswahlfeld 1-5 je Rohstoff. */ .pluender-prio-wahl { display: flex; align-items: center; gap: 7px; color: #a8b0c0; font-size: 13.5px; flex: 0 0 auto; } .pluender-prio-wahl select { background: #10161f; border: 1px solid #34495e; border-radius: 4px; color: #e8eef7; padding: 5px 8px; font-size: 14px; font-weight: 700; min-width: 56px; } .pluender-prio-wahl select:disabled { opacity: .45; } .pluender-prio-zeile.pluender-inaktiv { opacity: .55; } .einstellungen-status { margin-top: 8px; font-size: 14px; min-height: 18px; } .einstellungen-status.ok { color: #6ee079; } .einstellungen-status.fehler { color: #ff7a7a; } .einstellungen-info-liste { margin-top: 8px; } .einstellungen-info-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; color: #c0c8d5; border-bottom: 1px solid rgba(95, 208, 232, 0.08); } .einstellungen-info-zeile code { color: #f0f0f5; font-family: "Consolas", "Courier New", monospace; } /* Planet-Name klickbar (Aug 2026): Cursor + Hover-Andeutung */ .planet-name-klickbar { cursor: pointer; transition: color 0.15s; } .planet-name-klickbar:hover { color: #7fdcf0 !important; } .planet-name-klickbar:hover::after { content: " ✏️"; opacity: 0.6; font-size: 0.7em; vertical-align: middle; } /* Aug 2026 v3.6: Spielername in Klammern hinter dem Planetennamen ("Heimatwelt (Thor)"), ersetzt den früheren Topbar-User-Chip. Dezenter gefärbt, damit klar wird das ist Meta-Info. */ .planet-name-spieler { color: #7fa8c0; font-size: 0.72em; font-weight: 400; margin-left: 6px; letter-spacing: 0.3px; } /* Übersicht: Live-Countdown-Zeilen (Aug 2026 v3.6 User-Vorgabe 3-Spalten: LINKS = Zeit (Countdown) | MITTE = Was passiert (Label) | RECHTS = Planetenkoordinate. */ /* Aug 2026 v6.1 (User-Vorgabe): "Mach mir die Schrift in der Uebersicht groesser und dicker fuer die laufenden Befehle und Ausbauten, ausserdem ruecke die Spalten etwas enger zueinander." Zeit-Spalte schmaler (90 -> 78 px), Abstand 12 -> 7 px, Schrift 14 px/600. */ /* Aug 2026 v6.2 (User-Vorgabe): "Mach die 3 Spalten so, dass da nicht so viel Platz zwischen den Eintraegen ist - oder zumindest die mittlere Spalte zentriert." Beides: die Zeit-Spalte wird nur so breit wie noetig (max-content statt fester 78 px), die mittlere Spalte ist jetzt zentriert, und der Abstand sinkt von 7 auf 4 px. */ /* ===================================================================================== Aug 2026 v7.6 (User-Vorgabe): die drei Spalten der Uebersicht bekommen feste Breiten, abgeleitet aus dem laengsten Inhalt, der real vorkommt - dazwischen genau drei Leerzeichen. Sonst kein Platz, die Zeile rueckt zusammen. Im Browser mit der echten Schrift nachgemessen (siehe messung_spaltenbreiten.py): links "10T 23:10:10" -> 124,8 px (Consolas, Countdown) mitte "Erweiterte Chemiefabrik von 1000->1001" -> 287,2 px rechts "XX:YY:ZZZ" -> 68,4 px rechts "XXX:YYY:ZZZ" (groesstmoegliche Koord.) -> 85,1 px drei Leerzeichen -> 12,5 px Aufgerundet also 125 / 288 / 86 px mit 13 px Abstand. Die rechte Spalte ist bewusst auf die GROESSTMOEGLICHE Koordinate ausgelegt und nicht auf das Beispiel XX:YY:ZZZ - der Unterschied sind 17 px, aber sonst wuerde jede dreistellige Galaxie abgeschnitten. VORSICHT bei kuenftigen Schriftaenderungen: diese Zahlen gelten fuer 15 px. Beim ersten Anlauf von v7.6 standen hier noch die mit 14 px gemessenen 270 px - die mittlere Spalte ist damit prompt auf zwei Zeilen umgebrochen. Also nach jeder Groessenaenderung messung_spaltenbreiten.py neu laufen lassen. justify-content: start haelt den Block links zusammen - ohne das wuerde das Raster den restlichen Platz der Inhaltsspalte verteilen und die Zeile waere wieder auseinandergezogen. Die mittlere Spalte darf UMBRECHEN. Flottenzeilen wie "Angriff · Schlachtschiff×40, Kreuzer×80" sind laenger als 288 px; ohne Umbruch wuerden sie die Spaltenflucht sprengen oder abgeschnitten. Zwei Zeilen sind haesslicher als eine, aber besser als fehlender Text. ===================================================================================== */ /* v7.9 (User-Vorgabe): Die rechte Spalte darf jetzt auch einen PLANETENNAMEN enthalten, wenn man in den Einstellungen "Name" gewaehlt hat. 86 px reichen fuer eine Koordinate, aber nicht fuer "Vorposten Alpha" - der Name waere abgeschnitten worden. minmax(86px, max-content) loest beides: bei Koordinaten bleibt die Spalte exakt so schmal wie bisher (die Vorgabe aus v7.6 "es rueckt zusammen" gilt unveraendert), und nur wenn ein laengerer Name drinsteht, waechst sie so weit wie noetig - nicht weiter. */ .uebersicht-zeile, .uebersicht-flotte { display: grid; grid-template-columns: 125px 288px minmax(192px, max-content); justify-content: start; gap: 4px 13px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid rgba(95, 208, 232, 0.08); } /* Flottenzeilen zeigen rechts nicht EINE Koordinate, sondern "Start ➤ Ziel" - gemessen 191,5 px. Mit den 86 px der normalen Zeilen waere die Zielkoordinate abgeschnitten, und ausgerechnet die ist bei einem anfliegenden Angriff die wichtigste Zahl der ganzen Zeile. */ /* v8.2 (User-Vorgabe 1): "Bei Flottenbewegungen fangen die Spalten unterschiedlich an, das sieht nicht gut aus - jeder Start muss gleich sein." Ursache waren ZWEI Dinge auf einmal: a) Flottenzeilen hatten eine breitere dritte Spalte (fuer "Start ➤ Ziel"). Weil der Block zentriert ist, wurde die ganze Zeile dadurch nach LINKS verschoben - gemessen 47 px gegenueber den uebrigen Zeilen. b) Die Farbklassen (.flotte-farbe-*) bringen 3 px Rand + 8 px Polster mit, normale Zeilen nicht - macht weitere 11 px Versatz. Loesung: ALLE Zeilen bekommen dasselbe Raster (die breite dritte Spalte gilt jetzt ueberall; bei kurzen Koordinaten bleibt sie eben rechts leer) und denselben linken Rand, der nur seine Farbe wechselt. */ .uebersicht-zeile, .uebersicht-flotte { border-left: 3px solid transparent; padding-left: 8px; } /* ===================================================================================== Aug 2026 v7.9 (User-Vorgabe) - Flottenbewegungen: Schiffe erst beim Nachsehen In der Zeile steht nur der Befehl. Die Schiffsliste klappt am PC beim Darueberfahren auf (:hover) und am Handy beim Antippen (
- dort gibt es kein :hover). ===================================================================================== */ .fb-details { display: inline-block; position: relative; } .fb-summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; } .fb-summary::-webkit-details-marker { display: none; } /* das graue Standard-Dreieck weg */ .fb-lupe { font-size: 11px; opacity: .55; } .fb-details[open] .fb-lupe { transform: rotate(180deg); } /* Das Feld schwebt UEBER der Zeile, statt sie auseinanderzuschieben - sonst wuerde beim Hovern die ganze Liste darunter springen. */ .fb-schiffe { position: absolute; z-index: 40; left: 0; top: 100%; margin-top: 4px; min-width: 210px; max-width: 320px; background: rgba(13, 19, 32, 0.98); border: 1px solid rgba(95, 208, 232, 0.45); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); padding: 8px 10px; display: none; } .fb-details[open] .fb-schiffe { display: block; } /* Am PC reicht das Darueberfahren - ohne Klick, wie ausdruecklich gewuenscht. pointer: fine schliesst Touchgeraete aus, wo :hover haengenbleiben wuerde. */ @media (pointer: fine) { .fb-details:hover .fb-schiffe { display: block; } } .fb-schiffe-kopf { color: #5fd0e8; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid rgba(95, 208, 232, .2); padding-bottom: 4px; margin-bottom: 5px; } .fb-schiff { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; } .fb-schiff-name { color: #d8dce8; } .fb-schiff-anzahl { color: #f0f0f5; font-weight: 700; font-variant-numeric: tabular-nums; } /* ===================================================================================== Aug 2026 v7.9 (User-Vorgabe) - Farmflotten Liste in den Einstellungen + Popup zum Anlegen/Bearbeiten. ===================================================================================== */ .farm-liste { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; } .farm-eintrag { background: rgba(20, 26, 36, 0.85); border: 1px solid #26303f; border-left: 4px solid #7fe89a; border-radius: 6px; padding: 10px 12px; } .farm-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .farm-name { color: #f0f0f5; font-size: 16px; font-weight: 700; } .farm-gesamt { color: #8b96a8; font-size: 13px; } .farm-inhalt { color: #b9c2d4; font-size: 14px; margin: 5px 0 8px; line-height: 1.4; } .farm-knoepfe { display: flex; gap: 8px; } .farm-knoepfe .btn-klein { width: auto; } .farm-loeschen { color: #ff9a9a; border-color: rgba(255, 122, 122, .4); } .farm-popup { font-size: 15px; } .farm-popup #farm-name { flex: 1; min-width: 0; } /* Alle Schiffe des Spiels stehen hier drin - das sind je nach Ausbaustand ueber 20 Zeilen. Deshalb ein eigener Rollbereich, damit der Speichern-Knopf immer erreichbar bleibt und man nicht erst durch die ganze Liste scrollen muss. */ .farm-zeilen { max-height: 46vh; overflow-y: auto; border: 1px solid #26303f; border-radius: 6px; padding: 6px 10px; margin: 12px 0; } .farm-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(95, 208, 232, 0.07); } .farm-zeile:last-child { border-bottom: none; } .farm-zeile-name { color: #d8dce8; font-size: 14.5px; } .farm-zeile .ast-input { width: 90px; flex: 0 0 90px; } .uebersicht-zeile:last-child, .uebersicht-flotte:last-child { border-bottom: none; } /* Aug 2026 v6.6 (User-Vorgabe): "Die zweite Spalte ist dicker geschrieben als die linke und rechte. Mach bitte, dass alle 3 Zeilen so gross und dick geschrieben sind wie die mittlere. Mach auch, dass diese Schriftgroesse/-dicke fuer das Menue links verwendet wird." Vorher hatte jede der drei Spalten ihren eigenen Wert (14/13/14 px bei 700/600/700) - die mittlere stach dadurch hervor. Jetzt gibt es genau ZWEI Variablen, aus denen sich alle drei Spalten UND die Menueleiste bedienen. Wer die Groesse aendern will, aendert sie hier einmal - und nicht an fuenf Stellen, die dann wieder auseinanderlaufen. */ :root { --uebersicht-schrift: 15px; --uebersicht-staerke: 700; } /* v7.6: +1 px */ /* v8.2 (User-Vorgabe 1.1): "Es sieht nicht gut aus, wenn in der mittleren Spalte etwas mittig startet - alles linksbuendig, aber eben so mittig in der Zeile." Also: der BLOCK aus drei Spalten sitzt mittig in der Zeile (justify-content: center), der Text INNERHALB jeder Spalte beginnt aber links. Vorher war der mittlere Text zentriert - dadurch fing jede Zeile an einer anderen Stelle an, je nachdem wie lang der Gebaeudename war. */ .uebersicht-label { color: #e8eef7; font-weight: var(--uebersicht-staerke); font-size: var(--uebersicht-schrift); text-align: left; /* darf umbrechen - siehe Kommentar bei .uebersicht-zeile */ white-space: normal; overflow-wrap: anywhere; } /* v7.6: Die rechte Spalte ist auf die Koordinate bemessen (User-Vorgabe "normale Koordinaten XX:YY:ZZZ"). Dahinter steht aber weiterhin " · Planetenname" - der passt nicht mehr hinein und wird abgeschnitten. Damit nichts verloren geht, steht der volle Text im title-Attribut (Mouseover), gesetzt in renderUebersicht(). */ /* v8.2 (User-Vorgabe 1.2): "Gleiches fuer den Planeten - linksbuendig und nicht rechtsbuendig." */ .uebersicht-planet { color: #b4c0d0; font-size: var(--uebersicht-schrift); font-weight: var(--uebersicht-staerke); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Aug 2026 v6.8 (User-Vorgabe): "Die Zeit, die runterlaeuft, ist mir etwas zu klein und zu schlecht sichtbar - mach hier einen besseren Kontrast und die Zahl so gross wie die mittlere Spalte." Auf dem Papier war sie schon gleich gross: alle drei Spalten stehen seit v6.6 auf --uebersicht-schrift. Nur SIEHT eine Consolas-Ziffer bei gleicher Punktzahl deutlich kleiner aus als Segoe-UI-Text - Schreibmaschinenschriften haben eine kleinere Versalhoehe und mehr Weissraum um die Zeichen. Dazu kam ein negativer Zeichenabstand, der sie noch enger gedrueckt hat. Beides ist behoben: * +2 px gleichen den optischen Unterschied zur Mittelspalte aus, * der negative Zeichenabstand ist raus (jetzt leicht positiv - Ziffern brauchen Luft), * helleres Cyan statt #7fdcf0, plus dunkler Schlagschatten fuer den Kontrast auf dem teils sehr hellen Planetenhintergrund. font-variant-numeric: tabular-nums haelt die Breite beim Runterzaehlen konstant, sonst zappelt die Zeile jede Sekunde. */ .uebersicht-countdown { color: #a8ecff; font-family: "Consolas", "Courier New", monospace; font-weight: 800; /* v8.1: Eine Uhrzeit darf NIE umbrechen. Die Spalte ist exakt auf "10T 23:10:10" ausgemessen - fehlte hier ein Pixel, rutschte die Sekundenangabe in eine zweite Zeile und die ganze Liste wurde doppelt so hoch. Genau das ist beim ersten Anlauf passiert. */ white-space: nowrap; font-size: calc(var(--uebersicht-schrift) + 2px); text-align: left; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 8px rgba(95,208,232,0.35); } .uebersicht-countdown.countdown-fertig { color: #6ee079; } /* Flottenbewegungs-Farben (rot/grün/gelb per User-Vorgabe Aug 2026) */ /* v8.2: nur noch die FARBE des Randes - Breite und Polster stehen jetzt bei allen Zeilen gemeinsam (siehe oben), damit nichts mehr verspringt. */ .flotte-farbe-rot { background: rgba(255, 90, 90, 0.08); border-left-color: #ff5a5a; } .flotte-farbe-rot .uebersicht-label { color: #ff9a9a; } .flotte-farbe-gelb { background: rgba(240, 200, 80, 0.06); border-left-color: #f0c850; } .flotte-farbe-gelb .uebersicht-label { color: #f5dc90; } .flotte-farbe-gruen { background: rgba(110, 224, 121, 0.06); border-left-color: #6ee079; } .flotte-farbe-gruen .uebersicht-label { color: #98e6a4; } .flotte-farbe-neutral { border-left-color: transparent; } /* ===================================================================================== Aug 2026 v6.1 (User-Vorgabe): "Kannst du bei der MOBILEN Version (nur dort) die Menueleiste veraendern? Ich haette da gerne, dass du die Schrift dicker und kraeftiger machst." WICHTIG - warum hier KEINE Breiten-Abfrage steht: Die Seite laeuft auf dem Handy mit einem festen Layout-Viewport von 1280 px (siehe in templates/index.html). Die CSS-Breite ist dort also IMMER 1280 - eine Regel wie @media (max-width: 900px) wuerde am Telefon nie greifen. `pointer: coarse` trifft stattdessen genau das, was gemeint ist: Geraete, die mit dem Finger bedient werden. Am PC mit Maus aendert sich dadurch nichts. ===================================================================================== */ @media (pointer: coarse) { /* v6.6 (User-Vorgabe zu Punkt 4): "Wir brauchen den Platz oben, dass die Schrift fuers Handy etwas groesser wird." Der Planet-Umschalter ist aus der Kopfleiste raus - dieser Platz geht hier in die Schrift. EINE Variable hebt Menue UND alle drei Uebersichts- spalten gemeinsam an; dass sie gleich stark bleiben, kann dabei nicht mehr verloren gehen (frueher standen hier drei getrennte font-size-Zeilen, die genau das kaputt gemacht haben, was Punkt 2 verlangt). */ :root { --uebersicht-schrift: 18px; --uebersicht-staerke: 800; } /* v7.6: +1 px */ .nav-item { letter-spacing: 0.2px; color: #dde5ef; /* heller als am PC - besser lesbar auf hellem Umfeld */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); padding: 11px 12px; } .nav-item.active { color: #9fe4f5; } .nav-item.disabled { color: #8a919b; } .nav-subitem { font-weight: 700; font-size: 16px; } .summary-block h3 { font-size: 21px; } } /* ===================================================================================== Aug 2026 v6.1 - Info-Fenster fuer Schiffe und Verteidigungsanlagen ===================================================================================== */ .ew-fenster { font-size: 14px; } .ew-beschreibung { color: #c0c8d5; margin: 0 0 14px; line-height: 1.5; } .ew-ueberschrift { color: #7fdcf0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #2f3c50; } .ew-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; } .ew-tabelle th, .ew-tabelle td { padding: 6px 8px; border-bottom: 1px solid #1e2838; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ew-tabelle thead th { color: #7fdcf0; font-size: 12px; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid #2f3c50; } .ew-tabelle th.ew-zeilenkopf { text-align: left; color: #a8b0c0; font-weight: 600; } .ew-tabelle tr.ew-aktuell td { color: #e8eef7; font-weight: 700; } .ew-tabelle tr.ew-effektiv td, .ew-tabelle tr.ew-effektiv th { color: #6a7280; font-style: italic; } .ew-tabelle tr.ew-prozent td { font-size: 12.5px; } .ew-gut { color: #7fe89a; } .ew-schlecht { color: #ff7a7a; } .ew-neutral { color: #6a7080; } .ew-hinweis { color: #7a8aa0; font-size: 12.5px; margin: 6px 0 0; line-height: 1.45; } .ew-bonus-zeile { display: flex; gap: 10px; align-items: baseline; margin-top: 7px; flex-wrap: wrap; } .ew-bonus-label { color: #a8b0c0; font-weight: 600; min-width: 118px; flex: 0 0 auto; } .ew-bonus-chips { display: flex; gap: 5px; flex-wrap: wrap; } .ew-bonus { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border-radius: 4px; font-size: 13px; background: rgba(15, 22, 35, 0.7); border: 1px solid #26303f; color: #8d97a6; } .ew-bonus b { color: #c0c8d5; font-variant-numeric: tabular-nums; } .ew-bonus-aktiv { border-color: rgba(110, 224, 121, 0.4); color: #cfe8d5; } .ew-bonus-aktiv b { color: #fff; } .ew-bonus-aktiv .ew-bonus-wert { color: #7fe89a; font-weight: 700; } .ew-bonus-wert { color: #6a7080; } .ew-verstaerkung { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 6px; } .ew-vor { color: #c0c8d5; margin: 4px 0 0; } .ew-fuss { margin-top: 18px; } /* ===================================================================================== Aug 2026 v6.7 - das (i)-Fenster der Rohstoffleiste User-Vorgabe: "Hier oeffnet sich ein Fenster, das dir die Minuten-, Stunden- und Tagesproduktion anzeigt, sowohl von Planeten als auch von Asteroiden (hier getrennt sowie Summe angezeigt, bedenke es koennen mehrere Asteroiden sein, Zuordnung braucht es hier!). Dann noch Speichergroesse und wann die jeweiligen Speicher voll laufen." Das Fenster ist der Gegenpol zur abgespeckten Leiste: oben nur noch, was man im Vorbeigehen braucht - hier alles, was man zum Nachrechnen braucht. Es baut bewusst auf demselben Tabellen-Look wie das Einheiten-Fenster auf (.ew-tabelle), damit die beiden Fenster nicht wie aus zwei verschiedenen Spielen aussehen. ===================================================================================== */ .ri-fenster { font-size: 14px; } .ri-ueberschrift { color: #7fdcf0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #2f3c50; } .ri-ueberschrift:first-child { margin-top: 0; } .ri-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; } .ri-tabelle th, .ri-tabelle td { padding: 6px 8px; border-bottom: 1px solid #1e2838; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ri-tabelle thead th { color: #7fdcf0; font-size: 14px; font-weight: 800; letter-spacing: 0.4px; border-bottom: 1px solid #2f3c50; } /* Dieselbe tiefgestellte 2 wie in der Leiste - die Spaltenkoepfe sind ja dieselben chemischen Symbole. */ .ri-tabelle thead th sub { font-size: 0.68em; vertical-align: baseline; position: relative; bottom: -0.22em; } .ri-tabelle th.ri-zeilenkopf { text-align: left; color: #a8b0c0; font-weight: 600; } .ri-tabelle tr:last-child th, .ri-tabelle tr:last-child td { border-bottom: none; } /* Die Stundenzahl ist die Leitzahl, Minute und Tag stehen kleiner darunter. Alles gleich gross zu setzen haette die Zelle zu einem Zahlenklumpen gemacht. */ .ri-pro-h { font-size: 15px; font-weight: 700; color: #e8eef7; } .ri-neben { font-size: 12px; color: #8d97a6; line-height: 1.35; } .ri-einheit { color: #6a7080; font-size: 0.82em; margin-left: 2px; font-weight: 400; } /* Asteroidenzeile violett - dieselbe Bedeutung wie bisher in der Leiste: das kommt NICHT von den Minen des Planeten. Die Farbe ist aus der Leiste hierher gewandert. */ .ri-tabelle tr.ri-asteroid .ri-pro-h { color: #c79bff; } .ri-tabelle tr.ri-asteroid th.ri-zeilenkopf { color: #c79bff; } .ri-tabelle tr.ri-summe th, .ri-tabelle tr.ri-summe td { border-top: 1px solid #2f3c50; background: rgba(95, 208, 232, 0.05); } .ri-tabelle tr.ri-summe .ri-pro-h { color: #fff; font-weight: 800; } .ri-tabelle tr.ri-summe th.ri-zeilenkopf { color: #e8eef7; font-weight: 700; } .ri-koord { font-family: "Consolas", "Courier New", monospace; color: #7fdcf0 !important; letter-spacing: 0.5px; } .ri-stationen { color: #c0c8d5; } /* Asteroid ohne Abbaustationen: bleibt sichtbar, aber gedaempft. Ihn wegzulassen haette ausgesehen, als waere der Asteroid verloren gegangen. */ .ri-tabelle tr.ri-ast-leer th, .ri-tabelle tr.ri-ast-leer td { opacity: 0.45; } .ri-null { color: #4a5060; } .ri-nie { color: #6a7080; font-style: italic; } .ri-voll { color: #ff6b6b; font-weight: 700; } .ri-zeitpunkt { color: #6a7080; font-size: 12px; } .ri-hinweis { color: #7a8aa0; font-size: 12.5px; margin: 6px 0 0; line-height: 1.45; } /* Im Fenster gilt dieselbe Ampel wie in der Leiste - sonst haette derselbe Bestand oben eine andere Farbe als hier, und der Spieler muesste raten, welche stimmt. */ .ri-tabelle .res-fuell-gruen { color: #7fe89a; font-weight: 700; } .ri-tabelle .res-fuell-gelb { color: #f5d76e; font-weight: 700; } .ri-tabelle .res-fuell-rot { color: #ff6b6b; font-weight: 700; } /* ===================================================================================== Aug 2026 v8.5 (User-Vorgabe): "Du hast das i) in der Leiste angepackt aber nicht den Inhalt. Packe den noch an." Das Fenster bekommt denselben Farbcode wie die Leiste und die Baukosten - und zwar mit denselben Mitteln, damit es nicht wie eine dritte Handschrift wirkt: * SPALTENKOEPFE (Produktion, Asteroiden): farbiger Unterstrich + leichter Farbschleier nach unten. Die Spalte ist damit von oben bis unten als "die Lithium-Spalte" erkennbar, ohne dass die Zahlen darin eingefaerbt werden muessten. * ZEILENKOEPFE (Lager): Streifen links + Schleier nach rechts - exakt die Bauweise der Leistenkacheln, nur quer statt hochkant. * FUELLSTAND: derselbe Balken wie oben (.res-balken), damit "wie voll" hier und dort gleich aussieht. Die Kuerzel selbst bleiben in der Standard-Schriftfarbe (Vorgabe v6.8). Die Farbe traegt also auch hier ein Streifen und nicht der Text. ===================================================================================== */ .ri-tabelle thead th[data-res] { position: relative; border-bottom: 3px solid var(--res-farbe); background: linear-gradient(180deg, color-mix(in srgb, var(--res-farbe) 16%, transparent) 0%, transparent 100%); } /* Der Schleier laeuft in die erste Datenzeile hinein weiter - sonst endet die Spaltenfarbe abrupt am Kopf und die Spalte wirkt trotzdem nicht zusammengehoerig. */ .ri-tabelle tbody td[data-res] { background: linear-gradient(180deg, color-mix(in srgb, var(--res-farbe) 7%, transparent) 0%, transparent 70%); } .ri-tabelle tr[data-res] > th.ri-zeilenkopf { border-left: 4px solid var(--res-farbe); padding-left: 9px; background: linear-gradient(90deg, color-mix(in srgb, var(--res-farbe) 26%, transparent) 0%, color-mix(in srgb, var(--res-farbe) 10%, transparent) 60%, transparent 100%); } /* Der Fuellstandsbalken in der Lagertabelle. Er benutzt dieselben Klassen wie die Leiste (.res-balken + Zustand), deshalb steht hier nur, was in der Tabelle anders ist: feste Breite statt 100 %, und etwas Abstand zur Prozentzahl darueber. */ .ri-tabelle .res-balken { width: 92px; margin: 3px 0 0 auto; } .ri-fuell-zelle { text-align: right; } /* Aug 2026 v6.3: Hinweis, wenn der Server nicht antwortet. Liegt bewusst ueber allem und ist nicht zu uebersehen - waehrend der Stoerung sah der Spieler sonst nur leere Seiten und konnte nicht erkennen, woran es liegt. */ .server-hinweis { position: fixed; left: 50%; transform: translateX(-50%); top: 8px; z-index: 9999; max-width: 92vw; background: #4a2a12; border: 1px solid #d08a3a; border-radius: 6px; color: #ffd9a8; padding: 10px 16px; font-size: 14.5px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .server-hinweis b { color: #fff; } /* Nachrichten-Ordner-Tabs (Aug 2026 v2) */ .nachr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .nachr-tab { background: rgba(95, 208, 232, 0.06); border: 1px solid rgba(95, 208, 232, 0.2); color: #a8b0c0; padding: 6px 12px; border-radius: 4px; font-size: 14px; cursor: pointer; position: relative; width: auto; flex: 0 0 auto; white-space: nowrap; } .nachr-tab:hover { background: rgba(95, 208, 232, 0.14); color: #e0e0e5; } .nachr-tab.aktiv { background: rgba(95, 208, 232, 0.22); border-color: #5fd0e8; color: #7fdcf0; } .nachr-tab-badge { background: #ff5a5a; color: #fff; padding: 0 6px; border-radius: 10px; font-size: 11px; margin-left: 6px; font-weight: 700; } .nachricht-kat { color: #7fdcf0; font-weight: 600; } .nachricht-loeschen { background: transparent; border: 1px solid #6a3a3a; color: #ff9a80; padding: 2px 8px; border-radius: 4px; font-size: 13px; cursor: pointer; width: auto; margin-left: 8px; } .nachricht-loeschen:hover { background: rgba(255, 100, 80, 0.15); border-color: #ff5a5a; color: #ff5a5a; } /* Nachricht-senden Button im Spielerprofil */ .prof-msg-btn { padding: 8px 14px; background: rgba(95, 208, 232, 0.15); border: 1px solid #5fd0e8; border-radius: 4px; color: #7fdcf0; font-size: 14px; cursor: pointer; margin-bottom: 14px; } .prof-msg-btn:hover { background: rgba(95, 208, 232, 0.28); } /* Toggle-Zeile in Einstellungen (Checkbox-Reihen) */ .einstellungen-toggle-zeile { padding: 4px 0; } .einstellungen-toggle-zeile label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #c0c8d5; font-size: 15px; } .einstellungen-toggle-zeile input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } /* Planet-Koordinate in Schiffs-Bauschleife (Aug 2026 v3.2) */ .bau-info .bau-planet { color: #7fdcf0; font-size: 12px; margin: 2px 0 4px; opacity: 0.85; } /* --- Flottenformular --- */ .flotte-formular { display: flex; flex-direction: column; gap: 14px; max-width: 520px; background: rgba(21, 27, 40, 0.9); border: 1px solid #263042; border-radius: 8px; padding: 18px; } .flotte-formular-zeile { display: flex; flex-direction: column; gap: 6px; } .flotte-formular-zeile label { color: #a0a0b0; font-size: 14px; } .flotte-formular-zeile select, .flotte-formular-zeile input[type="number"] { background: #0d1320; border: 1px solid #263042; border-radius: 4px; color: #eaeaf0; padding: 8px 10px; font-size: 14px; } .flotte-schiff-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: #c8c8d5; } .flotte-schiff-zeile input { width: 90px; } .flotte-ressource-zeile { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 6px; } .flotte-ressource-zeile input { width: 110px; } .flotte-formular button { width: auto; align-self: flex-start; padding: 9px 18px; } .scan-planet-3d canvas { width: 120px; height: 120px; filter: drop-shadow(0 0 14px rgba(95, 208, 232, 0.25)); } /* Kleine Info-Zeile unter Start-/Ziel-Feld: Koordinate im "SS:SS:CCC"-Format + Planet-Typ. */ .flotte-koord-anzeige { font-size: 13px; color: #7fdcf0; padding: 4px 2px 0; letter-spacing: 0.5px; font-family: "Consolas", "Menlo", monospace; } .flotte-koord-anzeige.fehler { color: #ff8070; } /* Vorschau-Kasten: Reisezeit + Wasserstoff-Verbrauch, live berechnet vom Backend (/api/flotte/vorschau) sobald Ziel und mindestens 1 Schiff gesetzt sind. */ .flotte-vorschau { background: linear-gradient(180deg, rgba(30, 40, 60, 0.6), rgba(15, 22, 35, 0.6)); border: 1px solid #2f3c50; border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .flotte-vorschau .fv-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: #c8d0e0; } .flotte-vorschau .fv-label { color: #8a94a8; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; } .flotte-vorschau .fv-wert { color: #7fdcf0; font-weight: 600; font-family: "Consolas", "Menlo", monospace; } .flotte-vorschau .fv-wert.fv-warn { color: #ff9a80; } .flotte-vorschau .fv-nebentext { color: #6a7080; font-size: 12px; font-weight: normal; } .flotte-vorschau .fv-hinweis { color: #6a7080; font-size: 12px; padding-top: 4px; border-top: 1px dashed #2a3345; margin-top: 2px; } /* v7.9 (User-Vorgabe): Angriff / Verteidigung / Laderaum der gewaehlten Flotte. Sie stehen direkt ueber dem Sende-Knopf und sind bewusst deutlicher abgesetzt als Reisezeit und Verbrauch - das sind die Zahlen, nach denen man entscheidet, ob man wirklich losschickt. */ .flotte-vorschau .fv-kampfwert { padding-top: 3px; } .flotte-vorschau .fv-kampfwert:first-of-type { border-top: 1px dashed #2a3345; margin-top: 4px; padding-top: 7px; } .flotte-vorschau #fv-angriff { color: #ff9a80; } .flotte-vorschau #fv-verteidigung { color: #7fe89a; } .flotte-vorschau #fv-kapazitaet { color: #e2ce8f; } /* v8.0: Ladung gegen Laderaum. Passt es nicht, faerbt .fv-warn die Zeile rot. */ .flotte-vorschau #fv-ladung { color: #7fdcf0; } .preview-table { width: 100%; border-collapse: collapse; font-size: 14px; } .preview-table th, .preview-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #1e2838; } .preview-table th { color: #888; font-weight: normal; } .preview-table tr.current-level { background: #1a2130; color: #5fd0e8; } /* Techtree-Zusammenfassung (Item → Voraussetzungen) - ersetzt die frühere Karten-Liste und den Baum-Picker im "Techtree"-Menüreiter. Die gezeichneten Bäume selbst liegen weiterhin bei den Info-Modals der Gebäude/Forschungen/Schiffe/Verteidigung. */ .techtree-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; } .techtree-tabelle th, .techtree-tabelle td { padding: 6px 10px; border-bottom: 1px solid #1e2838; vertical-align: top; } .techtree-tabelle thead th { color: #7fdcf0; font-weight: 600; text-align: left; border-bottom: 1px solid #2f3c50; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .techtree-tabelle td.tt-tab-name { color: #e8eef7; font-weight: 500; white-space: nowrap; padding-right: 20px; } /* v5.0 (User-Vorgabe): Voraussetzungen bleiben EINE Zeile - auch auf dem Handy. Vorher brach die Spalte um und die Voraussetzungen standen untereinander, was das Format gegenueber dem PC veraendert hat. Jetzt wird stattdessen der ganze Inhalt skaliert. */ .techtree-tabelle td.tt-tab-req { color: #a8b0c0; white-space: nowrap; } .techtree-tabelle tbody tr:hover { background: rgba(95, 208, 232, 0.05); } /* ===================================================================================== Aug 2026 v5.9 (User-Vorgabe): "Mach bei den 4 Techtrees farbig gruen, wenn ich eine Bedingung erfuellt habe, und rot, wenn noch nicht - dann z.B. 10/15 in rot." Jede Voraussetzung ist ein eigenes Chip "Name eigene/benoetigt". Gruen = erfuellt, rot = fehlt noch. Die Namensspalte bekommt dieselbe Ampel, damit man auf einen Blick sieht, was ueberhaupt schon baubar ist. ===================================================================================== */ .tt-req { display: inline-block; padding: 2px 8px; margin: 1px 4px 1px 0; border-radius: 4px; font-size: 13px; border: 1px solid transparent; white-space: nowrap; } .tt-req b { font-variant-numeric: tabular-nums; font-weight: 800; } .tt-req-ok { color: #7fe89a; background: rgba(110, 224, 121, 0.10); border-color: rgba(110, 224, 121, 0.35); } .tt-req-offen { color: #ff7a7a; background: rgba(255, 90, 90, 0.10); border-color: rgba(255, 90, 90, 0.35); } /* Ampel auf der ganzen Zeile - dezent, damit die Tabelle lesbar bleibt. */ .techtree-tabelle tr.tt-zeile-ok td.tt-tab-name { color: #9fe8b0; border-left: 3px solid #4ade80; } .techtree-tabelle tr.tt-zeile-offen td.tt-tab-name { color: #ffb0b0; border-left: 3px solid #ff5a5a; } .techtree-tabelle tr.tt-zeile-ok td.tt-tab-name, .techtree-tabelle tr.tt-zeile-offen td.tt-tab-name { padding-left: 8px; } .tt-planet-hinweis { color: #7a8aa0; font-size: 12.5px; margin: 0 0 6px; font-style: italic; } .bar-chart-cell { display: flex; align-items: center; gap: 8px; } .bar-track { width: 90px; height: 10px; background: #1a2130; border-radius: 4px; overflow: hidden; flex-shrink: 0; } /* --- Info-Modal (Layout entsprechend User-Skizze: Bild | Techtree-Btn + Beschreibung | Fakten-Fuss) --- */ .modal-box-info { max-width: 780px; } .im-topgrid { display: grid; grid-template-columns: 180px 1fr; gap: 18px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #263042; } .im-bild-col .im-bild { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; border: 1px solid #2f3c50; background: #0d1320; } .im-bild-fallback { display: flex; align-items: center; justify-content: center; } .im-bild-fallback span { font-size: 69px; } .im-info-col { display: flex; flex-direction: column; gap: 12px; } .im-techtree-btn { align-self: flex-start; padding: 8px 14px; background: linear-gradient(180deg, #2a4468, #17273f); color: #7fdcf0; border: 1px solid #5fd0e8; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; } .im-techtree-btn:hover { background: linear-gradient(180deg, #3a5478, #24374f); box-shadow: 0 0 8px rgba(95, 208, 232, 0.4); } .im-beschreibung { color: #c8d0dc; font-size: 14px; line-height: 1.55; } .im-boni { color: #a8b0c0; font-size: 13px; padding-left: 20px; margin-top: 6px; } .im-boni li { margin: 2px 0; } /* --- Temporaerer Formel-Kasten im Info-Popup (Balance-Check, spaeter wieder raus) --- */ .im-formeln { margin-top: 10px; padding: 10px 12px; background: rgba(15, 22, 35, 0.5); border: 1px dashed #4a6890; border-radius: 6px; font-size: 12px; color: #a8b0c0; } .im-formeln-titel { color: #7fdcf0; font-weight: 600; margin-bottom: 6px; font-size: 13px; } .im-formeln-hinweis { color: #6a7080; font-weight: 400; font-size: 11px; font-style: italic; } .im-formeln ul { margin: 0; padding-left: 4px; list-style: none; } .im-formeln li { padding: 2px 0; font-family: "Consolas", "Courier New", monospace; font-size: 12px; color: #c8d0dc; line-height: 1.5; } .im-fakten { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr; gap: 10px; } .im-fakt { background: rgba(21, 27, 40, 0.7); border: 1px solid #263042; border-radius: 6px; padding: 10px 12px; } .im-fakt-breit { grid-column: span 1; } .im-fakt-label { color: #7a8494; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .im-fakt-wert { color: #e8eef7; font-size: 15px; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } /* --- Info-Modal: Tabelle der naechsten 10 Ausbaustufen --- */ .im-tabelle-titel { margin: 18px 0 8px; color: #7fdcf0; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; } .im-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; } .im-tabelle thead th { color: #7a8494; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; padding: 6px 8px; border-bottom: 1px solid #2f3c50; text-align: left; } .im-tabelle tbody td { padding: 6px 8px; border-bottom: 1px solid rgba(38, 48, 66, 0.5); color: #c8d0dc; vertical-align: middle; } .im-tabelle tbody tr:hover td { background: rgba(30, 44, 68, 0.4); } .im-tbl-lvl { width: 50px; color: #7fdcf0; font-weight: 700; font-family: "Consolas", monospace; } .im-tbl-wert { width: 45%; } .im-tbl-kosten { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-top: 6px !important; padding-bottom: 6px !important; } .im-bar-cell { display: flex; align-items: center; gap: 8px; } .im-bar-track { flex: 1; height: 8px; background: rgba(20, 28, 44, 0.7); border: 1px solid #2f3c50; border-radius: 4px; overflow: hidden; min-width: 80px; } .im-bar-fill { height: 100%; background: linear-gradient(90deg, #3a8ac8, #7fdcf0); box-shadow: 0 0 4px rgba(127, 220, 240, 0.5); transition: width 0.3s ease; } .im-bar-value { color: #e8eef7; font-weight: 600; font-size: 13px; min-width: 45px; text-align: right; font-family: "Consolas", monospace; } /* --- Einzel-Techtree-Modal (öffnet nur den Baum für ein Item) --- */ .modal-box-tt { max-width: 90vw; width: 90vw; max-height: 85vh; } .modal-box-tt .modal-body { padding: 12px; } .modal-box-tt .tt-display-frame { background: #050810; border-radius: 6px; padding: 8px; } .modal-box-tt .tt-display-body { display: flex; justify-content: center; align-items: center; min-height: 500px; max-height: 70vh; overflow: auto; } .modal-box-tt .tt-display-body img { max-width: 100%; height: auto; display: block; } .modal-box-tt .tt-display-body object { display: block; } /* --- Planeten-Punkte-Badge --- */ .planet-punkte-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 14px; background: linear-gradient(180deg, rgba(60, 78, 100, 0.7), rgba(20, 28, 44, 0.85)); border: 1px solid #7fdcf0; border-radius: 20px; box-shadow: 0 0 8px rgba(127, 220, 240, 0.2); } .pp-label { color: #a8b0c0; font-size: 13px; font-weight: 600; } .pp-wert { color: #7fdcf0; font-size: 16px; font-weight: 700; font-family: "Consolas", monospace; letter-spacing: 0.5px; } .bar-fill { height: 100%; background: linear-gradient(90deg, #2d6f8f, #5fd0e8); border-radius: 4px; } .bar-value { font-size: 13px; color: #d8d8e0; white-space: nowrap; } /* --- Statistik --- */ /* Hinweis, wenn eine Forschungsart bereits auf einem anderen Planeten laeuft (v4.9) */ .forschung-belegt { margin-top: 6px; padding: 6px 9px; border-radius: 5px; background: rgba(255, 107, 107, 0.08); border: 1px solid rgba(255, 107, 107, 0.3); color: #ffa8a8; font-size: 13px; line-height: 1.4; } /* --- Asteroiden-Fenster (Aug 2026 v5.0, User-Vorgabe) ---------------------------------- */ .grid-zelle.asteroid-eigen { outline: 2px solid #4ade80; outline-offset: -2px; border-radius: 3px; } .ast-fenster { font-size: 14px; } .ast-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #1e2838; } .ast-label { color: #7a8aa0; } .ast-wert { color: #eaeaf0; font-weight: 600; min-height: 18px; } .ast-zeile select { padding: 5px 8px; background: #0d1420; color: #eaeaf0; border: 1px solid #2f4d6b; border-radius: 5px; font-family: inherit; font-size: 14px; } /* Rohstoffe: Vorrat ist unendlich, darunter die Foerdermenge pro Stunde. */ .ast-rohstoffe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 6px; } .ast-rohstoff { background: rgba(16, 21, 31, 0.9); border: 1px solid #263042; border-radius: 6px; padding: 8px; text-align: center; } .ast-rohstoff-kopf { display: flex; align-items: center; justify-content: center; gap: 5px; } .ast-rohstoff-name { color: #a8b0c0; font-size: 12.5px; } .ast-vorrat { color: #eaeaf0; font-size: 23px; line-height: 1.1; margin: 2px 0; } .ast-abbau { font-size: 13px; font-variant-numeric: tabular-nums; } .ast-abbau-plus { color: #4ade80; } .ast-abbau-null { color: #6f7a8a; } .ast-hinweis { color: #6f7a8a; font-size: 12.5px; margin: 0 0 12px; } .ast-block { margin-top: 14px; } .ast-block h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #7a8aa0; border-bottom: 1px solid #263042; padding-bottom: 4px; } .ast-gross { color: #eaeaf0; font-size: 21px; font-weight: bold; } .ast-bestand-zeile { display: flex; justify-content: space-between; padding: 3px 0; color: #c0c0cc; font-variant-numeric: tabular-nums; } .ast-leer { color: #7a8aa0; font-style: italic; margin: 2px 0; } /* Feste Spalten statt Umbruch - sonst reisst der generische Button-Stil im Modal die "max"-Schaltflaeche auf volle Breite und die Zeile bricht um. */ .ast-send-zeile { display: grid; grid-template-columns: 1fr auto 96px auto; align-items: center; gap: 10px; padding: 4px 0; } .ast-send-name { color: #eaeaf0; } .ast-send-vorrat { color: #7a8aa0; font-size: 12.5px; white-space: nowrap; } .ast-input { width: 96px; padding: 4px 6px; background: #0d1420; color: #eaeaf0; border: 1px solid #2f4d6b; border-radius: 4px; font-family: inherit; font-size: 13.5px; } .ast-fenster .ast-max { width: auto; padding: 4px 10px; background: #16304a; color: #cfe6ee; border: 1px solid #2f4d6b; border-radius: 4px; cursor: pointer; font-size: 12px; } .ast-fenster .ast-btn { width: auto; margin-top: 10px; padding: 7px 18px; background: #16304a; color: #eaeaf0; border: 1px solid #5fd0e8; border-radius: 5px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; } .ast-btn:hover { background: #1d436b; } .ast-untertitel { color: #7a8aa0; font-size: 12.5px; margin: 8px 0 2px; letter-spacing: 0.04em; } .ast-btn-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ===================================================================================== Aug 2026 v7.8 (User-Vorgabe) - Fenster am Schwarzen Loch (Missionen) Bewusst dieselben Bausteine wie das Asteroidenfenster (.ast-zeile, .ast-send-zeile, .ast-btn) - der User hat es ausdruecklich "so wie fuer Asteroiden, nur mit anderem Inhalt" beschrieben. Neu sind nur die Missionskarten und die Dauer-Leiste. Violett statt Cyan, damit man auf einen Blick sieht, dass man am Schwarzen Loch ist und nicht an einem Asteroiden. ===================================================================================== */ .sl-fenster { font-size: 15px; } .sl-hinweis { color: #b9c2d4; font-size: 14px; line-height: 1.45; margin: 0 0 14px; } .sl-klein { color: #8b96a8; font-size: 13px; line-height: 1.4; margin: 0 0 10px; } .sl-karten { display: flex; flex-direction: column; gap: 10px; } /* Die Karten sind