/* spicy-tattoo.de — DEMO «Kamerafahrt» (scroll-world approximation without generated video)
   Only transform / opacity are animated. Everything is driven by one progress value (film.js). */
.p-index{--film-len:540svh}
.p-index .mbar{transform:none}           /* booking bar always visible on phones */
.p-index .hd{position:fixed;left:0;right:0;top:0}   /* header floats over the film; booking button always in reach */
.p-index .testbar{position:fixed;left:12px;top:auto;bottom:12px;z-index:70;border-radius:8px;font-size:11px;padding:5px 9px;pointer-events:none}
@media(max-width:860px){.p-index .testbar{bottom:auto;top:calc(78px + env(safe-area-inset-top));left:auto;right:8px;font-size:10px;padding:3px 7px}}
.p-index .after{padding-top:clamp(96px,10vw,136px)}

.film{position:relative;height:var(--film-len);background:#070606;padding:0}
.stage{position:sticky;top:0;height:100vh;height:100svh; /* taste-skill-ignore: 100vh = fallback for old browsers */ overflow:hidden;contain:strict}
.world{position:absolute;inset:0;perspective:900px;perspective-origin:50% 50%}
.shot{position:absolute;left:50%;top:50%;will-change:transform,opacity;backface-visibility:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* the facade starts as a tall framed photo on the right and becomes the whole screen */
/* transform-origin = the shop window we fly into */
.shot-street{transform-origin:47% 70%;height:84svh;aspect-ratio:3/4;margin:calc(-42svh) 0 0 calc(-31.5svh);border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)} /* taste-skill-ignore: floating 3D photo, depth cue of the camera move */
.shot-studio{inset:0;left:0;top:0;opacity:0;transform-origin:51% 57%}  /* the saloon doors */
.tunnel{position:absolute;inset:0;transform-style:preserve-3d;visibility:hidden}  /* never opacity here: it would flatten the 3D space */
.card{position:absolute;left:50%;top:50%;margin:0;width:var(--cw,220px);aspect-ratio:3/4;margin-left:calc(var(--cw,220px) / -2);margin-top:calc(var(--cw,220px) * -.6667);
  border-radius:12px;overflow:hidden;background:#141313;will-change:transform,opacity;backface-visibility:hidden;opacity:0}
.card img{width:100%;height:100%;object-fit:cover}
.coin{position:absolute;left:50%;top:50%;width:min(34vmin,300px);aspect-ratio:1;margin:calc(min(34vmin,300px) / -2) 0 0 calc(min(34vmin,300px) / -2);transform-style:preserve-3d;will-change:transform,opacity;opacity:0}
.coin img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;backface-visibility:hidden}
.coin .back{transform:rotateY(180deg)}
/* piercing pass: the air turns deep red so the two categories feel different */
.tint{position:absolute;inset:0;background:#3b0907;opacity:0;pointer-events:none}
.glabel{position:absolute;left:0;top:0;margin:0;font:900 clamp(18px,1.6vw,22px)/1 Metro,sans-serif;letter-spacing:-.01em;opacity:0;z-index:2;will-change:transform,opacity}
.gl-p{color:var(--red-text)}
.cat-piercing .masonry a{border-radius:var(--r-s)}
.sec-head .ctas{display:flex;gap:12px;flex-wrap:wrap}
/* reading scrim: only where copy sits (left on desktop, bottom on phones) */
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,6,6,.82) 0%,rgba(7,6,6,.5) 34%,rgba(7,6,6,0) 58%)} /* taste-skill-ignore: legibility scrim over photo */

/* copy blocks — one visible at a time */
.cp{position:absolute;left:max(clamp(16px,4vw,32px),calc((100vw - var(--wrap)) / 2 + 32px));top:50%;transform:translateY(-42%);width:min(560px,44vw);z-index:3;opacity:0;visibility:hidden;will-change:opacity,transform}
.cp.on{visibility:visible}
.cp0{opacity:1;visibility:visible}
.cp h1{font-size:clamp(46px,6.6vw,92px)}
.cp h1 span{display:block}
.cp .lead{margin:18px 0 0}
.cp .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.cp .status{margin-top:22px}
.cp3{top:auto;bottom:clamp(40px,9svh,96px);transform:none}

.chapters{position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(20px,4svh,40px);margin:0;padding:0;list-style:none;display:flex;gap:18px;font:900 13px/1 Metro,sans-serif;color:var(--mut);z-index:3;counter-reset:c}
.chapters li{counter-increment:c;transition:color .3s var(--ease-out)}
.chapters li::before{content:"0" counter(c) " ";color:var(--tone3);transition:color .3s var(--ease-out)}
.chapters li.on{color:var(--ink)}.chapters li.on::before{color:var(--red)}
.hint{position:absolute;left:50%;bottom:clamp(18px,3svh,32px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:900 12px/1 Metro,sans-serif;color:var(--mut);z-index:3;transition:opacity .3s var(--ease-out)}
.hint span{width:2px;height:34px;background:var(--tone3);position:relative;overflow:hidden;border-radius:2px}
.hint span::after{content:"";position:absolute;left:0;right:0;height:12px;background:var(--red);animation:hint 1.8s var(--ease-in-out) infinite}
@keyframes hint{from{transform:translateY(-12px)}to{transform:translateY(34px)}}
.hint.off{opacity:0}

.after{padding-top:clamp(56px,8vw,96px)}
.band-wrap{padding-top:0}
.endcard{display:grid;grid-template-columns:1.3fr 1fr;gap:28px 48px;align-items:end;background:var(--red);border-radius:var(--r-l);padding:clamp(28px,5vw,64px)}
.endcard .lead{color:#fff}
.endcard .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.btn.light{background:#fff;color:#0c0b0b}
.endcard .btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)} /* taste-skill-ignore: outline of ghost button on red */

/* phones: facade fills the screen, copy sits at the bottom above the booking bar */
@media(max-width:860px){
  .p-index{--film-len:500svh}
  .shot-street{height:100svh;margin:-50svh 0 0 -37.5svh;border-radius:0;box-shadow:none}
  .scrim{background:linear-gradient(0deg,rgba(7,6,6,.92) 0%,rgba(7,6,6,.7) 42%,rgba(7,6,6,0) 72%)} /* taste-skill-ignore: legibility scrim over photo */
  .cp{left:16px;right:16px;width:auto;top:auto;bottom:calc(96px + env(safe-area-inset-bottom));transform:none}
  .cp h1{font-size:clamp(40px,12vw,58px)}
  .cp .lead{font-size:16px;margin-top:12px}
  .cp0 .ctas .btn.ghost{display:none}       /* the bar below already offers Termin */
  .cp0 .ctas{margin-top:18px}
  .cp3{bottom:calc(96px + env(safe-area-inset-bottom))}
  .glabel{font-size:16px}
  .chapters,.hint{display:none}
  .endcard{grid-template-columns:1fr}.endcard .ctas{justify-content:flex-start}
  .ft{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}

/* reduced motion / no JS: no pinning, no flight — a calm static hero, everything stays reachable */
html:not(.js) .film,.rm .film{height:auto}
html:not(.js) .stage,.rm .stage{position:relative;height:100svh}
html:not(.js) .tunnel,.rm .tunnel,html:not(.js) .shot-studio,.rm .shot-studio,html:not(.js) .cp:not(.cp0),.rm .cp:not(.cp0),.rm .chapters,.rm .hint{display:none}
.rm .shot-street{transform:translateX(min(22vw,300px))}
@media(max-width:860px){.rm .shot-street{transform:none}}
.cp2{width:min(470px,40vw)}@media(max-width:860px){.cp2{width:auto}}