/* ==========================================================================
   Webform – Generisches Design (BaBeL)
   Gilt für alle .webform-submission-form ausser Newsletter-Anmeldung und Beobachtungs-Infobar.
   Spezifischere Selektoren (Infobar, Kontakt-Layout) überschreiben bei Bedarf.
   CSS-Variablen erben von der jeweiligen Seite (z. B. --detail-color).
   ========================================================================== */

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) {
    --wf-color: var(--detail-color, var(--babel-red));
    --wf-bg-inverse: var(--detail-bg, var(--babel-yellow));
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-item {
    margin-bottom: 1rem;
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) label,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-item__label {
    font-family: var(--babel-font-heading, 'League Spartan', sans-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--wf-color);
    display: block;
    margin-bottom: 0.375rem;
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="text"],
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="email"],
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="tel"],
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="url"],
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="number"],
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) textarea,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) select {
    background-color: transparent;
    font-family: var(--babel-font-body, 'Bitter', serif);
    border: 1.3px solid var(--wf-color);
    border-radius: 16px;
    color: var(--wf-color);
    font-size: 1.2rem;
    padding: 0.75rem 1rem;
    width: 100%;
    box-sizing: border-box;
    appearance: none;
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="text"]:focus,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="email"]:focus,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="tel"]:focus,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="url"]:focus,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input[type="number"]:focus,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) textarea:focus,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) select:focus {
    outline: 2px solid var(--wf-color);
    outline-offset: 2px;
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) textarea {
    min-height: 8rem;
    resize: vertical;
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) input::placeholder,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) textarea::placeholder {
    color: var(--wf-color);
    opacity: 0.6;
    font-size: 1.2rem;
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-item__description {
    font-family: var(--babel-font-body, 'Bitter', serif);
    font-size: 0.875rem;
    color: var(--wf-color);
    opacity: 0.8;
    margin-top: 0.25rem;
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-item--error input,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-item--error textarea,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-item--error select {
    border-color: var(--wf-color);
    outline: 2px solid var(--wf-color);
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-item__error-message {
    font-family: var(--babel-font-body, 'Bitter', serif);
    font-size: 0.875rem;
    color: var(--wf-color);
    margin-top: 0.25rem;
}

/* Submit-Button
   -------------------------------------------------------------------------- */
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-actions .button,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-actions button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--babel-font-heading, 'League Spartan', sans-serif);
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--wf-color);
    background: none;
    border: 1.4px solid var(--wf-color);
    border-radius: 12px;
    padding: 0 1rem;
    height: 49px;
    width: 180px;
    cursor: pointer;
    margin-left: auto;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-actions .button:hover,
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-actions button[type="submit"]:hover {
    background-color: var(--wf-color);
    color: var(--wf-bg-inverse);
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-actions button[type="submit"] .btn-icon {
    display: block;
    flex-shrink: 0;
}

/* CAPTCHA
   -------------------------------------------------------------------------- */
.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .captcha__title {
    font-family: var(--babel-font-heading, 'League Spartan', sans-serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--wf-color);
}

.webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .captcha__description {
    font-family: var(--babel-font-body, 'Bitter', serif);
    font-size: 0.9375rem;
    color: var(--wf-color);
    margin-top: 0.25rem;
}

/* Formular-Container in News-Detail
   -------------------------------------------------------------------------- */
.news-detail__formular {
    margin-top: 2.5rem;
    padding-top: 2rem;
}

.news-detail__formular-title {
    font-family: var(--babel-font-heading, 'League Spartan', sans-serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--detail-color, var(--babel-red));
    margin: 0 0 1.5rem;
}

/* Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    .webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-actions .button,
    .webform-submission-form:not(.webform-submission-newsletter-anmeldung-add-form):not(.webform-submission-beobachtung-add-form) .form-actions button[type="submit"] {
        width: 100%;
        margin-left: 0;
    }
}