/* Kontakt
 *
 * Gemessen an „Kontakt“ des Webflow-Stands (1280 px):
 *   Bühne ab y 140, 733 hoch; Hintergrundbild 1280 × 600 ab y 207 (cover, Radius 5)
 *   Formularkasten 645 breit bei x 40 / y 142, Innenabstand 30, Rand 1 px, Grund #262524
 *   Überzeile 20/30 akzent · Titel 28/36,4 Gewicht 500 · Formular ab y 274 (Titel + 30)
 *   Felder 583 × 60, Grund #171717, Rand 1 px, Innenabstand 20/25, 20 px, Abstand 25
 *   Textfeld 160 hoch · Häkchen 23 × 24, Radius 2, Text 16/24 · Senden 130 × 54, hell auf dunkel
 *   Info: drei Kacheln 387 breit, Abstand 20, Innenabstand 40, zentriert,
 *         Kreis 80 (#121418), Titel 30/39, Text 20/30, Sektion 140 unten
 */

/* ---------------------------------------------------- Bühne mit Formular */
.kontakt-buehne { position: relative; padding: 140px 0 140px; }
.kontakt-hintergrund {
  position: absolute; left: 0; right: 0; top: 207px; height: 600px;
  overflow: hidden; border-radius: 5px; background: var(--dunkel-sektion);
}
.kontakt-hintergrund img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kontakt-kasten {
  position: relative; width: 645px; max-width: 100%; margin-top: 2px;
  padding: 30px; border: 1px solid var(--dunkel-rand); background: var(--dunkel-grund);
}
.kontakt-kasten .ueberzeile { margin: 0; font-size: 20px; line-height: 30px; color: var(--akzent); }
.kontakt-kasten h1, .kontakt-kasten h2.kontakt-titel {
  font-family: var(--schrift-text); font-style: normal;
  font-size: 28px; line-height: 1.3; font-weight: 500; margin: 5px 0 30px;
}
.formular { display: grid; gap: 25px; }
.feld { display: grid; gap: 6px; }
.feld label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* Vorlage nur mit Platzhaltern; Label bleibt für Vorleser */
.feld input, .feld textarea {
  width: 100%; height: 60px; padding: 0 25px;
  font: inherit; font-size: 20px; line-height: 1.43; color: var(--dunkel-text);
  background: #171717; border: 1px solid var(--dunkel-rand); border-radius: 0;
}
.feld textarea { height: 160px; min-height: 160px; padding: 20px 25px; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--dunkel-text-leise); opacity: 1; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.feld input:user-invalid, .feld textarea:user-invalid { border-color: #e0a58a; }
.einwilligung { display: grid; grid-template-columns: 23px 1fr; gap: 8px; align-items: center; font-size: 16px; line-height: 24px; cursor: pointer; }
.einwilligung input { appearance: none; width: 23px; height: 24px; margin: 0; border: 1px solid var(--dunkel-rand); border-radius: 2px; background: var(--dunkel-grund); cursor: pointer; display: grid; place-items: center; }
.einwilligung input:checked::before { content: ""; width: 11px; height: 12px; background: var(--akzent); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.einwilligung input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.einwilligung a { color: var(--dunkel-text); display: inline-block; padding-block: 10px; margin-block: -10px; }   /* 24 + 20 = 44 */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* Falle für Bots, für Menschen unsichtbar */
.senden {
  justify-self: start; margin-top: 20px; min-height: 54px; padding: 11px 30px;
  font: inherit; font-size: 20px; line-height: 30px; font-weight: 500;
  color: var(--dunkel-grund); background: var(--akzent); border: 1px solid transparent; cursor: pointer;
  transition: background .2s ease;
}
.senden:hover { background: #fff; }
.senden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.meldung { padding: 16px 20px; border: 1px solid var(--akzent); font-size: 18px; line-height: 1.5; }
.meldung-fehler { border-color: #e0a58a; }
@media screen and (max-width: 991px) {
  .kontakt-hintergrund { top: 190px; height: 520px; }
  .kontakt-kasten { width: 600px; }
}
@media screen and (max-width: 767px) {
  .kontakt-buehne { padding-bottom: 80px; }
  .kontakt-hintergrund { position: static; height: 240px; margin: 0 0 20px; }
  .kontakt-kasten { width: 100%; margin-top: 0; }
  .feld input { padding: 0 16px; font-size: 18px; }
  .feld textarea { padding: 14px 16px; font-size: 18px; }
}
@media screen and (max-width: 479px) {
  .kontakt-kasten { padding: 20px 15px; }
  .kontakt-hintergrund { height: 180px; }
  .kontakt-kasten h1, .kontakt-kasten h2.kontakt-titel { font-size: 24px; }
}

/* ---------------------------------------------------- Anschrift, Telefon, E-Mail */
.kontakt-info { padding: 0 0 140px; }
.kontakt-kacheln { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kontakt-kachel {
  padding: 40px; border: 1px solid var(--dunkel-rand); text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.kontakt-kachel .kreis {
  width: 80px; height: 80px; border-radius: 50%; background: #121418; color: var(--dunkel-text);
  display: grid; place-items: center; margin-bottom: 25px;
}
.kontakt-kachel .kreis svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-kachel h2 { font-size: 30px; line-height: 1.3; margin: 0 0 10px; }
.kontakt-kachel p { margin: 0; font-size: 20px; line-height: 30px; color: var(--dunkel-text-leise); }
.kontakt-kachel a { color: inherit; text-decoration: none; display: inline-block; padding-block: 7px; margin-block: -7px; }   /* 30 + 14 = 44 */
.kontakt-kachel a:hover { color: var(--akzent); text-decoration: underline; }
@media screen and (max-width: 991px) { .kontakt-kacheln { grid-template-columns: 1fr; } .kontakt-kachel { padding: 30px; } }
@media screen and (max-width: 479px) { .kontakt-info { padding-bottom: 80px; } .kontakt-kachel { padding: 24px 15px; } .kontakt-kachel h2 { font-size: 24px; } .kontakt-kachel p { font-size: 18px; } }