/* Nur Layout, das es ausschliesslich auf dieser Seite gibt. Karten, Buttons,
   Hero, Gutschein-Block und Info-Block kommen aus css/components/. */

/* Anker-Ziele rutschen unter die sticky Nav, wie auf Café & Karte. */
.gs-areas,
.voucher {
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

/* ============== Einlösbar für (hell) ============== */
.gs-areas {
  background-color: var(--color-off-white);
  padding-block: var(--section-py-mobile);
}

@media (min-width: 768px) {
  .gs-areas {
    padding-block: var(--section-py-desktop);
  }
}

.gs-areas__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 40rem;
  margin-bottom: var(--space-3xl);
}

.gs-areas__eyebrow {
  color: var(--color-mauve);
}

.gs-areas__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: 1.05;
  color: var(--color-midnight);
}

.gs-areas__title em {
  font-style: italic;
  color: var(--color-brand-red);
}

.gs-areas__text {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-mauve-dark);
}

/* Gleiche Kartenmechanik wie die Bereichs-Kacheln auf der Startseite,
   aber bei vier Karten bleibt es bei zwei Spalten: ein 2x2-Raster steht
   ruhiger als drei plus eine angebrochene Reihe. */
.gs-areas__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-md);
}

.gs-areas__grid .area-card {
  width: 100%;
  max-width: 22rem;
}

@media (min-width: 768px) {
  .gs-areas__grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: stretch;
  }

  /* Bei nur zwei Spalten wird jede Karte doppelt so breit wie auf der
     Startseite. Quadratisch wäre sie dann übermannshoch, deshalb flacher. */
  .gs-areas__grid .area-card {
    max-width: none;
    aspect-ratio: 4 / 3;
  }
}

/* ============== So funktioniert's (rot) ============== */
.gs-steps {
  background-color: var(--color-brand-red);
  padding-block: var(--section-py-mobile);
}

@media (min-width: 768px) {
  .gs-steps {
    padding-block: var(--section-py-desktop);
  }
}

.gs-steps__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
}

.gs-steps__eyebrow {
  color: var(--off-white-55);
}

.gs-steps__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: 1.05;
  color: var(--color-off-white);
}

.gs-steps__title em {
  font-style: italic;
  color: var(--color-baby-pink);
}

.gs-steps__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  list-style: none;
}

@media (min-width: 768px) {
  .gs-steps__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
  }
}

.gs-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--off-white-30);
}

.gs-step__num {
  font-family: var(--font-ui);
  font-size: var(--font-size-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-baby-pink);
}

.gs-step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  color: var(--color-off-white);
}

.gs-step__text {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--off-white-80);
}

/* ============== FAQ (hellrosa) ============== */
.gs-faq {
  background-color: var(--color-pink-light);
  padding-block: var(--section-py-mobile);
}

@media (min-width: 768px) {
  .gs-faq {
    padding-block: var(--section-py-desktop);
  }
}

.gs-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

/* Zweispaltig: Überschrift bleibt links stehen, während rechts die
   Fragen laufen. Bei nur vier kurzen Antworten braucht es kein Akkordeon. */
@media (min-width: 1024px) {
  .gs-faq__grid {
    grid-template-columns: 40% 1fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

.gs-faq__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.gs-faq__eyebrow {
  color: var(--color-mauve);
}

.gs-faq__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: 1.05;
  color: var(--color-midnight);
}

.gs-faq__title em {
  font-style: italic;
  color: var(--color-brand-red);
}

.gs-faq__list {
  display: flex;
  flex-direction: column;
}

.gs-faq__item {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--mauve-light-50);
}

.gs-faq__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.gs-faq__item:first-child {
  padding-top: 0;
}

.gs-faq__q {
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-midnight);
  margin-bottom: var(--space-sm);
}

.gs-faq__a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-mauve-dark);
  margin-inline-start: 0;
}

/* ============== Abschluss (baby pink) ============== */
.gs-final {
  background-color: var(--color-baby-pink);
  padding-block: var(--space-5xl);
  text-align: center;
}

.gs-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.gs-final__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.1;
  color: var(--color-midnight);
}

.gs-final__text {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--font-size-body);
  line-height: 1.8;
  color: var(--midnight-60);
  max-width: 34rem;
}