/* ==========================================================================
   PTT – Grundstyles
   ========================================================================== */

:root {
    --bg:          #070a14;
    --bg-soft:     #0d1222;
    --surface:     rgba(20, 27, 48, 0.72);
    --surface-hi:  rgba(32, 42, 72, 0.85);
    --border:      rgba(140, 160, 220, 0.16);
    --text:        #e6eaf5;
    --muted:       #8f9abb;
    --primary:     #5b8cff;
    --primary-hi:  #7aa2ff;
    --danger:      #ff5d6c;
    --success:     #3ecf8e;
    --radius:      14px;
    --shadow:      0 10px 40px rgba(0, 0, 0, 0.45);
    --font:        system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --faction:     var(--primary);
}

/* Fraktionsfarben */
.faction-lumenari { --faction: #5fd4ff; }
.faction-skelthor { --faction: #a57bff; }
.faction-xunnre   { --faction: #ff5a4f; }
.faction-dardie   { --faction: #f5b94a; }
.faction-piraten      { --faction: #ff7a3d; }   /* NPC */
.faction-freihaendler { --faction: #4fe0a0; }   /* NPC */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

/* Nur Desktop (keine Handy-Ansicht, siehe ENTWICKLUNG.md): darunter wird seitlich gescrollt */
body {
    min-width: 1280px;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background:
        radial-gradient(ellipse at 15% 0%, rgba(91, 140, 255, 0.18), transparent 55%),
        radial-gradient(ellipse at 90% 30%, rgba(165, 123, 255, 0.12), transparent 50%),
        var(--bg);
    background-attachment: fixed;
}

/* Sternenhimmel aus reinen CSS-Gradienten */
.stars {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 200px 160px, #fff, transparent),
        radial-gradient(1px 1px at 300px 40px, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 360px 220px, rgba(255,255,255,.8), transparent),
        radial-gradient(1.5px 1.5px at 60px 260px, rgba(255,255,255,.5), transparent);
    background-size: 400px 300px;
    opacity: 0.55;
}

a { color: var(--primary-hi); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 2.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }

.muted   { color: var(--muted); }
.accent  { background: linear-gradient(90deg, #7aa2ff, #c38bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--faction); margin-bottom: .6em; }
.lead    { font-size: 1.1rem; color: var(--muted); max-width: 60ch; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: .65em 1.3em;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, transform .1s;
}
.btn[hidden] { display: none; }   /* sonst überstimmt inline-flex das hidden (Sandro 2026-10-25: „✕ Löschen“ ohne Bauplan) */
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--primary), #7c5bff); color: #fff; box-shadow: 0 6px 20px rgba(91, 140, 255, .35); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-hi), #926fff); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-hi); }
.btn-sm { padding: .4em .9em; font-size: .9rem; }
.btn-xs { padding: .15em .55em; font-size: .78rem; line-height: 1.3; }
.btn-lg { padding: .85em 1.7em; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* --- Meldungen ----------------------------------------------------------- */

.alert {
    padding: .8em 1em;
    margin-bottom: 1.2em;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.alert-error   { border-color: rgba(255, 93, 108, .5);  background: rgba(255, 93, 108, .12); }
.alert-success { border-color: rgba(62, 207, 142, .5);  background: rgba(62, 207, 142, .12); }
.alert-info    { border-color: rgba(91, 140, 255, .5);  background: rgba(91, 140, 255, .12); }

/* ==========================================================================
   Offgame (Startseite, Login, Registrierung)
   ========================================================================== */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.2rem 1rem;
}
.logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--text);
    text-decoration: none !important;
}
.site-nav { display: flex; align-items: center; gap: 1.2rem; }
.site-nav a:not(.btn) { color: var(--muted); }
.site-nav a.active, .site-nav a:not(.btn):hover { color: var(--text); text-decoration: none; }

.site-main { max-width: 1140px; margin: 0 auto; padding: 1rem; }
.site-footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 3rem 1rem 2rem; }

.hero { padding: 6rem 0 3rem; }
.hero h1 { font-size: 3.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.section { padding: 2.5rem 0; }
.section-title { font-size: 1.6rem; margin-bottom: 1.2rem; }

.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.feature {
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.feature-icon { font-size: 1.8rem; display: block; margin-bottom: .4rem; }
.feature p { color: var(--muted); margin: 0; }

/* --- Fraktions-Karten (Startseite, Registrierung, Ingame) ---------------- */

.faction-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.faction-card {
    position: relative;
    display: block;
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-top: 3px solid var(--faction);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--faction) 14%, transparent), transparent 70%),
        var(--surface);
}
.faction-card h2, .faction-card h3 { color: var(--faction); }
.faction-card p { color: var(--muted); font-size: .95rem; margin: 0; }
.faction-epithet {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
    margin-bottom: .3rem;
}

/* Auswahl im Registrierungsformular */
.faction-option { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.faction-option:hover { transform: translateY(-2px); }
.faction-option input { position: absolute; opacity: 0; pointer-events: none; }
.faction-option:has(input:checked) {
    border-color: var(--faction);
    box-shadow: 0 0 0 2px var(--faction), 0 10px 30px color-mix(in srgb, var(--faction) 30%, transparent);
}
.faction-option:has(input:checked)::after {
    content: "✓";
    position: absolute;
    top: .8rem;
    right: 1rem;
    font-weight: 800;
    color: var(--faction);
}
.faction-option:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }

/* --- Formulare ----------------------------------------------------------- */

.auth-card {
    max-width: 440px;
    margin: 2rem auto;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}
.auth-card-wide { max-width: 1000px; }
.auth-switch { text-align: center; margin: 1.4rem 0 0; color: var(--muted); }

.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.field { display: grid; gap: .35rem; }
.field > span, .faction-picker legend { font-size: .9rem; font-weight: 600; color: var(--muted); }
.field input, .field textarea, .field select {
    width: 100%;
    padding: .75em .9em;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(5, 8, 18, .6);
    color: var(--text);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 140, 255, .25); }
.has-error input { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .85rem; }

.faction-picker { border: 0; padding: 0; margin: .4rem 0 0; min-width: 0; }
.faction-picker legend { margin-bottom: .6rem; padding: 0; }
.faction-picker .faction-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.faction-picker .field-error { display: block; margin-top: .5rem; }

/* ==========================================================================
   Ingame
   ========================================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 60px;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 10, 20, .85);
    backdrop-filter: blur(10px);
}
/* Kolonie-Schnellleiste in der Kopfzeile: eigene Planeten/Monde, freie Plätze als leere Umlaufbahn */
.colony-bar { flex: 1; display: flex; justify-content: center; align-items: center; gap: 1.4rem; min-width: 0; }
.cbar-group { display: flex; align-items: center; gap: .55rem; }
.cbar-group + .cbar-group { padding-left: 1.4rem; border-left: 1px solid var(--border); }
.cbar-slot { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
             text-decoration: none; transition: transform .15s, box-shadow .15s; }
.cbar-moon .cbar-slot { width: 28px; height: 28px; }
.cbar-own img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .6)); }
.cbar-own:hover, .cbar-own:focus-visible { transform: translateY(-2px) scale(1.12); text-decoration: none;
             box-shadow: 0 0 14px color-mix(in srgb, var(--faction) 60%, transparent); }
.cbar-own.is-current { box-shadow: 0 0 0 2px var(--faction), 0 0 14px color-mix(in srgb, var(--faction) 70%, transparent); }
.cbar-own.is-home::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%;
             background: var(--faction); box-shadow: 0 0 0 2px rgba(7, 10, 20, .9); }
.cbar-free { border: 2px dashed rgba(150, 170, 230, .28); background: radial-gradient(circle, rgba(150, 170, 230, .08) 0 45%, transparent 46%); }
.cbar-free::before { content: '+'; color: rgba(150, 170, 230, .45); font-size: .95rem; line-height: 1; }
.cbar-moon .cbar-free::before { font-size: .8rem; }
.cbar-free:hover, .cbar-free:focus-visible { border-color: color-mix(in srgb, var(--faction) 60%, transparent); outline: none; }
.cbar-locked { border: 2px dotted rgba(150, 170, 230, .14); opacity: .55; }
.cbar-locked::before { content: '🔒'; font-size: .62rem; filter: grayscale(1); opacity: .6; }
.cbar-moon .cbar-locked::before { font-size: .52rem; }
.cbar-locked:hover, .cbar-locked:focus-visible { opacity: .9; outline: none; }
/* Forschung läuft, die diesen Platz bringt: Umlaufbahn leuchtet und ein kleiner Mond kreist */
.cbar-locked.is-coming { opacity: 1; border-style: dashed; border-color: color-mix(in srgb, var(--faction) 70%, transparent);
                         animation: cbar-coming 2.4s ease-in-out infinite; }
.cbar-locked.is-coming::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; opacity: 1; filter: none;
                         background: radial-gradient(circle at 50% 0, var(--faction) 0 3px, transparent 4px);
                         animation: cbar-orbit 3s linear infinite; }
/* Anstehende Aufgabe (Sandro 2026-10-07): der nächste freie Platz pulsiert genauso – das „+“ bleibt, der Punkt kreist per ::after */
.cbar-free.is-next { border-color: color-mix(in srgb, var(--faction) 70%, transparent); animation: cbar-coming 2.4s ease-in-out infinite; }
.cbar-free.is-next::before { color: color-mix(in srgb, var(--faction) 85%, white); }
.cbar-free.is-next::after { content: ''; position: absolute; inset: -4px; border-radius: 50%;
                            background: radial-gradient(circle at 50% 0, var(--faction) 0 3px, transparent 4px); animation: cbar-orbit 3s linear infinite; }
@keyframes cbar-coming { 50% { box-shadow: 0 0 12px color-mix(in srgb, var(--faction) 65%, transparent); } }
@keyframes cbar-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cbar-locked.is-coming, .cbar-locked.is-coming::before, .cbar-free.is-next, .cbar-free.is-next::after { animation: none; } }
.cbar-tip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); z-index: 30;
            display: grid; gap: .15rem; width: max-content; max-width: 16rem; padding: .45rem .65rem; border-radius: 8px;
            background: #10172b; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
            font-size: .82rem; color: var(--text); text-align: left; white-space: normal;
            opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; }
.cbar-tip small { color: var(--muted); font-size: .74rem; }
.cbar-tip .tag { margin-left: .3rem; font-size: .65rem; vertical-align: middle; }
.cbar-slot:hover .cbar-tip, .cbar-slot:focus-visible .cbar-tip { opacity: 1; transform: translate(-50%, 0); }
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.topbar-user form { margin: 0; }
/* Runden-Uhr in der Kopfzeile (kleine Ausgabe der Uhr von der Übersicht) */
.topbar-round { display: flex; align-items: center; gap: .7rem; padding-right: 1rem; margin-right: .2rem; border-right: 1px solid var(--border);
    font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; }
.tr-ring { width: 44px; height: 44px; transform: rotate(-90deg); flex: none; }
.tr-ring .ring-bg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3.5; }
.tr-ring .ring-fg { fill: none; stroke: var(--faction); stroke-width: 3.5; stroke-linecap: round;
    filter: drop-shadow(0 0 3px var(--faction)); transition: stroke-dashoffset 1s linear; }
.topbar-round.is-paused .ring-fg { stroke: #8f9abb; filter: none; }
.tr-text { display: grid; line-height: 1.25; }
.tr-text > span { font-size: .95rem; }
.tr-text strong { font-size: 1.25rem; }
.tr-text small { font-size: .82rem; color: var(--muted); }
.tr-text b { color: var(--text); font-weight: 600; }
.username { font-weight: 600; }
.faction-badge {
    padding: .15em .7em;
    border: 1px solid var(--faction);
    border-radius: 999px;
    color: var(--faction);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.app { display: flex; min-height: calc(100vh - 60px); }

.sidebar {
    flex: 0 0 230px;
    padding: 1.2rem .8rem;
    border-right: 1px solid var(--border);
    background: rgba(10, 14, 28, .6);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.sidebar a, .sidebar .disabled {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .8rem;
    border-radius: 10px;
    color: var(--text);
}
.sidebar a:hover { background: var(--surface-hi); text-decoration: none; }
.sidebar a.active {
    background: color-mix(in srgb, var(--faction) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--faction);
}
.sidebar .disabled { color: var(--muted); opacity: .55; cursor: not-allowed; }
.sidebar .disabled small { margin-left: auto; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.sidebar .icon { width: 1.4em; text-align: center; }

.content { flex: 1; min-width: 0; padding: 2rem 2.5rem; }

.panel {
    padding: 1.5rem;
    margin-bottom: 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.panel-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.panel-grid .panel { margin: 0; }
.welcome-panel { border-left: 3px solid var(--faction); }

.info-list { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0; }
.info-list dt { color: var(--muted); }
.info-list dd { margin: 0; overflow-wrap: anywhere; }

/* ==========================================================================
   Kolonien
   ========================================================================== */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-head h1 { margin-bottom: .2rem; }
.page-head p { margin: 0; }
.small { font-size: .85rem; }

.btn-danger { background: rgba(255, 93, 108, .15); color: #ffb3bb; border-color: rgba(255, 93, 108, .5); }
.btn-danger:hover { background: rgba(255, 93, 108, .3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.tag {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .55em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--faction) 20%, transparent);
    color: var(--faction);
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
}

/* Planeten-Icons (32px Pixelgrafik vergrößert) */
.colony-icon { width: 48px; height: 48px; image-rendering: pixelated; flex: none; }
.colony-icon-lg { width: 72px; height: 72px; }
.colony-title { display: flex; align-items: center; gap: 1rem; }

/* --- Liste --------------------------------------------------------------- */

.colony-list { display: grid; gap: .6rem; }
.colony-item {
    display: grid;
    grid-template-columns: minmax(230px, 1.15fr) minmax(200px, 1fr) minmax(220px, 1fr) minmax(250px, 1.15fr);
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s, background .15s;
}
.colony-item:hover { border-color: var(--faction); background: var(--surface-hi); text-decoration: none; }
.colony-item { position: relative; }   /* ganze Zeile klickbar über .colony-link, Umbenennen liegt darüber */
.colony-link { color: inherit; }
.colony-link::after { content: ""; position: absolute; inset: 0; }
.colony-link:hover { text-decoration: none; }
.colony-icon, .colony-coords, .colony-usage, .colony-dev, .colony-room, .colony-loc { pointer-events: none; }   /* Klick geht durch zum Link */
.colony-rename { display: inline-flex; align-items: center; vertical-align: middle; position: relative; z-index: 1; margin-left: .3rem; }
.colony-rename summary { list-style: none; cursor: pointer; color: var(--muted); padding: 0 .3rem; }
.colony-rename summary::-webkit-details-marker { display: none; }
.colony-order { display: inline-flex; gap: .15rem; position: relative; z-index: 1; margin: 0 0 0 .2rem; order: 9; }
.colony-order button { width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: rgba(5, 8, 18, .5);
                       color: var(--muted); font-size: .7rem; cursor: pointer; line-height: 1; }
.colony-order button:hover:not(:disabled) { color: var(--text); border-color: var(--faction); }
.colony-order button:disabled { opacity: .3; cursor: default; }
.colony-rename summary:hover, .colony-rename[open] summary { color: var(--faction); }
.colony-rename form { display: flex; gap: .4rem; margin: 0 0 0 .3rem; }
.colony-rename input[type="text"] { width: 16rem; }
/* Monde nicht mehr eingerückt (Sandro 2026-10-09: bündig) – nur das kleinere Bild zeigt den Mond */
.colony-item.is-moon .colony-icon { width: 36px; height: 36px; margin: 6px; }
.colony-main .muted { display: block; font-size: .88rem; }
.colony-coords { font-family: ui-monospace, monospace; color: var(--muted); }
.colony-usage { font-size: .82rem; color: var(--muted); }
.bar { height: 6px; margin-top: .3rem; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar > div { height: 100%; background: var(--faction); }

/* --- Oberfläche ---------------------------------------------------------- */

.colony-view { display: grid; grid-template-columns: minmax(0, auto) minmax(280px, 1fr); gap: 1.2rem; align-items: start; }
.colony-surface { margin: 0; }
/* Baumenü: Reiter Bauen | Terraforming im Seitenpanel */
.subtabs { display: flex; gap: .3rem; margin: 1rem 0 .7rem; padding: .25rem; border-radius: 10px; background: rgba(5, 8, 18, .45); border: 1px solid var(--border); }
.subtabs button { flex: 1; white-space: nowrap; padding: .45rem .4rem; border: 0; border-radius: 7px; background: transparent; color: var(--muted);
                  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.subtabs button:hover { color: var(--text); }
.subtabs > a { flex: 1; text-align: center; white-space: nowrap; padding: .45rem .4rem; border-radius: 7px; color: var(--muted);
               font-size: .85rem; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.subtabs > a:hover { color: var(--text); text-decoration: none; }
.subtabs > a.active { background: color-mix(in srgb, var(--faction) 22%, transparent); color: var(--text); }
.settings-tabs { max-width: 560px; margin-top: 0; }
.settings-colony { display: grid; gap: 1rem; }
.panel-head.colony-rename-head { align-items: center; justify-content: flex-start; gap: 1.5rem; margin-bottom: 0; }   /* Kolonie-Name in der Kopfzeile (Sandro 2026-10-23) */
.colony-rename { display: flex; align-items: center; gap: .6rem; }
.colony-rename input { width: 16rem; max-width: 100%; padding: .45rem .75rem; border: 1px solid var(--border); border-radius: 10px;
                       background: rgba(5, 8, 18, .6); color: var(--text); font: inherit; }
.colony-rename input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 140, 255, .25); }
.settings-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; padding-top: 1rem; border-top: 1px solid var(--border); }
.settings-row:first-of-type { border-top: 0; padding-top: 0; }
.settings-colony > .settings-row { border-top: 1px solid var(--border); padding-top: 1rem; }   /* jeder Bereich mit Trennlinie (Sandro 2026-10-23) */
/* Heimatwahl als Planetenbilder wie in der Schnellleiste (Sandro 2026-10-23) */
.home-pick { display: flex; flex-wrap: wrap; gap: .7rem; width: 100%; }
.home-tile { position: relative; display: grid; justify-items: center; gap: .15rem; width: 156px; padding: .7rem .5rem .6rem; text-align: center;
             border: 1px solid var(--border); border-radius: 12px; background: rgba(5, 8, 18, .35); cursor: pointer;
             transition: border-color .15s, box-shadow .15s, transform .15s; }
.home-tile input { position: absolute; opacity: 0; pointer-events: none; }
.home-tile-img { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: .2rem; transition: transform .15s, box-shadow .15s; }
.home-tile-img img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6)); }
.home-tile strong { font-size: .85rem; line-height: 1.2; overflow-wrap: anywhere; }
.home-tile small { font-size: .7rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.home-tile .tag { margin: .2rem 0 0; font-size: .65rem; }
.home-tile:hover:not(.is-home) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--faction) 60%, var(--border)); }
.home-tile:hover:not(.is-home) .home-tile-img { transform: scale(1.08); box-shadow: 0 0 16px color-mix(in srgb, var(--faction) 55%, transparent); }
.home-tile:has(input:checked) { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 14%, rgba(5, 8, 18, .35));
                                box-shadow: 0 0 0 1px var(--faction), 0 0 18px color-mix(in srgb, var(--faction) 35%, transparent); }
.home-tile:has(input:checked) .home-tile-img { box-shadow: 0 0 0 2px var(--faction), 0 0 18px color-mix(in srgb, var(--faction) 70%, transparent); }
.home-tile:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.home-tile.is-home { cursor: default; opacity: .75; border-style: dashed; }
.home-tile:has(input:disabled):not(.is-home) { cursor: not-allowed; opacity: .55; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; width: 100%; }
.settings-row h3 { margin: 0; width: 100%; }
.home-form p { width: 100%; margin: 0; }
.settings-row p { margin: 0; }
.immigration-form { flex-direction: column; align-items: flex-start; }
/* Bevölkerung: Einwanderung + Wohnraum-Grenze (Sandro 2026-10-23) */
.population-form { display: grid; gap: .8rem; }
.pop-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.pop-head h3 { width: auto; margin-right: .4rem; }
.pop-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 999px;
            background: rgba(5, 8, 18, .35); font-size: .8rem; color: var(--muted); }
.pop-chip b { color: var(--text); }
.pop-chip img { width: 18px; height: 18px; image-rendering: pixelated; }
.pop-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; gap: .8rem; }
.pop-box { display: grid; align-content: start; gap: .55rem; margin: 0; padding: .7rem .9rem .8rem; border: 1px solid var(--border); border-radius: 12px;
           background: rgba(5, 8, 18, .25); min-width: 0; }
.pop-box legend { padding: 0 .35rem; font-weight: 600; font-size: .85rem; }
.pop-box p { margin: 0; }
[data-housing-note]:empty { display: none; }
[data-housing-note] { padding: .45rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .04); }
[data-housing-note].is-warn { background: rgba(255, 90, 90, .1); border: 1px solid rgba(255, 90, 90, .35); }
.radio-line { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.radio-line .count-input { width: 6em; }
.abandon-box > summary { list-style: none; width: fit-content; }
.abandon-box > summary::-webkit-details-marker { display: none; }
.abandon-box[open] { flex-direction: column; align-items: stretch; }
.abandon-form { display: grid; gap: .5rem; padding: .8rem 1rem; border: 1px solid rgba(255, 90, 90, .4); border-radius: 10px; background: rgba(255, 60, 60, .06); }
.abandon-code { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.abandon-code code { font-size: 1.2rem; letter-spacing: .25em; padding: .25rem .6rem; border-radius: 8px; background: rgba(5, 8, 18, .6); user-select: all; }
.abandon-code input { width: 9em; text-transform: uppercase; letter-spacing: .15em; }
.settings-colony input[type="number"], .abandon-code input { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px;
                                                          background: rgba(5, 8, 18, .6); color: var(--text); font: inherit; }
.subtabs button.active { background: color-mix(in srgb, var(--faction) 22%, transparent); color: var(--text); }
.subtabs button[data-subtab="terraform"].active { background: rgba(110, 230, 140, .18); }
.build-empty { padding: .6rem .7rem; border: 1px dashed var(--border); border-radius: 10px; }

.field-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 60px));
    gap: 3px;
}
.zone-label {
    grid-column: 1 / -1;
    margin: .6rem 0 .2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.zone-label:first-child { margin-top: 0; }

.tile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 4px;
    background-size: cover;
    image-rendering: pixelated;
    outline: 1px solid rgba(0, 0, 0, .35);
    transition: transform .1s, filter .1s;
}
.tile img, .tile > i { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.tile > i { background-size: cover; }   /* Gebäude im Kolonie-Raster als Klasse b-… (ingame/colony.php) */
a.tile:hover { filter: brightness(1.25); transform: scale(1.06); z-index: 1; }
/* Messreihe des Kolonieschiffs (ingame/survey_box.php): Landezonen vermessen, Landeplatz wählen */
.survey-box { margin: .6rem 0; }
.survey-options { display: grid; gap: .5rem; margin: .6rem 0; }
.survey-option { border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem; background: rgba(5, 8, 18, .4); }
.survey-option summary { cursor: pointer; display: flex; align-items: baseline; gap: .7rem; }
.survey-option summary .inline-form { margin-left: auto; }   /* „Landezone N vermessen“ rechts in der Zeile (Sandro 2026-10-19) */
.survey-option.is-open summary, .survey-option.is-running summary { cursor: default; }
.survey-option.is-ready { border-color: rgba(255, 255, 255, .35); }
.survey-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.landing-pick .field-grid { margin: .6rem 0; }
.landing-pick .field-grid form { display: contents; }
.tile.landing-site { border: 0; padding: 0; cursor: pointer; outline: 2px solid rgba(255, 255, 255, .85); }   /* für alle Fraktionen gleich: weiss umrandet (Sandro 2026-10-19) */
.tile.landing-site:hover { filter: brightness(1.3); transform: scale(1.08); z-index: 1; outline-color: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .7); }
.tile.landing-no { filter: brightness(.4) saturate(.5); }
.tile.is-selected { outline: 2px solid var(--faction); outline-offset: 1px; z-index: 2; box-shadow: 0 0 14px var(--faction); }

/* --- Seitenpanel --------------------------------------------------------- */

.field-panel { position: sticky; top: 80px; margin: 0; }
.field-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.field-head h2 { margin: 0; }
.field-head p { margin: 0; }
.tile-preview { width: 72px; flex: none; }
.upgrade-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }   /* Ausbau mit Bild der nächsten Stufe (Sandro 2026-10-13) */
.upgrade-head .tile-preview { width: 56px; }
.upgrade-head .build-title { margin: 0 0 .2rem; }
.upgrade-head p { margin: 0; }
.upgrade-head .upgrade-go { margin-left: auto; flex: none; }
.tile-mini { width: 40px; flex: none; }

.build-title { font-size: .95rem; color: var(--muted); margin-top: 1rem; }
.build-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.build-list > li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .5rem .6rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(5, 8, 18, .4);
}
.build-list > li.is-locked { opacity: .55; }
.build-info { flex: 1; min-width: 0; display: grid; }
.build-list form { margin: 0; }

/* ==========================================================================
   Datenbank
   ========================================================================== */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: 1.5rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}
.tabs a, .tabs .disabled {
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--text);
    font-size: .92rem;
    font-weight: 600;
}
.tabs a:hover { background: var(--surface-hi); text-decoration: none; }
.tabs a.active {
    border-color: var(--faction);
    background: color-mix(in srgb, var(--faction) 16%, transparent);
    color: var(--faction);
}
.tabs .disabled { color: var(--muted); opacity: .55; cursor: not-allowed; }
.tabs .disabled small { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }

.codex-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 2rem; }
.codex-grid-wide { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
.codex-card { margin: 0; padding: 1.2rem; }
.codex-card p:last-child { margin-bottom: 0; }
.codex-card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.codex-card-head h2, .codex-card-head h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.codex-card-head p { margin: 0; }
.codex-sub {
    margin: 1rem 0 .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.tile-mini.tile, .chip .tile { display: inline-block; }
.chip .tile { width: 22px; flex: none; border-radius: 3px; }
.tag-plain { margin-left: 0; }

.chip-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .55rem .2rem .25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(5, 8, 18, .4);
    font-size: .85rem;
}
.chip small { color: var(--muted); font-variant-numeric: tabular-nums; }

.zone-title { margin-top: .5rem; }
.planet-row { display: flex; flex-wrap: wrap; gap: .2rem; }
.planet-row img { width: 32px; height: 32px; image-rendering: pixelated; }

/* --- Himmelskörper nach Stufe ----------------------------------------------- */

.tier { --tier: var(--primary); margin-bottom: 1rem; }
.tier-friendly { --tier: #3ecf8e; }
.tier-moderate { --tier: #f5b94a; }
.tier-hostile  { --tier: #ff5d6c; }

.tier-head { padding-left: .9rem; border-left: 3px solid var(--tier); margin-bottom: 1rem; }
.tier-head h2 { color: var(--tier); margin-bottom: .1rem; }
.tier-head p { margin: 0; }

.planet-card {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    border-top: 3px solid var(--tier);
    background:
        radial-gradient(circle at 70px 70px, color-mix(in srgb, var(--tier) 12%, transparent), transparent 140px),
        var(--surface);
}
.planet-card .eyebrow { color: var(--tier); margin-bottom: .2rem; }
.planet-card h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.planet-big { width: 128px; height: 128px; flex: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.planet-big.is-moon { width: 96px; height: 96px; margin: 16px; }
.planet-info { flex: 1; min-width: 0; }

/* --- Weltraum (Karte) ------------------------------------------------------- */

.jump-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.jump-links a {
    padding: .25rem .7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--muted);
}
.jump-links a:hover { color: var(--text); border-color: var(--faction); text-decoration: none; }

.codex-section { scroll-margin-top: 80px; margin-bottom: 1rem; }
.codex-section > h2 { margin-bottom: .2rem; }

.map-tile { width: 96px; height: 96px; flex: none; border-radius: 8px; outline: 1px solid var(--border); }
.star-big { width: 96px; height: 96px; flex: none; }
.star-mini { width: 22px; height: 22px; flex: none; transform: scale(1.6); }
.chip-resource {
    padding-left: .55rem;
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    color: var(--success);
}

/* --- Raumschiffe ------------------------------------------------------------- */

.ship-factions { margin-bottom: 1rem; }
.ship-factions .tabs { margin-bottom: 1rem; }
.ship-factions .tabs small { font-weight: 400; opacity: .7; }

.ship-card {
    border-top: 3px solid var(--faction);
    background:
        radial-gradient(circle at 90px 90px, color-mix(in srgb, var(--faction) 13%, transparent), transparent 150px),
        var(--surface);
}
.ship-card-main { display: flex; gap: 1.1rem; align-items: flex-start; }
.ship-big { width: 160px; height: 160px; flex: none; margin: -.4rem 0 -.4rem -.4rem; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }
.ship-info { flex: 1; min-width: 0; }
.ship-info .eyebrow { margin-bottom: .2rem; }
.ship-info h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.ship-flavor { font-style: italic; }

.ship-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
    margin: .9rem 0 .7rem;
}
.ship-stats div {
    padding: .3rem .55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(5, 8, 18, .4);
}
.ship-stats dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ship-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ship-stats dd small { font-weight: 400; color: var(--muted); }
.ship-stats .is-zero { opacity: .4; }
.chip-ability { padding-left: .55rem; border-color: color-mix(in srgb, var(--faction) 45%, transparent); color: var(--faction); }

.ship-others { display: flex; gap: .5rem; }
.ship-others a {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem .2rem .2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--faction);
    font-size: .82rem;
    min-width: 0;
}
.ship-others a:hover { border-color: var(--faction); text-decoration: none; }
.ship-others img { width: 44px; height: 44px; flex: none; }
.ship-others span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Ressourcen & Module ---------------------------------------------------- */

.res-big { width: 64px; height: 64px; flex: none; }
.res-mini { width: 20px; height: 20px; flex: none; }
a.chip { color: var(--text); }
a.chip:hover { border-color: var(--faction); text-decoration: none; }
.res-card .codex-card-head { align-items: flex-start; }

.res-chain {
    margin-bottom: 1.2rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--faction) 40%, var(--border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--faction) 6%, transparent);
}
.res-chain-title { color: var(--faction); margin: 0 0 .8rem; }
.res-chain-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .6rem; align-items: stretch; }
.res-chain-row .codex-card { border-top: 3px solid var(--faction); }
.res-chain-arrow { align-self: center; font-size: 1.6rem; color: var(--faction); }
.res-chain-module { color: var(--text); }
.res-chain-module:hover { text-decoration: none; border-color: var(--faction); }
.res-chain-module .eyebrow { margin-bottom: .1rem; }
.res-chain-swap { display: flex; flex-wrap: wrap; gap: .4rem; align-content: center; padding: .8rem; }
.res-chain-swap p { flex-basis: 100%; margin: .3rem 0 0; }
.res-chain-swap .chip { border-color: var(--faction); }

