/* Trades of Space – Oberfläche im Stil eines Mobile-Strategiespiels: kräftige Panels, dicke Buttons, klare Icons.
   Farben zentral über Variablen; Themen (Unterstützer) überschreiben nur Akzente. */
:root {
    --bg: #0b1020; --bg2: #121a33; --panel: #1b2443; --panel2: #232e55; --line: #34427a; --line-light: #4b5c9e;
    --text: #eef2ff; --muted: #9aa6cc; --accent: #f5b942; --accent-dark: #c98a16; --accent-text: #2a1c00;
    --ok: #4ade80; --ok-dark: #15803d; --err: #ff6b6b; --err-dark: #b91c1c; --info: #60a5fa; --info-dark: #1d4ed8;
    --earth: #3d8bff; --mars: #ff6a3d; --belt: #5fd6c4;
    --radius: 14px; --shadow: 0 6px 0 rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.35);
    --hud-h: 64px; --nav-h: 68px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="ember"] { --accent: #ff7a3d; --accent-dark: #b9431a; --panel: #2a1d2b; --panel2: #3a2538; --line: #6b3a52; --bg: #140d16; --bg2: #22141f; }
:root[data-theme="nebula"] { --accent: #c084fc; --accent-dark: #7e22ce; --accent-text: #1a0530; --panel: #221a44; --panel2: #2d2360; --line: #4c3f8f; --bg: #0d0a1f; --bg2: #171233; }
:root[data-theme="jade"] { --accent: #5eead4; --accent-dark: #0f766e; --accent-text: #032a26; --panel: #142e2d; --panel2: #1b3d3b; --line: #2f6b66; --bg: #07161a; --bg2: #0d2327; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body { background: radial-gradient(ellipse at top, var(--bg2), var(--bg) 60%); color: var(--text); line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .4em; font-weight: 900; letter-spacing: .01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: .3em 0 .8em; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.right { margin-left: auto; } .center { text-align: center; } .hidden, [hidden] { display: none !important; }
code { background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 6px; font-size: .9em; word-break: break-all; }

/* Sternenhimmel */
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
    background-image: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 40% 80%, #cfd8ff 50%, transparent 51%), radial-gradient(1px 1px at 85% 20%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 10% 70%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 55% 15%, #ffe9b0 50%, transparent 51%),
        radial-gradient(1px 1px at 92% 85%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 50%, #fff 50%, transparent 51%);
    background-size: 420px 420px, 380px 380px, 520px 520px, 300px 300px, 460px 460px, 600px 600px, 340px 340px, 500px 500px; }

/* Panels & Buttons */
.panel { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 3px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,.08); padding: 14px; }
.panel + .panel { margin-top: 14px; }
.panel-title { display: flex; align-items: center; gap: 10px; margin: -14px -14px 12px; padding: 10px 14px; background: rgba(0,0,0,.25); border-bottom: 2px solid var(--line); border-radius: 11px 11px 0 0; font-weight: 900; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 16px; border-radius: 12px; border: 2px solid rgba(0,0,0,.35);
    background: linear-gradient(180deg, #4e5f9c, #334279); color: #fff; font-weight: 800; letter-spacing: .01em; cursor: pointer; text-decoration: none; text-shadow: 0 1px 0 rgba(0,0,0,.4);
    box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.18); transition: transform .06s, box-shadow .06s, filter .15s; user-select: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.18); }
.btn:disabled, .btn.disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(180deg, #ffd56a, var(--accent) 45%, var(--accent-dark)); color: var(--accent-text); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn-ok { background: linear-gradient(180deg, #7cf0a4, var(--ok) 45%, var(--ok-dark)); color: #04200f; text-shadow: none; }
.btn-danger { background: linear-gradient(180deg, #ff9a9a, var(--err) 45%, var(--err-dark)); }
.btn-info { background: linear-gradient(180deg, #93c5fd, var(--info) 45%, var(--info-dark)); }
.btn-ghost { background: rgba(255,255,255,.06); border-color: var(--line); box-shadow: none; }
.btn-sm { min-height: 34px; padding: 4px 12px; font-size: .9rem; border-radius: 10px; }
.btn-block { width: 100%; }
.btn img { width: 20px; height: 20px; }
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ""; position: absolute; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form label { display: block; margin: 0 0 10px; font-weight: 700; font-size: .9rem; }
.form input, .form select, .form textarea, .input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: rgba(0,0,0,.35); color: var(--text); outline: none; }
.form input:focus, .form select:focus, .form textarea:focus, .input:focus { border-color: var(--accent); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.form .check input { width: auto; margin: 3px 0 0; }
.form textarea { min-height: 90px; resize: vertical; }
.notice { padding: 10px 12px; border-radius: 10px; background: rgba(96,165,250,.15); border: 2px solid rgba(96,165,250,.5); margin: 10px 0; }
.notice.ok { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.5); } .notice.err { background: rgba(255,107,107,.15); border-color: rgba(255,107,107,.5); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: rgba(0,0,0,.35); border: 1px solid var(--line-light); vertical-align: middle; }
.tag.earth { color: var(--earth); border-color: var(--earth); } .tag.mars { color: var(--mars); border-color: var(--mars); } .tag.belt { color: var(--belt); border-color: var(--belt); }
.badge-sup { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-left: 4px; }
.bar { height: 10px; border-radius: 6px; background: rgba(0,0,0,.45); overflow: hidden; border: 1px solid rgba(0,0,0,.5); }
.bar > i { display: block; height: 100%; background: linear-gradient(180deg, #ffe08a, var(--accent)); width: 0; transition: width .4s; }
.bar.ok > i { background: linear-gradient(180deg, #a7f3d0, var(--ok)); } .bar.warn > i { background: linear-gradient(180deg, #fecaca, var(--err)); }
.gi { width: 22px; height: 22px; vertical-align: middle; margin-right: 4px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 8px 6px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.table th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.click { cursor: pointer; } .table tr.click:hover td { background: rgba(255,255,255,.04); }
.table tr.me td { background: rgba(245,185,66,.12); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tab { padding: 8px 14px; border-radius: 10px; border: 2px solid var(--line); background: rgba(0,0,0,.3); color: var(--muted); font-weight: 800; cursor: pointer; }
.tab.active { color: var(--text); border-color: var(--accent); background: rgba(245,185,66,.15); }
.tab-pane { display: none; } .tab-pane.active { display: block; }
.list { list-style: none; margin: 0; padding: 0; } .list li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.empty { color: var(--muted); text-align: center; padding: 24px 10px; }

/* Toasts & Modal */
.toasts { position: fixed; top: calc(var(--hud-h) + 8px); left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { padding: 10px 14px; border-radius: 12px; background: var(--panel2); border: 2px solid var(--line-light); box-shadow: var(--shadow); font-weight: 700; animation: pop .25s ease-out; }
.toast.ok { border-color: var(--ok); } .toast.err { border-color: var(--err); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-bg { position: fixed; inset: 0; background: rgba(5,8,20,.75); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 12px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: min(560px, 100%); max-height: 92vh; overflow: auto; animation: pop .2s ease-out; }
.modal .modal-body { margin-bottom: 12px; }
.modal .modal-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.modal-close { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 1.4rem; cursor: pointer; line-height: 1; }

/* HUD */
.in-game { padding-top: var(--hud-h); padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
.hud { position: fixed; top: 0; left: 0; right: 0; height: var(--hud-h); z-index: 500; display: flex; align-items: center; gap: 10px; padding: 0 10px;
    background: linear-gradient(180deg, #1c2650, #121a38); border-bottom: 3px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.hud-logo img { display: block; }
.hud-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hud-faction { width: 34px; height: 34px; }
.hud-name { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.hud-sub { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.hud-res { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.res { display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(0,0,0,.45); border: 2px solid var(--line); font-weight: 900; font-variant-numeric: tabular-nums; font-size: .95rem; position: relative; }
.res img { width: 22px; height: 22px; }
.res .bar { position: absolute; left: 8px; right: 8px; bottom: -3px; height: 5px; }
.res-energy { padding-bottom: 6px; }
.hud-bell { position: relative; background: none; border: 0; padding: 6px; cursor: pointer; }
.hud-bell img { width: 26px; height: 26px; display: block; }
.hud-bell b, .bottom-nav b { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--err); color: #fff; font-size: .7rem; line-height: 18px; text-align: center; padding: 0 4px; }
.view { max-width: 1100px; margin: 0 auto; padding: 12px; }
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); z-index: 500; display: flex;
    background: linear-gradient(180deg, #1c2650, #0f1630); border-top: 3px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.5); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 800; position: relative; }
.bottom-nav a img { width: 30px; height: 30px; filter: grayscale(.5) brightness(.8); transition: transform .1s; }
.bottom-nav a.active { color: var(--accent); } .bottom-nav a.active img { filter: none; transform: translateY(-2px) scale(1.1); }
.bottom-nav b { top: 6px; right: calc(50% - 26px); }

/* Station (isometrische Basis) */
.base-wrap { position: relative; overflow: hidden; margin: 0 -12px 10px; background: radial-gradient(ellipse at center, rgba(60,80,160,.35), transparent 70%); border-bottom: 3px solid var(--line); }
body[data-faction="earth"] .base-wrap { background: url(/assets/img/ui/bg-earth.svg) center bottom / cover no-repeat; }
body[data-faction="mars"] .base-wrap { background: url(/assets/img/ui/bg-mars.svg) center bottom / cover no-repeat; }
body[data-faction="belt"] .base-wrap { background: url(/assets/img/ui/bg-belt.svg) center bottom / cover no-repeat; }
body[data-faction="earth"] { --fc: var(--earth); --bg2: #121f44; } body[data-faction="mars"] { --fc: var(--mars); --bg2: #2a1620; } body[data-faction="belt"] { --fc: var(--belt); --bg2: #0f2a30; }
body[data-faction] .hud { border-bottom-color: var(--fc); } body[data-faction] .bottom-nav { border-top-color: var(--fc); } body[data-faction] .hud-faction { filter: drop-shadow(0 0 6px var(--fc)); }
.base { position: relative; transform-origin: top left; }
.slot { position: absolute; width: 200px; height: 100px; cursor: pointer; }
.slot .tile { position: absolute; inset: 0; background: url(/assets/img/ui/tile.svg) center/100% 100% no-repeat; opacity: .9; transition: filter .15s; }
.slot:hover .tile { filter: brightness(1.3); }
.slot.empty .tile { opacity: .45; }
.slot.empty .plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(245,185,66,.85); color: #2a1c00; font-weight: 900; font-size: 1.4rem; line-height: 34px; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.slot.locked .plus { background: rgba(120,130,170,.6); }
.slot .b { position: absolute; left: 50%; bottom: 12px; width: 160px; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.slot .lvl { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: #0b1020; border: 2px solid var(--line-light); font-size: .75rem; font-weight: 900; white-space: nowrap; }
.slot .bubble { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); padding: 4px 8px; border-radius: 12px; background: #fff; color: #1b2443; font-weight: 900; font-size: .85rem; display: flex; align-items: center; gap: 4px; box-shadow: 0 3px 0 rgba(0,0,0,.35); animation: bob 1.6s ease-in-out infinite; white-space: nowrap; }
.slot .bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.slot .bubble img { width: 18px; height: 18px; margin: 0; }
.slot .bubble.full { background: #ffd2d2; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
.slot .timer { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); padding: 3px 8px; border-radius: 10px; background: rgba(11,16,32,.9); border: 2px solid var(--info); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.slot .timer::before { content: "🔧 "; }
.station-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat { padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.3); border: 2px solid var(--line); }
.stat .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .stat .v { font-weight: 900; font-size: 1.05rem; }
.stat.warn { border-color: var(--err); }
.goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.good-card { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.3); border: 2px solid var(--line); }
.good-card img { width: 34px; height: 34px; } .good-card .n { font-size: .75rem; color: var(--muted); } .good-card .q { font-weight: 900; }
.good-card.zero { opacity: .55; }
.build-list { display: grid; gap: 8px; }
.build-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.3); border: 2px solid var(--line); }
.build-item img { width: 64px; height: 64px; } .build-item .d { font-size: .8rem; color: var(--muted); } .build-item .c { font-size: .85rem; }
.build-item.locked { opacity: .6; }
.cost { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cost img { width: 18px; height: 18px; } .cost.missing { color: var(--err); }
.bdetail { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.bdetail img.big { width: 120px; height: 120px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.bdetail .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .9rem; }
.bdetail .kv b { color: var(--muted); font-weight: 700; }

/* Markt */
.market-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.ftab { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; border: 2px solid var(--line); background: rgba(0,0,0,.3); color: var(--muted); font-weight: 900; cursor: pointer; }
.ftab img { width: 24px; height: 24px; } .ftab.active { color: var(--text); border-color: currentColor; }
.ftab.earth.active { color: var(--earth); } .ftab.mars.active { color: var(--mars); } .ftab.belt.active { color: var(--belt); }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.book .side h3 { font-size: .85rem; text-transform: uppercase; color: var(--muted); }
.book ul { list-style: none; margin: 0; padding: 0; } .book li { display: flex; justify-content: space-between; padding: 4px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; font-weight: 700; }
.book .bids li { background: rgba(74,222,128,.12); } .book .asks li { background: rgba(255,107,107,.12); }
.order-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.order-form .full { grid-column: 1 / -1; }
.seg { display: inline-flex; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); }
.seg button { padding: 8px 14px; border: 0; background: rgba(0,0,0,.3); color: var(--muted); font-weight: 900; cursor: pointer; }
.seg button.active.buy { background: var(--ok-dark); color: #fff; } .seg button.active.sell { background: var(--err-dark); color: #fff; }
.trades li { display: flex; justify-content: space-between; font-size: .85rem; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }

/* Schiffe */
.ship-card { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; }
.ship-card img.ship { width: 90px; height: 90px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.ship-card .status { font-weight: 800; } .ship-card .status.transit { color: var(--err); }
.ship-card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cargo-list { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.cargo-list span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--line-light); font-size: .85rem; font-weight: 800; }
.cargo-list span img { width: 16px; height: 16px; }
.target { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.target .m { font-size: .8rem; color: var(--muted); }

/* Gilde / Mehr */
.member { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.post { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .post .meta { font-size: .78rem; color: var(--muted); } .post .body { white-space: pre-wrap; word-break: break-word; }
.mission { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.mission.done .t { color: var(--ok); } .mission .d { font-size: .85rem; color: var(--muted); }
.event { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .92rem; } .event .meta { font-size: .75rem; color: var(--muted); } .event.unread { border-left: 3px solid var(--accent); padding-left: 8px; }
.rank { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.rank .pos { font-weight: 900; color: var(--muted); } .rank.me { background: rgba(245,185,66,.1); border-radius: 8px; padding-left: 6px; }
.rank .worth { font-weight: 900; font-variant-numeric: tabular-nums; }
.fcard { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; }
.fcard img { width: 56px; height: 56px; }

/* Landing */
.landing-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; }
.landing-hero { text-align: center; margin-bottom: 20px; }
.landing-logo { width: min(420px, 90vw); height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
.landing-tagline { font-size: 1.1rem; color: var(--muted); font-weight: 600; }
.landing-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 860px) { .landing-grid { grid-template-columns: 1.1fr .9fr; } }
.landing-factions { display: grid; gap: 10px; }
.fpick { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: var(--radius); border: 3px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); cursor: pointer; text-align: left; color: var(--text); box-shadow: var(--shadow); transition: transform .1s, border-color .15s; }
.fpick:hover { transform: translateY(-2px); } .fpick.active { border-color: var(--f); box-shadow: 0 0 0 3px color-mix(in srgb, var(--f) 40%, transparent), var(--shadow); }
.fpick img { width: 72px; height: 72px; } .fpick h3 { margin: 0; color: var(--f); } .fpick p { margin: 2px 0 4px; font-size: .9rem; color: var(--muted); }
.fpick .bonus { display: flex; gap: 6px; flex-wrap: wrap; font-size: .8rem; }
.landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 28px; }
.feature { padding: 14px; border-radius: var(--radius); background: rgba(0,0,0,.3); border: 2px solid var(--line); }
.feature img { width: 48px; height: 48px; } .feature p { color: var(--muted); font-size: .9rem; margin: 0; }
.site-footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 24px 12px; }
.site-footer a { color: var(--muted); }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 12px; } .auth-tabs .tab { flex: 1; text-align: center; }

/* Seiten (Rechtstexte, Support, Admin) */
.page { padding: 0 0 20px; }
.page-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; max-width: 1000px; margin: 0 auto; }
.page-logo { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 900; font-size: 1.1rem; }
.page-nav { margin-left: auto; display: flex; gap: 8px; }
.page-main { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.legal { background: var(--panel); border: 3px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.legal h2 { margin-top: 1.4em; font-size: 1.1rem; } .legal h3 { margin-top: 1em; } .legal p, .legal li { color: #d7ddf5; font-size: .95rem; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.price-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: var(--radius); border: 3px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); color: var(--text); cursor: pointer; box-shadow: var(--shadow); }
.price-card:hover { border-color: var(--accent); } .price-card .months { font-weight: 900; } .price-card .price { font-size: 1.3rem; font-weight: 900; color: var(--accent); }
.price-card.busy { opacity: .6; }
.admin .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.admin .table { font-size: .85rem; } .admin .table td, .admin .table th { white-space: normal; }
.admin .form label { max-width: 420px; }

@media (max-width: 600px) {
    .hud-name-wrap { display: none; } .hud-player { gap: 0; } .hud-res { gap: 5px; } .res { font-size: .8rem; padding: 3px 7px 3px 4px; gap: 3px; } .res img { width: 18px; height: 18px; } .hud { gap: 6px; padding: 0 6px; }
    .res-storage { display: none; }
    .book { grid-template-columns: 1fr; } .order-form { grid-template-columns: 1fr; } .bdetail { grid-template-columns: 90px 1fr; } .bdetail img.big { width: 90px; height: 90px; }
    .ship-card { grid-template-columns: 70px 1fr; } .ship-card img.ship { width: 70px; height: 70px; }
}