/* Interforce — huisstijl. Kleuren en lettertypes uit de oude site (themes.css). */
:root {
  --rood: #e32825;
  --rood-donker: #a81b27;
  --petrol: #005568;
  --donker: #1c1c1c;
  --donker-2: #44454a;
  --grijs: #a1a2a5;
  --lijn: #e2e2e2;
  --licht: #f7f7f7;
  --wit: #fff;
  --kop-font: 'aglet-sans', 'Nunito Sans', system-ui, sans-serif;
  --tekst-font: 'Open Sans', system-ui, sans-serif;
  --breed: 1240px;
  --rond: 14px;
  --schaduw: 0 10px 30px rgba(28, 28, 28, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.7 var(--tekst-font); color: var(--donker-2); background: var(--wit); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--rood); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rood-donker); }
h1, h2, h3, h4, h5, h6 { font-family: var(--kop-font); color: var(--donker); line-height: 1.2; margin: 0 0 .6em; font-weight: 800; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; font-weight: 700; }
h6 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: .35em; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid var(--lijn); padding: .5em .75em; text-align: left; }
.midden { text-align: center; }
.houder { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.naar-inhoud { position: absolute; left: -9999px; }
.naar-inhoud:focus { left: 16px; top: 16px; z-index: 100; background: var(--wit); padding: 8px 14px; }

/* ---------- knoppen ---------- */
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.midden .knoppen, .knoppen.midden { justify-content: center; }
.knop, button.knop {
  display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.6em; border-radius: 999px;
  background: var(--rood); color: var(--wit); border: 2px solid var(--rood); font: 700 .875rem/1 var(--kop-font);
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.knop::after { content: '→'; font-size: 1.1em; transition: transform .15s; }
.knop:hover { background: var(--rood-donker); border-color: var(--rood-donker); color: var(--wit); }
.knop:hover::after { transform: translateX(3px); }
.knop-rand { background: transparent; color: var(--donker); border-color: var(--donker); }
.knop-rand:hover { background: var(--donker); border-color: var(--donker); color: var(--wit); }
.knop-licht { background: var(--wit); color: var(--rood); border-color: var(--wit); }
.knop-licht:hover { background: transparent; color: var(--wit); border-color: var(--wit); }

/* ---------- header ---------- */
.kop { position: sticky; top: 0; z-index: 50; background: var(--wit); box-shadow: 0 1px 0 var(--lijn); }
.kop-binnen { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.logo img { width: 180px; height: auto; }
.hoofdnav { margin-left: auto; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.menu > li { position: relative; margin: 0; }
.menu > li > a { display: block; padding: 10px 14px; color: var(--donker); font: 600 .95rem var(--kop-font); text-decoration: none; border-radius: 8px; }
.menu > li > a:hover, .menu > li > a[aria-current] { color: var(--rood); }
.menu > li.rechts:first-of-type, .menu .rechts { font-size: .9rem; }
.menu li.rechts:nth-last-child(3) { margin-left: 24px; }
.knop-li { margin-left: 12px !important; }
.sub-open { display: none; }
.megamenu {
  position: absolute; top: 100%; left: 0; min-width: 260px; padding: 16px; background: var(--wit); border-radius: var(--rond);
  box-shadow: var(--schaduw); border: 1px solid var(--lijn); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s;
}
.megamenu ul { list-style: none; margin: 0; padding: 0; }
.megamenu li { margin: 0; }
.megamenu a { display: block; padding: 7px 10px; color: var(--donker); text-decoration: none; border-radius: 8px; font-size: .95rem; }
.megamenu a:hover, .megamenu a[aria-current] { background: var(--licht); color: var(--rood); }
.megamenu .groep > a { font-weight: 700; font-family: var(--kop-font); }
.megamenu .groep ul a { padding-left: 22px; font-size: .9rem; color: var(--donker-2); }
.breed .megamenu { left: 50%; transform: translate(-50%, 6px); width: min(860px, 90vw); }
.breed .megamenu > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.heeft-sub:hover .megamenu, .heeft-sub:focus-within .megamenu { opacity: 1; visibility: visible; transform: translateY(0); }
.breed.heeft-sub:hover .megamenu, .breed.heeft-sub:focus-within .megamenu { transform: translate(-50%, 0); }
.menuknop { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.menuknop span, .menuknop span::before, .menuknop span::after { position: absolute; left: 10px; width: 24px; height: 2px; background: var(--donker); content: ''; transition: .2s; }
.menuknop span { top: 21px; }
.menuknop span::before { top: -7px; left: 0; }
.menuknop span::after { top: 7px; left: 0; }
.menu-open .menuknop span { background: transparent; }
.menu-open .menuknop span::before { top: 0; transform: rotate(45deg); }
.menu-open .menuknop span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .menuknop { display: block; }
  .hoofdnav { position: fixed; inset: 84px 0 0 0; background: var(--wit); overflow-y: auto; padding: 16px 16px 40px; display: none; }
  .menu-open .hoofdnav { display: block; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > li { border-bottom: 1px solid var(--lijn); display: flex; flex-wrap: wrap; align-items: center; }
  .menu > li > a { flex: 1; padding: 14px 4px; font-size: 1.05rem; }
  .menu li.rechts:nth-last-child(3) { margin-left: 0; }
  .knop-li { margin: 20px 0 0 !important; border: 0 !important; }
  .sub-open { display: block; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
  .sub-open::before { content: ''; position: absolute; left: 16px; top: 15px; width: 9px; height: 9px; border: solid var(--donker); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: .2s; }
  .sub-open[aria-expanded="true"]::before { transform: rotate(-135deg); top: 20px; }
  .megamenu, .breed .megamenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 12px; width: 100%; display: none; min-width: 0; }
  .megamenu.open { display: block; }
  .breed .megamenu > ul { grid-template-columns: 1fr; }
  .heeft-sub:hover .megamenu { transform: none; }
  .breed.heeft-sub:hover .megamenu, .breed.heeft-sub:focus-within .megamenu { transform: none; }
}

/* ---------- hero's ---------- */
.banner { position: relative; min-height: min(78vh, 720px); display: flex; align-items: center; color: var(--wit); overflow: hidden; background: var(--donker); }
.banner-beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,28,28,.85) 0%, rgba(28,28,28,.55) 45%, rgba(227,40,37,.15) 100%); z-index: 1; }
.banner-tekst { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.banner-tekst > * { max-width: 640px; }
.banner h1 { color: var(--wit); font-size: clamp(2.4rem, 6vw, 4.6rem); }
.banner p { font-size: 1.15rem; }

.paginakop { position: relative; background: var(--donker); color: var(--wit); overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; }
.paginakop-beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.paginakop::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(28,28,28,.85), rgba(28,28,28,.35) 70%); }
.paginakop::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38%; height: 8px; background: var(--rood); z-index: 2; }
.paginakop-binnen { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 56px; }
.paginakop h1 { color: var(--wit); max-width: 760px; margin: 0; }
.paginakop-tekst { max-width: 640px; margin-top: 1em; }
.paginakop-figuur { position: absolute; right: max(24px, calc((100vw - var(--breed)) / 2)); bottom: 0; z-index: 2; max-height: 90%; width: auto; max-width: 34%; }
.paginakop.zonder-beeld { min-height: 220px; background: linear-gradient(120deg, var(--donker), #2b2b30); }
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: .875rem; }
.kruimel li { margin: 0; color: rgba(255,255,255,.75); }
.kruimel li + li::before { content: '›'; margin-right: 6px; }
.kruimel a { color: var(--wit); text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }
@media (max-width: 800px) { .paginakop-figuur { display: none; } .paginakop { min-height: 260px; } }

/* ---------- blokken ---------- */
.blok { padding: clamp(56px, 8vw, 100px) 0; position: relative; }
.t-grijs { background: var(--licht); }
.t-donker { background: var(--donker); color: rgba(255,255,255,.85); }
.t-donker h1, .t-donker h2, .t-donker h3, .t-donker h4, .t-donker h5, .t-donker h6 { color: var(--wit); }
.t-donker a:not(.knop) { color: var(--wit); }
.t-donker .knop-rand { color: var(--wit); border-color: var(--wit); }
.t-donker .knop-rand:hover { background: var(--wit); color: var(--donker); }
.blok + .blok.t-licht:not(:first-child) { padding-top: clamp(32px, 4vw, 56px); }
.blok .houder > p, .blok .houder > ul, .blok .houder > ol { max-width: 860px; }
.blok .houder > p.midden { margin-left: auto; margin-right: auto; }
.intro { max-width: 860px; margin-bottom: 2.2em; }
.intro.midden { margin-left: auto; margin-right: auto; }
.intro + .outro, .outro { margin-top: 2em; }
.achtergrond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; pointer-events: none; }
.blok > .houder { position: relative; }

.raster { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.raster.n2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.raster.n4, .raster.n6 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.kaart { background: var(--wit); border-radius: var(--rond); padding: 28px; box-shadow: var(--schaduw); position: relative; transition: transform .2s, box-shadow .2s; }
.t-grijs .kaart { background: var(--wit); }
.t-licht .kaart { background: var(--licht); box-shadow: none; }
.t-donker .kaart { background: rgba(255,255,255,.06); box-shadow: none; border: 1px solid rgba(255,255,255,.12); }
.kaart > :last-child, .kaarttekst > :last-child { margin-bottom: 0; }
.kaart .icoon img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 18px; }
.kaart h5, .kaart h4, .kaart h3, .kaarttitel { font-family: var(--kop-font); font-weight: 700; color: var(--donker); font-size: 1.15rem; margin-bottom: .5em; }
.t-donker .kaarttitel { color: var(--wit); }
.kaart .beeld img, .kaart > img { border-radius: calc(var(--rond) - 4px); width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: 18px; }
.k-image .beeld img, .k-gallery .beeld img { aspect-ratio: auto; object-fit: contain; }
.k-links, .k-image, .k-gallery { box-shadow: none; background: transparent !important; padding: 0; }
.k-links a { display: inline-block; }
.kaart:has(> a:only-child), .kaart:has(a:not(.knop)):hover { }
.kaart:hover { transform: translateY(-3px); }
.k-links:hover, .k-image:hover, .k-gallery:hover { transform: none; }

