/* OPC v2 – Frontend: klickbare Zonen über dem Bilder-Slider */
.opc2-zones-data { display: none !important; }

.opc2-zone-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* Slider-Steuerung bleibt bedienbar */
    z-index: 20;            /* ÜBER dem nivo-Hauptbild (z-index 6) */
}
.opc2-zone-link {
    position: absolute;
    display: block;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;   /* unsichtbar */
    transition: background .12s ease;
}
.opc2-zone-link:hover,
.opc2-zone-link:focus {
    background: rgba(20, 170, 245, .12);   /* dezent nur beim Drüberfahren */
    outline: none;
}

/* ===== Sichtbare Markierung je Zone (Art kommt aus dem Zonen-Editor) =====
   Ohne Markierung bleibt die Zone unsichtbar – dann ahnt der Kunde nicht, dass er klicken kann. */
.opc2-zone-dot {
    position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    display: flex; align-items: center; justify-content: center;
}
.opc2-zone-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #14AAF5; }
/* Pulsierender Ring – zieht den Blick, ohne das Motiv zu verdecken. */
.opc2-zone-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(20, 170, 245, .55); animation: opc2-zone-pulse 2s ease-out infinite;
}
@keyframes opc2-zone-pulse {
    0%   { transform: scale(1);   opacity: .9; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .opc2-zone-dot::after { animation: none; } }
.opc2-zone-link:hover .opc2-zone-dot { transform: scale(1.12); transition: transform .12s ease; }

/* Variante „Punkt mit Plus-Icon" */
.opc2-zone-m-plus .opc2-zone-dot::before {
    content: '+'; width: auto; height: auto; background: none;
    color: #14AAF5; font-size: 17px; line-height: 1; font-weight: 700;
}

/* Titel als Sprechblase beim Drüberfahren (Punkt/Plus). Auf Touch-Geräten weglassen –
   dort gibt es kein Hover, und der Punkt allein zeigt die Klickbarkeit bereits. */
.opc2-zone-tip {
    position: absolute; left: 50%; bottom: calc(50% + 18px); transform: translate(-50%, 4px);
    background: #16212b; color: #fff; font-size: 12.5px; line-height: 1.25; padding: 5px 9px;
    border-radius: 6px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.opc2-zone-tip::after {
    content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #16212b;
}
.opc2-zone-link:hover .opc2-zone-tip,
.opc2-zone-link:focus .opc2-zone-tip { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .opc2-zone-tip { display: none; } }

/* Variante „Titel-Label" – dauerhaft sichtbar */
.opc2-zone-lab {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, .94); color: #16212b; font-size: 12.5px; font-weight: 600;
    padding: 5px 11px; border-radius: 999px; white-space: nowrap; max-width: 92%;
    overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    transition: background .12s ease;
}
.opc2-zone-link:hover .opc2-zone-lab { background: #fff; }

/* Variante „Rahmen" – zeigt die gesamte klickbare Fläche */
.opc2-zone-m-frame {
    border: 2px solid rgba(255, 255, 255, .9); border-radius: 6px;
    background: rgba(255, 255, 255, .10); box-shadow: inset 0 0 0 1px rgba(16, 33, 43, .18);
}
.opc2-zone-m-frame:hover { background: rgba(20, 170, 245, .18); border-color: #14AAF5; }

/* Feste Höhe = echte Pixel-Höhe (--opc2-h ist einheitenlos -> * 1px). Bild per object-fit:cover
   + Fokus über object-position zugeschnitten (statisch, kein Springen). Zonen sind prozentbasiert. */
.opc2-fixed-h {
    height: calc(var(--opc2-h, 0) * 1px) !important;
    width: 100% !important;
    overflow: hidden !important;
}
/* Zuschnitt auf ALLE Bilder im Slider – auch die Roh-Bilder VOR nivos Aufbau.
   Dadurch ist der Ausschnitt vom ersten Frame an korrekt -> kein „oben, dann Sprung". */
.opc2-fixed-h img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% var(--opc2-focus, 50%) !important;
}
/* Fade sichtbar: Hauptbild UNTER die Fade-Slice (nivo: slice = z-index 5). Slice + Slice-Bild auf den
   vollen Rahmen und auf 0/0 zwingen (Ken-Burns-/Slice-Versatz neutralisieren), Box-Ebenen aus. */
.opc2-fixed-h .nivo-main-image { position: relative !important; z-index: 1 !important; }
.opc2-fixed-h .nivo-slice {
    top: 0 !important; left: 0 !important; right: auto !important;
    width: 100% !important; height: 100% !important; max-height: 100% !important; z-index: 5 !important;
}
.opc2-fixed-h .nivo-slice img,
.opc2-fixed-h .nivo-box img {
    position: absolute !important; left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
}
.opc2-fixed-h .nivo-box { display: none !important; }

/* Splide (Shop >= 5.8): Die feste Höhe muss vom Wurzelelement bis zur einzelnen Slide durchgereicht
   werden – sonst behält die Bahn die Bildhöhe und der Rahmen bleibt wirkungslos. Der Zuschnitt läuft
   über die allgemeine `.opc2-fixed-h img`-Regel oben (object-fit + Fokus je Bild). */
.opc2-fixed-h .splide__track,
.opc2-fixed-h .splide__list,
.opc2-fixed-h .splide__slide {
    height: 100% !important;
}
/* Splide macht den Slider erst nach dem Mounten sichtbar; die Zonen-Ebene liegt im Wurzelelement
   und darf die Pfeile/Punkte nicht abdecken (Ebene selbst ist pointer-events:none). */
.opc2-fixed-h.splide .splide__slide img { display: block !important; }

/* ===== USP-/Icon-Boxen ===== (extern, weil <style>-Blöcke in der OPC-Vorschau nicht greifen) */
.opc2-usp .opc2-usp-grid { display: grid; grid-template-columns: repeat(var(--usp-cols, 4), minmax(0, 1fr)); gap: 26px 16px; }
.opc2-usp .opc2-usp-col { box-sizing: border-box; }
@media (max-width: 991px) { .opc2-usp .opc2-usp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 767px) { .opc2-usp .opc2-usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 767px) { .opc2-usp .opc2-usp-grid.has-mcols { grid-template-columns: repeat(var(--usp-cols-m), minmax(0, 1fr)) !important; } }
@media (max-width: 767px) { .opc2-usp .opc2-usp-col.hide-m { display: none !important; } }
@media (min-width: 768px) { .opc2-usp .opc2-usp-col.hide-d { display: none !important; } }
.opc2-usp-center .opc2-usp-col { text-align: center; }
.opc2-usp-right .opc2-usp-col { text-align: right; }
.opc2-usp .opc2-usp-box { display: block; color: inherit; text-decoration: none; }
.opc2-usp .opc2-usp-icon { font-size: var(--usp-icon, 40px); line-height: 1; color: #14AAF5; margin-bottom: 12px; }
.opc2-usp .opc2-usp-img img { width: var(--usp-icon, 40px); max-width: 100%; height: auto; }
.opc2-usp .opc2-usp-title { font-weight: 700; font-size: 17px; margin-bottom: 6px; color: inherit; }
.opc2-usp .opc2-usp-text { color: #6c757d; font-size: 14px; line-height: 1.55; }
.opc2-usp a.opc2-usp-box:hover .opc2-usp-icon { opacity: .8; }
.opc2-usp a.opc2-usp-box:hover .opc2-usp-title { color: #14AAF5; }
/* Eigene Icon-/Bildgröße auf Mobil (überschreibt die Inline-Desktop-Größe) */
@media (max-width: 767px) {
    .opc2-usp-grid.has-mobicon .opc2-usp-icon { font-size: var(--usp-icon-m) !important; }
    .opc2-usp-grid.has-mobicon .opc2-usp-img img { width: var(--usp-icon-m) !important; max-width: 100% !important; height: auto !important; }
}

/* ===== Kundenmeinungen (Reviews) ===== */
.opc2-rev .opc2-rev-grid { gap: 16px; }
/* Anzeige je Gerät: Desktop-Modus kommt inline (Vorschau-sicher), Mobil (<768px) über rev-m-*. */
@media (max-width: 767px) {
    .opc2-rev .opc2-rev-grid.rev-m-grid   { display: grid !important; grid-template-columns: repeat(var(--rev-cols-m, 1), minmax(0, 1fr)) !important; overflow: visible !important; max-width: none !important; margin: 0 !important; }
    .opc2-rev .opc2-rev-grid.rev-m-stack  { display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; max-width: none !important; margin: 0 !important; }
    .opc2-rev .opc2-rev-grid.rev-m-slider { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; max-width: none !important; margin: 0 !important; }
    .opc2-rev .opc2-rev-grid.rev-m-slider > .opc2-rev-card { flex: 0 0 82% !important; scroll-snap-align: start !important; }
    .opc2-rev .opc2-rev-grid.rev-m-grid > .opc2-rev-card,
    .opc2-rev .opc2-rev-grid.rev-m-stack > .opc2-rev-card { flex: initial !important; }
}
.opc2-rev .opc2-rev-card { transition: box-shadow .15s, transform .15s; }
.opc2-rev .opc2-rev-card:hover { box-shadow: 0 6px 18px rgba(16, 33, 43, .10); transform: translateY(-2px); }

/* ===== Zähler / Statistik ===== */
.opc2-count .opc2-count-grid { display: grid; grid-template-columns: repeat(var(--count-cols, 4), minmax(0, 1fr)); gap: 24px 16px; }
.opc2-count .opc2-count-col { box-sizing: border-box; }
@media (max-width: 991px) { .opc2-count .opc2-count-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 575px) { .opc2-count .opc2-count-grid { grid-template-columns: 1fr !important; } }
.opc2-count-center .opc2-count-col { text-align: center; }
.opc2-count-right .opc2-count-col { text-align: right; }
.opc2-count .opc2-count-icon { font-size: var(--count-icon, 34px); line-height: 1; color: #14AAF5; margin-bottom: 10px; }
.opc2-count .opc2-count-img img { max-width: var(--count-icon, 34px); height: auto; }
.opc2-count .opc2-count-num { font-size: var(--count-num, 44px); line-height: 1.1; font-weight: 800; color: #0b6aa2; font-variant-numeric: tabular-nums; }
.opc2-count .opc2-count-label { color: #6c757d; font-size: 14px; line-height: 1.55; margin-top: 6px; }

/* ===== Preistabelle ===== */
.opc2-price .opc2-price-grid { display: grid; grid-template-columns: repeat(var(--price-cols, 3), minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 991px) { .opc2-price .opc2-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .opc2-price .opc2-price-grid { grid-template-columns: 1fr !important; } }
.opc2-price .opc2-price-col { display: flex; }
.opc2-price .opc2-price-card { position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid #e6edf2; border-radius: 14px; padding: 28px 22px 24px; box-shadow: 0 2px 10px rgba(16, 33, 43, .05); transition: box-shadow .15s, transform .15s; }
.opc2-price .opc2-price-col:hover .opc2-price-card { box-shadow: 0 8px 24px rgba(16, 33, 43, .10); transform: translateY(-3px); }
.opc2-price .opc2-price-featured .opc2-price-card { border: 2px solid var(--price-accent, #14AAF5); box-shadow: 0 10px 30px rgba(16, 33, 43, .12); }
.opc2-price .opc2-price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--price-accent, #14AAF5); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.opc2-price .opc2-price-name { font-size: 19px; font-weight: 700; color: #16212b; text-align: center; margin-bottom: 10px; }
.opc2-price .opc2-price-amount { text-align: center; margin-bottom: 18px; }
.opc2-price .opc2-price-value { font-size: 38px; font-weight: 800; color: #0b6aa2; line-height: 1; }
.opc2-price .opc2-price-featured .opc2-price-value { color: var(--price-accent, #14AAF5); }
.opc2-price .opc2-price-period { font-size: 14px; color: #6c757d; margin-left: 4px; }
.opc2-price .opc2-price-features { list-style: none; margin: 0 0 22px; padding: 0; }
.opc2-price .opc2-price-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: #4a5c6b; padding: 7px 0; border-bottom: 1px solid #f0f4f7; }
.opc2-price .opc2-price-features li:last-child { border-bottom: none; }
.opc2-price .opc2-price-features li i { color: var(--price-accent, #14AAF5); margin-top: 3px; flex: 0 0 auto; }
.opc2-price .opc2-price-btn { display: block; margin-top: auto; text-align: center; background: var(--price-accent, #14AAF5); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 18px; border-radius: 5px; transition: filter .15s; }
.opc2-price .opc2-price-btn:hover { filter: brightness(.93); color: #fff; }

/* ===== FAQ (natives <details>-Accordion) ===== */
.opc2-faq summary { list-style: none; }
.opc2-faq summary::-webkit-details-marker { display: none; }
.opc2-faq summary:hover { background: #f7fbff; }
.opc2-faq details[open] .opc2-faq-chev { transform: rotate(180deg); }
.opc2-faq details[open] > summary { border-bottom: 1px solid #eef3f7; }
.opc2-faq details[open] .opc2-faq-qmark { background: #14AAF5; color: #fff; }
.opc2-faq .opc2-faq-item { transition: box-shadow .15s; }
.opc2-faq .opc2-faq-item:hover { box-shadow: 0 3px 12px rgba(16, 33, 43, .07); }

/* ===== Bild-Portlet: abweichendes Mobil-Bild + Lightbox/Zoom ===== */
/* Mobil-Bild liegt in einer eigenen Box, damit die Mobil-Zonen einen Bezugsrahmen haben.
   Die Einzelbild-Regel bleibt zusätzlich stehen – sie greift für bereits im Seitencache
   liegendes Markup aus älteren Plugin-Ständen (dort ohne Wrapper). */
.opc2-img-mobile-wrap,
.opc2-img-mobile-img { display: none; }
.opc2-img-mobile-wrap { position: relative; }
.opc2-img-mobile-img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
    .opc2-img-has-mobile .opc2-img-desktop-wrap { display: none; }
    .opc2-img-has-mobile .opc2-img-mobile-wrap { display: block; }
    .opc2-img-has-mobile .opc2-img-mobile-img { display: block; }
}
/* Bezugsrahmen fürs Desktop-Bild (der Core rendert <picture>, das taugt dafür nicht). */
.opc2-img-desktop-wrap { position: relative; }
.opc2-img-lightbox, .opc2-img-lightbox img { cursor: zoom-in; }
/* Feste Höhe für beide Bilder (Desktop + Mobil), Breite automatisch */
.opc2-img-fixedh img { height: var(--opc2-imgh) !important; width: auto !important; max-width: 100% !important; aspect-ratio: auto !important; }
.opc2-lb-overlay { position: fixed; inset: 0; background: rgba(10, 15, 20, .92); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .18s ease; }
.opc2-lb-overlay.show { opacity: 1; }
.opc2-lb-overlay img { max-width: 95vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transition: transform .2s ease; cursor: zoom-in; will-change: transform; }
.opc2-lb-overlay.zoom img { cursor: zoom-out; transform: scale(2); }
.opc2-lb-close { position: fixed; top: 14px; right: 20px; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.opc2-lb-close:hover { background: rgba(255, 255, 255, .28); }

/* ===== Newsletter-Anmeldung ===== */
.opc2-nl, .opc2-nl * { box-sizing: border-box; }
.opc2-nl { max-width: 100%; }
.opc2-nl .opc2-nl-card { max-width: 100%; overflow-wrap: break-word; }
.opc2-nl .opc2-nl-input:focus { outline: none; border-color: var(--nl-accent, #14AAF5) !important; box-shadow: 0 0 0 3px rgba(20, 170, 245, .15); }
.opc2-nl .opc2-nl-btn { transition: filter .15s, box-shadow .15s; box-shadow: 0 4px 14px rgba(20, 170, 245, .22); }
.opc2-nl .opc2-nl-btn:hover { filter: brightness(.94); }
.opc2-nl .opc2-nl-consent a { text-decoration: underline; }
/* Mobil: Felder untereinander + natürliche Höhe (kein Stretch/Überhöhen bei horizontalem Layout) */
@media (max-width: 767px) {
    .opc2-nl .opc2-nl-fields { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; }
    .opc2-nl .opc2-nl-input { flex: 0 0 auto !important; width: 100% !important; }
}

/* ===== Hero / CTA-Sektion ===== */
.opc2-hero .opc2-hero-btn { transition: filter .15s; }
.opc2-hero .opc2-hero-btn:hover { filter: brightness(.92); color: #fff; }
/* Mobil-Modus: je Element eigene Position/Skalierung (Werte inline als --mx/--my/--ms). */
@media (max-width: 767px) {
    .opc2-hero .opc2-hero-el.has-m { left: var(--mx) !important; top: var(--my) !important; transform: scale(var(--ms)) !important; }
    /* Text: Breite an die Mobil-Position koppeln, damit er nicht rechts rausläuft (bricht rechtzeitig um). */
    .opc2-hero .opc2-hero-el.opc2-hero-h.has-m { max-width: calc(96% - var(--mx)) !important; }
    .opc2-hero .opc2-hero-el.hide-m { display: none !important; }
    /* Eigenes Hintergrundbild fürs Handy (sonst gilt das Desktop-Bild) */
    .opc2-hero.has-bgm { background-image: var(--bgm) !important; background-color: #2a2f36; background-position: var(--bgpos-m, center) !important; background-size: cover !important; background-repeat: no-repeat !important; }
    /* Eigene Mobil-Hintergrundposition auch für das Desktop-Bild auf dem Handy */
    .opc2-hero.has-bgposm:not(.has-bgm) { background-position: var(--bgpos-m) !important; }
    /* Eigene Mindesthöhe / Ecken-Rundung / Abdunkeln fürs Handy */
    .opc2-hero.has-hm { min-height: var(--h-m) !important; }
    .opc2-hero.has-rm { border-radius: var(--r-m) !important; }
    .opc2-hero .opc2-hero-ov.has-ovm { background: rgba(0, 0, 0, var(--ov-m)) !important; }
}
@media (min-width: 768px) {
    .opc2-hero .opc2-hero-el.hide-d { display: none !important; }
}

/* ===== Accordion: Auf/Zu-Chevron (fehlt nativ im Frontend) + Deeplink-Abstand ===== */
.opc2-acc .opc-Accordion-head { display: flex; align-items: center; width: 100%; text-align: left; }
.opc2-acc .opc-Accordion-head::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: auto; padding-left: 14px; font-size: .78em; opacity: .6; transition: transform .2s ease; }
.opc2-acc .opc-Accordion-head:not(.collapsed)::after { transform: rotate(180deg); opacity: .9; }
.opc2-acc [data-opc2-anchor], .opc2-tabs [data-opc2-anchor] { scroll-margin-top: 16px; }
/* Icons je Gruppe/Tab */
.opc2-acc .opc-Accordion-head .opc2-acc-ico { margin-right: 9px; opacity: .85; }
.opc2-tabs .nav-link .opc2-tab-ico { margin-right: 7px; }

/* ===== Karte ===== */
.opc2-map .opc2-map-load, .opc2-map-consent .opc2-map-load { transition: filter .15s; }
.opc2-map .opc2-map-load:hover, .opc2-map-consent .opc2-map-load:hover { filter: brightness(.93); }

/* ===== Vorher/Nachher ===== */
.opc2-ba .opc2-ba-grip { transition: transform .1s; }
.opc2-ba:hover .opc2-ba-grip, .opc2-ba.opc2-ba-drag .opc2-ba-grip { transform: translate(-50%, -50%) scale(1.08); }

/* ===== ProductStream: echte Lücken (Slider/Badges/Hover-Bild/Warenkorb kann der Core selbst) ===== */
/* Spalten je Gerät im Galerie-Modus (überschreibt die festen 2/3/4) */
@media (min-width: 1200px) {
    .opc2-ps-hascols .opc-ProductStream-gallery > [class*="col-"] { flex: 0 0 calc(100% / var(--opc2-ps-cd, 4)) !important; max-width: calc(100% / var(--opc2-ps-cd, 4)) !important; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .opc2-ps-hascols .opc-ProductStream-gallery > [class*="col-"] { flex: 0 0 calc(100% / var(--opc2-ps-ct, 3)) !important; max-width: calc(100% / var(--opc2-ps-ct, 3)) !important; }
}
@media (max-width: 767.98px) {
    .opc2-ps-hascols .opc-ProductStream-gallery > [class*="col-"] { flex: 0 0 calc(100% / var(--opc2-ps-cm, 2)) !important; max-width: calc(100% / var(--opc2-ps-cm, 2)) !important; }
}
/* Warenkorb-/Aktions-Buttons dauerhaft anzeigen (statt nur bei Hover, auch auf Mobil) */
.opc2-ps-actions .productbox-quick-actions { display: flex !important; }
.opc2-ps-actions .productbox-onhover { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* ===== Galerie: echte Lücken (Lightbox/Masonry kann der Core selbst) ===== */
/* Raster-Spalten je Gerät (nativ fix 2/3/4/6) */
@media (min-width: 1200px) {
    .opc2-gal-hascols .opc-Gallery-grid > .opc-Gallery-item { flex: 0 0 calc(100% / var(--opc2-gal-cd, 6)) !important; max-width: calc(100% / var(--opc2-gal-cd, 6)) !important; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .opc2-gal-hascols .opc-Gallery-grid > .opc-Gallery-item { flex: 0 0 calc(100% / var(--opc2-gal-ct, 3)) !important; max-width: calc(100% / var(--opc2-gal-ct, 3)) !important; }
}
@media (max-width: 767.98px) {
    .opc2-gal-hascols .opc-Gallery-grid > .opc-Gallery-item { flex: 0 0 calc(100% / var(--opc2-gal-cm, 2)) !important; max-width: calc(100% / var(--opc2-gal-cm, 2)) !important; }
}
/* Sichtbare Bildunterschriften unter den Thumbnails (aus der Bild-Beschreibung) */
.opc2-gal-captions .opc-Gallery-btn:not([data-caption=""])::after { content: attr(data-caption); display: block; padding: 6px 4px 2px; font-size: 13px; line-height: 1.4; color: #5a6b7b; text-align: center; }

/* ===== Hersteller-Slider (ManufacturerSlider) ===== */
.opc2-ms-gray .product-image { filter: grayscale(1); opacity: .82; transition: filter .25s ease, opacity .25s ease; }
.opc2-ms-gray .product-wrapper:hover .product-image,
.opc2-ms-gray .item-slider:hover .product-image { filter: grayscale(0); opacity: 1; }
/* Einheitliche Logo-Höhe (überschreibt das quadratische Layout, Logo wird eingepasst) */
.opc2-ms-fixedh .item-slider.square { height: var(--ms-h) !important; padding-bottom: 0 !important; }
.opc2-ms-fixedh .item-slider .product-image { width: 100% !important; height: 100% !important; object-fit: contain !important; }

/* ===== Standard-Text-Portlet: eigener Mobil-Text (zweiter Editor) ===== */
/* Desktop-Text normal; ist ein Mobil-Text gepflegt (has-m), wird auf <768px umgeschaltet. */
.opc2-rtxt-m { display: none; }
@media (max-width: 767px) {
    .opc2-rtxt.has-m .opc2-rtxt-d { display: none; }
    .opc2-rtxt.has-m .opc2-rtxt-m { display: block; }
}

/* ===== Moderner Produkt-Slider (Swiper) ===== */
.opc2-psw { --swiper-navigation-size: 18px; --swiper-theme-color: #14AAF5; }
/* Vor der Swiper-Init: Karten als horizontale Reihe (clipped) statt gestapelt -> kein FOUC. */
.opc2-psw:not(.swiper) { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 16px; }
.opc2-psw:not(.swiper) > .product-wrapper { flex: 0 0 auto; width: calc((100% - 3 * 16px) / var(--display-count-lg, 4)); min-width: 0; }
/* In der Swiper-Struktur füllt die Karte den Slide voll aus. */
/* horizontal geclippt (Swiper), oben/unten Luft für Hover-Lift + Schatten */
.opc2-psw.swiper { overflow: hidden; padding: 8px 0 18px; }
.opc2-psw .swiper-slide { height: auto; display: flex; }
.opc2-psw .swiper-slide > .product-wrapper { width: 100%; margin: 0 !important; }

/* Moderne Produktkarte: Rahmen/Hintergrund/Text per CSS-Var (Styles-Tab), Rundung aus Styles-Tab,
   Hover-Lift + Bild-Zoom, Links ohne Unterstreichung. Eigene Farben (inline) schlagen das Theme. */
.opc2-psw .product-wrapper {
    background: var(--opc2-ps-bg, #fff);
    border: 1px solid var(--opc2-ps-bd, #e7edf3);
    border-radius: var(--opc2-ps-rad, 14px);
    color: var(--opc2-ps-tx, inherit);
    padding: 14px 14px 16px; box-shadow: 0 1px 2px rgba(16,42,67,.04);
    text-align: center;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.opc2-psw .product-wrapper:hover {
    border-color: var(--opc2-ps-bd, #cfe1f2); box-shadow: 0 12px 28px rgba(16,42,67,.14); transform: translateY(-4px);
}
.opc2-psw .product-wrapper a,
.opc2-psw .product-wrapper a:hover,
.opc2-psw .product-wrapper a:focus { text-decoration: none !important; }
/* Bild-Zoom im Rahmen halten */
.opc2-psw .product-wrapper .image,
.opc2-psw .product-wrapper .product-image,
.opc2-psw .product-wrapper picture,
.opc2-psw .product-wrapper .image-hover { overflow: hidden; border-radius: calc(var(--opc2-ps-rad, 14px) * .6); }
.opc2-psw .product-wrapper .image img,
.opc2-psw .product-wrapper .product-image img { transition: transform .35s ease; }
.opc2-psw .product-wrapper:hover .image img,
.opc2-psw .product-wrapper:hover .product-image img { transform: scale(1.06); }

/* Einheitliche, moderne Anordnung Artikelname / Preis / Grundpreis.
   SLIDER-Klassen (item_slider.tpl): Titel = .item-slider-desc (span), Preis = .item-slider-price.
   Titel MAX 2 Zeilen + feste Mindesthöhe -> Preis fluchtet bei allen Karten auf gleicher Höhe. */
.opc2-psw .item-slider-desc,
.opc2-psw .productbox-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.6em; margin: 12px 0 4px;
    font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--opc2-ps-tx, #1b2a3a);
}
.opc2-psw .item-slider-desc a,
.opc2-psw .productbox-title a { color: inherit; }
.opc2-psw .item-slider-desc a:hover,
.opc2-psw .productbox-title a:hover { color: #14AAF5; }
/* Preis (Farbe + Fett per Konfiguration) */
.opc2-psw .item-slider-price { margin-top: 2px; }
.opc2-psw .item-slider-price .productbox-price,
.opc2-psw .item-slider-price .price,
.opc2-psw .productbox-price {
    font-size: var(--opc2-ps-psz, 15.5px); font-weight: 500 !important; color: var(--opc2-ps-pc, var(--opc2-ps-tx, #16202b));
}
.opc2-ps-swiper.opc2-ps-pbold .item-slider-price,
.opc2-ps-swiper.opc2-ps-pbold .item-slider-price *,
.opc2-ps-swiper.opc2-ps-pbold .productbox-price,
.opc2-ps-swiper.opc2-ps-pbold .productbox-price * { font-weight: 800 !important; }
/* Grundpreis */
.opc2-psw .item-slider-price .base-price,
.opc2-psw .item-slider-price .price-note,
.opc2-psw .base-price { font-size: 11.5px; color: #8595a6; }
/* Textausrichtung (konfigurierbar); JTL zentriert per .text-center-util !important -> überschreiben */
.opc2-ps-swiper.opc2-ps-al-left   .product-wrapper { text-align: left !important; }
.opc2-ps-swiper.opc2-ps-al-center .product-wrapper { text-align: center !important; }
.opc2-ps-swiper.opc2-ps-al-right  .product-wrapper { text-align: right !important; }

/* Preis-Footerbox: Preis + Grundpreis in grauer Box bündig am Kartenende.
   Negative Ränder brechen bis an die Kartenkanten aus; overflow:hidden rundet die Ecken mit.
   Karte als Spalte + margin-top:auto -> die Box klebt am Kartenboden, auch wenn der Inhalt
   (kleineres Bild, fehlender Grundpreis) kürzer ist als bei den Nachbarkarten. Sonst endet
   die graue Fläche mitten in der Karte und darunter bleibt ein weißer Streifen.
   --opc2-pf-h wird per JS auf die höchste Box im Slider gesetzt -> alle Boxen gleich hoch. */
.opc2-ps-swiper.opc2-ps-pfooter .product-wrapper { overflow: hidden; display: flex; flex-direction: column; }
.opc2-ps-swiper.opc2-ps-pfooter .item-slider-price {
    background: var(--opc2-ps-pfbg, rgba(0, 0, 0, .05));
    /* 1px mehr als das Karten-Padding (16px), sonst bleibt durch Subpixel-Rundung der
       fraktionalen Kartenhöhe ein weißer Haarstrich unten stehen; overflow:hidden clippt. */
    margin: 14px -14px -17px;
    margin-top: auto;
    padding: 13px 14px;
    min-height: var(--opc2-pf-h, 0px);
    display: flex; flex-direction: column; justify-content: center;
}
.opc2-ps-swiper.opc2-ps-pfooter.opc2-th-minimal .item-slider-price { margin: auto -8px -11px; }
/* Mindestabstand zum Titel, den margin-top:auto allein nicht garantiert */
.opc2-ps-swiper.opc2-ps-pfooter .item-slider-desc,
.opc2-ps-swiper.opc2-ps-pfooter .productbox-title { margin-bottom: 14px; }

/* ===== Slider-Themes (Karte = Standard) ===== */
.opc2-ps-swiper.opc2-th-soft { --opc2-ps-bd: transparent; }
.opc2-th-soft .opc2-psw .product-wrapper { box-shadow: 0 6px 22px rgba(16,42,67,.10); }
.opc2-th-soft .opc2-psw .product-wrapper:hover { box-shadow: 0 16px 36px rgba(16,42,67,.17); }
.opc2-ps-swiper.opc2-th-minimal { --opc2-ps-bd: transparent; --opc2-ps-bg: transparent; }
.opc2-th-minimal .opc2-psw .product-wrapper { box-shadow: none; padding: 8px 8px 10px; }
.opc2-th-minimal .opc2-psw .product-wrapper:hover { box-shadow: none; transform: translateY(-3px); }
.opc2-ps-swiper.opc2-th-outline { --opc2-ps-bd: #14AAF5; }
.opc2-th-outline .opc2-psw .product-wrapper { border-width: 2px; box-shadow: none; }
.opc2-th-outline .opc2-psw .product-wrapper:hover { box-shadow: 0 10px 24px rgba(20,170,245,.18); }
/* Moderne, runde Pfeile */
.opc2-psw .opc2-psw-prev, .opc2-psw .opc2-psw-next {
    width: 42px; height: 42px; margin-top: -21px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(16, 42, 67, .18);
    color: #1b2a3a; transition: background .15s ease, transform .15s ease;
}
.opc2-psw .opc2-psw-prev:hover, .opc2-psw .opc2-psw-next:hover { background: #fff; transform: scale(1.06); }
.opc2-psw .opc2-psw-prev::after, .opc2-psw .opc2-psw-next::after { font-weight: 700; }
.opc2-psw .swiper-button-disabled { opacity: 0; pointer-events: none; }
/* Moderne Punkte (aktiver Punkt als Pille) */
.opc2-psw .opc2-psw-pag { position: static; margin-top: 8px; display: flex; justify-content: center; align-items: center; gap: 7px; width: 100%; }
.opc2-psw .opc2-psw-pag .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 !important; background: #cbd5e1; opacity: 1; border-radius: 50%; cursor: pointer; transition: background .15s ease, width .15s ease; }
.opc2-psw .opc2-psw-pag .swiper-pagination-bullet-active { background: var(--opc2-ps-dot, #14AAF5); width: 24px; border-radius: 5px; }

/* Markierungen in der OPC-Vorschau: reine Anzeige. Ohne das würden Klicks im Editor auf den
   Zonen landen statt auf dem Portlet, und Auswählen/Verschieben wäre blockiert. */
.opc2-zone-preview,
.opc2-zone-preview .opc2-zone-link { pointer-events: none !important; cursor: default !important; }
.opc2-zone-preview .opc2-zone-link:hover { background: transparent !important; }