/* =====================================================================
   PIDIC — Projekte-Galerie
   Ergänzt site/css/style.css aus „Pidic Website (Vorlagen)“ (Tokens, Nav, Footer, Buttons).
   ===================================================================== */
:root{ --navh:78px; }
@media (max-width:560px){ :root{ --navh:76px; } }

/* ---------- Kopfbereich (dunkel, damit die Navigation wie auf der Startseite wirkt) ---------- */
.phero{ position:relative; overflow:hidden; background:#121110; color:#F8F4EC;
  padding:clamp(150px,22vh,220px) 0 clamp(64px,9vh,104px); }
.phero__bg{ position:absolute; inset:-6% -4%; display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
  opacity:.34; transform:rotate(-4deg) scale(1.06); pointer-events:none; }
.phero__bg img{ width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; }
.phero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,17,16,.97) 0%, rgba(18,17,16,.84) 46%, rgba(18,17,16,.42) 100%),
             linear-gradient(0deg, #121110 0%, transparent 38%); }
.phero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.phero__crumbs{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(248,244,236,.5); margin-bottom:1.6rem; }
.phero__crumbs a{ color:rgba(248,244,236,.78); transition:color .3s; }
.phero__crumbs a:hover{ color:var(--gold-lt); }
.phero__eyebrow{ display:flex; align-items:center; gap:12px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lt); }
.phero__eyebrow::before{ content:""; width:32px; height:1px; background:var(--gold-lt); }
.phero__title{ margin-top:1.1rem; font-family:var(--f-display); font-weight:900; letter-spacing:-.03em; line-height:.98;
  font-size:clamp(2.6rem,7vw,6rem); }
.phero__title em{ font-style:normal; color:transparent; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; }
.phero__lead{ max-width:56ch; margin-top:1.4rem; color:rgba(248,244,236,.78); font-size:clamp(1rem,1.4vw,1.18rem); }
.phero__stats{ display:flex; flex-wrap:wrap; gap:14px clamp(28px,4vw,60px); margin-top:2.4rem; padding-top:1.6rem;
  border-top:1px solid rgba(248,244,236,.14); max-width:640px; }
.phero__stats div{ font-size:.86rem; color:rgba(248,244,236,.66); }
.phero__stats strong{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.1; color:var(--gold-lt); }

/* ---------- Projekt-Sprungleiste ---------- */
.pchips{ position:sticky; top:var(--navh); z-index:50; background:rgba(247,244,238,.94);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--line); }
.pchips__track{ max-width:var(--maxw); margin:0 auto; padding:12px var(--pad); display:flex; gap:8px; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pchips__track::-webkit-scrollbar{ display:none; }
.pchips a{ flex:none; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--fg); font-size:.86rem; font-weight:500; white-space:nowrap;
  transition:background .3s, color .3s, border-color .3s; }
.pchips a span{ font-family:var(--f-mono); font-size:.66rem; color:var(--gold); }
.pchips a i{ font-style:normal; font-size:.72rem; color:var(--faint); }
.pchips a:hover, .pchips a.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pchips a:hover span, .pchips a.is-active span{ color:var(--gold-lt); }
.pchips a:hover i, .pchips a.is-active i{ color:rgba(255,255,255,.6); }

/* ---------- Projekte ---------- */
.proj{ max-width:var(--maxw); margin:0 auto; padding:clamp(56px,8vh,96px) var(--pad) 0; scroll-margin-top:calc(var(--navh) + 60px); }
.proj__head{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px 48px; align-items:end;
  padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.proj__no{ font-size:.72rem; letter-spacing:.14em; color:var(--gold); }
.proj__title{ margin-top:8px; font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.6rem);
  line-height:1.05; letter-spacing:-.02em; color:var(--ink); }
.proj__text{ margin-top:10px; max-width:62ch; color:var(--muted); }
.proj__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; text-align:right; }
.proj__logo{ width:112px; height:auto; }
.proj__tags{ list-style:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.proj__tags li{ font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; padding:5px 10px; border-radius:100px;
  border:1px solid var(--line-2); color:var(--gold-dp); background:var(--surface); }
.proj__count{ font-size:.72rem; color:var(--faint); }

.proj__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); grid-auto-flow:dense; gap:10px; }
.proj__item{ position:relative; display:block; width:100%; padding:0; border:0; font:inherit; cursor:zoom-in;
  aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--bg-2); box-shadow:var(--shadow-sm); }
