/* === EXT:form – Kontaktformular-Styling (osmium) === */

.form-container {
  max-width: 42rem;
}

.form-container h2 {
  color: var(--osmium-gruen);
  font-family: var(--osmium-font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 2rem;
  text-transform: uppercase;
}

/* ---- Labels ---- */

.form-container .form-label {
  color: var(--osmium-kastanie);
  font-family: var(--osmium-font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

/* ---- Inputs & Textarea ---- */

.form-container .form-control {
  background: var(--osmium-weiss);
  border: 1px solid var(--osmium-linie);
  border-radius: 0;
  box-shadow: none;
  color: var(--osmium-tinte);
  font-family: var(--osmium-font-body);
  font-size: 0.95rem;
  padding: 0.6rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-container .form-control:focus {
  background: var(--osmium-weiss);
  border-color: var(--osmium-messing);
  box-shadow: 0 0 0 3px rgba(176, 157, 81, 0.18);
  outline: none;
}

.form-container .form-control::placeholder {
  color: rgba(19, 32, 26, 0.38);
}

.form-container textarea.form-control {
  min-height: 9rem;
  resize: vertical;
}

/* ---- Validierungszustände ---- */

.form-container .form-control.is-invalid,
.form-container .form-control:user-invalid {
  border-color: var(--osmium-kastanie);
}

.form-container .form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(138, 75, 47, 0.15);
}

/* ---- Fehlermeldungen ---- */

.form-container .invalid-feedback,
.form-container .form-element > .help-block {
  color: var(--osmium-kastanie);
  font-family: var(--osmium-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  margin-top: 0.3rem;
}

/* ---- Submit-Button ---- */

.form-container .form-actions {
  margin-top: 2rem;
}

.form-container .btn.btn-primary {
  background: var(--osmium-messing);
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--osmium-weiss);
  font-family: var(--osmium-font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.7rem 1.8rem;
  text-transform: uppercase;
  transition: background 0.15s ease, transform 0.15s ease;
}

.form-container .btn.btn-primary:hover,
.form-container .btn.btn-primary:focus-visible {
  background: var(--osmium-messing-hell);
  box-shadow: none;
  color: var(--osmium-gruen-tief);
  transform: translateY(-2px);
}

.form-container .btn.btn-primary:active {
  background: var(--osmium-messing);
  transform: none;
}

/* ---- Zurück-Button ---- */

.form-container .btn.osmium-btn-outline-dark {
  background: transparent;
  border: 2px solid var(--osmium-tinte);
  border-radius: 0;
  box-shadow: none;
  color: var(--osmium-tinte);
  font-family: var(--osmium-font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.7rem 1.8rem;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.form-container .btn.osmium-btn-outline-dark:hover,
.form-container .btn.osmium-btn-outline-dark:focus-visible {
  background: var(--osmium-tinte);
  box-shadow: none;
  color: var(--osmium-sand-hell);
  transform: translateY(-2px);
}

.form-container .btn.osmium-btn-outline-dark:active {
  background: var(--osmium-tinte);
  color: var(--osmium-sand-hell);
  transform: none;
}

/* ---- Erfolgsmeldung ---- */

.form-container .alert-success {
  background: var(--osmium-sand-hell);
  border: none;
  border-top: 2px solid var(--osmium-messing);
  border-radius: 0;
  color: var(--osmium-gruen);
  font-size: 0.95rem;
  padding: 1rem 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .form-container .form-control,
  .form-container .btn.btn-primary {
    transition: none;
  }
}