: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 }
#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; border-radius:0; box-shadow:none; background:transparent; color:var(--mute); padding:12px 4px; font-size:12px; 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 }

/* 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 }