/* ============================================================
   viz.css — Aussehen der Ergebnis-Darstellungen (zu viz.js).
   Alle Grössen in Container-Einheiten (cqh/cqw): dieselbe Folie
   skaliert von selbst — Beamer, Raster-Viertel, Kachel-Vorschau.
   ============================================================ */
.hzv{
  --v-accent:#E9699A; --v-accent-ink:#B8336A; --v-accent-soft:#FCE6EF; --v-accent-faint:#FEF4F8; --v-blue:#4C5FE0; --v-navy:#2E3A87;
  --v-ink:#17171C; --v-muted:#6B6B76; --v-line:#E4E4EA; --v-panel:#F6F6F8;
  --v-good:#237A47; --v-good-soft:#DCEFE3;
  --v-red:#E0352B; --v-yellow:#F5B400; --v-green:#1FA35C; --v-housing:#23232A;
  container-type:size; position:relative; width:100%; height:100%; overflow:hidden; color:var(--v-ink);
  font-variant-numeric:tabular-nums;
}
.hzv-empty{height:100%;display:flex;align-items:center;justify-content:center;gap:1.5cqh;color:var(--v-muted);font-size:max(11px,4cqh);text-align:center}

/* Moderations-Knöpfe (nur Beamer) */
.hzv-act{position:relative;width:34px;height:34px;border:none;border-radius:0;background:rgba(255,255,255,.95);color:var(--v-muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:pointer}
.hzv-act::before{content:'';position:absolute;inset:-5px}
.hzv-act:hover{color:#B3261E}
.hzv-act.ok:hover{color:var(--v-good)}
.hzv-acts{position:absolute;top:6px;right:6px;display:none;gap:4px}
.hzv-note:hover .hzv-acts,.hzv-note:focus-within .hzv-acts,.hzv-q:hover .hzv-acts,.hzv-q:focus-within .hzv-acts{display:flex}
@media (hover:none){.hzv-acts{display:flex}}

/* ── Wortwolke ── */
.hzv-cloud{position:absolute;inset:0}
.hzv-word{position:absolute;transform:translate(-50%,-50%);font-weight:600;line-height:1;white-space:nowrap;letter-spacing:-.01em;animation:hzv-in .25s ease-out both}
.hzv-word.vert{transform:translate(-50%,-50%) rotate(-90deg)}
.hzv-word .hzv-act{position:absolute;top:-14px;right:-14px;display:none;width:28px;height:28px;font-size:15px}
.hzv-word:hover .hzv-act,.hzv-word:focus-within .hzv-act{display:inline-flex}
.hzv-word:focus-visible{outline:2px solid var(--v-accent);outline-offset:4px;border-radius:0}

/* ── Säulen: Abstimmung, Quiz ── */
.hzv-cols{height:100%;margin:0 auto;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3cqw;
  width:min(100%,calc(var(--n) * 15cqw));height:92%;padding-top:2cqh}
.hzv-cols.quiz{width:min(100%,calc(var(--n) * 13cqw));height:80%;margin-top:4cqh}
.hzv-col{display:flex;flex-direction:column;min-width:0}
.hzv-colbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-height:0}
.hzv-colbar b{text-align:center;font-size:max(12px,7cqh);font-weight:600;line-height:1;margin-bottom:1.6cqh}
.hzv-colbar span{display:block;background:var(--c,var(--v-blue));min-height:3px}
.hzv-collab{border-top:2px solid var(--v-ink);padding-top:1.8cqh;text-align:center;font-size:max(10px,3.6cqh);line-height:1.25}
.hzv-collab span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;height:2.5em}
.hzv-collab em{display:block;font-style:normal;color:var(--v-good);font-weight:600;margin-top:.4em}
.hzv-col.good .hzv-colbar span{background:var(--v-good)}
.hzv-col.good .hzv-colbar b{color:var(--v-good)}
.hzv-col.dim .hzv-colbar span{background:#DADAE2}
.hzv-col.dim .hzv-colbar b,.hzv-col.dim .hzv-collab{color:var(--v-muted)}

/* ── Skala: Regler ── */
.hzv-scales{height:100%;display:flex;flex-direction:column;justify-content:center;gap:6cqh;padding:0 4cqw}
.hzv-scalelab{font-size:max(11px,4.2cqh);font-weight:600;margin-bottom:1cqh}
.hzv-track{position:relative;height:max(40px,16cqh)}
.hzv-rail{position:absolute;left:0;right:0;bottom:4.5cqh;height:max(6px,1.8cqh);
  background:linear-gradient(90deg,#E5484D,#F5C542 50%,#2E9E5B)}
.hzv-tick{position:absolute;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.hzv-tick::before{content:'';width:2px;height:max(8px,2.6cqh);background:var(--v-line);margin-bottom:.4cqh}
.hzv-tick em{font-style:normal;font-size:max(10px,2.8cqh);color:var(--v-muted)}
.hzv-knob{position:absolute;bottom:3.1cqh;width:max(18px,5cqh);height:max(18px,5cqh);margin-left:calc(max(18px,5cqh) / -2);border-radius:50%;
  background:#fff;border:max(3px,1cqh) solid var(--v-ink);box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:2}
.hzv-knob b{position:absolute;bottom:calc(100% + 1.2cqh);left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--v-ink);color:#fff;font-size:max(11px,3.8cqh);font-weight:600;padding:.6cqh 1.6cqh}
.hzv-stacks{position:absolute;left:0;right:0;bottom:7cqh;height:calc(100% - 7cqh)}
.hzv-stack{--mx:inherit;position:absolute;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:.5cqh}
.hzv-scale.dist .hzv-track{height:max(90px,calc(60cqh / var(--rows,2)))}
.hzv-stack i{--d:min(2.4cqh,calc((100cqh / var(--rows,2) * .55) / var(--mx,12)));width:var(--d);height:var(--d);border-radius:50%;background:var(--v-blue)}
.hzv-stack b{font-size:max(10px,2.8cqh);font-weight:600;color:var(--v-navy)}
.hzv-ends{display:flex;justify-content:space-between;font-size:max(10px,2.8cqh);color:var(--v-muted);margin-top:.6cqh}

/* ── Ranking ── */
.hzv-rank{height:100%;display:flex;flex-direction:column;justify-content:center;gap:1.4cqh;max-width:92cqw;margin:0 auto}
.hzv-rankhead,.hzv-rankrow{display:grid;grid-template-columns:8cqh minmax(0,1fr) repeat(var(--cells),minmax(5cqh,9cqh));align-items:center;gap:1.4cqh;padding:0 1.6cqh}
.hzv-rankrow{background:var(--v-panel);border-radius:0;padding:1.4cqh 1.6cqh}
.hzv-rankhead span{text-align:center;font-size:max(10px,2.6cqh);color:var(--v-muted);font-weight:600}
.hzv-rk{font-size:max(14px,6cqh);font-weight:600;color:var(--v-navy);text-align:center}
.hzv-rankrow.top{background:#EEF0FC;box-shadow:inset 0 0 0 2px #CDD3F7}
.hzv-rl{font-size:max(11px,4.4cqh);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hzv-rankrow.top .hzv-rl{font-size:max(12px,5.2cqh)}
.hzv-cell{height:max(20px,7cqh);border-radius:0;display:flex;align-items:center;justify-content:center;font-size:max(10px,3cqh);font-weight:600;
  background:color-mix(in srgb,var(--v-blue) calc(var(--a) * 100%),#fff);color:var(--v-ink)}
.hzv-cell.hi{color:#fff}
.hzv-rankhead .hzv-platz{text-align:right}

/* ── Q&A: Spalten statt endlos breiter Zeilen ── */
.hzv-qa{height:100%;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(max(180px,30cqw),1fr));gap:1.8cqh;align-content:start}
.hzv-q{position:relative;display:flex;gap:2cqh;align-items:flex-start;background:var(--v-panel);border-radius:0;padding:2cqh 2.4cqh;font-size:max(11px,3.4cqh);line-height:1.35}
.hzv-votes{display:inline-flex;align-items:center;gap:.8cqh;flex-shrink:0;min-width:9cqh;font-weight:600;color:var(--v-navy);
  background:#fff;padding:.6cqh 1.6cqh .6cqh 1.2cqh}
.hzv-votes i{font-size:1.1em}
.hzv-qt{flex:1;min-width:0;overflow-wrap:anywhere}
.hzv-who{display:block;font-size:.72em;color:var(--v-muted);margin-top:.6cqh}
.hzv-q.done{opacity:.5}.hzv-q.done .hzv-qt{text-decoration:line-through}

/* ── Notizen ── */
.hzv-notes{height:100%;overflow:auto;display:flex;align-items:flex-start;column-gap:1.8cqh}
.hzv-notecol{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.8cqh}
.hzv-note{position:relative;border-radius:0;padding:2cqh 2.4cqh;font-size:max(11px,3.4cqh);line-height:1.35;overflow-wrap:anywhere;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.05);animation:hzv-in .25s ease-out both}

/* ── Ampel: Gehäuse mit drei Lampen ── */
.hzv-ampel{height:100%;display:flex;align-items:center;justify-content:center}
.hzv-housing{background:var(--v-housing);border-radius:0;padding:3cqh 4cqh 3cqh 3cqh;display:flex;flex-direction:column;gap:2.4cqh;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hzv-lamprow{display:flex;align-items:center;gap:3cqh}
.hzv-lamp{width:22cqh;height:22cqh;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:#3A3A42;box-shadow:inset 0 3px 8px rgba(0,0,0,.5)}
.hzv-lamp b{font-size:10cqh;font-weight:600;color:rgba(255,255,255,.35)}
.hzv-lamp.on b{color:#fff}
.hzv-lamp.r.on{background:radial-gradient(circle at 38% 32%,#FF8A80,var(--v-red) 55%,#A31F17)}
.hzv-lamp.y.on{background:radial-gradient(circle at 38% 32%,#FFE08A,var(--v-yellow) 55%,#B98300)}
.hzv-lamp.g.on{background:radial-gradient(circle at 38% 32%,#8CE3B0,var(--v-green) 55%,#127040)}
.hzv-lamp.y.on b{color:#2B2100}
.hzv-lamp.max.r{box-shadow:0 0 5cqh rgba(224,53,43,.55)}
.hzv-lamp.max.y{box-shadow:0 0 5cqh rgba(245,180,0,.55)}
.hzv-lamp.max.g{box-shadow:0 0 5cqh rgba(31,163,92,.55)}
.hzv-lamplab{color:#fff;font-size:max(11px,4cqh);font-weight:600;min-width:30cqh;display:block}
.hzv-lamplab i{font-size:1em;opacity:.8;margin-right:.3em}
.hzv-lamplab em{display:block;font-style:normal;font-weight:400;color:rgba(255,255,255,.72);font-size:.85em}

/* ── Pin auf Bild ── */
.hzv-pinwrap{height:100%;display:flex;align-items:center;justify-content:center}
.hzv-pinimg{position:relative;height:100%;display:flex;align-items:center}
.hzv-pinimg img{display:block;max-width:100%;max-height:100%;border-radius:0}
.hzv-pin{position:absolute;width:max(16px,5cqh);transform:translate(-50%,-96%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));animation:hzv-drop .3s ease-out both}
.hzv-pin svg{display:block;width:100%;height:auto}

.hzv-compact .hzv-act,.hzv-compact .hzv-acts{display:none!important}
@keyframes hzv-in{from{opacity:0}to{opacity:1}}
@keyframes hzv-drop{from{opacity:0;transform:translate(-50%,-140%)}to{opacity:1;transform:translate(-50%,-96%)}}
@media (prefers-reduced-motion:reduce){.hzv *{animation:none!important;transition:none!important}}