/* kennismaken.css, spoor mix: sectie 11, "Klaar om je handwerk over te dragen?", in het ontwerp stof in zonlicht
   (gekozen door Huub op 21 oktober 2026; het ontwerp staat in ../kennismaken-stof/). Komt na stijl.css en gebruikt
   daaruit de kleuren, de letters, .label, .label-xs, .kop, .knop, .pijl, .prijsregel, .glas en .korrel. Alles wat nieuw
   is, heet st-. Nergens cursief, geen kapitalen, geen mono. */

/* De tilhoogte van een ding: 1 is opgetild (bij binnenkomst), 0 ligt het op het papier. Geregistreerd, zodat de
   schaduw meeloopt met de landing. */
@property --til { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --gloei { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ============ De sectie ============ */
/* De zon staat op (--zx, --zy) met straal --zr; kennismaken.js meet ze uit de kop. Zonder JavaScript gelden deze waarden. */
.st-sectie { --zx: 50%; --zy: 400px; --zr: 300px; --ux: 50%; --uy: 290px; --urx: 336px; --ury: 236px; --bx: 50%; --by: 759px; --brx: 268px; --bry: 34px; --marge: 22px;
  position: relative; z-index: 7; isolation: isolate; overflow: clip; height: clamp(720px, 100svh, 820px); background: var(--papier-warm); }

/* Het licht, achter alles: de wijde gloed, de stralen over het papier, de zon van tekens, de sluier van licht over
   het hart van de zon (je kijkt niet in de zon: het midden is licht, de tekens staan aan de rand), en korrel. */
/* Sinds 25 oktober 2026 (15:45) loopt het licht onderaan ook uit in het papier (de laatste 170 px), zodat de lichte voet er
   zonder naad op aansluit (Huub: "kijk nog dat kleurverschil"); de dingen en de teksten staan buiten deze laag en blijven vol. */
.st-achter { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 170px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 170px), transparent 100%); }
.st-licht { position: absolute; left: var(--zx); top: var(--zy); width: calc(var(--zr) * 5.4); height: calc(var(--zr) * 5.4); margin: calc(var(--zr) * -2.7) 0 0 calc(var(--zr) * -2.7); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 247, 228, 1) 0%, rgba(255, 239, 204, 0.96) 13%, rgba(255, 228, 172, 0.62) 25%, rgba(255, 220, 154, 0.32) 39%, rgba(255, 217, 148, 0.13) 57%, rgba(255, 217, 148, 0) 80%);
  transition: transform 1.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 1.9s ease; }
.st-stralen { position: absolute; left: var(--zx); top: var(--zy); width: 3200px; height: 3200px; margin: -1600px 0 0 -1600px; opacity: 0.62; filter: blur(3px);
  background: var(--stralen, repeating-conic-gradient(from 4deg, rgba(255, 236, 190, 0.9) 0deg 2.2deg, rgba(255, 236, 190, 0) 2.2deg 13deg));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--zr) * 0.96), #000 calc(var(--zr) * 1.18), rgba(0, 0, 0, 0.42) calc(var(--zr) * 2.1), transparent calc(var(--zr) * 3.3));
  mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--zr) * 0.96), #000 calc(var(--zr) * 1.18), rgba(0, 0, 0, 0.42) calc(var(--zr) * 2.1), transparent calc(var(--zr) * 3.3));
  transition: opacity 2.2s ease; }
