/* ══════════ Smilx — Werk-Seiten (eine Seite pro Stück) ══════════ */
:root{
  --black:#E4E3DD; --black2:#DAD9D1; --black3:#CFCEC5;
  --gold:#8C6A43;  --gold-l:#A9855A; --gold-d:#6E5334;
  --chalk:#2E3338; --chalk50:rgba(46,51,56,.62); --chalk25:rgba(46,51,56,.34);
  --ink:#1C1A16; --cream:#E7E6E0;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--chalk);font-family:'Cormorant',serif;overflow-x:hidden;cursor:none;position:relative;-webkit-font-smoothing:antialiased}

/* cursor */
.cur{position:fixed;width:10px;height:10px;border:1.5px solid var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
.cur-r{position:fixed;width:34px;height:34px;border:1px solid rgba(140,106,67,.22);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .13s,top .13s}

/* ── NAV (wie Hauptseite) ── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;height:108px;display:flex;align-items:center;justify-content:space-between;padding:0 60px;background:rgba(228,227,221,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(140,106,67,.18)}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand-mark{width:52px;height:52px;color:var(--gold);flex-shrink:0;display:block;background:currentColor;-webkit-mask:url('images/smilx-logo.png') center/contain no-repeat;mask:url('images/smilx-logo.png') center/contain no-repeat}
.logo-wrap{display:flex;flex-direction:column;line-height:1;gap:2px}
.logo-main{display:block;width:120px;height:92px;background:var(--gold);-webkit-mask:url('images/smilx-signature-tight.png') center/contain no-repeat;mask:url('images/smilx-signature-tight.png') center/contain no-repeat}
.logo-sub{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.2em;color:var(--gold-d);text-transform:uppercase;white-space:nowrap}
nav ul{display:flex;gap:40px;list-style:none;align-items:center}
nav a{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--chalk50);transition:color .2s}
nav a:hover,nav a.active{color:var(--gold)}
.nav-btn{padding:9px 24px;border:1px solid var(--gold-d);color:var(--gold)!important;transition:border-color .2s,background .2s!important}
.nav-btn:hover{border-color:var(--gold)!important;background:rgba(140,106,67,.08)!important}
#nav-toggle{display:none}
.burger{display:none}

/* ── KOPF: großes Bild + Text ── */
.crumbs{margin-top:108px;padding:34px 60px 0;max-width:1400px;margin-left:auto;margin-right:auto;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--chalk50)}
.crumbs a{color:var(--chalk50);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 10px;color:var(--gold-d)}
.werk-head{display:grid;grid-template-columns:1.35fr 1fr;gap:3px;padding:26px 60px 3px;max-width:1400px;margin:0 auto;min-height:680px}
.werk-head .work{height:100%;min-height:560px}
.werk-text{background:var(--black2);padding:60px 54px;display:flex;flex-direction:column;justify-content:center}
.item-num{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.25em;color:var(--gold-d);margin-bottom:22px;display:flex;align-items:center;gap:14px}
.item-num::before{content:'';display:block;width:28px;height:1px;background:var(--gold-d)}
.status{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.25em;text-transform:uppercase;padding:8px 16px;border:1px solid var(--gold-d);color:var(--gold-d);display:inline-block;margin-bottom:22px;align-self:flex-start}
.status.sold{border-color:var(--chalk25);color:var(--chalk50)}
h1.werk-name{font-family:'Cormorant',serif;font-size:clamp(46px,5vw,78px);font-weight:300;letter-spacing:-.015em;line-height:.98;color:var(--chalk);margin-bottom:12px}
h1.werk-name em{color:var(--gold);font-style:italic}
.item-mat{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:28px}
.werk-lead{font-size:18px;font-weight:300;line-height:1.8;color:var(--chalk50);max-width:460px;margin-bottom:30px}
.item-specs{list-style:none;margin-bottom:34px;border-top:1px solid rgba(140,106,67,.16)}
.item-specs li{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid rgba(140,106,67,.16);font-size:14.5px;font-weight:300}
.item-specs li span:first-child{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk50);padding-top:3px}
.item-specs li span:last-child{color:var(--chalk);text-align:right}
.item-buy{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.price{font-family:'Cormorant',serif;font-size:40px;font-weight:300;color:var(--chalk);line-height:1}
.price small{display:block;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk50);margin-top:8px}
.price.muted{color:var(--chalk50)}
.werk-legal{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.08em;color:var(--chalk50);margin-top:18px;line-height:1.8}
.werk-legal a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(140,106,67,.35)}
.btn-g{display:inline-block;padding:15px 40px;background:var(--gold);color:var(--black);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;text-decoration:none;font-weight:700;transition:background .2s,transform .15s}
.btn-g:hover{background:var(--gold-l);transform:translateY(-2px)}
.btn-ghost{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk50);text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:color .2s}
.btn-ghost:hover{color:var(--gold)}
.btn-ghost::after{content:'→';font-size:14px;font-family:sans-serif}

