/* ---- Journal: Kommandozentrale in Unterseiten (Vorschau v2) ---- */
.jx{--jx-hair:color-mix(in srgb,var(--line) 70%,transparent);
  --jx-panel:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 92%,transparent),color-mix(in srgb,var(--surface) 96%,transparent));
  --jx-edge:linear-gradient(180deg,color-mix(in srgb,var(--text) 14%,transparent),color-mix(in srgb,var(--text) 0%,transparent) 40%);
  --jx-ease:cubic-bezier(.22,1,.36,1);
  --jx-bg:var(--surface);
  display:flex;flex-direction:column;gap:14px}
.jx-in .jx-p{animation:jxIn .5s var(--jx-ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes jxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.jx-in .jx-p{animation:none}}

/* Unterseiten */
.jx-tabs{position:relative;display:flex;gap:2px;padding:3px;border:1px solid var(--jx-hair);border-radius:12px;
  background:color-mix(in srgb,var(--surface2) 60%,transparent);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.jx-tabs::-webkit-scrollbar{display:none}
.jx-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:0;border-radius:9px;background:none;
  font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .2s}
.jx-tab:hover{color:var(--text)}
.jx-tab.on{color:var(--text);font-weight:600}
.jx-tab b{font-family:var(--mono);font-weight:400;font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.jx-ind{position:absolute;z-index:0;top:3px;bottom:3px;left:0;border-radius:9px;background:var(--surface2);
  border:1px solid var(--line-mid);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent);
  transition:transform .32s var(--jx-ease),width .32s var(--jx-ease)}
@media(prefers-reduced-motion:reduce){.jx-ind{transition:none}}
@media(max-width:700px){.jx-tabs{width:100%}.jx-tab{flex:1 0 auto;justify-content:center;min-height:40px;padding:0 12px}}
.jx-hide-view .jx-view{display:none !important}

/* Panels */
.jx-p{position:relative;border-radius:14px;background:var(--jx-panel);border:1px solid var(--jx-hair);overflow:hidden;isolation:isolate;min-width:0}
.jx-p::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--jx-edge);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.jx-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;padding:18px 20px 0;flex-wrap:wrap}
.jx-eb{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.jx-sub{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.45}
.jx-pb{padding:16px 20px 20px}
.jx-grid{display:grid;gap:14px}
.jx-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.jx-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.jx-g3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.jx-g2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.jx-ph{padding:16px 16px 0}.jx-pb{padding:14px 16px 16px}}

/* Segment-Umschalter in Panels */
.jx-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--jx-hair);border-radius:9px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.jx-seg::-webkit-scrollbar{display:none}
.jx-seg button{border:0;background:none;padding:6px 11px;border-radius:7px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.jx-seg button:hover{color:var(--text)}
.jx-seg button.on{background:var(--surface2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-mid)}

/* Legende */
.jx-leg{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.jx-leg span{display:inline-flex;align-items:center;gap:7px}
.jx-leg i{display:inline-block;width:16px;height:2px;border-radius:2px;background:currentColor}
.jx-leg i.dot{width:8px;height:8px;border-radius:50%}

/* Hero: R-Kurve */
.jx-hero .jx-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 60% at 80% 35%,color-mix(in srgb,var(--pos) 9%,transparent),transparent 70%),
             radial-gradient(40% 50% at 8% 100%,color-mix(in srgb,var(--text) 4%,transparent),transparent 70%)}
.jx-big{font-size:clamp(40px,5vw,60px);font-weight:500;letter-spacing:-.045em;line-height:1;margin-top:10px}
.jx-meta{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--muted)}
.jx-meta b{color:var(--text);font-weight:400}
.jx-chart{position:relative;width:100%;touch-action:pan-y}
.jx-chart svg{display:block;overflow:visible}
.jx-hero .jx-chart{padding:8px 0 4px}
.jx-ax{font-family:var(--mono);font-size:10.5px;fill:var(--dim);letter-spacing:.03em}
.jx-lbl{font-size:11.5px;fill:var(--muted);font-weight:500}
.jx-val{font-family:var(--mono);font-size:11px;fill:var(--text)}
.jx-grid-l{stroke:var(--line-soft);stroke-width:1}
.jx-zero{stroke:var(--line-mid);stroke-width:1}
.jx-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:jxDraw 1.1s var(--jx-ease) .15s forwards}
@keyframes jxDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.jx-draw{animation:none;stroke-dashoffset:0}}

