/* polls.karbach.digital v4 — Hero-Section
   Nutzt Tokens aus /assets/base.css (--gray-*, --black, --font-s, --font-d, --mw, ...).
   Keine eigenen Farben, keine externen Imports.
*/

/* === Hero: Karte dominant + kompakte Wahl-Info ===
   Max-Feedback: "Macht diese nächste Wahlgeschichte kleiner. Deutschlandkarte
   soll fett auf der Startseite sein, im Hero. Direkt laden zum gucken." */
.v4-hero{
  min-height:auto;
  display:grid;
  /* Karte dominanter: 1fr Info : 2fr Karte (v3-Layout-angelehnt). */
  grid-template-columns:minmax(260px,1fr) minmax(0,2fr);
  gap:clamp(2rem,4vw,3.5rem);
  max-width:var(--mw);
  margin:0 auto;
  padding:clamp(2rem,5vh,3rem) 1.25rem clamp(2rem,5vh,3rem);
  align-items:start;
}
.v4-hero-info{
  display:flex;
  flex-direction:column;
  gap:clamp(.5rem,1vh,.8rem);
  min-width:0;
  /* sticky wurde entfernt (Max-Feedback: "Scroll-Verhalten sehr wild").
     Info scrollt jetzt normal mit dem Rest der Seite. */
}
.v4-hero-map-col{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  width:100%;
}
.v4-hero-map-frame{
  width:100%;
  padding:.5rem .5rem 0;
  background:var(--white);
}

/* === Typo === */
.v4-hero-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-500);
  font-weight:600;
}
.v4-hero-title{
  /* deutlich kleiner — vorher clamp(2rem,5.2vw,3.6rem) */
  font-size:clamp(1.5rem,3.2vw,2.2rem);
  line-height:1.1;
  letter-spacing:-.018em;
  font-weight:700;
  color:var(--black);
  max-width:22ch;
}
.v4-hero-title .v4-hero-name{
  display:block;
}
.v4-hero-meta{
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  color:var(--gray-600);
  display:flex;
  flex-wrap:wrap;
  gap:.45rem 1rem;
  align-items:baseline;
}
.v4-hero-meta .v4-hero-meta-sep{color:var(--gray-300)}

/* === Countdown === */
.v4-hero-countdown-label{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray-500);
  font-weight:500;
  margin-top:.15rem;
}
/* Countdown + Label enger beisammen */
.v4-hero-countdown{margin:0}
.v4-hero-countdown{
  /* kompakter — vorher clamp(3rem,8vw,6rem) */
  font-family:var(--font-d);
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.6rem,3.5vw,2.6rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--black);
  margin:.1rem 0;
  display:inline-block;
}
.v4-hero-countdown .tu-n{display:inline-block;min-width:.5ch}
.v4-hero-countdown .tu-u{
  font-size:.38em;
  color:var(--gray-400);
  font-weight:400;
  margin-left:.08em;
  margin-right:.35em;
  letter-spacing:0;
  text-transform:lowercase;
}

/* === Sentence === */
.v4-hero-sentence{
  font-size:var(--fs-md);
  line-height:1.5;
  color:var(--gray-800);
  max-width:36ch;
  font-weight:400;
}

/* === CTA === */
.v4-hero-cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.25rem;
  border:1px solid var(--black);
  background:var(--white);
  color:var(--black);
  text-decoration:none;
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:600;
  transition:background var(--tr-fast),color var(--tr-fast);
  width:fit-content;
  margin-top:.4rem;
}
.v4-hero-cta::after{content:"→";display:inline-block;transition:transform var(--tr-fast)}
.v4-hero-cta:hover{background:var(--black);color:var(--white);text-decoration:none}
.v4-hero-cta:hover::after{transform:translateX(2px)}

/* Density-Bar ist seit dem Hero-Redesign nicht mehr im Hero —
   wandert in die Wahl-Detail-Panels in einer späteren Phase. */

/* Highlighted-Bundesland auf der Karte — der Kreis/Pfad der nächsten Wahl
   bekommt einen kräftigen schwarzen Rahmen. */
.v4-map-path.is-next-highlight{
  stroke:var(--black);
  stroke-width:3;
}
.v4-hero-map-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:.5rem;
}

/* === No-JS-Fallback === */
.v4-hero-nojs{
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  color:var(--gray-700);
  background:var(--gray-50);
  border-left:3px solid var(--black);
  padding:1rem 1.25rem;
  max-width:60ch;
  line-height:1.6;
}

/* === Mobile === */
@media (max-width:900px){
  .v4-hero{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .v4-hero-info{position:static}
  .v4-hero-title{max-width:none}
}

@media (max-width:560px){
  .v4-hero-countdown{font-size:clamp(2.4rem,11vw,4rem)}
  .v4-hero-meta{flex-direction:column;gap:.15rem}
  .v4-hero-meta .v4-hero-meta-sep{display:none}
}

/* Reduced motion — keine CTA-Arrow-Translation */
@media (prefers-reduced-motion: reduce){
  .v4-hero-cta,.v4-hero-cta::after{transition:none}
  .v4-hero-cta:hover::after{transform:none}
}