/* Moderator statistics: score, figures with team comparison, daily charts, hours, distributions, per model.
   Chart colours were checked with the dataviz palette validator (light on #fff, dark on #1b1a17). */

:root {
  --c1: light-dark(#e0652a, #e2703a);      /* you / main series */
  --c2: light-dark(#3a6ea5, #4a86cc);      /* second series */
  --c-team: light-dark(#6b6b74, #949087);  /* team average: neutral, dashed */
  --c-grid: light-dark(#ebe7e0, #2e2b27);
  --c-target: light-dark(rgba(22, 122, 78, .1), rgba(78, 201, 138, .12));
}

body[data-page="statistiken"] .bar { position: sticky; top: 0; z-index: 30; }
.st-page { max-width: 1280px; margin: 0 auto; padding: 32px 24px 96px; }

.st-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 24px; }
.st-head h1 { margin: 0; font-family: var(--font-d); font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.st-head p { margin: 6px 0 0; color: var(--ink2); font-size: 14.5px; }
.range { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sunken); }
.range > button {
  height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--ink2); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.range > button:hover { color: var(--ink); }
.range > button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px var(--shadow-c), 0 0 0 1px var(--line); }
.range-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 300px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--pop);
}
.range-pop label { display: grid; gap: 4px; font-size: 12px; color: var(--ink3); }
.range-pop input { height: 36px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 9px; background: var(--page); color: var(--ink); font-size: 13.5px; }
.range-pop .btn { grid-column: 1 / -1; height: 36px; }

.card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.st-page > .card, .two > .card, .charts > .card { padding: 22px 24px; }
.sec-t { margin: 36px 0 14px; font-family: var(--font-d); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 14px; }
.card-h h3 { margin: 0; font-size: 15px; font-weight: 600; }
/* the explanation sits under the title; buttons and legends stay on the title row */
.card-h .sub { order: 3; flex-basis: 100%; color: var(--ink3); font-size: 12.5px; line-height: 1.4; }
.card-h .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mini-btn {
  height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink2);
  font-size: 12px; font-weight: 500; cursor: pointer;
}
.mini-btn:hover { background: var(--sunken); color: var(--ink); }
.mini-btn[aria-pressed="true"] { background: var(--sunken); color: var(--ink); border-color: var(--line2); }