/* ── Bilder ── */
.work{position:relative;overflow:hidden;background:var(--black3);cursor:none;min-height:0}
.work-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.work:hover .work-img{transform:scale(1.04)}
.work::before,.work::after{content:'';position:absolute;width:32px;height:32px;z-index:2;opacity:0;transition:opacity .3s}
.work::before{top:16px;left:16px;border-top:1.5px solid var(--gold-d);border-left:1.5px solid var(--gold-d)}
.work::after{bottom:16px;right:16px;border-bottom:1.5px solid var(--gold-d);border-right:1.5px solid var(--gold-d)}
.work:hover::before,.work:hover::after{opacity:1}
.work-zoom{position:absolute;right:14px;bottom:14px;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);background:rgba(28,26,22,.55);padding:6px 10px;opacity:0;transition:opacity .3s;z-index:3}
.work:hover .work-zoom{opacity:1}
.sold-stamp{position:absolute;top:18px;left:18px;z-index:4;font-family:'Cormorant SC',serif;font-size:16px;letter-spacing:.32em;text-transform:uppercase;color:var(--cream);background:rgba(28,26,22,.78);padding:9px 18px 8px;border:1px solid rgba(231,230,224,.35)}
.is-sold .work-img{filter:saturate(.7) brightness(.95)}

/* Mosaik: großes Bild neben zwei gestapelten (dynamisch, nicht Reih und Glied) */
.gallery{padding:0 60px;max-width:1400px;margin:0 auto}
.m2{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:300px 300px;gap:3px;margin-top:3px}
.m2 .big{grid-row:1 / span 2}
.m2.left{grid-template-columns:1fr 1.5fr}
.m2.left .big{grid-column:2;grid-row:1 / span 2}
.m2.left .work:not(.big){grid-column:1}
.m2 .work{height:100%}
.duo{display:grid;grid-template-columns:1.2fr 1fr;gap:3px;margin-top:3px;height:460px}
.duo .work{height:100%}

/* ── Geschichte ── */
.story{padding:120px 60px;max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:90px;align-items:start}
.sec-label{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:14px}
.sec-label::before{content:'';display:block;width:28px;height:1px;background:var(--gold)}
.sec-title{font-family:'Cormorant',serif;font-size:clamp(38px,4.2vw,62px);font-weight:300;letter-spacing:-.02em;line-height:1.02}
.sec-title em{color:var(--gold);font-style:italic}
.story-body p{font-size:18px;font-weight:300;line-height:1.9;color:var(--chalk50);margin-bottom:22px;max-width:640px}
.story-body p:first-child::first-letter{font-size:3.2em;float:left;line-height:.9;padding:6px 10px 0 0;color:var(--gold);font-style:italic}

