/* ============================================================
   Bconnect Tarieven — port van upgrade-tarieven2.css
   ------------------------------------------------------------
   Bron: `Tarieven (standalone).html`, style-blok 19. Dat is het
   laatste blok én het énige blok dat .tv-*-selectors bevat, dus
   er is geen latere overschrijvende laag om te controleren.

   Ritme: wit → lavendel → wit → lavendel → wit → donker → wit →
   lavendel. Accent uitsluitend de signatuur-gradient. Geen
   bedragen op de pagina.

   De .tv-*-regels hieronder zijn 1-op-1 overgenomen. Daarna volgt
   één WP-blok: containers, hero-schil, Elementor-hardening en de
   opmaak van het echte formulier in .tv-form-card (de bron had
   daar een React-formulier met eigen .km-*-stijlen).
   ============================================================ */

/* ---------- HERO ---------- */
.tv-hero .tv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-8); align-items: center; }
.tv-hero h1 { max-width: 16em; }
.tv-hero .lead { max-width: 56ch; }

.tv-quote { position: relative; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(20, 20, 100, .05), 0 24px 50px -24px rgba(20, 20, 100, .28), 0 46px 88px -56px rgba(168, 2, 144, .3); }
.tv-quote::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-brand); }
.tv-quote-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid #EEF0F7; }
.tv-quote-ic { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168, 2, 142, .24); }
.tv-quote-ic svg { width: 20px; height: 20px; }
.tv-quote-ttl { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.tv-quote-name { font-family: var(--font-head); font-size: 16.5px; font-weight: var(--fw-semibold); letter-spacing: -.005em; color: var(--c-navy); }
.tv-quote-sub { font-family: var(--font-body); font-size: 13.5px; color: var(--c-text-muted); }
.tv-quote-pill { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--radius-pill); background: #F2F3FA; font-family: var(--font-head); font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .09em; text-transform: uppercase; color: #6E7488; }
.tv-quote-rows { list-style: none; margin: 0; padding: 4px 0; }
.tv-quote-rows li { display: flex; align-items: baseline; gap: 14px; padding: 12px 20px; }
.tv-quote-rows li + li { border-top: 1px solid #F1F2F8; }
.tv-quote-label { flex: 0 0 42%; font-family: var(--font-body); font-size: 14.5px; color: var(--c-text-muted); }
.tv-quote-value { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -.005em; color: var(--c-navy); text-wrap: pretty; }
.tv-quote-foot { display: flex; align-items: center; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--c-border); background: #FAFAFC; font-family: var(--font-body); font-size: 13.5px; color: var(--c-text-muted); }

.tv-proof { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--c-border); padding-top: var(--space-6); }
.tv-proof li { display: flex; flex-direction: column; gap: 5px; }
.tv-proof-h { font-family: var(--font-head); font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -.015em; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-proof-p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--c-text-muted); text-wrap: pretty; }

/* ---------- WAT BEPAALT JE PRIJS ---------- */
.tv-factors-sec { padding: var(--space-9) 0; background: #F4F5FA; }
.tv-factor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: var(--space-7); }
/* Icoon en kop naast elkaar op rij 1, de alinea eronder over de volle
   breedte (12-08-2026; stonden alle drie onder elkaar). Zelfde grid-aanpak
   als .km-step en .ob-hybrid-card. Het volgnummer blijft absoluut
   gepositioneerd rechtsboven en zit dus buiten het raster.
   De rechterpadding houdt rekening met dat nummer, zodat een lange kop er
   niet onder schuift. */
