/* =============================================================================
   KIVENTRO — LANDING-PAGE STYLESHEET  (landing.css)
   =============================================================================
   Loaded by every landing page, in BOTH contexts:
     • Production: the WP theme is already loaded; this adds the landing layout
       + components. Everything is scoped under `.kv-lp` so it can't collide
       with the theme's global CSS.
     • Local preview: loaded alongside kiventro-base.css (which supplies the
       Konnect @font-face + global base that the theme would otherwise provide).

   Self-contained on purpose: it declares the tokens it needs, so in production
   — where kiventro-base.css is NOT loaded — the variables still resolve.
   Font family "Konnect" is provided by the theme (prod) or base.css (preview).
   ============================================================================= */

/* ----------------------------------------------------------------------------
   Tokens (mirror of the brand set; kept here so production has them)
   ---------------------------------------------------------------------------- */
.kv-lp {
  --kv-accent:        #00b8e5;
  --kv-accent-hover:  #00abd8;  /* real brand button-hover: a slight darken of the cyan.
                                   (The child theme's `--accent-hover:#e54100` orange is a
                                   dead token — defined but used nowhere on the live site.) */
  --kv-dark:          #303133;
  --kv-darktext:      #141618;
  --kv-black:         #000000;
  --kv-border-dark:   #707070;
  --kv-beige:         #f6f4ed;
  --kv-teal:          #017087;  /* brand "darkblue" / dark teal */
  --kv-white:         #ffffff;

  --kv-font:          'Konnect', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --kv-container:     1296px;
  --kv-container-wide:1580px;
  --kv-gutter:        clamp(1.25rem, 4vw, 3rem);

  --kv-radius:        20px;
  --kv-radius-field:  25px;

  --kv-ease:          cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --kv-transition:    400ms;

  /* Section rhythm */
  --kv-section-y:     clamp(3rem, 8vw, 7rem);
}

/* ----------------------------------------------------------------------------
   Scoped reset — applies only inside .kv-lp, so the theme is untouched
   ---------------------------------------------------------------------------- */
.kv-lp,
.kv-lp *,
.kv-lp *::before,
.kv-lp *::after { box-sizing: border-box; }

.kv-lp {
  font-family: var(--kv-font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--kv-darktext);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.kv-lp img,
.kv-lp svg,
.kv-lp video { max-width: 100%; height: auto; display: block; }

.kv-lp h1, .kv-lp h2, .kv-lp h3, .kv-lp h4 {
  font-family: var(--kv-font);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 0.4em;
}
.kv-lp h1 { font-size: clamp(2rem,  5vw, 2.5rem); }   /* ~32 → 40px */
.kv-lp h2 { font-size: clamp(1.6rem, 4vw, 2.125rem); }/* ~26 → 34px */
.kv-lp h3 { font-size: clamp(1.375rem, 3vw, 1.625rem); }
.kv-lp h4 { font-size: 1.25rem; }
.kv-lp p  { margin: 0 0 1rem; }
.kv-lp a  { color: var(--kv-accent); text-decoration: none; transition: color var(--kv-transition) var(--kv-ease); }
.kv-lp a:hover { color: var(--kv-accent-hover); }
.kv-lp strong, .kv-lp b { font-weight: 800; }

/* Keyboard focus visibility (the base file lacked this) */
.kv-lp :is(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--kv-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Layout — container + simple responsive grid
   ---------------------------------------------------------------------------- */
.kv-lp .kv-container {
  width: 100%;
  max-width: var(--kv-container);
  margin-inline: auto;
  padding-inline: var(--kv-gutter);
}
.kv-lp .kv-container--wide { max-width: var(--kv-container-wide); }

.kv-lp .kv-section { padding-block: var(--kv-section-y); }
/* Two adjacent light (non-dark, non-tinted) sections would otherwise double
   their vertical padding into one oversized gap — collapse the second's top. */
.kv-lp .kv-section:not(.kv-section--dark):not(.kv-section--beige)
     + .kv-section:not(.kv-section--dark):not(.kv-section--beige) { padding-top: 0; }
.kv-lp .kv-section--beige { background: var(--kv-beige); }
.kv-lp .kv-section--dark  { background: var(--kv-dark); color: var(--kv-white); }
.kv-lp .kv-section--dark :is(h1,h2,h3,h4) { color: var(--kv-white); }

/* Auto-fit grid: drop a number of cards in, they wrap responsively */
.kv-lp .kv-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.kv-lp .kv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* 3-card row: 1 → 3 columns (skip the 2-col stage; 3 cards in 2 cols leaves an
   ugly 2+1 orphan on tablet/large phones). */
.kv-lp .kv-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .kv-lp .kv-grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* Fixed 1 → 2 → 4 columns (balanced 4-across / 2×2) */
.kv-lp .kv-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .kv-lp .kv-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kv-lp .kv-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Fixed 2-up grid (stays 2×2 for four cards on desktop, 1 column on mobile) */
.kv-lp .kv-grid--2col { grid-template-columns: 1fr; }
@media (min-width: 720px) { .kv-lp .kv-grid--2col { grid-template-columns: repeat(2, 1fr); } }

/* Generic two-column split (text / media) */
.kv-lp .kv-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .kv-lp .kv-split { grid-template-columns: 1fr 1fr; } }

/* Spacing utilities */
.kv-lp .kv-center   { text-align: center; }
.kv-lp .kv-measure  { max-width: 42rem; }
.kv-lp .kv-intro    { max-width: 46rem; margin: 0; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.55; }
.kv-lp .kv-mx-auto  { margin-inline: auto; }
.kv-lp .kv-mt-0 { margin-top: 0; } .kv-lp .kv-mb-0 { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------- */
.kv-lp .kv-hero {
  padding-block: clamp(4rem, 10vw, 9rem);
  background-color: var(--kv-beige);   /* longhand: don't reset background-size/position */
}
.kv-lp .kv-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kv-accent);
  margin-bottom: 1rem;
}
.kv-lp .kv-hero h1 { max-width: 16ch; }
/* Blog-Artikel haben längere, beschreibende Titel als LP-Claims — das schmale
   16ch-Maß erzeugt dort unschöne Zeilenumbrüche. .kv-article-meta kommt nur
   in Blog-Hero-Sections vor, daher hier gezielt breiter. */
