/* ============================================================
   Bazardo – Verkaufsvitrinen Section
   All styles scoped under .bzd-vitrinen so nothing leaks into
   the rest of the shop. Brand green: #a2e500
   ============================================================ */
.bzd-vitrinen{
  --green:#a2e500;
  --green-deep:#8fce00;
  --ink:#15171a;
  --ink-soft:#374151;
  --muted:#6b7280;
  --bg1:#ffffff;
  --bg2:#f4f5f6;
  --surface:#ffffff;
  --card:#f4f5f6;
  --dark:#16181c;
  --line:#e5e7eb;
  --radius:20px;
  --font:"Manrope","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  box-sizing:border-box;
  font-family:var(--font);
  color:var(--ink);
  background:linear-gradient(118deg,var(--bg1) 0%,var(--bg1) 42%,var(--bg2) 100%);
  /* wider look: smaller side padding so the section fills the row */
  padding:clamp(1.75rem,3.2vw,3.75rem) clamp(.9rem,1.8vw,1.75rem);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* belt-and-suspenders: never cause horizontal page scroll */
}
.bzd-vitrinen *,.bzd-vitrinen *::before,.bzd-vitrinen *::after{box-sizing:border-box;}

.bzd-grid{
  max-width:1800px;margin-inline:auto;
  display:grid;gap:clamp(1.25rem,2vw,2.25rem);
  grid-template-columns:0.9fr 1.5fr 0.92fr;
  grid-template-areas:"intro slider cards";
  align-items:center;
}
/* critical for responsive: let grid tracks shrink instead of overflowing */
.bzd-grid > *{min-width:0;}

/* ---------- Intro (left) ---------- */
.bzd-intro{grid-area:intro;align-self:center;display:flex;flex-direction:column;gap:clamp(1rem,1.6vw,1.4rem);min-width:0;}
.bzd-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.bzd-eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--green);flex:none;}
.bzd-title{
  margin:0;font-weight:800;line-height:1.04;letter-spacing:-.022em;color:var(--ink);
  font-size:clamp(2rem,1.2rem+2.6vw,3.6rem);text-wrap:balance;
}
.bzd-title em{color:var(--green-deep);font-style:normal;}
.bzd-lead{margin:0;color:var(--muted);font-size:clamp(.95rem,.9rem+.2vw,1.05rem);line-height:1.62;max-width:46ch;}
.bzd-benefits{list-style:none;margin:.1rem 0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.bzd-benefits li{position:relative;padding-left:1.9rem;font-weight:600;font-size:.96rem;color:var(--ink-soft);line-height:1.35;}
.bzd-benefits li::before{
  content:"\2713";position:absolute;left:0;top:0;display:grid;place-items:center;
  width:1.35rem;height:1.35rem;border-radius:50%;background:var(--green);color:var(--ink);
  font-size:.82rem;font-weight:800;
}
.bzd-cta{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.65rem;
  background:var(--green);color:var(--ink);text-decoration:none;font-weight:700;font-size:1rem;
  padding:.85rem 1.4rem;border-radius:999px;border:1px solid rgba(0,0,0,.04);
  box-shadow:0 8px 22px -12px rgba(120,160,0,.9);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.bzd-cta svg{transition:transform .18s ease;flex:none;}
.bzd-cta:hover{background:var(--green-deep);transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(120,160,0,.95);}
.bzd-cta:hover svg{transform:translateX(3px);}

/* ---------- Slider (center) ---------- */
.bzd-slider{grid-area:slider;min-width:0;}
.bzd-slider-head{
  margin:0 0 .85rem;text-align:center;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  font-size:clamp(1.05rem,.95rem+.5vw,1.35rem);
}
.bzd-slider-head em{color:var(--green-deep);font-style:normal;}
.bzd-stage{
  position:relative;width:100%;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1.3;background:#dfe2da;box-shadow:0 30px 60px -34px rgba(20,30,10,.45);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;
}
.bzd-stage:active{cursor:grabbing;}
/* images always FILL the frame, keep aspect ratio, never stretch */
.bzd-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .6s ease;}
.bzd-photo.is-active{opacity:1;}
.bzd-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.34),rgba(0,0,0,0) 38%);pointer-events:none;}

.bzd-badge{
  position:absolute;left:16px;bottom:16px;z-index:2;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:.6rem;
  background:rgba(18,20,24,.82);backdrop-filter:blur(6px);
  color:#fff;padding:.6rem .85rem;border-radius:14px;
}
.bzd-badge svg{flex:none;color:var(--green);}
.bzd-badge-brand{display:block;font-weight:800;font-size:.9rem;line-height:1.1;letter-spacing:.01em;}
.bzd-badge-loc{display:block;font-weight:500;font-size:.76rem;opacity:.82;line-height:1.1;margin-top:1px;}

