/* =========================================================
   1. Mobile First (Basis)
   ========================================================= */

.banner-container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 0 0.75rem;
}

.banner-wrapper {
    position: relative;
    padding-left: 0.75rem;
}

#bannerImage {
    width: 100%;
    height: 150px; /* kleiner für Mobile */
    object-fit: cover;
}

.banner-text {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    right: 0.625rem;

    background: rgba(0, 0, 0, 0.6);
    color: var(--color_text_inverse);

    padding: 0.75rem 1rem;
    text-align: left;

    font-size: 0.9rem;
}

/* =========================================================
   2. Größere Smartphones
   ========================================================= */
@media (min-width: 481px) {
    #bannerImage {
        height: 280px;
    }

    .banner-text {
        font-size: 1rem;
        padding: 1rem 1.25rem;
    }
}

/* =========================================================
   3. Tablets (Portrait)
   ========================================================= */
@media (min-width: 769px) {
    .banner-container {
        max-width: 960px;
        padding: 0;
    }

    #bannerImage {
        height: 320px;
    }

    .banner-text {
        top: 1.25rem;
        left: 1.25rem;
        right: auto;
        max-width: 70%;
        font-size: 1.05rem;
    }
}

/* =========================================================
   4. Tablets (Landscape) / kleine Desktops
   ========================================================= */
@media (min-width: 1025px) {
    .banner-container {
        max-width: 1200px;
    }

    #bannerImage {
        height: 400px; /* Originalwert */
    }

    .banner-text {
        max-width: 600px;
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }
}

/* =========================================================
   5. Große Displays
   ========================================================= */
@media (min-width: 1281px) {
    #bannerImage {
        height: 400px;
    }

    .banner-text {
        font-size: 1.15rem;
    }
}