/* Succesverhalen-kaarten */
.k-verhaal { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.k-verhaal > a { color: inherit; text-decoration: none; display: block; }
.k-verhaal .beeld img { border-radius: 0; margin: 0; aspect-ratio: 16/10; }
.k-verhaal .kaarttitel { padding: 22px 24px 0; font-size: 1.2rem; }
.k-verhaal .ondertitel { padding: 0 24px; color: var(--rood); font-weight: 600; margin: 0; }
.k-verhaal .meta { padding: 14px 24px 22px; margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .85rem; }
.k-verhaal .datum { margin: 0; color: var(--grijs); }
.labels ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.labels li { margin: 0; }
.labels a { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--licht); color: var(--donker); font-size: .8rem; text-decoration: none; }
.t-grijs .labels a { background: var(--licht); }

/* Splitsecties (tekst naast beeld/accordeon) */
.split { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); align-items: center; }
.kolom { flex: var(--b, 6) 1 0; min-width: min(100%, 320px); }
.kolom .beeld img, .kolom > img { border-radius: var(--rond); width: 100%; }
.c-gallery .raster { grid-template-columns: 1fr; }
.c-gallery .kaart, .c-gallery .beeld { padding: 0; background: none; box-shadow: none; }
.custom-ft-section { background: var(--rood) !important; color: var(--wit); }
.custom-ft-section h2 { color: var(--wit); }
.custom-ft-section a:not(.knop) { color: var(--wit); }
.custom-ft-section .knop { background: var(--wit); color: var(--rood); border-color: var(--wit); }
.custom-ft-section .knop:hover { background: var(--donker); color: var(--wit); border-color: var(--donker); }
.custom-ft-section .achtergrond { opacity: .1; }
.icon-bg { display: inline-block; }
.company-icon { display: flex; margin-bottom: 14px; }
.company-icon .icon-bg img { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--rood); margin-right: -10px; background: var(--wit); object-fit: cover; }
.custom-company-text p, .custom-company-text a { color: var(--wit); }
.custom-company-text img { display: inline; width: 14px; margin-left: 6px; }

/* Accordeon */
details { border-bottom: 1px solid var(--lijn); padding: 4px 0; }
details summary { cursor: pointer; list-style: none; padding: 14px 36px 14px 0; font: 700 1.05rem var(--kop-font); color: var(--donker); position: relative; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; position: absolute; right: 4px; top: 8px; font-size: 1.6rem; color: var(--rood); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details > :not(summary) { padding-bottom: 12px; }
.t-donker details summary { color: var(--wit); }

/* Tabs */
.tabknoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; justify-content: center; }
.tabknoppen button { border: 2px solid var(--lijn); background: var(--wit); color: var(--donker); padding: .7em 1.3em; border-radius: 999px; font: 700 .9rem var(--kop-font); cursor: pointer; }
.tabknoppen button[aria-selected="true"] { background: var(--rood); border-color: var(--rood); color: var(--wit); }

/* Ingesloten */
.insluiten { position: relative; aspect-ratio: 16/9; border-radius: var(--rond); overflow: hidden; }
.insluiten iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- formulier ---------- */
.formulier { background: var(--wit); border-radius: var(--rond); padding: clamp(20px, 4vw, 40px); box-shadow: var(--schaduw); max-width: 860px; margin: 0 auto; }
.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.veld { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--donker); font-size: .9rem; }
.veld.vol { grid-column: 1 / -1; }
.veld input, .veld textarea { font: 400 1rem var(--tekst-font); padding: 12px 14px; border: 1.5px solid var(--lijn); border-radius: 10px; background: var(--licht); color: var(--donker); width: 100%; }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--rood); background: var(--wit); }
.veld.fout input, .veld.fout textarea { border-color: var(--rood); }
.potje { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy { font-size: .85rem; color: var(--grijs); margin: 18px 0; }
.formstatus { margin: 14px 0 0; font-weight: 600; }
.formstatus.goed { color: #0a8a4a; }
.formstatus.mis { color: var(--rood); }

/* ---------- footer ---------- */
.voet { background: var(--donker); color: rgba(255,255,255,.75); font-size: .95rem; }
.voet a { color: rgba(255,255,255,.85); text-decoration: none; }
.voet a:hover { color: var(--wit); text-decoration: underline; }
.voet-raster { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-top: 72px; padding-bottom: 56px; }
.voet-logo { width: 160px; margin-bottom: 20px; filter: brightness(0) invert(1); }
.voet-kop { font: 700 1.05rem var(--kop-font); color: var(--wit); margin-bottom: .8em; }
.voet ul { list-style: none; padding: 0; margin: 0 0 1.6em; }
.voet li { margin-bottom: .45em; }
.sociaal { display: flex; gap: 10px; }
.sociaal a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); }
.sociaal a:hover { background: var(--rood); }
.sociaal img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.keurmerken { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.keurmerken img { height: 44px; width: auto; background: var(--wit); border-radius: 8px; padding: 6px; }
.voet-onder { border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.voet-onder .houder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 22px; }
.voet-onder ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; }
.voet-onder li { margin: 0; }
@media (max-width: 900px) { .voet-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .houder { padding: 0 16px; }
  .voet-raster { grid-template-columns: 1fr; gap: 24px; }
  .logo img { width: 150px; }
  .kop-binnen { min-height: 72px; }
  .hoofdnav { inset: 72px 0 0 0; }
  .raster, .raster.n2, .raster.n4, .raster.n6 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Tabpanelen met dienst-kaarten (homepage "Diensten / Bouwstenen") */
.tabpaneel { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tabpaneel[hidden] { display: none; }
.tabpaneel > a { display: flex; flex-direction: column; background: var(--licht); border-radius: var(--rond); padding: 28px; color: var(--donker-2); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.tabpaneel > a:hover { transform: translateY(-3px); box-shadow: var(--schaduw); background: var(--wit); }
.tabpaneel > a img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 18px; }
.tabpaneel > a h6:first-of-type { font-size: 1.15rem; margin-bottom: .5em; }
.tabpaneel > a h6:last-child { margin: auto 0 0; padding-top: 10px; color: var(--rood); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.tabpaneel > a h6:last-child::after { content: ' →'; }
.home-blog-section .k-verhaal:nth-child(n+5) { display: none; }

/* Genummerde stappen */
.stappen { list-style: none; padding: 0; margin: 2.4em 0 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: none; }
.stappen li { background: var(--licht); border-radius: var(--rond); padding: 28px; margin: 0; position: relative; }
.t-grijs .stappen li { background: var(--wit); }
.stapnr { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rood); color: var(--wit); font: 800 1.25rem var(--kop-font); margin-bottom: 16px; }
.stappen li p:last-child { margin-bottom: 0; }

/* CTA "Klaar voor dat extra zetje" */
.raster.n5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cta-blok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: .4em 0 1.2em; }
.avatars { display: flex; }
.avatars img { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--wit); margin-right: -12px; background: var(--wit); object-fit: cover; }
.avatars img:last-child { background: var(--donker); padding: 10px; object-fit: contain; }
.cta-blok a { color: var(--wit); }
.cta-blok a img { display: inline; width: 14px; margin-left: 6px; vertical-align: middle; }
.cta-blok p { margin: 0; }
.banner .knop-rand, .paginakop .knop-rand { color: var(--wit); border-color: var(--wit); }
.banner .knop-rand:hover, .paginakop .knop-rand:hover { background: var(--wit); color: var(--donker); }

