/* Seitenspezifische Styles für application.html. Baut auf base.css auf. */
.application-hero {}

.application-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    border-bottom: 3px solid var(--brand-black);
    background: linear-gradient(125deg, rgba(255, 212, 0, .98), rgba(255, 227, 77, .94)), var(--brand-yellow);
}

.application-hero::after {
    content: "";
    position: absolute;
    width: 30rem;
    height: 30rem;
    right: -10rem;
    bottom: -18rem;
    border: 4rem solid rgba(17, 17, 17, .08);
    border-radius: 50%;
    pointer-events: none;
}

.application-hero-grid,
.application-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

.application-hero h1 {
    max-width: 13ch;
    margin-bottom: 1.25rem;
    font-size: clamp(3rem, 7vw, 6.5rem);
}

.application-hero h1 span {
    display: inline-block;
    padding: .04em .15em .1em;
    color: var(--brand-yellow);
    background: var(--brand-black);
    border-radius: .08em;
}

.application-hero .eyebrow,
.application-hero .lead {
    color: var(--brand-black);
}

.application-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.application-benefits li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    color: var(--brand-black);
    background: rgba(255, 255, 255, .52);
    border: 2px solid var(--brand-black);
    border-radius: 999px;
    font-weight: 800;
}

.application-info-card,
.application-form-card,
.application-contact-card {
    background: var(--surface);
    border: 3px solid var(--brand-black);
    box-shadow: var(--shadow-hard);
}

.application-info-card {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    transform: rotate(1.5deg);
}

.application-card-kicker {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .25rem .55rem;
    color: var(--brand-black);
    background: var(--brand-yellow);
    border: 2px solid var(--brand-black);
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.application-steps {
    display: grid;
    gap: 1.15rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.application-steps li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: .85rem;
    align-items: start;
}

.application-steps li>span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    color: var(--brand-yellow);
    background: var(--brand-black);
    border-radius: 50%;
    font-weight: 900;
}

.application-steps strong,
.application-steps small {
    display: block;
    color: var(--brand-black);
}

.application-steps small {
    margin-top: .15rem;
    line-height: 1.45;
}

.application-section {
    background: #f4f4f1;
}

.application-layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, .38fr);
    align-items: start;
}

.application-form-card {
    padding: clamp(1.25rem, 4vw, 3rem);
}

.application-form-heading {
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--brand-black);
}

.application-form {
    display: grid;
    gap: 1.75rem;
    margin-top: 2rem;
}

.form-section {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-section legend {
    width: 100%;
    margin-bottom: 1.15rem;
    padding: 0 0 .65rem;
    color: var(--brand-black);
    border-bottom: 2px solid var(--brand-yellow);
    font-size: 1.25rem;
    font-weight: 900;
}

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

.form-group-wide {
    grid-column: 1/-1;
}

.form-help,
.file-upload-box p {
    margin: .4rem 0 0;
    color: #555;
    font-size: .9rem;
    line-height: 1.45;
}

.file-upload-box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--brand-yellow-pale);
    border: 2px dashed var(--brand-black);
    border-radius: .7rem;
}

.file-upload-icon {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    color: var(--brand-yellow);
    background: var(--brand-black);
    border-radius: .5rem;
    font-size: .78rem;
    font-weight: 900;
}

.file-upload-box input[type="file"] {
    grid-column: 1/-1;
    width: 100%;
    min-height: 3rem;
    color: var(--brand-black);
    font: inherit;
}

.file-upload-box input[type="file"]::file-selector-button {
    margin-right: .75rem;
    padding: .65rem .8rem;
    color: var(--brand-black);
    background: var(--brand-yellow);
    border: 2px solid var(--brand-black);
    border-radius: .45rem;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.file-upload-box input[type="file"]::file-selector-button:hover {
    color: var(--brand-yellow);
    background: var(--brand-black);
}

.selected-file {
    margin: .45rem 0 0;
    color: var(--success);
    font-weight: 800;
}

.form-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
    padding: 1rem;
    background: var(--brand-yellow-pale);
    border: 2px solid var(--brand-black);
    border-radius: .7rem;
}

.form-check input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    margin: .15rem 0 0;
    accent-color: var(--brand-black);
}

.field-error {
    margin-top: .5rem;
    padding: .65rem .75rem;
    color: #76140d;
    background: var(--error-soft);
    border-left: 5px solid var(--error);
    font-weight: 800;
}

.has-error input:not([type="checkbox"]),
.has-error textarea,
.has-error .file-upload-box,
.form-check.has-error {
    border-color: var(--error) !important;
}

.form-error-summary {
    margin: 1.5rem 0 0;
    padding: 1rem 1.15rem;
    color: #5d0f09;
    background: var(--error-soft);
    border: 3px solid var(--error);
    border-radius: .6rem;
}

.form-error-summary h3,
.form-error-summary p,
.form-error-summary a {
    color: #5d0f09;
}

.form-security-note {
    margin: -.5rem 0 0;
    color: #333;
    font-size: .9rem;
}

.application-submit {
    width: 100%;
    min-height: 3.5rem;
    border-radius: .55rem;
    font-size: 1.05rem;
}

.application-contact-card {
    position: sticky;
    top: 6.5rem;
    padding: 1.5rem;
}

.contact-option {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    margin-top: .85rem;
    padding: .8rem;
    color: var(--brand-black);
    background: var(--brand-yellow-pale);
    border: 2px solid var(--brand-black);
    border-radius: .55rem;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

.contact-option>span:first-child {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    color: var(--brand-yellow);
    background: var(--brand-black);
    border-radius: 50%;
    font-weight: 900;
}

.contact-option small,
.contact-option strong {
    display: block;
    color: inherit;
}

.contact-option:hover,
.contact-option:focus-visible {
    color: var(--brand-yellow);
    background: var(--brand-black);
}

@media (max-width:900px) {

    .application-hero-grid,
    .application-layout {
        grid-template-columns: 1fr;
    }

    .application-info-card {
        transform: none;
    }

    .application-contact-card {
        position: static;
    }
}

@media (max-width:620px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .application-info-card,
    .application-form-card,
    .application-contact-card {
        box-shadow: 6px 6px 0 var(--brand-black);
    }

    .application-benefits {
        display: grid;
    }

    .application-benefits li {
        border-radius: .6rem;
    }
}