/* Kontaktformular spezifische Styles */
.contact-form-wrapper { position: relative; }
#appointment-fields { transition: opacity .18s ease; }
#appointment-fields[style*='display: none'] { opacity:0; }
.field-error { border-color:#dc2626 !important; background: color-mix(in srgb,#dc2626 6%, var(--surface)); }
.field-error:focus { outline:2px solid #dc2626; }
.error-msg { color:#b91c1c; font-size:.8rem; margin-top:4px; display:block; }
.error-group { grid-column:span 12; }

/* Loading state */
.btn.is-loading {
    opacity: .88;
    cursor: progress;
    position: relative;
}

    /* Spinner (with broad browser fallback) */
    .btn.is-loading .spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin-right: .55rem;
        box-sizing: border-box;
        border: .22rem solid var(--primary, #0d9488);
        /* Fallback: three sides primary, one transparent for rotation illusion */
        border-color: var(--primary, #0d9488) var(--primary, #0d9488) var(--primary, #0d9488) transparent;
        /* If color-mix supported, enhance tone */
        border-left-color: color-mix(in srgb, var(--primary) 65%, transparent);
        border-top-color: var(--primary, #0d9488);
        border-radius: 50%;
        animation: btn-spin .7s linear infinite;
        vertical-align: -2px;
        position: relative;
        z-index: 1;
    }

@keyframes btn-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Pulse overlay kept but moved behind content so spinner stays visible */
.btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--primary) 32%, transparent), transparent 70%);
    animation: btn-pulse 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0; /* ensure spinner (z-index:1) stays visible */
}

@keyframes btn-pulse {
    0%,100% {
        opacity: .33;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(1.045);
    }
}