/* ---------- Score ---------- */
.score-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: center; }
.score-l { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ring { position: relative; width: 170px; height: 170px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .trk { fill: none; stroke: var(--sunken); stroke-width: 12; }
.ring .val { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-content: center; font-family: var(--font-d); font-size: 46px; font-weight: 700; line-height: 1; }
.ring b small { display: block; margin-top: 4px; color: var(--ink3); font-family: var(--font); font-size: 12px; font-weight: 500; }
.score-l h2 { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.score-l p { margin: 0; color: var(--ink2); font-size: 13px; }
.band { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.band.ok { background: var(--ok-soft); color: var(--ok); }
.band.warn { background: var(--warn-soft); color: var(--warn); }
.band.bad { background: var(--bad-soft); color: var(--bad); }
.linkish { padding: 0; border: 0; background: none; color: var(--accent-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.crit { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.crit li { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 46px; gap: 14px; align-items: center; padding: 7px 0; }
.crit li + li { border-top: 1px solid var(--line); }
.crit .lab { min-width: 0; }
.crit .lab b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.crit .lab span { color: var(--ink3); font-size: 12px; }
.meter { position: relative; height: 8px; border-radius: 4px; background: var(--sunken); }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transition: width .7s var(--ease); }
.meter i.ok { background: var(--ok); } .meter i.warn { background: light-dark(#c4840c, #e0a93c); } .meter i.bad { background: var(--bad); }
.meter s { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--c-team); text-decoration: none; }
.crit .pts { font-family: var(--font-d); font-size: 16px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.crit-legend { display: flex; gap: 16px; margin-top: 10px; color: var(--ink3); font-size: 12px; }
.crit-legend span { display: inline-flex; align-items: center; gap: 6px; }
.crit-legend i { display: inline-block; width: 14px; height: 6px; border-radius: 3px; background: var(--ok); }
.crit-legend s { display: inline-block; width: 2px; height: 12px; background: var(--c-team); }

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kpi { display: grid; gap: 6px; padding: 16px 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.kpi-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink2); font-size: 13px; }
.kpi-v { font-family: var(--font-d); font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-s { color: var(--ink3); font-size: 12px; line-height: 1.4; }
.kpi-t { display: flex; align-items: center; gap: 6px; color: var(--ink3); font-size: 12px; }
.kpi-t s { display: inline-block; width: 12px; height: 0; border-top: 2px dashed var(--c-team); text-decoration: none; }
.delta { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.up { background: var(--ok-soft); color: var(--ok); }
.delta.down { background: var(--bad-soft); color: var(--bad); }
.delta.flat { background: var(--sunken); color: var(--ink2); }
.spark { display: block; width: 100%; height: 36px; margin-top: 2px; }

/* ---------- me vs team vs target rows ---------- */
.rows { display: grid; margin: 0; }
.rows > div { display: grid; grid-template-columns: minmax(0, 1fr) 128px; grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; padding: 11px 0; }
.rows > div + div { border-top: 1px solid var(--line); }
.rows dt { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; }
.rows dt .i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line2); color: var(--ink3); font-size: 10px; font-weight: 700; cursor: help; }
.rows dd { margin: 0; }
.rows .v { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; font-family: var(--font-d); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rows .v small { display: block; color: var(--ink3); font-family: var(--font); font-size: 11.5px; font-weight: 500; }
.bullet { position: relative; height: 14px; }
.bullet .trk { position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 2px; background: var(--sunken); }
.bullet .zone { position: absolute; top: 2px; height: 10px; border-radius: 3px; background: var(--c-target); box-shadow: inset 0 0 0 1px light-dark(rgba(22, 122, 78, .25), rgba(78, 201, 138, .3)); }
.bullet .mine { position: absolute; left: 0; top: 4px; height: 6px; border-radius: 3px; background: var(--c1); }
.bullet .tm { position: absolute; top: 0; width: 2px; height: 14px; border-radius: 1px; background: var(--c-team); }
.rows-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; color: var(--ink3); font-size: 12px; }
.rows-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rows-legend .me-k { width: 14px; height: 6px; border-radius: 3px; background: var(--c1); }
.rows-legend .tm-k { width: 2px; height: 12px; background: var(--c-team); }
.rows-legend .zone-k { width: 14px; height: 10px; border-radius: 3px; background: var(--c-target); box-shadow: inset 0 0 0 1px light-dark(rgba(22, 122, 78, .25), rgba(78, 201, 138, .3)); }

/* ---------- Charts ---------- */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--ink2); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.legend .ln { width: 14px; height: 0; border-top: 2px solid; }
.legend .ln.dash { border-top-style: dashed; }
.legend .zn { width: 12px; height: 10px; border-radius: 2px; background: var(--c-target); }
.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { fill: var(--ink3); font-family: var(--font); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chart .grid line { stroke: var(--c-grid); stroke-width: 1; }
.chart .base { stroke: var(--line2); stroke-width: 1; }
.chart .s1 { fill: var(--c1); } .chart .s2 { fill: var(--c2); }
.chart .l1 { fill: none; stroke: var(--c1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .l2 { fill: none; stroke: var(--c2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .a1 { fill: var(--c1); fill-opacity: .1; }
.chart .lt { fill: none; stroke: var(--c-team); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .zone { fill: var(--c-target); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hit:hover, .chart .hit.on { fill: var(--sunken); fill-opacity: .7; }
.chart .dot { stroke: var(--surface); stroke-width: 2; opacity: 0; pointer-events: none; }
.chart .dot.on { opacity: 1; }
.chart .pt { pointer-events: none; }
.chart .bar { transition: opacity .15s; }
.chart.hovering .bar { opacity: .45; }
.chart.hovering .bar.on { opacity: 1; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.chart-table th:first-child, .chart-table td:first-child { text-align: left; }
.chart-table th { color: var(--ink3); font-size: 12px; font-weight: 600; }
.table-wrap { max-height: 240px; overflow: auto; }

/* heatmap */
.heat-legend { display: flex; align-items: center; gap: 8px; color: var(--ink3); font-size: 12px; }
.heat-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: var(--c1); }
.chart .cell { fill: var(--c1); stroke: var(--surface); stroke-width: 2; }
.chart .cell0 { fill: var(--sunken); stroke: var(--surface); stroke-width: 2; }
.chart .cell:hover, .chart .cell0:hover { stroke: var(--ink); stroke-width: 1.5; }

/* tooltip */
.tt {
  position: fixed; z-index: 80; max-width: 260px; padding: 9px 12px; border-radius: 10px; background: var(--toast); color: #f5f5f4;
  box-shadow: var(--pop); font-size: 12.5px; line-height: 1.45; pointer-events: none; font-variant-numeric: tabular-nums;
}
.tt b { display: block; margin-bottom: 3px; font-size: 13px; }
.tt .k { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }

/* per model table */
.mtable { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mtable th { padding: 8px 10px; border-bottom: 1px solid var(--line2); color: var(--ink3); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.mtable th:first-child { text-align: left; }
.mtable th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mtable th button:hover { color: var(--ink); }
.mtable th[aria-sort] button { color: var(--ink); }
.mtable td { padding: 10px; border-bottom: 1px solid var(--line); text-align: right; }
.mtable td:first-child { text-align: left; }
.mname { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.mname .av { width: 30px; height: 30px; font-size: 11px; }
.inbar { display: inline-grid; grid-template-columns: 96px 5ch; align-items: center; gap: 10px; }
.inbar .trk { display: block; height: 6px; }
.inbar i { display: block; height: 6px; border-radius: 3px; background: var(--c1); }

/* score explanation */
dialog.how { width: min(560px, calc(100vw - 32px)); }
.how-b { padding: 8px 22px 22px; overflow: auto; }
.how-b dl { margin: 0; display: grid; gap: 12px; }
.how-b dt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.how-b dt span { padding: 0 7px; border-radius: 6px; background: var(--sunken); color: var(--ink2); font-size: 11.5px; line-height: 20px; }
.how-b dd { margin: 3px 0 0; color: var(--ink2); font-size: 13px; line-height: 1.5; }

@media (max-width: 1100px) {
  .score-card { grid-template-columns: minmax(0, 1fr); }
  .charts, .two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .st-page { padding: 20px 12px 64px; }
  .st-head h1 { font-size: 26px; }
  .range { width: 100%; }
  .range > button { flex: 1 1 auto; padding: 0 8px; }
  .st-page > .card, .two > .card, .charts > .card { padding: 16px; }
  .crit li { grid-template-columns: minmax(0, 1fr) 40px; }
  .crit .meter { grid-column: 1 / -1; grid-row: 2; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 12px 10px; }
  .kpi-v { font-size: 22px; }
  /* per model: one compact block per model instead of a table that would scroll sideways */
  .mtable thead { display: none; }
  .mtable tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mtable td { padding: 0; border: 0; text-align: left; }
  .mtable td:first-child { grid-column: 1 / -1; }
  .mtable td[data-l]::before { content: attr(data-l); display: block; color: var(--ink3); font-size: 11.5px; }
  .inbar { display: block; }
  .inbar .trk { display: none; }
  .mtable tr:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ---------- Motion: assets/zahlen.js adds .pre and removes it once the part is in view ---------- */
.ring .val { transition: stroke-dashoffset 1.2s var(--ease); }
.ring.pre .val { stroke-dashoffset: var(--c) !important; }
.meter i { transition: width .9s var(--ease) calc(var(--i, 0) * 70ms); }
.crit.pre .meter i { width: 0 !important; }
.meter s { transition: opacity .4s .7s; }
.crit.pre .meter s { opacity: 0; }
.bullet .mine { transition: width .9s var(--ease) calc(var(--i, 0) * 70ms); }
.rows > div { --i: 0; }
.rows.pre .bullet .mine { width: 0 !important; }
.bullet .tm, .bullet .zone { transition: opacity .4s .6s; }
.rows.pre .bullet .tm, .rows.pre .bullet .zone { opacity: 0; }
.chart .bar { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .75s var(--ease) calc(var(--i, 0) * 14ms), opacity .15s; }
.chart.pre .bar { transform: scaleY(0); }
.chart .l1, .chart .l2 { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
.chart.pre .l1, .chart.pre .l2 { stroke-dashoffset: 1; }
.chart .zone, .chart .lt, .chart .pt, .chart .vl { transition: opacity .5s .5s; }
.chart.pre .zone, .chart.pre .lt, .chart.pre .pt, .chart.pre .vl { opacity: 0; }
.chart .cell, .chart .cell0 { transition: opacity .45s calc(var(--i, 0) * 16ms); }
.chart.pre .cell, .chart.pre .cell0 { opacity: 0; }
.spark .sl { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) .15s; }
.kpi.pre .spark .sl { stroke-dashoffset: 1; }
.spark .sa { transition: opacity .6s .7s; }
.kpi.pre .spark .sa { opacity: 0; }
.inbar i { transition: width .8s var(--ease) calc(var(--i, 0) * 90ms); }
.mtable.pre .inbar i { width: 0 !important; }
.num { font-variant-numeric: tabular-nums; }