/*
 * Handy-Ansicht kompakter (Mobil-Optimierung, 05.11.2026, docs/shop/MOBIL-OPTIMIERUNG.md M2, M4, M6, M7, M10).
 * Geladen von layout/meta.html.twig, nur wenn der Schalter mobilKompakt aktiv ist (An / Nur Staging);
 * „Aus“ = Stand vorher. Alles nur unter 768 px, Tablet und PC bleiben unverändert.
 * Farben nur über vorhandene Variablen, damit die dunkle Darstellung ohne eigene Regel passt.
 */
@media (max-width: 767.98px) {

    /* --- M2: Über offenem Menü, Warenkorb- oder Filterblatt schwebt nichts ------------------------------------
       Vorher lagen Trusted-Shops-Siegel und Chat-Knopf über „Fachberatung & Kontakt“ und der Währungswahl im Menü.
       Für Warenkorb und Filterblatt gab es das schon fürs Siegel (ktp-offcanvas-cart.css, kaelte-filter-panel.css). */
    body:has(.offcanvas.show, .offcanvas.showing) [id^="trustbadge-container"],
    body:has(.offcanvas.show, .offcanvas.showing) [id^="minimized-trustbadge"],
    body:has(.offcanvas.show, .offcanvas.showing) .chat-container:not(.open),
    body:has(.offcanvas.show, .offcanvas.showing) .hh-intl-chip,
    body:has(.offcanvas.show, .offcanvas.showing) .scroll-up-container,
    body:has(.offcanvas.show, .offcanvas.showing) .compare-float-button,
    body:has(.offcanvas.show, .offcanvas.showing) .ks-nl-lasche {
        display: none !important;
    }

    /* --- M10: Newsletter-Teaser (Klaviyo) als Lasche am rechten Rand ----------------------------------------------
       Klaviyo zieht rechteckige Teaser am Handy auf volle Breite. „Jetzt 10€ sparen!“ lag als Balken unten über
       Inhalt, Siegel, Chip und Chat. ks-mobil.js zeichnet eine eigene Lasche mit dem Text des Teasers; ein Tipp darauf
       klickt den Teaser, Klaviyo öffnet sein Formular wie bisher. Den Teaser selbst blendet erst das Skript aus
       (Klasse an html), sobald die Lasche steht: findet es keinen Teaser, bleibt alles wie vorher. */
    html.ks-nl-lasche-an div[class*="kl-teaser-"] {
        display: none !important;
    }

    .ks-nl-lasche {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 1035;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        transform: translateY(-50%);
        border-radius: 8px 0 0 8px;
        background: var(--kd-accent, #156f94);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
        overflow: hidden;
    }

    .ks-nl-lasche[hidden] {
        display: none;
    }

    .ks-nl-lasche button {
        margin: 0;
        border: 0;
        background: transparent;
        color: var(--kd-on-accent, #fff);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
    }

    .ks-nl-lasche .ks-nl-lasche__auf {
        min-width: 36px;
        padding: 14px 9px;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
        letter-spacing: .02em;
    }

    .ks-nl-lasche .ks-nl-lasche__zu {
        width: 36px;
        height: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, .35);
        font-size: 17px;
        line-height: 1;
    }

    .ks-nl-lasche button:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
    }

    /* --- M7: Kopfzeile ----------------------------------------------------------------------------------------
       Symbole hatten 30 px Tippbreite (Richtwert 44 px). Das Vergleichs-Symbol entfällt am Handy; liegen Artikel
       im Vergleich, erscheint wie bisher der schwebende Vergleichsknopf. */
    .header-actions-col .header-actions-btn {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .header-actions-col .col-auto:has(.compare-menu-btn) {
        display: none;
    }

    /* --- M4: Artikellisten --------------------------------------------------------------------------------------
       Der Ansprechpartner-Kasten (Store-Plugin cogi, 424 px mit Überschrift) stand vor den Artikeln, der erste
       Artikel kam erst bei 1.609 px. Am Handy steht er am Ende der Liste und als eine Zeile: Foto, Name, Telefon,
       E-Mail. Die Zeile „Nicht gefunden … / größere Stückzahlen“ entfällt dort, wo die Hilfe unter der Liste
       (kvl-hilfe) dasselbe anbietet. Die Liste ist schon eine Flex-Spalte (cms-element-product-listing); die Hilfe
       hat dort schon order 1 und steht nach den Seitenzahlen (kaelte-verdichter-liste.css), der Kasten kommt danach. */
    .cms-element-product-listing > h4:has(+ .card-body .cogi-contact-person-img-container),
    .cms-element-product-listing > .card-body:has(.cogi-contact-person-img-container) {
        order: 2;
    }

    .cms-element-product-listing > h4:has(+ .card-body .cogi-contact-person-img-container) {
        margin: 24px 0 8px;
        padding-top: 0 !important;
        font-size: 17px;
    }

    .cms-element-product-listing > .card-body:has(.cogi-contact-person-img-container) {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center;
        gap: 14px;
        padding: 14px !important;
        font-size: 14px;
        line-height: 1.45;
    }

    .cms-element-product-listing > .card-body .image-wrapper {
        flex: 0 0 64px;
        width: 64px;
        max-width: 64px;
        padding: 0 !important;
    }

    /* Das Zusatz-CSS des Themes setzt das Foto mit genau dieser Klassenkette auf 150 px (!important) */
    .cms-element-product-listing > .card-body.col-md-12.mb-3.p-2.d-flex.flex-row.flex-wrap.justify-content-center .cogi-contact-person-img-container.rounded-circle,
    .cms-element-product-listing > .card-body .cogi-contact-person-img-container {
        flex: none;
        width: 64px !important;
        height: 64px !important;
        box-shadow: 0 0 6px #fff;
    }

    .cms-element-product-listing > .card-body:has(.cogi-contact-person-img-container) > ul {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .cms-element-product-listing > .card-body:has(.cogi-contact-person-img-container) > ul > li.pb-2 {
        padding-bottom: 2px !important;
    }

    .cms-element-product-listing > .card-body .custom-contact-person-div {
        margin: 0;
    }

    .cms-element-product-listing > .card-body .custom-contact-person-div > [class*="col-"] {
        padding: 0;
    }

    .cms-element-product-listing > .card-body .custom-contact-person-div p {
        margin: 0;
    }

    .cms-element-product-listing:has(> .kvl-hilfe) > .card-body .custom-contact-person-div.bt {
        display: none;
    }

    /* Kompass über der Liste: „Ersatzteil anfragen“ und die Telefon-/Rückrufzeile stehen in der Hilfe unter der
       Liste noch einmal (kvl-hilfe). Am Handy nur dort, der Kompass behält Suche, Schnellwahl und Ratgeber. */
    body:has(.kvl-hilfe [data-kvl-track="hilfe_ersatz"]) .ks-kp__karte[data-ks-kp-track="ersatzteilAnfrage"],
    body:has(.kvl-hilfe [data-kvl-track="hilfe_ersatz"]) .ks-kp__karten:has(> .ks-kp__karte[data-ks-kp-track="ersatzteilAnfrage"]:only-child),
    body:has(.kvl-hilfe__k--dunkel) .ks-kp__hilfe {
        display: none;
    }

    /* --- M6: Produktseite ---------------------------------------------------------------------------------------
       Titel 26 px brauchte bei langen Namen 6 Zeilen. Der Liefertermin (HhIntlSuite, per AJAX) stand unter Staffel,
       Menge, Warenkorb und Express-Knöpfen bei 1.258 px; jetzt direkt unter dem Preis. Die Kaufleiste unten zeigt
       ihn statt des abgeschnittenen Namens (ks-mobil.js). Diese Datei lädt im Kopf, kaelte-pdp.css erst danach:
       darum die stärkeren Selektoren. */
    .kpdp h1.kpdp-title__h1 {
        font-size: 21px;
        line-height: 1.3;
    }

    .kpdp-buybox__inner > .kpdp-price {
        order: -2;
    }

    .kpdp-buybox__inner > .hh-intl-promise-slot {
        order: -1;
    }

    .kpdp-buybox__inner > .hh-intl-promise-slot .hh-intl-promise {
        margin-top: 0;
    }

    .kpdp-stickycart--liefer .kpdp-stickycart__name {
        display: none;
    }

    .kpdp-stickycart__liefer {
        overflow: hidden;
        font: 600 12px/1.3 var(--kpdp-font);
        color: var(--kpdp-grey-700);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .kpdp-stickycart__liefer[hidden] {
        display: none;
    }

    .kpdp-stickycart__haken {
        margin-right: 4px;
        color: var(--kpdp-success);
    }
}

/* Lieferzeile in der Kaufleiste und Newsletter-Lasche gibt es nur am Handy */
@media (min-width: 768px) {
    .kpdp-stickycart__liefer,
    .ks-nl-lasche {
        display: none;
    }
}