*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#f4f1ec;
  color:#171717;
  font-family:Arial,Helvetica,sans-serif;
}

a{
  color:inherit;
}


/* =========================
   HERO
========================= */

.hero{
  width:100%;
  height:86vh;
  min-height:650px;
  position:relative;
  overflow:hidden;
  background:#111;
  color:#fff;
}

.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}

.shade{
  position:absolute;
  inset:0;
  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.68) 0%,
      rgba(0,0,0,.20) 48%,
      rgba(0,0,0,.08) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.50) 0%,
      transparent 55%
    );
}


/* =========================
   LOGO
========================= */

.btsp-header-logo{
  position:absolute;
  top:30px;
  left:5vw;
  z-index:100;
  display:block;
  width:170px;
}

.btsp-header-logo img{
  display:block;
  width:170px;
  max-width:170px;
  height:auto;
  max-height:72px;
  object-fit:contain;
  object-position:left center;
}


/* =========================
   ZURÜCK
========================= */

.back{
  position:absolute;
  z-index:10;
  top:39px;
  right:5vw;

  color:#fff;
  text-decoration:none;

  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
}


/* =========================
   HERO TEXT
========================= */

.hero-copy{
  position:absolute;
  z-index:3;
  left:5vw;
  right:5vw;
  bottom:65px;
}

.hero-copy p,
.intro>div>p,
.end>p{
  color:#d85d44;
  font-size:11px;
  font-weight:700;
  letter-spacing:.17em;
}

.hero h1{
  max-width:1350px;
  font-size:clamp(4rem,9vw,8.5rem);
  line-height:.84;
  letter-spacing:-.065em;
  margin:.12em 0 .25em;
}

.hero-copy span{
  font-size:clamp(1rem,2vw,1.4rem);
}


/* =========================
   INTRO
========================= */

.intro{
  width:min(1280px,calc(100% - 80px));
  margin:0 auto;
  padding:115px 0 95px;

  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:90px;
  align-items:end;
}

.intro h2,
.end h2{
  font-size:clamp(3rem,6vw,5.8rem);
  line-height:.92;
  letter-spacing:-.055em;
  margin:8px 0;
}

.intro>p{
  max-width:540px;
  font-size:18px;
  line-height:1.7;
  color:#555;
  margin:0;
}


/* =========================
   GALERIE
========================= */

.gallery{
  width:min(1400px,calc(100% - 80px));
  margin:0 auto;
  padding:0 0 120px;
}

.gallery figure{
  margin:0;
  overflow:hidden;
  background:#e7e3dc;
}

.gallery img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .6s ease;
}

.gallery figure:hover img{
  transform:scale(1.008);
}


/* =========================
   GROSSE BILDER
========================= */

.gallery>.full{
  width:100%;
  margin:0 0 18px;
}


/* =========================
   NORMALE BILDPAARE
========================= */

.pair{
  width:100%;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:18px;
  margin:0 0 18px;

  align-items:start;
}


/* =========================
   EDITORIAL-REIHEN
========================= */

.editorial-row{
  width:100%;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:18px;
  margin:0 0 18px;

  align-items:start;
}

.editorial-left{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.editorial-left figure{
  width:100%;
}

.editorial-right{
  width:100%;
}


/* =========================
   EDITORIAL-TEXT
========================= */

.editorial-copy{
  width:100%;

  padding:
    55px
    55px
    60px;

  background:#f4f1ec;
}

.editorial-kicker{
  margin:0 0 20px;

  color:#d85d44;

  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
}

.editorial-copy h3{
  margin:0 0 30px;

  max-width:580px;

  font-size:clamp(52px,5vw,76px);
  line-height:.88;
  letter-spacing:-.055em;
}

.editorial-text{
  margin:0;

  max-width:520px;

  color:#555;

  font-size:clamp(18px,1.5vw,22px);
  line-height:1.6;
}


/* =========================
   ABSCHLUSS
========================= */

.end{
  background:#171717;
  color:#fff;

  padding:
    110px
    max(40px,calc((100vw - 1280px)/2));
}

.end h2{
  margin-bottom:40px;
}

.end a{
  display:inline-block;
  color:#fff;
  text-decoration:none;

  border-bottom:1px solid #fff;
  padding-bottom:5px;

  font-weight:700;
}


/* =========================
   FOOTER
========================= */

footer{
  background:#0d0d0d;
  color:#aaa;

  padding:28px 5vw;

  display:flex;
  justify-content:space-between;
  gap:20px;

  font-size:12px;
}

footer a{
  color:#ddd;
  text-decoration:none;
}


/* =========================
   TABLET
========================= */

@media(max-width:1000px){

  .intro{
    width:calc(100% - 50px);
    gap:50px;
  }

  .gallery{
    width:calc(100% - 40px);
  }

  .editorial-copy{
    padding:40px;
  }

  .editorial-copy h3{
    font-size:clamp(42px,5vw,60px);
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:800px){

  .hero{
    height:72vh;
    min-height:560px;
  }

  .hero-image{
    object-position:center center;
  }

  .btsp-header-logo{
    top:22px;
    left:20px;
    width:130px;
  }

  .btsp-header-logo img{
    width:130px;
    max-width:130px;
  }

  .back{
    top:30px;
    right:20px;
  }

  .hero-copy{
    left:20px;
    right:20px;
    bottom:45px;
  }

  .hero h1{
    font-size:clamp(3.3rem,16vw,5.5rem);
  }


  .intro{
    width:auto;
    margin:0;
    padding:75px 20px;

    grid-template-columns:1fr;
    gap:35px;
  }

  .intro>p{
    max-width:none;
  }


  .gallery{
    width:auto;
    margin:0;
    padding:0 10px 70px;
  }

  .gallery>.full{
    margin-bottom:10px;
  }


  .pair,
  .editorial-row{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:10px;
  }


  .editorial-copy{
    padding:45px 25px 55px;
  }

  .editorial-copy h3{
    font-size:clamp(42px,12vw,58px);
    margin-bottom:24px;
  }

  .editorial-text{
    font-size:17px;
  }


  .end{
    padding:75px 20px;
  }

  footer{
    padding:25px 20px;
  }

}