/* ==========================================================================
   Etappe 4 – Produkte und Warteliste (#guides, Warteliste-Block #waitlist)
   Seit 12.09.2026 nur noch ein Produkt, der KI-Guide. Der Creator-Guide ist
   vorerst herausgenommen. Guide und Warteliste stehen nebeneinander, beide als
   Umriss auf der durchgehenden Fläche. Gestrichelte Kanten heißen hier wie
   überall: hier fehlt noch etwas.
   ========================================================================== */

.guides__title {
  color: var(--heading);
  font-size: var(--step-3);
  font-variation-settings: "SOFT" 100;
}

/* Links der Guide, rechts gleich die Warteliste dazu: ein Produkt, ein Weg. */
.guides__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--gutter);
  align-items: stretch;
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.guide {
  display: grid;
  grid-column: 1 / span 7;
  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__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.75rem, 1.4rem + 1.5vw, 3rem);
  font-variation-settings: "SOFT" 100;
  line-height: 1.15;
}

.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);
}

/* Warteliste */
.waitlist {
  display: grid;
  grid-column: 8 / -1;
  align-content: start;
  row-gap: var(--space-l);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-surface);
  scroll-margin-top: calc(var(--header-h) + var(--space-m));
}

.waitlist__text {
  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);
}

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

.waitlist__field {
  flex: 1 1 14rem;
}

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

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

.waitlist__input::placeholder {
  color: var(--fg-soft);
  opacity: 0.7;
}

.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 {
  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) {
  .guide,
  .waitlist {
    grid-column: 1 / -1;
  }

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