/* Stijlen voor de voorbeeldpagina van de Offertemachine en de Werkbon.
   Staat los van site.css omdat alleen die pagina's hem gebruiken. Alles komt
   uit het palet in site.css (sinds 19 sept; daarvoor stond hier het oude
   koelgrijs): de donkere kaders (opname, werkbon, controle) zijn schermen op
   --donker, de documenten (offerte, mail) papier op --vlak, en de bon heeft
   zijn eigen --bon-* voor papier en balpen. Lettermaten zijn de vaste reeks. */

.demo main{display:block}
/* site.css zet de header absoluut zodat hij op de homepage over de hero zweeft.
   Deze pagina heeft geen hero, dus hij hoort hier gewoon ruimte in te nemen. */
.demo .header{position:relative;border-bottom:1px solid var(--donker-lijn)}

/* ---- kop ---- */
.demo-kop{max-width:1180px;margin:0 auto;padding:clamp(40px,5vw,76px) var(--gutter) clamp(28px,4vw,48px)}
/* Op /offertemachine/ staat de klus (appje → pdf, uit site.css) rechts van de titel,
   in dezelfde verhouding als hij tot 20 sept in de hero van de homepage stond. */
.demo-kop--klus{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,4vw,56px);align-items:start}
@media(max-width:900px){.demo-kop--klus{grid-template-columns:minmax(0,1fr)}}
.demo-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-vaag);margin:0 0 22px}
.demo-kop h1{font-size:clamp(34px,4.6vw,52px);font-weight:600;letter-spacing:-.05em;line-height:1.04;margin:0;max-width:19ch;text-wrap:balance}
.demo-lead{font-size:clamp(17px,1.9vw,20px);line-height:1.65;color:var(--inkt-zacht);margin:26px 0 0;max-width:60ch}
/* De eerlijkheidsregel hoort boven het voorbeeld te staan, niet in de voetnoot
   eronder. Wie hem mist, denkt dat dit een klant is. */
.demo-echt{font-size:14px;line-height:1.7;color:var(--inkt-vaag);margin:26px 0 0;max-width:62ch;
  padding-left:16px;border-left:2px solid var(--lijn)}

/* ---- de stappen ---- */
.stap{max-width:1180px;margin:0 auto;padding:clamp(52px,6.5vw,92px) var(--gutter) 0}
.stap-kop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px clamp(22px,3vw,44px);margin-bottom:clamp(26px,3.4vw,42px)}
.stap-nr{grid-row:1/3;font-size:12px;letter-spacing:.16em;color:var(--accent);padding-top:11px}
.stap-kop h2{margin:0;font-size:clamp(26px,3.9vw,42px);font-weight:600;letter-spacing:-.04em;line-height:1.12;max-width:20ch}
.stap-kop p{margin:0;font-size:16px;line-height:1.7;color:var(--inkt-zacht);max-width:64ch}

/* ---- 01 de spraaknotitie ---- */
/* Stap 1: het appje op telefoonbreedte, ernaast wat hij insprak. */
.appje{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.appje .klus-chat{margin:0;width:300px}
/* Hier begint het gesprek bovenaan bij het spraakbericht; wat niet past valt onderaan weg. */
.appje .wa-berichten{align-content:start}
@media(max-width:800px){.appje{grid-template-columns:minmax(0,1fr);max-width:440px;justify-items:center}}
.opname{margin:0;background:var(--donker);border-radius:var(--straal-groot);overflow:hidden}
.opname-balk{display:flex;align-items:center;gap:11px;padding:16px 22px;border-bottom:1px solid var(--donker-lijn);font-size:12px;color:var(--donker-zacht)}
.opname-punt{width:7px;height:7px;border-radius:50%;background:var(--accent-licht);flex-shrink:0}
.opname-duur{margin-left:auto;color:var(--donker-vaag);font-variant-numeric:tabular-nums}
.golf{display:flex;align-items:center;gap:3px;height:56px;padding:0 22px;margin-top:20px}
.golf i{flex:1;height:var(--h);min-height:2px;border-radius:var(--straal);background:var(--donker-vaag)}
.transcript{margin:0;padding:22px 22px 26px}
.transcript p{margin:0;font-size:clamp(17px,1.9vw,20px);line-height:1.6;letter-spacing:-.3px;color:var(--donker-tekst);max-width:64ch}

/* ---- 02 wat eruit gehaald wordt ---- */
.herkend{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.herkend li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,2.4vw,40px);
  padding:19px 0;border-bottom:1px solid var(--lijn-fijn)}
