.project-main{
  padding:var(--pad);
  padding-top:calc(var(--menu-top) + var(--menu-font-size) + 3rem);
  overflow-x:clip;
}

.project-word-wrap{
  padding-top:3.5rem;
  padding-bottom:4.5rem;
  text-align:left;
}

.project-word{
  font-family:var(--site-font-family);
  font-weight:400;
  font-size:clamp(4.5rem, 13vw, 12.5rem);
  line-height:.9;
  letter-spacing:-.045em;
  text-transform:none;
  margin:0;
}

.project-word-line{
  display:block;
  overflow:hidden;
  padding:.08em .3em .14em;
  margin-inline:-0.3em;
  margin-bottom:-.14em;
}

.project-word-line span{
  display:block;
  transform:translateY(110%);
}

.project-word.animate-in > .project-word-line:nth-child(1) span{
  animation:wordRise .9s cubic-bezier(.18,.8,.22,1) forwards;
}

.project-word.animate-in > .project-word-line:nth-child(2) span{
  animation:wordRise .9s cubic-bezier(.18,.8,.22,1) forwards .16s;
}

.project-word.animate-in > .project-word-line:nth-child(3) span{
  animation:wordRise .9s cubic-bezier(.18,.8,.22,1) forwards .32s;
}

/* Two-line-groups: e.g. "schafft"/"arbeit" share one visual row on desktop
   (both rise together) and split into their own staggered row on mobile. */
.project-word-group{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:baseline;
  column-gap:0.22em;
}

.project-word.animate-in .project-word-group .project-word-line span{
  animation:wordRise .9s cubic-bezier(.18,.8,.22,1) forwards .16s;
}

@media (max-width:640px){
  .project-word-group{
    display:block;
  }

  .project-word.animate-in .project-word-group .project-word-line:last-child span{
    animation-delay:.32s;
  }
}

@keyframes wordRise{
  from{transform:translateY(110%)}
  to{transform:translateY(0)}
}

.project-claim{
  padding:0 0 9.25rem;
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
}

.project-claim-text{
  grid-column:7 / -1;
  justify-self:start;
  max-width:min(42vw, 38rem);
  margin:0;
  text-align:left;
  font-family:var(--site-font-family);
  font-size:1.5rem;
  line-height:1.25;
  letter-spacing:.015rem;
  opacity:0;
  transform:translateY(0.6rem);
  transition:opacity .5s ease, transform .5s ease;
}

.project-claim-text.visible{
  opacity:1;
  transform:translateY(0);
}

.project-claim-link{
  position:relative;
  display:inline-block;
  color:inherit;
  text-decoration:none;
}

.project-claim-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0.04em;
  bottom:0.04em;
  height:1px;
  background:currentColor;
  transform:scaleX(1);
  transform-origin:left center;
  transition:transform .38s cubic-bezier(.65,0,.35,1);
}

@media (hover:hover) and (pointer:fine){
  .project-claim-link:hover::after{
    transform:scaleX(0);
    transform-origin:right center;
  }
}

.media-flow{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

.media-row{
  opacity:0;
  transform:translateY(2.5rem);
  transition:transform 1.05s cubic-bezier(.18,.72,.2,1), opacity 1.05s ease;
}

.media-row.visible{
  opacity:1;
  transform:translateY(0);
}

.media-frame{
  width:100%;
  aspect-ratio:1.5/1;
  overflow:hidden;
}

.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-frame video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.video-embed{
  width:100%;
  aspect-ratio:16/9;
}

.video-embed iframe{
  width:100%;
  height:100%;
  border:0;
}

.media-row{
  display:grid;
  gap:var(--gap);
}

.media-row.one{grid-template-columns:1fr;}
.media-row.two{grid-template-columns:1fr 1fr;}
.media-row.three{grid-template-columns:1fr 1fr 1fr;}

/* RESPONSIVE */

@media (max-width:1100px){
  .project-claim-text{
    max-width:100%;
  }
}

@media (max-width:900px){
  .project-claim{
    display:block;
  }

  .project-claim-text{
    width:100%;
    max-width:42rem;
    margin-left:0;
  }
}

@media (max-width:640px){
  .info-retour-media .media-frame{
    aspect-ratio:4/5;
  }

  .project-main{
    padding-top:calc(var(--menu-top) + var(--menu-font-size) + 4.5rem);
  }

  .project-word-wrap{
    padding-top:0;
    padding-bottom:2.5rem;
  }

  .project-word{
    font-size:calc((100vw - (var(--pad) * 2)) / 5.5);
  }

  .project-claim{
    display:block;
    padding-bottom:3.3rem;
  }

  .project-claim-text{
    width:100%;
    max-width:none;
    margin-left:0;
    font-size:1.32rem;
    letter-spacing:.00375rem;
  }

  .media-row.two,
  .media-row.three{
    grid-template-columns:1fr;
  }
}

@media (max-width:430px){
  .project-word{
    font-size:calc((100vw - (var(--pad) * 2)) / 5.5);
    white-space:nowrap;
  }

  .project-claim-text{
    width:100%;
    font-size:1.24rem;
  }
}

.project-footer-repeat{
  padding:7rem 0 5.75rem;
  font-family:var(--site-font-family);
  font-weight:400;
  font-size:1.5rem;
  line-height:1.1;
  letter-spacing:-0.0075em;
  text-align:center;
  margin:0 auto;
  max-width:70rem;
  transform:translateY(4rem);
  transition:transform 1.05s cubic-bezier(.18,.72,.2,1), opacity 1.05s ease;
}

.project-footer-repeat.visible{
  opacity:1;
  transform:translateY(0);
}

.project-footer-repeat .project-footer-repeat-line{
  display:inline;
}

.project-footer-repeat .footer-link{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:0.22em;
  text-decoration-color:transparent;
  transition:text-decoration-color .18s ease;
}

.project-footer-repeat .footer-link:hover,
.project-footer-repeat .footer-link:focus-visible{
  text-decoration-color:currentColor;
}

.project-footer-meta{
  display:grid;
  grid-template-columns:0.25fr 1.75fr 1fr auto;
  column-gap:2rem;
  align-items:start;
  padding-top:1rem;
  padding-bottom:var(--pad);
  line-height:1.1;
  letter-spacing:0.03em;
  color:inherit;
}

.project-footer-col{
  text-align:left;
}

.project-footer-legal{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.28rem;
}

.project-footer-legal > div:first-child{
  text-align:left;
  white-space:nowrap;
}

.project-footer-legal > div:last-child{
  text-align:right;
}

.project-footer-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.28rem;
}

