/* ============================================================
   BALLETTBEKLEIDUNG.DE - RESPONSIVE PATCH 2026-08-24
   Ziel: Tablets + kleine Laptops (768-1366px) stabilisieren
   Diese Datei NACH BB-CSS-KOMPLETT.css und menu.css laden.
   ============================================================ */

/* 1. Berechenbare Boxen, keine unsichtbaren Breiten-Zuschläge */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
}

img, video, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* Flex-Kinder duerfen kleiner werden als ihr Inhalt. */
#flexbox-main,
#flexbox-main_middle,
.content_menu,
.content_content,
main,
article,
aside {
    min-width: 0;
}

/* 2. Tablet + kleiner Laptop */
@media (min-width: 768px) and (max-width: 1366px) {

    #flexbox-main_middle {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: clamp(8px, 1.5vw, 20px);
        padding-right: clamp(8px, 1.5vw, 20px);
        gap: clamp(10px, 1.5vw, 20px);
        overflow: visible;
    }

    /* Linke Navigation: feste Spalte, aber nicht mehr 240px + Extraraender */
    .content_menu {
        flex: 0 0 clamp(185px, 20vw, 225px);
        width: clamp(185px, 20vw, 225px);
        max-width: 225px;
        margin-left: 0;
        margin-right: 0;
        float: none;
        height: auto;
    }

    #cssmenu {
        width: 100%;
        max-width: 225px;
    }

    #cssmenu > ul > li > a {
        padding-left: 10px;
        padding-right: 22px;
    }

    /* Hauptinhalt nimmt nur den REST, nicht nochmals 100% des Viewports. */
    .content_content {
        flex: 1 1 0%;
        width: auto;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        float: none;
    }

    main,
    main article,
    article {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        float: none;
    }

    aside {
        min-width: 0;
        max-width: 100%;
    }

    iframe {
        width: 100%;
        max-width: 100%;
    }

    /* Produktlisten: Karten duerfen sich dem verfuegbaren Platz anpassen. */
    .floating-box-angebote {
        width: calc(33.333% - 12px);
        max-width: 250px;
        min-width: 170px;
        height: auto;
        min-height: 500px;
        margin: 6px;
        vertical-align: top;
    }

    .bildvorschau,
    .bildvorschau-sonderangebot,
    .bildvorschau-sale {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 360px;
        display: block;
    }

    .picframe {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* Produktdetail: starre Breiten entschärfen */
    .products_supersale,
    .product_pic,
    .product_description,
    .product_informations,
    .product_availability {
        max-width: 100%;
        min-width: 0;
    }

    #container_productview,
    #container_availableinfo {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #textpreisbox {
        min-width: 0;
        margin-left: clamp(8px, 1.5vw, 20px);
    }

    #information {
        max-width: 100%;
    }

    #availability {
        min-width: 0;
    }

    .cospozoomcontainer {
        width: min(500px, 100%);
        max-width: 100%;
    }
}

/* 3. Engere Tablets / kleine Fenster: zwei Produktkarten statt gequetschter drei */
@media (min-width: 768px) and (max-width: 1050px) {
    .floating-box-angebote {
        width: calc(50% - 12px);
        max-width: none;
        min-width: 0;
    }

    .content_menu {
        flex-basis: 190px;
        width: 190px;
    }

    #cssmenu {
        max-width: 190px;
    }

    #cssmenu > ul > li > a,
    #cssmenu ul ul li a {
        font-size: 11px;
    }

    /* Detailseite lieber sauber untereinander als halb zerquetscht */
    #container_productview {
        flex-direction: column;
    }

    #bildbox,
    #textpreisbox {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* 4. Mobile Altlasten korrigieren */
@media (max-width: 767px) {
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        line-height: 1.7;
        word-spacing: normal;
    }

    #flexbox-main_middle {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    .content_content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .productpicture,
    .product_pic,
    .product_description,
    .product_informations {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .boxfloat350,
    .boxfloat400 {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        float: none;
    }
}

/* 5. Sehr kleine Displays */
@media (max-width: 480px) {
    .floating-box-angebote {
        width: calc(50% - 10px);
        margin: 5px;
        min-width: 0;
    }
}



/* ============================================================
   TABLET / KLEINE LAPTOPS
   Lücke zwischen Smartphone und Desktop schließen
   ============================================================ */

@media (min-width: 601px) and (max-width: 767px) {

    #flexbox-main_middle {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }


    .content_menu {
        display: block !important;

        flex: 0 0 200px !important;

        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;

        margin-left: 0 !important;
        margin-right: 10px !important;

        box-sizing: border-box !important;
    }


    .content_content {
        display: block !important;

        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;

        box-sizing: border-box !important;
    }


    main,
    article {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        float: none !important;
    }


    aside {
        width: 200px !important;
        min-width: 0 !important;
        max-width: 200px !important;
    }


    #cssmenu {
        width: 200px !important;
        min-width: 0 !important;
        max-width: 200px !important;
    }
}


/* ============================================================
   MITTLERE DESKTOPBREITEN
   ============================================================ */

@media (min-width: 1201px) and (max-width: 1599px) {

    #flexbox-main_middle {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow: visible !important;
    }


    .content_menu {
        flex: 0 0 240px !important;

        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }


    .content_content {
        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin-right: 5px !important;
    }


    main,
    article,
    main article {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    article {
        margin-left: 10px !important;
        float: none !important;
    }

}