/* ==========================================================
   Portfolio – Übersicht, Galerien, Lightbox
   ========================================================== */
.pf{ clear:both; box-sizing:border-box; width:100%; max-width:2400px; margin:0 auto; padding:10px 10px 30px; color:#111; --gap:8px; }
.pf *, .pf-lb *{ box-sizing:border-box; }
.pf button, .pf-lb button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pf button:hover, .pf-lb button:hover{ box-shadow:none; }   /* überschreibt die globale button:hover-Regel aus style.css */
.pf a{ color:inherit; }
.pf a.pf-card{ color:#fff; }
.pf-status{ text-align:center; color:#777; padding:60px 0; font-family:'Raleway',sans-serif; font-weight:300; }

/* ---------- Übersicht ---------- */
.pf-projects{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:var(--gap); padding-top:20px; animation:pf-in .5s ease both; }
.pf-card{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:5px; background:#ececec; text-decoration:none; color:#fff; }
.pf-card img, .pf-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.pf-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 65%); transition:opacity .4s; }
.pf-card:hover img, .pf-card:hover video, .pf-card:focus-visible img{ transform:scale(1.045); }
.pf-card-text{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px 22px 22px; }
.pf-card-title{ font-family:'Playfair Display',serif; font-weight:400; font-size:1.55em; line-height:1.2; margin:0 0 .3em; }
.pf-card-meta{ font-family:'Raleway',sans-serif; font-weight:300; font-size:.98em; letter-spacing:.05em; opacity:.92; }
.pf-card-meta:empty{ display:none; }
.pf-card-count{ position:absolute; top:14px; right:14px; z-index:2; font-family:'Raleway',sans-serif; font-size:.78em; letter-spacing:.06em; color:#fff; background:rgba(0,0,0,.35); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:.35em .8em; border-radius:99px; opacity:0; transform:translateY(-4px); transition:.35s; }
.pf-card:hover .pf-card-count, .pf-card:focus-visible .pf-card-count{ opacity:1; transform:none; }
.pf-card:focus-visible, .pf-tile:focus-visible, .pf-back:focus-visible, .pf-next a:focus-visible{ outline:2px solid #111; outline-offset:3px; }

/* ---------- Galerie ---------- */
#pf-title.pf-title-sm{ font-size:.62em; line-height:1.15; padding:0 14px; }
.pf-gallery-view{ animation:pf-in .5s ease both; }
.pf-back{ display:inline-flex; align-items:center; gap:.55em; margin:6px 0 0 2px; padding:.7em .4em; font-family:'Raleway',sans-serif; font-weight:300; letter-spacing:.06em; text-decoration:none; color:#111; }
.pf-back svg{ width:18px; height:18px; transition:transform .3s; }
.pf-back:hover svg{ transform:translateX(-4px); }
.pf-head{ text-align:center; padding:0 12px 26px; }
.pf-meta{ font-family:'Raleway',sans-serif; font-weight:300; font-size:1.2em; letter-spacing:.08em; color:#555; }
.pf-meta:empty{ display:none; }
.pf-text{ max-width:680px; margin:14px auto 0; line-height:1.65; color:#444; font-family:'Raleway',sans-serif; font-weight:300; }

/* Fließendes Zeilen-Raster: jedes Bild behält sein Seitenverhältnis (kein Beschnitt).
   Querformate werden dadurch automatisch ca. doppelt so breit wie Hochformate ("2 Spalten"),
   die Zeilen füllen sich vollständig – ohne Lücken. */
.pf-gallery{ --h:clamp(230px, 28vw, 520px); display:flex; flex-wrap:wrap; gap:var(--gap); }
.pf-gallery::after{ content:""; flex-grow:1000000000; }          /* letzte Zeile nicht in die Breite ziehen */

.pf-tile{ --r:.667; position:relative; display:block; min-width:0; overflow:hidden; border-radius:4px; background:#ececec;
  aspect-ratio:var(--r); flex-grow:calc(var(--r) * 100); flex-shrink:1; flex-basis:calc(var(--r) * var(--h)); }
.pf-tile img, .pf-tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.pf-tile img.is-loaded, .pf-tile video.is-loaded{ opacity:1; }
.pf-tile:hover img, .pf-tile:hover video{ transform:scale(1.035); }
.pf-play{ position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:50%; background:rgba(255,255,255,.88); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(0,0,0,.25); transition:transform .3s; pointer-events:none; }
.pf-play svg{ width:26px; height:26px; margin-left:4px; fill:#111; }
.pf-tile:hover .pf-play{ transform:scale(1.1); }

.pf-next{ display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding:22px 4px 0; border-top:1px solid #e4e4e4; font-family:'Raleway',sans-serif; font-weight:300; letter-spacing:.04em; }
.pf-next a{ text-decoration:none; display:block; max-width:48%; }
.pf-next small{ display:block; color:#888; font-size:.8em; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.3em; }
.pf-next .pf-next-r{ margin-left:auto; text-align:right; }
.pf-next a:hover span{ text-decoration:underline; }

@keyframes pf-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:600px){
  .pf{ padding:6px 6px 24px; --gap:6px; }
  .pf-gallery{ --h:clamp(200px, 52vw, 300px); }
  .pf-card{ aspect-ratio:4/3; }
  .pf-card-count{ opacity:1; transform:none; }
  .pf-play{ width:54px; height:54px; margin:-27px 0 0 -27px; }
}

/* ---------- Lightbox ---------- */
.pf-lb{ position:fixed; inset:0; z-index:100000; display:none; background:rgba(8,8,8,.97); color:#fff; font-family:'Raleway',sans-serif; touch-action:pan-y; }
.pf-lb.is-open{ display:block; }
.pf-lb-stage{ position:absolute; inset:0 0 70px 0; display:flex; align-items:center; justify-content:center; padding:56px 76px 0; }
.pf-lb-stage img, .pf-lb-stage video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; animation:pf-fade .35s ease both; background:#000; }
.pf-lb-stage video{ width:100%; height:100%; }
@keyframes pf-fade{ from{ opacity:0; } to{ opacity:1; } }
.pf-lb-btn{ position:absolute; z-index:3; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; opacity:.75; transition:opacity .2s, background .2s; }
.pf-lb-btn:hover, .pf-lb-btn:focus-visible{ opacity:1; background:rgba(255,255,255,.12); }
.pf-lb-btn:focus-visible{ outline:2px solid #fff; }
.pf-lb-btn svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pf-lb-close{ top:10px; right:12px; }
.pf-lb-prev{ left:12px; top:50%; margin-top:-61px; }
.pf-lb-next{ right:12px; top:50%; margin-top:-61px; }
.pf-lb-bar{ position:absolute; left:0; right:0; bottom:0; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; padding:0 70px; }
.pf-lb-cap{ font-size:.95em; letter-spacing:.05em; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pf-lb-count{ font-size:.8em; letter-spacing:.14em; opacity:.55; }
body.pf-lock{ overflow:hidden; }

@media (max-width:700px){
  .pf-lb-stage{ padding:52px 0 0; }
  .pf-lb-prev, .pf-lb-next{ top:auto; bottom:9px; margin:0; width:48px; height:48px; }
  .pf-lb-prev{ left:6px; } .pf-lb-next{ right:6px; }
  .pf-lb-bar{ padding:0 60px; }
}
@media (prefers-reduced-motion:reduce){
  .pf *, .pf-lb *{ animation:none !important; transition:none !important; }
}