/* Kontakt und Danke-Seite · ergänzt stil.css (Formular-Dienst von Seite bereit) */
.kontakt-kopf .einleitung { margin-bottom: 0; }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; padding-bottom: 96px; }
.kontakt-seite h2 { font-size: 24px; }
.kontakt-seite .haken { margin-bottom: 28px; }
.kontakt-mail { color: var(--leise); font-size: 16px; }
.kontakt-mail a { color: var(--lime-dunkel); font-weight: 600; text-underline-offset: 3px; }

.formular { padding: 32px; border: 1px solid var(--linie); border-radius: var(--rund-gross); background: var(--flaeche); display: grid; gap: 22px; }
.feld { display: grid; gap: 8px; }
.feld > label, .feld legend { font: 600 16px/1.3 var(--titel); color: var(--text); }
.feld .frei { font: 400 14px var(--text-schrift); color: var(--leise); }
.feld input[type="text"], .feld input[type="email"], .feld textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #C9C9BA; border-radius: var(--rund);
  background: var(--papier); color: var(--text); font: 400 16.5px/1.5 var(--text-schrift); transition: border-color .2s ease, box-shadow .2s ease; }
.feld textarea { min-height: 170px; resize: vertical; }
.feld input:hover, .feld textarea:hover { border-color: var(--leise); }
.feld input:focus-visible, .feld textarea:focus-visible { outline: none; border-color: var(--anthrazit); box-shadow: 0 0 0 3px var(--lime); }
.paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }

/* Auswahl: ruhige Kacheln mit Radiopunkt */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 14px; background: #fff; border: 1px solid #DCDCD0; border-radius: 10px;
  font-size: 15px; color: var(--anthrazit); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.chip span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #A9A99A; background: #fff; transition: border-color .2s, box-shadow .2s; }
.chip span:hover { border-color: #A9A99A; }
.chip input:checked + span { border-color: var(--anthrazit); box-shadow: inset 0 0 0 1px var(--anthrazit); }
.chip input:checked + span::before { border-color: var(--anthrazit); box-shadow: inset 0 0 0 4px #fff; background: var(--lime); }
.chip input:focus-visible + span { outline: 3px solid var(--anthrazit); outline-offset: 2px; }

/* Datenschutz-Haken */
.zustimmung { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; font-size: 15.5px; cursor: pointer; }
.zustimmung input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--anthrazit); cursor: pointer; }
.zustimmung input:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 2px; }
.zustimmung a { color: var(--lime-dunkel); font-weight: 600; text-underline-offset: 3px; }

.fangfeld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.absenden { display: grid; gap: 12px; justify-items: start; }
.absenden .knopf { min-height: 50px; }
.absenden .knopf:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 3px; }
.absenden .knopf[disabled] { opacity: .7; cursor: wait; transform: none; }
.meldung { margin: 0; font-size: 15.5px; }
.meldung:empty { display: none; }
.meldung.fehler { padding: 12px 14px; border-left: 4px solid #B3261E; border-radius: var(--rund); background: #FCEEEE; color: #7A1A14; }
.meldung.hinweis { padding: 12px 14px; border-left: 4px solid var(--lime-dunkel); border-radius: var(--rund); background: var(--lime-hell); color: var(--text); }
.pflicht-hinweis { margin: 0; font-size: 14px; color: var(--leise); }

/* Danke-Seite */
.danke { padding: 72px 0 96px; }
.danke-titel { display: flex; align-items: flex-start; gap: .32em; }
.danke-zeichen { flex: none; display: grid; place-items: center; width: .82em; height: .82em; margin-top: .1em; border-radius: 50%; background: var(--lime); }
.danke-zeichen::after { content: ""; width: .3em; height: .16em; margin-top: -.08em; border-left: .05em solid var(--anthrazit); border-bottom: .05em solid var(--anthrazit); transform: rotate(-45deg); }
.danke .einleitung { margin-bottom: 32px; }
.danke h2 { font-size: 22px; margin-bottom: 16px; }
.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0 0 36px; display: grid; gap: 14px; }
.schritte li { counter-increment: schritt; position: relative; padding: 16px 18px 16px 62px; border: 1px solid var(--linie); border-radius: var(--rund-gross); background: var(--flaeche); }
.schritte li::before { content: counter(schritt); position: absolute; left: 18px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--anthrazit); color: #fff; font: 700 15px var(--titel); }
.schritte a { color: var(--lime-dunkel); font-weight: 600; text-underline-offset: 3px; }
.danke .knoepfe { margin: 0; }
.danke .knopf { min-height: 48px; }

@media (max-width: 940px) {
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 64px; }
}
@media (max-width: 600px) {
  .formular { padding: 22px 16px; }
  .paar { grid-template-columns: minmax(0, 1fr); }
  .absenden, .absenden .knopf { width: 100%; }
  .danke { padding: 48px 0 64px; }
  .danke .knopf { width: 100%; }
}