@font-face{
  font-family:"JanzEinfach";
  src:url("JanzEinfachBuchstabe.woff2") format("woff2");
  font-display:swap;
}

:root{
  --bg:#ededed;
  --bg-soft:#f6f6f6;
  --ink:#1d1d1b;
  --ink-soft:#6a6a68;
  --line:#d6d6d4;
  --max:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}

/* ---------- Kopf ---------- */
header.site{padding:26px 0 14px}
header.site .logo{display:block;width:150px;max-width:52vw}
header.site .logo img{width:100%;height:auto;display:block}
nav.site{margin-top:14px;font-family:"JanzEinfach",Georgia,serif;font-size:20px}
nav.site a{margin-right:16px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
nav.site a:hover{border-color:var(--ink)}

/* ---------- Artikel ---------- */
article.post{padding:10px 0 30px;border-top:1px solid var(--line);margin-top:8px}
h1{font-family:"JanzEinfach",Georgia,serif;font-weight:400;font-size:clamp(30px,8vw,52px);line-height:1.05;margin:26px 0 6px}
h2{font-family:"JanzEinfach",Georgia,serif;font-weight:400;font-size:clamp(22px,5vw,30px);margin:32px 0 8px}
.meta{color:var(--ink-soft);font-size:14px;margin:0 0 18px}
.lead{font-size:17px;max-width:62ch}
p{max-width:68ch}

/* ---------- Galerie ---------- */
.gallery{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin:26px 0 10px;
}
@media (min-width:560px){.gallery{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:900px){.gallery{grid-template-columns:1fr 1fr 1fr}}

.tile{
  background:var(--bg-soft);
  border:1px solid var(--line);
  padding:0;
  margin:0;
  cursor:zoom-in;
  display:block;
  width:100%;
  overflow:hidden;
}
.tile img{width:100%;height:auto;display:block}
.tile figcaption{
  font-size:13px;color:var(--ink-soft);
  padding:8px 10px;border-top:1px solid var(--line);
  word-break:break-word;
}

.empty{
  border:1px dashed var(--line);padding:22px;color:var(--ink-soft);
  font-size:15px;background:var(--bg-soft);
}
.empty code{background:#e2e2e0;padding:1px 5px}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:60;
  background:rgba(20,20,20,.93);
  display:none;
  flex-direction:column;
}
.lb[open],.lb.on{display:flex}
.lb-stage{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:12px;min-height:0;
}
.lb-stage img{
  max-width:100%;max-height:100%;
  object-fit:contain;display:block;
  touch-action:pinch-zoom;
}
.lb-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:#111;color:#f6f6f6;
  font-size:14px;
}
.lb-bar .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75}
.lb-btn{
  background:#f6f6f6;color:#1d1d1b;border:0;
  padding:11px 14px;font:inherit;cursor:pointer;
  min-width:44px;min-height:44px;line-height:1;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
}
.lb-btn:active{background:#dcdcdc}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.35);color:#fff;border:0;
  width:46px;height:66px;font-size:24px;cursor:pointer;
}
.lb-nav.prev{left:0}
.lb-nav.next{right:0}
body.lb-open{overflow:hidden}

/* ---------- Intro-Animation ---------- */
#intro{
  position:fixed;inset:0;z-index:99;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  animation:introOut .35s ease .95s forwards;
}
#intro .mark{
  width:min(62vw,340px);
  animation:markIn .85s cubic-bezier(.2,.7,.25,1) forwards;
  clip-path:inset(0 100% 0 0);
  opacity:0;
}
#intro .mark img{width:100%;height:auto;display:block}
@keyframes markIn{
  0%{clip-path:inset(0 100% 0 0);opacity:0;transform:translateY(6px)}
  15%{opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1;transform:translateY(0)}
}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  #intro{animation:introOut .01s linear forwards}
  #intro .mark{clip-path:none;opacity:1;animation:none}
}

/* ---------- Fuß ---------- */
footer.site{
  border-top:1px solid var(--line);
  margin-top:40px;padding:18px 0 46px;
  font-size:14px;color:var(--ink-soft);
}
footer.site a{color:var(--ink-soft);margin-right:14px}

/* ---------- Rechtstexte ---------- */
.legal{padding-bottom:20px}
.legal p{margin:.5em 0}
.legal h2{margin-top:28px}