.st-zon { position: absolute; inset: 0; --zon-cx: 0.5; --zon-rmax: 9; --zon-demping: 0 0.14; opacity: 0.8; mix-blend-mode: multiply; transition: opacity 1.6s ease;
  /* Achter de tekst en de bronregel staan geen tekens: twee zachte ellipsen, samen uitgespaard. De derde laag dempt
     de rand die zon.js tekent (een ring van dollartekens, vlak naast het woord gratis) tot bijna niets: de zon krijgt
     haar vorm van het licht en van de krans van tekens daarbuiten. Op de helft bleven de dollartekens leesbaar. */
  -webkit-mask-image: radial-gradient(var(--urx) var(--ury) at var(--ux) var(--uy), transparent 0%, transparent 60%, rgba(0, 0, 0, 0.5) 82%, #000 100%), radial-gradient(var(--brx) var(--bry) at var(--bx) var(--by), transparent 0%, transparent 50%, #000 100%), radial-gradient(circle at var(--zx) var(--zy-zon, var(--zy)), #000 calc(var(--zr) * 0.885), rgba(0, 0, 0, 0.04) calc(var(--zr) * 0.93), rgba(0, 0, 0, 0.04) calc(var(--zr) * 1.04), #000 calc(var(--zr) * 1.095));
  mask-image: radial-gradient(var(--urx) var(--ury) at var(--ux) var(--uy), transparent 0%, transparent 60%, rgba(0, 0, 0, 0.5) 82%, #000 100%), radial-gradient(var(--brx) var(--bry) at var(--bx) var(--by), transparent 0%, transparent 50%, #000 100%), radial-gradient(circle at var(--zx) var(--zy-zon, var(--zy)), #000 calc(var(--zr) * 0.885), rgba(0, 0, 0, 0.04) calc(var(--zr) * 0.93), rgba(0, 0, 0, 0.04) calc(var(--zr) * 1.04), #000 calc(var(--zr) * 1.095));
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.st-zon canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-sluier { position: absolute; left: var(--zx); top: var(--zy); width: calc(var(--zr) * 2.08); height: calc(var(--zr) * 2.08); margin: calc(var(--zr) * -1.04) 0 0 calc(var(--zr) * -1.04); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 252, 243, 0.97) 0%, rgba(255, 251, 240, 0.96) 66%, rgba(255, 249, 236, 0.94) 82%, rgba(255, 246, 228, 0.7) 88.5%, rgba(255, 243, 222, 0.24) 93%, rgba(255, 241, 216, 0) 97.5%);
  transition: opacity 1.6s ease, transform 0.6s ease; }
.st-korrel { opacity: 0.07; }

/* Bij binnenkomst komt het licht op; bij de klik wordt de zon even voller. */
.st-levend .st-sectie:not(.st-binnen) .st-licht { opacity: 0.35; transform: scale(0.86); }
.st-levend .st-sectie:not(.st-binnen) .st-stralen { opacity: 0; }
.st-levend .st-sectie:not(.st-binnen) .st-zon { opacity: 0.35; }
.st-sectie.st-vol .st-licht { transform: scale(1.08); transition-duration: 0.45s; }
/* Even voller: het licht in het hart wijkt, zodat de zon zich zichtbaar vult met tekens. */
.st-sectie.st-vol .st-sluier { opacity: 0.74; transition-duration: 0.45s; }
.st-sectie.st-vol .st-stralen { opacity: 0.85; transition-duration: 0.45s; }

/* ============ De dingen: papier en één scherm, met gewicht ============ */
/* Elk ding ligt op het papier: een contactschaduw, een korte en een lange schaduw die van de zon af valt (kennismaken.js
   zet --sx, --sy, --sb in het eigen assenstelsel van het ding, zodat de schaduw ook na het draaien van de zon af
   valt), en een warme gloed aan de kant van de zon (--gh, --ga). Zonder JavaScript gelden de standaardwaarden. */
.st-dingen { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.st-ding { --sx: -10px; --sy: 16px; --sb: 36px; --gh: 0.22; --ga: 90deg; --kx: 0px; --ky: 1px; --gloei: 0;
  position: absolute; left: clamp(var(--marge), calc(50% + var(--dx)), calc(100% - var(--b) - var(--marge))); top: var(--y, auto); bottom: var(--yb, auto); width: var(--b);
  transform: rotate(var(--r)); pointer-events: auto; color: var(--inkt); font-size: 12.5px; line-height: 1.35; font-variant-numeric: tabular-nums; cursor: default; outline-offset: 6px;
  transition: opacity 0.32s ease, --gloei 0.5s ease; }
.st-ding:focus-visible { outline: 2px solid var(--hemel); }
.st-ding p { margin: 0; }

.st-vel { padding: 14px 15px 15px; border-radius: 3px;
  background: linear-gradient(var(--ga), rgba(255, 214, 146, var(--gh)) 0%, rgba(255, 214, 146, 0) 64%), linear-gradient(174deg, #fffefb 0%, #fbf7ee 100%);
  box-shadow: inset 0 0 0 0.5px rgba(120, 92, 48, 0.16),
    var(--kx) var(--ky) 1.5px rgba(70, 48, 16, 0.2),
    calc(var(--sx) * (0.35 + var(--til))) calc(var(--sy) * (0.35 + var(--til)) + var(--til) * 10px) calc(var(--sb) * (0.32 + var(--til) * 0.6)) -6px rgba(70, 48, 16, calc(0.16 - var(--til) * 0.05)),
    calc(var(--sx) * (1 + var(--til))) calc(var(--sy) * (1 + var(--til)) + var(--til) * 24px) calc(var(--sb) * (1 + var(--til) * 0.7)) -12px rgba(84, 54, 14, calc(0.34 - var(--til) * 0.12)); }
/* Papier met korrel, een licht bovenrandje en een zachte welving naar de hoek van de zon af. */
.st-vel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.28 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23k)'/%3E%3C/svg%3E"); background-size: 120px 120px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95); }
/* Het licht op het ding: bij de muis, bij focus en als het zijn werk doet (--gloei, van 0 naar 1). */
.st-ding::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: var(--gloei);
  background: linear-gradient(var(--ga), rgba(255, 214, 140, 0.34) 0%, rgba(255, 232, 180, 0.1) 55%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 0 1px rgba(236, 168, 64, 0.32), 0 0 34px 2px rgba(255, 198, 104, 0.5); }
.st-ding:hover, .st-ding:focus-visible { --gloei: 1; }
.st-ding.st-in-licht { --gloei: var(--lichtkracht, 0.9); transition: opacity 0.32s ease, --gloei 0.45s ease; }
.st-vel:hover, .st-vel:focus-visible, .st-vel.st-in-licht { --gh: 0.5; }

/* Gedeelde regel: links wat, rechts het getal. */
.st-rij { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--leisteen); }
.st-rij > span:last-child { color: var(--inkt); font-weight: 500; white-space: nowrap; }

/* Het cv: een vel met een paperclip en een pasfoto (initialen, geen echte foto). */
.st-cv { --b: 204px; }
.st-clip { position: absolute; z-index: 3; top: -12px; left: 22px; width: 15px; height: 44px; transform: rotate(-6deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 44'%3E%3Cpath d='M5 33V10a2.6 2.6 0 0 1 5.2 0v25.5a4.6 4.6 0 0 1-9.2 0V7.5a6.5 6.5 0 0 1 13 0V31' fill='none' stroke='%23858fa0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(1px 1.5px 0.6px rgba(40, 30, 10, 0.28)); }
.st-cv-kop { display: flex; align-items: center; gap: 11px; padding-bottom: 10px; border-bottom: 1px solid rgba(11, 18, 32, 0.09); }
.st-cv-foto { flex: none; width: 40px; height: 48px; border-radius: 3px; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: #4f3f24; background: linear-gradient(165deg, #ebe0c9 0%, #d6c39d 100%); box-shadow: inset 0 0 0 1px rgba(120, 92, 48, 0.18); }
.st-cv-wie b { display: block; font-size: 15px; font-weight: 650; line-height: 1.2; letter-spacing: -0.005em; }
.st-cv-wie span { display: block; margin-top: 2px; font-size: 12px; color: var(--leisteen); }
.st-cv-plek { margin-top: 7px !important; font-size: 11.5px; color: var(--leisteen); }
.st-cv-sub { margin-top: 10px !important; font-size: 11.5px; font-weight: 650; color: var(--inkt); }
.st-cv-regel { font-size: 12px; color: var(--leisteen); line-height: 1.5; }
.st-ingepland { position: absolute; z-index: 3; top: -12px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 9px; border-radius: 6px; background: var(--blauw); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; transform: rotate(3deg); box-shadow: 0 8px 16px -8px rgba(37, 99, 235, 0.9), 0 1px 1px rgba(20, 40, 120, 0.25); }
.st-ingepland::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* Het rooster: een geprint weekrooster met één open dienst. */
.st-rooster { --b: 248px; }
.st-r-kop { display: flex; justify-content: space-between; align-items: baseline; }
.st-r-kop b { font-size: 15px; font-weight: 650; }
.st-r-kop span { font-size: 11.5px; color: var(--leisteen); }
.st-r-raster { margin-top: 10px; display: grid; grid-template-columns: 38px repeat(4, 1fr); gap: 4px; align-items: center; }
.st-r-dag { font-size: 11.5px; font-weight: 500; text-align: center; color: var(--leisteen); }
.st-r-dienst { font-size: 11.5px; color: var(--leisteen); }
.st-r-raster i { position: relative; height: 27px; border-radius: 5px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: #463b2c; background: #efe8da; box-shadow: inset 0 0 0 1px rgba(120, 92, 48, 0.08); }
.st-r-raster i.st-r-gat { background: transparent; box-shadow: none; }
.st-r-gat > span { grid-area: 1 / 1; }
.st-r-open { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 5px; border: 1.3px dashed rgba(71, 85, 105, 0.7); color: var(--leisteen); font-weight: 500; transition: opacity 0.4s ease; }
.st-r-fenna { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 5px; background: var(--tint); color: var(--blauw-diep); box-shadow: inset 0 0 0 1.3px var(--hemel); }

/* De factuur: een vel met een nietje en het stempel. */
.st-factuur { --b: 228px; }
.st-niet { position: absolute; z-index: 3; top: 10px; left: 9px; width: 20px; height: 3px; border-radius: 2px; transform: rotate(-36deg); background: linear-gradient(180deg, #d9dde3 0%, #8f97a4 100%); box-shadow: 0 1px 1px rgba(30, 20, 5, 0.3); }
.st-f-kop { display: flex; justify-content: space-between; align-items: baseline; }
.st-f-kop b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.st-f-kop span { font-size: 11.5px; color: var(--leisteen); }
.st-f-datum { margin: 1px 0 9px !important; padding-bottom: 8px; border-bottom: 1px solid rgba(11, 18, 32, 0.09); font-size: 11.5px; color: var(--leisteen); }
.st-f-totaal { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid rgba(11, 18, 32, 0.16); color: var(--inkt); font-weight: 600; }
.st-f-totaal > span:last-child { font-weight: 700; }
.st-factuur { padding-bottom: 50px; }
.st-stempel { position: absolute; z-index: 3; right: 16px; bottom: 13px; padding: 2px 11px 3px; border: 2px solid currentColor; border-radius: 7px; color: #1d4ed8; font-size: 16px; font-weight: 800; letter-spacing: 0.03em; line-height: 1.2; transform: rotate(-9deg); opacity: 0.9; mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='90' height='40' filter='url(%23s)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='90' height='40' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* Het appje: een telefoon in code, plat op het papier. */
.st-app { --b: 206px; border-radius: 34px; }
.st-tel { position: relative; padding: 6px; border-radius: 34px; background: linear-gradient(150deg, #262b35 0%, #11141a 46%, #07080b 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), inset 0 0 0 3px rgba(0, 0, 0, 0.55),
    var(--kx) calc(var(--ky) + 1px) 2px rgba(20, 14, 6, 0.4),
    calc(var(--sx) * (0.4 + var(--til))) calc(var(--sy) * (0.4 + var(--til)) + var(--til) * 10px) calc(var(--sb) * (0.34 + var(--til) * 0.6)) -6px rgba(40, 26, 8, 0.3),
    calc(var(--sx) * (1.1 + var(--til))) calc(var(--sy) * (1.1 + var(--til)) + var(--til) * 24px) calc(var(--sb) * (1.05 + var(--til) * 0.7)) -10px rgba(60, 38, 10, calc(0.46 - var(--til) * 0.14)); }
/* De rand aan de kant van de zon vangt licht. */
.st-tel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(var(--ga), rgba(255, 226, 170, 0.5) 0%, rgba(255, 226, 170, 0) 30%); mix-blend-mode: screen; }
.st-tel-scherm { position: relative; border-radius: 28px; overflow: hidden; padding: 8px 10px 14px; background: linear-gradient(180deg, #f6f2ea 0%, #efe9dd 100%); }
.st-tel-scherm::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 64px; height: 4px; margin-left: -32px; border-radius: 4px; background: rgba(11, 18, 32, 0.55); }
.st-tel-status { display: flex; align-items: center; justify-content: space-between; height: 20px; padding: 0 8px 0 12px; font-size: 11.5px; font-weight: 650; }
.st-tel-eiland { width: 56px; height: 17px; border-radius: 999px; background: #07080b; }
.st-tel-batterij { position: relative; width: 20px; height: 9.5px; border-radius: 2.5px; box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.55); }
.st-tel-batterij::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 11px; border-radius: 1px; background: var(--inkt); }
.st-tel-kop { display: flex; align-items: center; gap: 8px; margin: 9px 0 0 !important; padding: 0 2px 9px; border-bottom: 1px solid rgba(11, 18, 32, 0.08); }
.st-tel-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #2563eb, #1d4ed8); }
.st-tel-wie { min-width: 0; }
.st-tel-wie b { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.st-tel-wie span { display: block; font-size: 11.5px; color: var(--leisteen); line-height: 1.25; }
.st-chat { display: flex; flex-direction: column; gap: 7px; min-height: 196px; justify-content: flex-end; padding-top: 10px; }
.st-bel { position: relative; max-width: 90%; padding: 7px 10px 5px; border-radius: 4px 15px 15px 15px; background: #fff; font-size: 12.5px; line-height: 1.38; box-shadow: 0 1px 1.5px rgba(30, 22, 10, 0.12), 0 6px 14px -10px rgba(30, 22, 10, 0.3); }
.st-bel time { display: block; margin-top: 1px; text-align: right; font-size: 11.5px; color: var(--leisteen); }
.st-bel-uit { align-self: flex-end; border-radius: 15px 4px 15px 15px; background: var(--blauw); color: #fff; box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.95); }
.st-bel-uit time { color: #fff; }
/* Iemand typt: drie stippen, alleen terwijl het antwoord wordt geschreven. */
.st-typt { position: absolute; right: 10px; bottom: 18px; display: flex; gap: 4px; padding: 10px 12px; border-radius: 15px 4px 15px 15px; background: var(--blauw); opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.25s ease; }
.st-typt i { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0.55; }
.st-app.st-typend .st-typt { opacity: 1; transform: none; }
.st-app.st-typend .st-typt i { animation: st-stip 0.9s ease-in-out infinite; }
.st-app.st-typend .st-typt i:nth-child(2) { animation-delay: 0.15s; }
.st-app.st-typend .st-typt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes st-stip { 0%, 100% { opacity: 0.4; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
.st-app::before { background: none; }

/* De offerte: een vel uit de mail, in drieën gevouwen geweest. */
.st-offerte { --b: 226px;
  background: linear-gradient(var(--ga), rgba(255, 214, 146, var(--gh)) 0%, rgba(255, 214, 146, 0) 64%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) calc(33.3% - 2px), rgba(255, 255, 255, 0.9) calc(33.3% - 1px), rgba(120, 92, 48, 0.1) 33.3%, rgba(0, 0, 0, 0) calc(33.3% + 3px)),
    linear-gradient(180deg, rgba(0, 0, 0, 0) calc(66.6% - 2px), rgba(120, 92, 48, 0.09) calc(66.6% - 1px), rgba(255, 255, 255, 0.85) 66.6%, rgba(0, 0, 0, 0) calc(66.6% + 3px)),
    linear-gradient(176deg, #fffdf6 0%, #faf3e3 100%); }
.st-o-van { font-size: 11.5px; font-weight: 650; color: var(--blauw-diep); padding-bottom: 8px; border-bottom: 1.5px solid rgba(37, 99, 235, 0.35); }
.st-o-kop { display: flex; justify-content: space-between; align-items: center; margin-top: 9px !important; }
.st-o-kop b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.st-pil { padding: 2px 9px; border-radius: 999px; background: var(--tint); color: var(--blauw-diep); font-size: 11.5px; font-weight: 600; }
.st-o-wat { margin: 1px 0 10px !important; font-size: 12px; color: var(--leisteen); }
.st-o-totaal { margin-top: 7px !important; padding-top: 7px; border-top: 1px solid rgba(11, 18, 32, 0.16); color: var(--inkt); font-weight: 600; }
.st-o-som { font-weight: 700 !important; font-size: 13.5px; }

/* De agenda: een dagblad van een scheurkalender, met de perforatie bovenaan. */
.st-agenda { --b: 158px; padding: 0 0 12px; border-radius: 4px; }
.st-a-kop { position: relative; display: grid; justify-items: center; padding: 16px 10px 9px; border-bottom: 1px solid rgba(11, 18, 32, 0.09); }
.st-a-kop::before { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 3px; background: radial-gradient(circle, rgba(120, 92, 48, 0.32) 1.1px, transparent 1.4px) 0 0 / 7px 3px repeat-x; }
.st-a-kop span:first-child { font-size: 12.5px; font-weight: 600; color: var(--blauw-diep); }
.st-a-kop b { font-family: var(--kop); font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.03em; margin-top: 2px; }
.st-a-kop span:last-child { font-size: 11.5px; color: var(--leisteen); }
.st-a-uur { display: flex; align-items: center; height: 24px; margin: 0 12px !important; font-size: 11.5px; color: var(--leisteen); border-bottom: 1px dashed rgba(11, 18, 32, 0.1); }
.st-a-afspraak { display: flex; align-items: center; gap: 7px; margin: 5px 8px !important; padding: 6px 8px 6px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--blauw-diep); background: var(--tint); border: 1px solid transparent; box-shadow: inset 3px 0 0 var(--blauw); transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; }
.st-a-afspraak time { font-weight: 700; }
.st-a-afspraak span { flex: 1; font-weight: 500; }
.st-a-vink { width: 14px; height: 14px; fill: none; stroke: var(--blauw); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-a-vink path { stroke-dasharray: 14; stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s ease 0.25s; }

/* ============ Het werk in de dingen (alleen als de sectie leeft) ============ */
/* Vóór het werk staat wat er nog moet gebeuren; .st-af zet het gedaan werk erin. Zonder JavaScript, en in headless
   opnames, staat alles af. */
.st-ding [data-na] { transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); }
.st-levend .st-ding:not(.st-af) [data-na] { opacity: 0; }
.st-levend .st-ding.st-terug [data-na] { transition-duration: 0.3s; }
.st-levend .st-cv:not(.st-af) .st-ingepland { transform: translate(6px, -14px) rotate(12deg) scale(0.9); }
.st-levend .st-factuur [data-na] { transition: opacity 0.12s ease, transform 0.26s cubic-bezier(0.3, 1.5, 0.5, 1); }
.st-levend .st-factuur:not(.st-af) .st-stempel { transform: rotate(-3deg) scale(1.7); }
.st-levend .st-app:not(.st-af) .st-bel-uit { transform: translateY(16px) scale(0.94); transform-origin: 100% 100%; }
.st-levend .st-rooster:not(.st-af) .st-r-fenna { transform: translateY(7px) scale(0.86); }
.st-levend .st-rooster.st-af .st-r-open { opacity: 0; }
.st-levend .st-agenda:not(.st-af) .st-a-afspraak { background: rgba(232, 241, 255, 0.4); border-color: rgba(37, 99, 235, 0.5); border-style: dashed; box-shadow: none; }
.st-levend .st-agenda:not(.st-af) .st-a-vink path { stroke-dashoffset: 14; transition-delay: 0s; }
.st-levend .st-agenda .st-a-vink { opacity: 1 !important; }
.st-levend .st-offerte:not(.st-af) .st-o-som { transform: translateX(4px); }

/* ============ Binnenkomst: de dingen landen ============ */
.st-levend .st-sectie:not(.st-binnen) .st-ding { --til: 1; opacity: 0; transform: translate(var(--lx, 0px), -26px) rotate(calc(var(--r) + var(--lr, 3deg))) scale(1.05); }
.st-sectie.st-landt .st-ding { transition: opacity 0.6s ease calc(var(--i) * 90ms + 150ms), transform 1.3s cubic-bezier(0.16, 0.9, 0.22, 1) calc(var(--i) * 90ms + 150ms), --til 1.3s cubic-bezier(0.16, 0.9, 0.22, 1) calc(var(--i) * 90ms + 150ms); }

/* ============ Het gebaar: de dingen rafelen uit tot tekens ============ */
.st-sectie .st-ding.st-rafelt { opacity: 0; pointer-events: none; transition: opacity 0.36s ease, filter 0.36s ease; filter: blur(0.6px); }

/* ============ Het stof en het midden ============ */
.st-stof { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.st-midden { position: relative; z-index: 5; max-width: 660px; margin: 0 auto; padding: var(--midden-top, 112px) var(--rand) 0; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.st-midden > *, .st-midden a, .st-midden form { pointer-events: auto; }
.st-kop { margin-top: 14px; }
.st-wissel { display: grid; justify-items: center; width: 100%; margin-top: 18px; }
.st-wissel > * { grid-area: 1 / 1; }
.st-cta { display: flex; flex-direction: column; align-items: center; transition: opacity 0.35s ease, transform 0.45s ease, visibility 0s linear 0s; }
.st-zin { font-size: 18px; line-height: 1.5; color: var(--leisteen); text-wrap: balance; }
.st-knop { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.st-knop .prijsregel { font-size: 13.5px; }
.st-regel { margin-top: 12px; min-height: 26px; font-family: var(--kop); font-size: 17px; line-height: 1.25; color: var(--inkt); transition: opacity 0.25s ease; }
.st-regel:empty { opacity: 0; }

/* Het formulier op glas, op de plek van de knop. */
.st-formulier { width: min(560px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 20px 20px 18px; border-radius: 22px; text-align: left; --glas: rgba(255, 253, 248, 0.72);
  opacity: 0; transform: translateY(22px) scale(0.985); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.st-formulier[hidden] { display: none; }
.st-sectie.st-open .st-formulier { opacity: 1; transform: none; }
.st-sectie.st-gebaar .st-cta { opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.st-form-kop { grid-column: 1 / -1; font-family: var(--kop); font-size: 23px; line-height: 1.1; color: var(--inkt); }
.st-formulier label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--leisteen); }
.st-formulier .st-breed { grid-column: 1 / -1; }
.st-formulier input { font: inherit; font-size: 15px; color: var(--inkt); padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(11, 18, 32, 0.16); background: #fff; min-width: 0; }
.st-formulier input::placeholder { color: #6b7280; }
.st-formulier input:focus { outline: 2px solid var(--hemel); outline-offset: 1px; }
.st-formulier .knop { grid-column: 1 / -1; justify-self: start; }
.st-form-noot { grid-column: 1 / -1; color: var(--leisteen); }
.st-bedankt { grid-column: 1 / -1; font-size: 16px; line-height: 1.5; color: var(--inkt); }

.st-bron { position: absolute; z-index: 5; left: 50%; bottom: 52px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--rand)); text-align: center; text-wrap: balance; color: var(--leisteen); }

/* ============ De plek van de dingen ============ */
/* Breed: zes dingen, drie aan elke kant, rond de zon. --dx is de afstand van het midden tot de linkerrand van het
   ding, --y of --yb de afstand tot de boven- of onderrand van de sectie. */
/* --kort is wat de sectie korter is dan 820 px (op een lage laptop): dan schuiven het rooster en de offerte iets
   omhoog en de factuur en de agenda iets omlaag, zodat ze elkaar niet raken. Tussen 1180 en 1440 px breed houdt het
   rooster zijn linkerrand op 262 px (rechts van de factuur, links van de knop) en schuiven de offerte en de agenda
   samen naar binnen, met een vaste tussenruimte. */
.st-sectie { --kort: calc(820px - clamp(720px, 100svh, 820px)); }
.st-midden { --midden-top: calc(112px - var(--kort) * 0.25); }
.st-cv { --dx: -652px; --y: 70px; --r: -5deg; --lr: -3deg; }
.st-rooster { --dx: clamp(-478px, calc(262px - 50vw), -380px); --y: calc(362px - var(--kort) * 0.45); --r: 3.5deg; }
.st-factuur { --dx: -668px; --yb: calc(86px - var(--kort) * 0.4); --r: -2.5deg; }
.st-app { --dx: 432px; --y: 46px; --r: 6deg; }
.st-offerte { --dx: min(280px, calc(49vw - 434px)); --y: calc(402px - var(--kort) * 0.2); --r: -4deg; --lr: -2deg; }
.st-agenda { --dx: min(530px, calc(50vw - 190px)); --yb: calc(90px - var(--kort) * 0.36); --r: 5deg; }

/* Tussenmaat (laptop en liggende iPad): vier dingen in de hoeken, kleiner. */
@media (max-width: 1179px) {
  .st-cv, .st-offerte { display: none; }
  .st-app { --b: 184px; --dx: calc(-50vw + 30px); --y: 34px; --r: -4deg; }
  .st-rooster { --dx: calc(50vw - 296px); --y: 70px; --r: 4deg; }
  .st-factuur { --dx: calc(-50vw + 34px); --yb: 62px; --r: 3deg; }
  .st-agenda { --dx: calc(50vw - 214px); --yb: 72px; --r: -4deg; }
  /* Het appje is hier smaller: de naam mag over twee regels, zonder ondertitel. */
  .st-tel-wie span { display: none; }
  .st-tel-wie b { white-space: normal; font-size: 12px; }
  .st-tel-ico { width: 24px; height: 24px; }
}

/* Tablet en telefoon: twee dingen boven en twee onder de kop. */
@media (max-width: 1023px) {
  .st-sectie { height: auto; min-height: 0; }
  .st-midden { --midden-top: 312px; padding-bottom: 300px; }
  .st-factuur { --yb: 94px; }
  .st-agenda { --yb: 100px; }
}
@media (max-width: 639px) {
  .st-sectie { --marge: 14px; }
  .st-app { --b: 160px; --dx: calc(-50vw + 14px); --y: 30px; --r: -4deg; }
  .st-tel-status { display: none; }
  .st-chat { min-height: 0; }
  .st-tel-scherm { padding: 10px 9px 16px; }
  .st-bel { font-size: 12px; max-width: 94%; padding: 6px 9px 4px; }
  .st-rooster { --b: 184px; --dx: calc(50vw - 198px); --y: 48px; --r: 4deg; padding: 12px 12px 13px; }
  /* Op de telefoon drie dagen (ma tot en met wo), zodat het gat en Fenna ruim in hun vak staan. */
  .st-r-raster { grid-template-columns: 36px repeat(3, 1fr); gap: 4px; }
  .st-r-raster > :nth-child(5n) { display: none; }
  .st-r-raster i { height: 24px; }
  .st-factuur { --b: 178px; --dx: calc(-50vw + 14px); --yb: 90px; --r: 3deg; padding: 12px 12px 44px; }
  .st-f-datum, .st-lang { display: none; }
  .st-agenda { --b: 150px; --dx: calc(50vw - 164px); --yb: 96px; --r: -4deg; }
  .st-agenda .st-a-uur:last-child { display: none; }
  .st-midden { --midden-top: 278px; padding-bottom: 290px; }
  .st-zin { font-size: 16.5px; }
  .st-regel { font-size: clamp(14.5px, 3.85vw, 17px); }
  .st-formulier { grid-template-columns: 1fr; padding: 16px; }
  .st-bron { bottom: 44px; }
}
/* De kleinste telefoon: het appje en het rooster iets smaller, zodat hun hoeken elkaar niet raken; het appje wordt
   daardoor iets hoger, dus de tekst begint wat lager. */
@media (max-width: 379px) {
  .st-app { --b: 152px; }
  .st-bel { font-size: 11.5px; }
  .st-rooster { --b: 180px; --dx: calc(50vw - 194px); }
  .st-midden { --midden-top: 292px; }
}