/* =============================================================================
   CONTENT.CSS — reading components for blog/ and referenzen/ ONLY.
   Loaded IN ADDITION to landing.css (never instead of it). landing.css itself
   stays untouched by this file, so the 8 existing lp/ pages carry zero risk.
   Scoped under .kv-lp, same convention as landing.css.
   ============================================================================= */

/* Article meta row (date · category) under the hero eyebrow/title. */
.kv-lp .kv-article-meta {
  display: flex; flex-wrap: wrap; gap: 0.4em 1em; align-items: center;
  font-size: 0.9rem; font-weight: 600; opacity: 0.85;
}

/* TL;DR — the one card-styled accent inside an otherwise plain reading page.
   Reuses .kv-card/.kv-grid as-is, just boxes them under a small label. */
.kv-lp .kv-tldr {
  margin: 2.5rem 0 3rem; padding: 1.75rem; border-radius: 18px;
  background: rgba(0, 184, 229, 0.05); border: 1px solid rgba(0, 184, 229, 0.18);
}
.kv-lp .kv-tldr__label {
  display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--kv-accent); margin-bottom: 1rem;
}
.kv-lp .kv-tldr .kv-grid { margin-top: 0; }
.kv-lp .kv-tldr .kv-card { box-shadow: none; padding: 1.25rem; }
.kv-lp .kv-tldr .kv-card:hover { transform: none; box-shadow: none; }
.kv-lp .kv-tldr .kv-card p { font-size: 0.95rem; margin: 0; }
.kv-lp .kv-tldr .kv-card__icon--line { margin-bottom: 0.75rem; }

/* Prose — long-form article body typography (headings/paragraphs/lists/quote). */
.kv-lp .kv-prose { max-width: 42rem; }
.kv-lp .kv-prose h2 { margin-top: 2.75rem; margin-bottom: 0.75rem; }
.kv-lp .kv-prose h3 { margin-top: 2rem; margin-bottom: 0.6rem; font-size: 1.2rem; }
.kv-lp .kv-prose p { line-height: 1.7; margin: 0 0 1.25rem; }
.kv-lp .kv-prose ul,
.kv-lp .kv-prose ol { margin: 0 0 1.25rem; padding-left: 1.4rem; line-height: 1.7; }
.kv-lp .kv-prose li { margin-bottom: 0.4rem; }
.kv-lp .kv-prose img { width: 100%; border-radius: 14px; margin: 2rem 0; }
.kv-lp .kv-prose blockquote {
  margin: 2rem 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 4px solid var(--kv-accent);
  font-size: 1.15rem; font-style: italic; color: var(--kv-darktext);
}

/* Teaser card meta (used on the overview/listing pages, e.g. blog/index.php). */
.kv-lp .kv-card--link img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 1.25rem; }
.kv-lp .kv-card__date { display: block; font-size: 0.85rem; font-weight: 600; opacity: 0.65; margin-bottom: 0.4rem; }

/* Teaser KPI highlight badge (referenzen overview only, e.g. "−22 % Leerfahrten"). */
.kv-lp .kv-card__kpi { display: block; font-size: 1.15rem; font-weight: 700; color: var(--kv-accent); margin-bottom: 0.5rem; }

/* Tag-Filterleiste (blog overview only) — Ghost-Pills, angelehnt an .kv-btn--ghost,
   aber kompakter/rund. Aktiver Zustand gefüllt statt outline. Reines CSS/JS,
   kein Reload — Karten werden per data-kv-tags im JS ein-/ausgeblendet. */
.kv-lp .kv-filterbar {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 0 0 2.5rem;
}
.kv-lp .kv-filterbar__pill {
  display: inline-flex; align-items: center;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--kv-black); background: transparent;
  font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--kv-black);
  cursor: pointer; line-height: 1.2;
  transition: background var(--kv-transition) var(--kv-ease),
              color var(--kv-transition) var(--kv-ease),
              border-color var(--kv-transition) var(--kv-ease);
}
.kv-lp .kv-filterbar__pill:hover { background: rgba(0, 0, 0, 0.06); }
.kv-lp .kv-filterbar__pill.is-active {
  background: var(--kv-accent); border-color: var(--kv-accent); color: var(--kv-white);
}
.kv-lp .kv-filterbar__pill.is-active:hover { background: var(--kv-accent-hover); border-color: var(--kv-accent-hover); }
.kv-lp .kv-card--link.is-filtered-out { display: none; }