.project-footer-contact .footer-link{
  position:relative;
  display:inline-block;
  text-decoration:none;
  padding-bottom:0.12em;
}

.project-footer-contact .footer-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0.04em;
  bottom:-0.08em;
  height:1px;
  background:currentColor;
  opacity:0;
  transition:opacity .1s ease;
}

.project-footer-contact .footer-link:hover::after,
.project-footer-contact .footer-link:focus-visible::after{
  opacity:1;
}

.project-footer-address-link{
  display:inline-block;
  line-height:1.1;
  text-decoration:none;
}

.project-footer-address-link span{
  position:relative;
  display:inline-block;
  padding-bottom:0.12em;
}

.project-footer-address-link span + span{
  margin-top:0.25rem;
}

.project-footer-address-link span::after{
  content:"";
  position:absolute;
  left:0;
  right:0.04em;
  bottom:-0.08em;
  height:1px;
  background:currentColor;
  opacity:0;
  transition:opacity .1s ease;
}

.project-footer-address-link:hover span::after,
.project-footer-address-link:focus-visible span::after{
  opacity:1;
}

@media (max-width:1100px){
  .project-footer-repeat{
    font-size:1.5rem;
  }

  .project-footer-meta{
    grid-template-columns:0.8fr 1.4fr 1fr auto;
    column-gap:1.5rem;
  }
}

@media (max-width:640px){
  .project-footer-repeat{
    font-size:1.5rem;
    letter-spacing:-0.015em;
    padding:5.5rem 0 3rem;
  }

  .project-footer-meta{
    display:block;
    padding-top:.8rem;
    line-height:1.25;
  }

  .project-footer-col,
  .project-footer-address,
  .project-footer-contact,
  .project-footer-legal{
    display:inline;
    width:auto;
    text-align:left;
  }

  .project-footer-address-link{
    display:inline;
    line-height:1.1;
  }

  .project-footer-address-link span{
    display:inline;
    padding-bottom:0;
  }

  .project-footer-address-link span::after{
    content:none;
  }

  .project-footer-address-link span + span::before{
    content:" ";
  }

  .project-footer-contact{
    display:inline;
  }

  .project-footer-contact > div{
    display:inline;
  }

  .project-footer-contact > div:first-child{
    white-space:nowrap;
  }

  .project-footer-contact > div + div::before{
    content:" | ";
    margin:0 .25em;
  }

  .project-footer-legal{
    display:inline;
  }

  .project-footer-legal > div{
    display:inline;
  }

  .project-footer-legal > div + div::before{
    content:" | ";
    margin:0 .25em;
  }

  .project-footer-address::after,
  .project-footer-contact::after{
    content:" | ";
    margin:0 .25em;
  }

  .project-footer-contact .footer-link::after,
  .project-footer-address-link span::after,
  .project-footer-address-link::after{
    display:none !important;
  }
}

@media (max-width:430px){
  .project-footer-repeat{
    font-size:1.5rem;
    line-height:1.1;
    padding:4.5rem 0 2.6rem;
  }

  .project-footer-meta{
    font-size:.92rem;
    line-height:1.2;
    padding-top:.55rem;
  }

  .project-footer-address::after,
  .project-footer-contact::after{
    margin:0 .18em;
  }

  .project-footer-contact > div + div::before,
  .project-footer-legal > div + div::before{
    margin:0 .18em;
  }
}

@media (prefers-reduced-motion:reduce){
  .project-word-line span,
  .project-claim-text,
  .media-row,
  .project-footer-repeat{
    animation:none !important;
    transition:none !important;
    transform:none;
  }

  .project-claim-text,
  .media-row,
  .project-footer-repeat{
    opacity:1;
  }
}
