/* ==============================================
   OKA Tische — Unterseite
   Baut auf style.css auf, ergänzt Hero + Akkordeon
   ============================================== */

/* --- Hero --- */
.p-hero{
  position:relative;
  min-height:70vh;
  display:flex;align-items:end;
  padding:120px 0 80px;
  overflow:hidden;
  background:var(--dark);
  color:#fff;
}
.p-hero-bg{position:absolute;inset:0;z-index:0}
.p-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.85)}
.p-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.85) 100%);
}
.p-hero-content{position:relative;z-index:2;padding-left:calc(var(--rail,104px) + 48px);padding-right:48px}
.p-hero .back-link{
  display:block;color:rgba(255,255,255,.7);
  font-size:13px;letter-spacing:.04em;margin-bottom:24px;
  transition:color .2s;
}
.p-hero .back-link:hover{color:var(--accent,#7c5cd6)}
.p-hero .kicker{
  display:block;
  color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  margin-bottom:20px;
}
.p-hero h1{
  font-size:clamp(44px,6vw,84px);font-weight:400;line-height:1.02;
  max-width:22ch;letter-spacing:-.02em;margin-bottom:22px;
}
.p-hero h1 .acc{color:var(--accent,#7c5cd6)}
.p-hero .lead{
  font-size:clamp(16px,1.4vw,20px);line-height:1.55;
  max-width:64ch;color:rgba(255,255,255,.82);
}

/* --- Filter --- */
.t-filter{
  padding:32px 0;background:#f7f7f8;border-bottom:1px solid #eaeaec;
  position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);
  background:rgba(247,247,248,.92);
}
.t-filter .wrap{padding-left:calc(var(--rail,104px) + 48px);padding-right:48px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  padding:10px 18px;border-radius:999px;border:1px solid #d8d8dc;background:#fff;
  font-size:13px;font-weight:500;letter-spacing:.02em;color:#333;
  cursor:pointer;transition:all .2s;
}
.chip:hover{border-color:#a8a8ac;color:#000}
.chip.on{background:#111;border-color:#111;color:#fff}

/* --- Akkordeon-Liste --- */
.t-list{padding:80px 0 120px;background:#fff}
.t-list .wrap{padding-left:calc(var(--rail,104px) + 48px);padding-right:48px;max-width:1400px}
.t-item{
  border-top:1px solid #eaeaec;
  transition:background .3s;
}
.t-item:last-of-type{border-bottom:1px solid #eaeaec}
.t-item summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:280px 1fr 60px;
  align-items:center;gap:32px;
  padding:24px 12px;
  min-height:220px;
  transition:background .3s;
}
.t-item summary::-webkit-details-marker{display:none}
.t-item summary:hover{background:#fafafb}
.t-item[open] summary{background:#fafafb}

/* 3D-Preview links */
.t-preview{
  width:280px;height:190px;
  background:#fff;
  border-radius:6px;
  position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.t-preview-fallback{
  font-size:22px;font-weight:300;color:rgba(0,0,0,.32);letter-spacing:-.01em;
  position:relative;z-index:2;
}
.t-preview model-viewer{
  width:100%;height:100%;
  background:transparent;
  --poster-color:transparent;
  position:relative;z-index:2;
}
.t-summary-text{display:flex;flex-direction:column;gap:8px}
.t-summary-text .t-cat{justify-self:auto;text-align:left;padding-right:0}
.t-idx{
  font-size:11px;letter-spacing:.24em;color:#a0a0a4;font-weight:500;
}
.t-name{
  font-size:clamp(24px,2.6vw,36px);font-weight:400;letter-spacing:-.01em;color:#111;
  line-height:1.05;
}
.t-cat{
  font-size:13px;color:#666;
}
.t-toggle{
  width:44px;height:44px;border-radius:50%;
  border:1px solid #d8d8dc;
  display:grid;place-items:center;
  justify-self:end;
  position:relative;
  transition:all .3s;
}
.t-toggle::before,.t-toggle::after{
  content:"";position:absolute;background:#111;
  transition:transform .3s;
}
.t-toggle::before{width:14px;height:1.5px}
.t-toggle::after{width:1.5px;height:14px}
.t-item[open] .t-toggle{background:var(--accent,#7c5cd6);border-color:var(--accent,#7c5cd6)}
.t-item[open] .t-toggle::before,.t-item[open] .t-toggle::after{background:#fff}
.t-item[open] .t-toggle::after{transform:scaleY(0)}
.t-item summary:hover .t-toggle{border-color:#111}

/* --- Akkordeon-Body --- */
.t-body{
  display:grid;grid-template-columns:1fr 1.4fr;gap:48px;
  padding:12px 12px 56px;
  background:#fafafb;
  animation:tOpen .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes tOpen{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.t-desc{padding-left:12px}
.t-tag{
  font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:#333;
  margin-bottom:28px;max-width:56ch;
}
.t-features{
  list-style:none;padding:0;margin:0 0 32px;
  display:grid;gap:12px;
}
.t-features li{
  position:relative;padding-left:22px;
  font-size:15px;line-height:1.5;color:#444;
}
.t-features li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;background:var(--accent,#7c5cd6);border-radius:50%;
}
.t-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 22px;border-radius:999px;
  background:#111;color:#fff;
  font-size:14px;font-weight:500;letter-spacing:.02em;
  transition:all .2s;
}
.t-cta:hover{background:var(--accent,#7c5cd6);transform:translateX(2px)}

/* Foto-Stack im Body — 5 Fotos locker überlappend, ohne Hintergrund */
.t-stack{
  position:relative;
  aspect-ratio:4/3;
  background:transparent;
  overflow:visible;
}
.t-stack .t-photo{
  position:absolute;
  left:var(--x,10%);top:var(--y,10%);
  width:45%;height:45%;
  z-index:var(--z,1);
  border-radius:4px;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  transform:rotate(var(--r,0deg));
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2), box-shadow .4s, z-index 0s .35s;
  background:#fff;
  border:4px solid #fff;
  box-sizing:border-box;
}
.t-stack .t-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.t-stack .t-photo:hover{
  transform:rotate(0deg) scale(1.35);
  z-index:20;
  box-shadow:0 24px 60px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.2);
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2), box-shadow .4s, z-index 0s;
}

/* Platzhalter (falls Modell ohne echte Fotos) */
.t-visual{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#e8e8ec 0%,#d4d4d8 100%);
  border-radius:4px;
  display:grid;place-items:center;
  position:relative;overflow:hidden;
}
.t-visual::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(124,92,214,.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(124,92,214,.08) 0%, transparent 50%);
}
.t-visual span{
  position:relative;z-index:1;
  font-size:clamp(28px,3vw,44px);font-weight:300;letter-spacing:-.01em;
  color:rgba(0,0,0,.28);
}

/* --- CTA-Band --- */
.t-cta-band{
  background:var(--dark);color:#fff;
  padding:100px 0;
}
.t-cta-band .wrap{padding-left:calc(var(--rail,104px) + 48px);padding-right:48px}
.cta-inner{
  display:flex;align-items:end;justify-content:space-between;gap:60px;flex-wrap:wrap;
}
.t-cta-band .eyebrow{color:rgba(255,255,255,.6)}
.t-cta-band .eyebrow::before{background:rgba(255,255,255,.6)}
.t-cta-band h2{
  font-size:clamp(36px,4.5vw,56px);font-weight:400;line-height:1.05;
  max-width:24ch;margin-top:22px;
}
.t-cta-band h2 .acc{color:var(--accent,#7c5cd6)}

/* --- Responsive --- */
@media(max-width:900px){
  .p-hero-content, .t-filter .wrap, .t-list .wrap, .t-cta-band .wrap{
    padding-left:24px;padding-right:24px;
  }
  .t-item summary{grid-template-columns:1fr;padding:20px 8px;gap:16px;min-height:auto}
  .t-preview{width:100%;height:220px}
  .t-toggle{justify-self:end}
  .t-body{grid-template-columns:1fr;gap:24px;padding:12px 8px 40px}
  .t-desc{padding-left:0}
  .t-stack{aspect-ratio:1/1}
  .t-stack .t-photo{width:55%;height:38%}
  .cta-inner{flex-direction:column;align-items:flex-start}
}