.widget-custom-form {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--wl-section-spacing, 4rem) 1.5rem;
}

/* Die eigentliche Formular-Karte bekommt einen dezenten Farbverlaufs-Rahmen
   (per Gradient-Border-Trick: Karte selbst transparent, ein Pseudo-Element
   dahinter traegt den Verlauf) statt einer schlichten weissen Flaeche --
   macht das Formular optisch "wertiger", ohne dass Text/Felder selbst
   farbig werden muessten. */
.custom-form__form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    border-radius: calc(var(--wl-radius, 1rem) + 0.5rem);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 24px 48px rgba(27, 29, 45, 0.08);
}

.custom-form__form::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(120deg, var(--color-primary, #76e7d2), color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff), var(--color-primary, #76e7d2));
    background-size: 200% auto;
    animation: custom-form-border-pan 8s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@keyframes custom-form-border-pan {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .custom-form__form::before { animation: none; }
}

.custom-form__head {
    text-align: center;
    margin-bottom: 2rem;
}

.custom-form__eyebrow {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    opacity: 0.45;
    margin-bottom: 0.9rem;
}

.widget-custom-form__title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
}

.custom-form__subtitle {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.6;
}

.custom-form__form input[type="text"],
.custom-form__form input[type="email"],
.custom-form__form input[type="tel"],
.custom-form__form select,
.custom-form__form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(27, 29, 45, 0.15);
    border-radius: var(--wl-radius, 1rem);
    font: inherit;
    background: #fff;
    color: inherit;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.custom-form__form input:focus,
.custom-form__form select:focus,
.custom-form__form textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #a77df5) 18%, transparent);
}

/* Nativer "Datei auswaehlen"-Knopf: ohne eigene Regel benutzt der Browser
   sein Standard-Erscheinungsbild (graues Systemfeld) statt dem Rahmen/der
   Rundung der uebrigen Felder -- fiel bisher als einziges "verzerrtes"
   Element zwischen den sonst einheitlichen Feldern auf. */
.custom-form__form input[type="file"] {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid rgba(27, 29, 45, 0.15);
    border-radius: var(--wl-radius, 1rem);
    font: inherit;
    font-size: 0.88rem;
    background: #fff;
    color: inherit;
}

.custom-form__form input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: calc(var(--wl-radius, 1rem) - 0.3rem);
    background: var(--color-primary, #76e7d2);
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.custom-form__checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.custom-form__checkbox input { width: auto; }

/*
 * Die Frage ueber den Antwortmoeglichkeiten ("Polizei hat den Unfall
 * aufgenommen").
 *
 * Das ">" ist hier entscheidend und war der Fehler: ohne es traf der
 * Selektor JEDES <label>, das erstes Kind seines Elternteils ist --
 * also auch die ERSTE Antwort ("Nein"), die erstes Kind von
 * .custom-form__radio-options ist. Diese Antwort wurde dadurch auf
 * "display: block" gezwungen, waehrend die zweite ("Ja") als Flex-
 * Element blieb: rund 8 Pixel Hoehenunterschied zwischen zwei Knoepfen,
 * die gleich aussehen muessen. Genau das war die mehrfach gemeldete
 * "verschieden gross"-Beanstandung -- und weil ich nur die BREITE
 * gemessen hatte, habe ich es lange nicht gefunden.
 *
 * Mit ">" trifft die Regel nur noch die Frage selbst, also genau das,
 * wofuer sie gedacht war.
 */
.custom-form__radio-group > label:first-child {
    display: block;
    margin-bottom: 0.5rem;
}

.custom-form__radio-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.custom-form__radio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    /* Feste Mindestbreite statt reiner Textbreite: "Ja" und "Nein" sind
       unterschiedlich lang und ergaben als zwei Pillen nebeneinander sonst
       zwei sichtbar verschieden grosse Knoepfe fuer dieselbe Fragenart. */
    min-width: 5.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(27, 29, 45, 0.15);
    border-radius: 999px;
    font-size: 0.88rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.custom-form__radio:has(input:checked) {
    border-color: color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff);
    background: color-mix(in srgb, var(--color-primary, #a77df5) 10%, transparent);
}

.custom-form__radio input { width: auto; }

.custom-form__submit {
    align-self: flex-start;
    padding: 0.9rem 2.3rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    border: none;
    cursor: pointer;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--color-primary, #76e7d2) 28%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-form__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--color-primary, #76e7d2) 40%, transparent);
}

.custom-form__success {
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--wl-radius, 1rem);
    background: color-mix(in srgb, var(--color-primary, #76e7d2) 15%, transparent);
    font-weight: 600;
}

.custom-form__error {
    padding: 0.85rem 1rem;
    border-radius: var(--wl-radius, 1rem);
    background: rgba(220, 60, 60, 0.1);
    color: #b0362f;
    font-size: 0.9rem;
    margin: 0;
}

.custom-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Der Standardrahmen des Browsers wird oben durch eine eigene Gestaltung
   ersetzt. Fuer die Tastaturbedienung reicht eine geaenderte Rahmenfarbe
   aber nicht: sie ist schwach und faellt bei Farbsehschwaeche ganz weg.
   Deshalb bekommt der Tastaturfokus zusaetzlich einen deutlichen Ring.
   :focus-visible trifft nur ihn -- ein Mausklick loest ihn nicht aus. */
.custom-form__form input:focus-visible,
.custom-form__form select:focus-visible,
.custom-form__form textarea:focus-visible {
    outline: 3px solid var(--color-primary, #a77df5);
    outline-offset: 1px;
}

/*
 * Geschlossenes Formular.
 *
 * Kein Rot: „die Anmeldung ist vorbei" ist keine Fehlermeldung, sondern
 * eine Auskunft. Rot waere hier eine Anschuldigung an jemanden, der nichts
 * falsch gemacht hat -- er war nur zu spaet.
 */
.custom-form__closed {
    text-align: center;
    padding: 1.5rem;
    background: rgba(128, 128, 128, 0.1);
    color: inherit;
    font-weight: 600;
}

/*
 * Hinweis auf knappe Plaetze oder eine Frist. Steht ueber dem Formular
 * und faellt bewusst leicht auf -- er entscheidet, ob jemand ueberhaupt
 * anfaengt auszufuellen.
 */
.custom-form__note {
    padding: 0.6rem 0.9rem;
    border-radius: var(--wl-radius, 1rem);
    background: rgba(200, 150, 0, 0.12);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

/*
 * Newsletter-Haken und Bestätigung.
 *
 * Beide sind Ankreuzfelder wie jedes andere -- sie erben deshalb
 * .custom-form__checkbox und brauchen hier nur das, was sie unterscheidet.
 *
 * Die Bestätigung bekommt etwas Luft und eine feine Linie darüber: sie
 * gehört rechtlich nicht zu den Angaben, sondern zum Absenden. Wer sie
 * mitten zwischen den Feldern übersieht, hakt sie gedankenlos ab -- und
 * genau das soll eine Bestätigung nicht sein.
 */
.custom-form__newsletter,
.custom-form__confirm {
    align-items: flex-start;
    line-height: 1.45;
}

.custom-form__confirm {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid currentColor;
    /* Nur eine Andeutung -- currentColor in voller Stärke wäre ein Balken. */
    border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}

.custom-form__confirm-link {
    text-decoration: underline;
    /* Der Link sitzt im Fliesstext des Labels: ein Klick darauf soll das
       Dokument öffnen und NICHT den Haken umschalten. */
    position: relative;
    z-index: 1;
}