.kv-lp .kv-hero:has(.kv-article-meta) h1 { max-width: 32ch; }
/* Referenzen/Success-Stories haben ebenfalls ganze Aussage-Sätze statt kurzer
   LP-Claims als Headline — gleiche Begründung wie oben. .kv-customer kommt
   nur im Referenzen-Hero vor, daher hier gezielt breiter. */
.kv-lp .kv-hero:has(.kv-customer) h1 { max-width: 28ch; }
.kv-lp .kv-hero__lead { font-size: clamp(1.1rem, 2.2vw, 1.375rem); line-height: 1.575; max-width: 46ch; }
.kv-lp .kv-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
/* Muted second part of a headline (e.g. "Name" + accent "Rolle") */
.kv-lp .kv-heading__accent { color: var(--kv-accent); }

/* Hero with a full-bleed background image: dark teal-tinted overlay keeps the
   left-aligned headline legible; text flips to white. Set the image inline:
   <section class="kv-hero kv-hero--media" style="background-image:url(...)"> */
.kv-lp .kv-hero--media {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 65vh, 44rem);
  background-size: cover;
  background-position: center;
  color: var(--kv-white);
}
.kv-lp .kv-hero--media::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,33,40,0.82) 0%, rgba(0,33,40,0.55) 55%, rgba(0,33,40,0.25) 100%);
}
.kv-lp .kv-hero--media > .kv-container { position: relative; z-index: 1; }
.kv-lp .kv-hero--media h1,
.kv-lp .kv-hero--media .kv-hero__lead { color: var(--kv-white); }

/* ----------------------------------------------------------------------------
   Noise-Hero — eigenständig nachgebauter Uncode "Animated Background Gradient"
   (Simplex-Noise auf einem winzigen, per CSS hochskalierten Canvas). Keine
   Abhängigkeit von Uncodes eigenen Assets/Theme-Lizenz.
   Opt-in pro Seite: Klasse .kv-hero--noise + data-noise-1/-2/-speed/-size auf
   dem Hero-Element, ein <canvas class="kv-noise-canvas"> als Kind, plus
   <script src="../shared/kv-noise-bg.js"></script> irgendwo in der body.html
   (das Skript initialisiert automatisch jedes .kv-hero--noise-Element).
   Erstverwendung + Herleitung: lp/newsletter-abmelden/, Exkurs zu /datenschutz/.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-hero--noise {
  position: relative; overflow: hidden; background: #04181c; color: var(--kv-white);
  background-size: cover; background-position: center;
}
/* Scrim UNTER dem Canvas — hält Text lesbar, falls per background-image ein Foto
   hinter dem Noise-Effekt sitzt (siehe blog-Übersichts-Hero). rgba(4,24,28,…)
   ist bewusst identisch zu #04181c gewählt: ohne Foto (reiner Farbverlauf,
   z.B. newsletter-abmelden) ist der Scrim optisch nicht von der Fläche zu
   unterscheiden, ändert dort also nichts sichtbar. */
.kv-lp .kv-hero--noise::before { content: ""; position: absolute; inset: 0; background: rgba(4,24,28,0.55); }
.kv-lp .kv-hero--noise .kv-noise-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kv-lp .kv-hero--noise > .kv-container { position: relative; z-index: 1; }
.kv-lp .kv-hero--noise h1,
.kv-lp .kv-hero--noise .kv-hero__lead { color: var(--kv-white); }

/* ----------------------------------------------------------------------------
   KI-Bild-Hinweis (EU-KI-Verordnung Art. 50) — On-Page-Ergänzung zum
   eingebrannten EU-Icon in der Bilddatei selbst (siehe tools/eu-ai-stamp/).
   Das eingebrannte Icon sitzt unten RECHTS im Bild, überlebt aber wegen
   background-size:cover nicht jeden Viewport-Zuschnitt (croppt je nach
   Breite/Höhe mal oben/unten, mal links/rechts weg). Diese Pille ist
   bewusst unten LINKS (statt rechts), damit sie sich im seltenen Fall,
   dass das eingebrannte Icon doch mit sichtbar ist, nicht überlappt.
   Pille selbst ist viewport-verankert (::after auf der Hero-Box), croppt
   also nie mit weg — ruhig bei 50% Deckkraft, voll lesbar bei
   Hover/Fokus/Tap auf das Hero-Bild.
   Opt-in pro Seite, auf dasselbe Element wie .kv-hero--media/.kv-hero--noise:
     .kv-hero--ai-generated  -> Bild komplett KI-generiert
     .kv-hero--ai-edited     -> echtes Foto, KI-bearbeitet
   Kein Opt-in -> kein Badge (z.B. echte, unbearbeitete Fotos).
   ---------------------------------------------------------------------------- */