/* Verhaalpagina's (succesverhalen) */
.verhaalkop { padding: 40px 0 0; background: linear-gradient(180deg, var(--licht) 0, var(--licht) 70%, var(--wit) 70%); }
.verhaalkop .kruimel li, .verhaalkop .kruimel a { color: var(--donker-2); }
.verhaalkop h1 { max-width: 900px; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.verhaalkop-beeld { position: relative; margin-top: 28px; }
.verhaalkop-beeld > img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--rond); }
.verhaalkop-logo { position: absolute; left: 28px; bottom: -36px; background: var(--wit); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 16px 22px; }
.verhaalkop-logo img { max-height: 64px; max-width: 200px; width: auto; }
.verhaal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.b-verhaal { padding-top: 80px; }
.verhaal-tekst h2:first-child { display: none; }
.verhaal-tekst h3 { margin-top: 1.6em; }
.verhaal-tekst p { font-size: 1.05rem; }
.verhaal-info { position: sticky; top: 110px; background: var(--licht); border-radius: var(--rond); padding: 26px; }
.verhaal-info h5 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); margin: 0 0 .4em; }
.verhaal-info h5 ~ h5 { margin-top: 1.4em; }
.verhaal-info p { margin: 0; color: var(--donker); font-weight: 600; }
.verhaal-info a:not(.knop) { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: 999px; background: var(--wit); color: var(--donker); font-size: .85rem; text-decoration: none; }
.verhaal-info .knop { margin-top: 24px; }
@media (max-width: 860px) { .verhaal { grid-template-columns: 1fr; } .verhaal-info { position: static; } }
.b-verhalenlijst .raster { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.menu > li > a, .megamenu .groep > a, .kaarttitel, .tabknoppen button, .knop, .voet-kop { font-family: var(--kop-font); }

/* Interforce-schild (homepage): kaartjes links/rechts, schild in het midden */
.schild-knoppen { position: relative; display: inline-flex; gap: 0; padding: 5px; border-radius: 999px; background: var(--licht); left: 50%; transform: translateX(-50%); }
.schild-knoppen button { position: relative; z-index: 1; border: 0; background: none; transition: color .3s; }
.schild-knoppen button[aria-selected="true"] { background: none; color: var(--wit); }
.schild-slider { position: absolute; top: 5px; bottom: 5px; left: 5px; width: 0; border-radius: 999px; background: #7F040E; transition: left .3s ease, width .3s ease, background-color .3s ease; }
.schild-paneel { display: grid; grid-template-columns: 1fr minmax(260px, 380px) 1fr; gap: 28px; align-items: center; margin-top: 12px; }
.schild-paneel[hidden] { display: none; }
.schild-kolom { display: flex; flex-direction: column; gap: 20px; }
.schild-kaart { display: block; padding: 22px; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--wit); color: var(--donker-2); text-decoration: none; transition: border-color .3s, box-shadow .3s; }
.schild-kaart:hover, .schild-kaart.actief { border-color: var(--accent); box-shadow: 0 0 40px rgba(28, 28, 28, .16); color: var(--donker-2); }
.schild-kop { display: flex; align-items: center; gap: 12px; font: 700 1.1rem var(--kop-font); color: var(--donker); margin-bottom: 8px; }
.schild-kop img { width: 36px; height: 36px; }
.schild-tekst { display: block; font-size: .95rem; line-height: 1.6; }
.schild-meer { display: inline-block; margin-top: 12px; font: 700 .8rem var(--kop-font); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.schild-meer::after { content: ' →'; }
.schild-beeld { display: flex; justify-content: center; }
.schild-svg { width: 100%; height: auto; max-width: 380px; filter: drop-shadow(0 12px 30px rgba(28, 28, 28, .12)); overflow: visible; }
.schild-svg [id^="tab"] { transition: transform .3s ease; cursor: pointer; }
.schild-svg [id^="tab"].actief { transform: translate(var(--dx), var(--dy)); }
@media (max-width: 960px) {
  .schild-paneel { grid-template-columns: 1fr; }
  .schild-beeld { order: -1; }
  .schild-svg { max-width: 260px; }
}

/* Taalkiezer */
.taalkiezer > a { font-weight: 700; letter-spacing: .04em; }
.taalkiezer .megamenu { min-width: 160px; left: auto; right: 0; }
.taalkiezer .megamenu a[aria-current] { color: var(--rood); font-weight: 700; }
@media (max-width: 1100px) { .taalkiezer .megamenu { right: auto; } }

/* Bechtle-blok in de footer */
.bechtle-naam { font: 800 1.35rem var(--kop-font); color: var(--wit); letter-spacing: .02em; }

/* Vacatures (uit Cirrus) */
.vacaturelijst { display: flex; flex-direction: column; gap: 12px; }
.vacature-status { margin: 0; }
.vacature-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 18px 22px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); text-decoration: none; color: var(--donker-2); transition: border-color .2s, box-shadow .2s; }
.vacature-regel:hover { border-color: var(--rood); box-shadow: var(--schaduw); color: var(--donker-2); }
.vacature-regel .kaarttitel { flex: 1 1 260px; margin: 0; }
.vacature-regel .schild-meer, .vacature-kaart .schild-meer { --accent: var(--rood); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--licht); color: var(--donker); font-size: .8rem; }
.vacature-kaart { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--donker-2); }
.vacature { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.vacature-tekst .chips { margin-bottom: 1.4em; }
.vacature-solliciteer { position: sticky; top: 110px; }
.vacature-formulier { margin: 0; }
.vacature-formulier .velden { grid-template-columns: 1fr; }
.vacature-formulier h2 { font-size: 1.5rem; }
.vacature-formulier input[type=file] { background: var(--wit); padding: 10px; }
.vacature-melding { padding: 18px 22px; border-radius: var(--rond); margin-bottom: 16px; }
.vacature-melding.goed { background: #e8f6ee; color: #0a6b3a; }
.vacature-melding.mis { background: #fdecec; color: var(--rood-donker); }
@media (max-width: 900px) { .vacature { grid-template-columns: 1fr; } .vacature-solliciteer { position: static; } }

/* ===== Visuele aansluiting op de oude site (vergelijking 10-10) ===== */

/* Knoppen: ↗ vóór de tekst, iets royaler */
.knop, button.knop { padding: .95em 1.7em; font-size: .9rem; gap: .55em; }
.knop::after { content: none; }
.knop::before { content: '↗'; font-size: 1.05em; line-height: 1; transition: transform .15s; }
.knop:hover::before { transform: translate(2px, -2px); }
.knop-li .knop::before, .formulier button.knop::before { content: none; }

/* Hero's: rode schuine vlakken over de foto, schuine onderrand */
.banner::before { background: linear-gradient(90deg, rgba(28,28,28,.55) 0%, rgba(28,28,28,.15) 60%, rgba(28,28,28,0) 100%); }
.banner::after, .paginakop:not(.zonder-beeld)::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 46%, rgba(227,40,37,.55) 46.1% 100%);
}
.banner { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.paginakop:not(.zonder-beeld) { clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); min-height: 320px; padding-bottom: 40px; }
.paginakop::before { background: linear-gradient(90deg, rgba(28,28,28,.55), rgba(28,28,28,.2) 55%, rgba(28,28,28,0)); }
.paginakop h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.paginakop-binnen { padding-top: 56px; padding-bottom: 64px; }
.paginakop-figuur { z-index: 3; }
.banner h1 { border-left: 3px solid var(--wit); padding-left: 14px; }

/* Rode accentsecties (oud: c1 + witte tekst) i.p.v. zwart */
.t-donker { background: var(--rood); color: rgba(255,255,255,.92); }
.t-donker .kaart { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.55); border-radius: 4px; }
.t-donker .kaart h5, .t-donker .kaart h4, .t-donker .kaart h3, .t-donker .kaart p { color: var(--wit); }
.t-donker .kaart .icoon img { width: 34px; height: 34px; filter: brightness(0) invert(1); }
.blok.t-donker { clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); }
.custom-ft-section.blok { clip-path: none; }

/* Petrol secties met schuine randen (oud: background-cover) */
.custom-blog-section, .custom-video-section { background: var(--petrol) !important; color: rgba(255,255,255,.9); clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
.custom-blog-section h2, .custom-video-section h2, .custom-video-section h3 { color: var(--wit); }
.custom-blog-section .knop-rand, .custom-video-section .knop-rand { color: var(--wit); border-color: var(--wit); }
.custom-blog-section .knop-rand:hover { background: var(--wit); color: var(--petrol); }
.custom-video-section p, .custom-video-section a:not(.knop) { color: rgba(255,255,255,.9); }

/* Icoonkaarten: icoon naast de titel, maximaal drie per rij */
.raster.n4, .raster.n5, .raster.n6 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.k-iconbox { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; padding: 22px; border: 1px solid var(--lijn); box-shadow: none; border-radius: 6px; }
.k-iconbox > a { display: contents; color: inherit; text-decoration: none; }
.k-iconbox .kaarttekst { display: contents; }
.k-iconbox .icoon img { width: 22px; height: 22px; margin: 2px 0 0; }
.k-iconbox h5 { margin: 0 0 .4em; font-size: 1rem; }
.k-iconbox p, .k-iconbox ul { grid-column: 1 / -1; font-size: .9rem; }
.t-grijs .k-iconbox { background: var(--wit); }
.t-licht .k-iconbox { background: var(--licht); }
.kaart:hover { transform: none; }
/* Icoonkaart mét foto (de vier overzichtspagina's onder Wat doen we): zoals op de oude site
   (box-style-3) een kopfoto van 202 px met het icoon in een wit vakje linksboven. Zonder dit
   werd de foto net als het icoon 22 px en stond er een mini-fotootje naast het icoon. */
.k-iconbox:has(.icoon img:nth-child(2)) { display: flex; flex-direction: column; padding: 20px; transition: box-shadow .3s; }
.k-iconbox:has(.icoon img:nth-child(2)) > a { display: flex; flex-direction: column; }
.k-iconbox:has(.icoon img:nth-child(2)) .kaarttekst { display: block; }
.k-iconbox .icoon:has(img:nth-child(2)) { position: relative; height: 202px; overflow: hidden; }
.k-iconbox .icoon:has(img:nth-child(2)) img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform .3s; }
.k-iconbox .icoon:has(img:nth-child(2)) img:nth-child(2) { position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; padding: 8px; margin: 0; background: var(--wit); box-sizing: content-box; }
.k-iconbox:has(.icoon img:nth-child(2)) h5 { margin: 0; padding: 16px 0 12px; }
.k-iconbox:has(.icoon img:nth-child(2)):hover { box-shadow: 0 0 40px rgba(28, 28, 28, .16); }
.k-iconbox:has(.icoon img:nth-child(2)):hover .icoon img:first-child { transform: scale(1.05); }

/* "De functionaliteiten": lijst zonder kaarten, twee kolommen */
.cloud-telefone-icon-box .raster { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 6px 40px; }
.cloud-telefone-icon-box .k-iconbox { background: none !important; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; padding: 14px 0; }

/* Succesverhalen: rustige tegels zoals het origineel (klant boven de titel, geen datum/labels) */
.k-verhaal { background: none !important; box-shadow: none; border-radius: 0; }
.k-verhaal > a { display: flex; flex-direction: column; }
.k-verhaal .beeld img { border-radius: 2px; aspect-ratio: 3/2; }
.k-verhaal .ondertitel { order: 1; padding: 14px 0 0; font-size: .8rem; font-weight: 400; }
.k-verhaal .kaarttitel { order: 2; padding: 4px 0 0; font-size: 1rem; }
.k-verhaal .beeld { order: 0; }
.k-verhaal .meta { display: none; }
.b-verhalenlijst .raster, .home-blog-section .raster { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px 24px; }
.custom-blog-section .k-verhaal .kaarttitel { color: var(--wit); }
.custom-blog-section .k-verhaal .ondertitel { color: rgba(255,255,255,.8); }
.home-blog-section .k-verhaal:nth-child(n+4) { display: none; }

/* Fijnafstelling na tweede vergelijking */
.paginakop:not(.zonder-beeld)::after { width: auto; height: auto; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(115deg, transparent 0 58%, rgba(227,40,37,.6) 58.1% 100%); }
.knop, button.knop { padding: 1.05em 2em; font-size: .95rem; }
.knop-li .knop { padding: .8em 1.5em; font-size: .85rem; }
.t-donker .kaart .icoon img { filter: none; width: 26px; height: 26px; }
.raster.n4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.b-verhalenlijst .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
@media (max-width: 960px) { .b-verhalenlijst .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .b-verhalenlijst .raster { grid-template-columns: 1fr; } }
.k-verhaal .kaarttitel { font-size: 1.05rem; }

