/* ============================================================
   VCI Design — Kontaktseite
   Formular links, Ansprechpartner rechts. Nur kontakt.html.

   Die Ansprechpartner bekommen eigene Klassen und uebernehmen
   NICHT .person aus ueber-uns.css. Diese Datei wird hier nicht
   geladen, die Klasse waere wirkungslos. Genau dieser Fehler ist
   in Schritt 7 mit .platzhalter passiert.
   ============================================================ */

.kontakt__kopf {
  padding-block: var(--space-xxl) var(--space-xl);
}

.kontakt__einstieg {
  margin-top: var(--space-l);
  max-width: 46ch;
  color: var(--color-fg-muted);
  /* balance statt des pretty aus base.css. Der Satz besteht aus
     zwei kurzen Haelften, und ohne diese Zeile bricht er mitten in
     der zweiten: "Den Rest klaeren wir" und darunter allein "im
     Gespraech." Mit balance liegt der Umbruch auf der
     Satzgrenze, also dort, wo man ohnehin Luft holt. */
  text-wrap: balance;
}

.kontakt__spalten {
  padding-bottom: var(--space-xxl);
  row-gap: var(--space-xxl);
}

.formular {
  grid-column: span 7;
}

.ansprech {
  grid-column: 9 / span 4;
}

/* --- Honigtopf ------------------------------------------------
   Ueber display: none versteckt, nicht ueber das hidden-Attribut
   und nicht ueber .visually-hidden. Per CSS verborgene Felder
   werden weiterhin mitgesendet, nur disabled wuerde sie
   unterdruecken. .visually-hidden wiederum liesse das Feld im
   Barrierefreiheitsbaum, und dann forderte ein Screenreader dazu
   auf, ein Fallenfeld auszufuellen.
   ---------------------------------------------------------------- */
.honigtopf {
  display: none;
}

/* --- Felder ---------------------------------------------------- */
.feld + .feld {
  margin-top: var(--space-l);
}

.feld__label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg);
}

.feld__eingabe {
  display: block;
  width: 100%;
  margin-top: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  background-color: var(--color-bg);
  color: var(--color-fg);
  /* --color-fg-muted, nicht --color-border. Der Rahmen eines
     Eingabefelds ist eine Bedienelement-Grenze und faellt unter
     WCAG 1.4.11 mit 3:1, nicht unter die Regeln fuer Zierlinien.
     --color-border erreicht gegen den Seitenhintergrund nur
     1.20:1, das Feld waere kaum als solches erkennbar.
     --color-fg-muted kommt auf 5.11:1. */
  border: 1px solid var(--color-fg-muted);
  border-radius: 0;
  font-size: var(--text-medium);
  font-family: var(--font-text);
  transition: border-color var(--duration-short) var(--ease-base);
}

.feld__eingabe:hover {
  border-color: var(--color-fg);
}

textarea.feld__eingabe {
  resize: vertical;
  min-height: 9rem;
  line-height: var(--leading-text);
}

.feld__hinweis {
  margin-top: var(--space-xs);
  font-size: var(--text-small);
  color: var(--color-fg-muted);
}

/* --- Fehlerzustand --------------------------------------------
   Das Farbsystem kennt bewusst kein Fehlerrot, und neue Tokens
   sind ausgeschlossen. Der Zustand wird deshalb ueber Strichdicke
   und Textfarbe angezeigt, nicht ueber einen Farbwechsel.

   Das ist hier kein Notbehelf, sondern das robustere Verfahren:
   WCAG 1.4.1 verlangt ohnehin, dass Farbe nie das einzige Mittel
   ist. Die eigentliche Fehlermeldung kommt vom Browser selbst.

   :user-invalid statt :invalid. :invalid faerbt leere
   Pflichtfelder sofort beim Laden ein, bevor jemand ueberhaupt
   etwas eingegeben hat.
   ---------------------------------------------------------------- */
.feld__eingabe:user-invalid {
  border-width: 2px;
  border-color: var(--color-fg);
}

.feld__eingabe:user-invalid + .feld__hinweis {
  color: var(--color-fg);
  font-weight: var(--weight-semibold);
}

/* --- Datenschutz und Absenden ---------------------------------- */
.formular__datenschutz {
  margin-top: var(--space-l);
  max-width: 52ch;
  font-size: var(--text-small);
  color: var(--color-fg-muted);
}

.formular__senden {
  display: inline-block;
  margin-top: var(--space-l);
  padding: var(--space-s) var(--space-l);
  background-color: var(--color-accent);
  color: var(--color-black);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: none;
  /* Nur transform, damit die Bewegung auf der GPU bleibt. */
  transition: transform var(--duration-short) var(--ease-base);
}

.formular__senden:hover {
  transform: translateX(var(--space-xs));
}

/* --- Ansprechpartner ------------------------------------------- */
.ansprech__label {
  font-family: var(--font-text);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-text);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.ansprech__liste {
  margin-top: var(--space-l);
}

.ansprech__person {
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.ansprech__person + .ansprech__person {
  margin-top: var(--space-l);
}

.ansprech__name {
  display: block;
  font-size: var(--text-medium);
  font-weight: var(--weight-semibold);
  color: var(--color-fg);
}

.ansprech__rolle {
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: var(--text-small);
  color: var(--color-fg-muted);
}

/* Telefon je Person, unter der Rolle. Eigene Zeile, damit die
   Nummer nicht an "Geschaeftsfuehrung" klebt, und in der vollen
   Textfarbe: sie ist die Handlung in diesem Block, die Rolle nur
   die Einordnung. Unterstrichen wie jeder Link, das kommt aus
   base.css. tabular-nums haelt die beiden Nummern gleich breit. */
.ansprech__telefon {
  display: block;
  width: fit-content;
  margin-top: var(--space-xs);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

/* Das gemeinsame Postfach steht unter beiden Personen, mit
   derselben Linie darueber wie sie. So liest es sich als dritter
   Eintrag der Liste und nicht als Nachsatz zur zweiten Person. */
.ansprech__mail {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small);
}

/* --- Mobil ------------------------------------------------------ */
@media (max-width: 768px) {
  .formular,
  .ansprech {
    grid-column: 1 / -1;
  }

  .formular__senden:hover {
    transform: none;
  }
}

/* --- Reduzierte Bewegung ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .formular__senden:hover {
    transform: none;
  }
}