.kv-lp .kv-hero--ai-generated::after,
.kv-lp .kv-hero--ai-edited::after {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem 0.4rem 1.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--kv-white);
  background: rgba(0, 33, 40, 0.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/><path d='M20 2v4'/><path d='M22 4h-4'/><circle cx='4' cy='20' r='2'/></svg>") no-repeat 0.7rem center / 12px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0.3;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.kv-lp .kv-hero--ai-generated::after { content: "KI-generiertes Bild"; }
.kv-lp .kv-hero--ai-edited::after    { content: "KI-bearbeitetes Bild"; }
.kv-lp .kv-hero--ai-generated:hover::after,
.kv-lp .kv-hero--ai-generated:focus-within::after,
.kv-lp .kv-hero--ai-generated:active::after,
.kv-lp .kv-hero--ai-edited:hover::after,
.kv-lp .kv-hero--ai-edited:focus-within::after,
.kv-lp .kv-hero--ai-edited:active::after {
  opacity: 1;
}
@media (max-width: 640px) {
  .kv-lp .kv-hero--ai-generated::after,
  .kv-lp .kv-hero--ai-edited::after { bottom: 0.75rem; left: 0.75rem; font-size: 0.66rem; }
}

/* ----------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------------- */
.kv-lp .kv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--kv-font);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 2rem;
  border: 2px solid transparent;
  border-radius: var(--kv-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--kv-transition) var(--kv-ease),
              color            var(--kv-transition) var(--kv-ease),
              border-color     var(--kv-transition) var(--kv-ease);
}
.kv-lp .kv-btn--primary { background: var(--kv-accent); color: var(--kv-white); }
.kv-lp .kv-btn--primary:hover { background: var(--kv-accent-hover); color: var(--kv-white); }
.kv-lp .kv-btn--ghost { background: transparent; color: var(--kv-black); border-color: var(--kv-black); }
.kv-lp .kv-btn--ghost:hover { background: var(--kv-black); color: var(--kv-white); }
.kv-lp .kv-section--dark .kv-btn--ghost { color: var(--kv-white); border-color: var(--kv-white); }
.kv-lp .kv-section--dark .kv-btn--ghost:hover { background: var(--kv-white); color: var(--kv-dark); }
.kv-lp .kv-btn--sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }

/* ----------------------------------------------------------------------------
   Cards (feature / icon cards)
   ---------------------------------------------------------------------------- */
.kv-lp .kv-card {
  background: var(--kv-white);
  border: 1px solid #e7e4db;
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: transform var(--kv-transition) var(--kv-ease),
              box-shadow var(--kv-transition) var(--kv-ease);
}
.kv-lp .kv-card:hover { transform: translateY(-4px); box-shadow: 6px 6px 9px rgba(0,0,0,0.08); }
.kv-lp .kv-card__icon { width: 56px; height: 56px; margin-bottom: 1.25rem; }
.kv-lp .kv-card h3 { margin-bottom: 0.5rem; }
.kv-lp .kv-card p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   Inline icons — self-hosted Lucide (shared/assets/icons/), dropped into any
   body.html via the {{icon:NAME}} token (index.php + build-preview.sh expand it
   to inline SVG; preview == production; zero external requests → GDPR-clean).
   The token always emits <svg class="kv-icon">, so it has NO per-icon classes —
   control size + colour from the CONTEXT instead:
     · COLOUR — stroke is currentColor, so the icon inherits the text colour of
       wherever it sits (white on a teal card, dark on white, the button label's
       colour in a CTA). Override by setting `color` on a parent.
     · SIZE — the icon is 1.5em, so it scales with the parent's font-size. To
       resize, wrap the token in a span and set font-size (or use a wrapper class
       below). Inline next to text it just tracks the text size.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-icon {
  display: inline-block;
  width: 1.5em; height: 1.5em;
  vertical-align: -0.2em;        /* optical baseline next to text */
  flex: none;
  stroke: currentColor;          /* inherits color from context */
  stroke-width: 2;
}
/* Buttons already gap:0.5em + center; just size the glyph to the label */
.kv-lp .kv-btn .kv-icon { width: 1.15em; height: 1.15em; vertical-align: 0; }
/* Card feature-icon slot for line icons — wrap the token in this span. Bigger +
   accent tint (alt to the 56px brand-glyph .kv-card__icon). White on teal cards. */
.kv-lp .kv-card__icon--line { display: inline-block; line-height: 0; margin-bottom: 1.25rem; font-size: 1.67rem; color: var(--kv-accent); }
.kv-lp.kv-theme-teal .kv-card__icon--line { color: var(--kv-white); }
/* Generic size wrappers — wrap a token to bump it off the surrounding text size */
.kv-lp .kv-ico-lg { display: inline-block; line-height: 0; font-size: 1.5rem; }
.kv-lp .kv-ico-xl { display: inline-block; line-height: 0; font-size: 2rem; }
.kv-lp .kv-ico-accent { color: var(--kv-accent); }   /* opt-in cyan tint on a wrapper */

/* Linked card — whole card is clickable (e.g. programme cards → sub-page).
   Uses a stretched link so the entire card is the hit target. */
.kv-lp .kv-card--link { position: relative; display: flex; flex-direction: column; }
.kv-lp .kv-card__region { margin: 0 0 0.85rem; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.01em; opacity: 0.9; }
/* Titel/Teaser unterschiedlich langer Artikel sonst unterschiedlich hohe Cards
   im selben Grid-Row — auf feste Zeilenzahl kappen (Ellipsis), damit eine
   Card-Reihe gleich hoch bleibt, unabhängig von der Titellänge. */
