:root{
  --bg:#0c0813; --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.12);
  --txt:#f4efff; --muted:#9e94b8; --acc:#a78bfa; --acc2:#f472b6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);
  min-height:100vh;padding:50px 16px 60px;overflow-x:hidden}
.bg-glow{position:fixed;inset:0;background:
  radial-gradient(620px 360px at 88% 8%, rgba(167,139,250,.3), transparent 65%),
  radial-gradient(620px 360px at 8% 92%, rgba(244,114,182,.26), transparent 65%);
  animation:drift 17s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.15) translate(-22px,20px)}}

.wrap{position:relative;width:min(1100px,100%);margin:0 auto}
.head{text-align:center;margin-bottom:28px;animation:up .7s cubic-bezier(.2,.8,.2,1) both}
.pill{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc2);
  border:1px solid var(--line);padding:7px 15px;border-radius:99px;background:var(--card)}
h1{font-size:clamp(32px,6.5vw,52px);margin:16px 0 8px;letter-spacing:-.02em}
h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:var(--muted);font-size:15px}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  animation:up .7s .1s cubic-bezier(.2,.8,.2,1) both}
.cell{position:relative;grid-column:span 1;border-radius:20px;overflow:hidden;cursor:pointer;
  aspect-ratio:1/1;border:1px solid var(--line);background:#140d20;
  opacity:0;transform:translateY(28px);animation:tileIn .6s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s}
.cell:nth-child(2){animation-delay:.06s}.cell:nth-child(3){animation-delay:.12s}
.cell:nth-child(4){animation-delay:.18s}.cell:nth-child(5){animation-delay:.24s}
.cell:nth-child(6){animation-delay:.3s}
@keyframes tileIn{to{opacity:1;transform:none}}
.cell.big{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
.cell.wide{grid-column:span 2}
.cell:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.6)}
.cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.32,1)}
.cell:hover img{transform:scale(1.1)}
.cell figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;font-size:14.5px;font-weight:600;
  background:linear-gradient(to top,rgba(8,5,18,.92),transparent);transform:translateY(10px);opacity:0;transition:.4s}
.cell:hover figcaption{transform:none;opacity:1}

/* Vollbild */
.fs{position:fixed;inset:0;z-index:300;background:rgba(6,4,14,.95);backdrop-filter:blur(20px);
  display:grid;grid-template-rows:auto 1fr auto;opacity:0;transition:.35s}
.fs.show{opacity:1}
.fs-bar{display:flex;align-items:center;gap:16px;padding:16px 18px}
.count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.count b{color:var(--acc2);font-size:17px}
.title{flex:1;text-align:center;font-weight:600;letter-spacing:.03em}
.fs-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);
  color:var(--txt);font-size:17px;cursor:pointer;transition:.3s}
.fs-btn:hover{background:var(--acc2);color:#14080f;transform:rotate(90deg);border-color:transparent}

.fs-stage{display:grid;place-items:center;padding:0 60px;min-height:0;position:relative}
.fs-stage img{max-width:100%;max-height:66vh;border-radius:20px;box-shadow:0 44px 100px rgba(0,0,0,.75)}
.fs-stage img.slide-l{animation:slideL .45s cubic-bezier(.22,1,.32,1)}
.fs-stage img.slide-r{animation:slideR .45s cubic-bezier(.22,1,.32,1)}
@keyframes slideL{from{opacity:0;transform:translateX(-60px) scale(.96)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(60px) scale(.96)}to{opacity:1;transform:none}}

.fs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;font-size:25px;cursor:pointer;transition:.3s}
.fs-arrow:hover{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent;transform:translateY(-50%) scale(1.12)}
#fsPrev{left:10px}#fsNext{right:10px}

.fs-nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px}
.fs-nav .fs-arrow{position:static;transform:none;width:42px;height:42px;font-size:21px}
.fs-nav .fs-arrow:hover{transform:scale(1.1)}
.fs-thumbs{display:flex;gap:9px;overflow-x:auto;padding:4px;scrollbar-width:none}
.fs-thumbs::-webkit-scrollbar{display:none}
.fs-thumbs button{width:66px;height:46px;flex:none;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;opacity:.45;transition:.3s;background:none}
.fs-thumbs button img{width:100%;height:100%;object-fit:cover}
.fs-thumbs button.on{opacity:1;border-color:var(--acc2);transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(244,114,182,.4)}
.fs-thumbs button:hover{opacity:1}

@media (max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cell.big{grid-column:span 2;grid-row:span 1}
  .cell.wide{grid-column:span 2}
}
@media (max-width:640px){
  .fs-stage{padding:0 8px}
  .fs-arrow{width:40px;height:40px}
  .fs-stage img{max-height:58vh}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}