/* Bconnect Automotive Kanalen en systemen — bron: ingekort-automotive.css + upgrade-automotive.css */
.au-ks > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }
/* =====================================================================
   ZONE — KANALEN EN SYSTEMEN. Licht paneel, accent = uitsluitend de
   signatuur-gradient. Kanaal-tiles: feature-radii (18px). Systeem-kaarten:
   card-radii (14px), navy-getinte schaduw.
   ===================================================================== */
.au-ks { padding: var(--space-8) 0; background: #FFFFFF; }

/* sectiekop */
.au-ks-head { max-width: 720px; margin: 0 0 var(--space-8); }
.au-ks-kicker {
  font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin-bottom: 16px;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.au-ks-head .au-h2 { text-align: left; margin: 0 0 16px; max-width: 18em; }
.au-ks-intro {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--c-text-muted); max-width: 60ch; margin: 0;
}

/* blokken */
.au-ks-block + .au-ks-block { margin-top: var(--space-9); }
.au-ks-blockhead { margin-bottom: var(--space-6); }
.au-ks-subhead {
  font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-semibold);
  letter-spacing: -0.005em; color: var(--c-navy); margin: 0 0 6px;
}
.au-ks-subline { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 0; max-width: 52ch; }

/* ---- BLOK 1: kanaal-tiles ---- */
.au-ks-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.au-ks-tile {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: var(--space-6) 16px; text-align: center;
  background: var(--c-white); border-radius: 18px;
  border: 1.5px solid transparent;
  background-image: linear-gradient(var(--c-white), var(--c-white)), var(--gradient-brand);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.au-ks-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.au-ks-tile-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto;
  color: var(--c-magenta);
  background: var(--c-white);
  border: 1.5px solid transparent;
  background-image: linear-gradient(var(--c-white), var(--c-white)), var(--gradient-brand);
  background-origin: border-box; background-clip: padding-box, border-box;
  transition: background-image .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.au-ks-tile-icon svg { width: 26px; height: 26px; }
.au-ks-tile:hover .au-ks-tile-icon {
  background-image: var(--gradient-brand), var(--gradient-brand);
  color: #fff; box-shadow: 0 8px 18px rgba(168,2,142,.28);
}
.au-ks-tile-name { font-family: var(--font-head); font-size: 14px; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--c-navy); text-wrap: balance; }

/* per-tile stagger ~120ms (overschrijft de gedeelde 70ms-cadans) */
@media (prefers-reduced-motion: no-preference) {
  .au-ks .au-ks-tile { transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .22s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
  .au-ks:not(.is-inview) .au-ks-tile { opacity: 0; transform: translateY(16px); }
  .au-ks.is-settled .au-ks-tile { transition: box-shadow .22s var(--ease); opacity: 1; transform: none; }
}

/* convergerende gradient-lijnen → één inbox-punt */
.au-ks-converge { margin-top: 4px; }
.au-ks-lines { display: block; width: 100%; height: 56px; }
/* stroke via inline url(#auKsLine<widget-id>) in de widget: een CSS-stroke zou
   dat presentation-attribuut overrulen en de id klopte hier niet. */
.au-ks-lines path { fill: none; stroke-width: 1.4; }
.au-ks-inbox { display: flex; justify-content: center; margin-top: -4px; }
.au-ks-inbox-card {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 11px 22px 11px 13px; border-radius: var(--radius-pill);
  background: var(--c-white); border: 1px solid var(--c-border);
  box-shadow: 0 2px 4px rgba(20,20,100,.06), 0 14px 32px rgba(35,1,123,.13);
}
.au-ks-inbox-node {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto;
  color: #fff; background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168,2,142,.26);
}
.au-ks-inbox-node svg { width: 22px; height: 22px; }
.au-ks-inbox-label { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -0.005em; color: var(--c-navy); }

/* ---- BLOK 2: INTEGRATIES (vereenvoudigd) ---- */
.au-int-simple { display: flex; flex-direction: column; align-items: center; text-align: center; }
.au-int-head { max-width: 720px; margin: 0 0 var(--space-7); }
.au-int-simple .au-int-head { max-width: 640px; }
.au-int-simple .au-int-kicker { justify-content: center; }
.au-int-simple .au-int-h2 { max-width: 18em; }
.au-int-simple .au-int-body { margin-left: auto; margin-right: auto; }
.au-int-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.au-int-tick { width: 18px; height: 3px; border-radius: 999px; background: var(--gradient-brand); flex: 0 0 auto; }
.au-int-h2 {
  font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  font-weight: var(--fw-semibold); color: var(--c-navy); margin: 0 0 16px; text-wrap: pretty; max-width: 16em;
}
.au-int-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--c-text-muted); max-width: 56ch; margin: 0; text-wrap: pretty;
}

