/* ==========================================================================
   Kontakt – seitenspezifische Styles (ergänzt style.css)
   ========================================================================== */

/* ---------- Kontaktkarten ---------- */
.kontakt-karte { text-align: center; }
.kontakt-karte .icon-badge { margin-left: auto; margin-right: auto; }
.kontakt-karte address { font-style: normal; margin: 0; }
.kontakt-link { font-weight: 600; font-size: 1.08rem; overflow-wrap: anywhere; }

/* ---------- Layout Formular + Standort ---------- */
.kontakt-layout {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: stretch;
}
@media (max-width: 960px) { .kontakt-layout { grid-template-columns: 1fr; } }

.formular-box {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: clamp(24px, 4vw, 44px);
}
.formular-box h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.formular-hinweis { font-size: .9rem; color: var(--muted); }
.pflicht { color: var(--primary); font-weight: 600; }
.optional { color: var(--muted); font-weight: 400; font-size: .88em; }

/* ---------- Felder ---------- */
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 600px) { .feld-reihe { grid-template-columns: 1fr; } }
.feld { margin-bottom: 20px; }
.feld label { display: block; font-weight: 600; color: var(--dark); font-size: .93rem; margin-bottom: 6px; }
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--dark);
  background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.feld textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
.feld input:hover, .feld textarea:hover { border-color: #cfc7d2; }
.feld input:focus, .feld textarea:focus {
  outline: none; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(128, 32, 130, .14);
}
.feld [aria-invalid="true"] { border-color: var(--error); background: #fff; }
.feld [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(198, 40, 40, .14); }

.feld-fehler { color: var(--error); font-size: .86rem; margin: 6px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.feld-fehler::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--error); color: #fff; font-size: .72rem; font-weight: 700; }
.feld-fehler[hidden] { display: none; }

.zeichenzaehler { font-size: .8rem; color: var(--muted); text-align: right; margin: 4px 0 0; }
.zeichenzaehler.is-knapp { color: #b26a00; }
.zeichenzaehler.is-voll { color: var(--error); font-weight: 600; }

/* Checkbox */
.feld--checkbox { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; }
.feld--checkbox input {
  width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--primary); cursor: pointer;
}
.feld--checkbox label { font-weight: 400; color: var(--text); font-size: .9rem; line-height: 1.6; margin: 0; cursor: pointer; }
.feld--checkbox label a { text-decoration: underline; }
.feld--checkbox .feld-fehler { grid-column: 2; }
.feld--checkbox input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }

/* Captcha (Proof-of-Work) */
.captcha__box {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt);
  padding: 14px 16px; max-width: 420px; transition: border-color .2s, background .2s;
}
.captcha__box input { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); cursor: pointer; flex: none; }
.captcha__box input:disabled { cursor: default; }
.captcha__box label { margin: 0; font-weight: 500; cursor: pointer; }
.captcha__status { margin-left: auto; font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.captcha__status:empty { display: none; }
.captcha.is-pruefend .captcha__status::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--primary-light); border-top-color: var(--primary); animation: captcha-dreh .8s linear infinite;
}
.captcha.is-ok .captcha__box { border-color: var(--success); background: #f1f8f1; }
.captcha.is-ok .captcha__status { color: var(--success); font-weight: 600; }
.captcha.is-fehler .captcha__box, .captcha input[aria-invalid="true"] + label { border-color: var(--error); }
.captcha.is-fehler .captcha__box { border-color: var(--error); }
.captcha__hinweis { font-size: .78rem; color: var(--muted); margin: 6px 0 0; }
.captcha__noscript { font-size: .88rem; color: var(--error); margin: 8px 0 0; }
@keyframes captcha-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .captcha.is-pruefend .captcha__status::before { animation-duration: 2.4s; } }

/* Honeypot: für Menschen unsichtbar, für Bots vorhanden */
.hp-feld { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Absenden */
.formular-senden { margin-top: 4px; }
.formular-senden[disabled] { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
.formular-senden.is-sending svg { animation: kontakt-puls 1s ease-in-out infinite; }
@keyframes kontakt-puls { 50% { opacity: .3; } }

/* ---------- Statusbox ---------- */
.formular-status {
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 24px; font-size: .95rem;
  border: 1px solid transparent; display: flex; gap: 12px; align-items: flex-start;
}
.formular-status[hidden] { display: none; }
.formular-status:focus { outline: none; }
.formular-status:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.formular-status svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.formular-status p { margin: 0; }
.formular-status.is-ok { background: #edf7ee; border-color: #b9dcbc; color: #1e5a22; }
.formular-status.is-fehler { background: #fdeeee; border-color: #f0bcbc; color: #8e1c1c; }

/* ---------- Standort-Karte ---------- */
.standort {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  min-height: 420px; display: flex; align-items: flex-end; color: #f3e6f3; isolation: isolate;
}
.standort-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.standort::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(35, 36, 37, .25) 0%, rgba(101, 24, 102, .78) 50%, rgba(35, 36, 37, .94) 100%);
}
.standort-inhalt { padding: clamp(24px, 4vw, 40px); }
.standort .eyebrow { color: #e3b8e4; }
.standort h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .4em; }
.standort-pin {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  backdrop-filter: blur(4px);
}
.standort-pin svg { width: 28px; height: 28px; }
.standort-adresse { font-size: 1.08rem; color: #fff; }
.standort-hinweis { font-size: .8rem; line-height: 1.55; color: #e0cfe0; margin: 16px 0 0; }
@media (max-width: 960px) { .standort { min-height: 360px; } }