/* ============================================================
   Kontakt — page-local LAYOUT only. The Kachel topic picker is
   an accessible radio group styled as tiles (:has() checked
   state, visible focus ring). Tokens throughout. Square corners.
   ============================================================ */

.layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: start; }
/* Grid items default to min-width:auto, i.e. they refuse to shrink below their
   content. Without this the picker's widest word sets the column width and the
   whole card grows past the container instead of the text wrapping. */
.layout > * { min-width: 0; }

/* Card shell for the form and the success panel — page-local (not an inline
   style on the elements) so the padding can shrink on phones, where
   var(--space-7) on both sides eats a fifth of the viewport. Both must carry
   the same values: the card may not jump when the HTMX swap lands. */
.kontakt-card { padding: var(--space-7); gap: var(--space-5); }

.picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--surface-card);
  border-top: var(--bw) dashed var(--border-dash);
  border-left: var(--bw) dashed var(--border-dash);
  box-shadow: var(--shadow-md);
}
.picker label {
  --accent: var(--magenta-500);
  position: relative; padding: var(--space-5); background: var(--surface-card);
  border-right: var(--bw) dashed var(--border-dash);
  border-bottom: var(--bw) dashed var(--border-dash);
  cursor: pointer; display: flex; flex-direction: column; gap: var(--space-2);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  /* Same reason as .layout > * — a tile has to be allowed to be narrower than
     "Übersetzen" instead of pushing the whole grid wider. */
  min-width: 0;
}
.picker label:nth-child(2){--accent:var(--teal);} .picker label:nth-child(3){--accent:var(--amber);} .picker label:nth-child(4){--accent:var(--pink);}
.picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.picker .n { font: var(--type-mono); font-weight: var(--fw-bold); color: var(--accent); }
.picker .t { font: var(--type-h4); color: var(--text-strong); overflow-wrap: break-word; }
.picker label:hover { background: var(--gray-50); }
.picker input:checked + .n,
.picker label:has(input:checked) { background: var(--accent); color: var(--text-on-brand); }
.picker label:nth-child(4):has(input:checked) { color: var(--ink); }
.picker label:has(input:checked) .n, .picker label:has(input:checked) .t { color: inherit; }
.picker input:focus-visible + .n { outline: none; }
.picker label:has(input:focus-visible) { box-shadow: inset 0 0 0 4px var(--magenta-500); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* Phones. A 2×2 tile grid has no room left for a display-size German word once
   the container gutter and the card padding are subtracted: at 402px the tile
   text box is ~89px while "Übersetzen" needs ~130px at var(--type-h4). Stack
   the tiles into full-width rows (number beside the label, so four of them stay
   compact) and trim the paddings — no hyphenation, no sideways scroll. */
@media (max-width: 640px) {
  .layout { gap: var(--space-7); }
  .kontakt-card { padding: var(--space-5); }
  .picker { grid-template-columns: 1fr; }
  .picker label {
    flex-direction: row; align-items: baseline; gap: var(--space-3);
    padding: var(--space-4);
  }
  /* .kb-btn is white-space: nowrap by design, so the label cannot wrap out of
     trouble: "Erstgespräch anfragen" at --text-lg plus 2×var(--space-6) is
     ~280px and pushes out of the card on a 375px phone. Trim type and inline
     padding only — min-height stays var(--control-h-lg), so the 52px touch
     target is untouched. */
  .kontakt-card .kb-btn--lg { font-size: var(--text-md); padding-inline: var(--space-4); }
}

/* Honeypot — moved off-screen, NOT display:none. Plenty of bots skip fields
   that are hidden outright, and a field they never touch catches nobody.
   Humans stay clear of it via aria-hidden + tabindex="-1". */
.kb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Field errors need no page-local rule: .kb-error's look (danger colour, size,
   weight) lives in components.css, and the flex `gap` of .kb-field / the topic
   fieldset / the form itself already places each message under its control.
   The failing input turns red via .kb-input[aria-invalid="true"] — the form
   sets that attribute in full_clean(). Kept as a note so nobody re-adds it. */