.contact {
    position: relative;
    z-index: 0;
    overflow: hidden;
    /* Small negative top margin: pulls the section up into
       .guestbook's masked-out bottom edge so the two photos blend
       into each other directly instead of meeting across a gap. */
    margin: -120px 0 80px;
    padding: 140px 20px;
    --parallax-amplitude: 60px;

    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (min-width: 601px) {
    .contact {
        /* .guestbook's fade zone is 45% of its own height, which grows
           with viewport width up to 680px (306px fade zone) before
           capping out around ~1172px wide. The overlap here must
           cover that worst case even below the 1200px breakpoint,
           not just the smaller fade zone at 601px itself - otherwise
           the two photos meet across a visible gap on wider tablets. */
        margin-top: -330px;
        padding-top: 220px;
        padding-bottom: 220px;
        --parallax-amplitude: 140px;
    }

    .contact-title {
        transform: translateY(-150px);
    }
}

@media (min-width: 1200px) {
    .contact {
        max-width: 1200px;
        margin-top: -330px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 280px;
        padding-bottom: 280px;
        --parallax-amplitude: 160px;
    }
}

.contact-bg {
    position: absolute;
    top: calc(-1 * (var(--parallax-amplitude) + 40px));
    left: 0;
    right: 0;
    height: calc(100% + (var(--parallax-amplitude) + 40px) * 2);
    z-index: 0;
    background: url('/assets/background-images/titelbild_01-tablet.jpg') center/cover no-repeat;
    will-change: transform;
}

@media (max-width: 600px) {
    .contact-bg {
        background-image: url('/assets/background-images/titelbild_01-mobile.jpg');
    }
}

@media (min-width: 1200px) {
    .contact-bg {
        background-image: url('/assets/background-images/titelbild_01.jpg');
    }
}

.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.05);
}

.contact::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Only the bottom edge fades to black (into the footer). The top
       edge no longer does - .guestbook's photo fades out into this
       section's own photo instead, so a second dark vignette here
       would just add an unwanted black band on top of that blend. */
    background-image:
        linear-gradient(to top,
            var(--color-bg) 0%,
            color-mix(in srgb, var(--color-bg) 70%, transparent) 35%,
            color-mix(in srgb, var(--color-bg) 30%, transparent) 70%,
            transparent 100%);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 200px;
    pointer-events: none;
}

@media (min-width: 1200px) {
    .contact::after {
        background-size: 100% 260px;
    }
}

.contact > :not(.contact-bg) {
    position: relative;
    z-index: 3;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.contact-title {
    /* Plain heading, styled like the other section titles
       (.references-title) instead of the pill-button look. */
    font-size: clamp(2rem, 1.8rem + 1vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-accent);
    -webkit-text-stroke: 3px #000;
    paint-order: stroke fill;
    /* Pushes the content area down within the section (.contact-bg
       grows to match via its height:calc(100% + ...) formula, so the
       photo simply extends further instead of being affected).
       Large enough on mobile to also clear .guestbook's higher
       z-index fade zone in the overlap area - otherwise the title
       reads lighter there than on tablet/desktop. */
    margin: clamp(140px, 20vw, 200px) auto 32px;
    /* Moves the title higher within that reserved space without
       touching the margin above (which would shrink .contact-bg's
       height along with it). */
    transform: translateY(-60px);
}

.contact-success {
    padding: 12px 16px;
    margin-bottom: 24px;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    color: var(--color-text);
    text-align: center;
}

.contact-error {
    padding: 12px 16px;
    margin-bottom: 24px;
    border: 1px solid #c0392b;
    border-radius: 4px;
    color: #e57368;
    text-align: center;
}

.contact-hint {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: right;
    margin-bottom: 12px;
}

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

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-field {
    flex: 1;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.required-marker {
    color: var(--color-accent);
}

@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        gap: 20px;
    }
}

.form-field label {
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.form-field input,
.form-field textarea {
    font-family: inherit;
    font-size: 1.1rem;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 4px;
    color: #fff;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
    border-color: #c0392b;
}

.form-field textarea {
    resize: vertical;
}

.field-error {
    font-size: 1rem;
    color: #e57368;
}

.form-field--honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-submit {
    align-self: center;
    margin-top: 20px;
    padding: 12px 32px;
    font-size: 1rem;
    font-family: inherit;
    text-transform: lowercase;
    border: 2px solid var(--color-accent);
    background: rgba(0, 0, 0, 0.72);
    color: var(--color-accent);
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.contact-submit:hover {
    background: var(--color-accent);
    color: #fff;
}

:root[data-theme="light"] .form-field input,
:root[data-theme="light"] .form-field textarea {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(34, 34, 34, 0.32);
    color: var(--color-text);
}

:root[data-theme="light"] .contact-submit {
    background: rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .contact-submit:hover {
    background: var(--color-accent);
    color: #fff;
}

@media (max-width: 600px) {
    .contact {
        /* Keep the negative top margin (matches .guestbook's fixed
           360px min-height + its 45%-tall fade zone on this range) so
           the overlap/cross-fade with .guestbook still works - this
           used to reset margin-top to 0, wiping the overlap out and
           leaving a black gap below 600px. */
        margin: -180px 0 60px;
        padding: 60px 20px 30px;
    }
}