/* p-ankauf.css — Ankauf. Nur Seiten-Layout, keine neuen Farben/Fonts. */

/* 1. Dunkler Split-Hero: Kopf links, Autegro-Formular rechts.
   Formularbreite wie auf / (.sell-inquiry-slot): max 32rem.
   Bild + Scrim + Parallax kommen von .section--media (style.css);
   hier nur die Bildquelle als echtes <img> (srcset, LCP). */
.ankauf-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Handy: Bild nur im oberen Teil, darunter die Sektionsflaeche (--color-ink).
   Grund: die Sektion traegt hier das ganze Formular und ist rund 1430 px hoch.
   Ueber diese Hoehe gezogen wird das Querformat von cover stark hochskaliert
   (gemessen 1.61x) und wirkt dabei unruhig. Auf 30rem begrenzt passt das Bild
   in seiner ganzen Hoehe in die Box — inklusive des Bereichs, der ohnehin nach
   Schwarz auslaeuft (unteres Drittel der Vorlage misst 0.05-0.6 % Helligkeit).
   Der Uebergang liegt damit im schwarzen Teil des Fotos; die Maske blendet die
   letzte Kante weich aus, sonst zeichnete sich das reine Schwarz des Fotos
   gegen das leicht hellere --color-ink ab. Hochskalierung so: 1.13x.
   Zwei Klassen tief, weil [data-parallax] [data-parallax-layer] in style.css
   sonst mit gleicher Spezifitaet Hoehe und top setzt. */
@media (max-width: 47.99em) {
  /* Nachfahren-Selektor, nicht '>': das <img> steckt in einem <picture>
     (Hochformat fuers Handy) und ist damit kein direktes Kind der Sektion. */
  .ankauf-hero .ankauf-hero__img {
    /* 30rem sichtbares Band plus Ueberstand fuer die Parallax. Ohne den
       Zuschlag zoege die Parallax das Bild aus dem Band heraus. */
    height: calc(30rem + var(--parallax-overflow, 0px));
    bottom: auto;
  }

  /* Der Uebergang nach Schwarz sitzt bewusst NICHT als Maske auf dem Bild:
     das Bild wandert mit der Parallax, die Kante wanderte dann mit. Er liegt
     stattdessen im Scrim, der still steht. Unterhalb von 30rem deckt er das
     Bild vollstaendig ab — das ist die untere Haelfte der Sektion mit dem
     Formular. Erste Ebene liegt ueber der zweiten. */
  .ankauf-hero > .section__scrim {
    background:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent 22rem,
        var(--color-ink) 30rem
      ),
      linear-gradient(
        to right,
        rgba(11, 11, 12, 0.72) 0%,
        rgba(11, 11, 12, 0.5) 48%,
        rgba(11, 11, 12, 0.36) 100%
      );
  }

  /* Duenne Trennlinie zur folgenden Sektion. Noetig, seit der Hero unten nach
     --color-ink auslaeuft: eine dunkle Folgesektion hat dieselbe Flaeche, die
     Kante zwischen beiden war dadurch nicht mehr zu sehen. Auf breiteren
     Viewports traegt der Hero das Bild bis zur Unterkante und trennt sich
     von selbst — dort keine Linie.
     :not(.section--light), weil eine helle Sektion sich ohnehin absetzt; dort
     waere die Linie ueberfluessig. Betrifft aktuell die Bewertungen. */
  .ankauf-hero + .section:not(.section--light) {
    border-top: 1px solid var(--ctx-hairline);
  }
}

/* Foto ist links dunkel, rechts rot: Text braucht mehr Abdeckung als das Formular. */
.ankauf-hero > .section__scrim {
  opacity: 1;
  background: linear-gradient(
    to right,
    rgba(11, 11, 12, 0.72) 0%,
    rgba(11, 11, 12, 0.5) 48%,
    rgba(11, 11, 12, 0.36) 100%
  );
}

.ankauf-hero__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 56.25em) {
  .ankauf-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .ankauf-hero__copy {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }

  .ankauf-hero__form {
    justify-self: end;
    width: 100%;
    max-width: 32rem;
  }
}

#ankauf-formular {
  scroll-margin-top: calc(var(--nav-height) + var(--space-sm));
}

/* 2. Trust-Punkte mit eckigem Checkbox-Haken (Radius 0). */
.hero-points {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.hero-points li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ctx-ink);
}

.hero-points__icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
}

/* 2. Gemeinsame CTA-Zeile der Sektionen */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.page-actions--center {
  justify-content: center;
}

/* Ablauf: Kopf, Schritte und CTA in einem Raster.
   Der CTA steht im HTML nach den Schritten (auf dem Handy gehoert er dorthin,
   direkt hinter den Ablauf). Ab 40em holt ihn grid-template-areas wieder nach
   oben rechts neben die Headline — wie beim Bestand-Slider. Ein Link, zwei
   Positionen, kein doppeltes Markup. */
.ablauf-layout {
  display: grid;
  gap: 0;
}

.ablauf-cta {
  justify-self: stretch;
  margin-top: var(--space-lg);
  text-align: center;
}

@media (min-width: 40.01em) {
  .ablauf-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "kopf cta"
      "schritte schritte";
    column-gap: var(--space-lg);
    align-items: start;
  }

  .ablauf-layout > .section-head { grid-area: kopf; }
  .ablauf-layout > .steps { grid-area: schritte; }
  .ablauf-layout > .ablauf-cta { grid-area: cta; }

  .ablauf-cta {
    justify-self: end;
    /* Auf Höhe der Headline: um Kicker-Zeile plus deren Abstand nach unten. */
    margin-top: calc((var(--fs-label) * var(--lh-body)) + var(--space-sm));
    width: auto;
  }
}

/* 3. Ablauf: drei gleich hohe Karten. Fläche, Hairline und Invertierungs-
   Hover kommen aus .card (style.css). Hier nur Raster und Schritt-Typo —
   Nummer/Titel/Hairline laufen über --card-*-Tokens, sonst bleiben sie
   beim Hover auf der invertierten Fläche stehen. */
.steps {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  align-items: stretch;
}

@media (min-width: 56.25em) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step.card {
  height: 100%;
}

.step .card__body {
  gap: var(--space-sm);
}

.step__num {
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--card-hairline);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--card-muted);
}

.step__title {
  font-size: var(--fs-h3);
  color: var(--card-ink);
}

/* 4. Inzahlungnahme: asymmetrisches Zweispalten-Raster (60/40) */
.iz-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 56.25em) {
  .iz-grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  .iz-copy {
    padding-top: var(--space-lg);
  }
}

/* 5. FAQ: volle Containerbreite und Kopfabstand wie das Kauf-FAQ auf
   /fahrzeuge — beide Akkordeons sollen identisch sitzen. */
.faq-wrap {
  margin-top: var(--space-lg);
}

/* Bewertungs-Beleg im Ankauf-Hero, direkt unter den drei Stichpunkten.
   Zahlen und Ziel sind identisch zum Bewertungsabschnitt weiter unten —
   bei einer Aktualisierung beide Stellen anfassen. */
.hero-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  font-size: var(--fs-small);
  color: var(--ctx-body);
}

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

.hero-rating__stars svg {
  width: 1rem;
  height: 1rem;
}

.hero-rating a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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