:root{
  --bg:#f4f5f7; --pane:#fff; --line:#dfe3e8; --ink:#243044; --muted:#6b7280;
  --accent:#ff5500; --accent-soft:#fff0e8;        /* SWOP-CI Orange */
  --navy:#243044;
  --wichtig:#2e7d32; --dringend:#c62828; --gute_idee:#0e8a9c; --roadmap:#5b53c7;
  --unwichtig:#9e9e9e; --unklar:#f59e0b; --kein:#90a4ae;
  --r:8px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1em;color:var(--ink);background:var(--bg);display:flex;flex-direction:column}

/* ---- Gate ---- */
body.gate{align-items:center;justify-content:center}
.gate-box{background:var(--pane);padding:2.5em;border-radius:var(--r);box-shadow:0 6px 24px rgba(0,0,0,.08);max-width:30em;text-align:center;border-top:4px solid var(--accent)}
.gate-box .gate-logo{height:42px;width:auto;margin-bottom:1em}
.gate-box h1{margin-top:0;color:var(--navy);font-size:1.4em}
.gate-box .err{color:var(--dringend)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6em 1.2em;border-radius:var(--r);text-decoration:none;border:0;cursor:pointer;font-size:1em}
.btn:hover{filter:brightness(1.05)}

/* ---- Topbar ---- */
#topbar{display:flex;align-items:center;gap:1em;padding:.5em 1em;background:var(--pane);border-bottom:2px solid var(--accent)}
#topbar .brand{display:flex;align-items:center;gap:.7em;text-decoration:none;color:var(--navy)}
#topbar .brand .logo{height:30px;width:auto;display:block}
#topbar .brand .apptitle{font-weight:700;color:var(--navy)}
#topbar .spacer{flex:1}
#topbar .user{display:flex;align-items:center;gap:.6em;color:var(--muted)}
.views button{background:none;border:1px solid var(--line);padding:.4em .9em;border-radius:var(--r);cursor:pointer;font-size:1em}
.views button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#logout{background:none;border:1px solid var(--line);border-radius:var(--r);padding:.35em .7em;cursor:pointer}

/* ---- Filters ---- */
#filters{display:flex;align-items:center;gap:1.2em;padding:.5em 1em;background:var(--pane);border-bottom:1px solid var(--line);flex-wrap:wrap}
#filters label{display:flex;align-items:center;gap:.4em;color:var(--muted)}
#filters select{padding:.3em .5em;border:1px solid var(--line);border-radius:6px;font-size:1em}
#filters .chk{cursor:pointer}
#filters .count{margin-left:auto;color:var(--muted)}

/* ---- Layout: 2 panes ---- */
#layout{flex:1;display:flex;min-height:0}
#listpane{width:34%;min-width:22em;max-width:40em;overflow-y:auto;border-right:1px solid var(--line);background:var(--pane)}
#listhead{position:sticky;top:0;z-index:6;background:var(--pane);padding:.55em .7em;border-bottom:1px solid var(--line)}
#listhead #search{width:100%;padding:.5em .7em;border:1px solid var(--line);border-radius:var(--r);font-size:1em}
#listhead #search:focus{outline:none;border-color:var(--accent)}
#detailpane{flex:1;overflow-y:auto;padding:1.4em 1.8em}
#detailpane .placeholder{color:var(--muted);margin-top:3em;text-align:center}

/* ---- List items ---- */
#list{list-style:none;margin:0;padding:0;font-size:.875em}   /* Liste kompakter als der Rest */
#list li{padding:.5em .9em;border-bottom:1px solid var(--line);cursor:pointer}
#list li:hover{background:#fafbfc}
#list li.sel{background:var(--accent-soft)}
#list li.voted{border-left:4px solid var(--wichtig)}
#list li.done .ltitle{text-decoration:line-through;color:var(--muted)}
#list li.done{background:#fbfbfb}
#list li.empty{color:var(--muted);cursor:default;text-align:center;padding:1.5em}
#list li .row1{display:flex;gap:.45em;align-items:baseline}
#list li .cid{color:var(--muted);font-variant-numeric:tabular-nums}
#list li .ltitle{font-weight:600;line-height:1.25}
#list li .row2{display:flex;gap:.4em;align-items:center;margin-top:.35em;flex-wrap:wrap}

