/* monsioffice-banner.css — interactieve introductiebanner, VERSIE 2.5 (25-09-2026).
   Bron: pakketten/MonsiOffice-Claude-distributie-v2.5/. Het ontwerp is goedgekeurd; hier is
   niets aan de vormgeving veranderd. Eén aanpassing die in elke versie terugkomt: overal waar
   het pakket `h1` als selector gebruikt is `.monsi-banner__title` toegevoegd, omdat de pagina's
   hun eigen <h1> hebben en de bannerkop daarom een <h2> is.

   De CSS is cumulatief van 1.1 tot 2.5; het laatste blok wint. Wat 2.5 anders doet dan 1.9:
   * Het campagneblok is terug: "WE VIEREN HET!" is weer de grote kop (44px), met daaronder de
     onderregel, een oranje streepje, de drie voordelen en de prijsbelofte. De bovenregel
     (eyebrow) en het heading-block van 1.7-1.9 worden niet meer gebruikt.
   * De voordelen krijgen elk een oranje stip ervóór, verticaal gecentreerd en met gelijke
     tussenruimte.
   * De knop is groter (16px, minstens 36px hoog) en het pijltje is een getekende chevron.
   * Rechte buitenhoeken in plaats van afgeronde.
   * De tekstpaslogica van 1.9 is eruit — dat schrijft het pakket voor.

   LET OP: bij elke wijziging hier moet het nummer in ?v= in _monsi_banner.html mee omhoog. */