.herkend-uit{font-size:14px;line-height:1.55;color:var(--inkt-vaag)}
.herkend-pijl{color:var(--accent)}
.herkend-in{font-size:14px;line-height:1.55;color:var(--inkt)}
.herkend-noot{font-size:14px;line-height:1.7;color:var(--inkt-vaag);margin:22px 0 0;max-width:62ch}

/* ---- 03 de offerte ---- */
/* Wit papier op de grond, met de schaduw van de site: dit is geen scherm uit
   een systeem maar het stuk dat de klant in zijn mail krijgt. */
.offerte{max-width:940px;margin:0 auto;background:var(--vlak);color:var(--inkt);border-radius:var(--straal-groot);
  padding:clamp(26px,3.2vw,48px);box-shadow:var(--schaduw)}
.offerte b{font-weight:600}
.offerte-hoofd{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid var(--lijn)}
.offerte-merk{display:flex;gap:14px;align-items:flex-start}
.offerte-merk .offerte-logo{display:flex;align-items:center;justify-content:center;line-height:1;width:42px;height:42px;flex-shrink:0;border-radius:var(--straal);
  background:var(--inkt);color:var(--vlak);font-size:20px;font-weight:600}
.offerte-merk b{display:block;font-size:17px;letter-spacing:-.3px;margin-bottom:5px}
.offerte-merk span{display:block;font-size:12px;line-height:1.6;color:var(--inkt-zacht)}
.offerte-meta{margin:0;display:grid;gap:7px;text-align:right}
.offerte-meta dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-vaag);display:inline}
.offerte-meta dd{margin:0 0 0 12px;font-size:14px;font-weight:600;display:inline;font-variant-numeric:tabular-nums}
.offerte-aan{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--lijn)}
.offerte-etiket{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-vaag);margin-bottom:9px}
.offerte-aan b{display:block;font-size:16px;margin-bottom:3px}
.offerte-aan span:not(.offerte-etiket){display:block;font-size:14px;line-height:1.6;color:var(--inkt-zacht)}

.offerte-rol{overflow-x:auto}
.offerte-regels{width:100%;min-width:440px;border-collapse:collapse;margin-top:8px}
.offerte-regels th,.offerte-regels td{text-align:left;padding:14px 0}
.offerte-regels .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:18px}
.offerte-regels thead th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-vaag);font-weight:600;
  padding-bottom:10px;border-bottom:1px solid var(--lijn)}
.offerte-regels tbody tr{border-bottom:1px solid var(--lijn-fijn)}
.offerte-regels tbody b{display:block;font-size:14px;letter-spacing:-.2px;margin-bottom:4px}
.offerte-regels tbody span{display:block;font-size:12px;line-height:1.55;color:var(--inkt-zacht);max-width:44ch}
.offerte-regels tbody td.num{font-size:14px;vertical-align:top;padding-top:16px}
.offerte-regels tfoot th{font-size:14px;font-weight:400;color:var(--inkt-zacht);padding:9px 0;text-align:right}
.offerte-regels tfoot td{font-size:14px;padding:9px 0 9px 18px;font-variant-numeric:tabular-nums;text-align:right}
.offerte-regels tfoot tr:first-child th,.offerte-regels tfoot tr:first-child td{padding-top:18px}
.offerte-totaal th,.offerte-totaal td{font-size:16px!important;font-weight:600!important;color:var(--inkt)!important;
  border-top:1px solid var(--inkt);padding-top:14px!important}

.offerte-voet{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,72px);align-items:end;
  margin-top:30px;padding-top:24px;border-top:1px solid var(--lijn)}
.offerte-voet p{margin:0;font-size:12px;line-height:1.7;color:var(--inkt-zacht);max-width:62ch}
.offerte-akkoord{min-width:190px}
.offerte-lijn{display:block;height:1px;background:var(--lijn);margin:34px 0 9px}
.offerte-akkoord span:last-child{font-size:12px;color:var(--inkt-vaag)}
.offerte-noot,.mail-noot{font-size:14px;line-height:1.7;color:var(--inkt-vaag);margin:24px auto 0;max-width:62ch}

/* ---- 04 de opvolging ---- */
.mail{max-width:720px;margin:0 auto;background:var(--vlak);color:var(--inkt);border-radius:var(--straal-groot);overflow:hidden;
  box-shadow:var(--schaduw)}
.mail-hoofd{margin:0;padding:20px clamp(22px,2.6vw,34px);background:var(--grond);border-bottom:1px solid var(--lijn);
  display:grid;gap:6px}
