/* AGENCY — Vergleich zweier Agenten */

.cmp-pickers{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin-top:22px}
@media (max-width:720px){ .cmp-pickers{grid-template-columns:1fr; gap:10px} }
.cmp-vs{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}
.picker{
  border:1px solid var(--line-2); border-radius:12px; background:var(--surface);
  padding:13px 15px; display:flex; align-items:center; gap:12px;
}
.picker.a{border-color:var(--s1)} .picker.b{border-color:var(--s2)}
.picker .av{width:38px; height:38px; border-radius:9px; overflow:hidden; flex:none;
  border:1px solid var(--line-2)}
.picker .who{flex:1; min-width:0}
.picker .who b{display:block; font-family:var(--mono); font-size:13.5px}
.picker .who span{font-size:11.5px; color:var(--muted)}
.picker select{
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink);
  border-radius:var(--r-sm); padding:6px 9px; font-size:13px; max-width:100%;
}

/* ── Urteil ─────────────────────────────────────────────────────────────── */

.hh-verdict{
  border-top:1px solid var(--line); padding:14px 18px; font-size:14px; line-height:1.6;
  background:var(--surface-2);
}
.hh-verdict b{color:var(--ink)}

/* ── Zahlen ─────────────────────────────────────────────────────────────── */

table.cmp.hh td:first-child{color:var(--ink-2)}
table.cmp.hh .win{position:relative; font-weight:600}
table.cmp.hh .win::after{
  content:''; position:absolute; left:6px; right:6px; bottom:4px; height:2px;
  background:currentColor; opacity:.4; border-radius:1px;
}
table.cmp.hh .note{font-size:11px; color:var(--muted); display:block; margin-top:2px}

/* ── Runden ─────────────────────────────────────────────────────────────── */

.rounds{display:flex; flex-wrap:wrap; gap:4px}
.rounds i{
  width:19px; height:19px; border-radius:4px; display:block; cursor:default;
  border:1px solid transparent;
}
.rounds-key{display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:12px; color:var(--muted)}
.rounds-key span{display:inline-flex; align-items:center; gap:7px}
.rounds-key i{width:13px; height:13px; border-radius:3px; display:inline-block}

/* ── Regeln nebeneinander ───────────────────────────────────────────────── */

.hh-rules{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:820px){ .hh-rules{grid-template-columns:1fr} }
.hh-col{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.hh-col-top{
  padding:11px 15px; border-bottom:1px solid var(--line); background:var(--surface-2);
  display:flex; align-items:center; gap:10px;
}
.hh-col-top .av{width:26px; height:26px; border-radius:6px; overflow:hidden; border:1px solid var(--line-2)}
.hh-col-top b{font-family:var(--mono); font-size:13px}
.hh-col-body{padding:14px 15px}

/* ── Universum ──────────────────────────────────────────────────────────── */

.hh-uni{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.hh-uni > div{background:var(--surface); padding:15px 17px}
.hh-uni h4{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:10px;
}
.hh-uni .syms{display:flex; flex-wrap:wrap; gap:5px}
.hh-uni .sym{
  font-family:var(--mono); font-size:11px; padding:3px 8px; border-radius:99px;
  border:1px solid var(--line-2); background:var(--surface-2);
}
.hh-uni .sym.a{border-color:var(--s1); color:var(--s1)}
.hh-uni .sym.b{border-color:var(--s2); color:var(--s2)}
.hh-uni .empty{font-size:12.5px; color:var(--muted)}