/* v4 Dumbbell — "seit letzter Wahl": Ergebnis (Ring) gegen aktuellen Stand (Punkt) */

.v4-db-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

/* Achse: bewusst recessiv. Keine vertikalen Linien ueber die Punkte hinaus,
 * die Werteachse ist Orientierung, nicht Inhalt. */
.v4-db-gitter{
  stroke:var(--gray-100);
  stroke-width:1;
}
.v4-db-tick{
  font-family:var(--font-m);
  font-size:11px;
  fill:var(--gray-500);
  text-anchor:middle;
}

.v4-db-name{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  font-weight:700;
  fill:var(--black);
  text-anchor:start;
}

/* Die Verbindungslinie ist die eigentliche Aussage: ihre Laenge = die
 * Verschiebung. Deshalb kraeftig, nicht als Hilfslinie. */
.v4-db-verbindung{
  stroke-width:3;
  stroke-linecap:round;
  opacity:.55;
}

/* Offener Ring = Ergebnis der letzten Wahl (Vergangenheit, "leer"). */
.v4-db-vorher{
  fill:var(--white);
  stroke-width:2.5;
}

/* Gefuellter Punkt = aktueller Stand (Gegenwart, "voll"). Der Ring in
 * Seitenfarbe trennt ihn sauber von der Verbindungslinie. */
.v4-db-jetzt{
  stroke:var(--white);
  stroke-width:1.5;
}

.v4-db-delta{
  font-family:var(--font-m);
  font-size:var(--fs-xs);
  fill:var(--gray-600);
  text-anchor:start;
  font-variant-numeric:tabular-nums;
}
/* Richtung wird NICHT nur ueber Farbe kodiert (das Vorzeichen steht im Text);
 * die Faerbung ist nur eine zweite, redundante Lesehilfe. */
.v4-db-delta-plus{ fill:var(--gray-800); }
.v4-db-delta-minus{ fill:var(--gray-500); }

.v4-db-zeile:hover .v4-db-verbindung{ opacity:.9; }

.v4-db-legende{
  display:flex;
  flex-wrap:wrap;
  gap:1.1rem;
  margin-top:.7rem;
  font-family:var(--font-s);
  font-size:var(--fs-xs);
  color:var(--gray-600);
}
.v4-db-leg{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.v4-db-leg-ring,
.v4-db-leg-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  flex:0 0 auto;
}
.v4-db-leg-ring{
  background:var(--white);
  border:2px solid var(--gray-600);
}
.v4-db-leg-dot{
  background:var(--gray-600);
}

/* Mobil: die Partei-Spalte darf schmaler werden, das SVG skaliert ueber
 * viewBox mit. Nur die Schriftgroessen brauchen einen Boden. */
@media (max-width:520px){
  .v4-db-tick{ font-size:10px; }
}