/* GEGENEREERD door bouw.py uit blokken/ en gedeeld/ — niet met de hand bewerken. Bron: gedeeld/css, blokken/NAAM/blok.css, gedeeld/css-slot */
/* ==================== gedeeld (gedeeld/css/00-variabelen.css) ==================== */
/* ============================================================
DEVA — groepenkast-landingspagina
Kleuren en typografie staan als variabelen bovenaan.
Het logo heeft zijn eigen rood (#F10000); dat blijft zo.
============================================================ */
:root {
/* Kleuren (huisstijl, zie CLAUDE.md §4) */
--rood: #B61A18; /* primair: knoppen, accenten */
--rood-donker: #8E1412; /* hover/actief */
--oranje: #FF6E00; /* "let op"-accenten */
--groen: #029610; /* geruststelling, vinkjes (donkere variant: AA op wit) */
--groen-licht: #06CE1A; /* alleen op donkere ondergrond */
--tekst: #1A1A1A;
--tekst-grijs: #4A4A4A;
--vlak-licht: #F5F6F8;
--vlak-grijs: #E0E5EA;
--wit: #FFFFFF;
--donker: #1A1A1A;
/* Typografie */
--font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Vormtaal */
--radius: 14px;
--schaduw: 0 4px 20px rgba(0, 0, 0, 0.08);
/* Maten */
--belbalk-hoogte: 64px;
}
/* Inter zelf gehost — geen verzoek naar Google vóór cookietoestemming (AVG),
en geen render-blokkerende externe host (LCP). */
/* Variabele Inter (latin) voor alle overige gewichten (300, 500, 700 in navbar en
hero); de vaste bestanden hieronder winnen voor 400/600/800. */
@font-face {
font-family: "Inter";
src: url("assets/fonts/inter-latin-variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("assets/fonts/inter-latin-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("assets/fonts/inter-latin-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("assets/fonts/inter-latin-800.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* ==================== gedeeld (gedeeld/css/10-basis.css) ==================== */
/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
margin: 0;
font-family: var(--font);
font-size: 17px; /* minimaal 17px op mobiel voor de leesbaarheid */
line-height: 1.65;
color: var(--tekst);
background: var(--wit);
-webkit-font-smoothing: antialiased;
padding-bottom: var(--belbalk-hoogte); /* ruimte voor de sticky belbalk op mobiel */
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 800; }
h1 { font-size: clamp(1.9rem, 6.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--rood); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--rood);
outline-offset: 3px;
border-radius: 4px;
}
.sectie { padding: 56px 20px; }
.sectie--vlak { background: var(--vlak-licht); }
.sectie--donker { background: var(--donker); color: var(--wit); overflow: hidden; }
/* zachte radiale gloed achter de kop van elke donkere sectie */
.sectie--donker h2 { position: relative; z-index: 0; }
.sectie--donker h2::before {
content: "";
position: absolute;
inset: -90px -140px;
z-index: -1;
pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 110, 0, 0.16), transparent 72%);
}
#contact h2::before { background: radial-gradient(closest-side, rgba(182, 26, 24, 0.28), transparent 72%); }
.binnen { max-width: 1060px; margin: 0 auto; }
.binnen--smal { max-width: 720px; margin: 0 auto; }
.kicker {
display: inline-block;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rood);
margin-bottom: 8px;
}
.sectie--donker .kicker { color: var(--oranje); }
.intro { color: var(--tekst-grijs); max-width: 640px; }
.sectie--donker .intro, .sectie--donker p { color: #D8D8D8; }
/* ==================== gedeeld (gedeeld/css/20-belknop.css) ==================== */
/* ---------- Belknop (overal identiek) ---------- */
.belknop {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--rood);
color: var(--wit);
font-weight: 800;
font-size: 1.05rem;
text-decoration: none;
padding: 16px 26px;
border-radius: 999px;
box-shadow: var(--schaduw);
transition: background 0.15s ease, transform 0.15s ease;
text-align: center;
}
.belknop:hover, .belknop:active { background: var(--rood-donker); transform: translateY(-1px); }
.belknop svg { flex: none; }
.belknop--groot { font-size: 1.15rem; padding: 18px 30px; }
/* Tweeregelig knoplabel: nummer groot, ondertitel klein en lichter */
.belknop__tekst {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.25;
}
.belknop__nummer { font-weight: 800; white-space: nowrap; }
.belknop__sub { font-weight: 500; font-size: 0.78em; opacity: 0.9; }
.belhint {
font-size: 0.9rem;
color: var(--tekst-grijs);
margin-top: 10px;
}
.sectie--donker .belhint { color: #C9C9C9; }
/* ==================== gedeeld (gedeeld/css/30-fotos.css) ==================== */
/* ---------- Foto's en placeholders ---------- */
.fotokaart {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--schaduw);
background: var(--vlak-grijs);
position: relative;
}
.fotokaart img { width: 100%; height: 100%; object-fit: cover; }
.fotokaart figcaption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 24px 14px 10px;
font-size: 0.85rem;
color: var(--wit);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}
/* verhoudingen — layout verspringt niet als een foto later verschijnt */
.v43 { aspect-ratio: 4 / 3; }
.v34 { aspect-ratio: 3 / 4; }
.v11 { aspect-ratio: 1 / 1; }
/* grijs vlak dat verschijnt wanneer het bestand nog ontbreekt (via onerror) */
.ph-vlak {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
padding: 10px;
overflow: hidden;
background: repeating-linear-gradient(45deg, #E8E8E8, #E8E8E8 12px, #E0E5EA 12px, #E0E5EA 24px);
color: var(--tekst-grijs);
font-size: 0.72rem;
line-height: 1.35;
}
.ph-vlak strong {
font-family: ui-monospace, Menlo, monospace;
font-size: 0.76rem;
color: var(--tekst);
word-break: break-all;
}
.ph-vlak em { font-style: normal; font-size: 0.68rem; }
/* ==================== gedeeld (gedeeld/css/35-uitlegblok.css) ==================== */
/* ---------- Uitlegkaart: witte kaart met schaduw, gebruikt in blok 05, 10, 12a, 13, 14 ----------
Verhuisd uit blokken/05-herkenning/blok.css op 9 september 2026, omdat pagina A blok 05
niet heeft en de kaart daar toch nodig is. */
.uitlegblok {
background: var(--wit);
border-radius: var(--radius);
box-shadow: var(--schaduw);
padding: 22px;
}
.uitlegblok h3 { display: flex; align-items: center; gap: 10px; }
/* ==================== gedeeld (gedeeld/css/36-formulier.css) ==================== */
/* ---------- Formulier (.formulier): blok 17, stap 4 van het stappenplan en de planpagina.
Hier in gedeeld/ sinds 10 september 2026, omdat plan.html blok 17 niet heeft. ---------- */
.formulier {
background: var(--wit);
color: var(--tekst);
border-radius: var(--radius);
box-shadow: var(--schaduw);
padding: 26px 22px;
max-width: 560px;
}
.formulier label { display: block; font-weight: 600; margin: 14px 0 6px; }
.formulier label:first-of-type { margin-top: 0; }
.formulier .optioneel { font-weight: 400; color: var(--tekst-grijs); font-size: 0.9rem; }
.formulier input, .formulier textarea {
width: 100%;
font: inherit;
font-size: 1.05rem;
padding: 13px 14px;
border: 2px solid var(--vlak-grijs);
border-radius: 10px;
}
.formulier input:focus, .formulier textarea:focus { border-color: var(--rood); outline: none; }
.formulier fieldset.woonsituatie {
border: 0;
padding: 0;
margin: 14px 0 0;
}
.formulier fieldset.woonsituatie legend {
font-weight: 600;
padding: 0;
margin-bottom: 6px;
}
.formulier fieldset.woonsituatie label {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 400;
margin: 0 22px 0 0;
cursor: pointer;
}
.formulier fieldset.woonsituatie input {
width: 22px;
height: 22px;
accent-color: var(--rood);
}
.huur-uitleg {
margin-top: 12px;
border-left: 5px solid var(--oranje);
background: #FFF7EF;
border-radius: 10px;
padding: 14px 16px;
font-size: 0.95rem;
}
.huur-uitleg[hidden] { display: none; }
.formulier button {
margin-top: 20px;
width: 100%;
font: inherit;
font-weight: 800;
font-size: 1.05rem;
color: var(--wit);
background: var(--rood);
border: 0;
border-radius: 999px;
padding: 16px 22px;
cursor: pointer;
}
.formulier button:hover { background: var(--rood-donker); }
.formulier button[disabled] { opacity: 0.6; cursor: wait; }
.formulier__uitleg { margin: 12px 0 0; font-size: 0.88rem; color: var(--tekst-grijs); }
.formulier__status { margin-top: 14px; font-weight: 600; }
.formulier__status[data-toon="fout"] { color: var(--rood); }
.formulier__status[data-toon="ok"] { color: var(--groen); }
/* ---------- Gelukt: groen vinkje boven de melding (Sherwin, 10 september 2026) ---------- */
.formulier__status[data-toon="ok"] { text-align: center; font-weight: 700; color: var(--groen, #029610); padding-top: 6px; }
.formulier__status[data-toon="ok"]::before {
content: "\2713"; display: flex; align-items: center; justify-content: center;
width: 64px; height: 64px; margin: 4px auto 12px; border-radius: 50%;
background: var(--groen, #029610); color: var(--wit); font-size: 2rem; font-weight: 800;
box-shadow: 0 8px 22px rgba(2, 150, 16, 0.3);
animation: vinkIn 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}
@keyframes vinkIn { from { transform: scale(0.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .formulier__status[data-toon="ok"]::before { animation: none; } }
/* ==================== gedeeld (gedeeld/css/37-stapknoppen.css) ==================== */
/* ---------- Stapknoppen (.stap-knop, .stap-terug): stappenplan (blok 10) en planpagina (02-plan).
Hier in gedeeld/ sinds 10 september 2026. ---------- */
.stap-knop {
display: inline-block; margin-top: 20px; font: inherit; font-weight: 800; font-size: 1.05rem;
color: var(--wit); background: var(--rood); border: 0; border-radius: 999px;
padding: 16px 26px; cursor: pointer; box-shadow: var(--schaduw);
}
.stap-knop:hover { background: var(--rood-donker); }
.stap-terug {
display: block; margin: 18px 0 0; background: none; border: 0; padding: 0; font: inherit;
font-size: 0.95rem; color: var(--tekst-grijs); text-decoration: underline; cursor: pointer;
}
.stap-terug::before { content: "\2190\00a0"; }
/* ==================== gedeeld (gedeeld/css/40-nog-aanleveren.css) ==================== */
/* ---------- Nog-aanleveren-markering (zichtbaar tot ingevuld) ---------- */
.nog-aanleveren {
display: block;
border: 2px dashed var(--oranje);
background: #FFF4EA;
color: #7A3B00;
border-radius: 10px;
padding: 10px 14px;
font-size: 0.92rem;
margin: 10px 0;
}
.sectie--donker .nog-aanleveren { background: rgba(255, 110, 0, 0.12); color: #FFC599; }
/* ==================== gedeeld (gedeeld/css/50-verschijn.css) ==================== */
/* Staat bewust vóór de blokken: een blok dat zelf een `transition` op een
.verschijn-element zet (bv. .gevaar, .fotokaart, .stap) wint dan, precies
zoals in de oorspronkelijke styles.css. */
/* ---------- Verschijn-animatie (subtiel, met reduced-motion-respect) ---------- */
.verschijn { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.verschijn.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .verschijn { opacity: 1; transform: none; } }
/* ---------- Verschijnen met kleine onderlinge vertraging ---------- */
.verschijn { transition-delay: var(--vertraging, 0s); }
/* ==================== gedeeld (gedeeld/css/60-hero.css) ==================== */
/* ---------- Hero (zoals /groepenkast op de site) ----------
Gedeeld door 02-hero, 02-hero-veilig en 02-hero-advies (dezelfde .hero__*-klassen);
daarom in gedeeld/css en niet in het blok (sinds 9 september 2026).
Gemeten bij 1601 px: inhoudsvak 1060 breed, verloop #B61A18 → #FF6E00 over
723 px (menubalk meegerekend), kop Inter 52/62.4 700, vinkjes 30×30 met
verloop #06CE1A → #029610, belknop 331×64 Inter 28 800, foto's 338×408 en
290×410 met de onderkant op de onderkant van de hero. */
.hero {
position: relative;
color: var(--wit);
background: linear-gradient(180deg, #B61A18 0%, #FF6E00 100%);
overflow: hidden;
}
.hero__binnen {
position: relative;
max-width: 1060px;
margin: 0 auto;
padding: 61px 29px 34px;
min-height: 670px;
}
.hero__tekst { position: relative; z-index: 1; max-width: 600px; }
.hero__kicker { margin: 0 0 16px; font-size: 20px; font-weight: 400; line-height: 1.2; color: var(--wit); }
.hero__kop {
margin: 0;
font-size: 52px;
font-weight: 700;
line-height: 1.2;
color: var(--wit);
white-space: nowrap;
}
.hero__kop-klein { font-size: 20px; font-weight: 400; margin-left: 8px; }
/* De drie vinkjes: afstanden zoals op de site (52 en 63 px van rij tot rij) */
.hero__usps { list-style: none; margin: 39px 0 0 9px; padding: 0; }
.hero__usps li {
display: flex;
align-items: center;
gap: 14px;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: var(--wit);
}
.hero__usp-tekst { white-space: nowrap; }
.hero__usps li + li { margin-top: 22px; }
.hero__usps li + li + li { margin-top: 33px; }
.hero__vink {
flex: none;
width: 30px;
height: 30px;
border-radius: 4px;
background: linear-gradient(180deg, #06CE1A 0%, #029610 100%);
display: flex;
align-items: center;
justify-content: center;
}
.hero__vink svg { display: block; overflow: visible; }
.hero__onderstreept { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hero__punten {
margin: 33px 0 0 9px;
padding: 0 0 0 24px;
max-width: 363px;
font-size: 18px;
font-weight: 600;
line-height: 36px;
color: var(--wit);
}
/* zonder aanleiding (?reden=) is de puntenlijst leeg (sinds 10 september 2026) */
html:not([data-reden]) .hero__punten { display: none; }
.hero__247 { margin: 40px 0 0 -4px; font-size: 20px; font-weight: 400; line-height: 1.2; color: var(--wit); }
.hero__247 strong { font-weight: 700; }
/* Knoppen naast elkaar (sinds 10 september 2026): plannen (groen) en bellen (wit omlijnd);
de geruststelling eronder. */
.hero__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 36px 0 0 -8px; }
.hero__knoppen .hero__bel { margin: 0; width: auto; padding: 0 22px; font-size: 24px; }
.hero__knoppen .hero__bel--bellen { background: var(--oranje); border: 3px solid var(--wit); color: var(--wit); } /* oranje (Sherwin, 10 september 2026); specifieker dan .hero__bel hieronder */
.hero__knoppen .hero__bel--bellen:hover { background: #E86300; }
.hero__orde { margin: 16px 0 0 0; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--wit); }
/* Reviewbadge (sinds 10 september 2026): donkere pil met sterren en score, naar reviews.html */
.hero__reviews {
display: inline-flex; align-items: center; gap: 12px; margin: 26px 0 0 0;
padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(0, 0, 0, 0.28);
color: var(--wit); text-decoration: none; font-size: 16px; font-weight: 600;
backdrop-filter: blur(2px);
}
.hero__reviews:hover { background: rgba(0, 0, 0, 0.4); }
.hero__reviews-sterren { color: #FADB14; letter-spacing: 3px; font-size: 18px; line-height: 1; }
.hero__reviews-score { padding: 6px 12px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.85); font-weight: 800; font-size: 15px; }
.hero__bel {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 20px 0 0 -8px;
width: 331px;
max-width: 100%;
height: 64px;
background: var(--groen-licht);
color: var(--wit);
border-radius: 9px;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
/* De sectie na de hero sluit vlak aan (geen afgeronde overlap zoals bij de
andere secties): anders staan de voeten van de monteurs achter de hoek. */
.hero + .sectie { margin-top: 0; border-radius: 0; }
/* De monteurs: onderkant gelijk met de onderkant van de hero. De linker
(met de groepenkast) staat over de rechter heen, zoals op de site. */
.hero__fotos { position: absolute; inset: 0; pointer-events: none; }
.hero__foto { position: absolute; bottom: 0; height: auto; display: block; }
.hero__foto--links { width: 338px; right: 238px; z-index: 2; }
.hero__foto--rechts { width: 290px; right: 54px; z-index: 1; }
/* Oud -> nieuw (sinds 9 september 2026): twee kastfoto's met kruis en vinkje en een
pijl ertussen, rechts van de tekst, verticaal gecentreerd. */
.hero__voorna {
position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; gap: 14px; z-index: 1;
}
/* 190 px per foto (was 214) en de tekst op 460 px: zo blijft er ruim 60 px lucht tussen de
opsomming en de foto's (Sherwin, 10 september 2026: "te dichtbij de bullet points") */
.hero__kast { position: relative; margin: 0; width: 190px; }
.hero__kast picture, .hero__kast img {
display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.hero__kast--oud img { filter: saturate(0.85); }
.hero__kast--nieuw img { outline: 3px solid var(--groen-licht); outline-offset: -3px; }
.hero__kast figcaption {
margin-top: 8px; text-align: center; color: var(--wit); font-size: 15px; font-weight: 700;
letter-spacing: 0.01em;
}
.hero__merk {
position: absolute; top: -12px; left: -12px; width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; z-index: 2;
box-shadow: 0 4px 12px rgba(0,0,0,0.35); border: 3px solid var(--wit);
}
.hero__merk--kruis { background: #B61A18; }
.hero__merk--vink { background: var(--groen-donker, #029610); }
.hero__pijl { display: block; flex: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
/* Prijsbanner rechtsboven in de hero (sinds 10 september 2026): een schuine strook,
geel op het rode verloop, klikbaar naar het prijsblok. */
.hero__banner {
position: absolute; right: 29px; top: 22px; z-index: 4;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 10px 22px 12px; border-radius: 12px; transform: rotate(3deg);
background: #FFD400; color: #1a1a1a; text-decoration: none; text-align: center; line-height: 1.05;
box-shadow: 0 8px 22px rgba(0,0,0,0.3); border: 3px solid var(--wit);
}
.hero__banner:hover { transform: rotate(3deg) scale(1.04); }
.hero__banner-vanaf { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.hero__banner-bedrag { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 1px 0; }
.hero__banner-btw { font-size: 11px; font-weight: 600; }
.hero__belregel { margin: 14px 0 0 9px; font-size: 16px; color: var(--wit); }
.hero__belregel a { color: var(--wit); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
/* Tussenmaten: foto's iets kleiner, zodat ze naast de tekst blijven passen */
@media (max-width: 1120px) {
.hero__tekst { max-width: 480px; }
.hero__foto--links { width: 290px; right: 190px; }
.hero__foto--rechts { width: 248px; right: 20px; }
.hero__kast { width: 164px; }
}
/* Tablet en telefoon: tekst boven, monteurs eronder rechts (zoals de
tabletversie van de site). */
@media (max-width: 900px) {
.hero__binnen { padding: 36px 20px 0; min-height: 0; }
.hero__tekst { max-width: none; }
.hero__kop { font-size: clamp(2rem, 7.4vw, 52px); white-space: normal; }
.hero__kop-klein { display: inline-block; margin-left: 0; }
.hero__usps li { font-size: clamp(1.15rem, 4.6vw, 24px); }
.hero__usp-tekst { white-space: normal; }
.hero__usps li + li, .hero__usps li + li + li { margin-top: 20px; }
.hero__punten { line-height: 32px; }
.hero__247 { margin-top: 30px; }
.hero__knoppen { margin-top: 28px; }
.hero__fotos { position: relative; inset: auto; height: 360px; margin-top: 24px; }
.hero__foto--links { width: 300px; right: 190px; }
.hero__foto--rechts { width: 256px; right: 0; }
.hero__voorna { position: relative; right: auto; top: auto; transform: none; justify-content: center; margin: 28px 0 32px; }
.hero__kast { width: min(200px, 38vw); }
.hero__banner { right: 12px; top: 12px; padding: 7px 14px 9px; }
.hero__banner-bedrag { font-size: 26px; }
.hero__belregel { margin-left: 0; }
}
@media (max-width: 480px) {
.hero__usps { margin-left: 0; }
.hero__punten { margin-left: 0; }
.hero__247, .hero__bel, .hero__knoppen { margin-left: 0; }
.hero__knoppen .hero__bel { width: 100%; font-size: 24px; }
.hero__kicker { padding-right: 120px; }
.hero__bel { width: 100%; font-size: 26px; }
.hero__fotos { height: 262px; }
.hero__voorna { gap: 8px; }
.hero__pijl svg { width: 40px; height: 26px; }
.hero__kast figcaption { font-size: 13px; }
.hero__foto--links { width: 210px; right: 118px; }
.hero__foto--rechts { width: 180px; right: 0; }
}
/* ==================== gedeeld (gedeeld/css/65-juridisch.css) ==================== */
/* ---------- Juridische pagina's (privacy, algemene voorwaarden): één leeskolom ---------- */
.juridisch .binnen { max-width: 760px; }
.juridisch h2 { margin-bottom: 6px; }
.juridisch .juridisch__intro { color: var(--tekst-grijs); margin: 0 0 26px; font-size: 1.05rem; }
.juridisch h3 { margin: 30px 0 8px; font-size: 1.25rem; color: var(--tekst); }
.juridisch p, .juridisch li { color: var(--tekst); line-height: 1.6; }
.juridisch ul, .juridisch ol { padding-left: 22px; margin: 8px 0 14px; }
.juridisch li { margin: 4px 0; }
.juridisch address { font-style: normal; line-height: 1.6; margin: 0 0 14px; }
.juridisch .juridisch__datum { margin-top: 34px; font-size: 0.9rem; color: var(--tekst-grijs); }
.juridisch .juridisch__terug { margin-top: 22px; }
.juridisch a { color: var(--rood); }
/* ==================== gedeeld (gedeeld/css/70-varianten.css) ==================== */
/* ---------- Drie pagina's, één blokkenset: tekst per variant en per reden ----------
Zie DOELGROEPEN.md en blokken/LEESMIJ.md ("data-variant en data-reden").
Het skelet zet data-variant="a|b|c" op . De head zet data-reden="laadpaal|koken|
3fase|zon|warmtepomp|airco|verbouwing|groep" zodra ?reden= in de URL staat (vóór de eerste
paint, dus zonder flits) en data-prijs="0" bij ?prijs=0.
Een blok zet alle tekstvarianten gewoon in zijn HTML en kiest met attributen:
…
alleen zichtbaar bij ?reden=laadpaal
…
alleen zichtbaar als er GEEN reden is
…
bij een van beide (spaties = of)
…
niet op pagina C
…
alleen op pagina C
Geen JS nodig, werkt via file://, en de copy blijft in blok.html staan. */
/* "body" erbij: draagt zelf data-reden en mag natuurlijk niet verdwijnen */
body [data-reden] { display: none; }
html:not([data-reden]) [data-reden~="geen"] { display: revert; }
html[data-reden="laadpaal"] [data-reden~="laadpaal"],
html[data-reden="koken"] [data-reden~="koken"],
html[data-reden="3fase"] [data-reden~="3fase"],
html[data-reden="zon"] [data-reden~="zon"],
html[data-reden="warmtepomp"] [data-reden~="warmtepomp"],
html[data-reden="airco"] [data-reden~="airco"],
html[data-reden="verbouwing"] [data-reden~="verbouwing"],
html[data-reden="groep"] [data-reden~="groep"] { display: revert; }
/* "elk": zichtbaar bij elke reden, maar niet zonder reden */
html[data-reden] [data-reden~="elk"] { display: revert; }
/* Per pagina: A en B delen bijna alles; C (elektricien/advies) laat de kast-specifieke
stukken weg en toont zijn eigen. */
html[data-variant="c"] .alleen-ab { display: none !important; }
html:not([data-variant="c"]) .alleen-c { display: none !important; }
/* Het woord van de zoeker (?woord=groepenkast|meterkast|stoppenkast): zelfde patroon als
data-reden, voor losse woorden in een kop: Meterkast
Groepenkast. Zonder parameter is "meterkast" het
standaardwoord (sinds 11 september 2026); "geen" betekent dus: meterkast. */
body [data-woord] { display: none; }
html:not([data-woord]) [data-woord~="geen"] { display: revert; }
html[data-woord="groepenkast"] [data-woord~="groepenkast"],
html[data-woord="meterkast"] [data-woord~="meterkast"],
html[data-woord="stoppenkast"] [data-woord~="stoppenkast"] { display: revert; }
/* Alleen op pagina A (bv. een FAQ-antwoord met een bedrag; B noemt nergens een bedrag) */
html:not([data-variant="a"]) .alleen-a { display: none !important; }
/* Prijsexperiment (DOELGROEPEN.md, meetlaag 4): ?prijs=0 haalt de prijsbanner uit de hero.
De banner staat alleen op pagina A (B en C noemen geen bedrag in de hero). */
html[data-prijs="0"] .hero__prijs, html[data-prijs="0"] .hero__banner { display: none; }
html:not([data-variant="a"]) .hero__banner { display: none; }
/* de oude badge op de kastfoto (tot 10 september 2026) blijft verborgen als hij nog ergens staat */
.hero__badge { display: none; }
/* ==================== blok 10-stappenplan (blokken/10-stappenplan/blok.css) ==================== */
/* ---------- Stappenplan: adres → herken je dit? → wat heb je in huis? → uitkomst ---------- */
/* Stappenbalk: vier genummerde cirkels (.stap__nummer uit blok 13) met een lijn ertussen.
Gedaan = groen met vinkje, actief = rood, komend = grijs. */
.stappenbalk {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: 28px 0 22px;
padding: 0;
list-style: none;
counter-reset: none;
}
.stappenbalk__stap { position: relative; text-align: center; }
.stappenbalk__stap button {
display: flex; flex-direction: column; align-items: center; gap: 8px;
width: 100%; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--tekst);
}
.stappenbalk__stap .stap__nummer { margin: 0; position: relative; z-index: 1; background: var(--vlak-grijs); color: var(--tekst-grijs); transition: background 0.25s ease, color 0.25s ease; }
.stappenbalk__stap[aria-current="step"] .stap__nummer { background: var(--rood); color: var(--wit); box-shadow: 0 0 0 5px rgba(182, 26, 24, 0.15); }
.stappenbalk__stap[data-gedaan] .stap__nummer { background: var(--groen-donker, #029610); color: var(--wit); }
.stappenbalk__stap[data-gedaan] .stap__nummer::after { content: "\2713"; }
.stappenbalk__stap[data-gedaan] .stap__nummer { font-size: 0; }
.stappenbalk__stap[data-gedaan] .stap__nummer::after { font-size: 1.1rem; }
.stappenbalk__label { font-size: 0.9rem; font-weight: 700; color: var(--tekst-grijs); }
.stappenbalk__stap[aria-current="step"] .stappenbalk__label { color: var(--tekst); }
/* de lijn tussen de cirkels */
.stappenbalk__stap + .stappenbalk__stap::before {
content: ""; position: absolute; top: 20px; right: 50%; width: 100%; height: 3px;
background: var(--vlak-grijs); z-index: 0;
}
.stappenbalk__stap[data-gedaan] + .stappenbalk__stap::before,
.stappenbalk__stap[aria-current="step"]::before { background: var(--groen-donker, #029610); }
.stappenbalk__stap button:focus-visible .stap__nummer { outline: 3px solid var(--oranje); outline-offset: 2px; }
/* Panelen: zonder JavaScript alle drie onder elkaar; met JavaScript één tegelijk */
/* startstand (data-huidig="0"): alleen de startknop; de stappenbalk komt pas na de klik.
Zonder JavaScript is er geen startknop en staan de stappen onder elkaar. */
.stap-start { display: none; margin: 0; }
.js #stappenplan[data-huidig="0"] .stap-start { display: block; }
.js #stappenplan[data-huidig="0"] .stappenbalk,
.js #stappenplan[data-huidig="0"] .stap-paneel { display: none; }
.stap-start__knop { margin-top: 6px; }
.stap-paneel { margin-top: 8px; }
.js .stap-paneel { display: none; }
.js .stap-paneel[data-actief] { display: block; animation: kaartIn 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.stap-paneel__kop { margin: 12px 0 6px; font-size: 1.25rem; }
.stap-paneel__uitleg { margin: 0 0 18px; color: var(--tekst-grijs); }
@keyframes kaartIn { from { opacity: 0; transform: translateY(14px); } }
/* .stap-knop en .stap-terug staan in gedeeld/css/37-stapknoppen.css */
.stap-bellen { margin-top: 18px; }
.stap-bellen .belhint { margin-top: 8px; }
/* Stap 1: de vinkjes (ongewijzigd uit de oude checklist) */
.check-lijst { display: grid; gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; max-width: 640px; }
.check-item {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--wit);
border: 2px solid var(--vlak-grijs);
border-radius: var(--radius);
padding: 16px 18px;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
font-size: 1rem;
}
.check-item:has(input:checked) { border-color: var(--rood); background: #FDF3F3; }
.check-item input {
width: 24px;
height: 24px;
margin: 2px 0 0;
accent-color: var(--rood);
flex: none;
}
.check-item input:checked { animation: vinkPop 0.3s ease; }
@keyframes vinkPop { 50% { transform: scale(1.25); } }
.check-item--capaciteit { border-style: dashed; }
.check-item--onbekend { border-style: dotted; }
.check-item--onbekend:has(input:checked) { border-color: #7FA8C9; background: #F1F6FA; }
/* Stap 4: conclusie links, stoplicht rechts op een rood vlak */
.check-grid { display: grid; gap: 14px; margin: 0 0 14px; align-items: start; }
@media (min-width: 720px) { .check-grid { grid-template-columns: 1fr 220px; } }
.stoplicht {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: var(--rood); border-radius: var(--radius); padding: 22px 18px;
}
.stoplicht__kast {
display: flex; gap: 10px; padding: 12px; border-radius: 20px; background: #1A1A1A;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}
@media (min-width: 720px) { .stoplicht__kast { flex-direction: column; } }
.stoplicht__lamp {
width: 46px; height: 46px;
border-radius: 50%;
background: #4A4A4A;
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5);
transition: background 0.35s ease, box-shadow 0.35s ease;
}
.stoplicht[data-stand="rood"] .stoplicht__lamp--rood { background: var(--rood); box-shadow: 0 0 18px 4px rgba(182, 26, 24, 0.7); }
.stoplicht[data-stand="oranje"] .stoplicht__lamp--oranje { background: var(--oranje); box-shadow: 0 0 18px 4px rgba(255, 110, 0, 0.6); }
.stoplicht[data-stand="ruimte"] .stoplicht__lamp--neutraal,
.stoplicht[data-stand="onbekend"] .stoplicht__lamp--neutraal { background: #7FA8C9; box-shadow: 0 0 18px 4px rgba(127, 168, 201, 0.6); }
.stoplicht__tekst { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--wit); text-align: center; max-width: 12rem; }
@media (prefers-reduced-motion: reduce) { .stoplicht__lamp { transition: none !important; } }
.check-conclusie {
background: var(--wit);
border-left: 5px solid var(--vlak-grijs);
border-radius: 10px;
box-shadow: var(--schaduw);
padding: 20px 22px;
align-self: stretch;
}
.check-conclusie p { margin: 0; }
.check-conclusie[data-stand="oranje"] { border-left-color: var(--oranje); }
.check-conclusie[data-stand="rood"] { border-left-color: var(--rood); }
.check-conclusie[data-stand="ruimte"], .check-conclusie[data-stand="onbekend"] { border-left-color: #7FA8C9; }
.check-conclusie[data-stand="niets"] { border-left-color: var(--groen-donker, #029610); }
.stap-monteur h4 { margin: 0 0 10px; font-size: 1.05rem; }
.vinklijst--klein { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 0.97rem; }
.vinklijst--klein li { display: flex; gap: 10px; align-items: flex-start; }
.vinklijst--klein svg { flex: none; margin-top: 3px; }
.stap-indicatie {
margin: 14px 0 0; padding: 10px 14px; border-left: 4px solid var(--groen-donker, #029610);
background: #F1F8F2; border-radius: 8px; font-weight: 600;
}
.stap-indicatie[hidden] { display: none; }
/* Stap 4: het formulier gebruikt .formulier uit blok 17; hier alleen de breedte */
.stap-paneel[data-stap="4"] .formulier { max-width: none; }
.stap-plan__kop { margin: 26px 0 6px; font-size: 1.15rem; }
.stap-overslaan { margin: 6px 0 0; }
.stap-terug--vooruit::before { content: ""; }
.stap-terug--vooruit::after { content: "\00a0\2192"; }
.stap-verder { margin-top: 4px; }
.stap-verder[hidden] { display: none; }
/* Stap 2: drie vragen met antwoordpillen */
.vraag { border: 2px solid var(--vlak-grijs); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0 0 12px; background: var(--wit); transition: border-color 0.25s ease; }
.vraag legend { font-weight: 700; font-size: 1.02rem; padding: 0 6px; display: flex; align-items: center; gap: 10px; }
.vraag__nummer { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--vlak-grijs); color: var(--tekst-grijs); font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; }
.vraag[data-antwoord="signaal"] { border-color: var(--rood); }
.vraag[data-antwoord="ok"] { border-color: var(--groen-donker, #029610); }
.vraag[data-antwoord="weet"] { border-color: #7FA8C9; }
.vraag[data-antwoord="signaal"] .vraag__nummer { background: var(--rood); color: var(--wit); }
.vraag[data-antwoord="ok"] .vraag__nummer { background: var(--groen-donker, #029610); color: var(--wit); }
.vraag[data-antwoord="weet"] .vraag__nummer { background: #7FA8C9; color: var(--wit); }
.vraag__antwoorden { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.antwoord { position: relative; cursor: pointer; }
.antwoord input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.antwoord span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 2px solid var(--vlak-grijs); font-weight: 700; font-size: 0.95rem; background: var(--wit); transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
.antwoord:hover span { border-color: var(--tekst-grijs); }
.antwoord input:checked + span { background: var(--tekst); border-color: var(--tekst); color: var(--wit); animation: vinkPop 0.3s ease; }
.antwoord--weet input:checked + span { background: #7FA8C9; border-color: #7FA8C9; }
.antwoord input:focus-visible + span { outline: 3px solid var(--oranje); outline-offset: 2px; }
@media (max-width: 480px) { .antwoord span { padding: 9px 12px; font-size: 0.9rem; } }
@media (max-width: 480px) {
.stappenbalk__label { font-size: 0.78rem; }
.stap-knop { width: 100%; text-align: center; }
}
/* ==================== De interactieve groepenkast (was blokken/09-bouwdekast/blok.css; sinds 9 september 2026 onderdeel van stap 1) ==================== */
/* ============================================================
DE INTERACTIEVE GROEPENKAST
============================================================ */
html:not(.js) .kast-interactief { display: none; }
.kast-schakel {
display: inline-flex;
gap: 6px;
background: var(--vlak-grijs);
border-radius: 999px;
padding: 5px;
margin: 6px 0 22px;
}
.kast-schakel button {
font: 700 0.95rem var(--font);
border: 0;
border-radius: 999px;
padding: 11px 20px;
cursor: pointer;
background: transparent;
color: var(--tekst-grijs);
transition: background 0.15s ease, color 0.15s ease;
}
.kast-schakel button.actief { background: var(--wit); color: var(--tekst); box-shadow: var(--schaduw); }
.kast-schakel button:not(.actief):hover { color: var(--tekst); }
.kast-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 860px) { .kast-grid { grid-template-columns: 1.25fr 1fr; } }
.kast-visual { max-width: 620px; margin: 0 auto; width: 100%; }
#kast-svg {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.16));
}
.kast-module { cursor: pointer; }
.kast-module:hover rect:first-of-type,
.kast-module:focus-visible rect:first-of-type { stroke: var(--rood); stroke-width: 1.8; }
.kast-module:hover, .kast-module:focus-visible { filter: drop-shadow(0 0 5px rgba(182, 26, 24, 0.4)); }
.kast-module:focus-visible { outline: none; }
/* een nieuwe module verschijnt rustig, zonder te schuiven */
.js .kast-module--nieuw { animation: moduleIn 0.3s ease; }
@keyframes moduleIn { from { opacity: 0; } }
/* oude kast: hotspots over de foto, zelfde markering als de moderne modules */
.kast-oudknop { cursor: pointer; }
.ko-vlak { fill: transparent; stroke: transparent; stroke-width: 2.6; } /* 0,32% van de viewBox-breedte (800), gelijk aan de moderne modules */
.kast-oudknop:hover .ko-vlak, .kast-oudknop:focus-visible .ko-vlak { stroke: var(--rood); }
.kast-oudknop:focus-visible { outline: none; }
g[role="button"]:focus-visible { outline: none; }
.kast-teller {
font-weight: 800;
text-align: center;
margin: 12px 0 8px;
min-height: 1.6em;
}
/* regel onder de kast als een aangevinkt apparaat niet meer past: zelfde vorm als het uitlegvak */
.kast-pastniet {
background: var(--wit);
border-left: 5px solid var(--oranje);
border-radius: 10px;
box-shadow: var(--schaduw);
padding: 14px 18px;
margin: 0 0 12px;
font-size: 0.97rem;
color: var(--tekst);
text-align: left;
}
.kast-pastniet[hidden] { display: none; }
.kast-meterknop {
display: block;
width: 100%;
font: 600 0.85rem var(--font);
color: var(--tekst-grijs);
background: var(--wit);
border: 2px dashed var(--vlak-grijs);
border-radius: 10px;
padding: 10px 14px;
cursor: pointer;
}
.kast-meterknop:hover { border-color: var(--tekst-grijs); color: var(--tekst); }
/* apparatenpaneel: beeldkaarten in een grid; de checkbox blijft echt maar onzichtbaar */
.apparaten {
border: 0;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 10px;
}
.apparaten legend { grid-column: 1 / -1; font-weight: 700; margin-bottom: 10px; padding: 0; }
.apparaat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
background: var(--wit);
border: 2px solid var(--vlak-grijs);
border-radius: 14px;
padding: 14px 8px 12px;
margin: 0;
min-height: 118px; /* vaste hoogte: het grid verspringt niet als een naam over twee regels valt */
cursor: pointer;
text-align: center;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.apparaat__icoon { width: 56px; height: 56px; display: block; }
.apparaat__naam { font-size: 0.82rem; font-weight: 700; color: var(--tekst); line-height: 1.2; }
.apparaat:hover, .apparaat:focus-within {
transform: translateY(-2px) scale(1.04);
box-shadow: var(--schaduw);
border-color: var(--tekst-grijs);
}
/* aangevinkt: twee losse blokken, zodat browsers zonder :has de fallback-klasse houden;
ze staan na het hover-blok zodat de aangevinkte schaal wint */
.apparaat:has(input:checked) {
border-color: var(--rood);
background: #FDF3F3;
transform: scale(1.06);
box-shadow: 0 8px 22px rgba(182, 26, 24, 0.18);
}
.apparaat:has(input:checked) .apparaat__naam { color: var(--rood); }
.apparaat.apparaat--aan {
border-color: var(--rood);
background: #FDF3F3;
transform: scale(1.06);
box-shadow: 0 8px 22px rgba(182, 26, 24, 0.18);
}
.apparaat.apparaat--aan .apparaat__naam { color: var(--rood); }
/* onzichtbaar maar focusbaar; geen display:none of visibility:hidden */
.apparaat input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.apparaat:focus-within { outline: 3px solid var(--rood); outline-offset: 2px; }
.kast-uitleg {
background: var(--wit);
border-left: 5px solid var(--rood);
border-radius: 10px;
box-shadow: var(--schaduw);
padding: 16px 18px;
margin-top: 16px;
min-height: 9.5em; /* vaste hoogte: er verspringt niets bij andere uitleg */
font-size: 0.97rem;
}
.kast-uitleg strong { display: block; margin-bottom: 4px; }
.kast-uitleg p { margin: 0; color: var(--tekst-grijs); }
.kast-extra { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kast-extra__label { font-size: 0.88rem; font-weight: 600; color: var(--tekst-grijs); }
.kast-chip {
font: 600 0.85rem var(--font);
color: var(--tekst);
background: var(--wit);
border: 2px solid var(--vlak-grijs);
border-radius: 999px;
padding: 8px 14px;
cursor: pointer;
}
.kast-chip:hover { border-color: var(--rood); color: var(--rood); }
.kast-resultaat {
background: var(--wit);
border-left: 5px solid var(--groen);
border-radius: 10px;
box-shadow: var(--schaduw);
padding: 20px 22px;
margin-top: 24px;
}
.kast-resultaat[hidden] { display: none; }
.kast-resultaat .belknop { margin-top: 6px; }
.kast-vuistregel {
font-size: 0.9rem;
color: var(--tekst-grijs);
max-width: 720px;
margin-top: 22px;
}
@media (prefers-reduced-motion: reduce) {
.js .kast-module--nieuw { animation: none !important; }
.kast-schakel button, .apparaat { transition: none !important; }
/* bij reduced motion veranderen alleen kleur en rand van de apparaatkaarten */
.apparaat, .apparaat:hover, .apparaat:focus-within, .apparaat.apparaat--aan { transform: none; }
.apparaat:has(input:checked) { transform: none; }
}
/* ---------- fotokast ---------- */
.kast-module .km-rand { stroke: transparent; stroke-width: 6; }
.kast-module:hover .km-rand, .kast-module:focus-visible .km-rand { stroke: var(--rood); }
/* ---------- fasekeuze ---------- */
.kast-fasekeuze { margin: -8px 0 22px; }
/* in de oude stand onzichtbaar, maar de ruimte blijft staan zodat de
kastafbeelding in beide standen op dezelfde hoogte begint */
.kast-fasekeuze[data-fase-verborgen] { visibility: hidden; }
/* ---------- aangeklikt onderdeel: rand in huisstijlrood ---------- */
.kast-module.actief .km-rand { stroke: var(--rood); stroke-width: 10; fill: rgba(182, 26, 24, 0.10); }
.kast-oudknop.actief .ko-vlak { stroke: var(--rood); stroke-width: 5; fill: rgba(182, 26, 24, 0.10); }
/* ---------- zijpaneel met tabbladen ---------- */
.kast-paneel {
background: var(--wit);
border-radius: var(--radius);
box-shadow: var(--schaduw);
padding: 16px 18px 18px;
}
.kast-tabs {
display: flex;
gap: 6px;
background: var(--vlak-grijs);
border-radius: 999px;
padding: 4px;
margin-bottom: 16px;
}
.kast-tabs button {
flex: 1;
font: 700 0.92rem var(--font);
border: 0;
border-radius: 999px;
padding: 10px 12px;
cursor: pointer;
background: transparent;
color: var(--tekst-grijs);
transition: color 0.15s ease; /* geen achtergrondovergang: anders vervaagt de vorige tab even van rood naar roze */
}
.kast-tabs button[aria-selected="true"] { background: var(--rood); color: var(--wit); }
.kast-tabs button:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, 0.6); color: var(--tekst); }
.kast-paneel [role="tabpanel"][hidden] { display: none; }
.kast-paneel .apparaten legend { font-size: 0.95rem; }
.kast-bezet {
font-weight: 800;
color: var(--oranje);
margin: 0 0 12px;
font-variant-numeric: tabular-nums;
}
.bouwlijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bouwlijst li {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 6px 12px;
padding: 10px 0;
border-top: 1px solid var(--vlak-grijs);
}
.bouwlijst li:first-child { border-top: 0; padding-top: 0; }
.bouw-naam {
font: 600 0.95rem var(--font);
color: var(--tekst);
background: none;
border: 0;
padding: 0;
text-align: left;
cursor: pointer;
text-decoration: underline;
text-decoration-color: var(--vlak-grijs);
text-underline-offset: 3px;
}
.bouw-naam:hover { color: var(--rood); text-decoration-color: var(--rood); }
.bouw-breedte { grid-column: 1; font-size: 0.82rem; color: var(--tekst-grijs); }
.bouw-teller {
grid-column: 2;
grid-row: 1 / span 2;
display: flex;
align-items: center;
gap: 8px;
}
.bouw-aantal {
min-width: 1.6em;
text-align: center;
font-weight: 800;
font-size: 1.1rem;
color: var(--oranje);
font-variant-numeric: tabular-nums;
}
.bouw-knop {
width: 36px; height: 36px;
border-radius: 50%;
border: 2px solid var(--oranje);
background: var(--wit);
color: var(--oranje);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.bouw-knop--plus { background: var(--oranje); color: var(--wit); }
.bouw-knop:hover:not([disabled]) { background: var(--oranje); color: var(--wit); }
.bouw-knop--plus:hover:not([disabled]) { background: #E06000; border-color: #E06000; }
.bouw-knop[disabled] { opacity: 0.35; cursor: not-allowed; }
.bouw-knop svg { display: block; }
.bouw-vast { font-size: 0.85rem; color: var(--groen); font-weight: 600; white-space: nowrap; }
.kast-vol {
margin: 12px 0 0;
padding: 10px 14px;
border-left: 4px solid var(--oranje);
background: #FFF4EA;
border-radius: 8px;
font-size: 0.92rem;
}
.kast-vol[hidden] { display: none; }
.kast-schakel--klein { margin: 0 0 8px; }
.kast-schakel--klein button { padding: 8px 16px; font-size: 0.88rem; }
.kast-fasetekst { font-size: 0.9rem; color: var(--tekst-grijs); text-align: center; margin: 0 0 12px; }
.kast-fasetekst[hidden] { display: none; }
/* -wrappers gedragen zich als hun inhoud, zodat bestaande
img-selectors en layouts blijven kloppen */
picture { display: contents; }
/* ---------- H6. Widget: in de oude stand verdwijnt het hele tabblok ---------- */
.kast-paneel[hidden] { display: none; }
/* ---------- H8. Widget: labels op de labelstrook, standaardregel en legenda ---------- */
.kast-label { font-family: var(--font); font-weight: 700; fill: #2B2B2B; pointer-events: none; }
.kast-label--getekend { fill: var(--tekst-grijs); }
.kast-standaardregel {
font-size: 0.92rem;
color: var(--tekst-grijs);
margin: 0 0 12px;
padding: 10px 14px;
background: var(--wit);
border-left: 4px solid var(--groen);
border-radius: 8px;
}
.kast-standaardregel[hidden] { display: none; }
.kast-legenda { font-size: 0.85rem; color: var(--tekst-grijs); text-align: center; margin: 0 0 12px; line-height: 1.9; }
.kast-legenda[hidden] { display: none; }
.kast-legenda__label { font-weight: 600; }
.kast-legenda__item { display: inline-block; background: var(--wit); border: 1px solid var(--vlak-grijs); border-radius: 999px; padding: 1px 9px; margin: 0 2px; white-space: nowrap; }
.kast-legenda__item b { color: var(--rood); }
/* ==================== Stap 1: jouw huis, jouw kast (9 september 2026) ==================== */
/* adres */
.adres { margin: 0 0 14px; }
.adres__velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; max-width: 620px; }
.adres__knop { grid-column: 1 / -1; }
@media (min-width: 560px) { .adres__velden { grid-template-columns: 1fr 1fr auto; } .adres__knop { grid-column: auto; } }
.adres label { display: block; font-weight: 600; font-size: 0.92rem; }
.adres input {
display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 1.05rem; padding: 12px 12px;
border: 2px solid var(--vlak-grijs); border-radius: 10px;
}
.adres input:focus { border-color: var(--rood); outline: none; }
.adres__knop {
font: inherit; font-weight: 800; font-size: 1rem; color: var(--wit); background: var(--rood); border: 0;
border-radius: 999px; padding: 14px 20px; cursor: pointer; white-space: nowrap;
}
.adres__knop:hover { background: var(--rood-donker); }
.adres__knop[disabled] { opacity: 0.6; cursor: wait; }
.adres__status { margin: 8px 0 0; font-size: 0.9rem; color: var(--tekst-grijs); }
.adres__status[data-toon="fout"] { color: var(--rood); font-weight: 600; }
.adres__status[data-toon="ok"] { color: var(--groen-donker, #029610); font-weight: 600; }
/* het huis dat meekleurt (boven de stappen) */
.huis-vast { display: grid; gap: 14px; margin: 0 0 18px; animation: kaartIn 0.4s ease; align-items: start; }
.huis-vast[hidden] { display: none; }
@media (min-width: 720px) { .huis-vast { grid-template-columns: minmax(240px, 340px) 1fr; } }
.woning { background: var(--wit); border-left: 5px solid var(--groen-donker, #029610); border-radius: 10px; box-shadow: var(--schaduw); padding: 14px 18px; }
.woning__kop { margin: 0 0 4px; font-size: 1.05rem; }
.woning__feiten { margin: 0 0 6px; color: var(--tekst-grijs); }
.woning__bouwjaar { margin: 0 0 6px; font-size: 0.95rem; color: var(--tekst-grijs); display: flex; align-items: center; gap: 8px; }
.woning__bouwjaar::before {
content: "\2713"; flex: none; width: 22px; height: 22px; border-radius: 6px; color: var(--wit);
font-weight: 800; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center;
background: var(--groen);
}
.woning__bouwjaar[data-kleur="oranje"]::before { content: "!"; background: var(--oranje); }
.woning__bouwjaar[data-kleur="rood"]::before { content: "\2715"; background: var(--rood); }
.woning__bouwjaar[hidden] { display: none; }
.woning__gebouw { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 0.85rem; color: var(--tekst-grijs); }
.woning__gebouw[hidden] { display: none; }
.woning__gebouw svg { width: 90px; height: 60px; flex: none; }
.pg-gebouw { fill: #EEF0F2; stroke: #2B2B2B; stroke-width: 2; }
.woning__bouwjaar[data-kleur="rood"] { color: var(--rood); font-weight: 600; }
.woning__bouwjaar[data-kleur="oranje"] { color: #C25400; font-weight: 600; }
/* de kast uit (data-kast="uit"): stap 3 is dan alleen de apparaten, in drie kolommen */
#stappenplan[data-kast="uit"] .huis-grid .kast { display: none; }
#stappenplan[data-kast="uit"] .huis-grid { grid-template-columns: 1fr; }
@media (min-width: 720px) { #stappenplan[data-kast="uit"] .kamers { grid-template-columns: repeat(3, 1fr); } }
/* huis links, kast rechts */
.huis-grid { display: grid; gap: 28px; align-items: start; margin-top: 8px; }
@media (min-width: 900px) { .huis-grid { grid-template-columns: 1fr 1fr; } }
.kast__kop { margin: 0 0 8px; font-size: 1.05rem; }
/* plattegrond: de ruimtes als tegels (geen posities, die zijn niet openbaar) */
.plattegrond { background: var(--wit); border-radius: var(--radius); box-shadow: var(--schaduw); padding: 10px; }
.pg-rooster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pg-tegel {
position: relative; min-height: 78px; padding: 8px 8px 8px; border-radius: 12px;
background: #F4F5F7; border: 2px solid #D5DAE0; transition: background 0.3s ease, border-color 0.3s ease;
}
.pg-tegel__kop { font-size: 0.78rem; font-weight: 700; color: #4A4A4A; line-height: 1.2; }
.pg-tegel--actief { background: #E4F5E7; border-color: var(--groen); }
.pg-tegel--actief .pg-tegel__kop { color: var(--groen); }
.pg-tegel--meterkast { background: #E6E9ED; border-color: #8A9099; }
.pg-tegel--meterkast .pg-tegel__kop { color: var(--tekst); }
.pg-kastje { display: grid; gap: 4px; width: 34px; margin-top: 8px; }
.pg-kastje span { display: block; height: 7px; border-radius: 2px; background: #8A9099; }
.pg-tegel--oranje { background: #FFE6D1; border-color: var(--oranje); }
.pg-tegel--rood { background: #FBDCDC; border-color: var(--rood); }
.pg-tegel--onbekend, .pg-tegel--ruimte { background: #E6EEF5; border-color: #7FA8C9; }
.pg-tegel--rood .pg-kastje span { background: var(--rood); }
.pg-tegel--oranje .pg-kastje span { background: var(--oranje); }
.pg-badge {
position: absolute; top: -10px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
background: var(--rood); color: var(--wit); font-size: 0.8rem; font-weight: 800;
display: flex; align-items: center; justify-content: center; border: 2px solid var(--wit);
}
.pg-tegel--onbekend .pg-badge, .pg-tegel--ruimte .pg-badge { background: #7FA8C9; }
.pg-iconen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pg-icoon { width: 26px; height: 26px; animation: pgIn 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3); }
@keyframes pgIn { from { opacity: 0; transform: scale(0.3); } }
@media (prefers-reduced-motion: reduce) { .pg-icoon { animation: none; } }
.pg-gebouw { fill: #EEF0F2; stroke: #2B2B2B; stroke-width: 2; }
.check-score { margin: 4px 0 0; font-size: 0.92rem; font-weight: 700; color: var(--tekst-grijs); }
/* kamers met de checklists eromheen */
.kamers { display: grid; gap: 12px; }
@media (min-width: 560px) { .kamers { grid-template-columns: 1fr 1fr; } }
.kamer { border: 2px solid var(--vlak-grijs); border-radius: var(--radius); padding: 10px 12px 12px; margin: 0; background: var(--wit); min-width: 0; }
.kamer legend { font-weight: 700; font-size: 0.95rem; padding: 0 6px; display: flex; align-items: center; gap: 8px; }
.kamer__stip { width: 10px; height: 10px; border-radius: 50%; background: #B7BDC4; display: inline-block; }
.kamer--actief { border-color: var(--groen-donker, #029610); }
.kamer--actief .kamer__stip { background: var(--groen-donker, #029610); }
.kamer--meterkast .kamer__stip { background: #4A4A4A; }
.kamer--meterkast[data-stand="oranje"] { border-color: var(--oranje); }
.kamer--meterkast[data-stand="rood"] { border-color: var(--rood); }
.check-lijst--compact { gap: 8px; }
@media (min-width: 560px) { .check-lijst--compact { grid-template-columns: 1fr 1fr; } }
.check-lijst--compact .check-item { padding: 10px 12px; font-size: 0.92rem; gap: 10px; }
.check-lijst--compact .check-item input { width: 20px; height: 20px; }
/* apparaten als compacte chips per kamer (de kaartstijl van de oude configurator blijft
voor .apparaat gelden; hier compacter) */
.apparaten--kamer { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.apparaten--kamer .apparaat { min-height: 88px; padding: 10px 4px 8px; gap: 6px; border-radius: 12px; }
.apparaten--kamer .apparaat__icoon { width: 40px; height: 40px; }
.apparaten--kamer .apparaat__naam { font-size: 0.74rem; }
.apparaten[hidden] { display: none; }
/* de kast: zelf samenstellen als uitklapper */
.kast-zelf { margin-top: 14px; }
.kast-zelf summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.kast-zelf[open] summary { margin-bottom: 10px; }
.kast .kast-resultaat { margin-top: 14px; }
/* uitkomst als korte kop met punten */
.check-conclusie { padding: 16px 18px; }
.check-conclusie p { margin: 0 0 6px; }
.conclusie-punten { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.conclusie-punten li { position: relative; padding-left: 26px; font-size: 0.95rem; color: var(--tekst-grijs); }
.conclusie-punten li::before {
content: "\2713"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 5px;
background: var(--groen); color: var(--wit); font-size: 0.72rem; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
}
/* stap 4: conclusie en stoplicht in één kaart; punten met een waarschuwingsteken in de kleur van de stand */
.check-grid { background: var(--wit); border-radius: var(--radius); padding: 16px 16px 16px 20px; }
.check-conclusie { background: none; box-shadow: none; padding: 4px 0 0; border: 0; }
.check-conclusie[data-stand] { border-left: 0; }
.check-conclusie p strong { font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.2; display: block; margin-bottom: 8px; }
.stoplicht__tekst { display: none; }
.check-conclusie[data-stand="rood"] p strong { color: var(--rood); }
.check-conclusie[data-stand="oranje"] p strong { color: #C25400; }
.conclusie-punten li::before { content: "!"; background: #4A4A4A; border-radius: 50%; }
.check-conclusie[data-stand="rood"] .conclusie-punten li::before { background: var(--rood); }
.check-conclusie[data-stand="oranje"] .conclusie-punten li::before { background: var(--oranje); }
.check-conclusie[data-stand="ruimte"] .conclusie-punten li::before,
.check-conclusie[data-stand="onbekend"] .conclusie-punten li::before { background: #7FA8C9; }
.check-conclusie[data-stand="niets"] .conclusie-punten li::before { content: "\203A"; background: #4A4A4A; }
.conclusie-punten li { color: var(--tekst); }
/* stap 4: links de uitkomst, lijn, rechts wat Sherwin bekijkt */
.stap-monteur { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.stap-monteur__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.stap-monteur__kop h4 { margin: 0; font-size: 1.02rem; line-height: 1.25; }
.stap-monteur__kop h4 small { display: block; font-weight: 400; color: var(--tekst-grijs); font-size: 0.85rem; }
.stap-monteur__foto img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 3px solid var(--rood); display: block; }
.stap-monteur .vinklijst--klein li { font-size: 0.92rem; }
@media (min-width: 720px) {
.stap-monteur { border-left: 1px solid #D5DAE0; padding-left: 22px; }
}
@media (max-width: 719px) {
.stap-monteur { border-top: 1px solid #D5DAE0; padding-top: 16px; }
}
/* de brandfoto in een eigen kaart */
.brandkaart { background: var(--wit); border-radius: var(--radius); padding: 16px; margin: 14px 0 18px; }
.brandkaart__rij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .brandkaart__rij { grid-template-columns: repeat(4, 1fr); } }
.brandkaart picture { display: block; }
.brandkaart img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.brandkaart p { margin: 14px 0 0; font-size: 1rem; color: var(--tekst-grijs); }
.brandkaart p strong { display: block; color: var(--rood); font-size: 1.15rem; margin-bottom: 4px; }
/* vanaf stap 2 zijn de kicker en kop van de sectie niet meer nodig (Sherwin, 10 september 2026);
in de startstand (0) en bij stap 1 blijven ze staan */
.js #stappenplan:not([data-huidig="0"]):not([data-huidig="1"]) > .binnen > .kicker,
.js #stappenplan:not([data-huidig="0"]):not([data-huidig="1"]) > .binnen > h2 { display: none; }
/* stap 3: de wens uit de advertentie */
.stap-wens { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.4); font-size: 0.95rem; }
.stap-wens[hidden] { display: none; }
.stap-wens__label { opacity: 0.85; }
/* stap 4: formulier links (de helft), Sherwin rechts */
.stap-slot { display: grid; gap: 20px; align-items: start; margin-bottom: 16px; }
@media (min-width: 720px) { .stap-slot { grid-template-columns: 1fr 1fr; } }
.stap-slot .formulier { max-width: none; }
.stap-sherwin { background: var(--wit); border-radius: var(--radius); padding: 22px; text-align: center; }
.stap-sherwin img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 4px solid var(--rood); display: inline-block; }
.stap-sherwin__naam { margin: 12px 0 8px; color: var(--tekst-grijs); }
.stap-sherwin__naam strong { display: block; font-size: 1.15rem; color: var(--tekst); }
.stap-sherwin__tekst { margin: 0; color: var(--tekst-grijs); }
/* logo en "Stap 1 van 4" horen alleen op de checkpagina */
html:not([data-variant="check"]) .check-logo, html:not([data-variant="check"]) .check-paginatekst { display: none; }
/* ---------- De eigen checkpagina (check.html, html[data-variant="check"]; 10 september 2026) ----------
Naar het voorbeeld van Sherwin: lichte pagina, één witte kaart met schaduw in het midden,
logo bovenaan, "Stap 1 van 4" met kleine bolletjes, de vraag van de stap als kop,
gecentreerd, adresvelden naast elkaar en een brede knop. Zonder header en footer.
De regels zijn specifieker dan de sectie- en #stappenplan-regels in gedeeld/css-slot
(die komen later in de cascade). */
html[data-variant="check"] body { background: #F5F6F8; }
html[data-variant="check"] main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px) 16px; box-sizing: border-box; }
html[data-variant="check"] main > #stappenplan {
width: 100%; max-width: 640px; margin: 0; border-radius: 24px;
background: var(--wit); color: var(--tekst);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px) clamp(24px, 4vw, 36px);
text-align: center;
}
html[data-variant="check"] #stappenplan::after { display: none; } /* geen zigzag */
html[data-variant="check"] #stappenplan .binnen { max-width: none; }
html[data-variant="check"] #stappenplan .kicker, html[data-variant="check"] #stappenplan > .binnen > h2 { display: none; }
html[data-variant="check"] .check-logo { display: block; width: min(260px, 70%); height: auto; margin: 0 auto 22px; }
html[data-variant="check"] .check-paginatekst { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--rood); }
/* stappenbalk: kleine bolletjes met een lijntje, zonder labels */
html[data-variant="check"] #stappenplan .stappenbalk { max-width: 150px; margin: 8px auto 18px; grid-template-columns: repeat(4, 1fr); }
html[data-variant="check"] #stappenplan .stappenbalk__stap[hidden] { display: none; }
html[data-variant="check"] #stappenplan .stappenbalk__label { display: none; }
html[data-variant="check"] #stappenplan .stappenbalk__stap .stap__nummer { width: 24px; height: 24px; font-size: 0.8rem; line-height: 24px; background: var(--vlak-grijs); color: var(--tekst-grijs); box-shadow: none; }
html[data-variant="check"] #stappenplan .stappenbalk__stap[aria-current="step"] .stap__nummer { background: var(--rood); color: var(--wit); }
html[data-variant="check"] #stappenplan .stappenbalk__stap[data-gedaan] .stap__nummer { background: var(--groen, #029610); color: var(--wit); }
html[data-variant="check"] #stappenplan .stappenbalk__stap[data-gedaan] .stap__nummer { font-size: 0; }
html[data-variant="check"] #stappenplan .stappenbalk__stap[data-gedaan] .stap__nummer::after { font-size: 0.85rem; }
html[data-variant="check"] #stappenplan .stappenbalk__stap + .stappenbalk__stap::before { top: 11px; height: 2px; background: #D6D9DE; }
html[data-variant="check"] #stappenplan .stappenbalk__stap[data-gedaan] + .stappenbalk__stap::before,
html[data-variant="check"] #stappenplan .stappenbalk__stap[aria-current="step"]::before { background: var(--groen, #029610); }
/* teksten donker op wit (de huisstijl zet ze wit voor de rode band) */
html[data-variant="check"] #stappenplan :is(h3, p, label, legend, li, .stap-paneel__uitleg, .adres__status, .stap-paneel__kop, .stap-plan__kop) { color: var(--tekst); }
html[data-variant="check"] #stappenplan :is(.stap-paneel__uitleg, .adres__status, .stap-terug) { color: var(--tekst-grijs); }
html[data-variant="check"] #stappenplan .adres__status[data-toon="fout"] { color: var(--rood); }
html[data-variant="check"] #stappenplan .adres__status[data-toon="ok"] { color: var(--groen, #029610); }
html[data-variant="check"] #stappenplan .stap-paneel__kop { margin: 6px 0 8px; font-size: clamp(1.5rem, 3.6vw, 1.9rem); line-height: 1.2; }
html[data-variant="check"] #stappenplan .stap-paneel__uitleg { margin: 0 auto 22px; max-width: 420px; }
html[data-variant="check"] #stappenplan .stap-paneel { max-width: none; }
/* adres: postcode, huisnummer en toevoeging naast elkaar, de knop over de volle breedte */
html[data-variant="check"] .adres__velden { grid-template-columns: 1.5fr 1fr 1fr; max-width: 400px; margin: 0 auto; text-align: left; }
html[data-variant="check"] .adres__knop { grid-column: 1 / -1; margin-top: 8px; width: 100%; }
/* velden zichtbaar op wit (de huisstijl haalt de rand weg voor de rode band) */
html[data-variant="check"] #stappenplan :is(.adres input, .formulier input, .formulier textarea, .formulier select) {
border: 1.5px solid #D6D9DE; background: var(--wit); border-radius: 8px; color: var(--tekst);
}
html[data-variant="check"] #stappenplan :is(.adres input, .formulier input, .formulier textarea):focus { border-color: var(--rood); outline: none; }
html[data-variant="check"] #stappenplan .adres__status { margin: 14px 0 0; }
/* lijsten en knoppen in de kaart: gecentreerd, maar de vinkjes zelf links uitgelijnd */
html[data-variant="check"] #stappenplan :is(.check-lijst, .huis-grid, .formulier, .stoplicht, .brandkaart, .stap-sherwin) { margin-left: auto; margin-right: auto; text-align: left; }
html[data-variant="check"] #stappenplan .stap-knop { display: block; width: 100%; max-width: 400px; margin: 18px auto 0; text-align: center; }
html[data-variant="check"] #stappenplan .stap-terug { margin: 14px auto 0; }
/* stap 4 (op de checkpagina de derde stap) als contactformulier in één kolom: geen Sherwin,
brandkaart of belknop; sterretjes bij verplichte velden; "Gratis en vrijblijvend" boven de knop */
html[data-variant="check"] #stappenplan :is(.stap-sherwin, .brandkaart, .stap-bellen) { display: none; }
html[data-variant="check"] #stappenplan .stap-slot { display: block; }
html[data-variant="check"] #stappenplan .formulier { max-width: 400px; margin: 0 auto; }
html[data-variant="check"] #stappenplan .formulier label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 0.95rem; text-align: left; }
html[data-variant="check"] #stappenplan .formulier .verplicht { color: var(--rood); }
html[data-variant="check"] #stappenplan .formulier input { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 1rem; }
html[data-variant="check"] #stappenplan .formulier__gratis { margin: 20px 0 10px; text-align: center; font-size: 0.95rem; color: var(--tekst-grijs); }
html[data-variant="check"] #stappenplan .formulier__vink { color: var(--groen, #029610); font-weight: 800; margin-right: 4px; }
html[data-variant="check"] #stappenplan .formulier button { display: block; width: 100%; margin: 0; }
html[data-variant="check"] #stappenplan .formulier__uitleg { margin: 14px 0 0; font-size: 0.82rem; color: var(--tekst-grijs); text-align: center; }
html:not([data-variant="check"]) .formulier__gratis { display: none; }
/* stap 3 (10 september 2026, naar het voorbeeld van Sherwin): een breder blok met links de
kop en een raster van apparaat-tegels (alle kamers in één raster), rechts de drie USP's in
een kader, en rechtsonder een vaste knop naar de contactstap. */
html:not([data-variant="check"]) .check-usps, html:not([data-variant="check"]) .check-bel { display: none; }
html[data-variant="check"] main > #stappenplan[data-huidig="3"] { max-width: 1100px; }
html[data-variant="check"] #stappenplan[data-huidig="3"] .stap-paneel__kop,
html[data-variant="check"] #stappenplan[data-huidig="3"] .stap-paneel__uitleg { text-align: left; margin-left: 0; max-width: none; }
html[data-variant="check"] #stappenplan .stap-wens { text-align: left; }
html[data-variant="check"] #stappenplan .huis-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; max-width: none; margin: 0; }
html[data-variant="check"] #stappenplan .kamers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html[data-variant="check"] #stappenplan .kamer, html[data-variant="check"] #stappenplan .apparaten--kamer { display: contents; }
html[data-variant="check"] #stappenplan .kamer legend, html[data-variant="check"] #stappenplan .kamer__stip { display: none; }
html[data-variant="check"] #stappenplan .apparaten--kamer .apparaat {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
min-height: 128px; padding: 16px 10px; border-radius: 14px; border: 1.5px solid #E3E6EA; background: #FAFBFC;
}
html[data-variant="check"] #stappenplan .apparaten--kamer .apparaat__icoon { width: 52px; height: 52px; }
html[data-variant="check"] #stappenplan .apparaten--kamer .apparaat__naam { font-size: 0.95rem; text-align: center; }
html[data-variant="check"] #stappenplan .apparaten--kamer .apparaat:hover { border-color: #C9CED4; }
html[data-variant="check"] #stappenplan .apparaten--kamer .apparaat:has(input:checked),
html[data-variant="check"] #stappenplan .apparaten--kamer .apparaat.apparaat--aan { border-color: var(--rood); background: #FFF3F2; }
/* de USP's rechtsboven */
html[data-variant="check"] #stappenplan .check-usps { border: 1.5px solid #E3E6EA; border-radius: 14px; background: #FAFBFC; padding: 18px 20px; text-align: left; }
html[data-variant="check"] #stappenplan .check-usps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
html[data-variant="check"] #stappenplan .check-usps li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; }
html[data-variant="check"] #stappenplan .check-usps__vink { color: var(--groen, #029610); font-weight: 800; }
/* stap 3: de knop "Volgende" links uitgelijnd onder het raster */
html[data-variant="check"] #stappenplan[data-huidig="3"] .stap-knop { margin-left: 0; }
html[data-variant="check"] #stappenplan[data-huidig="3"] .stap-terug { margin-left: 0; text-align: left; }
/* vaste belknop rechtsonder (alle stappen) */
html[data-variant="check"] .check-bel { position: fixed; right: 24px; bottom: 24px; margin: 0; z-index: 20; }
html[data-variant="check"] .check-bel__knop {
display: inline-block; text-decoration: none; font: inherit; font-weight: 800; font-size: 1rem; color: var(--wit); background: var(--rood); border: 0;
border-radius: 999px; padding: 16px 26px; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
html[data-variant="check"] .check-bel__knop:hover { background: var(--rood-donker); }
@media (max-width: 860px) {
html[data-variant="check"] #stappenplan .huis-grid { grid-template-columns: 1fr; gap: 20px; }
html[data-variant="check"] #stappenplan .check-usps { order: -1; }
html[data-variant="check"] #stappenplan .kamers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-variant="check"] #stappenplan .apparaten--kamer .apparaat { min-height: 120px; padding: 14px 8px; }
html[data-variant="check"] .check-bel { right: 12px; bottom: 12px; }
html[data-variant="check"] .check-bel__knop { padding: 13px 18px; font-size: 0.95rem; }
}
/* ==================== blok 20-cookiebalk (blokken/20-cookiebalk/blok.css) ==================== */
/* ---------- Cookiebalk ---------- */
.cookiebalk {
position: fixed;
left: 12px; right: 12px;
bottom: calc(var(--belbalk-hoogte) + 12px);
z-index: 70;
background: var(--wit);
border-radius: var(--radius);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
padding: 18px 20px;
max-width: 560px;
margin: 0 auto;
font-size: 0.92rem;
}
.cookiebalk[hidden] { display: none; }
.cookiebalk__knoppen { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
/* Accepteren en weigeren zijn bewust exact even prominent (AVG-eis):
zelfde grootte, zelfde kleur, zelfde gewicht. */
.cookiebalk button {
font: inherit;
font-weight: 700;
font-size: 1rem;
border-radius: 999px;
padding: 12px 24px;
cursor: pointer;
border: 2px solid var(--rood);
background: var(--rood);
color: var(--wit);
flex: 1 1 auto;
}
.cookiebalk button:hover { background: var(--rood-donker); border-color: var(--rood-donker); }
@media (min-width: 900px) { .cookiebalk { bottom: 12px; } }
/* ==================== gedeeld, na de blokken (gedeeld/css-slot/20-secties-overgang.css) ==================== */
/* ---------- Secties lopen in elkaar over ---------- */
.sectie, .voet {
position: relative;
border-radius: 28px 28px 0 0;
margin-top: -28px;
}
.sectie { background: var(--wit); }
.voet { background: var(--donker); }
.sectie--vlak { background: var(--vlak-licht); }
.sectie--donker { background: var(--donker); }
main > .sectie:first-of-type { margin-top: 0; border-radius: 0; }
.hero { z-index: 0; }
/* ==================== gedeeld, na de blokken (gedeeld/css-slot/30-fotos-hover-lightbox.css) ==================== */
/* ---------- Foto's: hover en lightbox ---------- */
.fotokaart { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.js .fotokaart[data-lightbox-index] { cursor: zoom-in; }
@media (hover: hover) {
.js .fotokaart[data-lightbox-index]:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
}
.fotokaart:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }
.lightbox {
position: fixed; inset: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.lightbox[hidden] { display: none; }
.lightbox__figuur {
margin: 0;
max-width: min(92vw, 1000px);
max-height: 86vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
animation: lightboxIn 0.25s ease;
}
@keyframes lightboxIn { from { opacity: 0; transform: scale(0.96); } }
.lightbox__figuur img {
max-width: 100%;
max-height: 74vh;
width: auto; height: auto;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__figuur figcaption { color: #E6E6E6; font-size: 0.95rem; text-align: center; }
.lightbox button {
position: absolute;
width: 52px; height: 52px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.12);
color: var(--wit);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox button:focus-visible { outline: 3px solid var(--wit); outline-offset: 2px; }
.lightbox__sluit { top: 16px; right: 16px; }
.lightbox__vorige { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__volgende { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
.lightbox__vorige, .lightbox__volgende { top: auto; bottom: 14px; transform: none; }
.lightbox__vorige { left: 20px; }
.lightbox__volgende { right: 20px; }
}
/* ==================== gedeeld, na de blokken (gedeeld/css-slot/40-micro-interacties.css) ==================== */
/* ---------- Micro-interacties ---------- */
.postcode button:active, .formulier button:active, .cookiebalk button:active,
.keten-replay:active { transform: scale(0.97); }
.belknop:active { transform: translateY(0); }
/* ==================== gedeeld, na de blokken (gedeeld/css-slot/50-reduced-motion.css) ==================== */
/* ---------- Reduced motion: geen beweging, wel de eindtoestand ---------- */
@media (prefers-reduced-motion: reduce) {
.js .hero__foto, .js .hero__fotowrap, .js .brandfeature,
.js .hero__regel, .js .hero__intree,
.js .kastdeur.hint .kastdeur__deur,
.check-item input:checked,
.check-conclusie.komt-binnen,
.lightbox__figuur,
.keten-figuur[data-stap="4"] .keten-pijl--terug { animation: none !important; }
.js .hero__regel, .js .hero__intree { opacity: 1; transform: none; }
.kastdeur__deur, .meter__vulling, .fotokaart, .keten-stap, .keten-tint,
.keten-pijl--1, .keten-pijl--2, .keten-pijl--terug { transition: none !important; }
}
/* ==================== gedeeld, na de blokken (gedeeld/css-slot/60-kaarten-hover.css) ==================== */
/* ---------- Kaarten liften bij hover ---------- */
@media (hover: hover) and (pointer: fine) {
.uitlegblok, .stap, .cijfer, .modern-punten li { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.uitlegblok:hover, .stap:hover, .cijfer:hover, .modern-punten li:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
}
/* ==================== gedeeld, na de blokken (gedeeld/css-slot/90-huisstijl-site.css) ==================== */
/* ============================================================
Huisstijl van deelektricienvanamsterdam.nl, over alle blokken heen
(10 september 2026, op verzoek van Sherwin: "hou die stijl consistent aan").
Gemeten op de live site (home en /groepenkast):
- koppen Inter 700, rood #B61A18, met één oranje accentwoord (#FF6E00);
op de terracotta vlakken wit met oranje accent
- kicker: kleine rode regel met rood streepje eronder ("24/7 service")
- grote kaarten: lichtgrijs #E0E5EA op wit, wit op terracotta, hoekstraal 36 px,
geen schaduw
- terracotta banden rgba(181,26,24,.88) ≈ #BE3534 met gele zigzaglijnen (#E8D44D)
- belknop groen (#06CE1A → #029610), hoekstraal 9 px; formulierknop oranje, 10 px
- formulier: rood paneel (#B61A18), witte labels, witte velden (8 px)
- stappen: oranje nummervlak; cijfers: groot rood getal, oranje bijschrift
- voettekst: rood vlak met witte tekst
Dit bestand staat in css-slot/ en wint daardoor van de blok-CSS. Eigen kleuren
per blok (stoplicht, brandfoto's, kast) blijven staan.
============================================================ */
:root {
--terracotta: #BE3534;
--geel: #E8D44D;
--kaart-grijs: #E0E5EA;
--radius-groot: 36px;
--radius-knop: 10px;
--schaduw: none;
}
/* ---------- vlakken en ritme ---------- */
.sectie { background: var(--wit); }
.sectie--vlak { background: var(--wit); }
.sectie--donker, .voet { background: var(--terracotta); color: var(--wit); }
.sectie--donker h2::before, #contact h2::before { display: none; }
.sectie--donker .intro, .sectie--donker p, .sectie--donker .belhint { color: rgba(255, 255, 255, 0.92); }
/* gele zigzag rechts, zoals op de site */
.sectie--donker { position: relative; overflow: hidden; }
.sectie--donker::after {
content: ""; position: absolute; right: -40px; top: -20px; width: 420px; height: 100%;
pointer-events: none; opacity: 0.9;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='560' viewBox='0 0 420 560'%3E%3Cpolyline points='420,0 300,140 380,220 240,360 330,470 260,560' fill='none' stroke='%23E8D44D' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right top;
}
.sectie--donker > .binnen { position: relative; z-index: 1; }
#faq { background: var(--terracotta); color: var(--wit); }
#faq h2, #faq .kicker { color: var(--wit); }
#faq .intro { color: rgba(255, 255, 255, 0.92); }
/* ---------- typografie ---------- */
h1, h2, h3 { font-weight: 700; }
.sectie h2 { color: var(--rood); font-size: clamp(1.6rem, 4.6vw, 2.35rem); letter-spacing: -0.01em; }
.sectie--donker h2, #faq h2 { color: var(--wit); }
.kop-accent { color: var(--oranje); }
.kicker {
display: inline-block; text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 400;
color: var(--rood); padding-bottom: 4px; border-bottom: 2px solid var(--rood); margin-bottom: 12px;
}
.sectie--donker .kicker { color: var(--wit); border-color: var(--oranje); }
.intro { color: var(--tekst-grijs); }
.hero .kicker { border: 0; }
/* ---------- kaarten ---------- */
.uitlegblok, .stap, .prijs-kaart, .review, .dienst, .resultaatkaart, .woning, .plan-xander,
.kamer, .vraag, .kast-interactief, .modern-punten li, .gevaar, .feit,
.plattegrond, .check-conclusie, .whatsapp-blok, .bouwjaar, .keten-vak, .huis-vast .woning {
background: var(--kaart-grijs); border-radius: var(--radius-groot); box-shadow: none;
}
.sectie--donker .uitlegblok, .sectie--donker .stap, .sectie--donker .review, .sectie--donker .gevaar,
.sectie--donker .feit, .sectie--donker .dienst, #faq .faq details { background: var(--wit); color: var(--tekst); }
.sectie--donker .uitlegblok p, .sectie--donker .gevaar p, .sectie--donker .feit p { color: var(--tekst-grijs); }
.uitlegblok, .stap, .plan-xander { padding: 26px 26px 24px; }
.kamer, .vraag { border: 0; border-radius: 24px; padding-top: 16px; }
.vraag legend, .kamer legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; }
.vraag legend + *, .kamer legend + * { clear: both; }
.kamer--actief { box-shadow: inset 0 0 0 2px var(--groen); }
.vraag[data-antwoord="signaal"] { box-shadow: inset 0 0 0 2px var(--rood); }
.vraag[data-antwoord="ok"] { box-shadow: inset 0 0 0 2px var(--groen); }
.vraag[data-antwoord="weet"] { box-shadow: inset 0 0 0 2px #7FA8C9; }
.check-item, .keuze, .apparaat, .antwoord span { border-radius: 14px; background: var(--wit); }
.apparaat { border-color: transparent; }
.faq details { border-radius: var(--radius-groot); box-shadow: none; margin-bottom: 12px; }
.faq summary { color: var(--rood); font-weight: 700; padding: 18px 22px 18px 20px; justify-content: flex-start; }
.faq summary::before {
content: ""; flex: none; width: 0; height: 0; border-left: 12px solid var(--oranje);
border-top: 8px solid transparent; border-bottom: 8px solid transparent; transition: transform 0.25s ease;
}
.faq details[open] summary::before { transform: rotate(90deg); }
.faq summary::after { display: none; }
.faq .faq__antwoord { padding: 0 22px 20px 44px; }
.fotokaart, .fotokaart img, .brandopening__beeld img, .modern-beeld img, .vergelijk { border-radius: 24px; }
/* ---------- cijfers en stappen ---------- */
.cijfer { background: none; padding: 10px 6px; text-align: center; }
.cijfer strong { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; color: var(--rood); line-height: 1; }
.cijfer span { display: block; margin-top: 8px; font-size: 1rem; font-weight: 600; color: var(--oranje); }
.stap__nummer, .plan-nummer, .vraag__nummer {
border-radius: 10px; background: var(--oranje); color: var(--wit); font-weight: 800;
}
.stappenbalk__stap .stap__nummer { background: var(--kaart-grijs); color: var(--tekst-grijs); }
.stappenbalk__stap[aria-current="step"] .stap__nummer { background: var(--oranje); color: var(--wit); box-shadow: 0 0 0 5px rgba(255, 110, 0, 0.18); }
.stappenbalk__stap[data-gedaan] .stap__nummer { background: var(--groen); }
.stap h3 { color: var(--rood); }
/* ---------- knoppen ---------- */
.belknop, .whatsapp-knop, .voet .belknop {
background: linear-gradient(180deg, #06CE1A 0%, #029610 100%); color: var(--wit);
border-radius: 9px; box-shadow: none; font-weight: 800;
}
.belknop:hover, .belknop:active { background: linear-gradient(180deg, #05B817 0%, #027F0D 100%); transform: none; }
.formulier button, .stap-knop, .adres__knop, .postcode button, .plan-check__knop {
background: var(--oranje); color: var(--wit); border: 0; border-radius: var(--radius-knop);
font-weight: 800; box-shadow: none;
}
.formulier button:hover, .stap-knop:hover, .adres__knop:hover, .postcode button:hover, .plan-check__knop:hover { background: #E35F00; color: var(--wit); }
.plan-check__knop { border: 0; }
.stap-terug { color: var(--rood); }
.sectie--donker .stap-terug { color: var(--wit); }
.kast-schakel button.actief, .cfg-lijst button[aria-current] { background: var(--rood); color: var(--wit); }
/* ---------- formulier: rood paneel zoals "Kosteloos advies bij jou?" ---------- */
.formulier {
background: var(--rood); color: var(--wit); border-radius: var(--radius-groot);
padding: 24px 24px 22px; max-width: 520px;
}
.formulier label { color: var(--wit); font-size: 0.9rem; font-weight: 700; margin: 12px 0 5px; }
.formulier .optioneel { color: rgba(255, 255, 255, 0.8); }
.formulier input, .formulier textarea { background: var(--wit); border: 0; border-radius: 8px; padding: 11px 12px; font-size: 1rem; }
.formulier input:focus, .formulier textarea:focus { outline: 3px solid var(--oranje); outline-offset: 1px; border-color: transparent; }
.formulier fieldset.woonsituatie { border-color: rgba(255, 255, 255, 0.4); }
.formulier fieldset.woonsituatie legend, .formulier fieldset.woonsituatie label { color: var(--wit); }
.formulier button { width: 100%; margin-top: 16px; }
.formulier__uitleg { color: rgba(255, 255, 255, 0.85); }
.formulier__status[data-toon="ok"] { color: #C9FFD0; }
.formulier__status[data-toon="fout"] { color: #FFD9A8; }
.formulier h2 { color: var(--wit); }
.stap-paneel[data-stap="4"] .formulier { max-width: none; }
.formulier__indicatie { color: var(--wit); }
/* ---------- voettekst ---------- */
.voet { background: var(--rood); color: var(--wit); }
.voet h3, .voet a { color: var(--wit); }
.voet__onder { border-top-color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.85); }
/* ---------- planpagina ---------- */
.plan-check { background: var(--kaart-grijs); border-radius: var(--radius-groot); }
.plan-voortgang__balk { background: var(--kaart-grijs); }
.plan-voortgang__vulling { background: linear-gradient(90deg, var(--rood), var(--oranje)); }
/* ---------- kaarten liften niet meer (de site is rustig) ---------- */
@media (hover: hover) and (pointer: fine) {
.uitlegblok:hover, .stap:hover, .cijfer:hover, .modern-punten li:hover { transform: none; box-shadow: none; }
}
/* secties lopen in elkaar over: dezelfde grote straal als de kaarten */
.sectie, .voet { border-radius: var(--radius-groot) var(--radius-groot) 0 0; margin-top: calc(-1 * var(--radius-groot)); }
main > .sectie:first-of-type { margin-top: 0; border-radius: 0; }
/* stap 4: stoplicht op rood vlak; de rode lamp krijgt een witte rand zodat hij op rood opvalt */
.stoplicht { background: var(--rood); border-radius: var(--radius-groot); }
.stoplicht[data-stand="rood"] .stoplicht__lamp--rood { background: #FF3B30; box-shadow: 0 0 0 3px var(--wit), 0 0 22px 6px rgba(255, 120, 120, 0.8); }
.monteur-fotos .monteur-foto { min-width: 0; }
.monteur-fotos .ph-vlak { position: static; width: 100%; min-height: 0; height: auto; aspect-ratio: 4 / 3; margin: 0; }
/* ---------- stappenplan op een rood vlak (Sherwin, 10 september 2026) ---------- */
#stappenplan .stap-paneel__kop, #stappenplan .stap-paneel__uitleg, #stappenplan .adres label,
#stappenplan .adres__status, #stappenplan .stappenbalk__label, #stappenplan .stap-plan__kop { color: var(--wit); }
#stappenplan .adres__status[data-toon="fout"] { color: #FFD9A8; }
#stappenplan .adres__status[data-toon="ok"] { color: #C9FFD0; }
#stappenplan .stappenbalk__stap[aria-current="step"] .stappenbalk__label { color: var(--wit); }
#stappenplan .stappenbalk__stap + .stappenbalk__stap::before { background: rgba(255, 255, 255, 0.35); }
#stappenplan .stappenbalk__stap[data-gedaan] + .stappenbalk__stap::before,
#stappenplan .stappenbalk__stap[aria-current="step"]::before { background: var(--groen-licht, #06CE1A); }
#stappenplan .stappenbalk__stap .stap__nummer { background: rgba(255, 255, 255, 0.25); color: var(--wit); }
#stappenplan .stappenbalk__stap[aria-current="step"] .stap__nummer { background: var(--oranje); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25); }
#stappenplan .stappenbalk__stap[data-gedaan] .stap__nummer { background: var(--groen); }
#stappenplan .plattegrond, #stappenplan .woning, #stappenplan .kamer, #stappenplan .vraag,
#stappenplan .check-grid, #stappenplan .kast-interactief { background: var(--wit); color: var(--tekst); }
#stappenplan .check-conclusie p, #stappenplan .stap-monteur li, #stappenplan .woning__feiten { color: var(--tekst-grijs); }
#stappenplan .stap-monteur { background: none; }
#stappenplan .brandkaart { background: var(--wit); border-radius: var(--radius-groot); }
#stappenplan .brandkaart p { color: var(--tekst-grijs); }
#stappenplan .adres input { background: var(--wit); border-color: transparent; }
#stappenplan .stap-terug { color: var(--wit); }
#stappenplan .stap-bellen .belhint { color: rgba(255, 255, 255, 0.9); }
#stappenplan .stap-overslaan .stap-terug { color: var(--wit); }
#stappenplan .formulier { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); }
#stappenplan .pg-tegel { background: #F4F5F7; }
#stappenplan .vraag legend, #stappenplan .kamer legend { color: var(--tekst); }
#stappenplan .woning p, #stappenplan .woning strong, #stappenplan .check-grid p { color: var(--tekst); }
#stappenplan .woning__feiten, #stappenplan .woning__bouwjaar, #stappenplan .check-score { color: var(--tekst-grijs); }
#stappenplan .woning__bouwjaar[data-kleur="rood"] { color: var(--rood); }
#stappenplan .woning__bouwjaar[data-kleur="oranje"] { color: #C25400; }
.stap-paneel__kop:focus:not(:focus-visible) { outline: none; }
#stappenplan .check-item, #stappenplan .check-item strong { color: var(--tekst); }
#stappenplan .check-conclusie { background: none; }
#stappenplan .check-grid { border-radius: var(--radius-groot); }
#stappenplan .stoplicht .stoplicht__tekst { color: var(--wit); }
#stappenplan .monteur-foto figcaption { color: var(--tekst-grijs); }
/* stap 4: het stoplicht zelf half buiten de kaart, rechtsboven, met een witte rand om de
behuizing; geen rood vlak eromheen (Sherwin, 10 september 2026) */
#stappenplan .check-grid { position: relative; }
#stappenplan .stoplicht { background: none; box-shadow: none; padding: 0; border: 0; }
#stappenplan .stoplicht__kast { border: 4px solid var(--wit); border-radius: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); background: #1A1A1A; }
@media (min-width: 720px) {
/* uitkomst links, lijn, rechts wat Sherwin bekijkt; het stoplicht daarboven half buiten de kaart */
#stappenplan .check-grid { grid-template-columns: 1fr 1fr; column-gap: 22px; margin-top: 30px; overflow: visible; padding-top: 22px; }
#stappenplan .stoplicht { position: absolute; right: 22px; top: -34px; width: auto; }
#stappenplan .stap-monteur { padding-right: 84px; }
}
@media (max-width: 719px) {
#stappenplan .stoplicht { justify-self: center; width: auto; }
}
#stappenplan .stap-sherwin { background: var(--wit); border-radius: var(--radius-groot); }
#stappenplan .stap-sherwin p { color: var(--tekst-grijs); }
#stappenplan .stap-sherwin strong { color: var(--tekst); }