/* LP „bike“ (bike.infra-struktur.de): Ergänzungen zu style.css (Kopie aus landingpages/neu/css/style.css).
   Abschnitte wie auf der Fahrradhandel-Seite von neu (Präfix hv-, aus neu/css/hilfe.css übernommen),
   dazu Faktenblock „Auf einen Blick“ und Formular-Knopf in der FAQ (Präfix fr-). */

/* ---------- Seitenkopf ---------- */
.hv-hero .page-hero__lead + .page-hero__lead { margin-top: .75rem; }
.hv-hero .page-hero__visual { min-width: 0; }
.hv-fr-visual .video { width: 100%; }
/* Helles Standbild im schmalen Desktop-Split: Hinweis im Platzhalter braucht mehr Abdunklung */
@media (min-width: 1024px) {
  .hv-fr-hero .page-hero__grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hv-fr-visual .video--standbild .lpc-platzhalter {
    background: linear-gradient(180deg, rgba(0, 38, 80, .35) 0%, rgba(0, 38, 80, .86) 48%, rgba(0, 38, 80, .95) 100%), var(--standbild) center / cover no-repeat;
  }
}

/* ---------- Auf einen Blick ---------- */
.fr-blick-abschnitt { padding-bottom: 0; }
.fr-blick { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow); }
.fr-blick__titel { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); text-wrap: balance; }
.fr-blick__titel::before { content: ""; display: block; width: 64px; height: 6px; margin-bottom: 1rem; border-radius: 99px; background: var(--gradient); }
.fr-blick__liste { display: grid; gap: 1.25rem 2rem; margin-top: 1.5rem; }
.fr-blick__punkt dt { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 900; line-height: 1.3; }
.fr-blick__punkt dt .icon { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 10px; background: var(--accent-50); color: var(--accent-700); }
.fr-blick__punkt dd { margin: .45rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
@media (min-width: 768px) {
  .fr-blick__liste { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .fr-blick__liste { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Kundenstimmen mit Überschrift ---------- */
.hv-zitat__titel { margin-top: -.5rem; font-size: 1.1875rem; }
.hv-zitat blockquote { font-size: 1rem; }
.hv-zitat .avatar--foto { width: 56px; height: 56px; }

/* ---------- Problem → Lösung neben Animation bzw. Bild ---------- */
.hv-pl { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.hv-pl__medium { min-width: 0; }
.hv-pl__animation, .hv-pl__bild { display: block; width: 100%; height: auto; margin-inline: auto; }
/* Die Animationen von www haben einen weißen Hintergrund: per Multiplizieren mit dem Abschnitt verschmelzen,
   damit kein weißer Kasten zu sehen ist (Andrea Tissen, 2026-10-16) */
.hv-pl__animation { max-width: 560px; mix-blend-mode: multiply; }
.hv-pl__bild { max-width: 560px; }
.hv-pl__karte { overflow: hidden; border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow); }
.hv-pl__problem { padding: 1.6rem 1.6rem 1.4rem; }
.hv-pl__loesung { padding: 1.4rem 1.6rem 1.6rem; background: var(--accent-50); border-top: 1px solid #cfeae6; }
.hv-pl__karte h3 { margin-top: .45rem; }
.hv-pl__karte p:not(.tag) { margin-top: .6rem; font-size: 1rem; }
.hv-pl__problem p:not(.tag) { color: var(--muted); }
.hv-pl__loesung p:not(.tag) { color: var(--ink); }
.hv-tag--problem { color: #b3261e; }
.section--tint .hv-pl__karte { box-shadow: var(--shadow-s); }
@media (min-width: 1024px) {
  .hv-pl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .hv-pl--umgekehrt .hv-pl__medium { order: 2; }
}

/* ---------- Partner-Logos ---------- */
.hv-partner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 7vw, 5rem); }
.hv-partner__logo { width: auto; }
.hv-partner__logo--vdz { height: clamp(64px, 12vw, 96px); }
.hv-partner__logo--zeg { height: clamp(96px, 16vw, 140px); }

/* ---------- Häufige Fragen ---------- */
.fr-faq__cta { margin-top: 1.75rem; }

/* ---------- Abschluss mit Formular ---------- */
.hv-checklist { margin-top: 1.75rem; color: var(--white); font-weight: 700; line-height: 1.45; }
.hv-checklist .checklist__mark { background: var(--white); color: var(--accent-700); }
.hv-form__intro { margin-top: .5rem; color: var(--muted); font-size: .9375rem; line-height: 1.5; }