/* ============================================================================
   IBT-Shop – Mobile-Optimierung
   Ergänzung zu ibt.css · Bootstrap 4 · Highrise 1.0.9
   Einbinden als StyleInclude NACH ibt.css (also z. B. StyleInclude_00011)
   ----------------------------------------------------------------------------
   WICHTIG
   - display von .divMainMenuWrapper wird hier NICHT angefasst. Das steuern die
     Inline-<style>-Elemente 3605 (Seite 113) und 5269 (Seite 175).
   - Alle Regeln liegen in Media Queries -> Desktop bleibt unverändert.
   - Breakpoints BS4: sm 576 · md 768 · lg 992 · xl 1200
   - Selektoren arbeiten mit [id^="..."], weil myfactory die Element-IDs in
     Formularlisten pro Datensatz identisch wiederholt.
   ============================================================================ */


/* ============================================================================
   1 · GRUNDLAGEN (alle Seiten, < 768px)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* Kein horizontales Wegrutschen durch zu breite Medien */
    img,
    iframe,
    video {
        max-width: 100%;
    }

    /* iOS zoomt beim Fokus in Felder mit < 16px automatisch hinein */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }

    /* Fingerfreundliche Trefferflächen (Apple/Google: 44px) */
    .btn,
    button,
    input[type="submit"],
    .dropdown-item,
    .qtybutton {
        min-height: 44px;
    }

    .qtybutton {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5rem;
        font-size: 1.125rem;
        line-height: 1;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Überschriften auf Handybreite herunterskalieren */
    h1, .h1 { font-size: 1.625rem; }
    h2, .h2 { font-size: 1.375rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.125rem; }

    /* Sehr lange Artikelnummern/URLs brechen statt zu überlaufen */
    .product-desc,
    .breadcrumb-content,
    .card-body {
        overflow-wrap: break-word;
    }
}


/* ============================================================================
   2 · ARTIKELDETAIL – VARIANTENLISTE (Seite 139, lst5601)
   ----------------------------------------------------------------------------
   Aufbau je Datensatz:
     listRow_5601_* .h5.col-12
       > form5602
         > div5626   .card.noround.shadow
           > div5627 .card-body.d-flex.fw-600        <- erzwingt eine Zeile
             > div5628      Größe / Preis / MwSt
             > div33408_2   .ml-auto  -> Menge + Warenkorb-Button
   Problem: d-flex + ml-auto quetscht Text und Bedienelemente in eine Zeile,
   dazu vergrößert die Zeilenklasse .h5 die komplette Schrift auf 20px.
   Lösung: unter 768px zweizeilig stapeln, Schrift staffeln, Bedienleiste
   über die volle Breite.
   ========================================================================== */
