/* =====================================================================
   Dummy's van het voorbeeldkantoor Van Dijk Advies (verzonnen).
   Alles hier is een HTML-nabootsing van wat bluepenny voor een kantoor
   maakt: site, check, uitnodiging, nieuwsbrief, socials, rapporten.

   Regels:
   - Elke dummy is ontworpen op een VASTE breedte (browser 1280, telefoon 390,
     post 540, mail 640 ...) en staat in een .schaal. dummies.js schaalt hem
     naar de breedte van zijn houder, dus hij past in elke variant.
   - Alles in de dummy gebruikt de vd-tokens hieronder, nooit de bluepenny-tokens.
   - Geen echte merken, geen echte personen. Foto's met mensen zijn gemaakt
     met AI; de pagina die ze toont vermeldt dat.
   ===================================================================== */

:root{
  --vd-groen:#1F3A33;
  --vd-groen-2:#2C5047;
  --vd-zand:#F5F1EA;
  --vd-zand-2:#EDE6DA;
  --vd-oker:#B8834A;
  --vd-oker-2:#9C6C38;
  --vd-inkt:#1E2B26;
  --vd-grijs:#51615A;
  --vd-grijs-2:#7C8A84;
  --vd-lijn:#E3DCCF;
  --vd-wit:#FFFFFF;
  --vd-rood:#B5493A;
  --vd-oranje:#D08A2E;
  --vd-groen-ok:#3C7A5A;
  --vd-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --vd-sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
}

/* ---------- schaal: vaste ontwerpbreedte, meeschalen met de houder ---------- */
.schaal{position:relative;width:100%;overflow:hidden;--s:1}
.schaal > .schaal-in{position:absolute;top:0;left:0;transform-origin:0 0;transform:scale(var(--s))}
/* zonder JS: gewoon tonen op eigen maat, afgesneden */
.no-js .schaal > .schaal-in{position:static}
.schaal-in,.schaal-in *,.schaal-in *::before,.schaal-in *::after{box-sizing:border-box}

/* ---------- basis binnen een dummy ---------- */
.vd{font-family:var(--vd-sans);color:var(--vd-inkt);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-align:left}
.vd *{box-sizing:border-box}
.vd h1,.vd h2,.vd h3,.vd h4{font-family:var(--vd-serif);font-weight:500;color:var(--vd-groen);margin:0;letter-spacing:-.01em;text-wrap:balance}
.vd p{margin:0}
.vd img{display:block;max-width:none}
.vd a{color:inherit;text-decoration:none}
.vd button{font:inherit;cursor:pointer}

