@import "css/accordion.css";
@import "css/button.css";
@import "css/checkbox.css";
@import "css/header.css";
@import "css/hint.css";
@import "css/input.css";
@import "css/link.css";
@import "css/list.css";
@import "css/radioButton.css";
@import "css/reset.css";
@import "css/select.css";
@import "css/spacing.css";
@import "css/textarea.css";
@import "css/typography.css";

.none {
    display: none;
}

.wrapper {
    max-width: 78rem;
    margin-inline: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--spacing-16);

    @media only screen and (min-width: 37.5rem) {
        /* 600px */
        grid-template-columns: repeat(8, 1fr);
    }

    @media only screen and (min-width: 45rem) {
        /* 720px */
        column-gap: var(--spacing-24);
    }

    @media only screen and (min-width: 52.5rem) {
        /* 840px */
        grid-template-columns: repeat(12, 1fr);
    }

    @media only screen and (min-width: 62.5rem) {
        /* 1000px */
        column-gap: var(--spacing-32);
    }
}

.headline {
    margin-block-start: var(--spacing-32);
    padding-inline: var(--spacing-16);
    grid-column: 1 / -1;

    @media only screen and (min-width: 52.5rem) {
        /* 840px */
        grid-column: 2 / 11;
        padding-inline: 0;
    }

    @media only screen and (min-width: 62.5rem) {
        /* 1000px */
        margin-block-start: var(--spacing-48);
    }

    @media only screen and (min-width: 80rem) {
        margin-block-start: var(--spacing-64);
        grid-column: 1 / 10;
    }
}

.content-container {
    grid-column: 1 / -1;
    padding-inline: var(--spacing-16);
    margin-block-start: var(--spacing-48);

    @media only screen and (min-width: 37.5rem) {
        /* 600px */
        padding-inline: 0;
        grid-column: 2 / 8;
    }

    @media only screen and (min-width: 52.5rem) {
        /* 840px */
        margin-block-start: var(--spacing-64);
        grid-column: 3 / 10;
    }

    @media only screen and (min-width: 62.5rem) {
        /* 1000px */
        margin-block-start: var(--spacing-80);
    }
}

.input-container-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--spacing-16);
}

.abstract {
    grid-column: 1 / -1;
    padding-inline: var(--spacing-16);
    margin-block-start: var(--spacing-16);

    @media only screen and (min-width: 52.5rem) {
        /* 840px */
        padding-inline: 0;
        margin-block-start: var(--spacing-24);
        grid-column: 2 / 11;
    }

    @media only screen and (min-width: 80rem) {
        grid-column: 1 / 10;

    }
}

.sub-headline p {
    margin-block-start: var(--spacing-16);
}

.sub-headline .label-1 {
    margin-block-start: var(--spacing-08);
}

.form-block {
    margin-block-start: var(--spacing-48);

    @media only screen and (min-width: 52.5rem) {
        /* 840px */
        margin-block-start: var(--spacing-64);
    }
}

fieldset {
    margin-block-start: var(--spacing-24);
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24)
}

h3 + p {
    margin-block-start: var(--spacing-16);
}

.state-selection {
    @media only screen and (min-width: 37.5rem) {
        /* 600px */
        column-count: 2;
        column-gap: 2rem;
    }
}

.state-selection.-error + .checkbox-error,
.checkbox-group.-error + .checkbox-error {
    margin-block-start: calc(-1 * var(--spacing-08));
    display: flex;
    align-content: center;
}

.state-selection.-error .checkbox-icon,
.checkbox-group.-error .checkbox-icon,
.radio-button-group.-error .radio-icon {
    box-shadow: 0 0 0 var(--spacing-02) var(--error);
}

.state-selection.-error + .checkbox-error .checkbox-error-message,
.checkbox-group.-error + .checkbox-error .checkbox-error-message,
.radio-button-group.-error + .checkbox-error .checkbox-error-message {
    color: var(--error);
}

.state-selection li {
    break-inside: avoid;
    padding-block-start: var(--spacing-16);
}

.terms-and-conditions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

.personal-information {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24)
}

.submit-container {
    width: 100%;
    display: flex;
    justify-content: end;
    margin-block-start: var(--spacing-80);
    margin-block-end: var(--spacing-112);
}

p.resend-link {
    margin-block-start: var(--spacing-40);

    @media only screen and (min-width: 52.5rem) {
        /* 840px */
        margin-block-start: var(--spacing-48);
    }
}

.download-button {
    margin-block-start: var(--spacing-48);
    margin-block-end: var(--spacing-64);
    display: flex;
    align-content: center;
    @media only screen and (min-width: 52.5rem) {
        /* 840px */
        margin-block-end: var(--spacing-112);
    }
}

.download-icon {
    display: inline-block;
    mask-image: url('./icons/download.svg');
    -webkit-mask-image: url('./icons/download.svg');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--tiefgruen);
    margin-inline-end: var(--spacing-08);
    width: var(--spacing-16);
    height: var(--spacing-16);
}

.error-icon {
    display: inline-block;
    flex-shrink: 0;
    mask-image: url('./icons/alert-circle.svg');
    -webkit-mask-image: url('./icons/alert-circle.svg');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--error);
    width: var(--spacing-16);
    height: var(--spacing-16);
}