/* Seelenbalsam — Contact Form widget */

.sb-contact {
    width: 100%;
    padding: clamp(48px, 6vw, 90px) clamp(22px, 4.6vw, 64px);
    background: linear-gradient(135deg, #ffe8d8 0%, #ffd9e4 45%, #f6d0e0 100%);
    color: var(--mx-color-text);
}

/* Homepage only: constrain the contact block to the 1500px grid */
.page-id-5 .sb-contact {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 28px;
}

.sb-contact__inner {
    max-width: 1500px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(255,250,248,0.85) 0%, rgba(255,240,244,0.7) 100%);
    border-radius: 28px;
    padding: clamp(36px, 4.5vw, 80px);
    box-shadow: 0 20px 60px rgba(140, 60, 90, 0.08);
}

.sb-contact__heading {
    font-family: 'Gelica', 'Tiempos Headline', Georgia, serif;
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.05;
    color: var(--mx-color-ink, #45375c);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.sb-contact__intro {
    font-family: var(--mx-font-body);
    font-size: 19px;
    line-height: 1.6;
    color: var(--mx-color-text);
    margin: 0 0 var(--mx-space-3xl);
    max-width: 70ch;
}

.sb-contact__form {
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-lg);
}

.sb-contact__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mx-space-lg);
}

.sb-contact__field {
    display: flex;
    flex-direction: column;
    position: relative;
}

.sb-contact__field--full { grid-column: 1 / -1; }

.sb-contact__field label {
    font-family: var(--mx-font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--mx-color-ink, #45375c);
    margin-bottom: 4px;
}

.sb-contact__field input,
.sb-contact__field textarea {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-bottom: 1px solid rgba(69, 55, 93, 0.22);
    background: transparent;
    padding: 6px 0 10px;
    font-family: var(--mx-font-body);
    font-size: var(--mx-fs-md);
    color: var(--mx-color-ink);
    width: 100%;
    border-radius: 0;
    transition: border-color var(--mx-dur-base) var(--mx-ease-out),
                box-shadow var(--mx-dur-base) var(--mx-ease-out);
    outline: none;
}

.sb-contact__field textarea {
    resize: vertical;
    min-height: 4.5rem;
    line-height: var(--mx-lh-normal);
}

.sb-contact__field input:focus,
.sb-contact__field textarea:focus {
    border-bottom-color: var(--mx-color-brand);
    box-shadow: 0 1px 0 0 var(--mx-color-brand);
}

.sb-contact__field input.is-invalid,
.sb-contact__field textarea.is-invalid {
    border-bottom-color: #c93761;
    box-shadow: 0 1px 0 0 #c93761;
}

.sb-contact__field input.is-valid,
.sb-contact__field textarea.is-valid {
    border-bottom-color: var(--mx-color-brand-deep);
}

.sb-contact__field .invalid-feedback {
    color: #c93761;
    font-size: var(--mx-fs-xs);
    margin-top: var(--mx-space-xs);
    min-height: 1em;
}

/* Honeypot */
.sb-contact__hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sb-contact__actions {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--mx-space-md);
}

.sb-contact__submit {
    appearance: none;
    border: 0;
    cursor: pointer;
    background: linear-gradient(267deg, #F372B3 0.6%, #FF60AF 99.4%);
    color: #fff;
    font-family: var(--mx-font-body);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    padding: 1.05rem 3rem;
    border-radius: 68px;
    transition: background var(--mx-dur-base) var(--mx-ease-out);
}

.sb-contact__submit:hover {
    background: linear-gradient(267deg, #F92D93 0.6%, #FF60AF 99.4%);
    color: #fff;
}

.sb-contact__submit:active { transform: translateY(0); }

.sb-contact__submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Alert (injected by JS) */
.mx-alert {
    display: flex;
    align-items: center;
    gap: var(--mx-space-md);
    padding: var(--mx-space-md) var(--mx-space-lg);
    border-radius: var(--mx-radius-md);
    margin-bottom: var(--mx-space-lg);
    font-family: var(--mx-font-body);
    font-size: var(--mx-fs-sm);
}
.mx-alert--success { background: #e6f5ec; color: #1f6b3a; }
.mx-alert--error   { background: #fbe3ea; color: #8a1a3a; }
.mx-alert__icon  { display: inline-flex; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.mx-alert__icon svg { width: 100%; height: 100%; }
.mx-alert__msg   { flex: 1; }
.mx-alert__close {
    background: none; border: 0; cursor: pointer;
    font-size: 1.25rem; line-height: 1; color: inherit; opacity: 0.7;
}
.mx-alert__close:hover { opacity: 1; }

/* Mobile */
@media (max-width: 768px) {
    .sb-contact { padding: var(--mx-space-3xl) var(--mx-space-lg); }
    .sb-contact__form { gap: var(--mx-space-xl); }
    .sb-contact__row { grid-template-columns: 1fr; gap: var(--mx-space-xl); }
    .sb-contact__actions { justify-content: stretch; }
    .sb-contact__submit { width: 100%; }
}

/* Kontakt page (page 6): tighten gap between info boxes and the form */
.page-id-6 .sb-contact {
    position: relative;
    z-index: 10; padding-top: var(--mx-space-lg); }
.page-id-6 .sb-contact-info-grid { padding-top: var(--mx-space-xl) !important; padding-bottom: var(--mx-space-xl) !important; }
/* Kontakt page only: hide the form intro paragraph */
.page-id-6 .sb-contact__intro { display: none !important; }
/* Kontakt page only: smaller form heading (~50%) */
.page-id-6 .sb-contact__heading { font-size: clamp(22px, 2.2vw, 30px) !important; }

/* Kontakt page: tighter form fields + clear gap below the heading */
.page-id-6 .sb-contact__heading { margin-bottom: clamp(30px, 3.2vw, 48px) !important; }
.page-id-6 .sb-contact__form { gap: var(--mx-space-lg) !important; }
.page-id-6 .sb-contact__field label { margin-bottom: 4px !important; }
.page-id-6 .sb-contact__field input { padding: 4px 0 10px !important; }
/* Kontakt page: uniform vertical rhythm between all fields */
.page-id-6 .sb-contact__row { gap: var(--mx-space-lg) !important; }

/* ── Responsive padding fix ── */
@media (max-width: 1024px) {
    .sb-contact { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (max-width: 768px) {
    .sb-contact { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ── Button overflow fix on mobile ── */
@media (max-width: 768px) {
    .sb-contact__submit {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        white-space: normal !important;
        text-align: center !important;
    }
}