/* INTEGRATIE-LOGO'S — brede, full-bleed, doorlopend bewegende marquee.
   Eén rij die traag en naadloos naar links scrollt; pauzeert bij hover.
   Logo-set staat 2x in de DOM zodat de loop gat-loos doorloopt (translateX -50%). */
.au-int-marquee {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: var(--space-7);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.au-int-marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: au-int-marquee var(--mq-duration, 40s) linear infinite; will-change: transform;
}
.au-int-marquee:hover .au-int-marquee-track { animation-play-state: paused; }
.au-int-marquee-item {
  flex: 0 0 auto; display: grid; place-items: center;
  height: 52px; padding: 0 32px;            /* 32px elke kant = 64px tussenruimte */
}
/* uniforme logo-hoogte, exact gelijk voor álle logo's; monochroom/grijs, aspect ratio behouden */
.au-int-marquee-item img {
  height: 48px; width: auto; max-width: 220px; object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: opacity .25s var(--ease);
}
.au-int-marquee-item img:hover { opacity: .92; }
/* gefaald/leeg logo valt op (verdwijnt niet stilletjes): toon de bestandsnaam */
.au-int-marquee-fail {
  display: none; font-family: var(--font-body); font-size: 12px; line-height: 1;
  color: var(--c-magenta); background: rgba(168,2,142,.06);
  border: 1px dashed var(--c-magenta); border-radius: 8px;
  padding: 8px 12px; white-space: nowrap;
}
.au-int-marquee-item.is-failed { padding: 0 18px; }
.au-int-marquee-item.is-failed img { display: none; }
.au-int-marquee-item.is-failed .au-int-marquee-fail { display: inline-block; }
@keyframes au-int-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .au-int-marquee-track { animation: none; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* afsluitregel — subtiel, klein gradient + icoon, klikbaar naar /kennismaken/ */
.au-int-more {
  display: inline-flex; align-items: center; gap: 11px;
  margin: var(--space-7) auto 0; max-width: 46ch;
  text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--c-text-muted); transition: color .18s var(--ease);
}
.au-int-more-icon {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  color: #fff; background: var(--gradient-brand); box-shadow: 0 5px 12px rgba(168,2,142,.24);
}
.au-int-more-icon svg { width: 15px; height: 15px; }
.au-int-more-text { text-wrap: pretty; }
.au-int-more:hover { color: var(--c-navy); }
.au-int-more:hover .au-int-more-icon { box-shadow: 0 6px 16px rgba(168,2,142,.34); }

@media (max-width: 920px) {
  .au-ks-tiles { grid-template-columns: repeat(3, 1fr); }
  .au-ks-converge { display: none; }
  .au-ks-inbox { margin-top: var(--space-6); }
}
@media (max-width: 560px) {
  .au-ks-tiles { grid-template-columns: repeat(2, 1fr); }
  .au-int-marquee-item { height: 46px; padding: 0 24px; }
  .au-int-marquee-item img { height: 42px; }
}

/* =====================================================================
   ZONE 7 — TRACK-RECORD + DRIE MODELLEN MINI
.au-ks-head { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.au-ks-head .au-ks-kicker { margin-left: auto; margin-right: auto; }
.au-ks-head .au-h2 { text-align: center; margin-left: auto; margin-right: auto; }
@media (min-width: 921px) { .au-ks-tiles { grid-template-columns: repeat(4, 1fr); } }
.elementor-widget-bconnect_au_ks { margin: 0 !important; }
.elementor-widget-bconnect_au_ks .accent { background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; display: inline-block; }

/* --- integratie-carousel en OEM-regel (upgrade-automotive.css) ---
   Naam-placeholder-tegels in een net grid van twee rijen +
   aparte OEM-afvangregel. Neutrale grijstint voor de placeholders;
   navy #141464 + signatuur-gradient voor accenten.
   ============================================================ */
