.hero {
    position: relative;
    height: auto;
    min-height: 654px;
    display: flex;
    align-items: stretch;
    color: var(--color-white);
    overflow: hidden;
    --hero-base: var(--color-blue-dark);
    --hero-img-opacity: .8;
    --hero-overlay:
        linear-gradient(180deg, rgba(7, 19, 56, 0) 52%, rgba(7, 19, 56, 0.5) 100%),
        linear-gradient(90deg, rgba(28, 56, 143, 0.3) 0%, rgba(28, 56, 143, 0.3) 100%),
        linear-gradient(90deg, rgba(28, 56, 143, 0) 27%, rgb(28, 56, 143) 64%);
    background: var(--hero-base);
}
.hero--neutral {
    --hero-base: #b8b2a9;
    --hero-img-opacity: 1;
    --hero-overlay:
        linear-gradient(180deg, rgba(33, 33, 33, 0) 52%, rgba(33, 33, 33, 0.5) 100%),
        linear-gradient(90deg, rgba(33, 33, 33, 0.3) 0%, rgba(33, 33, 33, 0.3) 100%),
        linear-gradient(90deg, rgba(184, 178, 169, 0) 37%, rgb(184, 178, 169) 60%);
}
.hero__media {
    position: absolute; inset: 0;
}
.hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: left top;
    opacity: var(--hero-img-opacity);
}
.hero__media--placeholder {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1), transparent 50%),
        linear-gradient(135deg, var(--color-blue-dark), var(--color-blue));
}
.hero::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--hero-overlay);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(var(--container-w) + var(--container-pad) * 2);
    margin: 0 auto;
    padding: 32px var(--container-pad) 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    height: 100%;
}
@media (min-width: 1280px) {
    .hero__inner { padding-left: 80px; padding-right: 80px; max-width: 1600px; }
}
@media (min-width: 1920px) {
    .hero__inner { padding-left: 320px; padding-right: 320px; max-width: 1920px; }
}
.hero__content {
    max-width: none;
    width: 100%;
    margin-top: auto;
}
.hero__title {
    font-family: var(--font-heading);
    font-size: 62px; line-height: 68px;
    color: var(--color-white); font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.hero__subtitle {
    font-family: var(--font-body);
    font-size: 18px; line-height: 28px; color: var(--color-white); margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.hero__crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    font-size: 14px; line-height: 22px; color: var(--color-white);
    margin: 0 0 16px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.hero__crumb-link { color: var(--color-white); opacity: .8; }
.hero__crumb-link:hover { opacity: 1; text-decoration: underline; }
.hero__crumb-current { color: var(--color-white); font-weight: 600; }
.hero__crumb-sep { opacity: .6; }
.hero__cta { margin-top: 24px; }
/* Auto/default hero CTA: site-wide info button, mobile only (shown in the 767px block) */
.hero__cta--auto { display: none; }
.hero__badges {
    align-self: flex-end;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px 20px;
    max-width: 420px; /* keeps the 3 seals on row 1 and wraps the 2 award blocks onto a centered row 2 */
}
.hero__badge {
    display: block;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}
/* The ZFU seal PNG has an opaque white square background; clipping the round
   seals to a circle drops those white corners so it matches badge-1/badge-2. */
.hero__badge--seal { width: 124px; height: 124px; border-radius: 50%; }
.hero__badge--rect { width: auto; height: 120px; }

@media (max-width: 1199px) {
    .hero__title { font-size: 52px; line-height: 58px; }
    .hero__inner { padding-top: 24px; padding-bottom: 40px; }
    .hero__badges { gap: 16px 16px; }
    .hero__badge--seal { width: 104px; height: 104px; }
    .hero__badge--rect { height: 100px; }
}

@media (max-width: 767px) {
    .hero {
        height: auto; min-height: 460px;
        --hero-overlay:
            linear-gradient(180deg, rgba(28, 56, 143, 0) 52%, rgb(28, 56, 143) 100%),
            linear-gradient(90deg, rgba(28, 56, 143, 0.3) 0%, rgba(28, 56, 143, 0.3) 100%);
    }
    .hero--neutral {
        --hero-overlay:
            linear-gradient(180deg, rgba(184, 178, 169, 0) 52%, rgb(184, 178, 169) 100%),
            linear-gradient(90deg, rgba(33, 33, 33, 0.3) 0%, rgba(33, 33, 33, 0.3) 100%);
    }
    .hero__inner { justify-content: flex-end; height: auto; min-height: 460px; gap: 22px; }
    .hero__title { font-size: 32px; line-height: 40px; }
    .hero__subtitle { font-size: 16px; line-height: 24px; }
    /* Trust factors (Siegel + Logos): shown on mobile as a centered strip below the hero content. */
    .hero__content { order: 1; }
    .hero__badges {
        order: 2;
        align-self: center;
        width: 100%;
        max-width: 240px; /* 3 seals on row 1, the 2 award blocks centered on row 2 */
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px 14px;
    }
    .hero__badge { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28)); }
    .hero__badge--seal { width: 64px; height: 64px; }
    .hero__badge--rect { width: auto; height: 54px; }
    /* Figma centers the info CTA on mobile; the button is inline-flex so
       text-align on the full-width block centers it. */
    .hero__cta--auto { display: block; text-align: center; }
}


/* Long titles/subtitles: hero grows instead of overlapping the tab bar */
.hero__inner { height: auto; min-height: 654px; padding-bottom: 48px; }
@media (max-width: 767px) { .hero__inner { min-height: 460px; padding-bottom: 32px; } }

/* Meeting 15.07.: Zoom-Zentrierung braucht einen Clip-Rahmen. */
.hero__media { overflow: hidden; }