:root{
  --bg:#F3F5F8;--panel:#FFFFFF;--line:#E1E6ED;--line2:#EEF1F5;--text:#1B1F24;--muted:#4A5563;--accent:#1D4FB8;--accent2:#163C8C;
  --gruen:#2E7D32;--gelb:#E3A008;--rot:#B3261E;--hkp:#2457C5;--grund:#5B6B7A;--hw:#1F7A53;--sonder:#8A6D3B;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
button,select,input{font:inherit}
button{cursor:pointer}
.btn{border:1px solid #C9D0DA;background:#fff;color:var(--text);border-radius:8px;padding:0 12px;min-height:34px}
.btn:hover{background:#EEF2F7}
.btn:disabled{opacity:.5;cursor:default}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}.btn-p:hover{background:var(--accent2)}
.btn-warn{border-color:var(--rot);color:#9B1F18;font-weight:600}.btn-warn:hover{background:#FDF0EF}
.btn-klein{min-height:28px;font-size:12px;padding:0 8px}
.pill{border:1px solid #C9D0DA;background:#fff;border-radius:999px;padding:0 12px;min-height:32px;font-size:13px}
.pill.an{background:var(--text);border-color:var(--text);color:#fff}
.pill.wartet{border-style:dashed;color:var(--muted)}
a{color:var(--accent)}
header{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line)}
header .titel{font-size:18px;font-weight:700;margin-right:6px}
header .gruppe{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
header .rechts{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.layout{display:grid;grid-template-columns:280px minmax(0,1fr) 350px;gap:12px;padding:12px;height:calc(100vh - 58px)}
.layout.ohne-links{grid-template-columns:40px minmax(0,1fr) 350px}
.layout.ohne-rechts{grid-template-columns:280px minmax(0,1fr) 40px}
.layout.ohne-links.ohne-rechts{grid-template-columns:40px minmax(0,1fr) 40px}
.klapp{align-self:flex-start;flex:none}
#rechts .klapp{align-self:flex-end}
.layout.ohne-links #links>:not(.klapp),.layout.ohne-rechts #rechts>:not(.klapp){display:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.spalte{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}
h2{font-size:14px;margin:0 0 8px;font-weight:700}
h3{font-size:13px;margin:10px 0 6px;font-weight:600}
.muted{color:var(--muted)}.klein{font-size:12px}
/* Zieldreieck */
.dreieck{position:relative;width:100%;aspect-ratio:260/240;user-select:none;touch-action:none}
.dreieck svg{position:absolute;inset:0;width:100%;height:100%}
.dreieck .ecke{position:absolute;font-size:12px;font-weight:600}
.dreieck .punkt{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none}
.balken{height:6px;background:#E6EBF2;border-radius:3px;margin:3px 0 2px}.balken>div{height:6px;background:var(--accent);border-radius:3px}
/* Zeitleiste */
.zeitleiste{display:flex;flex-direction:column;min-height:0;padding:0}
.zl-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
.zl-scroll{overflow:auto;flex:1;min-height:0;position:relative}
.zl-inner{position:relative;min-width:900px}
.achse,.zeile,.engpass-zeile{display:grid;grid-template-columns:230px minmax(0,1fr)}
.achse{position:sticky;top:0;background:#fff;z-index:3;border-bottom:1px solid var(--line);height:24px}
.achse .spur{position:relative}
.achse .tick{position:absolute;top:4px;font-size:11px;color:var(--muted);transform:translateX(-50%)}
.zeile{border-bottom:1px solid var(--line2);min-height:54px}
.zeile.gruppe{min-height:0;background:#F7F9FB;font-size:12px;font-weight:700;color:var(--muted);padding:4px 10px;display:block;position:sticky;left:0}
.zeile .kopf{padding:5px 10px;border-right:1px solid var(--line2);position:sticky;left:0;background:#fff;z-index:2;cursor:pointer}
.zeile.ausgewaehlt .kopf{background:#EEF3FB}
.zeile .kopf .n{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeile .kopf .q{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeile .kopf .t{font-size:11px}
.zeile .kopf .t.rot{color:var(--rot);font-weight:600}
.zeile .spur{position:relative;background-image:linear-gradient(to right,#E9EDF2 1px,transparent 1px);background-size:var(--stunde) 100%}
.zeile .spur.drop{background-color:#EEF3FB}
.dienst{position:absolute;top:3px;bottom:3px;background:#F1F4F9;border-radius:5px}
.tourlinie{position:absolute;bottom:2px;height:3px;border-radius:2px;background:#9AA5B4}
.tourlinie.rot{background:var(--rot)}
.blk{position:absolute;top:7px;height:38px;border-radius:5px;color:#fff;font-size:11px;line-height:13px;padding:3px 4px;overflow:hidden;border:0;text-align:left;cursor:pointer;white-space:nowrap}
.blk.hkp{background:var(--hkp)}.blk.grund{background:var(--grund)}.blk.hw{background:var(--hw)}.blk.sonder{background:var(--sonder)}
.blk.sel{outline:3px solid var(--text);outline-offset:1px;z-index:1}
.blk.versp{box-shadow:inset 0 0 0 2px #FFB4AB}
.blk .pin{position:absolute;top:2px;right:2px;width:9px;height:9px}
.blk b{font-weight:600}
.engpass-zeile{border-top:1px solid var(--line);position:sticky;bottom:0;background:#fff;z-index:3}
.engpass-zeile .kopf{padding:6px 10px;font-size:12px;border-right:1px solid var(--line2)}
.engpass-zeile .spur{position:relative;height:70px}
.ep{position:absolute;bottom:0;border-radius:2px 2px 0 0}
.ep-linie{position:absolute;left:0;right:0;border-top:1px dashed var(--muted)}
/* Statusleiste */
.feld{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 8px;font-size:13px}
.feld>span:nth-child(odd){color:var(--muted)}
.ampel{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.kz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kz>div{border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.kz .w{font-size:17px;font-weight:700}
.kz .d{font-size:11px}
.gut{color:#1E6B34}.schlecht{color:var(--rot)}
.liste{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.liste .e{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;cursor:pointer}
.liste .e:hover{background:#F7F9FB}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:4px 0;cursor:pointer}
.check input{width:17px;height:17px;margin:1px 0 0}
.hinweis{background:#F3F5F8;border-radius:8px;padding:8px 10px;font-size:13px}
.vorschau{border:2px solid var(--accent);border-radius:10px;padding:10px;background:#F7FAFF}
.banner{margin:12px 12px 0;border-radius:10px;padding:10px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.banner.gelb{background:#FFF4D6;border:1px solid #E8C766}
.banner.blau{background:#EEF3FB;border:1px solid #BFD0F0}
.modal-bg{position:fixed;inset:0;background:rgba(20,24,30,.35);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:14px;padding:16px 18px;width:min(920px,94vw);max-height:88vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal table{border-collapse:collapse;width:100%;font-size:13px}
.modal th,.modal td{border-bottom:1px solid var(--line2);padding:6px 8px;text-align:left}
.modal th{font-weight:600;color:var(--muted)}
.tooltip{position:fixed;z-index:60;background:#1B1F24;color:#fff;font-size:12px;border-radius:6px;padding:6px 8px;pointer-events:none;max-width:320px}
.lade{position:fixed;right:16px;bottom:16px;background:#1B1F24;color:#fff;border-radius:8px;padding:8px 12px;font-size:13px;z-index:70}
@media (max-width:1100px){.layout{grid-template-columns:1fr;height:auto}.spalte{overflow:visible}.zeitleiste{min-height:70vh}}
.blk{cursor:grab;touch-action:none}
body.zieht,body.zieht *{cursor:grabbing!important;user-select:none}
.geist{position:fixed!important;z-index:80;pointer-events:none;opacity:.9;top:0;left:0;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.zeile .spur.drop{background-color:#DCE7FA;outline:2px dashed var(--accent);outline-offset:-2px}
.modal.breit{width:min(1280px,96vw)}
.vg-titel{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.vg{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:900px}
.vg-kopf{padding:12px 14px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.vg-name{font-size:15px;font-weight:700}
.vg-bar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}.vg-bar span{display:block;height:8px}
.vg-label{padding:9px 14px;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:1px;font-size:13px}
.vg-zelle{padding:9px 14px;border-left:1px solid var(--line);border-bottom:1px solid var(--line2);font-size:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vg-zelle span{font-size:12px}
.vg-kopf.an,.vg-zelle.an{background:#F2F6FD}
.fb{position:fixed;right:12px;bottom:12px;width:min(400px,94vw);height:min(620px,80vh);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;z-index:55}
.fb[hidden]{display:none}
.fb-kopf{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.fb-liste{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.fb-msg{background:#F3F5F8;border-radius:10px;padding:8px 10px;font-size:13px;max-width:92%}
.fb-msg.eigen{background:#E6EEFB;align-self:flex-end}
.fb-eingabe{border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.fb-eingabe input,.fb-eingabe select,.fb-eingabe textarea{border:1px solid #C9D0DA;border-radius:8px;padding:6px 8px;font:inherit}

/* Beta 0.3 */
body:not(.erweitert) .nur-erw{display:none!important}
.notfall-banner{margin:12px 12px 0;border-radius:10px;padding:10px 14px;background:#FDECEA;border:2px solid var(--rot);color:#7A1A14;font-size:13px}
.notfall-check{border:1px solid #E8B4AF;background:#FDF5F4;border-radius:8px;padding:8px;margin-top:10px}
.haus{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;color:#4A5563;z-index:1;pointer-events:auto}
.haus svg{width:14px;height:14px;display:block}
.haus.ende{margin-left:-7px}
.kreuz{position:absolute;top:2px;margin-left:10px;color:var(--rot);font-weight:800;font-size:15px;z-index:1}
.kreuz-k{color:var(--rot);font-weight:800}
.blk.fremd{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 4px,transparent 4px 9px)}
.fremd-muster{display:inline-block;width:18px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--grund) repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 3px,transparent 3px 7px)}
.regler{margin:8px 0}
.regler-kopf{display:flex;align-items:center;gap:6px;font-size:13px}
.regler-kopf label{flex:1}
.regler-wert{font-variant-numeric:tabular-nums;font-weight:600}
.regler input[type=range]{width:100%}
.schloss{border:1px solid #C9D0DA;background:#fff;border-radius:6px;width:28px;height:26px;padding:0;font-size:13px}
.schloss.an{background:#EEF3FB;border-color:var(--accent)}
#netz{width:100%;height:auto;display:block}
.verschieben{display:flex;gap:6px;flex-wrap:wrap}
.verschieben select{flex:1;min-width:0}
.verschieben select,.verschieben input,.formular input,.formular select{border:1px solid #C9D0DA;border-radius:8px;padding:5px 8px;min-height:34px;background:#fff}
.formular{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 10px;align-items:center;font-size:13px}
.vn{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.vn h3{margin-top:0}
.vn-gewinn{font-size:16px;font-weight:700;color:#1E6B34;margin:4px 0 8px}
.vn-gewinn.schlecht{color:var(--rot)}
.tab{border-collapse:collapse;width:100%}
.tab th,.tab td{border-bottom:1px solid var(--line2);padding:4px 6px;text-align:left}
.tab th{color:var(--muted);font-weight:600}
.liste .e.rot{border-color:#E8B4AF}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login form{width:min(360px,100%);display:flex;flex-direction:column;gap:6px}
.login h1{font-size:22px;margin:0}
.login input,.login-klein input{border:1px solid #C9D0DA;border-radius:8px;padding:8px 10px;min-height:38px}
.login .btn{min-height:40px;margin-top:8px}
.feldlabel{font-size:13px;color:var(--muted);margin-top:6px}
.meldung{background:#FDECEA;border:1px solid #E8B4AF;color:#7A1A14;border-radius:8px;padding:8px 10px;font-size:13px;margin-top:6px}
.admin{max-width:1100px;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.login-klein{max-width:380px;display:flex;flex-direction:column;gap:8px}
.admin-felder{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:6px 12px;align-items:center;font-size:13px}
.admin-felder input,.admin-felder select,.tab input{border:1px solid #C9D0DA;border-radius:6px;padding:4px 6px;min-height:30px;max-width:130px}
.admin-felder input[type=checkbox],.tab input[type=checkbox]{min-height:0;width:17px;height:17px}
.admin-leiste{position:sticky;bottom:0;background:var(--bg);padding:8px 0;display:flex;justify-content:flex-end;align-items:center;gap:12px}
@media (max-width:700px){.admin-felder,.formular{grid-template-columns:1fr}}