/* =============================================================================
   joyfoto.de — kontakt.css
   Kontaktseite + Formular. Wird NACH basis.css geladen.
   ========================================================================== */

.contact { padding-top: clamp(120px, 16vw, 150px); padding-bottom: clamp(60px, 9vw, 110px); }
.contact .head { max-width: 720px; margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.contact__grid { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: clamp(28px, 5vw, 56px); align-items: start; }

/* Direkte Wege */
.contact__subhead { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin-bottom: 1.4rem; }
.contact__row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.contact__row:last-of-type { border-bottom: 0; }
.contact__ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.contact__ico svg { width: 22px; height: 22px; fill: #fff; }
.contact__muted { color: var(--taupe); font-size: .9rem; }
.contact__note { margin-top: 1.6rem; font-size: .85rem; color: var(--taupe); line-height: 1.7; }

/* Formular */
.contact__form { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: clamp(24px, 4vw, 40px); }
.form-row { margin-bottom: 1.1rem; display: flex; flex-direction: column; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.contact label, .contact legend { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--espresso); margin-bottom: .4rem; }
.contact input[type=text], .contact input[type=email], .contact input[type=tel],
.contact input[type=date], .contact textarea {
    font-family: var(--sans); font-size: 1rem; color: var(--ink);
    background: var(--cream); border: 1px solid var(--line); border-radius: 2px;
    padding: 12px 14px; width: 100%; transition: border-color .2s, background .2s;
}
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--gold); background: #fff; }
.contact textarea { resize: vertical; min-height: 120px; }

.form-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.check { display: flex; align-items: flex-start; gap: 9px; font-weight: 400; color: var(--espresso); margin: 0; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--gold); }
.check--consent { margin: .4rem 0 1.6rem; font-size: .85rem; line-height: 1.5; }
.check--consent a { color: var(--gold); }

.contact fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }

.contact .btn { width: 100%; }

/* Honeypot unsichtbar */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Meldungen */
.alert { border-radius: 3px; padding: 16px 18px; margin-bottom: 1.2rem; font-size: .95rem; line-height: 1.6; }
.alert--ok  { background: #E7F6EC; border: 1px solid #9BD8B0; color: #1E6B3A; }
.alert--err { background: #FBEBEA; border: 1px solid #E4A9A4; color: #8A2B22; }
.alert--err div { margin: 2px 0; }

@media (max-width: 820px) {
    .contact__grid { grid-template-columns: 1fr; }
    .contact__direct { order: 2; }
}
@media (max-width: 480px) {
    .form-two { grid-template-columns: 1fr; }
}