:root {
  --au-int-tile-bg: #F4F5FA;
  --au-int-tile-border: var(--c-border);
  --au-int-tile-name: #6A7180;
  --au-int-tile-h: 78px;
}

/* net grid — 4 kolommen × 2 rijen voor de 8 systemen */
:root { --au-int-tile-h: 84px; }

/* de doorlopende carousel hergebruikt de gedeelde .au-int-marquee wrapper
   (full-bleed + rand-fade + animatie). De tegels zijn nu directe kinderen
   van .au-int-marquee-track; elke tegel draagt zijn eigen rechter-marge zodat
   de -50%-loop naadloos blijft. */
.au-int-marquee-track { gap: 0; }

/* één placeholder-tegel in de carousel: neutrale grijstint, naam gecentreerd */
.au-int-tile {
  flex: 0 0 auto;
  height: var(--au-int-tile-h);
  margin-right: 20px;
  display: grid;
  place-items: center;
  padding: 0 36px;
  background: var(--au-int-tile-bg);
  border: 1px solid var(--au-int-tile-border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(20, 20, 100, .04);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.au-int-tile:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-soft);
  box-shadow: 0 6px 18px rgba(20, 20, 100, .07);
}
.au-int-tile-name {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--au-int-tile-name);
  text-align: center;
  white-space: nowrap;
}
/* zodra een echt logo is ingezet (bestand op src bestaat) toont de tegel dit i.p.v. de naam */
.au-int-tile-logo {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* OEM-afvang — één aparte, iets afwijkende regel; GEEN losse merklogo's */
.au-int-oem {
  width: 100%;
  max-width: 920px;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-brand) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 6px 18px rgba(35, 1, 251, .06);
}
.au-int-oem-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
  background: var(--gradient-brand);
  box-shadow: 0 5px 12px rgba(168, 2, 142, .22);
}
.au-int-oem-icon svg { width: 21px; height: 21px; }
.au-int-oem-text { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.au-int-oem-title {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-navy);
}
.au-int-oem-sub {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--c-text-muted);
}