.module-card .tag { margin-left: 0; margin-right: .3rem; }
.module-card.faction-lumenari, .module-card.faction-skelthor,
.module-card.faction-xunnre, .module-card.faction-dardie { border-top: 3px solid var(--faction); }
.chip-bonus { padding-left: .55rem; font-weight: 600; }
.chip-ship { display: inline-flex; align-items: center; gap: .35rem; }
.chip-ship img { width: 22px; height: 22px; object-fit: contain; }
.chip-bonus.is-good { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.chip-bonus.is-bad  { color: #ff8a95; border-color: rgba(255, 93, 108, .45); }
.module-effect { margin: .7rem 0 .2rem; color: var(--faction); }
.module-effect::before { content: "✦ "; }

/* ==========================================================================
   Flotte und Schiffsansicht
   ========================================================================== */

/* Kleine Formulare in einer Zeile (Umbenennen, Flotte wählen …) */
.inline-form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.inline-form input[type="text"], .inline-form select, .steer-pad input, .fleet-table select {
    padding: .35em .6em;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(5, 8, 18, .6);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
}
.inline-form input[type="text"] { width: 14em; }
.page-head-actions { display: flex; align-items: center; gap: .5rem; }
.check { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); cursor: pointer; }
.nowrap { white-space: nowrap; }
.text-on { color: #6fd8ff; }
.text-bad { color: var(--danger); }

/* Balken */
.meter { height: 6px; min-width: 70px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--success); }
.meter-hull > span   { background: #3ecf8e; }
.meter-shield > span { background: #4fb3ff; box-shadow: 0 0 6px #4fb3ff; }
.meter-off > span    { background: #4a5878; }
.meter-energy > span { background: #f5d04a; }
.meter-fuel > span   { background: #b07cff; }
.meter-crew > span   { background: #e58ad0; }
.meter-cargo > span  { background: #d9a35b; }
.meter-tank > span   { background: #4fd1c5; }
/* Flottenliste: zwei Werte untereinander je Zelle (Hülle/Schilde, EPS/Reaktor) */
.fleet-table .stat-cell { min-width: 130px; }
.stat-line + .stat-line { margin-top: .35rem; }
.fleet-table .stat-head { display: flex; justify-content: space-between; gap: .35rem; }
.stat-head span { color: var(--muted); white-space: nowrap; }
.stat-head i { font-style: normal; opacity: .75; }
.stat-head b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-line .meter { margin-top: .15rem; }
.stat-line { display: flex; align-items: center; gap: .45rem; }
.stat-line > img { flex: none; width: 22px; height: 22px; }
.stat-body { flex: 1; min-width: 0; }
/* Flottenliste: Module als Mini-Icons (5 je Zeile), Zusatzmodule eigene Spalte (2 je Zeile) */
.mini-mods { display: grid; grid-template-columns: repeat(5, 20px); gap: 2px; }
.mini-mod { display: block; width: 20px; height: 20px; border-bottom: 2px solid transparent; border-radius: 3px; }
.mini-mod.is-damaged { border-bottom-color: var(--integ); }   /* Zustandsstrich nur bei Schaden (Sandro: „viel zu dominant“) */
.mini-mod.is-low { box-shadow: 0 0 0 1px var(--danger); }      /* Crewquartier: weniger Crew als die Standardcrew */
.mini-mod img { display: block; width: 18px; height: 18px; margin: 0 auto; }
.mini-mod.is-empty, .mini-mod.is-free { opacity: .35; }
.mini-extras { grid-template-columns: repeat(2, 20px); }
/* Module und „+ / Mod.“ eng beieinander (Sandro 2026-10-26), danach die Punkte */
.fleet-table td:has(> .mini-mods:not(.mini-extras)), .fleet-table th.col-mods { padding-right: 0; }
.fleet-table td:has(> .mini-extras), .fleet-table th.col-extras { padding-left: .3rem; }
.fleet-table th.col-extras { letter-spacing: .02em; }
.fleet-table .pts-cell { text-align: right; font-variant-numeric: tabular-nums; padding-right: .8rem; }

/* Alarmstufe */
.alert-dot { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .5); }
.alert-green  { background: #22d04b; box-shadow: 0 0 6px rgba(34, 208, 75, .6); }
.alert-yellow { background: #f5d04a; box-shadow: 0 0 6px rgba(245, 208, 74, .6); }
.alert-red    { background: #ff3b3b; box-shadow: 0 0 6px rgba(255, 59, 59, .7); }

/* Flotten-Übersicht */
.fleet-group { padding: 0; overflow: hidden; }
.fleet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.2rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--faction) 7%, transparent);
}
.fleet-head h2 { margin: 0; font-size: 1.1rem; }
.fleet-head h2 small { font-size: .8rem; font-weight: 400; margin-left: .5rem; }
.fleet-head-actions { display: flex; gap: .5rem; }
.fleet-group > p { padding: 1rem 1.2rem; margin: 0; }
/* Eine Tabelle für Flotten, Einzelschiffe und Stationen: Abschnitte als Zwischenzeilen (Sandro 2026-10-26) */
.fleet-table tr.sec-head td { padding: 0; border-bottom: 0; }
.fleet-table tbody tr.sec-head, .fleet-table tbody tr.sec-head:hover { background: none; }
.fleet-table tbody + tbody tr.sec-head td { border-top: 1rem solid var(--bg, #0b0f1e); }
.fleet-table td.sec-empty { padding: 1rem 1.2rem; }
.fleet-table tbody tr.col-head, .fleet-table tbody tr.col-head:hover { background: none; }

.fleet-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fleet-table th {
    padding: .45rem .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.fleet-table td { padding: .25rem .4rem; border-bottom: 1px solid rgba(140, 160, 220, .08); vertical-align: middle; }
.fleet-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
.fleet-table tbody tr:hover { background: rgba(255, 255, 255, .05); }
.fleet-table td small { display: block; line-height: 1.3; }
.fleet-table .col-img { width: 76px; padding: .15rem .4rem; }
.fleet-table .col-img img { display: block; width: 64px; height: 64px; }
.ship-name { font-weight: 700; color: var(--faction); }
.owner-name { color: var(--faction); font-weight: 600; }

/* Schiffsansicht */
.ship-head-img { width: 96px; height: 96px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.page-head .alert-dot { width: 16px; height: 16px; margin-left: .3rem; }

.stat-meter { display: grid; gap: .25rem; }
.stat-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-meter .meter { height: 8px; }

/* Kopf: Name | Standort + Flotte | Umbenennen */
.ship-page-head { align-items: stretch; gap: 1.2rem; }
.ship-head-info h2 { font-size: .95rem; margin: 0 0 .4rem; }
.ship-head-info p { margin: 0 0 .4rem; }
.ship-head-info .action-row { margin-bottom: 0; }
/* Statusleiste: Balken + alle Werte in einer Kachel */
.ship-info .control-row { flex-wrap: wrap; }
.ship-info .alert-buttons { flex-wrap: wrap; }
.ship-info .action-row { flex-wrap: wrap; }
.ship-box { padding: 1.1rem 1.2rem; }
.panel-title { margin: 0 0 .8rem; font-size: 1rem; letter-spacing: .02em; }
.panel-title small { font-weight: 400; font-size: .8rem; margin-left: .4rem; }

/* Nahbereichskarte */
.nmap { display: grid; grid-template-columns: 1.6rem repeat(var(--cols), var(--tile, 48px)); gap: 1px; }   /* Feldgröße je Sensor (ship.php) */
.ntile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: url(../gfx/map/leerraum.png) center / cover;
    transition: filter .1s;
}
.ntile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ntile.kind-planet img { padding: 8%; }
.ntile.kind-moon img { padding: 26%; }
.ntile.kind-star img { transform: scale(1.5); }
.ntile:hover { filter: brightness(1.4); z-index: 2; }
.ntile.is-dark { filter: brightness(.68) saturate(.75); }
.ntile.is-dark:hover { filter: brightness(1); }
.ntile.is-here { outline: 2px solid var(--faction); outline-offset: -2px; box-shadow: 0 0 14px var(--faction); z-index: 3; }
.ntile.is-target { outline: 2px dashed #fff; outline-offset: -2px; z-index: 3; }
.nbadge {
    position: absolute;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    color: #07101c;
}
.ntile .nbadge-mine { right: 2px; bottom: 2px; }
.ntile .nbadge-foreign { left: 2px; top: 2px; }
.nbadge-mine { background: var(--faction); box-shadow: 0 0 6px var(--faction); }
.nbadge-foreign { background: #ff5a4f; color: #fff; }
/* Wrack auf der Nahbereichskarte (inc/wrecks.php): kleines Wrackbild unten links */
.ntile .nwreck { position: absolute; inset: auto auto 1px 1px; width: 50%; height: 50%; z-index: 1; filter: drop-shadow(0 0 3px #ff7a2a); pointer-events: none; }
.map-legend .nbadge { position: static; display: inline-block; vertical-align: middle; }

.ship-steer { display: flex; align-items: center; gap: 1.5rem; margin-top: 1rem; }
.steer-pad { display: grid; grid-template-columns: repeat(3, 44px); gap: .3rem; }
.steer-pad .btn { padding: .35em 0; }
.steer-pad input { width: 44px; text-align: center; padding: .35em .1em; }
.steer-info p { margin: 0 0 .4rem; }
.course {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border: 1px dashed rgba(255, 255, 255, .35);
    border-radius: 10px;
}
.course p { margin: 0 0 .5rem; }

.control-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.alert-buttons { display: flex; gap: .3rem; }
.alert-buttons .btn { display: inline-flex; align-items: center; gap: .35rem; }
.btn.is-active { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, transparent); }
.here-body { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.here-body div { display: grid; line-height: 1.3; }
.action-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.ship-box .inline-form { flex-wrap: wrap; }
.ship-stats-compact { margin-top: 0; }
.module-slots { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.module-slot.is-filled { position: relative; width: calc(40px * var(--size, 1) + .35rem * (var(--size, 1) - 1)); border-style: solid;
                        display: grid; place-items: center; background: color-mix(in srgb, var(--faction) 12%, transparent); }
.module-slot.is-filled img { width: 30px; height: 30px; }
.module-slot.is-filled b { position: absolute; right: 2px; bottom: 0; font-size: .65rem; color: var(--faction); }
.sys-led { position: absolute; left: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #5a6070; }
.is-on .sys-led { background: #4ade80; box-shadow: 0 0 4px #4ade80; }
.ship-mods { margin: .5rem 0 0 calc(56px + .8rem); font-size: .9rem; }
.core-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .3rem .6rem; margin: .5rem 0 0; }
.core-slot { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.core-slot img { width: 26px; height: 26px; flex: none; }
.core-slot select { flex: 1; min-width: 0; padding: .2rem .3rem; font-size: .78rem; background: rgba(10, 16, 34, .8); color: var(--text);
                    border: 1px solid var(--border); border-radius: 6px; }
.core-slot.is-missing select { border-color: rgba(255, 93, 108, .6); color: #ffb3bb; }
.info-box.is-optional { border-style: dashed; }   /* Waffen: optionale Module (Raumhafen/Werft) */
.ship-mods summary { cursor: pointer; color: var(--muted); }
.ship-mods-used { margin-left: .5rem; font-weight: 700; color: var(--text); }
.ship-mods-list { display: grid; gap: .3rem; margin: .5rem 0; }
.ship-mods-list label { display: flex; align-items: center; gap: .5rem; }
.ship-mods-list label span { flex: 1; }
.module-slot {
    width: 40px;
    height: 40px;
    border: 1px dashed color-mix(in srgb, var(--faction) 50%, var(--border));
    border-radius: 8px;
    background: rgba(5, 8, 18, .4);
}

/* ==========================================================================
   Galaxie-Karte und Sternsysteme
   ========================================================================== */

.galaxy-view { display: grid; grid-template-columns: minmax(0, auto) minmax(280px, 1fr); gap: 1.2rem; align-items: start; }
.galaxy-panel { margin: 0; min-width: 0; }
.tabs-compact { margin: 0; padding: 0; border: 0; }

.map-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.map-arrows { display: flex; gap: .3rem; }
.map-jump { display: flex; align-items: center; gap: .5rem; margin: 0; }
.map-jump label { display: flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--muted); }
.map-jump input {
    width: 4.2em;
    padding: .3em .4em;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(5, 8, 18, .6);
    color: var(--text);
    font: inherit;
}

.gmap {
    display: grid;
    grid-template-columns: 1.8rem repeat(var(--cols), minmax(0, 52px));
    gap: 1px;
}
.gmap-axis {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.gtile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: url(../gfx/map/leerraum.png) center / cover;
    transition: filter .1s, transform .1s;
}
.gtile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gtile:hover { filter: brightness(1.35); transform: scale(1.08); z-index: 2; }
.gtile.is-mine { box-shadow: inset 0 0 0 2px var(--faction); }
.gtile.is-mine::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--faction);
    box-shadow: 0 0 6px var(--faction);
}
.gtile.is-selected { outline: 2px solid #fff; outline-offset: -1px; z-index: 3; box-shadow: 0 0 16px rgba(255, 255, 255, .5); }

.map-legend { margin: .8rem 0 0; }
.legend-mine, .legend-taken {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--faction);
    vertical-align: middle;
}
.legend-taken { background: #aab2c8; }

.minimap { display: block; width: 100%; max-width: 280px; margin: 0 auto .3rem; border-radius: 8px; cursor: crosshair; }
.minimap-view { fill: rgba(255, 255, 255, .08); stroke: #fff; stroke-width: .5; }
.minimap-mine { fill: none; stroke: var(--faction); stroke-width: .6; }
.field-panel .minimap + p { text-align: center; margin-bottom: 1.2rem; }

.system-counts { margin: .8rem 0; }
.plain-list { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .92rem; }

/* --- Innenansicht eines Systems ------------------------------------------ */

.system-view { grid-template-columns: minmax(0, 700px) minmax(280px, 1fr); }
.smap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    border-radius: 10px;
    overflow: hidden;
    background: url(../gfx/map/leerraum.png) 0 0 / calc(100% / 4) repeat;
}
.smap-orbits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orbit { fill: none; stroke: rgba(160, 180, 255, .18); stroke-width: .04; }
.orbit-belt { stroke: rgba(200, 180, 150, .15); stroke-dasharray: .15 .12; }

.stile { position: relative; display: block; aspect-ratio: 1; }
.stile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
a.stile { transition: transform .1s, filter .1s; }
a.stile:hover { transform: scale(1.25); filter: brightness(1.3); z-index: 2; }
.stile.kind-star img { transform: scale(1.9); }
.stile.kind-planet img { padding: 6%; }
.stile.kind-moon img { padding: 24%; }
.stile.kind-asteroids img { border-radius: 30%; opacity: .85; }
.stile.is-mine::after, .stile.is-taken::after {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    border: 2px solid var(--faction);
    box-shadow: 0 0 8px var(--faction);
}
.stile.is-taken::after { border-color: #aab2c8; box-shadow: none; }
.stile.is-selected { outline: 2px solid #fff; border-radius: 6px; z-index: 3; }

.body-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .3rem; }
.body-list li { display: grid; grid-template-columns: minmax(10rem, 13rem) 4.5rem 1fr; align-items: center; gap: .6rem; }
.body-list li a { display: flex; align-items: center; gap: .6rem; color: var(--text); min-width: 0; }
.body-list li a span { display: grid; line-height: 1.25; }
.body-list li small { font-size: .78rem; }
.body-list li img { image-rendering: pixelated; flex: none; }
.body-list li.is-moon { font-size: .9rem; }
.body-list li.is-moon a { padding-left: 1.6rem; }
.body-xy { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent, #7cc4ff); white-space: nowrap; }   /* Sandro 2026-10-10 */
.body-status { font-size: .82rem; text-align: right; }

.tier-tag.tier-friendly { background: rgba(62, 207, 142, .18); color: #3ecf8e; }
.tier-tag.tier-moderate { background: rgba(245, 185, 74, .18); color: #f5b94a; }
.tier-tag.tier-hostile  { background: rgba(255, 93, 108, .18); color: #ff5d6c; }

/* ==========================================================================
   Forschung
   ========================================================================== */

.tabs .tab-count { font-weight: 400; opacity: .6; margin-left: .15rem; }
.tabs .tab-dot {
    display: inline-block;
    width: 7px; height: 7px;
    margin-left: .35rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
    vertical-align: middle;
}
.tabs-sep { width: 1px; margin: .2rem .4rem; background: var(--border); }

.chip-req { padding-left: .55rem; }
.chip-req.is-done   { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.chip-req.is-available, .chip-req.is-locked { color: #ff8a95; border-color: rgba(255, 93, 108, .4); }

.unlock-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; }
.unlock {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .45rem .2rem .2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(5, 8, 18, .4);
    color: var(--text);
    font-size: .8rem;
    line-height: 1.2;
    min-width: 0;
}
.unlock:hover { border-color: var(--faction); text-decoration: none; }
.unlock img { width: 28px; height: 28px; flex: none; object-fit: contain; }
.unlock-ship img, .unlock-station img { width: 34px; height: 34px; }
.unlock span { overflow: hidden; text-overflow: ellipsis; }

.progress { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.progress > span { display: block; width: var(--p); height: 100%; background: var(--faction); }

.station-card { scroll-margin-top: 90px; }
.station-card.is-locked .ship-big { filter: grayscale(.7) brightness(.8) drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }
.station-effect { margin: .6rem 0 0; }
.tag-ok { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.ship-others > span {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem .2rem .2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--faction);
    font-size: .82rem;
    min-width: 0;
}

/* ==========================================================================
   Kolonie: Reiter, Übersicht, Lager, Baumenü, Gebäudeschaltung
   ========================================================================== */

.pos { color: var(--success); }
.neg { color: var(--danger); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.warn { color: #ffb45c; margin: .4rem 0 0; }
.notice { padding: .5rem .7rem; border-radius: 8px; background: rgba(255, 180, 92, .1); border: 1px solid rgba(255, 180, 92, .35); }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-row form { margin: 0; }

/* Kopf mit Planet + Kolonie-Schnellwahl */

/* Reiterleiste */
.colony-tabs { align-items: center; }
.colony-tabs .tab-badge {
    margin-left: .35rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: rgba(250, 200, 40, .15);
    color: #fac828;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

/* Panels */
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.panel-head h2 { margin: 0; }
.panel-link { display: inline-block; margin-top: .6rem; font-size: .88rem; }
.panel-back { display: inline-block; margin-bottom: .8rem; font-size: .88rem; }

/* Balken (Energie, Lager, Bau) */
.meter > div { height: 100%; border-radius: 3px; background: var(--faction); transition: width .3s; }
.meter-panel .meter, .stock-panel .meter, .storage-top .meter, .job .meter, .field-panel .meter { height: 10px; margin: .3rem 0 .9rem; }
.meter.meter-energy > div { background: #f5d04a; box-shadow: 0 0 8px rgba(245, 208, 74, .5); }
.meter.meter-pop > div { background: #e58ad0; }
.meter.is-high > div { background: #ffb45c; }
.meter.is-full > div { background: var(--danger); }
.meter-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .92rem; }
.meter-head span:first-child { display: inline-flex; align-items: center; gap: .4rem; }
.meter-head img { width: 20px; height: 20px; }
.meter-head b { margin-left: .3rem; font-variant-numeric: tabular-nums; }

/* Übersicht: 3 Spalten */
.colony-overview { display: grid; grid-template-columns: fit-content(460px) minmax(280px, 1fr) minmax(280px, 1fr); gap: 1.2rem; align-items: start; }
.cov-main, .cov-side { display: grid; gap: 1.2rem; min-width: 0; }
.cov-main > .panel, .cov-side > .panel { margin: 0; min-width: 0; }
.cov-tabs .subtabs { margin-top: 0; }
.cov-tabs .subtabs button { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Reiter Kolonie-Info: links der Planet (Schild, Klasse, Daten), rechts die Balken – je 50 % */
.cov-colony:not([hidden]) { display: flex; flex-wrap: wrap; gap: 1.2rem 1.4rem; align-items: flex-start; }
.cov-planet { flex: 1 1 180px; min-width: 0; }   /* 50:50 mit den Balken – Platz für Schild + Laden */
.cov-meters { flex: 1 1 180px; min-width: 0; }   /* zu schmal → rutscht unter den Planeten */
.cov-planet .body-shield { width: 120px; margin: 0 auto; }
.cov-planet .body-img { width: 120px; height: 120px; margin: 0 auto .5rem; }
.cov-planet .shield-box { margin: 0 0 .6rem; }
.cov-planet .shield-form { flex-wrap: wrap; gap: .3rem; }
.cov-planet .shield-form input[type="number"] { flex: 1 1 80px; }
.cov-planet .shield-form .btn { flex: none; padding-inline: .6em; }
.cov-planet-class { margin: 0 0 .5rem; text-align: center; font-size: .9rem; line-height: 1.35; }
.cov-planet-class .tier-tag { display: inline-block; margin-top: .3rem; font-size: .72rem; }
.cov-facts { list-style: none; margin: 0 auto; max-width: 260px; padding: .5rem 0 0; border-top: 1px solid var(--border); display: grid; gap: .2rem; font-size: .8rem; text-align: left; }
.cov-facts li { display: flex; justify-content: space-between; gap: .4rem; font-variant-numeric: tabular-nums; }
.cov-facts span { color: var(--muted); }
/* Reiter Sternsystem: Umgebungsscan 5×5 (system_scan, Sandro 2026-10-22) */
.scan { display: grid; grid-template-columns: 1.6rem repeat(var(--cols), minmax(0, 1fr)); gap: 2px; max-width: 340px; margin: 0 auto; }
.scan-head { display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.scan-cell { background: url(../gfx/map/leerraum.png) center / cover; border-radius: 4px; overflow: hidden; }
.scan-cell.kind-star { overflow: visible; }
/* Forschung als eigenes Feld zwischen Kolonie-Info und Bauaufträgen (Sandro 2026-10-09) */
.colony-overview .col > .panel { margin-bottom: 1.2rem; }
.colony-overview .col > .panel:last-child { margin-bottom: 0; }
.colony-overview h2 { font-size: 1.05rem; }
.field-grid-sm { grid-template-columns: repeat(var(--cols), minmax(0, 40px)); gap: 2px; }
.field-grid-sm .zone-label { font-size: .65rem; margin: .3rem 0 .1rem; }

.stock-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .4rem; }
.stock-table td { padding: .22rem .3rem; border-bottom: 1px solid rgba(140, 160, 220, .08); }
.stock-table td:first-child { width: 26px; }
.stock-table img { width: 22px; height: 22px; display: block; }

.job { display: flex; align-items: center; gap: .9rem; }
.job-info { flex: 1; min-width: 0; display: grid; }
.job .meter { margin: .4rem 0 0; }

.body-panel { text-align: center; }
.body-img { width: 128px; height: 128px; image-rendering: pixelated; margin: -.3rem auto .6rem; display: block; }
.body-panel .info-list { text-align: left; font-size: .92rem; column-gap: .9rem; }
.body-panel .info-list dd { overflow-wrap: break-word; }
/* Planetenschild (sql/044): bläulicher Schimmer je nach Ladung (--shield 0–1), Balken + Laden */
.body-shield { position: relative; width: 128px; margin: 0 auto; }
.body-shield.is-shielded::after { content: ''; position: absolute; inset: -12px -12px calc(.6rem - 12px); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(90, 200, 255, 0) 52%, rgba(90, 200, 255, calc(.12 + .3 * var(--shield))) 66%, rgba(90, 200, 255, 0) 72%);
    box-shadow: inset 0 0 calc(10px + 14px * var(--shield)) rgba(120, 220, 255, calc(.25 + .45 * var(--shield))),
                0 0 calc(8px + 16px * var(--shield)) rgba(90, 200, 255, calc(.2 + .4 * var(--shield)));
    border: 1px solid rgba(150, 230, 255, calc(.25 + .5 * var(--shield)));
    animation: shield-pulse 4s ease-in-out infinite; }
@keyframes shield-pulse { 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .body-shield.is-shielded::after { animation: none; } }
.shield-box { text-align: left; margin: 0 0 1rem; }
.shield-box .meter-head span:first-child { font-weight: 600; }
.meter.meter-shield { height: 10px; margin: .3rem 0 .6rem; }
.meter.meter-shield > div { background: #5ac8ff; box-shadow: 0 0 8px rgba(90, 200, 255, .6); }
.shield-form { display: flex; }
.shield-form input[type="number"] { flex: 1; width: auto; min-width: 0; }
.shield-note { margin: .35rem 0 0 !important; }
.body-panel p { text-align: left; margin: .8rem 0 0; }

.orbit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.orbit-list li { display: flex; align-items: center; gap: .7rem; }
.orbit-list img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.orbit-list li div { display: grid; }
.orbit-list li > div:not(.near-state) { flex: 1; min-width: 0; }
.orbit-list .near-state { min-width: 0; flex: none; flex-direction: column; align-items: flex-end; gap: .15rem; }
.orbit-list .near-bar { grid-template-columns: 3.5rem auto; }

/* Raster: Baustelle, abgeschaltet, Stillstand */
.tile .site-overlay { z-index: 1; }

.tile-progress { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .6); z-index: 2; }
.tile-progress span { display: block; height: 100%; border-radius: 2px; background: #fac828; }
/* Bau/Ausbau: das fertige Gebäude wächst von unten nach oben (--p), das Gerüst blendet aus (--pn = 0…1) */
.tile.is-site, .tile.is-raising { box-shadow: inset 0 0 0 2px rgba(250, 200, 40, .7); }
.tile.is-site > img:first-child, .tile.is-site > i:first-child { opacity: .15; }
.build-overlay { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; z-index: 1; pointer-events: none;
                 clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0); transition: clip-path 1s linear; }
.build-overlay::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--p, 0%) - 2px); height: 3px;
                        background: #fac828; box-shadow: 0 0 8px #fac828; animation: tf-pulse 1.6s ease-in-out infinite; }
.tile .build-overlay ~ .site-overlay { z-index: 2; opacity: calc(1 - var(--pn, 0) * .85); transition: opacity 1s linear; }
@media (prefers-reduced-motion: reduce) { .build-overlay::after { animation: none; } }
/* Terraforming: der künftige Feldtyp schiebt sich von links über das Feld (--p = Fortschritt) */
.tile.is-terraform { box-shadow: inset 0 0 0 2px rgba(110, 230, 140, .75); }
.terraform-overlay { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; pointer-events: none;
                     clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); transition: clip-path 1s linear;
                     filter: saturate(1.2) brightness(1.1); }
.terraform-overlay::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0%) - 2px); width: 3px;
                            background: #8effb0; box-shadow: 0 0 8px #8effb0; animation: tf-pulse 1.6s ease-in-out infinite; }
.tile-progress-tf span { background: #6ee68c; }
@keyframes tf-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .terraform-overlay::after { animation: none; } }
.unlock-terraform img { border-radius: 4px; }
.terraform-box { padding: .8rem; border-radius: 10px; border: 1px solid rgba(110, 230, 140, .35);
                 background: linear-gradient(135deg, rgba(110, 230, 140, .10), transparent 70%); }
.terraform-box .eyebrow { color: #8effb0; margin: 0 0 .4rem; }
.terraform-pair { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.terraform-arrow { color: #8effb0; font-weight: 700; }
.meter-tf > div { background: linear-gradient(90deg, #3fbf6a, #8effb0); transition: width 1s linear; }
.legend-terraform { box-shadow: inset 0 0 0 2px rgba(110, 230, 140, .75); background: transparent !important; }
.tile.is-off { box-shadow: inset 0 0 0 2px rgba(255, 90, 90, .75); }   /* Gebäude aus: roter Rand + abgedunkelt (Sandro 2026-10-05) */
.tile.is-off > img, .tile.is-off > i { filter: grayscale(1) brightness(.6); }
.grid-legend { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .9rem 0 0; }
.grid-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: .8rem; }
.grid-legend span:first-child { margin-left: 0; }
.legend-site { background: #fac828; }
.legend-off { box-shadow: inset 0 0 0 2px rgba(255, 90, 90, .75); background: transparent !important; border-radius: 2px !important; }
/* Gelb = Vorwarnung (Sandro 2026-10-12): läuft noch, der Tick schaltet es nächste Runde wegen Mangel ab (KONZEPT_TICK.md 0.1).
   Ist es abgeschaltet, gilt wieder der rote Rand wie bei „aus“ */
.tile.is-stalled, .data-table tr.is-stalled .tile-mini { box-shadow: inset 0 0 0 2px rgba(255, 200, 60, .9); }
.legend-auto-off { box-shadow: inset 0 0 0 2px rgba(255, 200, 60, .9); background: transparent !important; border-radius: 2px !important; }

/* Ressourcen-Chips (Kosten, Wirkung) */
.res-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem .1rem .2rem;
    margin: 0 .25rem .25rem 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.res-chip img { width: 18px; height: 18px; }
.res-chip.is-short { border-color: rgba(255, 93, 108, .6); background: rgba(255, 93, 108, .12); color: #ffb3bb; }
.res-chip.pos { color: #8ee8bd; }
.res-chip.neg { color: #ffb3bb; }
.res-chip.info { padding-left: .45rem; color: var(--muted); }
.chips { line-height: 1.9; }

/* Baumenü */
.build-list-full > li { display: block; }
/* Baumenü: Stufen auf- und zuklappbar */
.build-tier { margin-bottom: .7rem; }
.build-tier > summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; user-select: none;
                        margin-bottom: .45rem; padding: .35rem .5rem; border-radius: 6px; font-size: .78rem; font-weight: 700;
                        letter-spacing: .08em; text-transform: uppercase; color: var(--faction);
                        background: color-mix(in srgb, var(--faction) 10%, transparent); }
.build-tier > summary::-webkit-details-marker { display: none; }
.build-tier > summary::before { content: '▸'; transition: transform .15s; }
.build-tier[open] > summary::before { transform: rotate(90deg); }
.build-tier > summary small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.build-tier > summary:hover { background: color-mix(in srgb, var(--faction) 18%, transparent); }
.build-row { display: flex; align-items: center; gap: .8rem; }
.build-costs { margin: .45rem 0 0 calc(40px + .8rem); }
.box-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }   /* Baukosten + Effekt nebeneinander (Sandro 2026-10-12) */
.field-panel .field-head + p.muted { margin-top: -.3rem; }

/* Status-Marken */
.status { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.status-ok   { background: rgba(62, 207, 142, .15); color: #8ee8bd; }
.status-off  { background: rgba(143, 154, 187, .15); color: var(--muted); }
.status-warn { background: rgba(255, 180, 92, .15); color: #ffc98a; }
.status-bad  { background: rgba(255, 93, 108, .15); color: #ffb3bb; }
.status-site { background: rgba(250, 200, 40, .15); color: #fac828; }

/* Kolonie-Übersicht: Arbeitskräfte unter der Bevölkerung */
.pop-bar { display: flex; }
/* Bilanz pro Runde im Balken (Kolonie-Übersicht): Zuwachs schraffiert hell, Verlust rot schraffiert am Ende der Füllung */
.meter-delta { display: flex; }
.meter-delta > div { flex: none; border-radius: 3px 0 0 3px; }
.meter-gain, .meter-loss { flex: none; height: 100%; animation: meter-pulse 2.4s ease-in-out infinite; }
.meter-delta > .meter-gain, .pop-bar > .meter-gain { background: repeating-linear-gradient(135deg, var(--success) 0 4px, color-mix(in srgb, var(--success) 50%, transparent) 4px 8px); }
.meter-delta > .meter-loss { background: repeating-linear-gradient(135deg, var(--danger) 0 4px, color-mix(in srgb, var(--danger) 50%, transparent) 4px 8px); }
@keyframes meter-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .meter-gain, .meter-loss { animation: none; } }
.pop-bar > div { flex: none; border-radius: 0; }
.pop-bar > div:first-child { border-radius: 3px 0 0 3px; }
.meter.pop-bar > .pop-employed, .pop-dot.pop-employed { background: #e58ad0; }
.meter.pop-bar > .pop-free, .pop-dot.pop-free { background: #6fd3c1; }
.pop-dot.pop-empty { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pop-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: -.4rem 0 .8rem; padding: 0; font-size: .8rem; color: var(--muted); }
.pop-legend li { display: flex; align-items: center; gap: .35rem; }
.pop-legend b { color: var(--text); }
.pop-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* Bevölkerung: Icons statt Wörter (Bezeichnung als Tooltip), Rahmen in der Farbe des Balkens */
.pop-icons { gap: .3rem .9rem; }
.pop-icons li { cursor: default; }
.pop-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-style: normal; font-size: .8rem;
    background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); }
.pop-ico.pop-employed { --c: #e58ad0; }
.pop-ico.pop-free { --c: #6fd3c1; }
.pop-ico.pop-empty { --c: #8f9abb; }
.pop-icons b { font-size: .88rem; }
/* Nahrung der Einwohner (Kolonie-Info): Hintergrund dunkelgelb = Erzeugung (--prod), hellgelb = Verbrauch,
   rot schraffiert = mehr verbraucht als erzeugt */
.food-bar { display: flex; background: linear-gradient(90deg, #6b5420 0 var(--prod, 0%), rgba(255, 255, 255, .08) var(--prod, 0%)); }
.food-bar > div, .food-bar > span { flex: none; height: 100%; border-radius: 0; }
.food-bar > :first-child { border-radius: 3px 0 0 3px; }
.food-bar > .food-eaten, .pop-dot.food-eaten { background: #f2c14e; }
.pop-dot.food-prod { background: #6b5420; box-shadow: inset 0 0 0 1px #a8853a; }
.food-bar > .food-missing { background: repeating-linear-gradient(135deg, var(--danger) 0 4px, color-mix(in srgb, var(--danger) 50%, transparent) 4px 8px);
    animation: meter-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .food-bar > .food-missing { animation: none; } }
.worker-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .45rem 0 .7rem; }
.worker-stats div { background: rgba(140, 160, 220, .06); border-radius: 6px; padding: .3rem .5rem; }
.worker-stats dt { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.worker-stats dd { margin: 0; font-weight: 700; }

/* Gebäudeschaltung: Arbeiter + Priorität */
.worker-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .2rem 0 .6rem; font-size: .95rem; }
.worker-summary span { display: inline-flex; align-items: center; gap: .35rem; }
.worker-summary img { width: 18px; height: 18px; }
.priority-select { padding: .15rem .35rem; font-size: .82rem; background: rgba(10, 16, 34, .8); color: var(--text, #dfe6ff);
                   border: 1px solid rgba(140, 160, 220, .25); border-radius: 6px; }
.priority-select.prio-1 { border-color: rgba(62, 207, 142, .55); }
.priority-select.prio-3 { border-color: rgba(143, 154, 187, .25); color: var(--muted); }

/* Tabellen (Lager, Gebäudeschaltung) */
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th, .data-table td { padding: .4rem .6rem; border-bottom: 1px solid rgba(140, 160, 220, .1); text-align: left; vertical-align: middle; }
.data-table thead th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table tfoot th { border-bottom: 0; }
.data-table .icon { width: 36px; }
.data-table .icon img { width: 26px; height: 26px; display: block; }
.data-table .group-row th { padding-top: 1rem; color: var(--faction); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.data-table tr.is-empty td { opacity: .45; }
/* Lager: Ware entsorgen (🗑 klappt ein kleines Formular auf) */
.dispose-cell { width: 6.5rem; text-align: right; white-space: nowrap; }
/* Ressourcen-Bonus (sql/070): „+50“ bzw. Wartezeit neben dem Entsorgen */
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .45rem; }
.bonus-form { margin: 0; }
.bonus-btn { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); font-variant-numeric: tabular-nums; }
.bonus-btn:hover { background: color-mix(in srgb, var(--success) 14%, transparent); }
.bonus-wait { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; cursor: help; }
.dispose { position: relative; display: inline-block; }
.dispose summary { list-style: none; cursor: pointer; padding: .1rem .35rem; border-radius: 6px; opacity: .55; }
.dispose summary::-webkit-details-marker { display: none; }
.dispose summary:hover, .dispose[open] summary { opacity: 1; background: rgba(255, 255, 255, .08); }
.dispose-form { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; display: grid; gap: .45rem; width: 15rem;
                padding: .7rem; text-align: left; background: #10172b; border: 1px solid var(--border); border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.dispose-form input[type="number"] { width: 100%; }
.dispose-buttons { display: flex; gap: .4rem; }
.dispose-buttons .btn { flex: 1; }
.data-table tr.is-off .tile-mini { box-shadow: inset 0 0 0 2px rgba(255, 90, 90, .75); }   /* aus: roter Rand + abgedunkelt wie auf der Karte */
.data-table tr.is-off .tile-mini img { filter: grayscale(1) brightness(.6); }
.data-table form { margin: 0; }

/* Lager: zwei Kacheln – Kolonie | ganzes Reich */
.storage-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.storage-head p { margin: 0; flex: 1; }
.storage-head form { margin: 0; }
.storage-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; margin-bottom: 1rem; }
.storage-split .panel { margin: 0; }
.storage-side .meter { height: 10px; margin: .3rem 0 .8rem; }
.storage-side-e { border-color: color-mix(in srgb, var(--faction) 35%, var(--border)); }
.storage-table-compact td, .storage-table-compact th { padding-top: .25rem; padding-bottom: .25rem; }
.storage-sources { margin-top: .8rem; }
.storage-sources summary { cursor: pointer; }

/* Schalter an/aus */
.switch {
    min-width: 58px;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(143, 154, 187, .15);
    color: var(--muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    cursor: pointer;
}
.switch.is-on { background: rgba(62, 207, 142, .18); border-color: rgba(62, 207, 142, .5); color: #8ee8bd; }
.switch:hover { filter: brightness(1.25); }
.switch:disabled { opacity: .4; cursor: not-allowed; filter: none; }   /* zu wenig freie Arbeiter zum Einschalten */
.colony-usage .tab-badge { margin-left: .3rem; padding: 0 .4rem; border-radius: 999px; background: rgba(250, 200, 40, .15); color: #fac828; font-size: .72rem; }
.colony-usage .bar + span { display: block; margin-top: .25rem; }
.bar-storage > div { background: #4fb3ff; }
.bar-storage.is-full > div { background: var(--danger); }

/* ==========================================================================
   Admin-Bereich (admin.php)
   ========================================================================== */

.admin-link { border-color: rgba(255, 150, 60, .5); color: #ffb070; }
.admin-badge {
    margin-left: .4rem;
    padding: .1em .55em;
    border-radius: 6px;
    background: rgba(255, 150, 60, .18);
    color: #ffb070;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    vertical-align: middle;
}
body.admin .topbar { border-bottom-color: rgba(255, 150, 60, .35); }
.topbar-tick {
    margin-left: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}
.topbar-tick:hover { color: var(--text); text-decoration: none; border-color: var(--primary); }
.topbar-tick.is-paused { color: #ffc98a; border-color: rgba(255, 180, 92, .5); background: rgba(255, 180, 92, .1); }

.stat-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.stat-tile { display: grid; gap: .2rem; margin: 0; padding: 1rem 1.2rem; color: var(--text); }
.stat-tile:hover { text-decoration: none; border-color: var(--primary); }
.stat-tile strong { font-size: 1.8rem; font-variant-numeric: tabular-nums; }

.admin-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 1.2rem; align-items: start; }
.admin-split > .panel, .admin-side > .panel { margin: 0; }
.admin-side { display: grid; gap: 1.2rem; }
.narrow-panel { max-width: 720px; }

.admin-form { gap: .9rem; }
.admin-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
/* Admin Gebäude: je Stufe eine Kachel, Spalten in allen Kacheln gleich breit */
.stage-panel { margin-bottom: 1.2rem; }
.stage-panel .panel-head h2 small { font-weight: 400; font-size: .85rem; }
.stage-panel > p.muted { margin: -.4rem 0 .8rem; }
.stage-table { table-layout: fixed; width: 100%; }
.stage-table .c-icon { width: 44px; }
.stage-table .c-name { width: 13%; }
.stage-table .c-s { width: 4.5%; }
.stage-table .c-n { width: 7.5%; }
.stage-table .c-costs { width: 15%; }
.stage-table th { white-space: nowrap; }
.stage-table .c-btn { width: 110px; }
.admin-form .form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-form .form-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-form .form-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.admin-form .field input, .admin-form .field select, .admin-form .field textarea {
    width: 100%;
    padding: .55em .7em;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(5, 8, 18, .6);
    color: var(--text);
    font: inherit;
}
.admin-form .field textarea { resize: vertical; }
.admin-form .field > span { font-size: .82rem; }
.admin-form h3 { margin: .4rem 0 0; }
.inline-form input[type="number"] { width: 6em; }
.inline-form input.indent { margin-left: 1.2rem; width: calc(14em - 1.2rem); }

.filter-bar { flex-wrap: wrap; margin-bottom: 1rem; }
.spaced { margin-top: 1rem; }
.panel-head.spaced { margin-top: 1.5rem; }
.danger-zone { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 93, 108, .25); }
.data-table .btn-row { flex-wrap: nowrap; }

.pager { display: flex; gap: .3rem; justify-content: center; margin-top: 1rem; }
.pager a, .pager span { min-width: 2.2em; padding: .25rem .5rem; border-radius: 6px; text-align: center; font-size: .88rem; color: var(--muted); }
.pager a { border: 1px solid var(--border); }
.pager a:hover { color: var(--text); text-decoration: none; background: var(--surface-hi); }
.pager a.active { color: var(--faction); border-color: var(--faction); }

.tabs-sep { width: 1px; margin: 0 .4rem; background: var(--border); }
.tabs small { font-weight: 400; opacity: .7; }

/* Ticks */
.tick-main { border-left: 3px solid var(--success); }
.tick-main.is-paused { border-left-color: #ffb45c; }
.tick-main .panel-head h2 .status { margin-left: .5rem; vertical-align: middle; }
.tick-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1rem; }
.tick-controls { display: grid; gap: .8rem; align-content: start; }
.tick-controls select { padding: .35rem .5rem; }
.tick-subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.tick-subs .panel { margin: 0; display: flex; flex-direction: column; }
.tick-subs .panel > .btn-row { margin-top: auto; padding-top: 1rem; }
.tick-sub.is-off { opacity: .65; }
.tick-sub .info-list { margin-bottom: 0; align-items: center; }
.tick-sub .info-list form { margin: 0; }
.tick-log td { vertical-align: top; }

.tick-lines {
    list-style: none;
    margin: 0;
    padding: .6rem;
    max-height: 70vh;
    overflow: auto;
    border-radius: 10px;
    background: rgba(3, 5, 12, .7);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: .82rem;
    line-height: 1.55;
}
.tick-lines li { display: flex; gap: .7rem; padding: .05rem .3rem; border-radius: 4px; }
.tick-lines li span { flex: none; width: 3.6em; font-weight: 700; }
.tick-lines .lv-info span  { color: var(--muted); }
.tick-lines .lv-warn       { background: rgba(255, 180, 92, .08); }
.tick-lines .lv-warn span  { color: #ffc98a; }
.tick-lines .lv-error      { background: rgba(255, 93, 108, .12); }
.tick-lines .lv-error span { color: #ff8a95; }

/* Karte zum Platzieren von Systemen */
.pick-map { display: block; width: 100%; max-width: 640px; margin: 0 auto; border-radius: 8px; cursor: crosshair; image-rendering: pixelated; }
.pick-marker { fill: none; stroke: #fff; stroke-width: .35; filter: drop-shadow(0 0 1px #fff); }
.map-legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: .6rem 0 0; }
.map-legend span::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .35em; border-radius: 2px; background: var(--c); }

/* Gebäudetyp: Ressourcen-Eingaben */
.res-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem; margin-bottom: 1rem; }
.res-input {
    display: grid;
    grid-template-columns: auto 1fr 6em;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .85rem;
}
.res-input.is-set { border-color: color-mix(in srgb, var(--faction) 50%, transparent); }
.res-input.pos span { color: #8ee8bd; }
.res-input.neg span { color: #ffb3bb; }
.res-input input {
    width: 100%;
    padding: .25em .4em;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(5, 8, 18, .6);
    color: var(--text);
    font: inherit;
    text-align: right;
}

/* --- Fraktionswappen ------------------------------------------------------ */
.faction-emblem {
    display: block;
    width: 120px;
    height: 144px;
    margin: .2rem auto 1.1rem;
    filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--faction) 45%, transparent));
    transition: transform .25s, filter .25s;
}
.faction-card:hover .faction-emblem { transform: translateY(-3px) scale(1.04); }
.faction-grid .faction-card { text-align: center; }
.faction-option .faction-emblem { width: 84px; height: 101px; margin-bottom: .8rem; opacity: .85; }
.faction-option:has(input:checked) .faction-emblem {
    opacity: 1;
    transform: scale(1.08);
    filter: drop-shadow(0 0 18px var(--faction));
}

/* NPC-Fraktionen auf der Startseite */
.section-lead { max-width: 70ch; margin: -.4rem auto 1.2rem; text-align: center; }
.section-npc .section-title { text-align: center; }
/* Gleiche Kartenbreite wie die 4 Völker (4 Spalten, 3 Lücken à 1rem) → 2 Karten + 1 Lücke, mittig */
.faction-grid-npc { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(50% - .5rem); margin: 0 auto; }
.faction-npc { border-style: dashed; border-top-style: solid; }
.npc-badge {
    position: absolute;
    top: .8rem;
    right: .8rem;
    padding: .05rem .5rem;
    border: 1px solid var(--faction);
    border-radius: 999px;
    color: var(--faction);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
}
.planet-pair { display: flex; align-items: center; gap: .4rem; font-size: .85rem; margin: -.3rem 0 .6rem; }
.planet-pair img { width: 20px; height: 20px; image-rendering: pixelated; }
.planet-card:target { outline: 2px solid var(--faction); box-shadow: 0 0 18px color-mix(in srgb, var(--faction) 40%, transparent); }

/* ==========================================================================
   Spielerliste
   ========================================================================== */
.online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
    vertical-align: middle;
}
.player-factions { display: grid; grid-template-columns: 1fr repeat(4, minmax(0, 1.4fr)); gap: .8rem; margin-bottom: 1.2rem; }
.pf-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: .7rem;
    padding: .7rem .9rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--faction);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    transition: background .15s, border-color .15s;
}
.pf-card:hover { background: var(--surface-hi); text-decoration: none; }
.pf-card.is-active { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 14%, var(--surface)); }
.pf-card img { grid-row: 1 / 3; width: 36px; height: 43px; filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--faction) 40%, transparent)); }
.pf-card span { font-weight: 700; color: var(--faction); }
.pf-card .pf-all { grid-column: 1 / 3; color: var(--text); }
.pf-card strong { grid-row: 1 / 3; grid-column: 3; font-size: 1.4rem; }
.pf-card small { color: var(--muted); font-size: .78rem; }

.player-search input[type="text"] { width: 240px; }
.player-table th a { color: inherit; }
.player-table th.is-sorted { color: var(--text); }
.player-table .icon { width: 44px; }
.player-emblem { width: 30px; height: 36px; display: block; }
.player-table .player-faction { color: var(--faction); font-weight: 600; }
.player-table tr.is-me td { background: color-mix(in srgb, var(--faction) 8%, transparent); }
.player-table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.tag-admin { background: rgba(255, 180, 92, .18); color: #ffc98a; }
.icon-btn {
    width: 30px;
    height: 30px;
    margin-left: .25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: .95rem;
    cursor: pointer;
}
.icon-btn:hover:not(:disabled) { background: var(--surface-hi); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ==========================================================================
   Übersicht (Startseite im Spiel)
   ========================================================================== */
.d-block { display: block; }

.ov-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.8rem 2.2rem;
    margin-bottom: 1.2rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--faction);
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 8% 50%, color-mix(in srgb, var(--faction) 30%, transparent), transparent 55%),
        radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--faction) 12%, transparent), transparent 50%),
        var(--surface);
}
/* Verkündung eines Rangs im Kopf (Sandro 2026-10-12): zwischen Begrüßung und Runden-Uhr, goldener Rahmen */
.ov-hero.has-proclamation { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr) auto; }
.ov-proclamation { position: relative; align-self: stretch; display: grid; align-content: center; gap: .35rem; padding: 1rem 1.3rem;
                   border: 1px solid rgba(240, 200, 96, .55); border-radius: 14px;
                   background: linear-gradient(135deg, rgba(240, 200, 96, .14), color-mix(in srgb, var(--faction) 10%, transparent) 60%, rgba(5, 8, 18, .4));
                   box-shadow: 0 0 24px rgba(240, 200, 96, .12), inset 0 0 0 1px rgba(255, 255, 255, .03); }
.ov-procl-title { margin: 0; color: #f0c860; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ov-proclamation h2 { margin: 0; font-size: 1.9rem; line-height: 1.15; color: #ffe7a6; text-shadow: 0 0 18px rgba(240, 200, 96, .35); }
.ov-proclamation h2 span { font-size: 1.4rem; }
.ov-proclamation > p:last-child { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text); font-style: italic; }
.ov-emblem { width: 140px; height: 168px; filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--faction) 55%, transparent)); }
.ov-hello h1 { font-size: 2.3rem; margin-bottom: .3rem; }
.ov-hello .lead { margin-bottom: 1rem; }
.ov-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }

/* Rang-Kachel im Kopf der Übersicht (Sandro 2026-10-16, statt der großen Runden-Uhr – archiv/uebersicht_uhr/) */
.ov-hero-rank { min-width: 210px; align-self: center; }

.ov-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.ov-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .7rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s, background .15s, transform .15s;
}
.ov-stat:hover { border-color: var(--faction); background: var(--surface-hi); text-decoration: none; transform: translateY(-2px); }
.ov-stat-icon { grid-row: 1 / 6; font-size: 1.6rem; align-self: center; }
.ov-stat > :not(.ov-stat-icon) { grid-column: 2; }   /* auch die 4. Zeile rechts vom Symbol */
.ov-stat strong { font-size: 1.6rem; line-height: 1.1; }
.ov-stat strong em { font-style: normal; font-size: 1rem; color: var(--muted); font-weight: 600; }
.ov-stat > span:not(.ov-stat-icon) { font-weight: 600; font-size: .9rem; }
.ov-stat small { color: var(--muted); font-size: .76rem; line-height: 1.3; }

.ov-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.2rem; align-items: start; }
.ov-main > .panel { margin: 0; }
.ov-left > .panel { margin: 0 0 1.2rem; }
.ov-left > .panel:last-child { margin-bottom: 0; }
.ov-stations-list .icon img { width: 36px; height: 36px; display: block; object-fit: contain; }
.ov-stations-list small { font-size: .76rem; }
.ov-side .panel { margin-bottom: 1.2rem; }
.ov-side .panel:last-child { margin-bottom: 0; }
.ov-side h2, .ov-main h2 { font-size: 1.05rem; }


.ov-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ov-alerts li {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    padding: .45rem .65rem;
    border-radius: 8px;
    border-left: 3px solid var(--muted);
    background: rgba(255, 255, 255, .04);
    font-size: .88rem;
}
.ov-alerts li a { color: var(--text); }
.ov-alerts li span { font-variant-numeric: tabular-nums; color: #fac828; white-space: nowrap; }
.ov-alerts .alert-site { border-left-color: #fac828; }
.ov-alerts .alert-bad  { border-left-color: var(--danger); background: rgba(255, 93, 108, .08); }
.ov-alerts .alert-warn { border-left-color: #ffb45c; background: rgba(255, 180, 92, .07); }
.ov-alerts .alert-info { border-left-color: var(--primary); }

.ov-shipcats { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; color: var(--muted); margin-bottom: .6rem; }
.ov-shipcats strong { color: var(--text); }
.ov-fleets { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .2rem; font-size: .88rem; }
.ov-fleets li { display: flex; justify-content: space-between; }
.ov-ship-strip { display: flex; gap: .4rem; }
.ov-ship-strip a { flex: 1; aspect-ratio: 1; border-radius: 8px; background: rgba(5, 8, 18, .5); border: 1px solid var(--border); padding: 4px; }
.ov-ship-strip a:hover { border-color: var(--faction); }
.ov-ship-strip img { width: 100%; height: 100%; object-fit: contain; }

.ov-stations { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-bottom: .5rem; }
.ov-stations a { aspect-ratio: 1; border-radius: 8px; background: rgba(5, 8, 18, .5); border: 1px solid var(--border); padding: 3px; }
.ov-stations a:hover { border-color: var(--faction); }
.ov-stations img { width: 100%; height: 100%; object-fit: contain; }
.ov-stations a.is-locked img { filter: grayscale(1) brightness(.45); }

/* ==========================================================================
   Einstiegstutorial (inc/tutorial.php, ingame/tutorial_box.php)
   ========================================================================== */

.tutorial {
    border-color: color-mix(in srgb, var(--faction) 45%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--faction) 12%, var(--surface)), var(--surface));
    margin-bottom: 1.2rem;
}
.tutorial-head h2 { margin: .1rem 0 1rem; font-size: 1.4rem; }

.tutorial-steps {
    list-style: none; margin: 0 0 1.2rem; padding: 0;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem;
}
.tutorial-steps li {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .7rem; border-radius: 10px;
    border: 1px solid var(--border); background: rgba(0, 0, 0, .18);
    color: var(--muted); font-size: .88rem;
}
.tutorial-dot {
    flex: none; display: grid; place-items: center;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    border: 1px solid var(--border); font-weight: 700; font-size: .8rem;
}
.tutorial-steps li.is-done { color: var(--text); }
.tutorial-steps li.is-done .tutorial-dot { background: var(--success); border-color: var(--success); color: #06140d; }
.tutorial-steps li.is-current {
    color: var(--text); border-color: var(--faction);
    background: color-mix(in srgb, var(--faction) 16%, transparent);
}
.tutorial-steps li.is-current .tutorial-dot { background: var(--faction); border-color: var(--faction); color: #070a14; }

.tutorial-steps li.is-clickable { cursor: pointer; transition: border-color .15s, background .15s; }
.tutorial-steps li.is-done.is-clickable:hover, .tutorial-steps li.is-done.is-clickable:focus-visible { border-color: var(--success); outline: none; }
.tutorial-steps li.is-done.is-viewing { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.tutorial-recap .eyebrow { color: var(--success); }

.tutorial-body { max-width: 820px; }
.tutorial-body p { line-height: 1.55; }
.tutorial-timer { font-size: 1.1rem; }

.tutorial-checklist {
    list-style: none; padding: 0; margin: 0 0 1rem;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.tutorial-checklist li {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .6rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(0, 0, 0, .18);
}
.tutorial-checklist li.is-done { border-color: color-mix(in srgb, var(--success) 50%, transparent); color: var(--success); }

.tutorial-banner {
    display: block; margin-bottom: 1rem; padding: .7rem 1rem; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--faction) 50%, transparent);
    background: color-mix(in srgb, var(--faction) 12%, transparent);
    color: var(--text); text-decoration: none;
}
.tutorial-banner span { color: var(--faction); margin-left: .4rem; }
.tutorial-banner:hover { background: color-mix(in srgb, var(--faction) 20%, transparent); }
.tutorial-banner-tab { margin: 0 0 0 auto; padding: .4rem .8rem; font-size: .85rem; white-space: nowrap; }
/* Meldungen in der Kolonie-Reiterleiste (Sandro 2026-10-25) – rechts neben den Reitern, kompakt */
.tab-flash { margin-left: auto; display: grid; gap: .25rem; min-width: 0; max-width: 60%; }
.tab-flash .alert { margin: 0; padding: .4rem .8rem; font-size: .85rem; }

.land-box {
    margin: .8rem 0; padding: .8rem 1rem; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--faction) 50%, transparent);
    background: color-mix(in srgb, var(--faction) 10%, transparent);
}
.land-box p { margin: 0 0 .7rem; }

.tutorial-base {
    display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; padding: .6rem .9rem;
    border-radius: 10px; border: 1px solid var(--border); background: rgba(0, 0, 0, .2); max-width: 560px;
}
.tutorial-base div { display: flex; flex-direction: column; gap: .15rem; }
.tutorial-planets { max-height: 340px; overflow-y: auto; margin: .8rem 0 .4rem; border: 1px solid var(--border); border-radius: 10px; }
.tutorial-planets thead th { position: sticky; top: 0; background: var(--bg-soft); z-index: 1; }
.tutorial-planets tr.is-here td { background: color-mix(in srgb, var(--faction) 14%, transparent); }
.tutorial-body .data-table form { margin: 0; }
.chip-bonus { border-color: color-mix(in srgb, var(--success) 50%, transparent); color: var(--success); }

/* ==========================================================================
   Gebiete & Raumstationen auf der Galaxiekarte (inc/stations.php)
   ========================================================================== */

.rg-lumenari     { --rc: #5fd4ff; }
.rg-skelthor     { --rc: #a57bff; }
.rg-xunnre       { --rc: #ff5a4f; }
.rg-dardie       { --rc: #f5b94a; }
.rg-piraten      { --rc: #ff7a3d; }
.rg-freihaendler { --rc: #4fe0a0; }

/* Minikarte: nur der Kreis des Gebiets */
.minimap-claim { fill: none; stroke: var(--rc); stroke-width: .45; stroke-opacity: .9; }
.minimap-station { fill: var(--rc); stroke: #fff; stroke-width: .35; }

/* Große Karte: nur die Randlinie des Gebiets (Kanten zu Feldern außerhalb) */
.gtile.in-claim::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border: 0 solid var(--rc);
}
.gtile.edge-t::before { border-top-width: 2px; }
.gtile.edge-r::before { border-right-width: 2px; }
.gtile.edge-b::before { border-bottom-width: 2px; }
.gtile.edge-l::before { border-left-width: 2px; }
.gtile-station {
    z-index: 2; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .9));
    inset: 8% !important; width: 84% !important; height: 84% !important;
}
.legend-station { color: var(--faction); }

.region-legend { list-style: none; padding: 0; margin: -.6rem 0 1.2rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem; justify-content: center; font-size: .78rem; color: var(--muted); }
.region-legend li { display: flex; align-items: center; gap: .35rem; }
.region-legend span { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--rc); }

.claim-info { display: flex; align-items: center; gap: .45rem; font-size: .88rem; margin: 0 0 1rem; }
.claim-info span { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--rc); flex: none; }
.region-planets { margin: -.4rem 0 1rem; }
.region-planets summary { cursor: pointer; color: var(--rc); font-size: .88rem; }
.region-planets ul { margin: .4rem 0 0; max-height: 220px; overflow-y: auto; }
.region-planets li { display: flex; align-items: center; gap: .4rem; font-size: .85rem; padding: .12rem 0; }
.station-here { margin-bottom: 1rem; }
.station-here div { display: flex; flex-direction: column; gap: .1rem; }

/* --- Nahbereichskarte: Sprung in derselben Zeile/Spalte (ingame/ship.php) ----- */
button.ntile { border: 0; padding: 0; margin: 0; width: 100%; font: inherit; color: inherit; cursor: pointer; }
/* dezent (Sandro 2026-10-03): nur ein leichter Schimmer, erst beim Darüberfahren leuchtet das Feld */
.ntile.is-lane::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: color-mix(in srgb, var(--faction) 4%, transparent);
}
.ntile.is-lane:hover { box-shadow: inset 0 0 0 2px var(--faction), 0 0 12px var(--faction); z-index: 3; }
.ntile.is-lane.is-too-far { cursor: not-allowed; }
.ntile.is-lane.is-too-far::after { background: transparent; }
.ntile.is-lane.is-too-far:hover { box-shadow: inset 0 0 0 2px rgba(255, 93, 108, .7); }
.legend-lane {
    display: inline-block; width: 10px; height: 10px; vertical-align: middle; border-radius: 2px;
    border: 1px solid var(--faction); background: color-mix(in srgb, var(--faction) 20%, transparent);
}

/* --- Stationsansicht (ingame/station.php) ------------------------------------ */
.station-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.station-layout .panel { margin: 0 0 1.2rem; }
.station-map { display: block; width: 100%; max-width: 420px; margin: 0 auto .5rem; border-radius: 8px; }
.station-map .station-claim { stroke: var(--rc); stroke-width: .25; fill: color-mix(in srgb, var(--rc) 8%, transparent); }
.station-map .minimap-claim { stroke-width: .2; }
.station-map .minimap-station { fill: var(--rc); stroke: #fff; stroke-width: .15; }
.station-ships { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.station-ships li { display: flex; align-items: center; gap: .6rem; }
.station-ships div { display: grid; line-height: 1.3; }
.station-planets { max-height: 320px; overflow-y: auto; }
.station-planets li { display: flex; align-items: center; gap: .45rem; padding: .15rem 0; }

/* ==========================================================================
   Nachrichten: Ereignisse (ingame/messages.php, inc/messages.php)
   ========================================================================== */

.count-badge {
    display: inline-block; min-width: 1.25rem; padding: 0 .35rem; margin-left: .35rem;
    border-radius: 999px; background: var(--danger); color: #fff;
    font-size: .7rem; font-weight: 800; line-height: 1.25rem; text-align: center; vertical-align: middle;
}
.sidebar .count-badge { margin-left: auto; }

.events-filter { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.events-filter .chip small { color: var(--muted); margin-left: .2rem; }
.chip.is-active { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, transparent); color: var(--faction); }

.events-panel { padding: 0; overflow: hidden; }
.events-panel > p { padding: 1.2rem; margin: 0; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event {
    display: grid; grid-template-columns: auto 2rem minmax(0, 1fr) auto; gap: .7rem; align-items: start;
    padding: .75rem 1.2rem; border-bottom: 1px solid rgba(140, 160, 220, .1);
}
.event.is-unread { background: color-mix(in srgb, var(--faction) 7%, transparent); box-shadow: inset 3px 0 0 var(--faction); }
.event-check { padding-top: .15rem; }
.event-icon { font-size: 1.25rem; line-height: 1.4; text-align: center; }
.event-main strong { font-weight: 600; }
.event.is-unread .event-main strong { font-weight: 800; }
.event-main p { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
.event-links { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .85rem; }
.event-time { color: var(--muted); font-size: .8rem; white-space: nowrap; padding-top: .15rem; }
.tag-new { background: color-mix(in srgb, var(--faction) 25%, transparent); color: var(--faction); }
.event-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.2rem; }
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 0 1.2rem 1rem; }

.ov-events { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ov-events li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: .4rem; align-items: baseline; font-size: .9rem; }
.ov-side h2 .small { font-size: .78rem; font-weight: 400; margin-left: .4rem; }
.event-title { color: var(--text); }
.event-title:hover { color: var(--faction); }
.event-detail .event-body { font-size: 1rem; line-height: 1.65; margin-bottom: 1.2rem; max-width: 820px; }
.event-detail .action-row form { margin: 0; }

/* --- Nachrichten: Briefe (ingame/messages_letters.php) ----------------------- */
a.icon-btn { display: inline-grid; place-items: center; text-decoration: none; color: var(--text); }
.letter-table tr.is-unread td { background: color-mix(in srgb, var(--faction) 7%, transparent); }
.letter-table tr.is-unread .letter-subject { font-weight: 800; }
.letter-subject { color: var(--text); font-weight: 600; }
.letter-subject:hover { color: var(--faction); }
.letter-preview { display: block; margin-top: .15rem; }
.letter-compose textarea { width: 100%; min-height: 16rem; resize: vertical; font: inherit; line-height: 1.5; }
.letter-view .letter-meta { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin: 0 0 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.letter-view .letter-meta div { display: flex; gap: .5rem; align-items: baseline; }
.letter-view .letter-meta dt { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.letter-view .letter-meta dd { margin: 0; }
.letter-body { font-size: 1rem; line-height: 1.65; margin-bottom: 1.2rem; max-width: 860px; overflow-wrap: anywhere; }
.letter-quote { color: var(--muted); border-left: 2px solid var(--border); padding-left: .6rem; display: inline-block; }
.letter-view .action-row { align-items: center; }

/* --- Nachrichten: Ankündigungen (ingame/messages_news.php, Banner auf der Übersicht, admin/news.php) --- */
.field[hidden] { display: none; }
.news-banner {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start;
    margin-bottom: 1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius);
    border: 1px solid rgba(245, 185, 74, .55); background: linear-gradient(135deg, rgba(245, 185, 74, .14), var(--surface));
}
.news-banner h2 { margin: .1rem 0 .4rem; font-size: 1.15rem; }
.news-banner .eyebrow { margin: 0; color: #f5b94a; }
.news-banner form { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.news-icon { font-size: 1.8rem; line-height: 1; }
.news-body { line-height: 1.6; overflow-wrap: anywhere; }
.news-card.is-unread { border-color: rgba(245, 185, 74, .55); }
.news-head { display: flex; gap: .9rem; align-items: start; margin-bottom: .6rem; }
.news-head h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.news-item { padding: .9rem 0; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: 0; }
.news-item header { display: flex; gap: .5rem; align-items: center; }
.news-item p { margin: .25rem 0 .5rem; }
.news-item.is-expired { opacity: .6; }
.news-item .action-row { margin: .6rem 0 0; }
.retention-field > span:first-child small { display: block; font-weight: 400; margin-top: .1rem; }
.input-unit { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.input-unit input { max-width: 8rem; }

/* --- Werft an Stationen (ingame/station.php) ------------------------------------ */
.shipyard { border-color: color-mix(in srgb, var(--faction) 45%, transparent); }
.shipyard select { width: 100%; }
.shipyard-count input { max-width: 7rem; }
.shipyard-queue { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.shipyard-queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; font-size: .9rem; }
.shipyard-queue form { margin: 0; }
.shipyard-queue .shipyard-meter { grid-column: 1 / -1; }   /* das Schiff im Bau: Balken läuft live mit */

/* --- Raumhafen der Kolonie (ingame/colony/shipyard.php) ------------------------ */
.shipyard-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 1.2rem; align-items: start; }
.shipyard-layout .panel { margin: 0; }
.shipyard-img { flex: none; }
.count-input { width: 4.5rem; }
/* Modulfertigung (Kolonie-Reiter) */
.modules-side { display: grid; gap: 1.2rem; }
.module-factory + .module-factory { margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.module-factory .build-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--text); }
.module-factory .build-title img { width: 32px; height: 32px; image-rendering: pixelated; }
.module-factory .build-title small { flex-basis: 100%; font-weight: 400; }
.module-img { width: 40px; height: 40px; flex: none; }
.module-mini { width: 22px; height: 22px; vertical-align: middle; }
.level-select { padding: .25rem .35rem; background: rgba(10, 16, 34, .8); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.module-stock td { padding: .2rem .4rem; }
.module-order-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
                    margin: .6rem 0; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .45); }
.module-order-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
[data-module-row] { position: relative; }
.module-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.8rem; }
.module-foot-costs { min-width: 0; }
.module-foot .build-costs { margin-top: 0; }
.module-pick { flex: none; display: inline-flex; cursor: pointer; }
.module-pick input, .module-pick-all input { width: 20px; height: 20px; accent-color: var(--faction); cursor: pointer; }
.order-pick-all { display: flex; justify-content: flex-end; margin: -.3rem 0 .3rem; }
.order-list li { grid-template-columns: minmax(0, 1fr); }
.order-pick { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .15rem .2rem; border-radius: 6px; }
.order-pick:hover { background: rgba(140, 160, 220, .08); }
.order-pick input { width: 18px; height: 18px; accent-color: var(--faction); }
.module-pick-all { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 400; color: var(--muted); cursor: pointer; }
.shipyard-queue li:has(.module-mini) { grid-template-columns: minmax(0, 1fr) auto; }

/* ==========================================================================
   Datenbank: Ansichten Karten · Tabelle · Kompakt (js/codex-views.js)
   ========================================================================== */

.view-switch { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; margin: -.8rem 0 1rem; }
.view-switch .btn.active { border-color: var(--faction); color: var(--faction); background: color-mix(in srgb, var(--faction) 14%, transparent); }

.codex[data-view="table"] .codex-grid,
.codex[data-view="compact"] .codex-grid,
.codex .cv-generated { display: none; }
.codex[data-view="table"] .cv-generated[data-view="table"] { display: block; }
.codex[data-view="compact"] .cv-generated[data-view="compact"] { display: flex; }

/* Tabelle */
.cv-table-wrap { overflow-x: auto; margin-bottom: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cv-table td, .cv-table th { vertical-align: middle; }
.cv-table thead th { position: sticky; top: 0; background: var(--bg-soft); white-space: nowrap; }
.cv-table tbody tr:hover td { background: var(--surface-hi); }
.cv-table td:nth-child(2) { min-width: 11rem; }
.cv-table td:nth-child(2)[title] { cursor: help; }
.cv-sub { display: block; }
.cv-icon { width: 40px !important; height: 40px !important; flex: none; object-fit: contain; }
.cv-icon.tile { display: inline-block; background-size: cover; position: relative; }
.cv-icon.tile img { width: 100%; height: 100%; }
.cv-chips { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 22rem; }
.cv-chips > * { margin: 0 !important; }
.cv-chip-icon { padding: .15rem !important; min-width: 0; }
.cv-chip-icon img, .cv-chip-icon .tile { width: 22px !important; height: 22px !important; }
.cv-chips .unlock { flex-direction: row; padding: .15rem; }

/* Kompakt */
.cv-compact { flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.cv-tile {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 88px; padding: .5rem .3rem;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
    font: inherit; font-size: .72rem; line-height: 1.2; text-align: center; cursor: pointer;
}
.cv-tile:hover, .cv-tile:focus-visible { border-color: var(--faction); background: var(--surface-hi); outline: none; }
.cv-tile .cv-icon { width: 48px !important; height: 48px !important; }
.cv-tile span { overflow-wrap: anywhere; }
.cv-tooltip {
    position: absolute; z-index: 50; width: 380px; max-width: calc(100vw - 20px); pointer-events: none;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6));
}
.cv-tooltip > .codex-card { margin: 0; border-color: var(--faction); background: var(--bg-soft); }
.codex-card.cv-flash { outline: 2px solid var(--faction); outline-offset: 2px; transition: outline-color 1s; }
.cv-table td:first-child, .cv-table th:first-child { width: 56px; }
.codex-stats { margin: .6rem 0 .2rem; }
.cv-chips .chip[data-keep-text] { font-size: .78rem; padding: .1rem .4rem; white-space: nowrap; }

/* ==========================================================================
   Forschung mit Punkten pro Runde (ingame/research.php, inc/research_queue.php)
   ========================================================================== */

.research-active { display: grid; gap: .8rem; border-color: color-mix(in srgb, var(--faction) 40%, transparent); }
.research-pool { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.research-pool div { display: grid; }
.research-pool strong { font-size: 1.25rem; }.res-chip.is-zero { opacity: .45; }
.research-now h2 { margin: .1rem 0 .5rem; font-size: 1.25rem; }
.research-now h2 a { color: var(--text); }
.research-now p { margin: .4rem 0; }
.research-now .res-chip { vertical-align: middle; }
.research-progress { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.research-progress .progress { flex: 1; }
.research-progress-big .progress { height: 12px; }
/* Datenbank: Stufen der Gebäude (sql/030) */
.tier-stage-1 { --tier: #3ecf8e; }
.tier-stage-2 { --tier: #5fb8ff; }
.tier-stage-3 { --tier: #f5b94a; }
.tier-stage-4 { --tier: #c77dff; }
.stage-filter { margin-top: -.25rem; }
.job-list { margin: .25rem 0 .5rem; padding-left: 1.1rem; }
.job-list li { margin: .15rem 0; }
/* Admin: Einträge/Zutaten hinzufügen */
.add-row { margin: .4rem 0 .8rem; gap: .4rem; flex-wrap: wrap; }
.add-row select, .add-row .input-sm { width: auto; min-width: 7rem; }
.recipe-new { margin: .4rem 0; }
.recipe-new summary { cursor: pointer; }
.role-title { margin: .6rem 0 .3rem; font-size: .8rem; font-weight: 600; }
.role-title.pos { color: var(--ok, #3ecf8e); }
.role-title.neg { color: var(--danger, #ff5d6c); }
/* Admin: Wirkung pro Runde als eine Zahl (+ erzeugt / − verbraucht) */
.res-input.flow .flow-sign { display: inline-block; min-width: .7em; }
.res-input.flow.pos span { color: #3ecf8e; }
.res-input.flow.neg span { color: #ff5d6c; }
.pos-text { color: #3ecf8e; } .neg-text { color: #ff5d6c; }
.flow-remove { background: none; border: 0; color: var(--muted, #8a93a8); cursor: pointer; padding: 0 .3rem; font-size: .8rem; }
.flow-remove:hover { color: #ff5d6c; }
.recipe-head { margin-top: .6rem; align-items: center; }
.recipe-head .build-title { margin: 0; }
/* Admin: Gebäude anlegen, Felder und Freischaltung als Haken-Chips, Bild */
.add-building { align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.add-building .grow { flex: 1 1 16rem; }
.check-grid { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.check-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .35rem; border: 1px solid var(--border, #2a3348);
              border-radius: 999px; font-size: .8rem; cursor: pointer; }
.check-chip.is-on, .check-chip:has(input:checked) { border-color: var(--primary, #7b8cff); background: rgba(123, 140, 255, .12); }
.check-chip input { margin: 0; }
.check-chip .tile-mini { width: 18px; height: 18px; }.image-preview { display: flex; align-items: flex-end; gap: .8rem; margin-bottom: .8rem; }
.image-preview .tile { position: relative; background-size: cover; image-rendering: pixelated; border-radius: 4px; }

/* Kolonie-Übersicht: laufende Grundlagenforschung über dem Lager */
.basics-panel { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--faction) 45%, transparent);
                background: linear-gradient(135deg, color-mix(in srgb, var(--faction) 14%, transparent), transparent 70%), var(--surface); }
.basics-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none;
                        background: radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--faction) 22%, transparent), transparent 45%); }
.basics-head { position: relative; display: flex; align-items: center; gap: .8rem; color: var(--text); text-decoration: none; }
.basics-head:hover strong { color: var(--faction); }
.basics-head strong { display: block; font-size: 1.05rem; line-height: 1.25; }
.basics-head .eyebrow { display: block; margin: 0 0 .1rem; }
.basics-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
               background: rgba(255, 255, 255, .06); box-shadow: 0 0 18px color-mix(in srgb, var(--faction) 35%, transparent); }
.basics-icon img { width: 40px; height: 40px; animation: basics-bob 3s ease-in-out infinite; }
.basics-bar { position: relative; height: 10px; margin: .8rem 0 .45rem; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.basics-bar > span { position: relative; display: block; height: 100%; border-radius: 5px; transition: width 1s linear;
                     background: linear-gradient(90deg, color-mix(in srgb, var(--faction) 60%, #fff 0%), var(--faction));
                     box-shadow: 0 0 10px color-mix(in srgb, var(--faction) 70%, transparent); overflow: hidden; }
.basics-bar > span::after { content: ''; position: absolute; inset: 0; animation: basics-shine 2.4s linear infinite;
                            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-100%); }
.basics-time { position: relative; display: flex; justify-content: space-between; align-items: baseline; }
.basics-time strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.basics-unlocks { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .6rem; }
.basics-unlock { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem .1rem .2rem; border-radius: 999px;
                 background: rgba(255, 255, 255, .06); font-size: .8rem; }
.basics-unlock img { width: 22px; height: 22px; object-fit: contain; }
@keyframes basics-shine { to { transform: translateX(100%); } }
@keyframes basics-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .basics-icon img, .basics-bar > span::after { animation: none; } }

/* Kolonie-Übersicht: Module im Lager-Kasten */
[data-module-row].needs-level { border-color: rgba(255, 93, 108, .7); }
[data-module-row].needs-level .level-select { border-color: rgba(255, 93, 108, .9); }
.job-ship { width: 40px; height: 40px; object-fit: contain; flex: none; }

/* Forschungsbaum (ingame/research_tree.php): Stufen als Spalten von links nach rechts */
.tree-board { position: relative; display: flex; align-items: stretch; gap: 1.6rem; overflow-x: auto; padding: .4rem .2rem 1rem; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.tree-lines path { fill: none; stroke-width: 2; }
.tree-lines .tl-req { stroke: rgba(150, 170, 230, .35); }
.tree-lines .tl-req.is-done { stroke: color-mix(in srgb, var(--success) 70%, transparent); }
.tree-lines .tl-gate { stroke: color-mix(in srgb, var(--faction) 55%, transparent); stroke-dasharray: 6 5; }
.tree-lines .tl-gate.is-done { stroke: color-mix(in srgb, var(--success) 60%, transparent); }
.tree-lines .tl-excl { stroke: color-mix(in srgb, var(--danger) 75%, transparent); stroke-dasharray: 3 4; }
.tree-stage { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; gap: .8rem; min-width: 15rem;
              padding: .8rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(0, 0, 0, .18); }
.tree-stage.is-complete { border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.tree-stage.is-locked { opacity: .75; }
.tree-stage-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.tree-gate { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .75rem; color: var(--muted); }.tree-stage-toggle { display: flex; align-items: center; gap: .55rem; padding: 0; border: 0; background: none; color: var(--text);
                     cursor: pointer; text-align: left; font: inherit; }
.tree-stage-no { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-weight: 800;
                 background: color-mix(in srgb, var(--faction) 22%, transparent); color: var(--faction); }
.tree-stage.is-complete .tree-stage-no { background: color-mix(in srgb, var(--success) 25%, transparent); color: var(--success); }
.tree-stage-title { display: grid; }
.tree-stage-title small { color: var(--muted); font-size: .74rem; }.tree-stage.is-collapsed { min-width: 0; padding: .6rem .5rem; }   .tree-stage.is-collapsed .tree-stage-title, .tree-stage.is-collapsed .tree-gate { display: none; }
.tree-stage.is-collapsed .tree-stage-head { justify-content: center; }
.tree-stage.is-collapsed .rt-all-area { display: none; }   /* Kacheln der zugeklappten Stufe (Kachel-Baum, sql/114) */
.tree-stage-toggle { cursor: pointer; }
.tree-stage-toggle:hover .tree-stage-no { box-shadow: 0 0 0 2px var(--faction); }.tnode { position: relative; width: 14rem; display: grid; gap: .45rem; padding: .6rem .7rem; border-radius: 10px;
         border: 1px solid var(--border); background: #10172b; transition: border-color .15s, box-shadow .15s; }
.tnode:hover { border-color: color-mix(in srgb, var(--faction) 60%, transparent); }
.tnode.is-done { border-color: color-mix(in srgb, var(--success) 50%, transparent); }
.tnode.is-available { border-color: color-mix(in srgb, var(--faction) 70%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--faction) 25%, transparent); }
.tnode.is-running { border-color: var(--faction); box-shadow: 0 0 16px color-mix(in srgb, var(--faction) 45%, transparent); }
.tnode.is-locked { opacity: .6; }
.tnode.is-excluded { opacity: .4; filter: grayscale(.8); border-style: dashed; }
.tnode.is-optional::after { content: 'Wahl'; position: absolute; top: -.55rem; right: .6rem; padding: 0 .4rem; border-radius: 6px;
                            font-size: .62rem; background: var(--bg-soft); color: var(--muted); border: 1px solid var(--border); }
.tnode.is-reward { border-style: dashed; background: #1a1a22; }
.tnode.is-reward.is-done { border-style: solid; }
.tnode.is-basics::before { content: 'Grundlage'; position: absolute; top: -.55rem; left: .6rem; padding: 0 .4rem; border-radius: 6px;
                            font-size: .62rem; background: var(--bg-soft); color: var(--faction); border: 1px solid var(--border); }
.tnode-head { display: flex; align-items: center; gap: .55rem; }
.tnode-head > div { display: grid; min-width: 0; }
.tnode-head strong { font-size: .92rem; }
.tnode-head small { color: var(--muted); font-size: .74rem; }
.tnode.is-done .tnode-head small { color: var(--success); }
.tnode-icon { width: 34px; height: 34px; flex: none; image-rendering: pixelated; }
.tnode-unlocks { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.tnode-unlocks img { width: 22px; height: 22px; image-rendering: pixelated; }
.tnode-action { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0; }

/* Schiffsseite kompakt (Sandro 2026-10-02): Kopfzeile, schlanke Statusleiste, Kontrollen als Zeilen */
.ship-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.ship-head > img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.ship-head-title { flex: 1; display: grid; min-width: 0; }
.ship-head-title h1 { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.ship-rename { position: relative; }
.ship-name-row { display: inline-flex; align-items: center; gap: .3rem; }
.ship-name-row .ship-rename form { left: 0; right: auto; }
.ship-rename summary { list-style: none; cursor: pointer; padding: .2rem .45rem; border-radius: 6px; color: var(--muted); }
.ship-rename summary::-webkit-details-marker { display: none; }
.ship-rename summary:hover, .ship-rename[open] summary { color: var(--text); background: rgba(255, 255, 255, .08); }
.ship-rename form { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; padding: .5rem; border-radius: 8px;
                    background: #10172b; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }

/* Schiff: Frachtraum/Tank + Beamer in der Kontroll-Kachel (inc/cargo.php) */
.cargo-list { margin: -.4rem 0 .8rem; }
.beam-btn { display: inline-flex; padding: .2rem; border-radius: 8px; border: 1px solid var(--border); background: rgba(255, 255, 255, .03); cursor: pointer; }
.beam-btn img { width: 34px; height: 34px; }
.beam-btn:hover, .beam-btn.is-active { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, transparent); }
.beam-btn.is-off { opacity: .35; cursor: default; }
.beam-btn.is-docked { border-color: rgba(90, 220, 130, .6); background: rgba(90, 220, 130, .1); }   /* angedockt: grün umrandet */
.beam-pane { flex-basis: 100%; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, .03); }
.beam-pane .eyebrow { margin: 0 0 .45rem; }
.beam-res-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.beam-res { display: grid; justify-items: center; gap: .1rem; min-width: 3.4rem; padding: .3rem .35rem; border-radius: 8px; cursor: pointer;
            border: 1px solid var(--border); background: transparent; color: inherit; font-size: .75rem; }
.beam-res img { width: 30px; height: 30px; image-rendering: pixelated; }
.beam-res:hover, .beam-res.is-active { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, transparent); }
.beam-form { display: grid; gap: .35rem; margin: .6rem 0 0; }
.beam-form input[type="number"] { width: 6rem; }
.beam-form[hidden] { display: none; }
/* Mehrfachauswahl (Sandro 2026-10-05): je Ware eine Zeile – Bild, Name, Menge, Max, Hinweis, abwählen */
.beam-rows { display: grid; gap: .3rem; }
.beam-row { display: grid; grid-template-columns: 24px 9rem 6rem auto 1fr auto; align-items: center; gap: .45rem; }
.beam-row img { width: 24px; height: 24px; image-rendering: pixelated; }
.beam-row-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .9rem; }
.beam-row-x:hover { color: var(--danger); }
.beam-foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
.beam-cost { font-size: .85rem; white-space: nowrap; }   /* Energiekosten live (Sandro 2026-10-25) */
.beam-cost.is-short b { color: var(--danger); }
.beam-cost.is-free b { color: var(--success, #5adc82); }

/* Admin → Forschung: links der Baum als Kacheln { display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr); gap: 1.2rem; align-items: start; margin-bottom: 1.2rem; }/* Admin → Forschung → Boni: Schiffe als Belohnung (sql/065) */
.reward-ships-note { margin: .8rem 0 .4rem; }
.reward-ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; }
.reward-ship { display: grid; grid-template-columns: 28px minmax(0, 1fr) 3.2rem; align-items: center; gap: .4rem; padding: .25rem .4rem;
    border: 1px solid var(--border); border-radius: 8px; font-size: .78rem; }
.reward-ship.is-on { border-color: color-mix(in srgb, var(--faction) 70%, transparent); background: color-mix(in srgb, var(--faction) 10%, transparent); }
.reward-ship img { width: 28px; height: 28px; object-fit: contain; }
.reward-ship span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reward-ship input { width: 100%; padding: .15rem .3rem; }
/* Admin → Spieler bearbeiten: Forschungsbaum des Accounts, ✕ setzt zurück */
.admin-user-research { margin-top: 1.2rem; }
.admin-user-research .tnode { padding-right: 2.2rem; }a.tree-gate { text-decoration: none; padding: .15rem .4rem; border-radius: 8px; border: 1px solid transparent; }
a.tree-gate:hover, a.tree-gate.is-selected { border-color: var(--faction); }.check-grid-label { align-self: center; min-width: 1.2rem; }/* lange Namen umbrechen statt überlaufen */
.tnode-head > div, .tnode-head > span { min-width: 0; }
.tnode-head strong { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }.branch-row { align-items: center; }
.branch-row .check-grid-label { min-width: 6.5rem; }
.unlock-buildings { margin: .3rem 0; }
.unlock-buildings > .role-title { margin: 0 0 .2rem; }
.cap-down { margin: -.1rem 0 .3rem; color: #ffb3bb; }   /* Kapazität fällt weg, weil Gebäude stillstehen – und es kostet gerade etwas */
/* Ausbau pausiert (sql/062) */
.tile-paused { position: absolute; top: 2px; right: 3px; z-index: 3; font-size: .8rem; text-shadow: 0 0 4px #000; }
.meter.is-paused > div { background: repeating-linear-gradient(45deg, #ff5d6c, #ff5d6c 6px, #8a2f3a 6px, #8a2f3a 12px); }
/* Ausgang einer Stufe: Startpunkt der einen Tor-Linie zur nächsten Stufe (ingame/research_tree.php) */
.brings-row { display: flex; gap: .7rem; align-items: flex-start; }
.brings-img { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
.brings-row strong { margin-right: .5rem; }
.brings-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.brings-other { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.res-chip.eff-pos { border-color: color-mix(in srgb, var(--success) 55%, transparent); color: var(--success); }
.res-chip.eff-neg { border-color: rgba(255, 93, 108, .55); color: #ffb3bb; }
.res-chip.eff-cap { border-color: color-mix(in srgb, var(--faction) 55%, transparent); color: var(--faction); }
.res-chip.eff-meta { color: var(--muted); }
.res-chip .eff-icon { font-size: .85em; }
/* Was ein freigeschaltetes Gebäude mitbringt (erzeugte Waren { display: inline-flex; align-items: center; font-size: .78rem; line-height: 1; opacity: .9; }
/* ==========================================================================
   Schiffs-HUD (Sandro 2026-10-05): links Karte + Nahbereich, rechts das HUD mit allen Werten und Funktionen
   ========================================================================== */
.ship-page { display: grid; grid-template-columns: max-content 400px; justify-content: start; gap: 1.2rem; align-items: start; }
.ship-page.has-fleet { grid-template-columns: max-content 400px minmax(320px, 1fr); }   /* Flottenstatus rechts neben dem HUD (Crew steckt im Crewquartier) */
.ship-near { margin: 1.2rem 0 0; }
.near-transport, .near-attack { white-space: nowrap; }
.near-transport .beam-btn img, .near-attack .beam-btn img { width: 26px; height: 26px; }
.near-attack .inline-form, .near-transport .inline-form { display: inline-flex; }
.refuel-btn:hover { border-color: #46dc96; background: rgba(70, 220, 150, .14); }
.attack-btn:hover { border-color: #ff5d6c; background: rgba(255, 93, 108, .14); }
.near-transport-row td { padding: 0 .5rem .6rem; border: 0; }
.near-transport-row td:not(:has(.beam-pane:not([hidden]))) { padding: 0; }
.beam-res:disabled { opacity: .4; cursor: not-allowed; }
.ship-mid { display: grid; gap: 1.2rem; align-content: start; min-width: 0; }
.ship-beamer { display: grid; gap: .6rem; padding: .9rem 1rem; }
.near-objects { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding-bottom: .9rem; margin-bottom: .6rem; border-bottom: 1px solid var(--border); }
.near-objects .here-body, .near-objects .action-row, .near-objects .land-box, .near-objects p { margin: 0; }
.near-objects .land-box { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ship-page .panel { margin: 0; }
.ship-page .ship-left { width: auto; min-width: 0; display: grid; gap: 1.2rem; align-content: start; }
.ship-page .ship-map-panel { justify-self: start; max-width: 100%; }
.ship-map-loc { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .5rem; min-height: 34px; }   /* Ort + System betreten/verlassen über der Nahbereichskarte (Sandro 2026-10-24) */
.nav-sys-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .3rem; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; color: inherit; font: inherit; font-size: .8rem; cursor: pointer; }
.nav-sys-btn img { width: 24px; height: 24px; }
.nav-sys-btn:hover { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, transparent); }
.ship-cargo .meter-head + .meter ~ .meter-head { margin-top: .6rem; }
.ship-hud { --hud-alert: #22d04b; display: grid; gap: .7rem; padding: .9rem 1rem 1rem;
            border-color: color-mix(in srgb, var(--hud-alert) 45%, var(--border));
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--hud-alert) 12%, transparent), 0 0 22px color-mix(in srgb, var(--hud-alert) 10%, transparent); }
.ship-hud[data-alert="yellow"] { --hud-alert: #f5d04a; }
.ship-hud[data-alert="red"]    { --hud-alert: #ff3b3b; }
.ship-topbar { position: relative; display: flex; align-items: center; gap: 1rem; margin: 0 0 1.2rem; padding: .7rem 1rem; }
.ship-topbar > img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }
.ship-topbar-title { display: grid; min-width: 0; line-height: 1.35; }
.ship-topbar-title h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.ship-topbar-mods { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .35rem 1.2rem; min-width: 0; }
/* NPC-Werkstatt (Sandro 2026-10-26): Knopf rechts in der Kopfleiste der Station → eigene Seite (ingame/npc.php) */
.npc-switch { flex: none; margin-left: auto; }
.npc-final { margin-top: 1rem; }
.npc-final input[type="number"] { width: 6rem; }
.npc-ships { margin-top: 1.2rem; padding: 0; overflow: hidden; }
.npc-ships-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--border); }
.npc-ships-head h2 { margin: 0; font-size: 1.1rem; }
.npc-ships-head h2 small { font-size: .8rem; font-weight: 400; margin-left: .5rem; }
.npc-ships > p { padding: 1rem 1.2rem; margin: 0; }
.npc-ship-acts { flex-wrap: nowrap; justify-content: flex-end; }
.npc-ships form { display: inline; }
.topbar-mod { display: grid; justify-items: center; gap: .15rem; width: 46px; padding: .25rem .2rem .2rem; border-radius: 8px;
              border: 1px solid color-mix(in srgb, var(--integ) 55%, var(--border)); background: color-mix(in srgb, var(--integ) 8%, transparent); }
.topbar-mod img { width: 26px; height: 26px; }
.topbar-mod-bar { width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.topbar-mod-bar i { display: block; width: var(--pct); height: 100%; background: var(--integ); }
.topbar-mod small { font-size: .62rem; font-weight: 700; color: var(--integ); line-height: 1; }
.topbar-group { display: grid; gap: .25rem; }
.topbar-group .eyebrow { font-size: .62rem; }
.topbar-group-tiles { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.topbar-group-tiles > form { margin: 0; }
.topbar-extra { --integ: var(--accent, #5fd4ff); }
.topbar-extra small { color: var(--muted); font-weight: 600; }
.topbar-extra.is-free { border-style: dashed; background: transparent; }
.ship-topbar-mods .topbar-extra { min-height: 54px; align-content: center; }   /* Kopfleiste: Zusatzplätze so hoch wie die Modul-Kacheln (ohne „eingebaut“-Text) */
.topbar-extra.is-free img { opacity: .5; }
button.topbar-extra.is-action { width: 56px; cursor: pointer; font: inherit; color: inherit; }
button.topbar-extra.is-action:hover:not(:disabled) { --integ: #ff8a6a; background: color-mix(in srgb, var(--integ) 18%, transparent); }
/* Orbitalstation → Nachrüsten (Sandro 2026-10-17) */
.extra-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: .3rem .6rem; padding: .4rem 0;
                 border-bottom: 1px solid var(--border); }
.extra-list small { display: block; }
.extra-slots, .extra-install { grid-column: 2; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.extra-install:empty { display: none; }
.extra-slots form, .extra-install form { margin: 0; }
/* Schiffs-HUD unten (Sandro 2026-10-09): Aktionen als Icon-Knöpfe, darunter aufklappbar Beamer und „Schiff & Flotte“ */
.hud-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.hud-actions > form { margin: 0; display: grid; }
.hud-act { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .45rem .3rem .35rem; border-radius: 10px;
           border: 1px solid var(--border); background: rgba(255, 255, 255, .03); color: var(--text); font: inherit; font-size: .72rem;
           cursor: pointer; text-align: center; transition: border-color .12s, background .12s, transform .12s; }
.hud-act img { width: 36px; height: 36px; transition: transform .15s; }
.hud-act:hover:not(.is-off) { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, transparent); }
.hud-act:hover:not(.is-off) img { transform: scale(1.12); }
.hud-act:active:not(.is-off) { transform: translateY(1px); }
.hud-act.is-off { opacity: .35; cursor: default; }
.hud-act-why { margin-top: .45rem; padding: .4rem .6rem; font-size: .78rem; color: var(--muted); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
               border-radius: 8px; background: color-mix(in srgb, var(--danger) 8%, transparent); }   /* Gründe zu gesperrten Aktionen (Sandro 2026-10-25) */
.hud-act-why b { color: var(--text); font-weight: 600; }
.hud-act-why ul { margin: .2rem 0 0; padding-left: 1.1rem; }
/* Konstrukt → Station: Bauplan abrufen, Kosten als Kacheln da/gebraucht (Sandro 2026-10-25) */
.stype-bp { display: grid; gap: .35rem; }
.stype-bp[hidden] { display: none; }
.stype-bp p { margin: 0; }
.stype-need { display: flex; flex-wrap: wrap; gap: .3rem; }
.stype-need span { display: grid; justify-items: center; gap: .1rem; min-width: 46px; padding: .25rem .3rem .2rem; border: 1px solid var(--border);
                   border-radius: 8px; background: rgba(5, 8, 18, .5); font-size: .72rem; }
.stype-need span.pos { border-color: color-mix(in srgb, var(--success, #4fe0a0) 55%, var(--border)); }
.stype-need span.neg { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); }
.stype-need img { width: 24px; height: 24px; }
.hud-top { display: grid; gap: .5rem; }
.hud-top.has-fleet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.hud-alerts { display: grid; gap: .3rem; }
.hud-alerts .inline-form { display: block; }
/* Alarmstufe als Zeile (Sandro 2026-10-05, knapp): Icon | Name; aktiv = leuchtet in ihrer Farbe + Mini-Icons der Systeme */
.hud-alert-row { --c: #22d04b; width: 100%; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: .2rem .5rem;
                 padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 9px; background: rgba(5, 8, 18, .35);
                 color: var(--muted); font: inherit; text-align: left; cursor: pointer; opacity: .65; }
.hud-alert-row.alert-yellow { --c: #f5d04a; }
.hud-alert-row.alert-red    { --c: #ff3b3b; }
.hud-alert-row > img { width: 26px; height: 26px; filter: grayscale(.6); }
.hud-alert-name { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .78rem; }
.hud-alert-row:hover { opacity: 1; border-color: var(--c); }
.hud-alert-row:hover > img { filter: none; }
.hud-alert-row.is-active { opacity: 1; color: var(--text); border-color: var(--c);
                           background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 28%, transparent); }
.hud-alert-row.is-active > img { filter: drop-shadow(0 0 5px var(--c)); }
.hud-alert-row.is-active .hud-alert-name { color: var(--c); }
.hud-alert-state { grid-column: 2; display: flex; align-items: center; gap: .3rem; }
.hud-alert-state img { width: 18px; height: 18px; opacity: .3; filter: grayscale(1); }
.hud-alert-state img.is-on { opacity: 1; filter: none; }
.hud-alert-state small { color: var(--muted); margin-left: auto; }
/* Flottenkontrolle (sql/089): je Befehl ein Schalter mit LED – an = die Flotte macht mit */
.hud-fleetctrl { display: grid; gap: .3rem; align-content: start; }
.hud-fleetctrl .inline-form { display: block; }
.hud-col-head { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
                      text-transform: uppercase; color: var(--muted); }
.hud-col-head img { width: 18px; height: 18px; }   /* Titel über Alarmstufe und Flottenkontrolle */
.hud-fleetctrl-btn { width: 100%; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: .45rem; padding: .25rem .5rem;
                     border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 8, 18, .35); color: var(--muted);
                     font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.hud-fleetctrl-btn img { width: 20px; height: 20px; opacity: .45; filter: grayscale(1); }
.hud-fleetctrl-btn:hover { border-color: #5a8cff; color: var(--text); }
.hud-fleetctrl-btn.is-on { color: var(--text); border-color: rgba(90, 140, 255, .55); background: rgba(90, 140, 255, .12); }
.hud-fleetctrl-btn.is-on img { opacity: 1; filter: none; }
.hud-fleetctrl-btn .sys-led { position: static; }
.hud-fleetctrl-btn.is-idle { cursor: default; opacity: .55; }   /* ohne Führung: nur Anzeige (Einzelschiff / Flottenmitglied, Sandro 2026-10-24) */
.hud-fleetctrl-btn.is-idle:hover { border-color: var(--border); color: var(--muted); }
.hud-fleetctrl-btn.is-idle.is-on:hover { border-color: rgba(90, 140, 255, .55); color: var(--text); }
.hud-col-head a { color: inherit; }
.hud-title { display: flex; justify-content: space-between; align-items: baseline; margin: .2rem 0 -.2rem; font-size: .72rem; font-weight: 700;
             letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hud-title a { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hud-systems { display: grid; gap: .3rem; }
/* Systeme als Icon-Raster (Sandro 2026-10-09): Reihen Schutz (blau) · Schiffssysteme (grün) · Waffen (rot), Klick klappt die Zeile auf */
.hud-sysgrid { display: grid; gap: .45rem; }
.hud-sysgrid .inline-form { display: contents; }
.hud-sysrow { --row: #4fb3ff; display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem; border-radius: 10px;
              border: 1px solid color-mix(in srgb, var(--row) 45%, transparent); background: color-mix(in srgb, var(--row) 6%, transparent); }
.hud-sysrow.is-system { --row: #4ade80; }
.hud-sysrow.is-waffen { --row: #ff5d6c; }
.hud-sysrow.is-crew { --row: #e879f9; }   /* Zusatzcrew (Sandro 2026-10-24): Plätze der Klasse, noch ohne Crew-Module */
.hud-crew { display: grid; gap: .45rem; }
.hud-crew > summary { cursor: pointer; list-style: none; margin: .2rem 0 0; justify-content: flex-start; }
.hud-crew > summary::-webkit-details-marker { display: none; }
.hud-crew > summary::before { content: '▸'; margin-right: .35rem; transition: transform .15s; display: inline-block; }
.hud-crew[open] > summary::before { transform: rotate(90deg); }
.hud-crew > summary small { margin-left: auto; }
.crew-secs { grid-column: 2; display: grid; gap: .3rem; }   /* Zusatzcrew an der Orbitalstation (Sandro 2026-10-27): Bereiche gestapelt */
.crew-sec { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: end; gap: .6rem; padding: .25rem 0;
            border-top: 1px dashed var(--border); }
.crew-sec:first-child { border-top: 0; }
.crew-sec-name { align-self: center; font-size: .78rem; font-weight: 700; color: var(--muted); }
.crew-sec-deps { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .3rem 1.1rem; }
.crew-dep { display: grid; gap: .15rem; }
.crew-dep-name { font-size: .68rem; font-weight: 600; color: var(--muted); }
.crew-dep-slots { display: flex; gap: .3rem; }
.crew-tile { position: relative; width: 42px; min-height: 42px; align-content: center; }
.crew-tile small { position: absolute; right: 3px; bottom: 2px; }
button.crew-tile.is-action { width: 42px; }
.hud-crewslot { cursor: default; }
.hud-crewslot:hover { transform: none; }
.hud-crewslot small { position: absolute; right: 4px; bottom: 2px; font-size: .62rem; font-weight: 700; color: var(--muted); }
.hud-sysicon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 9px; cursor: pointer;
               border: 1px solid var(--border); background: rgba(5, 8, 18, .55); transition: border-color .12s, background .12s, transform .12s; }
.hud-sysicon img { width: 28px; height: 28px; image-rendering: pixelated; margin-top: -4px; }
.hud-sysicon:hover { border-color: var(--row); transform: translateY(-1px); }
.hud-sysicon[aria-expanded="true"] { border-color: var(--row); background: color-mix(in srgb, var(--row) 20%, transparent);
                                     box-shadow: 0 0 8px color-mix(in srgb, var(--row) 45%, transparent); }
.hud-sysicon.is-off img { opacity: .5; }
.hud-sysicon.is-empty { border-style: dashed; background: none; }
.hud-sysicon.is-empty img { opacity: .3; filter: grayscale(1); }
.hud-sysicon .sys-led { left: auto; right: 3px; top: 3px; }
.hud-sysicon-bar { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hud-sysicon-bar > span { display: block; height: 100%; }
.hud-sysdetail { margin-top: -.15rem; }
.hud-sysdetail > .hud-sys, .hud-sysdetail > .inline-form > .hud-sys { width: 100%; }

.hud-systems .inline-form { display: contents; }
.hud-sys { position: relative; display: grid; grid-template-columns: 26px 6.6rem minmax(0, 1fr) 6.2rem; align-items: center; gap: .5rem;
           width: 100%; min-width: 0; padding: .3rem .5rem; text-align: left; font: inherit; color: inherit; line-height: 1.2;
           border: 1px solid color-mix(in srgb, var(--faction) 35%, var(--border)); border-radius: 8px;
           background: color-mix(in srgb, var(--faction) 8%, transparent); }
.hud-sys img, .hud-sys-icon { width: 26px; height: 26px; display: grid; place-items: center; font-size: 1.05rem; }
.hud-sys-head { display: grid; min-width: 0; }
.hud-sys-name { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-sys-name b { color: var(--faction); }
.hud-sys-sub { font-size: .64rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-sys-bar .meter { display: block; height: 6px; margin: 0; }
.hud-sys-val { font-size: .86rem; font-weight: 700; white-space: nowrap; text-align: right; }
.hud-sys-val small { font-weight: 400; color: var(--muted); }
.hud-sys.is-empty { background: none; }
.hud-sys.is-empty { border-style: dashed; }
.hud-sys.is-empty img, .topbar-mod.is-empty img { opacity: .3; filter: grayscale(1); }
.topbar-mod.is-empty { border-style: dashed; border-color: var(--border); background: none; }
.topbar-mod.is-empty small { color: var(--muted); }
.hud-sys.is-switch { cursor: pointer; padding-right: 1.1rem; }
.hud-sys.is-switch:hover { border-color: var(--faction); }
.hud-sys.is-switch.is-off { border-color: var(--border); background: rgba(5, 8, 18, .4); }
.hud-sys.is-switch.is-off img { opacity: .4; filter: grayscale(1); }
.hud-sys.is-switch.is-off .hud-sys-val { color: var(--muted); }
.hud-sys.is-switch.is-on { box-shadow: 0 0 6px color-mix(in srgb, var(--faction) 40%, transparent); }
.hud-sys .sys-led { left: auto; right: 6px; top: 50%; margin-top: -3.5px; }
/* An/Aus in der aufgeklappten Zeile (Sandro 2026-10-09): ⏻ – an = rot (ausschalten), aus = grün (einschalten), dezent bis zum Hover */
.hud-sys.is-switch:has(.sys-power) { padding-right: 2rem; }
.sys-power { position: absolute; right: 7px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: rgba(255, 93, 108, .5);
             transition: color .15s, transform .15s, filter .15s; }
.sys-power svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.hud-sys.is-off .sys-power { color: rgba(74, 222, 128, .45); }
.hud-sys.is-switch:hover .sys-power { color: #ff5d6c; transform: scale(1.18); filter: drop-shadow(0 0 4px rgba(255, 93, 108, .8)); }
.hud-sys.is-switch.is-off:hover .sys-power { color: #4ade80; filter: drop-shadow(0 0 4px rgba(74, 222, 128, .8)); }
.hud-block { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; min-width: 0; }
.hud-block > form, .hud-block .action-row, .hud-block p { margin: 0; }
.hud-block .here-body { margin: 0; flex-basis: 100%; }
.hud-block .land-box { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; flex-basis: 100%; }
@media (max-width: 1500px) {
    .ship-page, .ship-page.has-fleet { grid-template-columns: auto 400px; }
    .ship-fleet { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
    .ship-page, .ship-page.has-fleet { grid-template-columns: 1fr; }
}

/* Datenbank → Schiffsmodule: Werte je Level (S, I–VI) */
.module-levels { width: 100%; border-collapse: collapse; font-size: .8rem; margin: .3rem 0 .4rem; }
.module-levels th, .module-levels td { padding: .2rem .3rem; text-align: right; border-bottom: 1px solid rgba(140, 160, 220, .08); white-space: nowrap; }
.module-levels thead th { font-size: .7rem; color: var(--faction); }
.module-levels tbody th { text-align: left; font-weight: 400; color: var(--muted); }
.module-levels tr.is-good td { color: #7ee2a0; }
.module-levels tr.is-bad td { color: #ff9aa5; }
.module-levels td.muted, .module-levels th.muted { opacity: .55; }

/* Nahbereichssensoren: Zustand je Schiff (Hülle, Schilde, beschädigte Module) */
.near-state { display: flex; align-items: center; gap: .6rem; min-width: 14rem; }
.near-bar { display: grid; grid-template-columns: 4.5rem auto; align-items: center; gap: .3rem; }
.near-bar .meter { display: block; height: 6px; margin: 0; }
.near-bar small { font-size: .72rem; color: var(--muted); min-width: 2.5rem; }
.near-dmg { padding: .05rem .4rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--integ);
            border: 1px solid color-mix(in srgb, var(--integ) 55%, transparent); background: color-mix(in srgb, var(--integ) 10%, transparent); }

/* Reaktor-Auslastung im HUD (Verbrauch der Systeme / Reaktorleistung) */
.meter-load > span { background: #f5a04a; }

/* Flotten mit Führungsschiff (sql/081): Flagge in der Spalte „Flotte“ */
.fleet-cell { white-space: nowrap; }
.fleet-cell, .fleet-cell form { display: flex; align-items: center; gap: .4rem; }
/* Flottenliste (Sandro 2026-10-26): Flagge vor der Alarmstufe; eingeladen wird in der Kopfzeile der Flotte */
.fleet-table .fleet-cell .fleet-flag img { width: 20px; height: 20px; }
.fleet-table .fleet-cell > form, .fleet-table .fleet-cell > .fleet-flag { width: 28px; justify-content: center; }   /* Ampeln bleiben untereinander */
.fleet-flag { display: inline-flex; padding: .15rem; border-radius: 8px; border: 1px solid var(--border); background: rgba(255, 255, 255, .03); cursor: pointer; }
.fleet-flag img { width: 28px; height: 28px; }
button.fleet-flag img { opacity: .45; filter: grayscale(.8); }
button.fleet-flag:hover { border-color: var(--faction); }
button.fleet-flag:hover img { opacity: 1; filter: none; }
.fleet-flag.is-leader { cursor: default; border-color: color-mix(in srgb, #5a8cff 60%, var(--border)); box-shadow: 0 0 6px rgba(90, 140, 255, .4); }

/* Schiffsansicht: Flottenstatus im Führungsschiff */
.ship-fleet { display: grid; gap: .5rem; padding: .9rem 1rem; }
.fleet-range { margin: 0; }
.fleet-status { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.fleet-status li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px 36px; grid-template-rows: auto auto; column-gap: .5rem; row-gap: .2rem;
                   align-items: center; padding: .3rem .45rem; border-radius: 8px; border: 1px solid var(--border); }
.fleet-status li > img, .fleet-status li > .ship-img-link { grid-row: 1 / 3; width: 32px; height: 32px; object-fit: contain; }
.fleet-status li > .ship-img-link img { width: 32px; height: 32px; object-fit: contain; }
.fleet-status-name { display: flex; align-items: baseline; gap: .4rem; min-width: 0; white-space: nowrap; overflow: hidden; }
.fleet-status-bars { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: .2rem .6rem; min-width: 0; }
.fleet-status-bars .near-state { display: contents; }
.fleet-status-bars .near-bar { grid-template-columns: 1fr; gap: .1rem; min-width: 0; }
.fleet-status-bars .near-bar small { min-width: 0; font-size: .66rem; }
.fleet-status li.is-away { opacity: .6; }
.fleet-status li.is-bottleneck { border-color: rgba(255, 93, 108, .55); }

/* Wracks im Nahbereich (sql/086): Inhalt als kleine Kacheln */
.wreck-items { display: flex; flex-wrap: wrap; gap: 4px; }
.wreck-item { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 2px; border-radius: 6px; background: var(--panel-2, rgba(255,255,255,.05)); }
.wreck-item img { width: 20px; height: 20px; }

/* Modul kaputt (0 %, kritischer Treffer – Kampf v2): Bild abgedunkelt, rot umrandet */
.topbar-mod.is-broken img { filter: grayscale(1) brightness(.5); }
.topbar-mod.is-broken { box-shadow: inset 0 0 0 2px rgba(255, 90, 90, .8); }
.topbar-mod.is-broken small { color: #ff8a8a; font-weight: 700; }

/* Nahbereich: Kopfzeile je Flotte (Sandro 2026-10-05) – eigene zuerst, fremde ohne Hinweis aufs Führungsschiff */
.near-fleet-head td { padding: .55rem .5rem .2rem; border-bottom: 1px solid var(--border); font-size: .8rem; }
.near-fleet-head img { width: 16px; height: 16px; vertical-align: -3px; }

/* Flottenstatus: Führung übergeben (Flagge rechts je Schiff, Sandro 2026-10-05) */
.fleet-status li > .inline-form { grid-column: 4; grid-row: 1 / 3; align-self: center; }
.fleet-status-dmg { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: center; }   /* drei Spalten: Werte | Defekte | Führung */
.fleet-pass-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px;
                  background: rgba(5, 8, 18, .35); cursor: pointer; opacity: .55; }
.fleet-pass-btn img { width: 24px; height: 24px; }
.fleet-pass-btn:hover { opacity: 1; border-color: #5a8cff; background: rgba(90, 140, 255, .14); }

/* Torpedos (sql/093): Symbol in der Angriff-Spalte leuchtet, wenn geladen; Bestücken-Knopf ausgegraut mit Grund */
.beam-btn.is-ready { border-color: rgba(255, 140, 60, .7); box-shadow: 0 0 8px rgba(255, 140, 60, .35); cursor: default; }
.btn.is-disabled { opacity: .45; cursor: not-allowed; }

/* --- Admin: Schiffe vergeben (Sandro 2026-10-06) -------------------------------------------------------------------------- */
.grant-form > .panel, .grant-form > .admin-split { margin-bottom: 1.2rem; }
.grant-form > .admin-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .7rem; margin: .5rem 0 1rem; }
.grant-card {
    display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem .5rem .7rem; text-align: center;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: border-color .15s, background .15s;
}
.grant-card img { width: 120px; height: 120px; cursor: pointer; user-select: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.grant-card img:hover { transform: scale(1.04); }
.grant-card strong { font-size: .9rem; line-height: 1.25; }
.grant-card small { font-size: .75rem; line-height: 1.3; }
.grant-card input { width: 70px; margin-top: .4rem; text-align: center; }
.grant-card.is-picked { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 12%, var(--surface)); }
.grant-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: .4rem .9rem; margin-top: .6rem; }   /* 2 Spalten, schmal 1 */
.grant-module, .grant-ware { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.grant-module img, .grant-ware img { width: 28px; height: 28px; flex: none; }
.grant-module span, .grant-ware span { flex: 1; min-width: 0; }
.grant-module select { width: 70px; }
.grant-wares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .9rem; margin-top: .6rem; }
.grant-ware input { width: 90px; flex: none; }
.grant-module select { flex: none; }
.grant-factions { display: flex; flex-wrap: wrap; gap: .4rem; }
.grant-faction {
    position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem .25rem .35rem; cursor: pointer;
    font-size: .82rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.grant-faction input { position: absolute; opacity: 0; pointer-events: none; }
.grant-faction img { width: 26px; height: 26px; }
.grant-faction:hover { border-color: color-mix(in srgb, var(--faction) 60%, transparent); }
.grant-faction:has(input:checked) { color: var(--text); border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, var(--surface)); }
.grant-faction b {
    min-width: 1.3rem; padding: 0 .3rem; font-size: .72rem; line-height: 1.3rem; text-align: center; border-radius: 999px;
    color: #0b0f1c; background: var(--faction);
}

/* --- Admin: Schiffe anlegen – Vorlagen-Assistent + Liste (Sandro 2026-10-18) ------------------------------------------- */
.tpl-wizard > .panel { margin-bottom: 1rem; }
.tpl-wizard [hidden], .tpl-table [hidden], [data-tpl-grant] [hidden] { display: none !important; }
.tpl-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1rem; }
.tpl-steps button {
    padding: .45rem .9rem; font: inherit; font-size: .9rem; color: var(--muted); cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.tpl-steps button:hover { color: var(--text); }
.tpl-steps button.is-on { color: var(--text); border-color: var(--faction); background: color-mix(in srgb, var(--faction) 18%, var(--surface)); }
.tpl-steps .btn { margin-left: auto; }
.tpl-error { margin: 0 0 1rem; padding: .55rem .8rem; border: 1px solid var(--danger); border-radius: 8px; color: #ffb3ba; background: rgba(255, 93, 108, .1); }
.tpl-class { cursor: pointer; position: relative; }
.tpl-class input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.2rem; align-items: start; }
.tpl-cols h2 small { font-size: .85rem; font-weight: 400; }
.tpl-extras { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.tpl-chip {
    position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem .35rem .4rem; cursor: pointer;
    font-size: .85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.tpl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-chip img { width: 28px; height: 28px; }
.tpl-chip:has(input:checked) { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, var(--surface)); }
.tpl-chip:has(input:disabled:not(:checked)) { opacity: .45; cursor: not-allowed; }
.tpl-holds { display: grid; gap: .5rem; margin: .4rem 0 .8rem; }
.tpl-holds > div, .tpl-holdline { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 9rem; gap: .6rem; align-items: center; font-size: .88rem; }
.tpl-holds .meter, .tpl-holdline .meter { height: 10px; }
.tpl-holds small, .tpl-holdline small { text-align: right; font-variant-numeric: tabular-nums; }
.tpl-holds .is-over small { color: var(--danger); }
.tpl-holds .is-over .meter span { background: var(--danger); }
.grant-ware.is-off { opacity: .4; }
.tpl-torp .field { margin: .6rem 0; }
.tpl-check { display: grid; grid-template-columns: 220px repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.tpl-check h3, .tpl-detail-grid h3 { margin: .2rem 0 .4rem; font-size: .95rem; }
.tpl-check-ship { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; }
.tpl-check-ship img { width: 180px; height: 180px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.tpl-list { margin: 0 0 .8rem; padding: 0; list-style: none; font-size: .88rem; }
.tpl-list li { display: flex; align-items: center; gap: .4rem; padding: .12rem 0; }
.tpl-list li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.tpl-list img { width: 20px; height: 20px; }
.tpl-stats { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.tpl-stats th { padding: .12rem .4rem .12rem 0; font-weight: 400; text-align: left; color: var(--muted); }
.tpl-stats td { padding: .12rem 0; text-align: right; }
.tpl-table .tpl-count { width: 70px; text-align: center; }
.tpl-table [data-tpl-toggle].is-on { border-color: var(--primary); }
.tpl-detail > td { background: rgba(5, 8, 18, .35); }
.tpl-detail .tpl-stats th { font-size: .88rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.tpl-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; padding: .6rem .4rem; }
#offers [hidden], .tpl-detail [hidden] { display: none !important; }
.tpl-powers { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .3rem 0 .5rem; }
.tpl-powers > span { width: 100%; }
.tpl-offer-table td { vertical-align: middle; }
.tpl-powers .grant-faction { padding: .12rem .5rem .12rem .22rem; font-size: .76rem; }
.tpl-powers .grant-faction img { width: 18px; height: 18px; }

/* --- Admin: Module – Werte + Baukosten je Level (neu Sandro 2026-10-07) ---------------------------------------------------- */
.madm { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.madm-list { position: sticky; top: 80px; display: grid; gap: .15rem; padding: .6rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.madm-list h3 { margin: .6rem .4rem .2rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.madm-list h3:first-child { margin-top: .1rem; }
.madm-item { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem; border-radius: 8px; color: var(--text); border: 1px solid transparent; }
.madm-item:hover { background: var(--surface-hi); text-decoration: none; }
.madm-item.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.madm-item img { width: 30px; height: 30px; flex: none; }
.madm-item span { display: grid; font-size: .9rem; line-height: 1.2; }
.madm-item small { font-size: .72rem; color: var(--muted); }
.madm-edit { margin: 0; }
.madm-head { display: flex; align-items: center; gap: .9rem; }
.madm-head img { width: 52px; height: 52px; }
.madm-head h2 { margin: 0; }
.madm-head > div { flex: 1; }
.madm-dirty { font-size: .78rem; color: #ffc98a; }
.madm-desc { margin: .5rem 0 0; }
.madm-hint { margin: .8rem 0 0; }
.madm-table { width: 100%; border-collapse: collapse; margin-top: .8rem; table-layout: fixed; }
.madm-table col.c-label { width: 13rem; }
.madm-table col.c-tool { width: 6.8rem; }
.madm-table th, .madm-table td { padding: .2rem .3rem; text-align: center; }
.madm-table thead th { position: sticky; top: 64px; z-index: 1; padding: .4rem .3rem; font-size: .82rem; color: var(--faction); background: var(--surface); }
.madm-table thead th.is-s { color: #c9a8ff; cursor: help; }
.madm-table th.is-s, .madm-table td.is-s { border-right: 1px dashed var(--border); }
.madm-table td.is-s { color: var(--muted); }
.madm-table tbody th { text-align: left; font-weight: 500; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.madm-table tbody th .res-mini { vertical-align: -3px; }
.madm-table tr[data-key]:hover th { color: var(--primary-hi); }
.madm-table tr[data-key]:hover td { background: rgba(140, 160, 220, .05); }
.madm-table tr.madm-sec th {
    padding: 1rem .3rem .35rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.madm-table tbody:first-of-type tr.madm-sec th { padding-top: .4rem; }
.madm-table tr.madm-add th { padding-top: .4rem; }
.madm-table tr.madm-add select {
    padding: .25em .5em; font: inherit; font-size: .82rem; color: var(--muted); background: rgba(5, 8, 18, .6); border: 1px dashed var(--border); border-radius: 6px;
}
.madm-table tr.madm-sum td, .madm-table tr.madm-sum th { padding-top: .35rem; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; }
.madm-table tr.madm-sum th { text-align: left; }
.madm-table input {
    width: 100%; padding: .3em .5em; text-align: right; font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums;
    color: var(--text); background: rgba(5, 8, 18, .6); border: 1px solid var(--border); border-radius: 6px;
}
.madm-table input:focus { outline: none; border-color: var(--primary); }
.madm-table input.is-changed { border-color: #ffc98a; }
.madm-table td.is-s input { border-color: rgba(201, 168, 255, .35); background: rgba(201, 168, 255, .06); }
.madm-tool { white-space: nowrap; text-align: right !important; }
.madm-factor { display: inline-block; min-width: 2.6rem; margin-right: .2rem; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.madm-compare td.chips .chip b { font-weight: 600; margin-left: .2rem; }

/* --- Admin: Gebäude – Kolonien des Besitzers (Sandro 2026-10-06) ---------------------------------------------------------- */
.colony-picker { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 1rem; }
.colony-pick {
    display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem .3rem .4rem; font-size: .85rem; color: var(--text);
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.colony-pick:hover { border-color: var(--primary); text-decoration: none; }
.colony-pick img { width: 24px; height: 24px; }
.colony-pick small { color: var(--muted); font-variant-numeric: tabular-nums; }
.colony-pick.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.colony-pick:first-child { padding-left: .75rem; }

/* --- Admin: Sternsysteme – Galaxien als Karten (Sandro 2026-10-06) -------------------------------------------------------- */
.galaxy-picker { display: grid; grid-template-columns: 160px repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.galaxy-pick {
    display: flex; align-items: center; gap: 1rem; padding: .8rem; color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .15s, background .15s;
}
.galaxy-pick:hover { border-color: var(--primary); text-decoration: none; }
.galaxy-pick.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); box-shadow: 0 0 0 1px var(--primary) inset; }
.galaxy-pick > span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.galaxy-pick strong { font-size: 1.05rem; }
.galaxy-pick-map { width: 130px; height: 130px; flex: none; border-radius: 8px; image-rendering: pixelated; }
.galaxy-pick-desc { font-size: .8rem; line-height: 1.35; }
.galaxy-pick-all { flex-direction: column; justify-content: center; text-align: center; gap: .3rem; }
.galaxy-pick-all-icon { font-size: 2.4rem; line-height: 1; }

/* --- Admin: Systemkarte zum Anlegen von Planeten/Monden (Sandro 2026-10-06) ------------------------------------------------ */
.admin-smap { max-width: 560px; margin: .4rem auto 0; }
.orbit-free { stroke: rgba(160, 180, 255, .08); stroke-dasharray: .08 .12; }
.smap-pick .stile.is-free { padding: 0; border: 0; background: none; cursor: crosshair; border-radius: 4px; }
.smap-pick .stile.is-free:hover { background: rgba(91, 140, 255, .25); outline: 1px solid rgba(122, 162, 255, .6); }
.smap-pick .stile.is-picked { background: rgba(62, 207, 142, .3); outline: 2px solid var(--success); z-index: 3; }
.pick-target { margin: 0; padding: .4rem .6rem; font-size: .85rem; border-radius: 8px; background: rgba(62, 207, 142, .1); color: var(--success); }
form.is-pick-hint { outline: 1px solid rgba(62, 207, 142, .5); outline-offset: .6rem; border-radius: 4px; }
tr.is-picked-row td { background: rgba(91, 140, 255, .12); }

/* --- Admin: Schiffstypen – feste Module je Klasse (Sandro 2026-10-06, sql/097) -------------------------------------------- */
.btn.is-disabled { opacity: .45; cursor: not-allowed; }
a.grant-card { color: var(--text); }
a.grant-card:hover { border-color: var(--faction); text-decoration: none; }
a.grant-card img { cursor: pointer; }
.grant-loadout {
    margin-top: .3rem; padding: .05rem .5rem; font-size: .72rem; border-radius: 999px;
    color: var(--faction); border: 1px solid color-mix(in srgb, var(--faction) 50%, transparent);
}
.grant-loadout.is-empty { color: var(--muted); border-color: var(--border); }
a.grant-faction.is-on { color: var(--text); border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, var(--surface)); }
a.grant-faction:hover { text-decoration: none; }
.type-edit { border-top: 3px solid var(--faction); scroll-margin-top: 80px; }
.type-edit-head { display: flex; align-items: center; gap: 1.2rem; }
.type-edit-head img { width: 120px; height: 120px; flex: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }
.type-edit-head h2 { margin: 0 0 .2rem; }
.type-edit-head > div:nth-child(2) { flex: 1; }
.type-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grant-own-modules { margin-top: .4rem; }
.type-cat { scroll-margin-top: 80px; }
.type-cat.is-on { border-color: var(--faction); }
.type-cat .panel-head p { margin: .15rem 0 0; }
.type-source { font-size: .7rem; color: var(--muted); }
.type-source.is-own { color: #ffb070; }
.type-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.6rem; align-items: start; }
.type-edit-main { display: grid; gap: .9rem; }
.type-edit-head .check { display: flex; margin-top: .25rem; }
.type-edit-grid .type-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.type-stats { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .35); }
.type-stats h3 { margin: 0 0 .5rem; font-size: 1rem; }
.type-stats table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.type-stats th, .type-stats td { padding: .22rem .3rem; border-bottom: 1px solid var(--border); }
.type-stats tbody th { text-align: left; font-weight: 500; }
.type-stats thead th { font-size: .75rem; color: var(--muted); text-align: right; }
.type-stats td { text-align: right; }
.type-stats td.is-up { color: var(--success); font-weight: 600; }
.type-stats td.is-down { color: var(--danger); font-weight: 600; }
.type-stats-fixed td { color: var(--muted); }
.type-stats p { margin: .6rem 0 0; }

/* --- Raumhafen in der Gebäudeansicht (Sandro 2026-10-06, sql/100) ---------------------------------------------------------- */
.spaceport { display: grid; gap: .9rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.spaceport-box { display: grid; gap: .5rem; }
.spaceport-box .build-title { margin: 0; }
.spaceport-box[hidden] { display: none; }   /* Reiter der Orbitalstation: display: grid würde hidden überstimmen */
details.spaceport-box > summary { cursor: pointer; list-style: revert; }
.spaceport-hangar { padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); border-radius: 10px;
                    background: color-mix(in srgb, var(--success) 7%, transparent); }
.hangar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.hangar-list label { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.hangar-list input[type=radio] { margin: 0; }
.hangar-list small { display: block; }
.spaceport-busy { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }

/* --- Admin: Testforschung – Raster-Editor (Spielwiese, Sandro 2026-10-06, sql/102) ------------------------------------- */
.rt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 1.2rem; align-items: start; }
.rt-main, .rt-side { margin: 0; }
.rt-side { position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 5.5rem); overflow-y: auto; }
.rt-side { display: grid; gap: 1rem; }
.rt-side > .panel { margin: 0; }
.rt-palette { display: grid; gap: .6rem; }
.rt-palette h2, .rt-palette p { margin: 0; }
.rt-palette { gap: 1rem; }
.rt-frame {
    position: relative; display: flex; align-items: center; gap: .6rem; min-height: 64px; padding: .55rem .7rem; margin-top: .3rem;
    cursor: grab; user-select: none; border: 2px dashed rgba(140, 160, 220, .3); border-radius: 10px; background: rgba(5, 8, 18, .45);
    --cat: var(--primary-hi);
}
.rt-frame img { width: 30px; height: 30px; image-rendering: pixelated; opacity: .75; }
.rt-frame > .muted { font-size: .78rem; font-style: italic; }
.rt-frame:hover { border-color: var(--primary); background: rgba(91, 140, 255, .1); }
.rt-frame:active { cursor: grabbing; }
.rt-frame.rt-kind-reward { --cat: #f5b94a; }
.rt-frame.rt-kind-kodex { --cat: #f5b94a; border-color: rgba(245, 185, 74, .55); background: linear-gradient(160deg, rgba(42, 31, 18, .7), rgba(5, 8, 18, .45)); }
.rt-frame.rt-kind-kodex img { image-rendering: auto; opacity: 1; }
[data-rt-form][hidden] { display: none; }.rt-msg { margin: 0 0 .6rem; padding: .4rem .7rem; border-radius: 8px; background: rgba(255, 93, 108, .12); color: var(--danger); font-size: .88rem; }
.rt-scroll { overflow: auto; max-height: calc(100vh - 16rem); border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .45); }
.rt-board {
    position: relative; --u: 20px;
    background-image:   /* feines Punktraster + jede 5. Linie etwas kräftiger (sql/106) */
        radial-gradient(circle, rgba(140, 160, 220, .22) 1px, transparent 1.4px),
        linear-gradient(to right, rgba(140, 160, 220, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(140, 160, 220, .05) 1px, transparent 1px);
    background-size: var(--u) var(--u), calc(var(--u) * 5) calc(var(--u) * 5), calc(var(--u) * 5) calc(var(--u) * 5);
    background-position: calc(var(--u) / -2) calc(var(--u) / -2), 0 0, 0 0;
}
.rt-ghost { position: absolute; z-index: 1; border: 2px dashed var(--primary); border-radius: 10px; background: rgba(91, 140, 255, .12); pointer-events: none; }
.rt-ghost[hidden] { display: none; }
.rt-ghost.is-blocked { border-color: var(--danger); background: rgba(255, 93, 108, .12); }.rt-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rt-line { fill: none; stroke: rgba(160, 180, 255, .45); stroke-width: 2.5; }
.rt-line.is-hot { stroke: var(--primary-hi); stroke-width: 3; }
.rt-line.is-temp { stroke: var(--success); stroke-dasharray: 6 5; }
.rt-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.rt-hit:hover + .rt-line, .rt-hit:hover { stroke: rgba(255, 93, 108, .35); }
.rt-node {
    position: absolute; z-index: 2; display: grid; align-content: center; padding: .55rem .7rem; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--cat) 35%, var(--border)); border-radius: 10px; background: #10172b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: border-color .15s, box-shadow .15s;
}
.rt-node:hover { border-color: color-mix(in srgb, var(--cat) 70%, transparent); }
.rt-node.is-selected { border-color: var(--cat); box-shadow: 0 0 14px color-mix(in srgb, var(--cat) 40%, transparent); }
.rt-badge {
    position: absolute; top: -.6rem; left: .6rem; padding: 0 .45rem; border-radius: 6px; font-size: .64rem; line-height: 1.1rem;
    background: var(--bg-soft); color: var(--cat, var(--primary-hi)); border: 1px solid var(--border); white-space: nowrap;
}.rt-icon { width: 34px; height: 34px; flex: none; image-rendering: pixelated; }
.rt-gift { display: grid; place-items: center; font-size: 1.5rem; }
.rt-node.rt-kind-basics .rt-badge { color: var(--cat); font-weight: 600; }
.rt-node.rt-kind-reward { border-style: dashed; background: #1a1a22; }
.rt-node.rt-kind-kodex {
    border: 2px solid #f5b94a; background: linear-gradient(160deg, #2a1f12, #15121c 70%);
    box-shadow: 0 0 0 3px rgba(245, 185, 74, .15), 0 0 18px rgba(245, 185, 74, .25);
}
.rt-node.rt-kind-kodex .rt-badge { color: #f5b94a; border-color: rgba(245, 185, 74, .6); font-weight: 700; letter-spacing: .04em; }
.rt-node.rt-kind-kodex .rt-icon { width: 38px; height: 38px; image-rendering: auto; }
/* Vier Andockpunkte (Sandro 2026-10-09): an jedem kann man eine Verbindung ziehen; wo die Linie andockt, ergibt die Lage */
.rt-port {
    position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: var(--cat); border: 2px solid #0b0f1c; cursor: crosshair;
}
.rt-port-t { left: 50%; top: 0; }
.rt-port-b { left: 50%; top: 100%; }
.rt-port-l { left: 0; top: 50%; }
.rt-port-r { left: 100%; top: 50%; }
.rt-port:hover { transform: scale(1.3); }
/* Größe ziehbar (sql/111): Griff unten rechts, beim Ziehen Maß in der Ecke, rot = stößt an eine andere Kachel */
.rt-resize {   /* Sandro 2026-10-07: 50 % größer + unsichtbarer Greifrand („Kaffeetasse in der anderen Hand“) */
    position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; opacity: .35; transition: opacity .12s;
    background: linear-gradient(135deg, transparent 50%, var(--cat) 50%, var(--cat) 60%, transparent 60%, transparent 72%, var(--cat) 72%, var(--cat) 82%, transparent 82%);
}
.rt-resize::before { content: ''; position: absolute; inset: -8px -6px -6px -8px; }
.rt-node:hover .rt-resize, .rt-node.is-selected .rt-resize, .rt-node.is-resizing .rt-resize { opacity: .95; }
.rt-port { z-index: 1; }
.rt-node.is-resizing { z-index: 4; transition: none; outline: 2px dashed var(--primary); outline-offset: 2px; }
.rt-node.is-resizing::after {
    content: attr(data-size); position: absolute; right: 26px; bottom: 2px; padding: 0 .35rem; font-size: .68rem; border-radius: 4px;
    color: var(--text); background: rgba(5, 8, 18, .85);
}
.rt-node.is-resizing.is-blocked { outline-color: var(--danger); }
.rt-conns ul { list-style: none; margin: .2rem 0 .6rem; padding: 0; display: grid; gap: .2rem; font-size: .88rem; }
.rt-conns li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rt-actions { position: absolute; top: -.7rem; right: .5rem; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.rt-node:hover .rt-actions, .rt-node.is-selected .rt-actions, .rt-node.is-link-source .rt-actions { opacity: 1; }
.rt-actions button {
    width: 22px; height: 20px; padding: 0; font-size: .72rem; line-height: 1; cursor: pointer;
    border: 1px solid var(--border); border-radius: 5px; background: rgba(5, 8, 18, .75); color: var(--text);
}
.rt-actions button:hover { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 25%, #0b0f1c); }
.rt-node.is-link-source { outline: 2px dashed var(--success); outline-offset: 2px; }
.rt-board.is-linking .rt-node:not(.is-link-source) { cursor: copy; }
.rt-board.is-linking .rt-node:not(.is-link-source):hover { box-shadow: 0 0 0 2px var(--success), 0 4px 14px rgba(0, 0, 0, .35); }
.rt-linkhint { margin: 0 0 .6rem; padding: .4rem .7rem; border-radius: 8px; background: rgba(62, 207, 142, .12); color: var(--success); font-size: .88rem; }
.rt-tierbar { display: grid; gap: .6rem; margin-bottom: .8rem; }
.rt-tierbar .tabs { margin: 0; }
.rt-tierbar .tabs small { opacity: .6; font-weight: 400; }
.rt-tierform .tabs { flex: 1 1 auto; padding-left: .6rem; border-left: 1px solid var(--border); }
.rt-tierform .tabs a { padding: .28rem .55rem; font-size: .82rem; }
.rt-tierform .rt-tier-name input { width: 9rem; }
.rt-tierform { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .35); font-size: .85rem; }
.rt-tierform input:not([type=checkbox]), .rt-tierform select { padding: .3em .55em; border: 1px solid var(--border); border-radius: 6px; background: rgba(5, 8, 18, .6); color: var(--text); font: inherit; }
.rt-tier-name { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
.rt-tier-name input { width: 11rem; }
.rt-gate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.rt-gate[hidden] { display: none; }
.rt-gate input[name=gate_note] { width: 16rem; }[data-rt-tierdel][hidden] { display: none; }
.rt-badge img { width: 12px; height: 12px; margin: 0 .2rem 0 .1rem; vertical-align: -2px; }
.rt-node.is-incomplete .rt-badge { color: var(--danger); border-color: rgba(255, 93, 108, .6); }
.rt-node.rt-kind-kodex.is-incomplete { border-color: rgba(255, 93, 108, .7); }
/* Testforschung: Tor-Kachel, Reiter Kosten/Freischaltungen, Aktionsleiste, Vorschau (sql/107) */
[data-rt-notgate][hidden], [data-rt-pane][hidden], [data-rt-actionbar][hidden] { display: none !important; }
.rt-node.rt-kind-gate { border: 2px dashed #5fd4ff; background: linear-gradient(160deg, rgba(95, 212, 255, .12), #10172b 70%); }
.rt-node.rt-kind-gate .rt-badge { color: #5fd4ff; font-weight: 700; }
.rt-frame.rt-kind-gate { --cat: #5fd4ff; border-color: rgba(95, 212, 255, .5); }
.rt-tierform { gap: .6rem; }
.rt-actionbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; padding: .6rem .8rem;
    border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .45);
}
.rt-actionbar > span { flex: 1; min-width: 12rem; font-size: .9rem; color: var(--muted); }
.rt-actionbar > span.rt-movetier { flex: none; min-width: 0; display: inline-flex; gap: .3rem; align-items: center; }
.rt-movetier select { width: auto; max-width: 11rem; padding: .3rem .4rem; font-size: .85rem; background: rgba(10, 16, 34, .8); color: var(--text);
                     border: 1px solid var(--border); border-radius: 6px; }
.rt-actionbar > span strong { color: var(--text); }.rt-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rt-items li { display: flex; align-items: center; gap: .5rem; padding: .25rem .45rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 8, 18, .35); font-size: .88rem; }
.rt-items li.muted { border-style: dashed; background: none; }
.rt-items li img { width: 22px; height: 22px; image-rendering: pixelated; }
.rt-items li span { flex: 1; min-width: 0; }
.rt-items li b { font-variant-numeric: tabular-nums; }.rt-preview { width: min(460px, 92vw); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); color: var(--text); }
.rt-preview::backdrop { background: rgba(0, 0, 0, .6); }
.rt-preview header { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.rt-preview header small { flex: 1; }
.rt-preview-body { display: grid; justify-items: center; gap: .6rem; padding: 1.6rem 1rem 1.2rem; }
.rt-preview-body .tnode { --faction: var(--primary); }
.rt-preview-desc { max-width: 22rem; text-align: center; margin: 0; }
.rt-preview-kodex { border: 2px solid #f5b94a; background: linear-gradient(160deg, #2a1f12, #15121c 70%); }.torp-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 90px auto; align-items: center; gap: .6rem; }
.torp-list small { display: block; }
.torp-meter { margin: 0; }
.factory-orders { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.factory-orders .modules-layout { grid-template-columns: 1fr; }

/* --- Admin: 🌳 Gesamte Forschung – Test-Baum wie im Spiel (Sandro 2026-10-07) ------------------------------------------- */
.rt-all-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: -.4rem 0 1rem; }
.rt-all-bar .tabs a { padding: .3rem .75rem; font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; }
.rt-all-fac { width: 18px; height: 18px; }
.rt-all { align-items: flex-start; min-height: 60vh; }
.rt-all .tree-stage { padding-bottom: 1.2rem; }
.rt-all-area { position: relative; margin-top: .6rem; }
.rt-all-area .tnode { position: absolute; box-sizing: border-box; align-content: start; }
.rt-all-area .tnode-head strong { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.rt-all-area .tnode.rt-preview-kodex { border: 2px solid #f5b94a; box-shadow: 0 0 0 3px rgba(245, 185, 74, .15), 0 0 18px rgba(245, 185, 74, .25); }
.rt-all-area .rt-badge-basics { font-weight: 600; }
.rt-all-area .rt-badge-kodex { color: #f5b94a; border-color: rgba(245, 185, 74, .6); font-weight: 700; letter-spacing: .04em; }
.rt-all-area .rt-badge-gate { font-weight: 700; }
.tnode.rt-all-gate { border: 2px dashed #5fd4ff; background: linear-gradient(160deg, rgba(95, 212, 255, .12), #10172b 70%); }
/* --- Admin: Testforschung – Kachel bearbeiten als ganze Seite (Sandro 2026-10-07, sql/112) -------------------------------- */
.rt-layout.is-editing .rt-main, .rt-layout.is-editing .rt-side { display: none; }
.rt-editor { grid-column: 1 / -1; margin: 0; }
.rt-editor[hidden] { display: none; }
.rt-ed-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.rt-ed-title { flex: 1; display: flex; align-items: center; gap: .7rem; min-width: 14rem; }
.rt-ed-title h2 { margin: 0; }
.rt-ed-title .rt-icon { width: 40px; height: 40px; }
.rt-ed-dirty { font-size: .8rem; color: #ffc98a; }
.rt-ed-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.rt-ed-left { display: grid; gap: 1rem; }
.rt-ed-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.rt-ed-card { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(5, 8, 18, .35); }
.rt-ed-card > h3 { margin: 0 0 .5rem; font-size: 1rem; }
.rt-ed-card > h3 small { font-weight: 400; }
.rt-ed-card > p.muted { margin: -.3rem 0 .6rem; }
.rt-ed-card h4 { margin: .5rem 0 .2rem; font-size: .85rem; }
.rt-ed-preview { display: grid; justify-items: start; gap: .4rem; }
.rt-ed-preview .tnode { width: 100%; max-width: 20rem; }.rt-emoji { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: .95rem; white-space: nowrap; }
.rt-emoji.is-slot { position: relative; }   /* Kolonie-Platz: Planet/Mond mit kleinem Plus */
.rt-emoji.is-slot b {
    position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 12px; height: 12px; font-size: .65rem; line-height: 1;
    border-radius: 50%; color: #0b0f1c; background: var(--success);
}
.tnode-icon.rt-gift { display: grid; place-items: center; font-size: 1.6rem; }
.rt-items li .rt-item-type { display: block; font-size: .7rem; }
.rt-items li span.rt-emoji { flex: none; }
.rt-adder { display: grid; gap: .5rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--border); }
.rt-adder-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rt-adder-row label { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--muted); }
.rt-adder-row label[hidden], .rt-adder [hidden] { display: none; }
.rt-adder select, .rt-adder input { padding: .35em .5em; border: 1px solid var(--border); border-radius: 6px; background: rgba(5, 8, 18, .6); color: var(--text); font: inherit; font-size: .88rem; }
.rt-adder [data-type] { flex: 1; min-width: 12rem; }
.rt-adder [data-amount] { width: 6.5rem; }
.rt-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .35rem; max-height: 260px; overflow-y: auto; padding: .1rem; }
.rt-pick {
    display: grid; justify-items: center; gap: .15rem; padding: .4rem .25rem; cursor: pointer; font: inherit; font-size: .72rem; line-height: 1.15;
    color: var(--text); text-align: center; border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 8, 18, .5);
}
.rt-pick:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.rt-pick.is-picked { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.rt-pick[hidden] { display: none; }
.rt-pick img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.rt-pick small { font-size: .64rem; color: var(--muted); }
.rt-selpanel .rt-ed-preview { margin-bottom: .7rem; }
.rt-selcounts { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .2rem; font-size: .85rem; color: var(--muted); }
.rt-selcounts b { color: var(--text); }
.rt-selpanel .btn { width: 100%; }

/* Kachel-Regel (Sandro 2026-10-07): Bild-Spalte links über die ganze Höhe · rechts Titel, je Abschnitt Überschrift + Zeilen Bild | Text */
.tnode.rt-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0 .65rem; }
/* Spieleransicht = Editor (Sandro 2026-10-10): feste Breite aus dem Editor, gleiche Abstände/Schriften wie .rt-node.rt-tile */
.rt-all-area .tnode.rt-tile { padding: .75rem .7rem .55rem; gap: 0 .6rem; }
.rt-tile-icon { display: grid; justify-items: center; padding-top: .1rem; }
.rt-tile-body { display: grid; gap: .1rem; min-width: 0; }
.rt-tile-name { font-size: .92rem; line-height: 1.25; }
.rt-tile-sub { font-size: .74rem; color: var(--muted); }
.rt-tile-sec { margin-top: .45rem; }
.rt-tile-sectitle { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: #8fd3ff; margin-bottom: .2rem; }
.rt-tile-items { display: grid; grid-template-columns: 24px max-content; align-items: center; gap: .2rem .45rem; }
.rt-ti-icon { display: grid; place-items: center; width: 24px; height: 24px; }
.rt-ti-icon img { width: 22px; height: 22px; image-rendering: pixelated; }
.rt-ti-text { font-size: .78rem; white-space: nowrap; }
.rt-ti-text b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-tile .tnode-action { margin-top: .5rem; }

/* Raster-Kachel im Editor nach derselben Regel (Sandro 2026-10-07): oben ausgerichtet, Texte dürfen umbrechen */
.rt-node.rt-tile { align-content: start; grid-template-columns: auto minmax(0, 1fr); gap: 0 .6rem; padding-top: .75rem; }
.rt-node.rt-tile .rt-tile-items, .rt-all-area .rt-tile .rt-tile-items { grid-template-columns: 22px minmax(0, 1fr); }
.rt-node.rt-tile .rt-ti-text, .rt-all-area .rt-tile .rt-ti-text { white-space: normal; font-size: .74rem; line-height: 1.2; }
.rt-node.rt-tile .rt-tile-name, .rt-all-area .rt-tile .rt-tile-name { font-size: .88rem; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* --- Admin: Forschung – Schalter Freischaltung (sql/114) --------------------------------------------------------------- */
.research-strict { display: flex; align-items: center; gap: .7rem; padding: .45rem .7rem; font-size: .85rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(62, 207, 142, .08); }
.research-strict.is-strict { background: rgba(255, 180, 92, .1); border-color: rgba(255, 180, 92, .45); }
.rt-gate-needs { display: inline-grid; vertical-align: middle; }

/* --- Admin: Gebäude – Stufen anlegen/umbenennen, Ablage Baustelle/Archiv (sql/115) ------------------------------------- */
.stage-edit { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; }
.stage-edit input { padding: .35em .55em; font: inherit; color: var(--text); background: rgba(5, 8, 18, .6); border: 1px solid var(--border); border-radius: 6px; }
.stage-edit input[name=stage_name] { width: 16rem; font-weight: 600; }
.stage-edit input[name=stage_description] { flex: 1; min-width: 0; font-size: .85rem; }
.stage-no { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%; font-weight: 800;
            background: color-mix(in srgb, var(--faction) 22%, transparent); color: var(--faction); }
.stage-add { padding: .7rem .9rem; margin-bottom: 1.2rem; border-style: dashed; }
.stage-shelf { border-style: dashed; opacity: .9; }

/* --- Admin: Gebäude – Ansicht „Bilder“ (anklicken = bearbeiten, Sandro 2026-10-07) ----------------------------------------- */
.building-views { margin: 0 0 1rem; }
.building-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.building-pick {
    display: grid; justify-items: center; gap: .3rem; padding: .6rem .4rem; text-align: center; color: var(--text);
    border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .45); transition: border-color .12s, transform .12s;
}
.building-pick:hover { border-color: var(--primary); text-decoration: none; transform: translateY(-2px); }
.building-pick img { width: 64px; height: 64px; image-rendering: pixelated; }
.building-pick span { font-size: .78rem; line-height: 1.2; overflow-wrap: anywhere; }
.building-pick small { font-size: .66rem; color: var(--muted); }
.building-pick .pick-costs { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .4rem; font-size: .66rem; color: var(--muted);
                             font-variant-numeric: tabular-nums; line-height: 1; }
.building-pick .pick-costs span { display: inline-flex; align-items: center; gap: .1rem; font-size: inherit; white-space: nowrap; }
.building-pick .pick-costs img { width: 12px; height: 12px; image-rendering: auto; }

/* Kolonie-Übersicht „Im Orbit“ (Sandro 2026-10-09): Gruppen (Flotten · Einzelschiffe · fremde), je Schiff eine kompakte Zeile,
   Klick klappt Werte + Schnellknöpfe auf; die Liste scrollt in sich (für 100+ Schiffe) */
.orbit-title { display: flex; align-items: center; gap: .6rem; }
/* Lupe im Kopf (Sandro 2026-10-09): klappt die Suche auf */
.orbit-search-btn { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; padding: 0; border-radius: 8px; cursor: pointer;
                    border: 1px solid var(--border); background: rgba(255, 255, 255, .03); color: var(--muted); transition: color .12s, border-color .12s, background .12s; }
.orbit-search-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .15s; }
.orbit-search-btn:hover, .orbit-search-btn[aria-expanded="true"] { color: var(--text); border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, transparent); }
.orbit-search-btn:hover svg { transform: scale(1.12) rotate(-8deg); }
.orbit-search[hidden] { display: none; }
.orbit-search { width: 100%; margin: 0 0 .5rem; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 8px;
                background: rgba(5, 8, 18, .6); color: var(--text); font: inherit; font-size: .85rem; }
.orbit-groups { display: grid; gap: .45rem; max-height: 70vh; overflow-y: auto; overflow-x: hidden; padding-right: .2rem; }
.orbit-group { border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.orbit-group.is-foreign { border-color: rgba(255, 93, 108, .35); background: rgba(255, 93, 108, .035); }
.orbit-group > summary { display: flex; align-items: center; gap: .45rem; padding: .35rem .6rem; cursor: pointer; list-style: none; font-weight: 600; font-size: .85rem; }
.orbit-group > summary::-webkit-details-marker { display: none; }
.orbit-group > summary::after { content: '▸'; margin-left: auto; color: var(--muted); transition: transform .15s; }
.orbit-group[open] > summary::after { transform: rotate(90deg); }
.orbit-group > summary img { width: 18px; height: 18px; }
.orbit-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.orbit-card { border-radius: 8px; border: 1px solid var(--border); background: rgba(255, 255, 255, .02); }
.orbit-card.is-foreign { border-color: rgba(255, 93, 108, .3); }
.orbit-row { display: flex; align-items: center; gap: .45rem; padding: .25rem .35rem; border-radius: 8px; }
.orbit-row:hover { background: rgba(255, 255, 255, .05); }
.orbit-img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; flex: none; }
.orbit-alert { width: 16px; height: 16px; flex: none; }
.orbit-flag { width: 14px; height: 14px; vertical-align: -2px; }
.orbit-fac { width: 14px; height: 14px; vertical-align: -2px; }
.orbit-name { display: grid; min-width: 0; flex: 1; font-size: .86rem; font-weight: 600; line-height: 1.2; }
.orbit-name, .orbit-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbit-name small { font-weight: 400; font-size: .7rem; }
.orbit-detail { display: grid; gap: .45rem; padding: .2rem .5rem .5rem; }
.orbit-detail[hidden] { display: none; }   /* zu, bis „Zustand“ geklickt wird */
.orbit-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .3rem 1rem; }
.orbit-bar { display: grid; grid-template-columns: 3.2rem minmax(2rem, 1fr) 3.4rem; align-items: center; gap: .45rem; font-size: .72rem; }
.orbit-bar small { color: var(--muted); }
.orbit-bar .meter { height: 6px; margin: 0; }
.orbit-bar b { font-weight: 700; text-align: right; white-space: nowrap; }
.orbit-owner { margin: 0; }
.meter-cargo > span { background: #5fd4ff; }
.orbit-acts { display: flex; align-items: center; gap: .3rem; margin-left: auto; flex: none; }
.orbit-acts .inline-form { margin: 0; }
.orbit-act { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 8px; cursor: pointer;
             border: 1px solid var(--border); background: rgba(255, 255, 255, .03); transition: border-color .12s, background .12s; }
.orbit-act img { width: 22px; height: 22px; transition: transform .15s; }
.orbit-act:hover { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 16%, transparent); }
.orbit-act:hover img { transform: scale(1.12); }
.orbit-card:has(.orbit-detail:not([hidden])) { border-color: color-mix(in srgb, var(--faction) 40%, var(--border)); background: rgba(255, 255, 255, .03); }
.orbit-card.is-foreign:has(.orbit-detail:not([hidden])) { border-color: rgba(255, 93, 108, .45); }
.orbit-act[aria-expanded="true"] { border-color: var(--faction); background: color-mix(in srgb, var(--faction) 22%, transparent); }
/* Schiffsbild als Link zum Schiff (Sandro 2026-10-09) – überall, wo eigene Schiffe stehen */
.ship-img-link { display: inline-grid; place-items: center; flex: none; border-radius: 8px; transition: background .12s, box-shadow .12s; }
.ship-img-link img { transition: transform .15s; }
.ship-img-link:hover { background: color-mix(in srgb, var(--faction) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--faction) 60%, transparent); }
.ship-img-link:hover img { transform: scale(1.08); }
/* „Im Orbit“: Zwischenüberschriften wie in der Flottenliste (Sandro 2026-10-09) */
.orbit-sep { display: flex; align-items: center; gap: .4rem; margin: .35rem 0 0; padding: 0 .2rem .15rem; font-size: .78rem; font-weight: 700;
             border-bottom: 1px solid var(--border); }
.orbit-sep:first-child { margin-top: 0; }
.orbit-sep img { width: 16px; height: 16px; }
.orbit-sep small { font-weight: 400; }
.orbit-sep.is-foreign { color: #ff8a95; border-bottom-color: rgba(255, 93, 108, .35); }
.orbit-sep[hidden] { display: none; }
/* Gruppen klappbar (Sandro 2026-10-17): Pfeil vor der Überschrift, zugeklappt verschwinden die Karten (außer während der Suche) */
.orbit-sep { cursor: pointer; user-select: none; }
.orbit-sep::before { content: '▾'; display: inline-block; width: .8rem; color: var(--muted, #8a93a8); transition: transform .15s; }
.orbit-sep.is-closed::before { transform: rotate(-90deg); }
.orbit-sep:hover { color: #fff; }
.orbit-card.is-folded { display: none; }
.is-searching .orbit-card.is-folded:not([hidden]) { display: list-item; }
/* Orbit-Zeile: feste Spalten Flagge · Alarm vor den Knöpfen, leere Knopf-Plätze halten die Spalten bündig (Sandro 2026-10-09) */
.orbit-col { display: grid; place-items: center; width: 20px; flex: none; }
.orbit-col img { width: 18px; height: 18px; }
.orbit-act.is-blank { visibility: hidden; }
/* Kolonien-Liste: Platz je Kolonie + woher er kommt, oben die Summe des Reichs (Sandro 2026-10-09, aus dem Lager-Reiter) */
.empire-cap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem 1.5rem; margin-bottom: .8rem; padding: .8rem 1.2rem; }
.empire-cap h2 { margin: 0; font-size: 1rem; white-space: nowrap; }
.empire-cap .cap-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cap-bars { display: grid; gap: .25rem .9rem; }
.cap-bar { display: grid; grid-template-columns: 5.6rem minmax(2rem, 1fr) auto; align-items: center; gap: .45rem; font-size: .74rem; color: var(--muted); }
.cap-bar .meter { height: 6px; margin: 0; }
.cap-bar b { color: var(--text); font-weight: 600; white-space: nowrap; }
.cap-bar.is-full b { color: #ff8a95; }
.meter-cap-storage > span { background: #5fd4ff; }
.meter-cap-energy > span  { background: #f5d04a; }
.meter-cap-housing > span { background: #e58ad0; }
.cap-bar.is-full .meter > span { background: #ff5d6c; }
.colony-cap { grid-column: 1 / -1; position: relative; z-index: 1; margin: -.3rem 0 0; }
.colony-cap > summary { display: inline-block; cursor: pointer; font-size: .76rem; color: var(--muted); list-style: none; }
.colony-cap > summary::-webkit-details-marker { display: none; }
.colony-cap > summary::before { content: '▸ '; display: inline-block; transition: transform .15s; }
.colony-cap[open] > summary::before { transform: rotate(90deg); }
.colony-cap > summary:hover { color: var(--faction); }
.cap-sources { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.cap-source { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .6rem .25rem .3rem; border-radius: 999px; font-size: .76rem;
              border: 1px solid var(--border); background: rgba(255, 255, 255, .03); }
.cap-source img { width: 22px; height: 22px; image-rendering: pixelated; }
.cap-source b { font-weight: 600; white-space: nowrap; }
/* Kolonie-Karte groß (Sandro 2026-10-09): Name | Lage | Entwicklung | Platz – Links in „Lage“ liegen über dem Zeilen-Link */
.colony-list .colony-item { align-items: start; gap: 1rem 1.6rem; padding: 1rem 1.3rem; }
.colony-id { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.colony-id .colony-icon { width: 72px; height: 72px; flex: none; image-rendering: auto; }
.colony-item.is-moon .colony-id .colony-icon { width: 56px; height: 56px; margin: 8px; }
.colony-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem; }
.colony-titlerow .colony-link strong { font-size: 1.25rem; }
.colony-titlerow .colony-rename { margin-left: 0; }
.colony-label { display: block; margin-bottom: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.colony-pos { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; font-size: .85rem; color: var(--muted); }
.colony-xy.colony-xy-body { color: #6ee68c; background: rgba(110, 230, 140, .12); box-shadow: inset 0 0 0 1px rgba(110, 230, 140, .35); }
.colony-loc, .colony-dev { display: grid; gap: .25rem; align-content: start; min-width: 0; font-size: .9rem; }
.colony-dev .info-box, .colony-room .info-box { margin: 0; width: 100%; box-sizing: border-box; }
.colony-room { min-width: 0; }
.colony-loc a { position: relative; z-index: 1; pointer-events: auto; display: inline-flex; align-items: center; gap: .4rem; width: fit-content; color: var(--text); }
.colony-loc a:hover { color: var(--faction); text-decoration: none; }
.colony-sys { font-weight: 600; font-size: 1rem; }
.colony-sys img { width: 22px; height: 22px; image-rendering: pixelated; }
.colony-gal { color: var(--muted) !important; font-size: .85rem; }
.colony-gal:hover { color: var(--faction) !important; }
.colony-xy { font-family: ui-monospace, monospace; font-size: .95rem; padding: .05rem .4rem; border-radius: 6px;
             background: color-mix(in srgb, var(--faction) 16%, transparent); color: var(--text); }
.colony-code { font-family: ui-monospace, monospace; font-size: .75rem; }
.colony-fields b { font-size: 1.05rem; }
.bar.bar-fields { height: 9px; border-radius: 5px; }
@media (max-width: 1250px) { .colony-list .colony-item { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Lager: Ware zu einer anderen Kolonie beamen (Sandro 2026-10-09, „darf dominanter sein“) – leuchtender Knopf mit animiertem
   Transporterstrahl (Funken steigen nach rechts oben), Feld im Beam-Look */
.beam-to summary { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; opacity: 1; border-radius: 9px;
                   border: 1px solid rgba(110, 230, 255, .55); background: radial-gradient(circle at 50% 80%, rgba(110, 230, 255, .28), rgba(16, 30, 54, .9) 70%);
                   box-shadow: 0 0 8px rgba(90, 200, 255, .35); animation: beam-btn 2.4s ease-in-out infinite; transition: transform .12s, box-shadow .12s; }
.beam-to summary:hover, .beam-to[open] summary { transform: translateY(-1px) scale(1.06); background: radial-gradient(circle at 50% 80%, rgba(110, 230, 255, .45), rgba(16, 30, 54, .9) 70%);
                                                  box-shadow: 0 0 14px rgba(110, 230, 255, .75); border-color: #6ee6ff; animation: none; }
@keyframes beam-btn { 0%, 100% { box-shadow: 0 0 6px rgba(90, 200, 255, .3); } 50% { box-shadow: 0 0 12px rgba(110, 230, 255, .6); } }
.beam-anim { position: relative; display: inline-block; width: 24px; height: 24px; }
.beam-anim::before { content: ''; position: absolute; left: 7px; top: 1px; width: 10px; height: 20px; border-radius: 5px;
                     background: linear-gradient(180deg, rgba(110, 230, 255, .05), rgba(110, 230, 255, .85));
                     box-shadow: 0 0 8px rgba(90, 200, 255, .8); animation: beam-glow 1.8s ease-in-out infinite; }
.beam-anim::after { content: ''; position: absolute; left: 4px; bottom: 0; width: 16px; height: 4px; border-radius: 50%; background: #6ee6ff;
                    box-shadow: 0 0 6px #6ee6ff; }
.beam-anim i { position: absolute; left: 11px; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: #fff;
               box-shadow: 0 0 5px #9ff0ff; opacity: 0; animation: beam-spark 1.8s ease-out infinite; }
.beam-anim i:nth-child(2) { left: 8px; animation-delay: .6s; }
.beam-anim i:nth-child(3) { left: 14px; animation-delay: 1.2s; }
@keyframes beam-spark { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(7px, -19px); opacity: 0; } }
@keyframes beam-glow  { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.beam-to summary:hover .beam-anim::before, .beam-to[open] .beam-anim::before,
.beam-to summary:hover .beam-anim i, .beam-to[open] .beam-anim i { animation-duration: .7s; }
.beam-to summary:hover .beam-anim i:nth-child(2), .beam-to[open] .beam-anim i:nth-child(2) { animation-delay: .23s; }
.beam-to summary:hover .beam-anim i:nth-child(3), .beam-to[open] .beam-anim i:nth-child(3) { animation-delay: .46s; }
@media (prefers-reduced-motion: reduce) { .beam-to summary, .beam-anim::before, .beam-anim i { animation: none; } .beam-anim i { opacity: .8; } }
/* Feld (Box nur im Lager-Popover, Eingabefelder für alle Beamformulare) */
.beam-to .beam-form { width: 19rem; gap: .55rem; padding: .85rem; border-color: rgba(110, 230, 255, .5);
             background: linear-gradient(170deg, rgba(110, 230, 255, .12), #0e1528 55%); box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 18px rgba(90, 200, 255, .2); }
.beam-form strong { font-size: .9rem; color: #bff4ff; letter-spacing: .02em; }
.beam-form select, .beam-form input[type="number"] { width: 100%; box-sizing: border-box; padding: .45rem .6rem; border-radius: 8px; font: inherit; font-size: .88rem;
             color: var(--text); background: rgba(5, 8, 18, .75); border: 1px solid rgba(110, 230, 255, .35); color-scheme: dark; }
.beam-form select:focus, .beam-form input[type="number"]:focus { outline: none; border-color: #6ee6ff; box-shadow: 0 0 0 2px rgba(110, 230, 255, .25); }
.beam-form .btn-primary { background: linear-gradient(135deg, #2fb8e6, #7a5cff); border-color: transparent; box-shadow: 0 0 12px rgba(90, 200, 255, .35); }
.beam-form .btn-primary:hover { box-shadow: 0 0 18px rgba(110, 230, 255, .6); }
.beam-form small { font-size: .74rem; }
.dispose-cell { width: 8.5rem; }

/* Admin: Mehrfach-Löschen (Sandro 2026-10-10) */
.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem .5rem; margin-bottom: .25rem;
            border: 1px solid rgba(255,255,255,.06); border-radius: 6px; background: rgba(255,255,255,.02); }
.bulk-bar label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.bulk-check { width: 1.6rem; }
.bulk-check input, .bulk-bar input { accent-color: #e05a6a; cursor: pointer; }

/* Admin › Account: Forschung oben rechts + Account auf Start (Sandro 2026-10-10) */
.acc-research .meter { margin: 0; }
.acc-research .btn { white-space: nowrap; }
.acc-research { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: .75rem; padding: .5rem .6rem;
                border-bottom: 1px solid rgba(255,255,255,.06); }
.acc-reset { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* Admin › Gebäudetypen: Stufen verschieben, Start-Stufe (Sandro 2026-10-10) */
.stage-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; }
/* Zuklappen (js/app.js data-collapse, Sandro 2026-10-12) */
.collapse-btn { flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--border);
                border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; line-height: 1; }
.collapse-btn:hover { color: var(--text); border-color: var(--faction); }
.is-collapsed > .collapse-body { display: none; }
.is-collapsed .stage-head, .is-collapsed > .panel-head { margin-bottom: 0; }
.panel-head .collapse-btn { margin-right: .5rem; }
.building-views [data-collapse-all] { margin-left: .3rem; }
.building-views [data-collapse-all="0"] { margin-left: auto; }
.stage-head .stage-edit { flex: 1; min-width: 0; margin: 0; }
.stage-move { display: flex; flex-direction: column; gap: 2px; }
.stage-move .btn-icon { width: 1.7rem; height: 1.15rem; padding: 0; font-size: .7rem; line-height: 1; color: var(--muted); cursor: pointer;
                        background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 4px; }
.stage-move .btn-icon:hover:not(:disabled) { color: var(--text); border-color: var(--accent, #6ab0ff); background: rgba(106,176,255,.12); }
.stage-move .btn-icon:disabled { opacity: .25; cursor: default; }
.stage-no.is-start { background: color-mix(in srgb, var(--success) 25%, transparent); color: var(--success); }

/* Einstieg Schritt 3: Gebäude als Bildkarten neben dem Text (Sandro 2026-10-10) – je Gebäude eine Zeile Bild + Name
   (Alternativen untereinander), darunter der Balken über die ganze Breite */
.tutorial-body.is-wide { max-width: none; }
.tut-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; margin-bottom: 1rem; }
.tut-build-text p:first-child { margin-top: 0; }
.tut-build-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .5rem; }
.tut-bcard { position: relative; display: grid; gap: .4rem; padding: .6rem .8rem .65rem; border-radius: 12px;
             border: 1px solid var(--border); background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.2));
             transition: border-color .2s, transform .2s; }
.tut-bcard:hover { border-color: color-mix(in srgb, var(--faction, #6ab0ff) 60%, transparent); transform: translateY(-1px); }
.tut-brow { display: flex; align-items: center; gap: .8rem; }
.tut-brow img { width: 48px; height: 48px; flex: none; image-rendering: pixelated; padding: 4px; border-radius: 10px;
                background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), rgba(0,0,0,.25)); border: 1px solid rgba(255,255,255,.06); }
.tut-brow b { font-weight: 600; }
.tut-bprog { display: flex; align-items: center; gap: .6rem; margin-top: .15rem; }
.tut-bprog .meter { flex: 1; height: 7px; margin: 0; }
.tut-bprog .meter > span { background: var(--faction, #6ab0ff); }
.tut-bprog small { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.tut-bcheck { position: absolute; top: .45rem; right: .6rem; font-weight: 800; color: var(--success); }
.tut-bcard.is-done { border-color: color-mix(in srgb, var(--success) 55%, transparent);
                     background: linear-gradient(135deg, color-mix(in srgb, var(--success) 12%, transparent), rgba(0,0,0,.2)); }
.tut-bcard.is-done .tut-bprog .meter > span { background: var(--success); }
@media (max-width: 1100px) { .tut-build { grid-template-columns: 1fr; } }

/* Admin › Gebäude bearbeiten: 4 Spalten (Sandro 2026-10-10) */
.bedit-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1.2rem; }
.bedit-col { display: grid; gap: 1rem; min-width: 0; }
.bedit-col > .panel { margin: 0; }
.bedit-grid .form-row-5, .bedit-grid .form-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bedit-grid .res-inputs { grid-template-columns: 1fr; }
.bedit-grid .check-grid { gap: .3rem; }
.bedit-tier { display: block; margin: .35rem 0 .2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.planet-mini { width: 18px; height: 18px; image-rendering: pixelated; }
@media (max-width: 1400px) { .bedit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Admin › Gebäude: Baubarkeit mit Klassen-Reitern (Sandro 2026-10-10) */
.bedit-wide { grid-column: span 2; margin: 0; }
.btabs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .4rem 0 .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--border); }
.btab { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; font: inherit; font-size: .8rem; font-weight: 600; color: var(--text);
        background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.btab:hover { border-color: color-mix(in srgb, var(--primary, #7b8cff) 60%, transparent); }
.btab.is-active { background: rgba(123,140,255,.18); border-color: var(--primary, #7b8cff); }
.btab.is-off { opacity: .4; text-decoration: line-through; }
.btab-badge { padding: 0 .3rem; border-radius: 999px; font-size: .68rem; color: #0b1020; background: var(--success); }
.btab-group { margin: 0 .2rem 0 .5rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.btab-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.btab-head img { image-rendering: pixelated; }
.btab-head > div { display: grid; gap: .3rem; }
.btab-switch { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; }
.check-chip.is-locked { opacity: .65; cursor: default; }
@media (max-width: 1400px) { .bedit-wide { grid-column: 1 / -1; } }
/* Admin › Gebäude: Ausbau-Kette + Vorstufe per Bild (Sandro 2026-10-13) */
.bedit-wide.bedit-col > .panel { margin: 0; }
.upg-chain { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 .9rem; }
.upg-card { display: flex; align-items: center; gap: .6rem; min-width: 190px; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 10px;
            background: rgba(255,255,255,.03); color: var(--text); text-decoration: none; }
a.upg-card:hover { border-color: var(--primary); text-decoration: none; }
.upg-card.is-self { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.upg-card img { width: 44px; height: 44px; image-rendering: pixelated; flex: none; }
.upg-card > span:not(.upg-empty) { display: grid; line-height: 1.25; }
.upg-card small { font-size: .7rem; }
.upg-card .btn { margin-left: auto; }
.upg-empty { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.4rem; border: 1px dashed var(--border); border-radius: 8px; flex: none; }
.upg-arrow { font-size: 1.3rem; color: var(--muted); }
.upg-next { display: grid; gap: .4rem; }
.bedit-upgrade input[type="search"] { width: 100%; margin-bottom: .5rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px;
                                      background: rgba(5, 8, 18, .6); color: var(--text); font: inherit; }
.upg-picker { max-height: 320px; overflow-x: hidden; }
/* Ein Speichern-Knopf für den ganzen Gebäude-Editor (Sandro 2026-10-10) */
.bedit-savebar { position: fixed; right: 1.5rem; bottom: 1.2rem; z-index: 50; display: flex; align-items: center; gap: .8rem;
                 padding: .55rem .6rem .55rem 1rem; border-radius: 14px; border: 1px solid var(--border);
                 background: color-mix(in srgb, var(--bg, #0b1020) 88%, transparent); backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.bedit-state { font-size: .82rem; color: var(--muted); }
.bedit-grid.is-dirty .bedit-savebar { border-color: color-mix(in srgb, var(--warning, #f5b84a) 70%, transparent); }
.bedit-grid.is-dirty .bedit-state { color: var(--warning, #f5b84a); font-weight: 600; }
.bedit-image { display: grid; gap: .5rem; margin: .6rem 0; }
.bedit-image-pick { display: grid; gap: .45rem; }   /* Bild aus dem Bestand (Sandro 2026-10-25) */
.bedit-image-pick summary { cursor: pointer; font-size: .9rem; }
.bedit-image-pick input[type="search"] { margin: .4rem 0; }
.bedit-image-pick .rt-picker { overflow-x: hidden; }

/* Editor: Starten-Knopf als Platzhalter (Größe wie im Spiel), nicht klickbar */
.rt-node .rt-start-ph { pointer-events: none; opacity: .55; }
/* Forschungsdauer unter dem Kachel-Bild (Sandro 2026-10-10) */
.rt-tile-dur { display: block; max-width: 3.4rem; margin-top: .75rem; font-size: .72rem; font-weight: 700; line-height: 1.25; text-align: center; color: #fff; }
/* Richtungspfeile an den Verbindungen (Sandro 2026-10-10) – Farbe wie die Linie */
.rt-arrow path { fill: rgba(160, 180, 255, .75); }
.rt-arrow.is-hot path { fill: var(--primary-hi); }
.rt-arrow.is-temp path { fill: var(--success); }
.tl-arrow path { fill: rgba(150, 170, 230, .6); }
.tl-arrow.is-done path { fill: color-mix(in srgb, var(--success) 85%, transparent); }
/* Admin › Schiffe vergeben: Startort (Sandro 2026-10-10) */
.place-modes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.place-mode { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.place-mode:has(input:checked) { border-color: var(--primary, #7b8cff); background: rgba(123,140,255,.14); }
.place-mode:has(input:disabled) { opacity: .45; cursor: default; }
.place-map { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.place-map .pick-map { max-width: 520px; }
.place-map-side { display: grid; gap: .6rem; }
.place-pane[hidden] { display: none; }
.grant-place [hidden] { display: none !important; }
.type-capacity { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: .4rem 0 .9rem; }
/* Schiffstypen: Speichern oben, Baukosten + Bauzeit (Sandro 2026-10-13) */
.type-edit-head > div:first-child:not(.type-edit-actions) { flex: 1; }
.type-edit-actions { align-self: flex-start; flex: none; margin: 0; }
.type-build { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; padding: .8rem 1rem; border: 1px solid var(--border);
    border-radius: 10px; background: rgba(5, 8, 18, .35); }
.type-build-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .45rem; }
.type-build-time { display: grid; grid-template-columns: repeat(3, 4.6rem); column-gap: .4rem; align-content: start; }
.type-build-time .type-build-label { grid-column: 1 / -1; }
.type-build-time .field { display: flex; flex-direction: column-reverse; gap: .15rem; margin: 0; }
.type-build-time .field span { font-size: .72rem; color: var(--muted); }
.type-cost-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .4rem; }
.type-cost { display: grid; grid-template-columns: auto minmax(0, 1fr) 6rem auto; align-items: center; gap: .4rem; padding: .2rem .3rem .2rem .45rem;
    border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; }
.type-cost[hidden] { display: none; }
.type-cost span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-cost input { width: 100%; padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 6px; background: rgba(5, 8, 18, .6);
    color: var(--text); font: inherit; text-align: right; }
.type-cost input:focus { outline: none; border-color: var(--primary); }
.type-cost-list [data-cost-empty] { grid-column: 1 / -1; margin: 0; }
.type-cost-pick { margin-top: .5rem; }
.type-cost-pick summary { cursor: pointer; }
.type-cost-pick .madm-respick-chips { margin-top: .45rem; }
/* Schiffstypen: Bereiche auf-/zuklappen, Systemschiffe (Sandro 2026-10-10) */
details.type-cat > summary { cursor: pointer; list-style: none; }
details.type-cat > summary::-webkit-details-marker { display: none; }
details.type-cat > summary h2::before { content: '▾'; display: inline-block; margin-right: .45rem; color: var(--muted); transition: transform .15s; }
details.type-cat:not([open]) > summary h2::before { transform: rotate(-90deg); }
details.type-cat:not([open]) > summary { margin-bottom: 0; }
.type-system { border-color: color-mix(in srgb, #f5b94a 45%, var(--border)); }
.type-system-add { margin-top: .9rem; flex-wrap: wrap; }
/* Modulpunkte + Level für eine ganze Kategorie (Sandro 2026-10-13) */
.type-cat-modules { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; font-size: .8rem; color: var(--muted); margin-left: auto; }
.type-cat-modules button { white-space: nowrap; }
.type-cat-modules label { display: inline-flex; align-items: center; gap: .3rem; }
.type-cat-modules input[type="number"] { width: 6em; }
.type-cat-modules select { padding: .25rem .4rem; background: rgba(10, 16, 34, .8); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }

/* Fehler melden, Was ist neu, Versions-Fußzeile (sql/121, Sandro 2026-10-10) */
.game-footer { display: flex; justify-content: flex-end; gap: 1.2rem; margin-top: 2rem; padding: .8rem .2rem 0; border-top: 1px solid var(--border);
               font-size: .8rem; }
.game-footer a { color: var(--muted); text-decoration: none; }
.game-footer a:hover { color: var(--text); }
.whats-new-banner { display: block; margin-bottom: 1rem; padding: .65rem 1rem; border-radius: 10px; text-decoration: none; color: var(--text);
                    border: 1px solid color-mix(in srgb, var(--success) 55%, transparent);
                    background: linear-gradient(90deg, color-mix(in srgb, var(--success) 16%, transparent), transparent); }
.whats-new-banner span { float: right; color: var(--success); }
.bug-list, .changelog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bug-item { padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(0,0,0,.15); }
.bug-head { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.bug-status { font-size: .8rem; white-space: nowrap; }
.bug-item.is-behoben { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.bug-item.is-in_arbeit { border-color: color-mix(in srgb, #f5b94a 50%, transparent); }
.bug-answer { margin: .4rem 0 0; padding: .45rem .6rem; border-radius: 8px; background: rgba(123,140,255,.1); font-size: .88rem; }
.changelog-list li { padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.cl-kind { display: inline-block; min-width: 7.5rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.cl-behoben .cl-kind { color: #ff9aa5; } .cl-neu .cl-kind { color: var(--success); } .cl-balancing .cl-kind { color: #f5b94a; }
.bug-admin .bug-head h2 { margin: 0; }
.bug-body { margin: .4rem 0 .8rem; padding: .6rem .75rem; border-radius: 8px; background: rgba(0,0,0,.2); white-space: normal; }
.bug-actions { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
.bug-edit { display: grid; gap: .4rem; }
.bug-admin.is-behoben { opacity: .8; }
.cl-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.cl-add input[name=text] { flex: 1; min-width: 14rem; }

/* Galaxie › Ereignisse (sql/122, Sandro 2026-10-10) */
.galaxy-tabs { margin-bottom: 1rem; }
.gl-filters { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.gl-cats { display: flex; flex-wrap: wrap; gap: .35rem; }
.gl-cats a { padding: .35rem .75rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-size: .85rem; }
.gl-cats a small { color: var(--muted); margin-left: .2rem; }
.gl-cats a.active { border-color: var(--faction, var(--primary)); background: color-mix(in srgb, var(--faction, #7b8cff) 18%, transparent); }
.gl-cats a[data-empty] { opacity: .5; }
.gl-search { display: flex; gap: .4rem; }
.gl-search input[type=search] { min-width: 16rem; }
.gl-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .55rem;
          border-bottom: 1px solid rgba(255,255,255,.05); }
.gl-row:hover { background: rgba(255,255,255,.03); }
.gl-icon { text-align: center; font-size: 1.1rem; }
.gl-text { line-height: 1.7; }
.gl-time { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-ship { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; }
.gl-ship img { width: 26px; height: 26px; object-fit: contain; }
.gl-ship b { color: var(--faction, var(--text)); }
.gl-ship small, .gl-text small { color: var(--muted); }
.gl-owner { display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; color: var(--muted); }
.gl-owner img { width: 14px; height: 14px; }
.gl-verb.is-bad { color: #ff7a85; } .gl-verb.is-good { color: var(--success); } .gl-verb { color: #f5b94a; }
.gl-alert { padding: .05rem .4rem; border-radius: 6px; font-size: .75rem; font-weight: 700; color: #fff; background: rgba(230, 60, 70, .75); }
.gl-place { margin-left: .3rem; font-size: .8rem; white-space: nowrap; }
.gl-empty { padding: 1rem 0; }
.gl-pages { margin-top: .8rem; }

/* Admin › Terraforming: neue Umwandlung per Bildauswahl (Sandro 2026-10-11) */
.tf-new { display: grid; gap: 1rem; }
.tf-pick h3 { margin: 0; font-size: .95rem; display: inline; }
.tf-pick > summary { cursor: pointer; list-style: none; padding: .2rem 0; }
.tf-pick > summary::-webkit-details-marker { display: none; }
.tf-pick > summary::before { content: '▸'; display: inline-block; width: 1rem; color: var(--muted, #8a93a8); transition: transform .15s; }
.tf-pick[open] > summary::before { transform: rotate(90deg); }
.tf-pick[open] > summary { margin-bottom: .4rem; }
.tf-zone { display: grid; grid-template-columns: 8rem 1fr; gap: .6rem; align-items: start; margin-bottom: .4rem; }
.tf-zone-name { font-size: .8rem; color: var(--muted, #8a93b8); padding-top: .9rem; }
.tf-tiles { display: flex; flex-wrap: wrap; gap: .5rem; }
.tf-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 74px; padding: .35rem .25rem;
           border: 2px solid transparent; border-radius: 8px; cursor: pointer; text-align: center; transition: background .15s, border-color .15s; }
.tf-tile:hover { background: rgba(255, 255, 255, .06); }
.tf-tile input { position: absolute; opacity: 0; pointer-events: none; }
.tf-tile .tile { width: 48px; display: block; image-rendering: pixelated; border-radius: 4px; }
.tf-tile small { font-size: .7rem; line-height: 1.15; }
.tf-tile:has(input:checked) { border-color: #7c6cff; background: rgba(124, 108, 255, .16); }
.tf-tile:has(input:focus-visible) { outline: 2px solid #7c6cff; outline-offset: 2px; }
.tf-tile.is-same, .tf-tile.is-exists { opacity: .45; }
.tf-tile.is-exists::after { content: '✓'; position: absolute; top: 2px; right: 6px; font-size: .75rem; color: #6fdc8c; }
.tf-new-foot { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.tf-new-sum.is-bad { color: #ff8a8a; }
.tf-zone-name small { display: block; font-size: .72rem; opacity: .75; }
.tf-pick + .tf-pick { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .8rem; }
.tf-shafts { margin-top: .6rem; }
.tf-shafts .tf-tile { text-decoration: none; color: inherit; }
.tf-shafts .tf-tile.is-missing .tile { filter: grayscale(.6) brightness(.8); }
.tf-shafts .tf-tile .btn { padding: .1rem .4rem; font-size: .7rem; }
.tf-shafts .tf-tile .btn { white-space: nowrap; }

/* Admin › Module: Level-Karten (nur Anzeige) + Editor je Level darunter (Sandro 2026-10-11) */
.madm-main { display: grid; gap: 1.2rem; min-width: 0; }
.madm-main > .panel { margin: 0; }
.madm-levels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.madm-lvl { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: .7rem .6rem .5rem; border: 1px solid var(--border);
            border-radius: 12px; background: var(--surface-hi, rgba(255, 255, 255, .03)); color: var(--text); transition: border-color .15s, transform .15s, background .15s; }
.madm-lvl:hover { text-decoration: none; border-color: var(--primary); transform: translateY(-2px); }
.madm-lvl.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--surface)); box-shadow: 0 0 0 1px var(--primary); }
.madm-lvl.is-s { border-style: dashed; border-color: rgba(201, 168, 255, .45); }
.madm-lvl-img { position: relative; align-self: center; width: 52px; height: 52px; }
.madm-lvl-img img { width: 100%; height: 100%; }
.madm-lvl-img b { position: absolute; right: -8px; bottom: -4px; min-width: 1.6rem; padding: 0 .3rem; border-radius: 999px; font-size: .72rem; line-height: 1.35rem;
                  text-align: center; color: #fff; background: var(--primary); box-shadow: 0 0 0 2px var(--surface); }
.madm-lvl-img.is-s b, .madm-lvl.is-s .madm-lvl-img b { background: #8a6cd8; }
.madm-lvl-img.is-big { width: 52px; height: 52px; flex: none; }
.madm-lvl dl { display: grid; grid-template-columns: 1fr auto; gap: .15rem .4rem; margin: 0; font-size: .8rem; }
.madm-lvl dt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.madm-lvl dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.madm-lvl dd small { font-weight: 400; color: var(--muted); }
.madm-lvl-cost { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding-top: .45rem; border-top: 1px solid var(--border); margin-top: auto; }
.madm-lvl-cost .chip { font-size: .72rem; padding: .05rem .35rem; }
.madm-lvl-sum { width: 100%; text-align: right; font-size: .72rem; color: var(--muted); }
.madm-lvl-edit { font-size: .7rem; text-align: center; color: var(--primary-hi, #9fb2ff); opacity: 0; transition: opacity .15s; }
.madm-lvl:hover .madm-lvl-edit, .madm-lvl.is-on .madm-lvl-edit { opacity: 1; }
.madm-edit { scroll-margin-top: 80px; border-color: var(--primary); }
.madm-nav { display: flex; gap: .3rem; }
.madm-edit-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.4rem; margin-top: 1rem; align-items: start; }
.madm-form { width: 100%; border-collapse: collapse; }
.madm-form th, .madm-form td { padding: .25rem .35rem; }
.madm-form thead th { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left;
                      border-bottom: 1px solid var(--border); }
.madm-form thead th.num { text-align: right; }
.madm-form tbody th { text-align: left; font-weight: 500; font-size: .88rem; white-space: nowrap; }
.madm-form tbody th .res-mini { vertical-align: -3px; }
.madm-form td.num { text-align: right; font-variant-numeric: tabular-nums; }
.madm-form .madm-ref { color: var(--muted); font-size: .8rem; width: 4.5rem; }
.madm-form input { width: 7rem; padding: .3rem .45rem; text-align: right; border: 1px solid var(--border); border-radius: 6px; background: var(--bg, #0b0f1e); color: var(--text); font: inherit; }
.madm-form input:focus { outline: none; border-color: var(--primary); }
.madm-form input.is-changed { border-color: #ffc98a; }
.madm-form tr.madm-sum th, .madm-form tr.madm-sum td { border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); padding-top: .4rem; }
.madm-form tr.madm-sum td[data-sum] { color: var(--text); font-weight: 600; padding-right: .8rem; }
.madm-form tr.madm-add th { padding-top: .5rem; }
.madm-form tr.madm-add select { padding: .2rem .5rem; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; }
.madm-form-note { align-self: center; padding: 1rem; border: 1px dashed var(--border); border-radius: 10px; text-align: center; }
.madm-save { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.madm-form thead small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: .3rem; }
.madm-respick { margin-top: 1rem; padding: .8rem 1rem; border: 1px dashed var(--border); border-radius: 12px; }
.madm-respick-head { margin: 0 0 .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.madm-respick-head small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: .3rem; }
.madm-respick-group { display: grid; grid-template-columns: 10rem 1fr; gap: .6rem; align-items: center; padding: .2rem 0; }
.madm-respick-cat { font-size: .78rem; color: var(--muted); }
.madm-respick-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.madm-res { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem .2rem .4rem; border: 1px solid var(--border); border-radius: 999px;
            background: transparent; color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; transition: background .15s, border-color .15s; }
.madm-res:hover { border-color: var(--primary); background: var(--surface-hi); }
.madm-res.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 22%, transparent); }
.madm-res.is-on::after { content: '✓'; font-size: .7rem; color: var(--primary-hi); }
.madm-form tr.is-flash td, .madm-form tr.is-flash th { animation: madm-flash .9s ease-out; }
@keyframes madm-flash { from { background: color-mix(in srgb, var(--primary) 30%, transparent); } to { background: transparent; } }

/* Datenbank › Gebäude: Werte passen in schmale Karten, Klassen-Baubarkeit (Sandro 2026-10-11) */
.codex-stats { grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); }
.codex-stats div { min-width: 0; }
.codex-stats dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codex-stats dd { overflow-wrap: break-word; }
.codex-stats .is-wide { grid-column: span 2; }
.codex-classes { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .4rem 0 0; }
.codex-classes .planet-mini, .chip-class .planet-mini { width: 16px; height: 16px; vertical-align: -3px; }
.stage-filter { flex-wrap: wrap; }
.cv-table .cv-chips { min-width: 9rem; }
.cv-table td:last-child .cv-chips { min-width: 15rem; }

/* Forschung pausiert (Forschungszentrum aus) – Balken grau, Hinweis gelb (Sandro 2026-10-11) */
.research-paused { color: #ffc98a; margin: .3rem 0 0; }
.is-paused .progress, .is-paused .basics-bar span { filter: grayscale(1) brightness(.75); }
.progress.is-paused { filter: grayscale(1) brightness(.75); }

/* Baumenü › Feld gewählt: Kopf mit ✕, Status neben „steht auf …“, Pro Runde rechts (Sandro 2026-10-11) */
.panel-close { position: absolute; top: -.85rem; right: -.85rem; z-index: 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
               border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .8rem; line-height: 1;
               box-shadow: 0 2px 8px rgba(0, 0, 0, .45); transition: color .15s, border-color .15s, background .15s; }   /* sitzt auf der Außenkante (Sandros Trick) */
.panel-close:hover { color: var(--text); border-color: var(--faction); background: var(--surface-hi); text-decoration: none; }
.field-panel .field-head { flex-wrap: wrap; align-items: flex-start; }   /* Bild + Titel oben links, auch neben hohem Pro-Runde-Kasten */
.field-head-main { flex: 1 1 12rem; min-width: 0; }
.field-head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .15rem !important; }
/* Pro Runde: eigener Kasten links neben dem Titel, Wirkung als Liste (Sandro 2026-10-11) */
.field-panel .field-head-main { flex: 0 1 auto; }
.field-head-effects { flex: 0 1 auto; align-self: stretch; }
/* Info-Kasten (inc/game/boxes.php): Pro Runde und alle Baukosten im gleichen Look (Sandro 2026-10-12) */
.info-box { display: inline-grid; align-content: start; gap: .35rem; padding: .5rem .8rem .55rem; max-width: 100%;
            border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .35); }
.info-box-title { color: var(--muted); font-weight: 600; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.info-box-ico { width: 18px; text-align: center; font-size: .85rem; line-height: 1; }
.cost-box { margin: .5rem 0 0; }
.info-box.is-wide { display: grid; }   /* volle Breite (z. B. Übersicht, Produktion pro Runde) */
.info-box.is-compact { display: grid; padding: .35rem .55rem .4rem; gap: .25rem; }
.info-box.is-compact .effect-list { gap: .15rem .8rem; }
.info-box.is-compact .effect-list li { font-size: .76rem; gap: .3rem; }
.effect-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(var(--rows, 3), auto); grid-auto-flow: column; gap: .2rem 1.2rem; }
.effect-list li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: .4rem; font-size: .82rem; white-space: nowrap; min-width: 0; }
.effect-list span { overflow: hidden; text-overflow: ellipsis; }
.effect-list li > img, .effect-list li > .stat-ico { width: 18px; height: 18px; }
.effect-list b { text-align: right; font-variant-numeric: tabular-nums; }
.effect-list b.info { color: #9fc4ff; }
.effect-list span { color: var(--muted); }

/* Symbole für Gebäude-Werte (BUILDING_STAT_ICONS, Sandro 2026-10-11) */
.stat-ico { width: 18px; height: 18px; vertical-align: -4px; image-rendering: pixelated; }
i.stat-ico { font-size: .7rem; border-radius: 5px; }
.res-chip .stat-ico { margin-right: .1rem; }
.codex-stats dt .stat-ico { width: 15px; height: 15px; vertical-align: -3px; font-size: .6rem; }
.field-desc-row { display: flex; align-items: flex-start; gap: 1.2rem; margin: 0 0 .6rem; }
.field-desc-row > p { flex: 1; margin: 0; }
.field-desc-row > .btn-row { flex: none; margin: 0; justify-content: flex-end; flex-wrap: nowrap; align-items: flex-start; }

/* Schiff bauen in zwei Schritten (ingame/colony/ship_picker.php, Sandro 2026-10-12): Karten zur Auswahl, dann Ansicht des Schiffs */
.ship-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.ship-card { display: grid; justify-items: center; gap: .2rem; padding: .8rem .6rem; text-align: center; color: var(--text);
             border: 1px solid var(--border); border-radius: 12px; background: rgba(5, 8, 18, .4);
             transition: border-color .15s, background .15s, transform .15s; }
.ship-card:hover { border-color: var(--faction); background: var(--surface-hi); text-decoration: none; transform: translateY(-2px); }
.ship-card img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.ship-card small { font-size: .75rem; }
.ship-card .tag { margin-top: .2rem; font-size: .68rem; }
.ship-card.is-locked img { filter: grayscale(.8) brightness(.7); }
.ship-card.is-locked { opacity: .75; }
/* Schiffsauswahl als Liste nach Kategorien (Sandro 2026-10-15) */
.ship-list-cat { margin: .8rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ship-list-cat:first-of-type { margin-top: .2rem; }
.ship-list { display: grid; gap: .3rem; }
.ship-row { display: grid; grid-template-columns: 40px minmax(150px, 220px) 1fr auto; align-items: center; gap: .8rem; padding: .35rem .7rem;
            color: var(--text); border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .4);
            transition: border-color .15s, background .15s; }
.ship-row:hover { border-color: var(--faction); background: var(--surface-hi); text-decoration: none; }
.ship-row > img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.ship-row-name { display: grid; line-height: 1.2; }
.ship-row-name small { font-size: .75rem; }
.ship-row-costs { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .82rem; font-variant-numeric: tabular-nums; }
.ship-row-costs span { display: inline-flex; align-items: center; gap: .3rem; }
.ship-row-costs img { width: 18px; height: 18px; }
.ship-row-time { font-size: .8rem; white-space: nowrap; }
/* Torpedofabrik: eine Zeile je Level (Sandro 2026-10-15), gleiche Spalten wie die Schiffsliste + Menge + Häkchen */
.module-level-list { display: grid; gap: .3rem; margin-bottom: .6rem; }
.module-level-row { display: grid; grid-template-columns: 40px minmax(150px, 220px) 1fr auto auto 70px 22px; align-items: center; gap: .8rem;
                    padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .4); cursor: pointer; }
.module-level-row:hover { border-color: var(--faction); background: var(--surface-hi); }
.module-level-row:has([data-pick]:checked) { border-color: var(--faction); }
.module-level-row.is-locked { grid-template-columns: 40px 1fr; opacity: .75; cursor: default; }
.module-level-row.is-blocked { opacity: .55; }   /* Aufleveln gesperrt (Crew, sql/210): keine Kosten im Admin oder keine Crew eine Stufe darunter */
.module-level-row > img { width: 40px; height: 40px; image-rendering: pixelated; }
.module-level-row input[type=checkbox] { width: 18px; height: 18px; }
.module-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .6rem; }
.module-tab { position: relative; display: flex; align-items: center; gap: .45rem; padding: .35rem .7rem .35rem .4rem; color: var(--text); font: inherit; font-size: .85rem;
              border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .4); cursor: pointer; }
.module-tab img { width: 28px; height: 28px; image-rendering: pixelated; }
.module-tab:hover { border-color: var(--faction); background: var(--surface-hi); }
.module-tab.is-on { border-color: var(--faction); background: var(--surface-hi); box-shadow: 0 0 0 1px var(--faction) inset; }
.module-tab.is-locked { opacity: .6; }
.module-tab-count { position: absolute; top: -.45rem; right: -.45rem; min-width: 1.2rem; padding: 0 .3rem; border-radius: 999px;
                    background: var(--faction); color: #0b0f1c; font-size: .7rem; line-height: 1.2rem; text-align: center; }
.module-level-group { display: grid; gap: .3rem; }
.module-level-group[hidden] { display: none; }
.module-level-more { margin: .1rem 0 0 .2rem; }
.module-level-row.needs-level { border-color: var(--danger); }
.ship-picker-back { justify-self: start; font-size: .85rem; }
.ship-detail { display: grid; gap: .6rem; }
.ship-detail-head { display: flex; align-items: center; gap: 1rem; }
.ship-detail-head img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
.ship-detail-head h3 { margin: 0; font-size: 1.3rem; }
.ship-detail-head p { margin: .15rem 0 0; }
.module-choice { flex: 1 1 420px; }
.module-choice .core-slots { margin: 0; }
.module-choice .info-box-title small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.core-slot.is-optional select { border-style: dashed; }
/* Modulpunkte + Zusatzplätze beim Schiffbau (Sandro 2026-10-13) */
.module-choice > .info-box-title { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.module-points { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.module-points b { color: var(--text); }
.module-choice.is-over .module-points, .module-choice.is-over .module-points b { color: #ff7b88; }
.module-extra-title { margin-top: .7rem; }
.madm-points { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.madm-points > span { font-weight: 600; }
.madm-points input { width: 6rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 8, 18, .6);
    color: var(--text); font: inherit; text-align: right; }
/* Admin: Modul-Level als Knöpfe (js/app.js), Zusatzplätze als leere Slots (Sandro 2026-10-13) */
.level-chips { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.grant-module .level-chips { flex: none; }
.grant-module > span:not(.level-chips) { overflow: hidden; text-overflow: ellipsis; }   /* sonst greift .grant-module span { flex: 1 } und schneidet V/VI ab */
.level-chips button { min-width: 1.9rem; padding: .22rem .4rem; border: 0; border-left: 1px solid var(--border); background: rgba(5, 8, 18, .5);
    color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.level-chips button:first-child { border-left: 0; }
.level-chips button:hover:not(:disabled) { color: var(--text); background: var(--surface-hi); }
.level-chips button.is-on { color: #fff; background: color-mix(in srgb, var(--primary) 70%, transparent); }
.level-chips button:disabled { opacity: .28; cursor: not-allowed; }
.type-extras { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .5rem 0 .2rem; }
.type-extras-label { font-size: .85rem; font-weight: 600; }
.type-extras-slots { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.type-extras-slots img { width: 34px; height: 34px; }
.madm-lvl-pts { font-size: .75rem; color: var(--muted); text-align: center; }
.type-points-hint { grid-column: span 1; align-self: end; margin: 0 0 .4rem; }
.module-extra-slots { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }
.module-extra-slots img { width: 30px; height: 30px; }

/* Admin → Schiffe: Unterreiter Spieler / NPCs / Admins unter den Hauptreitern (Sandro 2026-10-14) */
.tabs-sub { margin-top: -1rem; border-bottom: 0; }
.tabs-sub a { font-size: .85rem; padding: .3rem .8rem; }

/* Admin → Schiffe → KI-Schiffe (Sandro 2026-10-14, sql/140) */
.admin-form .form-row-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ai-state { font-size: .8rem; font-weight: 600; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.ai-state.is-on { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.grant-card.is-off { opacity: .5; }
.ai-loot { width: 100%; border-collapse: collapse; margin: .3rem 0 .5rem; }
.ai-loot th { text-align: left; font-size: .75rem; color: var(--muted); font-weight: 600; padding: .2rem .3rem; }
.ai-loot td { padding: .2rem .3rem; }
.ai-loot select, .ai-loot input { width: 100%; }
.ai-loot input[type=number] { max-width: 7rem; }
.ai-loot-pct { max-width: 32rem; }
.ai-loot-pct output { font-size: .85rem; color: var(--muted); }

/* Galaxie-Karte: Zoomstufen (Mausrad) + Ziehen, KI-Signaturen (Sandro 2026-10-14) */
.gmap { touch-action: none; user-select: none; }
.gmap.is-dragging { cursor: grabbing; transition: none; }
.gmap.is-dragging .gtile { pointer-events: none; }
.gmap-z2, .gmap-z3 { gap: 0; }
.gmap-z2 .gmap-axis, .gmap-z3 .gmap-axis { font-size: .55rem; line-height: 0; min-height: 0; overflow: visible; }
.gmap-z2 .gtile:hover, .gmap-z3 .gtile:hover { transform: none; }
.gmap.is-loading { opacity: .6; transition: opacity .15s; }
.gtile-sig {
    position: absolute; z-index: 3; pointer-events: none;
    left: 50%; top: 50%; width: 46%; height: 46%; translate: -50% -50%;
    border-radius: 50%; border: 2px solid #ff4d4d;
    box-shadow: 0 0 8px #ff4d4d, inset 0 0 6px rgba(255, 77, 77, .6);
    animation: sig-pulse 1.6s ease-in-out infinite;
}
.gtile-sig[data-n]::after {
    content: attr(data-n); position: absolute; right: -40%; top: -40%;
    font-size: .6rem; font-weight: 700; color: #fff; background: #c22; border-radius: 999px; padding: 0 .25rem;
}
.gmap-z2 .gtile-sig, .gmap-z3 .gtile-sig { width: 70%; height: 70%; border-width: 1.5px; }
@keyframes sig-pulse { 50% { opacity: .35; scale: .8; } }
.legend-sig { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #ff4d4d; box-shadow: 0 0 5px #ff4d4d; vertical-align: -1px; }
.minimap-sig { fill: #ff4d4d; stroke: #fff; stroke-width: .2; }

/* Admin → Schiffe → ⚖ Balancing (Sandro 2026-10-15): eine Zeile je Schiff, alles direkt editierbar */
.bal-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; padding: .6rem .9rem;
           border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.bal-bar p { flex: 1; margin: 0; }
.bal-cat { padding: .8rem; margin-bottom: .9rem; }
.bal-cat-title { margin: 0; font-size: 1rem; }
.bal-cat-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-bottom: .5rem; }   /* Für alle (Sandro 2026-10-23) */
.bal-cat-all { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.bal-catv { display: grid; grid-template-columns: 24px auto; align-items: center; gap: .1rem .45rem; min-width: 150px; padding: .3rem .4rem;
            border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 8, 18, .4); font-size: .72rem; color: var(--muted); }
.bal-catv img { grid-row: 1 / span 2; width: 24px; height: 24px; image-rendering: pixelated; }
.bal-catv > input, .bal-catv > .bal-hms { grid-column: 2; }
.bal-catv input, .bal-catv select { padding: .2rem .35rem; font: inherit; font-size: .85rem; color: var(--text); background: var(--bg);
                                    border: 1px solid var(--border); border-radius: 6px; }
.bal-catv > input { width: 6.5rem; }
.bal-row { display: grid; grid-template-columns: 150px 270px repeat(2, minmax(0, 1fr)) minmax(270px, 320px); grid-template-areas: "id stats fields crew build"; gap: .5rem 1rem;
           padding: .6rem .7rem; margin-bottom: .45rem; border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 10px;
           background: rgba(5, 8, 18, .4); }
.bal-row.is-dirty { border-left-color: var(--faction); background: var(--surface-hi); }
.bal-id { grid-area: id; display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: .4rem; min-width: 0; }   /* Bild oben links, Name darunter (Sandro 2026-10-23) */
.bal-id img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.bal-id div { display: grid; line-height: 1.2; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.bal-id small { font-size: .75rem; }
.bal-id-all { display: grid; grid-template-columns: repeat(2, 32px); gap: 2px; }   /* alle Fraktionen: 4 Bauarten (Sandro 2026-10-25) */
.bal-id .bal-id-all img { width: 32px; height: 32px; }
.grant-faction-all span:first-child { width: 26px; text-align: center; font-size: 1.1rem; }
.bal-scope { margin: 0 0 .6rem; padding: .55rem .9rem; font-size: .9rem; border-color: color-mix(in srgb, var(--faction) 50%, var(--border)); }
.bal-fields { grid-area: fields; display: grid; align-content: start; gap: .4rem; padding: .5rem .6rem; border: 1px solid var(--border);
              border-radius: 8px; background: rgba(5, 8, 18, .35); }   /* Werte + Crew-Abteilungen (Sandro 2026-10-23) */
.bal-vals { display: grid; gap: .35rem; }   /* untereinander (Sandro 2026-10-23) */
.bal-v { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: .5rem; padding: .3rem .45rem;
         border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 8, 18, .4); }   /* links Eingabe, rechts Darstellung */
.bal-in { display: grid; gap: .15rem; font-size: .72rem; color: var(--muted); min-width: 0; }
.bal-in input, .bal-in select { width: 100%; min-width: 0; padding: .2rem .35rem; font: inherit; font-size: .85rem; color: var(--text);
                                background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.bal-in .bal-hms { flex-wrap: wrap; }
.bal-in .bal-hms.bal-nowrap { flex-wrap: nowrap; }
.bal-in .bal-nowrap select { flex: 0 1 auto; min-width: 0; }
.bal-in .bal-hms input { width: 4rem; flex: 1 1 4.5rem; min-width: 0; }
.bal-in .bal-hms select { width: auto; flex: 1 1 auto; }
.bal-show { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.bal-show > img { width: 26px; height: 26px; image-rendering: pixelated; }
.bal-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--muted); }
.bal-chip img { width: 26px; height: 26px; image-rendering: pixelated; }
.bal-chip span { display: grid; line-height: 1.15; }
.bal-chip b { color: var(--text); font-weight: 600; font-size: .8rem; }
.bal-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.bal-slots img { width: 20px; height: 20px; image-rendering: pixelated; }
.bal-slots b { font-size: .72rem; margin-left: .2rem; }
.bal-v { position: relative; }
.bal-xslot { padding: 1px; line-height: 0; cursor: pointer; border: 1px dashed var(--border); border-radius: 5px; background: none; }
.bal-xslot img { width: 22px; height: 22px; image-rendering: pixelated; }
.bal-xslot.is-on { border-style: solid; border-color: var(--faction, var(--primary)); }
.bal-xslot:hover { border-color: var(--primary); }
.bal-xpick { position: absolute; z-index: 7; display: grid; gap: .15rem; min-width: 210px; padding: .35rem; border: 1px solid var(--border);
             border-radius: 10px; background: rgb(20, 27, 48); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }   /* Ab-Werk-Modul wählen */
.bal-xpick[hidden] { display: none; }
.bal-xpick button { display: flex; align-items: center; gap: .45rem; padding: .25rem .4rem; font: inherit; font-size: .8rem; color: var(--text);
                    text-align: left; cursor: pointer; border: 0; border-radius: 6px; background: none; }
.bal-xpick button:hover { background: var(--surface-hi); }
.bal-xpick img { width: 22px; height: 22px; image-rendering: pixelated; }
.bal-id .btn { margin-top: .2rem; }
/* Bauregeln der Station unter dem Namen (Sandro 2026-10-26): freigegeben, Bauorte, wie oft */
.bal-rules { display: grid; gap: .25rem; width: 100%; margin-top: .5rem; padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 8px;
             background: rgba(255, 255, 255, .02); font-size: .8rem; }
.bal-rules .bal-label { margin-bottom: .1rem; }
.bal-check { display: flex; align-items: center; gap: .35rem; cursor: pointer; line-height: 1.25; }
.bal-check.is-off { color: var(--danger); }
.bal-rules .bal-in input { width: 5rem; }
.bal-mods { display: grid; gap: .4rem; padding: .4rem .45rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 8, 18, .4); }   /* Module (Sandro 2026-10-23) */
.bal-mods-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
.bal-mods-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .25rem; }
.bal-mslot { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.bal-mslot img { flex: none; width: 22px; height: 22px; image-rendering: pixelated; }
.bal-mslot select { flex: 1; min-width: 0; padding: .1rem .2rem; font: inherit; font-size: .75rem; color: var(--text); background: var(--bg);
                    border: 1px solid var(--border); border-radius: 5px; }
.bal-mslot.is-optional img { opacity: .6; }
.bal-mods-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .75rem; color: var(--muted); }
.bal-mods-foot > span { margin-right: auto; }
.bal-mods-foot b { color: var(--text); font-size: .85rem; }
.bal-mods-foot b.text-bad { color: var(--danger); }
.bal-fits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }   /* nachrüstbar (Sandro 2026-10-23) */
.bal-fits .small { margin-right: .3rem; }
.bal-fit { padding: 1px; line-height: 0; cursor: pointer; border: 1px solid var(--border); border-radius: 5px; background: none; opacity: .35; }
.bal-fit img { width: 20px; height: 20px; image-rendering: pixelated; }
.bal-fit.is-on { opacity: 1; border-color: var(--faction, var(--primary)); }
.bal-crewbox { grid-area: crew; display: grid; align-content: start; gap: .45rem; padding: .5rem .6rem; border: 1px solid var(--border);
                border-radius: 8px; background: rgba(5, 8, 18, .35); }   /* Crew-Abteilungen (Sandro 2026-10-23) */
.bal-crew-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .35rem; }
.bal-crew-add { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: .4rem; padding: .3rem .45rem;
                font: inherit; font-size: .75rem; color: var(--muted); text-align: left; cursor: pointer;
                border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 8, 18, .4); }
.bal-crew-add img { width: 26px; height: 26px; image-rendering: pixelated; }
.bal-crew-add span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bal-crew-add b { color: var(--primary); }
.bal-crew-add:hover { border-color: var(--primary); color: var(--text); }
.bal-crew-add.is-on { color: var(--text); border-color: var(--faction, var(--primary)); }
.bal-crew-slots { display: flex; flex-wrap: wrap; gap: .35rem; }
.bal-crew-slot { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .2rem .15rem .35rem; font-size: .8rem;
                 border: 1px solid var(--border); border-radius: 8px; background: var(--surface-hi); }
.bal-crew-slot img { width: 22px; height: 22px; image-rendering: pixelated; }
.bal-build { grid-area: build; display: grid; align-content: start; gap: .5rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px;
             background: rgba(5, 8, 18, .35); }   /* Bauzeit + Baukosten (Sandro 2026-10-23) */
.bal-f { display: grid; gap: .15rem; font-size: .72rem; color: var(--muted); }
.bal-f input, .bal-f select { width: 6.5rem; padding: .25rem .4rem; font: inherit; font-size: .85rem; color: var(--text);
                               border: 1px solid var(--border); border-radius: 6px; background: rgba(5, 8, 18, .6); }
.bal-f input:focus, .bal-f select:focus, .bal-v input:focus, .bal-v select:focus, .bal-catv input:focus, .bal-catv select:focus { outline: none; border-color: var(--primary); }
.bal-hms { display: flex; align-items: center; gap: .2rem; }
.bal-hms input { width: 3.4rem; }
.bal-hms select { width: 3.6rem; }
.bal-costs { display: grid; gap: .3rem; }
.bal-label { font-size: .72rem; color: var(--muted); }
.bal-cost-list { display: flex; align-items: flex-start; gap: .5rem; }   /* links „+ Ressource“, rechts die Kosten (Sandro 2026-10-25) */
.bal-cost-items { display: grid; justify-items: start; gap: .3rem; min-width: 0; }
.bal-cost.type-cost { grid-template-columns: auto 5.5rem auto; padding: .1rem .2rem .1rem .35rem; }
.bal-pick { position: relative; flex: none; }
.bal-pick[open] .madm-respick-chips { position: absolute; z-index: 6; right: 0; top: 100%;   /* klappt nach links auf, ins freie Feld */
                                       width: 520px; margin-top: .3rem; padding: .5rem;
                                       border: 1px solid var(--border); border-radius: 10px; background: rgb(20, 27, 48);
                                       box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }   /* volle Deckkraft (Sandro 2026-10-23) */
.bal-statbox { grid-area: stats; display: grid; align-content: start; gap: .3rem; padding: .5rem .6rem; border: 1px solid var(--border);
               border-radius: 8px; background: rgba(5, 8, 18, .35); }
.bal-stats { width: 100%; font-size: .75rem; border-collapse: collapse; align-self: start; }
.bal-stats th { text-align: left; font-weight: normal; color: var(--muted); padding: .05rem .3rem; }
.bal-stats td { text-align: right; font-variant-numeric: tabular-nums; padding: .05rem .3rem; }
.bal-stats thead th { text-align: right; font-size: .7rem; }
.bal-stats.is-bad thead th { color: var(--danger); }
.bal-stats-sep th { padding-top: .35rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
                    border-bottom: 1px solid var(--border); }
.tf-module-title { margin: .4rem 0 .5rem; font-size: .95rem; }   /* Admin → Terraforming: Modul-Kosten (sql/146) */
/* Schiffsbaupläne (Sandro 2026-10-15, sql/147): Leiste über den Modulen + Baupläne unter der Schiffszeile */
.blueprint-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .5rem .7rem; border: 1px dashed var(--border);
                 border-radius: 10px; background: rgba(5, 8, 18, .35); }
.blueprint-title { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.blueprint-bar input, .blueprint-bar select { padding: .3rem .5rem; font: inherit; font-size: .85rem; color: var(--text); border: 1px solid var(--border);
                                              border-radius: 6px; background: rgba(5, 8, 18, .6); }
.blueprint-bar input { width: 14rem; }
.ship-row-bps { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: -.15rem 0 .2rem 3.4rem; font-size: .78rem; color: var(--muted); }
.ship-row-bps a { padding: .05rem .5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); }
.ship-row-bps a:hover { border-color: var(--faction); text-decoration: none; }
/* Werft (Sandro 2026-10-15): Kosten | Module in einer Spalte | Schiffswerte; gewählte Module ohne Bestand rot */
.ship-picker .module-choice .core-slots { grid-template-columns: 1fr; }
.ship-picker .module-choice { flex: 1 1 280px; }
.ship-values { flex: 0 1 220px; }
.ship-values .effect-list li { grid-template-columns: 0 1fr auto; }
.ship-values .effect-list li.is-empty { opacity: .45; }
.core-slot.is-short select { border-color: rgba(255, 93, 108, .8); color: #ffb3bb; background: rgba(255, 93, 108, .08); }
.module-missing { margin: .4rem 0 0; }

/* Admin → Schiffe → 🔒 Limits: globale Regler als Balken mit Prozentbereich (Sandro 2026-10-16) */
.boost-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; margin-bottom: .8rem; }
.boost { padding: .8rem 1rem 1.6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); }
.boost-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.boost-head small { flex: 1; }
.boost-val { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; color: var(--muted); }
.boost-val.is-changed { color: #ffb648; }
.boost input[type=range] {
    width: 100%; height: 10px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 999px; cursor: pointer;
    background: linear-gradient(90deg, var(--primary) 0 var(--p), var(--surface-hi) var(--p) 100%);
}
.boost input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--text); border: 3px solid var(--primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); }
.boost input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 3px solid var(--primary); }
.boost-scale { position: relative; height: 1rem; margin-top: .35rem; font-size: .72rem; color: var(--muted); }
.boost-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.boost-scale span:first-child { transform: none; }
.boost-scale span:last-child { transform: translateX(-100%); }
.boost-scale span::before { content: ""; position: absolute; left: 50%; top: -.45rem; width: 1px; height: .3rem; background: var(--border); }
.boost-scale span.is-normal { color: var(--success); font-weight: 600; }
.boost-scale span.is-normal::before { background: var(--success); height: .45rem; top: -.55rem; }
.boost-table .boost-up { color: #ffb648; }

/* Orbitalstation → 🔧 Reparatur (Sandro 2026-10-16, sql/150) */
.repair-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.repair-head .cost-box { margin: 0; }
.repair-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; }
.repair-list li.is-running { border-left: 3px solid var(--success); padding-left: .4rem; }
.repair-list small { display: block; }
.crew-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: .6rem; }   /* Orbitalstation → Bemannen */
.crew-list li.is-unmanned { border-left: 3px solid var(--danger); padding-left: .4rem; }
.crew-list small { display: block; }
.crew-list form { grid-column: 2; }   /* Menge + Bemannen + Max unter dem Namen */
.crew-list .crew-meter { display: block; max-width: 140px; margin-top: .2rem; }
.crew-list .crew-meter > span { background: var(--faction); }

/* Modulfertigung: oben zweispaltig – links Modul-Depot, rechts Aufträge (Sandro 2026-10-16) */
.modules-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; margin-bottom: 1.2rem; }
.modules-top > .panel { margin: 0; }
.modules-top-single { grid-template-columns: 1fr; }
.module-depot-fold { margin-top: 1.2rem; }
.module-depot-fold > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
.module-depot-fold > .panel { margin-top: .5rem; }
/* Modulfertigung: Schiffsbauplan wählen (Sandro 2026-10-16) */
.bp-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1rem; padding: .7rem .9rem; margin-bottom: .9rem;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); }
.bp-filter .field { margin: 0; }
.bp-filter .bp-count input { width: 5rem; }
.bp-filter [data-bp-info] { flex-basis: 100%; margin: 0; }
.module-level-row.bp-hide { display: none; }
.module-tabs[hidden], .module-factory[hidden], .module-level-group[hidden] { display: none; }
/* Depot-Bestand je Modulzeile (Sandro 2026-10-16): mit Bauplan „da / gebraucht“ */
.ship-row-depot { font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 4.5rem; }
.ship-row-depot.is-zero b { color: var(--danger); }   /* nichts im Depot */
.station-box { margin-top: .8rem; } .station-build { display: grid; gap: .4rem; } .station-build select { max-width: 100%; }
.hud-act img.is-flip { transform: scaleX(-1); }   /* Andocken = gespiegeltes Abdock-Icon */
/* Raumstationen auf den Karten (Sandro 2026-10-16, sql/154) */
.stile img.stile-station { inset: auto 0 0 auto !important; width: 55% !important; height: 55% !important; z-index: 2;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .95)); }
.stile.kind-station img.stile-station { inset: 10% !important; width: 80% !important; height: 80% !important; }
.gtile-orbit-st { position: absolute; left: 2px; bottom: 1px; z-index: 3; font-size: .62rem; line-height: 1; color: #fff;
    text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.station-place { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; } .station-place > span { flex-basis: 100%; }
[data-place-pane][hidden] { display: none; }
.station-place label.check { display: inline-flex; align-items: center; gap: .4rem; width: auto; white-space: nowrap; }
.construct-meter { margin: .3rem 0 0; } .construct-meter > div { background: linear-gradient(90deg, #f0b84a, #ffd27a); }
.construct-line { display: grid; gap: .15rem; margin: .2rem 0 0; } .construct-line .construct-meter { margin: 0; height: 5px; }
.station-box .construct-meter { display: block; width: 100%; height: 8px; flex-basis: 100%; }
.torp-fill { display: flex; align-items: center; gap: .35rem; } .torp-fill .count-input { width: 4.5rem; }
/* ⚓ Andockkontrolle in der Stationsansicht (Sandro 2026-10-16) */
.dock-control .hud-title + .dock-slots { margin-top: .2rem; }
.dock-slots { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.dock-slot { display: grid; grid-template-columns: 1.6rem 36px minmax(0, 1fr) auto; align-items: center; gap: .55rem;
    padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); }
.dock-slot.is-free { grid-template-columns: 1.6rem 1fr; border-style: dashed; opacity: .7; }
.dock-no { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700;
    background: var(--surface-hi); color: var(--muted); }
.dock-name { min-width: 0; display: grid; } .dock-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-state { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }
.dock-free-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .35rem .5rem; border: 1px dashed var(--border); border-radius: 10px; }
.dock-policy { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; padding-top: .5rem; border-top: 1px solid var(--border); }
.dock-policy > span { flex-basis: 100%; }
.btn.is-off { opacity: .45; cursor: not-allowed; }
/* Flottenliste: Umbenennen direkt in der Zeile statt als schwebende Box (Sandro 2026-10-16) */
.ship-name-row .ship-rename[open] { display: inline-flex; align-items: center; gap: .3rem; }
.ship-name-row .ship-rename form { position: static; padding: 0; border: 0; background: none; box-shadow: none; display: inline-flex; gap: .3rem; margin: 0; }
.ship-name-row .ship-rename input[type=text] { width: 11rem; padding: .25rem .5rem; }
.ship-name-row .ship-rename .btn { padding: .25rem .6rem; }
.ship-name-row:has(.ship-rename[open]) > .ship-name { display: none; }   /* Name wird zum Eingabefeld */
/* Kolonie „Im Orbit“: Beamer in der Karte (Sandro 2026-10-16) */
.orbit-beam { display: grid; gap: .5rem; padding: .5rem .6rem .7rem; border-top: 1px solid var(--border); }
.orbit-beam[hidden] { display: none; }
/* Beamer der Orbit-Karte wie in der Schiffsansicht (Sandro 2026-10-25): erst ⬆/⬇, dann Kacheln; Zeilen schmaler fürs enge Feld */
.orbit-beam-dirs { display: flex; align-items: center; gap: .4rem; }
.orbit-beam-dirs .muted { margin-left: auto; }
.orbit-beamer { display: grid; gap: .45rem; }
.orbit-beamer .beam-row { grid-template-columns: 22px minmax(0, 1fr) 4.6rem auto auto; gap: .35rem; font-size: .85rem; }
.orbit-beamer .beam-row small { display: none; }   /* „höchstens …“ – trägt „Max“ ein */
.orbit-beamer .beam-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orbit-act[aria-expanded=true] { border-color: var(--primary); }
.orbit-beam { padding-right: .8rem; }
/* Übersicht: rechts im Kopf Rang + Konto untereinander (Sandro 2026-10-16) */
.ov-hero-side { display: grid; gap: .7rem; align-self: center; min-width: 210px; }
.ov-hero-side .ov-hero-rank { min-width: 0; }
.ov-hero-wallet { text-decoration: none; color: inherit; }
.ov-wallet-list { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .25rem; }
.ov-wallet-list > span { display: inline-flex; align-items: center; gap: .3rem; }
.ov-wallet-list img { width: 20px; height: 20px; }
.ov-wallet-list strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* Bankkonto (Sandro 2026-10-16, sql/158) */
.account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.account-card { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: start; margin: 0; }
.account-card h2 { margin: .1rem 0; }
.account-balance { margin: .2rem 0; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--faction); }
.account-card.is-global .account-balance { color: #f0c860; }
/* Handel (Sandro 2026-10-16, sql/159) */
.trade-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; }
.trade-side { display: grid; gap: 1.2rem; }
.trade-side .panel, .trade-layout > .panel { margin: 0; }
.trade-wallet { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.trade-wallet > span { display: inline-flex; align-items: center; gap: .35rem; }
.trade-wallet img { width: 26px; height: 26px; }
.trade-wallet strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.trade-table td { vertical-align: middle; }
.trade-form { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.trade-form .count-input { width: 5.5rem; }
.trade-stations li { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.trade-log li { padding: .15rem 0; }
/* Admin → Module → Zusatzmodule (Sandro 2026-10-17): kompakte Karten, Bearbeiten klappt auf */
.extra-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; align-items: start; }
.extra-mod-card { display: grid; gap: .45rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px; }
.extra-mod-head { display: flex; gap: .6rem; align-items: center; }
.extra-mod-head > div { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.extra-mod-head .tag { justify-self: start; }
.extra-mod-facts { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: 0; }
.extra-mod-facts dt { color: var(--muted); }
.extra-mod-facts dd { margin: 0; }
.extra-mod-edit > summary { list-style: none; width: fit-content; }
.extra-mod-edit > summary::-webkit-details-marker { display: none; }
.extra-mod-edit[open] > summary { display: none; }
.extra-mod-edit form { display: grid; gap: .5rem; }
.extra-mod-edit .btn { justify-self: start; }
.extra-slot-table input[type="number"] { width: 5em; }

/* Auftanken: Treibstoff wählen (Sandro 2026-10-17, fuel_choice_html) – im Kolonie-Orbit und unter den Schiffsaktionen */
.fuel-pick-wrap[hidden] { display: none; }
.beam-pane.fuel-pick-wrap .fuel-pick { max-width: 34rem; }   /* Tanker → Schiff in den Nahbereichssensoren (Sandro 2026-10-25) */
.orbit-fuel { padding: .5rem .8rem .7rem .6rem; border-top: 1px solid var(--border); }
.fuel-pick { display: grid; gap: .3rem; }
.fuel-pick-head { margin: 0 0 .15rem; }
.fuel-pick-row { display: grid; grid-template-columns: 22px minmax(5rem, 1fr) auto minmax(3rem, auto) auto; align-items: center; gap: .4rem; font-size: .85rem; }
.fuel-pick-amt { display: flex; gap: .25rem; align-items: center; }
.fuel-pick-row .fuel-pick-amt .btn-xs { padding: .15rem .4rem; }   /* Menge + Max (Sandro 2026-10-25) */
.fuel-pick-amt input { width: 3.6rem; padding: .2rem .4rem; border-radius: 6px; font: inherit; font-size: .82rem; color: var(--text);
                       background: rgba(5, 8, 18, .75); border: 1px solid var(--border); color-scheme: dark; }
.fuel-pick-amt input:disabled, .fuel-pick-amt .btn:disabled { opacity: .4; }
.fuel-pick-name { display: grid; line-height: 1.2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fuel-pick-name small { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fuel-pick-gain { text-align: right; white-space: nowrap; display: grid; line-height: 1.2; }
.fuel-pick-row img { width: 20px; height: 20px; }
.fuel-pick-row .btn-xs { padding: .15rem .55rem; }
.fuel-pick-row .is-off { opacity: .45; cursor: not-allowed; }
.hud-acts + .fuel-pick-wrap, .fuel-pick-wrap:not(.orbit-fuel) { margin-top: .5rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .02); }

/* Orbit-Beamer: Senden als Pfeil-Icon neben „Alles“ (Sandro 2026-10-17) */

/* Schiffe im Handel (Sandro 2026-10-17, sql/177) */
.trade-ships { display: grid; gap: .6rem; }
.trade-ship { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .7rem .9rem;
              border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.trade-ship h3 { margin: 0 0 .15rem; font-size: 1rem; }
.trade-ship h3 small { font-weight: 400; font-size: .78rem; }
.trade-ship p { margin: 0 0 .35rem; }
.trade-ship-stats { display: flex; flex-wrap: wrap; gap: .15rem 1rem; margin: 0; font-size: .82rem; }
.trade-ship-stats dt { color: var(--muted, #8a93a8); }
.trade-ship-stats dt::after { content: ':'; }
.trade-ship-stats dd { margin: 0 0 0 -.7rem; }
.trade-ship-buy { display: grid; justify-items: end; gap: .4rem; text-align: right; }
.trade-ship-buy strong { font-size: 1.1rem; white-space: nowrap; }
.trade-ships-title { margin: 1.4rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--border); }

.trade-table tr.is-locked td.icon img { opacity: .45; filter: grayscale(.6); }
.trade-table tr.is-locked td:nth-child(2) { color: var(--muted, #8a93a8); }

/* Admin Gebäude → Baubarkeit: Völker (Sandro 2026-10-17, sql/178) */
.bfac-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 .8rem; }
.bfac-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 999px;
             font-size: .85rem; cursor: pointer; background: rgba(255, 255, 255, .02); }
.bfac-chip img { width: 18px; height: 18px; }
.bfac-chip input { margin: 0; }
.bfac-chip:has(input:checked) { border-color: var(--faction, #6aa8ff); background: color-mix(in srgb, var(--faction, #6aa8ff) 16%, transparent); }

/* Admin: freies Bauen (Sandro 2026-10-18) */
.free-build-note { margin: .6rem 0 0; padding: .4rem .7rem; font-size: .85rem; border: 1px solid rgba(245, 185, 74, .5); border-radius: 8px;
    color: #ffd98a; background: rgba(245, 185, 74, .1); }

/* Admin → 📈 Serverlast (Sandro 2026-10-18): Farben aus der geprüften Reihe (dataviz, dunkel, gegen #141b30 validiert) */
:root { --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-5: #d55181; --viz-6: #9085e9;
        --viz-grid: #2c3350; --viz-base: #4a5272; --viz-ink: #8f9abb; }
.viz-c1 { fill: var(--viz-1); background: var(--viz-1); } .viz-c2 { fill: var(--viz-2); background: var(--viz-2); }
.viz-c3 { fill: var(--viz-3); background: var(--viz-3); } .viz-c4 { fill: var(--viz-4); background: var(--viz-4); }
.viz-c5 { fill: var(--viz-5); background: var(--viz-5); } .viz-c6 { fill: var(--viz-6); background: var(--viz-6); }
.viz-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr); gap: 1.2rem; margin-bottom: 1.2rem; align-items: start; }
.viz-row .panel { margin: 0; }
.viz-wrap { position: relative; }
.viz-bars, .viz-pie { display: block; width: 100%; height: auto; }
.viz-pie { max-width: 260px; margin: .4rem auto .8rem; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-grid.is-base { stroke: var(--viz-base); }
.viz-tick { fill: var(--viz-ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-step { fill: var(--text); font-size: 11px; font-weight: 600; }
.viz-seg:hover, .viz-slice:hover { opacity: .8; }
.viz-slice { stroke: var(--bg-soft); stroke-width: 2; }
.viz-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .2rem 0 .6rem; font-size: .8rem; color: var(--muted); }
.viz-legend i, .viz-shares i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.viz-shares { margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.viz-shares li { display: grid; grid-template-columns: auto 1fr auto auto; gap: .5rem; align-items: center; padding: .15rem 0; }
.viz-shares b { font-variant-numeric: tabular-nums; }
.viz-shares small { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.viz-tip { position: absolute; z-index: 5; padding: .3rem .55rem; font-size: .78rem; white-space: nowrap; pointer-events: none;
    color: var(--text); border: 1px solid var(--border); border-radius: 6px; background: #0d1222; box-shadow: var(--shadow); }
.viz-table { margin-top: .5rem; font-size: .8rem; }
.code-box { margin: .4rem 0; padding: .6rem .8rem; font-size: .82rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 8, 18, .5); overflow-x: auto; }
.sim-control { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; }
.sim-state { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.sim-badge { padding: .2rem .65rem; font-size: .82rem; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); }
.sim-badge.is-on { color: var(--success); border-color: color-mix(in srgb, var(--success) 60%, transparent); }
.sim-badge.is-paused { color: #ffd98a; border-color: rgba(245, 185, 74, .6); }
.sim-badge.is-warn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.sim-control .btn-row { margin: 0; }

:root { --viz-7: #008300; }   /* Klicks: Seitenaufrufe (geprüft mit den 6 anderen, dunkel) */
.viz-c7 { fill: var(--viz-7); background: var(--viz-7); }
.sim-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: .4rem 0 1rem; }
.sim-tile { padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 8, 18, .35); }
.sim-tile b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.sim-tile span { font-size: .78rem; color: var(--muted); }
.tile-unknown { display: grid; place-items: center; background: #2a221c; color: var(--muted); font-weight: 800; }   /* Freilegen: Ziel noch unbekannt (Sandro 2026-10-24) */
.bedit-acts form { margin-top: .3rem; }   /* ⧉ Duplizieren unter „Bearbeiten“ (Sandro 2026-10-25) */

/* Kolonie → Sternsystem (Sandro 2026-10-25): links Systemname + Feld über dem Scan, rechts kompakte Liste der Planeten/Monde –
   Bild, Position, frei/Besitzer; der Name steht im Tooltip. Ohne zusätzliche Abfrage */
.cov-sys { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.cov-sys .scan { width: 100%; max-width: 190px; margin: 0; }
.cov-sys-name { display: flex; align-items: baseline; justify-content: center; gap: .4rem; color: var(--text); margin-bottom: .35rem; }
.cov-sys-info { padding-top: 1.6rem; }
.cov-bodies { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: .85rem; }
.cov-bodies li { display: grid; grid-template-columns: 1.8rem 3.2rem minmax(0, 1fr); align-items: center; gap: .4rem; }
.cov-bodies li > a { display: flex; align-items: center; justify-content: center; }
.cov-bodies img { width: 20px; height: 20px; image-rendering: pixelated; }
.cov-bodies li.is-moon img { width: 13px; height: 13px; }
.cov-bodies li.is-moon b { font-size: .78rem; }
.cov-bodies b { color: #6fb6ff; font-variant-numeric: tabular-nums; }
.cov-bodies li > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
@media (max-width: 1200px) { .cov-sys { grid-template-columns: 1fr; } .cov-sys-info { padding-top: 0; } }
/* Selbstzerstörung unter den Alarmstufen (Sandro 2026-10-25) – wie Kolonie aufgeben: Warnung, Code, endgültig */
.destruct-box { margin-top: .5rem; }
.destruct-box > summary { list-style: none; --c: #ff5a2a; opacity: .5; border-style: dashed; }
.destruct-box > summary::-webkit-details-marker { display: none; }
.destruct-box[open] > summary { opacity: 1; color: var(--c); border-color: var(--c); border-style: solid; }
.destruct-icon { width: 26px; text-align: center; font-size: 1.05rem; }
.destruct-form { margin-top: .45rem; padding: .6rem; border: 1px solid rgba(255, 90, 42, .5); border-radius: 9px; background: rgba(255, 60, 40, .08); }
.destruct-form p { margin: 0 0 .45rem; }
.destruct-form .abandon-code code { font-size: 1rem; letter-spacing: .18em; }
.destruct-form .abandon-code input { width: 8em; }

/* Offiziersmesse (Sandro 2026-10-27): Kantine + Lazarett als Karten */
.mess-head { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.mess-sec + .mess-sec { margin-top: .9rem; }
.mess-sec h4 { margin: 0 0 .45rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mess-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .55rem; }
.mess-card { display: flex; gap: .7rem; align-items: center; padding: .6rem .7rem; border-radius: 12px;
             border: 1px solid color-mix(in srgb, #e879f9 35%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #e879f9 9%, transparent), transparent 70%); }
.mess-pic { position: relative; flex: none; }
.mess-pic img { width: 52px; height: 52px; display: block; border-radius: 10px; }
.mess-pic b { position: absolute; right: -6px; bottom: -6px; min-width: 22px; padding: 0 .3rem; border-radius: 999px; font-size: .68rem; line-height: 22px;
              text-align: center; color: #fff; background: #6d5cf6; box-shadow: 0 0 0 2px var(--panel, #10162a); }
.mess-info { display: grid; gap: .15rem; min-width: 0; }
.mess-info strong { font-size: 1rem; }
.mess-bonus { color: #e9b8ff; font-size: .74rem; }
.mess-meter { width: 100%; margin-top: .2rem; }
.mess-meter > span { background: linear-gradient(90deg, #f87171, #facc15, #4ade80); }
/* Personalakte (FHQ, sql/217): Name direkt in der Karte umbenennen; Zusatzcrew: Person wählen */
.crew-rename { display: flex; gap: .3rem; align-items: center; }
.crew-rename input[type=text] { min-width: 0; width: 100%; padding: .2rem .45rem; font-weight: 700; font-size: .95rem; color: var(--text);
                                background: rgba(5, 8, 18, .3); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 6px; }
.crew-rename input[type=text]:hover, .crew-rename input[type=text]:focus { border-color: color-mix(in srgb, #e879f9 55%, var(--border)); background: rgba(5, 8, 18, .55); outline: none; }
.crew-rename .btn { flex: none; }
.crew-pick { display: inline-flex; gap: .35rem; align-items: center; }
.crew-pick select { max-width: 16rem; }
.season-pick { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0 .6rem; }