/* ===== Reisser Musik Image+Text Banner v1.0.15 ===== */

.rm-image-text {
    --rm-overlay-color: #0d2036;
    --rm-overlay-opacity: 0.72;
    --rm-text-width-xl: 35%;
    --rm-text-width-lg: 40%;
    --rm-text-width-md: 45%;
    --rm-text-width-sm: 100%;
    --rm-aspect-base: 56.25%;
    --rm-bg-image: none;
    --rm-fixed-height: 400px;

    position: relative;
    width: 100%;
    overflow: hidden;
    background-image: var(--rm-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #1a2a3a;
    display: block;
}

/* Seitenverhältnis via padding-top */
.rm-image-text--ratio        { height: 0; padding-top: var(--rm-aspect-base, 56.25%); }
.rm-image-text--fixed        { height: var(--rm-fixed-height); }
.rm-image-text--free         { min-height: 300px; }

/* Text immer als Overlay */
.rm-image-text__content {
    position: absolute;
    top: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    padding: 2rem 2.5rem;
    z-index: 1;
    overflow-y: auto;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background-color: color-mix(in srgb, var(--rm-overlay-color) calc(var(--rm-overlay-opacity) * 100%), transparent);
}
@supports not (background-color: color-mix(in srgb, red 50%, transparent)) {
    .rm-image-text__content { background-color: var(--rm-overlay-color); }
}

/* ── Desktop Groß ≥1400px ── */
@media (min-width: 1400px) {
    .rm-image-text--ratio { padding-top: var(--rm-aspect-lg, var(--rm-aspect-base)); }

    .rm-image-text--right .rm-image-text__content,
    .rm-image-text--overlay-right .rm-image-text__content { right: 0; width: var(--rm-text-width-xl); }

    .rm-image-text--left .rm-image-text__content,
    .rm-image-text--overlay-left .rm-image-text__content  { left: 0;  width: var(--rm-text-width-xl); }

    .rm-image-text--bottom .rm-image-text__content {
        left: 0; right: 0; bottom: 0; top: auto; width: 100%;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}

/* ── Desktop ≥1200px ── */
@media (min-width: 1200px) and (max-width: 1399px) {
    .rm-image-text--ratio { padding-top: var(--rm-aspect-lg, var(--rm-aspect-base)); }

    .rm-image-text--right .rm-image-text__content,
    .rm-image-text--overlay-right .rm-image-text__content { right: 0; width: var(--rm-text-width-lg); }

    .rm-image-text--left .rm-image-text__content,
    .rm-image-text--overlay-left .rm-image-text__content  { left: 0;  width: var(--rm-text-width-lg); }

    .rm-image-text--bottom .rm-image-text__content {
        left: 0; right: 0; bottom: 0; top: auto; width: 100%;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}

/* ── Desktop Medium ≥992px ── */
@media (min-width: 992px) and (max-width: 1199px) {
    .rm-image-text--ratio { padding-top: var(--rm-aspect-md, var(--rm-aspect-base)); }

    .rm-image-text--right .rm-image-text__content,
    .rm-image-text--overlay-right .rm-image-text__content { right: 0; width: var(--rm-text-width-md); }

    .rm-image-text--left .rm-image-text__content,
    .rm-image-text--overlay-left .rm-image-text__content  { left: 0;  width: var(--rm-text-width-md); }

    .rm-image-text--bottom .rm-image-text__content {
        left: 0; right: 0; bottom: 0; top: auto; width: 100%;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}

/* ── Tablet ≥768px ── */
@media (min-width: 768px) and (max-width: 991px) {
    .rm-image-text--ratio { padding-top: var(--rm-aspect-sm, var(--rm-aspect-base)); }

    .rm-image-text--right .rm-image-text__content,
    .rm-image-text--overlay-right .rm-image-text__content { right: 0; width: var(--rm-text-width-sm); }

    .rm-image-text--left .rm-image-text__content,
    .rm-image-text--overlay-left .rm-image-text__content  { left: 0;  width: var(--rm-text-width-sm); }

    .rm-image-text--bottom .rm-image-text__content {
        left: 0; right: 0; bottom: 0; top: auto; width: 100%;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}

/* ── Mobile <768px – gestapeltes Layout (Bild oben, Text darunter) ── */
@media (max-width: 767px) {
    /* Wrapper: normaler Block, keine Ratio-Höhe mehr */
    .rm-image-text {
        height: auto !important;
        padding-top: 0 !important;
        background-image: none !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Bild via separatem DIV-Ersatz: wir nutzen ein wrapper-div das wir per Twig einfügen */
    /* Da kein extra-div vorhanden: Bild als ::before mit Ratio */
    .rm-image-text::before {
        content: '' !important;
        display: block !important;
        width: 100% !important;
        /* Mobile-Ratio, sonst direkt Basis (NICHT Tablet-Ratio) */
        padding-top: var(--rm-aspect-mobile, var(--rm-aspect-base, 56.25%)) !important;
        background-image: var(--rm-bg-image) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-color: #1a2a3a !important;
    }

    .rm-image-text--fixed::before {
        padding-top: 0 !important;
        height: calc(var(--rm-fixed-height) * 0.6) !important;
    }

    /* Text: aus dem absoluten Fluss heraus, normaler Block */
    .rm-image-text__content {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important; bottom: auto !important;
        left: auto !important; right: auto !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 1.25rem 1.25rem 1.5rem !important;
        background-color: var(--rm-overlay-color) !important;
    }
}

/* ── Typografie ── */
.rm-image-text__content h1,
.rm-image-text__content h2,
.rm-image-text__content h3 {
    color: #fff; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.25;
}
.rm-image-text__content h2 { font-size: 1.4rem; }
.rm-image-text__content h3 { font-size: 1.15rem; }
.rm-image-text__content p  {
    color: rgba(255,255,255,0.9); font-size: 0.95rem;
    line-height: 1.65; margin-bottom: 0.5rem;
}
.rm-image-text__content a { color: #7eb3f5; text-decoration: underline; }
.rm-image-text__content ul,
.rm-image-text__content ol {
    color: rgba(255,255,255,0.9); font-size: 0.95rem; padding-left: 1.25rem;
}