/* ── Entstehung (dunkel, mit Video) ── */
.process{background:var(--ink);color:var(--cream);padding:120px 60px}
.process-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:90px;align-items:center}
.process video{display:block;width:min(400px,80vw);aspect-ratio:9/16;object-fit:cover;background:#000;box-shadow:0 40px 90px -40px rgba(0,0,0,.9);border:1px solid rgba(169,133,90,.25)}
.process .sec-label{color:var(--gold-l)}
.process .sec-label::before{background:var(--gold-l)}
.process .sec-title{color:var(--cream)}
.process .sec-title em{color:var(--gold-l)}
.steps{list-style:none;margin-top:44px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:54px 1fr;gap:10px;padding:18px 0;border-top:1px solid rgba(169,133,90,.2)}
.steps li:last-child{border-bottom:1px solid rgba(169,133,90,.2)}
.steps li::before{content:'0' counter(s);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.15em;color:var(--gold-l);padding-top:6px}
.steps b{display:block;font-family:'Cormorant SC',serif;font-weight:400;font-size:22px;letter-spacing:.06em;color:var(--cream);margin-bottom:4px}
.steps span{font-size:16.5px;font-weight:300;line-height:1.7;color:rgba(231,230,224,.66)}

/* ── Weitere Werke ── */
.more{padding:110px 60px 120px;max-width:1400px;margin:0 auto}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:44px}
.more-card{position:relative;display:block;height:420px;overflow:hidden;text-decoration:none;cursor:none}
.more-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.more-card:hover img{transform:scale(1.05)}
.more-card .cap{position:absolute;left:0;right:0;bottom:0;padding:70px 26px 24px;background:linear-gradient(transparent,rgba(20,19,16,.82))}
.more-card .cap b{display:block;font-family:'Cormorant SC',serif;font-weight:400;font-size:26px;letter-spacing:.06em;color:#F6F1E6}
.more-card .cap small{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#E3CFAE}

/* ── CTA ── */
.shop-note{background:var(--ink);padding:90px 60px;text-align:center}
.shop-note p{font-family:'Cormorant',serif;font-size:clamp(26px,3vw,42px);font-weight:300;line-height:1.4;color:var(--cream);max-width:760px;margin:0 auto 34px}
.shop-note p em{color:var(--gold-l);font-style:italic}
.shop-note .small{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(231,230,224,.5);margin-bottom:34px}
.shop-note .btn-g{background:transparent;border:1px solid var(--gold);color:var(--gold-l)}
.shop-note .btn-g:hover{background:var(--gold);color:var(--ink)}
.fine{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;color:rgba(46,51,56,.5);text-align:center;padding:0 60px 40px;line-height:1.9;margin-top:-60px}

/* ── LIGHTBOX ── */
.lightbox{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;flex-direction:column;background:rgba(28,26,22,.94);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .35s ease;padding:clamp(20px,5vw,64px)}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lb-img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);transform:scale(.96);transition:transform .35s ease}
.lightbox.is-open .lb-img{transform:scale(1)}
.lb-cap{margin-top:18px;text-align:center;color:var(--cream)}
.lb-cap .lb-name{font-family:'Cormorant SC',serif;font-size:24px;font-weight:400;letter-spacing:.08em}
.lb-cap .lb-mat{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.2em;color:var(--gold-l);text-transform:uppercase;margin-top:6px}
.lb-count{position:absolute;top:26px;left:30px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.25em;color:rgba(231,230,224,.55)}
.lb-close,.lb-nav{position:absolute;background:none;border:none;color:var(--cream);cursor:none;font-family:'Cormorant',serif;font-size:44px;line-height:1;padding:12px 16px;opacity:.7;transition:opacity .3s}
.lb-close:hover,.lb-nav:hover{opacity:1}
.lb-close{top:14px;right:20px;font-size:40px}
.lb-nav{top:50%;transform:translateY(-50%);font-size:56px}
.lb-prev{left:10px}.lb-next{right:10px}