.kv-lp .kv-card--link h3,
.kv-lp .kv-card--link p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kv-lp .kv-card--link h3 { margin-bottom: 0.5rem; -webkit-line-clamp: 3; }
.kv-lp .kv-card--link p { -webkit-line-clamp: 3; }
.kv-lp .kv-card__more {
  display: inline-flex; align-items: center; gap: 0.45em;
  margin-top: auto; padding-top: 1.25rem;
  font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap;
}
.kv-lp .kv-card__more .kv-arrow { transition: transform var(--kv-transition) var(--kv-ease); }
.kv-lp .kv-card--link:hover .kv-card__more .kv-arrow { transform: translateX(4px); }
.kv-lp .kv-card--link .kv-card__more::after { content: ""; position: absolute; inset: 0; } /* stretched link */

/* ----------------------------------------------------------------------------
   Related band — a quiet cross-link to another page (e.g. "Übrigens: Förderungen").
   Whole band is a link; cyan left-accent + light cyan wash so it reads as a note
   without competing with the page's primary CTA.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-related {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(0, 184, 229, 0.07);
  border-left: 4px solid var(--kv-accent);
  border-radius: 14px;
  text-decoration: none;
  color: var(--kv-darktext);
  transition: transform var(--kv-transition) var(--kv-ease), box-shadow var(--kv-transition) var(--kv-ease);
}
.kv-lp .kv-related:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 184, 229, 0.14); }
.kv-lp .kv-related__text strong { display: block; font-size: 1.15rem; font-weight: 700; margin-bottom: 0.2rem; }
.kv-lp .kv-related__sub { display: block; color: #555; }
.kv-lp .kv-related__cta { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--kv-accent); white-space: nowrap; }
.kv-lp .kv-related__cta .kv-arrow { transition: transform var(--kv-transition) var(--kv-ease); }
.kv-lp .kv-related:hover .kv-related__cta .kv-arrow { transform: translateX(4px); }
@media (max-width: 600px) {
  .kv-lp .kv-related { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
/* Keep the slim band from floating: compact its own bottom padding and the
   bottom of the section above it, so it sits with balanced ~3rem gaps.
   (Its top padding is already collapsed by the adjacent-section rule.) */
.kv-lp .kv-related-section { padding-bottom: clamp(2rem, 4vw, 3rem); }
.kv-lp .kv-section:has(+ .kv-related-section) { padding-bottom: clamp(2rem, 4vw, 3rem); }
/* Numbered card (used where there's no icon — e.g. benefit lists) */
.kv-lp .kv-card__num {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--kv-accent);
  margin-bottom: 1rem;
}

/* ----------------------------------------------------------------------------
   THEME: teal-on-white  (opt in per page via <main class="kv-lp kv-theme-teal">)
   White page background; cards become dark teal with white text/icons; the
   "dark" band uses teal instead of charcoal.
   ---------------------------------------------------------------------------- */
.kv-lp.kv-theme-teal .kv-hero { background-color: var(--kv-white); }  /* longhand: keep hero image cover/center intact */
.kv-lp.kv-theme-teal .kv-section--beige { background-color: var(--kv-white); }
/* .kv-hero--noise needs an explicit override here: ".kv-lp.kv-theme-teal .kv-hero" (3 classes
   worth of specificity) otherwise beats ".kv-lp .kv-hero--noise" (2 classes) regardless of
   source order, painting the hero white and washing out the canvas underneath it. */
