/*! Voidar · © 2026 Jürgen Garske · Alle Rechte vorbehalten. */ /* Leitstand, Seiten (Stufe 2): Übersicht, Gebäude, Flotte, Galaxie, Anmeldung. */ /* ---------- Übersicht ---------- */ .radar-alert { border: 1px solid var(--danger-line); border-left: 4px solid var(--danger); background: linear-gradient(90deg, rgba(255,95,87,.16), rgba(255,95,87,.05)); border-radius: var(--rad-lg); padding: 14px 18px; margin-bottom: var(--gap); } .radar-alert__head { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #ffc4c0; letter-spacing: .02em; margin-bottom: 8px; } .radar-alert__icon { font-size: 1.3rem; animation: puls 1.6s ease-in-out infinite; } @keyframes puls { 50% { opacity: .35; } } .radar-alert__threat { padding: 10px 12px; background: rgba(0,0,0,.25); border-radius: var(--rad); cursor: pointer; } .radar-alert__threat + .radar-alert__threat { margin-top: 8px; } .radar-alert__threat:hover { background: rgba(0,0,0,.4); } .radar-alert__row { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; } .radar-alert__label { font-weight: 600; } .radar-alert__countdown { color: #ffc4c0; } .radar-alert__countdown .job-countdown { font-weight: 700; color: #fff; font-size: 1.05rem; } .radar-alert__details { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .radar-alert__detail { font-size: .82rem; padding: 2px 8px; border-radius: 3px; background: rgba(255,95,87,.14); color: #ffd6d3; } .flights { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); margin-bottom: var(--gap); } .flights.solo { grid-template-columns: 1fr; } .mq-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--text); } a.mq-header:hover { color: var(--text); } .mq-icon { font-size: 1.05rem; } .mq-img { width: 20px; height: 20px; display: block; } .mq-title { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--text-2); flex: 1; } .mq-slots { font-size: .82rem; color: var(--text-2); padding: 1px 8px; border-radius: 3px; background: var(--panel-3); } .mq-arrow { color: var(--amber); font-weight: 700; } a.mq-header:hover .mq-arrow { transform: translateX(2px); } .fleets-list { display: grid; gap: 8px; } .fleets-list.cols { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .fleet-item { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); padding: 10px 12px; display: grid; gap: 4px; cursor: pointer; } .fleet-item:hover { border-color: var(--line-strong); } .fleet-line-1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .fleet-mission { font-weight: 700; color: var(--amber-2); font-size: .92rem; } .fleet-mission.m-attack { color: #ff9b95; } .fleet-mission.m-spy { color: var(--ice); } .fleet-route { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; font-size: .9rem; } .fleet-arrow { color: var(--muted); } .fleet-target-coords, .fleet-target-owner { color: var(--muted); } .fleet-line-3 { color: var(--text-2); } .fleet-countdown { display: flex; justify-content: space-between; font-size: .88rem; color: var(--text-2); } .fleet-countdown .job-countdown { color: var(--text); font-weight: 600; } .mq-rest { font-size: .84rem; color: var(--muted); margin-top: 6px; } .ov-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: var(--gap); align-items: start; } .planet-hero { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; background: radial-gradient(circle at 22% 45%, rgba(108,196,255,.12), transparent 42%), radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1px 1px at 70% 12%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 88% 80%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 40% 88%, rgba(255,255,255,.35), transparent 60%), radial-gradient(1.5px 1.5px at 55% 30%, rgba(255,210,160,.5), transparent 60%), var(--panel); } .planet-visual { position: relative; width: 260px; height: 260px; margin: 0 auto; } .planet-visual::after { content: ""; position: absolute; left: -14px; right: -14px; top: 50%; height: 64px; margin-top: -32px; border: 1px solid rgba(255,154,60,.35); border-radius: 50%; transform: rotate(-14deg); pointer-events: none; } .planet-visual .planet-bild { position: relative; width: 240px; height: 240px; margin: 10px; } /* Leuchten um die Kugel. Früher filter: drop-shadow auf dem Bild; WebKit (jeder Browser auf dem iPhone) schnitt den Schatten am Bildrand ab, es entstand ein helles Viereck. Eigene, größere Ebene; Kugelrand liegt bei rund 100 % - 55 px. */ .planet-visual::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, rgba(108,196,255,.18) calc(100% - 70px), rgba(108,196,255,.09) calc(100% - 55px), rgba(108,196,255,.045) calc(100% - 43px), rgba(108,196,255,.02) calc(100% - 29px), rgba(108,196,255,0) calc(100% - 8px)); } .planet-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .planet-name { font-size: 2.1rem; font-weight: 700; letter-spacing: .01em; cursor: text; display: inline-flex; align-items: baseline; gap: 10px; } .planet-name-edit-hint { font-size: 1rem; color: var(--muted); } .planet-name:hover .planet-name-edit-hint { color: var(--amber); } .planet-name-row { display: flex; gap: 6px; max-width: 340px; } .planet-name-row:has(input:not([hidden])) { margin: 4px 0 8px; } .planet-name-dice { width: 44px; flex: none; background: var(--panel-3); border: 1px solid var(--line-strong); border-radius: var(--rad); cursor: pointer; font-size: 1.1rem; } .planet-name-error { color: var(--danger); font-size: .86rem; } .planet-coord { font-size: 1.1rem; color: var(--ice); font-weight: 500; } .planet-zone-tag { color: var(--text-2); margin: 4px 0 18px; } .zone-info-btn { background: none; border: 0; padding: 0; color: var(--amber-2); font-weight: 600; cursor: pointer; display: inline-flex; gap: 5px; align-items: baseline; } .zone-info-btn:hover { color: var(--amber); } .zone-info-glyph { font-size: max(var(--font-min), .85em); } .planet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; } .planet-stats .stat { background: rgba(10,11,14,.55); border: 1px solid var(--line); border-radius: var(--rad); padding: 10px 12px; } .planet-stats dt { font-size: max(var(--font-min), .7rem); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .planet-stats dd { margin: 0; font-size: 1rem; } .planet-stats dd strong { font-size: 1.12rem; } .planet-stats progress { margin-top: 8px; height: 4px; } .posscale { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; margin-top: 9px; } .posscale i { height: 6px; border-radius: 1px; background: var(--panel-3); display: block; } .posscale i.h { background: rgba(255,95,87,.35); } .posscale i.c { background: rgba(108,196,255,.35); } .posscale i.on { background: var(--amber); box-shadow: 0 0 8px var(--amber); } .queues { display: grid; gap: 12px; } .mini-queue { padding: 14px 16px; } .mini-queue.mq-empty .mq-body-empty { color: var(--muted); font-size: .9rem; padding: 6px 0 2px; } .mq-active-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; } .mq-level { color: var(--amber-2); font-weight: 500; } .mq-active-countdown, .mq-active-progress { color: var(--text-2); font-size: .9rem; margin: 2px 0 8px; } .mq-active-countdown .job-countdown { color: var(--text); font-weight: 600; } .mq-ship-icon img { width: 26px; height: 26px; border-radius: 3px; object-fit: cover; } .info-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--panel-3); border: 1px solid var(--line-strong); color: var(--ice); font-size: .8rem; font-weight: 700; cursor: pointer; padding: 0; min-height: 0; flex: none; } .info-icon:hover { border-color: var(--ice); } /* Untereinander über die volle Breite: nebeneinander rutschte der Abwehrschild an den Rand (Juergen 04.11.2026). */ .ov-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--gap); align-items: start; } .ov-actions { display: grid; gap: 8px; } .relocate-planet { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-lg); } .relocate-planet .muted { flex: 1; min-width: 200px; } .abandon-colony { border: 1px solid var(--line); border-radius: var(--rad-lg); background: var(--panel); } .abandon-colony-toggle { cursor: pointer; padding: 12px 16px; color: var(--text-2); font-weight: 500; list-style: none; } .abandon-colony-toggle::-webkit-details-marker { display: none; } .abandon-colony-toggle::before { content: "▸ "; color: var(--muted); } .abandon-colony[open] .abandon-colony-toggle::before { content: "▾ "; } .abandon-colony-body { padding: 0 16px 16px; display: grid; gap: 10px; } .abandon-colony-body form { display: grid; gap: 10px; max-width: 420px; } .abandon-colony-label { display: grid; gap: 6px; font-size: .9rem; color: var(--text-2); } .safemode-box__head, .loch-box__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .safemode-box__icon, .loch-box__icon { font-size: 1.3rem; } .safemode-box__title, .loch-box__title { font-weight: 700; font-size: 1.05rem; } .safemode-box { border-left: 4px solid var(--ice); } .safemode-box--out { border-left-color: var(--line-strong); } .safemode-box__thanks { color: var(--ice); } .safemode-box__btn { margin-top: 6px; } .loch-box { border-left: 4px solid #a06cff; background: linear-gradient(120deg, rgba(160,108,255,.12), transparent 60%), var(--panel); } .loch-box__balken { margin: 6px 0 12px; } .loch-box__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .coord-link { color: var(--ice); font-weight: 600; } .coord-link:hover { color: #bfe6ff; } .newbie-card-title, .defender-card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; } .newbie-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; } .newbie-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: .86rem; padding: 6px 10px 6px 0; vertical-align: top; width: 42%; } .newbie-table td { padding: 6px 0; } .newbie-active-pill { display: inline-flex; padding: 1px 8px; border-radius: 3px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: .84rem; } .newbie-card-hint { margin-top: 8px; } .newbie-break-form { margin-top: 10px; } .defender-card { border-left: 4px solid var(--ok); } .defender-card-warm { border-left-color: var(--warn); } .defender-card-hot { border-left-color: var(--danger); background: linear-gradient(120deg, rgba(255,95,87,.1), transparent 60%), var(--panel); } .defender-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .defender-stat { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); padding: 10px 12px; display: grid; } .defender-stat-label { font-size: max(var(--font-min), .7rem); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .defender-stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.2; } .defender-card-warm .defender-stat-value { color: var(--warn); } .defender-card-hot .defender-stat-value { color: var(--danger); } .defender-stat-hint { font-size: .82rem; color: var(--text-2); } .defender-attackers { margin-top: 12px; } .defender-attackers-title { font-size: max(var(--font-min), .72rem); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 6px; } .defender-attackers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .defender-attacker { display: flex; justify-content: space-between; padding: 6px 10px; background: var(--bg-raise); border-radius: var(--rad); } .defender-attacker-count { color: var(--warn); font-weight: 600; } .defender-card-hint { margin: 12px 0 0; color: var(--text-2); font-size: .9rem; } .profile-link { color: var(--text); font-weight: 600; } .profile-link:hover { color: var(--amber-2); } /* ---------- Gebäude ---------- */ .fields-meter { display: inline-flex; align-items: center; gap: 10px; } .fields-meter progress { width: 140px; } .fields-low-notice { border-left: 4px solid var(--warn); background: linear-gradient(90deg, var(--warn-soft), transparent 70%), var(--panel); } .fields-low-notice::before { border-color: var(--warn); } .fields-low-text { margin: 0; } .queue-card { margin-bottom: var(--gap); } .queue-balance { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; color: var(--text-2); font-size: .92rem; margin-bottom: 12px; } .qb-times { display: flex; gap: 8px; flex-wrap: wrap; } .qb-free, .qb-used { padding: 1px 8px; border-radius: 3px; background: var(--panel-3); } .qb-free { color: var(--ok); } .queue-timeline { margin-bottom: 14px; } .qt-track { position: relative; height: 34px; background: repeating-linear-gradient(90deg, var(--bg-raise) 0 calc(12.5% - 1px), var(--line) calc(12.5% - 1px) 12.5%); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; } .qt-seg { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: rgba(108,196,255,.22); border: 1px solid var(--ice-line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .qt-seg.qt-active { background: rgba(255,154,60,.3); border-color: var(--amber); } .qt-seg .qt-ico { font-size: .9rem; } .qt-ico .voidar-icon-bild { display: block; object-fit: contain; } .qt-scale { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-top: 4px; } .queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .queue-tile { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; } .queue-tile.qt-active { border-color: var(--amber-line); background: linear-gradient(180deg, var(--amber-soft), transparent 70%), var(--bg-raise); } .queue-tile progress { height: 4px; border-radius: 0; } .queue-tile progress::-webkit-progress-bar { border-radius: 0; } .qt-content { padding: 10px 12px; display: grid; gap: 4px; } .qt-head { display: flex; align-items: center; gap: 8px; } .qt-pos { font-size: .78rem; font-weight: 700; color: var(--muted); } .qt-head .info-icon { margin-left: auto; } .qt-name { font-size: .95rem; } .qt-lvl { color: var(--amber-2); white-space: nowrap; } /* Pfeil und Stufe nie getrennt */ .qt-time { color: var(--text-2); font-size: .88rem; } .qt-time .job-countdown { color: var(--text); font-weight: 600; } .qt-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .qt-actions form { display: inline-flex; gap: 4px; } .qi-arrow, .qi-finish { min-width: 32px; } .build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .build-card { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad-lg); display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "media head" "media body" "act act"; overflow: hidden; } .build-card:hover { border-color: var(--line-strong); } .build-card.is-ok { border-color: rgba(111,220,140,.28); } .bc-media { grid-area: media; position: relative; min-height: 132px; } .bc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bc-img-emoji { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; background: var(--panel-2); } .bc-level { position: absolute; left: 8px; top: 8px; min-width: 34px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(10,11,14,.82); border: 1px solid var(--line-strong); border-radius: 3px; font-weight: 700; font-size: 1.05rem; color: var(--text); } .bc-head { grid-area: head; padding: 10px 12px 0; display: flex; align-items: flex-start; gap: 8px; } .bc-name { background: none; border: 0; padding: 0; color: var(--text); font-weight: 600; font-size: 1rem; text-align: left; cursor: pointer; line-height: 1.25; } .bc-name:hover { color: var(--amber-2); } .bc-name::after { content: " ⓘ"; color: var(--muted); font-size: max(var(--font-min), .8em); } .bc-body { grid-area: body; padding: 6px 12px 10px; display: grid; gap: 6px; align-content: start; } .bc-next { display: flex; gap: 8px; align-items: baseline; font-size: .84rem; color: var(--text-2); } .bc-next-lvl { font-weight: 700; color: var(--amber-2); font-size: .95rem; } .bc-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .bc-open { display: inline-block; margin-top: 6px; font-size: .85rem; color: var(--accent); } .cost-block { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; } .cost-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 4px; border-radius: 3px; background: var(--panel-2); font-size: .86rem; font-weight: 500; } .cost-chip.cant-afford { background: var(--danger-soft); color: #ffaca6; } .cost-chip.cant-afford .res-icon { opacity: .8; } .bc-energy { display: inline-flex; align-items: center; gap: 3px; font-size: .86rem; color: var(--r-energy); padding: 1px 6px; border-radius: 3px; background: rgba(255,216,74,.08); } .bc-energy--gain { color: var(--ok); background: var(--ok-soft); } .bc-energy--deficit { color: #ffaca6; background: var(--danger-soft); } .bc-duration { font-size: .86rem; color: var(--text-2); } .bc-erforscht { color: var(--ok); font-weight: 600; padding-top: 4px; } .bc-actions { grid-area: act; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--panel); } .bc-act-form { display: inline-flex; gap: 6px; align-items: center; } .bc-act-form:first-child { flex: 1; } .bc-act { min-height: 34px; padding: 0 12px; border-radius: var(--rad); cursor: pointer; font-weight: 600; font-size: .86rem; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--panel-3); color: var(--text-2); } .bc-act-up { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); } .bc-act-up:hover { background: var(--amber-2); } .bc-act-up:disabled { background: var(--panel-3); border-color: var(--line); color: var(--muted); cursor: not-allowed; } .bc-act-down { background: transparent; color: #ff9b95; border-color: var(--danger-line); padding: 0 10px; } .bc-act-down:disabled { color: var(--muted); border-color: var(--line); cursor: not-allowed; opacity: .6; } .bc-why { flex: 1; font-size: .8rem; color: var(--muted); line-height: 1.25; } .bc-why.res { color: #ffaca6; } .bc-why.energy { color: var(--warn); } .bc-up-wrap { flex: 1; display: flex; gap: 6px; align-items: center; min-width: 0; } .bc-stufen { width: 62px !important; min-height: 34px !important; padding: 4px 6px !important; text-align: center; } /* ---------- Flotte ---------- */ .fleet-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap); align-items: start; } .fleet-aside { position: sticky; top: 88px; display: grid; gap: var(--gap); } .step { margin-bottom: var(--gap); } .step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 1.05rem; font-weight: 700; } .step-no { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-line); font-weight: 700; font-size: .9rem; } .step-h .muted { font-weight: 500; font-size: .86rem; } .ship-rows { display: grid; gap: 6px; margin-top: 10px; } .ship-row-head, .ship-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 90px 200px; gap: 12px; align-items: center; } .ship-row-head { padding: 0 10px; } .ship-row { padding: 6px 10px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); } .ship-row img { width: 44px; height: 30px; object-fit: cover; border-radius: 3px; } .ship-row .nm { font-weight: 600; } .ship-row .num { color: var(--text-2); } .ship-count-input { display: flex; gap: 6px; } .ship-count-input input { min-height: 34px; padding: 4px 8px; text-align: right; } .ship-row.has-val { border-color: var(--amber-line); background: linear-gradient(90deg, var(--amber-soft), transparent 60%), var(--bg-raise); } .quick-targets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; } .coord-input { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 460px; } .coord-input label { display: grid; gap: 4px; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .coord-input input { font-size: 1.1rem; font-weight: 600; text-align: center; } .target-type-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .target-type-label { color: var(--text-2); font-size: .9rem; margin-right: 4px; } .target-type-opt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--rad); cursor: pointer; background: var(--bg-raise); } .target-type-opt:has(input:checked) { border-color: var(--amber); background: var(--amber-soft); } .target-type-opt input { accent-color: var(--amber); } .mission-select { display: grid; gap: 8px; } .mission-select > label { color: var(--text-2); font-size: .9rem; } .mission-hint { padding: 10px 12px; background: var(--bg-raise); border-left: 3px solid var(--ice); border-radius: var(--rad); margin: 0; } .form-warnung { padding: 10px 12px; border-radius: var(--rad); background: var(--warn-soft); border-left: 3px solid var(--warn); color: #ffe7ad; margin: 0; } .hold-duration-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hold-duration-row select { width: auto; min-width: 160px; } .speed-slider { display: flex; align-items: center; gap: 16px; } .speed-slider input[type=range] { flex: 1; accent-color: var(--amber); height: 28px; } .speed-slider output { min-width: 64px; text-align: right; font-weight: 700; font-size: 1.2rem; color: var(--amber-2); } .speed-ticks { display: flex; justify-content: space-between; font-size: max(var(--font-min), .72rem); color: var(--muted); margin-top: 2px; padding-right: 80px; } .cargo-rows { display: grid; gap: 6px; margin-top: 10px; } .cargo-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 120px 220px; gap: 12px; align-items: center; padding: 8px 10px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); } .cargo-row .nm { font-weight: 600; } .cargo-row .num { color: var(--text-2); } .cargo-row .in { display: flex; gap: 6px; } .cargo-row input { min-height: 34px; padding: 4px 8px; text-align: right; } .fleet-preview { display: grid; gap: 10px; } .preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .preview-cell { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); padding: 8px 10px; } .preview-label { font-size: max(var(--font-min), .7rem); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.3; } .preview-value { font-weight: 700; font-size: 1.02rem; } .preview-bad { border-color: var(--danger-line); background: var(--danger-soft); } .preview-bad .preview-value { color: #ffaca6; } .preview-problems { margin: 0; padding: 10px 12px 10px 28px; background: var(--danger-soft); border-radius: var(--rad); color: #ffc9c5; font-size: .88rem; } .form-actions { display: flex; gap: 8px; flex-wrap: wrap; } .form-actions .btn-primary { flex: 1; min-height: 46px; font-size: 1rem; } .fleet-templates .ft-load-row, .ft-save-row { display: flex; gap: 6px; flex-wrap: wrap; } .fleet-aside .ft-save-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .ft-load-row { margin-bottom: 10px; } .ft-select { flex: 1; min-width: 140px; } .ft-del-form { display: inline-flex; } .ft-name { flex: 1; min-width: 160px; } .recall-list { display: grid; gap: 6px; } .recall-item { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); } .recall-info { display: grid; } .recall-mission { font-weight: 700; color: var(--amber-2); } /* ---------- Galaxie ---------- */ .galaxy-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; } .galaxy-nav-form { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; } .nav-group { display: grid; grid-template-columns: auto 64px auto; grid-template-rows: auto auto; gap: 4px 4px; align-items: center; } .nav-group .label { grid-column: 1 / 4; } .nav-group .btn { min-height: 40px; width: 40px; padding: 0; } .nav-group input { text-align: center; font-weight: 700; font-size: 1.05rem; padding: 6px 4px; } .my-planets-nav { position: relative; justify-self: end; } .gal-nav-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; } .my-planets-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 280px; padding: 6px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--rad-lg); box-shadow: 0 18px 40px rgba(0,0,0,.55); display: grid; gap: 2px; } .mp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rad); color: var(--text-2); } .mp-item:hover { background: var(--panel-3); color: var(--text); } .mp-current { background: var(--amber-soft); color: var(--text); } .mp-body { display: grid; flex: 1; } .mp-name { font-weight: 600; } .mp-coords { font-size: .8rem; color: var(--ice); } .mp-here { color: var(--amber); } .my-planets-count { color: var(--muted); } .g-erkundung .settings-help { color: var(--text-2); } .g-erk-balken { margin: 4px 0 12px; } .g-loch-eintrag { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); margin: 0; } .system-sun-banner { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--rad-lg); background: radial-gradient(circle at 0% 50%, rgba(255,170,60,.28), transparent 45%), var(--bg-raise); border: 1px solid var(--line); margin-bottom: 10px; } .system-sun-bild { width: 64px; height: 64px; filter: drop-shadow(0 0 18px rgba(255,170,60,.55)); } .system-sun-name { font-weight: 700; font-size: 1.1rem; letter-spacing: .04em; } .system-sun-zones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; } .zone-hot { color: #ff9b72; } .zone-livable { color: var(--ok); } .zone-cold { color: var(--ice); } .orbitband { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; margin-bottom: 14px; align-items: end; } .ob-slot { display: grid; justify-items: center; gap: 3px; padding: 6px 0 4px; border-radius: var(--rad); color: var(--muted); font-size: max(var(--font-min), .72rem); } .ob-slot:hover { background: var(--panel-2); color: var(--text); } .ob-dot { width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--line-strong); display: block; } .ob-slot img { width: 28px; height: 28px; } .ob-slot.own { color: var(--amber); } .ob-slot.own img { filter: drop-shadow(0 0 6px var(--amber)); } .ob-slot.ally { color: var(--ok); } .ob-slot.rand .ob-dot { border-style: solid; border-color: transparent; background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,255,255,.06) 3px 6px); } .ob-slot.loch .ob-dot { border: 0; background: radial-gradient(circle, #000 35%, #8b5cff 60%, transparent 72%); box-shadow: 0 0 10px rgba(139,92,255,.6); } .ob-slot.merchant .ob-dot { border: 1px solid var(--amber-line); background: var(--amber-soft); } .galaxy-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; } .galaxy-table th { text-align: left; font-size: max(var(--font-min), .7rem); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 4px 10px; } .galaxy-table td { padding: 8px 10px; background: var(--bg-raise); vertical-align: middle; } .galaxy-table tr td:first-child { border-radius: var(--rad) 0 0 var(--rad); } .galaxy-table tr td:last-child { border-radius: 0 var(--rad) var(--rad) 0; } .galaxy-table tr.g-own td { background: linear-gradient(90deg, rgba(255,154,60,.14), rgba(255,154,60,.03)); } .galaxy-table tr.g-own td:first-child { box-shadow: inset 3px 0 0 var(--amber); } .galaxy-table tr.g-merchant td { background: linear-gradient(90deg, rgba(255,209,102,.1), transparent); } .galaxy-table tr.g-empty td { background: rgba(20,23,29,.55); color: var(--muted); } .galaxy-table tr:target td { box-shadow: inset 0 0 0 1px var(--amber); } .g-col-pos { width: 56px; } .g-col-status { width: 120px; } .g-col-actions { width: 150px; } .g-pos { font-weight: 700; font-size: 1.05rem; color: var(--text-2); text-align: center; } .g-planet-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .g-icon { position: relative; display: inline-flex; flex: none; } .g-planet-bild { width: 36px; height: 36px; } .g-planet-unbewohnt { opacity: .45; filter: grayscale(.4); display: inline-block; vertical-align: middle; width: 30px; height: 30px; } .g-icon-moon { position: absolute; right: -8px; top: -4px; } .g-mond-bild { width: 16px; height: 16px; display: inline-block; vertical-align: middle; } .g-planet-name { font-weight: 600; } .g-rel-eigen { color: var(--amber) !important; } .g-rel-allianz { color: var(--ok) !important; } .g-heimat { font-size: max(var(--font-min), .85em); } .g-merk { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.05rem; padding: 0 2px; line-height: 1; } .g-merk:hover { color: var(--amber); } .g-merk.an { color: var(--amber); } .g-merk.mk-farm { color: #e9c46a; } .g-merk.mk-gefahr { color: var(--danger); } .g-merk.mk-freund { color: var(--ok); } .g-merk.mk-kolonie { color: var(--ice); } .g-merk.mk-sonst { color: #c79bff; } .g-debris-badge { font-size: .8rem; padding: 1px 6px; border-radius: 3px; background: rgba(201,209,220,.1); color: var(--r-void); white-space: nowrap; cursor: help; } .g-tag-group { display: inline-flex; gap: 4px; } .g-owner { white-space: nowrap; } .g-owner .profile-link { font-weight: 600; } .alliance-tag-link { color: var(--ice); font-size: .86rem; margin-left: 4px; } .g-owner-tutorial { color: var(--warn); } .g-st { margin-right: 4px; cursor: help; } .g-empty-cell { color: var(--muted); } .g-empty-cell .g-merk { margin-left: 4px; } .g-unbewohnbar { font-size: .86rem; margin-left: 6px; } .g-merchant-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .g-merchant-label .g-icon { font-size: 1.4rem; } .g-actions { text-align: right; } .g-action-menu { position: relative; display: inline-block; text-align: left; } .g-action-toggle { min-width: 118px; } .g-action-toggle[aria-expanded=true] { border-color: var(--amber); color: var(--text); } .g-action-dropdown { position: absolute; right: 0; top: calc(100% + 4px); z-index: 35; min-width: 240px; padding: 6px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--rad-lg); box-shadow: 0 18px 40px rgba(0,0,0,.6); display: grid; gap: 2px; } .g-action-dropdown a, .g-action-item, .g-action-disabled { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rad); color: var(--text-2); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; white-space: nowrap; } .g-action-dropdown a:hover, .g-action-item:hover { background: var(--panel-3); color: var(--text); } .g-action-attack { color: #ffaca6 !important; } .g-action-disabled { color: var(--muted); cursor: help; opacity: .75; } .g-action-ico { width: 20px; text-align: center; display: inline-flex; justify-content: center; } .g-action-bash-counter { color: var(--muted); font-size: max(var(--font-min), .86em); } .g-action-form { margin: 0; } .g-loch-hier { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding: 10px 12px; border-radius: var(--rad); background: linear-gradient(90deg, rgba(139,92,255,.18), transparent), var(--bg-raise); border: 1px solid rgba(139,92,255,.4); } .g-anker-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; } .g-legende { margin-top: 14px; display: grid; gap: 6px; font-size: .84rem; color: var(--text-2); } .g-leg-zeile { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; } .g-leg-titel { color: var(--muted); font-size: max(var(--font-min), .7rem); letter-spacing: .12em; text-transform: uppercase; } .spion-meldung { position: absolute; right: 0; top: calc(100% + 4px); z-index: 36; min-width: 240px; padding: 8px 12px; border-radius: var(--rad); background: var(--ok-soft); border: 1px solid rgba(111,220,140,.4); color: var(--ok); font-size: .86rem; } .mk-feld { position: absolute; z-index: 70; width: 300px; padding: 12px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--rad-lg); box-shadow: 0 18px 40px rgba(0,0,0,.6); display: grid; gap: 10px; } .mk-kopf { font-size: .9rem; font-weight: 600; } .mk-farben { display: flex; flex-wrap: wrap; gap: 4px; } .kt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 3px; border: 1px solid var(--line-strong); background: var(--bg-raise); cursor: pointer; font-size: .8rem; color: var(--text-2); } .kt-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .kt-chip.mk-farm i { background: #e9c46a; } .kt-chip.mk-gefahr i { background: var(--danger); } .kt-chip.mk-freund i { background: var(--ok); } .kt-chip.mk-kolonie i { background: var(--ice); } .kt-chip.mk-sonst i { background: #c79bff; } .kt-chip.an { border-color: var(--amber); color: var(--text); } .mk-notiz { min-height: 70px; resize: vertical; } .mk-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .mk-fuss small { color: var(--muted); } .mk-fuss span { display: flex; gap: 6px; } .mk-fehler { color: var(--danger); margin: 0; } /* ---------- Anmeldung ---------- */ body.auth { min-height: 100vh; } .authpage { position: relative; min-height: 100vh; overflow: hidden; } .auth-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .auth-bg .stars, .auth-bg .stars2 { position: absolute; inset: 0; } .auth-bg .stars { background: radial-gradient(1px 1px at 8% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 23% 64%, #fff, transparent 60%), radial-gradient(1px 1px at 37% 28%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1px 1px at 52% 82%, #fff, transparent 60%), radial-gradient(1px 1px at 66% 9%, rgba(255,255,255,.8), transparent 60%), radial-gradient(1px 1px at 81% 44%, #fff, transparent 60%), radial-gradient(1px 1px at 92% 71%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1px 1px at 14% 90%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1.5px 1.5px at 45% 50%, rgba(255,200,150,.8), transparent 60%), radial-gradient(1.5px 1.5px at 74% 22%, rgba(150,210,255,.8), transparent 60%); opacity: .7; } .auth-bg .stars2 { background: radial-gradient(1px 1px at 5% 40%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 30% 8%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 58% 35%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 88% 92%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 18% 75%, rgba(255,255,255,.4), transparent 60%); } .auth-bg .planet { position: absolute; width: 900px; height: 900px; right: -320px; bottom: -520px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a3442 0%, #141a22 45%, #07090c 70%); box-shadow: 0 0 120px rgba(255,154,60,.18), inset 30px 30px 80px rgba(108,196,255,.08); } .auth-bg .planet-ring { position: absolute; width: 1300px; height: 300px; right: -520px; bottom: -40px; border-radius: 50%; border: 1px solid rgba(255,154,60,.35); transform: rotate(-12deg); } .sprachwahl { position: absolute; top: 16px; right: 20px; z-index: 5; display: flex; gap: 4px; padding: 4px; background: rgba(20,23,29,.8); border: 1px solid var(--line); border-radius: var(--rad); } .sprachwahl-aktiv, .sprachwahl-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 3px; font-size: .86rem; } .sprachwahl-aktiv { background: var(--amber-soft); color: var(--text); font-weight: 600; } .sprachwahl-link { color: var(--text-2); } .sprachwahl-link:hover { color: var(--text); background: var(--panel-3); } .sprachwahl-flagge { width: 20px; height: 14px; border-radius: 2px; } .shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .wrap { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 72px 28px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "kopf box" "feat box" "lz box"; gap: 0 64px; align-content: center; } .auth-marke { display: flex; justify-content: center; margin: 0 0 14px; } .auth-marke .brand-hero-logo { width: 220px; margin: 0; } .intro-kopf { grid-area: kopf; } .features { grid-area: feat; } .lz-oben { grid-area: lz; } .auth-box { grid-area: box; align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .auth-box > .auth-hero { text-align: center; margin-bottom: 22px; } .brand-hero-logo { width: 300px; height: auto; margin-bottom: 30px; filter: drop-shadow(0 0 30px rgba(255,154,60,.18)); } .headline { font-size: 2.9rem; font-weight: 700; line-height: 1.08; letter-spacing: -.005em; margin-bottom: 14px; max-width: 14ch; } .headline .glow { color: var(--amber); text-shadow: 0 0 28px rgba(255,154,60,.45); } .sub { color: var(--text-2); font-size: 1.04rem; max-width: 56ch; margin-bottom: 26px; } .features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; } .feat { display: flex; gap: 12px; padding: 12px 14px; background: rgba(20,23,29,.72); border: 1px solid var(--line); border-radius: var(--rad-lg); } .feat-ico { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border-radius: var(--rad); background: var(--amber-soft); } .feat-ico.tech { background: var(--ice-soft); } .feat-h { font-weight: 700; } .feat-p { color: var(--text-2); font-size: .88rem; line-height: 1.4; } .lz { padding: 14px 16px; background: rgba(20,23,29,.72); border: 1px solid var(--line); border-radius: var(--rad-lg); } .lz-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .lz-titel { font-size: max(var(--font-min), .74rem); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); font-weight: 600; } .lz-live { display: inline-flex; align-items: center; gap: 6px; font-size: max(var(--font-min), .74rem); letter-spacing: .1em; text-transform: uppercase; color: var(--ok); } .lz-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: puls 1.6s infinite; } .lz-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .lz-kachel { padding: 8px 10px; background: var(--bg-raise); border-radius: var(--rad); } .lz-zahl { font-size: 1.35rem; font-weight: 700; color: var(--amber-2); } .lz-was { font-size: max(var(--font-min), .74rem); color: var(--muted); } .lz-log { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; } .lz-log li { display: flex; gap: 10px; align-items: baseline; font-size: .86rem; } .lz-ico { width: 1.3rem; flex: none; text-align: center; } .lz-text { flex: 1; color: var(--text-2); } .lz-vor { font-size: .76rem; color: var(--muted); white-space: nowrap; } .lz-unten { display: none; } .auth-box { background: rgba(20,23,29,.94); border: 1px solid var(--line-strong); border-radius: var(--rad-lg); padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.55); position: relative; } .auth-box::before { content: ""; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); border-top-left-radius: var(--rad-lg); } .auth-hero { margin-bottom: 18px; } .auth-hero-logo { display: none; width: 200px; margin: 0 auto 8px; } .brand-subtitle { color: var(--amber-2); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin: 0; } .auth-box h2 { font-size: 1.6rem; margin-bottom: 16px; } .form { display: grid; gap: 14px; margin-bottom: 14px; } .form label { display: grid; gap: 6px; } .form label > span { font-size: max(var(--font-min), .74rem); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); } .pw-feld, .pw-field { position: relative; } .pw-feld input, .pw-field input { padding-right: 48px; } .pw-toggle { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px; border: 0; border-radius: 3px; background: var(--panel-3); color: var(--text-2); cursor: pointer; } .form .btn-primary { min-height: 46px; font-size: 1rem; } .auth-box .muted a { font-weight: 600; } /* Anmeldebox: Reiter, Zusatzzeilen und Passwort-Helfer, die der Entwurf nicht zeigt, in seinen Bausteinen (Reiter wie .vchat-tab, Häkchen wie .target-type-opt). */ .auth-box .auth-tabs { display: flex; gap: 4px; margin-bottom: 18px; padding: 0; background: none; border-radius: 0; } .auth-box .auth-tab { flex: 1; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); padding: 5px; cursor: pointer; color: var(--text-2); font-size: .84rem; font-weight: 400; letter-spacing: 0; } .auth-box .auth-tab.is-active { border-color: var(--amber-line); color: var(--text); background: var(--amber-soft); } .auth-box .auth-tab:not(.is-active):hover { color: var(--text); } .auth-box .pane { display: none; } .auth-box .pane.is-active { display: block; } .auth-box h2 { letter-spacing: normal; } .auth-box .auth-lead { margin: -8px 0 16px; font-size: inherit; } .auth-box .form label, .auth-box .form label > span { margin: 0; } .auth-box .form input { font-size: inherit; line-height: inherit; } .auth-box .form button { line-height: 1.5; } .auth-box .flash-zone { margin-bottom: 14px; } .auth-box .flash { margin: 0 0 14px; } .auth-box .flash-zone .flash { margin: 0; } .auth-box .auth-zurueck { margin: 0 0 .6em; font-size: inherit; } .auth-box .verify-email { display: inline-block; margin: 0 0 14px; padding: 6px 10px; background: var(--bg-raise); border: 1px solid var(--line-strong); border-radius: var(--rad); color: var(--amber-2); word-break: break-all; } .auth-box .feld-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .form label > .pw-field { font-size: inherit; letter-spacing: normal; text-transform: none; color: inherit; } .pw-field > input { display: block; } /* top/bottom allein dehnen einen Knopf nicht auf, darum die Höhe ausdrücklich. */ .pw-field > .pw-toggle { min-height: 0; height: calc(100% - 8px); padding: 0; display: flex; align-items: center; justify-content: center; } .auth-box .form .pw-strength, .auth-box .form .pw-generate, .auth-box .form .pw-match { margin-top: 0; } .form .form-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; } .form .form-check > span { font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--text-2); line-height: 1.4; } .form .form-check input { accent-color: var(--amber); width: 16px; height: 16px; margin: 2px 0 0; flex: none; } .auth-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: .88rem; } .auth-zeile .form-check input { margin-top: 1px; } .form .btn-tech { min-height: 46px; font-size: 1rem; } .pw-strength-bar { background: var(--panel-3); } .pw-strength-bar i.pw-s0, .pw-strength-bar i.pw-s1 { background: var(--danger); } .pw-strength-bar i.pw-s2 { background: var(--warn); } .pw-strength-bar i.pw-s3 { background: var(--ice); } .pw-strength-bar i.pw-s4 { background: var(--ok); } .pw-strength-label, .pw-generate-hint { color: var(--text-2); } .pw-match.is-ok { color: var(--ok); } .pw-match.is-bad { color: var(--danger); } .pw-generate-btn { color: var(--ice); min-height: 0; padding: 0; } .pw-generate-btn:hover { color: var(--text); } .foot { position: relative; z-index: 1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; padding: 18px 28px 22px; color: var(--muted); font-size: .82rem; max-width: 1180px; margin: 0 auto; width: 100%; } @media (max-width: 1100px) { .ov-main { grid-template-columns: 1fr; } .fleet-layout { grid-template-columns: 1fr; } /* Einspaltig: Vorlagen vor Schritt 1 (man wählt sie zuerst), Vorschau und Startknopf bleiben hinter den Schritten. */ .fleet-aside { display: contents; } .fleet-layout > .fleet-aside > .fleet-templates { order: -1; } .planet-hero { grid-template-columns: 220px 1fr; } .planet-visual { width: 220px; height: 220px; } .planet-visual .planet-bild { width: 200px; height: 200px; } } @media (max-width: 900px) { /* Wie im Entwurf: steht vor den Seitenregeln des Handy-Blocks. */ .card, .panel { padding: 14px; } .flights { grid-template-columns: 1fr; } .planet-hero { grid-template-columns: 1fr; padding: 16px; gap: 6px; justify-items: stretch; } .planet-visual { width: 200px; height: 200px; } .planet-visual .planet-bild { width: 180px; height: 180px; } .planet-name { font-size: 1.6rem; } .planet-meta { text-align: left; } .ov-lower { grid-template-columns: 1fr; } .build-grid { grid-template-columns: 1fr; } .build-card { grid-template-columns: 96px minmax(0, 1fr); } .bc-media { min-height: 112px; } .queue-grid { grid-template-columns: 1fr 1fr; } .fields-meter progress { width: 90px; } .ship-row-head { display: none; } .ship-row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "img nm num" "in in in"; row-gap: 8px; } .ship-row img { grid-area: img; } .ship-row .nm { grid-area: nm; } .ship-row .num { grid-area: num; } .ship-row .ship-count-input { grid-area: in; } .cargo-row { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "ic nm num" "in in in"; row-gap: 8px; } .cargo-row .res-icon { grid-area: ic; } .cargo-row .nm { grid-area: nm; } .cargo-row .num { grid-area: num; } .cargo-row .in { grid-area: in; } .speed-ticks { padding-right: 80px; } .galaxy-nav { grid-template-columns: 1fr; } .galaxy-nav-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; } .galaxy-nav-form .btn-primary { grid-column: 1 / -1; } .nav-group { grid-template-columns: 40px minmax(0, 1fr) 40px; } .my-planets-nav { justify-self: stretch; } .my-planets-menu { left: 0; right: 0; min-width: 0; } .orbitband { gap: 1px; } .ob-slot { padding: 4px 0 2px; font-size: max(var(--font-min), .62rem); } .ob-dot { width: 16px; height: 16px; } .ob-slot img { width: 18px; height: 18px; } .galaxy-table, .galaxy-table tbody { display: block; } .galaxy-table thead { display: none; } .galaxy-table tr { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "pos planet act" "pos owner act"; gap: 2px 8px; align-items: center; margin-bottom: 4px; padding: 8px 8px 8px 0; background: var(--bg-raise); border-radius: var(--rad); } .galaxy-table tr.g-own { background: linear-gradient(90deg, rgba(255,154,60,.14), rgba(255,154,60,.03)); box-shadow: inset 3px 0 0 var(--amber); } .galaxy-table tr.g-merchant { background: linear-gradient(90deg, rgba(255,209,102,.1), transparent), var(--bg-raise); } .galaxy-table tr.g-empty { background: rgba(20,23,29,.55); grid-template-areas: "pos planet act"; } .galaxy-table td { display: block; padding: 0; background: none !important; border-radius: 0 !important; box-shadow: none !important; } .galaxy-table td.g-pos { grid-area: pos; align-self: stretch; display: flex; align-items: center; justify-content: center; } .galaxy-table td.g-planet, .galaxy-table td.g-empty-cell, .galaxy-table td.g-merchant-cell { grid-area: planet; min-width: 0; } .galaxy-table td.g-owner { grid-area: owner; white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; } .galaxy-table td.g-status { display: contents; } .galaxy-table td.g-status .g-st { grid-area: owner; justify-self: end; } .galaxy-table td.g-actions { grid-area: act; } .g-st-wrap { display: inline-flex; gap: 2px; } .g-action-toggle { min-width: 0; padding: 4px 10px; } .g-action-toggle .lbl-lang { display: none; } .g-planet-bild { width: 30px; height: 30px; } .g-legende { font-size: .8rem; } .wrap { grid-template-columns: 1fr; grid-template-areas: "kopf" "box" "feat" "lz"; padding: 64px 16px 24px; gap: 18px; } .auth-marke .brand-hero-logo { width: 180px; } .lz-oben { display: none; } .lz-unten { display: block; grid-area: lz; } .brand-hero-logo { width: 220px; margin: 0 auto 20px; } .intro-kopf { text-align: center; } .headline { font-size: 2rem; margin: 0 auto 10px; } .sub { margin: 0 auto; font-size: .95rem; } .features { grid-template-columns: 1fr; margin: 0; } .auth-box { padding: 20px; } .sprachwahl { right: 12px; top: 12px; } .foot { padding: 16px; } } @media (min-width: 901px) { .g-st-wrap { display: inline-flex; gap: 2px; } } .galaxy-table tr.g-own td { background: rgba(255,154,60,.11); } .galaxy-table tr.g-merchant td { background: rgba(255,209,102,.08); } /* Flotte senden: allgemeine Abstände aus main.css, die der Entwurf nicht kennt. */ .fleet-form .coord-input, .fleet-form .speed-slider { margin: 0; } .fleet-aside .form-actions { margin: 14px 0 0; align-items: normal; } /* main.css hält Eingabefelder am Handy bei 16 px (iOS zoomt sonst); der Entwurf liegt mit 1,1rem darüber und erfüllt das ebenso. */ @media (max-width: 900px) { .coord-input input { font-size: 1.1rem !important; } } @media (max-width: 900px) { .nav-group .coord-input { font-size: 1.05rem !important; } } /* ---------- Werft und Verteidigung: Queue als Zeilen, in den Farben der Bau-Queue ---------- */ .queue-card .queue-slot-hint { margin: -6px 0 4px; font-size: .88rem; } .queue-card .queue-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin: 8px 0 0; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: none; opacity: 1; } .queue-card .queue-item.active { border-color: var(--amber-line); background: linear-gradient(180deg, var(--amber-soft), transparent 70%), var(--bg-raise); } .queue-card .queue-item .qi-info { flex: 1; min-width: 0; } .queue-card .queue-item .qi-name { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: .95rem; } .queue-card .queue-item .qi-name .ico { display: inline-flex; font-size: inherit; } .queue-card .queue-item .qi-name .ico img { width: 26px; height: 26px; border-radius: 3px; object-fit: cover; } .queue-card .queue-item .qi-status { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 4px; color: var(--text-2); font-size: .88rem; } .queue-card .queue-item.waiting .qi-status { color: var(--muted); } .queue-card .queue-item .ship-progress-text strong, .queue-card .queue-item .job-next-eta, .queue-card .queue-item .job-total-eta { color: var(--text); font-weight: 600; } .queue-card .queue-item .ship-fill { display: block; width: 100%; height: 4px; margin-top: 8px; } .queue-card .queue-item .qi-action { display: flex; align-items: center; gap: 4px; flex: none; } .queue-card .queue-item .qi-move { display: inline-flex; gap: 4px; } .queue-kind-tag { font-size: max(var(--font-min), .74rem); padding: 1px 6px; border-radius: 3px; background: var(--ice-soft); color: var(--ice); } .form label.settings-toggle > span { font-size: inherit; letter-spacing: normal; text-transform: none; color: inherit; } /* Bauformular in einer Zeile wie die Gebäudekarte: Menge und Max links, Bauen rechts. */ .bc-actions-build { flex-direction: row; align-items: center; } .bc-buildform { display: flex; flex-direction: row; align-items: center; gap: 6px; width: 100%; margin: 0; } .bc-amount { display: flex; flex: none; gap: 4px; align-items: stretch; } .bc-amount .ship-amount-input { width: 72px; flex: none; } .bc-buildform > .btn-primary { margin-left: auto; } /* ---------- Imperium und Produktion: Vergleichstabellen wie die Galaxie-Tabelle, Reiter wie die Anmeldung ---------- */ .empire-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 0; background: none; border: 0; } .empire-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); color: var(--text-2); font-size: .88rem; font-weight: 500; box-shadow: none; } .empire-tab:hover { color: var(--text); background: var(--bg-raise); } .empire-tab.is-active { border-color: var(--amber-line); background: var(--amber-soft); color: var(--text); } .empire-table-wrap { overflow-x: auto; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .empire-table, .empire-research-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-variant-numeric: tabular-nums; background: none; } .empire-table th { padding: 6px 12px; background: none; border: 0; color: var(--muted); font-size: max(var(--font-min), .7rem); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-align: center; vertical-align: bottom; } .empire-table th.empire-corner { text-align: left; } .empire-table td, .empire-research-table td { padding: 8px 12px; background: var(--bg-raise); border: 0; text-align: center; vertical-align: middle; color: var(--text); } .empire-table tr td:first-child, .empire-research-table tr td:first-child { border-radius: var(--rad) 0 0 var(--rad); } .empire-table tr td:last-child, .empire-research-table tr td:last-child { border-radius: 0 var(--rad) var(--rad) 0; } .empire-table td.empire-row-label, .empire-research-table td.empire-research-label { text-align: left; color: var(--text-2); white-space: nowrap; } .empire-research-table td.empire-research-level { text-align: right; } .empire-table td.is-zero { color: var(--muted); } .empire-table th.empire-planet-head { color: var(--text); font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; } .empire-planet-head .empire-planet-bild { display: block; margin: 0 auto 4px; } .empire-planet-coord { color: var(--ice); font-size: .78rem; font-weight: 500; } .empire-table .is-neg, .is-neg { color: var(--danger); } .imp-hinweis { margin: 0 0 10px; } .card > .imp-hinweis:last-child { margin: 0; } .prod-titel { display: inline-flex; align-items: center; gap: 10px; } .fusion-factor-select { width: auto; min-width: 90px; } .empire-table { min-width: 0; } @media (max-width: 900px) { .empire-table th, .empire-table td, .empire-research-table td { padding: 7px 6px; font-size: .84rem; } .empire-table th.empire-planet-head { min-width: 64px; font-size: .8rem; } .empire-table td, .empire-table td.empire-row-label { white-space: normal; } .empire-table td.empire-row-label { min-width: 96px; hyphens: auto; overflow-wrap: break-word; } .empire-table td .small { display: block; } } /* ---------- Tech-Tree: Kennzahlen wie die Planetenwerte, Reiter wie im Imperium, Karten wie die Baukarten ---------- */ .tt-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; } .tt-stat { display: grid; align-content: start; gap: 2px; padding: 10px 12px; background: rgba(10,11,14,.55); border: 1px solid var(--line); border-radius: var(--rad); } .tt-stat-label { font-size: max(var(--font-min), .7rem); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .tt-stat-value { font-size: 1.35rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .tt-stat-success .tt-stat-value { color: var(--ok); } .tt-stat-warn .tt-stat-value { color: var(--amber-2); } .tt-stat-hint { font-size: .76rem; color: var(--muted); } .tt-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); } .tt-filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; } .tt-tab { display: inline-flex; align-items: center; min-height: 0; padding: 6px 12px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad); color: var(--text-2); font-size: .88rem; font-weight: 500; cursor: pointer; } .tt-tab:hover { color: var(--text); } .tt-tab.is-active { border-color: var(--amber-line); background: var(--amber-soft); color: var(--text); } .tt-sort { display: flex; align-items: center; gap: 8px; } .tt-sort label { font-size: .84rem; } .tt-select { width: auto; min-width: 210px; } .tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; } .tt-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--rad-lg); } .tt-card.tt-unlocked { border-color: rgba(111,220,140,.28); } .tt-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; } .tt-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .tt-card-icon { display: inline-flex; flex: none; } .tt-card-name { padding: 0; min-height: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: 1rem; font-weight: 700; text-align: left; cursor: pointer; } .tt-card-name:hover { color: var(--amber-2); } .tt-locked .tt-card-name { color: var(--text-2); } .tt-card-tags { display: flex; flex-wrap: wrap; gap: 4px; } .tt-type-badge, .tt-level-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: max(var(--font-min), .74rem); font-weight: 600; white-space: nowrap; } .tt-type-badge { background: var(--panel-3); color: var(--text-2); letter-spacing: .08em; text-transform: uppercase; font-size: max(var(--font-min), .66rem); } .tt-type-research { background: var(--ice-soft); color: var(--ice); } .tt-type-ship, .tt-type-defense, .tt-type-missile { background: var(--danger-soft); color: #ffaca6; } .tt-level-badge { background: var(--amber-soft); color: var(--amber-2); } .tt-level-badge.tt-level-zero { background: var(--panel-3); color: var(--muted); } .tt-card-desc { flex: 1; margin: 0; color: var(--text-2); font-size: .9rem; line-height: 1.5; } .tt-card-foot { padding-top: 10px; border-top: 1px solid var(--line); font-size: .86rem; } .tt-req-empty { color: var(--ok); } .tt-req-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .tt-req-label { color: var(--muted); font-size: .8rem; margin-right: 2px; } .tt-req { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 3px; background: var(--panel-3); } .tt-req-met { color: var(--ok); } .tt-req-open { color: #ffaca6; background: var(--danger-soft); } .tt-req-numbers { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .8rem; } .tt-check { font-weight: 700; } .tt-empty-state { padding: 24px; text-align: center; } @media (max-width: 900px) { .tt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-grid { grid-template-columns: 1fr; } .tt-sort { width: 100%; } .tt-select { flex: 1; min-width: 0; } } /* ---------- Kampfsimulator: Seiten als Kästen, Felder kompakt im Raster, Siegchancen als Balken ---------- */ .sim-wrap { max-width: none; margin: 0; padding: 0; } .sim-intro { margin: -6px 0 14px; color: var(--text-2); max-width: 90ch; } .sim-aus-bericht { padding: 10px 12px; border-left: 3px solid var(--ice); background: var(--ice-soft); border-radius: var(--rad); color: var(--text); } .sim-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .sim-side { margin: 0; } .sim-side > .sim-side-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; } .sim-side > .sim-side-att { color: #ffaca6; } .card > .sim-side-att { border-left-color: var(--danger); } .sim-side > .sim-side-def { color: var(--ice); } .card > .sim-side-def { border-left-color: var(--ice); } .sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; } .sim-field { display: grid; gap: 4px; margin: 0; } .sim-field-name { font-size: .8rem; color: var(--text-2); line-height: 1.25; } .sim-field input { min-height: 36px; padding: 6px 10px; font-variant-numeric: tabular-nums; } .sim-extra { margin: 10px 0 0; } .sim-extra > summary { cursor: pointer; color: var(--text-2); font-size: .88rem; padding: 4px 0; } .sim-extra > summary:hover { color: var(--text); } .sim-extra[open] > summary { margin-bottom: 8px; } .sim-tech-h { margin: 16px 0 8px; font-size: max(var(--font-min), .7rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .sim-tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; } .sim-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 14px 0 0; } .sim-runs { display: grid; gap: 4px; font-size: .8rem; color: var(--text-2); } .sim-runs input { width: 110px; min-height: 40px; } .sim-runs .sim-seed { width: 200px; } .sim-go { min-height: 40px; } .sim-winbars { display: grid; gap: 6px; margin: 10px 0 6px; } .sim-winbar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: .88rem; } .sim-wb-label { color: var(--text-2); } .sim-wb-track { height: 8px; background: var(--bg-raise); border-radius: 4px; overflow: hidden; } .sim-wb-fill { display: block; height: 100%; border-radius: 4px; } .sim-wb-att { background: var(--danger); } .sim-wb-def { background: var(--ice); } .sim-wb-draw { background: var(--muted); } .sim-wb-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); } .sim-def-spalte { display: grid; gap: 10px; } .sim-zurueck { color: var(--ok); font-size: .8rem; } @media (max-width: 900px) { .sim-cols { grid-template-columns: 1fr; } .sim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sim-winbar { grid-template-columns: 90px minmax(0, 1fr) 46px; } .sim-runs .sim-seed { width: 160px; } } /* ---------- Lobby, Ruhmeshalle, Rundenhinweis: Hintergrund wie die Anmeldung, Karten wie die Anmeldebox ---------- */ body.lobby-seite { min-height: 100vh; } .lobbypage { position: relative; min-height: 100vh; overflow: hidden; } .lobby-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .lobby-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; border-bottom: 1px solid var(--line); background: rgba(10,11,14,.6); } .lobby-topbar-logo { display: block; height: 24px; width: auto; } .lobby-nav { display: flex; flex-wrap: wrap; gap: 4px; } .lobby-nav a { padding: 6px 12px; border-radius: var(--rad); color: var(--text-2); font-size: .9rem; } .lobby-nav a:hover { color: var(--text); background: var(--bg-raise); } .lobby-wrap { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 56px 28px 40px; } .lobby-wrap > .flash-zone { max-width: 640px; margin: 0 auto 18px; } .lobby-hero { text-align: center; margin: 0 auto 32px; max-width: 760px; } .lobby-hero h1 { font-size: 2.6rem; font-weight: 700; line-height: 1.1; margin: 0 0 12px; } .lobby-hero .glow { color: var(--amber); text-shadow: 0 0 28px rgba(255,154,60,.45); } .lobby-hero p { color: var(--text-2); font-size: 1.04rem; margin: 0; } .lobby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 380px)); justify-content: center; gap: 16px; } .lobby-card, .lobby-join-panel, .lobby-hof { position: relative; background: rgba(20,23,29,.94); border: 1px solid var(--line-strong); border-radius: var(--rad-lg); box-shadow: 0 30px 80px rgba(0,0,0,.45); } .lobby-card::before, .lobby-join-panel::before, .lobby-hof::before { content: ""; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); border-top-left-radius: var(--rad-lg); } .lobby-card { display: grid; gap: 12px; padding: 22px 24px; } .lobby-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lobby-card-uni { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-2); } .lobby-badge { padding: 2px 8px; border-radius: 3px; font-size: max(var(--font-min), .74rem); font-weight: 600; } .lobby-badge-new { background: var(--ok-soft); color: var(--ok); } .lobby-badge-vac { background: var(--ice-soft); color: var(--ice); } .lobby-card-name { display: grid; gap: 2px; font-size: 1.5rem; font-weight: 700; } .lobby-card-name .pre { font-size: max(var(--font-min), .74rem); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .lobby-card-points { color: var(--text-2); } .lobby-card-points b { color: var(--text); font-variant-numeric: tabular-nums; } .lobby-card-meta { display: flex; flex-wrap: wrap; gap: 6px; } .lobby-meta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 3px; background: var(--panel-3); color: var(--text-2); font-size: .8rem; } .lobby-card form { margin: 4px 0 0; } .lobby-card .btn-primary, .lobby-join-panel .btn-tech, .lobby-join-inline .btn-tech, .lobby-knopf { width: 100%; min-height: 46px; font-size: 1rem; } .lobby-join-panel { max-width: 460px; margin: 0 auto; padding: 26px 28px; text-align: center; } .lobby-join-panel .ico { font-size: 2rem; margin-bottom: 6px; } .lobby-join-panel h2 { font-size: 1.4rem; margin: 0 0 6px; } .lobby-join-panel .lead { color: var(--text-2); margin: 0 0 18px; } .lobby-join-panel form, .lobby-join-inline form { display: grid; gap: 12px; text-align: left; } .lobby-field { display: grid; gap: 6px; } .lobby-field label { font-size: max(var(--font-min), .74rem); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); } .lobby-join-more { max-width: 460px; margin: 24px auto 0; } .lobby-join-more > summary { cursor: pointer; text-align: center; color: var(--amber-2); font-weight: 600; padding: 8px; } .lobby-join-inline { margin-top: 10px; padding: 18px 20px; background: rgba(20,23,29,.94); border: 1px solid var(--line-strong); border-radius: var(--rad-lg); } .lobby-none { text-align: center; color: var(--text-2); } .lobby-pending { max-width: 640px; margin: 24px auto 0; padding: 10px 12px; border-left: 3px solid var(--warn); background: var(--warn-soft); border-radius: var(--rad); color: #ffe7ad; } .lobby-hof { padding: 18px 20px; margin: 0 0 16px; } .lobby-hof h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 1.1rem; margin: 0 0 12px; } .lobby-hof-datum { font-size: .82rem; font-weight: 500; color: var(--muted); } .lobby-hof-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .lobby-hof h3 { font-size: max(var(--font-min), .7rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .lobby-hof-tabelle { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: .9rem; } .lobby-hof-tabelle th { text-align: left; font-size: max(var(--font-min), .68rem); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; } .lobby-hof-tabelle td { padding: 7px 10px; background: var(--bg-raise); } .lobby-hof-tabelle tr td:first-child { border-radius: var(--rad) 0 0 var(--rad); } .lobby-hof-tabelle tr td:last-child { border-radius: 0 var(--rad) var(--rad) 0; } .lobby-hof-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; } .lobby-hof-tabelle tr.ich td { background: linear-gradient(90deg, rgba(255,154,60,.14), rgba(255,154,60,.03)); } .lobby-hof-du { padding: 1px 6px; border-radius: 3px; background: var(--amber-soft); color: var(--amber-2); font-size: max(var(--font-min), .74rem); font-weight: 600; } .lobby-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; width: 100%; max-width: 1180px; margin: 0 auto; padding: 18px 28px 22px; color: var(--muted); font-size: .82rem; } .lobby-foot .legal-links { display: inline; margin: 0; } @media (max-width: 900px) { .lobby-topbar { padding: 12px 16px; } .lobby-wrap { padding: 32px 16px 24px; } .lobby-hero h1 { font-size: 1.9rem; } .lobby-grid { grid-template-columns: 1fr; } .lobby-foot { padding: 16px; } } /* ---------- Markt: Regeln aus dem früheren