/* Storingen en onderhoud */
.storingsbalk { background: var(--rood); color: var(--wit); font-size: .92rem; position: relative; z-index: 60; }
.storingsbalk .houder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 9px; padding-bottom: 9px; }
.storingsbalk a { color: var(--wit); font-weight: 700; margin-left: auto; white-space: nowrap; }
.b-status { padding: 36px 0 0; }
.statusblok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 26px; border-radius: var(--rond); background: var(--licht); border: 1px solid var(--lijn); }
.status-regel { margin: 0; display: flex; align-items: center; gap: 12px; }
.status-stip { width: 12px; height: 12px; border-radius: 50%; background: var(--grijs); flex: none; }
.status-goed .status-stip { background: #0a8a4a; box-shadow: 0 0 0 4px rgba(10,138,74,.15); }
.status-storing { background: #fdecec; border-color: #f5c2c0; }
.status-storing .status-stip { background: var(--rood); box-shadow: 0 0 0 4px rgba(227,40,37,.18); }
.status-sectie + .status-sectie { padding-top: 0; }
.status-leeg { padding: 18px 22px; background: var(--licht); border-radius: var(--rond); }
.melding { border: 1px solid var(--lijn); border-left: 5px solid var(--grijs); border-radius: 6px; padding: 22px 26px; margin-bottom: 18px; background: var(--wit); }
.melding-storing { border-left-color: var(--rood); }
.melding-onderhoud { border-left-color: #f5a623; }
.melding h3 { margin: 8px 0 6px; }
.melding h4 { font-size: .95rem; margin: 18px 0 8px; }
.melding-kop { display: flex; flex-wrap: wrap; gap: 6px; }
.melding-label { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--licht); color: var(--donker); }
.melding-label.status { background: var(--donker); color: var(--wit); }
.impact-hoog .melding-label.impact, .impact-kritiek .melding-label.impact { background: #fdecec; color: var(--rood-donker); }
.melding-tijd { color: var(--donker-2); margin: 0 0 10px; }
.melding-updates { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--lijn); }
.melding-updates li { padding: 0 0 12px 16px; position: relative; }
.melding-updates li::before { content: ''; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--rood); }
.melding-updates time { font-weight: 700; font-size: .85rem; }
.melding-updates p { margin: 4px 0 0; }
/* Paginakop zonder foto: titel niet onder de donkere overlay */
.paginakop.zonder-beeld::before { display: none; }
.paginakop h1, .paginakop .kruimel { position: relative; z-index: 3; }

/* ===== Supportpagina (opbouw van de live site) ===== */
.support-top { padding: 64px 0 72px; }
.support-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.support-links h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: .5em; max-width: 520px; }
.support-links > p { color: var(--donker-2); max-width: 520px; }
.support-kanalen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; margin-top: 22px; max-width: 520px; }
.kanaal { display: flex; flex-direction: column; text-decoration: none; color: var(--donker-2); }
.kanaal-label { font: 700 .95rem var(--kop-font); color: var(--donker); }
.kanaal-waarde { color: var(--donker-2); }
.kanaal[href^="http"] .kanaal-waarde::after, .kanaal[href^="mailto"] .kanaal-waarde::after { content: ' ↗'; color: var(--rood); }
.kanaal-extra { font-size: .8rem; color: var(--grijs); }
.kanaal:hover .kanaal-waarde { color: var(--rood); }
.support-rechts { display: flex; flex-direction: column; gap: 12px; }
.storingsdienst { background: linear-gradient(135deg, #e73b4d 0%, var(--rood) 55%, var(--rood-donker) 100%); color: var(--wit); padding: 24px 26px; border-radius: 4px; }
.storingsdienst h2 { color: var(--wit); font-size: 1.05rem; margin-bottom: .6em; }
.storingsdienst p { font-size: .9rem; margin-bottom: .8em; color: rgba(255,255,255,.95); }
.storingsdienst p:last-child { margin-bottom: 0; }
.support-regel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border: 1px solid var(--lijn); border-radius: 4px; background: var(--wit); text-decoration: none; color: var(--donker); transition: box-shadow .2s, border-color .2s; }
.support-regel small { display: block; font-size: .78rem; color: var(--grijs); }
.support-regel strong { font: 700 .92rem var(--kop-font); }
.support-regel .pijl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rood); color: var(--wit); flex: none; font-weight: 700; }
.support-regel:hover { border-color: var(--rood); box-shadow: var(--schaduw); color: var(--donker); }
.support-regel.petrol { background: #2f6f5f; border-color: #2f6f5f; color: var(--wit); }
.support-regel.petrol small { color: rgba(255,255,255,.8); }
.support-regel.petrol:hover { color: var(--wit); }
.support-app { background: var(--petrol); color: rgba(255,255,255,.9); padding: 72px 0 0; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%); }
.support-app-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.support-app-tekst { padding-bottom: 96px; }
.support-app h2 { color: var(--wit); font-size: clamp(1.6rem, 2.8vw, 2.2rem); max-width: 460px; }
.winkels { display: flex; gap: 12px; margin-top: 18px; }
.winkels img { height: 40px; width: auto; }
.support-app-beeld img { width: min(100%, 420px); margin-left: auto; display: block; }
.support-status { padding-top: 56px; }
.support-status .intro { margin-bottom: 1.2em; }
@media (max-width: 900px) {
  .support-raster, .support-app-raster { grid-template-columns: 1fr; }
  .support-app-tekst { padding-bottom: 24px; }
  .support-app-beeld img { margin: 0 auto; }
}
@media (max-width: 520px) { .support-kanalen { grid-template-columns: 1fr; } }

