/* v4 Block-Layout (index.v4.html): Bundeslage, Störer, Wahl-Detail
 * Setzt auf base.css + hero.css auf, ersetzt die alte v4-hero-Struktur
 * durch klarer getrennte Blöcke.
 */

/* ====================================================================
 * BLOCK 1 — Bundeslage
 * ==================================================================== */

.v4-bundeslage{
  max-width:var(--mw);
  margin:0 auto;
  padding:clamp(2rem,5vh,3rem) 1.25rem clamp(2rem,4vh,2.5rem);
  display:flex;
  flex-direction:column;
  gap:clamp(1.5rem,3vh,2.5rem);
}

/* Section-Header für Block 1 — klärt "worum geht's auf dieser Seite". */
.v4-bundeslage-head{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-bottom:clamp(.5rem,1.5vh,1rem);
}
.v4-bundeslage-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-500);
  font-weight:700;
}
.v4-bundeslage-title{
  font-size:clamp(1.8rem,4vw,2.8rem);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:700;
  margin:0;
}
.v4-bundeslage-sub{
  font-family:var(--font-d);
  font-size:var(--fs-md);
  color:var(--gray-700);
  line-height:1.5;
  margin:0;
  max-width:68ch;
}

/* Oben: Lagebild links, Karte rechts */
.v4-bundeslage-top{
  display:grid;
  grid-template-columns:minmax(260px,2fr) minmax(0,3fr);  /* Lagebild 40%, Karte 60% */
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
}
@media (max-width:900px){
  .v4-bundeslage-top{grid-template-columns:1fr}
}

.v4-bundeslage-lagebild{
  min-width:0;
}
/* Innerhalb der Lagebild-Spalte: kompakter v4-gwl ohne externes Padding
   (v4-gwl hat max-width 78ch und eigenes Inset — das wollen wir hier nicht). */
.v4-bundeslage-lagebild .v4-gwl{max-width:none}

.v4-bundeslage-karte{
  min-width:0;
  width:100%;
}
.v4-bundeslage-karte .v4-map-container{
  max-width:none;
  margin:0;
}
.v4-bundeslage-karte-tip{
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray-500);
  text-align:center;
  margin-top:.6rem;
}

/* Bundestrend-Chart (full-width unter dem oberen Zwei-Spalter) */
.v4-bundeslage-trend{
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
}
.v4-bundeslage-trend-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.8rem;
  flex-wrap:wrap;
  margin-bottom:.4rem;
}
.v4-bundeslage-trend-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--black);
  font-weight:700;
}
.v4-bundeslage-trend-sub{
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gray-500);
  font-weight:500;
}

/* Bundes-Grid: Density links, Koalitionen rechts (analog zu Wahl-Detail) */
.v4-bundeslage-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
}
@media (max-width:900px){
  .v4-bundeslage-grid{grid-template-columns:1fr}
}
.v4-bundeslage-grid .v4-density-container{max-width:none}

/* Umfragen-Tabelle unter dem Bundestrend */
.v4-bundeslage-polls{
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
}

/* Langfrist-Trend (monatlich aggregiert, seit 2017) */
.v4-bundeslage-longterm{
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
}

/* Approval-Strip unter dem Bundestrend */
.v4-bundeslage-approval{
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
}

/* GDELT-Tone-Strip */
.v4-bundeslage-gdelt{
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
}

/* Nowcast */
.v4-bundeslage-nowcast{
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
}

/* Weekly-Headlines am Ende von Block 1 */
.v4-bundeslage-news{
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
}

/* Stats-Row (nicht mehr in Block 1 — Fallback falls anderswo genutzt) */
.v4-bundeslage-stats{
  display:flex;
  gap:clamp(1rem,3vw,2.5rem);
  flex-wrap:wrap;
  padding-top:.6rem;
  border-top:1px dashed var(--gray-200);
}

/* ====================================================================
 * METHODIK-STRIP (zwischen Block 3 und Block 4)
 * ==================================================================== */
