/* ==========================================================================
   qsolar — stijl
   --------------------------------------------------------------------------
   Eén bestand, geen bouwstap: het voorbeeld moet met dubbelklikken te openen
   zijn. Kleuren staan bovenaan als variabelen, dus een bijstelling is één regel.

   Het lettertype is Ubuntu, **zelf meegeleverd** en niet van Google's servers
   geladen. Drie redenen: de site werkt dan ook zonder internet, hij laadt sneller
   (geen extra verbinding), en de browser van een bezoeker doet geen verzoek aan
   Google — in de EU is dat laatste geen detail. De Ubuntu Font Licence staat dit
   uitdrukkelijk toe. Alleen latin en latin-ext meegenomen; grieks, cyrillisch en
   vietnamees zijn dode last op een Nederlandse site. Samen 94 kB.

   LET OP: Ubuntu heeft alléén 400, 500 en 700. Tussenwaarden als 550 of 650
   bestaan niet en worden door de browser nagemaakt of afgerond — dus overal een
   van die drie gebruiken.
   ========================================================================== */

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ubuntu-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ubuntu-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ubuntu-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ubuntu-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ubuntu-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ubuntu-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Uit het logo (logo_QS.svg): petrol #00798a en grijs #7d7d7d. Verder niets
       bijverzonnen — het merk is met opzet twee kleuren, dus geen derde accent. */
    --merk: #00798a;
    --merk-diep: #005c6a;
    --merk-licht: #4fa8b4;   /* voor tekst op donker */
    --merk-vlak: #e7f2f4;    /* zachte vulling achter icoontjes */

    --ink: #16262b;          /* donker, met een zweem van het petrol erin */
    --ink-zacht: #5b6e73;    /* bijtekst — familie van het grijs uit het logo */
    --lijn: #e2e9ea;
    --vlak: #f5f8f8;
    --wit: #ffffff;

    --breed: 1180px;
    --radius: 14px;
    --schaduw: 0 1px 2px rgba(22, 38, 43, .06), 0 8px 24px rgba(22, 38, 43, .07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--wit);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--merk-diep); text-decoration: none; }
a:hover { text-decoration: underline; }

.omhulsel { max-width: var(--breed); margin: 0 auto; padding: 0 24px; }

/* ── Koppen ─────────────────────────────────────────────────────────────── */

h1, h2, h3 { line-height: 1.14; letter-spacing: -.005em; font-weight: 700; }
h1 { font-size: clamp(34px, 5.2vw, 58px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 19px; letter-spacing: 0; }

.bovenkop {
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--merk); margin-bottom: 12px;
}

.sectie { padding: 92px 0; }
.sectie--vlak { background: var(--vlak); border-block: 1px solid var(--lijn); }
.sectie__kop { max-width: 680px; margin-bottom: 48px; }
.sectie__kop p { color: var(--ink-zacht); margin-top: 14px; font-size: 18px; }

/* ── Knoppen ────────────────────────────────────────────────────────────── */

.knop {
    display: inline-flex; align-items: center;
    padding: 8px 14px; border-radius: 8px; border: 1px solid transparent;
    font-size: 14.5px; font-weight: 500; cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}
.knop { white-space: nowrap; }
.knop:hover { text-decoration: none; transform: translateY(-1px); }
.knop--vol {
    background: var(--merk);
    color: #fff;
    /* Twee schaduwen: een harde haarlijn eronder voor de rand, en een wijde
       gloed in de merkkleur zelf. Grijze schaduw maakt een gekleurde knop vuil. */
    box-shadow: 0 1px 2px rgba(0, 70, 82, .22), 0 5px 14px rgba(0, 121, 138, .22);
}
.knop--vol:hover {
    background: var(--merk-diep);
    box-shadow: 0 2px 4px rgba(0, 70, 82, .26), 0 8px 20px rgba(0, 121, 138, .3);
}
.knop--vol:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 70, 82, .3); }