/* ---- Badges ---- */
.badge{font-size:.78em;padding:.12em .5em;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.cat-layout{background:#fde7f3;border-color:#f6b6da;color:#a01a6b}
.badge.cat-client-only{background:#e6f4ea;border-color:#a8d8b9;color:#1b7a3d}
.badge.cat-server{background:#e8f0fe;border-color:#aac6f6;color:#1a4fb0}
.badge.cat-server\+db{background:#fff3e0;border-color:#f4c98a;color:#9a5b00}
.badge.cat-complex{background:#f3e8fd;border-color:#cba8f0;color:#6b21a8}
.badge.st-umgesetzt{background:#e6f4ea;border-color:#a8d8b9;color:#1b7a3d}
.badge.st-ausgearbeitet{background:#e8f0fe;border-color:#aac6f6;color:#1a4fb0}
.badge.st-offen{background:#f4f5f7}
.badge.zusage{background:#fff8e1;border-color:#f0d27a;color:#8a6d00}
.badge.code{background:#eef;border-color:#bbf;color:#33c}
.badge.cmt{background:#eee}
.myvote{font-size:.78em;padding:.12em .55em;border-radius:999px;color:#fff}
.myvote.wichtig{background:var(--wichtig)} .myvote.dringend{background:var(--dringend)}
.myvote.unwichtig{background:var(--unwichtig)} .myvote.unklar{background:var(--unklar)}
.myvote.keine_meinung{background:var(--kein)}

/* ---- Tally mini-bar ---- */
.tally{display:flex;gap:2px;align-items:center}
.tally i{display:inline-block;height:.7em;border-radius:2px}
.tally .t-wichtig{background:var(--wichtig)} .tally .t-dringend{background:var(--dringend)}
.tally .t-unwichtig{background:var(--unwichtig)} .tally .t-unklar{background:var(--unklar)}
.tally .t-keine_meinung{background:var(--kein)}
.tally .num{color:var(--muted);font-size:.8em;margin-left:.3em}

/* ---- Detail ---- */
.detail h2{margin:.1em -.3em .3em;padding:.1em .3em;border-radius:6px;font-size:1.2em;color:var(--navy)}
.detail h2.flash{animation:kwflash 1.4s ease-out}
@keyframes kwflash{0%{background:#fff3b0}100%{background:transparent}}
.detail .meta{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;margin-bottom:1em}

/* Bewertungs-Panel (kompakt) */
.votepanel{position:sticky;top:0;z-index:5;background:var(--accent-soft);border:1px solid #f6c9b0;border-radius:var(--r);padding:.55em .8em;margin-bottom:1em}
.vote-head{font-weight:700;color:var(--navy);margin-bottom:.4em}
.vote-head .vote-hint{font-weight:400;color:#9a5b3a}
.vote-group{display:flex;gap:.4em;flex-wrap:wrap;align-items:center}
.flow-row2{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-top:.5em;flex-wrap:wrap}
.flow-btn{border:1px solid var(--navy);background:var(--navy);color:#fff;padding:.42em .85em;border-radius:var(--r);cursor:pointer;font-size:1em;transition:opacity .3s}
.flow-btn.kein{background:#fff;color:var(--navy)}
.flow-btn:hover{filter:brightness(1.08)}
.flow-btn.pending{opacity:0;pointer-events:none}   /* erst nach 1s eingeblendet */
.vote-btn{border:1px solid var(--line);background:#fff;padding:.38em .75em;border-radius:var(--r);cursor:pointer;font-size:1em}
.vote-btn[data-r=wichtig].on{background:var(--wichtig);color:#fff;border-color:var(--wichtig)}
.vote-btn[data-r=dringend].on{background:var(--dringend);color:#fff;border-color:var(--dringend)}
.vote-btn[data-r=gute_idee].on{background:var(--gute_idee);color:#fff;border-color:var(--gute_idee)}
.vote-btn[data-r=roadmap].on{background:var(--roadmap);color:#fff;border-color:var(--roadmap)}
.vote-btn[data-r=unwichtig].on{background:var(--unwichtig);color:#fff;border-color:var(--unwichtig)}
.vote-btn[data-r=unklar].on{background:var(--unklar);color:#fff;border-color:var(--unklar)}
.vote-btn[data-r=keine_meinung].on{background:var(--kein);color:#fff;border-color:var(--kein)}
.done-btn{border:1px solid var(--line);background:#fff;color:var(--muted);padding:.5em .9em;border-radius:var(--r);cursor:pointer;font-size:1em}
.done-btn.on{background:#1b7a3d;color:#fff;border-color:#1b7a3d}
.team-tally{margin:.55em 0 0;text-align:left}
.team-tally .tt-label{color:var(--muted);margin-right:.4em}
.done-info{margin:0;color:#1b7a3d}

/* Feature-Status-Leiste (Kundenwunsch umgesetzt & released) — getrennt vom Voting */
.releasebar{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;background:#f4f7f5;border:1px solid var(--line);border-radius:var(--r);padding:.6em .9em;margin-bottom:1.2em}
.releasebar.is-done{background:#e6f4ea;border-color:#1b7a3d}
.releasebar .rb-label{color:var(--muted)}
.releasebar.is-done .rb-label{color:#1b7a3d}

/* Tag-Chips: Icon + Anzahl (wie oft das Team das Tag gesetzt hat) */
.row3.tags{margin-top:.35em;display:flex;gap:.35em;flex-wrap:wrap}
.tagc{display:inline-flex;align-items:center;gap:.25em;padding:.06em .45em;border-radius:999px;border:1px solid var(--line);background:#fff;line-height:1.4}
.tagc b{font-weight:700}
.tagc.t-wichtig{color:var(--wichtig)} .tagc.t-dringend{color:var(--dringend)}
.tagc.t-gute_idee{color:var(--gute_idee)} .tagc.t-roadmap{color:var(--roadmap)}
.tagc.t-unwichtig{color:#6b6b6b} .tagc.t-unklar{color:#b07400} .tagc.t-keine_meinung{color:var(--kein)}
.tagc.mine{box-shadow:0 0 0 2px currentColor inset;font-weight:700}
.vote-btn .vi{font-style:normal}
.badge.done-b{background:#e6f4ea;border-color:#1b7a3d;color:#1b7a3d;font-weight:600}

.detail details{background:var(--pane);border:1px solid var(--line);border-radius:var(--r);margin:.8em 0;padding:0 1em}
.detail details>summary{cursor:pointer;padding:.7em 0;font-weight:600;list-style:none}
.detail details>summary::-webkit-details-marker{display:none}
.detail details>summary::before{content:"▸ ";color:var(--muted)}
.detail details[open]>summary::before{content:"▾ "}
.detail details .inner{padding:0 0 1em}

.ticket{border-top:1px solid var(--line);padding:.8em 0}
.ticket:first-child{border-top:0}
.ticket .thead{font-weight:600}
.ticket .tno{color:var(--accent)}
.ticket .tmeta{color:var(--muted);font-size:.88em}
.ticket blockquote{margin:.5em 0;padding:.3em .9em;border-left:3px solid var(--line);color:#333}
.ticket .zusage-q{font-size:.9em;background:#fff8e1;border:1px solid #f0d27a;border-radius:6px;padding:.3em .6em;margin-top:.3em}

.detail .prop pre{background:#1e2430;color:#e6edf3;padding:1em;border-radius:6px;overflow:auto}
.detail .prop code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.detail .prop :not(pre)>code{background:#eef;padding:.05em .3em;border-radius:4px}
.detail .beleg{color:var(--muted)}

/* ---- Comments ---- */
.comments h3{margin:1.4em 0 .5em}
.comment{background:var(--pane);border:1px solid var(--line);border-radius:var(--r);padding:.6em .9em;margin-bottom:.6em}
.comment .chead{font-size:.85em;color:var(--muted);margin-bottom:.25em}
.comment .cwho{color:var(--ink);font-weight:600}
.comment .cbody{white-space:pre-wrap}
.cform{display:flex;gap:.6em;margin-top:.6em}
.cform textarea{flex:1;min-height:3em;padding:.5em;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:1em;resize:vertical}

/* Flash-Toast (z.B. "alle bewertet") */
#flash{position:fixed;bottom:1.5em;left:50%;transform:translateX(-50%) translateY(2em);background:var(--navy);color:#fff;padding:.7em 1.3em;border-radius:var(--r);box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:all .25s;z-index:50}
#flash.show{opacity:1;transform:translateX(-50%) translateY(0)}