.nuvo-grey{color:#aaa09d}
.nuvo-header-brand{display:flex;align-items:center;gap:14px}
.nuvo-brown{color:#983a42}
#project-title{font-family:ServiceDM,sans-serif;font-weight:200}
#project-title .nuvo-grey,#project-title .nuvo-brown{font-weight:700}
h2,h3,h4,h5,h6{font-family:ServiceDM,sans-serif;color:#aaa09d}
.details h2{color:#aaa09d;-webkit-text-stroke:0}
.intro{font-size:22px}
#film video{width:auto;max-width:100%;height:auto;aspect-ratio:auto;margin-inline:auto;border-radius:16px;overflow:hidden}
@media(min-width:701px){
  #film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;border-top:1px solid #514650;padding:56px 0}
  #film .details{grid-column:2;grid-row:1;display:block;border:0;padding:0}
  #film .intro{margin-top:24px}
  #film .film{grid-column:1;grid-row:1;width:100%;margin:0 auto}
  section[aria-labelledby="shop-title"]{display:grid;grid-template-columns:minmax(min-content,.85fr) minmax(0,1.15fr);gap:40px;align-items:center;border-top:1px solid #514650;padding:56px 0}
  section[aria-labelledby="shop-title"] .details{display:block;border:0;padding:0;align-self:start}
  section[aria-labelledby="shop-title"] .intro{margin-top:24px}
  section[aria-labelledby="shop-title"] .hero{width:100%;margin:0}
}
@media(max-width:700px){.intro{font-size:20px}}
.nuvo-devices{position:relative;container-type:inline-size;aspect-ratio:1.2;margin-top:40px;overflow:hidden;border-radius:16px;background:#242225}
.nuvo-tablet,.nuvo-phone{position:absolute;padding:1%;border:1px solid #747174;background:#141315;border-radius:16px;box-shadow:0 18px 35px #0006}
.nuvo-screen{overflow:hidden;border-radius:10px;background:#29272b;color:#efeaee}
.nuvo-screen span{display:block;padding:7% 9%;font-size:3cqw;font-weight:300;letter-spacing:.04em}
.nuvo-screen img{display:block;width:100%;height:auto}
.nuvo-tablet{width:37%;left:8%;top:5%;transform:rotate(-7deg)}
.nuvo-tablet img{max-height:38cqw;object-fit:contain}
.nuvo-laptop{position:absolute;width:73%;height:auto;left:5%;top:37%;border-radius:12px;transform:rotate(2deg);box-shadow:0 18px 35px #0006}
.nuvo-phone{width:23%;right:5%;top:27%;transform:rotate(7deg)}
.nuvo-phone small{display:block;padding:10%;font-size:1.35cqw;line-height:1.4}
@media(max-width:700px){.nuvo-tablet,.nuvo-phone{border-radius:10px}.nuvo-screen{border-radius:6px}.nuvo-laptop{border-radius:8px}.nuvo-phone small{display:none}}

.nuvo-motion{width:min(100%,44svh);justify-self:center}
.nuvo-motion video{display:block;width:100%;height:auto;border-radius:16px;background:#000}
.nuvo-motion figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.nuvo-video-toggle{min-height:44px;padding:8px 12px;border:.75px solid #aaa09d;border-radius:999px;background:transparent;color:var(--paper);font:inherit;cursor:pointer;transition:color .2s,border-color .2s}
.nuvo-video-toggle:is(:hover,:focus-visible){color:#ff4b33;border-color:#ff4b33}
.nuvo-video-toggle:focus-visible{outline:2px solid #ff4b33;outline-offset:3px}
.nuvo-video-toggle:disabled{cursor:default;color:var(--muted)}

.gallery img{aspect-ratio:1194/1600;object-fit:contain}
/* Nur den 36px breiten Außenrand der Originalgrafik ausblenden. */
.nuvo-poster{display:grid;grid-template: minmax(0,1fr) / minmax(0,1fr);place-items:center;aspect-ratio:1194/1600;overflow:hidden;border-radius:16px;background:#0a0a0d}
.gallery .nuvo-poster img{height:calc(100% * 2048 / 1976);width:auto;aspect-ratio:auto;clip-path:inset(0 2.65%);border-radius:0;transform:none;box-shadow:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .nuvo-poster{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
  .nuvo-poster:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 18px 36px #0005}
}

/* The ink shape is taken directly from the large wordmark on the campaign poster. */
body {
  isolation: isolate;
  background-color: #09090c;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 50%;
  left: 50%;
  width: 94%;
  aspect-ratio: 716 / 152;
  transform: translate(-50%, -50%);
  background: url("nuvo-wortmarke-bordeaux.png") center / contain no-repeat;
  opacity: .24;
}
@media (prefers-reduced-motion: no-preference) {
  .nuvo-scroll-layer {
    translate: 0 var(--nuvo-y, 0px);
    opacity: var(--nuvo-alpha, 1);
  }
  [data-heading-motion="nuvo"] .heading-rise {
    transition: transform var(--nuvo-rise-time, 1265ms) cubic-bezier(.65, 0, .35, 1),
                opacity var(--nuvo-rise-time, 1265ms) cubic-bezier(.65, 0, .35, 1);
  }
  #project-title { --nuvo-rise-time: 1100ms; }
  .heading-waiting.nuvo-in-view .heading-rise {
    transform: translateY(0);
    opacity: 1;
  }
  .nuvo-copy-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.55em) rotateX(-8deg);
    transform-origin: center bottom;
    transition: opacity .64s var(--nuvo-delay) ease-out,
                transform .8s var(--nuvo-delay) cubic-bezier(.22, .61, .36, 1);
  }
  .nuvo-in-view .nuvo-copy-word {
    opacity: 1;
    transform: none;
  }
  .nuvo-scroll-layer:focus-within {
    opacity: 1;
  }
  .nuvo-tablet { translate: 0 var(--nuvo-spread, 0px); }
  .nuvo-phone { translate: 0 calc(-1 * var(--nuvo-spread, 0px)); }
}