/* =========================================================
   ABOS UND PREISE
   Nur seitenbezogene Styles.
   Header, Footer, Offcanvas, Variablen und Basisstyles
   kommen aus shared.css.
========================================================= */

.preise-page {
  background: #fff;
}


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

.preise-hero {
  position: relative;
  min-height: 312px;

  display: grid;
  place-items: center;

  overflow: hidden;

  color: var(--white);

  background:
    url("../img/hero.jpg")
    center 36% / cover no-repeat;
}

.preise-hero__shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(49, 34, 22, .50),
      rgba(95, 67, 42, .73)
    );
}

.preise-hero__content {
  position: relative;
  z-index: 2;

  width: min(100%, 560px);

  padding:
    98px 20px
    42px;

  text-align: center;
}

.preise-hero__eyebrow {
  display: block;

  margin-bottom: 12px;

  font-family: var(--display);

  font-size: .94rem;
  font-weight: 500;

  letter-spacing: .12em;

  text-transform: uppercase;
}

.preise-hero h1 {
  margin: 0;

  font-family: var(--display);

  font-size:
    clamp(
      2.15rem,
      7.4vw,
      3.4rem
    );

  font-weight: 600;

  line-height: 1.04;
}


/* =========================================================
   PREISE
========================================================= */

.preise-section {
  padding:
    38px 16px
    48px;

  background: #fff;
}

.preise-inner {
  width: min(100%, 760px);

  margin: 0 auto;
}

.preise-grid {
  display: grid;

  gap: 8px;
}

.preise-grid--two {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.preise-grid--spaced {
  margin-top: 32px;
}


/* =========================================================
   CARDS
========================================================= */

.preis-card {
  min-height: 168px;

  display: flex;
  flex-direction: column;

  justify-content: flex-start;

  padding:
    18px 12px
    15px;

  border-radius: 7px;

  text-align: center;

  font-family: var(--display);
}

.preis-card--wide {
  margin-top: 8px;
}

.preis-card h2 {
  margin:
    0 0
    10px;

  font-size:
    clamp(
      1.5rem,
      5.5vw,
      2rem
    );

  font-weight: 600;

  line-height: 1.02;
}

.preis-card p {
  margin: 0;

  font-size: .91rem;

  line-height: 1.14;
}

.preis-card__price {
  margin-top: auto;

  padding-top: 14px;

  font-size: 1.1rem;

  font-weight: 600;
}

.preis-card__price--orange {
  color: #ff9e31;
}


/* Farben */

.preis-card--light {
  background: #fff0d4;
}

.preis-card--sand {
  background: #dfbd8b;
}

.preis-card--orange {
  background: #ffb23f;
}

.preis-card--brown {
  color: #fff;

  background: #715b42;
}


/* =========================================================
   ABO RATES
========================================================= */

.preis-card__rates {
  display: flex;

  flex-direction: column;

  margin-top: auto;

  padding-top: 12px;
}

.preis-card__rates strong {
  font-size: 1.12rem;

  font-weight: 600;
}

.preis-card__rates span {
  margin-bottom: 7px;

  font-size: .78rem;
}

.preis-card__rates--inline {
  display: grid;

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

  gap: 15px;

  margin-top: 14px;
}

.preis-card__rates--inline div {
  display: flex;

  flex-direction: column;
}

.preis-card__spacer {
  margin-top: auto !important;
  margin-bottom: 22px !important;
}


/* =========================================================
   SPECIFIC HEIGHTS
========================================================= */

.preis-card--sand {
  min-height: 206px;
}

.preis-card--orange {
  min-height: 170px;
}

.preis-card--brown {
  min-height: 280px;
}

.preis-card--wide.preis-card--brown {
  min-height: 165px;
}

.preis-card--wide.preis-card--sand {
  min-height: 140px;
}


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

@media (min-width: 760px) {

  .preise-hero {
    min-height: 520px;
  }

  .preise-hero__content {
    width: min(100%, 760px);

    padding-top: 120px;
  }

  .preise-section {
    padding:
      65px 30px
      80px;
  }

  .preise-inner {
    width: min(100%, 980px);
  }

  .preise-grid {
    gap: 18px;
  }

  .preise-grid--spaced {
    margin-top: 42px;
  }

  .preis-card {
    padding:
      24px 20px
      20px;
  }

  .preis-card p {
    font-size: 1rem;
  }

  .preis-card__rates span {
    font-size: .85rem;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1100px) {

  .preise-hero {
    min-height: 620px;
  }

  .preise-hero h1 {
    font-size: 4rem;
  }

  .preise-inner {
    width: min(100%, 1100px);
  }

  .preise-grid--two {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .preis-card h2 {
    font-size: 2.1rem;
  }

  .preis-card p {
    font-size: 1.08rem;
  }

}