:root {
    /* Primary Color (Action & Active States) */
    --clr-primary-main: #FF6B00;
    --clr-primary-hover: #E05E00;
    --clr-primary-text: #C25100;
    --clr-primary-subtle: rgba(255, 107, 0, 0.15);

    /* Secondary Color */
    --clr-secondary-main: #0E7490;
    --clr-secondary-hover: #0C627A;
    --clr-secondary-subtle: rgba(14, 116, 144, 0.20);

    /* Status Colors */
    --clr-status-danger: #DC2626;
    --clr-status-warning: #F59E0B;
    --clr-status-success: #10B981;
    --clr-status-info: #3B82F6;

    /* Marken-Farben der Anmelde-Anbieter (GDD 8.1). Sie gehören dem jeweiligen Anbieter und
       folgen deshalb nicht dem Farbschema des Spiels – als Token dokumentiert statt als
       Hex-Wert in `menu.css` (Code Control 2026-09-17, Refactoring). */
    --clr-brand-google: #DB4437;
    --clr-brand-discord: #5865F2;

    /* Diagramm-Farben der Telemetrie-Auswertung. Chart.js braucht konkrete Werte; JS liest sie
       über `getComputedStyle(document.documentElement)` aus diesen Tokens. */
    --clr-chart-1: #FF6B00;
    --clr-chart-2: #0E7490;
    --clr-chart-1-fill: rgba(255, 107, 0, 0.35);
    --clr-chart-2-fill: rgba(14, 116, 144, 0.35);

    /* Farbstufen der Bau-Heatmap (Telemetrie, F7.6): von wenig (gelb) nach viel (rot), halb
       durchsichtig, damit Karte und Vorschaubild darunter lesbar bleiben. */
    --clr-heat-1: rgba(250, 204, 21, 0.35);
    --clr-heat-2: rgba(251, 146, 60, 0.45);
    --clr-heat-3: rgba(249, 115, 22, 0.55);
    --clr-heat-4: rgba(220, 38, 38, 0.65);
    --clr-heat-5: rgba(153, 27, 27, 0.78);

    /* Dunklere Status-Töne für Text auf hellem Grund (Abzeichen, Tabellen) */
    --clr-status-danger-strong: #B91C1C;
    --clr-status-success-text: #059669;

    /* Akzente des Editors: Modifikatoren (violett) und Hilfslinien beim Einrasten (hellblau).
       Als Token dokumentiert, damit derselbe Ton nicht in fünf Dateien als Hex steht
       (Code Control 2026-09-17, Refactoring). */
    --clr-accent-violet: #7C3AED;
    --clr-accent-violet-border: #8B5CF6;
    --clr-accent-sky: #38BDF8;

    /* Kennfarben der Asset-Typen in den Editor-Menüs (Planet, Schwarzes Loch, Portal, Sprite,
       Animation, Effekt). Vorher als Hex-Werte in jedem Icon-Template (Code Control 2026-09-17,
       Refactoring „Inline-Styles und Hex-Farben in Icon-HTML"). */
    --clr-accent-fuchsia: #E879F9;
    --clr-accent-purple: #C084FC;
    --clr-accent-yellow: #FACC15;
    --clr-accent-orange: #FB923C;
    --clr-accent-pink: #EC4899;

    /* Weitere Kennfarben aus den Editor-Vorlagen (Kamera-Aktionen, Nebenwerte auf dunklem Grund).
       Vorher als Hex in Inline-Styles (Code Control 2026-09-17, Refactoring „Inline-Styles"). */
    --clr-accent-cyan: #06B6D4;
    --clr-accent-slate: #94A3B8;
    --clr-status-danger-subtle: rgba(239, 68, 68, 0.10);
    /* Hover-Tönung des Icon-Buttons „Kopieren" (docs/button_refactoring.md) */
    --clr-status-success-subtle: rgba(16, 185, 129, 0.15);

    /* Balken der Creeps: HP und SP über den Creeps (Overlay, `FloatingProgressBar` liest sie über
       `ColorUtils.tokenTint`) und im Creep-Inspektor des HUD (docs/37_HUD_Bedienelemente_Konzept.md 2.4) */
    --clr-creep-hp: #FF0000;
    --clr-creep-sp: #00AAFF;

    /* Stufen der Bewertungen (C bis S+, `data/constants/rating_tiers.json`) und die Farben der
       Sternenkarte einer Kampagne: inaktive Sterne und Auswahlring
       (docs/41_Kampagnen_Achievements.md, „Stufen" und „Stufen-Datei") */
    --clr-tier-c: #DC2626;
    --clr-tier-b: #FBD513;
    --clr-tier-a: #60D115;
    --clr-tier-s: #00B5C2;
    --clr-tier-splus: #D040ED;
    --clr-campaign-inactive: #8CADB1;
    --clr-campaign-ring: #FFEA00;

    /* Hintergrund einer Zeichenfläche (Canvas): bewusst reines Schwarz, damit Effekte und
       Sprites farbtreu erscheinen. */
    --clr-canvas-bg: #000;

    /* Neutral & Typo */
    --clr-text-primary: #0F172A;
    --clr-text-muted: #475569;
    --clr-border-light: #CBD5E1;
    --clr-text-light: #F8FAFC;

    /* Glassmorphism Surfaces */
    --clr-surface-main: rgba(255, 255, 255, 0.78);
    --clr-surface-subcard: rgba(255, 255, 255, 0.50);
    --clr-surface-input: rgba(255, 255, 255, 0.80);
    --clr-surface-border: rgba(255, 255, 255, 0.60);
    --clr-surface-dark: rgba(0, 0, 0, 0.05);
    --clr-surface-hover: rgba(0, 0, 0, 0.1);
    /* Fast deckende Fläche für aufklappende Menüs (Spieler-Menü des Hauptmenüs): Das Glas mit
       0.78/0.80 wäre dort zu durchsichtig (docs/36_Hauptmenue_Konzept.md 5.1) */
    --clr-surface-popup: rgba(255, 255, 255, 0.95);
    --clr-shade-15: rgba(0, 0, 0, 0.15);
    --clr-shade-20: rgba(0, 0, 0, 0.20);
    --clr-shade-55: rgba(0, 0, 0, 0.55);

    /* Schatten schwebender Elemente (Popups, Kontextfenster) und Leuchtpunkt der Timeline */
    --shadow-popup: 0 6px 20px rgba(0, 0, 0, 0.6);
    --shadow-popup-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-glow-sky: 0 0 6px rgba(56, 189, 248, 0.9);

    /* Ebenen (z-index) von Ladebildschirm und jQuery-UI-Dialogen. Der Ladebildschirm liegt über
       allem, was zur Seite gehört (HUD, Leisten der Editoren, Anzeigen im Spiel), die Dialoge
       liegen darüber: Eine Rückfrage oder Fehlermeldung, die während des Ladens aufgeht, muss zu
       sehen sein. Die Fläche hinter einem modalen Dialog legt jQuery UI eine Ebene unter ihn –
       deshalb zwei Stufen Abstand. Beide Werte bleiben unter dem, was über Dialogen liegen muss:
       dem Wave-Editor (1000, damit er schon offene Dialoge verdeckt), Tooltips (9999), den
       Zieh-Helfern des Wave-Editors (10000), Achievement-Toasts und Kontextmenüs. */
    --z-loading-screen: 500;
    --z-dialog: 502;

    /* Spacing Tokens */
    --pad-container: 1.50em;
    --gap-cols: 2em;
    --pad-col: 0.75em;
    --gap-inner: 1em;
    --pad-card: 1.0em 1.2em;
    --pad-btn: 0.8em 1.2em;
    /* Breite aller Ansichten des Hauptmenüs; Vorgabe ist das Dashboard „Spielen" (docs/36 5.1) */
    --menu-content-width: 110rem;

    /* Sizing Tokens (Typography) */
    --fs-title: 2.20em;
    --fs-value: 1.60em;
    --fs-btn: 1.20em;
    --fs-label: 0.90em;

    /* Font Families */
    --font-regular: 'Sofia Sans Semi Condensed', sans-serif;
    --font-narrow: 'Sofia Sans Extra Condensed', sans-serif;
}

