/* Küchenzeile: Fronten stehen offen und schließen sich beim Scrollen.
   Arbeitsplatte + Deko sind ein festes Bild (assets/top-*.webp), Korpus und Fronten sind CSS-3D.
   Desktop 6×1, mobil 3×2. Maße in cqw → alles skaliert mit der Bühne. */
.cabinet-band{
  --ink:#26261f; --muted:#6c685d; --accent:#9d343a;
  --paper:#f2f0e8;                       /* = Endfarbe des Hero-Verlaufs */
  --front:#f6f2ea; --front-2:#efe9de;
  position:relative; z-index:1; background:var(--paper); color:var(--ink);
  font-family:'DM Sans',sans-serif;
}
.cab-pin{position:relative;display:flex;flex-direction:column;padding:clamp(40px,6vw,96px) clamp(16px,4vw,64px) clamp(40px,5vw,80px);box-sizing:border-box;overflow:hidden}

.cabinet-head{width:100%;max-width:1400px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cabinet-head .eyebrow{margin:0 0 12px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.16em}
.cabinet-head h2{margin:0;font:500 clamp(30px,3.3vw,52px)/1.06 'Manrope',sans-serif;letter-spacing:-.045em;color:var(--ink)}
.cabinet-head h2 em{font-style:normal;color:var(--accent)}
.cabinet-head>p{margin:0;max-width:300px;font-size:14px;line-height:1.6;color:var(--muted)}

/* ---------- Bühne ---------- */
.cab-stage{width:100%;max-width:1400px;margin:0 auto;container-type:inline-size;position:relative}
.cab-view{
  --uw:84cqw; --cols:6; --slot-ar:.8873; --d:13.5cqw; --th:.55cqw;
  --top-l:-1.145%; --top-w:104.422%; --top-h:.0858;   /* Bild relativ zur Frontbreite */
  --cap-l:-.728%; --cap-w:8.325%; --cap-h:138.095%; --fl-l:-2.081%; --fl-w:103.434%; --fl-h:31.025%; --pl-l:1.56%; --pl-r:.4%; --pl-h:.0236;
  --cd:calc(var(--d) - .6cqw);
  perspective:1500px; perspective-origin:50% 0%;
  padding:calc(var(--uw) * var(--top-h) + 1cqw) 0 3.5cqw; display:flex; justify-content:center;
}
.cab-unit{position:relative;width:var(--uw);transform-style:preserve-3d;transform:translateZ(calc(var(--dolly,0) * 1cqw))}
.cab-unit *, .cab-unit *::before, .cab-unit *::after{box-sizing:border-box}

/* Arbeitsplatte (festes Bild) */
.cab-top{position:absolute;left:var(--top-l);width:var(--top-w);bottom:100%;margin:0;pointer-events:none;user-select:none}
.cab-top img{display:block;width:100%;height:auto}

/* Korpus */
.cab-body{position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);transform-style:preserve-3d}
.cab-cap{position:absolute;top:0;left:calc(100% + var(--cap-l));width:var(--cap-w);height:var(--cap-h);pointer-events:none}
.cab-cap img{display:block;width:100%;height:100%}
.cab-shadow{position:absolute;left:var(--fl-l);width:var(--fl-w);top:calc(100% + var(--uw) * var(--pl-h) - 3px);height:var(--fl-h);pointer-events:none}
.cab-shadow img{display:block;width:100%;height:100%}
.cab-plinth{position:relative;height:calc(var(--uw) * var(--pl-h));margin:0 var(--pl-r) 0 var(--pl-l);background:linear-gradient(180deg,#2b2a28,#383734 30%,#403f3b);transform:translateZ(-1cqw)}

/* Fach mit echter Tiefe: Rückwand, Seiten, Decke, Boden, Einlegeboden */
.cab-slot{position:relative;aspect-ratio:var(--slot-ar);transform-style:preserve-3d}
.cab-cell{position:absolute;inset:.22cqw;transform-style:preserve-3d}
/* Korpus-Rahmen: nur der Rand ist gemalt, die Mitte bleibt offen → Blick ins Fach */
.cab-slot::before{content:"";position:absolute;inset:0;border:.22cqw solid #e6dfd2;box-shadow:inset 0 0 0 1px rgba(120,106,84,.18);pointer-events:none}
.cab-cell>span{position:absolute;display:block}
.cell-back{inset:0;transform:translateZ(calc(var(--cd) * -1));background:radial-gradient(ellipse at 50% 35%,#cdc4b3,#b5aa96 80%);box-shadow:inset 0 0 1.6cqw rgba(60,46,28,.35)}
.cell-l,.cell-r{top:0;bottom:0;width:var(--cd)}
.cell-l{left:0;transform-origin:left center;transform:rotateY(90deg);background:linear-gradient(270deg,#e9e2d6,#d5ccbd 35%,#b3a994)}
.cell-r{right:0;transform-origin:right center;transform:rotateY(-90deg);background:linear-gradient(90deg,#e2dbcf,#cbc2b2 35%,#aca28d)}
.cell-t{left:0;right:0;top:0;height:var(--cd);transform-origin:top center;transform:rotateX(-90deg);background:linear-gradient(180deg,#a89e8a,#8f8572)}
.cell-b{left:0;right:0;bottom:0;height:var(--cd);transform-origin:bottom center;transform:rotateX(90deg);background:linear-gradient(0deg,#ede7dc,#d3cab9 55%,#b9af9b)}
.cell-shelf{left:0;right:0;top:50%;height:var(--cd);transform-origin:top center;transform:rotateX(-90deg);background:linear-gradient(180deg,#f1ebe1,#d8cfc0 55%,#bdb3a0)}
.cell-shelf-under{left:0;right:0;top:calc(50% + .45cqw);height:var(--cd);transform-origin:top center;transform:rotateX(-90deg);background:linear-gradient(180deg,#a99f8c,#978d7a)}
.cell-shelf-edge{left:0;right:0;top:50%;height:.45cqw;background:linear-gradient(180deg,#faf6ef,#e4ddd0)}

/* Fronten */
.cab-door{
  --dir:-1; --ang:105; --peek:0;
  position:absolute; inset:.11cqw; transform-style:preserve-3d; transform-origin:left center;
  transform:translateZ(var(--th)) rotateY(calc(var(--dir) * (var(--ang) + var(--peek)) * 1deg));
}
.cab-door.r{--dir:1;transform-origin:right center}
.cab-door.closed{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cab-door.closed:hover{--peek:9}
.door-front,.door-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.door-front{
  background:linear-gradient(100deg,var(--front-2) 0%,var(--front) 18%,#f9f6f0 55%,var(--front) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 .5px rgba(110,98,78,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 9%;
}
.door-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(40,32,20,.55),rgba(40,32,20,.15));opacity:var(--shade,0)}
.cab-door.r .door-front::after{background:linear-gradient(270deg,rgba(40,32,20,.55),rgba(40,32,20,.15))}
.door-back{transform:translateZ(calc(var(--th) * -1)) rotateY(180deg);background:linear-gradient(90deg,#e4ddd0,#ece6db)}
.door-back::before,.door-back::after{content:"";position:absolute;right:7%;width:1.5cqw;height:1.5cqw;border-radius:50%;background:radial-gradient(circle,#b9b3a8 0 35%,#d4cec3 36% 60%,#a7a094 61%);box-shadow:0 1px 1px rgba(0,0,0,.15)}
.door-back::before{top:10%}.door-back::after{bottom:10%}
.cab-door.r .door-back::before,.cab-door.r .door-back::after{right:auto;left:7%}
.door-edge{position:absolute;top:0;bottom:0;width:var(--th);left:100%;transform-origin:left center;transform:rotateY(90deg);background:linear-gradient(90deg,#d9d2c4,#cbc3b3)}
.cab-door.r .door-edge{left:auto;right:100%;transform-origin:right center;transform:rotateY(-90deg)}

/* Inhalte auf der Front */
.door-front>*{opacity:var(--show,0);transform:translateY(calc((1 - var(--show,0)) * .6cqw));position:relative;z-index:1}
.door-front .cab-num{position:absolute;top:7%;left:8%;font:600 clamp(9px,.62cqw,12px)/1 'DM Sans',sans-serif;letter-spacing:.14em;color:#a29c8e;font-style:normal;transform:none}
.door-front svg{width:clamp(30px,3.3cqw,60px);height:clamp(30px,3.3cqw,60px);stroke:var(--accent);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1.3cqw}
.door-front h3{margin:0;font:600 clamp(15px,1.75cqw,30px)/1.12 'Manrope',sans-serif;letter-spacing:-.035em;color:var(--ink)}
.door-front h3::after{content:"";display:block;width:0;height:1.5px;margin:.6cqw auto 0;background:var(--accent);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.cab-door.closed:hover h3::after{width:28px}

/* Hinweis & CTA */
.cab-hint{position:absolute;left:50%;bottom:0;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.16em;color:#8d887c;opacity:calc(1 - var(--p,0) * 4);white-space:nowrap}
.cab-hint i{display:block;width:1px;height:22px;background:linear-gradient(#8d887c,transparent);animation:cabHint 1.8s ease-in-out infinite}
@keyframes cabHint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cabinet-cta{width:100%;max-width:1400px;margin:0 auto;padding-top:18px;border-top:1px solid #26261f18;display:flex;align-items:center;gap:22px;opacity:var(--done,0);transform:translateY(calc((1 - var(--done,0)) * 14px))}
.cabinet-cta>div{display:flex;flex-direction:column;gap:5px;margin-right:auto}
.cabinet-cta span{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.14em}
.cabinet-cta strong{font:600 clamp(16px,1.6vw,22px)/1.2 'Manrope',sans-serif;letter-spacing:-.03em;color:var(--ink)}
.cabinet-cta .primary{min-height:46px;padding:0 22px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;box-shadow:0 8px 22px #9d343a33}
.cabinet-cta .primary b{margin-left:10px}
.cabinet-cta>a{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- Mobil: 3 × 2 ---------- */
@media (max-width:820px){
  .cab-pin{padding:40px 16px calc(100px + env(safe-area-inset-bottom))}
  .cabinet-head{display:block}
  .cabinet-head h2{font-size:clamp(28px,8vw,40px)}
  .cabinet-head>p{margin-top:10px;font-size:13px}
  .cab-stage{margin-top:8px}
  .cab-view{--uw:84cqw; --cols:3; --slot-ar:1.0153; --d:26cqw; --th:1cqw;
    --top-l:-2.081%; --top-w:107.596%; --top-h:.1883;
    --cap-l:-1.457%; --cap-w:11.55%; --cap-h:148.513%; --fl-l:-4.162%; --fl-w:106.868%; --fl-h:17.908%; --pl-l:2.08%; --pl-r:.6%; --pl-h:.0545;
    perspective:820px; perspective-origin:50% 8%; padding-bottom:4cqw; --uw:86cqw}
  .cab-cell{inset:.4cqw}
  .cab-slot::before{border-width:.4cqw}
  .cab-door{inset:.2cqw}
  .cell-shelf-edge{height:.8cqw}
  .cell-shelf-under{top:calc(50% + .8cqw)}
  .door-front{padding:0 7%}
  .door-front .cab-num{font-size:8px;top:7%;left:9%}
  .door-front svg{width:clamp(26px,8.6cqw,42px);height:clamp(26px,8.6cqw,42px);margin-bottom:2.4cqw}
  .door-front h3{font-size:clamp(12px,3.95cqw,19px);line-height:1.12;letter-spacing:-.03em}
    .door-front h3::after{display:none}
  .door-back::before,.door-back::after{width:3cqw;height:3cqw}
  .cab-hint{position:static;transform:none;justify-content:center;margin-top:4px}
  .cabinet-cta{flex-wrap:wrap;gap:12px;padding-top:14px}
  .cabinet-cta>div{width:100%}
  .cabinet-cta .primary{min-height:42px}
}
@media (prefers-reduced-motion:reduce){
  .cab-door{--ang:0 !important}
  .door-front>*{opacity:1;transform:none}
  .cabinet-cta{opacity:1;transform:none}
  .cab-hint{display:none}
}