/* gradient-accent op de "koppeling op maat"-link in de afsluitregel */
.au-int-more-accent {
  font-weight: var(--fw-semibold);
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* afsluitregel groter, zonder het plus-icoon ervoor */
.au-int-more {
  gap: 0;
  max-width: 60ch;
}

/* --- au-int-marquee schil (ingekort-automotive.css) --- */
.au-int-marquee {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: var(--space-7);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.au-int-marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: au-int-marquee var(--mq-duration, 40s) linear infinite; will-change: transform;
}
.au-int-marquee:hover .au-int-marquee-track { animation-play-state: paused; }
.au-int-marquee-item {
  flex: 0 0 auto; display: grid; place-items: center;
  height: 52px; padding: 0 32px;            /* 32px elke kant = 64px tussenruimte */
}
/* uniforme logo-hoogte, exact gelijk voor álle logo's; monochroom/grijs, aspect ratio behouden */
.au-int-marquee-item img {
  height: 48px; width: auto; max-width: 220px; object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: opacity .25s var(--ease);
}
.au-int-marquee-item img:hover { opacity: .92; }
/* gefaald/leeg logo valt op (verdwijnt niet stilletjes): toon de bestandsnaam */
.au-int-marquee-fail {
  display: none; font-family: var(--font-body); font-size: 12px; line-height: 1;
  color: var(--c-magenta); background: rgba(168,2,142,.06);
  border: 1px dashed var(--c-magenta); border-radius: 8px;
  padding: 8px 12px; white-space: nowrap;
}
.au-int-marquee-item.is-failed { padding: 0 18px; }
.au-int-marquee-item.is-failed img { display: none; }
.au-int-marquee-item.is-failed .au-int-marquee-fail { display: inline-block; }
@keyframes au-int-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .au-int-marquee-track { animation: none; } }
.sr-only {

/* --- au-iw logotegels (upgrade-automotive.css) --- */
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.au-iw-card {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 4 * 20px) / 5);   /* 5 per rij op desktop */
  min-width: 150px;
  min-height: 116px;
  display: grid;
  place-items: center;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(20, 20, 100, .05), 0 6px 16px rgba(20, 20, 100, .05);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.au-iw-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-border-soft);
  box-shadow: 0 2px 4px rgba(20, 20, 100, .06), 0 14px 30px rgba(20, 20, 100, .10);
}
.au-iw-logo {
  max-width: 90%;
  max-height: 40px;          /* standaard; per logo verfijnd via inline max-height */
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.au-iw-name {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 920px) {
  .au-iw-card { flex-basis: calc((100% - 3 * 20px) / 4); }   /* 4 per rij */
}
@media (max-width: 620px) {
  .au-iw-grid { gap: 14px; }
  .au-iw-card { flex-basis: calc((100% - 2 * 14px) / 3); min-width: 0; min-height: 96px; padding: 14px 12px; }
  .au-iw-logo { max-height: 34px; }
  .au-iw-name { font-size: 15px; }
}
@media (max-width: 400px) {
  .au-iw-card { flex-basis: calc((100% - 14px) / 2); }        /* 2 per rij */
}

/* ---- Carousel-variant: dezelfde witte kaartjes in een doorlopende marquee ----
   Hergebruikt de gedeelde .au-int-marquee schil (full-bleed, rand-fade, pauze
   bij hover). Vaste kaartbreedte; verticale padding op de track zodat de
   schaduw niet wordt afgeknipt. Geen hover-lift — de rij pauzeert al bij hover. */
.au-iw-marquee { margin-top: var(--space-7); }
.au-iw-marquee .au-int-marquee-track { gap: 0; padding: 20px 0; }
.au-iw-marquee .au-iw-card {
  flex: 0 0 auto;
  width: 200px;
  min-width: 0;
  min-height: 116px;
  margin: 0 10px;
  box-shadow: 0 1px 2px rgba(20, 20, 100, .05), 0 5px 14px rgba(20, 20, 100, .06);
}
.au-iw-marquee .au-iw-card:hover {
  transform: none;
  border-color: var(--c-border);
  box-shadow: 0 1px 2px rgba(20, 20, 100, .05), 0 5px 14px rgba(20, 20, 100, .06);
}
@media (max-width: 620px) {
  .au-iw-marquee .au-iw-card { width: 156px; min-height: 96px; padding: 14px 12px; }
}

/* =====================================================================
   KANALEN EN SYSTEMEN — nieuwe opzet (31-07-2026)
   Kop gecentreerd; daaronder links de kanalen als lijst met toelichting,
   rechts een inbox-mockup, met vier draden ertussen. De draden zitten in
   een eigen rasterkolom zodat ze op de kaartmiddens uitkomen.
   De oude tegel-opzet (.au-ks-tiles / .au-ks-converge / .au-ks-inbox)
   wordt niet meer gerenderd; die regels hierboven zijn dood en blijven
   staan voor het geval de tegelvariant terugkomt.
   ===================================================================== */
.au-ks .au-ks-head--center { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.au-ks .au-ks-head--center .au-ks-kicker { display: block; }
.au-ks .au-ks-head--center .au-h2 { text-align: center; margin-left: auto; margin-right: auto; max-width: 22em; }
.au-ks .au-ks-head--center .au-ks-intro { margin-left: auto; margin-right: auto; text-align: center; max-width: 62ch; }

.au-ks-split { display: grid; gap: clamp(28px, 3vw, 44px); align-items: center; }
.au-ks-split .au-ks-blockhead { margin-bottom: clamp(18px, 2vw, 26px); }
.au-ks-split + .au-ks-block { margin-top: var(--space-9); }

/* ---- Kanalenlijst (links) ---- */
.au-ks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.au-ks-litem {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--c-white); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-feature); padding: 18px 22px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s var(--ease), box-shadow .22s var(--ease), border-color .2s var(--ease);
}
.au-ks-litem:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--c-border); }
.au-ks-litem-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--c-lavender); border: 1px solid var(--c-border-soft); color: var(--c-grad-blue);
}
.au-ks-litem-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.au-ks-litem-name { font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--c-navy); }
.au-ks-litem-sub { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--c-text-muted); text-wrap: pretty; }

/* ---- Draden ----
   Absoluut naast de LIJST (niet naast de hele kolom): zo dekt de SVG
   exact de lijsthoogte en vallen de y-waarden 12,5/37,5/62,5/87,5%
   samen met de middens van de vier kaarten. */
.au-ks-listwrap { position: relative; }
.au-ks-wires { display: none; position: absolute; left: 100%; top: 0; height: 100%; width: 92px; pointer-events: none; }
.au-ks-wires path { fill: none; stroke-width: 1.4; }

