/* Immobilienwert-Rechner: der Anlass als freiwillige erste Frage der Karte
   (partials/calc-weiche-ask.php) und die Weiche unter dem Ergebnis
   (partials/calc-weiche.php). Die Weiche steht als eigene weiße Karte mit
   goldenem Rand unter den Zahlen, damit sie als nächster Schritt erkennbar ist
   und nicht im Kleingedruckten des Ergebnisses untergeht. Ist der Anlass schon
   gewählt, steht der passende Weg vorn und darunter klein „Anderer Anlass?“. */

.calc-weiche {
  margin-top: 1rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 1rem;
  background: #fff;
  border: 2px solid var(--color-accent-500);
  box-shadow: 0 14px 28px -20px oklch(0.30 0.04 197 / 0.45);
}

.calc-weiche-ask { margin: 0; padding: 0; border: 0; min-width: 0; }

.calc-weiche-q {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
  line-height: 1.25;
  color: var(--color-primary-950);
}
.calc-weiche-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--color-accent-500);
  color: var(--color-primary-950);
}
.calc-weiche-icon svg { width: 1.15rem; height: 1.15rem; }

.calc-weiche-hint {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-primary-700);
}

.calc-weiche-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.calc-weiche-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid color-mix(in oklch, var(--color-primary-900) 16%, transparent);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--color-primary-900);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.calc-weiche-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
button.calc-weiche-option { font-family: inherit; }
.calc-weiche-option:hover { border-color: var(--color-primary-400); background: var(--color-primary-50); }
.calc-weiche-option:has(input:checked),
.calc-weiche-option[aria-pressed="true"] {
  border-color: var(--color-primary-700);
  background: var(--color-primary-700);
  color: #fff;
}
.calc-weiche-option:has(input:focus-visible),
button.calc-weiche-option:focus-visible { outline: 3px solid var(--color-accent-500); outline-offset: 2px; }

/* Die erste Frage der Karte: dieselben Antworten, kompakt zwischen den Schritten. */
.calc-weiche-first-hint { margin-top: 0.1rem; }
.calc-weiche-first .calc-weiche-options { gap: 0.45rem; margin-top: 0.6rem; }
.calc-weiche-first .calc-weiche-option { min-height: 2.5rem; padding: 0.45rem 0.85rem; font-size: 0.9rem; }

/* Anlass schon gewählt: erst der Weg, dann leise die übrigen Antworten. */
.calc-weiche.is-answered { display: flex; flex-direction: column; }
.calc-weiche.is-answered .calc-weiche-ask {
  order: 2;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed color-mix(in oklch, var(--color-primary-900) 16%, transparent);
}
.calc-weiche.is-answered .calc-weiche-answer { margin-top: 0; }
.calc-weiche.is-answered .calc-weiche-q { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; }
.calc-weiche.is-answered .calc-weiche-icon { display: none; }
.calc-weiche.is-answered .calc-weiche-options { gap: 0.45rem; margin-top: 0.5rem; }
.calc-weiche.is-answered .calc-weiche-option { min-height: 2.5rem; padding: 0.4rem 0.8rem; font-size: 0.88rem; }
.calc-weiche-hint[hidden] { display: none; }

.calc-weiche-answer {
  margin-top: 1.1rem;
  padding: 1.15rem 1.25rem;
  border-radius: 0.95rem;
  background: var(--color-cream);
  border: 1px solid color-mix(in oklch, var(--color-primary-600) 20%, transparent);
  border-inline-start: 4px solid var(--color-accent-500);
}
.calc-weiche-answer[hidden] { display: none; }
.calc-weiche-answer--free {
  background: var(--color-primary-50);
  border-inline-start-color: var(--color-primary-500);
}

.calc-weiche-title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-primary-950);
}

.calc-weiche-text {
  margin-top: 0.45rem;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in oklch, var(--color-primary-950) 86%, #000);
}
.calc-weiche-text a,
.calc-weiche-more a {
  font-weight: 600;
  color: var(--color-primary-800);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.calc-weiche-offer { margin-top: 1rem; }
.calc-weiche-offer [hidden] { display: none; }
.calc-weiche-offer .btn-row { margin-top: 0.9rem; }

.calc-weiche-more {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed color-mix(in oklch, var(--color-primary-900) 16%, transparent);
  font-size: 0.9rem;
  line-height: 1.55;
  color: color-mix(in oklch, var(--color-primary-950) 82%, #000);
}

@media (max-width: 479px) {
  .calc-weiche-options { display: grid; grid-template-columns: 1fr 1fr; }
  .calc-weiche-option { justify-content: center; text-align: center; border-radius: 0.8rem; }
  .calc-weiche-option:first-child { grid-column: 1 / -1; }
  .calc-weiche-answer { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-weiche-option { transition: none; }
}