/* =========================================================
   BASIS
========================================================= */

.heuer-about,
.heuer-about * {
  box-sizing: border-box;
}

.heuer-about {
  --heuer-black: #111111;
  --heuer-text: #62625d;
  --heuer-muted: #83837d;
  --heuer-line: #ddddD8;
  --heuer-light: #f6f6f3;
  --heuer-white: #ffffff;

  width: 100%;

  padding:
    90px 20px
    110px;

  background: var(--heuer-white);
  color: var(--heuer-black);

  overflow: hidden;
}

.heuer-about__inner {
  width: 100%;
  max-width: 1600px;

  margin: 0 auto;
}


/* =========================================================
   ALLGEMEINER KICKER
========================================================= */

.heuer-about__kicker {
  display: block;

  margin-bottom: 18px;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;

  letter-spacing: .21em;
  text-transform: uppercase;

  color: var(--heuer-muted);
}


/* =========================================================
   01 – HERO
========================================================= */

.heuer-about-hero {
  display: grid;

  grid-template-columns:
    minmax(300px, .8fr)
    minmax(0, 1.2fr);

  align-items: end;

  gap:
    clamp(60px, 9vw, 150px);

  padding:
    35px 0
    85px;
}

.heuer-about-hero__title,
.heuer-about-hero__statement {
  min-width: 0;
}

.heuer-about-hero__title h1 {
  max-width: 760px;

  margin: 0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(54px, 6vw, 96px);

  font-weight: 300;
  line-height: .94;

  letter-spacing: -.065em;

  color: var(--heuer-black);
}

.heuer-about-hero__title h1 strong {
  font-weight: 600;
}

.heuer-about-hero__statement {
  position: relative;

  max-width: 800px;

  padding-left:
    clamp(40px, 5vw, 75px);

  border-left:
    1px solid var(--heuer-line);
}

.heuer-about-hero__number {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 27px;

  margin-bottom: 24px;

  border:
    1px solid var(--heuer-line);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: .14em;

  color: var(--heuer-muted);
}

.heuer-about-hero__statement p {
  max-width: 720px;

  margin:
    18px 0
    0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(15px, 1.15vw, 18px);

  font-weight: 400;
  line-height: 1.75;

  color: var(--heuer-text);
}

.heuer-about-hero__statement
.heuer-about-hero__lead {
  margin-top: 0;

  font-size:
    clamp(19px, 1.65vw, 25px);

  font-weight: 400;
  line-height: 1.52;

  letter-spacing: -.025em;

  color: var(--heuer-black);
}


/* =========================================================
   02 – KENNZAHLEN
========================================================= */

.heuer-about-facts {
  display: grid;

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

  align-items: stretch;

  min-height: 165px;

  border-top:
    1px solid var(--heuer-line);

  border-bottom:
    1px solid var(--heuer-line);
}

.heuer-about-fact {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    32px clamp(25px, 3vw, 50px);
}

.heuer-about-fact:first-child {
  padding-left: 0;
}

.heuer-about-fact:last-child {
  padding-right: 0;
}

.heuer-about-facts__divider {
  width: 1px;

  margin:
    32px 0;

  background:
    var(--heuer-line);
}

.heuer-about-fact__label {
  display: block;

  margin-bottom: 10px;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 8px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: .19em;
  text-transform: uppercase;

  color: var(--heuer-muted);
}

.heuer-about-fact strong {
  display: block;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(18px, 1.6vw, 25px);

  font-weight: 500;
  line-height: 1.25;

  letter-spacing: -.025em;

  color: var(--heuer-black);
}

.heuer-about-fact p {
  max-width: 390px;

  margin:
    10px 0
    0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;

  color: var(--heuer-text);
}


/* =========================================================
   03 – STORY
========================================================= */

.heuer-about-story {
  display: grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.1fr);

  align-items: stretch;

  margin-top:
    clamp(75px, 9vw, 140px);

  border-top:
    1px solid var(--heuer-line);

  border-bottom:
    1px solid var(--heuer-line);
}

