/* ==========================================================
   De Ondernemerstafel
   Uitgepakt uit de Claude Design-export (zie /origineel).
   De meeste opmaak staat inline in index.html, zoals in het ontwerp.
   ========================================================== */

/* ---------- lettertypes (lokaal, uit de export) ---------- */
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- basis en animaties ---------- */
html,body{height:100%}
html,body{margin:0;padding:0;background:#fff;color:#111;font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#E2001A;text-decoration:none}a:hover{color:#B80015}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes chaos1{0%,15%{transform:translate(0,0) rotate(-6deg);opacity:1}45%,100%{transform:translate(-320px,-140px) rotate(-30deg);opacity:0}}
@keyframes chaos2{0%,15%{transform:translate(0,0) rotate(4deg);opacity:1}45%,100%{transform:translate(360px,-120px) rotate(24deg);opacity:0}}
@keyframes chaos3{0%,15%{transform:translate(0,0) rotate(-2deg);opacity:1}45%,100%{transform:translate(-300px,180px) rotate(-18deg);opacity:0}}
@keyframes chaos4{0%,15%{transform:translate(0,0) rotate(8deg);opacity:1}45%,100%{transform:translate(340px,170px) rotate(28deg);opacity:0}}
@keyframes chaos5{0%,15%{transform:translate(0,0) rotate(-10deg);opacity:1}45%,100%{transform:translate(0,-260px) rotate(-12deg);opacity:0}}
@keyframes chaos1m{0%,15%{transform:translate(0,0) rotate(-6deg);opacity:1}45%,100%{transform:translate(-118px,-78px) rotate(-30deg);opacity:0}}
@keyframes chaos2m{0%,15%{transform:translate(0,0) rotate(4deg);opacity:1}45%,100%{transform:translate(124px,-66px) rotate(24deg);opacity:0}}
@keyframes chaos3m{0%,15%{transform:translate(0,0) rotate(-2deg);opacity:1}45%,100%{transform:translate(-112px,92px) rotate(-18deg);opacity:0}}
@keyframes chaos4m{0%,15%{transform:translate(0,0) rotate(8deg);opacity:1}45%,100%{transform:translate(118px,88px) rotate(28deg);opacity:0}}
@keyframes chaos5m{0%,15%{transform:translate(0,0) rotate(-10deg);opacity:1}45%,100%{transform:translate(0,-128px) rotate(-12deg);opacity:0}}
@keyframes snapLm{0%,40%{opacity:0;transform:translateX(-54px)}62%,100%{opacity:1;transform:none}}
@keyframes snapRm{0%,40%{opacity:0;transform:translateX(54px)}62%,100%{opacity:1;transform:none}}
@keyframes snapL{0%,40%{opacity:0;transform:translateX(-140px)}62%,100%{opacity:1;transform:none}}
@keyframes snapR{0%,40%{opacity:0;transform:translateX(140px)}62%,100%{opacity:1;transform:none}}
@keyframes snapB{0%,48%{opacity:0;transform:translateY(120px)}72%,100%{opacity:1;transform:none}}
@keyframes bar{0%,60%{transform:scaleY(0)}85%,100%{transform:scaleY(1)}}
@keyframes tblL{from{transform:translateX(-160%)}to{transform:none}}
@keyframes tblR{from{transform:translateX(160%)}to{transform:none}}
@keyframes legUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes chairL{from{transform:translateX(-400px);opacity:0}to{transform:none;opacity:1}}
@keyframes chairR{from{transform:translateX(400px);opacity:0}to{transform:none;opacity:1}}
@keyframes drop{from{transform:translateY(-260px) rotate(-6deg);opacity:0}60%{opacity:1}80%{transform:translateY(6px) rotate(0)}to{transform:none;opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes wordIn{from{opacity:0;transform:translateY(60px) skewY(3deg)}to{opacity:1;transform:none}}

/* ---------- responsief ---------- */
/* De desktopscene is te breed voor een telefoon, dus onder 1000px draait
   dezelfde voorstelling op kleinere maat in plaats van te verdwijnen. */
@media (max-width: 1000px){
  .hero-scene{display:none !important}
  .hero-scene-m{display:block !important}

  /* de tools blijven rondvliegen, maar in een kleinere baan */
  .chaos-cloud{width:100% !important;max-width:340px;margin:0 auto}
  .chaos-cloud .tool{font-size:12px !important;padding:8px 11px !important;box-shadow:0 4px 14px rgba(0,0,0,.07) !important}
  .chaos-cloud .t1{margin:0 !important;animation-name:chaos1m !important}
  .chaos-cloud .t2{margin:-58px 0 0 86px !important;animation-name:chaos2m !important}
  .chaos-cloud .t3{margin:66px 0 0 -74px !important;animation-name:chaos3m !important}
  .chaos-cloud .t4{margin:56px 0 0 92px !important;animation-name:chaos4m !important}
  .chaos-cloud .t5{margin:-74px 0 0 -70px !important;animation-name:chaos5m !important}
  /* de telefoon blijft staan terwijl de tools eromheen wegvliegen:
     op een smal scherm mag het vlak nooit leeg vallen */
  .phone-stage{height:400px !important}
  .phone-stage > .telefoon{transform:scale(.84);transform-origin:center;animation:none !important;opacity:1 !important}
  .phone-stage > .telefoon [style*="animation"]{animation:none !important;opacity:1 !important}
}
/* op een tablet mag dezelfde scene wat groter meeschalen */
@media (min-width: 600px) and (max-width: 1000px){
  .hero-scene-m{transform:scale(1.42);transform-origin:top center;margin-bottom:180px !important}
}
@media (max-width: 900px){
  .split-2{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  main .grid-auto{grid-template-columns:minmax(0,1fr) !important}
  main .grid-1200{grid-template-columns:minmax(0,1fr) !important}
  main article,main section > div{min-width:0}
  .image-slot{max-width:100%}
}
@media (max-width: 760px){
  header{padding:12px 20px !important;gap:8px 12px !important}
  header nav button{font-size:14px !important;padding:8px 10px !important}
  section{padding-left:20px !important;padding-right:20px !important}
  section.pad-112{padding-top:72px !important;padding-bottom:72px !important}
  section.pad-96{padding-top:64px !important;padding-bottom:64px !important}
  main .foto-460{height:300px !important}
  main .foto-260{height:200px !important}
  main .foto-220{height:180px !important}
  h1,h2{hyphens:auto}
}
@media (max-width: 420px){
  section{padding-left:16px !important;padding-right:16px !important}
  header{padding:10px 16px !important}
  .phone-stage > .telefoon{transform:scale(.8)}
}

/* ---------- navigatie: actieve pagina ---------- */
.nav-knop{background:transparent;color:#111}
.nav-knop[aria-current="page"]{background:#111;color:#fff}

/* ---------- hover- en focusstijlen ---------- */
/* !important omdat ze de inline stijl moeten overschrijven, net als in het origineel */
.hover-tekst-rood:hover{color:#E2001A !important}
.hover-donkerrood:hover{background:#B80015 !important}
.hover-wit:hover{background:#fff !important;color:#111 !important}
.hover-zwart:hover{background:#111 !important;color:#fff !important}
.hover-achtergrond-zwart:hover{background:#111 !important}
.hover-tekst-wit:hover{color:#fff !important}
.focus-rood:focus{border-color:#E2001A !important;outline:none !important}

/* ---------- afbeeldingen (vervangt <image-slot> uit Claude Design) ---------- */
.image-slot{display:block;position:relative;width:100%;height:100%;aspect-ratio:3/2;overflow:hidden;background:rgba(127,127,127,.08);font:13px/1.3 system-ui,-apple-system,sans-serif}
.image-slot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* lege plek: nog geen foto gekozen */
.image-slot-leeg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box}
.image-slot-leeg::after{content:"";position:absolute;inset:0;border:1.5px dashed currentColor;opacity:.35;pointer-events:none}
.image-slot-leeg svg{opacity:.45}
.image-slot-leeg span{max-width:90%;font-weight:500;letter-spacing:.01em;opacity:.75}