/* School artwork layered over the shared hero copy and navigation. */
.hero-school { position: relative; }

.hero-school .hero-alternative-band { overflow: visible; }

/* Clip only the background layers, leaving the illustration free to overlap. */
.hero-school .hero-alternative-band::before,
.hero-school .hero-alternative-band::after { clip-path: inset(0); }

.hero-school .hero-alternative-inner { z-index: 2; }
.hero-school .hero-alternative-heading { max-width: 30ch; }
.hero-school .hero-alternative-lead { max-width: 60ch; }

.hero-school .hero-school-art {
    position: absolute;
    z-index: 1;
    right: max(20px, calc((100% - 1200px) / 2 - 120px));
    bottom: -128px;
    width: min(44vw, 680px);
    /* The last 135 source pixels are transparent; position the visible base. */
    aspect-ratio: 1656 / 1115;
    min-height: 0;
    pointer-events: none;
}

.hero-school .hero-school-art img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-school + #antragsweg .process-intro {
    padding-top: 160px;
}

@media (max-width: 1100px) {
    .hero-school .hero-alternative-band { padding-bottom: 0; }
    .hero-school .hero-alternative-heading,
    .hero-school .hero-alternative-lead { max-width: none; }

    .hero-school .hero-school-art {
        position: relative;
        right: auto;
        bottom: -32px;
        width: min(520px, calc(100% - 40px));
        margin: 16px auto 0;
    }

    .hero-school + #antragsweg .process-intro {
        padding-top: clamp(76px, 9vw, 118px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-school .hero-school-art img { animation: school-enter 900ms ease 560ms both; }
}

@keyframes school-enter {
    from { opacity: 0; filter: blur(7px); transform: translateY(16px); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}