@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,440;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --paper:#F6F3EC;
  --paper-deep:#EDE7D9;
  --ink:#201C16;
  --ink-soft:#726A5C;
  --accent:#3F4A38;
  --accent-soft:#5C6A53;
  --brass:#9C7A3F;
  --line:#DDD4C1;
  --card:#FFFFFF;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.13  0 0 0 0 0.11  0 0 0 0 0.09  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  font-size:15.5px;
  line-height:1.65;
}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--brass);}

/* ---------- Decorative emblem (verschlungenes Band) ---------- */
.mark path{fill:none;stroke:currentColor;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Header ---------- */
header.site{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:26px 28px 20px;
  overflow:hidden;
}
header.site .mark-watermark{
  position:absolute;
  top:50%;right:6px;
  transform:translateY(-50%);
  width:130px;height:195px;
  color:var(--brass);
  opacity:.16;
  pointer-events:none;
}
header.site .brand-row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
}
header.site .mark-small{width:28px;height:42px;color:var(--brass);flex:none;}
header.site .brand{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:440;
  font-size:23px;
  color:#fff;
  letter-spacing:.2px;
  line-height:1.2;
}
header.site .brand .brand-sub{
  display:block;
  font-family:'Work Sans',sans-serif;
  font-style:normal;
  font-weight:500;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--brass);
  margin-top:3px;
}
nav.main{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin-top:18px;
  font-size:13.5px;
}
nav.main a{color:#CFC6B4;transition:color .15s ease;}
nav.main a:hover{color:#fff;}
nav.main a.active{color:#fff;position:relative;}
nav.main a.active::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-6px;
  height:1px;background:var(--brass);
}
nav.sub{
  display:flex;
  flex-wrap:wrap;
  gap:4px 26px;
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:13px 28px;
  font-size:13px;
  color:var(--ink-soft);
}
nav.sub a{color:var(--ink-soft);}
nav.sub a.active{color:var(--ink);font-weight:600;}
nav.sub a:hover{color:var(--brass);}

main{max-width:1100px;margin:0 auto;padding:44px 28px 70px;}

/* ---------- Hero (Startseite) ---------- */
.hero{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.hero > div:first-child{flex:1 1 auto;min-width:280px;padding-right:40px;}
.hero .mark-hero{flex:0 0 auto;width:200px;height:auto;color:var(--accent);}
@media (max-width:760px){
  .hero{flex-direction:column;}
  .hero > div:first-child{padding-right:0;}
  .hero .mark-hero{width:130px;order:-1;margin-bottom:26px;}
}

/* ---------- Back link ---------- */
.back-link{margin:0 0 26px;}
.back-link a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:500;
  color:var(--ink-soft);
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
}
.back-link a:hover{color:var(--brass);border-color:var(--brass);}

/* ---------- Headings ---------- */
h1{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-style:normal;
  font-size:clamp(30px,4vw,42px);
  letter-spacing:-.01em;
  margin:0 0 22px;
}
.intro{max-width:66ch;color:var(--ink-soft);margin-bottom:38px;font-size:16px;}

/* ---------- Gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:36px 30px;
}
.piece{
  background:none;
}
.piece img{
  width:100%;
  display:block;
  background:var(--paper-deep);
  filter:saturate(.96);
  transition:filter .25s ease;
}
.piece:hover img{filter:saturate(1.08);}
.piece .meta{
  padding:13px 0 0;
  margin-top:13px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-soft);
}
.piece .meta .titel{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  color:var(--ink);
  font-size:16px;
  display:block;
  margin-bottom:5px;
  line-height:1.3;
}

/* ---------- Section / artist index ---------- */
.section-links{
  display:flex;
  flex-wrap:wrap;
  margin-top:6px;
  border-top:1px solid var(--line);
}
.section-links a{
  flex:0 0 100%;
  max-width:100%;
}
@media (min-width:640px){
  .section-links a{flex:0 0 calc(50% - 24px);max-width:calc(50% - 24px);}
  .section-links a:nth-child(odd){margin-right:24px;}
}
.section-links a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:15px 2px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:19px;
  transition:padding-left .2s ease,color .2s ease;
}
.section-links a::after{
  content:"→";
  font-family:'Work Sans',sans-serif;
  font-size:14px;
  color:var(--brass);
  opacity:0;
  transition:opacity .2s ease;
}
.section-links a:hover{padding-left:10px;color:var(--accent);}
.section-links a:hover::after{opacity:1;}

/* ---------- Forms ---------- */
form.contact{max-width:480px;}
form.contact label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.03em;margin:18px 0 7px;color:var(--ink-soft);}
form.contact input, form.contact textarea{
  width:100%;
  padding:10px 2px;
  border:none;
  border-bottom:1.5px solid var(--line);
  border-radius:0;
  background:transparent;
  font-family:'Work Sans',sans-serif;
  font-size:15px;
  color:var(--ink);
  transition:border-color .2s ease;
}
form.contact input:focus, form.contact textarea:focus{
  outline:none;border-color:var(--accent);
}
form.contact button{
  margin-top:24px;
  background:var(--accent);
  color:#fff;
  border:none;
  padding:12px 26px;
  border-radius:2px;
  font-family:'Work Sans',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .2s ease;
}
form.contact button:hover{background:var(--accent-soft);}
.form-msg{margin-top:14px;font-size:13.5px;}

/* ---------- Footer & Credit ---------- */
footer.site{
  text-align:center;
  font-size:12px;
  color:var(--ink-soft);
  padding:28px 24px 46px;
  letter-spacing:.02em;
}
.sponsor{
  margin-top:46px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.sponsor-label{
  font-size:11.5px;
  color:var(--ink-soft);
  letter-spacing:.03em;
  margin:0;
}
.sponsor-logos{
  display:flex;
  align-items:center;
}
.sponsor-logos img{display:block;}
.sponsor-logos .logo-langewitz{max-width:160px;width:100%;height:auto;}

@media (max-width:560px){
  header.site{padding:18px 20px 14px;}
  main{padding:34px 20px 56px;}
  nav.sub{padding:11px 20px;}
  .gallery{gap:30px 22px;}
}