/* === Kontaktformular – Layout & Stil (seitenlokal, kollisionsarm) === */

/* Form Controls erben die Seitentypo */
button, input, select, textarea { font: inherit; }

/* Layout */

.kontakt-form {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
}
.kontakt-form label {
  display: block;
  font-weight: 500;
  line-height: 1.2;
}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form input[type="url"],
.kontakt-form textarea {
  width: 100%;
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--gray-light);
  border-radius: var(--card-border-radius);
  background: var(--white);
  font: inherit;
  box-sizing: border-box;
  box-shadow: var(--card-shadow);
}
.kontakt-form input[type="text"]::placeholder,
.kontakt-form input[type="email"]::placeholder,
.kontakt-form textarea::placeholder { opacity: .65; }

.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder {
  font-weight: 500;
  color: var(--gray-on-white);
}

.kontakt-form textarea {
  height: 10rem;
  min-height: 0;
  resize: vertical;
  margin-bottom: 1.25rem;
}

/* Breiten-Absicherung für Formularfelder innerhalb .kontakt-form */
.kontakt-form input,
.kontakt-form textarea,
.kontakt-form select {
  width: 100%;
  max-width: 100%;
  display: block;
}

.kontakt-form .btn { align-self: start; margin-top: 4px; }

.form-note { 
  font-style: italic;
  width: 100%;
  margin: .25rem auto 0;
  font-weight: 400;
  font-size: var(--text-small)
}

.error { color: var(--error); margin-bottom: 1em; }
.success { color: var(--success); margin-bottom: 1em; }

/* Offset für Anker-Sprung auf die Kontakt-Überschrift */
#kontaktformular {
  scroll-margin-top: calc(var(--nav-h-desktop, 80px) + 16px);
}

@media (max-width: 768px) {
  #kontaktformular {
    scroll-margin-top: calc(var(--nav-h-mobile, 56px) + 12px);
  }
}