/* Kostenrechner /alarmanlage-kosten (tools/rechner_bauen.py). Das Aussehen
   kommt aus style.css (.funnel, .fstep, .tiles, .opts wie auf der
   Startseite). Hier steht nur, was der Rechner anders hat. */

/* Seitenkopf steht direkt über dem Rechner – etwas weniger Luft. */
.rseite .sec-head { margin-bottom: clamp(22px, 3vw, 36px); }

/* Sechs Zusatzwünsche: Kacheln wie auf der Startseite, nur flacher,
   damit alle sechs ohne langes Scrollen ins Bild passen. */
.rextras .tile { padding-block: 16px 14px; }
.rextras .tile img { width: calc(56rem / 16); height: calc(56rem / 16); margin-bottom: 2px; }

/* Kontakt: Name breit, PLZ schmal daneben. */
.rform .rform__reihe { grid-template-columns: minmax(0, 1fr) calc(120rem / 16); }
.rform input[aria-invalid="true"] { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.rform .form__fehler { margin: 0; }
.rform__falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 760px) {
  .rextras .tile img { width: calc(44rem / 16); height: calc(44rem / 16); }
}
@media (max-width: 560px) {
  /* Sonst steht das Fragezeichen von „Alarmanlage?“ allein in der Zeile. */
  .rseite h1 { font-size: calc(34rem / 16); }
  /* .form__row stapelt hier sonst – Name und PLZ bleiben nebeneinander. */
  .rform .rform__reihe { grid-template-columns: minmax(0, 1fr) calc(96rem / 16); gap: 12px; }
}