/* woordmerk Van Dijk Advies */
.vd-logo{display:inline-flex;align-items:center;gap:10px;font:500 22px/1 var(--vd-serif);color:var(--vd-groen);letter-spacing:-.01em;white-space:nowrap}
.vd-logo i{width:30px;height:30px;border-radius:50%;background:var(--vd-groen);color:var(--vd-zand);font:italic 500 15px/30px var(--vd-serif);text-align:center;font-style:italic;flex:none}
.vd-logo.klein{font-size:16px;gap:8px}
.vd-logo.klein i{width:24px;height:24px;font-size:12px;line-height:24px}
.vd-knop{display:inline-flex;align-items:center;gap:8px;background:var(--vd-oker);color:#fff;font:600 14px/1 var(--vd-sans);padding:14px 20px;border-radius:999px;border:0;white-space:nowrap}
.vd-knop.groen{background:var(--vd-groen)}
.vd-knop.rand{background:transparent;color:var(--vd-groen);box-shadow:inset 0 0 0 1.5px var(--vd-groen)}
.vd-eb{font:600 11.5px/1 var(--vd-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--vd-oker-2)}

/* =====================================================================
   Apparaatkaders (buiten de dummy, in bluepenny-stijl neutraal)
   ===================================================================== */

/* browser: ontwerpbreedte 1280 */
.dm-browser{width:1280px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(20,35,61,.10),0 50px 100px rgba(20,35,61,.18),0 12px 28px rgba(20,35,61,.10)}
.dm-browser-balk{height:48px;display:flex;align-items:center;gap:8px;padding:0 18px;background:#F1F3F6;border-bottom:1px solid #E1E5EB;font-family:var(--vd-sans)}
.dm-browser-balk i{width:12px;height:12px;border-radius:50%;background:#D3D8E0;display:block}
.dm-browser-balk span{margin-left:18px;flex:1;max-width:520px;font-size:13px;color:#6B7380;background:#fff;border-radius:8px;padding:8px 14px;display:flex;align-items:center;gap:8px}
.dm-browser-balk span::before{content:"";width:10px;height:12px;border:1.5px solid #9AA3AF;border-radius:2px 2px 3px 3px;border-top-width:4px;box-sizing:border-box}

/* telefoon: ontwerpbreedte 390 (scherm), kader eromheen = 414 breed */
.dm-telefoon{width:414px;padding:12px;background:#0B1322;border-radius:58px;box-shadow:0 0 0 1px #1c2536,0 50px 100px rgba(20,35,61,.28),0 12px 28px rgba(20,35,61,.16);position:relative}
.dm-telefoon::before{content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);width:110px;height:30px;background:#0B1322;border-radius:20px;z-index:3}
.dm-scherm{width:390px;height:844px;border-radius:46px;overflow:hidden;background:#fff;position:relative;display:flex;flex-direction:column}
.dm-status{height:54px;flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding:0 30px 8px;font:600 15px/1 var(--vd-sans);color:#111}
.dm-status b{font-weight:600}
.dm-status span{display:flex;gap:6px;align-items:center}
.dm-status span i{display:block;background:#111;border-radius:2px}
.dm-status span i:nth-child(1){width:17px;height:11px;clip-path:polygon(0 100%,25% 100%,25% 70%,50% 70%,50% 40%,75% 40%,75% 0,100% 0,100% 100%)}
.dm-status span i:nth-child(2){width:25px;height:12px;border-radius:3px;background:none;box-shadow:inset 0 0 0 1.5px #111;position:relative}
.dm-status span i:nth-child(2)::after{content:"";position:absolute;inset:2.5px 5px 2.5px 2.5px;background:#111;border-radius:1px}
.dm-scherm.donker .dm-status{color:#fff}
.dm-scherm.donker .dm-status span i{background:#fff}
.dm-scherm.donker .dm-status span i:nth-child(2){background:none;box-shadow:inset 0 0 0 1.5px #fff}
.dm-scherm.donker .dm-status span i:nth-child(2)::after{background:#fff}
.dm-thuis{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:#111;opacity:.85;z-index:3}
.dm-scherm.donker .dm-thuis{background:#fff}

/* mailvenster (desktop): ontwerpbreedte 720 */
.dm-mailvenster{width:720px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(20,35,61,.10),0 50px 100px rgba(20,35,61,.16),0 12px 28px rgba(20,35,61,.08);font-family:var(--vd-sans)}
.dm-mailkop{padding:20px 26px 16px;border-bottom:1px solid #E6E8EC;display:grid;grid-template-columns:44px 1fr auto;gap:4px 14px;align-items:center}
.dm-mailkop .av{grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--vd-groen);color:var(--vd-zand);display:grid;place-items:center;font:italic 500 18px/1 var(--vd-serif)}
.dm-mailkop b{font-size:15px;color:#111}
.dm-mailkop small{font-size:13px;color:#6B7380}
.dm-mailkop time{font-size:12.5px;color:#6B7380;grid-row:1}
.dm-mailonderwerp{padding:18px 26px 0;font:600 20px/1.3 var(--vd-sans);color:#111}

/* social post: ontwerpbreedte 540 */
.dm-post{width:540px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgba(20,35,61,.10),0 30px 60px rgba(20,35,61,.12);font-family:var(--vd-sans);color:#1d2226;overflow:hidden}
.dm-post-kop{display:grid;grid-template-columns:48px 1fr auto;gap:2px 12px;align-items:center;padding:16px 18px 10px}
.dm-post-kop .av{grid-row:1/3;width:48px;height:48px;border-radius:50%;background:var(--vd-groen);color:var(--vd-zand);display:grid;place-items:center;font:italic 500 20px/1 var(--vd-serif)}
.dm-post-kop b{font-size:15px}
.dm-post-kop small{font-size:12.5px;color:#666}
.dm-post-kop .punten{grid-row:1/3;color:#666;font-size:20px;letter-spacing:1px}
.dm-post-tekst{padding:2px 18px 14px;font-size:15px;line-height:1.5}
.dm-post-voet{display:flex;justify-content:space-around;padding:10px 12px 12px;border-top:1px solid #EAEAEA;font-size:13.5px;font-weight:600;color:#666}
.dm-post-voet span{display:flex;gap:6px;align-items:center}

/* label onder een dummy (in bluepenny-stijl) */
.dm-label{font:500 13px/1.4 var(--tekst);color:var(--lei);margin-top:14px;text-align:center}