@font-face{
  font-family:"FuturaLT";
  src:url("fonts/FuturaLT.woff2") format("woff2"),url("fonts/FuturaLT.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"FuturaLT";
  src:url("fonts/FuturaLT-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"FuturaLTExtraBoldOblique";
  src:url("fonts/FuturaLT-ExtraBoldOblique.woff2") format("woff2"),url("fonts/FuturaLT-ExtraBoldOblique.woff") format("woff");
  font-weight:800;
  font-style:oblique;
  font-display:swap;
}
:root{
  --yellow:#d8c600;
  --black:#000;
  --white:#f2f2f2;
  --grey:#999;
  --muted:#b9b9b9;
  --header-h:58px;
  --font:"FuturaLT",Futura,"Century Gothic",Arial,sans-serif;
  --logo-font:"FuturaLTExtraBoldOblique","FuturaLT",Futura,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:#000;color:var(--white);font-family:var(--font);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;padding-top:var(--header-h)}
a{color:inherit;text-decoration:none} a:hover{color:#fff} img,video,iframe,svg{display:block;max-width:100%}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:3000}.skip-link:focus{left:12px;top:12px}
.site-header{position:fixed;top:0;left:0;width:100%;height:var(--header-h);background:#000;z-index:1000}.site-header__inner{width:100%;height:var(--header-h);display:flex;align-items:center;justify-content:center;position:relative}.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-51%);font-family:var(--logo-font);font-weight:800;font-style:oblique;font-size:16px;line-height:1;letter-spacing:.20em;white-space:nowrap;color:#fff;z-index:3}.site-nav{width:100%;height:100%}.nav-list{height:100%;display:grid;grid-template-columns:auto auto 342px auto auto;align-items:center;justify-content:center;column-gap:48px;list-style:none}.nav-list li:nth-child(1){grid-column:1}.nav-list li:nth-child(2){grid-column:2}.nav-list li:nth-child(3){grid-column:4}.nav-list li:nth-child(4){grid-column:5}.nav-link{display:block;font-family:var(--font);font-size:12px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.28em;color:var(--grey);white-space:nowrap}.nav-link:hover,.nav-link:focus-visible{color:#fff}.nav-link.is-active{color:var(--yellow)}.nav-toggle{display:none}
main{background:#000}.banner-stack{width:100vw;margin:0;padding:0;display:flex;flex-direction:column;gap:0;background:#000}.tile{width:100vw;height:calc((100vh - var(--header-h))/2);min-height:360px;max-height:560px;display:block;position:relative;overflow:hidden;background:#000;color:#fff;margin:0;padding:0}.feature-stack .tile{height:calc((100vh - var(--header-h))/2);min-height:360px;max-height:520px}.work-stack .tile{height:calc((100vh - var(--header-h))/2);min-height:360px;max-height:500px}.tile__media{width:100%;height:100%;position:absolute;inset:0;overflow:hidden;background:#000}.tile__media img,.tile__media video{width:100%;height:100%;object-fit:cover;object-position:center center;margin:0;padding:0}.tile__title{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:92vw;border:2px solid rgba(255,255,255,.92);padding:18px 40px 16px;background:rgba(0,0,0,.04);color:#fff;font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.45)}
/* Small crop corrections from the supplied WebPs */
.tile--vogue-sonnendorf .tile__media img{object-position:center center}.tile--reina-olga .tile__media img{object-position:center center}.tile--michael-kors .tile__media img{object-position:center center}.tile--erecycling .tile__media img{object-position:center center}.tile--radio-24 .tile__media img{object-position:center center}.tile--zueger .tile__media img{object-position:center center}.tile--der-buezer .tile__media img{object-position:center center}.tile--an-ode-to-music .tile__media img{object-position:center center}.tile--wir-sind-gehoerlos .tile__media img{object-position:center center}
.detail,.video-page{width:min(1180px,86vw);margin:0 auto;padding:58px 0 74px;text-align:center;background:#000}.detail__title,.project-title{font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 28px;line-height:1.25}.detail__player,.detail__media,.video-wrap{width:100%;max-width:1180px;margin:0 auto;background:#000;overflow:hidden}.video-embed,.video-wrap{width:100%;aspect-ratio:16/9;background:#000;position:relative}.video-embed iframe,.video-wrap iframe,.video-wrap video,.detail__media video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;display:block}.detail__media{aspect-ratio:16/9;position:relative}.detail__media .tile__media{position:absolute;inset:0}.detail__body{display:flex;justify-content:center;margin-top:28px}.detail__back,.back-link{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.detail__back:hover,.back-link:hover{color:#fff}.buezer-page,.about{width:min(760px,calc(100vw - 48px));margin:0 auto;padding:66px 0 72px;text-align:center;background:#000;color:#fff}.press-list{list-style:none;display:flex;flex-direction:column;align-items:center;gap:28px;margin:0 auto}.press-list--top{margin-bottom:42px}.press-list--bottom{margin-top:42px}.press-item{max-width:700px;margin:0 auto}.press-item__quote{font-size:13px;font-weight:400;line-height:1.55;color:#f2f2f2;margin:0 0 6px}.press-item__source,.about__identity a,.site-footer a{color:var(--yellow)}.press-item__source{font-size:13px;font-weight:700;line-height:1.35;letter-spacing:.04em;text-transform:uppercase}.buezer-video{width:min(980px,86vw);margin:0 auto;background:#000}.about{padding-top:66px}.about__portrait{width:min(360px,76vw);margin:0 auto 36px}.about__portrait img{width:100%;height:auto;margin:0 auto}.about__identity{font-style:normal;display:flex;flex-direction:column;gap:4px;align-items:center;margin-bottom:44px;color:#f2f2f2;font-size:13px;line-height:1.5}.footer-wrap{text-align:center;background:#000;padding:30px 18px 34px;color:var(--muted)}.back-to-top{display:inline-block;margin-bottom:26px;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}.site-footer{font-size:13px;line-height:1.45;color:var(--muted)}.site-footer__inner{display:flex;flex-direction:column;align-items:center;gap:3px}
@media (max-width:760px){:root{--header-h:56px}.brand{font-size:18px;letter-spacing:.18em}.nav-toggle{display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;background:transparent;z-index:5;flex-direction:column;gap:5px;align-items:flex-end;justify-content:center}.nav-toggle span{display:block;width:22px;height:2px;background:#ddd}.site-nav{position:fixed;top:var(--header-h);left:0;width:100%;height:auto;background:#000;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s}.nav-list{display:flex;flex-direction:column;gap:16px;padding:18px 20px 24px;height:auto}.nav-link{font-size:18px;letter-spacing:.16em}body.nav-open .site-nav{opacity:1;visibility:visible;transform:translateY(0)}body.nav-open .nav-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}body.nav-open .nav-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.tile,.feature-stack .tile,.work-stack .tile{height:42vh;min-height:220px;max-height:360px}.tile__title{font-size:11px;letter-spacing:.08em;padding:13px 20px 12px}.detail,.video-page{width:calc(100vw - 28px);padding-top:42px}.buezer-page,.about{width:calc(100vw - 36px);padding-top:48px}.press-item__quote,.press-item__source,.about__identity,.site-footer,.back-to-top{font-size:12px}.nav-list{grid-template-columns:none}.nav-list li{grid-column:auto!important}}


/* --- HK visual patch v2: closer to original Squarespace --- */
body{font-weight:400;}
.site-header{box-shadow:none;}
.nav-list{column-gap:46px;grid-template-columns:auto auto 330px auto auto;}
.nav-link{font-size:12px;letter-spacing:.30em;color:#8f8f8f;}
.nav-link.is-active{color:var(--yellow);}
.brand{font-size:16px;letter-spacing:.18em;}

/* Overview strips: full width, fixed cinematic crop, no gaps */
.banner-stack{line-height:0;}
.tile{line-height:normal;}
.feature-stack .tile,.work-stack .tile{height:calc((100vh - var(--header-h))/2);min-height:350px;max-height:none;}
.tile__media img,.tile__media video{object-fit:cover;width:100%;height:100%;}
.tile__title{font-size:13px;letter-spacing:.08em;border-width:2px;padding:18px 42px 16px;}

/* Crop corrections for supplied preview frames */
.tile--der-buezer .tile__media img{object-position:center 48%;}
.tile--an-ode-to-music .tile__media img{object-position:center 50%;}
.tile--wir-sind-gehoerlos .tile__media img{object-position:center 50%;}
.tile--vogue-sonnendorf .tile__media img{object-position:center 50%;}
.tile--reina-olga .tile__media img{object-position:center 42%;}
.tile--michael-kors .tile__media img{object-position:center 53%;}
.tile--erecycling .tile__media img{object-position:center 50%;}
.tile--radio-24 .tile__media img{object-position:center 50%;}
.tile--zueger .tile__media img{object-position:center 50%;}

/* Detail pages: centered Vimeo on pure black */
.detail,.video-page{padding-top:70px;padding-bottom:70px;}
.project-title,.detail__title{font-size:13px;letter-spacing:.14em;margin-bottom:30px;}
.video-wrap{background:#000;box-shadow:none;border:0;}
.video-wrap iframe,.video-wrap video{background:#000;border:0;box-shadow:none;}
.detail__body{margin-top:30px;}

/* Der Büezer page closer to reference */
.buezer-page{width:min(760px,calc(100vw - 48px));padding-top:86px;padding-bottom:74px;}
.press-list{gap:34px;}
.press-list--top{margin-bottom:88px;}
.press-list--bottom{margin-top:78px;gap:44px;}
.press-item__quote{font-size:13px;font-weight:700;line-height:1.45;letter-spacing:.01em;}
.press-item__source{font-size:13px;font-weight:700;color:var(--yellow);letter-spacing:.03em;margin-top:8px;display:inline-block;}
.buezer-video{width:min(760px,62vw);margin:0 auto;background:#000;}

/* Footer original-like spacing */
.footer-wrap{padding-top:56px;padding-bottom:42px;}
.back-to-top{color:#9a9a9a;}

@media (max-width:760px){
  .nav-list{grid-template-columns:none;column-gap:0;}
  .feature-stack .tile,.work-stack .tile{height:42vh;min-height:230px;}
  .buezer-page{padding-top:56px;}
  .press-list--top{margin-bottom:48px;}
  .press-list--bottom{margin-top:48px;}
  .buezer-video{width:100%;}
}


/* v3: use moving MP4 strips on overview pages */
.tile__media video.tile__video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  background:#000;
}
.tile__media img{display:block;}

/* v3: stronger black cleanup for Vimeo/Büezer embeds */
.video-wrap,
.video-embed,
.detail__player,
.detail__media,
.buezer-video{
  background:#000 !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  padding:0 !important;
}
.video-wrap iframe,
.video-embed iframe,
.buezer-video iframe{
  background:#000 !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  display:block;
}
.buezer-video .video-wrap{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}
/* tiny crop to hide occasional Vimeo edge lines */
.buezer-video iframe{
  width:calc(100% + 2px) !important;
  height:calc(100% + 2px) !important;
  left:-1px !important;
  top:-1px !important;
}

/* --- Comparison version: original replica overview scaling/spacing ---
   This restores the commercial/feature overview strips to the same
   width/height behaviour as the original ZIP: natural aspect-ratio strips
   instead of the newer viewport-height strips. */
body{padding-top:var(--header-h);}
.banner-stack{width:100%;margin:0;padding:0;gap:0;display:flex;flex-direction:column;background:#000;}
.tile,.feature-stack .tile,.work-stack .tile{
  width:100%;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:block;
  position:relative;
  overflow:hidden;
  margin:0;
  padding:0;
  background:#000;
}
.tile__media,.feature-stack .tile__media,.work-stack .tile__media{
  position:relative !important;
  inset:auto !important;
  width:100%;
  height:auto !important;
  overflow:hidden;
  background:#000;
}
.feature-stack .tile__media{aspect-ratio:2500 / 930;}
.work-stack .tile__media{aspect-ratio:16 / 9;}
.tile__media img,.tile__media video,.tile__media video.tile__video{
  position:static !important;
  inset:auto !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:center center;
  display:block;
  margin:0;
  padding:0;
}
.tile__title{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
@media (max-width:760px){
  .feature-stack .tile__media{aspect-ratio:390 / 160;}
  .work-stack .tile__media{aspect-ratio:16 / 9;}
  .tile,.feature-stack .tile,.work-stack .tile{height:auto !important;min-height:0 !important;max-height:none !important;}
}


/* --- v3c requested fixes: original hanskaufmann.com nav height, Büezer Vimeo crop, email-only footer --- */
@media (min-width: 761px){
  :root{--header-h:86px;}
  body{padding-top:86px;}
  .site-header,
  .site-header__inner{height:86px;}
}
.footer-wrap{padding:54px 18px 42px;background:#000;text-align:center;}
.site-footer__inner{display:block;text-align:center;}
.site-footer__inner a{font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:0;color:#9a9a9a;text-transform:none;}
.site-footer__inner a:hover{color:#fff;}
.buezer-video,
.buezer-video .video-wrap,
.buezer-video .video-embed{background:#000!important;border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;overflow:hidden!important;}
.buezer-video iframe,
.buezer-video video{background:#000!important;border:0!important;outline:0!important;box-shadow:none!important;display:block!important;position:absolute!important;width:calc(100% + 10px)!important;height:calc(100% + 10px)!important;left:-5px!important;top:-5px!important;max-width:none!important;}


/* --- v3d: correct press links added in HTML, remove Vimeo letterbox/white bars on Der Büezer --- */
.buezer-video{
  width:min(760px,62vw)!important;
  margin:0 auto!important;
  background:#000!important;
  border:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.buezer-video .video-wrap{
  width:100%!important;
  aspect-ratio:2.39 / 1!important;
  position:relative!important;
  overflow:hidden!important;
  background:#000!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0 auto!important;
}
.buezer-video iframe{
  position:absolute!important;
  left:0!important;
  top:-17%!important;
  width:100%!important;
  height:134%!important;
  max-width:none!important;
  display:block!important;
  background:#000!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
@media (max-width:760px){
  .buezer-video{width:100%!important;}
}


/* --- v3e: added new commercial MP4 preview strips --- */
.tile--salomon-whisper .tile__media video{object-position:center center;}
.tile--nike-sndr .tile__media video{object-position:center center;}
.tile--lacoste-slambreak .tile__media video{object-position:center center;}
.tile--lacoste-l003 .tile__media video{object-position:center center;}
.tile--lacoste-ss2025 .tile__media video{object-position:center center;}


/* --- v3f: Vimeo black-player cleanup + generated WebP posters for new work --- */
.video-page,
.video-page .detail,
.video-page .video-wrap,
.video-page .video-embed,
.video-page iframe{
  background:#000!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.video-wrap{
  background-color:#000!important;
  overflow:hidden!important;
}
.video-wrap iframe{
  background-color:#000!important;
  color-scheme:dark!important;
}
/* If a Vimeo upload has white side panels around a vertical center image,
   this class crops to a clean centered portrait frame on black. */
.video-wrap--crop-white{
  width:min(520px,86vw)!important;
  aspect-ratio:9 / 16!important;
  max-width:520px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  background:#000!important;
}
.video-wrap--crop-white iframe{
  width:100%!important;
  height:100%!important;
  left:0!important;
  top:0!important;
}


/* --- v3i: keep separate overview scaling, update new preview clips, make Der Buezer Vimeo usable/uncropped --- */
.tile--dime-x-titolo .tile__media video{object-position:center center;}
/* Commercials remain 16:9, Feature remains wide cinematic. */
.feature-stack .tile__media{aspect-ratio:2500 / 930;}
.work-stack .tile__media{aspect-ratio:16 / 9;}
/* Undo previous top/bottom crop on Der Buezer so Vimeo controls are fully usable. */
.buezer-video{width:min(760px,62vw)!important;margin:0 auto!important;background:#000!important;border:0!important;padding:0!important;overflow:visible!important;}
.buezer-video .video-wrap{width:100%!important;aspect-ratio:16 / 9!important;position:relative!important;overflow:hidden!important;background:#000!important;border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;margin:0 auto!important;}
.buezer-video iframe{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none!important;display:block!important;background:#000!important;border:0!important;outline:0!important;box-shadow:none!important;}
@media (max-width:760px){.buezer-video{width:100%!important;}}