/* Font Awesome 7 gibt jedem Icon eine feste Breite (`--fa-width`, Vorgabe 1.25em); bis Version 6
   galt das nur mit `fa-fw`. Die Oberfläche ist auf die natürliche Breite der Zeichen gebaut,
   deshalb bleibt es dabei – `fa-fw` setzt die feste Breite weiterhin je Icon. */
:root {
    --fa-width: auto;
}

/* Grundschrift 16 px auf allen Seiten: Bezugsgröße für `rem` (1rem = 16px). Abstände und Größen
   stehen in rem, damit sie nicht mit der Schrift eines Bereichs (Tabellen, Badges) mitschrumpfen;
   `em` nur dort, wo etwas bewusst mit der Schrift skalieren soll (Code Control 2026-09-17,
   Refactoring „Statische Farben und px"). */
html {
    font-size: 16px;
}

body {
    font-size: 1rem;
}

/* Nur Schrift und Hintergrund für alle Seiten. Das Seitengerüst (Größe, Zentrierung, Scrollen)
   legt jede Seite selbst fest (docs/36_Hauptmenue_Konzept.md 4.1): Spiel und Editoren bleiben
   fest auf Fenstergröße (game.css, editor.css), das Menü scrollt, wenn der Inhalt nicht passt
   (menu.css). Vorher galt `overflow: hidden` mit Zentrierung für alle – zu hoher Menü-Inhalt lief
   oben und unten aus dem Fenster und war nicht mehr erreichbar. */
