/* Studio Jan Allendörfer – site.css */
@font-face{font-family:"SJA Helvetica";src:url("../assets/fonts/helvetica-300.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"SJA Helvetica";src:url("../assets/fonts/helvetica-400.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"SJA Helvetica";src:url("../assets/fonts/helvetica-700.woff") format("woff");font-weight:700;font-display:swap}

:root{--red:#FF3232;--ink:#323C50;--blue:#E6F0FA;--ease:cubic-bezier(.2,0,.2,1);--gut:max(20px,4.3vw)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--page,#E6F0FA)}
html{scroll-behavior:smooth}
body{font-family:"SJA Helvetica","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hover-Farbwechsel */
.hl{transition:color 160ms var(--ease)}
.hl:hover{color:var(--hl,#323C50)}

/* Kopfzeile */
.site-header{display:flex;justify-content:space-between;align-items:flex-start;font-size:clamp(14px,1.55vw,24px);line-height:1.04;letter-spacing:-.02em}
.brand{display:flex;flex-direction:column}
.brand .l{font-weight:300}.brand .b{font-weight:700}
.site-header nav{display:flex;flex-direction:column;align-items:flex-end;font-weight:300}
.page-head{padding:var(--gut) var(--gut) max(40px,5vw)}

/* Pill-Buttons */
.pill{display:inline-block;align-self:flex-start;border:1px solid currentColor;border-radius:999px;padding:.06em .45em 0;font-weight:300;font-size:clamp(13px,1.2vw,18px);line-height:1.1;text-transform:uppercase;transition:background-color 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease)}
.pill:hover{background:var(--pill-bg,#323C50);border-color:var(--pill-bg,#323C50);color:var(--pill-fg,#E6F0FA)}

/* Typo */
.title{margin:0;font-weight:700;font-size:clamp(20px,2.4vw,38px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.sub{margin:.6em 0 0;font-weight:700;font-size:clamp(14px,1.3vw,20px);line-height:1.25}
.section-label{margin:0;text-align:center;color:var(--red);font-weight:300;font-size:clamp(16px,1.6vw,26px);letter-spacing:-.02em}
.col{max-width:75vw;margin:0 auto}
.copy{max-width:75vw;margin:0 auto;display:flex;flex-direction:column;gap:1.2em;font-weight:300;font-size:clamp(16px,1.35vw,21px);line-height:1.4;letter-spacing:-.01em}
.copy p{margin:0;max-width:40em;text-wrap:pretty}
.ulink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:color 160ms var(--ease)}
.ulink:hover{color:var(--hl,#323C50)}

/* Projekt-Navigation unten */
.proj-nav{max-width:75vw;margin:max(48px,5vw) auto 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.next-link{display:flex;align-items:center;gap:14px;font-weight:300;font-size:clamp(16px,1.6vw,26px);letter-spacing:-.02em;transition:color 160ms var(--ease)}
.next-link:hover{color:var(--hl,#323C50)}
.arrow{width:clamp(30px,3.3vw,48px);height:auto}

/* ---------- Startseite ---------- */
.hero{position:relative;background:#E6F0FA;width:100%;height:100vh;height:100svh;min-height:420px;overflow:hidden}
.hero .site-header{position:absolute;z-index:5;top:var(--gut);left:var(--gut);right:var(--gut);color:var(--red)}
.hero-stage{position:absolute;left:0;right:0;top:clamp(84px,7.5vw,140px);bottom:10.4vw;display:flex;justify-content:center;align-items:center}
.hero-box{position:relative;width:min(calc(56vw + max(0px,700px - 100vw)*.5),92vw,calc((100svh - clamp(84px,7.5vw,140px) - 10.4vw)*1.213));aspect-ratio:752/620}
.hero-box img{position:absolute;left:50%;top:50%;height:auto;transform:translate(-50%,-50%) translateY(var(--ty,0px));transition:opacity 520ms var(--ease);will-change:transform}
.hero-box .h0{width:74%;z-index:1}
.hero-box .h1{width:52.8%;z-index:2;transform:translate(-50%,-50%) translateY(var(--ty,0px)) rotate(-3deg)}
.hero-box .h2{width:96.7%;z-index:3}
.hero-box .off{opacity:0}
.hero h1{position:absolute;z-index:4;left:1.1vw;right:1vw;bottom:3.4vw;margin:0;display:flex;justify-content:space-between;align-items:center;color:var(--red);font-weight:300;font-size:14.6vw;line-height:.8;letter-spacing:-.05em;white-space:nowrap}
.hero h1 img{width:12vw;height:auto;margin-top:-1vw}

.work{overflow:hidden;--cw:min(calc(62.5vw + max(0px,700px - 100vw)*.3),calc((100svh - 290px)*1.788));background:#F5FFAA;min-height:100vh;min-height:100svh;padding:max(20px,2.9vw) 0 max(28px,3.5vw);display:flex;flex-direction:column}
.work-top{position:relative;display:flex;justify-content:center;align-items:center;padding:0 var(--gut);min-height:44px}
.work-arrows{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);display:flex;gap:clamp(20px,3.4vw,56px);color:var(--red)}
.work-arrows button{background:none;border:0;padding:8px 0;cursor:pointer;color:inherit;display:flex;transition:opacity 260ms,color 160ms var(--ease)}
.work-arrows button:hover{color:var(--ink)}
.work-arrows button[aria-disabled="true"]{opacity:.35}
.work-viewport{touch-action:pan-y;overscroll-behavior-x:contain;cursor:grab;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:2vw;padding-left:12.5vw;user-select:none;-webkit-user-select:none}
.work-track{display:flex;gap:3.1vw;transition:transform 900ms var(--ease)}
.card{flex:0 0 var(--cw);display:flex;flex-direction:column}
.card-img{display:block;aspect-ratio:842/471;overflow:hidden;background:#E6F0FA}
.card-img img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.card h3{margin:clamp(10px,1.1vw,18px) 0 0;font-weight:700;font-size:clamp(20px,2.4vw,38px);line-height:1.05;letter-spacing:-.02em}
.card p{margin:.25em 0 0;font-weight:700;font-size:clamp(13px,1.3vw,20px);line-height:1.2}
.card .pill{margin-top:clamp(14px,1.9vw,30px)}
.card-more{aspect-ratio:842/471;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(16px,2.2vw,36px)}
.card-more p{margin:0;color:var(--red);font-weight:700;font-size:clamp(20px,2.4vw,38px);line-height:1.05;letter-spacing:-.02em}

.studio{background:#E6F0FA;padding:max(20px,2.9vw) 0 0}
.studio .section-label{margin-bottom:max(20px,2.9vw)}
.studio-box{position:relative;width:75vw;max-width:100%;margin:0 auto;aspect-ratio:2/1;background:#080808;overflow:hidden}
.studio-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.studio-box .sja{position:absolute;z-index:2;left:50%;top:50%;width:18vw;min-width:110px;max-width:340px;transform:translate(-50%,-50%);pointer-events:none}

.about{background:#E6F0FA;padding:max(48px,6.5vw) 0 0}
.about-text{max-width:75vw;margin:0 auto;padding:0 20px;columns:2 320px;column-gap:3vw;font-weight:300;font-size:clamp(16px,1.35vw,21px);line-height:1.4;letter-spacing:-.01em;hyphens:auto;-webkit-hyphens:auto}
.about-text p{margin:0 0 1em}
.about-cta{display:flex;justify-content:center;margin-top:max(24px,3.4vw)}
.marquee{overflow:hidden;padding:max(24px,3.5vw) 0 max(36px,5.5vw)}
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.marquee-item{display:flex;align-items:center;flex-shrink:0}
.marquee-item span{color:var(--red);font-weight:300;font-size:max(44px,6.4vw);line-height:1.15;letter-spacing:-.045em;white-space:nowrap;padding-bottom:.08em}
.marquee-item img{width:max(37px,5.4vw);height:auto;margin:-.4vw .3vw 0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Footer ---------- */
.site-footer{background:#fff;padding:max(36px,3.8vw) var(--gut) max(40px,4.5vw);display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px 48px;align-items:flex-start;color:var(--ink)}
.site-footer .f-main{flex:1 1 260px;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px)}
.site-footer .brand{align-self:flex-start;color:var(--red);font-size:clamp(16px,1.55vw,24px);line-height:1.02;letter-spacing:-.02em;--hl:#323C50}
.f-contact{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.f-pill{border:1px solid var(--red);border-radius:999px;padding:.06em 1em 0;font-weight:300;font-size:clamp(13px,1.2vw,18px);line-height:1.1;color:var(--red);transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.f-pill:hover{background:var(--red);color:#fff}
.f-ig{display:flex;margin-left:12px;padding:6px;color:var(--red);--hl:#323C50}
.f-legal{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:400;font-size:clamp(11px,.92vw,13px)}
.f-legal a{padding:4px 0;transition:color 160ms var(--ease)}
.f-legal a:hover{color:var(--red)}
.f-love{flex:0 0 auto;display:flex;justify-content:center}
.f-love img{width:clamp(64px,5.8vw,96px);height:auto}
.f-note{flex:1 1 240px;margin:0;max-width:300px;font-weight:400;font-size:clamp(12px,.92vw,13px);line-height:1.25}
.f-note .r{color:var(--red)}
.f-note a{color:var(--red);transition:color 160ms var(--ease)}
.f-note a:hover{color:var(--ink)}

/* ---------- Projektseiten (Standard) ---------- */
.std{color:var(--ink);background:var(--page)}
.std .site-header{color:var(--head,#FF3232)}
.std .hero-media{padding:var(--hero-pad,max(32px,4vw)) 0 0}
.std .hero-media > *{width:100%;max-width:var(--hero-max,75vw);margin:0 auto;height:auto}
.std .title-wrap{padding:max(32px,4vw) 0 max(8px,1vw)}
.std .title{color:var(--title,#FF3232)}
.std .text{padding:max(48px,6.5vw) 0}
.credit a{color:#FF3232}
.std .gallery{padding:0 0 max(48px,6.5vw)}
.gal{max-width:var(--gal-max,75vw);margin:0 auto;display:flex;flex-direction:column;gap:var(--gal-gap,3.1vw)}
.gal > *{width:100%;margin:0 auto;height:auto}
.gal .half{max-width:50%}
.std .next-link{color:#FF3232}

/* Logo-Animation Savage Life */
.logo-anim{display:block;position:relative;width:8em;height:2.6em}
.logo-anim img{width:100%;height:100%;object-fit:contain;object-position:left top}
.logo-anim .brand{display:none}
.logo-anim:hover img,.logo-anim:focus-visible img{display:none}
.logo-anim:hover .brand,.logo-anim:focus-visible .brand{display:flex}

/* Endlosband */
.band{overflow:hidden}
.band-track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.band:hover .band-track{animation-play-state:paused}
.band-set{display:flex;flex-shrink:0}
.band-set img{height:min(50vh,50svh);width:auto;aspect-ratio:4/5;padding-right:max(8px,1vw);flex-shrink:0;max-width:none}

/* ---------- Dunkle Seiten (Film, Skytt) ---------- */
.dark{background:#080808;color:#E6F0FA;--hl:#FFFFFF}
.dark .site-header{color:#E6F0FA}
.dark .pill{--pill-bg:#E6F0FA;--pill-fg:#080808}
.film-head{padding:var(--gut) var(--gut) max(32px,4vw)}

/* Vimeo mit Vorschaubild */
.video-consent{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-consent > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.video-consent button{position:absolute;inset:0;width:100%;border:0;background:none;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,22px)}
.play{width:clamp(64px,7vw,120px);height:clamp(64px,7vw,120px);border:1.5px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color 160ms var(--ease),color 160ms var(--ease)}
.play svg{width:32%;height:auto;margin-left:8%}
.video-consent button:hover .play{background:#fff;color:#080808}
.play-label{font-weight:300;font-size:clamp(14px,1.3vw,20px);text-transform:uppercase;letter-spacing:.02em}
.play-note{position:absolute;left:0;right:0;bottom:clamp(12px,1.6vw,24px);padding:0 20px;text-align:center;font-weight:300;font-size:clamp(11px,.9vw,14px);opacity:.85}
.play-note a{text-decoration:underline;text-underline-offset:.15em}
.video-consent iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.hdf-stills{padding:0 var(--gut);display:grid;grid-template-columns:repeat(12,1fr);column-gap:3.1vw;row-gap:3.1vw;align-items:start}
.hdf-stills img{width:100%;height:auto}
.hdf-stills .bleed{grid-column:1/-1;width:calc(100% + 2*var(--gut));max-width:none;margin-left:calc(-1*var(--gut))}

/* Skytt */
.skytt-hero{position:relative;overflow:hidden}
.skytt-hero > img{width:100%;height:min(100vh,66.7vw);object-fit:cover;object-position:50% 40%}
.skytt-hero .shade{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(8,8,8,.7),rgba(8,8,8,0))}
.skytt-hero .word{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding-right:.075em;text-align:center;color:#E6F0FA;font-weight:700;font-size:27vw;line-height:.8;letter-spacing:-.075em;text-transform:uppercase;white-space:nowrap}
.two-col{max-width:75vw;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:3vw;align-items:start}
.two-col .copy{max-width:none;margin:0}
.photo-rows{display:flex;flex-direction:column;gap:.5vw}
.prow{display:flex;gap:.5vw;position:relative}
.tile{position:relative;min-width:0;background:#1A1A1A}
.tile.p{flex:.6667 1 0;aspect-ratio:.6667}
.tile.l{flex:1.5 1 0;aspect-ratio:1.5}
.tile > img:first-child{width:100%;height:100%;object-fit:cover}
.sticker{position:absolute;height:auto;filter:drop-shadow(0 .4vw .6vw rgba(0,0,0,.45));pointer-events:none;max-width:none}
.merch-grid{max-width:75vw;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:3.1vw}
.merch-grid video{width:100%;height:auto}

.social{display:flex;gap:clamp(14px,1.4vw,22px);align-items:center;margin-top:.2em}
.social a{display:flex;padding:4px;margin:-4px;transition:color 160ms var(--ease)}
.social a:hover{color:var(--hl,#323C50)}
.social svg{width:clamp(22px,1.8vw,28px);height:auto}

/* ---------- Rechtliches ---------- */
.legal{padding:var(--gut) var(--gut) max(64px,8vw)}
.legal .site-header{color:var(--red)}
.legal-body{max-width:720px;margin:max(56px,8vw) auto 0;font-weight:300;font-size:clamp(15px,1.15vw,18px);line-height:1.5;hyphens:auto;-webkit-hyphens:auto}
.legal-body h1{margin:0 0 1.2em;color:var(--red)}
.legal-body h2{margin:2em 0 .4em;font-weight:700;font-size:1em}
.legal-body p{margin:0}
.legal-body a{text-decoration:underline;text-underline-offset:.15em}
.legal-body .stand{margin-top:2.4em;font-size:.85em;opacity:.7}

/* ---------- Mobil ---------- */
@media (max-width:700px){
  .copy,.col,.two-col,.proj-nav,.merch-grid{max-width:calc(100vw - 40px)}
  .about-text{max-width:100%}
  .hdf-stills img{grid-column:1/-1 !important;margin-top:0 !important}
  .studio-box{width:calc(100vw - 40px)}
  .gal .half{max-width:75%}
  .std .hero-media > *{max-width:max(var(--hero-max,75vw),calc(100vw - 40px))}
  .gal{max-width:max(var(--gal-max,75vw),calc(100vw - 40px))}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}