/*
Theme Name: BE inspired Solar
Description: Eigen thema voor beinspiredsolar.nl: beeldgedreven, zwart/wit/oranje, met een mozaïek van fototegels (opzet zoals beinspired-ecodiensten.nl).
Version: 2.9
Text Domain: beinspiredsolar
*/

:root {
	--zwart: #0b0c0e;
	--antraciet: #17191c;
	--grijs: #6b7078;
	--lichtgrijs: #f2f2f0;
	--wit: #fff;
	--oranje: #f5821f;
	--oranje-donker: #d96a0c;
	--breed: 1320px;
	--kop: 78px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--wit); color: var(--antraciet); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oranje-donker); }
h1, h2, h3 { line-height: 1.08; margin: 0 0 .45em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, min(6vw, 8.5vh), 5rem); } /* ook begrensd door de schermhoogte (laptops) */
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 28px; }
.label { display: inline-block; color: var(--oranje); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; margin-bottom: 16px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* knoppen */
.knop { display: inline-block; padding: 15px 28px; border-radius: 999px; background: var(--oranje); color: var(--zwart); font-weight: 700; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.knop:hover, .knop:focus { background: var(--wit); color: var(--zwart); }
.knop.licht { background: rgba(255,255,255,.08); color: var(--wit); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); backdrop-filter: blur(4px); }
.knop.licht:hover, .knop.licht:focus { background: var(--wit); color: var(--zwart); }
.knop.donker { background: var(--zwart); color: var(--wit); }
.knop.donker:hover { background: var(--oranje); color: var(--zwart); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* kop: transparant over de beeldkop, zwart na scrollen */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; color: var(--wit); transition: background .3s, box-shadow .3s; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.site-header.gescrold, .site-header.menu-open { background: var(--zwart); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.admin-bar .site-header { top: 32px; }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: var(--kop); }
/* woordmerk: BEINSPIRED (van beinspired.com) + SOLAR in oranje */
.merk { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.merk img { height: 22px; width: auto; }
.site-footer .merk img { height: 30px; }
.hoofdmenu { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 22px; }
.hoofdmenu a { color: var(--wit); text-decoration: none; font-size: .93rem; font-weight: 500; white-space: nowrap; }
.hoofdmenu a:hover, .hoofdmenu .current-menu-item > a, .hoofdmenu .current_page_item > a { color: var(--oranje); }
.site-header .knop { padding: 10px 20px; font-size: .9rem; white-space: nowrap; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 2px solid var(--wit); color: var(--wit); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: .9rem; cursor: pointer; }

/* beeldkop over de volle breedte */
.held { position: relative; display: flex; align-items: flex-end; min-height: 92vh; background: var(--zwart) center/cover no-repeat; color: var(--wit); }
.held::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,12,14,.9) 0%, rgba(11,12,14,.35) 45%, rgba(11,12,14,.15) 100%), linear-gradient(90deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,0) 60%); }
.held .wrap { position: relative; width: 100%; padding-top: calc(var(--kop) + 60px); padding-bottom: 90px; }
.held .tekst { max-width: 760px; }
.held p { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: #e2e3e5; margin: 0 0 32px; max-width: 620px; }
.held.pagina { min-height: 72vh; }
.held .scroll { position: absolute; right: 28px; bottom: 36px; color: rgba(255,255,255,.7); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }

/* mozaïek van fototegels (zoals de blokken op beinspired-ecodiensten.nl) */
.mozaiek-sectie { padding: 90px 0; background: var(--lichtgrijs); }
.sectiekop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.sectiekop p { margin: 0; max-width: 520px; color: var(--grijs); font-size: 1.1rem; }
.mozaiek { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 290px; gap: 18px; }
.foto { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--antraciet); color: var(--wit); text-decoration: none; isolation: isolate; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); z-index: -2; }
.foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%); }
.foto:hover img, .foto:focus img { transform: scale(1.06); }
.foto .tekst { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; }
.foto h3 { margin: 0 0 6px; }
.foto p { margin: 0; color: #d7d9dc; font-size: .98rem; max-width: 460px; }
.foto .meer { display: inline-block; margin-top: 12px; color: var(--oranje); font-weight: 700; font-size: .95rem; }
.foto.groot { grid-column: span 2; grid-row: span 2; }
.foto.groot h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.foto.hoog { grid-row: span 2; }
.foto.breed { grid-column: span 2; }

/* brede beeldbanden: beeld en tekst naast elkaar */
.band { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; }
.band .beeld { position: relative; background: var(--antraciet) center/cover no-repeat; min-height: 380px; }
.band .tekst { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(28px, 6vw, 96px); }
.band .tekst p { color: var(--grijs); font-size: 1.1rem; max-width: 540px; }
.band.donker { background: var(--zwart); color: var(--wit); }
.band.donker .tekst p { color: #b9bdc2; }
.band.omgekeerd .beeld { order: 2; }
.band .lijst { list-style: none; margin: 0 0 32px; padding: 0; }
.band .lijst li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.band .lijst li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; border-radius: 50%; background: var(--oranje); }

/* volle-breedte beeld met tekstkaart */
.paneel { position: relative; min-height: 88vh; display: flex; align-items: center; background: var(--zwart) center/cover no-repeat; color: var(--wit); }
.paneel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,12,14,.85) 0%, rgba(11,12,14,.4) 50%, rgba(11,12,14,0) 80%); }
.paneel .wrap { position: relative; width: 100%; }
.paneel .tekst { max-width: 560px; }
.paneel p { color: #d7d9dc; font-size: 1.15rem; }

/* werkwijze in stappen */
.stappen-sectie { padding: 100px 0; background: var(--zwart); color: var(--wit); }
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid #2a2d32; margin-top: 40px; }
.stap { padding: 32px 28px 0 0; }
.stap .nummer { display: block; font-size: 3.4rem; font-weight: 700; color: var(--oranje); line-height: 1; margin-bottom: 18px; }
.stap p { color: #b9bdc2; margin: 0; }

/* oproep met beeld */
.oproep { position: relative; padding: 140px 0; background: var(--zwart) center/cover no-repeat; color: var(--wit); text-align: center; }
.oproep::before { content: ""; position: absolute; inset: 0; background: rgba(11,12,14,.62); }
.oproep .wrap { position: relative; }
.oproep h2 { max-width: 900px; margin: 0 auto 30px; }
.oproep .knoppen { justify-content: center; }

/* gewone pagina's */
.inhoud { max-width: 820px; margin: 0 auto; padding: 90px 28px 40px; font-size: 1.12rem; }
.inhoud > *:first-child { margin-top: 0; }
.inhoud h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-top: 1.6em; }
.inhoud p { color: #3a3e44; }
.inhoud ul { padding-left: 1.2em; }
.inhoud li { margin-bottom: .5em; }
.inhoud .wp-block-image, .inhoud figure { margin: 48px calc(50% - min(50vw - 28px, 600px)); }
.inhoud .wp-block-image img, .inhoud figure img { width: 100%; border-radius: 18px; }
.inhoud figcaption { text-align: center; color: var(--grijs); font-size: .9rem; margin-top: 10px; }
.contactkaart { max-width: 820px; margin: 0 auto 90px; padding: 0 28px; }
.contactkaart .kaart { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--zwart); color: var(--wit); border-radius: 18px; padding: 30px 34px; }
.contactkaart h3 { margin: 0 0 4px; }
.contactkaart p { margin: 0; color: #b9bdc2; }
.contactkaart a:not(.knop) { color: var(--oranje); }
.ook { padding: 80px 0 100px; background: var(--lichtgrijs); }
.ook .mozaiek { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 360px; }

/* voet */
.site-footer { background: var(--zwart); color: #a9adb3; padding: 72px 0 30px; font-size: .95rem; }
.site-footer .kolommen { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.site-footer .merk { margin-bottom: 18px; }
.site-footer h3 { color: var(--wit); font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1em; }
.site-footer a { color: #a9adb3; text-decoration: none; }
.site-footer a:hover { color: var(--oranje); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer .onder { border-top: 1px solid #24272b; margin-top: 52px; padding-top: 22px; font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* tablet */
@media (max-width: 1024px) {
	.mozaiek { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
	.foto.groot { grid-column: span 2; grid-row: span 1; }
	.foto.hoog { grid-row: span 1; }
	.band { grid-template-columns: 1fr; min-height: 0; }
	.band.omgekeerd .beeld { order: 0; }
	.band .beeld { min-height: 56vw; }
	.stappen { grid-template-columns: repeat(2, 1fr); }
	.ook .mozaiek { grid-template-columns: repeat(2, 1fr); }
	.site-footer .kolommen { grid-template-columns: 1fr 1fr; }
}
/* menuknop zodra woordmerk + menu niet meer naast elkaar passen */
@media (max-width: 1300px) {
	.menu-toggle { display: block; }
	.site-header .menu-toggle { margin-left: auto; }
	.hoofdmenu { display: none; position: absolute; top: var(--kop); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--zwart); padding: 6px 28px 24px; }
	.hoofdmenu.open { display: flex; }
	.hoofdmenu a { display: block; padding: 14px 0; border-bottom: 1px solid #24272b; font-size: 1.05rem; }
}
/* telefoon */
@media (max-width: 820px) {
	:root { --kop: 66px; }
	.site-header .knop { display: none; }
	.site-header .menu-toggle { margin-left: auto; }
	.merk img { height: auto; width: min(237px, calc(100vw - 150px)); }
	.site-header .wrap { gap: 16px; }
	.held { min-height: 86vh; }
	.held .wrap { padding-bottom: 64px; }
	.held .scroll { display: none; }
	.mozaiek, .ook .mozaiek { grid-template-columns: 1fr; grid-auto-rows: 380px; }
	.foto.groot, .foto.breed { grid-column: auto; }
	.stappen { grid-template-columns: 1fr; }
	.site-footer .kolommen { grid-template-columns: 1fr; }
	.mozaiek-sectie, .stappen-sectie { padding: 64px 0; }
	.oproep { padding: 100px 0; }
}

/* contactformulier */
.formulier { margin: 48px 0; background: var(--lichtgrijs); border-radius: 18px; padding: 34px; scroll-margin-top: 110px; }
.formulier .velden { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 24px; }
.formulier label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; }
.formulier label.breed { grid-column: 1 / -1; }
.formulier input[type=text], .formulier input[type=email], .formulier input[type=tel], .formulier select, .formulier textarea { font: inherit; font-weight: 400; padding: 13px 15px; border: 1px solid #d5d7da; border-radius: 10px; background: #fff; color: inherit; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 2px solid var(--zwart); outline-offset: 1px; border-color: transparent; }
.formulier .akkoord { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--grijs); }
.formulier .akkoord input { margin-top: 5px; }
.formulier .verborgen { position: absolute; left: -9999px; }
.formulier .knop { border: 0; cursor: pointer; font-size: 1rem; }
.formulier .melding { padding: 14px 18px; border-radius: 10px; margin-bottom: 22px; font-weight: 600; }
.formulier .melding.goed { background: #e3f6e8; color: #1d6b34; }
.formulier .melding.fout { background: #fde8e8; color: #9b1c1c; }
@media (max-width: 820px) { .formulier { padding: 24px; } .formulier .velden { grid-template-columns: 1fr; } }

/* slider in de beeldkop (homepage): per onderwerp een dia, tabs met voortgangsbalk */
/* dia's liggen gestapeld in één rastercel: de slider is minstens schermvullend en groeit mee met de langste tekst */
.slider { position: relative; display: grid; min-height: max(92vh, 640px); background: var(--zwart); color: var(--wit); overflow: hidden; }
.dia { position: relative; grid-area: 1 / 1; display: flex; align-items: flex-end; background: var(--zwart) center/cover no-repeat; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; transform: scale(1.04); }
.dia.actief { opacity: 1; visibility: visible; transition: opacity 1s ease, transform 8s ease-out; transform: scale(1); z-index: 1; }
.dia::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,12,14,.92) 0%, rgba(11,12,14,.4) 45%, rgba(11,12,14,.15) 100%), linear-gradient(90deg, rgba(11,12,14,.6) 0%, rgba(11,12,14,0) 60%); }
.dia .wrap { position: relative; width: 100%; padding-top: calc(var(--kop) + 28px); padding-bottom: 150px; }
.dia .tekst { max-width: 760px; }
.dia .tekst > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.dia.actief .tekst > * { opacity: 1; transform: none; }
.dia.actief .tekst > :nth-child(2) { transition-delay: .1s; }
.dia.actief .tekst > :nth-child(3) { transition-delay: .2s; }
.dia.actief .tekst > :nth-child(4) { transition-delay: .3s; }
.dia p { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: #e2e3e5; margin: 0 0 32px; max-width: 620px; }
.dia .h1 { font-size: clamp(2.2rem, min(6vw, 8.5vh), 5rem); }
.slider-bediening { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: 34px; }
.slider-bediening .wrap { display: flex; align-items: flex-end; gap: 18px; }
.slider .tabs { display: flex; flex: 1; gap: 14px; }
.slider .tab { flex: 1; background: none; border: 0; padding: 0; color: rgba(255,255,255,.62); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; }
.slider .tab:hover, .slider .tab.actief { color: var(--wit); }
.slider .tab .balk { display: block; height: 3px; margin-bottom: 10px; background: rgba(255,255,255,.28); border-radius: 3px; overflow: hidden; }
.slider .tab .balk span { display: block; height: 100%; width: 0; background: var(--accent, var(--oranje)); }
.slider .tab.actief .balk span { width: 100%; }
.slider .tab.loopt .balk span { width: 0; animation: bis-balk var(--duur, 7000ms) linear forwards; }
@keyframes bis-balk { from { width: 0; } to { width: 100%; } }
.slider .pijl { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.2); color: var(--wit); font-size: 1.1rem; cursor: pointer; transition: background .2s, color .2s; }
.slider .pijl:hover, .slider .pijl:focus { background: var(--wit); color: var(--zwart); }
.slider .tab:focus-visible, .slider .pijl:focus-visible { outline: 2px solid var(--wit); outline-offset: 4px; }
@media (max-width: 820px) {
	.slider { min-height: max(88vh, 560px); }
	.dia .wrap { padding-bottom: 120px; }
	.slider .pijl { display: none; }
	.slider .tabs { gap: 8px; }
	.slider .tab { font-size: 0; } /* op de telefoon alleen de balkjes */
	.slider .tab .balk { margin-bottom: 0; height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.dia, .dia.actief, .dia .tekst > * { transition: none; transform: none; }
}

/* keuze laadpaal: twee kaarten naast elkaar */
.keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 36px calc(50% - min(50vw - 28px, 600px)); }
.keuze .optie { background: var(--zwart); color: var(--wit); border-radius: 18px; overflow: hidden; }
.keuze .optie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.keuze .optie .tekst { padding: 24px 28px 28px; }
.keuze .optie h3 { margin: 0 0 12px; }
.keuze .optie ul { list-style: none; margin: 0; padding: 0; }
.keuze .optie li { position: relative; padding-left: 26px; margin-bottom: 8px; color: #c9ccd0; font-size: 1rem; }
.keuze .optie li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--oranje); }
@media (max-width: 820px) { .keuze { grid-template-columns: 1fr; } }

/* app-slider in de band over de Enphase App (homepage) */
.appslider { overflow: hidden; background: var(--zwart); }
.appdia { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.appdia.actief { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.appdia figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 78px; color: var(--wit); font-weight: 600; font-size: 1.05rem; text-align: center; background: linear-gradient(0deg, rgba(11,12,14,.9), rgba(11,12,14,0)); }
.appslider-bediening { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px; }
.appslider .stippen { display: flex; gap: 10px; }
.appslider .stip { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; transition: background .2s, transform .2s; }
.appslider .stip.actief { background: var(--oranje); transform: scale(1.25); }
.appslider .pijl { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.25); color: var(--wit); font-size: 1rem; cursor: pointer; transition: background .2s, color .2s; }
.appslider .pijl:hover, .appslider .pijl:focus { background: var(--wit); color: var(--zwart); }
.appslider .stip:focus-visible, .appslider .pijl:focus-visible { outline: 2px solid var(--wit); outline-offset: 3px; }
@media (max-width: 820px) { .appdia .telefoon { top: 26px; bottom: 104px; } .appdia figcaption { font-size: .95rem; padding-bottom: 72px; } }
@media (max-width: 1024px) { .band .beeld.appslider { min-height: max(110vw, 480px); } }
/* labels in de beeldkop leesbaar op drukke foto's */
.dia .label, .held .label { text-shadow: 0 1px 10px rgba(0,0,0,.75); }

/* invoervelden nooit breder dan het formulier (telefoon) */
.formulier input:not([type=checkbox]), .formulier select, .formulier textarea { width: 100%; min-width: 0; }
.formulier .velden > * { min-width: 0; }

/* ---- vergelijking micro-omvormers vs. string-omvormer ([vergelijking_micro]) ---- */
.vgl { background: #0b0c0e; color: var(--wit); border-radius: 18px; padding: 26px; }
.vgl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.vgl-tab { background: rgba(255,255,255,.08); color: #d7d9dc; border: 0; border-radius: 999px; padding: 10px 18px; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.vgl-tab:hover { background: rgba(255,255,255,.16); color: var(--wit); }
.vgl-tab.actief { background: var(--oranje); color: var(--zwart); }
.vgl-tab:focus-visible { outline: 2px solid var(--wit); outline-offset: 3px; }
.vgl-paneelset { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vgl-paneelset[hidden] { display: none; }
.vgl-kolom { margin: 0; background: #17191c; border-radius: 14px; padding: 16px 16px 18px; }
.vgl-kolom figcaption { font-size: .95rem; margin-bottom: 8px; }
.vgl-kolom-micro figcaption strong { color: #5fd38d; }
.vgl-kolom-string figcaption strong { color: #ff7b7f; }
.vgl-kolom p { margin: 10px 0 0; color: #b9bdc2; font-size: .92rem; line-height: 1.5; }
.vgl-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.vgl-dak { fill: #2a2d32; }
.vgl-gloed { fill: #8cc4ff; opacity: .32; }
.vgl-omvormer, .vgl-meterkast { fill: #e9eaec; }
.vgl-leiding { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 8; animation: vgl-stroom 1.2s linear infinite; }
.vgl-dc { stroke: #e5484d; animation: vgl-stroom 1.2s linear infinite, vgl-puls 1.6s ease-in-out infinite; }
.vgl-ac { stroke: #3fbf6f; stroke-width: 3; }
.vgl-waarschuwing { fill: #ff7b7f; font-size: 12px; font-weight: 700; text-anchor: middle; animation: vgl-puls 1.6s ease-in-out infinite; }
.vgl-veilig { fill: #5fd38d; font-size: 12px; font-weight: 700; text-anchor: middle; }
.vgl-wolk { fill: rgba(8, 10, 14, .72); animation: vgl-wolk 8s ease-in-out infinite; }
.vgl-micro.vgl-schaduw .vgl-p0 .vgl-gloed, .vgl-string.vgl-schaduw .vgl-gloed { animation: vgl-dim 8s ease-in-out infinite; }
.vgl-meter-bak { fill: rgba(255,255,255,.1); }
.vgl-meter { transform-box: fill-box; transform-origin: left center; }
.vgl-meter-micro { fill: #3fbf6f; animation: vgl-meter-micro 8s ease-in-out infinite; }
.vgl-meter-string { fill: #e5484d; animation: vgl-meter-string 8s ease-in-out infinite; }
.vgl-meter-tekst { fill: #b9bdc2; font-size: 11px; }
@keyframes vgl-stroom { to { stroke-dashoffset: -36; } }
@keyframes vgl-puls { 50% { opacity: .45; } }
@keyframes vgl-wolk { 0%, 18% { transform: translateX(-150px); opacity: 0; } 34%, 74% { transform: translateX(0); opacity: 1; } 90%, 100% { transform: translateX(-150px); opacity: 0; } }
@keyframes vgl-dim { 0%, 22% { opacity: .32; } 36%, 72% { opacity: 0; } 88%, 100% { opacity: .32; } }
@keyframes vgl-meter-micro { 0%, 22% { transform: scaleX(1); } 36%, 72% { transform: scaleX(.84); } 88%, 100% { transform: scaleX(1); } }
@keyframes vgl-meter-string { 0%, 22% { transform: scaleX(1); } 36%, 72% { transform: scaleX(.22); } 88%, 100% { transform: scaleX(1); } }
/* minder beweging: geen animaties, wel de schaduwsituatie tonen */
@media (prefers-reduced-motion: reduce) {
	.vgl-leiding, .vgl-dc, .vgl-waarschuwing, .vgl-wolk, .vgl-gloed, .vgl-meter { animation: none !important; }
	.vgl-micro.vgl-schaduw .vgl-p0 .vgl-gloed, .vgl-string.vgl-schaduw .vgl-gloed { opacity: 0; }
	.vgl-meter-micro { transform: scaleX(.84); }
	.vgl-meter-string { transform: scaleX(.22); }
}
/* in de donkere band op de homepage */
.band .beeld.vgl-beeld { background: var(--zwart); display: flex; align-items: center; padding: 40px clamp(20px, 4vw, 56px); }
.band .beeld.vgl-beeld .vgl { width: 100%; }
@media (max-width: 600px) { .vgl { padding: 18px; } .vgl-paneelset { grid-template-columns: 1fr; } .band .beeld.vgl-beeld { padding: 28px 16px; } }
/* eigen sectie op de homepage */
.vgl-sectie { background: var(--zwart); color: var(--wit); padding: 100px 0; }
.vgl-sectie .sectiekop p { color: #b9bdc2; }
.vgl-sectie .vgl { padding: 0; background: none; }
.vgl-sectie .vgl-kolom { padding: 24px 26px 26px; }
.vgl-sectie .vgl-kolom figcaption { font-size: 1.15rem; }
.vgl-sectie .vgl-kolom p { font-size: 1.02rem; }
.vgl-knop { margin-top: 34px; }
@media (max-width: 820px) { .vgl-sectie { padding: 64px 0; } }
.vgl-sectie .vgl-svg { max-height: 300px; margin: 0 auto; }
/* vergelijking v2: panelen met frame en cellen, herkenbare micro-omvormers, centrale omvormer/meterkast */
.vgl-cellijn { stroke: rgba(255,255,255,.16); stroke-width: .8; }
.vgl-frame { fill: none; stroke: #c9d3e0; stroke-width: 1.6; }
.vgl-mi .vgl-micro-kast { fill: #2b2f36; stroke: #b4bac3; stroke-width: 1; }
.vgl-mi .vgl-rib { stroke: #b4bac3; stroke-width: 1; }
.vgl-doos { fill: #0f1114; stroke: #b4bac3; stroke-width: .8; }
.vgl-omvormer, .vgl-meterkast { fill: #e9eaec; }
.vgl-scherm { fill: #1d4f7a; }
.vgl-kastlijn { stroke: #7a8089; stroke-width: 1.5; }
.vgl-kast-tekst { fill: #d7d9dc; font-size: 11px; font-weight: 600; text-anchor: middle; }
.vgl-dc { stroke-width: 3.5; }
.vgl-string.vgl-schaduw .vgl-dc { animation: vgl-stroom 1.2s linear infinite, vgl-dimlijn 8s ease-in-out infinite; }
.vgl-micro.vgl-schaduw .vgl-tak0 { animation: vgl-stroom 1.2s linear infinite, vgl-dimlijn 8s ease-in-out infinite; }
@keyframes vgl-dimlijn { 0%, 22% { opacity: 1; } 36%, 72% { opacity: .22; } 88%, 100% { opacity: 1; } }
.vgl-meter-tekst { text-anchor: start; }
@media (prefers-reduced-motion: reduce) { .vgl-string.vgl-schaduw .vgl-dc, .vgl-micro.vgl-schaduw .vgl-tak0 { animation: none !important; opacity: .22; } }

/* pagina Micro-omvormers: polymeer-blok, weer-rij en garantieband */
.inhoud .vgl { margin: 40px calc(50% - min(50vw - 28px, 600px)); }
.micro-blok { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; margin: 32px 0 48px; }
.micro-blok img { width: 100%; border-radius: 18px; }
.micro-blok p { margin: 0 0 1em; }
.weer-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 32px calc(50% - min(50vw - 28px, 600px)) 56px; }
.weer-rij figure { position: relative; margin: 0; border-radius: 18px; overflow: hidden; }
.weer-rij img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 !important; }
.weer-rij figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 !important; padding: 40px 18px 14px; color: var(--wit) !important; font-weight: 700; text-align: left !important; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0)); }
.garantie-band { position: relative; display: flex; align-items: center; min-height: 360px; margin: 56px calc(50% - min(50vw - 28px, 600px)); padding: 40px clamp(24px, 5vw, 64px); border-radius: 18px; overflow: hidden; background: #0b0c0e center/cover no-repeat; color: var(--wit); }
.garantie-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,12,14,.88) 0%, rgba(11,12,14,.55) 50%, rgba(11,12,14,0) 85%); }
.garantie-tekst { position: relative; max-width: 420px; }
.garantie-getal { display: block; font-size: clamp(4.5rem, 10vw, 7.5rem); font-weight: 800; line-height: .9; color: var(--oranje); letter-spacing: -.04em; }
.garantie-jaar { display: block; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; margin-bottom: 14px; }
.garantie-tekst p { color: #d7d9dc !important; margin: 0; }
@media (max-width: 820px) { .micro-blok { grid-template-columns: 1fr; gap: 18px; } .weer-rij { grid-template-columns: 1fr; } .garantie-band { min-height: 300px; } }
.inhoud .vgl figure, .inhoud .weer-rij figure { margin: 0; }
.inhoud .vgl figcaption { text-align: left; margin: 0 0 8px; color: inherit; font-size: 1.05rem; }
.inhoud .vgl p { color: #b9bdc2; font-size: .95rem; }
.inhoud .vgl-svg { max-height: 300px; margin: 0 auto; }
/* vergelijking v3: ruimte binnen, 30% schaduw met percentages */
.vgl-binnen { fill: rgba(255,255,255,.03); stroke: #6b7078; stroke-width: 1; stroke-dasharray: 4 4; }
.vgl-binnen-tekst { fill: #8a9099; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-anchor: end; }
.vgl-donker { fill: #000; opacity: 0; }
.vgl-micro.vgl-schaduw .vgl-p0 .vgl-gloed, .vgl-string.vgl-schaduw .vgl-gloed { animation: none; }
.vgl-micro.vgl-schaduw .vgl-p0 .vgl-donker, .vgl-string.vgl-schaduw .vgl-donker { animation: vgl-donker 8s ease-in-out infinite; }
.vgl-pct { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 3px; }
.vgl-pct.vgl-pct-laag { fill: #ffb3b5; }
.vgl-micro .vgl-pct.vgl-pct-laag { fill: #ffd38a; }
.vgl-wissel-n { animation: vgl-uit 8s ease-in-out infinite; }
.vgl-wissel-s { opacity: 0; animation: vgl-aan 8s ease-in-out infinite; }
@keyframes vgl-donker { 0%, 22% { opacity: 0; } 36%, 72% { opacity: .38; } 88%, 100% { opacity: 0; } }
@keyframes vgl-aan { 0%, 28% { opacity: 0; } 36%, 72% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes vgl-uit { 0%, 28% { opacity: 1; } 36%, 72% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes vgl-meter-micro { 0%, 22% { transform: scaleX(1); } 36%, 72% { transform: scaleX(.95); } 88%, 100% { transform: scaleX(1); } }
@keyframes vgl-meter-string { 0%, 22% { transform: scaleX(1); } 36%, 72% { transform: scaleX(.70); } 88%, 100% { transform: scaleX(1); } }
@keyframes vgl-dimlijn { 0%, 22% { opacity: 1; } 36%, 72% { opacity: .55; } 88%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.vgl-wissel-n { display: none; } .vgl-wissel-s { opacity: 1; animation: none; }
	.vgl-micro.vgl-schaduw .vgl-p0 .vgl-donker, .vgl-string.vgl-schaduw .vgl-donker { animation: none; opacity: .38; }
	.vgl-meter-micro { transform: scaleX(.95); } .vgl-meter-string { transform: scaleX(.70); }
	.vgl-string.vgl-schaduw .vgl-dc, .vgl-micro.vgl-schaduw .vgl-tak0 { opacity: .55; }
}
.vgl-kast-tekst { font-size: 9.5px; }

/* pagina Werkwijze: compacte stappen en klanttevredenheid (NPS) */
.stappen-kort { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 32px calc(50% - min(50vw - 28px, 600px)) 56px; counter-reset: none; }
.stappen-kort li { background: var(--lichtgrijs); border-radius: 18px; padding: 26px 22px; margin: 0 !important; }
.stap-nr { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--oranje); color: var(--zwart); font-weight: 800; margin-bottom: 14px; }
.stappen-kort h3 { margin: 0 0 8px; font-size: 1.2rem; }
.stappen-kort p { margin: 0; font-size: 1rem; color: var(--grijs) !important; }
.nps { background: var(--zwart); color: var(--wit); border-radius: 18px; padding: clamp(28px, 5vw, 56px); margin: 56px calc(50% - min(50vw - 28px, 600px)); display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px 48px; align-items: center; }
.nps h2 { margin-top: 0 !important; color: var(--wit); }
.nps p { color: #b9bdc2 !important; }
.nps-kop p { margin: 0; }
.nps-score { text-align: center; }
.nps-getal { display: block; font-size: clamp(5rem, 11vw, 8rem); font-weight: 800; line-height: .9; color: var(--oranje); letter-spacing: -.04em; }
.nps-sub { display: block; font-weight: 700; margin-top: 6px; }
.nps-oordeel { display: inline-block; margin-top: 10px; background: #1f7a45; color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.nps-schaal { grid-column: 1 / -1; padding: 30px 0 4px; }
.nps-balk { position: relative; display: flex; height: 14px; border-radius: 7px; overflow: visible; }
.nps-zone { height: 100%; }
.nps-zone.z1 { width: 50%; background: #b23a3f; border-radius: 7px 0 0 7px; }
.nps-zone.z2 { width: 10%; background: #c98a2e; }
.nps-zone.z3 { width: 15%; background: #b9b33a; }
.nps-zone.z4 { width: 15%; background: #4fae68; }
.nps-zone.z5 { width: 10%; background: #1f7a45; border-radius: 0 7px 7px 0; }
.nps-wijzer { position: absolute; top: -34px; transform: translateX(-50%); }
.nps-wijzer b { display: block; background: var(--oranje); color: var(--zwart); font-size: .85rem; padding: 3px 9px; border-radius: 6px; position: relative; }
.nps-wijzer b::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: var(--oranje); }
.nps-labels { position: relative; height: 20px; margin-top: 8px; font-size: .8rem; color: #b9bdc2; }
.nps-labels span { position: absolute; transform: translateX(-50%); }
.nps-labels span:first-child { transform: none; }
.nps-labels span:last-child { transform: translateX(-100%); }
.nps-uitleg { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-top: 1px solid #2a2d32; padding-top: 26px; }
.nps-uitleg h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--wit); }
.nps-uitleg p, .nps-uitleg li { font-size: .98rem; color: #b9bdc2 !important; }
.nps-uitleg ul { margin: 0; padding-left: 1.1em !important; }
.nps-uitleg li { margin-bottom: 4px !important; }
.nps-uitleg strong { color: var(--wit); }
.nps-bron { font-size: .85rem !important; margin: 10px 0 0; }
@media (max-width: 900px) { .stappen-kort { grid-template-columns: 1fr 1fr; } .nps { grid-template-columns: 1fr; } .nps-score { text-align: left; } .nps-uitleg { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stappen-kort { grid-template-columns: 1fr; } .nps-labels span:nth-child(3), .nps-labels span:nth-child(4) { display: none; } }
@media (max-width: 560px) { .nps-labels span:last-child { display: none; } }
/* korte NPS-vermelding op de homepage, onder de werkwijze */
.nps-kort { display: inline-flex; align-items: center; gap: 18px; margin-top: 44px; padding: 16px 24px 16px 18px; border: 1px solid #2a2d32; border-radius: 18px; color: var(--wit); text-decoration: none; transition: border-color .2s, background .2s; }
.nps-kort:hover { border-color: var(--oranje); background: rgba(255,255,255,.03); }
.nps-kort-getal { font-size: 2.8rem; font-weight: 800; line-height: 1; color: var(--oranje); letter-spacing: -.03em; }
.nps-kort-tekst { display: flex; flex-direction: column; gap: 2px; color: #b9bdc2; font-size: .95rem; }
.nps-kort-tekst strong { color: var(--wit); font-size: 1.05rem; }
/* vergelijking als slider: voortgangsbalk in de tabbladen */
.vgl-tab { position: relative; overflow: hidden; }
.vgl-balk { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: transparent; }
.vgl-balk span { display: block; height: 100%; width: 0; background: rgba(0,0,0,.45); border-radius: 2px; }
.vgl-tab.loopt .vgl-balk span { animation: vgl-balk var(--vgl-duur, 8000ms) linear forwards; }
@keyframes vgl-balk { to { width: 100%; } }
.vgl-micro-vorm { fill: #f2f2f0; }
/* NPS-meter (homepage) */
.nps-kort { gap: 22px; padding: 18px 28px 18px 18px; }
.nps-meter { width: 190px; height: auto; flex: none; overflow: visible; }
.nps-meter-wijzer { transform-origin: 100px 100px; transform: rotate(var(--hoek)); animation: nps-wijzer 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nps-wijzer { from { transform: rotate(0deg); } to { transform: rotate(var(--hoek)); } }
.nps-meter-getal { fill: var(--oranje); font-size: 40px; font-weight: 800; text-anchor: middle; letter-spacing: -1px; }
.nps-meter-oordeel { fill: #5fd38d; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-anchor: middle; }
.nps-meter-min, .nps-meter-max { fill: #8a9099; font-size: 9px; }
.nps-meter-min { text-anchor: start; }
.nps-meter-max { text-anchor: end; }
@media (prefers-reduced-motion: reduce) { .nps-meter-wijzer { animation: none; } }
@media (max-width: 560px) { .nps-kort { flex-direction: column; align-items: flex-start; } }
/* NPS-meter v2: zones buitenom, score + naald in het midden */
.nps-meter { width: 250px; }
.nps-meter-wijzer { transform-origin: 130px 128px; }
.nps-meter-getal { font-size: 42px; }
.nps-meter-zone { font-size: 10.5px; font-weight: 700; opacity: .75; }
.nps-meter-zone.actief { opacity: 1; font-weight: 800; }
.nps-meter-eind { fill: #8a9099; font-size: 9px; text-anchor: middle; }
.nps-meter { width: 320px; max-width: 100%; overflow: hidden; }

/* pagina Laadpalen: animatie bidirectioneel laden ([bidirectioneel_laden], bidirectioneel.php); 3 fasen van 4 s */
.bidi { background: var(--zwart); color: var(--wit); border-radius: 18px; padding: 26px; margin: 36px calc(50% - min(50vw - 28px, 600px)); }
.inhoud .bidi ol.bidi-stappen { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.bidi-stappen li { margin: 0; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: #d7d9dc; font-size: .9rem; font-weight: 600; }
.bidi-stappen li span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: .8rem; }
.bidi-fa-pil { animation: bidi-pil-a 12s infinite; } .bidi-fb-pil { animation: bidi-pil-b 12s infinite; } .bidi-fc-pil { animation: bidi-pil-c 12s infinite; }
.bidi-svg { display: block; width: 100%; height: auto; font-family: inherit; border-radius: 12px; }
.bidi-lucht-dag { fill: #1e3a5c; } .bidi-lucht-nacht { fill: #0e1320; animation: bidi-nacht 12s infinite; }
.bidi-zon { fill: #ffc53d; stroke: #ffc53d; stroke-width: 3; stroke-linecap: round; animation: bidi-a 12s infinite; }
.bidi-maan { fill: #e8ecf2; animation: bidi-bc 12s infinite; }
.bidi-grond { fill: #17191c; }
.bidi-mast { fill: none; stroke: #9aa1aa; stroke-width: 2.5; stroke-linejoin: round; }
.bidi-dak { fill: #2a2d32; } .bidi-panelen polygon { fill: #1f4a8a; stroke: #8fb4e6; stroke-width: 1; }
.bidi-huis { fill: #e9eaec; } .bidi-raam { fill: #3a4048; } .bidi-deur { fill: #5b616a; }
.bidi-licht { fill: #ffd27a; opacity: 0; animation: bidi-bc 12s infinite; }
.bidi-paal { fill: #6b7078; } .bidi-led { fill: #3fd0c9; } .bidi-paalvoet { stroke: #6b7078; stroke-width: 4; }
.bidi-auto { fill: #c9ccd0; } .bidi-autoraam { fill: #2b3038; } .bidi-wiel { fill: #0b0c0e; } .bidi-velg { fill: #8a9099; }
.bidi-accu-bak { fill: rgba(0,0,0,.35); stroke: #d7d9dc; stroke-width: 1.5; } .bidi-accu-pool { fill: #d7d9dc; }
.bidi-accu { fill: #3fbf6f; transform-box: fill-box; transform-origin: left center; animation: bidi-accu 12s infinite; }
.bidi-tekst { fill: #d7d9dc; font-size: 13px; font-weight: 600; text-anchor: middle; }
.bidi-kop { fill: var(--wit); font-size: 19px; font-weight: 700; }
.bidi-stroom { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 8; animation: bidi-stroom 1s linear infinite; }
.bidi-laden { stroke: var(--oranje); } .bidi-zonstroom { stroke: #ffc53d; stroke-width: 3; } .bidi-terug { stroke: #3fbf6f; }
.bidi-fa { animation: bidi-a 12s infinite; } .bidi-fb { opacity: 0; animation: bidi-b 12s infinite; } .bidi-fc { opacity: 0; animation: bidi-c 12s infinite; }
.bidi-uitleg { display: grid; margin-top: 16px; }
.inhoud .bidi-uitleg p { grid-area: 1 / 1; margin: 0; color: #b9bdc2; font-size: .98rem; }
@keyframes bidi-stroom { to { stroke-dashoffset: -36; } }
@keyframes bidi-a { 0%, 30% { opacity: 1; } 33.3%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bidi-b { 0%, 30% { opacity: 0; } 33.3%, 63.6% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes bidi-c { 0%, 63.6% { opacity: 0; } 66.6%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bidi-bc { 0%, 30% { opacity: 0; } 33.3%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bidi-nacht { 0%, 30% { opacity: 0; } 33.3%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bidi-accu { 0% { transform: scaleX(.3); } 30%, 33.3% { transform: scaleX(.9); } 63.6%, 66.6% { transform: scaleX(.6); } 97%, 100% { transform: scaleX(.3); } }
@keyframes bidi-pil-a { 0%, 30% { background: var(--oranje); color: var(--zwart); } 33.3%, 97% { background: rgba(255,255,255,.08); color: #d7d9dc; } 100% { background: var(--oranje); color: var(--zwart); } }
@keyframes bidi-pil-b { 0%, 30%, 66.6%, 100% { background: rgba(255,255,255,.08); color: #d7d9dc; } 33.3%, 63.6% { background: #3fbf6f; color: var(--zwart); } }
@keyframes bidi-pil-c { 0%, 63.6% { background: rgba(255,255,255,.08); color: #d7d9dc; } 66.6%, 97% { background: #3fbf6f; color: var(--zwart); } 100% { background: rgba(255,255,255,.08); color: #d7d9dc; } }
@media (max-width: 600px) { .bidi { padding: 18px; } .bidi-stappen li { font-size: .82rem; } .bidi-kop { display: none; } .bidi-tekst { font-size: 22px; } }
/* zonder beweging: fase 2 (auto levert aan huis) stilstaand */
@media (prefers-reduced-motion: reduce) {
	.bidi *, .bidi-stappen li { animation: none !important; }
	.bidi-fa, .bidi-fc, .bidi-zon { opacity: 0; } .bidi-fb, .bidi-maan, .bidi-licht, .bidi-lucht-nacht { opacity: 1; }
	.bidi-accu { transform: scaleX(.6); } .bidi-fb-pil { background: #3fbf6f !important; color: var(--zwart) !important; }
}

/* kenmerk in de paginakop (veld bis_kop_badge), bv. 25 jaar garantie op de pagina Micro-omvormers */
.kop-badge { display: inline-flex; align-items: center; gap: 14px; padding: 10px 22px 10px 16px; border: 2px solid var(--oranje); border-radius: 16px; background: rgba(11,12,14,.6); color: var(--wit); text-decoration: none; backdrop-filter: blur(4px); transition: background .2s, transform .2s; }
.kop-badge:hover, .kop-badge:focus { background: rgba(245,130,31,.18); transform: translateY(-2px); color: var(--wit); }
.kop-badge-getal { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--oranje); }
.kop-badge-tekst { display: flex; flex-direction: column; font-size: .92rem; color: #d7d9dc; line-height: 1.35; }
.kop-badge-tekst strong { color: var(--wit); font-size: 1.15rem; }
.garantie-band { scroll-margin-top: calc(var(--kop) + 24px); }
/* garantiezegel in de paginakop (veld bis_kop_badge): eigen ontwerp in de huisstijl */
.kop-zegel { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(112px, 9vw, 136px); aspect-ratio: 1; border-radius: 26px; background: linear-gradient(145deg, #ffa24a 0%, var(--oranje) 45%, #c95a08 100%); color: var(--wit); text-decoration: none; box-shadow: 0 12px 34px rgba(0,0,0,.55); transition: transform .2s; }
.kop-zegel::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 20px; }
.zegel-getal { font-size: clamp(2.9rem, 4vw, 3.7rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; text-shadow: 0 2px 10px rgba(120,50,0,.35); }
.zegel-tekst { margin-top: 5px; max-width: 80%; font-size: .66rem; font-weight: 700; line-height: 1.25; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
a.kop-zegel:hover, a.kop-zegel:focus { transform: translateY(-3px) rotate(-2deg); color: var(--wit); }
#garantie { scroll-margin-top: calc(var(--kop) + 24px); }
/* Laadpalen: laadpaal staat rechts in de kopfoto; op smalle schermen die kant tonen */
@media (max-width: 820px) { .page-id-8 .held.pagina { background-position: 68% center; } }

/* eigen telefoonframe om de appschermen (img/app/), getekend in CSS: rand, camera-eiland, zijknoppen */
.telefoon { position: relative; aspect-ratio: 509 / 1082; padding: 10px; border-radius: 48px; background: linear-gradient(150deg, #3a3e45 0%, #16181b 45%, #0a0b0d 100%); box-shadow: 0 0 0 1.5px #4a4f57, 0 0 0 4px #121316, 0 28px 60px rgba(0,0,0,.55); }
.telefoon img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 38px; background: #fff; }
.telefoon::before { content: ""; position: absolute; top: 20px; left: 50%; width: 27%; height: 24px; transform: translateX(-50%); border-radius: 14px; background: #050506; z-index: 1; }
.telefoon::after { content: ""; position: absolute; right: -6px; top: 22%; width: 4px; height: 12%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #2a2d32, #4a4f57); }
.appdia .telefoon { position: absolute; top: 40px; bottom: 120px; left: 50%; transform: translateX(-50%); }
/* losse telefoon in de tekst (bv. Thuisbatterijen) */
.inhoud .app-figuur { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 36px calc(50% - min(50vw - 28px, 600px)); padding: 44px 24px 30px; border-radius: 18px; background: radial-gradient(circle at 50% 35%, #23262b 0%, var(--zwart) 70%); }
.inhoud .app-figuur .telefoon { width: min(280px, 68vw); }
.inhoud .app-figuur figcaption { margin: 0; color: #d7d9dc; font-weight: 600; text-align: center; }
/* fotoserie die langzaam overvloeit (bv. Zonnepanelen), 4 foto’s van elk 6 s */
.inhoud .foto-serie { position: relative; margin: 36px calc(50% - min(50vw - 28px, 600px)); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--zwart); }
.inhoud .foto-serie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: 0; animation: foto-serie 24s infinite; }
.inhoud .foto-serie img:nth-child(1) { animation-delay: 0s; } .inhoud .foto-serie img:nth-child(2) { animation-delay: 6s; } .inhoud .foto-serie img:nth-child(3) { animation-delay: 12s; } .inhoud .foto-serie img:nth-child(4) { animation-delay: 18s; }
@keyframes foto-serie { 0% { opacity: 0; transform: scale(1.04); } 5%, 25% { opacity: 1; } 30%, 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .inhoud .foto-serie img { animation: none; } .inhoud .foto-serie img:first-child { opacity: 1; } }