/* NIKdesign · Projekte: Übersicht auf der Startseite und Projektseiten
   Gehört zu nikdesign.de, Stand 04.10.2026. Siehe dokumentation/TECHNIK.md

   Leitidee: Jedes Projekt hat ein freigestelltes Hauptobjekt (oder ersatzweise das Kundenlogo).
   Es steht auf der Übersicht vor einem Hintergrund, gleitet beim Öffnen per View Transition
   in den Kopf der Projektseite und erscheint dort noch einmal frei zwischen den Bildern.
   Alle Klassen beginnen mit "pj-", damit sie nicht mit Entwurf F kollidieren. */

/* ---------- Hintergründe ---------- */
.pj-hg-stein{background:radial-gradient(120% 90% at 78% 12%,rgba(255,255,255,.55),transparent 55%),linear-gradient(160deg,#e3ddd3,#c9c0b2)}
.pj-hg-petrol{background:radial-gradient(90% 80% at 30% 20%,rgba(255,255,255,.14),transparent 60%),linear-gradient(150deg,#5a7782,#2c3d45)}
.pj-hg-sand{background:radial-gradient(80% 70% at 20% 90%,rgba(255,255,255,.45),transparent 60%),linear-gradient(200deg,#f5e7cc,#e8cf9d)}
.pj-hg-hell{background:radial-gradient(100% 80% at 70% 15%,#fff,transparent 60%),linear-gradient(170deg,#f4f4f2,#e3e3e0)}
/* Hintergrund in einer Kundenfarbe: "hintergrund": {"farbe": "#00abbf"} */
.pj-hg-farbe{background:radial-gradient(90% 80% at 28% 18%,rgba(255,255,255,.22),transparent 60%),
  linear-gradient(150deg,color-mix(in oklab,var(--hg) 88%,white),color-mix(in oklab,var(--hg) 62%,#0d1a1e))}
.pj-korn::after{content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:multiply;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E")}

/* ---------- Bühne: Hintergrund und Freisteller-Ebenen, jede mit eigener Tiefe ----------
   --p (−1 … 1) setzt projekte.js je nach Lage im Sichtfeld. Der Hintergrund läuft gegen die Scrollrichtung,
   jede Ebene des Freistellers mit ihrer eigenen Tiefe --t mit. --hub ist der Weg einer Ebene mit Tiefe 1. */
.pj-buehne{position:relative;--hub:48px}
.pj-hgf{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden}
.pj-hg{position:absolute;inset:-12% 0;transform:translate3d(0,calc(var(--p,0) * -40px),0) scale(1.04);will-change:transform}
.pj-hg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-objekt{position:absolute;left:10%;right:10%;bottom:7%;z-index:2}
.pj-stapel{position:relative}
.pj-ebene{position:relative}
.pj-ebene + .pj-ebene{position:absolute;inset:0}
.pj-par{transform:translate3d(0,calc(var(--p,0) * var(--t,1) * var(--hub)),0);will-change:transform}
.pj-objekt img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 30px 34px rgba(20,30,35,.28)) drop-shadow(0 6px 8px rgba(20,30,35,.18))}
.pj-logo .pj-objekt{left:20%;right:20%;top:34%;bottom:auto}
.pj-logo .pj-objekt img{filter:none}

/* ---------- Übersicht auf der Startseite ---------- */
.pj-raster{margin-top:3rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3rem) clamp(1.2rem,3vw,2.2rem)}
@media(max-width:760px){.pj-raster{grid-template-columns:1fr}}
.pj-karte{display:grid;gap:1.1rem;color:inherit}
.pj-karte:hover{text-decoration:none}
.pj-karte .pj-buehne{aspect-ratio:4/3}
/* Nach oben dürfen die Objekte aus der Bühne ragen, nach unten nicht: dort steht der Text. Beim Hereinscrollen tauchen sie so aus der Bühne auf. */
.pj-karte .pj-buehne{clip-path:inset(-40% 0 0 0 round 0 0 var(--radius) var(--radius))}
.pj-karte .pj-objekt{transition:transform .6s var(--uebergang)}
.pj-karte:hover .pj-objekt{transform:translateY(-10px) scale(1.03)}
/* beim Überfahren fächern die Ebenen leicht auf: vordere heben sich, hintere sinken */
.pj-karte .pj-ebene{transition:transform .6s var(--uebergang)}
.pj-karte:hover .pj-ebene{transform:translateY(calc((var(--t,1) - 1) * -14px))}
.pj-karte .pj-hgf{transition:transform .6s var(--uebergang)}
.pj-karte:hover .pj-hgf{transform:scale(.985)}
.pj-karte h3{margin-top:.4rem;font-size:1.35rem;line-height:1.22;color:var(--grau);
  font-variation-settings:"wdth" 96,"wght" 400;letter-spacing:-.01em;transition:font-variation-settings .45s var(--uebergang)}
.pj-karte:hover h3{font-variation-settings:"wdth" 100,"wght" 600}
.pj-karte p{margin-top:.4rem;color:var(--matt);font-size:.96rem}
.pj-mehr{display:inline-block;margin-top:.7rem;color:var(--petrol-tief);font-size:.94rem;
  font-variation-settings:"wdth" 96,"wght" 500;transition:font-variation-settings .35s var(--uebergang)}
.pj-mehr::after{content:" ›"}
.pj-karte:hover .pj-mehr{font-variation-settings:"wdth" 100,"wght" 700}

/* Auftritt beim Hereinscrollen: startet erst mit der Klasse pj-bereit, vorher ist alles sichtbar */
.pj-bereit .pj-vorhang{animation:pj-vorhang 1.2s var(--uebergang) both}
@keyframes pj-vorhang{from{clip-path:inset(18% 0 0 0 round var(--radius))}to{clip-path:inset(0 0 0 0 round var(--radius))}}
.pj-bereit .pj-zoom{animation:pj-zoom 1.7s var(--uebergang) both}
@keyframes pj-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.pj-bereit .pj-heben{animation:pj-heben 1.25s var(--uebergang) both;animation-delay:calc(.22s + var(--i,0) * .14s)}
@keyframes pj-heben{from{opacity:0;transform:translateY(60px) rotate(-2.5deg)}to{opacity:1;transform:none}}
.pj-bereit .pj-auf{animation:pj-auf 1s var(--uebergang) both}
.pj-bereit .pj-auf.v1{animation-delay:.1s}.pj-bereit .pj-auf.v2{animation-delay:.2s}
@keyframes pj-auf{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- Projektseite: gemeinsame Teile (Aufbau »Magazin« in projektseite.css) ---------- */
.pj-hinweis{max-width:var(--max);margin:1.2rem auto 0;padding:.7rem 1rem;border-radius:12px;background:#FEF6E4;
  border:1px solid #F2DDA9;font-size:.85rem;color:var(--grau)}
.pj-zurueck{display:inline-block;margin-top:1.6rem;font-size:.88rem;color:var(--petrol-tief);
  font-variation-settings:"wdth" 88,"wght" 600;transition:font-variation-settings .35s var(--uebergang)}
.pj-zurueck::before{content:"‹ "}
.pj-zurueck:hover{font-variation-settings:"wdth" 100,"wght" 600;text-decoration:none}

.pj-foto{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--hell)}
.pj-schiene-kopf{display:flex;justify-content:space-between;align-items:end;gap:1rem;padding-top:clamp(1.5rem,4vw,2.5rem)}
.pj-pfeile{display:flex;gap:.6rem}
.pj-pfeil{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:rgba(63,69,72,.07);color:var(--grau);font-size:1.15rem;line-height:1;transition:background .2s}
.pj-pfeil:hover{background:rgba(63,69,72,.14)}
.pj-schiene{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:1rem 1.5rem;scrollbar-width:none}
.pj-schiene::-webkit-scrollbar{display:none}
.pj-schiene .pj-foto{flex:0 0 min(78%,22rem);aspect-ratio:1;scroll-snap-align:start}
.pj-schiene .pj-foto img{display:block;width:100%;height:100%;object-fit:cover}
/* flache Ansichten (Logos, Drucksachen): ganz zeigen statt beschneiden */
.pj-flach{background:var(--grund,var(--hell));display:grid;place-items:center}
.pj-schiene .pj-flach{padding:11% 12% 19%}
.pj-schiene .pj-flach img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(20,30,35,.16))}
.pj-schiene figcaption{position:absolute;left:1rem;bottom:.8rem;font-size:.78rem;color:var(--grau);font-variation-settings:"wdth" 90,"wght" 500}

@media(prefers-reduced-motion:reduce){
  .pj-bereit .pj-vorhang,.pj-bereit .pj-zoom,.pj-bereit .pj-heben,.pj-bereit .pj-auf{animation:none}
  .pj-hg,.pj-par{transform:none!important}
  .pj-ebene{transition:none!important}
}