/* ============================================================
   N7 GmbH · cf7.css
   ------------------------------------------------------------
   Ueberschreibt Contact Form 7s Standard-CSS (rote Fehler- und
   Rahmenfarben) mit der monochromen Designsprache. Nur auf der
   Kontaktseite geladen, mit "contact-form-7" als Abhaengigkeit
   (functions.php, n7_enqueue_cf7_assets_on_kontakt): laedt
   dadurch garantiert NACH CF7s eigenem Stylesheet, unabhaengig
   von Enqueue-Prioritaeten. Die Selektoren sind zusaetzlich
   spezifischer als CF7s eigene (Klassenkombination statt
   Einzelklasse) als zweite Absicherung.

   Zustandssystem wiederverwendet aus dem Rest der Seite (siehe
   03-leistungen.html Badges, 06-kosten.html Vergleichsbloecke):
   flaechig dunkel gefuellt = positiv/erledigt, Hairline-Umriss
   mit kraeftigerer Linie = braucht Aufmerksamkeit. Keine Farbe
   uebernimmt diese Rolle, nur Fuellung gegen Umriss.

   Tokens (--n7-chamfer-*, --n7-tone-*) kommen aus tokens.css,
   das auf jeder Seite laedt; hier nicht erneut dupliziert.

   Wrapper-Klasse .n7-kontakt-form liegt auf einem eigenen <div>
   um den CF7-Shortcode (siehe section-kontakt.php), nicht auf
   dem <form>-Element selbst, das CF7 selbst rendert. Die
   Status-Klassen (sent/invalid/failed/...) setzt CF7s eigenes
   JS auf das <form>, deshalb Nachfahren-Selektoren statt
   Verbund-Selektoren fuer diese Zustaende.
============================================================ */

.n7-kontakt-form {
  --n7-cf7-line: rgba(23, 23, 23, 0.4); /* funktionale Linie, kraeftiger als die Deko-Hairline (0.14) */
}

/* --- Grundfeld: Unterstrich statt gerahmter Kasten ------------ */

.n7-kontakt-form .wpcf7-form-control-wrap {
  display: block;
  position: static;
}

.n7-kontakt-form .wpcf7-form-control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--n7-cf7-line);
  border-radius: 0;
  background: transparent;
  color: #171717;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  appearance: none;
  transition: border-color 0.2s ease, border-width 0.2s ease, padding-bottom 0.2s ease;
}

.n7-kontakt-form textarea.wpcf7-form-control {
  min-height: 140px;
  resize: vertical;
}

.n7-kontakt-form select.wpcf7-form-control {
  background-image:
    linear-gradient(45deg, transparent 50%, #171717 50%),
    linear-gradient(135deg, #171717 50%, transparent 50%);
  background-position: right 6px top 55%, right 14px top 55%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 26px;
}

.n7-kontakt-form .wpcf7-form-control::placeholder {
  color: #6f6f6f;
}

/* --- Fokus: Tonwertwechsel statt Farbring ---------------------- */

.n7-kontakt-form .wpcf7-form-control:focus {
  outline: 0;
  border-bottom-color: #171717;
  border-bottom-width: 2px;
  padding-bottom: 9px; /* gleicht die zusaetzliche Linienstaerke aus, kein Sprung im Text */
}

.n7-kontakt-form .wpcf7-form-control:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 2px;
}

/* --- Fehler: kraeftigere Linie plus Klartext, keine Farbe ------ */

.n7-kontakt-form .wpcf7-form-control.wpcf7-not-valid {
  border-bottom-color: #171717;
  border-bottom-width: 2px;
  padding-bottom: 9px;
}

.n7-kontakt-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #171717;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

/* --- Datenschutz-Checkbox (Acceptance) ------------------------- */

.n7-kontakt-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.n7-kontakt-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.n7-kontakt-form .wpcf7-acceptance input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #171717;
  border-radius: 0;
}

.n7-kontakt-form .wpcf7-list-item-label {
  color: #4a4a4a;
  font-size: 0.875rem;
  line-height: 1.5;
}

.n7-kontakt-form .wpcf7-list-item-label a {
  color: #171717;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.n7-kontakt-form .wpcf7-acceptance.wpcf7-not-valid .wpcf7-list-item-label {
  color: #171717;
  font-weight: 600;
}

/* --- Absende-Button: Chamfer wie alle Buttons ------------------- */

.n7-kontakt-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 52px;
  padding: 0 32px;
  margin-top: 8px;
  background: #171717;
  color: #ffffff;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  appearance: none;
  cursor: pointer;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--n7-chamfer-sm)),
    calc(100% - var(--n7-chamfer-sm-x)) 100%,
    0 100%
  );
  transition: background-color 0.2s ease;
}

.n7-kontakt-form .wpcf7-submit:hover {
  background: var(--n7-tone-dark);
}

.n7-kontakt-form .wpcf7-submit:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 3px;
}

.n7-kontakt-form .wpcf7-spinner {
  margin: 0 0 0 12px;
}

/* Absenden-Zustand: Dimmen statt Farbwechsel */
.n7-kontakt-form .wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.6;
  cursor: progress;
}

/* --- Antwort-Banner: dasselbe Fuellung-gegen-Umriss-Prinzip ---- */

.n7-kontakt-form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.n7-kontakt-form .wpcf7-form.sent .wpcf7-response-output {
  margin-top: 24px;
  padding: 16px 20px;
  background: #171717;
  color: #ffffff;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--n7-chamfer)),
    calc(100% - var(--n7-chamfer-x)) 100%,
    0 100%
  );
}

.n7-kontakt-form .wpcf7-form.invalid .wpcf7-response-output,
.n7-kontakt-form .wpcf7-form.failed .wpcf7-response-output,
.n7-kontakt-form .wpcf7-form.aborted .wpcf7-response-output,
.n7-kontakt-form .wpcf7-form.spam .wpcf7-response-output,
.n7-kontakt-form .wpcf7-form.unaccepted .wpcf7-response-output,
.n7-kontakt-form .wpcf7-form.payment-required .wpcf7-response-output {
  margin-top: 24px;
  padding: 16px 20px;
  border: 2px solid #171717;
  color: #171717;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .n7-kontakt-form .wpcf7-form-control,
  .n7-kontakt-form .wpcf7-submit {
    transition: none;
  }
}