@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
.pp-banner { width: 100%; background: #272727; overflow: hidden; padding: 11px 0; font-family: 'Poppins', sans-serif; }
.pp-track { display: flex; align-items: center; white-space: nowrap; width: max-content; animation: ppscroll 28s linear infinite; }
.pp-banner:hover .pp-track { animation-play-state: paused; }
@keyframes ppscroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.pp-item { display: inline-block; padding: 0 28px; color: #f0ebe0; font-size: 12.5px; font-weight: 400; letter-spacing: 0.01em; line-height: 1; }
.pp-item strong { font-weight: 500; color: #f7c46a; }
.pp-paw { width: 13px; height: 13px; fill: #f0ebe0; vertical-align: -2px; margin-right: 8px; }
.pp-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(240,235,224,0.3); flex-shrink: 0; }
@media (max-width: 768px) { .pp-banner { padding: 10px 0; } .pp-item { font-size: 11.5px; padding: 0 20px; } .pp-track { animation-duration: 35s; } }
@media (max-width: 480px) { .pp-item { font-size: 11px; padding: 0 16px; } .pp-track { animation-duration: 30s; } }
.info-bar {
padding: 10px 40px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 13px;
color: #ffffff;
}
/* ── DESKTOP: links · mitte · rechts ── */
.info-bar__desktop {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.info-bar__item {
display: flex;
align-items: center;
gap: 8px;
}
.info-bar__item svg {
flex-shrink: 0;
width: 20px;
height: 20px;
}
.info-bar__stars {
color: #C1A381;
font-size: 14px;
letter-spacing: 1px;
}
/* ── MOBILE: Slider ── */
.info-bar__slider {
display: none;
overflow: hidden;
position: relative;
}
.info-bar__track {
display: flex;
transition: transform 0.5s ease;
width: 100%;
}
.info-bar__slide {
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
/* ── Responsive: ab welcher Breite Slider? ── */
@media (max-width: 767px) {
.info-bar {
padding: 10px 20px;
}
.info-bar__desktop {
display: none;
}
.info-bar__slider {
display: block;
}
.info-bar__slide {
font-size: 11px;
gap: 5px;
}
.info-bar__stars {
font-size: 11px;
letter-spacing: 0;
}
}
(function () {
var track = document.getElementById('infoBarTrack');
if (!track) return;
var slides = track.children;
var total = slides.length;
var current = 0;
function goTo(index) {
current = index % total;
track.style.transform = 'translateX(-' + (current * 100) + '%)';
}
setInterval(function () {
goTo(current + 1);
}, 3000);
})();
HTML-Widget in den Header-Template
============================================================ -->
.pp-fly-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0);
z-index: 999998;
pointer-events: none;
transition: background 0.3s ease;
}
.pp-fly-overlay.pp-open {
background: rgba(0,0,0,0.4);
pointer-events: all;
}
.pp-fly-menu {
position: fixed;
top: 12px; left: 12px; bottom: 12px;
width: 400px;
background: #fff;
z-index: 999999;
transform: translateX(calc(-100% - 24px));
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 15px;
font-family: 'Poppins', sans-serif;
}
.pp-fly-menu.pp-open { transform: translateX(0); }
/* HEADER */
.pp-fly-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
height: 62px;
border-bottom: 0.5px solid rgba(0,0,0,0.08);
flex-shrink: 0;
}
.pp-fly-logo img { height: 28px; width: auto; display: block; }
.pp-fly-close {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
border-radius: 8px;
border: 0.5px solid rgba(0,0,0,0.13) !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
transition: background 0.15s;
}
.pp-fly-close:hover { background: #f7f6f3 !important; }
.pp-fly-close svg { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; stroke: #1a1a1a !important; fill: none !important; stroke-width: 2; stroke-linecap: round; }
/* PANELS */
.pp-fly-panels { flex: 1; overflow: hidden; position: relative; }
.pp-fly-panel {
position: absolute; inset: 0;
overflow-y: auto;
background: #fff;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(0);
}
.pp-fly-panel.pp-slide-out { transform: translateX(-100%); }
.pp-fly-panel.pp-hidden { transform: translateX(100%); }
/* SECTIONS */
.pp-fly-section { padding: 0.5rem 0; border-bottom: 0.5px solid rgba(0,0,0,0.07); }
.pp-fly-section:last-child { border-bottom: none; }
.pp-fly-section-label {
font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
text-transform: uppercase; color: #a0a0a0 !important;
padding: 0.6rem 1.5rem 0.2rem;
}
/* ITEMS */
.pp-fly-item {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 1.5rem;
font-size: 15px; color: #1a1a1a !important;
text-decoration: none; cursor: pointer;
border: none !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
width: 100%;
text-align: left; font-family: 'Poppins', sans-serif;
transition: background 0.12s;
}
.pp-fly-item:hover { background: #f7f6f3 !important; }
.pp-fly-item.pp-highlight { color: #9a7d61 !important; font-weight: 500; }
.pp-fly-item .pp-fly-item-left { color: inherit !important; }
.pp-fly-item svg { width: 14px; height: 14px; stroke: #a0a0a0 !important; fill: none !important; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.pp-fly-badge {
font-size: 9px; font-weight: 500;
background: #f5ede4 !important; color: #9a7d61 !important;
padding: 2px 8px; border-radius: 20px;
}
/* SUB PANEL HEADER */
.pp-sub-header {
display: flex; align-items: center; gap: 12px;
padding: 0 1.5rem; height: 54px;
border-bottom: 0.5px solid rgba(0,0,0,0.07) !important;
cursor: pointer; transition: background 0.12s;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border-left: none !important; border-right: none !important; border-top: none !important;
width: 100%; font-family: 'Poppins', sans-serif;
}
.pp-sub-header:hover { background: #f7f6f3 !important; }
.pp-sub-header svg { width: 16px; height: 16px; stroke: #6b6b6b !important; fill: none !important; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.pp-sub-header-title { font-size: 14px; font-weight: 500; color: #1a1a1a !important; }
/* SUB TILES */
.pp-sub-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 1rem 1.5rem; }
.pp-sub-tile { text-decoration: none; display: flex; flex-direction: column; gap: 5px; }
.pp-sub-tile-img {
aspect-ratio: 4 / 5; border-radius: 8px;
background: #f5ede4;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.15s;
overflow: hidden;
}
.pp-sub-tile-img.c2 { background: #e8f0e8; }
.pp-sub-tile-img.c3 { background: #e4ecf4; }
.pp-sub-tile-img.c4 { background: #f0e8f4; }
.pp-sub-tile:hover .pp-sub-tile-img { opacity: 0.8; }
.pp-sub-tile-img svg { width: 20px; height: 20px; stroke: #C1A381 !important; fill: none !important; stroke-width: 1.5; stroke-linecap: round; }
.pp-sub-tile-img.c2 svg { stroke: #7a9e7a !important; }
.pp-sub-tile-img.c3 svg { stroke: #6a8aae !important; }
.pp-sub-tile-img.c4 svg { stroke: #9a7aae !important; }
.pp-sub-tile-label { font-size: 12px; font-weight: 500; color: #1a1a1a !important; }
.pp-sub-tile-sub { font-size: 11px; color: #a0a0a0 !important; }
/* SUB ITEMS */
.pp-sub-section { padding: 0.4rem 0; border-bottom: 0.5px solid rgba(0,0,0,0.07); }
.pp-sub-section:last-child { border-bottom: none; }
.pp-sub-section-label {
font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
text-transform: uppercase; color: #a0a0a0 !important;
padding: 0.6rem 1.5rem 0.3rem;
}
.pp-sub-item {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 1.5rem;
font-size: 14px; color: #6b6b6b !important;
text-decoration: none; transition: background 0.12s, color 0.12s;
}
.pp-sub-item:hover { background: #f7f6f3 !important; color: #1a1a1a !important; }
.pp-sub-item svg { width: 12px; height: 12px; stroke: rgba(0,0,0,0.18) !important; fill: none !important; stroke-width: 2; stroke-linecap: round; }
.pp-sub-item span { color: inherit !important; }
.pp-new-dot { width: 6px; height: 6px; border-radius: 50%; background: #C1A381 !important; flex-shrink: 0; display: inline-block; margin-right: 8px; }
/* FOOTER */
.pp-fly-footer {
padding: 1rem 1.5rem;
border-top: 0.5px solid rgba(0,0,0,0.07);
flex-shrink: 0;
display: flex; flex-direction: column; gap: 10px;
}
.pp-fly-cta {
display: block; width: 100%;
background: #C1A381 !important; color: #fff !important;
font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500;
padding: 13px; border-radius: 30px; text-align: center;
text-decoration: none; border: none !important; cursor: pointer;
transition: background 0.15s;
box-shadow: none !important;
}
.pp-fly-cta:hover { background: #9a7d61 !important; color: #fff !important; }
.pp-fly-socials { display: flex; gap: 1.5rem; justify-content: center; }
.pp-fly-social { font-size: 12px; color: #a0a0a0 !important; text-decoration: none; transition: color 0.15s; font-family: 'Poppins', sans-serif; }
.pp-fly-social:hover { color: #1a1a1a !important; }
/* HAMBURGER TRIGGER */
.pp-hamburger {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; border-radius: 8px;
border: none !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
padding: 0 !important;
transition: background 0.15s;
}
.pp-hamburger:hover { background: #f7f6f3 !important; }
.pp-hamburger svg { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; stroke: #1a1a1a; fill: none; stroke-width: 2.5; stroke-linecap: round; }
@media (max-width: 480px) {
.pp-fly-menu { left: 8px; top: 8px; bottom: 8px; right: 8px; width: auto; }
}
document.addEventListener('DOMContentLoaded', function() {
var hamburger = document.querySelector('.pp-hamburger');
var overlay = document.getElementById('ppOverlay');
var closeBtn = document.querySelector('.pp-fly-close');
var cartBtn = document.getElementById('pp-cart-trigger');
if (hamburger) {
hamburger.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
ppOpenMenu();
});
}
if (overlay) {
overlay.addEventListener('click', function() { ppCloseMenu(); });
}
if (closeBtn) {
closeBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
ppCloseMenu();
});
}
if (cartBtn) {
cartBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
ppCloseMenu();
setTimeout(function() {
var cart = document.querySelector('.xoo-wsc-cart-trigger');
if (cart) cart.click();
}, 400);
});
}
document.querySelectorAll('[data-ppsub]').forEach(function(el) {
el.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
ppOpenSub(el.getAttribute('data-ppsub'));
});
});
document.querySelectorAll('[data-ppsubclose]').forEach(function(el) {
el.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
ppCloseSub(el.getAttribute('data-ppsubclose'));
});
});
});
function ppOpenMenu() {
document.getElementById('ppFlyMenu').classList.add('pp-open');
document.getElementById('ppOverlay').classList.add('pp-open');
document.body.style.overflow = 'hidden';
document.querySelectorAll('.zoomImg, .jet-woo-product-gallery__image--with-zoom').forEach(function(el) {
el.style.setProperty('z-index', '-1', 'important');
});
}
function ppCloseMenu() {
document.getElementById('ppFlyMenu').classList.remove('pp-open');
document.getElementById('ppOverlay').classList.remove('pp-open');
document.body.style.overflow = '';
document.querySelectorAll('.zoomImg, .jet-woo-product-gallery__image--with-zoom').forEach(function(el) {
el.style.removeProperty('z-index');
});
setTimeout(ppCloseAllSubs, 350);
}
function ppOpenSub(name) {
document.getElementById('pp-panel-main').classList.add('pp-slide-out');
var sub = document.getElementById('pp-panel-' + name);
if (sub) { sub.classList.remove('pp-hidden'); }
}
function ppCloseSub(name) {
var sub = document.getElementById('pp-panel-' + name);
if (sub) { sub.classList.add('pp-hidden'); }
document.getElementById('pp-panel-main').classList.remove('pp-slide-out');
}
function ppCloseAllSubs() {
['verstellbar','zugstopp','leinen','pupons'].forEach(function(n) {
var el = document.getElementById('pp-panel-' + n);
if (el) { el.classList.add('pp-hidden'); }
});
document.getElementById('pp-panel-main').classList.remove('pp-slide-out');
}
CHF 0.00
0