.mail-hoofd div{display:flex;gap:12px}
.mail-hoofd dt{flex:0 0 76px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--inkt-vaag);padding-top:2px}
.mail-hoofd dd{margin:0;font-size:14px;line-height:1.5;color:var(--inkt)}
.mail-hoofd div:nth-child(3) dd{font-weight:600;color:var(--inkt)}
.mail-body{padding:26px clamp(22px,2.6vw,34px) 30px}
.mail-body p{margin:0 0 15px;font-size:14px;line-height:1.7;color:var(--inkt)}
.mail-body p:last-child{margin-bottom:0}
.mail-assistent{margin-top:22px!important;padding-top:15px;border-top:1px solid var(--lijn-fijn);
  font-size:12px!important;line-height:1.6!important;color:var(--inkt-vaag)!important}

/* ---- slot ---- */
.demo-slot{max-width:1180px;margin:clamp(60px,7vw,104px) auto 0;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,96px);align-items:stretch}
.demo-slot h2{margin:0 0 20px;font-size:clamp(26px,3.9vw,42px);font-weight:600;letter-spacing:-.04em;line-height:1.1}
.demo-slot-tekst>p{margin:0 0 24px;font-size:16px;line-height:1.7;color:var(--donker-zacht);max-width:56ch}
.demo-slot-feiten{margin:0;display:grid;gap:24px;align-content:space-between;min-width:236px}
.demo-slot-feiten dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--donker-vaag)}
.demo-slot-feiten dd{margin:8px 0 0;font-size:16px;line-height:1.4;letter-spacing:-.3px;color:var(--donker-tekst)}

.demo-voet{max-width:1180px;margin:clamp(56px,7vw,96px) auto 0;padding:26px var(--gutter) 40px;
  border-top:1px solid var(--donker-lijn)}
.demo-voet p{margin:0;font-size:12px;line-height:1.7;color:var(--donker-vaag);max-width:70ch}

@media(max-width:900px){
  .offerte-hoofd{flex-direction:column}
  .offerte-meta{text-align:left}
  .demo-slot{grid-template-columns:1fr;gap:36px}
  .demo-slot-feiten{min-width:0}
}

@media(max-width:700px){
  .demo-lead{font-size:16px}
  .stap-kop{grid-template-columns:1fr;gap:12px}
  .stap-nr{grid-row:auto;padding-top:0}
  .stap-kop h2{max-width:none}
  .stap-kop p{font-size:14px}
  .transcript p{font-size:16px}
  /* Gesproken links, gestructureerd rechts werkt niet op 390px: dan wordt het
     onder elkaar, met de pijl als scharnier ertussen. */
  .herkend li{grid-template-columns:1fr;gap:7px;padding:16px 0}
  .herkend-pijl{transform:rotate(90deg);width:1em}
  .offerte-aan{grid-template-columns:1fr;gap:20px}
  /* Vier kolommen passen niet op 390px, en de bedragen achter een scrollbalk
     zetten is precies het getal verstoppen waar het om gaat. Elke regel wordt
     een blok: omschrijving boven, "aantal x prijs" links, bedrag rechts. */
  .offerte-rol{overflow-x:visible}
  .offerte-regels{min-width:0}
  .offerte-regels thead{display:none}
  .offerte-regels tbody,.offerte-regels tfoot,.offerte-regels tr{display:block}
  .offerte-regels tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;padding:15px 0}
  .offerte-regels tbody td{padding:0}
  .offerte-regels tbody td:first-child{flex:0 0 100%}
  .offerte-regels tbody td.num{padding:9px 0 0;font-size:14px;color:var(--inkt-zacht);text-align:left;white-space:nowrap}
  .offerte-regels tbody td.num:nth-of-type(2)::after{content:"\00d7";margin:0 7px;color:var(--inkt-vaag)}
  .offerte-regels tbody td.num:last-child{margin-left:auto;font-weight:600;color:var(--inkt)}
  .offerte-regels tfoot tr{display:flex;justify-content:space-between;gap:20px;padding:8px 0}
  .offerte-regels tfoot th,.offerte-regels tfoot td{padding:0!important;text-align:left}
  .offerte-totaal{margin-top:10px;padding-top:12px!important;border-top:1px solid var(--inkt)}
  .offerte-totaal th,.offerte-totaal td{border-top:0;padding-top:0!important}
  .offerte-voet{grid-template-columns:1fr;gap:26px;align-items:start}
  .mail-hoofd div{flex-direction:column;gap:2px}
  .mail-hoofd dt{flex:none}
}

/* ---- de werkbon (voorbeeldpagina Werkbon naar Factuur) ----
   Het papier is het argument: een bon die scheef gefotografeerd is in de bus,
   met doorgestreepte tekst en een tijdvak in plaats van uren. Alles wat erop
   staat is echte tekst, geen plaatje — een schermlezer leest de bon dus voor,
   en de handschriftregels blijven doorzoekbaar. */