.heuer-about-story__media {
  position: relative;

  min-width: 0;
  min-height: 680px;

  overflow: hidden;

  background:
    #ebebe7;
}

.heuer-about-story__media img {
  width: 100%;
  height: 100%;
  min-height: 680px;

  display: block;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(.82)
    contrast(1.03);

  transform:
    scale(1.001);

  transition:
    transform 1.2s cubic-bezier(.22,.8,.22,1),
    filter .6s ease;
}

.heuer-about-story__image-label {
  position: absolute;

  left: 24px;
  bottom: 22px;

  display: inline-flex;
  align-items: center;

  min-height: 30px;

  padding:
    0 12px;

  background:
    rgba(255,255,255,.9);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 8px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: .17em;

  color:
    var(--heuer-black);
}

.heuer-about-story__content {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(55px, 7vw, 115px);

  background:
    var(--heuer-light);

  border-left:
    1px solid var(--heuer-line);
}

.heuer-about-story__content h2 {
  max-width: 760px;

  margin: 0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(42px, 4.3vw, 70px);

  font-weight: 300;
  line-height: .98;

  letter-spacing: -.058em;

  color:
    var(--heuer-black);
}

.heuer-about-story__content h2 strong {
  font-weight: 600;
}

.heuer-about-story__content p {
  max-width: 720px;

  margin:
    20px 0
    0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(15px, 1.08vw, 17px);

  font-weight: 400;
  line-height: 1.78;

  color:
    var(--heuer-text);
}

.heuer-about-story__content
.heuer-about-story__intro {
  margin-top:
    30px;

  font-size:
    clamp(17px, 1.35vw, 21px);

  line-height: 1.6;

  letter-spacing: -.02em;

  color:
    var(--heuer-black);
}

.heuer-about-story__signature {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-top: 35px;
}

.heuer-about-story__signature span {
  width: 42px;
  height: 1px;

  background:
    var(--heuer-black);
}

.heuer-about-story__signature em {
  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;

  color:
    var(--heuer-black);
}


/* =========================================================
   STORY HOVER
========================================================= */

@media (hover: hover) {

  .heuer-about-story:hover
  .heuer-about-story__media img {
    transform:
      scale(1.035);

    filter:
      saturate(1)
      contrast(1.02);
  }

}


/* =========================================================
   04 – ÜBERZEUGUNG
========================================================= */

.heuer-about-belief {
  display: grid;

  grid-template-columns:
    minmax(300px, .8fr)
    minmax(0, 1.2fr);

  gap:
    clamp(60px, 9vw, 150px);

  padding:
    clamp(85px, 10vw, 150px)
    0;
}

.heuer-about-belief__intro h2 {
  max-width: 650px;

  margin: 0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(44px, 4.5vw, 74px);

  font-weight: 300;
  line-height: .98;

  letter-spacing: -.06em;

  color:
    var(--heuer-black);
}

.heuer-about-belief__intro h2 strong {
  font-weight: 600;
}

.heuer-about-belief__text {
  max-width: 800px;

  padding-left:
    clamp(40px, 5vw, 75px);

  border-left:
    1px solid var(--heuer-line);
}

.heuer-about-belief__text blockquote {
  max-width: 720px;

  margin:
    0 0
    32px;

  padding: 0;

  border: 0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(21px, 2vw, 31px);

  font-weight: 300;
  font-style: italic;
  line-height: 1.45;

  letter-spacing: -.035em;

  color:
    #9a9a94;
}

.heuer-about-belief__text p {
  max-width: 720px;

  margin:
    18px 0
    0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(15px, 1.1vw, 17px);

  font-weight: 400;
  line-height: 1.78;

  color:
    var(--heuer-text);
}


/* =========================================================
   05 – WERTE
========================================================= */

.heuer-about-values {
  display: grid;

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

  border-top:
    1px solid var(--heuer-line);

  border-left:
    1px solid var(--heuer-line);
}

