.proj{text-decoration:none;display:flex;flex-direction:column;gap:14px}
.proj-stage{position:relative;aspect-ratio:620/400;background:var(--creme-2);border:1px solid var(--line);border-radius:28px;overflow:hidden}
.proj-stage > svg{position:absolute;inset:0;width:100%;height:100%}
.proj-shot{position:absolute;left:11%;top:14%;width:78%;height:78%;background:#fff;border-radius:14px;box-shadow:0 30px 60px rgba(120,80,40,.22),0 2px 4px rgba(0,0,0,.06);transform:perspective(1200px) rotateX(14deg) rotateZ(-4deg);display:flex;flex-direction:column;overflow:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.proj:hover .proj-shot,.proj:focus-visible .proj-shot{transform:perspective(1200px) rotateX(4deg) rotateZ(-1deg) translateY(-10px);box-shadow:0 40px 70px rgba(120,80,40,.28)}
.proj-shot .bar{height:22px;background:#f1ece5;display:flex;align-items:center;gap:6px;padding:0 10px;flex-shrink:0}
.proj-shot .bar i{width:7px;height:7px;border-radius:50%;background:#d6cdc1;transition:background-color .3s ease .15s,transform .3s ease .15s}
/* Hover: Fensterpunkte werden aktiv (rot, gelb, gruen), leicht versetzt */
.proj:hover .proj-shot .bar i,.proj:focus-visible .proj-shot .bar i{transform:scale(1.15)}
.proj:hover .proj-shot .bar i:nth-child(1),.proj:focus-visible .proj-shot .bar i:nth-child(1){background:#ff5f57}
.proj:hover .proj-shot .bar i:nth-child(2),.proj:focus-visible .proj-shot .bar i:nth-child(2){background:#febc2e;transition-delay:.22s}
.proj:hover .proj-shot .bar i:nth-child(3),.proj:focus-visible .proj-shot .bar i:nth-child(3){background:#28c840;transition-delay:.29s}
.proj-shot .shot-img{flex-grow:1;min-height:0;width:100%;height:auto;object-fit:cover;object-position:top center;display:block}
.proj .pin{position:absolute;right:12%;top:9%;width:30px;height:30px;border-radius:50%;border:6px solid #fff;background:var(--accent);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.proj .pin::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.proj:hover .pin::after{animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.proj-meta{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap}
.proj-meta b{font-size:24px}
.proj-meta span{font-family:var(--display);font-size:21px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.proj .proj-result{color:var(--muted)}
.proj .proj-desc{color:var(--muted);line-height:1.6}
.proj .proj-facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--dim)}
.proj .proj-facts:empty{display:none}
.proj .proj-link{font-weight:700;color:var(--accent-dark)}