/* Navigation: siehe css/valen-nav.css (seitenübergreifend identisch) */

/* Auf den hellen Sektionen trägt der helle Fokusring nicht. */
.products-section :focus-visible { outline-color: #7a5b3c; }

.products-hero { min-height:72svh; background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.06),transparent 32%),radial-gradient(circle at 50% -20%,#17191c 0,#08090a 53%,#050607 100%); }
.products-hero-inner { position:relative; z-index:2; width:100%; padding-top:8rem; }
.products-title { max-width:1050px; font-size:clamp(3.8rem,8.4vw,7.7rem); line-height:.92; letter-spacing:-.075em; }
.products-title .line:nth-child(2) span { color:rgba(243,243,244,.42); }
.products-subtitle { max-width:610px; margin-top:2rem; color:var(--text-inv-sub); font-size:clamp(1.02rem,1.6vw,1.25rem); line-height:1.65; }
.products-orb { position:absolute; border-radius:50%; pointer-events:none; }
.products-orb-one { width:36rem; height:36rem; top:-25rem; left:8%; background:radial-gradient(circle,rgba(255,255,255,.075),transparent 68%); }
.products-orb-two { width:30rem; height:30rem; right:2%; bottom:-22rem; background:radial-gradient(circle,rgba(255,255,255,.045),transparent 70%); }

.products-section { position:relative; padding:10rem 0 12rem; background:#ebe9e4; color:#171819; }
.products-intro { display:grid; grid-template-columns:.6fr 1.2fr .8fr; gap:4rem; align-items:end; margin-bottom:8rem; }
.products-intro .eyebrow { align-self:start; color:#8d6947; }
.products-intro h2 { color:#171819; font-size:clamp(2.7rem,5vw,5.1rem); line-height:.98; letter-spacing:-.065em; }
.products-intro > p:last-child { color:#6e6a65; font-size:.94rem; line-height:1.75; }
.product-list { display:grid; gap:10rem; }
.portfolio-family { --family-rgb:181,135,91; scroll-margin-top:9rem; }
.family-header { display:grid; grid-template-columns:.45fr 1.1fr .9fr; gap:4rem; align-items:end; margin-bottom:3rem; }
.family-kicker { align-self:start; display:flex; gap:.65rem; color:#88837d; font-size:.61rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.family-kicker span:first-child { color:rgb(var(--family-rgb)); }
.family-header h2 { color:#171819; font-size:clamp(3rem,6vw,5.4rem); font-weight:500; line-height:.85; letter-spacing:-.075em; }
.family-statement { margin-top:1.3rem; color:#292a2b; font-size:clamp(1.05rem,1.7vw,1.3rem); }
.family-description { color:#716d68; line-height:1.75; }
.family-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1.4rem; }

.portfolio-card { position:relative; grid-column:span 12; min-height:620px; display:grid; grid-template-columns:.92fr 1.08fr; overflow:hidden; border:1px solid rgba(255,255,255,.72); border-radius:var(--radius-xl); background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.43)); color:#171819; cursor:pointer; box-shadow:0 45px 110px -72px rgba(35,29,23,.55),inset 0 1px rgba(255,255,255,.9); backdrop-filter:blur(26px) saturate(135%); -webkit-backdrop-filter:blur(26px) saturate(135%); transition:transform .55s var(--ease-out),box-shadow .55s,border-color .4s; }
.portfolio-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.38) 44%,transparent 58%); transform:translateX(-115%); transition:transform 1s var(--ease-out); }
.portfolio-card:hover,.portfolio-card:focus-within { transform:translateY(-8px); border-color:rgba(255,255,255,.95); box-shadow:0 55px 120px -68px rgba(63,45,29,.52),inset 0 1px #fff; }
.portfolio-card:focus-within { outline:2px solid #7a5b3c; outline-offset:4px; }
.portfolio-card:hover::after,.portfolio-card:focus-within::after { transform:translateX(110%); }
.portfolio-visual { position:relative; min-height:620px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 45%,rgba(var(--family-rgb),.22),transparent 35%),linear-gradient(145deg,#181a1d,#0d0f11); }
.portfolio-visual::before { content:""; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(circle,#000,transparent 68%); }
.portfolio-orbit { position:absolute; width:66%; aspect-ratio:1; border:1px solid rgba(var(--family-rgb),.3); border-radius:50%; box-shadow:inset 0 0 90px rgba(var(--family-rgb),.08),0 0 80px rgba(var(--family-rgb),.08); transition:transform .8s var(--ease-out); }
.portfolio-orbit::before,.portfolio-orbit::after { content:""; position:absolute; inset:18%; border:1px solid rgba(var(--family-rgb),.26); border-radius:35%; transform:rotate(45deg); }
.portfolio-orbit::after { inset:33%; border-radius:50%; transform:none; }
.portfolio-card:hover .portfolio-orbit { transform:scale(1.04) rotate(4deg); }
.portfolio-mark { position:relative; z-index:2; color:#f3ddc6; font-size:clamp(4rem,8vw,7rem); font-weight:300; letter-spacing:-.09em; text-shadow:0 0 38px rgba(var(--family-rgb),.55); }
.portfolio-visual small { position:absolute; left:2rem; bottom:1.8rem; color:rgba(255,255,255,.38); font-size:.55rem; font-weight:650; letter-spacing:.18em; }
.portfolio-copy { align-self:center; padding:clamp(2.5rem,5vw,5rem); }
.portfolio-meta { display:flex; justify-content:space-between; gap:1rem; color:rgb(var(--family-rgb)); font-size:.61rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.portfolio-meta span:last-child { color:#8b8781; }
.portfolio-copy h3 { max-width:15ch; text-wrap:balance; margin-top:3rem; color:#171819; font-size:clamp(2.2rem,3.6vw,3.4rem); line-height:1.02; letter-spacing:-.065em; }
.portfolio-copy > p { max-width:54ch; margin-top:1.5rem; color:#6c6863; font-size:.92rem; line-height:1.75; }
.portfolio-features { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2rem; padding:0; list-style:none; }
.portfolio-features li { display:flex; align-items:center; gap:.5rem; padding:.65rem .8rem; border:1px solid rgba(30,28,25,.09); border-radius:var(--radius-pill); background:rgba(255,255,255,.55); color:#4e4a46; font-size:.7rem; }
.portfolio-features svg { width:14px; height:14px; color:rgb(var(--family-rgb)); }
.portfolio-link { width:max-content; display:inline-flex; align-items:center; gap:.75rem; margin-top:2.2rem; padding:.9rem 1.15rem; border:1px solid #171819; border-radius:var(--radius); background:#171819; color:#fff; font-size:.78rem; font-weight:650; text-decoration:none; box-shadow:0 14px 35px -22px #000; transition:gap .3s,background .25s,transform .3s; }
.portfolio-link i { font-style:normal; }
.portfolio-card:hover .portfolio-link,.portfolio-card:focus-within .portfolio-link { gap:1rem; background:#000; transform:translateY(-2px); }
.portfolio-card { cursor:pointer; }
.portfolio-link { position:static; }
.portfolio-link::after { content:""; position:absolute; z-index:5; inset:0; border-radius:var(--radius-xl); }
.portfolio-link:focus-visible { outline:3px solid rgba(129,92,57,.5); outline-offset:4px; }

@media (max-width:1000px) {
  .products-intro,.family-header { grid-template-columns:1fr 1fr; }
  .products-intro .eyebrow,.family-kicker { grid-column:1/-1; }
  .portfolio-card { grid-template-columns:1fr; }
  .portfolio-visual { min-height:480px; }
}
@media (max-width:720px) {
  .products-hero { min-height:68svh; }
  .products-hero-inner { padding-top:7rem; }
  .products-section { padding:7rem 0; }
  .products-intro,.family-header { grid-template-columns:1fr; gap:1.5rem; margin-bottom:5rem; }
  .products-intro .eyebrow,.family-kicker { grid-column:auto; }
  .family-header h2 { font-size:clamp(3.8rem,20vw,5.8rem); }
  .portfolio-card { min-height:0; border-radius:var(--radius-lg); }
  .portfolio-visual { min-height:340px; }
  .portfolio-copy { padding:2rem 1.4rem 2.4rem; }
  .portfolio-copy h3 { margin-top:2.2rem; }
  .portfolio-features { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .portfolio-card,.portfolio-card::after,.portfolio-orbit,.portfolio-link { transition:none; } }