/* ---- Inbox-mockup (rechts) ---- */
.ksm {
  position: relative; overflow: hidden;
  background: var(--c-white); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-feature);
  box-shadow:
    0 2px 4px rgba(20, 20, 100, 0.05),
    0 26px 54px -24px rgba(20, 20, 100, 0.34),
    0 12px 28px -16px rgba(170, 2, 142, 0.16);
}
.ksm::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient-brand); }
.ksm-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 16px; }
.ksm-mark {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  color: #fff; background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168, 2, 142, .24);
}
.ksm-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ksm-title { font-family: var(--font-head); font-size: 15.5px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--c-navy); }
.ksm-sub { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--c-text-soft); text-wrap: pretty; }
.ksm-live {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase; color: #1E8A32;
  background: rgba(57, 181, 74, .12); border-radius: var(--radius-pill); padding: 5px 10px;
}
.ksm-live-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c-success); }

.ksm-rows { list-style: none; margin: 0; padding: 0; }
.ksm-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 22px; border-top: 1px solid var(--c-border-soft); }
.ksm-av {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--c-bg-soft); color: var(--c-navy);
  font-family: var(--font-head); font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .02em;
}
.ksm-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ksm-top { display: flex; align-items: center; gap: 8px; }
.ksm-name { font-family: var(--font-head); font-size: 14px; font-weight: var(--fw-bold); color: var(--c-navy); }
.ksm-time { margin-left: auto; font-family: var(--font-body); font-size: 12px; color: var(--c-text-soft); white-space: nowrap; }
.ksm-msg { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--c-text-muted); text-wrap: pretty; }
.ksm-tag {
  font-family: var(--font-head); font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: .07em; text-transform: uppercase; border-radius: var(--radius-pill);
  padding: 3px 8px; white-space: nowrap;
}
/* Kanaaltinten uit de merkgradient, geen merkkleuren van derden. */
.ksm-tag--chat { background: rgba(35, 1, 251, .10); color: #2301fb; }
.ksm-tag--wa   { background: rgba(120, 20, 200, .10); color: #7814c8; }
.ksm-tag--ms   { background: rgba(0, 122, 255, .12); color: #0069d9; }
.ksm-tag--sms  { background: rgba(168, 2, 144, .10); color: #a80290; }
.ksm-tag--mail { background: rgba(20, 20, 100, .09); color: var(--c-navy); }

.ksm-foot {
  display: flex; align-items: center; gap: 9px; margin: 0;
  padding: 13px 22px; border-top: 1px solid var(--c-border-soft); background: var(--c-lavender);
  font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--c-text-muted);
}
.ksm-check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
  background: var(--c-success); color: #fff;
}

@media (min-width: 1025px) {
  /* Twee kolommen, twee rijen: de kop staat links bovenaan en de mockup
     begint op dezelfde hoogte als de eerste kanaalkaart. Daardoor valt het
     midden van de mockup samen met het midden van de lijst, en dus met het
     punt waar de vier draden samenkomen. */
  .au-ks-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    grid-template-rows: auto auto;
    /* de kolomruimte is precies de breedte van de draden-SVG */
    gap: 0 92px;
    align-items: start;
  }
  .au-ks-split .au-ks-blockhead { grid-column: 1; grid-row: 1; }
  .au-ks-split .au-ks-listwrap { grid-column: 1; grid-row: 2; }
  .au-ks-split .au-ks-visual { grid-column: 2; grid-row: 2; }
  .au-ks-wires { display: block; }
}
@media (max-width: 1024px) {
  .au-ks-split { grid-template-columns: minmax(0, 1fr); }
  .au-ks-visual { max-width: 560px; }
}
@media (max-width: 560px) {
  .au-ks-litem { padding: 16px 18px; gap: 13px; }
  .ksm-head, .ksm-row, .ksm-foot { padding-left: 16px; padding-right: 16px; }
  .ksm-top { flex-wrap: wrap; }
  .ksm-time { margin-left: 0; }
}

/* Integraties is een eigen blauwe band (zie de aparte <section> in de
   widget). De marquee erbinnen gebruikt een mask voor de randfade, dus
   die werkt net zo goed op blauw als op wit. */
.au-ks-int { background: #EEF1F8; }
.au-ks-int .au-ks-block-int { margin-top: 0; }

/* =====================================================================
   INTEGRATIES — nieuwe layout (31-07-2026)
   Kop + intro links, vier koppelingscategorieën rechts, daaronder één
   kaart met de logo-marquee (en op /automotive/ de OEM-regel), en als
   afsluiter de maatwerk-regel als pil met ronde pijl.
   `.au-int-simple` centreerde alles; binnen deze splitsing zetten we de
   kop weer links uit.
   ===================================================================== */
.int-split { display: grid; gap: clamp(26px, 3vw, 56px); align-items: start; text-align: left; width: 100%; }
.au-int-simple .int-split .au-int-head { max-width: 34em; margin: 0; text-align: left; }
.au-int-simple .int-split .au-int-kicker { justify-content: flex-start; }
.au-int-simple .int-split .au-int-h2 { max-width: 20em; margin-left: 0; margin-right: 0; text-align: left; }
.au-int-simple .int-split .au-int-body { margin-left: 0; margin-right: 0; text-align: left; }

.int-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }
.int-cat { display: flex; align-items: flex-start; gap: 13px; text-align: left; }
.int-cat-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--c-white); border: 1px solid var(--c-border-soft); color: var(--c-grad-blue);
  box-shadow: var(--shadow-soft);
}
.int-cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.int-cat-name { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -0.005em; color: var(--c-navy); }
.int-cat-sub { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--c-text-muted); text-wrap: pretty; }

