/* polls.karbach.digital v4 — Tabs + Wahl-Karten */

.v4-tabs-section{
  max-width:var(--mw);
  margin:0 auto;
  padding:0 1.25rem;
}

wahl-tabs{display:block}

.v4-tabs-loading{
  padding:3rem 1rem;
  text-align:center;
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  color:var(--gray-400);
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* === Tab-Nav (sticky unter der pk-topbar) === */
.v4-tabs-nav{
  display:flex;
  gap:.25rem;
  border-bottom:1px solid var(--gray-200);
  margin:0 -1.25rem;
  padding:0 1.25rem;
  background:color-mix(in oklab, var(--white) 94%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  position:sticky;
  top:49px;               /* unter pk-topbar (~48px + 1px Border) */
  z-index:50;
  overflow-x:auto;
  scrollbar-width:none;
}
.v4-tabs-nav::-webkit-scrollbar{display:none}

.v4-tab{
  background:transparent;
  border:0;
  padding:.95rem 1.1rem;
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--gray-500);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  font-weight:600;
  transition:color var(--tr-fast);
  white-space:nowrap;
  display:inline-flex;
  align-items:baseline;
  gap:.5rem;
}
.v4-tab:hover{color:var(--black)}
.v4-tab.is-active{
  color:var(--black);
  border-bottom-color:var(--black);
  font-weight:700;
}
.v4-tab-count{
  font-size:.65rem;
  font-weight:500;
  color:var(--gray-400);
  font-variant-numeric:tabular-nums;
  padding:.1rem .35rem;
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  letter-spacing:0;
}
.v4-tab.is-active .v4-tab-count{
  color:var(--black);
  border-color:var(--gray-300);
}

/* === Tab-Panels === */
.v4-tabs-panels{
  min-height:520px; /* verhindert Content-Jump zwischen Panels */
  padding:1.5rem 0 2rem;
}
.v4-tab-panel[hidden]{display:none!important}
.v4-tab-panel{animation:v4fade .2s ease}
@keyframes v4fade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.v4-tab-empty{
  padding:2rem;
  text-align:center;
  color:var(--gray-500);
  font-family:var(--font-d);
  font-size:var(--fs-sm);
}

/* === Jahr-Gruppen === */
.v4-wahl-group{margin-bottom:1.75rem}
.v4-wahl-group:last-child{margin-bottom:0}
.v4-wahl-group-head{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  margin-bottom:.7rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--gray-200);
}
.v4-wahl-year{
  font-family:var(--font-d);
  font-size:1.15rem;
  font-weight:700;
  color:var(--black);
  font-variant-numeric:tabular-nums;
}
.v4-wahl-year-count{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray-500);
  font-weight:500;
}

/* === Wahl-Karten-Grid === */
.v4-wahl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:.9rem;
}

.v4-wahl-card{
  --wc-color:var(--gray-400);
  display:flex;
  flex-direction:column;
  border:1px solid var(--gray-200);
  background:var(--white);
  text-decoration:none;
  color:var(--black);
  overflow:hidden;
  transition:border-color var(--tr-fast),transform var(--tr-fast),box-shadow var(--tr-fast);
}
.v4-wahl-card:hover{
  border-color:var(--black);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  text-decoration:none;
}
.v4-wahl-card.is-past{opacity:.82}
.v4-wahl-card.is-past:hover{opacity:1}

/* Von der Karte herübergesprungene Wahl-Card: kurzer Glow-Pulse. */
.v4-wahl-card.is-highlight{
  animation:v4wcGlow 2.2s ease-out 1 both;
}
@keyframes v4wcGlow{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,.0);border-color:var(--gray-200)}
  15%{box-shadow:0 0 0 4px rgba(0,0,0,.12);border-color:var(--black)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);border-color:var(--gray-200)}
}
@media (prefers-reduced-motion: reduce){
  .v4-wahl-card.is-highlight{animation:none;border-color:var(--black)}
}

/* Farb-Banner oben */
.v4-wc-banner{
  background:var(--wc-color);
  color:var(--white);
  padding:.65rem .9rem .55rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.7rem;
  align-items:baseline;
  font-family:var(--font-d);
}
.v4-wc-banner-empty{
  background:var(--gray-100);
  color:var(--gray-500);
  grid-template-columns:1fr;
  text-align:center;
}
.v4-wc-banner-tag{
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  opacity:.85;
}
.v4-wc-banner-party{
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-.01em;
}
.v4-wc-banner-value{
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-md);
  font-weight:700;
  white-space:nowrap;
  grid-column:3;
  grid-row:1;
  justify-self:end;
}
/* Zweite Zeile im Banner für Simulations-Kontext: "stärkste Kraft" unter dem Wert. */
.v4-wc-banner-suffix{
  grid-column:3;
  grid-row:2;
  justify-self:end;
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  opacity:.75;
  line-height:1;
  margin-top:.15rem;
}

/* Body unterm Banner */
.v4-wc-body{
  padding:.75rem .9rem .9rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.v4-wc-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray-500);
  font-weight:600;
}
.v4-wc-title{
  font-size:var(--fs-md);
  font-weight:700;
  letter-spacing:-.012em;
  color:var(--black);
  line-height:1.25;
}
.v4-wc-meta{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  color:var(--gray-600);
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .5rem;
  align-items:baseline;
  line-height:1.55;
  margin-top:.15rem;
}
.v4-wc-sep{color:var(--gray-300)}
.v4-wc-countdown{color:var(--black);font-weight:600}
.v4-wc-meta-freshness{color:var(--gray-500)}

/* Mobile — Tabs werden eng, Karten single-column */
@media (max-width:720px){
  .v4-tab{
    padding:.85rem .85rem;
    font-size:.65rem;
    letter-spacing:.08em;
    gap:.35rem;
  }
  .v4-tab-count{font-size:.6rem;padding:.05rem .3rem}
  .v4-wahl-grid{grid-template-columns:1fr;gap:.6rem}
  .v4-tabs-panels{min-height:400px;padding-top:1rem}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .v4-tab-panel{animation:none}
  .v4-wahl-card,.v4-wahl-card:hover{transform:none}
}