/* ==========================================================================
   Modul: Grafik Banner – modules/module-image-banner.php
   Button-Styles kommen aus module-hero-teaser.css
   ========================================================================== */

.image-banner {
    --ht-blue: #0d2a6b;
    --ht-blue-dark: #0a2257;
    --ht-orange: #f7820f;
    --ht-orange-dark: #e06f00;
    --ht-text: #1f2a44;
    --ht-muted: #5b6478;
    position: relative;
    background-color: #f7f8fb;
    color: var(--ht-text);
}

.image-banner__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    max-width: 1260px;
    margin: 0 auto;
    padding: 32px 16px;
}

/* Mobil/Tablet: Container auflösen, damit der Button unter die Grafik rutscht
   (Reihenfolge: Headline, Grafik, Button) */
.image-banner__content {
    display: contents;
}

.image-banner__media {
    order: 2;
}

.image-banner a.image-banner__btn {
    order: 3;
    justify-self: center;
}

.image-banner .image-banner__headline {
    order: 1;
    margin: 0;
    padding: 0;
    color: var(--ht-blue);
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
    text-transform: none;
}

.image-banner .image-banner__image {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
}

/* Optionale maximale Höhe: Breite ergibt sich aus dem Seitenverhältnis */
.image-banner.has-max-height .image-banner__image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--ib-max-height);
}

/* Button wie globaler Button-Style "Primary" (.button.is-primary) */
.image-banner a.image-banner__btn {
    padding: 10px 32px;
    border: 2px solid transparent;
    border-radius: 100px;
    background: #e38911;
    color: #fff;
    font-weight: 700;
    box-shadow: none;
    transition: all 0.2s ease;
}

.image-banner a.image-banner__btn:hover,
.image-banner a.image-banner__btn:focus-visible,
.image-banner a.image-banner__btn:active {
    background: #fff;
    border-color: #e38911;
    color: #e38911;
}

/* Tablet */
@media screen and (min-width: 768px) {
    .image-banner__inner {
        padding: 40px 32px;
    }

    .image-banner .image-banner__headline {
        font-size: 30px;
    }
}

/* Desktop: Text links, Grafik rechts */
@media screen and (min-width: 1024px) {
    .image-banner__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
        align-items: center;
        column-gap: 48px;
        padding: 48px 40px;
    }

    .image-banner.no-image .image-banner__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .image-banner__content {
        display: block;
        min-width: 0;
    }

    .image-banner .image-banner__headline {
        margin-bottom: 24px;
        font-size: 36px;
        text-align: left;
    }

    .image-banner .image-banner__image {
        max-width: none;
    }

    .image-banner.has-max-height .image-banner__image {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .image-banner a.image-banner__btn {
        transition: none;
    }
}