/* Loan calculator on the landing pages (in place of the smava iframe), laid out like smava's loan
   selector. Linked in the page head, so the box has its final size before mini-rechner.js runs. */
.antrag-mini {
  display: grid;
  gap: 6px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--color-border, #dfe6e1);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow, 0 4px 16px rgba(28, 37, 33, 0.08));
}
.antrag-mini[hidden],
.antrag-mini-group[hidden] {
  display: none;
}
.antrag-mini-group {
  display: grid;
  gap: 6px;
}
.antrag-mini-pretitle {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted, #56635c);
}
.antrag-mini-headline {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #1c2521);
}
.antrag-mini label,
.antrag-mini-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
}
.antrag-mini input,
.antrag-mini select {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--color-border, #dfe6e1);
  border-radius: 8px;
  background: #fff;
}
/* smava's helper text under "Anzahlung €"; empty until a down payment is corrected. Not hidden
   while empty, so screen readers still announce it as a live region. */
.antrag-mini-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted, #56635c);
}
.antrag-mini .btn {
  margin-top: 12px;
}

/* Until mini-rechner.js has replaced them, the selects are shown as placeholders of the same height,
   with a light shimmer so the box reads as loading rather than broken. */
.antrag-mini-skeleton {
  display: block;
  height: 44px;
  border: 1px solid var(--color-border, #dfe6e1);
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f4f2 25%, #fafbfa 50%, #f1f4f2 75%) 0 0 / 200% 100%;
  animation: antrag-mini-shimmer 1.4s ease-in-out infinite;
}
.antrag-mini.is-loading .btn {
  opacity: 0.6;
  pointer-events: none;
}
@keyframes antrag-mini-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .antrag-mini-skeleton {
    animation: none;
  }
}