/* ============================================================
   Kontakt

   Masse aus Prototyp.dc.html Zeile 2571-2610.

   Die Felder tragen hier nur eine Linie unter sich, keinen Kasten — anders
   als im Bewerbungsdialog. Das ist der Entwurf und kein Versehen: Der
   Dialog ist eng und braucht sichtbare Grenzen, dieser Abschnitt hat Platz
   und darf ruhiger sein.
   ============================================================ */

.ps-kontakt {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-block: 0;
}

.ps-kontakt__kopf {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ps-kontakt .ps-kontakt__titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: var(--weight-medium);
  line-height: 1.18;
  letter-spacing: -0.028em;
  color: var(--text-strong);
  text-wrap: balance;
}

.ps-kontakt__anriss {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ---------- Anschrift links, Formular rechts ---------- */

.ps-kontakt__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--space-9);
  align-items: start;
}

.ps-kontakt__daten {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-body);
}

.ps-kontakt__daten-titel {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ps-kontakt__firma { color: var(--text-strong); }

.ps-kontakt__telefon,
.ps-kontakt__mail {
  color: var(--text-body);
  width: fit-content;
}

.ps-kontakt__telefon:hover,
.ps-kontakt__mail:hover { color: var(--highlight); }

.ps-kontakt__zusatz {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- Das Formular ---------- */

.ps-kontakt__spalte,
.ps-kontakt__formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ps-kontakt__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ps-kontakt__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-6);
}

.ps-kontakt__feld {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ps-kontakt__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ps-kontakt__formular input[type="text"],
.ps-kontakt__formular input[type="email"],
.ps-kontakt__formular textarea {
  width: 100%;
  padding: 14px 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--field-bg);
  color: var(--field-text);
  /* Das Feld ist in beiden Schemata hell. Dann sollen auch Cursor,
     Textauswahl, Rollbalken im Textfeld und das Gelb der Browser-
     Autovervollstaendigung hell ausfallen und nicht dem dunklen Schema
     der Seite folgen. */
  color-scheme: light;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out);
}

/* Firefox dimmt Platzhalter von sich aus zusaetzlich ab — deshalb opacity. */
.ps-kontakt__formular ::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

.ps-kontakt__formular textarea {
  resize: vertical;
  min-height: 6em;
}

.ps-kontakt__formular input:hover,
.ps-kontakt__formular textarea:hover { border-bottom-color: var(--field-line-hover); }

/* Der Ring gehoert um das ganze Feld, nicht nur um die Linie darunter. */
.ps-kontakt__formular input:focus-visible,
.ps-kontakt__formular textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-bottom-color: transparent;
}

.ps-kontakt__einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.ps-kontakt__einwilligung input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--accent-base);
}

.ps-kontakt__abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.ps-kontakt__senden {
  padding: 17px 34px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.ps-kontakt__senden:hover { background: var(--accent-strong); }

.ps-kontakt__pflicht {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ---------- Die Rueckmeldung ---------- */

.ps-kontakt__meldung {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-body);
}

.ps-kontakt__meldung--ok {
  border-color: var(--highlight);
  background: color-mix(in srgb, var(--highlight) 12%, transparent);
  color: var(--text-strong);
}

.ps-kontakt__meldung--fehler {
  border-color: #c0563f;
  background: color-mix(in srgb, #c0563f 10%, transparent);
  color: var(--text-strong);
}

/* ---------- Schmale Breiten ---------- */

@media (max-width: 768px) {
  .ps-kontakt { gap: var(--space-7); }
  .ps-kontakt__raster { gap: var(--space-7); }
  .ps-kontakt__senden { width: 100%; }
}