/* ---- Logokaart ---- */
.int-card {
  width: 100%; margin-top: clamp(26px, 3vw, 44px); overflow: hidden;
  background: var(--c-white); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-feature); box-shadow: var(--shadow-soft);
}
.int-card-head {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 15px 20px; border-bottom: 1px solid var(--c-border-soft);
  font-family: var(--font-head); font-size: 14px; font-weight: var(--fw-bold);
  letter-spacing: -0.005em; color: var(--c-navy);
}
.int-card-ico {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  color: #fff; background: var(--gradient-brand); box-shadow: 0 6px 14px rgba(168, 2, 142, .22);
}
/* De marquee is buiten deze kaart full-bleed (100vw); binnen de kaart
   loopt hij netjes tot de kaartranden. */
.int-card .au-int-marquee,
.int-card .au-iw-marquee { width: 100%; margin: 0; padding: 0; }
.int-card .au-iw-marquee .au-int-marquee-track { padding: 16px 0; }
/* OEM-regel als onderste balk in de kaart i.p.v. losse kaart eronder. */
.int-card .au-int-oem {
  max-width: none; margin: 0; border: 0; border-top: 1px solid var(--c-border-soft);
  border-radius: 0; box-shadow: none; background: var(--c-lavender);
  padding: 14px 20px;
}

/* ---- Maatwerk-regel als pil ---- */
.au-int-simple .au-int-more {
  margin: clamp(20px, 2.4vw, 30px) auto 0; max-width: none; gap: 14px;
  align-items: center; text-align: left;
  background: var(--c-white); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-pill); padding: 12px 12px 12px 22px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease);
}
.au-int-simple .au-int-more:hover { box-shadow: var(--shadow-card-hover); border-color: var(--c-border); transform: translateY(-1px); }
.au-int-more-arrow {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center;
  color: #fff; background: var(--gradient-brand); box-shadow: 0 6px 14px rgba(168, 2, 142, .26);
  transition: transform .18s var(--ease);
}
.au-int-simple .au-int-more:hover .au-int-more-arrow { transform: translateX(3px); }

@media (min-width: 1025px) {
  .int-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}
@media (max-width: 560px) {
  .au-int-simple .au-int-more { border-radius: var(--radius-feature); padding: 14px 14px 14px 18px; }
  .int-card-head, .int-card .au-int-oem { padding-left: 16px; padding-right: 16px; }
}

/* "Voorbeeld"-label op de inbox-mockup — 05-08-2026. De gesprekken zijn
   verzonnen; zonder label leest de mockup als een screenshot met echte
   leadgegevens. Rustig en klein: het is een disclaimer, geen accent. */
.ksm-voorbeeld {
	margin-left: auto;
	margin-right: 8px;
	flex: none;
	font-family: var(--font-head);
	font-size: 10.5px;
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-soft);
	background: rgba(20, 20, 100, 0.06);
	border-radius: var(--radius-pill, 999px);
	padding: 3px 8px;
}