/* 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 01-header (blokken/01-header/blok.css) ==================== */
/* ---------- Navbar: witte topbalk + rode menubalk (zoals de site) ----------
Maten gemeten op deelektricienvanamsterdam.nl bij 1601 px breed:
topbalk 106 hoog, logo 257×68, tekstblok 2 regels Inter 16, belknop
174×41 groen #06CE1A met hoekradius 9, menubalk 38 hoog met Inter 20. */
/* Sticky (Sherwin, 10 september 2026): alleen de witte topbalk (logo, belknop) blijft bovenaan
staan bij het scrollen; de rode menubalk scrolt gewoon mee. scroll-padding zorgt dat ankers
(#contact, #wie) niet achter de balk verdwijnen. */
.hoofd { display: contents; } /* geen eigen box: anders is de header de 'ouder' waarbinnen sticky
werkt en laat de topbalk los zodra de header (144 px) uit beeld is (Sherwin, 11 september 2026:
"maak de navbar sticky"). Met display: contents plakt de topbalk de hele pagina lang; de rode
menubalk scrolt er gewoon onderdoor. */
.topbalk { position: sticky; top: 0; z-index: 51; }
html { scroll-padding-top: 116px; }
@media (max-width: 900px) { html { scroll-padding-top: 96px; } }
.topbalk { background: var(--wit); }
.topbalk__binnen {
max-width: 1158px;
margin: 0 auto;
padding: 6px 24px;
min-height: 106px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.topbalk__logo { display: block; flex: none; }
.topbalk__logo img { display: block; width: 257px; height: auto; }
/* lege ruimte tussen logo en tekst, zodat de tekst rechts bij de knop staat */
.topbalk__ruimte { flex: 1 1 296px; }
.topbalk__vandaag {
margin: 0;
flex: none;
font-size: 16px;
font-weight: 300;
line-height: 1.2;
color: var(--tekst-grijs);
}
.topbalk__vandaag strong { font-weight: 600; color: var(--oranje); }
.topbalk__komma { font-weight: 500; }
.topbalk__bel {
flex: none;
width: 203px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.topbalk__bel-boven {
font-size: 14px;
font-weight: 500;
font-style: italic;
line-height: 1.2;
color: #A6A6A6;
text-align: center;
}
.topbalk__bel a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 174px;
height: 41px;
padding: 0 5px;
background: var(--groen-licht);
color: var(--wit);
border-radius: 9px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.menubalk { background: var(--rood); }
.menubalk__binnen {
max-width: 1060px;
margin: 0 auto;
padding: 15px 0 0 22px;
display: flex;
align-items: center;
gap: 3px;
}
.menubalk__item {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 101px;
height: 38px;
padding: 0 7px;
color: var(--wit);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.menubalk__item--vet { font-weight: 700; }
.menubalk__item:first-child { min-width: 83px; padding: 0 13px; }
.menubalk__item--rechts { margin-left: auto; }
.menubalk__item:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Smaller schermen: de site heeft hier geen nette telefoonversie; deze
opbouw volgt de tabletversie van de site (logo + belknop, menu eronder). */
@media (max-width: 1100px) {
.topbalk__ruimte { display: none; }
}
@media (max-width: 760px) {
.topbalk__binnen { min-height: 84px; padding: 8px 16px; gap: 12px; }
.topbalk__logo img { width: 168px; }
.topbalk__vandaag { display: none; }
.topbalk__bel { width: auto; }
.topbalk__bel a { min-width: 0; height: 38px; padding: 0 14px; font-size: 16px; }
.menubalk__binnen { padding: 10px 8px 0; flex-wrap: wrap; }
.menubalk__item, .menubalk__item:first-child { min-width: 0; padding: 0 8px; height: 36px; font-size: 17px; }
}
/* ---------- Voortgangsbalk bovenaan ---------- */
.voortgang {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 80;
pointer-events: none;
}
.voortgang__vulling {
height: 100%;
background: var(--rood);
transform: scaleX(0);
transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
.js .voortgang__vulling {
animation: voortgangGroei linear forwards;
animation-timeline: scroll();
}
@keyframes voortgangGroei { to { transform: scaleX(1); } }
}
/* ==================== blok 02-reviews (blokken/02-reviews/blok.css) ==================== */
/* ---------- Reviewpagina: score bovenaan, kaarten in een raster ---------- */
.reviews-score { margin: 0 0 22px; font-size: 1.05rem; color: var(--tekst-grijs); }
.reviews-score__sterren { color: #FADB14; letter-spacing: 2px; font-size: 1.2rem; }
.reviews-score strong { color: var(--tekst); }
.reviews-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.review-kaart { background: var(--vlak-licht); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.review-kaart__kop { display: flex; align-items: center; gap: 12px; }
.review-kaart__kop strong { display: block; }
.review-kaart__foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.review-kaart__foto--letter { display: flex; align-items: center; justify-content: center; background: var(--rood); color: var(--wit); font-weight: 800; }
.review-kaart__datum { font-size: 0.88rem; color: var(--tekst-grijs); }
.review-kaart__bron { color: var(--tekst-grijs); }
.review-kaart__sterren { margin: 0; color: #FADB14; letter-spacing: 2px; font-size: 1.1rem; }
.review-kaart__sterren .ster--leeg { color: #D9DCE0; }
.review-kaart__tekst { margin: 0; color: var(--tekst); }
.reviews-terug { margin-top: 28px; }
/* ==================== blok 18-footer (blokken/18-footer/blok.css) ==================== */
/* ---------- Footer: zoals op deelektricienvanamsterdam.nl (gemeten 10 september 2026) ---------- */
footer.voet {
background: var(--rood); color: var(--wit);
padding: 58px 20px 22px; font-size: 1.05rem; line-height: 1.55;
border-radius: 0; margin-top: 0;
}
.voet__binnen {
max-width: 1060px; margin: 0 auto;
display: grid; grid-template-columns: 1.1fr 1.6fr auto auto; gap: 24px 30px; align-items: start;
}
.voet__kolom h3 { margin: 0 0 6px; color: var(--wit); font-size: 1.35rem; font-weight: 700; }
.voet__kolom p { margin: 0; color: var(--wit); }
.voet a { color: var(--wit); text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet__knop { align-self: center; }
.voet__bel { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; font-size: 1.15rem; font-weight: 800; border-radius: 6px; white-space: nowrap; }
.voet__cookies { align-self: center; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.voet__juridisch { font-size: 0.85rem; color: var(--wit); }
.cookie-opnieuw { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; color: var(--wit); cursor: pointer; }
.cookie-opnieuw:hover { text-decoration: underline; }
.voet__onder {
max-width: 1060px; margin: 26px auto 0; padding-top: 12px;
border-top: 2px solid var(--wit); display: flex; justify-content: space-between; gap: 20px;
font-size: 0.85rem; color: var(--wit);
}
@media (max-width: 860px) {
.voet__binnen { grid-template-columns: 1fr 1fr; }
.voet__knop { grid-column: 1 / -1; }
.voet__cookies { grid-column: 1 / -1; justify-self: start; align-items: flex-start; }
.voet__onder { flex-direction: column; gap: 6px; }
}
/* ==================== blok 19-belbalk (blokken/19-belbalk/blok.css) ==================== */
/* ---------- Sticky belbalk (mobiel) ---------- */
.belbalk {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
height: var(--belbalk-hoogte);
background: var(--rood);
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}
.belbalk a {
color: var(--wit);
font-weight: 800;
font-size: 1.02rem;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 100%;
justify-content: center;
}
@media (min-width: 900px) {
.belbalk { display: none; }
body { padding-bottom: 0; }
}
/* ---------- Belbalk: pas in beeld zodra de hero uit beeld is ---------- */
.js .belbalk { transform: translateY(110%); transition: transform 0.3s ease; }
.js .belbalk.zichtbaar { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.js .belbalk { transform: none; }
}
/* ==================== 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); }