/* ── FOOTER ── */
footer{background:#141310;border-top:1px solid rgba(140,106,67,.22);padding:36px 60px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px}
.f-logo{display:block;width:60px;height:68px;background:var(--gold-l);-webkit-mask:url('images/smilx-signature.png') center/contain no-repeat;mask:url('images/smilx-signature.png') center/contain no-repeat}
.f-links{display:flex;justify-content:center;gap:32px;list-style:none}
.f-links a{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:rgba(228,227,221,.5);transition:color .2s}
.f-links a:hover{color:var(--gold)}
.f-copy{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;color:rgba(228,227,221,.4);text-align:right;line-height:1.7}

/* ══════════ MOBILE ══════════ */
@media(max-width:920px){
  .werk-head{grid-template-columns:1fr;min-height:0}
  .werk-head .work{min-height:0;height:420px}
  .werk-text{padding:40px 30px}
  .story{grid-template-columns:1fr;gap:34px;padding:80px 30px}
  .process-in{grid-template-columns:1fr;gap:50px;justify-items:center}
  .more-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .cur,.cur-r{display:none}
  body{cursor:auto}
  .work,.more-card,.lb-close,.lb-nav{cursor:pointer}
  nav{padding:0 20px;height:78px}
  .brand-mark{width:40px;height:40px}
  .logo-main{width:84px;height:64px}
  .logo-sub{font-size:7.5px;letter-spacing:.16em}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;cursor:pointer;z-index:600}
  .burger span{display:block;height:2px;width:24px;background:var(--gold);border-radius:2px;transition:transform .25s,opacity .2s}
  nav ul{position:fixed;top:78px;left:0;right:0;flex-direction:column;gap:0;padding:6px 0;background:rgba(228,227,221,.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(140,106,67,.22);transform:translateY(-14px);opacity:0;visibility:hidden;transition:.25s}
  #nav-toggle:checked ~ ul{transform:none;opacity:1;visibility:visible}
  nav ul li{width:100%;text-align:center}
  nav ul li a{display:block;padding:15px;font-size:11px}
  .nav-btn{display:inline-block;margin:6px auto}
  #nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
  #nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .crumbs{margin-top:78px;padding:24px 22px 0}
  .werk-head{padding:18px 22px 3px}
  .werk-head .work{height:360px}
  .werk-text{padding:36px 22px}
  .gallery{padding:0 22px}
  .m2,.m2.left{grid-template-columns:1fr;grid-template-rows:auto}
  .m2 .big,.m2.left .big,.m2.left .work:not(.big){grid-row:auto;grid-column:auto}
  .m2 .work{height:280px}
  .duo{grid-template-columns:1fr;height:auto}
  .duo .work{height:300px}
  .story{padding:64px 22px}
  .process{padding:80px 22px}
  .more{padding:70px 22px 80px}
  .more-grid{grid-template-columns:1fr}
  .more-card{height:300px}
  .shop-note{padding:64px 22px}
  .fine{padding:0 22px 30px;margin-top:-40px}
  .lb-nav{font-size:40px;padding:10px}
  .lb-img{max-height:calc(100vh - 170px)}
  footer{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center;padding:34px 22px}
  .f-links{flex-wrap:wrap;justify-content:center;gap:16px}
  .f-copy{text-align:center}
}

/* ── Video: startet stumm beim Reinscrollen, Ton per Button ── */
.vwrap{position:relative;width:min(400px,80vw)}
.vwrap video{width:100%}
.v-sound{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;padding:11px 20px 11px 16px;background:rgba(20,19,16,.72);backdrop-filter:blur(6px);border:1px solid rgba(201,176,138,.55);color:#F6F1E6;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;cursor:none;transition:background .2s,border-color .2s,opacity .3s}
.v-sound:hover{background:rgba(140,106,67,.85);border-color:var(--gold-l)}
.v-ico{width:18px;height:18px;flex-shrink:0}
.v-ico .v-w{display:none}
.vwrap.sound-on .v-ico .v-x{display:none}
.vwrap.sound-on .v-ico .v-w{display:inline}
.vwrap.sound-on .v-sound{opacity:.55;bottom:14px;left:auto;right:14px;transform:none;padding:9px 14px 9px 12px}
.vwrap.sound-on .v-sound:hover{opacity:1}
@media(max-width:720px){.v-sound{cursor:pointer}}