/* Kontaktformular – modernes, kompaktes Layout. Ergaenzt/ueberschreibt site.css
   nur im Rahmen von .kontakt-page / .contact-form. */

.kontakt-page { background:#fff; }
.kontakt-shell { max-width:640px; margin:0 auto; padding:60px 20px 84px; }
.kontakt-shell .breadcrumbs { margin-bottom:18px; }

/* Kopf zentriert */
.kontakt-head { text-align:center; margin:0 0 26px; }
.kontakt-eyebrow {
  display:inline-block; margin:0 0 12px; padding:5px 12px;
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#3a4f66; background:rgba(198,255,61,.22); border-radius:999px;
}
.kontakt-head h1 { margin:0 0 12px; max-width:none; font-size:clamp(1.8rem, 4vw, 2.6rem); line-height:1.08; letter-spacing:-.02em; }
.kontakt-sub { max-width:520px; margin:0 auto; color:#6b7688; font-size:1rem; line-height:1.55; }
.kontakt-sub .req { color:#e0533f; font-weight:800; }

/* Karte */
.kontakt-card {
  background:#fff; border:1px solid #ece9f2; border-radius:22px;
  padding:30px; box-shadow:0 12px 34px rgba(20,25,45,.06);
}

/* Formular als 2-Spalten-Grid; Name + E-Mail nebeneinander, Rest volle Breite */
.contact-form {
  display:grid; grid-template-columns:1fr 1fr; gap:16px 16px;
  max-width:none; margin:0;
}
.contact-form > * { grid-column:1 / -1; min-width:0; }
.contact-form > label:nth-of-type(1) { grid-column:1 / 2; }
.contact-form > label:nth-of-type(2) { grid-column:2 / 3; }

/* Label: kompakt, Text ueber dem Feld */
.contact-form label {
  display:block; margin:0; gap:0;
  font-size:.86rem; font-weight:700; color:#3a4f66; letter-spacing:0;
}
.contact-required { color:#e0533f; font-weight:800; }
.contact-optional { color:#9aa2b1; font-weight:600; font-size:.8rem; }

/* Eingaben: modern, dezent */
.contact-form input,
.contact-form textarea {
  display:block; width:100%; margin-top:7px;
  padding:11px 14px; font:inherit; font-size:15px; color:#141a2d;
  background:#fff; border:1px solid #dbd7e6; border-radius:12px;
  transition:border-color .15s ease, box-shadow .15s ease; appearance:none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:#aab0bd; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline:none; border-color:#1559ed; box-shadow:0 0 0 3px rgba(21,89,237,.14);
}
.contact-form textarea { min-height:132px; resize:vertical; line-height:1.5; }

/* Sicherheitsfrage kompakt */
.captcha-field .captcha-question { font-weight:800; color:#141a2d; }
.captcha-answer { max-width:130px; }

/* Einwilligung */
.contact-form .check {
  display:flex; align-items:flex-start; gap:10px;
  font-size:.9rem; font-weight:500; color:#3a4f66; line-height:1.45;
}
.contact-form .check input { width:auto; margin:2px 0 0; flex:0 0 auto; accent-color:#1559ed; }

/* Button: modern, volle Breite */
.contact-actions { margin-top:4px; }
.contact-form .contact-actions .button {
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:13px 24px; border:none; border-radius:12px;
  background:#1559ed; color:#fff; font-weight:700; font-size:15px; cursor:pointer;
  box-shadow:0 8px 20px rgba(21,89,237,.24); transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.contact-form .contact-actions .button:hover { background:#0f49c9; transform:translateY(-1px); box-shadow:0 12px 26px rgba(21,89,237,.3); }

/* Fehler + Banner */
.field-error { display:block; margin-top:5px; color:#c0392b; font-weight:600; font-size:.82rem; }
.contact-form input.has-error,
.contact-form textarea.has-error { border-color:#e0533f; background:#fef6f4; }

.contact-alert { border:1px solid; border-radius:14px; padding:14px 16px; margin-bottom:20px; line-height:1.55; }
.contact-alert p { margin:0; }
.contact-alert ul { margin:8px 0 0; padding-left:20px; }
.contact-alert.success { border-color:rgba(46,120,80,.4); background:rgba(46,120,80,.08); color:#245238; }
.contact-alert.error { border-color:rgba(224,83,63,.4); background:rgba(224,83,63,.08); color:#8a2c19; }

/* Datenschutz-Hinweis unter der Karte */
.contact-datahint { max-width:520px; margin:22px auto 0; text-align:center; font-size:.85rem; color:#8891a2; line-height:1.55; }
.contact-datahint a { color:#1559ed; text-decoration:none; }
.contact-datahint a:hover { text-decoration:underline; }

/* Honeypot unsichtbar */
.contact-hp { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

/* Erfolgs-Ansicht */
.kontakt-card .contact-alert.success { margin-bottom:14px; }

@media (max-width:560px) {
  .kontakt-card { padding:22px; }
  .contact-form { grid-template-columns:1fr; }
  .contact-form > label:nth-of-type(1),
  .contact-form > label:nth-of-type(2) { grid-column:1 / -1; }
}