/* Kontaktseite – Formular und Karte. */

/* --- Formular ------------------------------------------------------------ */
.formular-einleitung {margin:15px 0 30px;font-size:15px;max-width:none}
.formular-einleitung .pflicht {color:var(--deep)}
.kontaktformular {display:grid;gap:22px}
.feldpaar {display:grid;grid-template-columns:1fr 1fr;gap:22px}
.feld {display:grid;gap:8px}
.feld label {font-size:14px;color:#3f463d}
.feld .pflicht {color:var(--deep)}
.feld input,
.feld select,
.feld textarea {font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid #c3cbbe;padding:13px 15px;width:100%;border-radius:0;
  transition:border-color .2s}
.feld textarea {min-height:150px;resize:vertical}
.feld input:hover,
.feld select:hover,
.feld textarea:hover {border-color:var(--green)}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {border-color:var(--deep);outline:2px solid var(--deep);outline-offset:2px}
/* Die Fehlermeldung des Browsers erst zeigen, wenn abgeschickt wurde –
   sonst färbt sich das Feld schon beim ersten Antippen rot. */
.kontaktformular.wurde-geprueft .feld input:invalid,
.kontaktformular.wurde-geprueft .feld select:invalid,
.kontaktformular.wurde-geprueft .feld textarea:invalid {border-color:#9b3232}

/* Honigtopf: für Menschen unsichtbar, für Formularroboter verlockend.
   Kein display:none, das überspringen viele Roboter gezielt. */
.honigtopf {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.datenschutz-feld {display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  margin-top:4px}
.datenschutz-feld input {width:22px;height:22px;margin-top:2px;accent-color:var(--deep)}
.datenschutz-feld label {font-size:14px;line-height:1.6;color:#3f463d}
.datenschutz-feld a {text-decoration:underline;text-underline-offset:3px;color:var(--deep)}

.formular-fuss {display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.formular-hinweis {font-size:13px;color:#62685c;margin:0;max-width:none}
.formular-rueckmeldung {font-size:15px;line-height:1.6;padding:16px 18px;margin:0;max-width:none;
  border-left:3px solid var(--green);background:var(--soft)}
.formular-rueckmeldung[hidden] {display:none}

/* --- Karte mit vorgeschalteter Einwilligung ------------------------------ */
.kartenzone {background:var(--soft)}
.kartenzone h2 {font-size:clamp(28px,2.8vw,40px);line-height:1.14;margin-bottom:14px}
.kartenzone > .wrap {padding-top:90px;padding-bottom:90px}
.karten-einleitung {margin-bottom:34px}
/* Über die volle Seitenbreite statt der Grundbreite von 620 px für Fließtext */
.karten-einleitung p {max-width:none;text-wrap:pretty}

.kartenfeld {position:relative;background:#e4e9de;border:1px solid #cdd6c6;
  min-height:440px;display:grid;place-items:center}
.karten-einwilligung {max-width:560px;padding:44px 38px;text-align:center;display:grid;
  justify-items:center;gap:18px}
.karten-einwilligung .lnr {font-size:34px;color:var(--deep)}
.karten-einwilligung h3 {font-family:Manrope,Arial,sans-serif;font-size:19px;font-weight:700;
  text-transform:none;letter-spacing:0;line-height:1.5}
.karten-einwilligung p {font-size:14px;line-height:1.65;color:#3f463d;margin:0;max-width:none}
.karten-einwilligung a {text-decoration:underline;text-underline-offset:3px;color:var(--deep)}
.kartenfeld iframe {display:block;width:100%;height:440px;border:0}
.kartenfeld > * {max-width:100%}
.karten-fussnote {font-size:13px;color:#62685c;margin-top:16px;max-width:none}

@media(max-width:1100px) {
  .kartenzone > .wrap {padding-top:70px;padding-bottom:70px}
  /* Nur der Rahmen bekommt eine feste Höhe. Das Feld selbst wächst mit dem
     Einwilligungshinweis – sonst ragt dessen Knopf unten heraus. */
  .kartenfeld {min-height:380px}
  .kartenfeld iframe {height:380px}
}
@media(max-width:760px) {
  .feldpaar {grid-template-columns:1fr}
  .kontaktformular {gap:18px}
  .kartenzone > .wrap {padding-top:55px;padding-bottom:55px}
  .karten-einleitung {margin-bottom:26px}
  .karten-einwilligung {padding:32px 24px}
  .kartenfeld {min-height:320px}
  .kartenfeld iframe {height:320px}
  .formular-fuss {gap:16px}
}