body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--font-regular);
    background: url('../images/ui/menu_bg.webp') no-repeat center center fixed;
    background-size: cover;
}

/* Glassmorphism Classes */
.glass-panel {
    background: var(--clr-surface-main);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--clr-surface-border);
    padding: var(--pad-container);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-input {
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-border-light);
    padding: 0.6em;
    font-family: var(--font-regular);
    font-size: var(--fs-label);
    color: var(--clr-text-primary);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.glass-input:focus {
    border-color: var(--clr-primary-main);
    box-shadow: 0 0 5px var(--clr-primary-subtle);
}

/* ==========================================================================
   Buttons (docs/button_refactoring.md)

   Hauptbuttons: `.btn` + genau eine Farbvariante (Primär, Sekundär, Gefahr). Sie tragen Text; ein
   Icon davor erbt die helle Schriftfarbe. `.btn` gilt auch für Links (`<a class="btn">`).
   Icon-Buttons: `.btn-icon` allein, nie zusammen mit `.btn`. Eine eigene Icon-Farbe haben nur
   Bearbeiten, Kopieren und Löschen.
   Schlicht-Buttons: `.btn-plain` ohne Rahmen und Hintergrund (Aufklappen, Favorit, Info, Text-Link).
   Umschalter zeigen ihren Zustand über eine Klasse (Text: Sekundär ↔ Primär, Icon und Schlicht:
   `.is-active`) und `aria-pressed`, nie über Inline-Styles.
   Dazu kommen der Navigationseintrag (`.menu-nav-item`) und der Filter-Chip (`.btn-filter`).
   ========================================================================== */
/* Eckig wie das HUD (docs/37_HUD_Bedienelemente_Konzept.md 5): keine Rundung, kein Anheben beim
   Hover; die Hauptaktion (Primär, nicht quadratisch) trägt die abgeschrägte Ecke. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-narrow);
    font-size: var(--fs-btn);
    padding: var(--pad-btn);
    border: none;
    cursor: pointer;
    transition: background-color 80ms linear, box-shadow 80ms linear;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    text-decoration: none;
}

.btn:focus-visible {
    outline: 2px solid var(--clr-text-light);
    outline-offset: -4px;
}

/* jQuery UI setzt in Reitern und Dialogen Schrift und Größe jedes Knopfs (`.ui-widget button`,
   Spezifität 0,1,1) und die Farbe jedes Links (`.ui-widget-content a`). Die Button-Arten sollen
   dort genauso aussehen wie außerhalb; `.btn-sm` und `.btn-square` stehen weiter unten und
   überschreiben die Größe wieder. */
