/* ==========================================================================
   ARI/WE/SO — kontakt.css
   ========================================================================== */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
    align-items: start;
}

@media (min-width: 992px) {
    .contact-layout { grid-template-columns: 0.85fr 1.15fr; gap: 56px; }
    /* Die Übersicht bleibt beim Ausfüllen des langen Formulars sichtbar */
    .contact-aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* --- Linke Spalte -------------------------------------------------------- */

.contact-aside h2 { font-size: 1.4rem; margin-bottom: 1.5rem; }
.contact-aside h3 { font-size: 1.05rem; margin-bottom: 0.75rem; }

.contact-steps { display: flex; flex-direction: column; gap: 20px; }

.contact-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgb(var(--rgb-blue) / 0.08);
    border: 1px solid rgb(var(--rgb-blue) / 0.3);
    color: var(--neon-blue);
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.contact-steps strong { display: block; color: var(--text-strong); }

.contact-direct {
    padding: 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-subtle);
    border-radius: var(--border-radius);
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    word-break: break-word;
}
.contact-link svg { width: 19px; height: 19px; flex-shrink: 0; }

/* --- Formular ------------------------------------------------------------ */

.contact-form-wrap {
    padding: clamp(24px, 4vw, 40px);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line-subtle);
    border-radius: var(--border-radius);
}

#contact-form { position: relative; }