/* Block «hero» — loaded only when a hero block is on the page. Five types:
   hero--centered, hero--panel (dark), hero--split, hero--backdrop (image as
   background), hero--angled. All through fixed classes — no inline style (CSP). */

/* -- Basis (alle Typen) -------------------------------------------------- */
.block-hero { position: relative; overflow: hidden; padding: var(--size-9) var(--size-6); }
.block-hero h2 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08;
    letter-spacing: -0.02em; margin: 0 0 var(--size-4); }
.hero-text { font-size: 1.15rem; line-height: 1.6; color: var(--muted);
    margin: 0 0 var(--size-6); max-width: 60ch; }
.hero-text:last-child { margin-bottom: 0; }

/* Announcement line: a square blueprint chip with a hairline. */
.hero-kicker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    margin: 0 0 var(--size-6); padding: .3rem .9rem; font-size: .9rem;
    color: var(--muted); border: 1px solid var(--border); }
.hero-kicker a { color: var(--accent); font-weight: var(--font-weight-6); text-decoration: none; }
.hero-kicker a:hover, .hero-kicker a:focus-visible { text-decoration: underline; }

/* Bullet points: a checkmark list between text and buttons. */
.hero-bullets { list-style: none; margin: 0 0 var(--size-6); padding: 0;
    display: grid; gap: var(--size-2); }
.hero-bullets li { display: flex; align-items: flex-start; gap: .55rem; line-height: 1.5; }
.hero-bullet-icon { flex: none; color: var(--accent); margin-top: .2em; }
.hero--centered .hero-bullets { justify-content: center; justify-items: start; width: fit-content; margin-inline: auto; }

/* Actions: a filled primary button plus a plain secondary link. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-5); }
.hero-link { color: var(--ink); font-weight: var(--font-weight-6); text-decoration: none; }
.hero-link:hover, .hero-link:focus-visible { text-decoration: underline; }

/* Bild-Spalte (Typ 2/3/5) */
.hero-media { min-width: 0; }
.hero-media img { display: block; width: 100%; height: auto; }

/* -- Typ 1: Zentriert ---------------------------------------------------- */
.hero--centered { text-align: center; }
.hero--centered .hero-content { max-width: 48rem; margin-inline: auto; }
.hero--centered .hero-text { margin-inline: auto; }
.hero--centered .hero-actions { justify-content: center; }

/* -- Zweispaltige Typen (2/3/5): Inhalt links, Bild rechts --------------- */
@media (min-width: 800px) {
    .hero--panel .hero-inner, .hero--split .hero-inner, .hero--angled .hero-inner {
        display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--size-8); align-items: center; }
}
@media (max-width: 799px) {
    .hero--panel .hero-media, .hero--split .hero-media, .hero--angled .hero-media {
        margin-top: var(--size-7); }
}

/* -- Dunkle Typen (2/4): helle Schrift auf dunklem Grund ----------------- */
.hero--panel, .hero--backdrop { background: var(--gray-12); color: #fff; }
.hero--panel h2, .hero--backdrop h2, .hero--panel .hero-link, .hero--backdrop .hero-link { color: #fff; }
.hero--panel .hero-text, .hero--backdrop .hero-text { color: var(--gray-5); }
.hero--panel .hero-kicker, .hero--backdrop .hero-kicker {
    color: var(--gray-5); border-color: var(--gray-9); }

/* -- Typ 2: Dunkel, Bild rechts ------------------------------------------ */
.hero--panel .hero-media img { border: 1px solid var(--gray-9); box-shadow: var(--shadow-4); }

/* -- Typ 3: Hell, Bild rechts -------------------------------------------- */
.hero--split .hero-media img { border: 1px solid var(--border); }

/* -- Typ 4: Bild als Hintergrund ----------------------------------------- */
.hero--backdrop { padding-top: var(--size-11); padding-bottom: var(--size-11); text-align: center; }
.hero--backdrop .hero-content { position: relative; z-index: 1; max-width: 48rem; margin-inline: auto; }
.hero--backdrop .hero-text { margin-inline: auto; }
.hero--backdrop .hero-actions { justify-content: center; }
.hero-backdrop { position: absolute; inset: 0; }
.hero-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(13, 18, 28, .82); }

/* -- Type 5: image on the right, cut at an angle -------------------------- */
.hero--angled { padding: 0; }
.hero--angled .hero-inner { gap: 0; }
.hero--angled .hero-content { padding: var(--size-9) var(--size-6); }
.hero--angled .hero-media { align-self: stretch; }
.hero--angled .hero-media img { height: 100%; object-fit: cover; }
@media (min-width: 800px) {
    .hero--angled .hero-media { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
}