.kv-lp.kv-theme-teal .kv-hero--noise { background-color: #04181c; }

.kv-lp.kv-theme-teal .kv-card {
  background: var(--kv-teal);
  border-color: transparent;
  border-radius: 20px;
  color: rgba(255,255,255,0.88);
  /* soft resting shadow softens the teal→white edges and kills the
     Hermann-grid "phantom dots" at the gap intersections */
  box-shadow: 0 14px 34px rgba(1,112,135,0.16);
}
.kv-lp.kv-theme-teal .kv-card h3 { color: var(--kv-white); }
.kv-lp.kv-theme-teal .kv-card__num { color: var(--kv-white); opacity: 0.7; }
/* recolor dark/colored icon SVGs to white silhouettes on the teal cards */
.kv-lp.kv-theme-teal .kv-card__icon { filter: brightness(0) invert(1); }
.kv-lp.kv-theme-teal .kv-card:hover { box-shadow: 6px 6px 20px rgba(1,112,135,0.28); }

/* the "dark" CTA band is black (high-contrast anchor for the personal section) */
.kv-lp.kv-theme-teal .kv-section--dark { background: #000; }

/* ----------------------------------------------------------------------------
   Card variant: oversized "ghost" number. The number becomes a large, faint
   background graphic; a short cyan rule sits under the title; hover lifts +
   glows and brightens the number. Add class .kv-card--ghostnum to the card.
   (Placed after the teal theme so its opacity wins the equal-specificity tie.)
   ---------------------------------------------------------------------------- */
/* Large faint number ABOVE the title (in flow — no clipping, no overlap) */
.kv-lp .kv-card--ghostnum .kv-card__num {
  display: block;
  margin: 0 0 0.25rem;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.28;
}
.kv-lp .kv-card--ghostnum h3 { margin-top: 0; }
.kv-lp .kv-card--ghostnum h3::after {
  content: "";
  display: block;
  width: 2.5rem; height: 3px;
  margin: 0.85rem 0 0;
  border-radius: 2px;
  background: var(--kv-accent);
}
.kv-lp .kv-card--ghostnum:hover { transform: translateY(-6px); box-shadow: 0 22px 45px rgba(1,112,135,0.30); }

/* ----------------------------------------------------------------------------
   BENTO: equal-size benefit tiles + one cyan accent tile that carries the size
   variation — so no single benefit reads as "more important". On desktop the
   accent spans the 4th column full-height; the six benefits stay a uniform 3×2.
   Benefit tiles are light (.kv-card--light) to drop the teal load and kill the
   Hermann-grid dots (low contrast on white).
   ---------------------------------------------------------------------------- */
.kv-lp .kv-bento {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .kv-lp .kv-bento { grid-template-columns: repeat(2, 1fr); }
  .kv-lp .kv-bento .kv-bento-accent { grid-column: 1 / -1; }   /* full-width banner */
}
@media (min-width: 900px) {
  .kv-lp .kv-bento { grid-template-columns: repeat(4, 1fr); }
  .kv-lp .kv-bento .kv-bento-accent { grid-column: 4; grid-row: 1 / span 2; }  /* tall column */
}

/* Light benefit card (beats the teal theme via equal specificity + later order) */
.kv-lp.kv-theme-teal .kv-card--light {
  background: var(--kv-white);
  color: #555;
  border: 1px solid #e6e3da;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}
.kv-lp.kv-theme-teal .kv-card--light h3 { color: var(--kv-darktext); }
.kv-lp.kv-theme-teal .kv-card--light .kv-card__num { color: var(--kv-teal); opacity: 0.22; }
/* Line icons are white on teal cards — on a light card flip them to teal so they
   stay visible (higher specificity than the teal-theme white rule). */
.kv-lp.kv-theme-teal .kv-card--light .kv-card__icon--line { color: var(--kv-teal); }
.kv-lp.kv-theme-teal .kv-card--light:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.09); }

/* Cyan accent tile (not a benefit — standalone styling, no .kv-card) */
.kv-lp .kv-bento-accent {
  display: flex;
  flex-direction: column;
  justify-content: center;          /* group signet + slogan, centered (no void) */
  gap: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--kv-accent);
  color: var(--kv-white);
  border-radius: 20px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 14px 34px rgba(0,184,229,0.22);
}
.kv-lp .kv-bento-accent__signet { width: 56px; height: auto; filter: brightness(0) invert(1); opacity: 0.95; }
/* Slogan rotator: slogans are stacked; JS toggles .is-active to cross-fade.
   Without JS, the first (.is-active in markup) simply stays shown. */
.kv-lp .kv-bento-accent__quote {
  position: relative;
  margin: 0;
  min-height: 4.1em;                 /* fixed height (≈3 lines) = slogans don't shift the layout */
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);  /* small enough that each authored line fits one row */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.kv-lp .kv-bento-accent__quote span {
  position: absolute;
  left: 0; right: 0; top: 0;          /* full width of the <p>; anchor top so lines align as they cycle */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--kv-ease), transform 0.6s var(--kv-ease);
}
.kv-lp .kv-bento-accent__quote span.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kv-lp .kv-bento-accent__quote span { transition: none; }
}

/* ----------------------------------------------------------------------------
   Scroll-reveal — content fades/rises in as it enters the viewport.
   Safe by default: the hidden state only applies once JS adds `.kv-js`, so if
   the script never runs (or is blocked) everything stays visible. Honors
   prefers-reduced-motion. The tiny IntersectionObserver lives inline per page.
   ---------------------------------------------------------------------------- */
.kv-lp.kv-js .kv-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--kv-ease), transform 0.7s var(--kv-ease);
  transition-delay: var(--kv-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.kv-lp.kv-js .kv-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kv-lp.kv-js .kv-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ----------------------------------------------------------------------------
   Portrait / figure — personal anchor (e.g. a contact's photo in the CTA).
   Use .kv-portrait__img for the real image; the dashed placeholder stands in
   until the photo is supplied. Default frame is 4:5 portrait.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-portrait { margin: 0; max-width: 22rem; }
.kv-lp .kv-portrait__img,
.kv-lp .kv-portrait__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  object-fit: cover;
}
.kv-lp .kv-portrait__placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04);
  font-weight: 600;
}
.kv-lp .kv-portrait figcaption { margin-top: 1rem; font-weight: 600; line-height: 1.4; }
.kv-lp .kv-portrait figcaption span { display: block; font-weight: 400; opacity: 0.7; font-size: 0.9rem; }
.kv-lp .kv-portrait figcaption a {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.85rem; font-weight: 600; color: var(--kv-white);
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4);
}
.kv-lp .kv-portrait figcaption a:hover { color: var(--kv-accent); border-color: var(--kv-accent); }
.kv-lp .kv-portrait__todo { color: var(--kv-accent); }
/* Light-section variant of the placeholder */
.kv-lp .kv-section:not(.kv-section--dark) .kv-portrait__placeholder {
  border-color: #c2bdaf; color: #8c887b; background: rgba(0,0,0,0.02);
}