.tv-factor { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 13px; row-gap: 12px; align-items: center; align-content: start; padding: 26px 24px 26px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-feature, 18px); box-shadow: var(--shadow-card); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.tv-factor > .tv-factor-ic { grid-column: 1; grid-row: 1; }
.tv-factor > .tv-factor-h  { grid-column: 2; grid-row: 1; padding-right: 26px; }
.tv-factor > .tv-factor-p  { grid-column: 1 / -1; grid-row: 2; }
.tv-factor:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.tv-factor-num { position: absolute; top: 18px; right: 20px; font-family: var(--font-head); font-size: 13.5px; font-weight: var(--fw-bold); letter-spacing: .04em; color: #C9CCDD; }
.tv-factor-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168, 2, 142, .22); }
.tv-factor-ic svg { width: 20px; height: 20px; }
.tv-factor-h { font-family: var(--font-head); font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--c-navy); margin: 0; text-wrap: balance; }
.tv-factor-p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 0; text-wrap: pretty; }
.tv-factor-note { display: flex; align-items: center; gap: 12px; max-width: 900px; margin: var(--space-6) auto 0; padding: 16px 22px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-soft); font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--c-text-muted); text-wrap: pretty; }

/* ---------- gedeelde lijst-onderdelen ---------- */
.tv-check { width: 17px; height: 17px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #46C257, #2F9E40); margin-top: 2px; }
.tv-check svg { width: 10px; height: 10px; }
.tv-checks, .tv-dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tv-checks li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--c-text); text-wrap: pretty; }
.tv-dots li { position: relative; padding-left: 16px; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--c-text-muted); text-wrap: pretty; }
.tv-dots li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 999px; background: var(--gradient-brand); }
.tv-model-label { display: block; margin-bottom: 10px; font-family: var(--font-head); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--c-navy); }

/* ---------- UITVOERINGSMODELLEN ---------- */
/* ============================================================
   MODELLEN OP EEN DONKERE BAND (12-08-2026)

   De pagina had één donkere bank, in de sectie "Kosten en opbrengsten".
   Die sectie is eruit, en daarmee verloor de pagina zijn enige donkere
   rustpunt: er stonden drie witte secties op een rij. Deze sectie is nu
   de donkere band. Dat lost twee dingen in één keer op — het contrast
   én de wit/tint-afwisseling, want inbegrepen kan daardoor wit blijven.

   Zelfde opbouw als de oude .tv-value-bank: navy basis, een radiale
   gloed voor diepte en het stippenmasker als textuur. Rustiger dan die
   bank, want dit is een hele sectie en geen los vak.
   De witte modelkaarten blijven wit; die komen op navy juist naar voren.
   ============================================================ */