/* Tooltip */
.jx-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;min-width:150px;max-width:240px;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line-mid);box-shadow:0 12px 32px -12px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12px;line-height:1.5;color:var(--muted);opacity:0;transition:opacity .12s}
.jx-tip.on{opacity:1}
.jx-tip b{color:var(--text);font-weight:600}
.jx-tip .r{font-family:var(--mono);font-size:13px}
.jx-tip .h{display:block;margin-top:4px;font-size:10.5px;color:var(--dim)}

/* KPI-Kacheln */
.jx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1200px){.jx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.jx-kpis{gap:10px}}
.jx-kpi{padding:16px 18px 14px;display:flex;flex-direction:column;min-height:132px}
.jx-kpi .jx-eb{font-size:10.5px}
.jx-kpi .v{font-size:26px;font-weight:500;letter-spacing:-.03em;line-height:1;margin-top:12px;white-space:nowrap}
.jx-kpi .s{font-size:12px;color:var(--dim);margin-top:7px;line-height:1.35}
.jx-kpi .sp{margin-top:auto;padding-top:10px;height:30px}
.jx-kpi .sp svg{display:block;width:100%;height:28px;overflow:visible}
.jx-streak{display:flex;gap:3px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
.jx-streak i{width:7px;height:16px;border-radius:2px;background:var(--surface2)}
.jx-streak i.w{background:var(--pos)}.jx-streak i.l{background:var(--neg)}
@media(max-width:420px){.jx-kpi{padding:14px 14px 12px;min-height:120px}.jx-kpi .v{font-size:22px}}

/* Befunde */
.jx-find{padding:16px 18px}
.jx-find .t{font-size:15px;font-weight:600;margin-top:10px;line-height:1.3}
.jx-find .n{font-family:var(--mono);font-size:13px;margin-top:6px}
.jx-find .s{font-size:12px;color:var(--dim);margin-top:4px}

/* Heatmap */
.jx-heat{display:grid;gap:4px;align-items:stretch}
.jx-heat .hd{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 4px 6px;align-self:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jx-heat .rw{font-size:12.5px;color:var(--muted);align-self:center;padding-right:8px;white-space:nowrap}
.jx-cell{position:relative;border-radius:8px;min-height:62px;padding:9px 10px;display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--jx-hair);background:var(--surface);transition:transform .15s var(--jx-ease),border-color .15s}
.jx-cell:hover{border-color:var(--line-mid)}
.jx-cell .e{font-family:var(--mono);font-size:13px;color:var(--text)}
.jx-cell .c{font-size:10.5px;color:var(--dim)}
.jx-cell.thin{opacity:.45}
.jx-cell.none{background:transparent;border-style:dashed;opacity:.35}
@media(max-width:700px){.jx-cell{min-height:52px;padding:7px}.jx-cell .e{font-size:11.5px}.jx-heat .rw{font-size:11.5px;padding-right:4px}.jx-heat .hd{font-size:9.5px;letter-spacing:.04em;padding:0 2px 5px}}

/* Edge-Karte */
.jx-rows{display:flex;flex-direction:column}
.jx-row{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) 92px;gap:6px 18px;align-items:center;padding:12px 0;border-top:1px solid var(--line-soft)}
.jx-row:first-child{border-top:0}
.jx-row .nm{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jx-row .st{font-size:11.5px;color:var(--dim);margin-top:3px;display:flex;gap:4px 10px;flex-wrap:wrap}
.jx-row .st .neg{color:var(--neg)}
.jx-row .tot{text-align:right}
.jx-row .tot b{display:block;font-family:var(--mono);font-size:14px;font-weight:400}
.jx-row .tot small{font-size:11px;color:var(--dim)}
.jx-strip{position:relative;height:38px;cursor:pointer}
.jx-scale{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) 92px;gap:18px;padding-bottom:4px}
@media(max-width:800px){
  .jx-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .jx-row .jx-strip{grid-column:1 / -1;grid-row:2}
  .jx-scale{grid-template-columns:minmax(0,1fr)}
  .jx-scale > :first-child,.jx-scale > :last-child{display:none}}

