/* v4 Mini-Sonntagsfrage-Trendline */

.v4-trend-svg{
  width:100%;
  height:auto;
  display:block;
  max-height:420px;        /* großzügig genug für 7 Parteien + Endlabels */
}
.v4-trend-svg.is-compact{max-height:150px}

.v4-trend-dot{transition:r .1s ease, opacity .1s ease, stroke-width .1s ease}

/* Wahltermin-Marker (pulsierender Dot am oberen Chart-Rand) */
.v4-trend-marker-dot{
  animation:v4TrendMarkerPulse 1.8s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes v4TrendMarkerPulse{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.35);opacity:1}
}
.v4-trend-marker-label{
  font-family:var(--font-d);
  font-size:9px;
  font-weight:700;
  fill:#111;
  letter-spacing:.02em;
}
@media (prefers-reduced-motion: reduce){
  .v4-trend-marker-dot{animation:none}
}
.v4-trend-hoverline{pointer-events:none}
.v4-trend-overlay{pointer-events:all}

/* Hover-Tooltip — heller Kasten, damit dunkle Parteifarben (CDU/CSU schwarz)
   und helle (FDP gelb) gegen den Hintergrund gleichermaßen lesbar bleiben.
   Die Parteifarbe trägt nur der Dot; Werte + Namen sind einheitlich dunkel. */
.v4-trend-tooltip{
  position:absolute;
  pointer-events:none;
  background:rgba(255,255,255,.97);
  color:var(--gray-900, #111);
  padding:.6rem .75rem;
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  line-height:1.35;
  border:1px solid var(--gray-200);
  box-shadow:0 6px 22px rgba(0,0,0,.14);
  border-radius:2px;
  min-width:200px;
  max-width:280px;
  z-index:10;
}
.v4-trend-tt-head{
  margin-bottom:.4rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--gray-200);
}
.v4-trend-tt-date{
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--black);
  font-size:var(--fs-sm);
}
.v4-trend-tt-inst{
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gray-500);
  margin-top:.15rem;
  font-weight:600;
}
.v4-trend-tt-row{
  display:grid;
  grid-template-columns:10px 1fr auto;
  gap:.5rem;
  align-items:baseline;
  padding:.14rem 0;
}
.v4-trend-tt-dot{
  width:9px;height:9px;
  border-radius:50%;
  display:inline-block;
  align-self:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.04);
}
.v4-trend-tt-party{
  color:var(--gray-800);
  font-weight:500;
}
.v4-trend-tt-pct{
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:right;
  color:var(--black);
}
.v4-trend-axis{
  font-family:var(--font-d);
  font-size:10px;
  fill:var(--gray-500);
  font-variant-numeric:tabular-nums;
}
.v4-trend-label{
  font-family:var(--font-d);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.v4-trend-empty{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  color:var(--gray-400);
  text-align:center;
  padding:2rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}

/* === Proof-Strip: kompakter, stats + Mini-Trendline === */
.v4-proof{
  max-width:var(--mw);
  margin:0 auto;
  padding:.9rem 1.25rem;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,2vw,2rem);
  align-items:center;
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
  background:var(--gray-50);
}
@media (max-width:900px){
  .v4-proof{grid-template-columns:1fr;gap:1rem}
}

.v4-proof-stats{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
}
.v4-proof-stat{
  display:flex;
  flex-direction:column;
  gap:.05rem;
  min-width:0;
}
.v4-proof-stat-num{
  font-family:var(--font-d);
  font-size:1.15rem;           /* vorher clamp(1.5, 2.8vw, 2.1rem) */
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--black);
}
.v4-proof-stat-label{
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gray-500);
  font-weight:600;
  line-height:1.3;
}

.v4-proof-trend{
  min-width:0;
}
.v4-proof-trend-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.5rem;
  flex-wrap:wrap;
}
.v4-proof-trend-title{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray-700);
  font-weight:700;
}
.v4-proof-trend-sub{
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  color:var(--gray-500);
  font-weight:500;
}

@media (prefers-reduced-motion: reduce){
  .v4-trend-svg path{stroke-dasharray:none}
}