/* =========================================================================
   kontakt.css — Das Kontaktformular
   -------------------------------------------------------------------------
   Reys Vorgabe vom 26.08.: "Kontakt bekommt einfach nur ein Kontaktformular.
   Name, Firma, Kontaktmoeglichkeit, Nachricht."

   ZWEI SPALTEN, NICHT EINE LANGE. Bei 1920 waere eine einspaltige Liste aus
   vier Feldern ein schmaler Streifen in der Mitte und darunter Leere —
   genau der Fall, den Reys Regel meint ("Breite nutzen schlaegt Scrollen").
   Links stehen die drei kurzen Angaben untereinander, rechts die Nachricht
   ueber die volle Hoehe daneben. Unter 60rem stapelt es sich.

   DIE FLAECHE IST EINE SCHEIBE. Bildsprache der Seite (CLAUDE.md,
   "Bueroglaeser"): Wenn ein Element eine Flaeche braucht, ist die geaetzte
   Scheibe die Antwort — nicht eine weitere Karte mit Rahmen. Die Felder
   darin sind hellere Stellen im selben Glas, keine Kaesten.
   ========================================================================= */

.kontakt-formular {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--raum-5);
  align-items: stretch;

  /* NICHT die volle Breite, und das ist kein Widerspruch zu "Breite nutzen
     schlaegt Scrollen". Die Regel gilt fuer Inhalt, der sonst scrollt. Hier
     wird GESCHRIEBEN: Ein Nachrichtenfeld ueber 1180 px zwingt beim Tippen
     den Blick quer ueber den halben Schirm, und die Zeile reiszt ab, bevor
     das Auge zurueckfindet. Gemessen bei 1920 vor dieser Zeile: 1182 px.
     Der Deckel ist deshalb an der Lesbarkeit bemessen wie --breite-text —
     20rem fuer die Angaben links, der Rest bleibt unter 70 Zeichen. */
  max-inline-size: 66rem;

  /* ZENTRIERT (Reys Ansage vom 26.08.). Links ausgerichtet stand rechts
     davon bei 1920 rund ein Drittel der Seite leer, ohne dass dort etwas
     hingehoert — auf der Portfolio-Seite fuellen Karten und Randnotizen
     diesen Platz, hier gibt es beides nicht. */
  margin-inline: auto;

  padding: var(--raum-6);
  border: var(--rand-fein);
  border-radius: var(--radius-l);
  background: var(--karte-verlauf);
  box-shadow: var(--karte-schatten);
}

@media (max-width: 60rem) {
  .kontakt-formular { grid-template-columns: minmax(0, 1fr); }
}

/* Die linke Spalte: drei kurze Angaben untereinander. */
.kontakt-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
}

/* Die rechte Spalte traegt die Nachricht und darunter Knopf und Meldung.
   Sie ist eine eigene Spalte und kein Nachbar im selben Fluss, damit das
   Textfeld die Hoehe der drei Angaben daneben aufnehmen kann. */
.kontakt-nachricht {
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
  block-size: 100%;
}

.kontakt-feld {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

/* PETROL, NICHT INDIGO. Die ganze Seite traegt --knopf-text auf ihren
   Bauteilen; hier stand --text (Indigo) und war damit die einzige zweite
   Textfarbe im Haus — nachgemessen rgb(20,27,65) gegen rgb(40,58,59)
   ueberall sonst. Regel 5 des Formstandards. */
.kontakt-feld label {
  color: var(--knopf-text);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--sperrung-eng);
}

/* Was optional ist, sagt es selbst. Ein Sternchen an den Pflichtfeldern
   waere die haeufigere Loesung und die schlechtere: Bei vier Feldern, von
   denen drei Pflicht sind, markiert man dann dreimal das Uebliche. */
.kontakt-feld label span {
  color: var(--feld-hinweis);
  font-weight: var(--gewicht-normal);
}

