/* =====================================================================
   p-ankauf-formular.css — /ankauf-formular
   Eigenstaendige Landingpage fuer das Autegro-Ankaufswidget, Ziel von
   Anzeigen und der Social-Bio. Aufbau nach dem Vorbild
   paulmobile.de/ankauf-formular: zentriertes Intro (Headline, drei
   Nutzenpunkte, Bewertungszeile), darunter das Formular.
   Nur Layout — Farben, Fonts und Abstaende kommen aus den Tokens in
   style.css (monochrom, Radius 0).
   ===================================================================== */

/* Die Seite hat keinen Hero; der Abstand nach oben darf deshalb kleiner
   sein als das normale Sektions-Padding, damit das Formular ohne Scrollen
   beginnt. Nach unten bleibt Luft zum Footer. */
.form-page {
  padding-block: var(--space-lg) var(--space-xl);
}

/* Schmaler als der Standard-Container: das Formular liest sich als ein
   Block, nicht als volle Seitenbreite. 54rem entspricht der Breite, in der
   das Autegro-Widget seine Felder zweispaltig setzt. */
.form-page > .container {
  max-width: 54rem;
  container-type: inline-size;
}

.form-intro {
  text-align: center;
}

/* Condensed wie die uebrigen Seiten-H1, aber eine Stufe kleiner: die
   Headline ist hier Vorspann zum Formular, nicht Seitenkopf.
   Hoechstens zwei Zeilen: beide stehen als eigene, nicht umbrechende Zeile
   im Markup. Die Groesse ist zusaetzlich an die Spaltenbreite gebunden
   (cqi), damit die laengere Zeile auch auf schmalen Geraeten in einer Zeile
   bleibt — dieselbe Loesung wie auf der 404. */
.form-intro__title {
  font-family: var(--font-display);
  font-size: min(clamp(1.875rem, 4vw, 3rem), 13cqi);
  line-height: 1.1;
}

.form-intro__line {
  display: block;
  white-space: nowrap;
}

/* Nutzenpunkte in einer Zeile, solange der Platz reicht; darunter
   umbrechend. white-space: nowrap haelt Haken und Text zusammen. */
.form-checks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs) var(--space-md);
  margin: var(--space-md) 0 0;
  padding: 0;
}

.form-checks li {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  white-space: nowrap;
  font-size: var(--fs-small);
}

.form-checks svg {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ctx-ink);
}

/* Bewertungszeile — Zahlen und Ziel identisch zum Hero auf /ankauf und zum
   Bewertungsabschnitt dort. Bei einer Aktualisierung alle Stellen anfassen.
   max-width: none hebt die globale Lesebreite fuer Absaetze (65ch) auf:
   sonst ist der Absatz schmaler als der Container, steht linksbuendig darin
   und die Zeile wirkt gegenueber Headline und Stichpunkten verrutscht. */
.form-trust {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--ctx-body);
}

.form-trust__stars {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--ctx-ink);
}

.form-trust__stars svg {
  width: 1rem;
  height: 1rem;
}

.form-trust a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.form-trust a:hover,
.form-trust a:focus-visible {
  color: var(--ctx-ink);
}

/* Das Widget rendert in einer offenen Shadow-DOM und bringt eigene
   Abstaende mit; hier nur der Abstand zum Intro. */
.form-page__widget {
  margin-top: var(--space-lg);
}

@media (max-width: 47.99em) {
  .form-page {
    padding-block: var(--space-md) var(--space-lg);
  }

  /* Auf schmalen Geraeten passen zwei Nutzenpunkte nicht nebeneinander,
     ohne dass die Zeilen ungleich lang werden — deshalb untereinander,
     linksbuendig am Text ausgerichtet. */
  .form-checks {
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    margin-inline: auto;
    gap: var(--space-3xs);
  }
}