/* Bühnen-Theme: dunkel, flach, scharf. Zwei Pole (A warm / B mint), sonst Papierweiß auf Schwarz. */
@font-face{font-family:"Bricolage";src:url(fonts/display.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(fonts/text.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#0c0c0b;--panel:#141413;--raise:#1b1b19;--line:#2a2a27;--fg:#f3f0e8;--mut:#9a968b;
  --A:#ff5a36;--B:#35e0a6;--acc:#f3f0e8;
  --disp:"Bricolage","Arial Narrow",system-ui,sans-serif;--txt:"Inter Tight",system-ui,-apple-system,sans-serif;
  --pw:min(520px,42vw)
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font:18px/1.4 var(--txt);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
body{display:flex;flex-direction:column;overflow:hidden}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* Kopf: drei große Tabs, aktiv weiß, ruhend 20 % Weiß */
header{display:flex;align-items:flex-end;gap:32px;padding:22px 40px 6px}
button,select{font:inherit;color:var(--fg);background:none;border:1px solid var(--line);border-radius:0;padding:8px 14px;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s}
button:hover,select:hover{border-color:var(--mut)}
button:active{transform:translateY(1px)}
.seg{display:flex;align-items:baseline;gap:28px;min-width:0}
.seg button{border:0;padding:0;background:none;color:rgb(255 255 255 / .2);font:800 clamp(34px,4.6vw,68px)/.92 var(--disp);letter-spacing:-.035em;box-shadow:none}
.seg button:hover{color:rgb(255 255 255 / .45);border-color:transparent}
.seg button:active{transform:none}
.seg button.on,.seg button.on:hover{color:#fff}
.filters{display:flex;gap:8px;margin-left:auto;padding-bottom:10px}
select{font-size:15px;color:var(--mut)}
main{position:relative;flex:1;min-height:0;overflow:hidden}
#stage{width:100%;height:100%;display:block}
main.conf #stage{width:calc(100% - var(--pw))}

/* Überblick: fünf Spalten, Zahl vorn */
#overview{display:none;position:absolute;inset:0;padding:12px 40px 36px}
main.ov #overview{display:flex}
main.ov #stage{display:none}
.ov-col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:flex-start;padding:0 24px 0 0;margin-right:24px;border-right:1px solid var(--line);color:inherit}
.ov-col:last-child{border:0;margin:0;padding:0}
.ov-col b{order:1;font:800 clamp(48px,7.2vw,150px)/.9 var(--disp);letter-spacing:-.05em}
.ov-track{order:2;flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;margin:18px 0}
.ov-track i{display:block;width:100%;background:var(--c);border-radius:0;transition:height .5s cubic-bezier(.2,.7,.2,1)}
.ov-col em{order:3;font:700 clamp(26px,2.8vw,44px)/1 var(--disp);letter-spacing:-.02em;font-style:normal;color:var(--c)}
.ov-col small{order:4;color:var(--mut);font-size:16px;line-height:1.3;margin-top:8px;max-width:22ch}

/* Trends: Zeilen statt Karten */
#trends{display:none;position:absolute;inset:0;overflow:auto;padding:4px 40px 60px}
main.tr #trends{display:block}
main.tr #stage{display:none}
main.tr.pan #trends{right:var(--pw)}
.tr-wrap{max-width:1100px;margin:0}
.tr-wrap .tr-item{margin-left:-22px;width:calc(100% + 22px)}
.tr-head{font:600 22px/1.2 var(--txt);color:var(--mut);margin:6px 0 18px}
.tr-head small{display:block;font-size:14px;font-weight:400;margin-top:2px}
.tr-leg{display:flex;gap:14px;font-size:14px;color:var(--mut);margin-top:8px}
.tr-leg i{display:inline-block;width:10px;height:10px;margin-right:5px}
.tr-item{display:flex;align-items:center;gap:28px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:26px 0 26px 22px;margin:0;transition:transform .15s,background .15s}
.tr-item:hover{transform:translateY(-2px);border-color:var(--line);background:none}
.tr-item.sel{background:var(--panel);box-shadow:inset 4px 0 0 var(--fg);border-color:var(--line)}
.tr-rank{font:700 20px var(--disp);color:var(--mut);width:34px}
.tr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.tr-t{font:700 clamp(30px,3.4vw,52px)/1.02 var(--disp);letter-spacing:-.03em}
.tr-v{font:600 15px var(--txt);letter-spacing:.12em;text-transform:uppercase}
.tr-item.down .tr-v{color:var(--A)}.tr-item.up .tr-v{color:var(--B)}
.tr-item.mixed .tr-v{color:var(--mut)}
.tr-sum{display:none}
.tr-s{color:var(--mut);font-size:14px}
.tr-bar{display:flex;gap:2px;height:10px;margin-top:2px}
.tr-bar i{font-size:0;display:block}
.tr-net{text-align:right;min-width:110px}
.tr-net b{display:block;font:800 clamp(48px,5.4vw,88px)/.9 var(--disp);letter-spacing:-.04em}
.tr-item.down .tr-net b{color:var(--A)}.tr-item.up .tr-net b{color:var(--B)}.tr-item.mixed .tr-net b{color:var(--mut)}
.tr-net small{color:var(--mut);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.tr-h3{color:var(--mut);font:600 14px var(--txt);margin:44px 0 6px;text-transform:uppercase;letter-spacing:.14em}
.tr-minis{display:flex;flex-wrap:wrap;gap:8px}
.tr-mini{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.tr-m{color:var(--mut);font-size:13px}
.tr-empty{color:var(--mut);padding:30px 0;font-size:22px}
.tr-item.mixed .tr-t{color:#cfcabd}

/* Seitenleiste */
#panel{position:absolute;top:0;right:0;bottom:0;width:var(--pw);background:var(--panel);border-left:1px solid var(--line);padding:32px 36px 48px;overflow:auto;transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#panel.open{transform:none}
#panel h2{margin:0 0 8px;font:800 clamp(30px,3vw,46px)/1.02 var(--disp);letter-spacing:-.03em;color:var(--fg)!important}
#panel h3{margin:34px 0 12px;font:600 13px var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
#panel .meta{color:var(--mut);margin-bottom:16px;font-size:15px}
#panel .sum{font-size:21px;line-height:1.35}
#panel .core{font:700 24px/1.2 var(--disp);letter-spacing:-.015em;margin:10px 0 14px;color:var(--fg)}
#panel .badge{display:inline-block;font-size:12px;background:none;color:var(--mut);border:1px solid var(--line);padding:2px 8px;margin-top:6px}
#panel blockquote{margin:0 0 4px;padding:16px 0;border:0;border-bottom:1px solid var(--line);background:none;font-size:20px;line-height:1.35;cursor:default}
#panel blockquote cite{display:block;font-size:13px;color:var(--mut);font-style:normal;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);border-radius:0;padding:6px 12px;cursor:pointer;background:none;font-size:15px;transition:border-color .15s}
.chip:hover{border-color:var(--fg)}
details summary{cursor:pointer;color:var(--mut);margin-top:22px;font-size:15px}
details ul{padding-left:18px;margin:8px 0}details li{margin:5px 0;font-size:16px}
.x{position:absolute;top:14px;right:18px;background:none;border:0;font-size:22px;color:var(--mut);padding:4px 8px}
.x:hover{color:var(--fg)}
.pos{display:inline-block;min-width:44px;text-align:center;color:#0c0c0b;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 6px;margin-right:8px}
.li{padding:12px 0;margin:0;border-bottom:1px solid var(--line);font-size:17px}
.li:hover,.li.hv{background:var(--raise)}
.li.iss{cursor:pointer}
.stack{display:flex;gap:2px;height:10px;overflow:hidden;margin:10px 0}
.legend{display:flex;justify-content:space-between;font-size:14px;color:var(--mut)}
.qd{display:flex;gap:6px;align-items:flex-end;margin:12px 0 6px}
.qd span{flex:1;text-align:center;font-size:12px;color:var(--mut);display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.qd i{display:block;width:100%;background:var(--fg);opacity:.85;margin-bottom:3px;min-height:2px}
.qd small{color:var(--fg);font-size:13px}
.lg{display:inline-flex;align-items:center;gap:5px;font-size:14px;margin-right:8px}.lg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.empty{padding:60px;color:var(--mut);font-size:22px}
#tip{position:absolute;pointer-events:none;max-width:380px;background:#000;border:1px solid var(--mut);padding:10px 14px;font-size:16px;opacity:0;transition:opacity .1s;z-index:5}
#tip small{display:block;color:var(--mut);margin-top:4px;font-size:13px}

/* Konfliktkarte (SVG) */
.issrow .hit{fill:transparent;stroke:transparent;stroke-width:1.5px;transition:fill .15s,stroke .15s}
.issrow:hover .hit,.issrow.hv .hit{fill:var(--raise);stroke:var(--line)}
.issrow.on .hit{fill:var(--raise);stroke:var(--fg)}
text.ax{fill:var(--mut);font-size:15px}
text.pole{font:800 28px var(--disp);letter-spacing:-.02em}
text.row{fill:var(--fg);font-family:var(--disp);font-weight:700;letter-spacing:-.015em}
text.ax.pl{font:600 15px var(--txt);letter-spacing:.01em}
text.num{font:800 22px var(--disp)}
.badge-bg{fill:#555}.badge-t{fill:#fff;font-size:12px;font-weight:700}

/* Konflikt-Overlay: Punkte, Kernsatz, Antworten */
#sheet{display:none;position:absolute;inset:0;z-index:6;background:var(--bg);overflow:auto;padding:32px 48px 72px}
#sheet.open{display:block}
#sheet .x{font-size:48px;line-height:.8;top:10px;right:16px;padding:8px 12px}
#sheet .sheet-k{font:700 clamp(18px,2vw,26px)/1.1 var(--disp);letter-spacing:-.02em;color:var(--mut);margin:8px 0 44px;max-width:24em}
#sheet .card{display:grid;grid-template-columns:1fr 1fr;width:100%;align-items:start;margin:0 0 52px}
#sheet .card section{min-width:0}
#sheet .card b{display:block;font:800 28px/1 var(--disp);letter-spacing:-.03em}
#sheet .card span{display:block;margin-top:4px;font-size:16px;line-height:1.3;max-width:36ch}
#sheet .card .plot{display:flex;margin-top:14px}
#sheet .card svg{display:block;height:auto}
#sheet .card .a{color:var(--A);text-align:right;padding-right:26px;border-right:1px solid #ffffff22}
#sheet .card .a span{margin-left:auto}
#sheet .card .a .plot{justify-content:flex-end}
#sheet .card .b{color:var(--B);text-align:left;padding-left:26px}
#sheet .kern{font:700 clamp(48px,5vw,68px)/1.06 var(--disp);letter-spacing:-.035em;max-width:none;margin:0 0 72px;text-wrap:balance}
#sheet .ans{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
#sheet .ans h3{margin:0 0 12px;font:600 13px var(--txt);letter-spacing:.14em;text-transform:uppercase}
#sheet .ans h3.a{color:var(--A)}
#sheet .ans h3.b{color:var(--B)}
@media (max-width:680px){
  #sheet{padding:24px 20px 48px}
  #sheet .ans{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}