/* Projekte – nur, was die Bausteine (site.css 11, 23) nicht abdecken.
   .pj-zoom (Foto als Link zur Lightbox) · .pj-filter (Filterleiste) · .pj-wall/.pj-item (Bildwand im Blocksatz,
   Reihen setzt das Inline-Skript) · .pj-foot · .pj-ig (Instagram-Kachel) · .lb (Lightbox, hell). */

/* Fotos als Links: öffnen die Lightbox */
.pj-zoom{position:relative;display:block;overflow:clip;background:var(--tile-2);cursor:zoom-in;}
.pj-zoom:focus-visible{outline-offset:-2px;}
.photo-wall__item .pj-zoom{height:100%;}

/* Filterleiste: klebt beim Scrollen unter dem Kopf (ab Tablet), Anzahl je Bodenart klein daneben */
.pj-filter{margin-bottom:24px;}
.pj-filter__bar{display:flex;flex-wrap:wrap;gap:6px;}
.pj-filter__bar button{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;background:var(--bg);color:var(--ink);font-weight:600;
  transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.pj-filter__bar button[aria-pressed="true"]{background:var(--graphite);}
.pj-filter__bar button:active{transform:scale(.97);}
.pj-filter__n{font-size:var(--fs-small);font-weight:500;color:var(--soft);font-variant-numeric:tabular-nums;}
.pj-filter__bar button[aria-pressed="true"] .pj-filter__n{color:var(--ink);}
@media (hover:hover) and (pointer:fine){.pj-filter__bar button[aria-pressed="false"]:hover{background:var(--tile-2);}}
@media (min-width:600px){.pj-filter{position:sticky;top:var(--hdr);z-index:5;margin-top:calc(var(--j) * -1);padding-block:var(--j);background:var(--tile);}}

/* Bildwand: Blocksatz ohne Beschnitt. Ohne JS: Breite nach Seitenverhältnis (letzte Reihe bleibt links bündig);
   mit JS (.is-justified) setzt das Skript jede Reihe exakt bündig. */
.pj-wall{--row:clamp(220px,20vw,300px);display:flex;flex-wrap:wrap;gap:22px var(--j);}
.pj-wall::after{content:"";flex:1000 1 0;}
.pj-wall.is-justified::after{content:none;}
.pj-item{flex:var(--r) 1 calc(var(--r) * var(--row));display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;}
.pj-wall.is-justified .pj-item{flex:none;}
.pj-item img{width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover;transition:opacity .4s ease;}
.pj-item figcaption{display:flex;flex-direction:column;font-size:var(--fs-small);line-height:1.3;}
.pj-item .pj-t{font-weight:600;}
.pj-item .pj-m{color:var(--soft);}
@media (hover:hover) and (pointer:fine){.pj-wall:has(.pj-item:hover) .pj-item:not(:hover) img{opacity:.55;}}
.pj-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;}
.pj-foot p{color:var(--soft);}

/* Vorher/Nachher: Regler füllt die Fotokachel der split-tile */
.split-tile__pic > .compare{position:absolute;inset:0;aspect-ratio:auto;}

/* Instagram: Link-Kachel mit Zeichen, Name und Pfeil */
.pj-ig{justify-content:space-between;}
.pj-ig__icon{width:40px;height:40px;}
.pj-ig__handle{font:600 var(--fs-say)/1.1 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere;}
.pj-ig__arrow{width:36px;height:36px;align-self:flex-end;transition:transform var(--t-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.pj-ig:hover .pj-ig__arrow{transform:translateX(6px);}}

/* Lightbox: heller Grund, Foto mittig, darunter eine Reihe Kacheln (Bildunterschrift · Zähler · Knöpfe) */
html.lb-open{overflow:hidden;}
.lb{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--bg);color:var(--ink);overflow:hidden;
}
.lb[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;}
.lb::backdrop{background:var(--bg);}
.lb__stage{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;padding:clamp(16px,3vw,40px) var(--m) var(--j);touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.lb__img{display:block;max-width:none;object-fit:contain;background:var(--tile-2);}
.lb__bar{display:flex;align-items:stretch;gap:var(--j);padding:0 var(--m) calc(var(--m) + env(safe-area-inset-bottom));}
.lb__cap{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;min-width:0;min-height:56px;padding:12px 18px;background:var(--tile);}
.lb__title{font:600 var(--fs-lead)/1.2 var(--serif);letter-spacing:-.01em;}
.lb__meta{color:var(--soft);}
.lb__count{display:flex;align-items:center;padding:0 18px;background:var(--tile);font-weight:600;font-variant-numeric:tabular-nums;}
.lb__btns{display:flex;gap:var(--j);}
.lb__btn{display:grid;place-items:center;width:56px;min-height:56px;background:var(--tile);transition:background-color var(--t-hover) ease;}
.lb__btn svg{width:24px;height:24px;}
.lb__flip{transform:scaleX(-1);}
@media (hover:hover) and (pointer:fine){.lb__btn:hover{background:var(--tile-2);}}
.lb.is-single .lb__count,.lb.is-single [data-lb-prev],.lb.is-single [data-lb-next]{display:none;}

@media (max-width:599px){
  .pj-filter__bar button{flex:1 1 auto;justify-content:center;min-height:48px;padding:0 14px;}
  .pj-wall{--row:170px;gap:16px var(--j);}
  .pj-item{gap:6px;}
  .pj-ig{min-height:160px;}
  .lb__bar{flex-wrap:wrap;}
  .lb__cap{flex-basis:100%;}
  .lb__count{flex:1 1 auto;}
}