/* ===== Zelfbeheer (klantportaal & app) ===== */
.zb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.zb-omgekeerd > :first-child { order: 0; }
.zb-dashboard, .zb-ticket, .zb-sla, .zb-kort { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: var(--schaduw); padding: 22px; }
.zb-dash-kop, .zb-ticket-kop, .zb-sla-kop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 700 .95rem var(--kop-font); color: var(--donker); margin-bottom: 16px; }
.zb-ok { color: #0a8a4a; font-weight: 600; font-size: .85rem; }
.zb-dash-tegels, .zb-sla-cijfers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.zb-sla-cijfers { grid-template-columns: repeat(3, 1fr); }
.zb-dash-tegels div, .zb-sla-cijfers div { background: var(--licht); border-radius: 8px; padding: 14px; }
.zb-dash-tegels strong, .zb-sla-cijfers strong { display: block; font: 800 1.7rem var(--kop-font); color: var(--rood); }
.zb-dash-tegels span, .zb-sla-cijfers span { font-size: .85rem; }
.zb-klein { font-size: .78rem; color: var(--grijs); margin: 12px 0 0; }
.zb-voordeel h3, .zb-gebieden h3 { font-size: 1.1rem; margin-bottom: .4em; }
.zb-icoon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #fdecec; color: var(--rood); font-size: 1.3rem; margin-bottom: 14px; }
.zb-gebieden .kaart { border-top: 4px solid var(--rood); }
.zb-lijst { list-style: none; padding: 0; }
.zb-lijst li { position: relative; padding-left: 26px; margin-bottom: .7em; }
.zb-lijst li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--rood); font-weight: 800; }
.zb-badge { background: #fff4e0; color: #9a5b00; border-radius: 999px; padding: 2px 10px; font-size: .78rem; }
.zb-ticket-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--donker-2); margin-bottom: 14px; }
.zb-bericht { border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: .92rem; max-width: 88%; }
.zb-bericht small { display: block; font-size: .75rem; color: var(--grijs); margin-bottom: 2px; }
.zb-van-ons { background: var(--licht); }
.zb-van-jou { background: #fdecec; margin-left: auto; }
.zb-bestellen { margin-top: 48px; }
.zb-foto img { border-radius: 12px; width: 100%; }
.zb-stappen { grid-template-columns: repeat(4, 1fr); margin-top: 1.4em; }
.zb-stappen li { padding: 16px; text-align: center; }
.zb-stappen .stapnr { margin: 0 auto 8px; width: 38px; height: 38px; font-size: 1rem; }
.zb-kort ul { list-style: none; padding: 0; margin: 0; }
.zb-kort li { padding: 7px 0 7px 26px; border-bottom: 1px solid var(--lijn); position: relative; }
.zb-kort li::before { content: '✓'; position: absolute; left: 0; color: var(--rood); font-weight: 800; }
.zb-app { margin-top: 0; }
@media (max-width: 900px) { .zb-split { grid-template-columns: 1fr; } .zb-stappen { grid-template-columns: repeat(2, 1fr); } }
.zb-split .stappen:not(.zb-stappen) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.zb-split .stappen:not(.zb-stappen) li { padding: 20px; }
@media (max-width: 600px) { .zb-split .stappen:not(.zb-stappen) { grid-template-columns: 1fr; } }

/* Rode knoppen: altijd witte tekst (ook in het menu, waar .menu > li > a anders wint) */
.knop, .menu .knop-li > a.knop, .menu > li > a.knop, a.knop:visited { color: var(--wit); }
.menu > li > a.knop:hover, .menu > li > a.knop[aria-current] { color: var(--wit); background: var(--rood-donker); border-color: var(--rood-donker); }
.knop-rand, a.knop-rand:visited { color: var(--donker); }
.knop-licht, a.knop-licht:visited { color: var(--rood); }
/* Omlijnde knop op een donkere of foto-achtergrond: altijd witte tekst, ook als de link al bezocht is.
   Zonder dit won "a.knop-rand:visited" hierboven van ".banner .knop-rand" en werd de tekst donker op de foto. */
:is(.banner, .paginakop, .t-donker, .custom-blog-section, .custom-video-section) a.knop-rand:is(:link, :visited) { color: var(--wit); }
:is(.banner, .paginakop, .t-donker) a.knop-rand:is(:link, :visited):hover { color: var(--donker); }
.custom-blog-section a.knop-rand:is(:link, :visited):hover { color: var(--petrol); }

/* Bechtle-logo in de footer: klein, achter het KvK-nummer, op een lichte drager
   (anders valt het donkergroen weg op zwart) */
.voet-onder .bechtle-link { display: inline-block; margin-left: 10px; vertical-align: middle; line-height: 0; }
.voet-onder .bechtle-logo { height: 14px; width: auto; background: var(--wit); padding: 3px 7px; border-radius: 4px; box-sizing: content-box; }
.voet-onder .bechtle-naam { font-size: .85rem; line-height: 1; }

/* Telefoonbeeld in het app-blok: bovenste deel van het toestel, zoals op de oude site */
.support-app-beeld { align-self: end; max-height: 540px; overflow: hidden; }
.support-app-beeld img { width: min(100%, 380px); filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }

/* ===== Mijn Interforce ===== */
.mi-intro { padding-top: 64px; }
.mi-intro h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.mi-beeld { text-align: center; }
.mi-beeld img { width: min(100%, 320px); filter: drop-shadow(0 20px 40px rgba(0,0,0,.18)); }
.mi-aanvragen .intro { max-width: 860px; margin-left: auto; margin-right: auto; }
.mi-inloggen { background: var(--petrol); color: rgba(255,255,255,.9); }
.mi-inloggen h2 { color: var(--wit); }
.mi-inlog-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.mi-app { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 24px; }
.mi-app p { margin: 0; }
@media (max-width: 900px) { .mi-inlog-raster { grid-template-columns: 1fr; } }

/* Mijn Interforce: portaal (browser) + app (telefoon) samen */
.mi-beeld { position: relative; padding: 0 70px 40px 0; text-align: left; }
.mi-browser { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: 0 24px 60px rgba(28,28,28,.16); overflow: hidden; font-size: 11px; line-height: 1.35; }
.mi-balk { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #eef0f3; border-bottom: 1px solid var(--lijn); }
.mi-balk span { width: 9px; height: 9px; border-radius: 50%; background: #d4d6db; }
.mi-balk em { margin-left: 10px; flex: 1; font-style: normal; color: var(--donker-2); background: var(--wit); border-radius: 6px; padding: 3px 10px; }
.mi-portaal { display: grid; grid-template-columns: 112px 1fr; min-height: 300px; }
.mi-nav { background: #1c1c1c; color: rgba(255,255,255,.75); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.mi-nav b { color: var(--rood); font: 800 15px var(--kop-font); margin-bottom: 10px; }
.mi-nav i { font-style: normal; padding: 6px 8px; border-radius: 6px; }
.mi-nav i.actief { background: rgba(227,40,37,.9); color: var(--wit); }
.mi-inhoud { padding: 14px 16px; background: #f6f6f7; }
.mi-groet { font: 800 15px var(--kop-font); color: var(--donker); margin: 0 0 8px; }
.mi-groet small { display: block; font: 400 10px var(--tekst-font); color: var(--grijs); }
.mi-status { margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; background: #e3f4ea; color: #0a6b3a; font-weight: 600; }
.mi-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.mi-tegels span { background: var(--wit); border-radius: 8px; padding: 8px; color: var(--donker-2); }
.mi-tegels strong { display: block; font: 800 18px var(--kop-font); color: var(--donker); }
.mi-tickets { background: var(--wit); border-radius: 8px; padding: 8px 10px; }
.mi-tickets p { margin: 0 0 4px; font-weight: 700; color: var(--donker); }
.mi-tickets span { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--lijn); color: var(--donker); }
.mi-tickets b { color: #0a6b3a; background: #e3f4ea; border-radius: 999px; padding: 0 7px; font-weight: 600; white-space: nowrap; }
.mi-telefoon { position: absolute; right: 0; bottom: 0; width: 34% !important; max-width: 190px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.28)); }
@media (max-width: 560px) { .mi-beeld { padding-right: 40px; } .mi-portaal { grid-template-columns: 1fr; } .mi-nav { display: none; } .mi-tegels { grid-template-columns: repeat(2, 1fr); } }
.mi-scherm { display: block; width: 100%; height: auto; }
.mi-beeld { padding-right: 56px; }
.mi-telefoon { width: 30% !important; max-width: 170px; }
.mi-beeld .mi-scherm { width: 100%; max-width: none; filter: none; }

/* ===== Ontwerp gelijk aan de oude site (vergelijking 26-10-2026) ===== */

/* Tekst: Work Sans licht, zoals het origineel (was Open Sans normaal: oogde zwaarder) */
:root { --tekst-font: 'Work Sans', system-ui, sans-serif; }
body { font-weight: 300; line-height: 1.75; color: #1c1c1c; }
strong, b { font-weight: 600; }

/* Kopbalk: menu in normaal gewicht, Support als ronde knop */
.menu > li > a { font-weight: 400; font-size: 1rem; }
.menu .knop-li > a.knop { border-radius: 30px; padding: .95em 2.4em; font-size: .95rem; }

/* Homepage-foto: links donkerder, zoals het origineel */
.banner::before { background: linear-gradient(90deg, rgba(28,28,28,.72) 0%, rgba(28,28,28,.5) 50%, rgba(28,28,28,.3) 100%); }

/* Footer: wit, logo + social + Mijn Interforce + Support bovenaan */
.voet { background: var(--wit); color: #1c1c1c; font-size: 1rem; }
.voet a { color: #44454a; }
.voet a:hover { color: var(--rood); text-decoration: none; }
.voet-boven { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 56px; padding-bottom: 56px; border-bottom: 1px solid #ececec; }
.voet-boven .voet-logo { filter: none; margin: 0; width: 160px; height: auto; display: block; }
.voet-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.voet .sociaal { margin: 0; gap: 12px; }
.voet .sociaal li { margin: 0; }
.voet .sociaal a { width: 50px; height: 50px; background: var(--wit); border: 1px solid #e2e2e2; }
.voet .sociaal a:hover { background: var(--licht); }
.voet .sociaal img { filter: none; width: 20px; height: 20px; }
.voet-acties .knop { border-radius: 30px; padding: 1em 2.2em; }
.voet-acties .knop::before { content: none; }
.voet-acties a.knop-rand, .voet-acties a.knop-rand:visited { color: #1c1c1c; border-color: #1c1c1c; background: transparent; }
.voet-acties a.knop-rand:hover { background: #1c1c1c; color: var(--wit); }
.voet-raster { grid-template-columns: 1.1fr 1fr 1.25fr 1fr 1.2fr; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
.voet-kop { color: #1c1c1c; font-size: 1rem; margin-bottom: 1.3em; }
.voet li { margin-bottom: .6em; }
.voet-raster p { margin: 0 0 1em; }
.voet-pijl { width: 10px; height: 10px; margin-left: 4px; vertical-align: middle; }
.voet .keurmerken { display: grid; grid-template-columns: repeat(2, auto); gap: 28px 32px; align-content: start; justify-content: start; }
.voet .keurmerken img { background: none; padding: 0; border-radius: 0; height: auto; max-height: 60px; max-width: 130px; filter: grayscale(1); opacity: .75; }
.voet-onder { border-top: 1px solid #ececec; color: #44454a; }
.voet-onder .houder { padding-top: 28px; padding-bottom: 28px; }
@media (max-width: 1100px) { .voet-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .voet-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .voet-raster { grid-template-columns: 1fr; } .voet-boven { flex-direction: column; align-items: flex-start; } }

/* Schild (Diensten / Bouwstenen): petrol schuif, kleinere hoekige kaarten, kleiner schild */
.shield-wrapper.blok { padding-top: 24px; }
.schild-paneel { grid-template-columns: 1fr minmax(220px, 290px) 1fr; gap: 24px; margin-top: 8px; }
.schild-kolom { gap: 12px; }
.schild-kaart { border-radius: 0; padding: 14px 16px 16px; border-color: #e2e2e2; }
.schild-kop { font-size: 1rem; gap: 10px; margin-bottom: 6px; }
.schild-kop img { width: 18px; height: 18px; }
.schild-tekst { font-size: .9rem; line-height: 1.65; }
.schild-kaart .schild-meer { text-transform: none; letter-spacing: 0; font-size: .85rem; margin-top: 10px; }
.schild-kaart .schild-meer::after { content: ' \2197'; }
.schild-svg { max-width: 290px; }

/* Icoonkaarten naast een tekstkolom (Onze bouwstenen, Jouw IT is onze zorg, ...): lijst met lijnen */
.b-splitcomponent:not(.split-silder-section) .split:has(.c-pods .k-iconbox) { align-items: flex-start; }
.b-splitcomponent:not(.split-silder-section) .c-pods .raster:has(.k-iconbox) { display: block; }
.b-splitcomponent:not(.split-silder-section) .c-pods .k-iconbox { background: none; border: 0; border-bottom: 1px solid #e2e2e2; border-radius: 0; box-shadow: none; padding: 20px 0; }
.b-splitcomponent:not(.split-silder-section) .c-pods .k-iconbox:last-child { border-bottom: 0; }
.b-splitcomponent:not(.split-silder-section) .c-pods .k-iconbox h5 { font-size: 1.05rem; }

/* Kenmerken met een rood streepje links (oud: box-style-6) */
.blok.k-streep { padding-top: 24px; }
.k-streep .k-iconbox { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.k-streep .k-iconbox > a, .k-streep .k-iconbox .kaarttekst { display: block; }
.k-streep .k-iconbox .icoon { border-left: 2px solid #e73b4d; padding: 0 0 8px 12px; margin: 0; }
.k-streep .k-iconbox .icoon img { width: 16px; height: 16px; margin: 0; }
.k-streep .k-iconbox h5 { border-left: 2px solid #e73b4d; padding: 0 0 2px 12px; margin: 0 0 14px; }
.k-streep .raster { gap: 36px 32px; }

/* Secties met de schuine vlakken van het origineel als achtergrond */
.custom-ft-section { background: var(--rood) url(/media/fsmdeggj/red-overlay.svg) no-repeat center / auto !important; }
.home-blog-section { background: var(--petrol) url(/media/0ugn4yja/group-1235.svg) no-repeat center / auto !important; }
.manage-firewell-iconbox, .connectivitly-options-section { background: var(--rood) url(/media/cjyhwqzs/mask-group-524.svg) no-repeat center / auto !important; }
.img-split-section { background: var(--rood) url(/media/ymonqqqg/mask-group-524png.png) no-repeat center / auto !important; }
.vertical-steps-section:not(.overstappen-steps-section) { background: var(--rood) url(/media/mfzlsuwe/mask-group-521.svg) no-repeat center / auto !important; }
.overstappen-steps-section { background: var(--petrol) url(/media/gf5h2ric/group-1240.svg) no-repeat center / auto !important; }
.vlak-awareness { background: var(--rood) url(/media/h0ddyfsu/group-1238.svg) no-repeat center / auto !important; }
.red-accordion { background: var(--rood) url(/media/og1puxjp/mask-group-523.svg) no-repeat center / auto !important; }
.light-background-box-section, .vlak-extra-opties { background: var(--rood) url(/media/xlwlded2/mask-group-522.svg) no-repeat center / auto !important; }
.vlak-perfect { background: var(--rood) url(/media/g4fhbqzj/mask-group-522png.png) no-repeat center / auto !important; }
.vlak-branches, .custom-video-section, .app-support-section { background: var(--petrol) url(/media/mtxpdzvs/mask-group-521-1.svg) no-repeat center / auto !important; }
:is(.custom-ft-section, .home-blog-section, .manage-firewell-iconbox, .connectivitly-options-section, .img-split-section, .vertical-steps-section, .vlak-awareness, .red-accordion, .light-background-box-section, .vlak-extra-opties, .vlak-perfect, .vlak-branches, .custom-video-section, .app-support-section).blok { clip-path: none; color: rgba(255,255,255,.92); }
:is(.custom-ft-section, .home-blog-section, .manage-firewell-iconbox, .connectivitly-options-section, .img-split-section, .vertical-steps-section, .vlak-awareness, .red-accordion, .light-background-box-section, .vlak-extra-opties, .vlak-perfect, .vlak-branches, .custom-video-section, .app-support-section) :is(h2, h3, h4, h5, h6, p, li, .kaarttitel) { color: var(--wit); }
:is(.manage-firewell-iconbox, .connectivitly-options-section, .img-split-section, .vertical-steps-section, .vlak-awareness, .red-accordion, .light-background-box-section, .vlak-extra-opties, .vlak-perfect, .vlak-branches, .app-support-section) .kaart { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.45); box-shadow: none; }
:is(.manage-firewell-iconbox, .connectivitly-options-section, .img-split-section, .vertical-steps-section, .vlak-awareness, .red-accordion, .light-background-box-section, .vlak-extra-opties, .vlak-perfect, .vlak-branches, .app-support-section) .kaart .icoon img { filter: brightness(0) invert(1); }
:is(.manage-firewell-iconbox, .connectivitly-options-section, .img-split-section, .vertical-steps-section, .vlak-awareness, .red-accordion, .light-background-box-section, .vlak-extra-opties, .vlak-perfect, .vlak-branches, .app-support-section) a:not(.knop) { color: var(--wit); }
:is(.manage-firewell-iconbox, .connectivitly-options-section, .img-split-section, .vertical-steps-section, .vlak-awareness, .red-accordion, .light-background-box-section, .vlak-extra-opties, .vlak-perfect, .vlak-branches, .app-support-section) a.knop-rand:is(:link, :visited) { color: var(--wit); border-color: var(--wit); }

/* "Waarom een Next-Gen Managed Firewall?": twee kolommen met lijnen, witte tekst (oud) */
.manage-firewell-iconbox .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 0; }
.manage-firewell-iconbox .k-iconbox { background: none !important; border: 0; border-bottom: 1px solid rgba(255,255,255,.55); border-radius: 0; padding: 18px 0; }
@media (max-width: 760px) { .manage-firewell-iconbox .raster { grid-template-columns: 1fr; } }

/* Verhalen met impact: kop en knop op een regel, drie grote tegels */
.home-blog-section .intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.home-blog-section .intro h2 { margin: 0; }
.home-blog-section .intro .knoppen { margin: 0; }
.home-blog-section .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .home-blog-section .raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .home-blog-section .raster { grid-template-columns: 1fr; } }

/* CTA "Klaar voor dat extra zetje": knop, beeldjes en links op een regel (oud) */
.custom-ft-section .c-text { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 16px; }
.custom-ft-section .c-text > h2 { flex: 0 0 100%; margin-bottom: .2em; }
.custom-ft-section .c-text > .knoppen { order: 1; margin: 0; }
.custom-ft-section .cta-blok { order: 2; margin: 0; display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 0; align-items: center; }
.custom-ft-section .cta-blok .avatars { grid-row: 1 / 3; }
.custom-ft-section .avatars img { width: 38px; height: 38px; border-width: 2px; margin-right: -10px; }
.custom-ft-section .avatars img:last-child { background: none; border: 0; padding: 0; width: 16px; height: 16px; margin: 11px 0 0 16px; }
.custom-ft-section .cta-blok a, .custom-ft-section .cta-blok p { font-size: .9rem; text-decoration: none; line-height: 1.5; }

/* Stappen 1-2-3 onder "Ben jij klaar voor de volgende stap?": open cirkels met een lijn ertussen (oud) */
.upper-steps-section .stappen { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 920px; margin: 2.6em auto 0; }
.upper-steps-section .stappen::before { content: ""; position: absolute; top: 23px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; background: #e2e2e2; }
.upper-steps-section .stappen li { background: none; padding: 0; text-align: center; font-size: .95rem; }
.upper-steps-section .stapnr { position: relative; z-index: 1; width: 48px; height: 48px; margin: 0 auto 18px; background: var(--wit); color: #1c1c1c; border: 2px solid #e2e2e2; box-shadow: 0 0 0 10px var(--wit); font-size: 1.5rem; }
@media (max-width: 700px) { .upper-steps-section .stappen { grid-template-columns: 1fr; } .upper-steps-section .stappen::before { display: none; } }

/* Schuine onderrand van de vlak-secties, zoals het origineel (.Left-polygon / .Right-polygon) */
:is(.manage-firewell-iconbox, .connectivitly-options-section, .img-split-section, .vlak-awareness, .light-background-box-section, .vlak-extra-opties, .vlak-perfect, .vlak-branches, .custom-video-section, .app-support-section).blok { clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%); padding-bottom: clamp(96px, 11vw, 150px); }
:is(.home-blog-section, .vertical-steps-section, .overstappen-steps-section).blok { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 89%); padding-bottom: clamp(96px, 11vw, 150px); }

/* Footer: knoppen en pijltjes */
.voet-acties a.knop:not(.knop-rand), .voet-acties a.knop:not(.knop-rand):visited { color: var(--wit); }
.voet-acties a.knop:not(.knop-rand):hover { color: var(--wit); background: var(--rood-donker); border-color: var(--rood-donker); }
.voet .voet-pijl { display: inline; }
.voet .keurmerken img { max-height: 76px; max-width: 170px; }

/* Verhalen met impact: knop rechts naast de kop */
.home-blog-section .intro { max-width: none; }

/* Foto's met rechte hoeken, zoals het origineel */
.kolom .beeld img, .kolom > img, .kaart .beeld img, .kaart > img { border-radius: 0; }

/* Minder witruimte vóór een rij kenmerken met streepje */
.blok:has(+ .k-streep) { padding-bottom: 40px; }

/* Stappen-tijdlijn (Hoe werkt de overstap?, De visie die ons drijft, mobiel internet): label links,
   rode stip op een lijn, kop + tekst samen in een kader (oud: vertical-steps-section) */
.vertical-steps-section .split { align-items: flex-start; }
.c-verticalsteps { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 34px; position: relative; }
.c-verticalsteps::before { content: ""; position: absolute; left: 77px; top: 26px; bottom: 40px; width: 1px; background: rgba(255,255,255,.55); }
.c-verticalsteps > :nth-child(3n+1) { grid-column: 1; grid-row: span 2; margin: 0; padding-top: 16px; font-size: .85rem; white-space: nowrap; position: relative; }
.c-verticalsteps > :nth-child(3n+1)::after { content: ""; position: absolute; right: -28px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--rood); }
.c-verticalsteps > :nth-child(3n+2) { grid-column: 2; margin: 0; padding: 16px 20px 6px; border: 1px solid rgba(255,255,255,.65); border-bottom: 0; background: rgba(255,255,255,.08); font-size: 1rem; }
.c-verticalsteps > :nth-child(3n) { grid-column: 2; margin: 0 0 16px; padding: 0 20px 18px; border: 1px solid rgba(255,255,255,.65); border-top: 0; background: rgba(255,255,255,.08); font-size: .9rem; }
.vertical-steps-section:not(.overstappen-steps-section) .c-verticalsteps > :nth-child(3n+1)::after { background: var(--wit); }

/* Veelgestelde vragen: losse kaders met een rood rondje (+ / -), zoals het origineel */
.c-accordiontab details { border: 1px solid #e2e2e2; padding: 0 18px; margin-bottom: 8px; background: var(--wit); }
.c-accordiontab details summary { padding: 16px 40px 16px 0; font-size: 1rem; }
.c-accordiontab details summary::after { content: "+"; top: 50%; right: 0; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--rood); color: var(--wit); font: 700 16px/20px var(--tekst-font); text-align: center; transform: none; }
.c-accordiontab details[open] summary::after { content: "\2212"; transform: none; }
.c-accordiontab details > :not(summary) { padding-bottom: 16px; font-size: .9rem; }
.red-accordion .c-accordiontab details { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }
.red-accordion .c-accordiontab details summary { color: var(--wit); }
.red-accordion .c-accordiontab details summary::after { background: var(--wit); color: var(--rood); }

/* Verhalen met impact buiten de homepage: lichtgrijs met donkere tekst (oud) */
.custom-blog-section:not(.home-blog-section) { background: var(--licht) !important; color: #1c1c1c; clip-path: none; }
.custom-blog-section:not(.home-blog-section) :is(h2, h3, h4, h5, .kaarttitel) { color: var(--donker); }
.custom-blog-section:not(.home-blog-section) :is(p, li, span) { color: #44454a; }
.custom-blog-section:not(.home-blog-section) a.knop-rand:is(:link, :visited) { color: var(--donker); border-color: var(--donker); }
.custom-blog-section:not(.home-blog-section) a.knop-rand:hover { background: var(--donker); color: var(--wit); }
.custom-blog-section:not(.home-blog-section) .intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; max-width: none; }
.custom-blog-section:not(.home-blog-section) .intro h2, .custom-blog-section:not(.home-blog-section) .intro .knoppen { margin: 0; }

/* Icoonkaarten met rechte hoeken, zoals het origineel */
.k-iconbox { border-radius: 0; }

/* Knop bij Verhalen met impact (buiten de homepage) omlijnd donker, zoals het origineel */
.custom-blog-section:not(.home-blog-section) .intro a.knop:is(:link, :visited) { background: transparent; color: var(--donker); border-color: var(--donker); }
.custom-blog-section:not(.home-blog-section) .intro a.knop:hover { background: var(--donker); color: var(--wit); }

/* Connectivity-opties: klein rood icoon in een wit vakje naast de titel, vinkjes in plaats van bolletjes (oud) */
.connectivitly-options-section .kaart > img { width: 22px; height: 22px; aspect-ratio: auto; object-fit: contain; margin: 0; padding: 6px; box-sizing: content-box; background: var(--wit); border-radius: 0; filter: none !important; }
.connectivitly-options-section .k-iconbox { align-items: center; row-gap: 14px; }
.connectivitly-options-section .k-iconbox h4 { margin: 0; font-size: 1.05rem; }
.connectivitly-options-section .kaart ul { list-style: none; padding: 0; margin: 0; }
.connectivitly-options-section .kaart li { position: relative; padding-left: 26px; margin-bottom: .6em; font-size: .9rem; }
.connectivitly-options-section .kaart li::before { content: "\2713"; position: absolute; left: 0; top: .25em; width: 16px; height: 16px; border-radius: 50%; background: var(--wit); color: var(--rood); font: 700 10px/16px var(--tekst-font); text-align: center; }

/* Cloud Telefonie "Wat maakt het uniek?": wit plus-rondje op de hoek van de kaart (oud) */
.light-background-box-section .k-iconbox { display: block; position: relative; padding: 16px 18px 18px; }
.light-background-box-section .k-iconbox .kaarttekst { display: block; }
.light-background-box-section .k-iconbox .icoon { position: absolute; left: -10px; top: 14px; margin: 0; line-height: 0; }
.light-background-box-section .k-iconbox .icoon img { width: 20px; height: 20px; margin: 0; filter: none !important; }
.light-background-box-section .k-iconbox h5 { margin-bottom: .6em; }

/* Kenmerken als lijst in twee kolommen: icoon links, kop + tekst rechts, lijn eronder (oud: box-style-2) */
.k-lijst .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 0; }
.k-lijst .k-iconbox { background: none; border: 0; border-bottom: 1px solid #e2e2e2; border-radius: 0; box-shadow: none; padding: 20px 0; column-gap: 16px; }
.k-lijst .k-iconbox .icoon img { width: 24px; height: 24px; }
.k-lijst .k-iconbox p, .k-lijst .k-iconbox ul { grid-column: 2; }
@media (max-width: 760px) { .k-lijst .raster { grid-template-columns: 1fr; } }

/* Kaarten naast een tekstkolom met het icoon boven op de rand (oud: box-style-7 / slider) */
.split-silder-section .c-pods .raster { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 40px 14px; padding-top: 18px; }
.split-silder-section .k-iconbox { position: relative; display: block; padding: 30px 20px 20px; border-radius: 0; }
.split-silder-section .k-iconbox .kaarttekst, .split-silder-section .k-iconbox > a { display: block; }
.split-silder-section .k-iconbox .icoon { position: absolute; left: 20px; top: -18px; margin: 0; line-height: 0; }
.split-silder-section .k-iconbox .icoon img { width: 36px; height: 36px; margin: 0; }
.vlak-awareness .kaart .icoon img { filter: none !important; }
.vlak-awareness .split, .split-silder-section .split { align-items: center; }

/* Awareness "Waarom kiezen voor deze training?": ook met het rode streepje */
.awarenes-pod-section.blok { padding-top: 24px; }
.awarenes-pod-section .k-iconbox { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.awarenes-pod-section .k-iconbox > a, .awarenes-pod-section .k-iconbox .kaarttekst { display: block; }
.awarenes-pod-section .k-iconbox .icoon { border-left: 2px solid #e73b4d; padding: 0 0 8px 12px; margin: 0; }
.awarenes-pod-section .k-iconbox .icoon img { width: 16px; height: 16px; margin: 0; }
.awarenes-pod-section .k-iconbox h5 { border-left: 2px solid #e73b4d; padding: 0 0 2px 12px; margin: 0 0 14px; }
.awarenes-pod-section .raster { gap: 36px 32px; }

/* Tabs (Branches e.d.): knoppen samen in een capsule, actief rood (oud: nav-tabs) */
.tabknoppen:not(.schild-knoppen) { gap: 0; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 0; border: 1px solid #e2e2e2; border-radius: 50px; background: var(--wit); }
.tabknoppen:not(.schild-knoppen) button { border: 0; background: none; padding: .8em 1.3em; border-radius: 50px; font-weight: 500; }
.tabknoppen:not(.schild-knoppen) button[aria-selected="true"] { background: var(--rood); color: var(--wit); }

/* Tabpaneel met icoon, titel, tekst en foto: kader, foto rechts (oud) */
.tabpaneel:has(> h4) { grid-template-columns: auto minmax(0, 1fr) minmax(0, 380px); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 12px; align-items: start; border: 1px solid #e2e2e2; padding: 20px; background: var(--wit); }
.tabpaneel:has(> h4) > img:first-child { grid-column: 1; grid-row: 1; width: 22px; height: 22px; padding: 6px; border: 1px solid #e2e2e2; box-sizing: content-box; margin: 0; }
.tabpaneel:has(> h4) > h4 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 1.05rem; }
.tabpaneel:has(> h4) > p { grid-column: 1 / 3; grid-row: 2; margin: 0; font-size: .9rem; }
.tabpaneel:has(> h4) > img:last-child { grid-column: 3; grid-row: 1 / 3; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 0 18px; border-radius: 0; }
@media (max-width: 760px) { .tabpaneel:has(> h4) { grid-template-columns: auto minmax(0, 1fr); } .tabpaneel:has(> h4) > img:last-child { grid-column: 1 / -1; grid-row: 3; margin: 8px 0 0; } }

/* Verhalen met impact buiten de homepage: drie tegels, klantnaam in rood (oud) */
.custom-blog-section:not(.home-blog-section) .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.custom-blog-section:not(.home-blog-section) .k-verhaal:nth-child(n+4) { display: none; }
.custom-blog-section:not(.home-blog-section) .k-verhaal .ondertitel { color: #e73b4d; }
.custom-blog-section:not(.home-blog-section) .k-verhaal .kaarttitel { color: var(--donker); }
@media (max-width: 900px) { .custom-blog-section:not(.home-blog-section) .raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .custom-blog-section:not(.home-blog-section) .raster { grid-template-columns: 1fr; } }

/* Branches "Wij begrijpen jouw onderneming": rode plus-rondjes in plaats van bolletjes (oud) */
.vlak-branches ul { list-style: none; padding: 0; }
.vlak-branches li { position: relative; padding-left: 26px; }
.vlak-branches li::before { content: "+"; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 50%; background: #e73b4d; color: var(--wit); font: 700 13px/16px var(--tekst-font); text-align: center; }

/* Stappen-tijdlijn op wit (bv. Managed Firewall): geen rood vlak, grijze lijnen (oud: white-background).
   Alleen Mobiel internet (vlak-mobiel) en de overstap-/visiestappen hebben een gekleurd vlak. */
.vertical-steps-section:not(.overstappen-steps-section):not(.vlak-mobiel) { background: var(--wit) !important; color: #1c1c1c; clip-path: none !important; padding-bottom: clamp(56px, 8vw, 100px); }
.vertical-steps-section:not(.overstappen-steps-section):not(.vlak-mobiel) :is(h2, h3, h4, h5, h6) { color: var(--donker); }
.vertical-steps-section:not(.overstappen-steps-section):not(.vlak-mobiel) :is(p, li) { color: #1c1c1c; }
.vertical-steps-section:not(.overstappen-steps-section):not(.vlak-mobiel) .c-verticalsteps::before { background: #e2e2e2; }
.vertical-steps-section:not(.overstappen-steps-section):not(.vlak-mobiel) .c-verticalsteps > :nth-child(3n+1)::after { background: var(--rood); }
.vertical-steps-section:not(.overstappen-steps-section):not(.vlak-mobiel) .c-verticalsteps > :nth-child(3n+2),
.vertical-steps-section:not(.overstappen-steps-section):not(.vlak-mobiel) .c-verticalsteps > :nth-child(3n) { border-color: #e2e2e2; background: var(--wit); }
.vertical-steps-section:not(.overstappen-steps-section):not(.vlak-mobiel) a.knop-rand:is(:link, :visited) { color: var(--donker); border-color: var(--donker); }

/* "Onze aanpak voor jouw netwerk": drie stappen naast elkaar, open cirkels met een lijn (oud) */
.cloud-manage-network-steps > .houder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; max-width: 980px; text-align: center; }
.cloud-manage-network-steps > .houder > .intro { grid-column: 1 / -1; grid-row: 1; margin-bottom: 2em; }
.cloud-manage-network-steps > .houder::before { content: ""; grid-column: 1 / -1; grid-row: 2; align-self: center; height: 2px; margin: 0 16.66%; background: #e2e2e2; }
.cloud-manage-network-steps > .houder > h2 { grid-row: 2; justify-self: center; position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; border: 2px solid #e2e2e2; border-radius: 50%; background: var(--wit); box-shadow: 0 0 0 10px var(--wit); font-size: 1.5rem; line-height: 1; }
.cloud-manage-network-steps > .houder > h6 { grid-row: 3; margin: 18px 0 8px; font-size: 1rem; }
.cloud-manage-network-steps > .houder > p { grid-row: 4; margin: 0; font-size: .95rem; max-width: none; }
@media (max-width: 700px) { .cloud-manage-network-steps > .houder { grid-template-columns: 1fr; } .cloud-manage-network-steps > .houder::before { display: none; } .cloud-manage-network-steps > .houder > :is(h2, h6, p) { grid-row: auto; } }
.cloud-manage-network-steps > .houder > h2:nth-of-type(1) { grid-column: 1; }
.cloud-manage-network-steps > .houder > h2:nth-of-type(2) { grid-column: 2; }
.cloud-manage-network-steps > .houder > h2:nth-of-type(3) { grid-column: 3; }
@media (max-width: 700px) { .cloud-manage-network-steps > .houder > h2:nth-of-type(n) { grid-column: auto; } }

/* Rode vlakken over de foto's precies zoals het origineel (vergelijking 26-10):
   homepage = overlay-afbeelding group-1233.png; paginakop = foto van 22,6vw met schuine
   onderrand + per pagina een overlay-svg (img.paginakop-overlay, zie inhoud/_kopoverlays.json). */
.banner::before { display: none; }
.banner::after { background: url(/media/m1pjwgif/group-1233.png) center / cover no-repeat; }
.banner { min-height: 680px; }
@media (max-width: 800px) { .banner { min-height: 0; } }

.paginakop:not(.zonder-beeld) { display: block; clip-path: none; min-height: calc(22.6vw + 75px); padding: 0; background: var(--wit); overflow: hidden; }
.paginakop:not(.zonder-beeld)::before, .paginakop:not(.zonder-beeld)::after { display: none; }
.paginakop:not(.zonder-beeld) .paginakop-beeld { inset: auto; top: 0; left: 0; width: 100%; height: 22.6vw; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%); z-index: 0; }
.paginakop-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 22.6vw; object-fit: cover; object-position: left top; z-index: 1; pointer-events: none; }
.paginakop:not(.zonder-beeld) .paginakop-binnen { position: relative; z-index: 2; padding-top: 11vw; padding-bottom: 0; }
.paginakop:not(.zonder-beeld) .paginakop-figuur { top: 3vw; bottom: auto; right: clamp(40px, 12vw, 175px); width: min(260px, 18vw); max-width: none; max-height: none; height: auto; z-index: 3; }
@media (max-width: 800px) {
  .paginakop:not(.zonder-beeld) { min-height: 300px; }
  .paginakop:not(.zonder-beeld) .paginakop-beeld, .paginakop-overlay { height: 260px; }
  .paginakop:not(.zonder-beeld) .paginakop-binnen { padding-top: 90px; }
}

/* Paginakop: titel hoger in de foto en minder wit eronder, zoals het origineel */
.paginakop:not(.zonder-beeld) { min-height: calc(22.6vw + 40px); }
.paginakop:not(.zonder-beeld) .paginakop-binnen { padding-top: 7.6vw; }
.paginakop:not(.zonder-beeld) + .blok { padding-top: clamp(24px, 3vw, 40px); }
@media (max-width: 800px) { .paginakop:not(.zonder-beeld) { min-height: 290px; } .paginakop:not(.zonder-beeld) .paginakop-binnen { padding-top: 90px; } }
.blok.b-text:has(+ .shield-wrapper) { padding-bottom: 8px; }
.blok.b-text + .blok.shield-wrapper:not(:first-child) { padding-top: 16px; }

/* Knopkleuren per pagina zoals het origineel (thema's cN, klasse knop-cN in inhoud/) */
a.knop.knop-c12:is(:link, :visited) { background: #f7f7f7; color: #000; border-color: #000; }
a.knop.knop-c12:hover { background: #000; color: var(--wit); border-color: #333; }
a.knop.knop-c13:is(:link, :visited) { background: #45747f; color: var(--wit); border-color: #45747f; }
a.knop.knop-c13:hover { background: var(--wit); color: #45747f; border-color: #45747f; }
a.knop.knop-c14:is(:link, :visited) { background: #267266; color: var(--wit); border-color: #267266; }
a.knop.knop-c14:hover { background: var(--wit); color: #267266; border-color: #267266; }
a.knop.knop-c15:is(:link, :visited) { background: #005568; color: var(--wit); border-color: #005568; }
a.knop.knop-c15:hover { background: var(--wit); color: #005568; border-color: #005568; }
a.knop.knop-c16:is(:link, :visited) { background: #00617f; color: var(--wit); border-color: #00617f; }
a.knop.knop-c16:hover { background: var(--wit); color: #00617f; border-color: #00617f; }
a.knop.knop-c17:is(:link, :visited) { background: #2c4b5b; color: var(--wit); border-color: #2c4b5b; }
a.knop.knop-c17:hover { background: var(--wit); color: #2c4b5b; border-color: #2c4b5b; }
a.knop.knop-c18:is(:link, :visited) { background: #472c68; color: var(--wit); border-color: #472c68; }
a.knop.knop-c18:hover { background: var(--wit); color: #472c68; border-color: #472c68; }
a.knop.knop-c19:is(:link, :visited), a.knop.knop-c19:hover { background: #351933; color: var(--wit); border-color: #351933; }
a.knop.knop-c21:is(:link, :visited), a.knop.knop-c21:hover { background: #e83d4d; color: var(--wit); border-color: #e83d4d; }
a.knop.knop-c22:is(:link, :visited), a.knop.knop-c22:hover { background: #a6192e; color: var(--wit); border-color: #a6192e; }
a.knop.knop-c3:is(:link, :visited) { background: var(--wit); color: #1c1c1c; border-color: var(--wit); }
a.knop.knop-c3:hover { background: #000; color: var(--wit); border-color: #000; }

/* Homepage "Onze aanpak": wit met donkere tekst (oud c3) */
.banner a.knop-licht:is(:link, :visited) { color: #1c1c1c; }
.banner a.knop-licht:hover { background: #000; color: var(--wit); border-color: #000; }

/* CTA "Neem contact op": wit met zwarte tekst, hover zachtrood (oud c8) */
.custom-ft-section a.knop:is(:link, :visited) { background: var(--wit); color: #000; border-color: var(--wit); }
.custom-ft-section a.knop:hover { background: #ec6967; color: var(--wit); border-color: #ec6967; }

/* Knoppen onder een gecentreerde intro ook gecentreerd */
.houder:has(> .intro.midden) > .outro .knoppen, .houder:has(> .intro.midden) > .knoppen, .intro.midden .knoppen { justify-content: center; }

/* Over ons "Dit is hoe wij werken": grote foto met een donkerrode balk onderaan, titel links, tekst rechts (oud) */
.b-interforecetabs .tabpaneel { display: block; position: relative; padding: 0; border: 0; }
.b-interforecetabs .tabpaneel[hidden] { display: none; }
.b-interforecetabs .tabpaneel > img { display: block; width: 100%; height: 480px; object-fit: cover; border-radius: 0; margin: 0; }
.b-interforecetabs .tabpaneel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: rgba(124, 3, 13, .3); clip-path: polygon(0 35%, 0 100%, 100% 100%); z-index: 1; }
.b-interforecetabs .tab-onder { position: absolute; left: 0; right: 0; bottom: 0; min-height: 140px; display: flex; align-items: center; gap: 16px; background: linear-gradient(0deg, rgba(127, 4, 14, .85), rgba(127, 4, 14, 0)); z-index: 2; }
.b-interforecetabs .tab-onder span { min-width: 180px; padding-left: 32px; font: 700 1.5rem var(--kop-font); color: var(--wit); }
.b-interforecetabs .tab-onder p { margin: 0; padding-right: 32px; color: var(--wit); }
@media (max-width: 700px) { .b-interforecetabs .tabpaneel > img { height: 320px; } .b-interforecetabs .tab-onder { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; } .b-interforecetabs .tab-onder span, .b-interforecetabs .tab-onder p { padding: 0; min-width: 0; } }

/* Contactpagina zoals het origineel: geen kop, formulier met lijnen, rood contactvlak, grijze linkkaarten */
.b-splitcomponent:has(.c-form) .split { align-items: flex-start; }
.c-form .intro h1, .c-form .intro h2 { font-size: clamp(2rem, 3vw, 2.4rem); margin-bottom: .5em; }
.c-form .intro p:has(img) { display: flex; align-items: center; gap: 12px; margin-top: 1.2em; padding: 10px 14px; background: #f7f7f7; border: 1px solid #e2e2e2; }
.c-form .intro p:has(img) img { flex: 0 0 auto; width: 22px; height: 22px; padding: 6px; background: var(--wit); border: 1px solid #e2e2e2; box-sizing: content-box; margin: 0; }
.c-form .formulier { background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 24px 0 0; max-width: none; }
.c-form .velden { gap: 8px 24px; }
.c-form .veld { font-weight: 300; color: #8a8a8f; font-size: .85rem; gap: 0; }
.c-form .veld input, .c-form .veld textarea { border: 0; border-bottom: 1px solid #e2e2e2; border-radius: 0; background: none; padding: 8px 0 10px; color: #1c1c1c; font-weight: 300; }
.c-form .veld input:focus, .c-form .veld textarea:focus { background: none; border-bottom-color: #1c1c1c; }
.c-form .veld textarea { min-height: 90px; }
.c-form .formulier .privacy { font-size: .8rem; color: #8a8a8f; }

.c-form ~ .c-pods .raster { grid-template-columns: 1fr; gap: 10px; }
.c-form ~ .c-pods .k-textimage { background: var(--rood) url(/media/mcjg3fqt/mask-group-258.png) center / cover no-repeat; color: var(--wit); border: 0; border-radius: 0; box-shadow: none; padding: 20px 20px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.c-form ~ .c-pods .k-textimage .kaarttitel { color: var(--wit); font-size: 1.05rem; margin-bottom: 4px; }
.c-form ~ .c-pods .k-textimage strong { color: var(--wit); font-family: var(--kop-font); font-size: .9rem; margin-top: 6px; }
.c-form ~ .c-pods .k-textimage a, .c-form ~ .c-pods .k-textimage p { color: var(--wit); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; margin: 0; }
.c-form ~ .c-pods .k-textimage p { align-items: flex-start; margin-top: 14px; }
.c-form ~ .c-pods .k-textimage a img, .c-form ~ .c-pods .k-textimage p img { width: 14px; height: 14px; margin: 0; filter: brightness(0) invert(1); aspect-ratio: auto; border-radius: 0; }
.c-form ~ .c-pods .k-textimage a img + img, .c-form ~ .c-pods .k-textimage a img:last-child:not(:first-child) { width: 8px; height: 8px; }
.c-form ~ .c-pods .k-textimage a[target="_blank"] { display: inline-flex; justify-content: center; width: 32px; height: 32px; margin: 14px 6px 0 0; border-radius: 50%; background: var(--wit); border: 1px solid #e2e2e2; }
.c-form ~ .c-pods .k-textimage a[target="_blank"] img { filter: none; width: 14px; height: 14px; }
.c-form ~ .c-pods .k-textimage:has(a[target="_blank"]) { flex-direction: row; flex-wrap: wrap; }
.c-form ~ .c-pods .k-textimage > :not(a[target="_blank"]) { flex: 0 0 100%; }
.c-form ~ .c-pods .k-textimage > a:not([target="_blank"]) { flex: 0 0 auto; margin-right: 100%; }
.c-form ~ .c-pods .k-links { background: #f7f7f7; border: 1px solid #e2e2e2; border-radius: 0; box-shadow: none; padding: 14px 16px; }
.c-form ~ .c-pods .k-links .raster { gap: 0; }
.c-form ~ .c-pods .k-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; color: #44454a; text-decoration: none; font-size: .85rem; }
.c-form ~ .c-pods .k-links a img { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; margin: 0; }
.c-form ~ .c-pods .k-links a h6 { grid-column: 1; margin: 2px 0 0; font-size: .95rem; color: var(--donker); }

/* Over ons-tabs: petrol actief tabblad en petrol balk, foto smaller en gecentreerd (oud: blue-tab) */
.b-interforecetabs .tabknoppen:not(.schild-knoppen) button[aria-selected="true"] { background: #45747f; }
.b-interforecetabs .tabpaneel { max-width: 914px; margin: 0 auto; }
.b-interforecetabs .tab-onder { background: linear-gradient(0deg, rgba(69, 116, 127, .92), rgba(69, 116, 127, .55) 70%, rgba(69, 116, 127, 0)); }
.b-interforecetabs .tabpaneel::before { background: rgba(69, 116, 127, .35); }

/* Contact: supportzin als een regel met het icoon links; linkkaarten grijs */
.c-form .intro p:has(img) { display: block; position: relative; padding-left: 62px; min-height: 36px; }
.c-form .intro p:has(img) img { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.c-form ~ .c-pods .k-links { background: #f7f7f7 !important; }
.b-interforecetabs .tabpaneel > img { height: 560px; }
@media (max-width: 700px) { .b-interforecetabs .tabpaneel > img { height: 320px; } }

/* Overlay in de paginakop zoals het origineel (29-10): geen vaste hoogte en geen object-fit, maar de
   natuurlijke verhouding van de svg (1440:329) en 2 px omhoog. Met height 22,6vw + cover stak de
   donkere tint rechts 5-7 px onder de schuine fotorand uit = grijze lijn onder de foto. */
.paginakop-overlay { top: -2px; height: auto; object-fit: fill; }
@media (max-width: 800px) { .paginakop-overlay { top: 0; height: 260px; object-fit: cover; } }