/* Kontaktformular (/de/kontakt, /en/contact) – Optik wie die Rechtstexte (legal.css) */

.contact-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 80px 20px 100px;
    color: #111;
    box-sizing: border-box;
}
.contact-page *, .contact-page *::before, .contact-page *::after { box-sizing: border-box; }

/* Kopfbereich */
.contact-hero { margin-bottom: 40px; max-width: 760px; }
.contact-eyebrow {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary, #3A9D61);
}
.contact-hero h1 {
    margin: 0 0 12px;
    font-family: Chivo, Inter, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
}
.contact-lead { margin: 0; font-size: 18px; line-height: 1.5; color: #555; }

/* Infos links, Formular rechts */
.contact-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.contact-info > div {
    padding: 18px 20px;
    border: 1.5px solid rgba(0, 0, 0, .15);
    border-radius: 20px;
    background: #fff;
}
.contact-info h2 {
    margin: 0 0 6px;
    font-family: Chivo, Inter, sans-serif;
    font-size: 17px;
    font-weight: 700;
}
.contact-info p { margin: 0; font-size: 15px; line-height: 1.5; color: #444; }
.contact-page a { color: var(--primary, #3A9D61); text-decoration: underline; text-underline-offset: 2px; }

.contact-card {
    padding: 32px 34px;
    border: 1.5px solid rgba(0, 0, 0, .15);
    border-radius: 20px;
    background: #fff;
}

/* Formular */
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.contact-field > span { font-weight: 600; }
.contact-field em { font-style: normal; font-weight: 400; color: #777; }
.contact-field small { font-size: 13px; color: #777; }
.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid rgba(0, 0, 0, .15);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    color: #111;
}
.contact-field textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { outline: 2px solid var(--primary, #3A9D61); outline-offset: 0; border-color: transparent; }

/* Spam-Falle: außerhalb des sichtbaren Bereichs (kein display:none, sonst füllen Bots sie nicht aus) */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-privacy { margin: 0; font-size: 14px; line-height: 1.5; color: #666; }

.contact-errors {
    padding: 12px 16px;
    border-radius: 12px;
    background: #fdecec;
    color: #a11;
    font-size: 15px;
}
.contact-errors ul { margin: 0; padding-left: 18px; }

.contact-btn {
    align-self: flex-start;
    display: inline-block;
    padding: 13px 26px;
    border: 0;
    border-radius: 10px;
    background: var(--primary, #3A9D61);
    color: #fff !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
}
.contact-btn:hover { filter: brightness(.95); }
.contact-btn--secondary {
    background: #fff;
    color: var(--primary, #3A9D61) !important;
    border: 1.5px solid var(--primary, #3A9D61);
}

.contact-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact-sent h2 { margin: 0; font-family: Chivo, Inter, sans-serif; font-size: 24px; font-weight: 700; }
.contact-sent p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: #444; }

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .contact-info { order: 2; }
}

/* Handy: Größen in vw */
@media (max-width: 700px) {
    .contact-page { padding: 12vw 4vw 16vw; }
    .contact-hero { margin-bottom: 7vw; }
    .contact-eyebrow { margin-bottom: 2vw; font-size: 3.4vw; }
    .contact-hero h1 { margin-bottom: 3vw; font-size: 8vw; }
    .contact-lead { font-size: 4.2vw; }
    .contact-layout { gap: 6vw; }
    .contact-info { gap: 3vw; }
    .contact-info > div { padding: 4vw 5vw; border-radius: 5vw; }
    .contact-info h2 { margin-bottom: 1.5vw; font-size: 4.2vw; }
    .contact-info p { font-size: 3.8vw; }
    .contact-card { padding: 6vw 5vw; border-radius: 5vw; }
    .contact-form { gap: 4.5vw; }
    .contact-row { grid-template-columns: minmax(0, 1fr); gap: 4.5vw; }
    .contact-field { gap: 1.5vw; font-size: 3.8vw; }
    .contact-field small { font-size: 3.2vw; }
    .contact-field input,
    .contact-field select,
    .contact-field textarea { padding: 3vw 3.5vw; border-radius: 3vw; font-size: 4vw; }
    .contact-field textarea { min-height: 40vw; }
    .contact-privacy { font-size: 3.4vw; }
    .contact-errors { padding: 3vw 4vw; border-radius: 3vw; font-size: 3.8vw; }
    .contact-btn { align-self: stretch; padding: 3.5vw 6vw; border-radius: 2.5vw; font-size: 4.2vw; text-align: center; }
    .contact-sent { gap: 3vw; }
    .contact-sent h2 { font-size: 6vw; }
    .contact-sent p { font-size: 4vw; }
}