.werkbon{margin:0;background:var(--donker);border-radius:var(--straal-groot);overflow:hidden}
.werkbon .opname-balk{border-bottom:1px solid var(--donker-lijn)}
.bon{max-width:760px;margin:clamp(26px,3.4vw,48px) auto;background:var(--bon-papier);color:var(--bon-inkt);
  padding:clamp(22px,2.8vw,38px);border-radius:var(--straal);transform:rotate(-.55deg);
  box-shadow:var(--schaduw)}
/* Het handschrift. Geen lettertypebestand erbij: de generieke cursive-familie
   levert overal iets met de hand, en waar dat tegenvalt is het nog steeds
   leesbaar blauw op papier. */
.hs{font-family:'Segoe Script','Bradley Hand','Snell Roundhand','Apple Chancery',cursive;
  font-size:19px;line-height:1.75;letter-spacing:.2px;color:var(--bon-inkt)}
.hs-door{color:var(--bon-inkt-door);text-decoration:line-through;text-decoration-thickness:1.5px}
.bon-etiket{display:block;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--inkt-zacht);margin-bottom:6px}

.bon-hoofd{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:16px;border-bottom:2px solid var(--bon-lijn)}
.bon-hoofd b{display:block;font-size:16px;letter-spacing:-.2px;color:var(--inkt);margin-bottom:4px}
.bon-hoofd>div>span{display:block;font-size:12px;line-height:1.6;color:var(--inkt-zacht)}
.bon-titel{text-align:right}
.bon-titel>span:first-child{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--inkt)}
.bon-nr{display:block;margin-top:5px;font-size:12px;letter-spacing:.06em;color:var(--inkt-zacht)}
.bon-nr .hs{font-size:17px}

.bon-velden{margin:18px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 20px}
.bon-velden div{border-bottom:1px solid var(--bon-lijn);padding-bottom:5px}
.bon-velden .bon-breed{grid-column:1/-1}
.bon-velden dt{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--inkt-zacht)}
.bon-velden dd{margin:2px 0 0}

.bon-vlak{margin-top:22px;padding-top:14px;border-top:1px solid var(--bon-lijn)}
.bon-vlak p{margin:0}

.bon-voet{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-end;
  margin-top:26px;padding-top:16px;border-top:1px solid var(--bon-lijn)}
.bon-krabbel{display:block;width:150px;height:34px;fill:none;stroke:var(--bon-inkt);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.bon-onder{display:block;font-size:12px;color:var(--inkt-zacht);margin-top:4px}
.bon-vink{display:block;font-size:20px}
.herkend-geen{color:var(--inkt-vaag)}

/* ---- de controlelaag ---- */
/* Niets gaat weg voor hij het gezien heeft. De twijfel staat bovenaan en wordt
   benoemd, niet weggemoffeld: dat is het verschil met "de AI doet je facturen". */
.controle{max-width:760px;margin:0 auto;background:var(--donker);border-radius:var(--straal-groot);overflow:hidden}
.controle-kop{padding:20px clamp(20px,2.4vw,30px);border-bottom:1px solid var(--donker-lijn)}
.controle-etiket{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--donker-vaag);margin-bottom:8px}
.controle-kop b{font-size:16px;font-weight:600;letter-spacing:-.3px;color:var(--donker-tekst)}
.controle-lijst{list-style:none;margin:0;padding:0}
.controle-lijst li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:18px clamp(20px,2.4vw,30px);border-bottom:1px solid var(--donker-lijn)}
.controle-vlag{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-licht);
  border:1px solid var(--accent-licht);border-radius:var(--straal-groot);padding:5px 10px;white-space:nowrap}
.controle-ok .controle-vlag{color:var(--donker-zacht);border-color:var(--donker-lijn)}
.controle-lijst p{margin:0;font-size:14px;line-height:1.65;color:var(--donker-zacht)}
.controle-lijst b{font-weight:600;color:var(--donker-tekst)}
.controle-voet{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:20px clamp(20px,2.4vw,30px)}
.controle-knop{background:var(--donker-tekst);color:var(--donker);border-radius:var(--straal-groot);padding:11px 20px;font-size:14px;white-space:nowrap}
.controle-voet p{margin:0;font-size:14px;line-height:1.6;color:var(--donker-vaag);max-width:38ch}

@media(max-width:700px){
  .bon{transform:none}
  .hs{font-size:17px}
  .bon-velden{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bon-titel{text-align:left}
  .controle-lijst li{grid-template-columns:1fr;gap:9px}
  .controle-vlag{justify-self:start}
}