/* ============================================================
   P/W Consulting GmbH — Kontaktformular, Kontaktdaten, Team
   Klassennamen mit pw-feld_/pw-formular_ sind die Schnittstelle
   zu js/kontaktformular.js (dort über IDs, hier über Klassen).
   ============================================================ */

/* Honigtopf gegen Formular-Spam. Bewusst NICHT display:none — Bots
   ueberspringen so ausgeblendete Felder teilweise gezielt. Stattdessen
   aus dem sichtbaren Bereich geschoben und fuer Hilfsmittel per
   aria-hidden und tabindex=-1 unerreichbar. */
.pw-honigtopf {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Formular ----------------------------------------------- */
.pw-formular { display: grid; gap: clamp(16px, 2.2vw, 22px); }

.pw-feld { display: grid; gap: 8px; }
.pw-feld__label {
  font-family: var(--pw-font-display);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pw-ink);
}
.pw-feld__zeile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pw-feld__zeile .pw-feld__eingabe { flex: 1 1 auto; min-width: 0; }

.pw-feld__eingabe {
  width: 100%;
  padding: 13px 15px;
  background: var(--pw-white);
  border: 1px solid var(--pw-border-strong);
  border-radius: var(--pw-radius-chip);
  font-size: 1rem;
}
.pw-feld__eingabe:focus { outline: none; border-color: var(--pw-petrol); }
.pw-feld__eingabe.is_error { border-color: #c0392b; background: #fdf3f2; }
.pw-feld__textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.pw-feld__marke {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.pw-feld__marke.is_ok { color: var(--pw-mint-ink); }
.pw-feld__marke.is_fehler { color: #c0392b; }

.pw-feld__fehler {
  font-size: .8125rem;
  color: #c0392b;
}

.pw-einwilligung {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--pw-ink-soft);
  cursor: pointer;
}
.pw-einwilligung input { margin-top: 3px; accent-color: var(--pw-petrol); }
.pw-einwilligung a { border-bottom: 1px solid var(--pw-mint-ink); color: var(--pw-mint-ink); }

/* Solange Pflichtangaben fehlen, bleibt der Knopf sichtbar gedämpft —
   so ist erkennbar, dass noch etwas fehlt, statt dass nichts passiert. */
.pw-formular__aktion { opacity: .45; transition: opacity var(--pw-dauer) var(--pw-kurve); }
.pw-formular__aktion.is_bereit { opacity: 1; }
.pw-formular__aktion.is_sendet { opacity: .6; }
.pw-formular__aktion .pw-btn { width: 100%; }

.pw-formular__danke {
  padding: clamp(22px, 3vw, 32px);
  background: var(--pw-mint-tint);
  border-left: var(--pw-linie-stark) solid var(--pw-mint-ink);
  border-radius: var(--pw-radius-kachel);
}
.pw-formular__danke-titel {
  font-family: var(--pw-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pw-petrol);
}
.pw-formular__danke p + p { margin-top: 8px; }
.pw-formular__danke-signatur { color: var(--pw-ink-mid); }

/* --- Kontaktseite: Formular neben Kontaktdaten -------------- */
.pw-kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.pw-kontaktdaten {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--pw-white);
  border: 1px solid var(--pw-border);
  border-top: var(--pw-linie-stark) solid var(--pw-petrol);
  border-radius: var(--pw-radius-kachel);
}
.pw-kontaktdaten dl { display: grid; gap: 18px; }
.pw-kontaktdaten dt {
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pw-muted);
}
.pw-kontaktdaten dd {
  margin: 4px 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--pw-ink);
}
.pw-kontaktdaten dd a {
  border-bottom: 1px solid var(--pw-border-strong);
  transition: border-color var(--pw-dauer) var(--pw-kurve), color var(--pw-dauer) var(--pw-kurve);
}
.pw-kontaktdaten dd a:hover { color: var(--pw-mint-ink); border-bottom-color: var(--pw-mint-ink); }
.pw-kontaktdaten__route { margin-top: 10px; font-size: .875rem; }

/* --- Über uns: Team --------------------------------------- */
.pw-team { display: grid; gap: clamp(16px, 2.4vw, 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pw-team__person {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--pw-white);
  border: 1px solid var(--pw-border);
  border-left: var(--pw-linie-stark) solid var(--pw-mint-ink);
  border-radius: var(--pw-radius-kachel);
}
.pw-team__person img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--pw-mint-tint);
}
.pw-team__name {
  margin-top: 18px;
  font-family: var(--pw-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--pw-ink);
}
.pw-team__rolle {
  margin-top: 8px;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--pw-ink-mid);
}

/* --- Breakpoints -------------------------------------------- */
@media (max-width: 860px) {
  .pw-kontakt { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pw-team { grid-template-columns: 1fr; }
}