/* Balkenlisten (Emotion, Reihenfolge) */
.jx-bars{display:flex;flex-direction:column;gap:14px}
.jx-bh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.jx-bh span{font-size:13px;font-weight:500}
.jx-bh b{font-family:var(--mono);font-size:13px;font-weight:400}
.jx-bt{position:relative;height:8px;margin:7px 0 6px;border-radius:4px;background:color-mix(in srgb,var(--surface2) 80%,transparent)}
.jx-bt::after{content:'';position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line-mid)}
.jx-bt i{position:absolute;top:0;bottom:0;border-radius:4px;transform-origin:var(--o,left);animation:jxGrow .7s var(--jx-ease) both}
@keyframes jxGrow{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.jx-bt i{animation:none}}
.jx-bm{display:flex;gap:4px 12px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}
.jx-bm .neg{color:var(--neg)}

/* Plan gegen Abweichung */
.jx-vs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border-radius:10px;overflow:hidden;border:1px solid var(--line-soft)}
.jx-vs > div{background:var(--surface);padding:16px}
.jx-vs .k{font-size:clamp(26px,3vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1;margin-top:10px}
.jx-vs .s{font-size:12px;color:var(--dim);margin-top:8px;line-height:1.5}
.jx-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:14px}
.jx-note b{color:var(--text);font-weight:500}

.jx-empty{padding:34px 20px;text-align:center;font-size:13px;color:var(--dim)}
.jx-empty b{display:block;color:var(--text);font-weight:600;margin-bottom:4px}
.jx-old{margin-top:0 !important}

/* Plan-Treue je Monat */
.jx-adh{display:flex;gap:8px;align-items:flex-end;margin-top:12px;height:120px}
.jx-adh > div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.jx-adh span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.jx-adh span.neg{color:var(--neg)}
.jx-adh i{flex:1;width:100%;max-width:24px;display:flex;align-items:flex-end;border-radius:4px;background:color-mix(in srgb,var(--surface2) 70%,transparent)}
.jx-adh i b{display:block;width:100%;border-radius:4px;opacity:.85}
.jx-adh small{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
@media(max-width:700px){.jx-find{padding:14px 16px}.jx-find .t{font-size:14px;margin-top:8px}.jx-g3{gap:10px}}

/* ---- v2 ---- */
.jx-ph-l{min-width:0}
.jx-ph-r{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media(max-width:700px){.jx-ph-r{align-items:flex-start;width:100%}}
.jx-unit button{min-width:42px;font-family:var(--mono);font-size:12.5px}
@media(max-width:700px){.jx-unit button{min-height:36px;min-width:48px}}

/* Payoff: Ø Gewinn gegen Ø Verlust */
.jx-pay{display:flex;flex-direction:column;gap:5px;margin-top:auto;padding-top:12px}
.jx-pay i{display:block;height:7px;border-radius:4px;opacity:.85;transform-origin:left;animation:jxGrow .7s var(--jx-ease) both}

/* Eigen gegen Funded */
.jx-cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;height:100%}
.jx-cap > div{background:var(--surface);padding:16px;display:flex;flex-direction:column;min-width:0}
.jx-cap-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.jx-cap-h small{font-size:11px;color:var(--dim)}
.jx-cap .k{font-size:clamp(24px,2.6vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1;margin-top:12px;white-space:nowrap}
.jx-cap .sp{height:40px;margin:14px 0 12px}
.jx-cap .sp svg{display:block;width:100%;height:40px;overflow:visible}
.jx-cap-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin-top:auto}
.jx-cap-f span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);display:flex;flex-direction:column;gap:4px;min-width:0}
.jx-cap-f b{font-family:var(--font, inherit);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--text);font-weight:500;white-space:nowrap}
.jx-cap-f b.pos{color:var(--pos)}.jx-cap-f b.neg{color:var(--neg)}

/* Monatstabelle */
.jx-tbl{overflow-x:auto;margin-top:18px;border-top:1px solid var(--line-soft)}
.jx-tbl table{width:100%;border-collapse:collapse;min-width:640px}
.jx-tbl th{padding:12px 10px 10px}
.jx-tbl td{padding:10px;font-size:13px;white-space:nowrap}
.jx-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.jx-tbl .c{text-align:center}
.jx-tbl tr.jx-tot td{font-weight:600;border-top:1px solid var(--line-mid);border-bottom:0}
.jx-rev{position:relative;display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;cursor:pointer}
.jx-rev input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.jx-rev i{width:16px;height:16px;border-radius:5px;border:1px solid var(--line-mid);transition:background .2s,border-color .2s}
.jx-rev input:checked + i{background:var(--pos);border-color:var(--pos);
  -webkit-mask:none;box-shadow:inset 0 0 0 3px var(--surface)}
.jx-rev input:focus-visible + i{outline:2px solid var(--act);outline-offset:2px}

