/* ========================================================================== CURRENT PROJECTS — rotating drum ("Walze") One project folder is shown at the front; scrolling, the arrow buttons, arrow keys or a swipe rotate the drum and bring the next folder forward. To add a project, copy one
block in index.html and projekte.html. Nothing in this file needs to change. ========================================================================== */ .project-drum-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:center;max-width:1400px;margin:0 auto;padding:24px 60px 60px} .project-drum{position:relative;outline:none} .drum-viewport{position:relative;perspective:1400px;perspective-origin:50% 50%;overflow:hidden;border-radius:14px;touch-action:pan-y} .drum-viewport:before{content:"";display:block;padding-top:75%} .drum-ring{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.1,.2,1)} .drum-item{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:opacity .7s ease,filter .7s ease} .drum-item:not(.is-front){pointer-events:none} /* The "folder": a rounded tile with a small tab, same visual language as the work tiles */ .drum-folder{position:absolute;inset:16px 0 0;display:block;text-decoration:none;color:#fff;background:#111;border-radius:0 14px 14px 14px;overflow:hidden} .drum-folder img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,opacity .4s ease} .drum-folder:hover img{transform:scale(1.04);opacity:.75} .drum-folder .work-tile-label{bottom:30px} .drum-tab{position:absolute;top:0;left:0;width:38%;height:17px;padding:0 14px;display:flex;align-items:center;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#bbb;background:#111;border-radius:12px 12px 0 0;white-space:nowrap;overflow:hidden} /* Controls: up/down buttons and a counter, so it is obvious the drum can be turned */ .drum-controls{position:absolute;right:-22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:5} .drum-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:box-shadow .2s,opacity .2s} .drum-btn:hover{box-shadow:0 4px 16px rgba(0,0,0,.22)} .drum-btn:disabled{opacity:.35;cursor:default;box-shadow:0 2px 10px rgba(0,0,0,.08)} .drum-btn svg{width:16px;height:16px;stroke:#000;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .drum-count{font-size:.68rem;font-weight:600;letter-spacing:.08em;color:#111;background:rgba(255,255,255,.95);border-radius:20px;padding:5px 8px;box-shadow:0 2px 10px rgba(0,0,0,.1)} .drum-hint{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#888} .drum-hint svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .drum-dots{display:flex;gap:2px;margin-left:auto} .drum-dot{width:24px;height:24px;border:0;padding:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer} .drum-dot:before{content:"";width:6px;height:6px;border-radius:50%;background:#ccc} .drum-dot.active:before{background:#111} .is-single .drum-controls,.is-single .drum-hint{display:none} /* Text beside the drum, swapped when the front folder changes */ .drum-text{transition:opacity .35s ease,transform .35s ease} .drum-text.is-changing{opacity:0;transform:translateY(8px)} @media(max-width:1000px){.project-drum-wrap{padding:20px 24px 50px}} @media(max-width:720px){.project-drum-wrap{grid-template-columns:1fr;gap:20px}.drum-controls{right:10px}} @media(max-width:600px){.project-drum-wrap{padding:20px 16px 35px}.drum-tab{font-size:.56rem;width:55%}} @media(min-width:1800px){.project-drum-wrap{max-width:1680px}.collage{columns:4}} @media(min-width:2800px){.project-drum-wrap{max-width:2000px}} @media(prefers-reduced-motion:reduce){.drum-ring,.drum-item,.drum-text{transition:none}} /* ========================================================================== PROJECT PAGE (e.g. Motocross) — intro next to the cover, gallery below ========================================================================== */ .project-intro{max-width:1400px;margin:0 auto;padding:24px 60px 10px} .project-intro .project-text p{max-width:640px} /* ========================================================================== HANS IM GLÜCK — client page with collage and cookbook section ========================================================================== */ .client-intro{max-width:1400px;margin:0 auto;padding:30px 60px 10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:start} .client-intro p{font-size:.92rem;line-height:1.85;color:#555;margin:0 0 14px} .client-intro h2{font-size:1.4rem;font-weight:600;margin:14px 0 18px} .client-facts{list-style:none;margin:0;padding:22px 24px;background:#f4f4f4;border-radius:14px;font-size:.82rem;line-height:1.8;color:#444} .client-facts li{display:flex;gap:14px;justify-content:space-between;border-bottom:1px solid #e4e4e4;padding:6px 0} .client-facts li:last-child{border-bottom:0} .client-facts span:first-child{color:#888;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;padding-top:3px} /* Collage: a masonry layout that keeps every photo in its own format. The order of the