/* polls.karbach.digital v4 — Sections unter Hero/Tabs
   Karte (kollabiert) · Erklärkacheln · Erklärer-Teaser
*/

/* === Karte-Collapse === */
.v4-map-collapse{
  max-width:var(--mw);
  margin:0 auto;
  padding:1rem 1.25rem 2rem;
}
.v4-map-collapse details{
  border:1px solid var(--gray-200);
  background:var(--gray-50);
}
.v4-map-collapse summary{
  list-style:none;
  padding:1.1rem 1.25rem;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--black);
  user-select:none;
}
.v4-map-collapse summary::-webkit-details-marker{display:none}
.v4-map-collapse summary::after{
  content:"+";
  font-size:1.3rem;
  line-height:1;
  color:var(--gray-500);
  font-weight:400;
  flex-shrink:0;
  transition:transform var(--tr-fast);
}
.v4-map-collapse details[open] summary::after{content:"−"}
.v4-map-collapse summary:hover{background:var(--white)}
.v4-map-summary-hint{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  color:var(--gray-500);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-left:auto;
}
.v4-map-content{
  padding:1.25rem 1.25rem 1.5rem;
  border-top:1px solid var(--gray-200);
  background:var(--white);
}
.v4-map-placeholder{
  color:var(--gray-600);
  font-size:var(--fs-sm);
  line-height:1.6;
  max-width:60ch;
}
.v4-map-placeholder a{color:var(--gray-800)}

/* === Erklär-Kacheln (2×2 Raster mit 4. Pulse-Kachel) === */
.v4-tiles{
  max-width:var(--mw);
  margin:clamp(2rem,5vh,4rem) auto;
  padding:0 1.25rem clamp(2rem,5vh,4rem);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.25rem;
}
@media (max-width:700px){
  .v4-tiles{grid-template-columns:1fr}
}

.v4-tile{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1.1rem 1.25rem 1rem;
  border:1px solid var(--gray-200);
  border-left:3px solid var(--black);
  background:var(--white);
  text-decoration:none;
  color:var(--black);
  transition:border-color var(--tr-fast),background var(--tr-fast),transform var(--tr-fast);
}
.v4-tile:hover{
  border-color:var(--black);
  background:var(--gray-50);
  transform:translateY(-1px);
  text-decoration:none;
}
.v4-tile-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray-500);
  font-weight:600;
}
.v4-tile-title{
  font-size:var(--fs-lg);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.25;
  color:var(--black);
}
.v4-tile-sub{
  font-size:var(--fs-sm);
  color:var(--gray-700);
  line-height:1.5;
}
.v4-tile-cta{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  color:var(--black);
  margin-top:.2rem;
}
.v4-tile-cta::after{content:" →";color:var(--gray-500)}

/* === 4. Kachel: "Wie funktioniert das?" — pulsierend hervorgehoben === */
.v4-tile-erklaer{
  position:relative;
  border-left-color:var(--black);
  background:var(--gray-900);
  color:var(--white);
  overflow:hidden;
}
.v4-tile-erklaer:hover{
  background:var(--black);
  border-color:var(--black);
  color:var(--white);
}
.v4-tile-erklaer .v4-tile-kicker{color:var(--gray-400)}
.v4-tile-erklaer .v4-tile-title{color:var(--white)}
.v4-tile-erklaer .v4-tile-sub{color:var(--gray-300)}
.v4-tile-erklaer .v4-tile-cta{color:var(--white)}
.v4-tile-erklaer .v4-tile-cta::after{color:var(--gray-400)}

/* Pulsierender Rand — subtile Lockung ohne Ablenkung */
.v4-tile-erklaer::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--white);
  pointer-events:none;
  animation:v4-tile-pulse 2.4s ease-in-out infinite;
  opacity:0;
}
@keyframes v4-tile-pulse{
  0%,100%{transform:scale(1);opacity:0}
  50%{transform:scale(1.01);opacity:.45}
}
@media (prefers-reduced-motion: reduce){
  .v4-tile-erklaer::before{animation:none;opacity:.25}
}

/* Kleines Signal-Badge oben rechts */
.v4-tile-erklaer .v4-tile-badge{
  position:absolute;
  top:.7rem;right:.7rem;
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:.15rem .45rem;
  background:var(--white);
  color:var(--black);
  font-weight:700;
}

/* === Erklärer-Teaser (90s-Erklärung) — DEPRECATED seit 4. Tile === */
.v4-erklaer-teaser{
  display:none;
}
.v4-erklaer-teaser-legacy{
  max-width:var(--mw-narrow);
  margin:2rem auto 1rem;
  padding:2rem 1.25rem 2.25rem;
  text-align:center;
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}
.v4-erklaer-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-500);
  font-weight:600;
  margin-bottom:.35rem;
}
.v4-erklaer-title{
  font-size:clamp(1.35rem,3vw,2rem);
  letter-spacing:-.02em;
  font-weight:700;
  line-height:1.2;
  margin-bottom:.8rem;
}
.v4-erklaer-text{
  color:var(--gray-700);
  max-width:54ch;
  margin:0 auto 1.3rem;
  line-height:1.6;
  font-size:var(--fs-md);
}
.v4-erklaer-cta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.8rem 1.25rem;
  border:1px solid var(--black);
  background:var(--white);
  color:var(--black);
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  text-decoration:none;
  transition:background var(--tr-fast),color var(--tr-fast);
}
.v4-erklaer-cta::after{content:"→";display:inline-block;transition:transform var(--tr-fast)}
.v4-erklaer-cta:hover{background:var(--black);color:var(--white);text-decoration:none}
.v4-erklaer-cta:hover::after{transform:translateX(2px)}

@media (prefers-reduced-motion: reduce){
  .v4-tile,.v4-tile:hover,
  .v4-erklaer-cta,.v4-erklaer-cta::after,
  .v4-map-collapse summary::after{
    transition:none;transform:none;
  }
  .v4-erklaer-cta:hover::after{transform:none}
}