/* =============================================================================
   SUCCESS STORY — Zusatzkomponenten zum kiventro-Design-System (landing.css).
   Lädt NACH landing.css. Alles unter .kv-lp gescoped, teal-Theme-kompatibel.
   Neu ggü. den Landing Pages: Kundenzitat, Kunden-Faktenbox, Tech-Chips,
   Logo-Leiste. Hero / Kennzahlen-Box (Count-up) / Karten / Timeline / CTA
   kommen unverändert aus landing.css.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   Engere Section-Abstände für Story-Seiten — viele kurze Textabschnitte
   hintereinander wirken mit dem vollen LP-Wert (--kv-section-y) zu weitläufig.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-section--story { padding-block: clamp(1.75rem, 4vw, 3.5rem); }

/* ----------------------------------------------------------------------------
   Kundenzitat / Testimonial
   ---------------------------------------------------------------------------- */
.kv-lp .kv-quote { max-width: 54rem; margin: 3rem 0 0; }
.kv-lp .kv-quote blockquote {
  margin: 0; position: relative;
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.4; font-weight: 600;
  letter-spacing: -0.01em; color: var(--kv-darktext);
}
.kv-lp .kv-quote blockquote::before {
  content: "„"; color: var(--kv-accent);
  font-size: 1.2em; line-height: 0; vertical-align: -0.35em; margin-right: 0.05em;
}
.kv-lp .kv-quote figcaption { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.kv-lp .kv-quote__avatar {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex: none;
}
.kv-lp .kv-quote__who   { font-weight: 700; line-height: 1.3; }
.kv-lp .kv-quote__role  { display: block; color: #666; font-size: 0.95rem; font-weight: 400; }
/* Auf dunklem Abschnitt (kv-section--dark) invertieren */
.kv-lp .kv-section--dark .kv-quote blockquote { color: var(--kv-white); }
.kv-lp .kv-section--dark .kv-quote__role { color: rgba(255,255,255,0.7); }

/* ----------------------------------------------------------------------------
   Kunden-Faktenbox — Logo + Eckdaten (Branche, Größe, Standort …)
   ---------------------------------------------------------------------------- */
.kv-lp .kv-customer {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: center;
  grid-template-columns: 1fr;
  background: var(--kv-white); border: 1px solid #e7e4db; border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.25rem); margin-top: 2.5rem;
}
@media (min-width: 720px) {
  .kv-lp .kv-customer { grid-template-columns: auto 1fr; }
  /* No logo (no <img>, FBS marks it with this modifier) -> facts list gets the
     full width instead of staying squeezed into the "auto" logo column. */
  .kv-lp .kv-customer--no-logo { grid-template-columns: 1fr; }
}
/* .kv-hero--media is display:flex (row) for the text/box side-by-side layout
   on tablet+. Below 720px that flex-row placed the Kunden-Faktenbox beside
   the hero text instead of stacking it below — force a column below 720px. */
@media (max-width: 719.98px) {
  .kv-lp .kv-hero--media { flex-direction: column; align-items: stretch; }
  .kv-lp .kv-customer--overlay { margin-top: 2rem; margin-inline: var(--kv-gutter); }
}
/* ----------------------------------------------------------------------------
   Referenzen-only mobile hero: on desktop the hero photo has room to stay
   visible beside the (short, single-claim) text; on story pages the stacked
   mobile text runs 5-8 lines, so the full-height dark scrim from
   .kv-hero--media::before ends up covering almost the entire photo. Fix:
   scoped via :has(.kv-customer) (unique to referenzen hero markup, same
   trick as the h1 max-width override above) — show the photo as a plain,
   uncropped top band and give the text below its own solid background
   instead of tinting the whole (now tall) section for overlay-text.
   No HTML/image changes: still the section's own inline background-image.

   First attempt used background-size:cover + a mask hiding everything below
   a fixed band height — WRONG, because `cover` sizes against the element's
   OWN box, which is still the full tall (stacked-text) section, not the
   visible band. That blew the photo up to cover ~900px of height and only
   a tiny, heavily zoomed sliver showed through the "visible" top slice.
   Fix: background-size:100% auto (fill width, height follows the image's
   own aspect ratio, no crop/zoom at all) + no-repeat. All 3 hero photos are
   ~16:9 (2560×1440 / 2562×1440), so the rendered band height is
   ~100vw×9/16 — --kv-hero-img-band mirrors that formula so padding/badge
   line up with where the image actually ends. Below that, no more
   background-image pixels exist to show, so the section's own
   background-color (var(--kv-beige), from the base .kv-hero rule) shows
   through — no mask layer needed at all.
   ---------------------------------------------------------------------------- */
@media (max-width: 719.98px) {
  .kv-lp .kv-hero--media:has(.kv-customer) {
    --kv-hero-img-band: calc(100vw * 9 / 16);
    min-height: 0;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    padding-block: calc(var(--kv-hero-img-band) + 1.5rem) clamp(2rem, 6vw, 3rem);
    color: var(--kv-darktext);
  }
  .kv-lp .kv-hero--media:has(.kv-customer)::before {
    content: none;
  }
  .kv-lp .kv-hero--media:has(.kv-customer) h1,
  .kv-lp .kv-hero--media:has(.kv-customer) .kv-hero__lead { color: var(--kv-darktext); }
  /* AI-disclosure pill (landing.css) is bottom-left of the whole section —
     with the section no longer fully covered by the photo, "bottom" would
     land it in the text area. Re-anchor into the visible image band. */
  .kv-lp .kv-hero--media:has(.kv-customer).kv-hero--ai-generated::after,
  .kv-lp .kv-hero--media:has(.kv-customer).kv-hero--ai-edited::after {
    top: calc(var(--kv-hero-img-band) - 2.75rem);
    bottom: auto;
  }
}
.kv-lp .kv-customer__logo { max-height: 3rem; max-width: 12rem; width: auto; height: auto; }
.kv-lp .kv-customer__facts {
  display: grid; gap: 0.85rem 2rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
/* 2 columns × minmax(9rem, …) + gap ≈ 320px minimum — doesn't fit next to the
   card's own padding on a phone, so the grid overflows the card to the
   right regardless of the card's own margin. Force one column below the
   same breakpoint .kv-hero--media/.kv-customer--overlay already use above —
   must come AFTER the base rule (same specificity, source order decides). */
@media (max-width: 719.98px) {
  .kv-lp .kv-customer__facts { grid-template-columns: 1fr; }
}
.kv-lp .kv-customer__fact dt {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: #888;
}
.kv-lp .kv-customer__fact dd { margin: 0.2rem 0 0; font-weight: 600; color: var(--kv-darktext); }

/* ----------------------------------------------------------------------------
   Tech-/Leistungs-Chips
   ---------------------------------------------------------------------------- */
.kv-lp .kv-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.kv-lp .kv-chips li {
  background: rgba(1,112,135,0.08); color: var(--kv-teal);
  border: 1px solid rgba(1,112,135,0.18); border-radius: 999px;
  padding: 0.4rem 0.9rem; font-size: 0.9rem; font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Logo-Leiste (optional, z. B. „vertrauen auf kiventro") — dezente Graustufen
   ---------------------------------------------------------------------------- */
.kv-lp .kv-logostrip { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2rem; }
.kv-lp .kv-logostrip img { max-height: 2.25rem; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity var(--kv-transition) var(--kv-ease); }
.kv-lp .kv-logostrip img:hover { opacity: 1; filter: none; }