/* ========================================
   VOLTUX — boekpagina's (laadpaal-thuis-boeken.php + site/site-boeken.js). Prefix bk-.
   Opnieuw opgezet 2026-09-19 na feedback: overal vaste ruimte, letter DM Sans.

   Ruimte komt van de ouder (flex/grid + gap), nooit van marges op losse elementen:
   site-style.css zet * { margin: 0 }, dus marges op kinderen verdwijnen of botsen.
     stap (kaart)          gap 32  tussen kop, velden, blokken en navigatie
     kop van een stap      gap 8   label · titel · uitleg
     blok / groep          gap 14  titel · uitleg · keuzes
   Schaal: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56
   ======================================== */

@import url('/shared/voltux-variables.css');

/* html en body hebben overflow-x: hidden (site-style.css): dan werkt position: sticky niet.
   clip knipt net zo goed af, zonder van body een scrollvak te maken. */
html:has(.bk), body:has(.bk) { overflow-x: clip; }

.bk {
    --bk-letter: 'DM Sans Variable', 'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --bk-grond: #F3F6F5;
    --bk-inkt: #0F1B17;
    --bk-tekst: #3D4B47;
    --bk-zacht: #66756F;
    --bk-lijn: #E1E8E5;
    --bk-lijn-sterk: #CBD6D1;
    --bk-vlak: #F7FAF9;
    --bk-groen: var(--green-500);
    --bk-groen-donker: var(--green-600);
    --bk-groen-zacht: #E8F7F1;
    --bk-ring: 0 0 0 4px rgba(29, 158, 117, 0.16);

    min-height: 100vh;
    padding: 40px 0 96px;
    background: var(--bk-grond);
    color: var(--bk-tekst);
    font-family: var(--bk-letter);
    font-size: 16px;
    line-height: 1.55;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}
.bk [hidden] { display: none !important; }
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
:where(.bk) :where(ul, ol) { list-style: none; }
.bk :where(button, input, select, textarea) { font-family: inherit; }
.bk :where(h1, h2, h3) { color: var(--bk-inkt); text-wrap: balance; }
.bk a { color: var(--bk-groen-donker); }

.bk-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.bk-kaart {
    background: var(--white);
    border: 1px solid var(--bk-lijn);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(15, 27, 23, 0.04), 0 20px 48px -32px rgba(15, 27, 23, 0.22);
}

/* ══════════ Kop van de pagina + voortgang ══════════ */
.bk-kop { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; scroll-margin-top: 88px; }
.bk-label {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    background: var(--bk-groen-zacht); color: var(--bk-groen-donker);
    font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.bk-label i { font-size: 15px; }
.bk-kop h1 { font-size: clamp(32px, 4.6vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -1.2px; }
.bk-kop > p { max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--bk-zacht); }
.bk-kop > p strong { color: var(--bk-inkt); font-weight: 700; }
.bk-kop .bk-melding { align-self: stretch; }

/* Voortgang (2026-09-21, verzoek gebruiker): een balk in 7 gelijke stukken met erboven de naam
   van de stap en "Stap 2 van 7". Was: bolletjes met lijntjes die scheef stonden en aan het
   volgende nummer plakten. Elk stuk is nog steeds een knop: terug kan altijd, vooruit alleen
   tot waar je al was (site-boeken.js tekenVoortgang). */
.bk-voortgang-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 20px; padding: 14px 18px 10px; border: 1px solid var(--bk-lijn); border-radius: 18px; background: var(--white); }
.bk-voortgang-tekst { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.bk-voortgang-tekst strong { font-size: 15px; font-weight: 700; color: var(--bk-inkt); }
.bk-voortgang-tekst span { font-size: 13px; font-weight: 600; color: var(--bk-zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-voortgang { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.bk-voortgang li { min-width: 0; }
/* Naam en nummer alleen voor schermlezers (en als tooltip via title) */
.bk-voortgang span, .bk-voortgang em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bk-voortgang li button {
    display: block; width: 100%; padding: 8px 0; margin: 0;
    border: 0; border-radius: 8px; background: none; cursor: pointer;
}
.bk-voortgang li button::before {
    content: ''; display: block; height: 6px; border-radius: 999px;
    background: var(--bk-lijn); transition: background 0.2s;
}
.bk-voortgang li.klaar button::before { background: var(--bk-groen); }
/* De stap waar je nu bent geeft zacht licht, zodat je hem meteen ziet */
.bk-voortgang li.nu button::before { background: var(--bk-groen); animation: bk-gloed 2.2s ease-in-out infinite; }
@keyframes bk-gloed {
    0%, 100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0); }
    50%      { box-shadow: 0 0 10px 2px rgba(29, 158, 117, 0.5); }
}
.bk-voortgang li button:disabled { cursor: default; }
.bk-voortgang li button:not(:disabled):hover::before { background: var(--bk-groen-donker); }
.bk-voortgang li:not(.klaar):not(.nu) button:not(:disabled):hover::before { background: var(--bk-lijn-sterk); }
.bk-voortgang li button:focus-visible { outline: 2px solid var(--bk-groen); outline-offset: 2px; }

/* ══════════ Rooster ══════════ */
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; margin-top: 32px; }
.bk-hoofd { min-width: 0; }
.bk-zij { position: sticky; top: 88px; min-width: 0; }

/* ══════════ Een stap ══════════ */
.bk-stap { display: flex; flex-direction: column; gap: 32px; padding: 40px; }
.bk-stap-kop { display: flex; flex-direction: column; gap: 8px; }
.bk-substap { font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bk-groen-donker); }
.bk-stap-kop h2 { font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.6px; }
.bk-intro { max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--bk-zacht); }
.bk-intro:empty { display: none; }