/* MonsiOffice 1.1 — component styles only, desktop height exactly 208px. */
.monsi-banner{--pointer-x:0;--pointer-y:0;--scroll-y:0;position:relative;isolation:isolate;overflow:hidden;height:208px;min-height:208px;box-sizing:border-box;border-radius:14px;background:#031a3b;color:white;font-family:Arial,Helvetica,sans-serif}
.monsi-banner *{box-sizing:border-box}
.monsi-banner__background,.monsi-banner__background img,.monsi-banner__shade,.monsi-banner__motion{position:absolute;inset:0;width:100%;height:100%}
.monsi-banner__background{z-index:-3}
.monsi-banner__background img{object-fit:cover;object-position:center 63%}
.monsi-banner__shade{z-index:-2;background:linear-gradient(90deg,#031a3bf2 0%,#031a3be8 46%,#031a3b77 64%,transparent 82%)}
.monsi-banner__content{position:relative;z-index:4;width:70%;padding:14px 26px}
.monsi-banner__eyebrow{margin:0 0 3px;color:#ffb071;font-size:10px;line-height:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.monsi-banner h1,.monsi-banner__title{margin:0;font-size:32px;line-height:34px;font-weight:900;letter-spacing:-.025em;text-transform:uppercase}
.monsi-banner__lead{margin:2px 0 0;font-size:17px;line-height:21px;font-weight:700}
.monsi-banner__accent{display:block;width:92px;height:3px;margin:8px 0;background:linear-gradient(90deg,#ff8b32,transparent)}
.monsi-banner__values{display:flex;flex-wrap:wrap;gap:5px 13px;list-style:none;padding:0;margin:0;font-size:13px;line-height:17px;font-weight:700}
.monsi-banner__values li+li:before{content:'•';color:#ff8b32;margin-right:13px}
.monsi-banner__promise{margin:4px 0 0;font-size:13px;line-height:17px;font-weight:600}
.monsi-banner__cta{display:inline-flex;align-items:center;gap:10px;min-height:32px;margin-top:7px;padding:5px 13px;border:1px solid #ffffffaa;border-radius:30px;background:#062554;color:white;font-size:12px;line-height:18px;font-weight:700;text-decoration:none;transition:background .18s,box-shadow .18s}
.monsi-banner__cta:hover{background:#ac4006;box-shadow:0 0 18px #ff8b3255}
.monsi-banner__cta:focus-visible{outline:3px solid #ffb071;outline-offset:3px}
.monsi-banner__motion{z-index:2;pointer-events:none}
.monsi-banner__ball,.monsi-banner__ghost{position:absolute;width:184px;height:184px;right:9%;top:48%;object-fit:contain}
.monsi-banner__ball{z-index:3;opacity:1;transform:translateY(-50%);filter:drop-shadow(0 9px 13px #451b0044)}
.monsi-banner__ghost{opacity:0;z-index:1}
.monsi-banner__ball-shadow{position:absolute;right:calc(9% + 23px);top:86%;width:138px;height:12px;border-radius:50%;background:#331a1255;filter:blur(7px)}
.monsi-banner__trail{position:absolute;right:13%;top:74%;width:23%;height:2px;opacity:0;border-radius:50%;background:#ff923a;box-shadow:0 0 8px #ff923a}
.monsi-banner__trail--two{top:78%;background:#278fff;box-shadow:0 0 8px #278fff}
.monsi-banner.is-visible .monsi-banner__ball{animation:monsi-arrive 1.2s ease-out both,monsi-settle 3s ease-in-out 1.2s 1 forwards}
.monsi-banner.is-visible .monsi-banner__ghost--near{animation:monsi-echo 1.1s ease-out both}
.monsi-banner.is-visible .monsi-banner__ghost--far{animation:monsi-echo 1s ease-out .08s both}
.monsi-banner.is-visible .monsi-banner__trail{animation:monsi-trail 1.2s ease-out both}
.monsi-banner.is-settled .monsi-banner__ball{animation:none;transform:translate(calc(var(--pointer-x)*6px),calc(-50% + var(--pointer-y)*4px + var(--scroll-y)*-3px));transition:transform .25s ease-out}
@keyframes monsi-arrive{0%{opacity:0;transform:translate(170%,-35%) rotate(100deg) scale(.7)}70%{opacity:1;transform:translate(-3%,-51%) rotate(-4deg)}100%{transform:translate(0,-50%)}}
@keyframes monsi-settle{0%,100%{transform:translate(0,-50%)}50%{transform:translate(0,-52%) rotate(1deg)}}
@keyframes monsi-echo{0%{opacity:0;transform:translate(140%,-45%) scale(.8)}35%{opacity:.16}100%{opacity:0;transform:translate(-55%,-50%) scale(.9)}}
@keyframes monsi-trail{0%{opacity:0;transform:translateX(100%) scaleX(.1)}35%{opacity:.8}100%{opacity:0;transform:translateX(-80%) scaleX(1.3)}}
/* On smaller screens use an honest readable layout, never squash text. */
@media(max-width:760px){.monsi-banner{height:auto;min-height:300px}.monsi-banner__content{width:100%;padding:18px 20px 120px}.monsi-banner h1,.monsi-banner__title{font-size:28px;line-height:31px}.monsi-banner__lead{font-size:16px}.monsi-banner__values{font-size:12px}.monsi-banner__ball,.monsi-banner__ghost{width:112px;height:112px;right:7%;top:auto;bottom:4px;transform:none}.monsi-banner__ball-shadow{right:8%;top:auto;bottom:12px;width:90px}.monsi-banner__shade{background:linear-gradient(180deg,#031a3bf5,#031a3bd9 62%,#031a3b33)}.monsi-banner__background img{object-position:65% center}.monsi-banner.is-visible .monsi-banner__ball{animation:monsi-mobile .7s ease-out both}.monsi-banner.is-settled .monsi-banner__ball{transform:translateY(calc(var(--scroll-y)*-2px))}.monsi-banner__ghost,.monsi-banner__trail{display:none}}
@keyframes monsi-mobile{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.monsi-banner .monsi-banner__ball{animation:none!important;transition:none!important;transform:translateY(-50%)!important;opacity:1}.monsi-banner__ghost,.monsi-banner__trail{display:none!important}.monsi-banner__cta{transition:none}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.monsi-banner .monsi-banner__ball{transform:none!important}}

/* 1.5: only horizontal desktop anchor changed from the supplied 1.1.
   Ball width stays 184px: right = 100% - 37.5% - half its width.
   Original transforms, keyframes, height, background and typography untouched.
   Echoes and shadow follow the same anchor so they remain attached to the ball. */
@media (min-width:761px){
  .monsi-banner__ball,.monsi-banner__ghost{right:calc(62.5% - 92px)}
  .monsi-banner__ball-shadow{right:calc(62.5% - 69px)}
}

/* 1.7: natural spacing, left aligned editorial hierarchy. */
.monsi-banner{container-type:inline-size}
.monsi-banner__content{padding:12px 28px;width:70%}
.monsi-banner__heading-block{margin-bottom:12px}
.monsi-banner__heading-block .monsi-banner__eyebrow{margin:0 0 4px;font-size:11px;line-height:14px;letter-spacing:.1em;color:#ffb071}
.monsi-banner__heading-block h1,.monsi-banner__heading-block .monsi-banner__title{margin:0;font-size:30px;line-height:31px;letter-spacing:-.025em;font-weight:800;text-transform:none}
.monsi-banner__heading-block .monsi-banner__lead{margin:5px 0 0;font-size:14px;line-height:18px;font-weight:400}
.monsi-banner__accent-word{position:relative;font-weight:700}
.monsi-banner__accent-word::after{content:'';position:absolute;left:0;right:0;top:calc(100% + 4px);height:2px;background:linear-gradient(90deg,#ff8b32,transparent)}
.monsi-banner__values{font-size:12px;line-height:15px;gap:4px 10px}
.monsi-banner__values li+li:before{margin-right:10px}
.monsi-banner__promise{margin-top:3px;font-size:12px;line-height:15px;font-weight:400;color:#e0e6ef}
.monsi-banner__cta{margin-top:7px;min-height:28px;padding:4px 12px;font-size:11px;line-height:18px}
@media(min-width:761px){
 .monsi-banner__ball,.monsi-banner__ghost{width:92px;height:92px;right:calc(62.5% - 46px);top:38%}
 .monsi-banner__ball-shadow{width:69px;height:6px;right:calc(62.5% - 34.5px);top:62%;filter:blur(4px)}
}
@media(min-width:761px) and (max-width:1100px){
 .monsi-banner__heading-block h1,.monsi-banner__heading-block .monsi-banner__title{font-size:clamp(20px,2.65cqw,29px);line-height:31px}
 .monsi-banner__heading-block .monsi-banner__lead{font-size:clamp(10px,1.32cqw,14px)}
}
@media(max-width:760px){
 .monsi-banner__content{width:100%;padding:18px 20px 120px}
 .monsi-banner__heading-block h1,.monsi-banner__heading-block .monsi-banner__title{font-size:clamp(23px,7.5cqw,30px)}
 .monsi-banner__heading-block .monsi-banner__lead{font-size:clamp(12px,3.7cqw,14px)}
}

/* 1.8: compact single-line title, no brand name in the headline. */
.monsi-banner__content{padding-top:20px;padding-bottom:20px}
.monsi-banner__heading-block .monsi-banner__eyebrow{font-size:11px;line-height:14px;margin-bottom:5px}
.monsi-banner__heading-block h1,.monsi-banner__heading-block .monsi-banner__title{font-size:38px;line-height:42px;letter-spacing:-.035em}
.monsi-banner__heading-block .monsi-banner__lead{font-size:15px;line-height:20px;margin-top:4px}
.monsi-banner__heading-block{margin-bottom:16px}
.monsi-banner__promise{margin-top:4px}
.monsi-banner__cta{margin-top:9px}
@media(min-width:761px) and (max-width:1100px){
 .monsi-banner__heading-block h1,.monsi-banner__heading-block .monsi-banner__title{font-size:clamp(26px,3.4cqw,37px)}
 .monsi-banner__heading-block .monsi-banner__lead{font-size:clamp(11px,1.4cqw,15px)}
}
@media(max-width:760px){
 .monsi-banner__content{padding:20px 20px 120px}
 .monsi-banner__heading-block h1,.monsi-banner__heading-block .monsi-banner__title{font-size:clamp(28px,8.5cqw,38px)}
 .monsi-banner__heading-block .monsi-banner__lead{font-size:clamp(12px,3.8cqw,15px)}
}


/* 2.1 review: return to 1.9 composition, bring type sizes closer. */
.monsi-banner__heading-block .monsi-banner__eyebrow{font-size:14px;letter-spacing:.06em}
.monsi-banner__heading-block h1,.monsi-banner__heading-block .monsi-banner__title{font-size:30px;line-height:42px;letter-spacing:-.025em}
.monsi-banner__heading-block .monsi-banner__lead{font-size:20px;line-height:22px;font-weight:400}
.monsi-banner__values,.monsi-banner__promise{font-size:14px;line-height:15px}
@media(min-width:761px) and (max-width:1100px){
 .monsi-banner__heading-block h1,.monsi-banner__heading-block .monsi-banner__title{font-size:26px}
 .monsi-banner__heading-block .monsi-banner__lead{font-size:14px}
 .monsi-banner__values,.monsi-banner__promise{font-size:12px}
}
@media(max-width:760px){
 .monsi-banner__heading-block h1,.monsi-banner__heading-block .monsi-banner__title{font-size:28px}
 .monsi-banner__heading-block .monsi-banner__lead{font-size:clamp(15px,4.5cqw,20px)}
 .monsi-banner__values,.monsi-banner__promise{font-size:13px;line-height:18px}
}

/* 2.3: square banner corners. */
.monsi-banner{border-radius:0}

/* 2.3: square banner corners. */
.monsi-banner{border-radius:0}

/* 2.3: square banner corners. */
.monsi-banner{border-radius:0}

/* 2.3: square banner corners. */
.monsi-banner{border-radius:0}

/* 2.4: campaign copy from banner 07 above the existing CTA. */
.monsi-banner__content{padding:20px 28px;width:100%}
.monsi-banner__campaign-copy{width:410px;max-width:100%;font-family:Arial,Helvetica,sans-serif;color:#e7edf6}
.monsi-banner__campaign-copy h1,.monsi-banner__campaign-copy .monsi-banner__title{margin:0;font-size:44px;line-height:46px;font-weight:900;letter-spacing:-.025em;color:#fff}
.monsi-banner__campaign-lead{margin:0;font-size:22px;line-height:26px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.monsi-banner__campaign-rule{display:block;width:72px;height:4px;margin:8px 0 10px;background:linear-gradient(90deg,#ff8b32,#ff8b3200)}
.monsi-banner__campaign-values{display:flex;gap:10px;margin:0;font-size:16px;line-height:20px;font-weight:700;white-space:nowrap}
.monsi-banner__campaign-values span::before,.monsi-banner__campaign-promise::before{content:'•';color:#ff8b32;margin-right:8px}
.monsi-banner__campaign-promise{margin:4px 0 0;font-size:16px;line-height:20px;font-weight:700;white-space:nowrap}
.monsi-banner__content .monsi-banner__cta{margin-top:9px}
@media(min-width:761px) and (max-width:1150px){
 .monsi-banner__campaign-copy{transform:scale(.65);transform-origin:top left;margin-bottom:-47px}
}
@media(max-width:760px){
 .monsi-banner__content{padding:20px 20px 120px}
 .monsi-banner__campaign-copy h1,.monsi-banner__campaign-copy .monsi-banner__title{font-size:clamp(28px,9cqw,44px)}
 .monsi-banner__campaign-lead{font-size:clamp(14px,4.5cqw,22px)}
 .monsi-banner__campaign-values,.monsi-banner__campaign-promise{font-size:clamp(11px,3.4cqw,16px)}
 .monsi-banner__campaign-values{gap:6px}
}

.monsi-banner__campaign-values span::before,.monsi-banner__campaign-promise::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff8b32;margin-right:8px;vertical-align:1px}

/* 2.5: equal separator spacing and vertically centered dots. */
.monsi-banner__campaign-values{display:flex;align-items:center;gap:10px}
.monsi-banner__campaign-values span{display:inline-flex;align-items:center;gap:10px}
.monsi-banner__campaign-values span::before{display:block;flex:0 0 9px;margin:0;vertical-align:baseline}
.monsi-banner__content .monsi-banner__cta{min-height:36px;padding:6px 16px;font-size:16px;line-height:22px;font-weight:400;gap:16px;border-radius:20px;margin-top:9px}
.monsi-banner__cta span{font-size:0;display:block;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-right:3px}

/* ── Responsieve correctie, MonsiOffice — 25-09-2026 ────────────────────────────────────────
   Het goedgekeurde ontwerp gaat uit van een banner van 1400px breed. Onze pagina-container is
   smaller (1168px op een breed scherm, 721px op een tablet), en dan komt de bal op 37,5% precies
   in de tekst te liggen: op 768px sneed hij dwars door "Persoonlijk contact" en de onderregel.

   Deze regel geldt UITSLUITEND in hetzelfde bereik waar het pakket de tekst zelf al op 65%
   schaalt (761-1150px). Daar staat het ontwerp toch al niet op ware grootte; de bal schuift mee
   naar het midden zodat er weer ruimte tussen tekst en bal is. Boven 1150px verandert er niets,
   dus op de ontwerpbreedte blijft het goedgekeurde beeld exact zoals het is.
   Terugdraaien = dit blok weghalen. -------------------------------------------------------- */
@media (min-width:761px) and (max-width:1150px) {
  .monsi-banner__ball, .monsi-banner__ghost { right: calc(50% - 46px); }
  .monsi-banner__ball-shadow { right: calc(50% - 34.5px); }
}