/* ═══════════════════════════════════════════════════════════════════════
   kontakt.css — seitenspezifisch für /kontakt.html
   Gehört bewusst nicht in site.css: das Zweispalten-Layout aus Formular +
   Kontaktwege-Karte kommt nur auf dieser einen Seite vor.
   ═══════════════════════════════════════════════════════════════════════ */

.kontakt-layout{display:grid;gap:28px;align-items:start;padding:var(--section-y) 0}
@media (min-width:900px){
  .kontakt-layout{grid-template-columns:1.15fr .85fr;gap:36px}
}

.kontakt-layout .contact-form{margin:0}

/* Feldfehler — dezent, erscheint nur nach fehlgeschlagener Validierung */
.field-err{margin:4px 0 0;font-size:12.5px;color:#b23b36}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#b23b36}

/* Checkliste "was Sie bereithalten sollten" — eigener Block, kein .cards-Nachbau */
.kt-checklist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.kt-checklist li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:var(--fs-base);color:var(--muted)}
.kt-checklist li::before{
  content:"";width:22px;height:22px;margin-top:1px;border-radius:var(--r-full);
  background:var(--blue-soft);border:1px solid rgba(59,74,162,.25);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b4aa2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}

.kt-endpoint-note{margin-top:10px}

.kt-fallback{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:14px;font-size:13.5px;color:var(--muted)}

/* Einzugsgebiet als eigene SVG-Karte statt eingebetteter Kartendienst (DSGVO/No-CDN) */
.kt-area{margin-top:22px}