/* Groep: een vraag met zijn antwoorden */
.bk-groep { display: flex; flex-direction: column; gap: 14px; }
.bk-groep:empty { display: none; }
.bk-sub { display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.3; font-weight: 700; }
.bk-sub small { font-size: 15px; font-weight: 500; color: var(--bk-zacht); }
.bk-nr { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bk-inkt); color: var(--white); font-size: 13px; font-weight: 700; }

/* ══════════ Velden ══════════ */
.bk-velden { display: grid; gap: 20px 16px; }
.bk-adres-velden { grid-template-columns: 1.4fr 1fr 1fr; }
.bk-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-breed { grid-column: 1 / -1; }
.bk-veld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bk-veld > span { font-size: 14px; font-weight: 600; color: var(--bk-inkt); }
.bk-veld > span small { font-size: 13px; font-weight: 400; color: var(--bk-zacht); }
.bk-veld input, .bk-veld select, .bk-veld textarea {
    width: 100%; min-height: 52px; padding: 0 16px;
    border: 1.5px solid var(--bk-lijn-sterk); border-radius: 14px; background: var(--white);
    font-size: 16px; color: var(--bk-inkt);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bk-veld input::placeholder, .bk-veld textarea::placeholder { color: #9AA8A3; }
.bk-veld textarea { padding: 14px 16px; line-height: 1.5; resize: vertical; }
.bk-veld select {
    appearance: none; padding-right: 44px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2366756F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.bk-veld input:hover, .bk-veld select:hover, .bk-veld textarea:hover { border-color: #AEBDB7; }
.bk-veld input:focus, .bk-veld select:focus, .bk-veld textarea:focus { outline: none; border-color: var(--bk-groen); box-shadow: var(--bk-ring); }
.bk-veld.fout input, .bk-veld.fout textarea { border-color: var(--danger-500); }
.bk-veld-fout { font-size: 13.5px; font-weight: 600; color: var(--danger-600); }
.bk-veld-fout:empty { display: none; }

/* Adres: wat we vonden (staat tussen de velden en het vinkje) */
.bk-adres-uit:empty { display: none; }
.bk-adres { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.bk-adres > i { flex-shrink: 0; font-size: 22px; }
.bk-adres span { display: flex; flex-direction: column; gap: 2px; }
.bk-adres small { font-size: 14px; }
.bk-adres-laden { align-items: center; background: var(--bk-vlak); color: var(--bk-zacht); }
.bk-adres-ok { background: var(--bk-groen-zacht); color: var(--bk-groen-donker); }
.bk-adres-ok strong { color: var(--bk-inkt); }
.bk-adres-nee { background: #FEF3C7; color: #92400E; }
.bk-adres-fout { background: #FEE2E2; color: #991B1B; }


/* ══════════ Keuzekaarten ══════════ */
.bk-keuzes { display: grid; gap: 12px; }
.bk-keuzes-klein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-keuze { position: relative; display: block; cursor: pointer; }
.bk-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.bk-keuze-kaart {
    display: flex; align-items: center; gap: 16px; height: 100%; padding: 18px 20px;
    border: 1.5px solid var(--bk-lijn-sterk); border-radius: 18px; background: var(--white);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bk-keuze:hover .bk-keuze-kaart { border-color: #AEBDB7; }
.bk-keuze input:checked + .bk-keuze-kaart { border-color: var(--bk-groen); background: var(--bk-groen-zacht); box-shadow: 0 0 0 1px var(--bk-groen); }
.bk-keuze input:focus-visible + .bk-keuze-kaart { box-shadow: var(--bk-ring); }
.bk-keuze-icoon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bk-vlak); color: var(--bk-tekst); font-size: 24px; }
.bk-keuze input:checked + .bk-keuze-kaart .bk-keuze-icoon { background: var(--white); color: var(--bk-groen-donker); }
.bk-keuze-tekst { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-keuze-tekst strong { font-size: 16px; font-weight: 700; color: var(--bk-inkt); }
.bk-keuze-tekst small { font-size: 14px; line-height: 1.45; color: var(--bk-zacht); }
.bk-keuze-prijs { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: var(--bk-vlak); font-size: 14px; font-weight: 700; color: var(--bk-inkt); font-variant-numeric: tabular-nums; }
.bk-keuze-vink { flex-shrink: 0; font-size: 22px; color: var(--bk-lijn-sterk); }
.bk-keuze input:checked + .bk-keuze-kaart .bk-keuze-vink { color: var(--bk-groen); }
.bk-keuzes-klein .bk-keuze-kaart { align-items: flex-start; gap: 12px; padding: 16px; }
.bk-keuzes-klein .bk-keuze-icoon { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
.bk-keuzes-klein .bk-keuze-vink { display: none; }
.bk-keuze input[value="beton"]:checked + .bk-keuze-kaart { border-color: #D97706; background: #FFFBEB; box-shadow: 0 0 0 1px #D97706; }

/* Pillen: korte antwoorden */
.bk-pillen { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-pillen-stapel { flex-direction: column; }
.bk-pil { position: relative; cursor: pointer; }
.bk-pil input { position: absolute; opacity: 0; pointer-events: none; }
.bk-pil span {
    display: flex; align-items: center; min-height: 48px; padding: 0 22px;
    border: 1.5px solid var(--bk-lijn-sterk); border-radius: 14px; background: var(--white);
    font-size: 15.5px; font-weight: 600; color: var(--bk-inkt); transition: border-color 0.15s, background 0.15s;
}
.bk-pillen-stapel .bk-pil span { width: 100%; }
.bk-pil:hover span { border-color: #AEBDB7; }
.bk-pil input:checked + span { border-color: var(--bk-groen); background: var(--bk-groen-zacht); color: var(--bk-groen-donker); box-shadow: 0 0 0 1px var(--bk-groen); }
.bk-pil input:focus-visible + span { box-shadow: var(--bk-ring); }

/* ══════════ Blokken (een vraag met uitleg) ══════════ */
.bk-blok { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--bk-lijn); border-radius: 20px; background: var(--white); }
.bk-blok h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.bk-blok > p, .bk-blok-kop p { font-size: 15px; line-height: 1.6; color: var(--bk-zacht); }
.bk-blok-kop { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bk-blok-kop > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.bk-noot { padding: 12px 14px; border-radius: 12px; background: var(--bk-vlak); font-size: 14.5px; color: var(--bk-tekst); }
.bk-noot strong { color: var(--bk-inkt); }
#bk-graaf { display: flex; flex-direction: column; gap: 24px; padding-top: 20px; border-top: 1px solid var(--bk-lijn); }

.bk-teller { flex-shrink: 0; display: flex; align-items: center; border: 1.5px solid var(--bk-lijn-sterk); border-radius: 14px; background: var(--white); overflow: hidden; }
.bk-teller button { display: flex; align-items: center; justify-content: center; width: 50px; height: 52px; border: 0; background: var(--white); color: var(--bk-tekst); font-size: 20px; cursor: pointer; }
.bk-teller button:hover:not(:disabled) { background: var(--bk-vlak); color: var(--bk-inkt); }
.bk-teller button:disabled { color: var(--bk-lijn-sterk); cursor: default; }
.bk-teller output { min-width: 72px; text-align: center; font-size: 19px; font-weight: 700; color: var(--bk-inkt); font-variant-numeric: tabular-nums; }

/* Schets van de kabelroute */
.bk-schets { padding: 16px; border: 1px solid var(--bk-lijn); border-radius: 20px; background: var(--bk-vlak); }
.bk-schets svg { display: block; width: 100%; height: auto; }
.bk-schets .s-lucht { fill: #EEF5F9; }
.bk-schets .s-grond { fill: #E4EFE0; }
.bk-schets .s-huis { fill: var(--white); stroke: #B9C6C1; stroke-width: 2; }
.bk-schets .s-muur { fill: #B9C6C1; }
.bk-schets .s-kruip { fill: #EFE9DC; }
.bk-schets .s-vloer { fill: none; stroke: #B9C6C1; stroke-width: 3; }
.bk-schets .s-kruip-label { font-size: 11px; fill: #7A6A50; }
.bk-schets .s-kast { fill: var(--bk-inkt); }
.bk-schets .s-bliksem { fill: #F5B301; }
.bk-schets .s-binnen { fill: none; stroke: var(--bk-groen); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bk-schets .s-graaf { fill: none; stroke: #D97706; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 7; }
.bk-schets .s-paal { fill: #56645F; }
.bk-schets .s-lader { fill: var(--bk-groen-donker); }
.bk-schets .s-label { font: 600 12px var(--bk-letter); fill: var(--bk-tekst); }
.bk-schets .s-maat { font: 700 13px var(--bk-letter); }
.bk-schets .s-maat-binnen { fill: var(--bk-groen-donker); }
.bk-schets .s-maat-graaf { fill: #B45309; }

/* Uitleg (inklapbaar) */
.bk-uitleg { border-radius: 14px; background: var(--bk-vlak); }
.bk-uitleg summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 15px; font-weight: 700; color: var(--bk-groen-donker); cursor: pointer; list-style: none; }
.bk-uitleg summary::-webkit-details-marker { display: none; }
.bk-uitleg summary::before { content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--white); font-weight: 800; }
.bk-uitleg[open] summary::before { content: '–'; }
.bk-uitleg ul, .bk-uitleg ol { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 18px 42px; font-size: 14.5px; line-height: 1.6; color: var(--bk-tekst); }
.bk-uitleg ol { list-style: decimal; }
.bk-uitleg ul { list-style: disc; }
.bk-uitleg strong { color: var(--bk-inkt); }

/* Load balancing */
.bk-lb { border-color: #CCE3F7; background: linear-gradient(180deg, #F3F8FD, var(--white) 55%); }
.bk-lb-kop { display: flex; align-items: center; gap: 14px; }
.bk-lb-kop > i { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #E6F1FB; color: #124A82; font-size: 24px; }
.bk-lb-kop > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bk-advies { padding: 3px 10px; border-radius: 999px; background: #124A82; color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.bk-lb-punten { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--white); border: 1px solid #DCEAF6; }
.bk-lb-punten li { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--bk-tekst); }
.bk-lb-punten li i { flex-shrink: 0; margin-top: 2px; font-size: 19px; color: #124A82; }
.bk-lb-punten strong { color: var(--bk-inkt); }
.bk-lb .bk-groep { padding-top: 6px; }

/* ══════════ Foto's ══════════ */
.bk-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bk-foto { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1.5px dashed var(--bk-lijn-sterk); border-radius: 20px; background: var(--bk-vlak); }
.bk-foto.gevuld { border-style: solid; border-color: var(--bk-groen); background: var(--white); }
.bk-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--bk-lijn); }
.bk-foto-icoon { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--white); color: var(--bk-lijn-sterk); font-size: 44px; }
.bk-foto-tekst { display: flex; flex-direction: column; gap: 4px; }
.bk-foto-tekst strong { font-size: 16px; font-weight: 700; color: var(--bk-inkt); }
.bk-foto-tekst small { font-size: 14px; line-height: 1.5; color: var(--bk-zacht); }
.bk-foto-kies { width: 100%; cursor: pointer; }
/* Foto maken (camera) + Uit galerij naast elkaar (2026-09-21): nieuwere Android toont bij een
   gewone bestandskeuze alleen de galerij, dus de camera krijgt een eigen knop (capture).
   Op een computer (muis) heeft die knop geen zin: dan alleen "Uit galerij". */
.bk-foto-knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-foto-knoppen .bk-knop { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
    .bk-alleen-touch { display: none !important; }
    .bk-foto-knoppen { grid-template-columns: 1fr; }
}
.bk-foto-weg {
    position: absolute; top: 24px; right: 24px; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(15, 27, 23, 0.72); color: var(--white); font-size: 17px; cursor: pointer;
}
.bk-extra { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--bk-lijn); }
.bk-extra h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 17px; font-weight: 700; }
.bk-extra h3 small { font-size: 14px; font-weight: 500; color: var(--bk-zacht); }
.bk-extra-lijst { display: flex; flex-wrap: wrap; gap: 12px; }
.bk-extra-foto { position: relative; width: 104px; height: 104px; }
.bk-extra-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.bk-extra-foto .bk-foto-weg { top: 6px; right: 6px; width: 28px; height: 28px; font-size: 14px; }
.bk-extra-erbij {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 104px; height: 104px; border: 1.5px dashed var(--bk-lijn-sterk); border-radius: 14px; background: var(--white);
    color: var(--bk-zacht); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.bk-extra-erbij i { font-size: 24px; }
.bk-extra-erbij:hover { border-color: var(--bk-groen); color: var(--bk-groen-donker); }

/* ══════════ Moment ══════════ */
.bk-dagen { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.bk-dag {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 68px; padding: 12px 0; border: 1.5px solid var(--bk-lijn-sterk); border-radius: 16px; background: var(--white); color: var(--bk-inkt); cursor: pointer;
}
.bk-dag span { font-size: 12.5px; font-weight: 600; color: var(--bk-zacht); text-transform: capitalize; }
.bk-dag strong { font-size: 21px; line-height: 1.2; font-weight: 800; }
.bk-dag small { font-size: 12px; color: var(--bk-zacht); }
.bk-dag:hover:not(:disabled) { border-color: #AEBDB7; }
.bk-dag.actief { border-color: var(--bk-groen); background: var(--bk-groen); color: var(--white); }
.bk-dag.actief span, .bk-dag.actief small { color: rgba(255, 255, 255, 0.85); }
.bk-dag:disabled { opacity: 0.4; cursor: default; background: var(--bk-vlak); }
.bk-dag-meer { justify-content: center; color: var(--bk-zacht); }
.bk-dag-meer i { font-size: 22px; }

.bk-tijden { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.bk-tijd { height: 48px; border: 1.5px solid var(--bk-lijn-sterk); border-radius: 14px; background: var(--white); font-size: 16px; font-weight: 700; color: var(--bk-inkt); cursor: pointer; font-variant-numeric: tabular-nums; }
.bk-tijd:hover { border-color: #AEBDB7; }
.bk-tijd.actief { border-color: var(--bk-groen); background: var(--bk-groen); color: var(--white); }

.bk-installateurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bk-inst { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--bk-lijn-sterk); border-radius: 18px; background: var(--white); text-align: left; cursor: pointer; }
.bk-inst:hover { border-color: #AEBDB7; }
.bk-inst.actief { border-color: var(--bk-groen); background: var(--bk-groen-zacht); box-shadow: 0 0 0 1px var(--bk-groen); }
.bk-inst .bk-keuze-vink { margin-left: auto; }
.bk-inst.actief .bk-keuze-vink { color: var(--bk-groen); }
.bk-inst-foto { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: var(--bk-groen-zacht); color: var(--bk-groen-donker); font-size: 15px; font-weight: 800; }
.bk-inst-foto img { width: 100%; height: 100%; object-fit: cover; }
.bk-inst-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-inst-tekst strong { font-size: 16px; font-weight: 700; color: var(--bk-inkt); overflow-wrap: anywhere; }
.bk-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--bk-tekst); }
.bk-rating small { font-weight: 500; color: var(--bk-zacht); }
.bk-sterren { display: inline-flex; align-items: center; gap: 1px; color: #F5B301; }
.bk-ster.leeg { color: #D8DEDB; }
.bk-nieuw { font-size: 13px; color: var(--bk-zacht); }
/* Diploma's en certificaten: kleine labels, zodat de kaart compact blijft */
.bk-inst-papieren { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.bk-papier {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    padding: 3px 9px 3px 7px; border-radius: 999px;
    background: var(--bk-vlak); border: 1px solid var(--bk-lijn);
    font-size: 12.5px; font-weight: 600; color: var(--bk-tekst); white-space: nowrap;
}
.bk-papier i { font-size: 14px; color: var(--bk-groen-donker); }
.bk-inst { align-items: flex-start; padding: 12px 14px; }
.bk-inst .bk-keuze-vink { align-self: center; }
.bk-inst-foto { width: 42px; height: 42px; font-size: 14px; }
.bk-leeg-tekst { padding: 16px 18px; border-radius: 14px; background: var(--bk-vlak); font-size: 15px; line-height: 1.55; color: var(--bk-tekst); }

.bk-skelet { display: block; border-radius: 14px; background: linear-gradient(90deg, var(--bk-lijn), var(--bk-vlak), var(--bk-lijn)); background-size: 200% 100%; animation: bk-glans 1.2s linear infinite; }
.bk-skelet-dagen { height: 84px; }
.bk-skelet-tijden { height: 108px; }
@keyframes bk-glans { to { background-position: -200% 0; } }

/* ══════════ Gegevens ══════════ */
.bk-privacy { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bk-zacht); }

/* ══════════ Controleren en betalen ══════════ */
.bk-overzicht { border: 1px solid var(--bk-lijn); border-radius: 20px; overflow: hidden; }
.bk-ov-rij { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--bk-lijn); }
.bk-ov-rij:first-child { border-top: 0; }
.bk-ov-rij > i { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bk-groen-zacht); font-size: 19px; color: var(--bk-groen-donker); }
.bk-ov-rij > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-ov-rij small { font-size: 13px; font-weight: 600; color: var(--bk-zacht); }
.bk-ov-rij strong { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--bk-inkt); overflow-wrap: anywhere; }
.bk-ov-rij strong span { display: block; margin-top: 2px; font-weight: 400; font-size: 14.5px; color: var(--bk-zacht); }
.bk-link { flex-shrink: 0; padding: 6px 10px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 700; color: var(--bk-groen-donker); cursor: pointer; }
.bk-link:hover { background: var(--bk-groen-zacht); }
/* Betaalmethoden alleen ter informatie (2026-09-21): de klant kiest bij Mollie. Logo's in /shared/betaalmethoden/.
   Keuze gebruiker: alleen de logo's, samen in één zacht vlak (zelfde kleur als "Dit werk duurt
   ongeveer …", .bk-sam-duur) — geen kader per logo, geen tekst. De naam staat er wel, maar alleen
   voor schermlezers (en als tooltip). Elk logo houdt zijn eigen vorm; alleen de hoogte ligt vast. */
/* Kortingscode (migration 052) */
.bk-korting { gap: 10px; }
.bk-korting-invoer { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bk-korting-invoer .bk-veld { flex: 1 1 220px; margin: 0; }
.bk-korting-invoer input { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.bk-korting-invoer .bk-knop { flex-shrink: 0; height: 52px; }
.bk-korting-hint { color: var(--bk-zacht); font-size: 14px; }
.bk-korting-uit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bk-groen-zacht); font-size: 15px; color: var(--bk-inkt); }
.bk-korting-vast { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.bk-korting-vast i { flex-shrink: 0; font-size: 19px; color: var(--bk-groen-donker); }

.bk-betaalkeuze { gap: 12px; }
.bk-methoden { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0; padding: 16px 20px; list-style: none; border-radius: 14px; background: var(--bk-vlak); }
.bk-methode { display: flex; align-items: center; }
.bk-methode-logo { display: flex; align-items: center; gap: 5px; height: 28px; }
.bk-methode-logo img { display: block; width: auto; height: 28px; max-width: 90px; object-fit: contain; }
/* Creditcard: Visa + Mastercard naast elkaar, optisch even groot (2026-09-21) */
.bk-methode-logo img:has(+ img) { height: 13px; }   /* Visa: alleen het woordmerk */
.bk-methode-logo img + img { height: 24px; }         /* Mastercard: met de cirkels */
.bk-methode-naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) {
    .bk-methoden { gap: 14px 18px; padding: 14px 16px; }
}

.bk-betaal-veilig {
    display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
    border-radius: 14px; background: var(--bk-vlak);
    font-size: 14px; line-height: 1.55; color: var(--bk-zacht);
}
.bk-betaal-veilig i { flex-shrink: 0; margin-top: 2px; font-size: 19px; color: var(--bk-groen-donker); }
.bk-betaal-veilig strong { color: var(--bk-inkt); }
#bk-turnstile:empty { display: none; }

/* ══════════ Meldingen ══════════ */
.bk-melding { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 16px; font-size: 15px; line-height: 1.55; }
.bk-melding > i { flex-shrink: 0; margin-top: 1px; font-size: 21px; }
.bk-melding-rood { background: #FEE2E2; color: #991B1B; }
.bk-melding-oranje { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.bk-melding-blauw { background: #E6F1FB; color: #124A82; }
.bk-melding a { color: inherit; font-weight: 700; }
.bk-fout { padding: 14px 16px; border-radius: 14px; background: #FEE2E2; color: #991B1B; font-size: 15px; font-weight: 600; line-height: 1.5; }

/* ══════════ Knoppen en navigatie ══════════ */
.bk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--bk-lijn); }
.bk-knop {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 14px;
    font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bk .bk-knop-primair { background: var(--bk-groen); color: var(--white); box-shadow: 0 10px 24px -14px rgba(29, 158, 117, 0.9); }
.bk .bk-knop-primair:hover { background: var(--bk-groen-donker); }
.bk .bk-knop-primair:focus-visible { outline: none; box-shadow: var(--bk-ring); }
.bk .bk-knop-primair:disabled { opacity: 0.6; cursor: wait; }
.bk .bk-knop-stil { padding: 0 16px; background: transparent; color: var(--bk-tekst); }
.bk .bk-knop-stil:hover { background: var(--bk-vlak); color: var(--bk-inkt); }
.bk .bk-knop-licht { background: var(--white); border-color: var(--bk-lijn-sterk); color: var(--bk-inkt); }
.bk .bk-knop-licht:hover { border-color: var(--bk-groen); color: var(--bk-groen-donker); }
.bk-knop-betaal { min-width: 240px; }

/* ══════════ Jouw installatie (rechts) ══════════ */
.bk-samenvatting { display: flex; flex-direction: column; gap: 20px; padding: 28px; }
.bk-samenvatting h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.bk-sam-gegevens { display: flex; flex-direction: column; gap: 10px; }
.bk-sam-gegevens:empty { display: none; }
.bk-sam-gegevens div { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--bk-tekst); }
.bk-sam-gegevens dt { flex-shrink: 0; margin-top: 1px; color: var(--bk-groen-donker); font-size: 17px; }
.bk-sam-gegevens dd { min-width: 0; overflow-wrap: anywhere; }
.bk-sam-prijs { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--bk-tekst); font-variant-numeric: tabular-nums; }
.bk-sam-prijs td { padding: 12px 0; border-top: 1px solid var(--bk-lijn); vertical-align: top; }
.bk-sam-prijs tr:first-child td { border-top: 0; padding-top: 0; }
.bk-sam-prijs td:last-child { padding-left: 16px; text-align: right; white-space: nowrap; color: var(--bk-inkt); font-weight: 600; }
.bk-sam-korting td { color: var(--bk-groen-donker) !important; font-weight: 700; }
.bk-sam-totaal td { padding-top: 16px !important; border-top: 2px solid var(--bk-inkt) !important; font-size: 22px; font-weight: 800; color: var(--bk-inkt); }
.bk-sam-totaal td:last-child { font-weight: 800; }
.bk-sam-totaal small { display: block; font-size: 13px; font-weight: 500; color: var(--bk-zacht); }
.bk-sam-duur { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--bk-vlak); font-size: 14.5px; line-height: 1.5; color: var(--bk-tekst); }
.bk-sam-duur i { flex-shrink: 0; margin-top: 2px; font-size: 17px; color: var(--bk-groen-donker); }
.bk-sam-lijsten { padding-top: 18px; border-top: 1px solid var(--bk-lijn); }
.bk-sam-lijsten summary { font-size: 15px; font-weight: 700; color: var(--bk-inkt); cursor: pointer; }
.bk-sam-lijsten ul { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.bk-sam-lijsten ul + ul { padding-top: 14px; border-top: 1px dashed var(--bk-lijn); }
.bk-sam-lijsten li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--bk-tekst); }
.bk-sam-ja i { flex-shrink: 0; margin-top: 2px; color: var(--bk-groen); }
.bk-sam-nee i { flex-shrink: 0; margin-top: 2px; color: #9AA8A3; }

/* ══════════ Belofte van de klant ══════════
   Bewust een ander soort blok dan de rest van het formulier: geen strak
   rechthoekje maar een "ondertekening" — zandkleurig papier, stippellijn,
   zegel links. Zo ziet de klant dat hij hier iets toezegt. */
.bk-eed {
    position: relative; display: flex; align-items: center; gap: 16px;
    padding: 18px 22px 18px 18px;
    border: 2px dashed #D9CDB4; border-radius: 4px 20px 20px 4px;
    background: linear-gradient(180deg, #FDFBF4 0%, #FAF6EA 100%);
    cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bk-eed::before {
    content: ''; position: absolute; inset: -2px auto -2px -2px; width: 6px;
    border-radius: 4px 0 0 4px; background: #D9CDB4; transition: background 0.15s;
}
.bk-eed:hover { border-color: #C9B893; }
.bk-eed input { position: absolute; opacity: 0; width: 0; height: 0; }
.bk-eed-zegel {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: #F2E9D4; color: #8A7A55; font-size: 24px;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.bk-eed-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bk-eed-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #A3915F; }
.bk-eed-tekst strong { font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--bk-inkt); }
.bk-eed-tekst small { font-size: 14px; line-height: 1.5; color: #6E6350; }
.bk-eed-vink {
    flex-shrink: 0; margin-left: auto; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 2px solid #D9CDB4; border-radius: 50%;
    background: var(--white); color: transparent; font-size: 18px;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.bk-eed:has(input:checked) { border-color: var(--bk-groen); border-style: solid; background: var(--bk-groen-zacht); }
.bk-eed:has(input:checked)::before { background: var(--bk-groen); }
.bk-eed:has(input:checked) .bk-eed-zegel { background: var(--bk-groen); color: var(--white); transform: rotate(-6deg); }
.bk-eed:has(input:checked) .bk-eed-label { color: var(--bk-groen-donker); }
.bk-eed:has(input:checked) .bk-eed-tekst small { color: var(--bk-tekst); }
.bk-eed:has(input:checked) .bk-eed-vink { border-color: var(--bk-groen); background: var(--bk-groen); color: var(--white); transform: scale(1.05); }
.bk-eed:has(input:focus-visible) { box-shadow: var(--bk-ring); }
@media (prefers-reduced-motion: reduce) {
    .bk-eed, .bk-eed-zegel, .bk-eed-vink, .bk-eed::before { transition: none; }
    .bk-eed:has(input:checked) .bk-eed-zegel { transform: none; }
}
#bk-kruip-let-op { display: flex; flex-direction: column; gap: 14px; }

/* Keuze die niet kan (paal = altijd graven) */
.bk-pil.uit span { opacity: 0.45; cursor: not-allowed; }

/* ══════════ Losse melding (bv. "je moment is vervallen") ══════════ */
.bk-melding-los {
    position: fixed; left: 50%; bottom: 24px; z-index: 950; transform: translateX(-50%);
    display: flex; align-items: flex-start; gap: 10px;
    width: min(520px, calc(100% - 32px)); padding: 14px 18px;
    border-radius: 16px; background: var(--bk-inkt); color: var(--white);
    font-family: var(--bk-letter); font-size: 15px; line-height: 1.5;
    box-shadow: 0 18px 40px -16px rgba(15, 27, 23, 0.6);
}
.bk-melding-los i { flex-shrink: 0; margin-top: 2px; font-size: 19px; }

/* ══════════ Balk onderaan (telefoon) en laadscherm ══════════ */
.bk-balk { display: none; }
.bk-zij-laag { display: none; }
.bk-zij-sluit { display: none; }
.bk-laag { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 27, 23, 0.55); backdrop-filter: blur(3px); }
.bk-laag-inhoud { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 320px; padding: 32px; border-radius: 22px; background: var(--white); text-align: center; }
.bk-laag-inhoud strong { font-size: 18px; color: var(--bk-inkt); }
.bk-laag-inhoud small { font-size: 15px; color: var(--bk-zacht); }
.bk-draai { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--bk-lijn); border-top-color: var(--bk-groen); border-radius: 50%; animation: bk-draai 0.8s linear infinite; }
.bk-laag-inhoud .bk-draai { width: 38px; height: 38px; margin-bottom: 8px; }
@keyframes bk-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bk-draai, .bk-skelet { animation: none; } .bk-voortgang li.nu button::before { animation: none; } .bk-zij { transition: none; } }

/* ══════════ Niet te boeken ══════════ */
.bk-leeg { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 560px; margin: 40px auto 0; padding: 56px 32px; text-align: center; }
.bk-leeg > i { font-size: 44px; color: var(--bk-lijn-sterk); }
.bk-leeg h1 { font-size: 26px; font-weight: 800; }
.bk-leeg p { font-size: 16px; line-height: 1.6; color: var(--bk-zacht); }

/* ══════════ Kleiner scherm ══════════ */
@media (max-width: 1080px) {
}
@media (max-width: 960px) {
    .bk { padding-bottom: 120px; }
    .bk-grid { grid-template-columns: 1fr; gap: 24px; }

    /* De samenvatting staat niet meer in de pagina, maar komt van onderen op
       zodra je op "Bekijk" tikt (knop in de balk onderaan). */
    .bk-zij {
        /* top: auto — anders bleef top: 88px van het grote scherm staan en rekte het paneel
           zich uit tot schermhoogte; nu is het zo hoog als de inhoud (hooguit 82vh) */
        position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 960;
        touch-action: pan-y;   /* omlaag slepen sluit het paneel (site-boeken.js) */
        max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 0 0; background: var(--white);
        box-shadow: 0 -20px 50px -18px rgba(15, 27, 23, 0.4);
        transform: translateY(101%); transition: transform 0.25s ease;
        visibility: hidden;
    }
    .bk-zij.open { transform: translateY(0); visibility: visible; }
    .bk-zij::before {
        content: ''; display: block; width: 44px; height: 4px; margin: 10px auto 2px;
        border-radius: 999px; background: var(--bk-lijn-sterk);
    }
    .bk-zij .bk-samenvatting { border: 0; box-shadow: none; padding: 12px 4px 4px; }
    .bk-zij-sluit {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: 100%; min-height: 48px; margin-top: 8px;
        border: 1.5px solid var(--bk-lijn-sterk); border-radius: 14px; background: var(--white);
        font-family: var(--bk-letter); font-size: 16px; font-weight: 700; color: var(--bk-tekst); cursor: pointer;
    }
    .bk-zij-laag {
        display: block; position: fixed; inset: 0; z-index: 950;
        background: rgba(15, 27, 23, 0.45);
    }
    body.bk-vast { overflow: hidden; }
    .bk-balk {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--white); border-top: 1px solid var(--bk-lijn); box-shadow: 0 -10px 30px -14px rgba(15, 27, 23, 0.25);
        font-family: var(--bk-letter);
    }
    .bk-balk div { display: flex; flex-direction: column; }
    .bk-balk small { font-size: 12.5px; color: var(--bk-zacht); }
    .bk-balk strong { font-size: 21px; font-weight: 800; color: var(--bk-inkt); font-variant-numeric: tabular-nums; }
    .bk-balk .bk-knop { min-height: 44px; }
}
@media (max-width: 640px) {
    .bk { padding-top: 24px; font-size: 15.5px; }
    .bk-wrap { padding: 0 16px; }
    .bk-kop > p { font-size: 16px; }
    .bk-voortgang-wrap { padding: 12px 14px 8px; }
    .bk-voortgang { gap: 4px; }
    .bk-stap { gap: 26px; padding: 26px 20px; border-radius: 20px; }
    .bk-stap-kop h2 { font-size: 24px; }
    .bk-adres-velden { grid-template-columns: 1fr 1fr; }
    .bk-adres-velden .bk-veld:first-child { grid-column: 1 / -1; }
    .bk-twee, .bk-keuzes-klein, .bk-fotos, .bk-installateurs { grid-template-columns: 1fr; }
    .bk-blok { padding: 18px; }
    .bk-blok-kop { flex-direction: column; align-items: stretch; }
    .bk-teller { justify-content: space-between; }
    .bk-teller output { flex: 1; }
    .bk-keuze-kaart { padding: 16px; gap: 14px; }
    .bk-nav { flex-direction: column-reverse; align-items: stretch; }
    .bk-nav .bk-knop { width: 100%; }
    .bk-nav > span:empty { display: none; }
    .bk-knop-betaal { min-width: 0; }
    .bk-ov-rij { padding: 16px; gap: 12px; }
    .bk-samenvatting { padding: 22px 20px; }
}

/* ── Tikfout in het e-mailadres: "Bedoel je …?" (2026-09-27, site-boeken.js) ──
   Geen foutmelding maar een voorstel: daarom niet rood maar in het groen van de pagina. */
.bk-veld-tip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bk-zacht);
}
.bk-veld-tip .bk-link { padding: 2px 6px; font-size: 13.5px; }

/* ── Het e-mailadres nog één keer in het overzicht (2026-09-27) ── */
.bk-ov-mail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px dashed var(--bk-lijn-sterk);
    border-radius: 14px;
    background: var(--bk-vlak);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--bk-tekst);
}
.bk-ov-mail > i { font-size: 18px; color: var(--bk-groen-donker); }
.bk-ov-mail span { flex: 1 1 220px; }
.bk-ov-mail strong { color: var(--bk-inkt); word-break: break-all; }