.proj__item--cover{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.proj__item img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.proj__item::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:linear-gradient(0deg, rgba(23,20,14,.42), transparent 50%); }
.proj__item svg{ position:absolute; right:12px; bottom:12px; z-index:2; width:30px; height:30px; padding:7px; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--ink); opacity:0; transform:scale(.8); transition:opacity .35s, transform .35s var(--ease); }
.proj__item:hover img{ transform:scale(1.06); }
.proj__item:hover::after, .proj__item:focus-visible::after{ opacity:1; }
.proj__item:hover svg, .proj__item:focus-visible svg{ opacity:1; transform:none; }
.proj__item:focus-visible{ outline:3px solid var(--gold-lt); outline-offset:2px; }

/* ---------- Abschluss ---------- */
.pcta{ max-width:var(--maxw); margin:clamp(72px,10vh,120px) auto 0; padding:0 var(--pad) clamp(72px,10vh,120px); }
.pcta__box{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
  padding:clamp(32px,5vw,64px); border-radius:var(--radius); background:#121110; color:#F8F4EC; box-shadow:var(--shadow-lg); }
.pcta__title{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,3.4vw,3rem); line-height:1.04; letter-spacing:-.02em; }
.pcta__title em{ font-style:normal; color:transparent; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; }
.pcta__lead{ margin-top:10px; color:rgba(248,244,236,.72); max-width:46ch; }
.pcta__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.pcta .btn--ghost{ color:#F8F4EC; border-color:rgba(248,244,236,.3); }
.pcta .btn--ghost:hover{ color:var(--gold-lt); border-color:var(--gold-lt); background:rgba(242,210,75,.08); }

/* ---------- Großansicht (Lightbox) ---------- */
.lb{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:rgba(12,11,9,.95); opacity:0; transition:opacity .25s; }
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }
.lb__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; padding:0 84px; }
.lb__img{ display:block; width:auto; height:auto; max-width:min(100%,1600px); max-height:calc(100vh - 150px); border-radius:8px;
  opacity:0; transform:scale(.985); transition:opacity .3s, transform .3s var(--ease); box-shadow:0 40px 90px -30px rgba(0,0,0,.7); }
.lb__img.is-in{ opacity:1; transform:none; }
.lb__cap{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; align-items:baseline; text-align:center;
  color:rgba(248,244,236,.84); font-size:.92rem; }
.lb__cap .mono{ font-size:.74rem; letter-spacing:.08em; color:var(--gold-lt); }
.lb__btn{ position:absolute; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; transition:background .3s, border-color .3s; }
.lb__btn:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34); }
.lb__btn:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; }
.lb__btn svg{ width:22px; height:22px; }
.lb__close{ top:18px; right:18px; }
.lb__prev{ left:18px; top:50%; transform:translateY(-50%); }
.lb__next{ right:18px; top:50%; transform:translateY(-50%); }
body.lb-open{ overflow:hidden; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .proj__head{ grid-template-columns:1fr; }
  .proj__meta{ align-items:flex-start; text-align:left; }
  .proj__tags{ justify-content:flex-start; }
  .phero__bg{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:700px){
  .lb__fig{ padding:0 12px; }
  .lb__img{ max-height:calc(100vh - 210px); }
  .lb__prev, .lb__next{ top:auto; bottom:22px; transform:none; }
  .lb__prev{ left:calc(50% - 64px); }
  .lb__next{ right:calc(50% - 64px); }
}
@media (max-width:560px){
  .proj__grid{ grid-template-columns:repeat(2,1fr); gap:6px; }
  .proj__item{ border-radius:8px; }
  .phero__bg{ grid-template-columns:repeat(3,1fr); }
  .pcta__actions, .pcta__actions .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .lb, .lb__img, .proj__item img{ transition:none; }
}