.ui-widget .btn {
    font-family: var(--font-narrow);
    font-size: var(--fs-btn);
}

.ui-widget .btn-primary,
.ui-widget .btn-secondary,
.ui-widget .btn-danger {
    color: var(--clr-text-light);
}

.btn-primary {
    background-color: var(--clr-primary-main);
    color: var(--clr-text-light);
}

/* Abgeschrägte Ecke der Hauptaktion; quadratische Steuerknöpfe bleiben gerade */
.btn-primary:not(.btn-square) {
    clip-path: polygon(0 0, calc(100% - 0.55rem) 0, 100% 0.55rem, 100% 100%, 0 100%);
}

.btn-primary.btn-sm:not(.btn-square) {
    clip-path: polygon(0 0, calc(100% - 0.4rem) 0, 100% 0.4rem, 100% 100%, 0 100%);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--clr-primary-hover);
}

.btn-secondary {
    background-color: var(--clr-secondary-main);
    color: var(--clr-text-light);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--clr-secondary-hover);
}

/* Für Aktionen, die etwas endgültig entfernen (Account löschen, Spielstand löschen).
   `menu.php` nutzte die Klasse schon, ohne dass sie außerhalb des Asset-Editors definiert war. */
.btn-danger {
    background-color: var(--clr-status-danger);
    color: var(--clr-text-light);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--clr-status-danger-strong);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* Kompakte Größe: gleiche Typografie wie `.btn`, nur kleiner. Der Selektor verlangt `.btn`, damit
   die Klasse nicht auf Auswahllisten und Eingabefelder wirkt. */
.btn.btn-sm {
    font-size: 0.85em;
    padding: 0.35em 0.75em;
    line-height: 1.2;
    gap: 0.4em;
    white-space: nowrap;
}

/* Nur Icon, quadratisch – ausschließlich für Steuerknöpfe (HUD-Steuerung, Turm-Aktionen,
   Wiedergabe, Schnellstart). Jede andere Aktion ohne Text ist ein `.btn-icon`. */
.btn.btn-square {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 1rem;
}

.btn.btn-sm.btn-square {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
}

/* Icon-Button: Quadrat mit Rahmen auf hellem Grund, Icon neutral */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
    color: var(--clr-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Gegen `.ui-widget button { font-size: 1em }` (siehe `.ui-widget .btn`) */
.ui-widget .btn-icon {
    font-size: 0.875rem;
}

.btn-icon:hover:not(:disabled) {
    background: var(--clr-surface-hover);
    border-color: var(--clr-text-muted);
}

.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Kleinere Stufe für sehr dichte Zeilen (Spurkopf im Wave-Editor, Titelzeilen im HUD) */
.btn-icon.btn-icon-sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
}

.btn-icon-edit {
    color: var(--clr-secondary-main);
}

.btn-icon-edit:hover:not(:disabled) {
    background: var(--clr-secondary-subtle);
    border-color: var(--clr-secondary-main);
}

.btn-icon-copy {
    color: var(--clr-status-success);
}

.btn-icon-copy:hover:not(:disabled) {
    background: var(--clr-status-success-subtle);
    border-color: var(--clr-status-success);
}

.btn-icon-delete {
    color: var(--clr-status-danger);
}

.btn-icon-delete:hover:not(:disabled) {
    background: var(--clr-status-danger-subtle);
    border-color: var(--clr-status-danger);
}

/* Aktiver Umschalter (Sperre, Freigabe, Auswahl) */
.btn-icon.is-active,
.btn-icon.is-active:hover:not(:disabled) {
    color: var(--clr-primary-main);
    border-color: var(--clr-primary-main);
    background: var(--clr-primary-subtle);
}