.v4-methodik-strip{
  max-width:var(--mw);
  margin:clamp(1.5rem,4vh,3rem) auto;
  padding:0 1.25rem;
}
.v4-methodik-strip-inner{
  background:var(--gray-50);
  border:1px solid var(--gray-200);
  padding:clamp(1.2rem,3vh,1.8rem) clamp(1.25rem,3vw,2rem);
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(0,2fr) auto;
  gap:clamp(1rem,3vw,2rem);
  align-items:center;
}
.v4-methodik-strip-head{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.v4-methodik-strip-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--black);
  letter-spacing:-.005em;
}
.v4-methodik-strip-sub{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  color:var(--gray-600);
  line-height:1.5;
}
.v4-methodik-strip-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.6rem,2vw,1.5rem);
  align-items:baseline;
}
.v4-methodik-stat{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}
.v4-methodik-stat-num{
  font-family:var(--font-d);
  font-size:clamp(1.2rem,2.5vw,1.6rem);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--black);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.v4-methodik-stat-label{
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gray-600);
  font-weight:500;
}
.v4-methodik-strip-cta{
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
  color:var(--black);
  text-decoration:none;
  border-bottom:1px solid var(--black);
  padding-bottom:.1rem;
  white-space:nowrap;
  transition:color var(--tr-fast), border-color var(--tr-fast);
}
.v4-methodik-strip-cta:hover{
  color:var(--gray-700);
  border-color:var(--gray-700);
  text-decoration:none;
}
@media (max-width:900px){
  .v4-methodik-strip-inner{grid-template-columns:1fr;gap:1.2rem}
  .v4-methodik-strip-cta{justify-self:start}
}
@media (max-width:560px){
  .v4-methodik-strip-stats{grid-template-columns:repeat(2,1fr);gap:.9rem}
}

/* ====================================================================
 * STÖRER — Banner zwischen Block 1 und Block 2
 * ==================================================================== */

.v4-stoerer{
  display:block;
  max-width:var(--mw);
  margin:0 auto clamp(2rem,4vh,3rem);
  padding:0 1.25rem;
  text-decoration:none;
  color:inherit;
}
.v4-stoerer:hover{text-decoration:none}

.v4-stoerer-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1rem 1.5rem;
  align-items:center;
  padding:1rem 1.4rem;
  background:var(--black);
  color:var(--white);
  transition:background var(--tr-fast);
}
.v4-stoerer:hover .v4-stoerer-inner{background:var(--gray-800)}

.v4-stoerer-icon{
  font-size:1.4rem;
  line-height:1;
  color:var(--white);
}
.v4-stoerer-body{min-width:0}
.v4-stoerer-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-400);
  font-weight:700;
  margin-bottom:.15rem;
}
.v4-stoerer-title{
  font-family:var(--font-d);
  font-size:var(--fs-md);
  font-weight:600;
  letter-spacing:-.005em;
  display:flex;
  flex-wrap:wrap;
  gap:.3rem .6rem;
  align-items:baseline;
}
.v4-stoerer-sep{color:var(--gray-500)}
.v4-stoerer-cta{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:700;
  white-space:nowrap;
}

@media (max-width:560px){
  .v4-stoerer-inner{grid-template-columns:auto 1fr;gap:.8rem}
  .v4-stoerer-cta{display:none}
}

/* ====================================================================
 * BLOCK 2 — Nächste Wahl im Detail
 * ==================================================================== */

