:root{
  --bg: #0c0c0d;
  --bg-card: #151517;
  --text: #e9e6df;
  --text-dim: #918d84;
  --line: #29282a;
  --accent: #b2402f; /* darkroom safelight red */
  --font-display: 'Fraunces', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* configurable via Konfigurationstool / config.json */
  --cover-columns: 3;
  --cover-gap: 2.2rem;
  --corner-radius: 6px;
  --thumb-dim: 0.55;
  --hover-zoom: 1.04;
  --transition-speed: 0.35s;
  --watermark-opacity: 0.55;
  --lightbox-duration: 0.45s;
  --lightbox-scale-from: 0.88;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

a{ color: inherit; text-decoration: none; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.4rem 2.2rem;
  background: linear-gradient(to bottom, rgba(12,12,13,0.95), rgba(12,12,13,0.75));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap; gap: 0.8rem;
}
.wordmark{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
.album-nav{
  display:flex; gap: 1.6rem; flex-wrap: wrap;
}
.album-nav a{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.album-nav a:hover, .album-nav a.active{
  color: var(--text);
  border-color: var(--accent);
}

/* ---------- Home: album covers ---------- */
.album-grid{
  display:grid;
  grid-template-columns: repeat(var(--cover-columns), 1fr);
  gap: var(--cover-gap);
  padding: 2.4rem;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 900px){
  .album-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.4rem; padding: 1.4rem; }
}
@media (max-width: 560px){
  .album-grid{ grid-template-columns: 1fr; }
}
.album-cover{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-card);
  border-radius: var(--corner-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.album-cover img{
  width:100%; height:100%; object-fit: cover;
  display:block;
  transform: scale(1.0);
  transition: transform .6s ease;
  filter: grayscale(15%) contrast(1.02);
}
.album-cover:hover img{ transform: scale(1.05); }
.album-cover .cover-meta{
  position:absolute; left:0; right:0; bottom:0;
  padding: 1rem 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  transform: translateY(6px);
  opacity: 0.92;
}
.cover-meta .title{
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
}
.cover-meta .count{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* ---------- Album view: masonry grid ---------- */
.album-title-block{
  padding: 2.4rem 2.2rem 1rem;
}
.album-title-block h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  margin: 0 0 0.3rem;
}
.album-title-block p{
  color: var(--text-dim);
  max-width: 60ch;
  font-size: 0.95rem;
  line-height: 1.5;
  margin:0;
}

.photo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
  padding: 0 2.2rem 3rem;
}
.photo-cell{
  position:relative;
  overflow:hidden;
  cursor: pointer;
  background: var(--bg-card);
  aspect-ratio: 3/2;
}
.photo-cell img{
  width:100%; height:100%; object-fit:cover;
  display:block;
  filter: brightness(var(--thumb-dim)) saturate(0.9);
  transition: transform var(--transition-speed) ease, filter var(--transition-speed) ease;
}
.photo-cell:hover img{ transform: scale(var(--hover-zoom)); filter: brightness(1) saturate(1); }

/* contact-sheet style metadata strip, signature element */
.photo-cell .meta-strip{
  position:absolute; left:0; right:0; bottom:0;
  transform: translateY(100%);
  transition: transform .28s ease;
  background: rgba(10,10,10,0.88);
  border-top: 1px solid var(--accent);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-cell:hover .meta-strip{ transform: translateY(0); }
.meta-strip .frame-no{ color: var(--accent); margin-right: 0.5em; }

/* ---------- Lightbox ---------- */
.lightbox[hidden]{
  display: none !important;
}
.lightbox{
  position: fixed; inset:0; z-index: 50;
  background: rgba(6,6,7,0.97);
  display:flex; align-items:center; justify-content:center;
  padding: 4vh 4vw;
  opacity: 0;
  transition: opacity var(--lightbox-duration, 0.45s) ease;
}
.lightbox.is-visible{ opacity: 1; }
.lb-figure{ margin:0; max-width: 100%; max-height: 100%; text-align:center; position: relative; }
.lb-figure img{
  max-width: 92vw; max-height: 82vh;
  object-fit: contain;
  display:block; margin: 0 auto;
  transform: scale(var(--lightbox-scale-from, 0.88)) translateY(14px);
  opacity: 0;
  transition: transform var(--lightbox-duration, 0.45s) cubic-bezier(0.22, 1, 0.36, 1),
              opacity var(--lightbox-duration, 0.45s) ease;
}
.lightbox.is-visible .lb-figure img{
  transform: scale(1) translateY(0);
  opacity: 1;
}
.lb-caption{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--lightbox-duration, 0.45s) ease calc(var(--lightbox-duration, 0.45s) / 3),
              transform var(--lightbox-duration, 0.45s) ease calc(var(--lightbox-duration, 0.45s) / 3);
}
.lightbox.is-visible .lb-caption{
  opacity: 1;
  transform: translateY(0);
}
.lb-watermark{
  position: absolute;
  right: 0.8rem; bottom: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: #fff;
  opacity: var(--watermark-opacity);
  background: rgba(0,0,0,0.35);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  pointer-events: none;
  text-transform: lowercase;
}
.lb-caption{
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}
.lb-caption .frame-no{ color: var(--accent); margin-right: 0.6em; }
.lb-close, .lb-prev, .lb-next{
  position:absolute;
  background:none; border:none; color: var(--text);
  font-size: 2rem; line-height:1; cursor:pointer;
  padding: 0.6rem 1rem;
  opacity: 0.7; transition: opacity .2s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{ opacity: 1; }
.lb-close{ top: 1.4rem; right: 1.6rem; font-size: 2.2rem; }
.lb-prev{ left: 0.6rem; top:50%; transform: translateY(-50%); }
.lb-next{ right: 0.6rem; top:50%; transform: translateY(-50%); }

/* ---------- Footer ---------- */
.site-footer{
  padding: 1.6rem 2.2rem 3rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  border-top: 1px solid var(--line);
  text-align:center;
  display:flex; flex-direction:column; gap: 0.6rem; align-items:center;
}
.footer-nav{ display:flex; gap: 1.4rem; }
.footer-nav a{ color: var(--text-dim); transition: color .2s; }
.footer-nav a:hover{ color: var(--text); }

/* ---------- Contact form ---------- */
.contact-form{
  max-width: 480px;
  margin: 0 auto 3rem;
  padding: 0 2.2rem;
  display:flex; flex-direction: column; gap: 1.2rem;
}
.contact-form label{
  display:flex; flex-direction:column; gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.contact-form input, .contact-form textarea{
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.7rem 0.8rem;
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline: none;
  border-color: var(--accent);
}
.contact-form button{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  padding: 0.8rem 1.4rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity .2s;
}
.contact-form button:hover{ opacity: 0.85; }
.hp-field{
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}
.form-status{ font-family: var(--font-mono); font-size: 0.8rem; }
.form-status.success{ color: #6fae7f; }
.form-status.error{ color: #c66; }

/* ---------- Legal text ---------- */
.legal-text{
  max-width: 60ch;
  margin: 0 auto 3rem;
  padding: 0 2.2rem;
  line-height: 1.7;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.legal-text strong{ color: var(--text); }
.legal-note{ margin-top: 1.6rem; font-size: 0.8rem; opacity: 0.75; }

/* focus visibility for keyboard users */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 640px){
  .site-header{ padding: 1rem 1.2rem; }
  .album-title-block{ padding: 1.6rem 1.2rem 0.8rem; }
  .lb-prev, .lb-next{ font-size: 1.5rem; padding: 0.4rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}