.kontakt-feld input,
.kontakt-feld textarea {
  inline-size: 100%;
  padding: var(--feld-polsterung);
  border: var(--rand-fein);
  border-radius: var(--radius-m);
  background: var(--feld-flaeche);
  color: var(--knopf-text);
  font-family: inherit;
  font-size: var(--schrift-m);
  line-height: var(--zeile-fliess);
  transition:
    border-color var(--dauer-mittel) var(--kurve-weich),
    background-color var(--dauer-mittel) var(--kurve-weich);
}

/* Das Nachrichtenfeld nimmt die Resthoehe seiner Spalte auf. Als
   style-Attribut geschrieben waere es doppelt falsch: Die
   Sicherheitsrichtlinie der Anwendung verwirft style-ATTRIBUTE (nicht nur
   <style>-Bloecke), und tokens.css waere nicht mehr die einzige Quelle. */
.kontakt-feld--wachsend { flex: 1 1 auto; }

.kontakt-feld textarea {
  /* Waechst mit, aber nicht in die Breite: Ein quer gezogenes Textfeld
     zerlegt das Raster daneben. */
  resize: vertical;
  min-block-size: 11rem;
  flex: 1 1 auto;
}

.kontakt-feld input::placeholder,
.kontakt-feld textarea::placeholder { color: var(--feld-hinweis); }

.kontakt-feld input:focus-visible,
.kontakt-feld textarea:focus-visible {
  border: var(--feld-linie-fokus);
  background: var(--feld-flaeche-fokus);
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

/* DER FUSZ STEHT UNTER BEIDEN SPALTEN, nicht in der rechten. Im ersten
   Anlauf hing er unter dem Nachrichtenfeld und stand damit auf gleicher
   Hoehe neben der dritten Angabe — er sah aus, als gehoere er zu ihr. Der
   Knopf loest das GANZE Formular aus; also steht er unter dem ganzen. */
.kontakt-fusz {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-4);
  /* RECHTS (Reys Ansage vom 26.08.). Der Knopf steht damit am Ende des
     Formulars in Leserichtung — dort, wo man nach der letzten Eingabe
     ohnehin hinsieht. */
  justify-content: flex-end;
}

/* DIE MELDUNG UNTERSCHEIDET SICH DURCH WORTLAUT UND KANTE, NICHT DURCH ROT
   ODER GRUEN. Die Palette hat beides nicht (CLAUDE.md), und eine Signal-
   farbe zu erfinden waere eine Gestaltungsentscheidung, die Rey gehoert.
   Gelungen traegt das Tuerkis der Marke, misslungen die kraeftige neutrale
   Linie — dazu sagt der Text in beiden Faellen klar, was los ist. */
.kontakt-meldung {
  /* Schiebt sich nach links, sobald sie da ist — sonst klebte sie am Knopf
     und der wanderte mit jeder Meldung ein Stueck nach links. */
  margin: 0 auto 0 0;
  padding-inline-start: var(--raum-3);
  border-inline-start: 3px solid var(--melde-neutral);
  color: var(--text-leise);
  font-size: var(--schrift-s);
}

.kontakt-meldung:empty { display: none; }

.kontakt-meldung[data-stand="gut"] {
  border-inline-start-color: var(--melde-gut);
  color: var(--text);
}

/* Solange gesendet wird, ist der Knopf nicht noch einmal zu druecken.
   Ohne das erzeugt ein zweiter Klick eine zweite Nachricht. */
.kontakt-formular[aria-busy="true"] .schaltflaeche {
  pointer-events: none;
  opacity: 0.6;
}

/* DIE HONIGFALLE. Ein Feld, das kein Mensch sieht und kein Vorleser
   ankuendigt — nur ein einfacher Roboter fuellt es aus, und dann wird die
   Nachricht verworfen. Bewusst NICHT display: none: Manche Skripte
   ueberspringen genau das. Es steht ausserhalb des Bildes und ist per
   tabindex und aria-hidden aus jeder Bedienung heraus. */
.kontakt-honig {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}