/* Schlicht-Button: ohne Rahmen und Hintergrund */
.btn-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: 0.125rem 0.25rem;
    border: none;
    background: none;
    color: var(--clr-text-muted);
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.btn-plain:hover:not(:disabled),
.btn-plain.is-active {
    color: var(--clr-primary-main);
}

.btn-plain:disabled {
    opacity: 0.25;
    cursor: default;
}

/* Text-Link als Button (z. B. „Passwort vergessen") */
.btn-plain.btn-plain-link {
    padding: 0;
    line-height: inherit;
    text-decoration: underline;
}

/* Filter-Chip – die sechste Art Bedienelement (seit 2026-10-01, docs/button_refactoring.md,
   Guidelines 3.3, docs/36_Hauptmenue_Konzept.md 6.1). Er schränkt eine Liste ein, ist also weder
   Aktion noch Weg und kein Ersatz für Reiter: In einer Reihe ist genau ein Chip gedrückt
   (`aria-pressed="true"`, der einzige Hervorhebungszustand). Eine Zahl dahinter steht in
   `.btn-filter-count`. Erste Verwendung: die Sektorliste der Missionsauswahl. */
.btn-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
    color: var(--clr-text-muted);
    font-family: var(--font-narrow);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 80ms linear, background-color 80ms linear, border-color 80ms linear;
}

.btn-filter:hover,
.btn-filter:focus-visible {
    border-color: var(--clr-secondary-main);
    color: var(--clr-text-primary);
    outline: none;
}

.btn-filter[aria-pressed="true"] {
    border-color: var(--clr-secondary-main);
    background: var(--clr-secondary-main);
    color: var(--clr-text-light);
}

.btn-filter-count:empty {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn-filter {
        transition: none;
    }
}

/* Navigationseintrag – die fünfte Art Bedienelement (docs/button_refactoring.md, Guidelines 3.3,
   docs/36_Hauptmenue_Konzept.md 4.2). Er ist keine Aktion, sondern ein Weg: Bereichsreiter,
   Symbolleiste und Spieler-Menü des Hauptmenüs. Die offene Ansicht trägt `aria-current="page"`;
   das ist zugleich der einzige Hervorhebungszustand. Größe und Form legen die Varianten in
   menu.css fest (`.menu-nav-tab`, `.menu-nav-icon`, `.menu-nav-entry`). */
.menu-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-sizing: border-box;
    border: 0;
    background: none;
    color: var(--clr-text-muted);
    font-family: var(--font-narrow);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 80ms linear, background-color 80ms linear, box-shadow 80ms linear;
}

.menu-nav-item i {
    color: var(--clr-secondary-main);
}

.menu-nav-item:hover,
.menu-nav-item:focus-visible {
    color: var(--clr-text-primary);
    background: var(--clr-surface-dark);
    outline: none;
}

.menu-nav-item[aria-current="page"] {
    color: var(--clr-text-primary);
    background: var(--clr-primary-subtle);
}

.menu-nav-item[aria-current="page"] i,
.menu-nav-item:hover i,
.menu-nav-item:focus-visible i {
    color: var(--clr-primary-main);
}

@media (prefers-reduced-motion: reduce) {
    .menu-nav-item {
        transition: none;
    }
}

/* ==========================================================================
   Schalter – Standard für jede Ein/Aus-Option (seit 2026-10-02,
   docs/37_HUD_Bedienelemente_Konzept.md Kapitel 3, Guidelines 3.3). Kein Button: eckige Schiene
   mit quadratischem Knopf, an = Orange. Die Checkbox bleibt unsichtbar erhalten (Tastatur,
   Screenreader, `change`).
   <label class="switch"><input type="checkbox" role="switch"><span class="switch-label">…</span>
          <span class="switch-track" aria-hidden="true"></span></label>
   `.is-sub`: Unterpunkt, eingerückt an einer Petrol-Linie. `.switch-inline`: Schiene vor der
   Beschriftung, nur so breit wie nötig (dichte Zeilen und Tabellen).
   ========================================================================== */
.switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    min-height: 1.5rem;
    cursor: pointer;
    user-select: none;
}

.switch.switch-inline {
    display: inline-flex;
    justify-content: flex-start;
    gap: 0.5rem;
}

.switch.switch-inline .switch-track {
    order: -1;
}

.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.switch-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch-label:empty {
    display: none;
}

/* Beschriftung mit Erklärung darunter: umbrechen, Schiene an der ersten Zeile */
.switch-label.is-multiline {
    overflow: visible;
    white-space: normal;
}

.switch.switch-top {
    align-items: flex-start;
}

.switch.switch-top .switch-track {
    margin-top: 0.15rem;
}

.switch-track {
    position: relative;
    flex-shrink: 0;
    width: 2rem;
    height: 1rem;
    box-sizing: border-box;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
    transition: background-color 80ms linear, border-color 80ms linear;
}

.switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.7rem;
    height: 0.7rem;
    background: var(--clr-text-muted);
    transition: transform 80ms linear;
}

.switch:hover .switch-track {
    border-color: var(--clr-primary-main);
}

/* `.switch-track.is-on`: reine Anzeige ohne Checkbox (Zustand in Gamepad-Menüs) */
.switch input:checked ~ .switch-track,
.switch-track.is-on {
    border-color: var(--clr-primary-main);
    background: var(--clr-primary-main);
}

.switch input:checked ~ .switch-track::after,
.switch-track.is-on::after {
    background: var(--clr-text-light);
    transform: translateX(0.95rem);
}

.switch input:focus-visible ~ .switch-track {
    outline: 2px solid var(--clr-secondary-main);
    outline-offset: 2px;
}

.switch input:disabled ~ * {
    opacity: 0.45;
}

.switch:has(input:disabled) {
    cursor: not-allowed;
}

.switch:has(input:disabled):hover .switch-track {
    border-color: var(--clr-border-light);
}

.switch.is-sub {
    margin-left: 0.35rem;
    padding-left: 1rem;
    border-left: 2px solid var(--clr-secondary-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .switch-track,
    .switch-track::after {
        transition: none;
    }
}

/* Checkboxen gibt es nur noch für eine Auswahl (Zeilen, mehrere Einträge): Häkchen in Orange */
input[type="checkbox"] {
    accent-color: var(--clr-primary-main);
}

/* ==========================================================================
   Scrollleisten überall (docs/37_HUD_Bedienelemente_Konzept.md 4.3): eckig und schmal, Petrol
   auf leicht abgedunkelter Schiene, beim Greifen Orange. Chromium und Safari über
   ::-webkit-scrollbar, Firefox über die Standard-Eigenschaften.
   ========================================================================== */
::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

::-webkit-scrollbar-track {
    background: var(--clr-surface-dark);
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background: var(--clr-secondary-main) padding-box;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background-color: var(--clr-primary-main);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--clr-secondary-main) var(--clr-surface-dark);
    }
}

.view-hidden {
    display: none !important;
}

/* Loading Screen (Aufbau: frontend/loading_screen.php, docs/34_Spielstart_ohne_Seitenwechsel_Konzept.md 5.4).
   Zitat, Autor und Ladebalken bilden eine Gruppe, die als Ganzes mittig steht. Dialoge liegen
   darüber (Tokens `--z-loading-screen`, `--z-dialog`). */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--clr-text-primary);
    z-index: var(--z-loading-screen);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading-screen .loading-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding: 0 1rem;
}

.loading-screen .loading-quote {
    margin: 0;
    max-width: 40rem;
    text-align: center;
}

.loading-screen .loading-quote-text {
    margin: 0;
    color: var(--clr-primary-main);
    font-family: var(--font-regular);
    font-size: 1.5rem;
    line-height: 1.4;
    quotes: '\201C' '\201D';
}

.loading-screen .loading-quote-text::before {
    content: open-quote;
}

.loading-screen .loading-quote-text::after {
    content: close-quote;
}

