:root{
  --sage:#D3DACF;
  --sage-deep:#bcc6b6;
  --paper:#F1F1F1;
  --ink:#474d43;
  --ink-soft:#727a6c;
  --silver-grad:linear-gradient(100deg,#7f7f7f 0%,#c9c9c9 18%,#f6f6f6 30%,#aeaeae 46%,#6c6c6c 60%,#c6c6c6 78%,#8c8c8c 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost',-apple-system,Segoe UI,sans-serif;
  font-weight:300;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Kopfbereich ---------- */
.ghead{
  background:var(--sage);
  padding:22px 20px 30px;
  text-align:center;
  position:relative;
}
.back{
  position:absolute; left:16px; top:20px;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 4px;
}
.back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.back:hover{color:var(--ink)}

.gtime{
  margin-top:30px;
  font-size:30px; font-weight:300; letter-spacing:.04em;
}
.gtitle{
  margin-top:5px;
  font-size:13px; font-weight:500; letter-spacing:.30em;
  text-transform:uppercase; padding-left:.30em;
}
.gplace{margin-top:4px;font-size:14px;color:var(--ink-soft);letter-spacing:.05em}
.gcount{margin-top:9px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

.controls{
  margin-top:20px;
  display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.btn{
  font-family:inherit; font-size:11.5px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--ink-soft);
  background:transparent; color:var(--ink);
  border-radius:2px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .18s,border-color .18s;
}
.btn:hover{background:rgba(255,255,255,.45);border-color:var(--ink)}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Schalter Schwarzweiss */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.track{
  width:44px;height:24px;border-radius:12px;
  background:rgba(255,255,255,.55);
  border:1px solid var(--ink-soft);
  position:relative;transition:background .2s;
  flex:0 0 auto;
}
.knob{
  position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;
  background:var(--ink-soft);
  transition:transform .2s,background .2s;
}
.switch input:checked + .track{background:var(--ink)}
.switch input:checked + .track .knob{transform:translateX(20px);background:#fff}
.switch input:focus-visible + .track{outline:2px solid var(--ink);outline-offset:2px}
.switch .lbl{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}

/* ---------- Raster ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
  padding:22px 14px 60px;
  max-width:1240px;margin:0 auto;
}
@media(min-width:700px){ .grid{gap:14px;padding:30px 24px 70px} }

.tile{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--sage-deep);
  border:0;padding:0;
  cursor:pointer;
  display:block;
  box-shadow:0 3px 10px rgba(70,80,68,.14);
}
.tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease, filter .25s ease;
}
.tile:hover img{transform:scale(1.05)}
.tile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
body.bw .tile img{filter:grayscale(1)}

.tile .dl{
  position:absolute;right:7px;bottom:7px;
  width:31px;height:31px;border-radius:50%;
  background:rgba(255,255,255,.86);
  border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s,background .2s;
}
.tile:hover .dl,.tile:focus-within .dl{opacity:1}
@media(hover:none){ .tile .dl{opacity:.92} }
.tile .dl:hover{background:#fff}
.tile .dl svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Lightbox / Diashow ---------- */
.lb{
  position:fixed;inset:0;z-index:60;
  background:#1d211c;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.lb.open{opacity:1;pointer-events:auto}

.lb-bar{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:12px 14px;
  color:#e9ece7;
}
.lb-count{font-size:11.5px;letter-spacing:.22em;color:#aab3a6}
.lb-actions{display:flex;align-items:center;gap:8px}
.lb-btn{
  background:transparent;border:1px solid rgba(233,236,231,.35);
  color:#e9ece7;border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:8px 12px;display:inline-flex;align-items:center;gap:7px;
  transition:background .18s,border-color .18s;
}
.lb-btn:hover{background:rgba(233,236,231,.14);border-color:rgba(233,236,231,.7)}
.lb-btn[disabled]{opacity:.5;cursor:default}
.lb-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-close{
  background:transparent;border:0;color:#e9ece7;cursor:pointer;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
}
.lb-close svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}

.lb-stage{
  flex:1 1 auto;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:0 8px 14px;min-height:0;
}
.lb-stage img{
  max-width:100%;max-height:100%;
  object-fit:contain;display:block;
  transition:filter .25s ease;
  user-select:none;-webkit-user-drag:none;
}
body.bw .lb-stage img{filter:grayscale(1)}

.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:82px;
  background:rgba(0,0,0,.28);border:0;cursor:pointer;
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .18s;
}
.lb-nav:hover{background:rgba(0,0,0,.5)}
.lb-nav.prev{left:0}
.lb-nav.next{right:0}
.lb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.lb-hint{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8d968a;
  pointer-events:none;
}
@media(max-width:600px){
  .lb-hint{display:none}
  .lb-nav{width:44px;height:70px}
  .lb-btn .t{display:none}
  .lb-btn{padding:9px 11px}
}

/* Fusszeile */
.gfoot{
  text-align:center;padding:0 20px 46px;
}
.gfoot a{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid rgba(114,122,108,.4);padding-bottom:3px;
}
.gfoot a:hover{color:var(--ink)}