/*
 * Formulare der Website (Sulu-Formular-Bundle, Theme templates/form/theme.html.twig). Nur Tokens, keine festen Farben.
 * Raster: Sulus Breitenklassen (width-full, width-half, ...) als Flex-Zeile.
 */
.contact-form form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    max-width: 44rem;
}

.contact-form form > div {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 40rem) {
    .contact-form .width-half { flex-basis: calc(50% - var(--space-2)); }
    .contact-form .width-one-third { flex-basis: calc(33.333% - var(--space-3)); }
    .contact-form .width-two-thirds { flex-basis: calc(66.666% - var(--space-2)); }
    .contact-form .width-one-quarter { flex-basis: calc(25% - var(--space-3)); }
    .contact-form .width-three-quarters { flex-basis: calc(75% - var(--space-1)); }
}

.contact-form label {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: 500;
    color: var(--color-text);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
    width: 100%;
    min-height: 44px; /* Tap-Ziel */
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.contact-form textarea {
    min-height: 9rem;
    resize: vertical;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible,
.contact-form button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Fehlermeldungen: Text plus Rahmen, nie nur Farbe */
.contact-form ul {
    list-style: none;
    margin: var(--space-1) 0 0;
    padding: 0;
    color: var(--color-status-error);
    font-weight: 500;
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
    border-color: var(--color-status-error);
    border-width: 2px;
}

.contact-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
    font: inherit;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-light-teal);
    color: var(--color-space-obsidian);
    cursor: pointer;
}

.contact-form button[type="submit"]:hover {
    background: var(--color-light-emerald);
}

.form-success {
    max-width: 44rem;
    padding: var(--space-4);
    border: 2px solid var(--color-status-success);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.contact-intro {
    max-width: 44rem;
    margin-bottom: var(--space-6);
}

.contact-note {
    max-width: 44rem;
    margin-top: var(--space-4);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

/* Einwilligung (Kontrollkästchen): Kästchen und Text nebeneinander, Kästchen mit gut treffbarer Größe */
.contact-form .choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.contact-form .choice input[type="checkbox"] {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0.125rem 0 0;
    accent-color: var(--color-interactive);
}

.contact-form .choice label {
    margin-bottom: 0;
    font-weight: 400;
}