/* ============================================================
   Contact.html – nur was system.css nicht abdeckt.
   Laedt nach system.css.
   ============================================================ */

/* ---- Platzhalter mit ausreichendem Kontrast ----
   Browser-Default (~#757575) erreicht auf --paper nur 3,9:1.
   --ink-3 (#6B6B75) auf #F5F5F8 = 4,8:1 und damit ueber 4,5:1. */
.f-field input::placeholder,
.f-field textarea::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

/* ---- Honeypot fuer FormSubmit: fuer Menschen unsichtbar ---- */
.f-honey {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---- Absendebutton ueber die volle Formularbreite ---- */
.f-submit { width: 100%; }

/* ---- Hero-Meta-Werte in Textfarbe statt Muted ---- */
.hero-meta .v { color: var(--ink-2); }

/* ---- Kontaktraster: Karte gehoert auf grossen Schirmen unter die Fakten,
       auf dem Handy hinter das Formular. Deshalb eigene Rasterflaechen. ---- */
@media (min-width: 901px) {
    .contact-grid {
        grid-template-areas: "facts form" "map form";
        grid-template-rows: auto 1fr;
        row-gap: 0;
    }
    .contact-grid .c-side { grid-area: facts; }
    .contact-grid .c-form { grid-area: form; }
    .contact-grid .map-box { grid-area: map; align-self: start; }
}

/* ---- Karte (Zwei-Klick-Loesung), uebernommen aus der alten Seite ---- */
.map-box {
    margin-top: 1.8rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--paper-2);
    overflow: hidden;
}
.map-ph { padding: 1.4rem; text-align: center; }
.map-ph p {
    font-size: var(--fs-0);
    color: var(--ink-2);
    margin: 0 0 .9rem;
    line-height: 1.55;
}
.map-box iframe { display: block; width: 100%; height: 280px; border: 0; }
.map-links {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-0);
}
.map-links a { color: var(--accent); text-decoration: none; font-weight: 600; }
.map-links a:hover { text-decoration: underline; }

/* ---- Buttonpaar im Abschlussband zentrieren ---- */
.cta-ctas { justify-content: center; margin-bottom: 0; }