:root{
    --oranje:#D9601F; --oranje-diep:#B34D18;
    --donker:#14110E; --donker-zacht:#241F19;
    --wit:#FFFFFF; --creme:#F5F1EC; --zand:#E4D9CB; --zand-diep:#B39A82;
    --grijs:#6B6157;
    --rand:rgba(20,17,14,.12);
    --breed:1240px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--creme); color:var(--donker);
    font-family:'Sora',system-ui,sans-serif; font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.kop{
    font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600;
    line-height:1.02; letter-spacing:.005em; margin:0;
  }
  a{color:inherit;}
  /* height:auto hoort hier bij max-width. Zonder die regel neemt de browser de
     hoogte uit het width/height-attribuut letterlijk, terwijl de breedte meeschaalt,
     en wordt elke foto uitgerekt of platgedrukt. */
  img{display:block; max-width:100%; height:auto;}
  .bak{width:100%; max-width:var(--breed); margin:0 auto; padding:0 22px;}
  .oranje{color:var(--oranje);}

  /* ---------------------------------------------------------------- kop */
  header{
    position:sticky; top:0; z-index:20; background:rgba(245,241,236,.92);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--rand);
  }
  .kopbalk{display:flex; align-items:center; gap:20px; height:68px;}
  .kopbalk img{height:44px; width:auto;}
  nav{margin-left:auto; display:flex; align-items:center; gap:26px;}
  nav a{
    text-decoration:none; font-size:14.5px; font-weight:500; color:var(--grijs);
    white-space:nowrap;
  }
  nav a:hover{color:var(--donker);}
  .bel{
    font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:15px;
    background:var(--oranje); color:#fff; padding:9px 18px; border-radius:999px;
    text-decoration:none; letter-spacing:.03em; white-space:nowrap;
  }

  /* ---------------------------------------------------------------- hero
     Licht, zonder donkere laag over een foto heen. De kop staat op creme en
     de foto ligt er als een brede band onder, van rand tot rand. */
  .hero{background:var(--creme); color:var(--donker);}
  .hero .bak{padding-top:92px; padding-bottom:64px;}
  /* De foto staat naast de kop en loopt door tot de rand van het scherm. De tekst
     houdt links dezelfde marge aan als de rest van de pagina. */
  .hero-in{display:grid; grid-template-columns:1fr 1fr; align-items:center;}
  .hero-tekst{padding:84px 60px 84px max(22px, calc((100vw - var(--breed))/2 + 22px));}
  /* De foto vulde eerst de hele hoogte van de kolom. Omdat hij liggend is en de
     kolom staand, bleef er nog maar de helft van de breedte over en viel de vrouw
     op de bank buiten beeld. Nu is hij lager, waardoor er drie kwart van de breedte
     te zien is: de meetset én de bewoner. */
  .hero-beeld{height:100%; overflow:hidden; background:var(--creme);
              display:flex; align-items:center;}
  .hero-beeld img{width:100%; height:clamp(460px,44vw,640px); object-fit:cover;
                  object-position:58% 50%;}
  @media (max-width:980px){
    .hero-in{grid-template-columns:1fr;}
    .hero-tekst{padding:44px 22px 44px;}
    /* Op een telefoon eerst het beeld, dan de kop. Anders moet je door de hele
       tekst scrollen voordat je iets ziet. */
    .hero-beeld{order:-1;}
    .hero-beeld img{min-height:0; height:clamp(240px,56vw,400px); object-position:70% 50%;}
  }
  .over{
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.24em;
    font-size:13.5px; color:var(--oranje); margin-bottom:22px;
  }
  .hero h1{font-size:clamp(38px,4.4vw,64px); max-width:14ch;}
  .hero p{
    margin:26px 0 0; max-width:46ch; font-size:clamp(16.5px,1.35vw,19px);
    color:var(--grijs);
  }
  .band{width:100%; overflow:hidden; background:var(--zand);}
  .band img{width:100%; height:clamp(280px,46vw,620px); object-fit:cover;}
  /* Klein regeltje onder de knoppen: het werk is voor 95 procent zakelijk, dus de
     particulier krijgt een verwijzing en geen eigen helft van de kop. */
  .hero .voetnoot{margin:26px 0 0; font-size:15.5px; color:var(--grijs);}
  .hero .voetnoot a{
    color:var(--oranje); font-weight:600; text-decoration:none;
    border-bottom:1px solid rgba(217,96,31,.45);
  }
  .keuze{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px;}
  .knop{
    display:inline-block; text-decoration:none; border-radius:999px;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em;
    font-size:16px; padding:15px 28px; border:2px solid transparent;
    transition:background .15s, border-color .15s, color .15s;
  }
  .knop.vol{background:var(--oranje); color:#fff;}
  .knop.vol:hover{background:var(--oranje-diep);}
  .knop.leeg{border-color:rgba(20,17,14,.28); color:var(--donker);}
  .knop.leeg:hover{border-color:var(--donker);}
  .knop.donker{background:var(--donker); color:var(--creme);}
  .knop.donker:hover{background:var(--donker-zacht);}

  /* ---------------------------------------------------------- herkenning */
  .herken{background:var(--wit); color:var(--donker); padding:0 0 92px;}
  .drie{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  @media (max-width:760px){ .drie{grid-template-columns:1fr; gap:34px;} }
  /* Het bijschrift stond eerst in een zwart verloop over de foto. Dat hoorde bij
     de donkere beelden; bij daglichtfoto's staat het eronder en blijft het licht. */
  .kaart-beeld img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px;}
  .kaart-beeld span{
    display:block; margin-top:18px; padding-top:16px;
    border-top:2px solid var(--oranje); color:var(--donker);
    font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:20px;
    line-height:1.14;
  }
  .herken h2{font-size:clamp(28px,4.4vw,44px); max-width:20ch; margin-bottom:14px;}
  .herken .in{padding:92px 0 44px;}
  .herken .in p{color:var(--grijs); max-width:58ch; margin:0;}
  /* Op een telefoon staan de koppen van de andere blokken gecentreerd; dit blok en
     de kop bovenaan stonden nog tegen de linkerrand en vielen daardoor uit de toon. */
  @media (max-width:760px){
    .herken .in{padding:56px 22px 30px; text-align:center;}
    .herken .in h2, .herken .in p{margin-inline:auto;}
    .hero-tekst{text-align:center;}
    .hero-tekst .keuze{justify-content:center;}
    .hero-tekst h1, .hero-tekst p{margin-inline:auto;}
  }

  /* ------------------------------------------------------------- blokken */
  section{padding:92px 0;}
  .wit{background:var(--wit);}
  .zand{background:var(--zand);}
  /* Kop en inleiding van een blok staan gecentreerd op één as. Eerder stonden ze
     links met een grote leegte rechts; op een breed scherm oogde de hele pagina
     daardoor uit het midden. */
  .titel{font-size:clamp(28px,4.4vw,46px); max-width:22ch; margin-inline:auto;
         text-align:center;}
  .lead{color:var(--grijs); max-width:62ch; margin:18px auto 0; text-align:center;}
  /* In een tweekolomsblok blijven ze wel links staan: daar hoort de tekst bij het
     beeld ernaast. */
  .duo .titel, .duo .lead{margin-inline:0; text-align:left;}
  .stappen{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px;}
  @media (max-width:760px){ .stappen{grid-template-columns:1fr; gap:14px;} }
  .stap{border-top:3px solid var(--oranje); padding-top:22px;}
  .stap .nr{
    font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:.2em;
    color:var(--oranje); margin-bottom:10px;
  }
  .stap h3{font-size:25px; margin-bottom:10px;}
  .stap p{margin:0; color:var(--grijs); font-size:16px;}

  .duo{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;}
  @media (max-width:880px){ .duo{grid-template-columns:1fr; gap:30px;} }
  .duo img{border-radius:14px; width:100%;}
  /* Vrijstaande productfoto: geen kader en geen ronde hoeken, want de foto heeft
     zelf geen achtergrond en staat los op het zand. */
  .duo img.uitsnede{border-radius:0; background:none;}

  .lijst{list-style:none; margin:26px 0 0; padding:0;}
  .lijst li{position:relative; padding-left:30px; margin-bottom:13px; color:var(--grijs);}
  .lijst li::before{
    content:""; position:absolute; left:0; top:10px; width:13px; height:13px;
    border-radius:3px; background:var(--oranje);
  }
  /* tekening of grafiek over de volle breedte, met een bijschrift eronder */
  .plaat{margin:56px auto 0;}
  .plaat img{width:100%; border-radius:14px; border:1px solid var(--rand); background:var(--wit);}
  .plaat figcaption{
    margin-top:14px; color:var(--grijs); font-size:15px; max-width:70ch;
  }

  .diensten{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px;}
  @media (max-width:760px){ .diensten{grid-template-columns:1fr;} }
  .dienst{
    background:var(--wit); border:1px solid var(--rand); border-radius:16px;
    padding:32px 30px; display:flex; flex-direction:column;
  }
  .dienst h3{font-size:26px; margin-bottom:12px;}
  .dienst p{color:var(--grijs); margin:0 0 18px; font-size:16.5px;}
  .dienst .voor{
    font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:13px;
    letter-spacing:.16em; color:var(--oranje); margin-bottom:12px;
  }
  .dienst a{
    margin-top:auto; font-family:'Oswald',sans-serif; text-transform:uppercase;
    font-size:15px; letter-spacing:.06em; color:var(--donker); text-decoration:none;
    border-bottom:2px solid var(--oranje); align-self:flex-start; padding-bottom:3px;
  }
  /* De achtergrond komt van de sectieklasse (zand of wit), zodat de blokken
     op de pagina om en om kunnen lopen. */
  .werk{color:var(--donker);}
  .vragenrij{display:grid; grid-template-columns:1fr 1fr; gap:0 54px; margin-top:48px;}
  @media (max-width:880px){ .vragenrij{grid-template-columns:1fr;} }
  .werkvraag{
    border-top:1px solid rgba(20,17,14,.14); padding:24px 0 22px;
    display:flex; gap:22px; align-items:flex-start;
  }
  .werkvraag i{
    font-style:normal; font-family:'Oswald',sans-serif; font-size:17px;
    color:var(--oranje); letter-spacing:.12em; padding-top:3px;
  }
  .werkvraag p{margin:0; font-size:16.5px; line-height:1.5; color:var(--grijs);}
  .werkvraag b{color:var(--donker); font-weight:600;}
  .waarschuwing{
    margin-top:46px; border-left:4px solid var(--oranje); padding:6px 0 6px 26px;
    font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:clamp(22px,3vw,30px);
    line-height:1.14; max-width:26ch;
  }
  .voorwie{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:46px;}
  @media (max-width:760px){ .voorwie{grid-template-columns:1fr;} }
  .vak{background:var(--wit); border:1px solid var(--rand); border-radius:16px; padding:34px 30px;}
  .vak h3{font-size:27px; margin-bottom:12px;}
  .vak p{color:var(--grijs); margin:0 0 20px;}

  .cijfers{background:var(--wit); color:var(--donker);}
  .cijferrij{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:44px;}
  @media (max-width:980px){ .cijferrij{grid-template-columns:repeat(2,1fr); gap:30px 26px;} }
  @media (max-width:560px){ .cijferrij{grid-template-columns:1fr; gap:10px;} }
  .cijfer{border-top:2px solid rgba(20,17,14,.14); padding-top:22px;}
  .cijfer b{
    display:block; font-family:'Oswald',sans-serif; font-size:clamp(44px,4vw,56px); line-height:1;
    color:var(--oranje); font-weight:600;
  }
  .cijfer span{
    display:block; font-family:'Oswald',sans-serif; text-transform:uppercase;
    letter-spacing:.16em; font-size:14px; margin:10px 0 12px;
  }
  .cijfer p{margin:0; color:var(--grijs); font-size:15.5px;}

  details{border-bottom:1px solid var(--rand); padding:20px 0;}
  details summary{
    cursor:pointer; list-style:none; font-family:'Oswald',sans-serif;
    text-transform:uppercase; font-size:20px; display:flex; gap:16px; align-items:baseline;
  }
  details summary::-webkit-details-marker{display:none;}
  details summary::after{content:"+"; margin-left:auto; color:var(--oranje); font-size:26px;}
  details[open] summary::after{content:"\2212";}
  details p{color:var(--grijs); margin:14px 0 0; max-width:64ch;}

  .linkedin{background:var(--zand);}
  .linkedin .bak{display:flex; gap:34px; align-items:center; flex-wrap:wrap;}
  .linkedin .merk{
    flex:none; width:72px; height:72px; border-radius:16px; background:var(--donker);
    display:flex; align-items:center; justify-content:center;
  }
  .linkedin .merk svg{width:38px; height:38px; fill:var(--creme);}
  .linkedin .woord{flex:1 1 380px;}
  .linkedin h2{font-size:clamp(24px,3.2vw,34px); margin-bottom:10px;}
  .linkedin p{margin:0; color:var(--grijs); max-width:62ch;}

  .slot{background:var(--oranje); color:#fff;}
  .slot h2{font-size:clamp(30px,5vw,52px); max-width:16ch;}
  .slot p{max-width:52ch; margin:20px 0 0; color:rgba(255,255,255,.92);}
  .slot .keuze{margin-top:34px;}
  .slot .knop.vol{background:#fff; color:var(--oranje-diep);}
  .slot .knop.leeg{border-color:rgba(255,255,255,.6); color:#fff;}
  .slot .knop.leeg:hover{border-color:#fff;}

  /* De voettekst was het laatste donkere blok. Nu zand met donkere letters. */
  footer{background:var(--zand); color:var(--grijs); padding:64px 0 40px; font-size:15px;}
  .voet{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:34px;}
  @media (max-width:980px){ .voet{grid-template-columns:1fr 1fr; gap:30px;} }
  @media (max-width:560px){ .voet{grid-template-columns:1fr; gap:26px;} }
  footer h4{
    font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:15px;
    letter-spacing:.14em; color:var(--donker); margin:0 0 14px;
  }
  footer a{color:var(--grijs); text-decoration:none; display:block; margin-bottom:8px;}
  footer a:hover{color:var(--donker);}
  .streep{border-top:1px solid rgba(20,17,14,.16); margin-top:44px; padding-top:22px; font-size:13.5px;}

/* ---------------------------------------------- korte kop op de subpagina's */
.hero.kort .bak{padding-top:64px; padding-bottom:58px;}
.hero.kort{background:var(--zand); color:var(--donker); border-bottom:1px solid var(--rand);}
  .hero.kort p{color:var(--grijs);}
.hero.kort h1{font-size:clamp(34px,5.6vw,58px);}
.hero.kort p{font-size:clamp(17px,1.9vw,19px);}

/* ------------------------------------------------ beweging, terughoudend
   Alleen voor wie beweging niet heeft uitgezet. De klasse .komt wordt door
   leven.js gezet, dus zonder JavaScript staat alles gewoon zichtbaar. */
@media (prefers-reduced-motion: no-preference){
  .komt{
    opacity:0; transform:translateY(16px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
  }
  .komt.er{opacity:1; transform:none;}
  /* binnen een rij komen ze net na elkaar */
  .drie .kaart-beeld:nth-child(2).komt, .stappen .stap:nth-child(2).komt,
  .diensten .dienst:nth-child(2).komt, .cijferrij .cijfer:nth-child(2).komt{transition-delay:.09s;}
  .drie .kaart-beeld:nth-child(3).komt, .stappen .stap:nth-child(3).komt,
  .diensten .dienst:nth-child(3).komt, .cijferrij .cijfer:nth-child(3).komt{transition-delay:.18s;}
  .diensten .dienst:nth-child(4).komt, .cijferrij .cijfer:nth-child(4).komt{transition-delay:.27s;}
}

/* --------------------------------------------------- reageren op de muis */
.dienst, .vak{transition:transform .22s ease, box-shadow .22s ease;}
.dienst:hover, .vak:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(20,17,14,.08);}
.kaart-beeld img{transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.kaart-beeld:hover img{transform:scale(1.035);}
.dienst a{transition:color .15s;}
.dienst:hover a{color:var(--oranje);}

/* ------------------------------------------- filmpjes die in een lus lopen */
.plaat video, .duo video{
  width:100%; border-radius:14px; border:1px solid var(--rand); background:var(--wit);
  display:block;
}

/* ----------------------------------------------- portalknop in de kopbalk */
.portaal{
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:15px;
  border:2px solid var(--rand); color:var(--donker); padding:7px 16px;
  border-radius:999px; text-decoration:none; letter-spacing:.03em; white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.portaal:hover{border-color:var(--donker);}

/* ------------------------------------------------------------- formulier */
.formulier{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px;}
@media (max-width:760px){ .formulier{grid-template-columns:1fr;} }
.formulier .breed{grid-column:1 / -1;}
.veld{display:flex; flex-direction:column; gap:8px;}
.veld label{
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:14px;
  letter-spacing:.12em; color:var(--grijs);
}
.veld input, .veld select, .veld textarea{
  font-family:'Sora',sans-serif; font-size:16.5px; color:var(--donker);
  background:var(--wit); border:1px solid var(--rand); border-radius:10px;
  padding:14px 16px; width:100%;
}
.veld textarea{min-height:150px; resize:vertical;}
.veld input:focus, .veld select:focus, .veld textarea:focus{
  outline:none; border-color:var(--oranje); box-shadow:0 0 0 3px rgba(217,96,31,.14);
}
.formulier button{
  justify-self:start; cursor:pointer; border:0;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em;
  font-size:16px; padding:15px 30px; border-radius:999px;
  background:var(--oranje); color:#fff;
}
.formulier button:hover{background:var(--oranje-diep);}
.klein{grid-column:1 / -1; font-size:14.5px; color:var(--grijs); margin:0;}

/* ------------------------------------------------------------------ blog */
.blogrij{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
@media (max-width:880px){ .blogrij{grid-template-columns:1fr;} }
.bericht{
  background:var(--wit); border:1px solid var(--rand); border-radius:16px;
  padding:30px 28px; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.bericht:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(20,17,14,.08);}
.bericht .datum{
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:13px;
  letter-spacing:.16em; color:var(--oranje); margin-bottom:12px;
}
.bericht h3{font-size:24px; margin-bottom:12px;}
.bericht p{color:var(--grijs); font-size:16.5px; margin:0 0 18px;}
.bericht a{
  margin-top:auto; font-family:'Oswald',sans-serif; text-transform:uppercase;
  font-size:15px; letter-spacing:.06em; color:var(--donker); text-decoration:none;
  border-bottom:2px solid var(--oranje); align-self:flex-start; padding-bottom:3px;
}
.concept{
  margin-top:40px; border-left:4px solid var(--oranje); padding:10px 0 10px 24px;
  color:var(--grijs); font-size:16px; max-width:70ch;
}

/* ------------------------------------------------- de vier doelgroepen
   Vier losse links in de balk liepen over twee regels. Ze staan nu onder
   een knop. <details> en niet een eigen bouwsel: die opent met een klik,
   werkt met het toetsenbord en werkt ook zonder JavaScript. */
/* De opmaak van de vragenlijst geldt voor elke <details> op de pagina; hier
   wordt die teruggezet naar een gewone link in de balk. */
.doelgroepen{position:relative; border-bottom:0; padding:0;}
.doelgroepen>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:7px;
  font-family:'Sora',sans-serif; text-transform:none; letter-spacing:normal;
  font-size:14.5px; font-weight:500; color:var(--grijs); white-space:nowrap;
}
.doelgroepen>summary::-webkit-details-marker{display:none;}
.doelgroepen>summary::after{
  content:""; width:6px; height:6px; margin-top:-3px; margin-left:0; font-size:0;
  position:static; color:inherit;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease;
}
.doelgroepen[open]>summary::after{transform:rotate(-135deg); margin-top:2px;}
.doelgroepen>summary:hover, .doelgroepen[open]>summary{color:var(--donker);}
.doelgroepen .menu{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%);
  min-width:236px; padding:10px; background:var(--wit); border:1px solid var(--rand);
  border-radius:14px; box-shadow:0 18px 40px rgba(20,17,14,.13);
}
.doelgroepen .menu a{display:block; padding:10px 14px; border-radius:9px; font-size:15px;}
.doelgroepen .menu a:hover{background:var(--zand); color:var(--donker);}

/* ------------------------------------------------------ menu op een telefoon
   Tot nu toe verdwenen de links onder 1080 px zonder dat er iets voor in de
   plaats kwam; op een telefoon was er dus geen navigatie. */
.menuknop{display:none;}
@media (max-width:1080px){
  .menuknop{
    display:block; margin-left:auto; cursor:pointer;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em;
    font-size:14px; color:var(--donker); background:none;
    border:1.5px solid var(--rand); border-radius:999px; padding:9px 18px;
  }
  .menuknop:hover{border-color:var(--donker);}
  nav{
    position:absolute; top:100%; left:0; right:0; margin:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--creme); border-bottom:1px solid var(--rand);
    padding:6px 24px 24px; box-shadow:0 22px 40px rgba(20,17,14,.10);
  }
  nav.open{display:flex;}
  nav>a, .doelgroepen>summary{
    font-size:16.5px; padding:15px 0; border-bottom:1px solid var(--rand);
  }
  .doelgroepen .menu{
    position:static; transform:none; min-width:0; padding:4px 0 10px 16px;
    background:none; border:0; border-bottom:1px solid var(--rand); box-shadow:none;
    border-radius:0;
  }
  .doelgroepen .menu a{padding:11px 0; font-size:16px;}
  nav .portaal{
    align-self:flex-start; margin-top:20px; border-bottom:0; padding:9px 20px;
  }
}

/* ------------------------------------------ de vier doelgroepen op de homepage
   Het menu in de balk is voor wie ernaar zoekt. Wie de pagina afleest moet ze
   ook tegenkomen, dus staan ze hier als vier kaarten. */
.groepen{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px;}
@media (max-width:1000px){ .groepen{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .groepen{grid-template-columns:1fr;} }
.groepen a{
  display:flex; flex-direction:column; gap:8px; text-decoration:none;
  background:var(--wit); border:1px solid var(--rand); border-radius:14px;
  padding:24px 22px 22px; transition:transform .2s ease, box-shadow .2s ease,
  border-color .2s ease;
}
.groepen a:hover{
  transform:translateY(-3px); border-color:var(--oranje);
  box-shadow:0 14px 30px rgba(20,17,14,.08);
}
.groepen b{
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:17px;
  letter-spacing:.05em; color:var(--donker); font-weight:600;
}
.groepen span{font-size:15.5px; color:var(--grijs); line-height:1.5;}
.groepen a::after{
  content:"Lees verder"; margin-top:auto; padding-top:14px;
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:13.5px;
  letter-spacing:.12em; color:var(--oranje);
}

/* De uitlegfilm op de homepage. Niet vanzelf afspelen: er zit geluid op en de
   bezoeker bepaalt zelf of hij een minuut wil kijken. */
.plaat.film{max-width:980px; margin-top:44px;}
.speler{position:relative; border-radius:16px; overflow:hidden; background:#14110E;}
.speler video{display:block; width:100%; height:auto; aspect-ratio:16/9;}   /* zonder height:auto neemt
   de browser de vaste hoogte uit de code en zet hij balken boven en onder de film */

/* Niet vanzelf afspelen: er zit een gesproken tekst op en een film die zichzelf
   zonder geluid begint te vertellen, vertelt niets. Wel duidelijk maken dat er
   iets te zien is, en hoe lang het duurt. */
.speelknop{
  position:absolute; inset:0; width:100%; cursor:pointer; border:0; background:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; transition:opacity .2s ease;
}
.speelknop .driehoek{
  width:84px; height:84px; border-radius:50%; background:var(--oranje);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 34px rgba(20,17,14,.34);
  transition:transform .2s ease, background .2s ease;
}
.speelknop .driehoek::after{
  content:""; border-left:24px solid #fff; border-top:15px solid transparent;
  border-bottom:15px solid transparent; margin-left:6px;
}
.speelknop b{
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em;
  font-size:15px; color:#fff; background:rgba(20,17,14,.62); padding:8px 18px;
  border-radius:999px;
}
/* Een kop die op één regel hoort te staan; de standaard van 22 tekens breekt
   'wat wij doen' anders middenin. */
.titel.breed{max-width:34ch;}
.speelknop:hover .driehoek{transform:scale(1.06); background:var(--oranje-diep);}
.speler.speelt .speelknop{opacity:0; pointer-events:none;}

/* ----------------------------------------------- de veertien nachten, levend
   Vroeger een filmpje; nu tekent de pagina de vakjes zelf en vullen ze zich nacht
   voor nacht in zodra het blok in beeld komt. Zo hoeft er geen video geladen te
   worden en loopt de beweging precies op het moment dat je ernaar kijkt. */
.patroon{
  background:var(--wit); border:1px solid var(--rand); border-radius:16px;
  padding:34px 36px 28px;
}
.patroon-kop h3{
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:30px;
  line-height:1; margin:0 0 8px;
}
.patroon-kop p{color:var(--grijs); margin:0 0 26px; font-size:16.5px; max-width:70ch;}
.patroon-plaat{display:flex; gap:14px;}
.patroon-uren{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1px 0 24px; font-family:'Oswald',sans-serif; font-size:13px;
  color:var(--grijs); letter-spacing:.1em;
}
.patroon-dagen{flex:1; display:grid; grid-template-columns:repeat(14,1fr); gap:7px;}
.patroon-dag .raster{display:grid; grid-template-rows:repeat(40,1fr); gap:2px; height:360px;}
.patroon-dag .cel{background:var(--zand); border-radius:2px; transition:background .18s ease;}
.patroon-dag .cel.aan{background:var(--oranje);}
.patroon-dag .label{
  text-align:center; font-family:'Oswald',sans-serif; text-transform:uppercase;
  font-size:12px; color:var(--grijs); margin-top:7px; letter-spacing:.08em;
}
.patroon-voet{
  display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-top:24px;
  font-size:14.5px; color:var(--grijs);
}
.patroon-voet .bol{
  display:inline-block; width:12px; height:12px; border-radius:3px;
  background:var(--zand); margin-right:8px; vertical-align:-1px;
}
.patroon-voet .bol.aan{background:var(--oranje);}
.patroon-noot{margin-left:auto; font-size:13px;}
@media (max-width:700px){
  .patroon{padding:24px 18px 20px;}
  .patroon-dagen{gap:4px;}
  .patroon-dag .raster{height:240px;}
  .patroon-dag .label{font-size:10px;}
  .patroon-uren{font-size:11px;}
  .patroon-noot{margin-left:0;}
}

/* ---------------------------------------------------- de handset, levend
   Zelfde tekening als in de film, maar hier bewogen met CSS: het groene lampje
   gaat aan, het geluid komt binnen, de tijdlijn vult zich, het rode lampje sluit
   af. Eén cyclus van tien seconden, eindeloos, op elk apparaat. */
.handset{background:var(--wit); border:1px solid var(--rand); border-radius:16px;
         padding:34px 36px 30px; position:relative;}
.handset-kop h3{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:30px;
                line-height:1; margin:0 0 8px;}
.handset-kop h3 span{color:var(--oranje);}
.handset-kop p{color:var(--grijs); margin:0 0 10px; font-size:16.5px;}
.handset-toneel{position:relative; height:320px;}
.handset .toestel{position:absolute; right:8%; top:10px; width:190px; height:266px;}
.handset .toestel::before{content:""; position:absolute; inset:0; border-radius:26px;
  background:#3A3A3C; box-shadow:0 18px 40px rgba(20,17,14,.18);}
.handset .plaatje{position:absolute; left:16px; right:16px; top:16px; bottom:16px;
  border-radius:16px; background:#141416;}
.handset .hs-knop{position:absolute; top:44px; width:62px; height:62px; border-radius:50%;
  background:#0E0E10; display:flex; align-items:center; justify-content:center;}
.handset .hs-knop.start{left:23px;} .handset .hs-knop.stop{right:23px;}
.handset .bol{width:46px; height:46px; border-radius:50%;}
.handset .bol.groen{background:#1E6B38; animation:groen 10s infinite;}
.handset .bol.rood{background:#7A2418; animation:rood 10s infinite;}
.handset .label{position:absolute; top:110px; width:62px; text-align:center; color:#EDEDED;
  font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:11px; letter-spacing:.14em;}
.handset .label.start{left:23px;} .handset .label.stop{right:23px;}
.handset .merk{position:absolute; left:0; right:0; top:157px; text-align:center; color:#EDEDED;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:12px;}
.handset .merk span{display:block; margin-top:5px; font-size:9px; letter-spacing:.24em; color:#9A9A9A;}
.handset .snoer{position:absolute; left:50%; margin-left:-2px; bottom:-52px; width:4px; height:56px;
  background:#3A3A3C; border-radius:2px;}
.handset .golf{position:absolute; right:calc(8% + 200px); top:90px; width:120px; height:120px;
  animation:golf 10s infinite;}
.handset .golf i{position:absolute; left:0; top:0; border:3px solid var(--oranje);
  border-right-color:transparent; border-bottom-color:transparent; border-radius:50%;
  transform:rotate(45deg);}
.handset .golf i:nth-child(1){width:40px; height:40px; left:40px; top:40px;}
.handset .golf i:nth-child(2){width:80px; height:80px; left:20px; top:20px; opacity:.7;}
.handset .golf i:nth-child(3){width:120px; height:120px; opacity:.45;}
.handset .lijn{position:relative; height:14px; border-radius:7px; background:var(--zand);
  overflow:hidden; margin-top:14px;}
.handset .vak{position:absolute; top:0; bottom:0; left:18%; width:0; background:var(--oranje);
  animation:vak 10s infinite;}
@keyframes groen{0%,18%{background:#1E6B38; box-shadow:none;}
  22%,66%{background:#3DDC84; box-shadow:0 0 22px 6px rgba(61,220,132,.55);}
  70%,100%{background:#1E6B38; box-shadow:none;}}
@keyframes rood{0%,68%{background:#7A2418; box-shadow:none;}
  72%,84%{background:#FF4A2E; box-shadow:0 0 22px 6px rgba(255,74,46,.5);}
  88%,100%{background:#7A2418; box-shadow:none;}}
@keyframes golf{0%,20%{opacity:0; transform:scale(.6);} 26%,64%{opacity:1; transform:scale(1);}
  72%,100%{opacity:0; transform:scale(.6);}}
@keyframes vak{0%,20%{width:0;} 68%,90%{width:34%;} 100%{width:0;}}
@media (prefers-reduced-motion: reduce){
  .handset .bol, .handset .golf, .handset .vak{animation:none;}
  .handset .vak{width:34%;} .handset .golf{opacity:1;}
}
@media (max-width:700px){
  .handset{padding:24px 18px 20px;}
  .handset-toneel{height:260px;}
  .handset .toestel{right:4%; width:150px; height:210px;}
  .handset .toestel::before{border-radius:20px;}
  .handset .plaatje{left:12px; right:12px; top:12px; bottom:12px;}
  .handset .hs-knop{top:34px; width:48px; height:48px;} .handset .bol{width:36px; height:36px;}
  .handset .hs-knop.start{left:18px;} .handset .hs-knop.stop{right:18px;}
  .handset .label{top:86px; width:48px; font-size:10px;}
  .handset .label.start{left:18px;} .handset .label.stop{right:18px;}
  .handset .merk{top:124px; font-size:10px;}
  .handset .snoer{bottom:-40px; height:44px;}
  .handset .golf{right:calc(4% + 156px); top:70px; width:90px; height:90px;}
  .handset .golf i:nth-child(1){width:30px; height:30px; left:30px; top:30px;}
  .handset .golf i:nth-child(2){width:60px; height:60px; left:15px; top:15px;}
  .handset .golf i:nth-child(3){width:90px; height:90px;}
}

/* ----------------------------------------------- berichten van LinkedIn
   In eigen opmaak, zonder scripts van LinkedIn: zie tools/maak_berichten.py. */
.linkedin .bak{display:block;}
.linkedin .titel, .linkedin .lead{color:inherit;}
/* Als flex en niet als raster: met één of twee berichten staan ze dan in het midden
   in plaats van links in een rij voor drie. */
.berichten{margin-top:40px; display:flex; flex-wrap:wrap; justify-content:center; gap:24px;}
.berichten .bericht{flex:0 1 calc((100% - 48px) / 3); min-width:290px; max-width:520px;}
.berichten .bericht{padding:0 0 26px; overflow:hidden;}
.berichten .bericht .beeld{display:block; margin:0 0 20px;}
.berichten .bericht .beeld img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.berichten .bericht .datum, .berichten .bericht h3, .berichten .bericht p,
.berichten .bericht > a{margin-left:26px; margin-right:26px;}
.berichten .bericht > a{margin-top:auto;}
.linkedin .volg{display:flex; align-items:center; gap:22px; justify-content:center; margin-top:40px;}
.linkedin .volg .merk{width:44px; height:44px; flex:none;}