@media (max-width: 767.98px) {

    /* Zeilenschrift zurück auf Fließtextgröße (Zeile trägt .h5) */
    [id^="listRow_5601_"] {
        font-size: 1rem;
        line-height: 1.35;
    }

    [id^="div5626"] {
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    /* Karteninhalt: umbrechen statt nebeneinander */
    [id^="div5627"] {
        flex-wrap: wrap;
        padding: .75rem;
    }

    /* Textteil (Größe / Preis / MwSt) über volle Breite */
    [id^="div5628"] {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        margin: 0 0 .5rem !important;  /* hebt mt-auto / mb-auto auf */
    }

    /* Größe / Paar / Rolle / Folie – die Bedingungsvarianten fld5603* */
    [id^="fld5603"] {
        margin-right: .5rem !important;  /* war .mr-3 = 1rem */
        font-weight: 600;
    }

    [id^="fld5604"] {
        font-size: 1.125rem;
        font-weight: 700;
        margin-right: .5rem;
    }

    /* Steuerhinweis in eigene Zeile, unauffälliger */
    [id^="fld5660"] {
        flex: 1 1 100%;
        font-size: .8125rem;
        font-weight: 400;
        opacity: .7;
    }

    /* Bedienblock: volle Breite, ml-auto und d-inline-block aufheben.
       position: relative bleibt erhalten – die Meldung
       "Bitte wählen Sie eine gültige Variante" (div31598_2) hängt daran. */
    [id^="div33408_2"] {
        display: block;
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0 !important;
    }

    [id^="divBuyWithPlusMinus_2"] {
        width: 100%;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    /* Mengen-Stepper kompakt, feste Höhe aus ibt.css überschreiben */
    [id^="div28703_5"] {
        flex: 0 0 auto;
        width: auto;
        height: 44px;
        margin-right: .5rem;
    }

    [id^="div28703_5"] .input-group-text {
        padding: .375rem .5rem;
    }

    [id^="fldInputQtyCart_4"] {
        width: 3.25rem !important;
        min-width: 0;
        padding-left: .25rem;
        padding-right: .25rem;
        text-align: center;
    }

    /* Warenkorb-Button füllt den Rest der Zeile */
    [id^="div28706_7"] {
        flex: 1 1 auto;
        min-width: 0;
    }

    [id^="divBuyButton_3"] {
        width: 100%;
    }

    [id^="cmdQtyCartModal_2"] {
        width: 100%;
        min-height: 44px;
        padding: .5rem .75rem;
        font-size: .9375rem;
        white-space: nowrap;
    }

    /* Merkzettel-Button daneben, falls sichtbar */
    [id^="div28707_9"] {
        flex: 0 0 auto;
        margin-left: .5rem;
    }

    /* Hinweis "ungültige Variante" nicht mehr absolut über den Button legen */
    [id^="div31598_2"] {
        position: static !important;
        width: 100%;
        margin-top: .35rem;
    }
}

/* Sehr schmale Geräte (iPhone SE & Co.): Button unter den Stepper */
@media (max-width: 359.98px) {
    [id^="divBuyWithPlusMinus_2"] {
        flex-wrap: wrap;
    }

    [id^="div28703_5"] {
        margin-right: 0;
        margin-bottom: .5rem;
    }

    [id^="div28706_7"] {
        flex: 1 1 100%;
    }
}

/* Optional: bei sehr vielen Größen die Liste auf Handy scrollbar machen.
   Einfach die Kommentarzeichen entfernen.
@media (max-width: 767.98px) {
    [id^="div5512_2"] {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
*/


/* ============================================================================
   3 · ARTIKELDETAIL – ÜBRIGE SEITE (Seite 139)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* Hauptbild nicht höher als der halbe Viewport */
    .artikel-bild {
        max-height: 55vh;
    }

    /* Bildergalerie: feste 150px passen auf 320px-Geräten nicht in 2 Spalten.
       Die vertikale Zentrierung aus ibt.css (top/transform) muss dafür weg. */
    .bildergalerie img {
        width: calc(33.333% - 10px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        margin: 5px !important;
        top: 0;
        -ms-transform: none;
        transform: none;
    }

    /* Größenauswahl-Dropdown (dropdownMenuLink / lstVarianten).
       display wird bewusst nicht gesetzt – das macht Bootstrap selbst. */
    #dropdownMenuLink {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        white-space: normal;
        text-align: left;
    }

    #lstVarianten {
        width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #lstVarianten .dropdown-item {
        white-space: normal;
        padding: .6rem 1rem;
    }

    /* Reiter Beschreibung / Bewertungen umbrechen lassen */
    .description-review-title {
        flex-wrap: wrap;
    }

    .description-review-title a {
        padding: .5rem .75rem;
    }
}


/* ============================================================================
   4 · ARTIKELÜBERSICHT / KACHELN (Seiten 114, 169, 180)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* Sortierleiste umbrechen statt zusammenstauchen */
    #divProductOverviewHeadline {
        row-gap: .5rem;
    }

    #divProductSort,
    #divProductSwitch,
    #divProductCounter {
        flex: 1 1 auto;
    }

    #divProductSort select {
        max-width: 100%;
    }

    /* Listenansicht: Button-Reihe umbrechen */
    [id^="div28165_1"] {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    /* Filter-Slider-Beschriftungen nicht abschneiden */
    .slider-filter-text {
        flex-wrap: wrap;
    }
}

/* Optional: zwei Kacheln nebeneinander ab 400px statt einer.
   Nur aktivieren, wenn die Artikelbezeichnungen kurz genug sind.
@media (min-width: 400px) and (max-width: 767.98px) {
    #divProductGridTemplate {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
*/


/* ============================================================================
   5 · WARENKORB (Seite 137) und Bestellabschluss (Seite 146)
   ----------------------------------------------------------------------------
   Der Spaltenkopf divCartHead ist d-none d-md-flex – auf dem Handy stehen
   Preis, Menge und Summe deshalb ohne Beschriftung untereinander.
   Die Labels werden hier per ::before ergänzt.
   ========================================================================== */
