/* ============================================================
   K66 Kontakt-Seite — Gravity-Forms-Feinschliff
   Lädt nur auf der Kontakt-Seite (functions.php: is_page('kontakt')).
   Passt das GF-Standard-Design an die Marken-Linie an (Blau #0369a1),
   ohne die GF-Grundstruktur zu brechen. Nutzt Theme-Variablen.
   ============================================================ */

/* Inhalt etwas schmaler + luftiger (bessere Lesbarkeit) + zentriert.
   page.php gibt den Content in <main class="k66-content"> aus (ohne k66-container),
   deshalb hier Breite + Innenabstand selbst setzen. */
.k66-kontakt .k66-content {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-block: 3rem 4rem;
}

/* Formular als abgesetzte Karte */
.k66-kontakt .gform_wrapper {
  background: var(--k66-gray-50);
  border: 1px solid var(--k66-gray-200);
  border-radius: 14px;
  padding: 28px 30px;
  box-shadow: 0 2px 16px rgb(15 23 42 / 0.05);
  margin-block: 8px 12px;
}

/* Feld-Labels etwas kräftiger */
.k66-kontakt .gform_wrapper .gfield_label {
  font-weight: 600;
  color: var(--k66-gray-900);
}

/* Eingabefelder: einheitliche Rundung, Fokus in Marken-Blau */
.k66-kontakt .gform_wrapper input[type="text"],
.k66-kontakt .gform_wrapper input[type="email"],
.k66-kontakt .gform_wrapper input[type="url"],
.k66-kontakt .gform_wrapper input[type="tel"],
.k66-kontakt .gform_wrapper textarea,
.k66-kontakt .gform_wrapper select {
  border: 1px solid var(--k66-gray-200);
  border-radius: var(--k66-radius);
  background: #fff;
  padding: 11px 14px;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.k66-kontakt .gform_wrapper input:focus,
.k66-kontakt .gform_wrapper textarea:focus,
.k66-kontakt .gform_wrapper select:focus {
  outline: none;
  border-color: var(--k66-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k66-primary) 18%, transparent);
}

/* Radio-Buttons + Checkbox in Marken-Blau.
   accent-color allein sorgt für den blauen Kasten MIT weißem Häkchen
   (natives Browser-Rendering). KEIN eigenes background-color setzen —
   das würde das weiße Häkchen übermalen. */
.k66-kontakt .gform_wrapper input[type="radio"],
.k66-kontakt .gform_wrapper input[type="checkbox"] {
  accent-color: var(--k66-primary) !important;
  width: 18px;
  height: 18px;
}

/* „erforderlich" dezenter */
.k66-kontakt .gform_wrapper .gfield_required {
  color: var(--k66-gray-500);
  font-weight: 500;
}

/* Der Absenden-Button = Marken-CTA (statt GF-Standardblau).
   Gravity Forms 2.x stylt den Button sehr spezifisch (teils !important),
   deshalb hier hohe Spezifität + !important auf die Farbe. */
.k66-kontakt .gform_wrapper .gform_footer input[type="submit"],
.k66-kontakt .gform_wrapper .gform-footer input[type="submit"],
.k66-kontakt .gform_wrapper button.gform_button,
.k66-kontakt .gform_wrapper input.gform_button,
.k66-kontakt .gform_wrapper .gform_button.button,
.k66-kontakt .gform_wrapper .gform-theme-button {
  background: var(--k66-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 13px 28px !important;
  border-radius: var(--k66-radius) !important;
  box-shadow: 0 4px 14px rgb(3 105 161 / 0.28) !important;
  cursor: pointer;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.k66-kontakt .gform_wrapper .gform_footer input[type="submit"]:hover,
.k66-kontakt .gform_wrapper .gform-footer input[type="submit"]:hover,
.k66-kontakt .gform_wrapper button.gform_button:hover,
.k66-kontakt .gform_wrapper input.gform_button:hover,
.k66-kontakt .gform_wrapper .gform_button.button:hover,
.k66-kontakt .gform_wrapper .gform-theme-button:hover {
  background: var(--k66-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgb(3 105 161 / 0.36) !important;
}

/* Einwilligungs-Beschreibungskasten dezenter */
.k66-kontakt .gform_wrapper .gfield_consent_description,
.k66-kontakt .gform_wrapper .gfield_description {
  background: #fff;
  border: 1px solid var(--k66-gray-200);
  border-radius: var(--k66-radius);
  color: var(--k66-gray-600);
  font-size: 13.5px;
  padding: 12px 14px;
}

/* Überschriften der Kontakt-Seite an den Rest angleichen */
.k66-kontakt .k66-content h1 {
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.k66-kontakt .k66-content h2 {
  margin-top: 2.4rem;
  margin-bottom: .6rem;
  color: var(--k66-gray-900);
}
.k66-kontakt .k66-content p { color: var(--k66-gray-600); }
.k66-kontakt .k66-content strong { color: var(--k66-gray-900); }