/** * Shop-Artikelansicht Styles * * Breakpoints (wie res-*.css):* - Desktop:min-width:1020px (2-Spalten) * - Mobile:max-width:1019px (1-Spalte, einklappbar) */ /* ============================================ CSS-Variablen für Artikelansicht ============================================ */ .shopArtikel{--artikel-color-teal:#01999c;--artikel-color-blue:#0375be;--artikel-color-darkblue:#004579;--artikel-color-lightblue:#eaf3fd;--artikel-color-green:#7ab51d;--artikel-color-yellow:#f5a623;--artikel-color-orange:#e67e22;--artikel-color-red:#e74c3c;--artikel-color-grey:#666666;--artikel-color-lightgrey:#dddddd;--artikel-color-white:#ffffff;--artikel-color-black:#000000;--artikel-border-radius:8px;--artikel-shadow:0 2px 8px rgba(0, 0, 0, 0.1);/* background-color:var(--color-lightblue);*/}/* ============================================ Breadcrumb ============================================ */ .artikel__breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0.15rem;font-size:1rem;padding:0}.artikel__breadcrumb-link{display:inline-block;padding:0.15rem 0.5rem;border-radius:0.75rem;color:var(--color-white);text-decoration:none;font-weight:400;transition:opacity 0.15s ease}.artikel__breadcrumb-link:hover{opacity:0.85}.artikel__breadcrumb-link,
.artikel__breadcrumb-link:hover,
.artikel__breadcrumb-link:focus,
.artikel__breadcrumb-link:visited{color:var(--color-white);text-decoration:none}.artikel__breadcrumb-separator{color:var(--artikel-color-black);font-weight:400;margin:0 0.25rem}/* ============================================ Hauptlayout:2-Spalten (Desktop) / 1-Spalte (Mobile) ============================================ */ .artikel__layout{display:grid;gap:0;/* padding:2rem 0;*/ overflow:hidden}/* Desktop:2 Spalten */
@media screen and (min-width:1020px){.artikel__layout{grid-template-columns:1fr 1fr;gap:2rem}}/* ============================================ Mobile-Only / Desktop-Only Elemente ============================================ */ .artikel__mobileOnly{display:block}.artikel__info--desktop{display:none}@media screen and (min-width:1020px){.artikel__mobileOnly{display:none}.artikel__info--desktop{display:flex}}/* ============================================ Linke Spalte:Bilder + Info (Desktop) ============================================ */ .artikel__left{display:flex;flex-direction:column;/* gap:2rem;*/ min-width:0}/* Bildergalerie mit Swiper */
.artikel__gallery{position:relative;background:var(--color-gradient-blue);overflow:hidden}.artikel__gallery .sliderWrapper{width:100%;overflow:hidden}.artikel__gallery .swsArtikelSwiper{width:100%;overflow:hidden}.artikel__gallery .swiper-slide{display:flex;align-items:center;justify-content:center;box-sizing:border-box}.artikel__gallery .swiper-wrapper{width:100%}.artikel__gallery .swiper-slide img{max-width:100%;object-fit:contain}/* Swiper Pagination */
.artikel__gallery .swiper-pagination{position:absolute;bottom:auto;/* padding:0.5rem 0 1rem 0;*/}.artikel__gallery .swiper-pagination-bullet{width:1rem;height:1rem;background-color:var(--artikel-color-white);border:2px solid var(--artikel-color-teal);opacity:1;margin:0 4px}.artikel__gallery .swiper-pagination-bullet-active{background-color:var(--artikel-color-teal)}.artikel__badgeContainer{position:absolute;bottom:1rem;right:1rem;z-index:10;display:flex;flex-direction:column;gap:0.5rem;align-items:end;& > div{background-color:var(--color-white);color:var(--color-blue)}}/* Badge (Abpackung) */
.artikel__badge{font-size:1.15rem;font-weight:700;display:flex;justify-content:center;align-items:center;text-align:center;min-width:4rem;height:4rem;box-sizing:border-box;padding:0 0.25rem}/* Farb-Indikator */
.artikel__colorIndicator{width:4rem;height:4rem}.artikel__colorDot{display:block;width:100%;height:100%;border:0.25rem solid var(--color-white)}/* Produktinfo */
.artikel__info{/* display:flex;*/ background-color:var(--color-white);flex-direction:column;gap:1rem;padding:1rem}.artikel__title{margin:0;font-size:1.75rem;font-weight:700;color:var(--color-blue);line-height:1.2}.artikel__subtitle{font-size:1.5rem;color:var(--artikel-color-black);line-height:1.2}.artikel__description{color:var(--color-black);& > table{width:100%;& tr{& > td{padding:0.15rem 0.3rem 0.15rem 0;border-bottom:1px solid var(--color-black)}}& tr:last-child{& > td{border-bottom:0 none}}}}.artikel__description p{margin:0 0 1rem 0}.artikel__description p:last-child{margin-bottom:0}/* ============================================ Rechte Spalte:Bestellung + Downloads + Kontakt ============================================ */ .artikel__right{display:flex;flex-direction:column;gap:2rem}/* Order Box Container */
.artikel__orderBox{background-color:var(--color-white);padding:1rem}/* Order Header */
.artikel__orderHeader{/* padding-bottom:1rem;border-bottom:2px solid var(--artikel-color-teal);*/}.artikel__orderBoxInner{display:grid;grid-template-columns:1fr;gap:2rem}@media screen and (min-width:1800px){.artikel__orderBoxInner{grid-template-columns:1fr 1fr}}.artikel__orderBoxLeft{display:flex;flex-direction:column;gap:1rem}/* Varianten-Gruppe (Farben, Abpackungen) */
.artikel__variantGroup_trenner{width:100%;height:0.2rem;background-color:var(--color-lightblue)}.artikel__variantLabel{font-size:1.15rem;font-weight:700;color:var(--color-black);margin-bottom:0.25rem}.artikel__variantButtons{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.artikel__variantBtn,
.artikel__variantBtn:hover,
.artikel__variantBtn:visited{display:flex;align-items:center;justify-content:center;font-size:0.9rem;padding:0.15rem 0.5rem;border:3px solid var(--color-lightgrey);border-radius:1rem;background-color:var(--color-white);color:var(--color-black);font-size:1rem;text-decoration:none;cursor:pointer;transition:all 0.15s ease}.artikel__variantBtn:hover{border:3px solid var(--color-blue)}.artikel__variantBtn--active,
.artikel__variantBtn--active:hover,
.artikel__variantBtn--active:visited{border:3px solid var(--color-blue);background-color:var(--color-blue);color:var(--color-white)}.artikel__variantBtnColor.artikel__variantBtn--active,
.artikel__variantBtnColor.artikel__variantBtn--active:hover,
.artikel__variantBtnColor.artikel__variantBtn--active:visited{background-color:inherit;color:var(--color-black)}.artikel__variantBtnColor.artikel__variantBtnColor--light,
.artikel__variantBtnColor.artikel__variantBtnColor--light:hover,
.artikel__variantBtnColor.artikel__variantBtnColor--light:visited{background-color:inherit;color:var(--color-white)}/* Nicht verfügbare Varianten */
.artikel__variantBtn--unavailable{border-style:dashed;border-color:var(--color-lightgrey);color:var(--color-darkgrey);background-color:var(--color-white);opacity:0.7}.artikel__variantBtn--unavailable:hover{border-color:var(--color-blue);opacity:1}.artikel__variantBtn--unavailable .artikel__variantColor{opacity:0.5}.artikel__orderBoxRight{display:flex;flex-direction:column;gap:1rem}/* Preis-Box */
.artikel__priceBox{display:flex;flex-direction:column;gap:0.25rem}.artikel__priceBoxInner{display:flex;gap:1.5rem}.artikel__priceLeft{display:flex;flex-direction:column;gap:0.25rem}.artikel__priceLabel{font-size:1.15rem;font-weight:700;color:var(--color-black)}.artikel__priceInfo{display:flex;flex-direction:column;gap:0.25rem;color:var(--color-black)}.artikel__priceRight{display:flex;flex-direction:column;flex:1 1 auto;align-items:end}.artikel__priceRightInner{display:flex;gap:0.25rem;align-items:start}.artikel__priceDiscount{display:block;padding:0.1rem 0.25rem;background-color:var(--color-red);border-radius:0.5rem;color:var(--color-white)}.artikel__priceValue{font-size:2rem;font-weight:700;color:var(--color-green);line-height:1}.artikel__priceValue.artikel__priceValue--angebot{color:var(--color-black)}.artikel__priceValue.artikel__priceValue--persoenlich{color:var(--color-blue)}.artikel__priceValue sup{font-size:0.7em;vertical-align:super;top:0.2em}.artikel__priceOld{font-size:0.75rem;color:var(--color-green)}/* Menge + Warenkorb */
.artikel__orderActions{display:flex;flex-direction:column;gap:0.75rem}.artikel__quantity{display:flex;align-items:center;gap:0.75rem}.artikel__quantity label{font-size:0.9rem;font-weight:500;color:var(--artikel-color-black)}.artikel__quantitySelect{flex:1;height:42px;padding:0 2.5rem 0 1rem;border:1px solid var(--color-darkgrey);border-radius:0.5rem;background-color:var(--color-white);font-size:0.95em;color:var(--color-black);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5rem' height='1.5rem' viewBox='0 0 12 12'%3E%3Cpath fill='%23666666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}.artikel__cartBtn{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:0.2rem 0;background-color:var(--color-green);border:none;border-radius:var(--border-radius);font-size:1rem;color:var(--artikel-color-white);cursor:pointer}.artikel__cartBtn > span:nth-child(2){width:1.75rem}/* Favoriten */
.artikel__favorit{}.artikel__favoritLink,
.artikel__favoritLink:hover,
.artikel__favoritLink:visited{display:inline-flex;align-items:center;gap:0.5rem;color:var(--color-black);text-decoration:none;font-size:0.9rem;transition:color 0.15s ease}.artikel__favoritLink:hover{color:var(--color-green)}.artikel__favoritLink .materialIcon,
.artikel__favoritLink:hover .materialIcon,
.artikel__favoritLink:visited .materialIcon{font-size:2rem;color:var(--color-green)}.artikel__favoritLink--active .materialIcon{font-variation-settings:'FILL' 1}/* Staffelpreise */
.artikel__staffelpreiseLabel{font-size:1.15rem;font-weight:700;color:var(--color-black);margin-bottom:0.25rem}.artikel__staffelpreiseTable{/* width:100%;*/ border-collapse:collapse}.artikel__staffelpreiseTable td{padding:0;font-size:0.9rem;color:var(--color-green)}.artikel__staffelpreiseTable td:last-child{padding-left:1rem}.artikel__staffelpreisWert{text-align:right;white-space:nowrap}.artikel__staffelpreisAlt{color:var(--artikel-color-grey);text-decoration:line-through;margin-right:0.25rem}.artikel__staffelpreisPfeil{color:var(--artikel-color-teal);margin:0 0.25rem}.artikel__staffelpreisNeu{color:var(--artikel-color-teal);font-weight:600}/* ============================================ Einklappbare Bereiche (Collapsible) ============================================ */ .artikel__collapsible{background-color:var(--artikel-color-white);overflow:hidden}.artikel__collapsibleHeader{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1rem;background-color:var(--artikel-color-white);border:none;font-size:1.15rem;font-weight:700;color:var(--artikel-black);cursor:pointer;transition:background-color 0.15s ease}.artikel__collapsibleIcon{font-size:1.5rem;transition:transform 0.2s ease}.artikel__collapsible--open .artikel__collapsibleIcon{transform:rotate(180deg)}.artikel__collapsibleContent{max-height:0;overflow:hidden;transition:max-height 0.3s ease}.artikel__collapsible--open .artikel__collapsibleContent{max-height:1000px}.artikel__collapsibleContent > *{padding:0 1rem 1rem 1rem}/* Desktop:Collapsibles immer offen, kein Header */
@media screen and (min-width:1020px){.artikel__collapsible{border:none;background:transparent}.artikel__collapsibleHeader{display:none}.artikel__collapsibleContent{max-height:none;overflow:visible}.artikel__collapsibleContent > *{padding:0}/* Staffelpreise Desktop-Stil */ /* .artikel__collapsible--staffel .artikel__staffelpreise{padding:1rem;border:1px solid var(--artikel-color-lightgrey);border-radius:var(--artikel-border-radius)}*/ /* Downloads Desktop-Stil */ /* .artikel__collapsible--downloads .artikel__downloads{padding:1.25rem;background-color:var(--artikel-color-lightblue);border-radius:var(--artikel-border-radius)}*/ /* Hinweise Desktop-Stil */ /* .artikel__collapsible--hinweise .artikel__hinweise{padding:1.25rem;background-color:var(--artikel-color-lightblue);border-radius:var(--artikel-border-radius)}*/}.artikel__kontaktDownload{display:grid;grid-template-columns:1fr;gap:2rem}@media screen and (min-width:1360px){.artikel__kontaktDownload{grid-template-columns:1fr 1fr;& > div{background-color:var(--color-white)}}}/* ============================================ Downloads ============================================ */ .artikel__downloads{padding:1rem;background-color:var(--color-white)}.artikel__downloads .artikel__sectionTitle{display:none}@media screen and (min-width:1020px){.artikel__downloads .artikel__sectionTitle{display:block}}.artikel__downloadList{display:flex;flex-direction:column;gap:0.5rem}.artikel__downloadLink,
.artikel__downloadLink:hover,
.artikel__downloadLink:visited{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.25rem 1.5rem;background-color:var(--button-background);border:var(--button-border-width) solid var(--button-border-color);border-radius:var(--button-border-radius);color:var(--button-color);text-decoration:none;font-size:1rem;transition:all 0.15s ease}.artikel__downloadLink:hover{border:var(--button-border-width) solid var(--button-border-color);background-color:var(--button-hover-background);color:var(--button-hover-color)}.artikel__downloadLink > span:nth-child(2),
.artikel__downloadLink:visited > span:nth-child(2),
.artikel__downloadLink:hover > span:nth-child(2){width:1.5em;& *{fill:var(--button-icon-color)}}.artikel__downloadLink:hover > span:nth-child(2){& *{fill:var(--button-hover-icon-color)}}/* ============================================ Kontakt ============================================ */ .artikel__kontakt{padding:1rem;background-color:var(--color-white)}.artikel__sectionTitle{margin:0 0 0.5rem 0;font-size:1.15rem;font-weight:700;color:var(--color-black)}.artikel__kontaktContent{display:flex;flex-direction:column;gap:0.5rem}.artikel__kontaktContent p{margin:0;font-size:1rem;color:var(--color-black)}.artikel__kontaktInfo{display:flex;align-items:center;gap:0.5rem;font-size:0.95rem}.artikel__kontaktInfo .materialIcon{font-size:1.25rem;color:var(--artikel-color-teal)}.artikel__kontaktInfo a{color:var(--artikel-color-black);text-decoration:none}.artikel__kontaktInfo a:hover{color:var(--artikel-color-teal)}.artikel__kontaktBtn{display:inline-block;padding:0.6rem 1.5rem;border:1px solid var(--artikel-color-teal);border-radius:100px;background-color:var(--artikel-color-white);color:var(--artikel-color-teal);font-size:0.9rem;font-weight:500;text-decoration:none;text-align:center;cursor:pointer;transition:all 0.15s ease;margin-top:0.5rem}.artikel__kontaktBtn:hover{background-color:var(--artikel-color-teal);color:var(--artikel-color-white)}/* ============================================ Hinweise ============================================ */ .artikel__hinweise{padding:1rem;background-color:var(--artikel-color-white)}.artikel__hinweiseContent{color:var(--color-black)}/* ============================================ Responsive:Mobile (max-width:1019px) ============================================ */ @media screen and (max-width:1019px){.artikel__priceBox{flex-direction:column;gap:1rem}.artikel__priceRight{align-items:flex-start}}/* Breite 5 (Mobile+):max-width:759px */
@media screen and (max-width:759px){.artikel__breadcrumb{font-size:0.85rem}.artikel__breadcrumb-link{padding:0.3rem 0.6rem}}/* Breite 6 (Mobil):max-width:479px */
@media screen and (max-width:479px){.artikel__breadcrumb{font-size:0.8rem}.artikel__breadcrumb-link{padding:0.25rem 0.5rem}.artikel__variantButtons{gap:0.35rem}.artikel__variantBtn{padding:0.4rem 0.6rem;font-size:0.8rem}.artikel__orderTitle{font-size:1.1rem}.artikel__priceValue{font-size:1.5rem}}/* ============================================ Hinweis-Modal für nicht verfügbare Varianten ============================================ */ .artikel__modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0.2s ease}.artikel__modal--visible{opacity:1;visibility:visible}.artikel__modalContent{display:flex;flex-direction:column;gap:1rem;position:relative;background-color:var(--color-green);box-shadow:0 4px 20px rgba(0, 0, 0, 0.2);max-width:420px;width:90%;max-height:90vh;overflow:auto;box-sizing:border-box;padding:1rem;border-radius:0.5rem}.artikel__modalClose{position:absolute;top:1rem;right:1rem;width:28px;height:28px;border:none;background:transparent;font-size:1.5rem;line-height:1;color:var(--color-white);cursor:pointer;transition:color 0.15s ease;padding:0}.artikel__modalHeader{display:flex;align-items:center;gap:0.5rem;color:var(--color-white)}.artikel__modalHeader .materialIcon{font-size:1.25rem}.artikel__modalBody{color:var(--color-white);& > p:last-child{margin-bottom:0}}.artikel__modalFooter{text-align:center}.artikel__modalBtn{display:inline-block;padding:0.5rem 0;background-color:var(--color-green);border:2px solid var(--color-white);border-radius:var(--border-radius);color:var(--color-white);font-size:1rem;cursor:pointer;width:100%}.artikel__modalBtn:hover{background-color:var(--color-white);color:var(--color-green)}/* ============================================ X+Y Aktions-Badge (auf Artikelbild) ============================================ */ .artikel__aktionBadge{position:absolute;top:8px;left:8px;background-color:var(--color-green);color:var(--color-white);font-weight:700;/* font-size:0.85rem;*/ padding:4px 12px;border-radius:4px;z-index:2;line-height:1.3;letter-spacing:0.02em}/* X+Y Aktion Info-Box im Bestellbereich */
.artikel__aktionInfo{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;padding:0.6rem 0.8rem;background-color:color-mix(in srgb, var(--color-green) 10%, transparent);border:1px solid var(--color-green);border-radius:6px;margin-bottom:0.5rem}.artikel__aktionInfoBadge{display:inline-block;background-color:var(--color-green);color:var(--color-white);font-weight:700;/* font-size:0.8rem;*/ padding:2px 8px;border-radius:4px;line-height:1.4}.artikel__aktionInfoText{/* font-size:0.85rem;*/ font-weight:500;color:var(--color-black)}