/* bundel: /css/dd-menu-stijl-7faae316.css /css/mm-stijl-a85b17d0.css */

/* Breed blogmenu: links de landen, rechts de soorten artikelen. */
.dd-mini.dd-blog{width:768px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px;padding:12px}
.dd-blog .bl-kol{min-width:0}
.dd-blog .fam-kop{padding:6px 12px 10px;margin-bottom:4px}
.dd-blog a{white-space:nowrap}
.dd-blog a.dd-alle{margin-bottom:4px}
@media(max-width:980px){
  #mob-nav:checked ~ nav.hoofdmenu .dd-mini.dd-blog{display:block;padding:2px 0 10px}
  .dd-blog a{white-space:normal}
}


/* Het nieuwe mobiele hoofdmenu. Zie mobiel_menu.py. Alles hieronder werkt
   alleen op schermen tot 980px; daarboven staat het menu van de laptop. */
.mm{display:none}
@media(max-width:980px){
  /* het oude, uitgeklapte paneel gaat eruit */
  #mob-nav:checked ~ nav.hoofdmenu{display:none!important}
  header.top:has(#mob-nav:checked) ~ .mm{display:flex}

  .mm{position:fixed;left:0;right:0;top:var(--mm-top,58px);bottom:0;z-index:70;
    flex-direction:column;background:#fff;border-top:1px solid #ece9e4;
    box-shadow:0 24px 40px rgba(30,30,20,.16);
    font-family:var(--tekst,Inter,system-ui,sans-serif)}
  .mm-stapel{position:relative;overflow:hidden;flex:1;min-height:0}
  .mm-laag{position:absolute;inset:0;background:#fff;overflow-y:auto;
    -webkit-overflow-scrolling:touch;transition:transform .26s cubic-bezier(.32,.72,0,1)}
  .mm-laag[data-in="0"]{transform:translateX(100%);pointer-events:none}
  .mm-laag[data-in="1"]{transform:translateX(0)}
  .mm-laag[data-in="-1"]{transform:translateX(-24%);pointer-events:none}

  /* Eén regel, in drie soorten. De ruimte links is altijd 23px breed, vlag of
     icoon, zodat alle teksten op dezelfde plek beginnen. */
  .mm-rg{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;text-align:left;
    border:0;background:none;cursor:pointer;font-family:inherit;
    padding:9px 15px;border-bottom:1px solid #f1efeb;color:var(--zwart,#20271a);
    -webkit-tap-highlight-color:transparent}
  .mm-rg:focus-visible{outline:2px solid var(--cta,#c8481f);outline-offset:-3px}
  .mm-rg .mm-tx{flex:1;min-width:0}
  .mm-rg .mm-tx b{display:block;font-weight:700;font-size:14.5px;line-height:1.35;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mm-rg .mm-tx small{display:block;font-weight:500;font-size:11.5px;line-height:1.35;
    color:var(--zacht,#68725a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    margin-top:1px}
  .mm-hand{font-family:var(--hand,'Caveat',cursive);font-weight:700;font-size:1.34em;
    line-height:1;color:var(--mos,#536144)}
  .mm-rg .mm-mrk{flex:none;width:22px;height:22px;display:flex;align-items:center;
    justify-content:center}
  .mm-rg .mm-mrk svg{display:block}

  .mm-vlag{flex:none;width:23px;height:17px;border-radius:2px;overflow:hidden;display:block;
    box-shadow:0 1px 2px rgba(0,0,0,.2)}
  .mm-vlag svg{width:100%;height:100%;display:block}
  .mm-ico{flex:none;width:23px;height:21px;display:flex;align-items:center;
    justify-content:center;color:var(--mos,#536144)}
  .mm-ico svg{width:21px;height:21px;display:block}
  .mm-ava{flex:none;width:23px;height:23px;border-radius:50%;overflow:hidden;display:block;
    box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(83,97,68,.22)}
  .mm-ava img{width:100%;height:100%;object-fit:cover;display:block}

  /* soort 1: klapt hier open */
  .mm-rg.mm-vouw{border-bottom:1px solid #ece9e4}
  .mm-vak > .mm-rg .mm-tx b{font-family:var(--kop,inherit);font-size:14.5px;line-height:1.3}
  .mm-vak > .mm-rg .mm-mrk{color:var(--zacht,#68725a)}
  .mm-vak > .mm-rg .mm-mrk svg{width:17px;height:17px;transition:transform .2s ease}
  .mm-vak[data-open="1"] > .mm-rg .mm-mrk svg{transform:rotate(180deg)}
  .mm-vak > .mm-inhoud{display:none}
  .mm-vak[data-open="1"] > .mm-inhoud{display:block}
  .mm-vak{margin-bottom:18px}
  .mm-vak .mm-inhoud .mm-rg .mm-tx b{font-size:16px}

  /* soort 2: opent een volgend scherm */
  .mm-rg.mm-sub .mm-mrk{color:var(--zacht,#68725a)}
  .mm-rg.mm-sub .mm-mrk svg{width:16px;height:16px}

  /* soort 3: gaat naar een pagina */
  .mm-rg.mm-pag .mm-tx b{font-weight:600;color:var(--ink,#414b35)}
  .mm-rg.mm-pag .mm-mrk{color:var(--mos,#536144)}
  .mm-rg.mm-pag .mm-mrk svg{width:18px;height:18px}

  /* de ene concrete voorbeeldreis onderaan een landscherm */
  .mm-rg.mm-tip{background:var(--geel-tint,#fbf1d8);border-bottom:0;
    border-top:1px solid rgba(240,208,51,.5)}
  .mm-rg.mm-tip .mm-ico{color:var(--cta,#c8481f)}
  .mm-rg.mm-tip .mm-tx small{color:var(--ink,#414b35)}

  .mm-terug{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;
    padding:11px 15px;font-family:inherit;font-size:13px;font-weight:700;
    color:var(--zacht,#68725a);cursor:pointer;border-bottom:1px solid #f1efeb}
  .mm-terug svg{width:14px;height:14px;display:block}

  /* Een landscherm vult precies het scherm: de links onderaan vast, en het
     filmpje pakt de rest. De terugknop ligt als witte tekst over het filmpje
     heen, zodat het beeld zo groot mogelijk blijft. */
  .mm-laag.mm-land{display:flex;flex-direction:column;overflow:hidden}
  .mm-laag.mm-land > .mm-terug{position:absolute;top:0;left:0;z-index:3;width:auto;
    padding:13px 16px;border-bottom:0;color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.55)}
  .mm-laag.mm-land > .mm-film{flex:1 1 auto;min-height:140px}
  .mm-laag.mm-land > .mm-rijen{flex:none}
  .mm-laag.mm-land > .mm-rijen .mm-rg:last-child{border-bottom:0}

  .mm-film{position:relative;width:100%;overflow:hidden;background:#232a1c}
  .mm-fv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    opacity:0;transition:opacity .45s ease}
  .mm-fv[data-aan="1"]{opacity:1}
  .mm-tint{position:absolute;inset:0;background:
    linear-gradient(to top,rgba(18,24,14,.88) 0%,rgba(18,24,14,.3) 40%,
      rgba(18,24,14,0) 66%),
    linear-gradient(to bottom,rgba(18,24,14,.5) 0%,rgba(18,24,14,.14) 12%,
      rgba(18,24,14,0) 22%)}
  /* de stipjes zijn knopjes: klein om te zien, groot genoeg om te tikken */
  .mm-stip{position:absolute;right:2px;top:2px;display:flex;z-index:2}
  .mm-stip button{display:flex;align-items:center;justify-content:center;
    width:26px;height:30px;padding:0;border:0;background:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .mm-stip i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);
    box-shadow:0 0 3px rgba(0,0,0,.35);transition:background .3s ease,transform .3s ease}
  .mm-stip button[data-aan="1"] i{background:#fff;transform:scale(1.15)}
  .mm-ftx{position:absolute;left:15px;right:15px;bottom:13px;color:#fff}
  .mm-fnaam{display:flex;align-items:center;gap:9px}
  .mm-fnaam .mm-vlag{width:30px;height:22px;border-radius:3px}
  .mm-fnaam b{font-family:var(--kop,inherit);font-weight:700;font-size:25px;line-height:1.05;
    letter-spacing:-.015em;text-shadow:0 1px 6px rgba(0,0,0,.35)}
  .mm-fbij{font-family:var(--hand,'Caveat',cursive);font-weight:600;font-size:16.5px;
    line-height:1.2;margin:5px 0 0;color:rgba(255,255,255,.94);
    text-shadow:0 1px 5px rgba(0,0,0,.45);min-height:20px;transition:opacity .3s ease}

  .mm-kop{display:flex;align-items:center;gap:11px;padding:15px 15px 13px}
  .mm-kop .mm-ico{width:34px;height:34px}
  .mm-kop .mm-ico svg{width:26px;height:26px}
  .mm-kop .mm-tx{min-width:0}
  .mm-kop b{display:block;font-family:var(--kop,inherit);font-weight:700;font-size:22px;
    line-height:1.1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .mm-kop small{display:block;font-size:12px;color:var(--zacht,#68725a);line-height:1.3;
    margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mm-kopje{font-family:var(--kop,inherit);font-weight:700;font-size:11.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--mos,#536144);padding:17px 15px 6px;margin:0}
  .mm-cta{display:block;margin:13px 15px 8px;padding:13px;border-radius:999px;
    background:var(--cta,#c8481f);color:#fff;font-weight:700;font-size:14.5px;
    text-align:center;text-decoration:none}
  .mm-lucht{height:14px}

  /* In het scherm Over ons staan geen vlaggen, dus daar mogen de fotootjes en
     de icoontjes samen wat groter. Ze blijven onderling even breed. */
  .mm-laag[data-mm="over"] .mm-rg .mm-ava,
  .mm-laag[data-mm="over"] .mm-rg .mm-ico{width:27px;height:27px}
  .mm-laag[data-mm="over"] .mm-rg .mm-ico svg{width:23px;height:23px}

  .mm-belknop{display:flex;align-items:center;justify-content:center;gap:10px;
    margin:15px 15px 0;padding:14px 16px;border-radius:18px;background:var(--mos,#536144);
    color:#fff;font-family:var(--kop,inherit);font-weight:700;font-size:19px;line-height:1.15;
    letter-spacing:-.01em;text-decoration:none}
  .mm-belknop svg{flex:none;width:21px;height:21px;display:block}
  .mm-beltijd{display:flex;align-items:center;justify-content:center;gap:7px;margin:9px 15px 0;
    font-size:12px;line-height:1.3;color:var(--ink,#414b35);text-align:center}
  .mm-beltijd i{flex:none;width:7px;height:7px;border-radius:50%;
    background:rgba(104,114,90,.45)}
  .mm-beltijd[data-open="1"] i{background:var(--mos,#536144);
    box-shadow:0 0 0 3px rgba(83,97,68,.16)}

  .mm-duo{display:flex;justify-content:center;align-items:flex-start;margin:20px 15px 4px}
  .mm-duo figure{margin:0;width:45%;background:#fff;border:1px solid rgba(83,97,68,.16);
    border-radius:6px;padding:7px 7px 9px;box-shadow:0 16px 28px -20px rgba(83,97,68,.65)}
  .mm-duo .mm-links{transform:rotate(-3deg);position:relative;z-index:2}
  .mm-duo .mm-rechts{transform:rotate(2.6deg);margin-left:-7%;margin-top:14px}
  .mm-duo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
    border-radius:3px}
  .mm-duo figcaption{font-family:var(--hand,'Caveat',cursive);font-weight:600;font-size:16.5px;
    line-height:1.1;color:var(--ink,#414b35);margin-top:5px;text-align:center}
}
@media(max-width:980px) and (prefers-reduced-motion:reduce){
  .mm-laag,.mm-fv,.mm-fbij,.mm-vak > .mm-rg .mm-mrk svg{transition-duration:.01ms}
}