/* ----------------------------------------------------------------------------
   Form placeholder — shown until the real Quform shortcode is dropped in.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-form-placeholder {
  border: 2px dashed #c2bdaf;
  border-radius: 16px;
  padding: clamp(2.5rem, 6vw, 4rem) 2rem;
  text-align: center;
  color: #8c887b;
  background: rgba(0,0,0,0.015);
  max-width: 38rem;
}
.kv-lp .kv-form-placeholder strong { display: block; font-size: 1.1rem; color: var(--kv-darktext); margin-bottom: 0.4rem; }
.kv-lp .kv-section--dark .kv-form-placeholder { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.03); }
.kv-lp .kv-section--dark .kv-form-placeholder strong { color: var(--kv-white); }

/* ----------------------------------------------------------------------------
   Form — styles the Quform markup (prod) AND the static preview stand-in
   Mirrors the brand's Quform overrides: rounded fields, generous padding.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-form { max-width: 38rem; }
.kv-lp .kv-form__row { margin-bottom: 1rem; }
.kv-lp .kv-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.kv-lp .quform-field-text,
.kv-lp .quform-field-email,
.kv-lp .quform-field-textarea,
.kv-lp .quform-field-select,
.kv-lp .kv-form input:not([type=checkbox]):not([type=radio]),
.kv-lp .kv-form textarea {
  width: 100%;
  padding: 1em 1.3em;
  font-family: var(--kv-font);
  font-size: 0.95rem;
  line-height: 1.8em;
  color: var(--kv-darktext);
  background: var(--kv-white);
  border: 1px solid #a8a8a8;
  border-radius: var(--kv-radius-field);
  transition: border-color var(--kv-transition) var(--kv-ease);
}
.kv-lp .kv-form input:focus, .kv-lp .kv-form textarea:focus { border-color: var(--kv-accent); outline: none; }
.kv-lp .kv-form textarea { min-height: 8rem; resize: vertical; }
.kv-lp .kv-section--dark .kv-form input,
.kv-lp .kv-section--dark .kv-form textarea { border-color: var(--kv-white); border-width: 2px; background: transparent; color: var(--kv-white); }

/* Checkbox / radio — real Quform markup (.quform-option wraps input + label,
   .kv-form never actually wraps the shortcode in production, so the input
   rules above never match these; target Quform's own classes directly).
   Same custom-drawn box as lp/newsletter/body.html's .kv-form__consent
   (previously local/testweise there) — appearance:none + hand-drawn check,
   not just a tinted native control, since that's what read as "well
   recognizable" there. */
