/* ===== Kontakt (Kürzel kt-), nur auf /kontakt/ geladen. Vorbild: Kontaktformular von qm-praxiswerk.de ===== */
/* Anfrage: links Überschrift, was für die Vorbereitung hilft, der direkte Weg per E-Mail und der Datenschutz,
   rechts das Formular. Spalten wie .text2. */
.kt-anfrage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 5rem; align-items: start; }
.kt-vorbereitung { max-width: 30rem; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; }
.kt-vorbereitung a, .kt-datenschutz a, .kt-weg a { color: var(--petrol); text-underline-offset: .2em; }
.kt-weg { max-width: 30rem; margin-top: 1.75rem; font-size: 1rem; line-height: 1.6; }
.kt-weg + .kt-weg { margin-top: .5rem; }
.kt-mail { display: inline-block; font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 500; overflow-wrap: anywhere; text-underline-offset: .22em; }
.kt-datenschutz { max-width: 30rem; margin-top: 2rem; padding-top: 1.35rem; border-top: 1px solid var(--linie); font-size: .95rem; line-height: 1.6; scroll-margin-top: 1.5rem; }
.kt-datenschutz strong { color: var(--ink); font-weight: 500; }

/* Formular auf ruhiger Fläche, Felder weiß mit Rahmen in Stahl (Kontrast zur Fläche über 3:1) */
.kt-formular { max-width: 42rem; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: 12px; background: var(--flaeche); scroll-margin-top: 1.5rem; }
.kt-feld + .kt-feld { margin-top: 1.4rem; }
.kt-feld label { display: block; margin-bottom: .45rem; font-size: .95rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.kt-feld input, .kt-feld textarea { display: block; width: 100%; min-height: 3.25rem; margin: 0; padding: .8rem 1rem; border: 1px solid var(--stahl); border-radius: 6px; background: var(--weiss); color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.5; transition: border-color .2s var(--aus), box-shadow .2s var(--aus); }
.kt-feld textarea { min-height: 12.5rem; resize: vertical; }
.kt-feld input:hover, .kt-feld textarea:hover { border-color: var(--ink); }
.kt-feld input:focus-visible, .kt-feld textarea:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; border-color: var(--petrol); }
/* Fehlendes oder ungültiges Feld: doppelt so starker Rahmen, dazu die Meldung oben im Formular (nie nur Farbe) */
.kt-feld [aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kt-formular .knopf { margin-top: 1.9rem; border: 0; font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; cursor: pointer; }
.kt-formular .knopf[aria-disabled="true"] { cursor: progress; }

/* Rückmeldung als Kasten: Erfolg in Petrol, Fehler mit Rahmen; die Aussage steht immer im Text.
   Die leere Zeile nimmt keinen Platz ein, bleibt aber Live-Region. */
.kt-status { scroll-margin-top: 1.5rem; }
.kt-status[data-art] { margin-bottom: 1.75rem; padding: 1rem 1.25rem; border-radius: 6px; font-weight: 500; line-height: 1.55; }
.kt-status[data-art="ok"] { background: var(--petrol); color: var(--weiss); }
.kt-status[data-art="fehler"] { border: 1px solid var(--ink); background: var(--weiss); color: var(--ink); }
.kt-status[data-art="ok"]:focus-visible { outline-color: var(--ink); }
/* Ohne JavaScript: senden.php leitet mit #formstatus zurück, dann erscheint der Hinweis mit der Adresse */
.kt-status__ohne-js { display: none; }
#formstatus:target .kt-status__ohne-js { display: block; margin-bottom: 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--ink); border-radius: 6px; background: var(--weiss); color: var(--ink); font-weight: 500; line-height: 1.55; }

@media (max-width: 860px) {
  .kt-anfrage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .kt-formular { padding: 1.5rem 1.25rem; }
  .kt-formular .knopf { width: 100%; }
}