:root{
  --bg:#14181f; --panel:#1b212a; --panel2:#20272f; --line:#2c3441; --line2:#3a4353;
  --text:#e9e7df; --muted:#8b93a3; --accent:#c9a227; --accent-soft:#c9a22733; --danger:#d9695a;
  --radius:10px; --side:380px; --top:58px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:14px; line-height:1.45;
  display:flex; flex-direction:column; overflow:hidden;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
}
h1,h2{font-family:'Fraunces',serif; font-weight:600; margin:0;}
h3{font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin:20px 0 8px; font-weight:600;}
h3:first-child{margin-top:0;}
a{color:var(--accent);}

/* Kopfzeile */
.top{height:var(--top); flex:none; display:flex; align-items:center; gap:18px; padding:0 18px; border-bottom:1px solid var(--line); background:var(--panel);}
.brand{display:flex; align-items:baseline; gap:12px; min-width:0;}
.brand h1{font-size:20px; white-space:nowrap;}
.sub{color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.searchwrap{position:relative; flex:1 1 320px; max-width:460px; margin-left:auto;}
.top-actions{display:flex; gap:8px;}

/* Formularelemente */
input[type=text],input[type=search],select,textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:7px; padding:7px 10px; font:inherit; font-size:13.5px;
}
textarea{resize:vertical; min-height:70px;}
input:focus,select:focus,textarea:focus,button:focus-visible,.btn:focus-within{outline:2px solid var(--accent); outline-offset:1px;}
button,.btn{
  background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:7px; padding:7px 12px; font:inherit; font-size:13.5px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; position:relative; overflow:hidden; white-space:nowrap;
}
button:hover,.btn:hover{border-color:var(--accent);}
button:disabled{opacity:.4; cursor:default; border-color:var(--line);}
.btn input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; font-size:0;}
.primary{background:var(--accent); border-color:var(--accent); color:#1a1608; font-weight:600;}
.primary:hover{filter:brightness(1.08);}
.danger{color:var(--danger);}
.danger:hover{border-color:var(--danger);}
.small{padding:4px 10px; font-size:12.5px;}
.wide{width:100%; margin-top:8px;}
.row{display:flex; gap:8px; margin:8px 0; flex-wrap:wrap;}
.row>input{flex:1; min-width:0; width:auto;}
.check{display:flex; align-items:center; gap:8px; margin:8px 0; font-size:13.5px; cursor:pointer;}
.check input{accent-color:var(--accent);}
.field{margin:10px 0;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px;}
.hint{color:var(--muted); font-size:12.5px; line-height:1.5; margin:6px 0;}

/* Hauptbereich */
main{flex:1; min-height:0; display:flex;}
.stage{flex:1; min-width:0; position:relative; background:radial-gradient(circle at 50% 40%, #1a2029 0%, var(--bg) 70%);}
#cv{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none;}
#cv.pointer{cursor:pointer;}
#cv.crosshair{cursor:crosshair;}
.side{width:var(--side); flex:none; border-left:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; min-height:0;}

/* Schwebende Leisten */
.floatbar{position:absolute; display:flex; gap:4px; padding:4px; background:#1b212acc; backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:9px; z-index:3;}
.floatbar.tl{top:12px; left:12px;}
.floatbar.tr{top:12px; right:12px;}
.floatbar button{border:0; background:transparent; padding:6px 11px;}
.floatbar button:hover{background:var(--panel2);}
.floatbar .seg.active{background:var(--accent-soft); color:var(--accent);}
.floatbar .sep{width:1px; background:var(--line); margin:3px 2px;}

.legend{position:absolute; left:12px; bottom:12px; max-width:260px; max-height:40%; overflow:auto; background:#1b212acc; backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:9px; padding:8px 10px; z-index:3; font-size:12.5px;}
.legend:empty{display:none;}
.legend .li{display:flex; align-items:center; gap:8px; padding:2px 4px; border-radius:5px; cursor:pointer;}
.legend .li:hover{background:var(--panel2);}
.legend .li.on{background:var(--accent-soft);}
.legend .li small{color:var(--muted); margin-left:auto; padding-left:8px;}
.legend .grad{height:8px; border-radius:4px; background:linear-gradient(90deg,#3b4a63,#f0c93d); margin:4px 0;}
.dot{width:10px; height:10px; border-radius:50%; flex:none;}

.toast{position:absolute; left:50%; bottom:18px; transform:translate(-50%,10px); background:var(--panel2); border:1px solid var(--accent); color:var(--text); padding:8px 14px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:.25s; z-index:6; max-width:80%; text-align:center;}
.toast.show{opacity:1; transform:translate(-50%,0);}
.tip{position:absolute; z-index:5; pointer-events:none; background:var(--panel2); border:1px solid var(--line2); border-radius:8px; padding:6px 10px; font-size:12.5px; max-width:260px;}
.tip b{display:block;}
.tip span{color:var(--muted);}

.banner{position:absolute; right:12px; bottom:12px; z-index:4; display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--panel2); border:1px solid var(--accent); border-radius:10px; padding:10px 12px; font-size:13px; max-width:340px;}
.empty{position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:20px;}
.empty-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 28px; max-width:460px; text-align:center;}
.empty-card h2{font-size:22px; margin-bottom:8px;}
.empty-card p{color:var(--muted); margin:0 0 16px;}
.empty-card .row{justify-content:center;}
.drop{position:absolute; inset:10px; z-index:8; border:2px dashed var(--accent); border-radius:14px; background:#14181fe6; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:24px; color:var(--accent); pointer-events:none;}
[hidden]{display:none !important;}

/* Seitenleiste */
.tabs{display:flex; border-bottom:1px solid var(--line); flex:none;}
.tabs button{flex:1; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; padding:12px 4px; color:var(--muted);}
.tabs button:hover{color:var(--text);}
.tabs button.active{color:var(--accent); border-bottom-color:var(--accent);}
.pane{display:none; padding:16px 18px 28px; overflow:auto; flex:1; min-height:0;}
.pane.active{display:block;}

/* Ergebnislisten (Suche/Picker) */
.results{position:absolute; left:0; right:0; top:100%; margin-top:4px; background:var(--panel2); border:1px solid var(--line2); border-radius:8px; z-index:20; max-height:320px; overflow:auto; box-shadow:0 10px 30px #0008;}
.results button{display:block; width:100%; text-align:left; border:0; border-radius:0; background:transparent; padding:8px 12px; white-space:normal;}
.results button:hover,.results button.cur{background:var(--accent-soft);}
.results small{color:var(--muted); display:block;}
.results .none{padding:8px 12px; color:var(--muted); font-size:13px;}

/* Details */
.dhead{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.avatar{width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:600; color:#14181f;}
.dhead h2{font-size:19px; line-height:1.2;}
.dhead small{color:var(--muted);}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0;}
.chip{background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:12px; color:var(--muted);}
.neigh{margin:6px 0; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.neigh .n{display:flex; align-items:center; gap:6px; padding:5px 8px; border-bottom:1px solid var(--line); font-size:13px;}
.neigh .n:last-child{border-bottom:0;}
.neigh .n a{flex:1; color:var(--text); text-decoration:none; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.neigh .n a:hover{color:var(--accent);}
.neigh .n small{color:var(--muted);}
.neigh .n button{padding:0 7px; border:0; background:transparent; color:var(--muted); font-size:16px; line-height:1.4;}
.neigh .n button:hover{color:var(--danger);}
.relwrap{position:relative;}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0;}

/* Pfad */
.slot{position:relative; margin:12px 0;}
.slot label{font-size:12px; color:var(--muted); display:block; margin-bottom:4px;}
.slot-val{min-height:30px; display:flex; align-items:center; gap:6px; margin-bottom:6px; font-weight:500;}
.slot-val .x{margin-left:auto; padding:0 7px; border:0; background:transparent; color:var(--muted);}
.path-big{font-family:'Fraunces',serif; font-size:24px; color:var(--accent); margin:14px 0 4px;}
.path-chain{margin:10px 0;}
.path-step{display:flex; gap:10px; align-items:stretch;}
.path-step .rail{display:flex; flex-direction:column; align-items:center; width:14px;}
.path-step .rail i{width:12px; height:12px; border-radius:50%; background:var(--accent); flex:none;}
.path-step .rail s{flex:1; width:2px; background:var(--accent); opacity:.5; min-height:14px;}
.path-step .who{padding-bottom:12px; cursor:pointer;}
.path-step .who b{font-weight:600;}
.path-step .who small{display:block; color:var(--muted);}
.path-step .who:hover b{color:var(--accent);}

/* Analyse */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.kpi{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:10px 8px; text-align:center;}
.kpi b{display:block; font-family:'Fraunces',serif; font-size:22px; color:var(--accent);}
.kpi span{font-size:11.5px; color:var(--muted);}
.rank .r{display:flex; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px solid var(--line); cursor:pointer; font-size:13px;}
.rank .r:hover{background:var(--panel2);}
.rank .r span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rank .r small{color:var(--muted);}
.bar{height:5px; border-radius:3px; background:var(--accent); opacity:.7; margin-top:3px;}

/* Cluster */
.cat{display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line);}
.cat input[type=color]{width:26px; height:26px; padding:0; border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer;}
.cat span{flex:1;}
.cat small{color:var(--muted);}
.cat button{padding:0 8px; border:0; background:transparent; font-size:16px; color:var(--muted);}
.cat button:hover{color:var(--danger);}

/* Mobil: Seitenleiste unter den Graph */
@media (max-width:900px){
  body{overflow:auto;}
  .top{flex-wrap:wrap; height:auto; padding:10px 14px; gap:8px 14px;}
  .searchwrap{flex-basis:100%; max-width:none; order:3; margin:0;}
  .sub{display:none;}
  main{flex-direction:column; flex:none;}
  .stage{height:62vh; min-height:360px; flex:none;}
  .side{width:auto; border-left:0; border-top:1px solid var(--line);}
  .pane{overflow:visible;}
  .legend{display:none;}
}
@media (prefers-reduced-motion:reduce){ .toast{transition:none;} }

.sync{font-size:12.5px; padding:5px 11px; color:var(--muted); white-space:nowrap;}
.sync::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--muted);}
.sync.ok{color:#7bbf8a;} .sync.ok::before{background:#7bbf8a;}
.sync.busy{color:var(--accent);} .sync.busy::before{background:var(--accent);}
.sync.err{color:var(--danger);} .sync.err::before{background:var(--danger);}
@media (max-width:900px){ .top-actions{margin-left:auto;} }

/* Aussortieren */
.badge{background:var(--accent); color:#1a1608; border-radius:999px; font-size:11px; font-weight:600; padding:0 7px; line-height:17px; min-width:18px; text-align:center;}
.modal{position:fixed; inset:0; z-index:50; background:#0a0d12cc; display:flex; align-items:center; justify-content:center; padding:16px;}
.modal-box{width:100%; max-width:460px; max-height:100%; background:var(--panel); border:1px solid var(--line2); border-radius:16px; display:flex; flex-direction:column; box-shadow:0 20px 60px #000a; overflow:hidden;}
.modal-head{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.modal-head h2{font-size:18px; flex:1 1 auto;}
.modal-head .x{border:0; background:transparent; font-size:22px; line-height:1; padding:2px 8px; color:var(--muted);}
.modal-head .x:hover{color:var(--text);}
.mtabs{display:flex; gap:4px; order:3; flex-basis:100%;}
.mtabs button{flex:1; background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--muted); padding:6px;}
.mtabs button.active{color:var(--accent); border-bottom-color:var(--accent);}
.rv-pane{display:none; padding:14px 16px 16px; overflow:auto; min-height:0;}
.rv-pane.active{display:block;}
.rv-progress{margin-bottom:12px;}
.rv-bar{height:4px; border-radius:2px; background:var(--line); overflow:hidden;}
.rv-bar i{display:block; height:100%; background:var(--accent); width:0; transition:width .25s;}
.rv-progress small{color:var(--muted); font-size:12px;}
.rv-deck{position:relative; height:min(420px,52vh); margin:6px 0 14px;}
.rv-card{position:absolute; inset:0; background:var(--panel2); border:1px solid var(--line2); border-radius:16px; display:flex; flex-direction:column; overflow:hidden; user-select:none;}
.rv-card.cur{touch-action:pan-y; cursor:grab; z-index:2; transition:transform .2s;}
.rv-card.cur:active{cursor:grabbing;}
.rv-card.back{transform:scale(.95) translateY(10px); opacity:.7;}
.rv-photo{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:84px; font-weight:600; color:#14181f; pointer-events:none;}
.rv-info{padding:14px 18px 18px;}
.rv-info h2{font-size:23px; line-height:1.2;}
.rv-pos{margin-top:4px; font-weight:500;}
.rv-co{color:var(--muted);}
.rv-info small{display:block; color:var(--muted); margin-top:4px;}
.rv-info a{display:inline-block; margin-top:6px; font-size:13px;}
.rv-stamp{position:absolute; top:22px; padding:3px 12px; border:3px solid; border-radius:8px; font-weight:700; font-size:20px; letter-spacing:1px; text-transform:uppercase; opacity:0; pointer-events:none; background:#14181fcc;}
.rv-stamp.keep{left:18px; color:#7bbf8a; transform:rotate(-12deg);}
.rv-stamp.remove{right:18px; color:var(--danger); transform:rotate(12deg);}
.rv-actions{display:flex; align-items:center; justify-content:center; gap:18px;}
.rv-btn{flex-direction:column; width:84px; height:64px; border-radius:14px; font-size:24px; line-height:1; gap:2px;}
.rv-btn span{font-size:11.5px;}
.rv-btn.yes{color:#7bbf8a;} .rv-btn.yes:hover{border-color:#7bbf8a;}
.rv-btn.no{color:var(--danger);} .rv-btn.no:hover{border-color:var(--danger);}
.rv-btn.undo{width:44px; height:44px; border-radius:50%; font-size:18px; padding:0;}
.rv-hint{text-align:center; margin-top:14px;}
.rv-done{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; border:1px dashed var(--line2); border-radius:16px;}
.rv-done p{color:var(--muted); margin:0 0 6px;}
.rv-list-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:var(--muted); font-size:13px;}
.rv-row{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line);}
.rv-who{flex:1; min-width:0;}
.rv-who b{display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rv-who small{display:block; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.avatar.sm{width:32px; height:32px; font-size:12px;}
@media (max-width:900px){ .top-actions{flex-wrap:wrap; justify-content:flex-end;} }
.rv-card.back>*{visibility:hidden;}

dialog{background:var(--panel); color:var(--text); border:1px solid var(--line2); border-radius:12px; padding:20px 22px; width:min(340px,90vw);}
dialog::backdrop{background:#0009;}
dialog h2{font-size:19px; margin-bottom:4px;}
dialog .row{justify-content:flex-end; margin-bottom:0;}

.rv-row.done .rv-who{opacity:.45; text-decoration:line-through;}
.rv-row.cur{background:var(--accent-soft); border-radius:6px;}
.rv-row .btn.small{padding:4px 9px;}