/* forms.css — Kontaktformular und Tabellen in den Textseiten.
 * Wird nur von den Seiten geladen, die es brauchen.
 */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 34rem;
  margin-top: var(--s-5);
}

.contact-form label {
  font-size: var(--t-xs);
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--s-3);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.contact-form textarea { resize: vertical; min-height: 9rem; }

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-faint); }

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.contact-form button { align-self: flex-start; margin-top: var(--s-4); }

/* Rueckmeldung nach dem Absenden — Farbe aus den semantischen Tokens,
   nicht per style="color:green" wie frueher. */
#form-status {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: var(--t-sm);
}
#form-status[data-state="ok"]   { color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
#form-status[data-state="fail"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* Breite Tabellen in Rechtstexten duerfen scrollen, die Seite nicht */
.table-scroll { overflow-x: auto; margin-block: var(--s-4); }
.table-scroll table { min-width: 32rem; }

/* Bruecke: die uebernommenen Fragmente schreiben .btn.primary,
   das Design-System der neuen Seite .btn-primary. */
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn.primary:hover { filter: brightness(1.08); }

.hidden { display: none !important; }

/* ---------- Vorstellung auf „Über uns" ----------
 * Portrait und Text nebeneinander. Auf einer App, die Standortdaten
 * verarbeitet, ist ein Gesicht kein Schmuck, sondern Vertrauen. */

.person {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--s-6);
  align-items: start;
  margin-block: var(--s-6) var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 620px) {
  .person { grid-template-columns: 1fr; gap: var(--s-4); }
  .person img { max-width: 9rem; }
}

.person img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.person h2 { margin-bottom: var(--s-1) !important; }
.person .role {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.person blockquote {
  margin: var(--s-4) 0 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--accent-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink);
}