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

.brand-intro {
  position: relative;

  width: 100%;
  min-height: 520px;

  background-color: var(--color-dark);

  background-image: url("images/brillantana-intro.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

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

  padding: 80px 24px;

  box-sizing: border-box;

  /* Goldener Abschlussstrich */
  border-bottom: 3px solid var(--color-gold);
  border-top: 3px solid var(--color-gold);

  overflow: hidden;
}


/* =========================
   INHALT
   ========================= */

.brand-intro__overlay {
  width: 100%;
  max-width: 1100px;

  display: flex;
  justify-content: center;
}


/* =========================
   TEXTFELD
   ========================= */

.brand-intro__content {
  width: 100%;
  max-width: 800px;

  padding: 36px 42px;

  background-color: rgba(24, 24, 23, 0.8);

  color: var(--color-light);

  text-align: center;

  border-radius: 4px;

  box-sizing: border-box;
}


/* =========================
   ÜBERSCHRIFT
   ========================= */

.brand-intro__title {
  margin: 0 0 26px;

  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: var(--line-height-heading);

  color: var(--color-light);

  font-weight: 700;

  text-align: center;
}


/* =========================
   FLIESSTEXT
   ========================= */

.brand-intro__content p {
  margin: 0 0 18px;

  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body);

  color: var(--color-light);
}


.brand-intro__content p:last-child {
  margin-bottom: 0;
}


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

@media (max-width: 991px) {

  .brand-intro {
    min-height: 460px;

    padding: 60px 20px;
  }


  .brand-intro__content {
    max-width: 720px;

    padding: 32px 34px;
  }


  .brand-intro__title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
  }

}


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

@media (max-width: 600px) {

  .brand-intro {
    min-height: 420px;

    padding: 45px 16px;

    border-bottom-width: 2px;
  }


  .brand-intro__content {
    padding: 26px 22px;
  }


  .brand-intro__title {
    margin-bottom: 20px;

    font-size: 1.8rem;
  }


  .brand-intro__content p {
    font-size: var(--font-size-body);
  }

}