/* Verkooppagina Cateringplanner (herontwerp 6 nov 2026, palet salie en messing gekozen door Björn).
   Vlakke kleuren, geen kleurovergang naar donker. Wit en lichte salie als vlakken, bosgroen voor koppen en actie,
   lichter groen alleen voor de marge, messing om een getal te laten oplichten dat net veranderde. */
.cv {
  --salie-licht: #f2f4f0; --salie: #e3e9df; --bos: #2f4a3a; --bos-2: #22382b; --bos-licht: #e6ede3;
  --kervel: #3f7d58; --kervel-licht: #e4f0e6; --messing: #b08d57; --messing-licht: #f5ecdd; --tekst: #1c2321; --grijs: #59625c; --rand: #d9dfd6;
  --bon: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--tekst);
}
.cv-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.cv section, .cv > section { padding: 0; }
.cv h2 { font: 800 clamp(1.9rem, 3.6vw, 2.7rem)/1.06 var(--f-titel); letter-spacing: -.025em; color: var(--tekst); margin: 0 0 12px; max-width: 22ch; }
.cv h3 { font: 700 1.3rem/1.15 var(--f-titel); letter-spacing: -.01em; margin: 0 0 8px; }
.cv-intro { font-size: 1.08rem; color: var(--grijs); max-width: 60ch; margin: 0 0 28px; }
.cv .knop.cv-knop { background: var(--bos); color: #fff; padding: 15px 24px; font-size: 1.05rem; border-radius: 12px; }
.cv .knop.cv-knop:hover { background: var(--bos-2); }
.cv .knop.cv-knop.licht { background: #fff; color: var(--bos); }
.cv .knop.cv-knop.licht:hover { background: var(--bos-licht); }
.cv :focus-visible { outline: 3px solid var(--messing); outline-offset: 2px; }

/* ---- held ---- */
.cv-held { background: var(--salie-licht); padding: 40px 0 64px; border-bottom: 1px solid var(--salie); }
.cv-heldrooster { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1000px) { .cv-heldrooster { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; padding-top: 24px; } }
.cv-held .terug { color: var(--bos); }
.cv-held .terug::before { content: "← "; }
.cv-held h1 { font: 800 clamp(2.3rem, 4.8vw, 3.75rem)/1.02 var(--f-titel); letter-spacing: -.035em; color: var(--bos); margin: 4px 0 20px; max-width: 15ch; }
.cv-lead { font-size: 1.15rem; line-height: 1.55; color: var(--tekst); max-width: 46ch; margin: 0 0 26px; }
.cv-knoppen { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.cv-prijsje { font-size: .95rem; color: var(--grijs); display: inline-flex; gap: 8px; align-items: center; }
.cv-prijsje b { color: var(--tekst); }
.cv-klein { font-size: .9rem; color: var(--grijs); margin: 18px 0 0; max-width: 44ch; }

/* de pas: bediening + offerte + bon */
.cv-pas { min-width: 0; }
.cv-bediening { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; background: #fff; border: 1px solid var(--rand); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.cv-menu { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.cv-schuif { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.cv-schuif > span { display: flex; justify-content: space-between; gap: 10px; }
.cv-schuif output { font: 800 1.25rem/1 var(--f-titel); color: var(--bos); font-variant-numeric: tabular-nums; }
.cv input[type=range] { width: 100%; accent-color: var(--bos); height: 28px; cursor: pointer; }
.cv-wissel, .cv-gerechtkeuze { display: inline-flex; background: var(--salie-licht); border-radius: 11px; padding: 3px; gap: 2px; }
.cv-wissel button, .cv-gerechtkeuze button { font: 700 .88rem var(--f-tekst); border: 0; background: none; color: var(--grijs); padding: 8px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.cv-wissel button[aria-checked=true], .cv-gerechtkeuze button[aria-checked=true] { background: #fff; color: var(--bos); box-shadow: 0 1px 3px rgba(28, 35, 33, .15); }
.cv-menu button { font: 600 .86rem var(--f-tekst); border: 1.5px solid var(--rand); background: #fff; color: var(--grijs); border-radius: 99px; padding: 6px 12px 6px 30px; cursor: pointer; position: relative; transition: border-color .15s, color .15s; }
.cv-menu button::before { content: ""; position: absolute; left: 10px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 4px; border: 1.5px solid var(--rand); background: #fff; }
.cv-menu button[aria-pressed=true] { border-color: var(--bos); color: var(--bos); }
.cv-menu button[aria-pressed=true]::before { background: var(--bos) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--bos); }

.cv-papieren { display: grid; gap: 14px; align-items: start; }
@media (min-width: 640px) { .cv-papieren { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.cv-offerte { background: #fff; border-radius: 16px; border: 1px solid var(--rand); box-shadow: 0 18px 40px -26px rgba(28, 35, 33, .45); padding: 18px 18px 16px; }
.cv-offerte header, .cv-bon header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; margin-bottom: 6px; }
.cv-offerte header { border-bottom: 2px solid var(--bos); }
.cv-offerte header b { font: 800 1.15rem var(--f-titel); color: var(--bos); }
.cv-offerte header span { font-size: .85rem; color: var(--grijs); }
.cv-regels { list-style: none; margin: 0; padding: 0; }
.cv-regels li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--salie); font-size: .9rem; line-height: 1.3; }
.cv-regels li small { display: block; color: var(--grijs); font-size: .78rem; margin-top: 1px; }
.cv-regels b, .cv-totaal dd, .cv-marge b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-regels li.weg { opacity: 0; transform: translateX(8px); }
.cv-totaal { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 10px 0 12px; }
.cv-totaal dt { font-size: .88rem; color: var(--grijs); }
.cv-totaal dd { margin: 0; text-align: right; font-weight: 800; }
.cv-totaal dt:first-child, .cv-totaal dd:nth-of-type(1) { font: 800 1.25rem var(--f-titel); color: var(--tekst); }
.cv-marge { background: var(--kervel-licht); border-radius: 12px; padding: 10px 12px; }
.cv-marge p { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.cv-marge b { color: var(--kervel); font-size: 1rem; }
.cv-balk { height: 8px; background: #fff; border-radius: 99px; margin: 8px 0 6px; overflow: hidden; }
.cv-balk i { display: block; height: 100%; background: var(--kervel); border-radius: 99px; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.cv-marge .cv-alleen { font-size: .78rem; color: var(--kervel); }
.cv-marge.krap { background: var(--messing-licht); }
.cv-marge.krap b, .cv-marge.krap .cv-alleen { color: #7a5a2a; }
.cv-marge.krap .cv-balk i { background: #a07a3f; }

.cv-bon { font-family: var(--bon); font-size: .84rem; background: #fff; padding: 16px 16px 22px; position: relative; box-shadow: 0 18px 40px -26px rgba(28, 35, 33, .45);
  -webkit-mask: radial-gradient(circle at 8px 0, transparent 6px, #000 6.5px) 0 0/16px 12px repeat-x, linear-gradient(#000, #000) 0 10px/100% calc(100% - 20px) no-repeat, radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) 0 100%/16px 12px repeat-x;
  mask: radial-gradient(circle at 8px 0, transparent 6px, #000 6.5px) 0 0/16px 12px repeat-x, linear-gradient(#000, #000) 0 10px/100% calc(100% - 20px) no-repeat, radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) 0 100%/16px 12px repeat-x; }
.cv-bon header { border-bottom: 1.5px dashed var(--tekst); padding-top: 6px; }
.cv-bon header b { font-weight: 800; letter-spacing: .04em; }
.cv-bon header span { font-size: .72rem; color: var(--grijs); }
.cv-bon h3 { font: 700 .84rem var(--bon); margin: 12px 0 2px; color: var(--bos); }
.cv-bon p { margin: 0; display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.cv-bon p b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-voetnoot { font-size: .8rem; color: var(--grijs); margin: 12px 0 0; }
.flits { animation: flits .9s ease-out; }
@keyframes flits { 0% { background-color: var(--messing-licht); box-shadow: 0 0 0 4px var(--messing-licht); } 100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; } }
/* het enige moment dat vanzelf beweegt: de bon komt uit de printer */
.js .cv-bon.print { animation: print 1.1s cubic-bezier(.25, .9, .3, 1) .35s both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* ---- stappen ---- */
.cv-stappen { padding: 84px 0 !important; background: #fff; }
.cv-tijdlijn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; margin: 6px 0 26px; }
.cv-tijdlijn::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: var(--salie); }
.cv-tijdlijn button { position: relative; display: grid; justify-items: start; gap: 8px; text-align: left; background: none; border: 0; padding: 0 10px 8px 0; font: 700 1rem var(--f-tekst); color: var(--grijs); cursor: pointer; }
.cv-tijdlijn button b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--salie); font: 800 1.05rem var(--f-titel); color: var(--grijs); transition: background .2s, border-color .2s, color .2s; }
.cv-tijdlijn button:hover b { border-color: var(--bos); }
.cv-tijdlijn button[aria-selected=true] { color: var(--bos); }
.cv-tijdlijn button[aria-selected=true] b { background: var(--bos); border-color: var(--bos); color: #fff; }
.cv-paneel { display: grid; gap: 28px; align-items: start; background: var(--salie-licht); border-radius: 20px; padding: clamp(18px, 3vw, 34px); }
@media (min-width: 900px) { .cv-paneel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.cv-paneel[hidden] { display: none; }
.cv-paneel:not([hidden]) .cv-demo { animation: wissel .35s ease-out; }
@keyframes wissel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cv-uitleg h3 { color: var(--bos); font-size: 1.5rem; }
.cv-uitleg p { color: var(--tekst); margin: 0; max-width: 52ch; }
.cv-demo { background: #fff; border-radius: 16px; padding: 18px; border: 1px solid var(--rand); min-width: 0; }
.cv-foodcost { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cv-foodcost label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.cv-invoer { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--rand); border-radius: 10px; padding: 0 12px; background: #fff; }
.cv-invoer:focus-within { border-color: var(--bos); box-shadow: 0 0 0 3px var(--bos-licht); }
.cv-invoer input { border: 0; outline: 0; font: 700 1.2rem var(--f-titel); width: 100%; padding: 10px 0; color: var(--tekst); background: none; }
.cv-invoer span { color: var(--grijs); font-weight: 700; }
.cv-fcuit { grid-column: 1 / -1; margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cv-fcuit b { font: 800 2.2rem/1 var(--f-titel); color: var(--bos); font-variant-numeric: tabular-nums; border-radius: 8px; padding: 0 4px; margin-left: -4px; }
.cv-fcuit small { color: var(--grijs); font-size: .84rem; flex-basis: 100%; }
.cv-gsmrij { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; }
.cv-gsm { border: 8px solid var(--tekst); border-radius: 28px; padding: 18px 14px 16px; background: #fff; font-size: .8rem; display: grid; gap: 6px; }
.cv-gsmzaak { margin: 0; font: 800 .95rem var(--f-titel); color: var(--bos); border-bottom: 2px solid var(--bos); padding-bottom: 6px; }
.cv-gsmkop { margin: 0; font: 800 1.15rem/1.1 var(--f-titel); color: var(--bos); }
.cv-gsmregel { margin: 0; display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px solid var(--salie); padding: 3px 0; }
.cv-gsmall { margin: 0; background: var(--salie-licht); border-radius: 6px; padding: 5px 7px; }
.cv-akkoord { font: 700 .9rem var(--f-tekst); background: var(--bos); color: #fff; border: 0; border-radius: 9px; padding: 10px; cursor: pointer; margin-top: 4px; }
.cv-akkoord[disabled] { background: var(--kervel); cursor: default; }
.cv-opdrachten { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cv-opdrachten li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; background: var(--salie-licht); border-radius: 12px; padding: 12px 14px; font-weight: 700; }
.cv-st { font: 700 .78rem var(--f-tekst); font-style: normal; border-radius: 99px; padding: 3px 10px; }
.cv-st.offerte { background: var(--messing-licht); color: #7a5a2a; }
.cv-st.bevestigd { background: var(--kervel-licht); color: var(--kervel); }
.cv-vink { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; cursor: pointer; margin-bottom: 12px; }
.cv-vink input { width: 20px; height: 20px; accent-color: var(--bos); flex: none; margin-top: 2px; }
.cv-maak { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cv-maak th { text-align: left; font-size: .8rem; color: var(--grijs); border-bottom: 1.5px solid var(--rand); padding: 6px 4px; }
.cv-maak td { padding: 8px 4px; border-bottom: 1px solid var(--salie); }
.cv-maak td:last-child, .cv-maak th:last-child { text-align: right; }
.cv-maak td:last-child { font: 800 1.2rem var(--f-titel); color: var(--bos); font-variant-numeric: tabular-nums; }
.cv-kipregel { margin: 12px 0 0; }
.cv-kipregel b { font-variant-numeric: tabular-nums; border-radius: 6px; padding: 0 3px; }
.cv-nacalc { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; margin: 14px 0 0; }
.cv-nacalc dt { color: var(--grijs); }
.cv-nacalc dd { margin: 0; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 6px; padding: 0 3px; }
.cv-nacalc dt:last-of-type, .cv-nacalc dd:last-of-type { font: 800 1.25rem var(--f-titel); color: var(--kervel); padding-top: 8px; border-top: 1.5px solid var(--rand); }
.cv-nacalc dt:last-of-type { color: var(--tekst); }
.cv-nacalc dd.slechter { color: #9b1c0c; }

/* ---- allergenen ---- */
.cv-allergenen { background: var(--salie-licht); padding: 84px 0 !important; }
.cv-allrooster { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .cv-allrooster { grid-template-columns: minmax(0, 1fr) 380px; } }
.cv-gerechtkeuze { flex-wrap: wrap; margin-bottom: 16px; }
.cv-ingredienten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cv-ingredienten li { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 7px 12px; font-weight: 600; animation: wissel .3s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
.cv-ingredienten em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--bos); background: var(--bos-licht); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.cv-etiket { background: #fff; border: 2px dashed var(--bos); border-radius: 14px; padding: 22px; display: grid; gap: 6px; transform: rotate(-1.2deg); box-shadow: 0 22px 44px -30px rgba(28, 35, 33, .5); }
.cv-etiket p { margin: 0; }
.cv-etnaam { font: 800 1.45rem/1.1 var(--f-titel); color: var(--bos); }
.cv-etmeta, .cv-etzaak { color: var(--grijs); font-size: .9rem; }
.cv-etall { display: grid; gap: 2px; background: var(--messing-licht); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.cv-etall span { font-size: .8rem; font-weight: 700; color: #7a5a2a; }
.cv-etall b { font-size: 1.05rem; }
.cv-etiket.draai { animation: draai .45s ease-out; }
@keyframes draai { 0% { transform: rotate(-1.2deg) rotateY(0); } 50% { transform: rotate(-1.2deg) rotateY(80deg); } 100% { transform: rotate(-1.2deg) rotateY(0); } }

/* ---- vergelijking ---- */
.cv-vergelijk { background: #fff; padding: 84px 0 !important; }
.cv-tabelvak { overflow-x: auto; }
.cv-tabel { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 560px; }
.cv-tabel th, .cv-tabel td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--salie); vertical-align: top; }
.cv-tabel thead th { font: 700 .95rem var(--f-tekst); color: var(--grijs); border-bottom: 2px solid var(--rand); }
.cv-tabel tbody th { font-weight: 700; width: 30%; }
.cv-tabel td { color: var(--grijs); }
.cv-tabel .cv-wij { background: var(--bos-licht); color: var(--bos); font-weight: 700; }
.cv-tabel thead .cv-wij { background: var(--bos); color: #fff; border-radius: 12px 12px 0 0; border-bottom-color: var(--bos); }
.cv-tabel tbody tr:last-child .cv-wij { border-radius: 0 0 12px 12px; }
.cv-bronnoot { font-size: .82rem; color: var(--grijs); margin: 12px 0 0; }

/* ---- inhoud en prijs ---- */
.cv-inhoud { background: var(--salie-licht); padding: 84px 0 !important; }
.cv-lijst { display: grid; gap: 0 48px; margin: 8px 0 0; }
@media (min-width: 760px) { .cv-lijst { grid-template-columns: 1fr 1fr; } }
.cv-lijst div { padding: 16px 0; border-top: 1px solid var(--salie); }
.cv-lijst dt { font: 700 1.12rem var(--f-titel); color: var(--bos); margin-bottom: 4px; }
.cv-lijst dd { margin: 0; color: var(--tekst); }
.cv-prijs { background: var(--bos); color: #fff; padding: 64px 0 !important; }
.cv-prijsrooster { display: grid; gap: 22px; align-items: center; }
@media (min-width: 860px) { .cv-prijsrooster { grid-template-columns: 1fr auto; gap: 40px; } }
.cv-prijs h2 { color: #fff; }
.cv-prijs p { margin: 0; color: #dce6de; max-width: 60ch; font-size: 1.05rem; }

@media (max-width: 640px) {
  .cv-held { padding-top: 24px; }
  .cv-bediening { grid-template-columns: 1fr; }
  .cv-wissel { justify-self: start; }
  .cv-tijdlijn { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cv-tijdlijn button { font-size: .78rem; justify-items: center; text-align: center; padding: 0 2px 6px; }
  .cv-tijdlijn::before { left: 12%; right: 12%; }
  .cv-gsmrij { grid-template-columns: 1fr; }
  .cv-gsm { max-width: 260px; }
  .cv-foodcost { grid-template-columns: 1fr; }
  .cv-stappen, .cv-allergenen, .cv-vergelijk, .cv-inhoud { padding: 56px 0 !important; }
  .cv-etiket { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cv *, .cv *::before { animation: none !important; transition: none !important; }
}
.cv-bon header { display: grid; gap: 2px; }
.cv-akkoord[disabled] { opacity: 1; color: #fff; }