/**
 * CÍRCULO ORIGEM · Kontakt, leise Fassung
 * © Marco Duarte
 *
 * Als letzte CSS-Datei einbinden, nach wordmark.css (home.css lädt nach controls.css).
 * Gilt nur für #kontakt. Braucht --line, --line-color, --tap-min aus controls.css.
 * Felder als Linie statt Kasten, Senden als Textknopf,
 * Formular auf der Textkante links, Zeichnung rechts.
 * Dazu im HTML/CMS: Label über der Adresse «Direkt» statt «E-Mail».
 */

#kontakt .contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  column-gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}
#kontakt .contact-form-wrap { display: block; grid-column: 1; grid-row: 1; }
#kontakt .contact-form-wrap > * { grid-area: auto; }
#kontakt .contact-figure {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: min(100%, 26rem);
  margin: 0;
}

/* Name und E-Mail nebeneinander, Betreff und Nachricht über die ganze Breite */
#kontakt .form-grid--split { grid-template-columns: 1fr; }
#kontakt .form-grid--split .form-col { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
#kontakt .form-grid--split .form-col > .field:last-child { grid-column: 1 / -1; }

/* Felder: nur eine Linie unten */
#kontakt .field input:not([type="radio"]):not([type="checkbox"]),
#kontakt .field select,
#kontakt .field textarea {
  border: 0;
  border-bottom: var(--line) solid var(--line-color);
  border-radius: 0;
  padding-left: 0;
  background-color: transparent;
  min-height: var(--tap-min);
}
#kontakt .field select { background-position: right 0 center; }
#kontakt .field textarea { min-height: 6.5rem; resize: none; }
#kontakt .field input:focus-visible,
#kontakt .field select:focus-visible,
#kontakt .field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--text);
}

/* Senden: Textknopf mit Pfeil, Tippfläche bleibt 44 px */
#kontakt .btn.btn--block {
  display: inline-flex;
  width: auto;
  justify-self: start;
  min-height: var(--tap-min);
  margin-top: 0.5rem;
  padding: 0;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 0;
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.45em;
}
#kontakt .btn.btn--block::after { content: "\2192"; margin-left: 0.6em; }
#kontakt .btn.btn--block:hover { color: var(--text-muted); }
#kontakt .btn.btn--block:focus-visible { outline: var(--line) solid var(--text); outline-offset: 4px; }

#kontakt .contact-mail { margin-bottom: 2.25rem; }
#kontakt .contact-notes { margin-top: 2.5rem; }
#kontakt .contact-notes p { font-size: 0.875rem; color: var(--text-muted); margin: 0 0 0.4rem; }

/* Mobil: eine Spalte, Zeichnung unter dem Formular und kleiner */
@media (max-width: 768px) {
  #kontakt .contact-layout { grid-template-columns: 1fr; row-gap: 3rem; }
  #kontakt .contact-figure { grid-column: 1; grid-row: 2; width: min(70%, 18rem); }
  #kontakt .form-grid--split .form-col { grid-template-columns: 1fr; }
}