/* Ertragswerke Storefront Utilities – vorkompilierte Styles (build-frei).
   Wird per <link> geladen; kein Theme-Build nötig. */

/* ---------- Mengen-Stepper ---------- */
.qb-qty { display:inline-flex; align-items:stretch; border:1px solid #cfd7dc; border-radius:.35rem; overflow:hidden; background:#fff; height:2.6rem; vertical-align:middle; }
.qb-qty__btn { border:0; background:#f3f6f7; color:#2b3136; width:2.4rem; min-width:2.4rem; font-size:1.15rem; line-height:1; font-weight:700; cursor:pointer; transition:background-color .15s ease,color .15s ease; -webkit-user-select:none; user-select:none; }
.qb-qty__btn:hover { background:#2c7d90; color:#fff; }
.qb-qty__btn:active { filter:brightness(.92); background:#2c7d90; color:#fff; }
.qb-qty__btn:disabled,.qb-qty__btn.is-disabled { opacity:.4; cursor:default; background:#f3f6f7; color:#2b3136; }
.qb-qty__input { width:3rem; min-width:0; height:100%; padding:.25rem; border:0; border-left:1px solid #cfd7dc; border-right:1px solid #cfd7dc; border-radius:0; text-align:center; font-weight:600; color:#2b3136; background:#fff; box-shadow:none; -moz-appearance:textfield; appearance:textfield; }
.qb-qty__input:focus { outline:none; box-shadow:inset 0 0 0 2px rgba(44,125,144,.45); }
.qb-qty__input::-webkit-outer-spin-button,.qb-qty__input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ---------- Kauf-Zeile: Stepper NEBEN dem Button (eine Zeile) ---------- */
/* Stepper + Kauf-Button in einer Zeile.
   Der Button braucht mindestens 9rem, sonst wird seine Beschriftung
   abgeschnitten („Ab ins Körb…"). Bekommt er die nicht, rutscht er per
   flex-wrap in eine eigene Zeile und bleibt damit immer lesbar. */
.qb-buy-row { display:flex; flex-wrap:wrap; gap:.4rem; align-items:stretch; }
.qb-buy-row .qb-qty { flex:0 0 auto; }
.qb-buy-row .d-grid { flex:1 1 9rem; display:block; min-width:0; }
.qb-buy-row .btn-buy { width:100%; height:100%; }

/* Auf schmalen Bildschirmen bekommen BEIDE Seiten etwas Platz zurück, damit
   „Ab ins Körbchen" vollständig lesbar bleibt statt als „Ab ins Körb…"
   abgeschnitten zu werden:
     • Stepper schmaler (7,8rem -> 6,2rem)
     • Button mit kleinerer Schrift und knapperem Innenabstand
   Zusammen gewinnt der Button rund 40 % Textbreite. */
@media (max-width: 767.98px) {
    .qb-buy-row .qb-qty { height:2.4rem; }
    .qb-buy-row .qb-qty__btn { width:2rem; min-width:2rem; font-size:1.05rem; }
    .qb-buy-row .qb-qty__input { width:2.2rem; }
    .qb-buy-row .btn-buy {
        padding-left:.4rem;
        padding-right:.4rem;
        font-size:.9rem;
        white-space:nowrap;
        overflow:visible;
        text-overflow:clip;
    }
}

/* Sehr schmale Geräte: lieber untereinander als abgeschnitten. */
@media (max-width: 379.98px) {
    .qb-buy-row .qb-qty { flex:1 0 100%; justify-content:center; }
    .qb-buy-row .d-grid { flex:1 0 100%; }
}

/* ---------- Erfolgs-Feedback am Kauf-Button ---------- */
.btn-buy.qb-add--success { background-color:#3cc261; border-color:#3cc261; color:#fff; pointer-events:none; }

/* ---------- Bild-Overlay: Hover-Bild + Badges + Quick-View ---------- */
.qb-media { position:relative; overflow:hidden; }
.qb-media .qb-hover-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .25s ease; pointer-events:none; }
@media (hover:hover){ .qb-media:hover .qb-hover-image { opacity:1; } }

.qb-badge { position:absolute; z-index:3; font-weight:700; line-height:1.3; white-space:nowrap; pointer-events:none; }
.qb-badge--pill { padding:.15rem .5rem; border-radius:.25rem; font-size:.75rem; }
.qb-badge--seal { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; font-size:.62rem; padding:.2rem; }
.qb-badge--bar-top,.qb-badge--bar-bottom { left:0; right:0; width:100%; text-align:center; padding:.3rem .25rem; font-size:.8rem; }
.qb-badge--bar-top { top:0; }
.qb-badge--bar-bottom { bottom:0; }
.qb-badge--ribbon { width:150px; text-align:center; padding:.22rem 0; font-size:.72rem; }
.qb-badge--pill.qb-pos--top-left,.qb-badge--seal.qb-pos--top-left { top:.5rem; left:.5rem; }
.qb-badge--pill.qb-pos--top-right,.qb-badge--seal.qb-pos--top-right { top:.5rem; right:.5rem; }
.qb-badge--pill.qb-pos--bottom-left,.qb-badge--seal.qb-pos--bottom-left { bottom:.5rem; left:.5rem; }
.qb-badge--pill.qb-pos--bottom-right,.qb-badge--seal.qb-pos--bottom-right { bottom:.5rem; right:.5rem; }
.qb-badge--ribbon.qb-pos--top-left { top:20px; left:-42px; transform:rotate(-45deg); }
.qb-badge--ribbon.qb-pos--top-right { top:20px; right:-42px; transform:rotate(45deg); }
.qb-badge--ribbon.qb-pos--bottom-left { bottom:20px; left:-42px; transform:rotate(45deg); }
.qb-badge--ribbon.qb-pos--bottom-right { bottom:20px; right:-42px; transform:rotate(-45deg); }

.qb-quickview-btn { position:absolute; left:50%; bottom:.5rem; transform:translateX(-50%); z-index:3; border:0; border-radius:.25rem; padding:.35rem .75rem; font-size:.8rem; background:rgba(23,46,59,.85); color:#fff; cursor:pointer; opacity:0; transition:opacity .2s ease; white-space:nowrap; }
@media (hover:hover){ .qb-media:hover .qb-quickview-btn { opacity:1; } }
.qb-quickview-btn:focus { opacity:1; }
.qb-quickview-btn:hover { background:#172e3b; }

/* ---------- Verfügbarkeit / Lagerbestand ---------- */
.qb-availability { margin-bottom:.4rem; font-size:.85rem; }
.qb-lowstock { margin-bottom:.4rem; font-size:.85rem; font-weight:600; color:#d9822b; }

/* ---------- Hinweis-Banner ---------- */
.ews-usp { width:100%; font-size:.9rem; }
.ews-usp__inner { max-width:1300px; margin:0 auto; padding:.5rem 1rem; display:flex; align-items:center; justify-content:center; gap:1rem; text-align:center; }
.ews-usp__text a { color:inherit; text-decoration:underline; }
.ews-usp__close { margin-left:auto; background:none; border:0; font-size:1.3rem; line-height:1; cursor:pointer; opacity:.8; }
.ews-usp__close:hover { opacity:1; }

/* ---------- Quick-View-Modal (build-frei, eigenes Overlay) ---------- */
.qb-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:2000; padding:1rem; }
.qb-modal { background:#fff; border-radius:.5rem; max-width:820px; width:100%; max-height:90vh; overflow:auto; padding:1.5rem; position:relative; }
.qb-modal__close { position:absolute; top:.5rem; right:.75rem; background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:#172e3b; }
.qb-quickview { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start; }
.qb-quickview__media { flex:1 1 240px; max-width:360px; }
.qb-quickview__img { width:100%; height:auto; object-fit:contain; }
.qb-quickview__info { flex:1 1 260px; display:flex; flex-direction:column; gap:.75rem; }
.qb-quickview__title { margin:0; font-size:1.4rem; }
.qb-quickview__desc { font-size:.95rem; opacity:.85; }
.qb-quickview__details { margin-top:.25rem; font-size:.9rem; }
@media (max-width:575px){ .qb-quickview { flex-direction:column; } .qb-quickview__media { max-width:100%; } }

/* ---------- Alternativprodukte (Produktseite) ---------- */
.qb-alternatives { margin-top:1rem; padding:1rem; border:1px solid #cfd7dc; border-radius:.5rem; background:#f8fafb; }
.qb-alternatives__headline { font-weight:700; margin-bottom:.75rem; }
.qb-alternatives__list { display:flex; flex-direction:column; gap:.5rem; }
.qb-alt { display:flex; align-items:center; gap:.75rem; padding:.5rem; border-radius:.35rem; text-decoration:none; color:inherit; transition:background-color .15s ease; }
.qb-alt:hover { background:#eef3f5; }
.qb-alt__img { width:56px; height:56px; object-fit:contain; flex:0 0 auto; }
.qb-alt__info { display:flex; flex-direction:column; }
.qb-alt__brand { font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; opacity:.7; }
.qb-alt__name { font-weight:600; }
.qb-alt__price { font-size:.9rem; }

/* ---------- „Wieder verfügbar" ---------- */
.qb-stocknotify { margin-top:1rem; }
.qb-stocknotify__btn { width:100%; }
.qb-stocknotify__active { font-weight:600; color:#3b6d11; margin-bottom:.35rem; }
.qb-stocknotify__cancel { background:none; border:0; padding:0; color:#5f5e5a; text-decoration:underline; cursor:pointer; font-size:.85rem; }
.qb-stocknotify__hint { font-size:.9rem; opacity:.9; }

/* ---------- Checkout: Trinkgeld / Aufrunden / Spende ---------- */
.ews-contrib { margin:1rem 0; padding:1rem; border:1px solid #cfd7dc; border-radius:.5rem; background:#f8fafb; }
.ews-contrib__headline { font-weight:700; margin-bottom:.6rem; }
.ews-contrib__option { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.ews-contrib__label { flex:1 1 auto; }
.ews-contrib__buttons { display:flex; gap:.4rem; flex-wrap:wrap; }
.ews-contrib__buttons form { margin:0; }
.ews-contrib__btn { border:1px solid #2c7d90; background:#fff; color:#2c7d90; border-radius:.3rem; padding:.3rem .7rem; cursor:pointer; }
.ews-contrib__btn:hover { background:#2c7d90; color:#fff; }
.ews-contrib__active { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-weight:600; color:#3b6d11; }
.ews-contrib__active form { margin:0; }
.ews-contrib__remove { background:none; border:0; color:#5f5e5a; text-decoration:underline; cursor:pointer; font-size:.85rem; }

/* ---------- USP-Top-Bar ---------- */
.ews-topbar { width:100%; font-size:.85rem; }
.ews-topbar__inner { max-width:1300px; margin:0 auto; padding:.4rem 1rem; display:flex; gap:1.5rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.ews-topbar__item { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.ews-topbar__item a { color:inherit; text-decoration:underline; }

/* ---------- Scroll-Reveal ---------- */
.ews-reveal { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.ews-reveal.ews-reveal--in { opacity:1; transform:none; }

/* ---------- Kachel-Zusatzinfo + Produkt-Link-Buttons ---------- */
.ews-listing-info { font-size:.85rem; margin-top:.25rem; color:#2b3136; }
.ews-linkbtn { display:block; width:100%; margin-top:.5rem; text-align:center; text-decoration:none; }
.ews-linkbtn:hover { filter:brightness(.93); text-decoration:none; }

/* ---------- Preis auf Anfrage ---------- */
.ews-onrequest { margin-top:.25rem; }
.ews-onrequest__btn { width:100%; display:block; text-align:center; }
.ews-onrequest__note { font-size:.9rem; margin-top:.6rem; color:#5f5e5a; }
.ews-onrequest-price { font-size:1.15rem; font-weight:700; color:#2b3136; margin:.2rem 0; }

/* Preis-Zusatz („pro Monat") + Abrechnungs-Kleingedrucktes */
.ews-onrequest-price__suffix { font-size:1rem; font-weight:600; color:#2b3136; margin:-.15rem 0 0; }
.ews-onrequest-price__note { font-size:.85rem; line-height:1.45; color:#5f5e5a; margin:.35rem 0 0; }

/* Inklusivleistungen als Häkchen-Liste über dem Anfrage-Button */
.ews-onrequest__list { list-style:none; margin:.15rem 0 .85rem; padding:0; }
.ews-onrequest__item { position:relative; padding-left:1.4rem; margin:.3rem 0; font-size:.9rem; line-height:1.45; }
.ews-onrequest__item::before {
    content:''; position:absolute; left:.15rem; top:.42em;
    width:.42rem; height:.72rem; border:solid currentColor;
    border-width:0 2px 2px 0; transform:rotate(45deg); opacity:.75;
}
.ews-onrequest--card .ews-onrequest__btn { margin-top:.35rem; }
.ews-onrequest-price__suffix--card { font-size:.85rem; font-weight:600; opacity:.8; margin:0 0 .25rem; }

/* ---------- „Das hattest du im Warenkorb" (vor der Kasse) ---------- */
.ews-recall { margin-bottom: .75rem; padding: .75rem; border: 1px solid #e0e6eb; border-radius: .5rem; background: #f8fafb; }
.ews-recall__headline { font-weight: 700; margin-bottom: .5rem; font-size: .95rem; }
.ews-recall__list { display: flex; flex-direction: column; gap: .5rem; }
.ews-recall__item { display: flex; align-items: center; gap: .6rem; }
.ews-recall__img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; background: #fff; border-radius: .25rem; }
.ews-recall__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ews-recall__name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ews-recall__price { font-size: .8rem; opacity: .8; }
.ews-recall__form { flex: 0 0 auto; margin: 0; }
.ews-recall__add { white-space: nowrap; }