.v4-wahl-detail{
  max-width:var(--mw);
  margin:0 auto;
  padding:clamp(1.5rem,3vh,2.5rem) 1.25rem clamp(2.5rem,5vh,4rem);
  scroll-margin-top:70px; /* für Störer-Anker-Link: unter der sticky Topbar stoppen */
}
.v4-wahl-detail-head{
  margin-bottom:clamp(1.2rem,3vh,2rem);
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

/* ===== Pill-Navigation: "Welche der nächsten Wahlen im Detail?" ===== */
.v4-wd-pills{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin:.4rem 0 .2rem;
}
.v4-wd-pill{
  appearance:none;
  background:var(--white);
  border:1px solid var(--gray-300);
  padding:.55rem .9rem;
  cursor:pointer;
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  color:var(--gray-800);
  display:inline-flex;
  align-items:baseline;
  gap:.55rem;
  transition:border-color var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
  white-space:nowrap;
  text-align:left;
}
.v4-wd-pill:hover{
  border-color:var(--black);
  color:var(--black);
}
.v4-wd-pill.is-active{
  background:var(--black);
  border-color:var(--black);
  color:var(--white);
}
.v4-wd-pill-date{
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.v4-wd-pill-name{
  font-weight:500;
  color:inherit;
}
.v4-wd-pill.is-active .v4-wd-pill-name{color:var(--white)}
.v4-wd-pill-lead{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  color:var(--gray-500);
  border-left:1px solid var(--gray-200);
  padding-left:.55rem;
}
.v4-wd-pill.is-active .v4-wd-pill-lead{
  color:rgba(255,255,255,.8);
  border-left-color:rgba(255,255,255,.25);
}
.v4-wd-pill-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  flex-shrink:0;
}

@media (max-width:560px){
  .v4-wd-pills{gap:.4rem}
  .v4-wd-pill{padding:.5rem .7rem;gap:.4rem}
  .v4-wd-pill-lead{display:none}
}
.v4-wahl-detail-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-500);
  font-weight:700;
}
.v4-wahl-detail-title{
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:700;
}
.v4-wahl-detail-type{
  font-weight:500;
  color:var(--gray-500);
  font-size:.75em;
  margin-left:.25em;
}
.v4-wahl-detail-meta{
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  color:var(--gray-700);
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .7rem;
  align-items:baseline;
}
.v4-wd-meta-sep{color:var(--gray-300)}
.v4-wd-countdown-wrap{color:var(--gray-600)}
.v4-wd-countdown{
  font-family:var(--font-d);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--black);
}
.v4-wd-countdown .tu-u{font-size:.75em;color:var(--gray-500);margin:0 .3em 0 .05em}
.v4-wahl-detail-sentence{
  font-size:var(--fs-md);
  line-height:1.55;
  color:var(--gray-800);
  max-width:60ch;
}

