:root {
  --bg: #15181c; --panel: #23282f; --panel2: #2c323a; --edge: #3a414b; --text: #e6e9ee; --muted: #9aa3ad;
  --green: #35e06b; --yellow: #ffd23f; --red: #ff3b3b; --orange: #ff9a1f; --white: #f4f6ff; --blue: #4ea1ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.35 system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
kbd { display: inline-block; min-width: 1.5em; padding: 0 .35em; border: 1px solid #5b6470; border-bottom-width: 2px; border-radius: 4px; background: #11151a; color: #dfe6ee; font: 11px/1.5 ui-monospace, Consolas, monospace; text-align: center; }

#top { display: flex; align-items: center; gap: 16px; padding: 8px 14px; background: linear-gradient(#262c34, #1d2228); border-bottom: 2px solid #0c0e11; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #ff9a1f, #e84a5f); display: grid; place-items: center; font-size: 22px; color: #1a1a1a; font-weight: 900; }
h1 { margin: 0; font-size: 20px; letter-spacing: .18em; }
.subtitle { color: var(--muted); font-size: 12px; }
.kpis { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.kpi { background: #0f1215; border: 1px solid var(--edge); border-radius: 6px; padding: 3px 8px; min-width: 80px; }
.kpi span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi b { font: 600 17px/1.2 ui-monospace, Consolas, monospace; color: #7cf0a0; }
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.speed { display: flex; border: 1px solid var(--edge); border-radius: 6px; overflow: hidden; }
.speed button, .tool { background: #2e353e; color: var(--text); border: 0; padding: 6px 10px; cursor: pointer; font: inherit; }
.speed button + button { border-left: 1px solid var(--edge); }
.speed button.on { background: #3f7d4f; }
.tool { border: 1px solid var(--edge); border-radius: 6px; }
.tool.on { background: #6b4fa3; }

#main { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 10px; padding: 10px 14px 0; }
#view { position: relative; background: #0d1013; border: 2px solid #0a0c0e; border-radius: 8px; overflow: hidden; }
#track { display: block; width: 100%; height: auto; }
#side { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vw * 600 / 1100 * 0.75); min-height: 520px; }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; padding: 8px 10px; }
.card h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.card.grow { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
#log { overflow-y: auto; flex: 1; font: 12px/1.35 ui-monospace, Consolas, monospace; }
#log div { padding: 1px 0; border-bottom: 1px dotted #333a43; }
#log .t { color: #7b8794; margin-right: 6px; }
#log .ok { color: #8ff0ae; } #log .warn { color: #ffd27a; } #log .error { color: #ff8a8a; } #log .info { color: #cfd6de; }
#ready .go { color: #0d1013; background: var(--green); font-weight: 700; padding: 4px 8px; border-radius: 4px; display: inline-block; animation: blink 1s steps(2) infinite; }
#ready ul { margin: 0; padding-left: 18px; color: #ffcf8a; }
#ready li { margin: 1px 0; }
#ready .info { color: var(--muted); font-size: 12px; margin-top: 4px; }
#faults .none { color: var(--muted); }
.fault { border-left: 4px solid var(--red); background: #33242a; padding: 5px 8px; margin-bottom: 6px; border-radius: 4px; }
.fault.fixed { border-color: var(--blue); background: #22303e; }
.fault.tech { border-color: var(--orange); }
.fault b { display: block; color: #ffb0b0; }
.fault.fixed b { color: #a8d1ff; }
.fault .c, .fault .a { font-size: 12px; }
.fault .a { color: #ffe4a3; }
.fault .st { float: right; font-size: 11px; color: var(--muted); }
#checklist { margin: 0; padding-left: 0; list-style: none; font-size: 12.5px; }
#checklist li { padding: 2px 0 2px 22px; position: relative; color: #c9d1da; }
#checklist li::before { content: "○"; position: absolute; left: 4px; color: #6c7782; }
#checklist li.done { color: #7c8a7f; text-decoration: line-through; }
#checklist li.done::before { content: "✔"; color: var(--green); }
#checklist li.next { color: #fff; font-weight: 600; }
#checklist li.next::before { content: "▶"; color: var(--yellow); }
#checklist kbd { float: right; }

#panel { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 14px 16px; }
.group { background: linear-gradient(#2b3139, #23282f); border: 2px solid #11151a; border-radius: 10px; padding: 8px 10px 10px; box-shadow: inset 0 1px 0 #3d4550; }
.group > h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #b9c2cc; border-bottom: 1px solid #3a414b; padding-bottom: 3px; }
.group .btns { display: flex; flex-wrap: wrap; gap: 6px; max-width: 780px; }
.pbtn { position: relative; width: 96px; min-height: 74px; padding: 6px 5px 5px; border-radius: 8px; border: 1px solid #0b0d10; background: linear-gradient(#3a424d, #2a3038); color: var(--text); cursor: pointer; font: 600 11.5px/1.15 system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 2px 0 #0b0d10, inset 0 1px 0 #4d5764; user-select: none; overflow: hidden; }
.pbtn:active { transform: translateY(1px); box-shadow: 0 1px 0 #0b0d10; }
.pbtn .lbl { text-align: center; }
.pbtn .sub { font-weight: 400; font-size: 10.5px; color: var(--muted); text-align: center; min-height: 12px; }
.pbtn kbd { position: absolute; top: 4px; right: 4px; font-size: 9.5px; padding: 0 .25em; min-width: 1.2em; }
.pbtn.estop { background: radial-gradient(circle at 50% 38%, #ff5a4f 0 30%, #b31616 31% 54%, #ffd400 55% 100%); color: #fff; text-shadow: 0 1px 2px #000; width: 110px; }
.pbtn.estop .sub { color: #222; font-weight: 700; }
.pbtn.dispatch { width: 110px; background: linear-gradient(#2f5a3a, #1e3c26); }
.pbtn.wide { width: 120px; }
.pbtn .hold { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--blue); width: 0; }
.lamp { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a616b, #23272c 70%); border: 2px solid #111; flex: none; }
.lamp.green { background: radial-gradient(circle at 35% 30%, #d6ffe2, var(--green) 45%, #128a3a); box-shadow: 0 0 10px var(--green); }
.lamp.yellow { background: radial-gradient(circle at 35% 30%, #fff6cf, var(--yellow) 45%, #a07a00); box-shadow: 0 0 10px var(--yellow); }
.lamp.red { background: radial-gradient(circle at 35% 30%, #ffd0d0, var(--red) 45%, #8a0b0b); box-shadow: 0 0 10px var(--red); }
.lamp.orange { background: radial-gradient(circle at 35% 30%, #ffe2bf, var(--orange) 45%, #9a5300); box-shadow: 0 0 10px var(--orange); }
.lamp.white { background: radial-gradient(circle at 35% 30%, #fff, #dfe5f5 45%, #8b93a6); box-shadow: 0 0 10px #fff; }
.lamp.blue { background: radial-gradient(circle at 35% 30%, #dbeaff, var(--blue) 45%, #164f95); box-shadow: 0 0 10px var(--blue); }
.lamp.blink { animation: blink .9s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; box-shadow: none; } }
.blocklamps { display: grid; grid-template-columns: repeat(7, 46px); gap: 6px 6px; }
.bl { display: flex; flex-direction: column; align-items: center; font: 600 10.5px/1.1 ui-monospace, monospace; color: #c4ccd5; }
.bl .lamp { width: 18px; height: 18px; margin-bottom: 2px; }
.stationinfo { margin-top: 6px; font-size: 12px; color: #cfd6de; background: #12161a; border-radius: 6px; padding: 4px 8px; max-width: 780px; }
.legend { font-size: 11px; color: var(--muted); margin-top: 6px; }

.toast { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); max-width: 80%; padding: 8px 14px; border-radius: 8px; background: #1f2a22; border: 1px solid #3fae63; color: #d8ffe4; font-weight: 600; opacity: 0; transition: opacity .25s; pointer-events: none; text-align: center; }
.toast.err { background: #3a1e1e; border-color: #e05555; color: #ffdede; }
.toast.show { opacity: .96; }

.modal { position: fixed; inset: 0; background: rgba(5, 7, 9, .78); display: none; align-items: center; justify-content: center; z-index: 10; padding: 20px; }
.modal.show { display: flex; }
.modal-box { position: relative; background: #20252c; border: 1px solid var(--edge); border-radius: 12px; max-width: 980px; max-height: 92vh; overflow-y: auto; padding: 18px 24px; box-shadow: 0 10px 40px #000; }
.modal-box h2 { margin-top: 0; }
.modal-box h4 { margin: 12px 0 4px; color: var(--yellow); }
.modal-box ol { padding-left: 20px; margin: 0; }
.modal-box li { margin: 2px 0; }
.modal-box .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.modal-box .note { color: var(--muted); font-size: 12px; }
.modal-box .close { position: absolute; right: 12px; top: 10px; background: none; border: 0; color: var(--text); font-size: 20px; cursor: pointer; }
.modal-box .start { background: #3f9a57; border: 0; color: #fff; font: 700 15px system-ui; padding: 10px 22px; border-radius: 8px; cursor: pointer; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.dot.n { background: #4ea1ff; } .dot.s { background: #c77dff; } .dot.f { background: #ffcc33; }

@media (max-width: 1200px) {
  .modal-box .cols { grid-template-columns: 1fr; }
}

.tool.auto.on { background: #1d4e8f; border-color: #4ea1ff; font-weight: 700; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 12px #4ea1ff; } }
.automode { border-radius: 8px; padding: 6px 10px; font-size: 12.5px; background: var(--panel); border: 1px solid var(--edge); color: #cfd6de; }
.automode.on { background: #142a47; border-color: #4ea1ff; color: #e3efff; }
.automode small { color: var(--muted); }
.targetsel { display: flex; gap: 4px; align-items: center; margin-top: 6px; font-size: 12px; color: #cfd6de; }
.targetsel span { margin-right: 4px; }
.targetsel button { width: 28px; height: 26px; border-radius: 5px; border: 1px solid #0b0d10; background: #2e353e; color: #e6e9ee; font: 700 12px system-ui; cursor: pointer; }
.targetsel button.on { background: #3f7d4f; box-shadow: 0 0 8px #35e06b; }
.storytip { position: absolute; display: none; max-width: 330px; background: #1b1f26f2; border: 1px solid #a8743a; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: #e9e2d6; box-shadow: 0 6px 20px #000; z-index: 5; }
.storytip.show { display: block; }
.storytip b { color: #ffcf8a; }
.storytip p { margin: 4px 0; line-height: 1.4; }
.storytip small { color: var(--muted); }
/* v3: Parkandrang-Leiste, Detailansicht, Seitenwahl */
#crowdbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 14px 0; padding: 7px 12px; background: linear-gradient(#22303c, #1b252e); border: 1px solid #36506a; border-radius: 8px; }
#crowdbar .cb-title { font: 700 12px/1 system-ui, sans-serif; letter-spacing: .14em; color: #9fd0ff; }
#crowdbar .seg { display: flex; border: 1px solid #36506a; border-radius: 7px; overflow: hidden; }
#crowdbar .seg button { background: #24313d; color: #dfe6ee; border: 0; padding: 7px 12px; font: 600 13px system-ui, sans-serif; cursor: pointer; }
#crowdbar .seg button + button { border-left: 1px solid #36506a; }
#crowdbar .seg button small { display: block; font-weight: 400; font-size: 10px; color: #9aa7b4; }
#crowdbar .seg button.on { background: linear-gradient(#2f7cc4, #22609a); color: #fff; }
#crowdbar .seg button.on small { color: #dcecff; }
#crowdbar label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c4ced8; }
#crowdbar input[type=range] { accent-color: #4ea1ff; }
#crowdbar .cb-slider input { width: 150px; }
#crowdbar .cb-share input { width: 70px; }
#crowdbar b { font: 600 13px ui-monospace, Consolas, monospace; color: #7cf0a0; min-width: 4.5em; display: inline-block; }
#crowdbar .cb-ist, #crowdbar .cb-auto { font-size: 12px; color: #c4ced8; background: #121a21; border-radius: 6px; padding: 4px 8px; }
#detail { display: block; width: 100%; height: auto; border-top: 2px solid #0a0c0e; }
.group.sel { border-color: #4ea1ff; box-shadow: 0 0 0 2px #4ea1ff55, inset 0 1px 0 #3d4550; }
.group .sidetag { float: right; font-size: 10px; color: #4ea1ff; letter-spacing: .05em; }
#ready .sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#ready .sides > div { background: #12161a; border-radius: 6px; padding: 4px 6px; font-size: 12px; }
#ready .sides h5 { margin: 0 0 3px; font-size: 11px; letter-spacing: .08em; color: #9fd0ff; }
#ready .sides .go { font-size: 11px; padding: 2px 5px; }
#ready .sides ul { padding-left: 14px; font-size: 11.5px; }
#crowdbar .cb-share b { min-width: 2.6em; } #crowdbar .cb-slider b { min-width: 5em; }

/* ===================== v4.1 Ein-Bildschirm-Layout: alles ohne Scrollen (nach Vorbild Jungle Rapids) ===================== */
:root { --bw: 70px; --bh: 52px; --bfs: 10.2px; --lamp: 12px; --sidew: calc(8 * var(--bw) + 58px); }
html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; }
#top { flex: none; padding: 4px 10px; gap: 10px; flex-wrap: nowrap; }
.logo { width: 30px; height: 30px; font-size: 18px; }
h1 { font-size: 16px; letter-spacing: .14em; }
.subtitle { font-size: 10.5px; }
.kpis { flex-wrap: nowrap; gap: 4px; min-width: 0; overflow: hidden; }
.kpi { min-width: 0; padding: 2px 6px; }
.kpi span { font-size: 9px; white-space: nowrap; }
.kpi b { font-size: 14px; white-space: nowrap; }
.tools { flex-wrap: nowrap; gap: 6px; }
.speed button, .tool { padding: 4px 8px; font-size: 12.5px; white-space: nowrap; }
#crowdbar { flex: none; margin: 4px 10px 0; padding: 3px 10px; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
#crowdbar .seg button { padding: 3px 9px; font-size: 12px; }
#crowdbar .seg button small { font-size: 9px; }
#crowdbar .cb-slider input { width: 120px; }
#crowdbar .cb-share input { width: 60px; }
#crowdbar label, #crowdbar .cb-ist, #crowdbar .cb-auto, #crowdbar .cb-title { white-space: nowrap; font-size: 11.5px; }
#crowdbar .cb-ist, #crowdbar .cb-auto { padding: 2px 6px; }

#main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--sidew); gap: 8px; padding: 6px 10px 8px; }
#view { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#viewbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 3px 6px; background: #12161b; border-bottom: 1px solid #0a0c0e; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.vtool { background: #2a323c; color: var(--text); border: 1px solid #3f4955; border-radius: 5px; padding: 2px 8px; font: 600 11.5px system-ui, sans-serif; cursor: pointer; }
.vtool.on { background: #24507e; border-color: #4ea1ff; }
.vtool kbd { font-size: 9.5px; margin-left: 4px; }
.vhint { overflow: hidden; text-overflow: ellipsis; }
#stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
#track, #detail { width: auto; height: auto; flex: none; display: block; }
#detail.off { display: none; }

#side { min-height: 0; max-height: none; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.automode { flex: none; padding: 4px 8px; font-size: 11.5px; line-height: 1.3; }
.automode.hand { border-color: #ffd23f; }
.automode .ovr { display: block; margin-top: 2px; color: #ffd96a; font-weight: 600; }
.ovrchip { background: #4a3d10; color: #ffe9a6; border: 1px solid #ffd23f; border-radius: 4px; padding: 0 5px; font: 600 10.5px system-ui, sans-serif; cursor: pointer; margin: 1px 2px 0 0; }
.ovrchip:hover { background: #6b5716; }
#panel { flex: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 0; align-content: flex-start; }
.group { padding: 2px 5px 5px; border-width: 1px; border-radius: 7px; flex: 1 1 auto; }
.group > h4 { margin: 0 0 3px; padding-bottom: 1px; font-size: 9.5px; letter-spacing: .1em; white-space: nowrap; overflow: hidden; }
.group .btns { gap: 4px; max-width: none; }
.group .sidetag { font-size: 9px; }
.pbtn, .pbtn.wide, .pbtn.dispatch, .pbtn.estop { width: var(--bw); min-height: var(--bh); height: var(--bh); padding: 3px 3px 2px; gap: 1px; font-size: var(--bfs); line-height: 1.08; border-radius: 6px; }
.pbtn.hand { box-shadow: 0 0 0 2px #ffd23f, 0 2px 0 #0b0d10; }
.pbtn .lamp { width: var(--lamp); height: var(--lamp); border-width: 1px; }
.pbtn .lbl { white-space: normal; overflow: hidden; }
.pbtn .sub { font-size: calc(var(--bfs) - 1.5px); min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pbtn.hand .sub { color: #ffd96a; font-weight: 700; }
.pbtn kbd { top: 2px; right: 2px; font-size: 8.5px; line-height: 1.25; }
.targetsel { margin: 3px 0 0; gap: 2px; font-size: 10.5px; flex-wrap: nowrap; }
.targetsel button { width: calc((3 * var(--bw) + 8px - 14px) / 8); min-width: 16px; height: 20px; font-size: 10.5px; padding: 0; }

.tabs { flex: 1; min-height: 110px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; }
.tabbar { flex: none; display: flex; border-bottom: 1px solid var(--edge); background: #1b2026; }
.tabbar button { flex: 1; background: none; border: 0; border-right: 1px solid #2f363f; color: var(--muted); font: 600 11px system-ui, sans-serif; padding: 4px 2px; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tabbar button:last-child { border-right: 0; }
.tabbar button.on { background: var(--panel); color: #fff; box-shadow: inset 0 -2px 0 #4ea1ff; }
.tabbar button.alert { color: #ff8a8a; animation: blink 1s steps(2) infinite; }
#faultcount { color: #ff8a8a; }
.tabpane { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 5px 8px; font-size: 12px; }
.tabpane.on { display: block; }
#tab-log.on { display: flex; flex-direction: column; }
#tab-blocks .group { border: 0; background: none; box-shadow: none; padding: 0; }
.blocklamps { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; }
.stationinfo { margin-top: 5px; max-width: none; font-size: 11.5px; }

/* große Bildschirme (1920×1080): großzügigere Tasten */
@media (min-width: 1800px) and (min-height: 1000px) {
  :root { --bw: 84px; --bh: 60px; --bfs: 11px; --lamp: 14px; }
  .kpi b { font-size: 16px; }
}
/* kleine Bildschirme (1366×768 u. ä.) */
@media (max-width: 1500px), (max-height: 860px) {
  :root { --bw: 60px; --bh: 46px; --bfs: 9.5px; --lamp: 10px; }
  #panel { gap: 4px; }
  .group { padding: 1px 5px 4px; }
  .group .btns { gap: 3px; }
  #side { gap: 4px; }
  #main { padding: 4px 8px 6px; gap: 6px; }
  .automode { padding: 2px 6px; font-size: 10.5px; }
  .automode small { display: none; }
  #top { padding: 2px 8px; }
  .subtitle { display: none; }
  .kpi span { font-size: 8.5px; }
  .kpi b { font-size: 12.5px; }
  #crowdbar .seg button small { display: none; }
  #crowdbar .cb-title kbd, .vhint { display: none; }
  .group > h4 { font-size: 9px; margin-bottom: 2px; }
  .targetsel button { height: 18px; font-size: 10px; }
}
@media (max-width: 1400px) {
  .kpi:nth-child(5), .kpi:nth-child(6) { display: none; }
  #crowdbar .cb-ist { display: none; }
  #crowdbar .cb-slider input { width: 90px; }
  #crowdbar .cb-share input { width: 46px; }
}
/* Tastenbeschriftung: Lampe oben links, Taste oben rechts, Text darunter mit Silbentrennung */
#panel .pbtn { justify-content: flex-start; padding-top: calc(var(--lamp) + 5px); }
#panel .pbtn .lamp { position: absolute; top: 3px; left: 3px; }
#panel .pbtn .lbl { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; line-height: 1.12; max-height: 2.3em; flex: none; }
#panel .pbtn .sub { line-height: 1.05; }
#panel .pbtn.estop .lamp { left: 50%; transform: translateX(-50%); }
@media (max-width: 1500px), (max-height: 860px) {
  #panel .pbtn { padding: 12px 2px 1px; }
  #panel .pbtn .lamp { top: 2px; left: 2px; width: 9px; height: 9px; }
  #panel .pbtn .lbl { font-size: 9px; letter-spacing: -.01em; line-height: 1.1; max-height: 2.2em; }
  #panel .pbtn .sub { font-size: 8px; line-height: 1; margin-top: 1px; }
  #panel .pbtn kbd { font-size: 8px; line-height: 1.1; top: 1px; right: 1px; }
}