:root{color-scheme:dark;--bg:#070d18;--panel:#101c2d;--line:#203d58;--cyan:#42d9e8;--muted:#8ca6bd}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0%,#102b45 0,#070d18 55%);color:#e8f4ff;font:15px Segoe UI,Arial,sans-serif;min-height:100vh}
a{color:var(--cyan);text-decoration:none}.top{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:#07101ddd;position:sticky;top:0}.top>a:first-child{font-weight:900;letter-spacing:3px;font-size:20px}
main{max-width:1400px;margin:32px auto;padding:0 20px}.hero{padding:10vh 5vw;min-height:55vh}.hero h1{font-size:clamp(42px,7vw,82px);line-height:1.02;margin:12px 0}.hero p{color:var(--muted);max-width:600px;line-height:1.7}.eyebrow{color:var(--cyan);letter-spacing:3px;font-size:11px;font-weight:700}
.panel{background:linear-gradient(145deg,#12243aee,#0c1727ee);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 18px 60px #0005}.narrow{max-width:460px;margin:8vh auto}.layout{display:grid;grid-template-columns:250px 1fr;gap:18px}.sidebar{height:max-content}.planet-link{display:block;padding:12px;border-bottom:1px solid var(--line)}small{display:block;color:var(--muted);margin-top:4px}.mainpanel{min-height:500px}.resources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:28px 0}.resources div{background:#071421;border:1px solid var(--line);padding:18px;border-radius:10px;color:var(--muted);font-size:11px;letter-spacing:1px}.resources strong{display:block;color:var(--cyan);font-size:23px;margin-top:10px}.btn,button{display:inline-block;background:var(--cyan);color:#03121c;border:0;border-radius:7px;padding:12px 20px;font-weight:800;cursor:pointer}.secondary{background:#203d58;color:#e8f4ff}label{display:block;margin:18px 0;color:var(--muted)}input{display:block;width:100%;margin-top:7px;padding:12px;background:#071421;border:1px solid var(--line);border-radius:6px;color:white}.notice,.flash{padding:14px;background:#102d3d;border:1px solid #236072;border-radius:8px;color:#a9e9ef}.flash{margin:10px 4vw}.flash.error{background:#3a1820;border-color:#873849}.system{display:flex;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line)}footer{text-align:center;padding:30px;color:#587087;font-size:12px}
@media(max-width:760px){.layout{grid-template-columns:1fr}.resources{grid-template-columns:repeat(2,minmax(0,1fr))}.top{padding:0 16px}.hero{padding-top:7vh}.panel{padding:18px}}
.direction-title{margin:30px 0 12px;color:#42d9e8}
.planet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.planet-card{background:#071421;border:1px solid #203d58;border-radius:9px;padding:13px;min-height:112px}
.planet-card.stein{box-shadow:inset 3px 0 #b58c68}
.planet-card.gas{box-shadow:inset 3px 0 #4bb7bd}
.planet-card.eis{box-shadow:inset 3px 0 #8ab8e8}
.planet-card-head{display:flex;justify-content:space-between;gap:8px}
.planet-card-head span,.planet-meta,.muted{color:#8ca6bd;font-size:12px}
.planet-meta{margin-top:7px}


/* SPACE KEKU – interaktive Galaxiekarte */
.galaxy-page{display:flex;flex-direction:column;gap:16px}
.galaxy-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:8px 0}
.galaxy-heading h1{font-size:clamp(32px,5vw,48px);margin:8px 0}
.galaxy-heading p{margin-bottom:0}
.galaxy-counter{display:flex;flex-direction:column;text-align:right;color:var(--muted);font-size:12px}
.galaxy-counter strong{font-size:28px;color:var(--cyan)}
.galaxy-legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.galaxy-legend span{display:flex;align-items:center;gap:7px}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.legend-dot.stein{background:#c99a70}.legend-dot.gas{background:#48cbd0}.legend-dot.eis{background:#9bcaff}.legend-dot.occupied{background:#f2d36b}
.galaxy-scroll{width:100%;overflow:auto;border:1px solid #1e3d58;border-radius:14px;background:radial-gradient(ellipse at center,#122b43 0,#091726 48%,#06101d 100%);scrollbar-color:#315a78 #071421}
.galaxy-map{position:relative;width:min(100%,900px);min-width:620px;aspect-ratio:1;margin:0 auto;overflow:hidden;background-image:radial-gradient(circle at center,#29455b33 0 1px,transparent 2px),radial-gradient(circle at center,transparent 0 17%,#29445a22 17.2% 17.4%,transparent 17.6% 32%,#29445a22 32.2% 32.4%,transparent 32.6% 47%,#29445a22 47.2% 47.4%,transparent 47.6%);background-size:28px 28px,100% 100%}
.galaxy-arm{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.arm-n,.arm-s{width:1px;height:84%;background:linear-gradient(to bottom,transparent,#294c68 12%,#294c68 88%,transparent)}
.arm-o,.arm-w{height:1px;width:84%;background:linear-gradient(to right,transparent,#294c68 12%,#294c68 88%,transparent)}
.direction-label{position:absolute;z-index:2;color:#7294ad;font-size:10px;font-weight:800;letter-spacing:2px;text-shadow:0 1px 4px #000}
.direction-label.north{top:2.2%;left:50%;transform:translateX(-50%)}
.direction-label.south{bottom:2.2%;left:50%;transform:translateX(-50%)}
.direction-label.east{right:2.2%;top:50%;transform:translateY(-50%)}
.direction-label.west{left:2.2%;top:50%;transform:translateY(-50%)}
.sun{position:absolute;z-index:4;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.sun-glow{position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(circle,#ffc85c66 0,#f69b2a22 42%,transparent 72%);filter:blur(5px)}
.sun-core{position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8bd,#ffd45b 36%,#f58c22 72%,#b84b12);box-shadow:0 0 20px #ffb342aa,0 0 55px #ff9f2c66}
.sun b{position:absolute;top:76px;color:#ffc76b;font-size:9px;letter-spacing:2px;text-shadow:0 1px 5px #000}
.planet-point{position:absolute;z-index:5;left:var(--x);top:var(--y);width:15px;height:15px;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid #d9efff88;box-shadow:0 0 7px currentColor;transition:transform .15s ease,box-shadow .15s ease; color:#fff}
.planet-point span{position:absolute;opacity:0;pointer-events:none;font-size:9px;font-weight:800;text-shadow:0 1px 4px #000;white-space:nowrap;top:14px}
.planet-point.stein{background:#b9855b;color:#d8a77b}
.planet-point.gas{background:#32aeb6;color:#55e0e4}
.planet-point.eis{background:#82b9ed;color:#a9d4ff}
.planet-point.occupied{outline:2px solid #f5d36b;outline-offset:2px}
.planet-point:hover,.planet-point:focus-visible,.planet-point.selected{z-index:8;transform:translate(-50%,-50%) scale(1.8);box-shadow:0 0 15px currentColor;outline:2px solid #fff}
.planet-point:hover span,.planet-point:focus-visible span,.planet-point.selected span{opacity:1}
.planet-detail{padding:20px;margin-top:4px}
.detail-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.detail-title h2{margin:5px 0 0}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.detail-grid>div{padding:12px;background:#071421;border:1px solid var(--line);border-radius:8px;min-width:0}
.detail-grid small{margin:0 0 7px}
.detail-grid strong{display:block;overflow-wrap:anywhere}
.detail-empty{display:flex;align-items:center;gap:16px}
.detail-empty p{margin:5px 0 0}
.detail-orbit{font-size:32px;color:var(--cyan)}
.map-hint{font-size:12px;color:var(--muted);margin:0}
@media(max-width:760px){.galaxy-heading{align-items:flex-start}.galaxy-map{width:620px}.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-title{align-items:flex-start;flex-direction:column}}

/* Organisch verteilte Planeten: dezente Verbindungslinien und etwas mehr Tiefe */
.galaxy-map{background-color:#071421}
.planet-point{width:16px;height:16px}
.planet-point span{top:16px}
.planet-point:hover,.planet-point:focus-visible,.planet-point.selected{transform:translate(-50%,-50%) scale(1.9)}
@media(min-width:761px){.galaxy-map{width:min(100%,980px)}}