.heuer-about-value {
  min-height: 355px;

  display: flex;
  flex-direction: column;

  padding:
    28px 30px
    34px;

  background:
    var(--heuer-white);

  border-right:
    1px solid var(--heuer-line);

  border-bottom:
    1px solid var(--heuer-line);
}

.heuer-about-value--dark {
  background:
    var(--heuer-black);

  color:
    var(--heuer-white);
}

.heuer-about-value__top {
  display: flex;
  align-items: center;

  gap: 14px;
}

.heuer-about-value__number {
  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: .14em;

  opacity: .55;
}

.heuer-about-value__line {
  width: 34px;
  height: 1px;

  background:
    currentColor;

  opacity: .35;

  transition:
    width .4s ease;
}

.heuer-about-value h3 {
  margin:
    auto 0
    0;

  padding-top:
    70px;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(34px, 3vw, 50px);

  font-weight: 400;
  line-height: 1;

  letter-spacing: -.05em;

  color:
    inherit;
}

.heuer-about-value p {
  max-width: 390px;

  margin:
    20px 0
    0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;

  color:
    var(--heuer-text);
}

.heuer-about-value--dark p {
  color:
    rgba(255,255,255,.66);
}


/* =========================================================
   WERTE HOVER
========================================================= */

@media (hover: hover) {

  .heuer-about-value:hover
  .heuer-about-value__line {
    width: 62px;
  }

}


/* =========================================================
   06 – CTA
========================================================= */

.heuer-about-cta {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(320px, .9fr);

  align-items: end;

  gap:
    clamp(50px, 8vw, 130px);

  margin-top:
    clamp(80px, 9vw, 130px);

  padding:
    clamp(55px, 7vw, 100px);

  background:
    var(--heuer-light);

  border:
    1px solid var(--heuer-line);
}

.heuer-about-cta__content h2 {
  max-width: 850px;

  margin: 0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(44px, 4.7vw, 78px);

  font-weight: 300;
  line-height: .96;

  letter-spacing: -.06em;

  color:
    var(--heuer-black);
}

.heuer-about-cta__content h2 strong {
  font-weight: 600;
}

.heuer-about-cta__action p {
  max-width: 560px;

  margin:
    0;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:
    clamp(15px, 1.1vw, 17px);

  font-weight: 400;
  line-height: 1.75;

  color:
    var(--heuer-text);
}


/* =========================================================
   BUTTON
========================================================= */

.heuer-about-button {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 38px;

  min-width: 235px;
  min-height: 56px;

  margin-top: 30px;

  padding:
    0 18px
    0 21px;

  border:
    1px solid var(--heuer-black);

  background:
    var(--heuer-black);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 500;
  line-height: 1;

  color:
    var(--heuer-white) !important;

  text-decoration:
    none !important;

  transition:
    background .35s ease,
    color .35s ease;
}

.heuer-about-button__arrow {
  display: inline-block;

  font-size: 15px;

  transition:
    transform .35s ease;
}

@media (hover: hover) {

  .heuer-about-button:hover {
    background:
      transparent;

    color:
      var(--heuer-black) !important;
  }

  .heuer-about-button:hover
  .heuer-about-button__arrow {
    transform:
      translate(3px, -3px);
  }

}


/* =========================================================
   REVEAL-ANIMATION
========================================================= */

.heuer-about-hero,
.heuer-about-facts,
.heuer-about-story,
.heuer-about-belief,
.heuer-about-values,
.heuer-about-cta {
  opacity: 0;

  transform:
    translateY(32px);

  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,.8,.22,1);
}

.heuer-about-hero.is-visible,
.heuer-about-facts.is-visible,
.heuer-about-story.is-visible,
.heuer-about-belief.is-visible,
.heuer-about-values.is-visible,
.heuer-about-cta.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


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