.tv-models-sec {
  position: relative;
  isolation: isolate;
  padding: var(--space-9) 0;
  background:
    radial-gradient(62% 78% at 88% 6%, rgba(35, 1, 251, .38), transparent 62%),
    radial-gradient(52% 70% at 4% 96%, rgba(168, 2, 144, .26), transparent 64%),
    var(--c-navy);
}
/* Stippentextuur, weggemaskeerd naar de randen zodat het niet druk wordt. */
.tv-models-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(72% 92% at 82% 8%, #000, transparent 72%);
  mask-image: radial-gradient(72% 92% at 82% 8%, #000, transparent 72%);
  opacity: .45;
}
/* Sectiekop op donker: de eyebrow-gradient en de navy koptekst zijn hier
   onleesbaar, dus expliciet licht. Het accentwoord houdt de gradient maar
   met lichte stops, zodat het niet wegvalt. */
/* LET OP de .au-head ertussen: verderop in dit bestand staat een blok
   `.tv-factors-sec .au-lead, .tv-models-sec .au-lead, …` met dezelfde
   specificiteit (0,2,0) dat later laadt. Zonder dat extra niveau won die
   en bleef de intro donkergrijs op navy — onleesbaar. */
.tv-models-sec .au-head .eyebrow { color: #fff; }
.tv-models-sec .au-head .eyebrow::before { background: linear-gradient(90deg, var(--c-sky, #58D0F5), var(--c-magenta-soft, #ff6fd8)); }
.tv-models-sec .au-head .au-h2 { color: #fff; }
.tv-models-sec .au-head .au-h2 .accent {
  background: linear-gradient(90deg, #7FE0FF 0%, #FF8BE0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tv-models-sec .au-head .au-lead { color: rgba(255, 255, 255, .82); }
/* Tweede prijsblok (meer rendement), 05-08-2026. Hergebruikt de
   .tv-factor*-classes van het eerste blok; alleen de band is eigen. */
.tv-rend-sec { padding: var(--space-9) 0; background: #F4F5FA; }
.tv-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: var(--space-7); align-items: stretch; }
.tv-model { display: flex; flex-direction: column; padding: 28px 26px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 20px; box-shadow: var(--shadow-card); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.tv-model:hover { transform: translateY(-4px); border-color: #DCDFEE; box-shadow: var(--shadow-card-hover); }
.tv-model-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.tv-chip { white-space: nowrap; padding: 5px 11px; border-radius: var(--radius-pill); font-family: var(--font-head); font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: #6E7488; background: #F2F3FA; }
.tv-chip.is-lead { color: #fff; background: var(--gradient-brand); box-shadow: 0 5px 12px rgba(168, 2, 142, .2); }
.tv-model-h { font-family: var(--font-head); font-size: 23px; font-weight: var(--fw-semibold); letter-spacing: -.015em; color: var(--c-navy); margin: 0 0 6px; }
.tv-model-sub { font-family: var(--font-head); font-size: 14px; font-weight: var(--fw-semibold); line-height: 1.45; letter-spacing: -.005em; margin: 0 0 14px; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: pretty; }
.tv-model-desc { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--c-text-muted); margin: 0; text-wrap: pretty; }
/* Compacte variant (12-08-2026): de kaart heeft alleen nog chips, naam en
   één regel, dus minder padding en geen ruimte meer voor een knop onderin. */
.tv-model--compact { padding: 24px 24px 26px; }
.tv-model-block { padding-top: 20px; border-top: 1px solid #EEF0F7; margin-bottom: 20px; }
.tv-model-qa { display: grid; gap: 14px; }
.tv-qa { display: flex; flex-direction: column; gap: 3px; }
.tv-qa-q { font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: -.005em; color: var(--c-navy); }
.tv-qa-a { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--c-text-muted); text-wrap: pretty; }
.tv-model-fit { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--c-text-muted); margin: 0; text-wrap: pretty; }
.tv-model-btn { margin-top: auto; align-self: flex-start; }

/* zelf chatten — breed paneel */
.tv-self { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-7); align-items: start; margin-top: var(--space-7); padding: 34px 32px; background: #F7F8FC; border: 1px solid var(--c-border); border-radius: 22px; }
.tv-self-tag { display: inline-flex; align-items: center; gap: 10px; line-height: 1.35; margin-bottom: 14px; font-family: var(--font-head); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--c-navy); }
.tv-self-tag-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--gradient-brand); box-shadow: 0 6px 14px rgba(168, 2, 142, .2); }
.tv-self-tag-ic svg { width: 16px; height: 16px; }
.tv-self-h { font-family: var(--font-head); font-size: 26px; font-weight: var(--fw-semibold); letter-spacing: -.02em; color: var(--c-navy); margin: 0 0 12px; text-wrap: pretty; }
.tv-self-p { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--c-text-muted); margin: 0 0 22px; max-width: 52ch; text-wrap: pretty; }
.tv-self-list { padding: 22px 24px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 16px; box-shadow: var(--shadow-soft); }
.tv-checks-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }

/* ---------- STANDAARD INBEGREPEN ---------- */
.tv-incl-sec { padding: var(--space-9) 0; background: #F4F5FA; }
/* Kaartraster, zoals het was. Kort geprobeerd als platte lijst (12-08-2026)
   maar op verzoek teruggezet; alleen de teksten zijn korter. */
.tv-incl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: var(--space-7); }
.tv-incl { display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 28px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.tv-incl-top { display: flex; align-items: center; gap: 13px; }
.tv-incl:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.tv-incl-ic { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; 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; }
.tv-incl-ic svg { width: 20px; height: 20px; }
.tv-incl-h { font-family: var(--font-head); font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--c-navy); margin: 0; text-wrap: balance; }
.tv-incl-p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 0; text-wrap: pretty; }
/* Slotregel onder de zes kaarten. Was links uitgelijnd platte grijze tekst
   met een standaardblauwe link, terwijl de hele sectie gecentreerd is — dat
   viel uit de stijl. Nu gecentreerd, met een haarlijn erboven als scheiding
   en de link in de merkkleur met een gradient-onderlijn. */
.tv-incl-note {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text-muted);
  margin: var(--space-7) auto 0;
  padding-top: var(--space-6);
  max-width: 60ch;
  text-align: center;
  text-wrap: pretty;
  border-top: 1px solid var(--c-border);
}
.tv-incl-note a {
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  text-decoration: none;
  background-image: var(--gradient-brand);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  padding-bottom: 2px;
  transition: color .18s var(--ease), background-size .18s var(--ease);
}
.tv-incl-note a:hover { color: var(--c-magenta); background-size: 100% 2.5px; }

/* ---------- UITBREIDINGEN ---------- */
.tv-addon-sec { padding: var(--space-9) 0; background: var(--c-white); }
.tv-addon-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: var(--space-7); }
.tv-addon { box-sizing: border-box; flex: 0 0 calc((100% - 2 * 20px) / 3); display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 28px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.tv-addon-top { display: flex; align-items: center; gap: 13px; }
.tv-addon:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.tv-addon-ic { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--gradient-brand); box-shadow: 0 7px 16px rgba(168, 2, 142, .2); }
.tv-addon-ic svg { width: 20px; height: 20px; }
.tv-addon-h { font-family: var(--font-head); font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--c-navy); margin: 0; text-wrap: balance; }
.tv-addon-p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--c-text-muted); margin: 0; text-wrap: pretty; }

