body{
margin:0;
background:#403c30;
color:#eae7e1;
border-color:#3d392e;
font-family:Arial,Helvetica,sans-serif;
}

.wrap{
width:min(1400px,calc(100% - 40px));
margin:auto;
}

.hero{
padding:50px 0;
border-bottom:1px solid #333;
}

h1{
font-size:60px;
margin:0;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:30px;
padding:40px 0;
}

.art{
cursor:pointer;
}

.art img{
width:100%;
display:block;
border-radius:10px;
}

.caption{
margin-top:8px;
font-size:14px;
color:#ccc;
}

.viewer{
position:fixed;
inset:0;
background:rgba(0,0,0,.92);
display:none;
align-items:center;
justify-content:center;
z-index:1000;
}

.viewer-inner{
max-width:1200px;
width:90%;
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
}

.viewer img{
width:100%;
max-height:85vh;
object-fit:contain;
}

.viewer-info{
padding-top:20px;
}

#close{
position:absolute;
top:20px;
right:30px;
font-size:40px;
background:none;
border:none;
color:#fff;
cursor:pointer;
}

.buy{
display:inline-block;
margin-top:20px;
background:#e7d8b5;
color:#000;
padding:12px 16px;
text-decoration:none;
}
/* Anthrazit-Look + Kontaktbereich */

body{
  background:#1a1a1d;
  color:#eae7e1;
}

.hero{
  border-bottom:1px solid #2a2a2e;
}

.caption,
.viewer-info p,
.intro{
  color:#bfbab0;
}

.contact{
  border-top:1px solid #2a2a2e;
  margin-top:60px;
  padding:40px 0 60px;
}

.contact h2{
  margin-bottom:20px;
  color:#eae7e1;
}

.contact p{
  color:#bfbab0;
  line-height:1.7;
}

.contact a{
  color:#e7d8b5;
  text-decoration:none;
}

.contact a:hover{
  text-decoration:underline;
}

.buy{
  background:#e7d8b5;
  color:#111;
}