/* view-mode-switch — Banner · Qualitative · Expert-Fallback */

/* === BANNER === */
.v4-banner{
  display:flex;
  gap:.9rem;
  padding:.9rem 1.1rem;
  background:var(--gray-50);
  border-left:3px solid var(--gray-400);
  font-family:var(--font-s);
  align-items:flex-start;
}
.v4-banner-icon{
  font-size:1.2rem;
  line-height:1.2;
  flex-shrink:0;
  color:var(--gray-600);
}
.v4-banner-body{flex:1;min-width:0}
.v4-banner-title{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:700;
  color:var(--black);
}
.v4-banner-text{
  font-size:var(--fs-sm);
  color:var(--gray-700);
  line-height:1.5;
  margin-top:.2rem;
}
.v4-banner-early{
  border-left-color:#c09032; /* warning token aus base.css */
  background:color-mix(in oklab, #c09032 8%, var(--white));
}
.v4-banner-early .v4-banner-icon{color:#c09032}

/* === QUALITATIVE BLOCK === */
.v4-qual{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  font-family:var(--font-s);
}
.v4-qual-note{
  font-size:var(--fs-sm);
  color:var(--gray-600);
  line-height:1.55;
  background:var(--gray-50);
  padding:.9rem 1rem;
  border-left:3px solid var(--gray-400);
  max-width:60ch;
}

/* "Konkrete Zahlen einsehen ↓" — Shortcut zu Experten-Details */
.v4-qual-shortcuts{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.v4-qual-to-expert{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .9rem;
  background:var(--white);
  border:1px solid var(--gray-300);
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  color:var(--gray-700);
  text-decoration:none;
  transition:border-color var(--tr-fast), color var(--tr-fast);
  cursor:pointer;
}
.v4-qual-to-expert:hover{
  border-color:var(--black);
  color:var(--black);
  text-decoration:none;
}
.v4-qual-section{display:flex;flex-direction:column;gap:.6rem}
.v4-qual-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-qual-empty{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  color:var(--gray-400);
  padding:.8rem;
}

/* Parteien */
.v4-qual-parties{display:flex;flex-direction:column;gap:.45rem}
.v4-qual-party{display:flex;flex-direction:column;gap:.15rem}
.v4-qual-party-rank{
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--gray-500);
  font-weight:600;
}
.v4-qual-party-row{
  display:grid;
  grid-template-columns:minmax(88px,auto) 1fr minmax(60px,auto);
  gap:.9rem;
  align-items:center;
}
.v4-qual-party-name{
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:.4rem;
  letter-spacing:-.005em;
}
.v4-qual-dot{
  display:inline-block;
  width:9px;height:9px;border-radius:50%;
  flex-shrink:0;
}
.v4-qual-bar-wrap{
  height:14px;
  background:var(--gray-100);
  overflow:hidden;
  position:relative;
}
.v4-qual-bar{
  height:100%;
  min-width:2px;
  transition:width var(--tr-med);
}
.v4-qual-party-prob{
  font-family:var(--font-d);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-sm);
  text-align:right;
  color:var(--gray-800);
  font-weight:600;
}

/* Koalitionen */
.v4-qual-coals{display:flex;flex-direction:column;gap:.4rem}
.v4-coal-row{
  display:grid;
  grid-template-columns:32px minmax(120px,auto) 1fr minmax(60px,auto);
  gap:.8rem;
  align-items:center;
  padding:.6rem .8rem;
  border:1px solid var(--gray-200);
  background:var(--white);
  font-size:var(--fs-sm);
}
.v4-coal-icon{
  font-size:1.1rem;
  font-weight:700;
  text-align:center;
  line-height:1;
}
.v4-coal-class{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  color:var(--gray-600);
}
.v4-coal-name{
  color:var(--black);
  font-weight:500;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.v4-coal-prob{
  font-family:var(--font-d);
  font-variant-numeric:tabular-nums;
  text-align:right;
  font-weight:600;
  color:var(--gray-800);
}
.v4-coal-likely{
  border-left:3px solid #0f7b3c; /* success */
}
.v4-coal-likely .v4-coal-icon{color:#0f7b3c}
.v4-coal-open{
  border-left:3px solid var(--gray-500);
}
.v4-coal-open .v4-coal-icon{color:var(--gray-600)}
.v4-coal-unlikely{
  border-left:3px solid var(--gray-300);
  background:var(--gray-50);
  color:var(--gray-500);
}
.v4-coal-unlikely .v4-coal-icon{color:var(--gray-400)}
.v4-coal-unlikely .v4-coal-name{color:var(--gray-600)}

/* === EXPERT FALLBACK (<details>) === */
.v4-expert-fallback{
  margin-top:2rem;
  border-top:1px solid var(--gray-200);
  padding-top:1rem;
}
.v4-expert-summary{
  list-style:none;
  cursor:pointer;
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:600;
  color:var(--gray-600);
  padding:.5rem 0;
  user-select:none;
}
.v4-expert-summary::-webkit-details-marker{display:none}
.v4-expert-summary::before{
  content:"▸ ";
  color:var(--gray-400);
  font-size:.9em;
}
.v4-expert-fallback[open] .v4-expert-summary::before{content:"▾ "}
.v4-expert-disclaimer{
  background:color-mix(in oklab, #c02632 6%, var(--white));
  border-left:3px solid #c02632; /* danger token */
  padding:.7rem .9rem;
  font-size:var(--fs-sm);
  color:var(--gray-800);
  line-height:1.55;
  margin:.5rem 0 1rem;
}
.v4-expert-body{margin-top:.5rem}

/* === DEMO-SECTION (Staging A.3, Cut-Over entfernt die Sektion) === */
.v4-qual-demo{
  max-width:var(--mw);
  margin:0 auto;
  padding:2rem 1.25rem 1rem;
  border-top:1px solid var(--gray-200);
}
.v4-demo-banner{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .7rem;
  background:var(--gray-900);
  color:var(--white);
  font-family:var(--font-d);
  font-size:var(--fs-xxs);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
  margin-bottom:.9rem;
}
.v4-demo-banner::before{content:"◆ ";font-weight:400}
.v4-demo-context-note{
  margin-top:.7rem;
  padding:.7rem .9rem;
  background:color-mix(in oklab, #c09032 6%, var(--white));
  border-left:3px solid #c09032;
  font-size:var(--fs-sm);
  color:var(--gray-800);
  line-height:1.55;
  max-width:68ch;
}
.v4-demo-context-note strong{font-weight:700}
.v4-qual-demo-header{margin-bottom:1.5rem}
.v4-qual-demo-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:.3rem;
}
.v4-qual-demo-title{
  font-size:clamp(1.4rem,3vw,2.1rem);
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.2;
}
.v4-qual-demo-meta{
  margin-top:.4rem;
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  color:var(--gray-600);
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .7rem;
  align-items:baseline;
}
.v4-qual-demo-sep{color:var(--gray-300)}

/* Mobile */
@media (max-width:560px){
  .v4-qual-party-row{grid-template-columns:auto 1fr auto;gap:.6rem}
  .v4-coal-row{grid-template-columns:26px 1fr auto;gap:.5rem;padding:.55rem .7rem}
  .v4-coal-class{display:none} /* Icon + Farbe kommunizieren die Klasse */
}