/* =========================================================================
   KONTAKTFORMULAR  -  gemeinsame Bausteine
   Verwendet auf /kontakt und im Abschlussschritt des Preiskalkulators
   (dort auf JEDER Seite, auf der der Kalkulator eingebettet ist).
   Frueher Teil von subpage.css; ausgelagert, weil die Startseite jene Datei
   nicht laedt und das Formular dort voellig unformatiert erschien.
   Schatten: --pk-shadow aus base.css, identisch zum Kalkulator (PK1).
   ========================================================================= */

/* =========================================================
   KONTAKTFORMULAR (/kontakt)
   Alle Masse aus Figma: Label 13/14.3 Montserrat Medium #595959,
   Felder 55px hoch, Radius 5, weiss; Abstand Label->Feld 27px,
   Zeilenraster 103px. Fokus = goldene Kontur, Fehler = rote Kontur
   (im Figma sind beide Zustaende eingezeichnet; hier erscheinen sie
   erst bei Fokus bzw. nach der Pruefung).
   ========================================================= */
.kf { position: absolute; z-index: 3; }
.kf > * { position: absolute; }
.kf-label {
  font-family: var(--font-body); font-weight: 500;
  font-size: 13px; line-height: 14.3px; color: var(--color-gray-600);
  white-space: nowrap;
}
.kf-label em { font-style: normal; color: var(--color-gold); }
.kf-choice { display: flex; gap: 55px; }
.kf-choice-btn {
  width: 233px; height: 55px; border: none; border-radius: 5px;
  background: var(--color-white); cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 21px;
  color: var(--color-gray-400);
  transition: background 240ms ease, color 240ms ease;
}
.kf-choice-btn:hover { color: var(--color-navy); }
.kf-choice-btn.is-active { background: var(--color-gold); color: var(--color-white); }
.kf-input {
  height: 55px; border: 1px solid transparent; border-radius: 5px;
  background: var(--color-white); padding: 0 21px;
  font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 21px;
  color: var(--color-black);
  /* Runde 11, PK1: Der Schatten hebt nur das Feld hervor, an dem gerade
     gearbeitet wird - im Ruhezustand bleiben die Felder flach. */
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.kf-input:hover,
.kf-input:focus { box-shadow: var(--pk-shadow); }
.kf-choice-btn:hover,
.kf-choice-btn.is-active { box-shadow: var(--pk-shadow); }
.kf-choice-btn { transition: background 220ms ease, color 220ms ease, box-shadow 240ms ease; }
.kf-textarea { padding: 17px 21px; resize: none; line-height: 21px; }
.kf-input::placeholder { color: var(--color-gray-400); }
.kf-input:focus { outline: none; border-color: var(--color-gold); }
.kf-input.is-invalid { border-color: #FF0000; }
.kf-error {
  font-family: var(--font-body); font-weight: 500; font-size: 8px; line-height: 8.8px;
  color: #FF0000; opacity: 0; transition: opacity 240ms ease;
}
.kf-input.is-invalid + .kf-error, .kf-error.is-shown { opacity: 1; }
/* Rueckmeldung je Feld (Figma "Group 17915" = goldener Kreis mit weissem
   Haken, "Group 17939" = roter Kreis mit weissem Kreuz, je 13x13, rechts
   neben dem Feld bei x1008). Im Figma sind beide gleichzeitig zu sehen, weil
   die Vorlage einen halb ausgefuellten Zustand zeigt: Anrede korrekt gewaehlt
   (Haken), Vorname uebersprungen (Kreuz), Nachname gerade im Fokus. Hier
   erscheinen sie genau so - aber jeweils erst, wenn das Feld tatsaechlich
   ausgefuellt bzw. als fehlend erkannt wurde. */
.kf-marks { width: 13px; height: 13px; }
.kf-mark {
  position: absolute; left: 0; top: 0;
  width: 13px; height: 13px;
  opacity: 0; transform: scale(0.6);
  transition: opacity 240ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.kf-mark svg { display: block; width: 13px; height: 13px; }
.kf-marks.is-ok .kf-mark-ok,
.kf-marks.is-bad .kf-mark-bad { opacity: 1; transform: scale(1); }
/* Kaestchen vertikal auf der Mitte des Textes. Im Figma ist die erste
   Checkbox zweizeilig (Text y1820-1852) und das Kaestchen sitzt auf halber
   Hoehe (y1829-1842). Mit flex-start liefe der zweizeilige Text nach unten
   in die zweite Checkbox hinein. */
.kf-check { display: flex; align-items: center; gap: 13px; width: 610px; cursor: pointer; }
.kf-check input { position: absolute; opacity: 0; width: 13px; height: 13px; margin: 0; cursor: pointer; }
.kf-box {
  flex: none; width: 13px; height: 13px;
  border: 1px solid rgba(208, 176, 132, 0.55); border-radius: 3px;
  background: var(--color-white);
  transition: background 200ms ease, border-color 200ms ease;
}
.kf-check input:checked + .kf-box { background: var(--color-gold); border-color: var(--color-gold); }
.kf-check input:focus-visible + .kf-box { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.kf-check-text { font-weight: 300; font-size: 13px; line-height: 16px; color: var(--color-gray-600); }
/* Kundenwunsch 13: Absenden-Schaltflaeche exakt wie der CTA auf der
   Startseite und im Menue - navy, Radius 3, beim Hover faehrt die goldene
   Fuellung von links ein. */
.kf-submit {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 233px; height: 55px; padding: 0;
  border: none; border-radius: 3px; overflow: hidden;
  background: var(--color-navy); cursor: pointer;
}
.kf-submit .btn-fill {
  position: absolute; inset: 0;
  background: var(--color-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kf-submit .btn-label {
  position: relative; z-index: 1;
  font-family: var(--font-body); font-weight: 500;
  font-size: 18px; line-height: 18px; color: var(--color-white);
}
.kf-submit:hover .btn-fill { transform: scaleX(1); }


/* =========================================================
   Spamschutz-Feld (Runde 37, Punkt 17.1)
   =========================================================
   Der Honigtopf darf fuer Menschen nicht sichtbar und nicht erreichbar
   sein - auch nicht mit der Tabulatortaste und nicht fuer Vorleseprogramme.
   "display: none" waere das Naheliegende, wird aber von manchen Programmen
   erkannt und uebersprungen; darum wird das Feld stattdessen aus dem Bild
   geschoben. */
.kf-falle {
  position: absolute !important;
  left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}

/* Runde 55: Rueckmeldung nach dem Absenden - gleiche Schrift und Lage wie
   .pk-sendstate im Preiskalkulator (links neben dem Knopf). Im Fluss stellt
   responsive.css sie unter den Knopf. */
.kf-sendstate {
  margin: 0; width: 360px;
  font-weight: 500; font-size: 13px; line-height: 18px;
  color: var(--color-gray-600);
}
.kf-sendstate.is-error { color: #FF0000; }
.kf-submit:disabled { cursor: progress; opacity: 0.7; }