/* ==========================================================
   Content Block: Teilnahme mit Formular
========================================================== */

.participation-section {
    width: 100%;
    padding: 4.5rem 0;
    color: #292929;
    background: #fff;
}

.participation-section--light {
    color: #292929;
    background: #f6f6f6;
}

.participation-section--dark {
    color: #fff;
    background: #292929;
}

/* ==========================================================
   Zweispaltiges Raster
========================================================== */

.participation-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(25rem, 1.1fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* ==========================================================
   Linke Spalte
========================================================== */

.participation-section__content {
    max-width: 34rem;
    padding-top: 0.75rem;
}

.participation-section__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--color-primary, #c12030);
    font-family: var(--font-monospace, monospace);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14rem;
    line-height: 1.4;
    text-transform: uppercase;
}

.participation-section--dark .participation-section__eyebrow {
    color: #f05b69;
}

.participation-section__title {
    max-width: 18ch;
    margin: 0;
    color: #292929;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03125rem;
    line-height: 1.16;
    text-wrap: balance;
}

.participation-section--dark .participation-section__title {
    color: #fff;
}

.participation-section__body {
    margin-top: 1.125rem;
    color: #4f4f4f;
    font-size: 1.03125rem;
    line-height: 1.65;
}

.participation-section--dark .participation-section__body {
    color: #e2e2e2;
}

.participation-section__body > :first-child {
    margin-top: 0;
}

.participation-section__body > :last-child {
    margin-bottom: 0;
}

/* ==========================================================
   Vorteile
========================================================== */

.participation-benefits {
    display: grid;
    gap: 0.75rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.participation-benefits__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.875rem;
    color: #292929;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.45;
}

.participation-section--dark .participation-benefits__item {
    color: #fff;
}

.participation-benefits__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #fff;
    background: var(--color-primary, #c12030);
    border-radius: 50%;
}

.participation-benefits__icon svg {
    width: 1rem;
    height: 1rem;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.participation-benefits__text {
    min-width: 0;
}

/* ==========================================================
   Formularkarte
========================================================== */

.participation-form-card {
    padding: clamp(1.5rem, 3vw, 2.125rem);
    color: #292929;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 1rem;
    box-shadow: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.09);
}

.participation-form-card__title {
    margin: 0;
    color: #292929;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.02rem;
    line-height: 1.22;
    text-wrap: balance;
}

.participation-form-card__intro {
    margin: 0.625rem 0 0;
    color: #5a5a5a;
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* ==========================================================
   Formular
========================================================== */

.participation-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.participation-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
}

.participation-form__field {
    display: grid;
    gap: 0.375rem;
}

.participation-form__field label {
    color: #333;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
}

.participation-form__field label span {
    color: var(--color-primary, #c12030);
}

.participation-form__field input,
.participation-form__field select,
.participation-form__field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.875rem;
    color: #292929;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 0.4375rem;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition:
            border-color 150ms ease,
            box-shadow 150ms ease;
}

.participation-form__field textarea {
    min-height: 7rem;
    resize: vertical;
}

.participation-form__field input::placeholder,
.participation-form__field textarea::placeholder {
    color: #929292;
}

.participation-form__field input:hover,
.participation-form__field select:hover,
.participation-form__field textarea:hover {
    border-color: #a8a8a8;
}

.participation-form__field input:focus,
.participation-form__field select:focus,
.participation-form__field textarea:focus {
    border-color: var(--color-primary, #c12030);
    box-shadow: 0 0 0 0.1875rem rgba(193, 32, 48, 0.14);
    outline: none;
}

/* ==========================================================
   Checkbox und Datenschutz
========================================================== */

.participation-form__checkbox {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    margin-top: 0.125rem;
}

.participation-form__checkbox input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1875rem 0 0;
    accent-color: var(--color-primary, #c12030);
}

.participation-form__checkbox label {
    color: #5a5a5a;
    font-size: 0.75rem;
    line-height: 1.5;
}

.participation-form__checkbox a {
    color: var(--color-primary, #c12030);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.participation-form__required-note {
    margin: -0.125rem 0 0;
    color: #777;
    font-size: 0.6875rem;
    line-height: 1.45;
}

.participation-form__required-note span {
    color: var(--color-primary, #c12030);
}

/* ==========================================================
   Button
========================================================== */

.participation-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.125rem;
    padding: 0.75rem 1.25rem;
    color: #fff;
    background: var(--color-primary, #c12030);
    border: 2px solid var(--color-primary, #c12030);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 750;
    line-height: 1.3;
    transition:
            background-color 150ms ease,
            border-color 150ms ease,
            box-shadow 150ms ease,
            transform 150ms ease;
}

.participation-form__submit:hover {
    background: #a91929;
    border-color: #a91929;
    box-shadow: 0 0.5rem 1.25rem rgba(193, 32, 48, 0.2);
    transform: translateY(-1px);
}

.participation-form__submit:focus-visible {
    color: var(--color-primary, #c12030);
    background: #fff;
    border-color: var(--color-primary, #c12030);
    box-shadow:
            0 0 0 0.2rem #fff,
            0 0 0 0.35rem rgba(193, 32, 48, 0.4);
    outline: none;
}

.participation-form__demo-note {
    margin: -0.125rem 0 0;
    color: #858585;
    font-size: 0.6875rem;
    line-height: 1.45;
    text-align: center;
}

/* ==========================================================
   Sprungziel
========================================================== */

#teilnahme {
    scroll-margin-top: 7rem;
}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width: 64rem) {
    .participation-section__grid {
        grid-template-columns: 1fr;
        gap: 2.75rem;
    }

    .participation-section__content {
        max-width: 48rem;
        padding-top: 0;
    }

    .participation-form-card {
        max-width: 48rem;
    }
}

/* ==========================================================
   Mobil
========================================================== */

@media (max-width: 48rem) {
    .participation-section {
        padding: 3.5rem 0;
    }

    .participation-section__grid {
        gap: 2rem;
    }

    .participation-section__content,
    .participation-section__title {
        max-width: none;
    }

    .participation-form-card {
        padding: 1.375rem;
        border-radius: 0.75rem;
    }

    .participation-form__row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .participation-form__submit {
        min-height: 3rem;
    }
}

.participation-form-card__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--color-primary, #c12030);
    font-family: var(--font-monospace, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14rem;
    line-height: 1.4;
    text-transform: uppercase;
}

.registration-form__error {
    display: block;
    color: var(--color-primary, #c12030);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}