.kv-lp .quform-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.6em;
}
.kv-lp .quform-field-checkbox,
.kv-lp .quform-field-radio {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0.2rem 0 0 !important;
  flex: 0 0 auto;
  width: 1.2rem !important;
  height: 1.2rem !important;
  min-width: 1.2rem !important;
  min-height: 1.2rem !important;
  max-width: 1.2rem !important;
  max-height: 1.2rem !important;
  border: 2px solid #a8a8a8;
  background: var(--kv-white);
  cursor: pointer;
  transition: border-color var(--kv-transition) var(--kv-ease), background var(--kv-transition) var(--kv-ease);
}
.kv-lp .quform-field-checkbox { border-radius: 4px; }
.kv-lp .quform-field-radio { border-radius: 50%; }
.kv-lp .quform-field-checkbox:checked {
  background: var(--kv-accent); border-color: var(--kv-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 0.85rem;
}
.kv-lp .quform-field-radio:checked {
  border-color: var(--kv-accent);
  background-image: radial-gradient(circle, var(--kv-accent) 0 40%, transparent 42%);
}
.kv-lp .quform-field-checkbox:focus,
.kv-lp .quform-field-radio:focus { outline: none; border-color: var(--kv-accent); box-shadow: 0 0 0 3px rgba(0,184,229,0.25); }
.kv-lp .quform-option-label {
  cursor: pointer;
  line-height: 1.5;
  margin-bottom: 0;
  font-weight: 400;
}
.kv-lp .quform-option-label a { color: var(--kv-accent); }
.kv-lp .kv-section--dark .quform-option-label { color: var(--kv-white); }

/* ----------------------------------------------------------------------------
   Breadcrumb / back-link (sub-page → hub)
   ---------------------------------------------------------------------------- */
.kv-lp .kv-breadcrumb { font-size: 0.85rem; font-weight: 600; margin: 0 0 1.25rem; }
.kv-lp .kv-breadcrumb a { display: inline-flex; align-items: center; gap: 0.4em; color: inherit; opacity: 0.85; text-decoration: none; }
.kv-lp .kv-breadcrumb a:hover { opacity: 1; }
.kv-lp .kv-hero--media .kv-breadcrumb { color: #fff; }
.kv-lp .kv-breadcrumb .kv-arrow { transition: transform var(--kv-transition) var(--kv-ease); }
.kv-lp .kv-breadcrumb a:hover .kv-arrow { transform: translateX(-3px); }
.kv-lp .kv-arrow--back svg { transform: rotate(180deg); } /* arrow-right.svg, flipped to point back */

/* Emphasised number inside a headline (e.g. hero "50 %") */
.kv-lp .kv-hero__num { color: var(--kv-accent); }

/* ----------------------------------------------------------------------------
   Timeline — vertical numbered steps with a connecting line
   ---------------------------------------------------------------------------- */
.kv-lp .kv-timeline { list-style: none; counter-reset: kvstep; margin: 3rem 0 0; padding: 0; max-width: 46rem; }
.kv-lp .kv-timeline > li { counter-increment: kvstep; position: relative; padding: 0 0 2.25rem 4.25rem; }
.kv-lp .kv-timeline > li:last-child { padding-bottom: 0; }
.kv-lp .kv-timeline > li::before {
  content: counter(kvstep, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--kv-accent); color: #fff; font-weight: 700; border-radius: 50%;
}
.kv-lp .kv-timeline > li::after { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 2.75rem; bottom: 0; width: 2px; background: #e0ddd4; }
.kv-lp .kv-timeline > li:last-child::after { display: none; }
.kv-lp .kv-timeline h3 { margin: 0.35rem 0 0.4rem; }
.kv-lp .kv-timeline p { margin: 0; color: #555; }
/* Highlighted timeline step (e.g. the payout step) — accent halo on the marker. */
.kv-lp .kv-timeline > li.is-hl::before { box-shadow: 0 0 0 5px rgba(0,184,229,0.18); }

/* ----------------------------------------------------------------------------
   Funding-tier table — company size → project basis → funding rate.
   Wrapped in .kv-tiers-wrap so it scrolls horizontally instead of breaking
   layout on very narrow screens.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-tiers-wrap { margin-top: 2.5rem; max-width: 58rem; overflow-x: auto; }
.kv-lp .kv-tiers { width: 100%; border-collapse: collapse; min-width: 34rem; }
.kv-lp .kv-tiers th,
.kv-lp .kv-tiers td { text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid #e6e3da; vertical-align: middle; }
.kv-lp .kv-tiers thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #777; font-weight: 600; }
.kv-lp .kv-tiers tbody th { font-weight: 600; white-space: nowrap; }
.kv-lp .kv-tiers tbody tr:last-child th,
.kv-lp .kv-tiers tbody tr:last-child td { border-bottom: 0; }
.kv-lp .kv-tiers__rate { font-weight: 800; color: var(--kv-teal); font-size: 1.15rem; white-space: nowrap; }
.kv-lp .kv-tiers__note { margin: 1.25rem 0 0; font-size: 0.9rem; color: #777; }

/* ----------------------------------------------------------------------------
   Checklist — eligibility / requirement list with teal check icons. Each <li>
   wraps the icon token in .kv-checklist__ic (so the tick is teal while the text
   keeps the body colour).
   ---------------------------------------------------------------------------- */
.kv-lp .kv-checklist { list-style: none; margin: 2.25rem 0 0; padding: 0; max-width: 48rem; display: grid; gap: 0.85rem; }
.kv-lp .kv-checklist li { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.5; }
.kv-lp .kv-checklist__ic { color: var(--kv-teal); line-height: 0; flex: none; margin-top: 0.1em; }

/* ----------------------------------------------------------------------------
   Footnotes — shared fine print for the funding pages: datestamp + disclaimers
   (no funding guarantee, conditions subject to change). Sits as the last block
   above the WP footer; keep the wording per-page accurate to each programme.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-footnotes {
  border-top: 1px solid #e6e3da;
  padding-top: 1.5rem;
  max-width: 62rem;
  font-size: 0.8rem; line-height: 1.6; color: #8a8a8a;
}
.kv-lp .kv-footnotes p { margin: 0 0 0.6rem; }
.kv-lp .kv-footnotes p:last-child { margin-bottom: 0; }
.kv-lp .kv-footnotes strong { color: #666; font-weight: 700; }

/* ----------------------------------------------------------------------------
   Calc / counter band (dark box; values count up on scroll via [data-count])
   ---------------------------------------------------------------------------- */
.kv-lp .kv-calc { background: var(--kv-darktext); color: #fff; border-radius: 20px; padding: clamp(2rem, 4vw, 3rem); max-width: 60rem; }
.kv-lp .kv-calc__meta { margin: 0 0 1.75rem; font-size: 0.95rem; opacity: 0.75; }
.kv-lp .kv-calc__grid { display: grid; gap: 1.75rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .kv-lp .kv-calc__grid { grid-template-columns: repeat(3, 1fr); } }
.kv-lp .kv-calc__label { display: block; font-size: 0.9rem; opacity: 0.7; margin-bottom: 0.4rem; }
.kv-lp .kv-calc__value { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.kv-lp .kv-calc__item--hl .kv-calc__value { color: var(--kv-accent); }
/* Small "bis zu" qualifier above a figure (e.g. a cap). Sits on its own line so
   the big number stays one line; reserve the same line on sibling items to keep
   the numbers baseline-aligned across the row. */
.kv-lp .kv-calc__pre { display: block; color: var(--kv-white); opacity: 0.6; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; margin-bottom: 0.25rem; }
.kv-lp .kv-calc__note { margin: 1.75rem 0 0; font-size: 0.9rem; opacity: 0.75; }

/* ----------------------------------------------------------------------------
   FAQ — native <details> accordion
   ---------------------------------------------------------------------------- */
.kv-lp .kv-faq { margin: 2.5rem 0 0; max-width: 48rem; }
.kv-lp .kv-faq details { border-top: 1px solid #e6e3da; }
.kv-lp .kv-faq details:last-child { border-bottom: 1px solid #e6e3da; }
.kv-lp .kv-faq summary { cursor: pointer; list-style: none; position: relative; padding: 1.25rem 2.5rem 1.25rem 0; font-weight: 600; font-size: 1.05rem; }
.kv-lp .kv-faq summary::-webkit-details-marker { display: none; }
.kv-lp .kv-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--kv-accent); line-height: 1; }
.kv-lp .kv-faq details[open] summary::after { content: "−"; }
.kv-lp .kv-faq details > p { margin: 0; padding: 0 0 1.4rem; color: #555; max-width: 44rem; }

/* ----------------------------------------------------------------------------
   Blockquote / list treatment inside long-form text (.kv-measure, tab panels)
   ---------------------------------------------------------------------------- */
.kv-lp .kv-measure ul, .kv-lp .kv-tabs__panel ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.kv-lp .kv-measure ol, .kv-lp .kv-tabs__panel ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.kv-lp .kv-measure li, .kv-lp .kv-tabs__panel li { margin-bottom: 0.4rem; }
.kv-lp .kv-measure blockquote, .kv-lp .kv-tabs__panel blockquote {
  margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--kv-accent); font-weight: 600; font-size: 1.05rem;
}
.kv-lp .kv-measure blockquote p, .kv-lp .kv-tabs__panel blockquote p { margin: 0; }

/* ----------------------------------------------------------------------------
   Tabs — click a label, show its panel (kv-story.js wires the click handler).
   Without JS only the first (.is-active in markup) panel is reachable — an
   acceptable degradation, same trade-off already made for scroll-reveal.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-tabs__nav { display: flex; gap: 2rem; border-bottom: 1px solid #e7e4db; margin-bottom: 2rem; overflow-x: auto; }
.kv-lp .kv-tabs__btn {
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 1rem 0; font-family: var(--kv-font); font-size: 1rem; font-weight: 600;
  color: #777; cursor: pointer; white-space: nowrap;
}
.kv-lp .kv-tabs__btn.is-active { color: var(--kv-darktext); border-bottom-color: var(--kv-accent); }
.kv-lp .kv-tabs__panel { display: none; max-width: 46rem; }
.kv-lp .kv-tabs__panel.is-active { display: block; }

/* ----------------------------------------------------------------------------
   Showcase — horizontal scroll-snap carousel (press mentions, external work,
   talks — anything with a title/blurb/link, image optional per card). No JS
   library: native scroll-snap does the swipe/drag, kv-story.js only syncs the
   dots + wires the prev/next buttons.
   ---------------------------------------------------------------------------- */
.kv-lp .kv-showcase { position: relative; margin-top: 1.5rem; }
.kv-lp .kv-showcase__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  margin: 0 clamp(-1.25rem, -4vw, -3rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.kv-lp .kv-showcase__track::-webkit-scrollbar { display: none; }
.kv-lp .kv-showcase__card {
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 80vw, 320px);
  background: var(--kv-white);
  border: 1px solid #e7e4db;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 700px)  { .kv-lp .kv-showcase__card { flex-basis: calc((100% - 2 * 1.25rem) / 3); } }
@media (min-width: 1100px) { .kv-lp .kv-showcase__card { flex-basis: calc((100% - 3 * 1.25rem) / 4); } }
.kv-lp .kv-showcase__media { aspect-ratio: 3 / 2; background: var(--kv-beige); }
.kv-lp .kv-showcase__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo cards: SAME media box height as the photo cards (inherits the 3:2
   aspect-ratio above, unchanged) — the row-height match is exact, no
   flex-stretch/leftover-space juggling needed. Only the fit differs: a flat
   wordmark can't cover a landscape box without cropping, so it's contained
   and centered on a neutral tile instead of stretched edge-to-edge. */
.kv-lp .kv-showcase__media--logo { display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: var(--kv-white); }
.kv-lp .kv-showcase__media--logo img { width: 80%; height: auto; object-fit: contain; }
.kv-lp .kv-showcase__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.kv-lp .kv-showcase__tag {
  display: inline-block; align-self: flex-start;
  background: var(--kv-beige); color: var(--kv-darktext);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.3rem 0.65rem; border-radius: 999px;
}
.kv-lp .kv-showcase__body h3 { margin: 0; font-size: 1.1rem; }
.kv-lp .kv-showcase__body h3 a { color: inherit; text-decoration: none; }
.kv-lp .kv-showcase__body h3 a:hover { text-decoration: underline; }
.kv-lp .kv-showcase__body p { margin: 0; color: #555; font-size: 0.92rem; flex: 1; }
.kv-lp .kv-showcase__body .kv-btn { margin-top: 0.4rem; align-self: flex-start; }

.kv-lp .kv-showcase__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.kv-lp .kv-showcase__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid #e7e4db;
  background: var(--kv-white); cursor: pointer; padding: 0; flex: none;
}
.kv-lp .kv-showcase__arrow .kv-icon { width: 1.1em; height: 1.1em; }
.kv-lp .kv-showcase__arrow:disabled { opacity: 0.35; cursor: default; }
.kv-lp .kv-showcase__dots { display: flex; gap: 0.5rem; }
.kv-lp .kv-showcase__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #d8d4c8; border: none; padding: 0; cursor: pointer; }
.kv-lp .kv-showcase__dot.is-active { background: var(--kv-accent); }

/* ----------------------------------------------------------------------------
   Local-preview chrome stand-in (header/footer stubs). PREVIEW ONLY — these
   classes are never used in production, where WP renders the real chrome.
   ---------------------------------------------------------------------------- */
.kv-prev-bar {
  background: #fff3cd; color: #66510a; font-size: 0.8rem; text-align: center;
  padding: 6px 12px; font-family: var(--kv-font, sans-serif);
  border-bottom: 1px solid #f0d98a;
}
.kv-prev-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid #eee; font-family: var(--kv-font, sans-serif);
}
.kv-prev-header img { height: 34px; width: auto; }
.kv-prev-nav { display: flex; gap: 1.5rem; align-items: center; }
.kv-prev-nav a { color: #141618; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.kv-prev-footer {
  background: #141618; color: #cfcfcf; padding: 3rem clamp(1.25rem, 4vw, 3rem);
  font-family: var(--kv-font, sans-serif); font-size: 0.9rem;
}
.kv-prev-footer img { height: 40px; margin-bottom: 1rem; }
.kv-prev-footer a { color: #cfcfcf; }