/* v4.4 Tier1-d: kompaktes Score-Badge in Pills */
.v4-wd-pill-score{
  display:inline-flex;
  align-items:baseline;
  gap:.05em;
  font-family:var(--font-d);
  font-size:.74rem;
  font-weight:700;
  padding:.1em .35em;
  margin-left:.4em;
  background:var(--gray-100,#f0f0f0);
  color:var(--gray-700,#444);
  border-radius:2px;
  letter-spacing:.01em;
  white-space:nowrap;
}
.v4-wd-pill-score-max{
  font-size:.85em;
  font-weight:500;
  color:var(--gray-500,#888);
  opacity:.7;
}
.v4-wd-pill.is-active .v4-wd-pill-score{
  background:var(--gray-700,#444);
  color:var(--white,#fff);
}
.v4-wd-pill.is-active .v4-wd-pill-score-max{
  color:rgba(255,255,255,.65);
}

/* v4.4 Tier1-d: Konfidenz-Score-Box */
.v4-wd-confidence{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  align-items:center;
  margin-top:1.2rem;
  padding:.8rem 1rem;
  background:var(--gray-50,#fafafa);
  border-left:3px solid var(--gray-300,#bbb);
  max-width:60ch;
}
.v4-wd-confidence-lead{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.15rem;
  min-width:8rem;
}
.v4-wd-confidence-kicker{
  font-family:var(--font-d);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gray-600,#555);
  font-weight:600;
}
.v4-wd-confidence-score{
  font-family:var(--font-d);
  font-size:1.6rem;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
}
.v4-wd-confidence-score-max{
  font-size:.7em;
  color:var(--gray-500,#888);
  font-weight:500;
}
.v4-wd-confidence-label{
  font-family:var(--font-d);
  font-size:.75rem;
  color:var(--gray-700,#444);
  font-weight:600;
  text-transform:lowercase;
  letter-spacing:.02em;
}
.v4-wd-confidence-components{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.4rem .9rem;
  font-size:.74rem;
  color:var(--gray-700,#444);
  font-family:var(--font-d);
}
.v4-wd-confidence-component{
  display:flex;
  align-items:center;
  gap:.4rem;
}
.v4-wd-confidence-component-label{
  min-width:5.5rem;
}
.v4-wd-confidence-bar{
  flex:1;
  height:.45rem;
  background:var(--gray-200,#e5e5e5);
  position:relative;
  overflow:hidden;
  border-radius:1px;
}
.v4-wd-confidence-bar-fill{
  position:absolute;
  inset:0 auto 0 0;
  background:var(--gray-700,#444);
}
/* Score-Farbe nach Band */
.v4-wd-confidence.is-solide .v4-wd-confidence-score{color:#0f7b3c}
.v4-wd-confidence.is-solide{border-left-color:#0f7b3c}
.v4-wd-confidence.is-belastbar .v4-wd-confidence-score{color:#1a5a90}
.v4-wd-confidence.is-belastbar{border-left-color:#1a5a90}
.v4-wd-confidence.is-vorlaeufig .v4-wd-confidence-score{color:#7a6b1a}
.v4-wd-confidence.is-vorlaeufig{border-left-color:#a67c00}
.v4-wd-confidence.is-grob .v4-wd-confidence-score{color:#a55a1a}
.v4-wd-confidence.is-grob{border-left-color:#c0392b}
.v4-wd-confidence.is-skizze .v4-wd-confidence-score{color:#7a2a2a}
.v4-wd-confidence.is-skizze{border-left-color:#7a2a2a}

@media (max-width: 640px){
  .v4-wd-confidence{
    grid-template-columns:1fr;
    gap:.7rem;
  }
  .v4-wd-confidence-components{
    grid-template-columns:1fr;
  }
}

/* Grid: Density + Koalitionen */
.v4-wahl-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;
  margin-bottom:clamp(1.5rem,3vh,2.5rem);
}
@media (max-width:900px){
  .v4-wahl-detail-grid{grid-template-columns:1fr}
}
.v4-wahl-detail-col{min-width:0}
.v4-wahl-detail-col-head{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--black);
  font-weight:700;
  margin-bottom:.7rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--gray-200);
}

/* Density-Bar im Wahl-Detail soll voll nutzen — override auf max-width:none */
#v4-wd-density.v4-density-container{max-width:none}

/* Mini-Trendline der konkreten Wahl */
.v4-wahl-detail-trend{
  border-top:1px solid var(--gray-200);
  padding-top:1rem;
}
.v4-wahl-detail-trend-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.8rem;
  flex-wrap:wrap;
  margin-bottom:.4rem;
}

/* Umfragen-Tabelle unter dem Wahl-Trend */
.v4-wahl-detail-polls{
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
  margin-top:1.2rem;
}

/* Hemicycle (Sitzverteilung) volle Breite */
.v4-wahl-detail-hemicycle{
  border-top:1px solid var(--gray-200);
  padding-top:1.2rem;
  margin-top:1.2rem;
}

/* ====================================================================
 * BLOCK 3 — Tabs-Section-Header
 * ==================================================================== */
.v4-tabs-section{
  padding-top:clamp(1.5rem,3vh,2.5rem);
  padding-bottom:clamp(2rem,4vh,3rem);
}
.v4-tabs-section-head{
  margin-bottom:1rem;
}
.v4-tabs-section-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-500);
  font-weight:700;
}
.v4-tabs-section-title{
  font-size:clamp(1.4rem,3vw,2rem);
  line-height:1.2;
  letter-spacing:-.018em;
  font-weight:700;
  margin-top:.2rem;
}

/* Mobile: Karte bekommt auf Mobile eine feste Max-Höhe damit sie nicht
   mehr als die halbe Viewport-Höhe einnimmt. */
@media (max-width:700px){
  .v4-bundeslage-karte .v4-map-svg{max-height:60vh}
}