.bzd-controls{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:.55rem;}
.bzd-count{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:.8rem;color:#fff;
  background:rgba(18,20,24,.72);padding:.42rem .6rem;border-radius:10px;letter-spacing:.04em;
}
.bzd-count .bzd-count-tot{opacity:.6;}
.bzd-nav{
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;cursor:pointer;flex:none;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.92);color:var(--ink);
  transition:transform .16s ease,background .16s ease;
}
.bzd-nav:hover{transform:translateY(-1px);}
.bzd-nav.bzd-next{background:var(--dark);color:#fff;border-color:var(--dark);}
.bzd-nav:focus-visible{outline:3px solid var(--green);outline-offset:2px;}

/* ---------- Feature cards (right) ---------- */
.bzd-cards{grid-area:cards;display:grid;gap:clamp(.7rem,1vw,1rem);min-width:0;}
.bzd-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1rem,1.4vw,1.25rem);display:flex;flex-direction:column;gap:.55rem;min-width:0;
}
.bzd-card-head{display:flex;align-items:center;gap:.85rem;}
.bzd-card-icon{width:52px;height:52px;flex:none;object-fit:contain;}
.bzd-card-figure{display:flex;flex-direction:column;line-height:1.05;min-width:0;}
.bzd-card-num{font-size:clamp(1.5rem,1.1rem+1vw,1.9rem);font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.bzd-card-label{font-size:.98rem;font-weight:700;color:var(--ink);}
.bzd-card-desc{margin:0;color:var(--muted);font-size:.86rem;line-height:1.5;}

/* ---------- Brand filter chips (above slider) ---------- */
.bzd-chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.bzd-chips-scroll{
  max-width:100%;overflow-x:auto;overflow-y:hidden;margin:0 0 .7rem;padding:7px 4px;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:#cfd5c3 transparent;
}
.bzd-chips-scroll::-webkit-scrollbar{height:6px;}
.bzd-chips-scroll::-webkit-scrollbar-track{background:transparent;}
.bzd-chips-scroll::-webkit-scrollbar-thumb{background:#cfd5c3;border-radius:999px;}
.bzd-chips--top{flex-wrap:nowrap;width:max-content;max-width:none;margin-inline:auto;}
.bzd-chips--top .bzd-chip{flex:0 0 auto;}
.bzd-chip{
  font-family:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-soft);font-weight:700;font-size:.86rem;padding:.5rem .95rem;border-radius:999px;
  display:inline-flex;align-items:center;gap:.45rem;transition:all .16s ease;white-space:nowrap;
}
.bzd-chip .bzd-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;}
.bzd-chip:hover:not(:disabled){border-color:#c9cfc0;transform:translateY(-1px);}
.bzd-chip.is-active{background:var(--dark);color:#fff;border-color:var(--dark);}
.bzd-chip.is-active .bzd-dot{background:var(--green);}
.bzd-chip.is-empty,.bzd-chip:disabled{opacity:.4;cursor:not-allowed;}
.bzd-chip:focus-visible{outline:3px solid var(--green);outline-offset:2px;}

/* ============================================================
   Responsive
   ≥1081px : 3 columns (intro | slider | cards)
   ≤1080px : stack; cards become a 3-up row under the slider
   ≤760px  : cards stack to 1 column; squarer slider (less crop)
   ≤460px  : tighten spacing
   ============================================================ */
@media (max-width:1080px){
  .bzd-grid{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "slider" "cards";
    align-items:start;gap:clamp(1.5rem,4vw,2.25rem);
  }
  .bzd-intro{align-self:auto;max-width:720px;}
  .bzd-stage{aspect-ratio:1.5;}             /* wider on tablet so it isn't too tall */
  .bzd-cards{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:760px){
  .bzd-cards{grid-template-columns:1fr;}
  .bzd-stage{aspect-ratio:1.15;}            /* squarer = shows more of the cabinet, still no stretch */
  .bzd-chips--top{margin-inline:0;}         /* left-align so the first chip is reachable when scrolling */
  .bzd-title{font-size:clamp(1.9rem,6.5vw,2.6rem);}
  .bzd-cta{align-self:stretch;justify-content:center;}
}

@media (max-width:460px){
  .bzd-vitrinen{padding:1.5rem .9rem;}
  .bzd-stage{aspect-ratio:1.05;}
  .bzd-nav{width:38px;height:38px;}
  .bzd-badge{left:10px;bottom:10px;padding:.5rem .7rem;}
  .bzd-controls{right:10px;bottom:10px;gap:.4rem;}
  .bzd-benefits li{font-size:.92rem;}
}

@media (prefers-reduced-motion:reduce){
  .bzd-photo{transition:none;}
  .bzd-cta,.bzd-nav,.bzd-chip{transition:none;}
}