/* p-index.css — Startseite. Nur Seiten-Layout, keine neuen Farben/Fonts. */

/* 1. Hero: ein einziges Bild; Kopf und CTAs liegen darauf. Dunkler Verlauf
   sichert den Kontrast der weißen Typo über jedem Bildmotiv. */
.hero {
  isolation: isolate;
}

.hero__media {
  position: relative;
  display: grid;
  min-height: clamp(34rem, 82vh, 54rem);
  background: var(--color-ink);
  /* Das Hero-Bild bekommt fuer die Parallax Ueberstand nach oben und unten —
     der muss in der Sektion bleiben, sonst waechst die Seite. */
  overflow: clip;
}

/* Absolut gesetzt war bisher nur das <img> — das umschliessende <picture>
   blieb im Fluss und wurde damit zum Grid-Item von .hero__media. Es belegte
   eine eigene erste Zeile von 52 px und schob das Overlay nach unten
   (gemessen: grid-template-rows 52px / 686px bei 738 px Sektionshoehe).
   Die obersten 52 px des Bildes lagen dadurch OHNE Verlauf frei, und genau
   dort ist die Vorlage am hellsten (Nebel, Luminanz 224-227 von 255) — als
   harter heller Streifen direkt unter dem schwarzen Header.
   Auf /ankauf und /ueber-uns tritt das nicht auf: dort ist die Sektion
   display:block, ein leeres <picture> faellt auf 0 zusammen. Nur hier ist
   sie ein Grid. Deshalb liegen jetzt beide, Wrapper und Bild, ueber der
   ganzen Flaeche. */
.hero__media > picture {
  position: absolute;
  inset: 0;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: relative;
  display: grid;
  align-content: center;
  width: 100%;
  padding-block: clamp(2.5rem, 7vw, 5rem);
  background: linear-gradient(
    to top,
    rgba(11, 11, 12, 0.8) 0%,
    rgba(11, 11, 12, 0.6) 50%,
    rgba(11, 11, 12, 0.3) 100%
  );
  color: var(--color-body-dark);
}

.hero__overlay .section-head__kicker {
  color: var(--color-paper);
}

.hero__overlay .hero__title {
  color: var(--color-paper);
  font-size: clamp(2.75rem, 7vw, 6rem);
}

.hero__title-line {
  white-space: nowrap;
}

.hero__overlay .section-head__sub {
  color: var(--color-body-dark);
}

/* Mobil: 82vh bläht den Hero auf (vh zählt auf iOS oft die Browserchrome
   mit). Die Höhe folgt dem Inhalt; Abstand oben und unten gleich. */
@media (max-width: 47.9375em) {
  .hero__media {
    min-height: 0;
  }

  .hero__overlay {
    align-content: start;
    padding-block: var(--space-xl);
  }

  /* „Der Autohändler" bleibt eine Zeile: 2.75rem ist auf ~360 px zu breit. */
  .hero__overlay .hero__title {
    font-size: min(2.75rem, 11.2vw);
  }

  /* Zusaetzliche Abdunklung am oberen Rand. Der Hochformat-Zuschnitt trifft
     genau den hellen Teil der Vorlage — Nebel und Schneehang, beide nahe 90 %
     Helligkeit —, waehrend der Grundverlauf oben am schwaechsten ist (0.3).
     Direkt unter dem schwarzen Header stand dadurch ein heller Streifen.
     Auf dem Desktop faellt das nicht auf: das Querformat zeigt links dunklen
     Fels, die helle Flaeche ist dort aufgebrochen — deshalb nur hier.
     Erste Ebene liegt ueber der zweiten. */
  .hero__overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(11, 11, 12, 0.72) 0,
        rgba(11, 11, 12, 0) 12rem
      ),
      linear-gradient(
        to top,
        rgba(11, 11, 12, 0.8) 0%,
        rgba(11, 11, 12, 0.6) 50%,
        rgba(11, 11, 12, 0.3) 100%
      );
  }
}

/* Suchfeld sitzt unter den CTAs und endet auf deren rechter Kante */
.hero__search {
  margin-top: var(--space-md);
  max-width: 27rem;
}

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

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

/* 3. Abstand Kopf → Sektionsinhalt */
.home-block {
  margin-top: var(--space-xl);
}

/* 4. Bestand-Slider: Kopfzeile mit CTA rechts neben der Headline */
.home-slider-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-lg);
  align-items: start;
}

.home-slider-intro .btn {
  /* Kicker-Höhe + Abstand, damit der Button auf der Headline-Zeile sitzt */
  margin-top: calc((var(--fs-label) * var(--lh-body)) + var(--space-sm));
  width: auto;
}

@media (max-width: 40em) {
  .home-slider-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-slider-intro .btn {
    margin-top: var(--space-md);
    width: 100%;
  }
}

/* 5. Autegro-Einsatzpunkte: Bestand-Slider und Marken-Karten */
.home-slider-slot,
.home-brands-slot {
  margin-top: var(--space-lg);
}

/* Marken-Sektion: nutzt die gemeinsame Bild-Sektion (.section--media) aus
   style.css — Parallax, Clipping und Textfarben kommen von dort. Hier steht
   nur, WELCHES Bild es ist und wie stark der Scrim sein muss (die Marken-Karten
   brauchen mehr Abdunklung als der Standard). */
.home-brands > .section__bg {
  background-image: image-set(url("/images/marken-bg-1920.webp") 1x, url("/images/marken-bg-3200.webp") 2x);
}

/* Handy: Hochformat-Zuschnitt (1:2) fuer die dezente Parallax — hier per
   image-set statt <picture>, weil die Flaeche ein Hintergrundbild ist. */
@media (max-width: 47.99em) {
  .home-brands > .section__bg {
    background-image: image-set(
      url("/images/marken-bg-portrait-720.webp") 1x,
      url("/images/marken-bg-portrait-1080.webp") 2x,
      url("/images/marken-bg-portrait-1440.webp") 3x
    );
  }
}

.home-brands > .section__scrim {
  opacity: 0.74;
}

/* 5. Verkauf-Teaser: Text links, Ankauf-Formular rechts */
.sell-grid {
  display: grid;
  gap: var(--space-lg);
}

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

  /* Text bleibt stehen, während das höhere Formular durchläuft */
  .sell-copy {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }

  .sell-inquiry-slot {
    justify-self: end;
    width: 100%;
    max-width: 32rem;
  }
}

/* 5. Über-uns-Teaser: asymmetrisches Zweispalten-Raster */
.about-grid {
  display: grid;
  gap: var(--space-lg);
}

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

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

/* 7. Kontakt & Anfahrt: breite Formularspalte links, schmales Aside rechts
   (Adresse, Direktkontakt, Öffnungszeiten, Karte untereinander). Der Kopf der
   Sektion steht über dem Grid und läuft über die volle Containerbreite. */
.contact-grid {
  display: grid;
  gap: var(--space-xl);
}

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

  /* Greift nur, wenn das Formular kürzer als das Aside bleibt — sonst füllt es
     die Gridzeile und der Sticky-Bereich ist null. */
  .contact-form-col {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-md));
  }
}

.contact-aside .contact-map {
  margin-top: var(--space-md);
}

.contact-map iframe,
.contact-map .cc-embed-ph {
  width: 100%;
  min-height: 20rem;
}

.contact-map iframe {
  display: block;
  border: 0;
}