/* Termin-Anfrage CF7 form — hardened against global theme styles */

/* Base card — locked to exactly 420 × 638px */
.termin-anfrage-form,
.wpcf7 .termin-anfrage-form {
  box-sizing: border-box !important;
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  flex: 0 0 420px !important;
  margin: 0 auto !important;
  padding: 28px 24px 30px !important;
  background-color: #16243a !important;
  border: 1px solid rgba(79, 195, 247, 0.35) !important;
  border-radius: 8px !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  font-family: "DM Sans", "Inter", "Montserrat", "Roboto", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  overflow: hidden !important;
}

.termin-anfrage-form *,
.termin-anfrage-form *::before,
.termin-anfrage-form *::after {
  box-sizing: border-box;
}

/* Reset CF7 / theme wrappers that wrap fields in <p>/<br>.
   IMPORTANT: keep the selector specificity at (0,1,1) so per-element rules
   like .termin-anfrage-form__eyebrow / __privacy / __title (specificity 0,2,0)
   still win for color / font-size / font-family. */
.termin-anfrage-form p,
.termin-anfrage-form .wpcf7-form-control-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

.termin-anfrage-form br {
  display: none !important;
}

/* Header */
.termin-anfrage-form .termin-anfrage-form__header {
  margin: 0 0 4px !important;
  padding: 0 !important;
}

.termin-anfrage-form .termin-anfrage-form__eyebrow,
.wpcf7 .termin-anfrage-form .termin-anfrage-form__eyebrow {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-family: "DM Sans", "Inter", "Montserrat", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #c5a059 !important;
  line-height: 1.3 !important;
}

.termin-anfrage-form .termin-anfrage-form__eyebrow span {
  margin-right: 4px;
}

.termin-anfrage-form .termin-anfrage-form__title,
.wpcf7 .termin-anfrage-form .termin-anfrage-form__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Playfair Display", "Georgia", "Times New Roman", serif !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  color: #fff !important;
  text-transform: none !important;
}

/* Fields */
.termin-anfrage-form .termin-anfrage-form__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.termin-anfrage-form .termin-anfrage-form__field label {
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8a99ad !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.termin-anfrage-form .wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
}

.termin-anfrage-form input[type="text"],
.termin-anfrage-form input[type="email"],
.termin-anfrage-form input[type="tel"],
.termin-anfrage-form input[type="url"],
.termin-anfrage-form input[type="number"],
.termin-anfrage-form select,
.termin-anfrage-form textarea {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  background-color: #0f1c2e !important;
  border: 1px solid rgba(138, 153, 173, 0.45) !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.termin-anfrage-form input::placeholder,
.termin-anfrage-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  opacity: 1;
}

.termin-anfrage-form input:focus,
.termin-anfrage-form textarea:focus {
  border-color: rgba(79, 195, 247, 0.65) !important;
}

/* Select */
.termin-anfrage-form .termin-anfrage-form__field--select select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 36px !important;
  cursor: pointer;
  border-color: #4fc3f7 !important;
  background-color: #0f1c2e !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  color-scheme: dark;
}

.termin-anfrage-form .termin-anfrage-form__field--select select:focus {
  border-color: #4fc3f7 !important;
  box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.35) !important;
}

.termin-anfrage-form .termin-anfrage-form__field--select select option {
  background-color: #0f1c2e;
  color: #fff;
}

/* Textarea */
.termin-anfrage-form .termin-anfrage-form__field--message textarea {
  min-height: 72px !important;
  max-height: 72px !important;
  resize: none !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Submit */
.termin-anfrage-form .termin-anfrage-form__submit {
  margin: 0 !important;
  padding: 0 !important;
}

/* Spinner is unused — hide it so it doesn't reserve a row below the submit. */
.termin-anfrage-form .wpcf7-spinner,
.wpcf7 .termin-anfrage-form .wpcf7-spinner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
}

.termin-anfrage-form input[type="submit"],
.termin-anfrage-form button[type="submit"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: none !important;
  border-radius: 4px !important;
  background-color: #d4af37 !important;
  background-image: none !important;
  color: #0f1c2e !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.termin-anfrage-form input[type="submit"]:hover,
.termin-anfrage-form button[type="submit"]:hover {
  background-color: #e0bc45 !important;
  color: #0f1c2e !important;
}

.termin-anfrage-form input[type="submit"]:active,
.termin-anfrage-form button[type="submit"]:active {
  transform: translateY(1px);
}

/* Privacy footer */
.termin-anfrage-form .termin-anfrage-form__privacy,
.wpcf7 .termin-anfrage-form .termin-anfrage-form__privacy {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "DM Sans", "Inter", "Montserrat", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  color: #8a99ad !important;
  text-align: left !important;
  text-transform: none !important;
}

.termin-anfrage-form .termin-anfrage-form__privacy-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  background-color: #c5a059;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* CF7 validation & response */
.termin-anfrage-form .wpcf7-not-valid-tip {
  font-size: 10px !important;
  color: #f48fb1 !important;
  margin-top: 4px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.termin-anfrage-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: #f48fb1 !important;
}

.termin-anfrage-form .wpcf7-response-output,
.wpcf7 form .termin-anfrage-form .wpcf7-response-output,
.wpcf7 form.sent .termin-anfrage-form .wpcf7-response-output,
.wpcf7 form.invalid .termin-anfrage-form .wpcf7-response-output,
.wpcf7 form.unaccepted .termin-anfrage-form .wpcf7-response-output,
.wpcf7 form.spam .termin-anfrage-form .wpcf7-response-output {
  margin: 8px 0 0 !important;
  padding: 8px 10px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Make sure CF7 form wrapper doesn't add extra spacing */
.wpcf7 form.wpcf7-form {
  margin: 0;
  padding: 0;
}

/* Small screens — release the fixed 420 × 638 lock so the card fits the viewport */
@media (max-width: 480px) {
  .termin-anfrage-form,
  .wpcf7 .termin-anfrage-form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 1 auto !important;
    padding: 24px 20px 20px !important;
    overflow: visible !important;
  }

  .termin-anfrage-form .termin-anfrage-form__title {
    font-size: 24px !important;
  }
}