@media (max-width: 767.98px) {

    .shopping-cart-content {
        align-items: flex-start;
        row-gap: .35rem;
        padding-bottom: .75rem;
    }

    /* Artikelbezeichnung darf umbrechen (Elternteil trägt .text-truncate) */
    .shopping-cart-content [id^="div44865"] {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .shopping-cart-content [id^="div29907"]::before,
    .shopping-cart-content [id^="div29908"]::before,
    .shopping-cart-content [id^="div29909"]::before {
        display: block;
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        opacity: .55;
    }

    .shopping-cart-content [id^="div29907"]::before { content: "Preis"; }
    .shopping-cart-content [id^="div29908"]::before { content: "Menge"; }
    .shopping-cart-content [id^="div29909"]::before { content: "Gesamt"; }

    .shopping-cart-content .input-qty {
        width: 100%;
        max-width: 4.5rem;
        min-height: 44px;
        text-align: center;
    }

    /* Entfernen/Merken-Icons nach rechts, gut treffbar */
    .product-action-basket {
        justify-content: flex-end;
        gap: 1rem;
        padding-top: .25rem;
    }

    .product-action-basket a,
    .product-action-basket button {
        font-size: 1.25rem;
    }
}

@media (max-width: 575.98px) {

    /* Buttons unter dem Warenkorb über volle Breite */
    .buttons-cart a,
    .buttons-cart button,
    .buttons-cart input[type="submit"],
    .wc-proceed-to-checkout a,
    .wc-proceed-to-checkout button,
    .wc-proceed-to-checkout input[type="submit"] {
        display: block;
        width: 100%;
        margin: 0 0 .5rem;
        text-align: center;
    }

    /* Gutscheinfeld + Einlösen-Button jeweils volle Breite */
    .coupon-wrapper .col-6,
    .coupon-wrapper .col-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: .5rem;
    }
}


/* ============================================================================
   6 · CHECKOUT & FORMULARE (Seiten 144, 120, 173, 116)
   ========================================================================== */
@media (max-width: 575.98px) {

    /* PLZ (col-3) + Ort (col-8) – auf schmalen Geräten etwas mehr Platz */
    [id^="div30095"] {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        padding-right: .5rem !important;
    }

    [id^="div30096"] {
        flex: 0 0 66.666%;
        max-width: 66.666%;
    }

    /* Summenzeilen im Checkout nicht umbrechen lassen */
    [id^="div29972"],
    [id^="div29973"],
    [id^="div29974"],
    [id^="div29975"],
    [id^="div29976"],
    [id^="div29977"],
    [id^="div29978"],
    [id^="div29979"],
    [id^="div29980"],
    [id^="div29981"] {
        font-size: .9375rem;
    }

    /* Bestell-Button prominent */
    .wc-proceed-to-checkout {
        margin-top: 1rem;
    }
}


/* ============================================================================
   7 · HISTORIE / BELEGE (Seiten 117, 147, 182)
   ----------------------------------------------------------------------------
   Die Positionslisten (Elementtyp 155) rendern eine echte Tabelle. Ohne
   Wrapper läuft sie auf dem Handy aus dem Layout – deshalb Scroll-Container.
   ========================================================================== */
@media (max-width: 767.98px) {

    [id^="div37653"],
    [id^="div30707"],
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    [id^="div37653"] table,
    [id^="div30707"] table {
        font-size: .8125rem;
    }

    [id^="div37653"] table td,
    [id^="div37653"] table th,
    [id^="div30707"] table td,
    [id^="div30707"] table th {
        padding: .35rem .5rem;
        white-space: nowrap;
    }

    /* Paginierung mit Abstand, damit sich die Seitenzahlen treffen lassen */
    .pagination-style a,
    .pagination-style span {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ============================================================================
   8 · FOOTER & WARENKORB-VORSCHAU (Seite 113 / Layout)
   ========================================================================== */
@media (max-width: 575.98px) {

    /* Label-Spalten im Footer (col-3) sind bei "Telefon:" zu eng */
    .footer-info-text.col-3 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .footer-info-text.col-9 {
        flex: 0 0 66.666%;
        max-width: 66.666%;
    }

    /* Mini-Warenkorb: Bezeichnung darf zweizeilig werden */
    .cart-title.text-truncate {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }
}