.knop--rand { background: #fff; color: var(--ink); border-color: var(--lijn); }
.knop--rand:hover { border-color: var(--ink-zacht); }
.knop--licht { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); }
.knop--licht:hover { background: rgba(255, 255, 255, .24); }

/* ── Kop van de pagina ──────────────────────────────────────────────────── */

.kop {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--lijn);
}
.kop__binnen { display: flex; align-items: center; gap: 28px; height: 70px; }
.merk { display: flex; align-items: center; flex: 0 0 auto; }
/* Het logo is een breed woordmerk (550x77): op hoogte zetten en de breedte laten
   volgen, anders wordt het uitgerekt. */
.merk img { height: 30px; width: auto; }
.voet .merk img { height: 28px; }
.nav { display: flex; gap: 28px; margin-left: auto; font-size: 15.5px; font-weight: 500; }
.nav a { color: var(--ink); position: relative; padding: 4px 0; }
.nav a:hover { color: var(--merk); text-decoration: none; }
/* Een streep die vanaf links uitschuift. Geen kleurwissel alleen: die is op een
   witte balk nauwelijks te zien. */
.nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    border-radius: 2px; background: var(--merk);
    transform: scaleX(0); transform-origin: left; transition: transform .24s ease;
}
.nav a:hover::after { transform: scaleX(1); }
.kop .knop { padding: 7px 13px; font-size: 14px; }

