/* ============================================================
   BLOCK: Kontakt (Formular + Kontaktdaten) — colocated CSS
   Datei: page-builder/components/organisms/contact/block.css
   Geladen von WP automatisch via block.json ("style": "file:./block.css")
   ============================================================ */

/* DESIGN TOKENS (self-contained, gegen Cache-Inlining-Reihenfolge) */
@import "../../../assets/tokens.css" layer(sdc-tokens);

.as-contact {
    padding: var(--as-space-section) 0;
    background: var(--as-color-neutral, var(--as-color-light));
    color: var(--as-color-text);
}

.as-contact__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Standard: 50/50 nah */
    gap: clamp(1.875rem, 1.2159rem + 2.0625vw, 3.75rem);
    align-items: start;
}

/* Layout-Varianten (Desktop): */
.as-contact__grid--split  { grid-template-columns: 1.2fr 0.8fr; } /* 50/50 (leicht zugunsten Formular) */
.as-contact__grid--wide   { grid-template-columns: 0.7fr 1.3fr; } /* 30/70: Formular schmal, Kontaktdaten breit */
.as-contact__grid--narrow { grid-template-columns: 1.3fr 0.7fr; } /* 70/30: Formular breit, Kontaktdaten schmal */

.as-contact__col--form .as-contact__form {
    background: var(--as-color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1.8rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.as-contact__form--empty {
    color: var(--as-color-muted, #666);
    font-family: var(--as-font-sans);
    font-size: 0.95rem;
}

.as-contact__col--details {
    font-family: var(--as-font-sans);
}

.as-contact__person-image {
    margin: 0 0 1rem;
}

.as-contact__person-image img {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.as-contact__person {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--as-color-navy);
    margin: 0 0 0.6rem;
}

.as-contact__detail {
    margin: 0 0 0.5rem;
}

.as-contact__link {
    color: var(--as-color-navy);
    text-decoration: none;
    font-weight: 600;
}

.as-contact__link:hover {
    color: var(--as-color-accent);
    text-decoration: underline;
}

.as-contact__address {
    margin: 0.8rem 0 0;
    color: var(--as-color-muted, #666);
    line-height: 1.6;
    white-space: pre-line;
}

/* Nur-Formular-Modus (Lead-Magnet/Newsletter-Stil): einspaltig, kompakt, zentriert */
.as-contact--only-form .as-contact__form--standalone {
    max-width: 720px;
    margin: 0 auto;
    background: var(--as-color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1.8rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.as-contact--only-form .as-contact__form--standalone .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.as-contact--only-form .as-contact__form--standalone .wpcf7-form input[type="email"],
.as-contact--only-form .as-contact__form--standalone .wpcf7-form input[type="text"],
.as-contact--only-form .as-contact__form--standalone .wpcf7-form input[type="tel"] {
    width: 100%;
    margin-bottom: 0;
}

/* DSGVO-Hinweis (beide Modi) */
.as-contact__dsgvo {
    margin-top: 1rem;
    font-family: var(--as-font-sans);
    font-size: 0.8rem;
    color: var(--as-color-muted, #666);
    line-height: 1.5;
    text-align: center;
}

/* CF7-Formular (heller Hintergrund — Labels/Text dunkel) */
.as-contact__form .wpcf7-form label {
    display: block;
    font-family: var(--as-font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--as-color-navy);
    margin: 0 0 0.3rem;
}

.as-contact__form .wpcf7-form input[type="text"],
.as-contact__form .wpcf7-form input[type="email"],
.as-contact__form .wpcf7-form input[type="tel"],
.as-contact__form .wpcf7-form input[type="url"],
.as-contact__form .wpcf7-form textarea,
.as-contact__form .wpcf7-form select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: var(--as-color-white);
    color: var(--as-color-text);
    font-family: var(--as-font-sans);
    font-size: 1rem;
}

.as-contact__form .wpcf7-form input:focus,
.as-contact__form .wpcf7-form textarea:focus,
.as-contact__form .wpcf7-form select:focus {
    outline: 2px solid var(--as-color-accent);
    outline-offset: 1px;
}

.as-contact__form .wpcf7-form input[type="submit"] {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    border: none;
    border-radius: 4px;
    background: var(--as-color-accent-brand, var(--as-color-accent));
    color: var(--as-color-white);
    font-family: var(--as-font-sans);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.as-contact__form .wpcf7-form input[type="submit"]:hover {
    background: var(--as-color-navy);
}

.as-contact__form .wpcf7-response-output {
    font-family: var(--as-font-sans);
    font-size: 0.9rem;
    color: var(--as-color-navy);
}

.as-contact__form .wpcf7-not-valid-tip {
    font-family: var(--as-font-sans);
    font-size: 0.85rem;
}

/* Checkbox (z. B. Rückruf-Wunsch, DSGVO) — hell */
.as-contact__form .wpcf7-form input[type="checkbox"] {
    margin-right: 0.4rem;
}

.as-contact__form .wpcf7-form .wpcf7-list-item {
    margin: 0 0 0.9rem;
    display: block;
}

.as-contact__form .wpcf7-form .wpcf7-list-item-label {
    font-family: var(--as-font-sans);
    font-size: 0.9rem;
    color: var(--as-color-text);
}

@media (max-width: 991.98px) {
    .as-contact__grid,
    .as-contact__grid--split,
    .as-contact__grid--wide,
    .as-contact__grid--narrow {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}