/** * Shop-Slider Styles * * Wiederverwendbare Slider-Komponenten für:* - Häufig zusammen gekauft (Artikel) * - Häufig gekaufte Artikel der Warengruppe (Artikel) * - Hauptwarengruppen (Warengruppen-Kacheln) * - Jetzt im Angebot (Artikel) * - Häufig gekaufte Produkte (Artikel) */ /* ============================================ CSS-Variablen für Slider ============================================ */ .shopSlider{--slider-color-teal:#01999c;--slider-color-blue:#0375be;--slider-color-darkblue:#004579;--slider-color-lightblue:#eaf3fd;--slider-color-green:#7ab51d;--slider-color-yellow:#f5a623;--slider-color-orange:#e67e22;--slider-color-red:#e74c3c;--slider-color-grey:#666666;--slider-color-lightgrey:#dddddd;--slider-color-white:#ffffff;--slider-color-black:#000000;--slider-border-radius:8px;--slider-card-width:232px}/* ============================================ Slider Section Container ============================================ */ .shopSlider{/* padding:2rem 0;*/}/* Header-Zeile mit optionalem Button */
.shopSlider__headerRow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem & h1, & h2, & h3, & h4, & h5, & h6{margin:0}}.shopSlider__header{margin:0;font-size:1.5rem;font-weight:700;color:var(--slider-color-teal);line-height:1.3}.shopSlider__headerBtn{}/* ============================================ Swiper Container ============================================ */ .shopSlider__swiperWrapper{/* position:relative;overflow:hidden;*/}.shopSlider__swiper{width:var(--main-width);overflow:visible!important}.shopSlider__swiper .swiper-wrapper{align-items:stretch}.shopSlider__swiper .swiper-slide{width:var(--slider-card-width);height:auto;flex-shrink:0}/* Responsive Breiten für Slides */
@media screen and (min-width:480px){.shopSlider{--slider-card-width:232px}}@media screen and (min-width:760px){.shopSlider{--slider-card-width:232px}}@media screen and (min-width:1020px){.shopSlider{--slider-card-width:317px}}@media screen and (min-width:1360px){.shopSlider{--slider-card-width:302px}}@media screen and (min-width:1800px){.shopSlider{--slider-card-width:324px}}/* ============================================ Scrollbar ============================================ */ .shopSlider__scrollbar{position:static!important;margin-top:1.25rem;height:6px;background-color:var(--color-lightgrey);border-radius:3px}.shopSlider__scrollbar .swiper-scrollbar-drag{background-color:var(--color-blue);border-radius:3px;cursor:grab}.shopSlider__scrollbar .swiper-scrollbar-drag:active{cursor:grabbing}/* Scrollbar ausblenden wenn nicht nötig (Swiper macht das automatisch) */
.shopSlider__scrollbar.swiper-scrollbar-lock{display:none}/* ============================================ Slider Card:Artikel-Box ============================================ */ .sliderCard{display:flex;flex-direction:column;height:100%;background-color:var(--color-white);border:1px solid var(--color-lightgrey);overflow:hidden;transition:border-color 0.15s ease, box-shadow 0.15s ease}.sliderCard:hover{border-color:var(--color-darkgrey);box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}/* Bild-Bereich */
.sliderCard__image{position:relative;overflow:hidden;background:var(--color-gradient-blue)}.sliderCard__image img{width:100%;height:100%;object-fit:contain}/* Rabatt-Badge oben rechts */
.sliderCard__discount{position:absolute;top:0.5rem;right:0.5rem;padding:0.25rem 0.5rem;background-color:var(--color-red);border-radius:4px;font-size:0.75rem;font-weight:600;color:var(--color-white);z-index:2}.sliderCard__discount--persoenlich{background-color:var(--color-green)}.sliderCard__badgeContainer{z-index:2;position:absolute;bottom:0.5rem;right:0.5rem;display:flex;flex-direction:column;gap:0.25rem;align-items:end}/* Abpackungs-Badge unten rechts */
.sliderCard__badge{box-sizing:border-box;padding:0 0.15rem;background-color:var(--color-white);font-size:0.75rem;font-weight:600;color:var(--color-blue);min-width:2rem;height:2rem;display:flex;justify-content:center;align-items:center;text-align:center}/* Farb-Indikator unten links */
.sliderCard__color{display:block;width:2rem;height:2rem;border:2px solid var(--color-white)}/* Inhalt-Bereich */
.sliderCard__content{display:flex;flex-direction:column;flex:1;padding:0.75rem;gap:0.5rem}/* Artikelname */
.sliderCard__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--color-blue);line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.sliderCard__title a,
.sliderCard__title a:hover,
.sliderCard__title a:visited{color:inherit;text-decoration:none}/* Kurzbeschreibung */
.sliderCard__subtitle{margin:0;font-size:1rem;color:var(--color-gblack);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}/* Varianten / Details Button */
.sliderCard__variants{}/* Preis-Zeile:Warenkorb links, Preis rechts */
.sliderCard__priceRow{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-top:0.5rem}/* Warenkorb-Button */
.sliderCard__cart,
.sliderCard__cart:hover,
.sliderCard__cart:visited{display:flex;align-items:center;justify-content:center;width:3.5rem;height:2rem;background-color:var(--color-green);border:none;border-radius:1rem;color:var(--color-white);cursor:pointer;flex-shrink:0}.sliderCard__cart > span{width:1.5rem;display:flex;align-items:center}/* Preis-Bereich rechts */
.sliderCard__price{display:flex;flex-direction:column;align-items:flex-end}.sliderCard__priceOld{font-size:0.7rem;color:var(--color-green)}.sliderCard__priceValue{font-size:2rem;font-weight:700;color:var(--color-green);line-height:1}.sliderCard__priceValue sup{font-size:0.7em;vertical-align:super;top:0.2em}/* Preisfarben nach Typ */
.sliderCard__priceValue--angebot{color:var(--color-black)}.sliderCard__priceValue--persoenlich{color:var(--color-blue)}/* ============================================ Slider Card:Warengruppen-Box ============================================ */ .sliderCard--warengruppe{background-color:var(--color-white)}.sliderCard--warengruppe .sliderCard__image{}.sliderCard--warengruppe .sliderCard__image img{}.sliderCard--warengruppe .sliderCard__content{}.sliderCard--warengruppe .sliderCard__title{}.sliderCard--warengruppe .sliderCard__subtitle{}/* "mehr erfahren" Button */
.sliderCard__more{}/* ============================================ Responsive:Mobile ============================================ */ @media screen and (max-width:479px){.shopSlider{--slider-card-width:170px}.shopSlider__header{font-size:1.25rem}.sliderCard__title{font-size:0.85rem}.sliderCard__subtitle{font-size:0.75rem}.sliderCard__variants{font-size:0.75rem;padding:0.35rem 0.5rem}.sliderCard__cart{width:36px;height:36px}.sliderCard__priceValue{font-size:1rem}}/* ============================================ Hintergrundfarben für Sections ============================================ */ /* .shopSlider--bgWhite{background-color:var(--slider-color-white)}.shopSlider--bgLightblue{background-color:var(--slider-color-lightblue)}*/ /* ============================================ Platzhalter-Sections ============================================ */ .shopPlaceholder{padding:2rem 0}.shopPlaceholder__box{padding:2rem;background-color:#f5f5f5;border:2px dashed #ccc;border-radius:8px;text-align:center;color:#888}.shopPlaceholder__box--hero{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.shopPlaceholder__box--warengruppe{display:grid;grid-template-columns:1fr 1fr;gap:2rem;text-align:left;padding:2.5rem}@media screen and (max-width:759px){.shopPlaceholder__box--warengruppe{grid-template-columns:1fr}}.shopPlaceholder__title{margin:0 0 0.5rem 0;font-size:1.5rem;font-weight:700;color:#01999c}.shopPlaceholder__text{margin:0;font-size:1rem;color:#666;line-height:1.6}.shopPlaceholder__image{display:flex;align-items:center;justify-content:center;background-color:#e8e8e8;border-radius:8px;min-height:200px}.shopPlaceholder__icon{font-size:4rem;color:#ccc}/* Linkboxen-Platzhalter */
.shopPlaceholder__linkboxes{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1rem}.shopPlaceholder__linkbox{padding:1.5rem;background-color:#f5f5f5;border:1px dashed #ccc;border-radius:8px;text-align:center;color:#888}/* Mein Bereich Platzhalter */
.shopPlaceholder__meinBereich{padding:2rem;background-color:#eaf3fd;border:2px dashed #0375be;border-radius:8px;text-align:center;color:#0375be}/* ============================================ X+Y Aktions-Badge (auf Slider-Artikelbild) ============================================ */ .sliderCard__aktion{position:absolute;top:8px;left:8px;background-color:var(--color-green, #01999c);color:var(--color-white, #ffffff);font-weight:700;/* font-size:0.7rem;*/ padding:2px 7px;border-radius:4px;z-index:2;line-height:1.3;letter-spacing:0.02em}