/* Twee teksten in dezelfde knop: op een telefoon past de lange niet naast het logo. */
.alleen-smal { display: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
    /* Het petrol van het logo zelf als vlak, met een lichtere gloed rechtsboven
       waar geen tekst staat. Lichter dan dit kan niet: #00798a geeft met witte
       tekst 5,2:1 en dat is de ondergrens die ik wil halen — elke tint lichter
       zakt onder de leesbaarheidsnorm. Vandaar dat het verloop naar bene­den
       dónkerder wordt in plaats van lichter. */
    background:
        radial-gradient(1100px 540px at 80% -18%, #0d93a6 0%, rgba(13, 147, 166, 0) 58%),
        linear-gradient(155deg, #00798a 0%, #006374 48%, #004b58 100%);
    color: #fff; padding: 104px 0 96px;
}
.hero h1 { color: #fff; max-width: 23ch; }
.hero__tekst { color: #eaf6f8; font-size: 19.5px; max-width: 56ch; margin-top: 22px; }
.hero__knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.hero .bovenkop { color: #ffffff; }

.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; margin-top: 72px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .26); }
.cijfer b { display: block; font-size: 36px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.cijfer span { display: block; margin-top: 8px; color: #eaf6f8; font-size: 14.5px; }

/* In de hero staat de volle knop op zijn eigen kleur en valt hij weg. Daar wit,
   met het petrol als tekst — dat is ook het sterkste contrast dat we hebben. */
.hero .knop--vol {
    background: #fff; color: var(--merk-diep);
    box-shadow: 0 1px 2px rgba(0, 60, 70, .16), 0 6px 16px rgba(0, 40, 48, .18);
}
.hero .knop--vol:hover { background: #f3fbfc; box-shadow: 0 2px 4px rgba(0, 60, 70, .18), 0 9px 22px rgba(0, 40, 48, .24); }

/* ── Kaarten ────────────────────────────────────────────────────────────── */

.rooster { display: grid; gap: 22px; }
/* `min(… , 100%)` is hier geen sierlijkheid: een kale minmax(380px, 1fr) máákt een
   kolom van 380px, ook als het scherm 327px binnenwerk heeft — en dan schuift de
   hele pagina zijwaarts. Precies dat gebeurde op /onderhoud op een telefoon. */
.rooster--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.rooster--2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }

.kaart {
    background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 28px; transition: box-shadow .18s, transform .18s;
}
.kaart:hover { box-shadow: var(--schaduw); transform: translateY(-2px); }
.kaart h3 { margin-bottom: 10px; }
.kaart p { color: var(--ink-zacht); font-size: 16px; }
.kaart__teken {
    width: 44px; height: 44px; border-radius: 11px; background: var(--merk-vlak);
    display: grid; place-items: center; margin-bottom: 18px; color: var(--merk);
}
.kaart__teken svg { width: 23px; height: 23px; }

/* ── Werkwijze ──────────────────────────────────────────────────────────── */

/* De stappen stonden eerst als losse tekst met een bolletje ervoor. Naast de
   kaarten op de andere pagina's zag dat uit alsof de opmaak niet af was; nu is
   elke stap een cel, met het nummer erin. */
.stappen { counter-reset: stap; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.stap {
    position: relative; background: #fff; border: 1px solid var(--lijn);
    border-radius: var(--radius); padding: 26px 24px 24px;
    transition: box-shadow .18s, transform .18s;
}
.stap:hover { box-shadow: var(--schaduw); transform: translateY(-2px); }
.stap::before {
    counter-increment: stap; content: counter(stap);
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--merk); color: #fff; margin-bottom: 16px;
    display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.stap h2, .stap h3 { margin-bottom: 8px; }
.stap p { color: var(--ink-zacht); font-size: 16px; }

/* ── Projecten ──────────────────────────────────────────────────────────── */

.project { border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; background: #fff; transition: box-shadow .18s, transform .18s; }
.project:hover { box-shadow: var(--schaduw); transform: translateY(-2px); }
.project__beeld {
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, #dbe8ea, #eef4f4 60%, #e4eeef);
    display: grid; place-items: center; color: #8fa5a9; font-size: 13.5px;
    border-bottom: 1px solid var(--lijn);
}
.project__body { padding: 22px 24px 24px; }
.project__plaats { font-size: 13px; color: var(--merk); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.project h3 { margin: 8px 0 14px; }
.project__feiten { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-zacht); border-top: 1px solid var(--lijn); padding-top: 14px; }
.project__feiten b { color: var(--ink); font-weight: 700; }

/* ── Contact ────────────────────────────────────────────────────────────── */

.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.veld { margin-bottom: 18px; }
.veld label { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 7px; }
.veld input, .veld select, .veld textarea {
    width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
    border: 1px solid var(--lijn); border-radius: 10px; background: #fff; color: var(--ink);
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
    outline: none; border-color: var(--merk); box-shadow: 0 0 0 3px rgba(0, 121, 138, .15);
}
.veld textarea { min-height: 130px; resize: vertical; }
.veld--twee { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hint { font-size: 13.5px; color: var(--ink-zacht); margin-top: 6px; }

.gegevens { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 30px; }
.gegevens dt { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-zacht); margin-top: 22px; }
.gegevens dt:first-child { margin-top: 0; }
.gegevens dd { margin-top: 4px; font-size: 16.5px; }

/* ── Voet ───────────────────────────────────────────────────────────────── */

/* Dezelfde kleur als de hero, maar het verloop de andere kant op: zo sluit de
   pagina onderaan af zoals hij bovenaan begon. */
.voet {
    background: linear-gradient(20deg, var(--merk) 0%, #006a7a 46%, #00505d 100%);
    color: #edf8fa; padding: 60px 0 32px; font-size: 15px;
}
.voet__boven { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .24); }
.voet h4 { color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; font-weight: 700; }
.voet a { color: #f1fafb; display: block; margin-bottom: 9px; }
.voet a:hover { color: #fff; }
.voet__onder { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; font-size: 14px; }
.voet .merk { color: #fff; margin-bottom: 14px; }

/* ── Klein scherm ───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    /* Het menu verdween hier eerst helemaal. Dan kan iemand op een telefoon alleen
       nog via de voet bij /onderhoud komen — en juist een dakeigenaar met een
       storing staat met zijn telefoon in zijn hand. Dus: tweede regel onder de
       balk, zijwaarts te schuiven als het niet past. */
    /* De vaste hoogte moet eraf, anders klemt de tweede regel in de balk. */
    .kop__binnen { flex-wrap: wrap; height: auto; min-height: 56px; padding-top: 8px; }
    .nav {
        order: 3; flex-basis: 100%; margin-left: 0; gap: 20px; font-size: 14.5px;
        padding: 8px 0 6px; border-top: 1px solid var(--lijn); margin-top: 8px;
        overflow-x: auto; scrollbar-width: none; white-space: nowrap;
    }
    .nav::-webkit-scrollbar { display: none; }
    .merk img { height: 24px; }
    .alleen-breed { display: none; }
    .alleen-smal { display: inline; }
    .kop .knop { padding: 7px 12px; }
    .sectie { padding: 64px 0; }
    .hero { padding: 72px 0 64px; }
    .contact { grid-template-columns: 1fr; gap: 36px; }
    .voet__boven { grid-template-columns: 1fr; gap: 28px; }
    .veld--twee { grid-template-columns: 1fr; }
    .cijfers { margin-top: 48px; gap: 24px; }
}

/* ══ Onderdelen die bij de PHP-versie horen ══════════════════════════════════ */

/* Overslaan naar de inhoud: onzichtbaar tot je hem met de tab-toets bereikt. */
.overslaan {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--merk); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
    font-size: 14.5px; font-weight: 500;
}
.overslaan:focus { left: 0; text-decoration: none; }

/* De pagina waar je nú bent, in het menu. Niet alleen kleur: op een witte balk is
   een kleurverschil alleen te zwak om op te vallen. */
.nav a.nu { color: var(--merk); }
.nav a.nu::after { transform: scaleX(1); }

.inleiding { color: var(--ink-zacht); font-size: 19px; max-width: 62ch; margin-top: 18px; }

/* Opsommingen in een kaart. */
.lijst { margin-top: 14px; padding-left: 20px; color: var(--ink-zacht); display: grid; gap: 9px; }

/* Een leeskolom: langere tekst wordt onleesbaar over de volle breedte. Links
   uitgelijnd en niet gecentreerd, zodat hij onder de paginakop begint en niet
   halverwege de pagina. */
.tekstkolom { max-width: 780px; margin-right: auto; }
.tekstkolom h2 { font-size: 22px; margin: 34px 0 10px; }
.tekstkolom h2:first-child { margin-top: 0; }
.tekstkolom p { color: var(--ink-zacht); }

/* Meldingen na het versturen van het formulier. */
.melding {
    padding: 16px 18px; border-radius: var(--radius); margin-bottom: 28px;
    border: 1px solid; font-size: 16px; line-height: 1.6;
}
.melding--goed { background: var(--merk-vlak); border-color: #b9dde2; color: #0c4b55; }
.melding--fout { background: #fdf2f2; border-color: #f4c9c9; color: #8f2020; }
.melding a { color: inherit; text-decoration: underline; }

/* Fout bij één veld: onder het veld, in rood, zonder de vorm te verschuiven. */
.veldfout { color: #b02a2a; font-size: 13.5px; margin-top: 6px; }
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"] { border-color: #d98a8a; }
.optioneel { color: var(--ink-zacht); font-weight: 400; }

/* Het lokvak voor bots: weg van het scherm, maar niet display:none — sommige
   bots slaan velden over die verborgen zijn en vullen dit dan juist niet in. */
.verborgen-veld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Onze rol in een project van iemand anders. */
.project__rol { color: var(--ink-zacht); font-size: 14.5px; margin-top: 6px; }

/* Een projectfoto vult hetzelfde vlak als de grijze plaatshouder. */
img.project__beeld { width: 100%; height: auto; object-fit: cover; }

/* ══ De tweesprong op de startpagina ═════════════════════════════════════════ */

/* Een kaart die zelf een wegwijzer is: meer lucht, en de knop onderaan uitgelijnd
   zodat twee kaarten naast elkaar hun knop op dezelfde hoogte hebben — anders lijkt
   de een belangrijker dan de ander. */
.kaart--weg { display: flex; flex-direction: column; padding: 32px; }
.kaart--weg h2 { font-size: 24px; margin: 4px 0 12px; }
.kaart--weg p { font-size: 16.5px; }
.kaart__actie { margin-top: auto; padding-top: 22px; }

/* De afbakening 'geen nieuwbouw voor eigenaren'. Geen waarschuwing in rood — het is
   geen fout, het is hoe het werkt — maar wel apart, want het is de zin die een
   verkeerde aanvraag voorkomt. */
.mededeling {
    margin-top: 16px; padding: 13px 15px; border-radius: 10px;
    background: var(--merk-vlak); border: 1px solid #cfe6e9;
    font-size: 15px; color: #0c4b55;
}

/* ══ Het tweeledige contactformulier ═════════════════════════════════════════ */

/* Eerst kiezen wie je bent, dan pas velden. Twee grote klikvlakken in plaats van
   een keuzelijst: wie hier verkeerd kiest, krijgt de verkeerde vragen. */
.keuzeblok { border: 0; padding: 0; margin: 0 0 26px; }
/* De legend blijft buiten het raster: een <legend> die zélf een rastercel moet zijn,
   wordt door browsers verschillend behandeld. */
.keuzeblok legend { padding: 0; margin-bottom: 9px; font-size: 14.5px; font-weight: 500; }
.keuzerij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.keuze {
    display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
    padding: 14px 15px; border: 1px solid var(--lijn); border-radius: 12px;
    background: #fff; transition: border-color .18s ease, background .18s ease;
}
.keuze:hover { border-color: var(--merk-licht); }
.keuze input { margin-top: 2px; accent-color: var(--merk); flex: none; }
.keuze b { display: block; font-weight: 500; font-size: 15.5px; }
.keuze small { display: block; color: var(--ink-zacht); font-size: 13.5px; margin-top: 3px; }
/* De gekozen kant licht op. :has werkt in elke browser die we hier bedienen; waar
   het niet werkt blijft de radioknop zelf het antwoord. */
.keuze:has(input:checked) { border-color: var(--merk); background: var(--merk-vlak); }
.keuze:has(input:focus-visible) { outline: 2px solid var(--merk); outline-offset: 2px; }

/* Het blok met de vragen van één rol. Een zichtbare omlijning, want de inhoud
   wisselt: zonder rand lijkt het of de pagina zomaar verspringt. */
.blok {
    border: 1px solid var(--lijn); border-radius: 12px;
    padding: 22px 20px 6px; margin-bottom: 22px; background: var(--vlak);
}
.blok legend {
    padding: 0 9px; margin-left: -4px; font-size: 13px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-zacht);
}
.blok .mededeling { margin-bottom: 18px; }

@media (max-width: 560px) {
    .keuzerij { grid-template-columns: 1fr; }
}

/* ══ Onderaanneming: één cel per onderdeel ═══════════════════════════════════

   Dit stond eerst als losse kolommen in afwisselend gekleurde secties: icoon en
   titel links, tekst rechts. Bij een smal venster vielen die kolommen op elkaar en
   zakte de tekst ónder het icoontje — dan leest het als een pagina zonder opmaak.
   Nu is elk onderdeel één cel die zijn eigen tekst vasthoudt, in dezelfde vorm als
   de kaarten op /onderhoud.                                                      */

.diensten { display: grid; gap: 24px; }
.dienst {
    background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 30px; scroll-margin-top: 90px;   /* voor de ankers, onder de vaste balk */
}
.dienst__kop { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
/* Het vierkantje met het icoon staat hier náást de titel in plaats van erboven. */
.dienst__kop .kaart__teken { margin-bottom: 0; flex: none; }
.dienst__kop h2 { font-size: clamp(23px, 2.4vw, 28px); }
.dienst__lijf { display: grid; grid-template-columns: 1.3fr .7fr; gap: 34px; align-items: start; }
.dienst__lijf p { color: var(--ink-zacht); }
.dienst__lijf p + p { margin-top: 13px; }

/* Wat de hoofdaannemer terugkrijgt: een eigen vlak binnen de cel, want het is een
   ander soort informatie dan de uitleg ernaast. */
.oplevering {
    background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px;
    padding: 20px 22px;
}
.oplevering h3 {
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-zacht);
}
.oplevering .lijst { margin-top: 12px; font-size: 15.5px; }

/* Een blok lopende tekst dat óók een cel hoort te zijn. Zelfde vorm als .kaart,
   maar zonder het optillen bij hover: er valt niets te klikken. */
.tekstkaart {
    background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 30px;
}
.tekstkaart h2, .tekstkaart h3 { margin-bottom: 14px; }
.tekstkaart p { color: var(--ink-zacht); }
.tekstkaart p + p { margin-top: 14px; }
.tekstkaart .knop { margin-top: 22px; }

/* ══ De strook naar het formulier ════════════════════════════════════════════

   Stond gecentreerd midden op een lege breedte. Dat leest als een tussenkop en
   niet als een uitnodiging; en gecentreerde tekst naast pagina's vol linkslijnende
   cellen valt uit de toon. Nu is het een cel: tekst links, knop rechts.          */

.strook {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
    background: var(--merk-vlak); border: 1px solid #cfe6e9;
    border-radius: var(--radius); padding: 30px 32px;
}
.strook__tekst { flex: 1 1 320px; }
.strook h2 { font-size: clamp(22px, 2.4vw, 27px); }
.strook p { color: #2c5b63; margin-top: 10px; font-size: 16.5px; max-width: 62ch; }
.strook .knop { flex: none; }

/* LET OP: deze media-blokken staan met opzet ónder de definities hierboven. Een
   regel met dezelfde zwaarte die later in het bestand staat, wint — een @media
   bovenaan zou dus stil worden overschreven. */
@media (max-width: 860px) {
    /* Twee kolommen binnen één cel worden hier te smal: het vlak met 'wat u
       terugkrijgt' zou nog maar een handbreed zijn. */
    .dienst__lijf { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 640px) {
    .dienst { padding: 24px 20px; }
    .tekstkaart { padding: 24px 20px; }
    .strook { padding: 24px 20px; }
}

/* ══ Kop van een binnenpagina ════════════════════════════════════════════════

   Eerst stond de h1 los op wit — dat zag uit als een pagina waarvan de opmaak niet
   af was. Daarna stond hij in een omlijnd vlak met een pil en een streepje, en dat
   was te véél: een kader binnen een pagina die verder al uit omlijnde cellen
   bestaat, stapelt randen op randen (Asen, 11-09-2026).

   Dit is de rustige versie: geen rand, geen hoeken, geen pil. Alleen een band over
   de volle breedte met dezelfde gloed als de hero, zó licht dat de tekst zwart
   blijft, en één haarlijn onderaan om hem van de inhoud te scheiden. De kop is dan
   opgemaakt zonder zelf een element te worden dat je moet 'lezen'.               */

.paginakop {
    background:
        radial-gradient(900px 380px at 88% -45%, rgba(0, 121, 138, .11) 0%, rgba(0, 121, 138, 0) 62%),
        linear-gradient(180deg, #f4f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid var(--lijn);
    padding: 74px 0 58px;
}
/* Kleiner dan de h1 van de hero: dit is een paginakop en geen aankondiging, en
   die van de startpagina mag de grootste blijven. */
.paginakop h1 { font-size: clamp(30px, 3.9vw, 44px); max-width: 34ch; }
/* Over de volle breedte van de band, zonder leeskolom (Asen, 11-09-2026). */
.paginakop .inleiding { color: #3d565c; max-width: none; font-size: 18px; }
.paginakop__acties { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 640px) {
    .paginakop { padding: 48px 0 40px; }
}