@media (max-width: 1100px) {

  .heuer-about {
    padding:
      70px 16px
      90px;
  }

  .heuer-about-hero,
  .heuer-about-belief {
    gap: 55px;
  }

  .heuer-about-story {
    grid-template-columns:
      minmax(0, .9fr)
      minmax(0, 1.1fr);
  }

  .heuer-about-story__media,
  .heuer-about-story__media img {
    min-height: 600px;
  }

  .heuer-about-story__content {
    padding:
      55px 45px;
  }

  .heuer-about-cta {
    padding:
      55px 45px;
  }

}


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

@media (max-width: 767px) {

  .heuer-about {
    padding:
      48px 8px
      65px;
  }


  /* HERO */

  .heuer-about-hero {
    display: block;

    padding:
      18px 12px
      50px;
  }

  .heuer-about-hero__title h1 {
    font-size:
      clamp(46px, 13vw, 64px);

    line-height: .96;
  }

  .heuer-about-hero__statement {
    max-width: none;

    margin-top: 38px;

    padding:
      30px 0
      0;

    border-left: 0;

    border-top:
      1px solid var(--heuer-line);
  }


  /* FACTS */

  .heuer-about-facts {
    display: flex;
    flex-direction: column;

    min-height: 0;
  }

  .heuer-about-facts__divider {
    width: 100%;
    height: 1px;

    margin: 0;
  }

  .heuer-about-fact,
  .heuer-about-fact:first-child,
  .heuer-about-fact:last-child {
    padding:
      25px 14px;
  }


  /* STORY */

  .heuer-about-story {
    display: flex;
    flex-direction: column;

    margin-top:
      60px;
  }

  .heuer-about-story__media {
    min-height: 390px;
  }

  .heuer-about-story__media img {
    min-height: 390px;
    height: 390px;
  }

  .heuer-about-story__content {
    padding:
      42px 20px
      48px;

    border-left: 0;

    border-top:
      1px solid var(--heuer-line);
  }

  .heuer-about-story__content h2 {
    font-size:
      clamp(38px, 10.5vw, 52px);

    line-height: 1;
  }


  /* BELIEF */

  .heuer-about-belief {
    display: block;

    padding:
      70px 12px;
  }

  .heuer-about-belief__intro h2 {
    font-size:
      clamp(39px, 10.5vw, 54px);
  }

  .heuer-about-belief__text {
    max-width: none;

    margin-top: 36px;

    padding:
      30px 0
      0;

    border-left: 0;

    border-top:
      1px solid var(--heuer-line);
  }


  /* VALUES */

  .heuer-about-values {
    grid-template-columns: 1fr;
  }

  .heuer-about-value {
    min-height: 295px;

    padding:
      24px 20px
      28px;
  }

  .heuer-about-value h3 {
    padding-top: 58px;
  }


  /* CTA */

  .heuer-about-cta {
    display: block;

    margin-top:
      65px;

    padding:
      42px 20px
      46px;
  }

  .heuer-about-cta__content h2 {
    font-size:
      clamp(39px, 10.5vw, 54px);

    line-height: .98;
  }

  .heuer-about-cta__action {
    margin-top:
      30px;
  }

  .heuer-about-button {
    width: 100%;

    min-width: 0;
  }

}


/* =========================================================
   KLEINE HANDYS
========================================================= */

@media (max-width: 420px) {

  .heuer-about-story__media {
    min-height: 330px;
  }

  .heuer-about-story__media img {
    min-height: 330px;
    height: 330px;
  }

  .heuer-about-story__content,
  .heuer-about-cta {
    padding-left: 16px;
    padding-right: 16px;
  }

}


/* =========================================================
   REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .heuer-about-hero,
  .heuer-about-facts,
  .heuer-about-story,
  .heuer-about-belief,
  .heuer-about-values,
  .heuer-about-cta {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .heuer-about-story__media img,
  .heuer-about-value__line,
  .heuer-about-button,
  .heuer-about-button__arrow {
    transition: none;
  }

}