:root {
  --text: #222;
  --muted: #666;
  --line: #dedede;
  --paper: #fff;
  --soft: #f6f5f2;
  --accent: #333;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.site-header {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.header-inner {
  max-width: var(--max);
  margin: auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.nav { display: flex; gap: 20px; flex-wrap: wrap; }
.nav a { text-decoration: none; font-size: .95rem; }
.nav a:hover { text-decoration: underline; }
.container { max-width: var(--max); margin: auto; padding: 0 24px; }
.hero {
  min-height: 68vh;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 64px;
  padding-top: 70px;
  padding-bottom: 70px;
}
.kicker {
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--muted);
  font-size: .8rem;
  margin-bottom: 12px;
}
h1 {
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: .95;
  margin: 0 0 20px;
  font-weight: 500;
  letter-spacing: -.04em;
}
h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.1; margin: 0 0 20px; font-weight: 500; }
h3 { margin: 0 0 8px; }
/* Handwritten accent inspired by Heinz Volk's preferred lettering.
   A licensed webfont can be added later if the exact Cindy Becker font file is available. */
.brand, h1, h2 {
  font-family: "Cindy Becker", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-weight: 500;
  letter-spacing: 0;
}
.photo-note {
  margin: 16px 0 28px;
  color: var(--muted);
  font-size: .98rem;
  max-width: 850px;
}
.lead { font-size: 1.2rem; max-width: 680px; }
.button {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 18px;
  border: 1px solid var(--text);
  text-decoration: none;
}
.button:hover { background: var(--text); color: #fff; }
.hero-art img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
}
.section { padding: 80px 0; }
.section-soft { background: var(--soft); }
.death {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}
.note {
  border-left: 3px solid var(--text);
  padding-left: 22px;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 24px;
}
.card {
  min-width: 0;
}
.card-image {
  aspect-ratio: 4 / 5;
  background: #eee;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f2f2f2;
}
.card-info { padding-top: 12px; }
.card-number { color: var(--muted); font-size: .8rem; }
.card-title { font-size: 1.05rem; margin-top: 2px; }
.card-meta { color: var(--muted); font-size: .9rem; }
.price { margin-top: 5px; font-weight: 700; }
.empty-note {
  margin-bottom: 34px;
  color: var(--muted);
}
footer {
  border-top: 1px solid var(--line);
  padding: 34px 0;
  color: var(--muted);
  font-size: .9rem;
}
.footer-inner {
  max-width: var(--max);
  margin: auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
@media (max-width: 800px) {
  .header-inner { align-items: flex-start; flex-direction: column; gap: 10px; }
  .hero { grid-template-columns: 1fr; gap: 35px; padding-top: 45px; }
  .hero-art { order: -1; max-width: 520px; }
  .death { grid-template-columns: 1fr; gap: 30px; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
}
@media (max-width: 520px) {
  .container, .header-inner, .footer-inner { padding-left: 17px; padding-right: 17px; }
  .gallery { grid-template-columns: 1fr; }
  .section { padding: 55px 0; }
  .hero { min-height: auto; }
}

.portrait { width: 100%; max-width: 360px; height: auto; object-fit: cover; margin-top: 24px; }
.portrait-large { max-width: 420px; margin-top: 0; }
.bio-layout { display: grid; grid-template-columns: minmax(220px, .75fr) 1.25fr; gap: 48px; align-items: start; margin-top: 28px; }
@media (max-width: 800px) { .bio-layout { grid-template-columns: 1fr; gap: 28px; } .portrait-large { max-width: 360px; } }

.filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:24px; margin:30px 0 10px; background:var(--soft); border:1px solid var(--line); }
.filter-field { display:flex; flex-direction:column; gap:6px; }
.filter-field label { font-size:.88rem; font-weight:700; }
.filter-field select { width:100%; padding:11px 10px; border:1px solid #bbb; border-radius:0; background:white; color:var(--text); font:inherit; }
.reset-button { align-self:end; padding:11px 14px; background:white; border:1px solid var(--text); font:inherit; cursor:pointer; }
.reset-button:hover { background:var(--text); color:white; }
.result-count { color:var(--muted); font-size:.92rem; margin:12px 0 30px; }
.card[hidden] { display:none !important; }
.card-title { font-size:1.1rem; line-height:1.3; font-weight:600; margin:4px 0 8px; }
.card-description { margin:8px 0 0; font-size:.9rem; color:#444; }
.status { display:inline-block; margin-top:9px; font-size:.8rem; }
.status.available { color:#27633a; }
.status.unavailable { color:#8b2f2f; }
.interest-link { display:inline-block; margin-top:10px; font-size:.9rem; text-underline-offset:3px; }
.gallery-footer { margin-top:56px; }
@media (max-width:800px) { .filters { grid-template-columns:repeat(2,minmax(0,1fr)); padding:17px; } }
@media (max-width:520px) { .filters { grid-template-columns:1fr; } .reset-button { width:100%; } }

/* Multi-select filter groups */
.filters { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
.filter-group { min-width:0; position:relative; }
.filter-group summary { cursor:pointer; list-style:none; padding:11px 34px 11px 10px; border:1px solid #bbb; background:#fff; position:relative; font-weight:600; }
.filter-group summary::-webkit-details-marker { display:none; }
.filter-group summary:after { content:"＋"; position:absolute; right:10px; top:9px; }
.filter-group[open] summary:after { content:"−"; }
.filter-options { display:grid; gap:7px; max-height:230px; overflow:auto; padding:12px; border:1px solid var(--line); border-top:0; background:#fff; }
.filter-option { display:flex; align-items:flex-start; gap:8px; font-size:.92rem; font-weight:400; cursor:pointer; }
.filter-option input { margin-top:5px; flex:0 0 auto; }
.reset-button { min-height:44px; }
.status { margin-right:12px; }
.interest-link { display:block; width:fit-content; margin-left:0; margin-top:12px; }
.memorial-portrait { width:100%; max-width:420px; margin-top:0; }
/* Artwork lightbox */
.card-image img { cursor:zoom-in; }
body.lightbox-open { overflow:hidden; }
.lightbox { display:none; position:fixed; inset:0; z-index:1000; background:rgba(10,10,10,.94); color:white; align-items:center; justify-content:center; padding:64px 72px 56px; }
.lightbox.open { display:flex; }
.lightbox-figure { margin:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; }
.lightbox-figure img { max-width:100%; max-height:calc(100% - 34px); width:auto; height:auto; object-fit:contain; cursor:default; }
.lightbox-figure figcaption { padding-top:12px; text-align:center; color:#eee; }
.lightbox-close,.lightbox-arrow { position:absolute; color:white; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox-close { top:16px; right:20px; width:46px; height:46px; font-size:2rem; line-height:1; }
.lightbox-arrow { top:50%; transform:translateY(-50%); width:48px; height:64px; font-size:3rem; line-height:1; }
.lightbox-prev { left:14px; }
.lightbox-next { right:14px; }
.lightbox-help { position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#ccc; font-size:.8rem; }
.lightbox-close:hover,.lightbox-arrow:hover { background:rgba(255,255,255,.25); }
@media (max-width:800px) { .filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .filters { grid-template-columns:1fr; } .lightbox { padding:60px 12px 54px; } .lightbox-arrow { width:38px; height:54px; font-size:2.4rem; } .lightbox-prev { left:4px; } .lightbox-next { right:4px; } .lightbox-figure img { max-width:100%; max-height:calc(100% - 40px); } }

/* Verfügbarkeitsstatus v9 */
.status.reserved{background:#fff1d6;color:#805500}.status.unavailable{background:#eeeeee;color:#555}