/* ==========================================================================
   Page CSS: Kontakt (no draft – design system v2, visual acceptance).
   The location band repeats the light-map rules of page-unterkunft.css
   (section 9) – kept as a copy so the approved accommodation CSS stays
   untouched; change both together.
   ========================================================================== */

/* Contact block: the page's main band, heading on the left. */
.kontakt-main .contact { align-items: start; }
.kontakt-main .contact-head { grid-column: 1 / span 6; }
.kontakt-main h1 { font-size: var(--fs-h2); }
.kontakt-text { margin-top: var(--space-3); }
.kontakt-faq { margin-top: var(--space-5); }

/* Location band (copy of page-unterkunft.css, section 9). */
.lage-layout { row-gap: var(--space-6); align-items: start; }
.lage-layout .lage-text { grid-column: 1 / span 5; }
.lage-layout .lage-text > p { font-size: var(--fs-lead); }
.lage-layout .lage-map { grid-column: 7 / span 6; }
.lage-map figure { margin: 0; }
.lage-map img { display: block; width: 100%; height: auto; border: var(--line); }
.map-source { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-muted); }
.map-links { display: flex; flex-wrap: wrap; column-gap: var(--space-4); row-gap: var(--space-2); margin-top: var(--space-4); }
.lage-hint { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--color-muted); }

@media (max-width: 960px) {
  .kontakt-main .contact-head, .lage-layout .lage-text, .lage-layout .lage-map { grid-column: 1 / -1; }
}

/* Contact form band (SV-04-014, building block 2a; plan-kontaktformular.md
   § 5). Labels above the fields, "optional" spelled out, white fields
   with an ink border as in the search panel, errors in text
   and colour (never colour alone). */
.kf-layout { row-gap: var(--space-6); align-items: start; }
.kf-intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--space-4)); } /* stays beside the long form, as the FAQ topics do */
.kf-intro h2 { font-size: var(--fs-h2); }
.kf-intro .prose { margin-top: var(--space-3); }
.kf-body { grid-column: 7 / span 6; }

.kf { display: grid; gap: var(--space-4); }
.kf-hinweis, .kf-datenschutz { margin: 0; font-size: var(--fs-small); color: var(--color-muted); }
.kf-datenschutz a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.kf-feld { margin: 0; padding: 0; border: 0; min-width: 0; }
.kf-feld > label:not(.kf-option), .kf-feld legend, .kf-zeitraum-felder label {
  display: block;
  margin-bottom: var(--space-1);
  padding: 0;
  font-weight: 600;
}
.kf-optional { font-weight: 400; color: var(--color-muted); }
.kf-pflicht { color: var(--color-error); }
.kf input[type="text"], .kf input[type="email"], .kf input[type="tel"], .kf input[type="date"], .kf textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-ink);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font: 400 var(--fs-body)/1.4 var(--font-body);
}
.kf textarea { padding-block: 12px; resize: vertical; min-height: 10rem; }
.kf input[aria-invalid="true"], .kf textarea[aria-invalid="true"] { border: 2px solid var(--color-error); }

/* Topic: native radios, whole row clickable, 44px targets. */
.kf-option { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; }
.kf-option input { width: 24px; height: 24px; margin: 0; accent-color: var(--color-ink); flex: none; } /* 24 px: WCAG 2.2 target size (backlog 2026-10-25) */

.kf-zeitraum-felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.kf-zeitraum-felder label { font-weight: 400; font-size: var(--fs-small); }

.kf-zeitraum .kf-fehler { margin: var(--space-1) 0 0; }
.kf-fehler { margin: 0 0 var(--space-1); font-size: var(--fs-small); font-weight: 600; color: var(--color-error); }
.kf-zusammenfassung {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-left: 4px solid var(--color-error);
  background: var(--color-bg);
}
.kf-zusammenfassung h3, .kf-erfolg h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.kf-zusammenfassung ul { margin: 0; padding-left: 1.2em; }
.kf-zusammenfassung a { color: var(--color-error); text-decoration: underline; text-underline-offset: 3px; }
.kf-erfolg { padding: var(--space-4); border-left: 4px solid var(--color-ink); background: var(--color-bg); }
/* Focus is moved here by script so screen readers announce the result; no
   ring, because neither box is a control. */
.kf-zusammenfassung:focus, .kf-erfolg:focus { outline: none; }

.kf .btn-pill { justify-self: start; }
.kf .btn-pill[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.kf-honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 960px) {
  .kf-intro, .kf-body { grid-column: 1 / -1; }
  .kf-intro { position: static; }
}
@media (max-width: 480px) {
  .kf-zeitraum-felder { grid-template-columns: 1fr; }
  .kf .btn-pill { justify-self: stretch; }
}