:root { --sky:#EAF2F4; --ink:#1B2B33; --mute:#5E6F78; --line:#D5DFE3; --card:#FFFFFF; --green:#17A673; --green-d:#0E6D4B; --amber:#F2A83B; --red:#E0473B; --purple:#6C5CE7; --gray:#8E9AA0; --r:14px; }
* { box-sizing:border-box } html, body { margin:0; height:100%; background:var(--sky); color:var(--ink); font-family:"Nunito", system-ui, sans-serif; font-weight:500 }
button { font:inherit; font-weight:700; border:0; border-radius:999px; padding:10px 16px; background:#fff; color:var(--ink); box-shadow:0 1px 0 rgba(27,43,51,.12) } button:active { transform:scale(.98) }
button.primary { background:var(--green); color:#fff } button.ghost { background:transparent; box-shadow:none; color:var(--mute) } button.icon { width:36px; height:36px; padding:0 } button.pill { padding:6px 12px; font-size:13px }
button.danger { background:#fff; color:var(--red) }
label { display:block; margin:10px 0 } select, input[type=number], input[type=text] { width:100%; margin-top:4px; padding:10px; border:1px solid var(--line); border-radius:10px; font:inherit }
input[type=range] { width:100%; accent-color:var(--green) }
.screen { position:fixed; inset:0 } #start { display:grid; place-items:center; padding:20px }
.start-card { background:var(--card); border-radius:22px; padding:24px; width:min(420px, 100%); box-shadow:0 12px 40px rgba(27,43,51,.12) } h1 { margin:0 0 6px; font-weight:800; font-size:28px } .sub { color:var(--mute); margin:0 0 12px } .tiny { font-size:12px; color:var(--mute) }
.footer-links { margin-top:14px; text-align:center } .footer-links a { color:var(--mute) }
#hud { position:absolute; top:0; left:0; right:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:max(10px, env(safe-area-inset-top)) 14px 8px; background:linear-gradient(var(--sky), rgba(234,242,244,0)); font-weight:800; font-size:17px }
.hud-left { display:flex; gap:8px; align-items:center }
#map { position:absolute; inset:0; width:100%; height:100%; touch-action:none; display:block }
#map-tools { position:absolute; right:10px; top:64px; z-index:5; display:grid; gap:5px }
#map-tools button { width:36px; height:36px; padding:0; border-radius:10px; background:rgba(255,255,255,.94); font-size:20px }
#coach { position:absolute; z-index:12; top:72px; left:50%; transform:translateX(-50%); width:min(390px,calc(100% - 86px)); background:#fff; border-left:5px solid var(--green); border-radius:14px; padding:11px 12px; box-shadow:0 8px 30px rgba(27,43,51,.2) }
#coach b,#coach span { display:block } #coach span { font-size:13px; color:var(--mute); margin:3px 0 8px } #coach div { display:flex; justify-content:flex-end; gap:6px } #coach button { padding:5px 11px; font-size:12px }
#legend { position:absolute; left:10px; bottom:calc(228px + env(safe-area-inset-bottom)); z-index:4; background:rgba(255,255,255,.92); border-radius:10px; padding:6px 8px; font-size:11px; display:flex; gap:8px; flex-wrap:wrap; max-width:240px }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:3px; vertical-align:-1px } .dot.ok { background:var(--green) } .dot.busy { background:var(--amber) } .dot.bad { background:var(--red) } .dot.permit { border:2px dashed var(--green); width:7px; height:7px } .dot.comp { background:var(--gray) }
#sheet { position:absolute; left:0; right:0; bottom:calc(58px + env(safe-area-inset-bottom)); z-index:6; background:var(--card); border-radius:22px 22px 0 0; box-shadow:0 -6px 30px rgba(27,43,51,.14); max-height:62vh; overflow:auto; padding:6px 16px 14px }
.grip { width:38px; height:4px; background:var(--line); border-radius:2px; margin:4px auto 10px }
#tabs { position:absolute; left:0; right:0; bottom:0; z-index:7; display:flex; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom) }
#tabs button { flex:1; min-width:0; border-radius:0; box-shadow:none; background:transparent; color:var(--mute); padding:12px 2px; font-size:11px; position:relative } #tabs button.on { color:var(--green-d) }
.badge { position:absolute; top:8px; right:22%; width:8px; height:8px; border-radius:50%; background:var(--red) }
.kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:10px } .kpi { background:var(--sky); border-radius:12px; padding:8px 10px } .kpi small { display:block; color:var(--mute); font-size:11px } .kpi b { font-size:17px; font-weight:800 }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px } .chip { font-size:12px; padding:4px 9px; border-radius:999px; background:var(--sky); color:var(--mute) } .chip.done { background:#DDF4EA; color:var(--green-d) } .chip.now { background:#FDEFD6; color:#8A5A0B }
.row { display:flex; gap:8px; align-items:center; margin:8px 0 } .row > * { flex:1 } .right { text-align:right } .mute { color:var(--mute) } .small { font-size:13px }
.opt { display:grid; grid-template-columns:1fr 1fr; gap:8px } .opt button { border-radius:12px; text-align:left; padding:8px 10px; font-weight:600; font-size:13px; box-shadow:inset 0 0 0 1px var(--line) } .opt button.sel { box-shadow:inset 0 0 0 2px var(--green) }
.card { background:var(--sky); border-radius:14px; padding:10px 12px; margin:8px 0 } .card h3 { margin:0 0 4px; font-size:15px } .card .tag { font-size:11px; padding:2px 8px; border-radius:999px; background:#fff; color:var(--mute) }
#modal { position:fixed; inset:0; z-index:20; background:rgba(27,43,51,.45); display:grid; place-items:end center; padding:0 } #modal-card { background:var(--card); border-radius:22px 22px 0 0; width:100%; max-width:520px; padding:16px 18px calc(18px + env(safe-area-inset-bottom)); max-height:88vh; overflow:auto }
#toast { position:fixed; left:50%; bottom:calc(76px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:30; background:var(--ink); color:#fff; padding:10px 14px; border-radius:999px; font-size:13px; max-width:90vw }
table { width:100%; border-collapse:collapse; font-size:12.5px } td, th { padding:5px 4px; border-bottom:1px solid var(--line); text-align:right } td:first-child, th:first-child { text-align:left }
.spark { width:100%; height:48px }
.build-check { display:flex; justify-content:space-between; gap:8px; margin-top:8px; padding:9px 10px; background:#DDF4EA; border-radius:11px; font-size:12px }.build-check span{color:var(--mute);text-align:right}.build-check.warn{background:#FDEFD6}
.advice { margin:8px 0 0; padding:8px 10px; border-radius:10px; background:#EAF2F4; font-size:12px }.advice.good{background:#DDF4EA;color:var(--green-d)}.advice.warn{background:#FDEFD6;color:#8A5A0B}.advice.bad{background:#FBE3E0;color:#9D3028}
.finale-badge{display:inline-block;padding:5px 10px;border-radius:999px;background:#DDF4EA;color:var(--green-d);font-size:12px;font-weight:800}.finale h2{margin:8px 0 2px}
.mission-teaser{width:100%;display:flex;align-items:center;text-align:left;border-radius:13px;padding:9px 11px;margin-top:8px;background:#F4F0FF;color:var(--ink);box-shadow:none}.mission-teaser span{display:block;flex:1}.mission-teaser b,.mission-teaser small{display:block}.mission-teaser small{font-weight:500;color:var(--mute);margin-top:2px}.mission-teaser strong{flex:0 0 auto;color:var(--purple);font-size:13px}
.goal-head{display:flex;align-items:center;justify-content:space-between}.goal-head h3{margin:0}.goal-head p{margin:2px 0}.goal-head>b{color:var(--purple)}.progress{height:8px;background:var(--line);border-radius:9px;overflow:hidden;margin:7px 0 12px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--purple));border-radius:9px}.chapter{border:1px solid var(--line);border-radius:14px;padding:11px;margin:9px 0;opacity:.72}.chapter.current{opacity:1;border-color:var(--purple);box-shadow:0 3px 14px rgba(108,92,231,.1)}.chapter.complete{opacity:1;background:#F1FAF6;border-color:#B9E5D3}.chapter>h3{margin:0;font-size:15px}.chapter>p{margin:3px 0 8px}.goal{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:7px;padding:7px 0;border-top:1px solid var(--line);font-size:12px}.goal b,.goal small{display:block}.goal small{color:var(--mute);margin-top:1px}.goal strong{font-size:11px;color:var(--mute)}.goal-mark{font-size:18px;color:var(--gray)}.goal.done .goal-mark,.goal.done strong{color:var(--green)}.achievement-title{margin:15px 0 5px}.achievements{display:grid;grid-template-columns:1fr 1fr;gap:7px}.achievement{display:grid;grid-template-columns:22px 1fr;align-items:center;background:#EEF2F3;color:var(--gray);border-radius:11px;padding:8px;font-size:11px}.achievement>span{grid-row:1/3;font-size:18px}.achievement b,.achievement small{display:block}.achievement.unlocked{background:#F4F0FF;color:var(--purple)}.achievement small{color:var(--mute)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.section-head h3{margin:0}.section-head p{margin:2px 0}.section-head>button{flex:0 0 auto}.network-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.network-controls select{margin:0;padding:7px 9px;font-size:12px;background:#fff}.site-row{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;text-align:left;width:100%;border:0}.site-row.attention{box-shadow:inset 3px 0 var(--amber)}.site-result{text-align:right}.site-result b,.site-result small{display:block}.site-result small{color:var(--mute);font-size:10px;margin-top:2px}.negative{color:var(--red)!important}.range-tabs{display:flex;background:var(--sky);border-radius:999px;padding:3px;margin:5px 0 10px}.range-tabs button{flex:1;padding:5px 4px;box-shadow:none;background:transparent;font-size:11px}.range-tabs button.on{background:#fff;color:var(--green-d)}.analytics-kpis .kpi b{font-size:15px}.chart-card{background:var(--sky);border-radius:13px;padding:9px 10px;margin:8px 0}.chart-card>div{display:flex;justify-content:space-between;align-items:center;font-size:12px}.chart-card>div span{color:var(--mute);font-size:11px}.chart-card svg{width:100%;height:58px;margin-top:4px;overflow:visible}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.chart-grid .chart-card{margin:0}.forecast{display:grid;gap:3px;background:#F4F0FF;border-radius:13px;padding:10px;margin:10px 0;font-size:12px}.forecast span,.forecast small{color:var(--mute)}.forecast small{font-size:10px}.analysis-title{margin:14px 0 6px;font-size:15px}.insight{display:grid;grid-template-columns:25px 1fr;width:100%;text-align:left;border-radius:11px;padding:8px 10px;margin:5px 0;background:var(--sky);box-shadow:none}.insight>span:first-child{font-size:17px}.insight b,.insight small{display:block}.insight small{font-weight:500;color:var(--mute);margin-top:2px}.insight.bad{background:#FBE3E0;color:#9D3028}.insight.warn{background:#FDEFD6;color:#8A5A0B}.insight.good{background:#DDF4EA;color:var(--green-d)}.compare-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}.compare-head,.compare-table>button{display:grid;grid-template-columns:1fr 64px 86px;align-items:center;gap:5px}.compare-head{padding:6px 9px;background:var(--sky);color:var(--mute);font-size:10px}.compare-table>button{width:100%;border-radius:0;box-shadow:none;border-top:1px solid var(--line);padding:7px 9px;text-align:right;font-size:11px}.compare-table>button>span:first-child{text-align:left}.compare-table b,.compare-table small{display:block}.compare-table small{font-weight:500;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.workshop-head{display:flex;gap:10px;align-items:center}.workshop-head h2{margin:0;font-size:20px}.workshop-head p{margin:2px 0;color:var(--mute);font-size:11px}.workshop-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#DDF4EA;color:var(--green-d);font-size:24px;font-weight:900}.workshop-note{background:#FDEFD6;border-radius:11px;padding:9px 10px;font-size:13px}.workshop-actions{display:grid;grid-template-columns:auto auto 1fr;gap:6px;margin-top:12px}.workshop-actions button{padding:8px 10px;font-size:12px}.wire-stage{height:190px;position:relative;margin:8px 0;background:#26343B;border-radius:13px;overflow:hidden}.wire-stage svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 1px #000)}.terminals{position:absolute;top:6px;bottom:6px;display:flex;flex-direction:column;justify-content:space-around;z-index:2}.terminals.source{left:7px}.terminals.target{right:7px}.terminals button{height:36px;max-width:126px;padding:5px 8px;border-radius:8px;background:#EEF2F3;font-size:10px;box-shadow:none}.terminals button i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px;background:#607079}.terminals.source button i{background:var(--wire)}.terminals button.sel{outline:3px solid #fff}.terminals button.used{background:#DDF4EA;color:var(--green-d)}.connection-list{display:flex;gap:4px;flex-wrap:wrap;font-size:10px;color:var(--mute)}.connection-list button{padding:4px 7px;font-size:10px;background:var(--sky)}.terminal-screen{background:#142127;color:#8EF2BC;border-radius:11px;padding:10px;font-family:ui-monospace,monospace;margin:10px 0}.terminal-screen b{font-size:11px;letter-spacing:1px}.terminal-screen pre{white-space:pre-wrap;font:11px/1.45 ui-monospace,monospace;margin:6px 0}.terminal-screen small{color:#B5C9C0;font-size:9px}.package-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.package-list button{border-radius:10px;padding:8px;text-align:left;box-shadow:inset 0 0 0 1px var(--line);font-size:11px}.package-list b,.package-list small{display:block}.package-list small{font-weight:500;color:var(--mute);margin-top:2px}.update-queue{margin-top:9px;padding:9px;background:var(--sky);border-radius:11px;display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:11px}.update-queue button{padding:4px 7px;font-size:10px}.update-queue button span{display:inline-grid;place-items:center;background:var(--purple);color:#fff;border-radius:50%;width:16px;height:16px;margin-right:4px}.config-form{display:grid;gap:7px}.config-form label{margin:0;font-size:11px;color:var(--mute)}.config-form select{margin-top:3px;font-size:12px}.power-meter{height:34px;border-radius:10px;background:var(--sky);position:relative;overflow:hidden;margin:10px 0}.power-meter i{position:absolute;inset:0 auto 0 0;background:#79D2AE;transition:width .2s}.power-meter i.over{background:var(--red)}.power-meter b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px}.car-allocation label{display:grid;grid-template-columns:1fr auto;gap:4px;margin:8px 0;padding:8px;background:var(--sky);border-radius:11px}.car-allocation span b,.car-allocation span small{display:block}.car-allocation span small{font-size:10px;color:var(--mute)}.car-allocation strong{font-size:12px}.car-allocation input{grid-column:1/3}
@keyframes cashPulse{50%{transform:scale(1.1);color:var(--green)}}.cash-pulse{animation:cashPulse .45s ease}
@media (prefers-reduced-motion:reduce){.cash-pulse{animation:none}}

/* hidden muss auch gegen display:grid an Dialogen/Startbildschirm gewinnen. */
[hidden] { display:none !important }
button:disabled { opacity:.45; cursor:not-allowed }
#start { overflow-y:auto; align-items:start }
.start-card { margin:auto }
#start-error { color:var(--red); font-size:13px }
.hud-left { flex-wrap:wrap; min-width:0; gap:5px }
#cityname { max-width:110px; overflow:hidden; text-overflow:ellipsis }
.hud-right { flex-shrink:0; white-space:nowrap; margin-left:6px }
#hud { font-size:15px }
#legend { pointer-events:none }
#modal-card:empty { display:none }