/* Minimaler, gut lesbarer Basis-Stil. Fokus auf Lesbarkeit & sichtbaren Tastatur-Fokus (Barrierefreiheit), nicht auf Optik – das kommt später. Hell/Dunkel (Beta-Feedback 2026-07-06, lichtempfindliche Augen): ALLE Farben leben in :root-Variablen. Ohne Cookie folgt die Seite der Systemeinstellung (prefers-color-scheme); der Footer-Umschalter setzt data-theme am (Cookie, Core\Darstellung) und übersteuert sie. Die dunklen Werte stehen deshalb ZWEIMAL (Media-Query + Attribut) – reines CSS kann den Block nicht teilen; wer Farben ändert, muss beide Blöcke synchron halten. */ :root { color-scheme: light; --text: #1a1a1a; --text-gedimmt: #555; /* Nebentexte: Footer, Meta, Begründungen */ --text-abgeschaltet: #777; /* inaktive/nicht baubare Zeilen */ --bg: #f7f7f8; --bg-karte: #fff; /* Karten/Einschübe: details, Vorschau, Eingaben */ --bg-einschub: #f6f7f9; /* vorformatierte Berichte */ --rand: #ddd; --rand-stark: #999; /* Tabellenkopf */ --rand-eingabe: #767676; --akzent: #1d4ed8; /* Aktions-Hintergrund (weiße Schrift) – beide Modi */ --akzent-text: #fff; --aktion-zweit: #555; /* Zweit-Knopf-Hintergrund (weiße Schrift) */ --fokus: #1d4ed8; /* Tastatur-Fokusring */ --link: #1d4ed8; --link-besucht: #6d28d9; --gefahr: #b00020; /* Fehler-Text/-Rand */ --gefahr-aktion: #b00020; /* Gefahr-Knopf (weiße Schrift) – beide Modi */ --gefahr-bg: #fde7ea; --erfolg-rand: #1b7f3b; --erfolg-bg: #e6f4ea; --hinweis-bg: #fff8e1; --hinweis-rand: #c9a227; --eigen-bg: #eaf2ff; /* eigene Zeile in der Galaxiekarte */ } /* Dunkle Werte, Fall 1: Systemeinstellung dunkel + keine (oder dunkle) Wahl. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { color-scheme: dark; --text: #e3e5e8; --text-gedimmt: #a3aab6; --text-abgeschaltet: #868c96; --bg: #15171c; --bg-karte: #1e222a; --bg-einschub: #1a1e25; --rand: #3a4150; --rand-stark: #5b6474; --rand-eingabe: #757e8f; --aktion-zweit: #454c59; --fokus: #8ab4f8; --link: #8ab4f8; --link-besucht: #c58af9; --gefahr: #ff8ba0; --gefahr-bg: #351018; --erfolg-rand: #57b06f; --erfolg-bg: #0f2a18; --hinweis-bg: #2a2410; --hinweis-rand: #93803a; --eigen-bg: #1c2b4a; } } /* Dunkle Werte, Fall 2: explizit gewählt (Cookie) – identisch zu Fall 1. */ :root[data-theme="dunkel"] { color-scheme: dark; --text: #e3e5e8; --text-gedimmt: #a3aab6; --text-abgeschaltet: #868c96; --bg: #15171c; --bg-karte: #1e222a; --bg-einschub: #1a1e25; --rand: #3a4150; --rand-stark: #5b6474; --rand-eingabe: #757e8f; --aktion-zweit: #454c59; --fokus: #8ab4f8; --link: #8ab4f8; --link-besucht: #c58af9; --gefahr: #ff8ba0; --gefahr-bg: #351018; --erfolg-rand: #57b06f; --erfolg-bg: #0f2a18; --hinweis-bg: #2a2410; --hinweis-rand: #93803a; --eigen-bg: #1c2b4a; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, "Segoe UI", Arial, sans-serif; line-height: 1.6; color: var(--text); background: var(--bg); } a { color: var(--link); } a:visited { color: var(--link-besucht); } header, main, footer { max-width: 70ch; margin-inline: auto; padding: 1rem 1.25rem; } header { border-bottom: 1px solid var(--rand); } footer { border-top: 1px solid var(--rand); color: var(--text-gedimmt); font-size: .9rem; } .marke { font-weight: 700; font-size: 1.25rem; margin: 0; } h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } /* Sichtbarer Fokus für Tastatur-Navigation. */ a:focus, button:focus, input:focus, [tabindex]:focus { outline: 3px solid var(--fokus); outline-offset: 2px; } /* Sprunglink: nur sichtbar, wenn er den Fokus hat. */ .sprunglink { position: absolute; left: -9999px; top: 0; background: var(--akzent); color: var(--akzent-text); padding: .5rem 1rem; } .sprunglink:focus { left: 0; } /* Navigation im Kopf (gilt auch für die Abschnitt-Sprunglinks der Planet-Seite). */ nav { margin-top: .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; } .nav-status { color: var(--text-gedimmt); } .nav-logout { margin: 0; } .nav-logout button { padding: .25rem .75rem; font-size: .9rem; } /* Formulare & Meldungen. Barrierefrei: der Fehlertext steht immer im Klartext dabei – Farbe ist nur ein zusätzliches, nie das einzige Signal. */ form p { margin: 0 0 1rem; } label { display: block; font-weight: 600; margin-bottom: .25rem; } input[type="text"], input[type="email"], input[type="password"], input[type="number"] { width: 100%; max-width: 40ch; padding: .5rem; font-size: 1rem; border: 1px solid var(--rand-eingabe); border-radius: 4px; background: var(--bg-karte); color: var(--text); } input[type="number"] { max-width: 12ch; } select { padding: .5rem; font-size: 1rem; border: 1px solid var(--rand-eingabe); border-radius: 4px; background: var(--bg-karte); color: var(--text); } input[aria-invalid="true"] { border: 2px solid var(--gefahr); } button { padding: .5rem 1.25rem; font-size: 1rem; color: var(--akzent-text); background: var(--akzent); border: none; border-radius: 4px; cursor: pointer; } /* Löschende/abreißende Aktion — als Gefahr markiert (Farbe ist nur Zugabe; der Button-Text "Abreißen (50 % zurück)" bleibt das eigentliche Signal für JAWS). */ button.gefahr { background: var(--gefahr-aktion); } .feldfehler { display: block; color: var(--gefahr); font-weight: 600; } .meldung { padding: .75rem 1rem; border-radius: 4px; margin-bottom: 1rem; } .meldung-fehler { background: var(--gefahr-bg); border: 1px solid var(--gefahr); } .meldung-erfolg { background: var(--erfolg-bg); border: 1px solid var(--erfolg-rand); } /* Fehler-Sammlung im Formular – bewusst statisch (keine Live-Region). */ .fehlerbox { padding: .75rem 1rem; margin-bottom: 1rem; background: var(--gefahr-bg); border: 1px solid var(--gefahr); border-radius: 4px; } .fehlerbox h2 { margin: 0 0 .5rem; font-size: 1.05rem; } .fehlerbox ul { margin: 0; padding-left: 1.25rem; } /* Nachrichten-Detailseite: Volltext-Bericht (Schlachtbericht) vorformatiert, aber umbrechend statt Seitwärts-Scroll. */ .nachricht-meta { color: var(--text-gedimmt); font-size: .9rem; margin: 0 0 1rem; } .nachricht-inhalt { white-space: pre-wrap; word-break: break-word; font-family: inherit; background: var(--bg-einschub); border: 1px solid var(--rand); border-radius: 4px; padding: 1rem; line-height: 1.5; } /* Aktions-Schaltflächen: Links in Button-Optik (z. B. Startseite). */ .aktionen { display: flex; flex-wrap: wrap; gap: .75rem; } .knopf { display: inline-block; padding: .5rem 1.25rem; background: var(--akzent); color: var(--akzent-text); text-decoration: none; border-radius: 4px; } .knopf-zweit { background: var(--aktion-zweit); } /* Entwicklungs-Hinweis (z. B. lokaler Reset-Link statt E-Mail-Versand). */ .devhinweis { padding: .75rem 1rem; margin-bottom: 1rem; background: var(--hinweis-bg); border: 1px solid var(--hinweis-rand); border-radius: 4px; } /* Nur für Screenreader: visuell versteckt, aber von JAWS vorgelesen (z. B. die ausgeschriebene Koordinate "Galaxie 2, System 14, ..."). */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Galaxiekarte: System-Tabelle. */ table { border-collapse: collapse; width: 100%; margin: 1rem 0; } caption { text-align: left; font-weight: 600; margin-bottom: .5rem; } th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--rand); vertical-align: top; } thead th { border-bottom: 2px solid var(--rand-stark); } tbody th[scope="row"] { font-weight: 600; } tr.eigen { background: var(--eigen-bg); } /* Ressourcen-Leiste (Layout, alle Seiten außer /planet): kompakt & aufklappbar. */ .ressourcen-leiste { max-width: 70ch; margin-inline: auto; padding: 0 1.25rem; } .ressourcen-leiste > details { border: 1px solid var(--rand); border-radius: 4px; background: var(--bg-karte); padding: .25rem .85rem; margin: .5rem 0 0; } .ressourcen-leiste summary { cursor: pointer; font-weight: 600; } .ressourcen-leiste table { margin: .5rem 0; font-size: .9rem; } .ressourcen-leiste th, .ressourcen-leiste td { padding: .15rem .5rem; } /* Welt-Wechsler (Layout, Marc 2026-07-11): gleiche Kasten-Optik wie die Ressourcen-Leiste — ausklappbare Link-Liste der eigenen Welten. */ .welt-wechsler { max-width: 70ch; margin: .5rem auto 0; border: 1px solid var(--rand); border-radius: 4px; background: var(--bg-karte); padding: .25rem .85rem; } .welt-wechsler > summary { cursor: pointer; font-weight: 600; } .welt-wechsler ul { margin: .5rem 0; padding-left: 1.25rem; } .welt-wechsler li { margin: .15rem 0; } .welt-wechsler .koord { color: var(--text-gedimmt); font-size: .9rem; } /* Bau-/Forschungs-Countdown: wird in-place aktualisiert (kein Cursor-Sprung). */ .countdown-wert { font-variant-numeric: tabular-nums; } /* Flotten-Mission: Ziel-Vorschau (Distanz/Flugzeit/Treibstoff). */ .vorschau { border: 1px solid var(--rand); border-radius: 4px; background: var(--bg-karte); padding: .5rem .85rem; margin: .75rem 0; } .vorschau .kennwerte { margin: .35rem 0; } .vorschau .kennwerte dt { font-weight: 600; } .vorschau .kennwerte dd { margin: 0 0 .35rem 1.25rem; } /* Begründungen/abgeschwächte Zeilen (Klartext bleibt das Signal, Farbe nur Zugabe). */ .grund { color: var(--text-gedimmt); font-size: .9rem; } .nicht-baubar > th, .nicht-baubar > td, .inaktiv > th, .inaktiv > td { color: var(--text-abgeschaltet); } /* Ausklappbare Körper (HTML-
, ohne JS): Planet je Zeile, Monde je Zelle. */ details.objekt > summary { cursor: pointer; font-weight: 600; } details.mond { margin-bottom: .25rem; } details.mond > summary { cursor: pointer; } details.objekt[open] > summary, details.mond[open] > summary { margin-bottom: .35rem; } .objektdetails { margin: 0; font-weight: 400; } .objektdetails dt { font-weight: 600; } .objektdetails dd { margin: 0 0 .2rem 1.25rem; } .aktionen-platzhalter { margin: .25rem 0 0; color: var(--text-gedimmt); } /* Schiffs-Datenblatt (/schiff) + Klassen-Hinweis hinter Schiffsnamen. */ .schiff-klasse { color: var(--text-gedimmt); font-weight: 400; font-size: .9rem; } dl.kennwerte { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; margin: .25rem 0 1rem; } dl.kennwerte dt { font-weight: 600; } dl.kennwerte dd { margin: 0; } /* Forschungs-Voraussetzungen (Schiffs-/Gebäude-Datenblatt, Marc 2026-07-11): grün = erfüllt, rot = fehlt — NUR Zugabe, der Klartext („erfüllt"/„fehlt noch") steht in jeder Zeile und ist das eigentliche Signal (JAWS). */ .voraussetzungen { margin: 0; padding-left: 1.25rem; } .voraussetzung-erfuellt { color: var(--erfolg-rand); } .voraussetzung-fehlt { color: var(--gefahr); } /* Einklappbare Groß-Abschnitte/Gruppen (Planet-Seite, Beta-Feedback 2026-07-06): standardmäßig ZUGEKLAPPT. Die Überschrift steht IMMER AUSSERHALB des details — eine h2 im liest JAWS nur als Schalter und sie verschwindet aus der Überschriften-Navigation (Marc-Befund 2026-07-06). */ details.abschnitt { margin: .5rem 0; } details.abschnitt > summary { cursor: pointer; font-weight: 600; } /* Footer: Hell/Dunkel-Umschalter (zwei Knöpfe, s. layout.php). */ .darstellung-wechsel { display: flex; gap: .5rem; margin-top: .5rem; }