/* Heatmap: Summen und Markierung */
.jx-cell.tot{background:transparent;border-color:var(--line-mid)}
.jx-cell.tot .e{font-weight:600}
.jx-cell.best{box-shadow:0 0 0 2px var(--pos), 0 0 0 4px var(--jx-bg)}
.jx-cell.worst{box-shadow:0 0 0 2px var(--neg), 0 0 0 4px var(--jx-bg)}
.jx-heat-key{display:flex;flex-direction:column;gap:7px;margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.45}
.jx-heat-key b{color:var(--text);font-weight:500}
.jx-heat-key i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.jx-heat-key i.best{box-shadow:inset 0 0 0 2px var(--pos)}
.jx-heat-key i.worst{box-shadow:inset 0 0 0 2px var(--neg)}

/* Ranking */
.jx-rank{display:flex;flex-direction:column}
.jx-rk .mt{display:contents}
.jx-rk{display:grid;grid-template-columns:28px minmax(120px,1.3fr) minmax(80px,1.6fr) 104px 60px 76px 96px 84px 72px;gap:14px;align-items:center;
  padding:12px 8px;border-top:1px solid var(--line-soft);border-radius:8px;transition:background .15s}
.jx-rk.hd{border-top:0;padding-top:0;padding-bottom:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.jx-rk.go{cursor:pointer}
.jx-rk.go:hover{background:color-mix(in srgb,var(--surface2) 70%,transparent)}
.jx-rk.go:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
.jx-rk .num{text-align:right;font-family:var(--mono);font-size:12.5px}
.jx-rk .num em{display:none}
.jx-rk .nt{font-size:13.5px}
.jx-rk .no{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center;width:24px;height:24px;line-height:24px;border-radius:7px}
.jx-rk .no.lead{color:var(--text);background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line-mid)}
.jx-rk .nm{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jx-rk .br{position:relative;height:10px;border-radius:5px;background:color-mix(in srgb,var(--surface2) 70%,transparent)}
.jx-rank.neg-on .jx-rk .br::after{content:'';position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line-mid)}
.jx-rk .br i{position:absolute;top:0;bottom:0;border-radius:5px;opacity:.85;transform-origin:var(--o,left);animation:jxGrow .7s var(--jx-ease) both}
@media(prefers-reduced-motion:reduce){.jx-rk .br i,.jx-pay i{animation:none}}
@media(max-width:900px){
  .jx-rk.hd{display:none}
  .jx-rk{grid-template-columns:24px minmax(0,1fr) auto;gap:7px 12px;padding:12px 4px}
  .jx-rk .no{grid-column:1;grid-row:1}
  .jx-rk .nm{grid-column:2;grid-row:1}
  .jx-rk .nt{grid-column:3;grid-row:1}
  .jx-rk .br{grid-column:2 / -1;grid-row:2}
  .jx-rk .mt{grid-column:2 / -1;grid-row:3;display:flex;flex-wrap:wrap;gap:4px 14px}
  .jx-rk .mt .num{text-align:left;font-size:11.5px;color:var(--dim)}
  .jx-rk .mt .num.pos{color:var(--pos)}.jx-rk .mt .num.neg{color:var(--neg)}
  .jx-rk .mt .num em{display:inline;font-style:normal;margin-right:5px}
}

/* Arten der Abweichung */
.jx-dev > div{display:grid;grid-template-columns:minmax(0,1fr) 80px 36px 74px 56px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line-soft);font-size:13px}
.jx-dev > div:first-child{border-top:0}
.jx-dev .nm{line-height:1.35}
.jx-dev .sh{height:6px;border-radius:3px;background:color-mix(in srgb,var(--surface2) 70%,transparent);overflow:hidden}
.jx-dev .sh i{display:block;height:100%;border-radius:3px;background:var(--neg);opacity:.8}
.jx-dev .num{text-align:right;font-family:var(--mono);font-size:12px}
@media(max-width:520px){.jx-dev > div{grid-template-columns:minmax(0,1fr) 30px 66px;row-gap:6px}.jx-dev .sh{grid-column:1 / -1;grid-row:2}.jx-dev .num.dim{display:none}}

/* So liest du das */
.jx-eb .jx-info{position:relative;margin-left:9px;vertical-align:1px}
.jx-eb .jx-info::before{content:'';position:absolute;inset:-14px}   /* größere Tippfläche, Knopf bleibt klein */
.jx-explain{max-width:68ch;letter-spacing:0;text-transform:none}