/* ==========================================================================
   Etappe 4 – Produkte und Warteliste (#guides, Warteliste-Block #waitlist)
   Die Rangfolge steckt im Bau, nicht in Etiketten: Die Hauptkarte ist breiter
   und liegt auf Papier, die zweite bleibt schmal und auf Sand. Gestrichelte
   Kanten heißen hier wie überall: hier fehlt noch etwas.
   ========================================================================== */

.guides__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-s);
  align-items: baseline;
}

.guides__title {
  grid-column: 1 / span 5;
  color: var(--heading);
  font-size: var(--step-3);
  font-variation-settings: "SOFT" 100;
}

.guides__note {
  grid-column: 7 / span 5;
  max-width: 44ch;
  color: var(--fg-soft);
}

.guides__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--gutter);
  align-items: start;
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.guide {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
}

.guide--main {
  grid-column: 1 / span 7;
  background-color: var(--paper);
}

.guide--second {
  grid-column: 8 / -1;
}

.guide__badge {
  justify-self: start;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-touch);
  color: var(--fg-soft);
  font-size: var(--step--1);
}

.guide__name {
  color: var(--heading);
  font-size: clamp(1.5rem, 1.29rem + 0.93vw, 2.25rem);
  font-variation-settings: "SOFT" 100;
  line-height: 1.2;
}

.guide__meta {
  margin-top: calc(var(--space-s) * -0.6);
  color: var(--fg-soft);
  font-size: var(--step--1);
}

.guide__text {
  max-width: 46ch;
}

.guide__facts {
  display: grid;
  gap: 0.55rem;
  margin: var(--space-2xs) 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}

.guide__fact {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-s);
}

.guide__facts dt {
  color: var(--fg-soft);
  font-size: var(--step--1);
}

.guide__facts dd {
  margin: 0;
  max-width: 38ch;
}

.guide__offer {
  max-width: 42ch;
  color: var(--fg-soft);
}

.guide .btn {
  justify-self: start;
  margin-top: var(--space-2xs);
}

/* Warteliste */
.waitlist {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-l);
  margin-top: var(--gutter);
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  border-radius: var(--radius-surface);
  background-color: var(--paper);
  scroll-margin-top: calc(var(--header-h) + var(--space-m));
}

.waitlist__text {
  grid-column: 1 / span 5;
  max-width: 40ch;
}

.waitlist__title {
  color: var(--heading);
  font-size: var(--step-2);
  font-variation-settings: "SOFT" 100;
  margin-bottom: var(--space-2xs);
}

.waitlist__form {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  grid-column: 7 / -1;
}

.waitlist__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-s);
}

.waitlist__label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--fg-soft);
  font-size: var(--step--1);
}

.waitlist__input {
  width: min(20rem, 100%);
  min-height: 3rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-touch);
  background-color: var(--sand);
  color: var(--fg);
}

.waitlist__input::placeholder {
  color: var(--ink-soft);
}

.waitlist__help {
  max-width: 46ch;
  color: var(--fg-soft);
  font-size: var(--step--1);
}

.waitlist__status:not(:empty) {
  max-width: 46ch;
  padding-left: 0.7rem;
  border-left: 2px solid var(--brass);
}

.waitlist__status[data-state="pending"] {
  border-left-style: dashed;
  border-left-color: var(--line-strong);
}

.waitlist__placeholder {
  grid-column: 1 / -1;
  padding-top: var(--space-s);
  border-top: 1px dashed var(--line-strong);
  color: var(--fg-soft);
  font-size: var(--step--1);
}

@media (max-width: 56rem) {
  .guides__head,
  .guides__grid,
  .waitlist {
    grid-template-columns: minmax(0, 1fr);
  }

  .guides__title,
  .guides__note,
  .guide--main,
  .guide--second,
  .waitlist__text,
  .waitlist__form {
    grid-column: 1;
  }

  .waitlist__input {
    width: 100%;
  }

  .waitlist__row .btn {
    width: 100%;
  }
}