:root{
  --red:#e83333;        /* COMMUNITY */
  --lime:#d3f35a;       /* ARCHITEKTUR & ZUKUNFT */
  --blue:#3941f4;       /* ART & CHAOS */
  --pink:#ef57c6;       /* WORDS & THOUGHTS */
  --bg:#0e0e11;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:#fff;
  overflow-x:hidden;
}

/* Poster-Canvas */
.poster{position:relative;min-height:120vh;width:100%;overflow:hidden;padding:64px 6vw}
.big-title{
  position:fixed;top:10vh;left:6vw;z-index:10;
  font-weight:1000;text-transform:uppercase;line-height:0.8;
  mix-blend-mode:screen;pointer-events:none;user-select:none;
  letter-spacing:-0.02em;text-shadow:0 20px 80px rgba(0,0,0,0.6);
  font-size:clamp(120px,16vw,300px);
}

/* Bunte Layer */
.layer{
  position:absolute;border-radius:20px;mix-blend-mode:screen;
  filter:saturate(1.08) contrast(1.03);will-change:transform,opacity,left,top;
  pointer-events:none;z-index:5;
}
.noise{opacity:0.06;mix-blend-mode:overlay;filter:blur(6px) saturate(1.4)}
#layers{position:relative;z-index:5}
#tiles{position:relative;z-index:20}

/* Tiles */
.tile{
  position:absolute;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  transform-origin:center;
  transition:transform .24s ease,box-shadow .24s ease;
  cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
  border:2px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(4px);
}
.tile:hover{transform:translateY(-8px) rotate(-1deg) scale(1.02);box-shadow:0 40px 120px rgba(0,0,0,0.7)}
.inner{padding:18px;height:100%;display:flex;flex-direction:column;justify-content:center}
.t-title{font-weight:900;letter-spacing:-0.01em}
.t-meta{margin-top:6px;font-weight:700;opacity:0.9;font-size:12px}
.badge{
  position:absolute;top:10px;right:10px;padding:8px 10px;border-radius:999px;
  background:rgba(0,0,0,0.2);font-weight:900;font-size:12px;letter-spacing:0.04em;
}

/* Nav */
.nav{position:fixed;right:6vw;top:6vh;z-index:30;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);
  padding:8px 12px;border-radius:999px;color:#fff;font-weight:900;cursor:pointer;
  backdrop-filter:blur(4px);
}
.filter{
  display:flex;gap:6px;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);border-radius:999px;
  padding:4px;align-items:center;
}
.chip{
  border:0;border-radius:999px;padding:6px 10px;font-weight:900;cursor:pointer;
  color:#fff;opacity:0.9;background:transparent;
}
.chip[data-filter="COMMUNITY"]{background:var(--red)}
.chip[data-filter="ARCH"]{background:var(--lime);color:#111}
.chip[data-filter="ART"]{background:var(--blue)}
.chip[data-filter="WORDS"]{background:var(--pink)}
.chip.active{outline:2px solid rgba(255,255,255,0.22)}

.credit{position:fixed;left:6vw;bottom:4vh;color:rgba(255,255,255,0.64);font-weight:800;z-index:40}

/* Modal */
.modal-wrap{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60;
  background:linear-gradient(180deg,rgba(2,2,2,0.55),rgba(2,2,2,0.82));}
.modal{
  width:min(980px,94%);background:linear-gradient(180deg,#0b0b0c,#111218);color:#fff;
  border-radius:16px;padding:18px;box-shadow:0 40px 140px rgba(0,0,0,0.8);
}
.modal h3{margin:0 0 6px;font-size:22px}
.modal p{margin:6px 0 0;color:rgba(255,255,255,0.82)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1}
.side{width:260px}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;margin-right:6px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.link-like{background:#fff;color:#111;border-radius:10px;padding:8px 12px;font-weight:900;text-decoration:none;display:inline-block}
.iframe-wrap{margin-top:12px;display:none}
.iframe-wrap iframe{width:100%;height:60vh;border:0;background:#111}

/* Side Accent Farben */
.side-accent{padding:10px;border-radius:12px;font-weight:1000;text-align:center;color:#111}
.accent-community{background:var(--red);color:#fff}
.accent-arch{background:var(--lime);color:#111}
.accent-art{background:var(--blue);color:#fff}
.accent-words{background:var(--pink);color:#fff}

@media (max-width:900px){
  .big-title{font-size:clamp(62px,16vw,140px);top:6vh}
  .nav{right:4vw;top:4vh}
  .side{width:100%}
}