/* ---------- Werteermittlung page-hero: keep split-layout content above the
   decorative roofline watermark (page-hero-decor is absolutely positioned,
   so it can otherwise paint over the two-col grid content). Scoped to this
   page's own hero modifier class only. ---------- */
.page-hero--calculator .container {
  position: relative;
  z-index: 1;
}

/* ---------- Werteermittlung – Instant-Rechner ---------- */
.wertermittlung-calculator {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

@media (min-width: 901px) {
  .wertermittlung-calculator { margin-inline: 0 0 0 auto; }
}

.wertermittlung-calculator__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* [hidden] and .panel share specificity (0,1,0 vs 0,1,0); without this the
   author rule above would win over the UA default and keep hidden panels
   laid out. Higher-specificity override keeps `hidden` authoritative. */
.wertermittlung-calculator__panel[hidden] {
  display: none;
}

@keyframes wertermittlung-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.wertermittlung-calculator__panel.is-active {
  animation: wertermittlung-fade-in var(--duration-normal) var(--ease-out-soft) both;
}

@media (prefers-reduced-motion: reduce) {
  .wertermittlung-calculator__panel.is-active { animation: none; }
}

.wertermittlung-calculator__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.wertermittlung-calculator__title {
  font-size: var(--text-xl);
  margin: 0;
}

.wertermittlung-calculator__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* Reserve two lines for the Postleitzahl/Fläche labels so a wrapping one
   (e.g. "Wohn-/Nutzfläche (m²)", which doesn't fit on one line at this
   card's width) doesn't sit taller than "Postleitzahl" and push its input
   out of line with the sibling field's input in the same .form-grid row. */
.wertermittlung-calculator .form-grid .form-field label {
  min-height: calc(2 * var(--leading-normal) * 1em);
}

.wertermittlung-calculator__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.wertermittlung-calculator__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.wertermittlung-calculator__error {
  font-size: var(--text-xs);
  font-weight: 600;
  color: oklch(45% 0.16 30);
  margin: calc(var(--space-2xs) * -1) 0 0;
}

.wertermittlung-calculator__submit {
  width: 100%;
  margin-top: var(--space-2xs);
}

.wertermittlung-calculator__submit svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Result state ---------- */
.wertermittlung-calculator__range {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-forest);
  margin: 0;
  line-height: var(--leading-tight);
}

.wertermittlung-calculator__rate {
  font-size: var(--text-sm);
  color: var(--color-stone);
  margin: 0;
}

.wertermittlung-calculator__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-stone);
  margin: var(--space-2xs) 0 0;
}

.wertermittlung-calculator__cta {
  width: 100%;
  margin-top: var(--space-sm);
}

.wertermittlung-calculator__reset {
  align-self: center;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-forest);
  cursor: pointer;
}

.wertermittlung-calculator__reset:hover,
.wertermittlung-calculator__reset:focus-visible {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .wertermittlung-calculator { max-width: none; }
}