.loading-screen .loading-quote-author {
    margin-top: 0.75rem;
    color: var(--clr-text-light);
    font-family: var(--font-regular);
    font-size: 1.1rem;
}

.loading-screen .loading-quote-author::before {
    content: '\2014\00a0';
}

/* Ladebalken und Aufforderung des Start-Tors in derselben Rasterzelle: Beim Umschalten bleibt die
   Höhe gleich, das Zitat springt nicht */
.loading-screen .loading-status {
    display: grid;
    align-items: center;
    justify-items: center;
}

.loading-screen .loading-progress,
.loading-screen .loading-prompt {
    grid-area: 1 / 1;
}

.loading-screen .loading-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
}

.loading-screen .loader-wrapper {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-screen .loading-text,
.loading-screen .loading-prompt {
    font-size: 1.2em;
    color: var(--clr-primary-main);
    font-family: var(--font-regular);
    font-weight: bold;
    text-align: center;
}

/* Start-Tor (Klasse `is-ready`, StartGate): Aufforderung statt Ladebalken, unten der Hinweis auf
   die Browser-Regel */
.loading-screen .loading-prompt,
.loading-screen .loading-browser-note {
    visibility: hidden;
}

.loading-screen.is-ready .loading-progress {
    visibility: hidden;
}

.loading-screen.is-ready .loading-prompt,
.loading-screen.is-ready .loading-browser-note {
    visibility: visible;
}

/* Tor, das nur das Level verlangt (`start_gate`): Der Browser braucht die Eingabe nicht, der
   Hinweis auf seine Regel wäre falsch */
.loading-screen.is-ready.no-browser-note .loading-browser-note {
    visibility: hidden;
}

.loading-screen .loading-browser-note {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1.5rem;
    color: var(--clr-text-light);
    font-family: var(--font-regular);
    font-size: 0.85rem;
    text-align: center;
}

/* Loading Indicator */
.loader {
    --color-1: var(--clr-primary-main);
    --size: 1px;

    height: calc(30 * var(--size));
    width: calc(10 * var(--size));
    border-radius: calc(4 * var(--size));
    color: var(--color-1);
    background: currentColor;
    position: relative;
    animation: ht 1s ease-in infinite alternate;
    box-shadow:
        calc(15 * var(--size)) 0 0 calc(-1 * var(--size)),
        calc(-15 * var(--size)) 0 0 calc(-1 * var(--size)),
        calc(30 * var(--size)) 0 0 calc(-2 * var(--size)),
        calc(-30 * var(--size)) 0 0 calc(-2 * var(--size)),
        calc(45 * var(--size)) 0 0 calc(-3 * var(--size)),
        calc(-45 * var(--size)) 0 0 calc(-3 * var(--size));
}

@keyframes ht {
    100% {
        height: 0;
    }
}

/* Kontextmenüs (jquery.contextMenu): assets/css/jquery_ui_theme.css */

/* Targeting Scripts Manager Dialog Styles */
.targeting-scripts-table-container .shared-table {
    font-size: 0.95em;
}

.targeting-scripts-table-container .shared-table td {
    padding: 6px 10px;
}

/* FPS Display Overlay (Top-Right Corner) */
.fps-display {
    position: absolute;
    /* Im Spiel rückt die Anzeige neben ein HUD oben bzw. rechts (Offsets setzt HUDTopBar) */
    top: calc(12px + var(--hud-offset-top, 0px));
    right: calc(16px + var(--hud-offset-right, 0px));
    z-index: 10000;
    pointer-events: none;
    user-select: none;
    font-family: 'Orbitron', monospace, sans-serif;
    font-weight: 700;
    line-height: 1;
    /* Zwei Zeilen: Bildrate oben, mittlere Rechenzeit je Frame darunter */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000, 1px -1px 2px #000000, -1px 1px 2px #000000, 0 0 4px #000000;
}

.fps-display .fps-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Die Rechenzeit ist die Nebeninformation und darf etwas zurücktreten */
.fps-display .fps-frame {
    font-size: 0.8em;
    opacity: 0.85;
}