/* ---------- KOSTEN EN OPBRENGSTEN (donker) ---------- */
.tv-value-sec { padding: var(--space-9) 0; background: var(--c-white); }
.tv-value { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-8); align-items: center; padding: 46px 44px; border-radius: 24px; overflow: hidden; background: var(--gradient-brand-rich, linear-gradient(120deg, #1b0a8f 0%, #2301fb 38%, #a80290 100%)); box-shadow: 0 30px 60px -20px rgba(20, 20, 100, .45), 0 12px 24px -12px rgba(170, 2, 142, .25); }
.tv-value::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(70% 90% at 85% 10%, #000, transparent 70%); mask-image: radial-gradient(70% 90% at 85% 10%, #000, transparent 70%); opacity: .5; }
.tv-value > * { position: relative; z-index: 1; }
.tv-value-eyebrow { display: block; 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; color: #58D0F5; }
.tv-value-h { font-family: var(--font-head); font-size: 34px; line-height: 1.15; letter-spacing: -.02em; font-weight: var(--fw-semibold); color: #fff; margin: 0 0 16px; max-width: 22em; text-wrap: pretty; }
.tv-value-accent { color: #58D0F5; }
.tv-value-p { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .84); margin: 0 0 12px; max-width: 52ch; text-wrap: pretty; }
.tv-value-p-last { margin-bottom: 26px; }
.tv-value-btn { background: #fff; color: #141464; border: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.tv-value-btn:hover { background: #fff; color: #141464; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0, 0, 0, .24); }
.tv-value-card { padding: 26px 26px 24px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); }
.tv-value-card-ttl { display: block; margin-bottom: 16px; font-family: var(--font-head); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.tv-value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tv-value-list li { display: flex; align-items: flex-start; gap: 11px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: #fff; text-wrap: pretty; }

/* ---------- FAQ ---------- */
.tv-faq { background: #F4F5FA; }

/* ---------- ADVIESGESPREK ---------- */
.tv-form-sec { padding: var(--space-9) 0; background: var(--c-white); }
.tv-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--space-8); align-items: start; }
.tv-form-copy .au-h2 { text-align: left; max-width: 20em; }
.tv-form-copy .lead { max-width: 50ch; margin-top: 16px; }
.tv-form-micro { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tv-form-micro li { padding: 7px 14px; border-radius: var(--radius-pill); background: #F4F5FA; border: 1px solid var(--c-border); font-family: var(--font-body); font-size: 13px; color: var(--c-text-muted); }
.tv-form-card { margin: 0; }

/* ---------- RESPONSIVE (uit de bron) ---------- */
@media (max-width: 1120px) {
  .tv-factor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-addon { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 980px) {
  .tv-hero .tv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .tv-model-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .tv-incl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-self, .tv-value, .tv-form-grid { grid-template-columns: minmax(0, 1fr); }
  .tv-value { padding: 34px 28px; }
  .tv-value-h { font-size: 28px; }
}
@media (max-width: 720px) {
  .tv-proof { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tv-factor-grid, .tv-incl-grid { grid-template-columns: minmax(0, 1fr); }
  .tv-addon { flex-basis: 100%; }
  .tv-checks-2col { grid-template-columns: minmax(0, 1fr); }
  .tv-quote-rows li { flex-direction: column; gap: 3px; }
  .tv-quote-label { flex-basis: auto; }
  .tv-factor-note { border-radius: 16px; align-items: flex-start; }
}


/* ---- Meer diepte op de kaarten (12-08-2026) ----------------------
   Op verzoek: minder plat wit. Elke kaart krijgt een gradient-haarlijn
   bovenaan — hetzelfde motief als .km-plan-card en .tv-quote al hadden —
   en een iets zwaardere schaduw. `overflow: hidden` klemt de lijn binnen
   de afgeronde hoek. */
.tv-factor, .tv-model, .tv-incl { overflow: hidden; }
.tv-factor::before, .tv-model::before, .tv-incl::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-brand);
}
.tv-model, .tv-incl { position: relative; }
.tv-factor, .tv-model, .tv-incl {
  box-shadow:
    0 2px 4px rgba(20, 20, 100, .06),
    0 18px 40px -22px rgba(20, 20, 100, .34),
    0 30px 60px -46px rgba(168, 2, 144, .3);
}
.tv-factor:hover, .tv-model:hover, .tv-incl:hover {
  box-shadow:
    0 3px 6px rgba(20, 20, 100, .08),
    0 26px 52px -22px rgba(20, 20, 100, .42),
    0 40px 76px -46px rgba(168, 2, 144, .38);
}
/* De kop begint onder de haarlijn, niet ertegenaan. */
.tv-factor, .tv-model--compact, .tv-incl { padding-top: 30px; }

/* ============================================================
   WP-CONTEXT — staat NIET in de bron
   ------------------------------------------------------------
   Nodig omdat de pagina hier in een Elementor-widget zit in
   plaats van in een React-SPA met een eigen designsysteem.
   ============================================================ */
/* De widget-wrappers van de vijf tv-secties + de oude pagina-widget.
   Elke Bconnect-widget zet zijn eigen wrapper-marge op 0; dat kan niet
   generiek, want Elementor zet die marge per widgettype. */
.elementor-widget-bconnect_tarieven,
.elementor-widget-bconnect_tv_hero,
.elementor-widget-bconnect_tv_factors,
.elementor-widget-bconnect_tv_models,
.elementor-widget-bconnect_tv_incl,
.elementor-widget-bconnect_tv_advies { margin: 0 !important; }

/* ---------- OPSPLITSING 13-08-2026 ----------
   De hardening-regels hieronder in dit bestand hingen aan
   `.elementor-widget-bconnect_tarieven`, de wrapper van de pagina-widget die
   de hele pagina rendeerde. Nu elke sectie een eigen widget is, bestaat die
   wrapper niet meer en zouden die regels stilvallen. Ze scopen daarom op
   `.tv-sec`, een class die elke tarieven-sectie zelf meekrijgt — zelfde
   specificiteit (0,2,0), dus de cascade verschuift niet, en het werkt ook
   als de secties later verplaatst of gedupliceerd worden.

   De FAQ van deze pagina komt sinds de opsplitsing uit de gedeelde
   `bconnect_faq`-widget, met "tv-faq tv-sec" in het veld "extra classes".
   Vandaar de dubbele class hieronder: die verslaat `.au-faq` uit faq.css
   ongeacht in welke volgorde de twee stylesheets in de pagina staan.
   -------------------------------------------- */
.au-faq.tv-faq { background: #F4F5FA; }

/* Een eigen afbeelding in plaats van een lijnicoon in de gradient-tegel.
   De tegelmaat blijft gelijk; het beeld vult hem met behoud van verhouding.
   Geen gradient-achtergrond meer, want die zou door een PNG met transparante
   randen heen schijnen. */
.tv-sec .bc-ic-img {
	background: none !important;
	padding: 0;
	overflow: hidden;
}
.tv-sec .bc-ic-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Containerbreedte per sectie, zoals elke andere Bconnect-widget. */
.tv-hero > .container,
.tv-factors-sec > .container,
.tv-models-sec > .container,
.tv-incl-sec > .container,
.tv-addon-sec > .container,
.tv-value-sec > .container,
.tv-form-sec > .container {
	width: 100%;
	max-width: var(--container, 1280px);
	margin: 0 auto;
	padding: 0 var(--gutter, 56px);
}

/* De hero-schil (.au-hero/.sol-hero) komt in de bron uit een andere laag
   die op deze pagina niet meelaadt; hier dus zelf de basis. Geen vaste
   foldhoogte: deze hero heeft geen logobalk die eronder moet gluren, en
   `ingekort-premium.css` compact de niet-salespagina's juist bewust. */
.tv-hero { position: relative; min-height: 704px; padding: 64px 0; display: flex; flex-direction: column; justify-content: center; }
.tv-hero > .container { position: relative; z-index: 1; }
.tv-hero .hero-bg { position: absolute; inset: 0; background: var(--c-white); pointer-events: none; }
.tv-hero .au-hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ---------- HERO-TYPOGRAFIE: de "std"-schaal uit upgrade-hero.css ----------
   De bron zet sitewide `body[data-hero-scale="std"]` op elke NIET-salespagina
   (dus niet op home/leadgeneratie/meer-rendement/automotive/home-en-living,
   die houden hun eigen schaal). /tarieven/ krijgt daardoor een grotere kop —
   op 1440 gemeten 54px, niet de 42px van de salespagina's — en een lead van
   18px met max-width 38em.

   Dit thema heeft die laag niet, dus hij staat hier gescoped op de widget in
   plaats van op de body: zo verandert er niets op de andere pagina's. Zelfde
   waarden en zelfde 640px-breakpoint als de bron.
   ------------------------------------------------------------------------- */
.tv-hero h1 {
	font-family: var(--font-head);
	font-weight: var(--fw-semibold);
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: var(--c-navy);
	margin: 0 0 20px;
	max-width: 22ch;
	text-wrap: balance;
}
.tv-hero .lead,
.tv-factors-sec .au-lead,
.tv-models-sec .au-lead,
.tv-incl-sec .au-lead,
.tv-addon-sec .au-lead,
.tv-form-copy .lead {
	font-family: var(--font-body);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.66;
	color: var(--c-text-muted);
	max-width: 38em;
}
.tv-hero .lead { margin: 0 0 32px; }
@media (max-width: 640px) {
	.tv-hero h1 { font-size: clamp(30px, 8vw, 38px); max-width: none; }
}
/* Zelfde vangnet als .au-hero.sol-hero in mr-hero.css: onder 720px geen
   vaste foldhoogte, anders krijgt een korte hero onnodig veel lucht. */
@media (max-width: 720px) {
	.tv-hero { min-height: 0; }
}
.tv-hero .au-textlink { font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: color .18s var(--ease), gap .18s var(--ease); }
.tv-hero .au-textlink:hover { color: var(--c-grad-magenta); gap: 11px; }

/* Hero-entrance: de zichtbare eindstaat is de basis, de fade komt er
   alleen bij als beweging gewenst is (zelfde patroon als mr-hero). */
.tv-hero .hh-in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.tv-hero .hh-in { transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
	.tv-hero .hh-in.is-in { opacity: 1; transform: none; }
	.tv-hero.is-settled .hh-in { transition: none; opacity: 1; transform: none; }
}

/* Gradient-tekst en gradient-tegels afdwingen tegen de theme-resets. */
.tv-sec .accent,
.tv-sec .tv-proof-h,
.tv-sec .tv-model-sub {
	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;
}
.tv-sec .tv-quote-ic,
.tv-sec .tv-factor-ic,
.tv-sec .tv-addon-ic,
.tv-sec .tv-self-tag-ic,
.tv-sec .tv-chip.is-lead {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.tv-sec .tv-quote-ic svg,
.tv-sec .tv-factor-ic svg,
.tv-sec .tv-addon-ic svg,
.tv-sec .tv-self-tag-ic svg { color: #fff !important; stroke: #fff !important; }
.tv-sec .tv-check { background: linear-gradient(135deg, #46C257, #2F9E40) !important; color: #fff !important; }
.tv-sec .tv-check svg { stroke: #fff !important; }
.tv-sec .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.tv-sec .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}
/* De witte knop op het donkere vlak mag de btn-primary-hardening hierboven
   niet erven; staat er daarom ná, met dezelfde specificiteit. */
.tv-sec .tv-value-btn,
.tv-sec .tv-value-btn:hover {
	background: #fff !important;
	color: #141464 !important;
}
/* Het accentwoord in de donkere bank is lichtblauw, geen gradient — de
   .accent-regel hierboven zou het anders transparant maken. */
.tv-sec .tv-value-accent {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: #58D0F5 !important;
	color: #58D0F5 !important;
}

/* ---------- Het echte formulier in .tv-form-card ----------
   De bron had hier een React-formulier met .km-*-stijlen die dit thema
   niet heeft. Nu staat er het Elementor-formulier (template #147). De
   kaart eromheen krijgt de opmaak die .km-card in de bron had; de velden
   zelf komen uit bconnect-forms.css.
   ---------------------------------------------------------- */
.tv-form-card {
	padding: 28px 26px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 20px;
	box-shadow: 0 2px 4px rgba(20, 20, 100, .05), 0 24px 50px -24px rgba(20, 20, 100, .22);
}
/* De [elementor-template]-container brengt eigen padding mee; die eruit,
   anders staan de velden smaller dan de kaart (bekende Elementor-valkuil,
   zie het CTA-blok in bconnect-site-cta.css). */
.tv-form-card .e-con,
.tv-form-card .e-con-inner { padding: 0 !important; }
.tv-form-card .elementor-widget-form { margin: 0 !important; }
/* Veldindeling gelijk aan de bron: naam en telefoonnummer naast elkaar op de
   eerste regel (dat was daar .km-row), e-mailadres en bedrijf elk over de volle
   breedte. Het formuliertemplate zet alle vier op `elementor-col-25`, wat in
   een kaart van ~555px vier onleesbaar smalle kolommen zou geven. */
.tv-form-card .elementor-form-fields-wrapper .elementor-field-group {
	width: 100%;
	flex-basis: 100%;
	max-width: 100%;
}
.tv-form-card .elementor-field-group-naam,
.tv-form-card .elementor-field-group-telefoon {
	flex-basis: 50%;
	max-width: 50%;
}
/* Onder 480px past die 50/50-rij niet meer: alles onder elkaar. */
@media (max-width: 480px) {
	.tv-form-card .elementor-field-group-naam,
	.tv-form-card .elementor-field-group-telefoon {
		flex-basis: 100%;
		max-width: 100%;
	}
}
/* De verzendknop staat op `flex: 0 1 100%`; volle breedte is hier gewenst,
   maar `width:auto` alleen is niet genoeg — ook flex vastzetten. */
.tv-form-card .elementor-field-type-submit { width: 100%; flex: 0 0 100%; }
.tv-form-card .elementor-field-type-submit button { width: 100%; justify-content: center; }

@media (max-width: 767px) {
	.tv-form-card { padding: 20px 18px; border-radius: 16px; }
}